/* esencia.com.es v2 · hoja de estilos (7-nov-2026, noche). Identidad: docs/marca/GUIA_MARCA_ESENCIA.md.
   v2: la web le habla a una mujer y vende una oferta (docs/web/PROPUESTA_WEB_V2.md). Lo nuevo sobre la v1: la foto de
   Eliana en pétalo con su eco dorado (portada), la ficha del Círculo como un camino de cuatro puntos de la látice unidos
   por una línea, los datos «por confirmar» como puntos aún sin encender, el retrato redondo, los botones de WhatsApp con
   su burbuja, y el estilo de documento de las propuestas (tablas que se desplazan por dentro, nunca la página).
   Los contrastes están medidos en la guía y en la sesión del 7-nov: el café #504128 sobre marfil da 9,19; la terracota
   6,07; el bronce #977339 da 4,05 y por eso SOLO va en el h1 de la portada (texto grande); el dorado #c2965c da 2,50 y
   NUNCA es texto: solo líneas, puntos de la látice y adornos. La tinta suave #665a3f sobre el papel #f7eedc da 5,88; la
   tinta #33291a sobre la mostaza #d19e32 da 5,87. En el pie oscuro, el claro #e0e0d5 sobre #33291a da 10,72.
   Cero JavaScript, cero recursos de terceros: las fuentes salen de /fuentes/ (OFL), el girasol va inline en el HTML y la
   burbuja de WhatsApp es un SVG de doce líneas incrustado acá como máscara. */
