/* ============================================================
   Conciencia Infinita — hoja de estilos compartida
   Paleta y tipografía heredadas del catálogo digital INFINITEA,
   para que las tres propiedades (catálogo, infinitea.com.co,
   concienciainfinita.life) se sientan como una sola voz.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Karla:wght@400;500;700&display=swap');

:root{
  --canopy: #0E1F16;
  --canopy-raised: #16291D;
  --canopy-line: rgba(232,237,222,0.12);
  --fern: #5C8A66;
  --fern-soft: #A9C4AC;
  --mist: #EDEFE6;
  --mist-soft: #C7CFC1;
  --sunray: #D9C27E;
  --bark: #8A6F4E;
  /* alias retenidos: algunas secciones aún usan los nombres antiguos */
  --cream: var(--canopy);
  --cream-deep: var(--canopy-raised);
  --ink: var(--mist);
  --moss: var(--mist-soft);
  --moss-soft: var(--fern-soft);
  --gold: var(--sunray);
  --forest: var(--fern);
  --forest-soft: rgba(92,138,102,0.16);
  --clay: var(--bark);
  --line: var(--canopy-line);
  --measure: 640px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--canopy);
  color: var(--mist);
  font-family: 'Karla', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h1{ font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 500; }
h2{ font-size: clamp(1.5rem, 3vw, 2rem); }
h3{ font-size: 1.15rem; font-style: italic; font-weight: 500; }

p{ margin: 0 0 1.1em; }
a{ color: inherit; }

img{ max-width: 100%; display: block; }

.measure{ max-width: var(--measure); }

/* ---------- skip link / focus ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--ink); color:var(--cream);
  padding:10px 16px; border-radius: 0 0 8px 0; z-index:200;
}
.skip-link:focus{ left:0; top:0; }
a:focus-visible, button:focus-visible, .nav-link:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- top nav ---------- */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(14,31,22,0.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap{
  max-width: 1040px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  gap: 16px;
}
.wordmark{
  font-family: 'Fraunces', serif;
  font-weight: 500; font-size: 1.15rem;
  text-decoration: none; color: var(--ink);
  white-space: nowrap;
}
.wordmark em{ font-style: italic; color: var(--gold); }

.nav-links{
  display: flex; flex-wrap: wrap; gap: 4px 2px;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.93rem;
}
.nav-links a{
  display: inline-block;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--moss);
  border-radius: 20px;
  transition: background 0.15s, color 0.15s;
}
.nav-links a:hover{ background: var(--cream-deep); color: var(--ink); }

/* en pantallas de laptop angostas, apretamos un poco el menú para ganar
   margen antes de que entre el menú hamburguesa */
@media (max-width: 1180px){
  .nav-wrap{ gap: 8px; }
  .wordmark{ font-size: 1.02rem; }
  .nav-links{ font-size: 0.85rem; gap: 2px 0; }
  .nav-links a{ padding: 8px 7px; }
}
.nav-links a[aria-current="page"]{
  color: var(--ink); font-weight: 700; background: var(--cream-deep);
}
.nav-toggle{ display:none; }

/* mobile nav — entra antes (925px) porque con las 6 pestañas más angostas
   ya no alcanzaban a caber todas en una sola fila por debajo de ese ancho */
@media (max-width: 925px){
  .nav-links{
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream); border-bottom: 1px solid var(--line);
    flex-direction: column; padding: 8px 16px 16px;
  }
  .nav-links.open{ display: flex; }
  .nav-links a{ padding: 12px 8px; border-radius: 0; }
  .nav-toggle{
    display: inline-flex; align-items:center; justify-content:center;
    width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid var(--line); background: transparent;
    cursor: pointer;
  }
  .nav-toggle svg{ width: 18px; height: 18px; }
}

/* ---------- layout primitives ---------- */
.wrap{ max-width: 1040px; margin: 0 auto; padding: 0 24px; }
section{ padding: 96px 0; }
section + section{ border-top: 1px solid var(--line); }
.section-tight{ padding: 56px 0; }

.eyebrow-plain{
  font-size: 0.85rem;
  color: var(--moss-soft);
  margin: 0 0 10px;
}

/* leaf divider: a small botanical mark instead of a generic hairline */
.leaf-divider{
  width: 34px; height: 18px; margin: 28px 0;
  color: var(--forest);
}

