@charset "UTF-8";
/* ==========================================================================
   TIFOSI CLUB - hoja de estilo del tema

   Sistema visual: referencia "Padel Club" adaptada a la marca.
     Paleta   tomada del propio logotipo: #183E2A verde / #F5F1E6 crema
     Display  Apple Garamond, VERSALES ROMANA + cursiva minuscula
     Texto    Inter
     Formas   filo recto (radio 0), marcos de 1px, chaflan en tarjetas
     Foto     solo en cabecera y en "sobre nosotros". El resto es tipografia
              y bloques de color.

   Movimiento: curvas propias, nada de `transition: all`, nada de entradas
   desde scale(0), hover solo en punteros finos, y salidas mas rapidas que
   las entradas.
   ========================================================================== */

/* ---------------------------------------------------------------- fuentes */
@font-face{
  font-family:'Apple Garamond'; font-style:normal; font-weight:300;
  font-display:swap; src:url('../fonts/applegaramond-light.woff2') format('woff2');
}
@font-face{
  font-family:'Apple Garamond'; font-style:italic; font-weight:300;
  font-display:swap; src:url('../fonts/applegaramond-light-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Apple Garamond'; font-style:normal; font-weight:400;
  font-display:swap; src:url('../fonts/applegaramond-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Apple Garamond'; font-style:italic; font-weight:400;
  font-display:swap; src:url('../fonts/applegaramond-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Apple Garamond'; font-style:normal; font-weight:700;
  font-display:swap; src:url('../fonts/applegaramond-bold.woff2') format('woff2');
}
@font-face{
  font-family:'Apple Garamond'; font-style:italic; font-weight:700;
  font-display:swap; src:url('../fonts/applegaramond-bold-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ----------------------------------------------------------------- tokens */
:root{
  /* Verde y crema salen del SVG del logotipo, no de la referencia, para que
     la marca no desentone nunca contra el fondo. */
  --green:#183E2A;
  --green-d:#0F2A1C;
  --green-t:#1E4C34;
  --cream:#F5F1E6;
  --cream-l:#FAF7EF;
  --sand:#E2D8C0;
  --sand-d:#D3C6A8;
  --ink:#14251A;
  --muted:#5A6B5E;                    /* 5.3:1 sobre crema */
  --line:rgba(24,62,42,.20);
  --line-2:rgba(24,62,42,.42);
  --on-green:rgba(245,241,230,.30);
  --on-green-2:rgba(245,241,230,.62);

  --display:'Apple Garamond',"ITC Garamond","EB Garamond",Garamond,Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;

  --pad:clamp(1.15rem,4.4vw,4.5rem);
  --gap:clamp(4rem,9.5vw,9.5rem);
  --max:1560px;
  --nav-h:70px;
  --notch:26px;

  /* Escala de capas con nombre: nunca un z-index suelto. */
  --z-base:1;
  --z-media:2;
  --z-cajon:80;
  --z-barra:90;
  --z-salto:200;

  /* Curvas propias: las de serie son demasiado blandas. */
  --out:cubic-bezier(.23,1,.32,1);
  --in-out:cubic-bezier(.77,0,.175,1);
}

/* ------------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}

/* Resistencia al contenido editado despues.
   Una palabra larga (una URL, un nombre sin espacios) es la causa numero uno
   de que una maqueta se descuadre cuando el cliente cambia un texto. */
h1,h2,h3,h4,p,li,a,span,blockquote,figcaption,label{overflow-wrap:anywhere}
.dsp{overflow-wrap:break-word}          /* en display, romper solo si no cabe */

/* Un hijo de grid o flex no encoge por debajo de su contenido salvo que se
   le diga. Sin esto, un texto largo desborda la columna en lugar de partir. */
.wrap > *,.split > *,.vrow > *,.form-row > *,.foot-top > *,.about-grid > *{min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:clamp(.94rem,.9rem + .18vw,1rem);
  line-height:1.62;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.on-green :focus-visible{outline-color:var(--cream)}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--gap)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:var(--z-salto);background:var(--green);color:var(--cream);padding:.75rem 1.1rem;font-weight:600}

/* --------------------------------------------------- sistema tipografico */
/* VERSALES ROMANA + <em>cursiva minuscula</em>, siempre en la misma familia.
   Kerning cerrado: Apple Garamond es condensada y aguanta tracking negativo
   sin que las versales lleguen a tocarse. */
.dsp{
  font-family:var(--display);font-weight:300;
  text-wrap:balance;                  /* lineas parejas, sin huerfanas */
  text-transform:uppercase;font-style:normal;
  line-height:.98;letter-spacing:-.014em;
  padding-bottom:.1em;                /* holgura para descendentes en cursiva */
  margin:0;
}
.dsp em{font-style:italic;font-weight:300;text-transform:lowercase;letter-spacing:-.018em}
.d-xl{font-size:clamp(2.9rem,10.6vw,10rem);line-height:.92}
.d-lg{font-size:clamp(2.5rem,7.2vw,5.6rem)}
.d-md{font-size:clamp(1.95rem,4.1vw,3.7rem)}
.d-sm{font-size:clamp(1.5rem,2.5vw,2.2rem);line-height:1.04;font-weight:400;letter-spacing:-.01em}

.lbl{
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.15em;line-height:1.4;
}
.lede{font-size:clamp(1rem,.95rem + .3vw,1.12rem);line-height:1.58;max-width:56ch;color:var(--muted);text-wrap:pretty}
.on-green .lede{color:rgba(245,241,230,.76)}

.head{margin-bottom:clamp(2.2rem,5vw,4rem)}
.head .dsp{max-width:18ch}            /* ch se resuelve con la display, no con Inter */
.head .lede{margin-top:1.3rem}

/* ---------------------------------------------------------------- botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1rem 1.9rem;border:1px solid transparent;cursor:pointer;
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;white-space:nowrap;
  transition:background-color .2s var(--out),color .2s var(--out),
             border-color .2s var(--out),transform .16s var(--out);
}
.btn-green{background:var(--green);color:var(--cream);border-color:var(--green)}
.btn-cream{background:var(--cream);color:var(--green);border-color:var(--cream)}
.btn-line{background:transparent;color:var(--green);border-color:var(--line-2)}
.on-green .btn-line{color:var(--cream);border-color:var(--on-green-2)}

@media (hover:hover) and (pointer:fine){
  .btn-green:hover{background:var(--green-t);border-color:var(--green-t)}
  .btn-cream:hover{background:var(--sand);border-color:var(--sand)}
  .btn-line:hover{background:var(--green);color:var(--cream);border-color:var(--green)}
  .on-green .btn-line:hover{background:var(--cream);color:var(--green);border-color:var(--cream)}
}
/* Respuesta al pulsar: el boton tiene que acusar el golpe. */
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.6;cursor:progress;transform:none}
@media (prefers-reduced-motion:reduce){.btn:active{transform:none}}

/* ------------------------------------------------------------------- nav */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-barra);height:var(--nav-h);
  display:flex;align-items:center;color:var(--cream);
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .3s var(--out),border-color .3s var(--out),color .3s var(--out);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;width:100%}
.nav.pinned{
  background:rgba(245,241,230,.86);color:var(--green);border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}

/* El logotipo tiene dos versiones: beige sobre foto o verde, verde sobre crema. */
.brand{display:flex;align-items:center;flex:none;position:relative}
.brand img{height:clamp(26px,3.2vw,34px);width:auto;transition:opacity .3s var(--out)}
.brand .logo-verde{position:absolute;inset:0;opacity:0}
.nav.pinned .brand .logo-beige{opacity:0}
.nav.pinned .brand .logo-verde{opacity:1}

.nav-menu{display:flex;align-items:center;gap:2rem}
.nav-menu a{
  font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;
  opacity:.82;transition:opacity .2s var(--out);
}
@media (hover:hover) and (pointer:fine){.nav-menu a:hover{opacity:1}}
.nav .btn{padding:.7rem 1.25rem}

/* 44px de lado minimo en todo lo que se toca con el dedo. */
.burger{
  display:none;background:none;border:0;cursor:pointer;
  min-height:44px;min-width:44px;padding:.5rem;margin-right:-.5rem;
  font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
}
/* Sin esta regla el cajon se pinta en flujo normal en escritorio. */
.drawer{display:none}

@media (max-width:1000px){
  .nav-menu,.nav > .wrap > .btn{display:none}
  .burger{display:block}
  .nav.open{background:var(--green);color:var(--cream);border-bottom-color:var(--on-green)}
  .nav.open .brand .logo-beige{opacity:1}
  .nav.open .brand .logo-verde{opacity:0}
  .drawer{
    position:fixed;inset:var(--nav-h) 0 auto 0;z-index:var(--z-cajon);display:flex;
    flex-direction:column;gap:.1rem;background:var(--green);color:var(--cream);
    padding:1.3rem var(--pad) 2.4rem;border-bottom:1px solid var(--on-green);
    /* Se anima con clip-path: no toca layout y va en GPU. */
    clip-path:inset(0 0 100% 0);pointer-events:none;
    transition:clip-path .18s var(--out);
  }
  .drawer.open{clip-path:inset(0 0 0 0);pointer-events:auto;transition-duration:.32s}
  .drawer a{
    font-family:var(--display);font-size:2rem;text-transform:uppercase;
    font-weight:300;letter-spacing:-.014em;padding-block:.4rem;
  }
  .drawer .btn{margin-top:1.1rem;width:100%}
  @media (prefers-reduced-motion:reduce){
    .drawer{transition:none;clip-path:none;display:none}
    .drawer.open{display:flex}
  }
}

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative;min-height:100dvh;display:flex;align-items:flex-end;
  overflow:hidden;color:var(--cream);
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
/* La foto se queda en blanco y negro. El degradado es neutro a proposito:
   un velo verde la teñiria y dejaria de ser una foto en blanco y negro. */
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.62) 0%,rgba(10,10,10,.26) 30%,rgba(10,10,10,.34) 58%,rgba(10,10,10,.86) 100%);
}
.hero-title{position:relative;z-index:var(--z-media);width:100%;padding:0 var(--pad) clamp(1.6rem,4vw,3.5rem);text-align:center}
.hero-title .dsp{color:var(--cream)}