@font-face{font-family:"Cormorant Garamond";src:url(/fuentes/cormorant.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fuentes/cormorant-italica.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Raleway";src:url(/fuentes/raleway.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Marcellus";src:url(/fuentes/marcellus.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  color-scheme:light;
  --marfil:#fdf6ea; --papel:#f7eedc; --papel-2:#f0e3cb; --linea:#e6d8bc;
  --cafe:#504128; --cafe-2:#33291a; --tinta-suave:#665a3f;
  --terracota:#924931; --bronce:#977339; --bronce-oscuro:#7d5e2a;
  --mostaza:#d19e32; --mostaza-tinta:#33291a; --mostaza-borde:#b98a26;
  --dorado:#c2965c; --oliva:#beb170; --semilla:#724737;
  --claro:#e0e0d5; --rosa:#e3b39f;
  --f-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-body:"Raleway","Segoe UI",system-ui,sans-serif;
  --f-marca:"Marcellus","Cormorant Garamond",Georgia,serif;
  --ancho:68rem; --texto:38rem; --lado:16px;
  --petalo:28px 8px 28px 8px;
  --petalo-grande:120px 22px 120px 22px;
  /* la látice: siete puntos que se encienden hacia el centro · adorno, no texto */
  --p3:radial-gradient(circle,#e1d2b1 2.2px,transparent 2.9px);
  --p2:radial-gradient(circle,#d4ba8b 2.5px,transparent 3.2px);
  --p1:radial-gradient(circle,#c2965c 2.9px,transparent 3.6px);
  --p0:radial-gradient(circle,#d19e32 3.6px,transparent 4.3px);
}
@media (min-width:48em){:root{--lado:32px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--marfil);color:var(--cafe);font:17px/1.68 var(--f-body);overflow-x:hidden;overflow-wrap:break-word}
img,svg{max-width:100%}
a{color:var(--terracota);text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--dorado)}
a:hover{text-decoration-color:currentColor}
a:focus-visible,summary:focus-visible{outline:3px solid var(--terracota);outline-offset:3px;border-radius:4px}
.saltar{position:absolute;left:-999px;top:8px;background:var(--cafe);color:var(--marfil);padding:10px 16px;border-radius:8px;z-index:9}
.saltar:focus{left:16px}
.franja-borrador{margin:0;padding:7px 16px;text-align:center;background:var(--mostaza);color:var(--mostaza-tinta);font-weight:700;font-size:13px;line-height:1.4;letter-spacing:.03em}
[id]{scroll-margin-top:24px}

/* ---------- la cabecera: el girasol y ESENCIA en versales espaciadas, como en el logo ---------- */
.cabecera{max-width:var(--ancho);margin:0 auto;padding:14px var(--lado) 10px;display:flex;flex-wrap:wrap;gap:4px 28px;align-items:center;justify-content:space-between;position:relative}
.cabecera::after{content:"";position:absolute;left:var(--lado);right:var(--lado);bottom:0;height:1px;background:linear-gradient(90deg,var(--dorado),var(--linea) 55%,transparent)}
.marca{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-family:var(--f-marca);font-size:17px;letter-spacing:.36em;text-transform:uppercase;color:var(--bronce-oscuro);text-decoration:none}
.girasol svg{width:44px;height:44px;display:block}
.cabecera nav{display:flex;flex-wrap:wrap;gap:0 14px}
.cabecera nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--cafe);text-decoration:none;font-size:14.5px;font-weight:500;padding:0 2px;border-bottom:2px solid transparent;margin-bottom:-1px}
.cabecera nav a:hover{border-bottom-color:var(--linea)}
.cabecera nav a[aria-current="page"]{font-weight:700;border-bottom-color:var(--mostaza)}
@media (min-width:48em){.cabecera{padding:20px var(--lado) 14px;gap:10px 28px}.cabecera nav{gap:0 18px}.cabecera nav a{font-size:15px;padding:0 3px}}

/* ---------- la portada de cada página: texto a la izquierda, el girasol (o la látice) a la derecha ---------- */
main{max-width:var(--ancho);margin:0 auto;padding:20px var(--lado) 72px}
.portada{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 48px;align-items:center;padding-top:16px}
.portada-arte{display:none;justify-self:end;align-self:center}
.portada-arte svg{display:block;width:clamp(150px,22vw,250px);height:auto}
@media (min-width:56em){
  .portada{grid-template-columns:minmax(0,1fr) auto;padding-top:28px}
  .portada-arte{display:block}
  .inicio .portada-arte svg{width:clamp(300px,34vw,440px)}
}
.inicio .portada-arte{display:block;justify-self:center}
@media (max-width:55.99em){.inicio .portada-arte{order:-1;margin-top:8px}.inicio .portada-arte svg{width:124px;margin:0 auto}}
.eyebrow{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:clamp(20px,2vw,24px);line-height:1.2;color:var(--terracota);margin:24px 0 10px}
.eyebrow::before{content:"";display:inline-block;width:28px;height:1px;background:var(--dorado);vertical-align:.32em;margin-right:12px}
h1{font-family:var(--f-display);font-weight:600;font-size:clamp(42px,8.8vw,82px);line-height:.98;letter-spacing:-.01em;margin:0 0 22px;max-width:18ch;text-wrap:balance}
.inicio h1{color:var(--bronce)}
.entrada{font-size:clamp(18px,1.55vw,21px);line-height:1.6;max-width:var(--texto);margin:0 0 22px;color:var(--cafe)}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:11px 26px;border-radius:24px 9px 24px 9px;border:1px solid var(--bronce);color:var(--cafe);background:transparent;font-weight:600;font-size:16px;text-decoration:none;transition:background-color .15s,box-shadow .15s}
.boton:hover{background:var(--papel-2)}
/* la acción principal: mostaza, más peso, y la burbuja de WhatsApp cuando el enlace va a wa.me */
.boton.primario{background:var(--mostaza);color:var(--mostaza-tinta);border-color:var(--mostaza-borde);font-weight:700;padding:11px 28px;box-shadow:0 2px 0 var(--mostaza-borde)}
.boton.primario:hover{background:#c9951f;box-shadow:0 1px 0 var(--mostaza-borde)}
.boton.primario[href^="https://wa.me/"]::before{content:"";flex:0 0 19px;width:19px;height:19px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5C6.7 2.5 2.5 6.3 2.5 11c0 2.3 1 4.4 2.7 5.9L4 21.5l5-1.8c.9.2 1.9.4 3 .4 5.3 0 9.5-3.8 9.5-8.5S17.3 2.5 12 2.5zM8 12.3a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm4 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm4 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5C6.7 2.5 2.5 6.3 2.5 11c0 2.3 1 4.4 2.7 5.9L4 21.5l5-1.8c.9.2 1.9.4 3 .4 5.3 0 9.5-3.8 9.5-8.5S17.3 2.5 12 2.5zM8 12.3a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm4 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm4 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- la portada con la foto de Eliana (Inicio y /eliana/): el pétalo, su eco dorado y el girasol de sello ----------
   En el teléfono la foto se intercala entre el título y la entrada (orden visual; el HTML sigue h1 → entrada). */
.portada.con-foto{align-items:start}
.portada-foto{position:relative;isolation:isolate;margin:6px 0 10px}
.portada-foto img{display:block;width:100%;height:auto;border-radius:var(--petalo-grande);object-fit:cover}
.portada-foto::before{content:"";position:absolute;inset:0;transform:translate(12px,12px);border:1px solid var(--dorado);border-radius:var(--petalo-grande);z-index:-1}
.portada-foto::after{content:"";position:absolute;inset:0;border-radius:var(--petalo-grande);box-shadow:inset 0 0 0 1px rgba(253,246,234,.55);pointer-events:none}
.portada-foto-sello{position:absolute;left:-6px;bottom:18px;width:64px;height:64px;padding:8px;background:var(--marfil);border-radius:50%;box-shadow:0 0 0 1px var(--dorado)}
.portada-foto-sello svg{display:block;width:100%;height:100%}
@media (max-width:47.99em){
  .con-foto .portada-texto{display:contents}
  .con-foto .eyebrow{order:1}.con-foto h1{order:2}.con-foto .portada-foto{order:3}.con-foto .entrada{order:4}.con-foto .aviso{order:5}.con-foto .acciones{order:6}
  .con-foto h1{font-size:clamp(36px,9.4vw,52px);margin-bottom:8px}
  .con-foto .portada-foto{width:min(100%,19rem);justify-self:end;margin:10px 12px 22px 0}
  .con-foto .entrada{margin-top:0}
}
@media (min-width:48em){
  .portada.con-foto{grid-template-columns:minmax(0,1.15fr) minmax(16rem,.85fr);column-gap:clamp(32px,5vw,56px);align-items:center;padding-top:28px}
  .con-foto h1{font-size:clamp(40px,4.7vw,62px);max-width:22ch}
  .con-foto .portada-foto{margin:8px 14px 14px 0}
  .portada-foto-sello{width:80px;height:80px;left:-14px;bottom:26px;padding:10px}
}

/* ---------- el ritmo de las secciones: aire y, antes de cada una, los siete puntos de la látice ---------- */
section{margin:64px 0 0;max-width:var(--ancho)}
section::before{content:"";display:block;width:104px;height:10px;margin:0 0 20px;background-image:var(--p3),var(--p2),var(--p1),var(--p0),var(--p1),var(--p2),var(--p3);background-size:10px 10px;background-repeat:no-repeat;background-position:0 50%,16px 50%,32px 50%,48px 50%,64px 50%,80px 50%,96px 50%}
h2{font-family:var(--f-display);font-weight:600;font-size:clamp(30px,3.6vw,42px);line-height:1.08;margin:0 0 14px;text-wrap:balance;max-width:24ch}
h3{font-family:var(--f-display);font-weight:600;font-size:26px;line-height:1.15;margin:0 0 8px}
section > p,section > ul,.ficha-cierre > p,.ficha-cierre > ul{max-width:var(--texto)}
p{margin:0 0 1em}
ul{padding-left:1.15em}
li{margin:8px 0;padding-left:.2em}
li::marker{color:var(--dorado)}
.cita{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:clamp(22px,2.1vw,27px);line-height:1.35;border-left:2px solid var(--dorado);padding-left:20px;margin:0 0 22px}

/* ---------- tarjetas con forma de pétalo ---------- */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:18px;margin:24px 0 0}
.tarjeta{background:var(--papel);border:1px solid rgba(194,150,92,.5);border-radius:var(--petalo);padding:26px 26px 24px;min-width:0}
.tarjeta h3 a{display:inline-block;padding:7px 0;margin:-7px 0;color:var(--terracota);text-decoration-color:var(--dorado)}
.tarjeta h3 a:hover{text-decoration-color:currentColor}
.tarjeta p{margin:0;color:var(--tinta-suave);font-size:16px}

.aviso{max-width:var(--texto);background:#f3e4d8;border-left:4px solid var(--terracota);padding:16px 20px;border-radius:0 24px 8px 0;font-size:16px;margin:0 0 20px}
/* el enlace a las líneas de ayuda va en medio de la frase, pero lleva a ayuda en crisis: 44 px de área táctil (revisor-ux,
   11-nov), sin mover la línea de texto */
.aviso a{font-weight:600;display:inline-block;padding:12px 0;margin:-12px 0}
.enlaces{list-style:none;padding:0;margin:16px 0 0;max-width:var(--texto)}
.enlaces li{margin:0;padding:0;border-bottom:1px solid var(--linea)}
.enlaces li:first-child{border-top:1px solid var(--linea)}
.enlaces a{display:block;padding:12px 0;min-height:44px;font-weight:600;text-decoration:none}
.enlaces a:hover{color:var(--cafe);text-decoration:underline}

/* ---------- la ficha del Círculo: el camino de cuatro encuentros, los datos y lo que incluye ----------
   Cada encuentro es un punto de la látice (el número, en mostaza) y una línea dorada lo une con el siguiente. */
.ficha{margin:8px 0 0}
.encuentros{list-style:none;margin:0;padding:0}
.encuentro{position:relative;margin:0;padding:0 0 26px 60px;min-width:0}
.encuentro:last-child{padding-bottom:0}
.encuentro:not(:last-child)::before{content:"";position:absolute;left:20px;top:46px;bottom:-4px;width:1px;background:var(--dorado)}
.encuentro .num{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--mostaza);color:var(--mostaza-tinta);box-shadow:0 0 0 4px rgba(233,194,77,.28);font-family:var(--f-display);font-weight:600;font-size:21px;line-height:40px;text-align:center;font-variant-numeric:lining-nums}
.encuentro h3{display:inline;font-size:27px;line-height:1.15;margin:0;vertical-align:baseline}
.encuentro .mov{display:inline;margin:0 0 0 10px;font-family:var(--f-display);font-style:italic;font-weight:500;font-size:19px;color:var(--terracota);white-space:nowrap}
.encuentro .mov::before{content:"·";margin-right:10px;color:var(--dorado);font-style:normal}
.encuentro p{margin:0}
.encuentro .mov + p{display:block;margin-top:4px;font-size:16px;color:var(--tinta-suave);max-width:30rem;line-height:1.55}
/* los datos: etiqueta chica arriba, el valor en Cormorant; «por confirmar» va en cursiva con un punto aún sin encender */
.datos{list-style:none;padding:20px 0 0;margin:26px 0 0;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:14px 34px}
.datos li{margin:0;padding:0;min-width:0}
.datos strong{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:2px}
.datos .dato{font-family:var(--f-display);font-weight:600;font-size:22px;line-height:1.2;font-variant-numeric:lining-nums}
.datos .pendiente{font-weight:500;font-style:italic;color:var(--tinta-suave)}
.datos .pendiente::before{content:"";display:inline-block;width:9px;height:9px;border:1.5px solid var(--dorado);border-radius:50%;margin-right:8px;vertical-align:.08em}
.incluye-titulo{margin:34px 0 10px;font-size:24px}
.incluye{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:10px 24px;max-width:none}
.incluye li{margin:0;padding:10px 14px 10px 18px;background:var(--papel);border-radius:var(--petalo);border:1px solid rgba(194,150,92,.35);font-size:16px;position:relative}
.incluye li::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--mostaza)}
.cuotas{margin:22px 0 18px;max-width:var(--texto);font-family:var(--f-display);font-style:italic;font-weight:500;font-size:21px;line-height:1.35}
.ficha + .ficha-cierre{margin-top:28px}
/* la sección protagonista de Inicio: un panel de papel con su luz de girasol; en escritorio, título y cierre a la izquierda
   y el camino de encuentros a la derecha */
.destacada{margin-top:56px;padding:30px var(--lado) 34px;background:radial-gradient(circle at 100% 0,rgba(233,194,77,.26),transparent 46%),var(--papel);border:1px solid rgba(194,150,92,.5);border-radius:48px 12px 48px 12px}
.destacada h2{font-size:clamp(34px,4vw,48px)}
.destacada .ficha{margin-top:14px}
.destacada .encuentro .mov + p{color:var(--cafe)}
.destacada .cita{margin-top:0}
@media (min-width:56em){
  .destacada{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-rows:auto auto 1fr;column-gap:56px;padding:40px 48px 44px;margin-top:72px}
  .destacada::before{grid-column:1;grid-row:1}
  .destacada h2{grid-column:1;grid-row:2;margin-bottom:28px}
  .destacada .ficha{grid-column:2;grid-row:1/span 3;margin:0;align-self:start}
  .destacada .ficha-cierre{grid-column:1;grid-row:3;align-self:stretch;display:flex;flex-direction:column}
  .destacada .ficha-cierre .acciones{margin-top:auto;padding-top:28px}
  .destacada .datos{margin-top:30px}
}
/* en /circulo/, con sitio de sobra, los cuatro encuentros van en fila y la línea los une de izquierda a derecha */
@media (min-width:60em){
  section:not(.destacada) .encuentros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px}
  section:not(.destacada) .encuentro{padding:58px 0 0}
  section:not(.destacada) .encuentro:not(:last-child)::before{left:46px;right:-28px;top:20px;bottom:auto;width:auto;height:1px}
  section:not(.destacada) .encuentro h3{display:block}
  section:not(.destacada) .encuentro .mov{display:block;margin:0 0 6px}
  section:not(.destacada) .encuentro .mov::before{content:none}
}

