/* HERO · producto recortado, claim en dos colores y franja de pie.
   (nació como variante "terra" en el laboratorio)
   La gramática de la referencia: producto recortado flotando, titular con
   revelado palabra a palabra y tres paneles al pie. data-hero="terra". */


/* el hero recorta al frasco: su base se corta justo donde arranca la franja,
   igual que en la referencia. Sin solapes ni sombras por encima. */
/* la escena mide una pantalla justa: el hero se queda con lo que la franja
   no ocupa, sea cual sea su altura real. Sin restas a ojo. */
/* el menú flota sobre el hero en vez de ocupar sitio: si suma altura, la
   escena se sale de la pantalla y la franja queda cortada abajo */
:root[data-hero="terra"] .nav{position:fixed;top:0;left:0;right:0;z-index:60}
:root[data-hero="terra"] .terra-escena{
  min-height:100svh;min-height:100dvh;display:flex;flex-direction:column}
/* el contenido del hero baja lo que mide el menú, para no quedar debajo */
:root[data-hero="terra"] .hero-centro{padding-top:clamp(5rem,8vh,7rem)}
:root[data-hero="terra"] .hero{overflow:hidden;margin-bottom:0;display:flex;
  flex:1;min-height:0}
:root[data-hero="terra"] .paneles{flex:none}

/* ── el producto: cruza el hero y la franja le tapa la base ── */
:root[data-hero="terra"] .hero-producto-capa{
  position:absolute;z-index:1;pointer-events:none;
  /* la base baja por debajo del hero: la franja, con más z, la recorta */
  right:clamp(-70px,-1.5vw,0px);bottom:-15%;
  width:clamp(340px,38vw,680px);aspect-ratio:1/1.08;
  background-image:var(--hero-producto,url(../img/frasco-sg.png));
  background-size:contain;background-repeat:no-repeat;background-position:bottom right;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));
  animation:terraEntra 1.1s cubic-bezier(.16,1,.3,1) .7s both}
/* el from y el to explícitos: si la animación no llega a correr, el elemento
   se queda visible en vez de invisible */
@keyframes terraEntra{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}


/* el texto se aparta y se alinea a la izquierda */
:root[data-hero="terra"] .hero-centro{z-index:5;align-items:flex-start;text-align:left}
@media(min-width:900px){
  :root[data-hero="terra"] .hero-centro{padding-right:42vw}
}
:root[data-hero="terra"] .hero-h1{
  /* la tipografía de siempre: Kanit, en mayúsculas y apretada */
  font-family:'Kanit',system-ui,sans-serif;
  text-align:left;white-space:normal;text-transform:uppercase;
  font-weight:900;letter-spacing:-.045em;line-height:.9;
  font-size:clamp(1.9rem,5.8vw,5.8rem);
  background:none;-webkit-text-fill-color:currentColor;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.35)}
:root[data-hero="terra"] .hero-h1 .lin{display:block}
/* las líneas marcadas van en el verde de marca */
:root[data-hero="terra"] .hero-h1 .lin-verde{color:var(--acento)}
:root[data-hero="terra"] .hero-lead[hidden]{display:none}
/* la segunda palabra de cada línea se atenúa, como en la referencia */
:root[data-hero="terra"] .hero-h1 .pal-dim{color:rgba(255,255,255,.45)}
:root[data-hero="terra"] .hero-lead{align-items:flex-start;text-align:left;font-weight:300}
:root[data-hero="terra"] .hero-ctas{justify-content:flex-start}
/* botón negro de esquinas rectas, como el "Explore Now" */
:root[data-hero="terra"] .hero-ctas .btn-cta{
  background:var(--acento);color:var(--fondo);border-radius:8px;padding:1.15em 2.2em;
  letter-spacing:-.02em;text-transform:none;font-weight:500;
  font-size:clamp(.95rem,1.5vw,1.28rem)}