/* ---------------------------------------------- sobre nosotros (con foto) */
/* Estructura calcada de la referencia: titular centrado, foto apilada a la
   izquierda con el texto a la derecha, y un titular gigante a sangre debajo. */
.about{padding-block:var(--gap) 0;overflow:hidden}
.about-top{text-align:center;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.about-grid{
  display:grid;gap:clamp(1.8rem,4vw,3.2rem);align-items:start;
  max-width:1080px;margin-inline:auto;
}
@media (min-width:860px){.about-grid{grid-template-columns:minmax(0,340px) minmax(0,1fr)}}

/* Efecto de fotos apiladas: dos hojas detras, giradas apenas. */
.about-photo{position:relative;isolation:isolate}
.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;position:relative;z-index:var(--z-media)}
.about-photo::before,.about-photo::after{
  content:'';position:absolute;inset:0;z-index:var(--z-base);background:var(--green);
}
.about-photo::before{transform:rotate(-2.2deg) translate(-10px,8px);opacity:.28}
.about-photo::after{transform:rotate(1.6deg) translate(12px,-6px);opacity:.16}
/* Las hojas de detras entran con la foto, no antes: si no, se ven dos
   rectangulos verdes sueltos mientras la cortinilla sigue cerrada.
   Solo aplica con JS: ver la nota del bloque de movimiento. */