/* ---------- el retrato redondo de Eliana en «Quién te acompaña»: el texto lo rodea ---------- */
.retrato{display:flow-root}
.foto-seccion{float:left;width:clamp(124px,30vw,208px);height:auto;border-radius:50%;shape-outside:circle(50% at 50% 50%);shape-margin:18px;margin:4px 22px 10px 0;border:3px solid var(--marfil);box-shadow:0 0 0 1px var(--dorado),0 10px 28px -14px rgba(80,65,40,.45)}
@media (min-width:48em){.foto-seccion{margin:6px 34px 12px 0}}

/* ---------- las líneas de ayuda: el número es lo que importa ---------- */
.lineas{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:14px}
.lineas li{background:var(--papel);border:1px solid rgba(194,150,92,.5);border-radius:var(--petalo);padding:20px 24px 18px;margin:0;max-width:var(--texto);min-width:0}
.lineas strong{display:block;font-family:var(--f-display);font-weight:600;font-size:24px;line-height:1.15;margin-bottom:4px}
.lineas .tel{font-family:var(--f-display);font-weight:600;font-size:34px;line-height:1.1;font-variant-numeric:lining-nums;text-decoration:none;display:inline-block;min-width:44px;padding:4px 0}
.lineas .tel:hover{text-decoration:underline}
.lineas .wa{display:inline-block;padding:8px 0;font-weight:600;margin-left:14px}
.lineas small{display:block;color:var(--tinta-suave);font-size:13px;line-height:1.5;margin-top:8px;overflow-wrap:anywhere}