:root[data-hero="terra"] .hero-ctas .btn-cta:hover{background:var(--acento-claro)}
:root[data-hero="terra"] .hero-ctas .btn-ghost{color:#fff;font-weight:400;text-transform:none;
  letter-spacing:-.01em;font-size:clamp(.9rem,1.3vw,1.1rem)}

/* ── revelado palabra a palabra, con desenfoque ── */
:root[data-hero="terra"] .hero-h1 .pal{display:inline-block;overflow:hidden;vertical-align:bottom;
  /* el hueco deja entrar la sombra dentro del recorte, sin bandas */
  padding:.14em .1em .18em;margin:-.14em -.1em -.18em}
:root[data-hero="terra"] .hero-h1 .pal > span{display:inline-block;
  animation:palabraSale .7s cubic-bezier(.16,1,.3,1) both}
@keyframes palabraSale{from{opacity:0;transform:translateY(100%);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}}


/* ── la franja de pie: tres tramos, fina ── */
.paneles{display:none}
:root[data-hero="terra"] .paneles{
  display:grid;grid-template-columns:1.5fr 1.35fr 1.9fr;position:relative;z-index:20;
  font-family:inherit;margin-top:-8px;
  animation:terraEntra .8s cubic-bezier(.16,1,.3,1) .9s both}
:root[data-hero="terra"] .franja-cristal,
:root[data-hero="terra"] .franja{display:none}
/* la banda B2B de después del hero sobra: su mensaje ya está en el panel */
:root[data-hero="terra"] .banda-vender{display:none}

.pnl,.pnl *{font-family:inherit}
.pnl{padding:clamp(.85rem,1.5vw,1.25rem) clamp(1.1rem,2vw,1.9rem);
  display:flex;flex-direction:column;justify-content:center;gap:.5rem;
  min-height:clamp(96px,9vw,124px);position:relative}
/* izquierda, en claro */
.pnl-1{background:var(--fondo-claro);color:var(--fondo)}
.pnl-tit{font-size:clamp(1rem,1.7vw,1.4rem);line-height:1.1;letter-spacing:-.035em;
  font-weight:500;max-width:18ch}
.pnl-link{color:var(--fondo);text-decoration:underline;text-underline-offset:.25em;
  font-size:clamp(.82rem,1vw,.95rem);letter-spacing:-.02em;align-self:flex-start;opacity:.75}