/* ---------- hero fotográfico a pantalla completa ---------- */
.hero-photo{
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  margin-bottom: 0;
}
.hero-photo::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,20,14,0.92) 0%, rgba(10,20,14,0.55) 32%, rgba(10,20,14,0.08) 60%, transparent 75%);
}
.hero-photo-inner{
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px 64px;
}
.hero-photo h1{
  color: var(--mist);
  max-width: 18ch;
  margin-bottom: 0.3em;
}
.hero-photo .lede{
  color: var(--mist-soft);
  font-size: 1.02rem;
  max-width: 54ch;
  margin-bottom: 1.4em;
}
.hero-links{
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  font-family: 'Fraunces', serif; font-style: italic; font-size: 1.02rem;
}
.hero-links a{ text-decoration: none; color: var(--mist); border-bottom: 1px solid var(--sunray); padding-bottom: 2px; width: fit-content; }
.hero-links a:hover{ color: var(--sunray); }

@media (max-width: 760px){
  .hero-photo{ min-height: 78vh; align-items: flex-end; }
  .hero-photo-inner{ padding: 0 20px 44px; }
}

/* banda fotográfica más corta, para secciones internas */
.photo-band{
  position: relative;
  height: 46vh;
  min-height: 320px;
  background-size: cover;
  background-position: center;
}
.photo-band::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, var(--canopy) 0%, rgba(14,31,22,0.25) 55%, rgba(14,31,22,0.05) 100%);
}
@media (max-width:760px){ .photo-band{ height: 34vh; min-height: 220px; } }

/* ---------- prose blocks (Sobre Nosotros, artículos) ---------- */
.prose p{ max-width: var(--measure); }
.prose .drop{
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--moss);
  font-size: 1.15rem;
  max-width: var(--measure);
}

blockquote{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--forest);
  margin: 1.6em 0;
  max-width: var(--measure);
  border-left: 2px solid var(--gold);
  padding-left: 20px;
}
blockquote cite{
  display:block; font-style: normal; font-family:'Karla',sans-serif;
  font-size: 0.85rem; color: var(--moss-soft); margin-top: 8px;
}

/* ---------- practice list (Activismo) ---------- */
.practice-list{
  list-style: none; margin: 1.4em 0; padding: 0;
  display: grid; gap: 12px; max-width: var(--measure);
}
.practice-list li{
  position: relative; padding-left: 26px;
}
.practice-list li::before{
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--forest);
}

.callout{
  background: var(--forest-soft);
  border-radius: 4px;
  padding: 20px 24px;
  max-width: var(--measure);
  color: var(--forest);
  font-size: 0.95rem;
}

/* ---------- cards: regalos con propósito ---------- */
.gift-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  margin: 32px 0;
}
@media (max-width: 700px){ .gift-grid{ grid-template-columns: 1fr; } }
.gift{
  border: 1px solid var(--line);
  padding: 22px 22px 24px;
  background: var(--cream-deep);
  overflow: hidden;
}
.gift-photo{
  margin: -22px -22px 16px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--line);
}
.gift-photo img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.gift h3{ margin-bottom: 6px; }
.gift p{ font-size: 0.95rem; color: var(--moss); margin-bottom: 14px; }
.gift-desc.clamped{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gift-toggle{
  display: inline-block;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--forest);
  background: none;
  border: none;
  border-bottom: 1px solid var(--forest);
  padding: 0;
  margin: -6px 0 14px;
  cursor: pointer;
}
.gift a{
  font-size: 0.9rem; text-decoration: none; color: var(--forest);
  border-bottom: 1px solid var(--forest);
}

.certificate-note{
  display: flex; gap: 16px; align-items: flex-start;
  max-width: var(--measure); margin-top: 8px;
}
.forest-badge{
  display:inline-block; font-size:10.5px; font-weight:700;
  color:var(--forest); background:var(--forest-soft);
  border-radius:8px; padding:2px 8px; margin:2px 0 6px;
}

.certificate-note .mark{
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--forest); color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-size: 1.1rem;
}

/* ---------- audio placeholder (Sendero) ---------- */
.voice-note{
  display: flex; align-items: center; gap: 14px;
  border: 1px dashed var(--line);
  padding: 14px 18px;
  max-width: var(--measure);
  font-size: 0.88rem; color: var(--moss-soft);
  margin: 18px 0 34px;
}
.voice-note .dot{ width:8px; height:8px; border-radius:50%; background: var(--gold); flex-shrink:0; }