/* ---------- preguntas frecuentes ---------- */
.faq{margin-top:40px;max-width:var(--texto)}
.faq::before{display:none}
.faq details{border-bottom:1px solid var(--linea)}
.faq details:first-child{border-top:1px solid var(--linea)}
.faq summary{cursor:pointer;list-style:none;display:flex;gap:16px;align-items:baseline;padding:16px 0;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:#d4ba8b;position:relative;top:-2px}
.faq details[open] summary::before{background:var(--mostaza);box-shadow:0 0 0 4px rgba(233,194,77,.35)}
.faq summary h2{display:inline;font-size:clamp(22px,2vw,25px);margin:0;max-width:none}
.faq details p{margin:0 0 18px 26px}

/* ---------- el pie, cálido: el tema oscuro de las portadas de Eliana ---------- */
.pie{position:relative;overflow:hidden;margin-top:24px;background:linear-gradient(180deg,var(--cafe) 0%,var(--cafe-2) 100%);color:var(--claro);padding:48px var(--lado) 40px;font-size:15px;line-height:1.6}
.pie-arte{position:absolute;right:-110px;bottom:-130px;width:300px;height:300px;opacity:.14;pointer-events:none}
.pie-arte svg{width:100%;height:100%;display:block}
@media (min-width:56em){.pie-arte{right:-70px;bottom:-110px;width:360px;height:360px}}
.pie-cuerpo{position:relative;max-width:var(--ancho);margin:0 auto}
.pie nav{display:flex;flex-wrap:wrap;gap:4px 24px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid rgba(194,150,92,.45)}
.pie nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--marfil);font-weight:600;text-decoration:none;border-bottom:1px solid transparent}
.pie nav a:hover{border-bottom-color:var(--dorado)}
.pie p{margin:0 0 8px;max-width:46rem}
.pie a{color:var(--marfil);text-decoration-color:var(--dorado)}
.pie p a{display:inline-block;padding:13px 0;margin:-13px 0}
.pie .pie-aviso{color:var(--rosa)}

/* ---------- esencia.consulting en esencia.com.es (11-nov-2026, F1) ----------
   Lo que trae el sitio de Canva de Eliana: la portada grande con serifa, los pilares, los tres caminos con su etiqueta y
   su botón, las bandas verde oscuro con el título dorado, el «¡Me encantaría saber de ti!» al final y el WhatsApp fijo.
   Contrastes medidos el 11-nov: el marfil #fdf6ea sobre el verde #2f3c39 da 10,7; el dorado #e9c24d sobre el verde, 6,73;
   el rosa #e3b39f sobre el verde, 6,14; la tinta #33291a sobre el rosa del botón #c48a7a, 4,93 (el blanco sobre ese rosa,
   como lo usa esencia.consulting, da 2,89 y no se usa); el blanco sobre el verde de WhatsApp #1a6b43, 6,51; la terracota
   sobre el rosa claro #f3e4d8, 5,25. Las secciones aparecen al bajar solo con CSS (animation-timeline), y nada se mueve
   si la persona pidió menos movimiento. */
:root{--verde:#2f3c39; --rosa-boton:#c48a7a; --rosa-boton-2:#b87b6a; --oro:#e9c24d; --rosa-claro:#f3e4d8}

/* la portada grande de Inicio: el título a dos líneas y la foto de Eliana alta, en su pétalo */
.portada.grande h1{font-size:clamp(46px,8.6vw,92px);line-height:.95;max-width:11ch}
@media (min-width:48em){
  .portada.grande{grid-template-columns:minmax(0,1.2fr) minmax(15rem,.8fr)}
  .portada.grande h1{font-size:clamp(52px,6.4vw,92px)}
  .portada.grande .portada-foto{max-width:24rem;justify-self:end}
}
@media (max-width:47.99em){.portada.grande .portada-foto{width:min(64%,14rem)}}

/* la primera frase de «¿Qué es Esencia?» como en esencia.consulting: grande y en serifa */
.que-es > p:first-of-type{font-family:var(--f-display);font-weight:500;font-size:clamp(25px,2.7vw,33px);line-height:1.3;max-width:36rem;color:var(--cafe-2)}

/* los pilares: tres tarjetas numeradas con un punto de la látice */
.pilares .tarjetas{counter-reset:pilar}
.pilares .tarjeta{position:relative;padding-top:70px;background:linear-gradient(180deg,var(--papel),var(--marfil) 85%)}
.pilares .tarjeta::before{counter-increment:pilar;content:counter(pilar);position:absolute;top:22px;left:26px;width:36px;height:36px;border-radius:50%;background:var(--mostaza);color:var(--mostaza-tinta);box-shadow:0 0 0 4px rgba(233,194,77,.28);font:600 20px/36px var(--f-display);text-align:center;font-variant-numeric:lining-nums}
.pilares .tarjeta h3{font-size:30px}

/* una tarjeta con etiqueta y botón (los caminos), y la ficha de un producto: el botón queda abajo, a la misma altura */
.tarjeta{display:flex;flex-direction:column}
.tarjeta .etiqueta{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--terracota)}
/* (0,2,0): le gana a «.tarjeta p» y «.producto p», que le quitarían el margen automático que la baja al fondo */
.tarjeta .tarjeta-accion,.producto .tarjeta-accion{margin:auto 0 0;padding-top:18px}
.tarjeta-accion .boton{background:var(--rosa-boton);border-color:var(--rosa-boton);color:var(--mostaza-tinta);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:11px 24px}
.tarjeta-accion .boton:hover{background:var(--rosa-boton-2)}
.caminos .tarjeta{border-radius:48px 12px 48px 12px;padding:30px 28px 26px}
.caminos .tarjeta h3{font-size:clamp(27px,2.4vw,31px)}