.pnl-link:hover{opacity:1}
/* centro, el dato */
.pnl-2{background:var(--acento);color:var(--fondo);justify-content:center;gap:.6rem;overflow:hidden}
.pnl-cards{position:relative;flex:1;display:flex;align-items:center;min-height:3.2em}
.pnl-card{position:absolute;inset:0;display:flex;align-items:center;gap:.75rem;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.pnl-card.on{opacity:1;transform:none;pointer-events:auto}
.pnl-ico{width:clamp(34px,3.2vw,42px);height:clamp(34px,3.2vw,42px);border-radius:50%;flex:none;
  display:grid;place-items:center;color:#fff}
.pnl-ico svg{width:56%;height:56%}
.i-verde{background:var(--fondo)}
.i-ambar{background:#B45309}
.i-azul{background:var(--fondo);color:#fff}
.i-hoja{background:#166534}
.pnl-card p{font-size:clamp(.8rem,1.05vw,1rem);line-height:1.25;letter-spacing:-.02em;
  color:rgba(10,15,10,.78)}
.pnl-card p b{color:var(--fondo);font-weight:600}
.pnl-puntos{display:flex;gap:5px;flex:none}
.pnl-puntos i{height:2px;flex:1;border-radius:99px;background:rgba(10,15,10,.22);
  transition:background .4s}
.pnl-puntos i.on{background:var(--fondo)}
/* derecha, la puerta B2B */
.pnl-3{background:var(--verde-osc);color:var(--txt-1);
  flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.4rem}
.pnl-tit-b{font-size:clamp(.98rem,1.55vw,1.28rem);line-height:1.15;letter-spacing:-.03em;font-weight:500}
.pnl-sub{color:var(--txt-4);font-size:clamp(.78rem,.95vw,.92rem);line-height:1.3;
  letter-spacing:-.02em;margin-top:.2rem}
.pnl-cta{display:inline-flex;align-items:center;gap:.5em;flex:none;white-space:nowrap;
  padding:.7rem 1.25rem;border-radius:7px;background:var(--acento);color:var(--fondo);
  font-size:clamp(.8rem,1vw,.95rem);font-weight:600;letter-spacing:-.01em;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),background .3s}
.pnl-cta:hover{transform:translateY(-2px);background:var(--acento-claro)}
.pnl-cta span{transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.pnl-cta:hover span{transform:translateX(4px)}

@media(max-width:900px){
  /* en móvil la franja se apila y se aprieta: tres tramos cortos, no tres bloques */
  :root[data-hero="terra"] .paneles{grid-template-columns:1fr}
  .pnl{min-height:0;padding:.95rem 6vw;gap:.35rem}
  .pnl-1{flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}
  .pnl-tit{font-size:1.02rem;max-width:none}
  .pnl-link{align-self:center;white-space:nowrap}
  .pnl-2{flex-direction:row;align-items:baseline;gap:.6rem}
  .pnl-num{font-size:1.6rem}
  .pnl-sub2{max-width:none;font-size:.84rem}
  .pnl-3{flex-direction:column;align-items:stretch;gap:.8rem;padding-block:1.1rem}
  .pnl-cta{width:100%;justify-content:center}
}

/* ── móvil: va al final para que gane a las reglas de escritorio ── */
@media(max-width:900px){
  /* hero y franja caben juntos en una pantalla, sin deslizar */

  /* el dato sobra en pantalla estrecha: quedan catálogo y puerta B2B */
  :root[data-hero="terra"] .pnl-2{display:flex;gap:.45rem;padding-block:.7rem}
  .pnl-cards{min-height:2.6em}
  .pnl-card{gap:.6rem}
  .pnl-ico{width:30px;height:30px}
  .pnl-card p{font-size:.8rem}

  :root[data-hero="terra"] .hero-producto-capa{
    right:-4%;left:auto;translate:none;bottom:-12%;
    width:min(80%,330px);aspect-ratio:1/1.05;
    background-position:bottom right;
    filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))}
  :root[data-hero="terra"] .hero-centro{
    justify-content:center;padding:9vh 6vw 30vh;gap:1.2rem}
  :root[data-hero="terra"] .hero-h1{font-size:clamp(1.35rem,6.4vw,2.1rem);line-height:1.06;letter-spacing:-.035em}
  :root[data-hero="terra"] .hero-ctas{flex-direction:row;flex-wrap:wrap;gap:.6rem 1rem}
  :root[data-hero="terra"] .hero-ctas > *{width:auto}
  :root[data-hero="terra"] .hero-ctas .btn-cta{padding:.72em 1.15em;font-size:.85rem;border-radius:7px}
  :root[data-hero="terra"] .hero-ctas .btn-ghost{font-size:.82rem}

  /* la franja: los tres tramos siguen ahí, pero muy bajos */
  :root[data-hero="terra"] .paneles{grid-template-columns:1fr}
  :root[data-hero="terra"] .paneles{margin-top:-8px}
  .pnl{min-height:0;padding:.62rem 6vw;gap:.2rem}
  .pnl-1,.pnl-2{flex-direction:row;align-items:center;justify-content:space-between;gap:.9rem}
  .pnl-tit{font-size:.94rem;max-width:none;font-weight:500}
  .pnl-link{align-self:center;white-space:nowrap;font-size:.8rem}
  .pnl-2{gap:.5rem}
  .pnl-num{font-size:1.3rem}
  .pnl-sub2{max-width:none;font-size:.78rem;text-align:right}
  .pnl-3{flex-direction:row;align-items:center;justify-content:space-between;
    gap:.8rem;padding-block:.85rem}
  .pnl-tit-b{font-size:.92rem}
  .pnl-sub{display:none}
  .pnl-cta{width:auto;padding:.6rem 1rem;font-size:.8rem}
}