.about-text{display:grid;gap:1.15rem;max-width:62ch}
.about-text p{color:var(--ink);text-wrap:pretty}

/* Titular a sangre. Es una frase, no un lema de dos palabras: asi llena el
   ancho en dos lineas igual que en la referencia. */
.about-huge{
  margin-top:clamp(2rem,5vw,4rem);text-align:center;
  font-family:var(--display);font-weight:300;font-style:normal;
  font-size:clamp(2.6rem,10.4vw,10.5rem);line-height:.9;letter-spacing:-.026em;
  color:var(--green);padding-bottom:.08em;
  padding-inline:var(--pad);max-width:22ch;margin-inline:auto;
}
.about-huge em{font-style:italic;text-transform:lowercase}

/* Banda de color que separa dos bloques de crema. El titular vive dentro. */
.band{background:var(--green);color:var(--cream);padding-block:clamp(3rem,6.5vw,6rem)}
.band .head{margin-bottom:0}
.sec-tight{padding-block:clamp(2.5rem,5.5vw,5rem)}

/* --------------------------------------------- verticales, filas editoriales */
/* Sin tarjetas: la elevacion no comunica nada aqui, un filete si. La fila
   entera es el enlace, asi que el area pulsable es enorme en movil. */
.vlist{border-top:1px solid var(--line)}
.vlist li{border-bottom:1px solid var(--line)}
.vrow{
  display:grid;gap:.5rem clamp(1.5rem,4vw,4rem);
  padding-block:clamp(1.6rem,3.2vw,2.6rem);
  align-items:baseline;
  transition:background-color .25s var(--out),padding-inline .25s var(--out);
}
@media (min-width:820px){
  .vrow{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto}
}
.vrow h3{color:var(--green)}
.vrow p{color:var(--muted);text-wrap:pretty;max-width:52ch}
.vrow-arw{
  color:var(--green);opacity:.45;font-size:1.25rem;line-height:1;
  transition:transform .25s var(--out),opacity .25s var(--out);
  justify-self:start;
}
@media (min-width:820px){.vrow-arw{justify-self:end;align-self:center}}