/* los pasos de un proceso: los puntos de la látice en columna */
.pasos{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:16px;max-width:44rem}
.pasos li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start;margin:0;padding:0}
.pasos .num{width:40px;height:40px;border-radius:50%;background:var(--mostaza);color:var(--mostaza-tinta);box-shadow:0 0 0 4px rgba(233,194,77,.28);font:600 21px/40px var(--f-display);text-align:center;font-variant-numeric:lining-nums}
.pasos p{margin:7px 0 0}
.pasos + p{margin-top:22px}

/* los productos del catálogo: el estado arriba (verde si se vende hoy), el precio solo si está decidido */
.productos{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:18px;margin:24px 0 0}
.producto{display:flex;flex-direction:column;background:var(--papel);border:1px solid rgba(194,150,92,.5);border-radius:var(--petalo);padding:24px 26px;min-width:0}
.producto h3{margin-bottom:6px}
.producto p{color:var(--tinta-suave);font-size:16px;margin:0 0 10px}
.producto .estado{align-self:flex-start;margin:0 0 12px;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--verde);color:var(--marfil)}
.producto .estado-disenado,.producto .estado-en_pausa{background:transparent;color:var(--tinta-suave);box-shadow:inset 0 0 0 1px var(--dorado)}
.producto .precio{font-family:var(--f-display);font-weight:600;font-size:24px;color:var(--cafe);margin-top:4px}
.producto .precio.pendiente{font-style:italic;font-weight:500;font-size:20px;color:var(--tinta-suave)}

/* el panel del Mercado Justo en Inicio: rosa claro, con su pétalo grande */
section.mercado{padding:32px var(--lado) 34px;background:radial-gradient(circle at 0 100%,rgba(196,138,122,.22),transparent 55%),var(--rosa-claro);border-radius:48px 12px 48px 12px}
@media (min-width:48em){section.mercado{padding:40px 48px 42px}}

/* las bandas verde oscuro de esencia.consulting: de borde a borde (la sombra extiende el fondo y el recorte lo limita) */
section.oscura{position:relative;color:var(--marfil);background:var(--verde);box-shadow:0 0 0 100vmax var(--verde);clip-path:inset(0 -100vmax);padding:52px 0 58px;margin-top:84px}
section.oscura + section{margin-top:92px}
.oscura h2{color:var(--oro)}
.oscura a:not(.boton){color:var(--rosa)}
.oscura .boton{color:var(--marfil);border-color:var(--rosa)}
.oscura .boton:hover{background:rgba(253,246,234,.1)}
.oscura .boton.primario{background:var(--rosa-boton);border-color:var(--rosa-boton);color:var(--mostaza-tinta);box-shadow:none}
.oscura .boton.primario:hover{background:var(--rosa-boton-2)}
.oscura .cita{border-left-color:var(--oro)}
.oscura .foto-seccion{border-color:var(--verde);box-shadow:0 0 0 1px var(--oro)}

/* el cierre de Inicio: «¡Me encantaría saber de ti!», centrado y grande, pegado al pie */
section.contacto-final{text-align:center;color:var(--marfil);background:radial-gradient(circle at 50% 0,rgba(233,194,77,.2),transparent 62%),var(--cafe-2);box-shadow:0 0 0 100vmax var(--cafe-2);clip-path:inset(0 -100vmax);padding:60px 0 72px;margin:100px 0 -72px}
.contacto-final::before{margin-inline:auto}
.contacto-final h2{font-size:clamp(42px,6.4vw,76px);line-height:1;color:var(--marfil);max-width:none;margin-bottom:20px}
.contacto-final > p{margin-inline:auto;color:var(--claro);font-size:clamp(18px,1.6vw,21px)}
.contacto-final .acciones{justify-content:center}
.contacto-final .boton{color:var(--marfil);border-color:var(--rosa)}
.contacto-final .boton:hover{background:rgba(253,246,234,.1)}
.contacto-final .boton.primario{background:var(--rosa-boton);border-color:var(--rosa-boton);color:var(--mostaza-tinta);box-shadow:none}
body:has(.contacto-final) .pie{margin-top:0}

