/* Home · Live Health CR «Mañana botánica» */
.sec{padding:76px 0;position:relative}
.sec--crema{background:var(--crema-2)}
.sec--bosque{background:var(--bosque);color:#fff}
.sec--bosque .bajada{color:#CFE0CF}
.eti--osc{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}.eti--osc i{background:var(--sol)}
.btn--chico{padding:11px 16px;font-size:14px}

/* ---------- 1 · hero ---------- */
.hero{position:relative;overflow:hidden;padding:26px 0 70px;background:
  radial-gradient(120% 70% at 85% 8%,rgba(245,196,81,.55),rgba(245,196,81,0) 55%),
  radial-gradient(90% 60% at 0% 100%,rgba(125,186,90,.28),rgba(125,186,90,0) 60%),
  linear-gradient(180deg,#FFF7E8 0%,var(--crema) 70%)}
.hero__sol{position:absolute;width:520px;height:520px;right:-170px;top:-170px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,233,176,.95) 0%,rgba(255,233,176,.4) 38%,rgba(255,233,176,0) 70%);animation:sol 9s ease-in-out infinite alternate}
@keyframes sol{to{transform:translate(-30px,24px) scale(1.08)}}
.hero__hojas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.hero__in{position:relative;z-index:2;display:flex;flex-direction:column}
.hero__texto{display:contents}
.hero__texto .eti{order:1;align-self:flex-start}.hero__titulo{order:2}.hero__escena{order:3}.hero__sub{order:4}.hero__bts{order:5}.hero__chk{order:6}
.hero__titulo{font-size:clamp(42px,11.2vw,82px);margin:14px 0 4px;color:var(--rojo-2)}
.hero__titulo em{display:inline-block;background:linear-gradient(transparent 70%,rgba(125,186,90,.28) 70%)}
.hero__sub{font-size:17.5px;color:var(--gris);max-width:520px}
.hero__bts{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 16px}
.hero__bts .btn{flex:1 1 100%}
.hero__chk{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;font-weight:900;color:var(--bosque)}
.hero__escena{position:relative;height:330px;margin:-6px 0 8px;touch-action:pan-y}
.hero__aro{position:absolute;left:50%;top:52%;width:290px;height:290px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#fff 0%,#FFF4DA 46%,rgba(255,244,218,0) 70%)}
.hero__aro::after{content:"";position:absolute;inset:18px;border-radius:50%;border:1.5px dashed rgba(76,154,58,.35);animation:girar 40s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.trio{position:absolute;inset:0;transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s ease-out}
.trio__f{position:absolute;bottom:34px;height:auto;filter:drop-shadow(0 26px 22px rgba(43,29,28,.22));will-change:transform}
.trio__f--2{width:46%;left:27%;z-index:3;animation:flota 5.5s ease-in-out infinite}
.trio__f--1{width:34%;left:4%;bottom:52px;z-index:2;animation:flota 6.2s ease-in-out infinite -.8s;transform:rotate(-7deg)}
.trio__f--3{width:34%;right:4%;bottom:52px;z-index:2;animation:flota 6.6s ease-in-out infinite -1.6s;transform:rotate(7deg)}
@keyframes flota{50%{translate:0 -14px}}
.orbita{position:absolute;left:50%;top:50%;width:0;height:0;z-index:4;animation:girar 36s linear infinite}
.orbita__i{position:absolute;max-width:none;width:52px;height:auto;left:-26px;top:-26px;
  transform:rotate(calc(var(--i)/var(--n)*360deg)) translateX(148px) rotate(calc(var(--i)/var(--n)*-360deg));filter:drop-shadow(0 8px 10px rgba(0,0,0,.14))}
.orbita__i:nth-child(odd){width:40px}
.sello-giro{position:absolute;right:-4px;top:-4px;width:92px;height:92px;z-index:5;display:grid;place-items:center;background:var(--rojo);border-radius:50%;color:#fff;box-shadow:var(--sombra-s)}
.sello-giro svg{position:absolute;inset:0;animation:girar 16s linear infinite}
.sello-giro text{fill:#fff;font-family:var(--f-txt);font-weight:900;font-size:11.2px;letter-spacing:.12em}
.sello-giro b{font-size:28px}
.hero__bajar{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;width:26px;height:42px;border:2px solid rgba(43,29,28,.35);border-radius:14px}
.hero__bajar span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--rojo);animation:bajar 1.8s ease-in-out infinite}
@keyframes bajar{60%{transform:translateY(14px);opacity:0}}

/* ---------- 2 · sellos ---------- */
.sellos{background:#fff;border-block:1px solid var(--linea)}
.sellos__in{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;padding-block:26px}
.sello{display:grid;grid-template-columns:44px 1fr;column-gap:10px;align-items:center;font-size:13px;line-height:1.25;color:var(--gris)}
.sello i{grid-row:span 2;width:44px;height:44px;border-radius:14px;background:var(--crema);display:grid;place-items:center;font-style:normal;font-size:21px}
.sello b{color:var(--tinta);font-size:14.5px}

/* ---------- 3 · necesidades ---------- */
.necs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
.nec{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:3/4.1;color:#fff;isolation:isolate;box-shadow:var(--sombra-s)}
.nec img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.nec:hover img,.nec.visto img{transform:scale(1.06)}
.nec__capa{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,color-mix(in srgb,var(--c) 92%,#000) 100%);z-index:1}
.nec__txt{position:absolute;inset:auto 0 0 0;z-index:2;padding:14px;display:grid;gap:3px}
.nec__txt i{font-style:normal;width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:18px;margin-bottom:4px}
.nec__txt b{font-family:var(--f-tit);font-weight:400;font-size:21px;line-height:1.05}
.nec__txt small{display:none;opacity:.9}
.nec__txt em{font-style:normal;font-weight:900;font-size:12.5px;margin-top:6px;background:#fff;color:var(--c);justify-self:start;padding:5px 10px;border-radius:999px}

/* ---------- 4 · favoritos ---------- */
.filtros{display:flex;gap:8px;overflow-x:auto;margin:26px -18px 20px;padding:2px 18px 6px;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.filtro{flex:0 0 auto;border:1.5px solid var(--linea);background:#fff;border-radius:999px;padding:10px 16px;font-weight:900;font-size:14px;transition:all .2s}
.filtro.activo{background:var(--rojo);border-color:var(--rojo);color:#fff;transform:scale(1.04)}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tarjeta{background:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 var(--linea);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,opacity .35s}
.tarjeta.fuera{display:none}
.tarjeta.entra{animation:entra .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes entra{from{opacity:0;transform:translateY(18px) scale(.97)}}
.tarjeta__foto{position:relative;display:block;padding:24px 14px 8px;background:radial-gradient(circle at 50% 62%,#fff 0 30%,var(--c-claro) 31% 100%)}
.tarjeta__foto img{width:72%;margin:0 auto;height:auto;filter:drop-shadow(0 14px 12px rgba(43,29,28,.18));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.tarjeta:hover .tarjeta__foto img{transform:translateY(-8px) rotate(-3deg)}
.tarjeta__nec{position:absolute;top:10px;left:10px;font-size:11px;font-weight:900;background:#fff;color:var(--c);padding:4px 9px;border-radius:999px}
.tarjeta__cuerpo{padding:12px 12px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.tarjeta h3{font-size:19px;line-height:1.08}
.tarjeta__promesa{display:none;font-size:14px;color:var(--gris)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips span{font-size:11.5px;font-weight:900;padding:4px 9px;border-radius:999px;background:var(--c-claro);color:var(--c)}
.tarjeta__precio{margin-top:auto;font-size:12.5px;color:var(--gris);display:grid;line-height:1.25}.tarjeta__precio b{font-size:18px;color:var(--tinta)}
.tarjeta__acciones{display:grid;grid-template-columns:1.25fr 1fr;gap:6px}
.tarjeta__acciones .btn{padding:10px 6px;box-shadow:none}

/* ---------- 5 · marca (pegado con scroll) ---------- */
.marca{height:240vh;background:var(--rojo);color:#fff;position:relative}
.marca__pegado{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.marca__in{display:grid;gap:18px;align-items:center;width:100%}
.marca__escena{position:relative;height:38vh;min-height:250px}
.marca__luz{position:absolute;left:50%;top:50%;width:300px;height:300px;transform:translate(-50%,-50%) scale(calc(.7 + var(--p,0)*.5));border-radius:50%;background:radial-gradient(circle,rgba(255,233,176,.55),rgba(255,233,176,0) 68%)}
.marca__frasco{position:absolute;left:50%;top:50%;height:100%;width:auto;transform:translate(-50%,-50%) rotate(calc(-10deg + var(--p,0)*20deg)) scale(calc(.9 + var(--p,0)*.15));filter:drop-shadow(0 30px 26px rgba(0,0,0,.35))}
.marca__ing{position:absolute;width:70px;left:50%;top:50%;transition:none}
.marca__ing--1{transform:translate(calc(-50% - 120px - var(--p,0)*30px),calc(-50% - 80px + var(--p,0)*40px)) rotate(calc(var(--p,0)*90deg))}
.marca__ing--2{width:46px;transform:translate(calc(-50% + 110px + var(--p,0)*20px),calc(-50% - 90px + var(--p,0)*60px)) rotate(calc(30deg + var(--p,0)*200deg))}
.marca__ing--3{transform:translate(calc(-50% + 120px),calc(-50% + 70px - var(--p,0)*50px)) rotate(calc(var(--p,0)*-120deg))}
.marca__ing--4{width:40px;transform:translate(calc(-50% - 110px + var(--p,0)*10px),calc(-50% + 90px - var(--p,0)*40px)) rotate(calc(-40deg + var(--p,0)*160deg))}
.marca .titulo-sec{font-size:clamp(32px,8vw,54px)}
.marca .titulo-sec em{color:var(--sol)}
.pilares{display:grid;gap:8px}
.pilar{border-top:1px solid rgba(255,255,255,.22);padding:12px 0 2px;opacity:.28;transform:translateX(-10px);transition:opacity .5s,transform .5s}
.pilar.activo{opacity:1;transform:none}
.pilar b{font-family:var(--f-tit);font-weight:400;font-size:21px;display:block}
.pilar p{color:#F2D3D3;font-size:15px}

/* ---------- 6 · rutina (cielo de la mañana a la noche) ---------- */
.rutina{height:300vh;position:relative}
.rutina__pegado{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.rutina__cielo{position:absolute;inset:0;background:linear-gradient(180deg,var(--cielo-a,#FFE7B8),var(--cielo-b,#FBF6EF));transition:background .2s}
.rutina__astro{position:absolute;width:96px;height:96px;border-radius:50%;left:calc(8% + var(--p,0)*76%);top:var(--at,30%);
  background:radial-gradient(circle at 40% 40%,#FFF6D8,var(--astro,#F5C451));box-shadow:0 0 70px 20px color-mix(in srgb,var(--astro,#F5C451) 55%,transparent)}
.rutina__estrellas{position:absolute;inset:0;opacity:var(--noche,0);background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 32% 9%,#fff,transparent),radial-gradient(1px 1px at 58% 22%,#fff,transparent),radial-gradient(1.8px 1.8px at 78% 12%,#fff,transparent),radial-gradient(1px 1px at 90% 30%,#fff,transparent),radial-gradient(1.2px 1.2px at 22% 35%,#fff,transparent)}
.rutina__in{position:relative;z-index:2;width:100%;color:var(--tinta-r,var(--tinta));transition:color .3s}
.rutina .titulo-sec em{color:var(--em-r,var(--verde))}
.momentos{position:relative;height:330px;margin-top:10px}
.momento{position:absolute;inset:0;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);border-radius:26px;padding:20px;box-shadow:var(--sombra);
  opacity:0;transform:translateY(30px) scale(.97);transition:opacity .5s,transform .5s;color:var(--tinta)}
.momento.activo{opacity:1;transform:none}
.momento__hora{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.momento__hora span{font-size:24px}
.momento h3{font-size:30px;margin:8px 0 6px}
.momento p{color:var(--gris)}
.momento__frascos{display:flex;gap:4px;margin-top:14px}
.momento__frascos a{flex:1;display:block;background:var(--crema);border-radius:16px;padding:10px 8px 4px}
.momento__frascos img{width:100%;height:auto;filter:drop-shadow(0 8px 8px rgba(0,0,0,.15));transition:transform .3s}
.momento__frascos a:hover img{transform:translateY(-6px)}
.rutina__barra{height:5px;border-radius:5px;background:rgba(43,29,28,.12);margin-top:18px;overflow:hidden}
.rutina__barra span{display:block;height:100%;width:calc(var(--p,0)*100%);background:var(--rojo)}

/* ---------- 7 · transparencia ---------- */
.transp{display:grid;gap:26px}
.transp__foto img{border-radius:28px;box-shadow:var(--sombra)}
.dosis-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.dosis{background:#fff;border-radius:20px;padding:14px;display:grid;grid-template-columns:40px 1fr;column-gap:10px;align-items:center;box-shadow:0 1px 0 var(--linea)}
.dosis img{grid-row:span 2;width:40px;height:auto}
.dosis b{font-family:var(--f-tit);font-weight:400;font-size:30px;line-height:1;color:var(--rojo)}
.dosis b small{font-family:var(--f-txt);font-size:14px;font-weight:900;margin-left:3px;color:var(--rojo)}
.dosis>span{font-size:12.5px;color:var(--gris);line-height:1.25}

/* ---------- 8 · escalera ---------- */
.escalera{display:grid;gap:14px;margin:30px 0 26px}
.escalon{position:relative;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);border-radius:22px;padding:16px;display:grid;grid-template-columns:100px 1fr auto;align-items:center;gap:4px 12px}
.escalon--top{background:#fff;color:var(--tinta);border-color:#fff;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.escalon__frascos{grid-row:span 2;display:flex;justify-content:center;height:70px}
.escalon__frascos img{height:70px;width:auto;margin:0 -9px;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.escalon b{font-size:17px}
.escalon strong{font-family:var(--f-tit);font-weight:400;font-size:28px;grid-column:3;grid-row:1 / span 2}
.escalon small{font-size:12.5px;opacity:.8}
.escalon--top small{color:var(--verde);opacity:1;font-weight:800}
.escalon__badge{position:absolute;top:-11px;left:16px;background:var(--rojo);color:#fff;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:4px 11px;border-radius:999px}
.escalon__badge--sol{background:var(--sol);color:var(--tinta)}

/* ---------- 9 · promesa ---------- */
.promesa{background:linear-gradient(140deg,#fff 0%,var(--crema-2) 100%);border-radius:32px;padding:26px 20px;box-shadow:var(--sombra);display:grid;gap:22px;border:1px solid var(--linea)}
.promesa__iz p{color:var(--gris)}
.pasos3{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pasos3 li{display:flex;gap:12px;align-items:center;background:#fff;border-radius:18px;padding:12px 14px}
.pasos3 b{flex:0 0 38px;height:38px;border-radius:50%;background:var(--bosque);color:#fff;display:grid;place-items:center;font-weight:900}
.pasos3 strong{display:block}.pasos3 span{font-size:14px;color:var(--gris)}
.promesa__extra{font-weight:800;background:var(--sol-2);border-radius:16px;padding:12px 14px;font-size:15px}

/* ---------- 10 · testimonios ---------- */
.testis{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:26px 18px 10px;scrollbar-width:none}
.testis::-webkit-scrollbar{display:none}
.testi{flex:0 0 82%;scroll-snap-align:center;margin:0;background:#fff;border-radius:24px;padding:18px;box-shadow:var(--sombra-s);display:flex;flex-direction:column;gap:12px;border-top:5px solid var(--c)}
.testi__cab{display:flex;gap:12px;align-items:center}
.testi__cab img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:3px solid var(--c-claro)}
.testi__cab b{display:block}.testi__cab small{color:var(--gris)}
.estrellas{color:#E9A93A;letter-spacing:.08em;font-size:14px}
.testi blockquote{margin:0;font-family:var(--f-tit);font-size:22px;line-height:1.2}
.testi__prod{margin-top:auto;display:flex;align-items:center;gap:8px;font-weight:900;font-size:13px;color:var(--c);background:var(--c-claro);border-radius:14px;padding:6px 10px}
.testi__prod img{width:26px;height:auto}

/* ---------- 11 · preguntas ---------- */
.faq{display:grid;gap:22px}
.faq .btn{margin-top:16px}
.faq__lista details{background:#fff;border-radius:18px;margin-bottom:10px;box-shadow:0 1px 0 var(--linea);overflow:hidden}
.faq__lista summary{list-style:none;cursor:pointer;padding:17px 50px 17px 18px;font-weight:900;position:relative}
.faq__lista summary::-webkit-details-marker{display:none}
.faq__lista summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--crema);display:grid;place-items:center;color:var(--rojo);font-size:20px;transition:transform .3s}
.faq__lista details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq__lista p{padding:0 18px 18px;color:var(--gris)}

/* ---------- 12 · cierre ---------- */
.cierre{position:relative;overflow:hidden;background:radial-gradient(90% 60% at 50% 0%,#2E5A35,var(--bosque));color:#fff;text-align:center;padding:70px 0 80px}
.cierre__hojas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cierre__in{position:relative;z-index:2}
.cierre__frascos{display:flex;justify-content:center;align-items:flex-end;height:170px;margin-bottom:22px}
.cierre__frascos img{height:calc(130px + (2 - max(var(--k) - 2, 2 - var(--k))) * 18px);width:auto;margin:0 -14px;filter:drop-shadow(0 18px 16px rgba(0,0,0,.35));animation:flota 6s ease-in-out infinite;animation-delay:calc(var(--k) * -.7s)}
.cierre .titulo-sec em{color:var(--sol)}
.cierre p{color:#CFE0CF;margin:0 auto 24px;max-width:460px}

/* ---------- escritorio ---------- */
@media (min-width:900px){
  .hero__in{display:grid}.hero__texto{display:block}.hero__escena{margin:0}
  .sec{padding:110px 0}
  .hero{padding:40px 0 90px}
  .hero__in{grid-template-columns:1.05fr 1fr;align-items:center;min-height:calc(100vh - 130px)}
  .hero__bts .btn{flex:0 0 auto}
  .hero__texto{grid-column:1;grid-row:1}
  .hero__titulo{margin-bottom:18px}
  .hero__escena{height:560px;grid-column:2;grid-row:1}
  .hero__aro{width:460px;height:460px}
  .sello-giro{width:110px;height:110px;right:10px;top:10px}
  .orbita__i{transform:rotate(calc(var(--i)/var(--n)*360deg)) translateX(250px) rotate(calc(var(--i)/var(--n)*-360deg));width:80px}
  .sellos__in{grid-template-columns:repeat(4,1fr)}
  .necs{grid-template-columns:repeat(4,1fr);gap:18px}
  .nec__txt small{display:block}
  .rejilla{grid-template-columns:repeat(4,1fr);gap:18px}
  .tarjeta__promesa{display:block}
  .marca__in{grid-template-columns:1fr 1fr}
  .marca__escena{height:70vh}
  .momentos{height:300px;max-width:560px}
  .transp{grid-template-columns:.9fr 1.1fr;align-items:center;gap:50px}
  .dosis-rejilla{grid-template-columns:repeat(3,1fr)}
  .escalera{grid-template-columns:repeat(3,1fr)}
  .escalon{grid-template-columns:1fr;text-align:center;justify-items:center;padding:26px}
  .escalon__frascos{grid-row:auto;height:120px}.escalon__frascos img{height:120px}
  .escalon strong{grid-column:auto;grid-row:auto;font-size:40px}
  .promesa{grid-template-columns:1fr 1.2fr;padding:44px}
  .promesa__extra{grid-column:1 / -1}
  .testis{max-width:1180px;margin:0 auto}
  .testi{flex-basis:340px}
  .faq{grid-template-columns:.8fr 1.2fr;gap:50px}
}

/* capturas de página completa (?captura=1): las secciones pegadas se muestran quietas */
.captura .marca,.captura .rutina{height:auto}
.captura .marca__pegado,.captura .rutina__pegado{position:relative;height:auto;padding:70px 0}
.captura .momentos{height:auto;display:grid;gap:12px}
.captura .momento{position:relative;opacity:1;transform:none}

/* el hero entra al cargar (no espera al scroll) */
.hero .aparece{opacity:1;transform:none;animation:subeHero .9s cubic-bezier(.2,.8,.2,1) both}
.hero .aparece.d1{animation-delay:.08s}.hero .aparece.d2{animation-delay:.18s}.hero .aparece.d3{animation-delay:.28s}.hero .aparece.d4{animation-delay:.38s}
.hero__escena{animation:subeHero 1.1s .12s cubic-bezier(.2,.8,.2,1) both}
@keyframes subeHero{from{opacity:0;transform:translateY(24px)}}