@media (hover:hover) and (pointer:fine){
  .vrow:hover{background:var(--cream-l);padding-inline:clamp(.8rem,1.6vw,1.4rem)}
  .vrow:hover .vrow-arw{transform:translateX(6px);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .vrow,.vrow:hover{transition:none;padding-inline:0}
  .vrow:hover .vrow-arw{transform:none}
}

/* -------------------------------------------------------------- planes */
.planes{background:var(--green);color:var(--cream)}
.planes-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4.5vw,3.4rem)}
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);
  gap:clamp(.85rem,1.4vw,1.1rem);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:var(--pad);margin-inline:calc(var(--pad) * -1);padding-bottom:1.1rem;
  scrollbar-width:thin;scrollbar-color:var(--on-green-2) transparent;
  overscroll-behavior-x:contain;
}
/* auto-fit, no `repeat(4,1fr)`: con tres planes no queda una columna vacia
   y con seis no se salen. El cliente publica los que tenga. */
@media (min-width:1100px){
  .rail{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
        overflow:visible;padding-inline:0;margin-inline:0;padding-bottom:0}
}
.rail::-webkit-scrollbar{height:2px}
.rail::-webkit-scrollbar-thumb{background:var(--on-green-2)}

/* Chaflan superior derecho: unica excepcion al filo recto, igual en todas. */
.plan{
  scroll-snap-align:start;background:var(--cream);color:var(--green);
  display:flex;flex-direction:column;gap:.3rem;padding:1.3rem 1.35rem 1.4rem;
  min-height:clamp(200px,17vw,240px);
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%);
  transition:transform .22s var(--out),background-color .22s var(--out);
}
.plan--alt{background:var(--sand)}
@media (hover:hover) and (pointer:fine){
  .plan:hover{transform:translateY(-4px)}
}
@media (prefers-reduced-motion:reduce){.plan:hover{transform:none}}
.plan-date{color:var(--green);opacity:.55}
.plan h3{margin:.35rem 0 .1rem}
.plan-where{font-size:.9375rem;color:#3F5044}
.plan-desc{margin-top:.45rem;font-size:.9375rem;line-height:1.5;color:#4A5B4F;text-wrap:pretty}
.plan-foot{margin-top:auto;padding-top:1rem;display:flex;align-items:center;gap:.5rem;min-height:44px}
.plan-foot .arw{transition:transform .22s var(--out)}
@media (hover:hover) and (pointer:fine){.plan:hover .plan-foot .arw{transform:translateX(5px)}}
.plan-foot.is-out{opacity:.42}

/* Hueco en preparacion: la misma tarjeta, vaciada. No lleva fondo crema sino
   un velo sobre el verde, para que se lea como sitio reservado y no compita
   con las fechas que si estan cerradas. Sin marco: el chaflan esta hecho con
   clip-path y un borde saldria cortado en la diagonal. Sin hover tampoco:
   aqui no hay nada que pulsar. */
.plan--soon,.plan--soon.plan--alt{
  background:rgba(245,241,230,.10);color:var(--cream);
}
.plan--soon .plan-date{color:var(--cream);opacity:.5}
.plan--soon h3{color:rgba(245,241,230,.72)}
.plan--soon .plan-where{color:rgba(245,241,230,.5)}
@media (hover:hover) and (pointer:fine){.plan--soon:hover{transform:none}}

/* La barra dice "esto se esta cociendo" sin escribirlo. Va en el sitio del
   enlace de entradas, asi que la tarjeta mantiene la misma altura. */
.plan-load{align-items:flex-end}
.plan-load-bar{display:block;width:100%;height:2px;background:var(--on-green);overflow:hidden;position:relative}
.plan-load-bar::after{
  content:"";position:absolute;inset:0;width:38%;background:var(--cream);
  animation:plan-load 2.4s var(--in-out) infinite;
}
@keyframes plan-load{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(340%)}
}
/* Sin movimiento queda una barra corta y quieta, que sigue diciendo lo mismo. */
@media (prefers-reduced-motion:reduce){.plan-load-bar::after{animation:none}}

/* ----------------------------------------------------------- proximo drop */
/* Ficha grande en arena, con el mismo chaflan que las tarjetas del carril
   pero al tamano de la seccion. Va sobre crema y justo debajo de la cabecera
   verde de la pagina: el cambio de material es lo que la separa. */
.drop-card{
  /* El chaflan crece con la tarjeta: 26px fijos se pierden en una ficha de
     esta anchura y 52px se comen la esquina en un movil. */
  --dnotch:clamp(30px,5vw,52px);
  background:var(--sand);color:var(--green);
  padding:clamp(1.7rem,4vw,3.4rem);
  display:grid;gap:clamp(1.8rem,4vw,3.2rem);
  clip-path:polygon(0 0,calc(100% - var(--dnotch)) 0,100% var(--dnotch),100% 100%,0 100%);
}
@media (min-width:940px){
  .drop-card{grid-template-columns:minmax(0,1fr) minmax(150px,auto);align-items:end}
}
.drop-kicker{display:block;opacity:.55;margin-bottom:.9rem}
.drop-card h2{max-width:14ch}
.drop-lede{margin-top:1.2rem;color:#3F5044}
.drop-btn{margin-top:2rem}

.drop-side{display:flex;flex-direction:column;gap:1.1rem}
@media (min-width:940px){.drop-side{align-items:flex-end;text-align:right}}
.drop-dato .lbl{display:block;opacity:.55;margin-bottom:.3rem}

/* La misma barra que los huecos del carril, en verde porque aqui el fondo es
   claro: dos sitios distintos, un solo modo de decir "esto viene". */
.drop-bar{width:min(100%,220px);background:rgba(24,62,42,.18)}
.drop-bar::after{background:var(--green)}

/* ---------------------------------------------------------------- split */
.split{display:grid;gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
@media (min-width:940px){.split{grid-template-columns:1fr 1fr}}
.panel{background:var(--green);color:var(--cream);padding:clamp(1.8rem,3.4vw,3rem)}
.steps{display:grid;gap:1.4rem;counter-reset:s}
.steps li{display:grid;grid-template-columns:2.2rem 1fr;gap:.9rem;align-items:start}
.steps li::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--display);font-size:1.15rem;color:var(--sand);line-height:1.5;
}
.steps h4{margin:0 0 .2rem;font-size:.95rem;font-weight:600;letter-spacing:-.01em}
.steps p{font-size:.9375rem;color:rgba(245,241,230,.76);max-width:42ch}

/* ------------------------------------------------------- viajes a sangre */
.feature{background:var(--green);color:var(--cream);padding-block:var(--gap);text-align:center;overflow:hidden}
.feature .dsp{color:var(--cream)}
.feature .lede{margin:1.5rem auto 0;text-align:center}
.feature .btn{margin-top:2.2rem}
.feature-meta{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0;
  margin-top:clamp(2.4rem,5vw,3.6rem);border-top:1px solid var(--on-green);
}
.feature-meta div{
  flex:1 1 160px;padding:1.15rem 1rem;border-bottom:1px solid var(--on-green);
  border-right:1px solid var(--on-green);
}
.feature-meta div:last-child{border-right:0}
.feature-meta .lbl{display:block;opacity:.55;margin-bottom:.3rem}

/* --------------------------------------------------------------- voces */
.voices{display:grid;gap:clamp(2.2rem,5vw,3.6rem)}
@media (min-width:880px){.voices{grid-template-columns:1fr 1fr}}
.voice{border-top:1px solid var(--line);padding-top:1.6rem}
.voice blockquote{
  margin:0;font-family:var(--display);font-size:clamp(1.35rem,2.2vw,1.85rem);
  font-style:italic;line-height:1.28;letter-spacing:-.012em;color:var(--green);
}
.voice figcaption{margin-top:1.2rem;font-size:.9375rem;color:var(--muted)}
.voice figcaption b{color:var(--ink);font-weight:600}

/* -------------------------------------------------------- cierre / lista */
.close{background:var(--green);color:var(--cream)}
.close .d-xl{color:var(--cream);text-align:center}
.info-row{display:grid;gap:10px;grid-template-columns:1fr;margin-top:clamp(1.8rem,4vw,2.8rem)}
@media (min-width:700px){.info-row{grid-template-columns:repeat(3,1fr)}}
.info-row div{border:1px solid var(--on-green);padding:1rem 1.2rem;text-align:center}
.info-row .lbl{opacity:.55;display:block;margin-bottom:.3rem}
.info-row span:last-child{font-size:.9375rem}

/* El formulario se difumina al cambiar de estado: el desenfoque tapa el
   salto entre los dos estados y se lee como una sola transformacion. */
.form{
  margin:clamp(2.2rem,5vw,3.4rem) auto 0;max-width:540px;
  transition:opacity .22s var(--out),filter .22s var(--out);
}
.form.is-leaving{opacity:0;filter:blur(6px);pointer-events:none}
/* Campo y boton forman una sola pieza en cuanto hay sitio: el boton suelto
   a la izquierda, bajo un bloque centrado, quedaba como un cabo sin atar.
   La etiqueta va fuera de la fila para que ambos midan exactamente igual. */
.field{display:grid;gap:.5rem}
.form-row{display:grid;gap:.6rem;margin-top:.5rem}
@media (min-width:520px){
  .form-row{grid-template-columns:minmax(0,1fr) auto;gap:0;align-items:stretch}
  .form-row .btn{margin-top:0;width:auto;border-left:0}
}
.field label,.form > .lbl{color:var(--cream);opacity:.75;display:block}
.field input[type=email]{
  width:100%;padding:1.05rem 1.15rem;background:transparent;color:var(--cream);
  border:1px solid var(--on-green-2);font:inherit;font-size:1rem;
  transition:border-color .2s var(--out),background-color .2s var(--out);
}
.field input::placeholder{color:rgba(245,241,230,.48)}
.field input:focus{background:rgba(245,241,230,.06)}
.field input:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.field input[aria-invalid=true]{border-color:var(--sand);box-shadow:inset 0 0 0 1px var(--sand)}
.err{margin-top:.5rem;font-size:.9375rem;font-weight:500;color:var(--sand)}
.consent{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.05rem;font-size:.875rem;line-height:1.55;color:rgba(245,241,230,.78)}
.consent input{margin-top:.22rem;accent-color:var(--sand);width:1rem;height:1rem;flex:none}
.consent a{text-decoration:underline;text-underline-offset:3px}
.form .btn{width:100%}

.form-ok{
  margin-top:clamp(2.2rem,5vw,3.4rem);text-align:center;
  opacity:0;transform:translateY(10px);filter:blur(6px);
  transition:opacity .34s var(--out),transform .34s var(--out),filter .34s var(--out);
}
.form-ok.is-in{opacity:1;transform:none;filter:none}
.form-ok p:last-child{margin-top:.6rem;color:rgba(245,241,230,.78)}

/* -------------------------------------------------------------- footer */
.foot{background:var(--green-d);color:var(--cream);padding-block:clamp(3rem,6vw,5rem) 2rem}
.foot-top{display:grid;gap:2.6rem;grid-template-columns:1fr}
@media (min-width:640px){.foot-top{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.foot-top{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.foot h4{margin:0 0 1rem;color:rgba(245,241,230,.45)}
.foot ul{display:grid;gap:.75rem;font-size:.9375rem}
.foot ul a{color:rgba(245,241,230,.82);transition:color .2s var(--out)}
@media (hover:hover) and (pointer:fine){.foot ul a:hover{color:var(--sand)}}
/* En el pie la marca se apila: logotipo arriba, redes debajo. Sin esto
   hereda el flex horizontal de la barra y el logotipo queda pegado a los
   iconos, en la misma linea. */
.foot .brand{flex-direction:column;align-items:flex-start;gap:clamp(1.5rem,2.4vw,2rem)}
.foot .brand img{height:44px}
.socials{display:flex;gap:.6rem}
.socials a{
  width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--on-green);
  transition:background-color .2s var(--out),border-color .2s var(--out);
}
@media (hover:hover) and (pointer:fine){
  .socials a:hover{background:rgba(245,241,230,.09);border-color:var(--on-green-2)}
}
.socials img{width:16px;height:16px;opacity:.85}
.foot-bot{
  margin-top:clamp(2.6rem,5vw,4.2rem);padding-top:1.3rem;border-top:1px solid var(--on-green);
  display:flex;flex-wrap:wrap;gap:.7rem 2rem;justify-content:space-between;
  font-size:.8125rem;color:rgba(245,241,230,.62);
}

/* ------------------------------------------------------- paginas internas */
.page-hero{background:var(--green);color:var(--cream);padding-block:calc(var(--nav-h) + clamp(3rem,7vw,6rem)) clamp(2.5rem,5vw,4.5rem)}
.page-hero .lede{margin-top:1.4rem}
.entry{max-width:70ch;margin-inline:auto;padding-block:var(--gap)}
.entry h2,.entry h3{font-family:var(--display);color:var(--green);margin:2.2rem 0 .8rem;line-height:1.1;letter-spacing:-.014em;font-weight:400}
.entry h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.entry p{margin-bottom:1.05rem;text-wrap:pretty}
.entry ul{list-style:disc;padding-left:1.2rem;margin-bottom:1.05rem;display:grid;gap:.5rem}
.entry a{text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------------- ritmo vertical */
/* El mismo padding en todas las secciones da un pulso plano. Los bloques de
   color, que ya pesan por si solos, van algo mas apretados que los de crema. */
.planes,.feature,.close{padding-block:clamp(3.4rem,7.6vw,7.6rem)}
.about{padding-block:var(--gap) 0}
#voces{padding-block:clamp(3.4rem,7.6vw,7.6rem)}

/* --------------------------------------------------------- ajuste movil */
/* La mayoria del trafico entra por telefono. El texto corrido ya va a 14px
   o mas; aqui se da algo mas de cuerpo a lo que se toca con el dedo. */
@media (max-width:720px){
  .btn{font-size:.8125rem;padding:1.05rem 1.7rem}
  .lbl{font-size:.775rem}
  .drawer a{font-size:1.75rem}
  .steps li{grid-template-columns:1.9rem 1fr;gap:.8rem}
  .vcard{min-height:0}
  .voice blockquote{font-size:1.3rem}
}

/* ------------------------------------------------------------ movimiento */
/* Revelado al entrar en pantalla. Cuenta jerarquia: cada bloque aparece
   cuando toca leerlo. Escalonado corto para no dar sensacion de lentitud.
   
   TODO lo animado parte de visible y solo se oculta bajo `.js`, que pone un
   script en linea en el <head>. Si el JS falla, lo bloquea una extension o
   la pagina la pinta un rastreador o el bot de previsualizacion de un enlace,
   el contenido se ve igual. Sin esta guarda la landing se serviria en blanco. */
.rv{opacity:1;transform:none}
.js .rv{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--out),transform .6s var(--out);
  transition-delay:calc(var(--i,0) * 60ms);
}
.js .rv.in{opacity:1;transform:none}

/* Cortinilla para las fotos: no toca layout y va en GPU.
   El recorte se aplica al HIJO, nunca al propio elemento observado: un
   elemento recortado a cero devuelve un intersectionRect vacio y el
   IntersectionObserver que lo vigila no lo daria por visible jamas. */
.js .rv-mask > img,
.js .rv-mask > picture img{
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--in-out);
  transition-delay:calc(var(--i,0) * 60ms);
}
.js .rv-mask.in > img,
.js .rv-mask.in > picture img{clip-path:inset(0 0 0 0)}
.js .about-photo.rv-mask::before,
.js .about-photo.rv-mask::after{opacity:0;transition:opacity .55s var(--out) .12s}
.js .about-photo.rv-mask.in::before{opacity:.28}
.js .about-photo.rv-mask.in::after{opacity:.16}

@media (prefers-reduced-motion:no-preference){
  .js .enter{
    opacity:0;transform:translateY(18px);
    animation:up .7s var(--out) forwards;
    animation-delay:calc(var(--i,0) * 70ms + 120ms);
  }
  @keyframes up{to{opacity:1;transform:none}}
}

/* Movimiento reducido: se conserva la opacidad, se retira el desplazamiento. */
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .js .rv-mask > img,
  .js .rv-mask > picture img{clip-path:none;transition:none}
  .form,.form-ok{transition:opacity .2s linear;filter:none;transform:none}
  .form-ok{opacity:1}
}