.article{ margin-bottom: 56px; }
.article .kicker{ font-family:'Fraunces', serif; font-style: italic; color: var(--gold); margin-bottom: 6px; }
.article .subkicker{ font-size: 0.85rem; letter-spacing: 0.03em; color: var(--moss-soft); margin-bottom: 20px; }
.article .meta{ font-size: 0.85rem; color: var(--moss-soft); margin: -2px 0 14px; }

/* ---------- promo banner + cta button (Plata Coloidal) ---------- */
.promo-banner{
  background: var(--forest); color: var(--cream);
  border-radius: 6px; max-width: var(--measure);
  margin: 0 0 36px;
  display:flex; flex-wrap:wrap; overflow:hidden;
}
.promo-banner-photo{
  flex: 1 1 240px; min-width: 240px; max-width: 320px;
  min-height: 220px;
  background-size: cover; background-position: center;
}
.promo-banner-body{
  flex: 2 1 320px; padding: 26px 28px;
}
.promo-banner .badge{
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing: 0.06em;
  color: var(--forest); background: var(--gold);
  border-radius: 20px; padding: 3px 12px; margin-bottom: 12px;
}
.promo-banner p{ font-size: 0.98rem; line-height: 1.6; margin-bottom: 16px; }
.promo-banner p:last-child{ margin-bottom: 0; }
@media (max-width: 560px){
  .promo-banner{ flex-direction: column; }
  .promo-banner-photo{ max-width: none; min-height: 180px; }
}
.cta-button{
  display:inline-block; text-decoration:none; font-family:'Karla',sans-serif;
  font-weight:700; font-size:0.92rem; letter-spacing:0.02em;
  background: var(--gold); color: var(--forest);
  border-radius: 30px; padding: 12px 26px;
  transition: opacity 0.15s;
}
.cta-button:hover{ opacity: 0.85; }

.plata-feature{
  display: flex; align-items: center; gap: 36px;
  background: var(--forest); color: var(--cream);
  border-radius: 10px; overflow: hidden;
  text-decoration: none; margin: 28px 0 44px;
}
.plata-feature-text{ flex: 1 1 auto; padding: 30px 8px 30px 34px; }
.plata-feature-text .eyebrow{
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--forest); background: var(--gold);
  display: inline-block; border-radius: 20px; padding: 3px 12px; margin-bottom: 14px;
}
.plata-feature-text h3{
  font-family: 'Fraunces', serif; font-size: 1.4rem; color: var(--cream);
  margin-bottom: 10px; line-height: 1.25;
}
.plata-feature-text p{
  font-size: 0.95rem; line-height: 1.55; color: var(--cream); opacity: 0.9;
  max-width: 420px; margin-bottom: 20px;
}
.plata-feature-photo{
  flex: 0 0 300px; align-self: stretch;
  display: flex; justify-content: flex-end;
}
.plata-feature-photo img{
  width: 100%; height: 100%; max-height: 320px; object-fit: cover; display: block;
}
@media (max-width: 760px){
  .plata-feature{ flex-direction: column-reverse; margin: 24px 0 36px; }
  .plata-feature-text{ padding: 24px; }
  .plata-feature-text p{ max-width: none; }
  .plata-feature-photo{ flex-basis: auto; width: 100%; }
  .plata-feature-photo img{ max-height: 220px; }
}
.usos-section h3{ margin: 36px 0 14px; font-size: 1.15rem; color: var(--forest); }
.usos-list{ list-style:none; margin: 0 0 1.2em; padding: 0; display:grid; gap: 10px; max-width: var(--measure); }
.usos-list li{ position:relative; padding-left: 28px; font-size: 0.95rem; line-height:1.55; }
.usos-list li .num{
  position:absolute; left:0; top:0; color: var(--gold); font-weight:700; font-size:0.85rem;
}
.testimonial-card{
  background: var(--cream-deep); border-left: 3px solid var(--gold);
  padding: 22px 24px; max-width: var(--measure); margin: 20px 0 10px;
  font-size: 0.95rem; line-height: 1.65;
}
.testimonial-card .who{ margin-top:14px; font-style: italic; color: var(--moss-soft); font-size:0.88rem; }
.testimonial-note{ font-size: 0.82rem; color: var(--moss-soft); max-width: var(--measure); margin-top: 10px; }
.coming-soon-box{
  border: 1px dashed var(--line); border-radius: 4px; padding: 18px 22px;
  max-width: var(--measure); color: var(--moss-soft); font-size: 0.9rem; margin: 10px 0 30px;
}

