/* TERRA · la gramática de la referencia: producto recortado flotando, titular con
   revelado palabra a palabra y tres paneles al pie. data-hero="terra". */

.terra-escena{position:relative}
:root[data-hero="terra"] .terra-escena{isolation:isolate}

/* ── 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(-90px,-2vw,-10px);bottom:0;
  width:clamp(340px,38vw,680px);aspect-ratio:1/1.08;
  background-image:var(--hero-producto,url(../../img/maqueta-frasco.png));
  background-size:contain;background-repeat:no-repeat;background-position:bottom right;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.55));
  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}}
@media(max-width:900px){
  /* el hero ocupa la pantalla entera; el frasco se apoya en la franja */
  :root[data-hero="terra"] .hero{min-height:100svh}
  :root[data-hero="terra"] .hero-producto-capa{
    right:-6%;left:auto;translate:none;bottom:0;
    width:min(78%,320px);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:flex-start;padding:clamp(1.4rem,6vh,3rem) 6vw 34vh;gap:1.1rem}
  :root[data-hero="terra"] .hero-h1{font-size:clamp(1.9rem,8.8vw,3rem);line-height:1.02}
  :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:.85em 1.5em;font-size:.95rem}

  /* la franja: los tres tramos siguen ahí, pero muy bajos */
  :root[data-hero="terra"] .paneles{grid-template-columns:1fr}
  .pnl{min-height:0;padding:.7rem 6vw;gap:.25rem}
  .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}
}

/* 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{
  text-align:left;white-space:normal;text-transform:none;
  font-weight:400;letter-spacing:-.05em;line-height:.98;
  font-size:clamp(2.1rem,6.4vw,6.4vw);
  background:none;-webkit-text-fill-color:currentColor;color:#fff;
  text-shadow:0 2px 34px rgba(0,0,0,.5)}
:root[data-hero="terra"] .hero-h1 .lin{display:block}
: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}
: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:2fr 1fr 2fr;position:relative;z-index:20;
  font-family:inherit;
  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(1rem,1.8vw,1.5rem) 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:.15rem}
.pnl-num{font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:.95;letter-spacing:-.05em;font-weight:600}
.pnl-sub2{font-size:clamp(.78rem,.95vw,.92rem);line-height:1.25;letter-spacing:-.02em;
  max-width:20ch;opacity:.72}
/* 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}
}