/* el WhatsApp fijo, abajo a la derecha: en el teléfono solo la burbuja (el nombre queda para el lector de pantalla) */
.wa-fijo{position:fixed;right:16px;bottom:16px;z-index:5;display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 20px 0 16px;border-radius:999px;background:#1a6b43;color:#fff;font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 10px 26px -10px rgba(31,40,30,.7)}
.wa-fijo:hover{background:#155a38}
.wa-fijo:focus-visible{outline:3px solid var(--mostaza);outline-offset:3px}
.wa-fijo::before{content:"";flex:0 0 22px;width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5C6.7 2.5 2.5 6.3 2.5 11c0 2.3 1 4.4 2.7 5.9L4 21.5l5-1.8c.9.2 1.9.4 3 .4 5.3 0 9.5-3.8 9.5-8.5S17.3 2.5 12 2.5zM8 12.3a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm4 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm4 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5C6.7 2.5 2.5 6.3 2.5 11c0 2.3 1 4.4 2.7 5.9L4 21.5l5-1.8c.9.2 1.9.4 3 .4 5.3 0 9.5-3.8 9.5-8.5S17.3 2.5 12 2.5zM8 12.3a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm4 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm4 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:47.99em){
  .wa-fijo{width:56px;height:56px;padding:0;justify-content:center}
  .wa-fijo span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.pie{padding-bottom:96px}

/* el movimiento: las secciones suben suave al entrar, y el girasol de la portada gira muy despacio */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    main > section{animation:aparecer linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
  .portada-foto-sello svg{animation:girar 90s linear infinite}
}
@keyframes aparecer{from{opacity:.35;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---------- las propuestas (body.propuesta): un documento legible en el teléfono, salido de pandoc ----------
   La tabla se desplaza por dentro (display:block + overflow), nunca la página; las sombras en los bordes avisan que hay más. */
.propuesta main{max-width:46rem;padding-top:12px}
.propuesta main > p:first-child{font-size:15px;margin-bottom:28px}
.propuesta h1{font-size:clamp(34px,6.4vw,54px);line-height:1.04;max-width:none;margin:14px 0 20px}
.propuesta h2{font-size:clamp(27px,3.2vw,36px);margin:48px 0 12px;max-width:none}
.propuesta h3{font-size:23px;margin:30px 0 8px}
.propuesta p,.propuesta ul,.propuesta ol{max-width:none}
.propuesta li{margin:7px 0}
.propuesta ol{padding-left:1.4em}
.propuesta strong{color:var(--cafe-2)}
.propuesta code{font-family:ui-monospace,Consolas,"Cascadia Mono",monospace;font-size:.88em;background:var(--papel);padding:1px 5px;border-radius:4px;overflow-wrap:anywhere}
.propuesta blockquote{margin:20px 0;padding:4px 0 4px 20px;border-left:2px solid var(--dorado);font-family:var(--f-display);font-style:italic;font-weight:500;font-size:21px;line-height:1.4}
.propuesta blockquote p{margin:0 0 .5em}
.propuesta hr{border:0;height:10px;width:104px;margin:40px 0;background-image:var(--p3),var(--p2),var(--p1),var(--p0),var(--p1),var(--p2),var(--p3);background-size:10px 10px;background-repeat:no-repeat;background-position:0 50%,16px 50%,32px 50%,48px 50%,64px 50%,80px 50%,96px 50%}
.propuesta table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse;margin:20px 0 28px;font-size:15px;line-height:1.5;
  background:linear-gradient(90deg,var(--marfil) 40%,rgba(253,246,234,0)) left/48px 100% no-repeat local,
    linear-gradient(270deg,var(--marfil) 40%,rgba(253,246,234,0)) right/48px 100% no-repeat local,
    linear-gradient(90deg,rgba(80,65,40,.2),rgba(80,65,40,0)) left/16px 100% no-repeat scroll,
    linear-gradient(270deg,rgba(80,65,40,.2),rgba(80,65,40,0)) right/16px 100% no-repeat scroll}
.propuesta th,.propuesta td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--linea)}
.propuesta th{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave);border-bottom:2px solid var(--dorado);white-space:nowrap}
.propuesta td{min-width:8rem}
.propuesta td:nth-child(2){min-width:18rem}
.propuesta td:first-child,.propuesta th:first-child{padding-left:4px}

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

/* ---------- la maqueta de Eliana (11-nov-2026, «Cambios_web_Esencia.pdf» y «Maqueta_web_Esencia.pdf») ----------
   La barra café con ESENCIA, la portada con su foto a un lado, las bandas de color de borde a borde, los pilares que se
   despliegan, las cuatro tarjetas de servicio, el pódcast, los recursos, los productos de origen, «Mi propósito», el
   Linktree y el WhatsApp con su etiqueta. Colores medidos en sus imágenes con píxeles: la barra y los servicios #4c412d,
   la portada #eae3d9, el crema #faf6eb, el verde #343f3b, el marrón de «Mi propósito» #a9764b, el fondo del Linktree
   #d9c6b5. Dos se oscurecen para que se lean (WCAG, medido el 11-nov): su rosa de botón #b78d7d con letra blanca da 3,02
   y queda en #925f4f (5,29); su rosa de pilares con texto blanco da 2,95 y queda en #9a6b5b (4,54). Los demás pares: el café
   sobre el beige 7,85; la terracota #8a4a37 sobre el beige 5,29 y sobre el crema 6,24; el dorado #e9c46a sobre el café
   5,98 y sobre el verde 6,55; el claro #e8dfcf sobre el café 7,56; el blanco sobre el marrón oscuro #7a5230, 6,82; el
   título de pilar #fdecc0 sobre el rosa, 3,88 (texto grande, 24 px); la etiqueta de WhatsApp 14,26. */
:root{--m-barra:#4c412d;--m-beige:#eae3d9;--m-crema:#faf6eb;--m-verde:#343f3b;--m-marron:#a9764b;--m-marron-osc:#7a5230;
  --m-rosa:#9a6b5b;--m-boton:#925f4f;--m-boton-2:#7f5142;--m-terracota:#8a4a37;--m-oro:#e9c46a;--m-oro-osc:#8a6a26;--m-tinta:#4c412d;--m-lt:#d9c6b5;
  --m-borde:max(var(--lado),calc((100vw - var(--ancho)) / 2 + var(--lado)))}
.solo-lectores{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* la barra de arriba, café y de borde a borde, con el menú en versales de Cormorant */
.cabecera{max-width:none;background:var(--m-barra);padding:8px var(--m-borde)}
.cabecera::after{display:none}
.marca{color:#f0e6d2}
.cabecera nav{gap:0 22px}
.cabecera nav a{color:#efe6d6;font-family:var(--f-display);font-weight:500;font-size:15.5px;letter-spacing:.12em;text-transform:uppercase}
.cabecera nav a:hover{border-bottom-color:rgba(233,196,106,.55)}
.cabecera nav a[aria-current="page"]{font-weight:600;border-bottom-color:var(--m-oro)}
@media (max-width:47.99em){.cabecera{padding-block:6px 4px}.cabecera nav{gap:0 12px}.cabecera nav a{font-size:13.5px;letter-spacing:.06em}}
@media (min-width:48em){.cabecera nav{gap:0 30px}}

/* la portada con foto a un lado, de borde a borde */
main.con-hero{padding-top:0}
main:has(> section[class*="banda-"]:last-child){padding-bottom:0}
body:has(main > section[class*="banda-"]:last-child) .pie{margin-top:0}
.hero{width:100vw;margin-left:calc(50% - 50vw);display:grid;grid-template-columns:minmax(0,1fr);background:var(--m-beige);color:var(--m-tinta)}
.hero-texto{padding:34px var(--lado) 38px}
.hero-foto{margin:0;min-width:0}
.hero-foto img{display:block;width:100%;height:100%;max-height:62vh;object-fit:cover;object-position:50% 22%}
.hero .eyebrow{font-family:var(--f-display);font-style:normal;font-weight:500;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--m-terracota);margin:0 0 16px}
.hero .eyebrow::before{display:none}
.hero h1{font-weight:400;font-size:clamp(40px,5.6vw,70px);line-height:1.06;color:var(--m-tinta);max-width:15ch;margin:0 0 22px;letter-spacing:0}
.hero h1 .resalta{color:var(--m-terracota);font-weight:600}
.hero .entrada{font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--m-tinta);max-width:30rem;margin:0}
.hero .hero-texto > p:not(.eyebrow):not(.entrada){max-width:34rem;margin:14px 0 0}
@media (max-width:47.99em){.hero-foto{order:-1}.hero-foto img{max-height:56vh}}
@media (min-width:48em){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:min(80vh,660px)}
  .hero-texto{align-self:center;padding:64px 44px 64px var(--m-borde)}
  .hero-foto img{max-height:none}
  .hero.foto-izquierda .hero-foto{order:-1}
  .hero.foto-izquierda .hero-texto{padding:64px var(--m-borde) 64px 56px}
}
.hero-oscuro{background:var(--m-barra);color:#f6efe2}
.hero-oscuro .eyebrow{color:var(--m-oro)}
.hero-oscuro h1{color:#fbf6ec;font-size:clamp(56px,7.4vw,100px);line-height:1}
.hero-oscuro .entrada{color:#efe6d6;font-size:clamp(18px,1.5vw,21px)}
.hero-crema{background:var(--m-crema)}
.hero-crema h1{color:var(--m-terracota);font-size:clamp(40px,5vw,64px)}
.hero-crema h1 .resalta{color:var(--m-oro-osc);font-weight:500;text-transform:uppercase;letter-spacing:.02em}
.hero-crema h1 em{font-style:normal}
.hero-crema .entrada{font-weight:600}

/* las bandas de color de borde a borde; el contenido sigue alineado con el ancho del sitio */
section[class*="banda-"]{width:100vw;max-width:none;margin:0 0 0 calc(50% - 50vw);padding:68px var(--m-borde) 72px}
section[class*="banda-"]::before{display:none}
section[class*="banda-"] + section:not([class*="banda-"]){margin-top:64px}
.banda-crema{background:var(--m-crema)}
.banda-rosa{background:var(--m-rosa);color:#fff}
.banda-cafe{background:var(--m-barra);color:#f6efe2}
.banda-verde{background:var(--m-verde);color:#f6efe2}
.banda-marron{background:linear-gradient(90deg,var(--m-marron-osc) 0%,var(--m-marron-osc) 46%,var(--m-marron) 100%);color:#fff}
.banda-oscura{color:#fbf6ec;background:linear-gradient(rgba(36,31,24,.86),rgba(36,31,24,.92)),url(/img/maqueta/mujeres_pintando.webp) center/cover}
[class*="banda-"] h2{font-weight:400;max-width:none}
[class*="banda-"] h2 em{font-style:normal;font-weight:600}
.eyebrow-seccion{font-size:12.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--m-oro);margin:0 0 8px}
/* los botones de la maqueta: rosa café, redondos, en versales */
[class*="banda-"] .boton,[class*="banda-"] .boton.primario,.hero .boton,.hero .boton.primario{background:var(--m-boton);border:1px solid var(--m-boton);color:#fff;border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:none;padding:12px 26px;min-height:46px}
[class*="banda-"] .boton:hover,.hero .boton:hover{background:var(--m-boton-2)}

/* texto y foto lado a lado */
.media{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:center}
.media-foto{margin:0;min-width:0}
.media-foto img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover}
@media (min-width:48em){.media{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:60px}.media-izquierda{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.media-izquierda .media-foto{order:-1}}

/* ¿Qué es Esencia? */
.que-es h2{color:var(--m-terracota);text-align:center;font-size:clamp(46px,5vw,66px);line-height:1.02;margin-bottom:26px}
.que-es .media-texto{color:var(--m-tinta);font-size:16.5px}
.numerada{margin:4px 0 18px;padding-left:1.3em}
.numerada li{margin:6px 0}
.numerada li::marker{color:var(--m-terracota);font-weight:600}
.numerada strong{color:var(--m-terracota);font-weight:600}
.que-es .media-foto img{max-width:28rem;margin-left:auto}

/* los pilares: foto, nombre, línea y «Ver servicios», que se despliega */
.pilares{text-align:center}
.pilares h2{color:#fff;font-size:clamp(40px,4.6vw,58px);margin-bottom:38px}
.pilares-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:34px 30px;align-items:start}
.pilar img{display:block;width:100%;aspect-ratio:465/375;object-fit:cover}
.pilar h3{font-family:var(--f-display);font-weight:500;font-size:24px;letter-spacing:.1em;text-transform:uppercase;color:#fdecc0;margin:18px 0 8px}
.pilar > p{color:#fff;font-size:15.5px;margin:0 auto 14px;max-width:22rem}
.pilar details{margin:0 auto;max-width:22rem}
.pilar summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 22px;border:1px solid #fff;border-radius:999px;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;list-style:none}
.pilar summary::-webkit-details-marker{display:none}
.pilar summary::after{content:"+";font-size:17px;line-height:1}
.pilar details[open] summary{background:#fff;color:var(--m-rosa)}
.pilar details[open] summary::after{content:"–"}
.pilar summary:focus-visible{outline:3px solid #fdecc0;outline-offset:3px}
.pilar details ul{list-style:none;margin:14px 0 0;padding:6px 18px;background:var(--m-crema);color:var(--m-tinta);text-align:left;max-width:none}
.pilar details li{margin:0;padding:9px 0;border-bottom:1px solid #e6dccb;font-size:14.5px;line-height:1.45}
.pilar details li:last-child{border-bottom:0}
.pilar details li a{color:var(--m-terracota)}

/* las cuatro tarjetas de servicio */
.servicios{text-align:center}
.servicios h2{color:#fbf6ec;font-size:clamp(40px,4.6vw,58px);margin-bottom:38px}
.servicios-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
@media (min-width:56em){.servicios-lista{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 26px}}
.servicio{min-width:0}
.servicio-foto{display:block}
.servicio-foto img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.servicio h3{font-family:var(--f-display);font-weight:400;font-size:clamp(21px,2.1vw,28px);line-height:1.15;color:#fbf6ec;margin:16px 0 6px}
.servicio h3 .resalta{color:var(--m-oro)}
.servicio h3 em{font-style:normal}
.servicio > p{color:#e8dfcf;font-size:14.5px;line-height:1.5;margin:0 0 6px}
.servicio-accion a{display:inline-block;padding:10px 0;color:var(--m-oro);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.servicio-accion a:hover{text-decoration:underline}

/* el pódcast Hilos de Vida */
.podcast{text-align:center}
.podcast h2{color:#fbf6ec;font-size:clamp(48px,5.6vw,76px);margin-bottom:12px}
.podcast h2 em{font-style:italic;font-weight:400}
.podcast > p{margin-inline:auto;color:#efe6d6;font-size:clamp(17px,1.4vw,19px)}
.podcast .acciones{justify-content:center}
.podcast .boton.primario{background:#fbf6ec;border-color:#fbf6ec;color:var(--m-tinta)}
.podcast .boton.primario:hover{background:#efe6d6}
.galeria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.galeria a{display:block;position:relative}
.galeria img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.galeria a::after{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(30,26,20,.66) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") 55% 50%/22px no-repeat}
@media (max-width:40em){.galeria{grid-template-columns:1fr}}

/* los recursos gratuitos */
.recursos{text-align:center}
.recursos h2{color:var(--m-terracota);font-size:clamp(42px,5vw,64px)}
.recursos h2 em{font-style:italic;font-weight:400}
.recursos > p{margin-inline:auto;color:var(--m-tinta)}
.recursos-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:24px;margin-top:34px}
.recurso{background:#fff;padding:30px 24px 28px;display:flex;flex-direction:column;align-items:center;min-width:0}
.recurso-num{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--m-oro-osc);margin:0 0 8px}
.recurso h3{font-weight:400;font-size:26px;color:var(--m-tinta)}
.recurso > p:not(.recurso-num):not(.tarjeta-accion){font-size:15px;color:#5b5246}
.recurso .tarjeta-accion{margin:auto 0 0;padding-top:14px}

/* los productos de origen, en la banda verde */
.origen h2{color:#fbf6ec;font-size:clamp(34px,3.8vw,50px);line-height:1.12}
.origen .media-texto > p:not(.eyebrow-seccion):not(.acciones){color:#efe6d6;font-family:var(--f-display);font-size:clamp(21px,1.9vw,26px);line-height:1.35}

/* «Mi propósito», en el marrón de su sesión de fotos */
.proposito h2{color:#fff;font-size:clamp(42px,6.4vw,88px);line-height:1;text-transform:uppercase;letter-spacing:.02em;max-width:none;overflow-wrap:normal;hyphens:none}
.proposito .media-texto > p{color:#fff;font-size:clamp(16.5px,1.35vw,18.5px)}
.proposito .media-foto img{max-height:540px;object-position:50% 20%}

/* el Linktree: una tarjeta de teléfono sobre su beige */
main.con-linktree{max-width:none;padding:30px var(--lado) 104px;background:var(--m-lt)}
.linktree{max-width:26rem;margin:0 auto;background:var(--m-crema);border-radius:30px;padding:30px 22px 26px;text-align:center;box-shadow:0 22px 50px -24px rgba(76,65,45,.55)}
.lt-foto{width:116px;height:116px;border-radius:50%;object-fit:cover;object-position:50% 16%;display:block;margin:0 auto 12px;border:3px solid #fff;box-shadow:0 0 0 1px var(--m-lt)}
.linktree h1{font-size:40px;font-weight:500;line-height:1.1;color:var(--m-terracota);margin:0;max-width:none}
.lt-lema{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#6b604f;margin:4px 0 10px}
.linktree .entrada{font-size:15px;color:var(--m-tinta);margin:0 auto 18px;max-width:20rem}
.lt-botones{list-style:none;padding:0;margin:0;display:grid;gap:10px;max-width:none}
.lt-botones li{margin:0;padding:0}
.lt-boton{display:block;padding:12px 16px;border-radius:12px;background:var(--m-barra);color:#fbf6ec;text-decoration:none;min-height:44px}
.lt-boton:hover{filter:brightness(1.12)}
.lt-boton strong{display:block;font-size:15.5px;font-weight:600}
.lt-boton span{display:block;font-size:12.5px;color:#e3d8c4;margin-top:2px}
.lt-boton.destacado{background:var(--m-boton)}
.lt-boton.destacado span{color:#fff}
.lt-boton.claro{background:transparent;color:var(--m-tinta);box-shadow:inset 0 0 0 1px var(--m-tinta)}
.lt-boton.claro span{color:#5b5246}
.lt-redes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 6px}
.lt-red{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--m-terracota);border-radius:999px;color:var(--m-terracota);font-size:13px;font-weight:600;text-decoration:none}
.lt-ayuda{font-size:13px;margin:8px 0 0}
.lt-ayuda a{display:inline-block;padding:12px 0;margin:-12px 0}

/* el WhatsApp fijo de la maqueta (cambio 1): la etiqueta blanca y la burbuja verde, en todas las páginas; en el teléfono,
   solo la burbuja (la etiqueta queda para el lector de pantalla) */
.wa-fijo,.wa-fijo:hover{background:transparent;color:#2f2a20;padding:0;gap:10px;box-shadow:none;min-height:56px}
.wa-fijo::before{content:none}
.wa-etiqueta{background:#fff;color:#2f2a20;font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:999px;box-shadow:0 4px 14px -6px rgba(0,0,0,.45)}
.wa-burbuja{flex:0 0 56px;width:56px;height:56px;border-radius:50%;background:#1f8f4e;box-shadow:0 8px 22px -8px rgba(0,0,0,.55);position:relative}
.wa-fijo:hover .wa-burbuja{background:#187a41}
.wa-burbuja::before{content:"";position:absolute;inset:15px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5C6.7 2.5 2.5 6.3 2.5 11c0 2.3 1 4.4 2.7 5.9L4 21.5l5-1.8c.9.2 1.9.4 3 .4 5.3 0 9.5-3.8 9.5-8.5S17.3 2.5 12 2.5zM8 12.3a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm4 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm4 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5C6.7 2.5 2.5 6.3 2.5 11c0 2.3 1 4.4 2.7 5.9L4 21.5l5-1.8c.9.2 1.9.4 3 .4 5.3 0 9.5-3.8 9.5-8.5S17.3 2.5 12 2.5zM8 12.3a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm4 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6zm4 0a1.3 1.3 0 1 1 0-2.6 1.3 1.3 0 0 1 0 2.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.wa-fijo:focus-visible{outline:none}
.wa-fijo:focus-visible .wa-burbuja{outline:3px solid var(--m-oro);outline-offset:3px}
@media (max-width:47.99em){
  .wa-fijo{width:auto;height:auto}
  .wa-fijo span.wa-burbuja{position:relative;width:56px;height:56px;overflow:visible;clip:auto;white-space:normal}
}