.video-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 30px 24px; max-width: var(--measure); margin: 14px 0 30px; }
.video-card{ margin:0; }
.video-frame{ position:relative; aspect-ratio:9/16; background:#000; border-radius:4px; overflow:hidden; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-card figcaption{ margin-top:10px; font-size:0.92rem; line-height:1.5; }
.video-card figcaption strong{ display:block; color: var(--ink); font-family:'Fraunces',serif; font-weight:600; }
.video-card figcaption span{ color: var(--moss-soft); font-size:0.86rem; }

/* ---------- news / pending ---------- */
.news-placeholder{
  border: 1px solid var(--line);
  padding: 36px;
  text-align: left;
  max-width: var(--measure);
}

/* ---------- noticias ---------- */
.noticia{ border:1px solid var(--line); border-left:3px solid var(--sunray); padding:32px 36px; max-width: var(--measure); margin-top:28px; background: var(--canopy-raised); }
.noticia h3{ font-family:'Fraunces',serif; font-weight:500; font-size:1.55rem; line-height:1.25; margin:6px 0 18px; color: var(--mist); }
.noticia-meta{ margin:0; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--sunray); }
.noticia-nos{ margin:26px 0 22px; padding:18px 22px; background: var(--forest-soft); }
.noticia-nos b{ display:block; font-family:'Fraunces',serif; font-weight:600; color: var(--fern-soft); margin-bottom:6px; }
.noticia-nos p{ margin:0; }
.noticia-enlaces{ display:flex; flex-wrap:wrap; gap:12px 26px; margin:0; }
.noticia-enlaces a{ color: var(--sunray); text-underline-offset:3px; }
@media (max-width:600px){ .noticia{ padding:24px 20px; } .noticia h3{ font-size:1.3rem; } }

/* ---------- footer ---------- */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 48px 0 56px;
  font-size: 0.88rem;
  color: var(--moss-soft);
}
.marca-banda{
  position: relative;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.marca-banda::before{
  content: "";
  position: absolute; inset: 0;
  background: rgba(10,18,13,0.38);
}
.marca-banda-logo{
  position: relative;
  width: 210px;
  height: auto;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.35));
}
@media (max-width:760px){
  .marca-banda{ height: 180px; }
  .marca-banda-logo{ width: 150px; }
}
.footer-row{
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.footer-row a{ color: var(--moss); text-decoration: none; }
.footer-row a:hover{ color: var(--ink); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition: none !important; }
}

/* ---------- guía descargable (Plata Coloidal) ---------- */
.guia-descarga{display:grid;grid-template-columns:1.3fr 1fr;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:18px 0 40px;background:var(--canopy-raised)}
.guia-descarga-txt{padding:30px}
.guia-descarga-foto{background-size:cover;background-position:center;min-height:260px}
.guia-form{display:grid;gap:10px;margin-top:14px}
.guia-form input[name=nombre],.guia-form input[name=contacto]{padding:12px 14px;border-radius:6px;border:1px solid var(--line);background:rgba(237,239,230,.06);color:var(--mist);font:inherit}
.guia-check{font-size:.85rem;opacity:.85;display:flex;gap:8px;align-items:flex-start}
.guia-form .cta-button{border:0;cursor:pointer;font:inherit;justify-self:start}
@media (max-width:720px){.guia-descarga{grid-template-columns:1fr}.guia-descarga-foto{min-height:180px;order:-1}}

/* Página del QR de la etiqueta de plata coloidal */
.qr-valores{letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;color:var(--sunray);margin:0 0 10px}
.qr-acciones{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0 10px}
.qr-acciones a{display:flex;flex-direction:column;gap:4px;padding:18px 18px 16px;border:1px solid var(--line);border-radius:10px;background:var(--canopy-raised);text-decoration:none;color:var(--mist);transition:border-color .2s}
.qr-acciones a:hover{border-color:var(--sunray)}
.qr-acciones b{font-size:1.05rem;color:var(--sunray);font-weight:600}
.qr-acciones span{font-size:.88rem;color:var(--mist-soft);line-height:1.4}
@media (max-width:760px){.guia-descarga{grid-template-columns:1fr}.guia-descarga-foto{min-height:200px}}
.qr-cuidado{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.qr-cuidado li{position:relative;padding:12px 16px 12px 40px;border:1px solid var(--line);border-radius:8px;background:var(--canopy-raised);color:var(--mist)}
.qr-cuidado li:before{content:"";position:absolute;left:16px;top:50%;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--sunray)}

.video-yt{position:relative;aspect-ratio:16/9;max-width:var(--measure);border-radius:10px;overflow:hidden;background:#000;margin:1.4em 0}
.video-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}