/* ═══════════════════════════════════════════════════════════════════════════
   SECCIONES · Concepto · Proceso · Cierre · Características · Galería · Ruta
   Los valores están medidos, no aproximados. La referencia de la que salen
   está anotada en el handoff, no aquí.

   Pieza portable. Depende de:
     · un root font-size fluido (bloque 0)
     · los tokens del bloque 1
     · la retícula del bloque 3 (16 / 12 / 4 columnas)
   No depende de ningún framework, ni de GSAP. La única animación con JS es
   el apilado de tarjetas en mobile; el carrusel 3D es CSS puro.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 0 · SISTEMA DE MEDIDAS ────────────────────────────────────────────────
   Idéntico al de navbar.css. Si ya cargaste navbar.css, este bloque es
   redundante pero inofensivo (mismos valores). Si el sitio ya tiene su
   sistema fluido, borra los dos.
   1rem ≈ 10px en el ancho de diseño de cada breakpoint.                     */
html{
  --fs-global: .672043vw;                 /* 10px / 1488px  · desktop */
  font-size: var(--fs-global);
}
@media only screen and (min-width:1488px){ html{ --fs-global: 10px } }
@media only screen and (max-width:991px){  html{ --fs-global: 1.199041vw } }  /* 10px / 834px */
@media only screen and (max-width:767px){  html{ --fs-global: 2.544529vw } }  /* 10px / 393px */


/* ── 1 · TOKENS QUE HAY QUE MAPEAR ────────────────────────────────────────
   Dos familias:
     --sec-*   la página normal
     --band-*  la franja invertida de Galería

   En la referencia esa franja es NARANJA con texto oscuro encima. Aquí va
   en tinta con texto papel, que es su equivalente monocromo. Para colorearla
   basta con mover --band-bg y ajustar los cuatro textos: nada más depende
   de ese color.                                                             */
/* Los colores ya NO se escriben aquí: salen de /estilo/tokens.css, que
   es la paleta del sistema. Antes esta página tenía su propio negro
   -#111111 contra el #141416 de la casa- y su propia rampa de grises,
   así que un cambio de marca había que hacerlo dos veces y siempre se
   olvidaba una. Los nombres --sec-* se conservan para no tocar las mil
   usos de abajo: esto es un puente, no un rediseño. */
:root{
  --sec-bg:          var(--papel);
  --sec-strong:      var(--tinta);            /* títulos                     */
  --sec-sub:         var(--sub);              /* bajadas                     */
  --sec-soft:        var(--soft);             /* cuerpo                      */
  --sec-note:        var(--note);             /* numeritos, PASO 1           */
  --sec-disable:     var(--apagado);          /* etiqueta de sección         */
  --sec-line:        var(--linea);            /* reglas de 1px               */
  --sec-card-bg:     rgba(20,20,22,.035);     /* relleno de tarjeta          */
  --sec-card-bd:     rgba(20,20,22,.08);      /* borde de tarjeta            */
  --sec-card-solid:  var(--sup);              /* la misma pero OPACA: es la  */
                                              /* que toman las tarjetas al   */
                                              /* apilarse en mobile          */

  --band-bg:         #111111;                 /* ← aquí va el color de marca */
  --band-strong:     #FFFFFF;
  --band-sub:        rgba(255,255,255,.70);
  --band-soft:       rgba(255,255,255,.50);
  --band-line:       rgba(255,255,255,.20);
  --band-tag-bg:     #FFFFFF;                 /* la etiqueta usa el fondo    */
  --band-tag-txt:    #111111;                 /*   de la página, invertida   */
  --band-card-a:     rgba(255,255,255,.16);   /* placeholder de las piezas   */
  --band-card-b:     rgba(255,255,255,.04);

  --art-glow:        rgba(17,17,17,.10);      /* el barrido de luz de fondo   */
  --art-tile-a:      rgba(17,17,17,.16);      /* placeholder de los 12 tiles  */
  --art-tile-b:      rgba(17,17,17,.05);

  --road-bg:         #EAE8E3;                 /* la franja gris de Ruta       */
  --road-line:       rgba(17,17,17,.18);
  --road-tile-a:     rgba(17,17,17,.14);
  --road-tile-b:     rgba(17,17,17,.04);

  --sec-ease:        ease;
  --sec-ease-out:    cubic-bezier(.215,.61,.355,1);   /* power3.out          */

  --sec-container-max: 148.8rem;
  --sec-container-pad: 8rem;
  --sec-container-gap: 1.6rem;
  --sec-columns:       16;
}
@media only screen and (max-width:991px){
  :root{ --sec-container-pad:3.2rem; --sec-columns:12 }
}
@media only screen and (max-width:767px){
  :root{ --sec-container-pad:1.6rem; --sec-columns:4 }
}

html[data-theme="dark"]{
  --sec-bg:          var(--noche);
  --sec-strong:      var(--noche-tinta);
  --sec-sub:         var(--noche-sub);
  --sec-soft:        var(--noche-soft);
  --sec-note:        var(--noche-note);
  --sec-disable:     var(--noche-apagado);
  --sec-line:        var(--noche-linea);
  --sec-card-bg:     rgba(255,255,255,.045);
  --sec-card-bd:     rgba(255,255,255,.08);
  --sec-card-solid:  var(--noche-sup);

  --band-bg:         #F2F1EE;
  --band-strong:     #111111;
  --band-sub:        rgba(17,17,17,.70);
  --band-soft:       rgba(17,17,17,.50);
  --band-line:       rgba(17,17,17,.20);
  --band-tag-bg:     #0D0D0D;
  --band-tag-txt:    #FFFFFF;
  --band-card-a:     rgba(17,17,17,.18);
  --band-card-b:     rgba(17,17,17,.05);

  --art-glow:        rgba(255,255,255,.10);
  --art-tile-a:      rgba(255,255,255,.16);
  --art-tile-b:      rgba(255,255,255,.05);

  --road-bg:         #161616;
  --road-line:       rgba(255,255,255,.18);
  --road-tile-a:     rgba(255,255,255,.14);
  --road-tile-b:     rgba(255,255,255,.05);
}


/* ── 2 · MAPEO DEL NAVBAR ─────────────────────────────────────────────────
   navbar.css trae sus propios --nav-* en claro. Aquí se reapuntan a la
   paleta de la página, para que el toggle de tema también lo mueva.
   Si no vas a usar navbar.css, borra este bloque entero.                    */
:root{
  --nav-accent:       var(--sec-strong);
  --nav-accent-hover: var(--sec-strong);
  --nav-on-accent:    var(--sec-bg);
  --nav-strong:       var(--sec-strong);
  --nav-soft:         var(--sec-soft);
  --nav-disable:      var(--sec-disable);
  --nav-border:       rgba(17,17,17,.14);
  --nav-pill:         rgba(17,17,17,.055);
  --nav-pill-mobile:  rgba(255,255,255,.55);
  --nav-glass:        rgba(17,17,17,.035);
  --nav-tick:         rgba(17,17,17,.22);
}
html[data-theme="dark"]{
  --nav-border:       rgba(255,255,255,.12);
  --nav-pill:         rgba(255,255,255,.06);
  --nav-pill-mobile:  rgba(255,255,255,.07);
  --nav-glass:        rgba(255,255,255,.04);
  --nav-tick:         rgba(255,255,255,.22);
}


/* ── 3 · RETÍCULA ─────────────────────────────────────────────────────────
   16 columnas en desktop, 12 en tablet, 4 en phone. El gutter no cambia:
   1.6rem en los tres, y como el rem es fluido, escala solo.                 */
.sc-container{
  position:relative; z-index:2;
  width:100%;
  max-width:var(--sec-container-max);
  margin-inline:auto;
  padding-inline:var(--sec-container-pad);
}
@media only screen and (max-width:991px){ .sc-container{ max-width:none } }

.sc-grid{
  display:grid;
  column-gap:var(--sec-container-gap);
  grid-template-rows:auto;
  grid-template-columns:repeat(16, minmax(0,1fr));
}
@media only screen and (max-width:991px){ .sc-grid{ grid-template-columns:repeat(12, minmax(0,1fr)) } }
@media only screen and (max-width:767px){ .sc-grid{ grid-template-columns:repeat(4,  minmax(0,1fr)) } }

/* Escala tipográfica. Los tres tamaños de cada nivel son los de la
   referencia; el peso 300 en los títulos también.                           */
.sc-h1{ margin:0; font-weight:300; font-size:6.8rem; line-height:1em; letter-spacing:-.015em }
.sc-h5{ margin:0; font-weight:300; font-size:2.4rem; line-height:1.1em }
.sc-t52{ margin:0; font-size:5.2rem; font-weight:300; line-height:1.2em }
.sc-t20{ margin:0; font-size:2rem;   font-weight:400; line-height:1.4em }
.sc-t16{ margin:0; font-size:1.6rem; font-weight:400; line-height:1.4em }
.sc-lbl{ font-weight:500; line-height:1em; letter-spacing:.1em; text-transform:uppercase }
.sc-lbl-10{ font-size:1rem }
.sc-lbl-14{ font-size:1.4rem }
@media only screen and (max-width:991px){
  .sc-h1{ font-size:4.4rem }
  .sc-h5{ font-size:2rem }
  .sc-t52{ font-size:4rem }
  .sc-t20{ font-size:1.8rem }
}
@media only screen and (max-width:767px){
  .sc-h1{ font-size:3.6rem }
  .sc-h5{ font-size:2rem }
  .sc-t52{ font-size:3.2rem }
}

.sc-line{ width:100%; height:1px; background-color:var(--sec-line) }
.sc-line.is-vert{ width:1px; height:100% }

.sc-ic{ display:block; width:6.4rem; height:6.4rem; color:currentColor }
.sc-ic svg{ display:block; width:100%; height:100% }
.sc-ic.is-24{ width:2.4rem; height:2.4rem }
@media only screen and (max-width:991px){ .sc-ic{ width:4.8rem; height:4.8rem } }
@media only screen and (max-width:767px){
  .sc-ic{ width:3.2rem; height:3.2rem }
  .sc-ic.is-24{ width:2rem; height:2rem }
}


/* ═══════════════════════════════════════════════════════════════════════════
   4 · CONCEPTO   (referencia: #about)

   Son dos bloques pegados, no uno:
     · la moneda con su párrafo, que se enciende palabra por palabra
       conforme entra a pantalla (eso sí necesita JS, ver secciones.js);
     · el anillo de doce piezas girando, con un barrido de luz detrás.
   ═══════════════════════════════════════════════════════════════════════════ */
.coin{ position:relative; z-index:2 }

.coin-img{
  grid-area:1/7/2/11;
  display:flex; justify-content:center; align-items:center;
  margin-top:6rem; margin-bottom:4.8rem;
  color:var(--sec-strong);
}
.coin-img-inner{ flex:none; width:100%; max-width:30.4rem; aspect-ratio:1 }
.coin-img-inner svg{ width:100%; height:100% }

.coin-sub{
  grid-area:2/1/3/-1;
  width:100%; max-width:100.7rem;
  margin-inline:auto; margin-bottom:7.8rem;
  text-align:center;
  color:var(--sec-disable);          /* el estado apagado, y el fallback  */
}
/* Cada palabra en su propio span. El JS le sube la opacidad de .2 a 1 en
   cascada; si el JS no corre, se queda el párrafo apagado y legible. */
.coin-sub .w{ color:var(--sec-strong); opacity:.2 }

@media only screen and (max-width:991px){
  .coin-img{ grid-column:5/9; margin-top:4.2rem; margin-bottom:2rem }
  .coin-img-inner{ max-width:17.4rem }
  .coin-sub{ grid-column:2/12; margin-bottom:11rem }
}
@media only screen and (max-width:767px){
  /* El degradado tapa el barrido de luz que se sube desde el anillo */
  .coin{ background-image:linear-gradient(var(--sec-bg) 50%, transparent) }
  .coin-img{ grid-column:1/-1; margin-top:2.4rem; margin-bottom:3.2rem }
  .coin-sub{ grid-column:1/-1; margin-bottom:0 }
}


/* ── El anillo ──────────────────────────────────────────────────────────── */
/* Arriba se queda en 26.2; abajo baja a 10 porque lo que sigue es la
   cita y entre las dos no tiene que haber una pantalla de vacío. Antes
   de esto, medido, había 418 px entre el anillo y el titular. */
.art{ position:relative; z-index:1;
      padding-top:26.2rem; padding-bottom:10rem; overflow:hidden }

/* El fondo. En la referencia es un video en loop; aquí es un barrido de luz
   en CSS con la misma máscara de dos ejes: se desvanece arriba y abajo al
   10/90%, y a los lados al 25/75%. mask-composite las cruza. */
.art-bg{
  position:absolute; top:0; left:0; z-index:1;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:center;
  width:100%; height:100%;
  pointer-events:none;
}
.art-bg-main{
  position:relative; flex:1;
  display:flex; flex-flow:column; justify-content:space-between;
  width:100%; max-width:172.8rem; margin:-45rem auto;
  -webkit-mask-image:linear-gradient(#0000,#000 10% 90%,#0000),
                     linear-gradient(90deg,#0000,#000 25% 75%,#0000);
          mask-image:linear-gradient(#0000,#000 10% 90%,#0000),
                     linear-gradient(90deg,#0000,#000 25% 75%,#0000);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.art-bg-main-inner{
  position:relative; z-index:1;
  height:34rem; margin-inline:-15rem;
  overflow:hidden;
}
.art-bg-main-inner.is-bot{ transform:rotate(180deg) }
/* En el teléfono el resplandor de abajo -brasa al 14%- deja una mancha
   naranja entre el anillo y la sección siguiente, que es papel: se lee
   como un degradado a medio terminar. En escritorio hay aire de sobra y
   sí funciona; aquí sale. */
@media(max-width:767px){ .art-bg-main-inner.is-bot{ display:none } }
.art-bg-main-inner::before{
  content:''; position:absolute; inset:-30% -50%;
  background:radial-gradient(50% 50% at 50% 50%, var(--art-glow), transparent 70%);
  animation:art-travel 18s ease-in-out infinite alternate;
}
@keyframes art-travel{ from{ transform:translateX(-35%) } to{ transform:translateX(35%) } }

.art-label-left { grid-area:1/1/2/4;  align-self:center; text-align:left;  color:var(--sec-sub) }
.art-label-right{ grid-area:1/14/2/17; align-self:center; text-align:right; color:var(--sec-sub) }

.art-main{
  grid-area:1/4/2/14;
  display:flex; justify-content:center; align-items:center;
  padding:9rem;
}
.art-main-inner{ position:relative; width:100%; max-width:52.2rem; aspect-ratio:1 }

/* Cada pieza es una capa del tamaño completo del cuadrado, con su tile
   pegado arriba y subido media altura. Al rotar la capa, el tile describe
   la circunferencia. Doce piezas × 2.5s de delay = los 30s de la vuelta. */
.art-item{
  position:absolute; inset:0 auto auto 0; z-index:1;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:center;
  width:100%; height:100%;
  animation:ring 30s linear infinite;
}
.art-tile{
  width:18rem; height:18rem; margin-top:-9rem;
  border-radius:1rem; overflow:hidden;
  background-image:linear-gradient(160deg, var(--art-tile-a), var(--art-tile-b));
  /* contragiro a la misma velocidad: el tile orbita pero no se voltea */
  animation:ring-counter 30s linear infinite;
}
@keyframes ring        { from{ transform:rotate(0deg) }   to{ transform:rotate(360deg) } }
@keyframes ring-counter{ from{ transform:rotate(360deg) } to{ transform:rotate(0deg) } }

/* Fuera de pantalla se detiene todo lo de esta sección. Lo pone secciones.js */
.art.is-idle .art-item,
.art.is-idle .art-tile,
.art.is-idle .art-bg-main-inner::before{ animation-play-state:paused }

.art-item:nth-child(1),  .art-item:nth-child(1)  .art-tile{ animation-delay:0s }
.art-item:nth-child(2),  .art-item:nth-child(2)  .art-tile{ animation-delay:-2.5s }
.art-item:nth-child(3),  .art-item:nth-child(3)  .art-tile{ animation-delay:-5s }
.art-item:nth-child(4),  .art-item:nth-child(4)  .art-tile{ animation-delay:-7.5s }
.art-item:nth-child(5),  .art-item:nth-child(5)  .art-tile{ animation-delay:-10s }
.art-item:nth-child(6),  .art-item:nth-child(6)  .art-tile{ animation-delay:-12.5s }
.art-item:nth-child(7),  .art-item:nth-child(7)  .art-tile{ animation-delay:-15s }
.art-item:nth-child(8),  .art-item:nth-child(8)  .art-tile{ animation-delay:-17.5s }
.art-item:nth-child(9),  .art-item:nth-child(9)  .art-tile{ animation-delay:-20s }
.art-item:nth-child(10), .art-item:nth-child(10) .art-tile{ animation-delay:-22.5s }
.art-item:nth-child(11), .art-item:nth-child(11) .art-tile{ animation-delay:-25s }
.art-item:nth-child(12), .art-item:nth-child(12) .art-tile{ animation-delay:-27.5s }

@media only screen and (max-width:991px){
  .art{ padding-block:10.4rem }
  .art-bg-main{ margin-block:-19rem }
  .art-bg-main-inner{ margin-inline:-6.6rem }
  .art-main{ grid-column-end:10; padding:4.8rem }
  .art-main-inner{ max-width:28rem }
  .art-tile{ width:9.6rem; height:9.6rem; margin-top:-4.8rem; border-radius:.6rem }
  .art-label-right{ grid-column:10/13 }
}
@media only screen and (max-width:767px){
  .art{ padding-block:10rem }
  .art-bg-main{ margin-block:0 }
  .art-bg-main-inner{ margin-inline:-7.8rem }
  .art-label-left { grid-column-end:-1; text-align:center; margin-bottom:4rem }
  .art-main{ grid-area:2/1/3/-1 }
  .art-main-inner{ max-width:21rem }
  .art-label-right{ grid-area:3/1/4/-1; text-align:center; margin-top:4rem }
  .art-tile{ width:7.2rem; height:7.2rem; margin-top:-3.6rem; border-radius:.5rem }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5 · PROCESO   (referencia: #how-it-works)

   El truco de esta sección: las tarjetas NO van debajo del título. Van en
   una capa que ocupa las tres filas completas, en zigzag derecha-izquierda-
   derecha, y el título y la bajada se meten en los huecos que quedan.
       fila 1:  [ título        ][ tarjeta 1 ]
       fila 2:  [ tarjeta 2     ][ bajada    ]
       fila 3:  [               ][ tarjeta 3 ]
   ═══════════════════════════════════════════════════════════════════════════ */
.how{ position:relative; z-index:2; padding-top:14.2rem }
@media only screen and (max-width:991px){ .how{ padding-top:18rem } }
@media only screen and (max-width:767px){ .how{ padding-top:0 } }

/* row-gap 0 y filas iguales: sin esto el zigzag se desalinea */
.how-grid{ row-gap:0; grid-template-rows:minmax(auto,1fr); grid-auto-rows:minmax(auto,1fr) }
@media only screen and (max-width:767px){ .how-grid{ grid-template-rows:auto; grid-auto-rows:auto } }

.how-title-wrap{
  position:relative; z-index:2;
  grid-area:1/3/2/9;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:flex-start;
  max-width:32rem;
}
.how-label{ color:var(--sec-disable); margin-bottom:4rem }
.how-title{ color:var(--sec-strong) }

.how-sub-wrap{
  position:relative; z-index:2;
  grid-area:2/10/3/15;
  display:flex; justify-content:flex-end; align-items:center;
}
.how-sub{ max-width:32.4rem; color:var(--sec-sub) }

.how-main-wrap{ position:relative; z-index:1; grid-area:1/3/4/15 }
.how-main{
  position:relative; z-index:1;
  display:grid;
  column-gap:var(--sec-container-gap);
  grid-template-columns:repeat(2, minmax(0,1fr));
  grid-template-rows:auto;
}
.how-item{ position:relative; z-index:1; aspect-ratio:1 }
.how-item:nth-child(1){ grid-area:1/2/2/3 }
.how-item:nth-child(2){ grid-area:2/1/3/2 }
.how-item:nth-child(3){ grid-area:3/2/4/3 }

.how-item-inner{
  position:relative;
  display:flex; flex-flow:column; justify-content:space-between;
  width:100%; height:100%;
  padding:4.4rem;
  border:1px solid var(--sec-card-bd);
  border-radius:2rem;
  background-color:var(--sec-card-bg);
}
/* Capa opaca que aparece SOLO cuando la tarjeta se apila (mobile).
   Sin ella se transparentan una sobre otra y el apilado se ve sucio.
   --stack-dim lo mueve secciones.js de 0 a 1. */
.how-item-inner::after{
  content:''; position:absolute; inset:0;
  border-radius:inherit;
  background-color:var(--sec-card-solid);
  opacity:var(--stack-dim,0);
  pointer-events:none;
}
.how-item-head,
.how-item-content{ position:relative; z-index:1 }
.how-item-head{ display:flex; justify-content:space-between; align-items:flex-start }
.how-item-ic{ flex:none; padding-top:.4rem; padding-left:.4rem; color:var(--sec-strong) }
.how-item-step{ color:var(--sec-note) }
.how-item-title{ margin-bottom:3.2rem; color:var(--sec-strong) }
.how-item-sub{ color:var(--sec-soft) }

@media only screen and (max-width:991px){
  .how-title-wrap{ grid-column:1/7 }
  .how-sub-wrap{ grid-column:7/13 }
  .how-main-wrap{ grid-column:1/13 }
  .how-label{ margin-bottom:2.8rem }
  .how-sub{ max-width:31.1rem }
  .how-item-inner{ padding:3.2rem; border-radius:1.6rem }
  .how-item-ic{ padding-top:0; padding-left:0 }
  .how-item-title{ margin-bottom:2.4rem }
}

/* Phone: se rompe el zigzag, todo a una columna y centrado. Las tarjetas
   dejan de ser cuadradas y el relleno se vuelve opaco, porque encima se
   van a montar unas sobre otras (ver secciones.js). */
@media only screen and (max-width:767px){
  .how-title-wrap{
    grid-column:1/-1;
    text-align:center; align-items:center; max-width:none;
  }
  .how-label{ margin-bottom:2.4rem }
  .how-title{ margin-bottom:3.2rem }
  .how-sub-wrap{ grid-column:1/-1; text-align:center }
  .how-sub{ max-width:none; margin-bottom:6rem }
  .how-main-wrap{ grid-row-start:3; grid-column-end:-1 }
  .how-main{ display:flex; flex-flow:column; row-gap:1.6rem; column-gap:0 }
  .how-item{ aspect-ratio:auto }
  .how-item:nth-child(1),
  .how-item:nth-child(2),
  .how-item:nth-child(3){ grid-area:auto }
  .how-item-content{ margin-top:4rem }
}


/* ═══════════════════════════════════════════════════════════════════════════
   6 · CIERRE   (referencia: el bloque de CTA entre #how-it-works y #features)

   Una sola frase grande centrada y un botón ancho, sobre un resplandor
   anclado abajo que se sale del contenedor por los dos lados. Ojo con el
   padding-top: 42.3rem no es un error, la frase va empujada muy abajo a
   propósito para que el resplandor tenga aire.

   Esta sección cuelga de la MISMA data-sc-name que Proceso: en la
   referencia el CTA es parte de #how-it-works, no una sección aparte del
   navbar.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Las 42.3rem de arriba venían de cuando entre el anillo y esto vivía la
   sección de las tres tarjetas. Sin ella los dos paddings quedan pegados
   y se suman: medido, 750 px de hueco entre el anillo y el titular. */
.cta{ position:relative; z-index:1; padding-top:8rem; padding-bottom:22.3rem }

.cta-bg{
  position:absolute; top:0; left:0; z-index:1;
  display:flex; flex-flow:column; justify-content:flex-end; align-items:center;
  width:100%; height:100%;
  pointer-events:none;
}
.cta-bg-main{ position:relative; width:100%; max-width:172.8rem; margin-inline:auto }
/* En la referencia aquí va una imagen de 1974×1026. El placeholder respeta
   esa proporción para que el ritmo vertical no se mueva al cambiarla. */
.cta-bg-main-inner{
  position:relative; z-index:1;
  margin-inline:-12.3rem;
  aspect-ratio:1974/1026;
  background:radial-gradient(60% 80% at 50% 100%, var(--art-glow), transparent 70%);
}

.cta-title-wrap{
  grid-area:1/4/2/14;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:center;
  text-align:center;
}
.cta-title{ max-width:75.1rem; margin-bottom:4rem; color:var(--sec-strong) }
.cta-btn{ display:flex; flex-flow:column; justify-content:center; width:100%; max-width:56rem }

/* Variantes del .btn de navbar.css. Si no cargaste navbar.css, copia
   también su bloque 6, que es de donde salen .btn / .btn-size / .btn-txt. */
.btn.is-solid{
  background-color:var(--sec-strong);
  color:var(--sec-bg);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.btn.is-solid .btn-outline{ opacity:0 }
.btn.is-xl .btn-size{ padding:4rem 6rem }
.btn.is-xl .btn-txt{ font-size:2.4rem }

@media only screen and (max-width:991px){
  .cta{ padding-top:8rem; padding-bottom:11.4rem }
  .cta-bg-main-inner{ margin-inline:-7.8rem }
  .cta-title-wrap{ grid-column:3/11 }
  .cta-title{ margin-bottom:3.2rem }
  .btn.is-xl .btn-size{ padding:2.8rem 4rem }
}
@media only screen and (max-width:767px){
  .cta{ padding-top:6rem; padding-bottom:14.7rem }
  .cta-bg-main-inner{ margin-inline:-28rem }
  .cta-title-wrap{ grid-column:1/-1 }
}


/* ═══════════════════════════════════════════════════════════════════════════
   7 · CARACTERÍSTICAS   (referencia: #features)

   Lista de filas separadas por reglas de 1px. Cada fila es a su vez una
   retícula de 12 columnas propia (no hereda la de la página) con el
   número, el título y el icono en la primera fila y el cuerpo en la
   segunda, alineado con el título.
   ═══════════════════════════════════════════════════════════════════════════ */
.fea{ position:relative; z-index:2; padding-top:14rem; padding-bottom:16rem }
@media only screen and (max-width:991px){ .fea{ padding-top:8rem; padding-bottom:10rem } }
@media only screen and (max-width:767px){ .fea{ padding-bottom:8rem } }

.fea-title-wrap{
  grid-area:1/6/2/15;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:flex-start;
}
.fea-title{ margin-bottom:4.8rem; color:var(--sec-strong) }
.fea-sub{ color:var(--sec-sub) }
.fea-label{ grid-area:1/3/2/6; color:var(--sec-disable) }
.fea-main{ grid-area:2/3/3/15; margin-top:10rem }

.fea-item{ position:relative }
.fea-item-inner{
  display:grid;
  column-gap:var(--sec-container-gap);
  grid-template-columns:repeat(12, minmax(0,1fr));
  grid-template-rows:auto;
  padding-top:4.4rem; padding-bottom:4.4rem;
}
.fea-item-head{
  grid-area:1/1/2/-1;
  display:grid; gap:1.6rem;
  grid-template-columns:repeat(12, minmax(0,1fr));
  grid-template-rows:auto;
}
.fea-item-num{ grid-area:1/1/2/4; color:var(--sec-note) }
.fea-item-title{ grid-area:1/4/2/10; margin-bottom:1.6rem; color:var(--sec-strong) }
.fea-item-ic{
  grid-area:1/10/2/-1;
  position:relative; display:flex; justify-content:flex-end; align-items:flex-start;
  color:var(--sec-strong);
}
.fea-item-ic-inner{ position:absolute; top:0; right:0; flex:none }
.fea-item-body{ grid-area:2/4/3/10; color:var(--sec-soft) }

@media only screen and (max-width:991px){
  .fea-title-wrap{ grid-column:3/13 }
  .fea-label{ grid-column:1/3; padding-top:1.2rem }
  .fea-main{ grid-column:1/13; margin-top:8rem }
  .fea-item-inner{ padding-top:3.2rem; padding-bottom:3.2rem }
  .fea-item-num{ grid-column-end:3 }
  .fea-item-title{ grid-column:3/11 }
  .fea-item-ic{ grid-column-start:11 }
  .fea-item-body{ grid-column:3/11 }
}

/* Phone: la fila deja de ser retícula y se vuelve una pila. El icono se
   sale del flujo y se centra vertical contra la cabecera. */
@media only screen and (max-width:767px){
  .fea-label{ grid-column-end:-1; margin-bottom:2.4rem; padding-top:0 }
  .fea-title-wrap{ grid-area:2/1/3/-1 }
  .fea-title{ max-width:26.5rem; margin-bottom:3.2rem }
  .fea-main{ grid-row:3/4; grid-column-end:-1; margin-top:6rem }
  .fea-item-inner{ display:flex; flex-flow:column; padding-top:0; padding-bottom:0 }
  .fea-item-head{
    display:flex; flex-flow:column; justify-content:flex-start; align-items:flex-start;
    gap:1rem; position:relative;
    padding-top:3.2rem; padding-bottom:3.2rem;
  }
  .fea-item-title{ margin-bottom:0 }
  .fea-item-ic{ position:absolute; top:0; right:0; bottom:0; align-items:center }
  .fea-item-ic-inner{ position:relative; top:auto; right:auto }
  .fea-item-body{ margin-top:-1.2rem; padding-bottom:3.2rem }
}
@media only screen and (max-width:991px){ .fea-title{ max-width:47.9rem; margin-bottom:3.2rem } }


/* ═══════════════════════════════════════════════════════════════════════════
   8 · GALERÍA   (referencia: #marketplace)

   Franja invertida, dos reglas a sangre completa y un carrusel 3D en dos
   columnas espejadas: las piezas nacen grandes en el centro y se van
   alejando hacia afuera. Es CSS puro, seis animaciones idénticas con el
   delay corrido en negativo.
   ═══════════════════════════════════════════════════════════════════════════ */
.nft{ position:relative; background-color:var(--band-bg); overflow:hidden }

.nft-line-ver-wrap{
  grid-area:1/1/-1/-1;
  display:flex; flex-flow:row; justify-content:center; align-items:stretch;
  pointer-events:none;
}
.nft-line-ver{ position:absolute; width:1px; height:100%; background-color:var(--band-line) }

.nft-title-wrap{
  grid-area:1/2/2/8;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:flex-start;
  margin-top:8rem; margin-bottom:8.2rem;
}
.nft-label{ color:var(--band-soft); margin-bottom:4rem }
.nft-title{ color:var(--band-strong) }
.nft-sub{
  grid-area:1/11/2/16; align-self:end;
  margin-top:8rem; margin-bottom:8.2rem;
  color:var(--band-sub);
}

/* Las dos reglas van a sangre: se salen del contenedor con margen negativo */
.nft-line-hor{
  width:auto; height:1px;
  margin-left:-50vw; margin-right:-50vw;
  background-color:var(--band-line);
}
.nft-line-hor.is-top{ grid-area:2/1/3/-1 }
.nft-line-hor.is-bot{ grid-area:4/1/5/-1 }

.nft-main{
  grid-area:3/1/4/-1;
  position:relative;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:center;
}
.nft-arr{ flex:none; color:var(--band-soft) }
.nft-arr.is-top{ padding-top:6.4rem; padding-bottom:2.4rem }
.nft-arr.is-bot{ padding-top:6rem; padding-bottom:6.4rem }
.nft-arr.is-bot .sc-ic{ transform:scaleY(-1) }

/* La etiqueta del centro. El recorte es un trapecio: arriba angosto,
   abajo al ancho completo. */
.nft-tag{
  display:flex; justify-content:center; align-items:center;
  font-weight:700;
  margin-bottom:2rem;
  padding:.6rem 1.7rem;
  text-align:center;
  background-color:var(--band-tag-bg);
  color:var(--band-tag-txt);
  clip-path:polygon(4.9% 0, 95.1% 0, 100% 46%, 100% 100%, 0 100%, 0 46%);
}

.nft-cols{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:1px;                            /* el hilo del centro */
  width:100%;
}
/* Cada mitad recorta por su lado de afuera y deja pasar por el centro */
.nft-col-left { clip-path:inset(0% 0% 0% -100% round 1.2rem) }
.nft-col-right{ clip-path:inset(0% -100% 0% 0% round 1.2rem) }
.nft-col-left-inner { display:flex; justify-content:flex-end; height:40rem }
.nft-col-right-inner{ height:40rem }

/* El escenario 3D. perspective-origin pegado al centro: por eso las piezas
   se alejan hacia el hilo y no hacia el borde. */
.nft-stack{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto;
  flex:none;
  width:auto; height:100%;
  aspect-ratio:350/400;
  perspective:500px;
  perspective-origin:100%;
  transform-style:preserve-3d;
  backface-visibility:visible;
}
.nft-stack.is-right{ perspective-origin:0% }

.nft-card{
  grid-area:1/1/2/2;
  position:relative;
  width:100%; height:100%;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform;
  background-image:linear-gradient(160deg, var(--band-card-a), var(--band-card-b));
  animation:nft-left 6s linear infinite;
}
.nft-card.is-right{ animation-name:nft-right }
/* Esquina cortada, espejada por lado */
.nft-card             { clip-path:polygon(27.4% 0, 100% 0, 100% 100%, 0 100%, 0 27.7%) }
.nft-card.is-right    { clip-path:polygon(0 0, 72.6% 0, 100% 27.7%, 100% 100%, 0 100%) }

/* Seis piezas, seis segundos, una entra cada segundo. El delay negativo
   arranca la secuencia ya poblada, sin el hueco del primer ciclo. */
.nft-card:nth-child(1){ animation-delay:0s }
.nft-card:nth-child(2){ animation-delay:-1s }
.nft-card:nth-child(3){ animation-delay:-2s }
.nft-card:nth-child(4){ animation-delay:-3s }
.nft-card:nth-child(5){ animation-delay:-4s }
.nft-card:nth-child(6){ animation-delay:-5s }

/* Los valores de Z y de porcentaje son los de la referencia, tal cual.
   No son una progresión bonita: están calculados contra perspective:500px
   para que el paso entre pieza y pieza se vea parejo. */
@keyframes nft-left{
  0%   { transform:translate3d(80%,0,0);            opacity:1; animation-timing-function:var(--sec-ease-out) }
  16.6%{ transform:translate3d(0%,0,0);             opacity:1; animation-timing-function:var(--sec-ease-out) }
  33.3%{ transform:translate3d(-47%,0,-83.8px);     opacity:1; animation-timing-function:var(--sec-ease-out) }
  50%  { transform:translate3d(-108%,0,-200.2px);   opacity:1; animation-timing-function:var(--sec-ease-out) }
  66.6%{ transform:translate3d(-198%,0,-373px);     opacity:1; animation-timing-function:var(--sec-ease-out) }
  83.3%{ transform:translate3d(-340%,0,-667px);     opacity:1; animation-timing-function:var(--sec-ease-out) }
  100% { transform:translate3d(-604%,0,-1253.4px);  opacity:0 }
}
@keyframes nft-right{
  0%   { transform:translate3d(-80%,0,0);           opacity:1; animation-timing-function:var(--sec-ease-out) }
  16.6%{ transform:translate3d(0%,0,0);             opacity:1; animation-timing-function:var(--sec-ease-out) }
  33.3%{ transform:translate3d(47%,0,-83.8px);      opacity:1; animation-timing-function:var(--sec-ease-out) }
  50%  { transform:translate3d(108%,0,-200.2px);    opacity:1; animation-timing-function:var(--sec-ease-out) }
  66.6%{ transform:translate3d(198%,0,-373px);      opacity:1; animation-timing-function:var(--sec-ease-out) }
  83.3%{ transform:translate3d(340%,0,-667px);      opacity:1; animation-timing-function:var(--sec-ease-out) }
  100% { transform:translate3d(604%,0,-1253.4px);   opacity:0 }
}

/* Fuera de pantalla el carrusel se detiene. Lo pone secciones.js. */
.nft-main.is-idle .nft-card{ animation-play-state:paused }

@media only screen and (max-width:991px){
  .nft-title-wrap{ grid-column:1/7; max-width:31.2rem; margin-bottom:10rem }
  .nft-label{ margin-bottom:2.8rem }
  .nft-sub{ grid-column:8/13; margin-bottom:10rem }
  .nft-line-hor{ margin-left:-6rem; margin-right:-6rem }
  .nft-col-left-inner, .nft-col-right-inner{ height:34.3rem }
  .nft-tag{ margin-bottom:3.2rem }
  .nft-arr.is-top{ padding-top:8rem }
  .nft-arr.is-bot{ padding-top:10rem; padding-bottom:8rem }
}

/* Phone: título y bajada dejan de ir lado a lado, así que todas las filas
   de abajo se recorren una posición. El hilo vertical se acota al carrusel. */
@media only screen and (max-width:767px){
  .nft-title-wrap{
    grid-column-end:-1;
    /* A la izquierda, como todo lo demás de la página en el teléfono.
       Centrado, el bloque flotaba sin relación con la tira de datos ni
       con el botón, que sí van a la izquierda. */
    text-align:left; align-items:flex-start; max-width:none;
    margin:6rem 0 3.2rem;
  }
  .nft-label{ margin-bottom:2.4rem }
  .nft-sub{ grid-area:2/1/3/-1; text-align:center; margin-top:0; margin-bottom:6rem }
  .nft-line-hor.is-top{ grid-row:3/4 }
  .nft-main{ grid-row:4/5 }
  .nft-line-hor.is-bot{ grid-row:5/6 }
  .nft-line-ver-wrap{ grid-row:4/5 }
  .nft-col-left { clip-path:inset(0% 0% 0% -100% round 1rem) }
  .nft-col-right{ clip-path:inset(0% -100% 0% 0% round 1rem) }
  .nft-col-left-inner, .nft-col-right-inner{ height:16.4rem }
  .nft-tag{ margin-bottom:5.7rem; padding:.9rem 2.6rem }
  .nft-arr.is-top{ padding-top:10rem; padding-bottom:2.8rem }
  .nft-arr.is-bot{ padding-top:7.4rem; padding-bottom:10rem }
}


/* ═══════════════════════════════════════════════════════════════════════════
   9 · RUTA   (referencia: #roadmap)

   Scroll horizontal amarrado al vertical. La mecánica:
     · .road-stick-wrap mide 500svh y no contiene nada visible;
     · .road-stick vive pegado arriba (sticky) y mide 100svh;
     · mientras el wrapper cruza la pantalla, secciones.js corre .road-stick
       hacia la izquierda y la línea vertical hacia la derecha.
   El alto del wrapper es lo que gradúa la velocidad: más alto, más lento.

   La franja va sobre --road-bg, un gris distinto al de la página. Las
   etiquetas (fase, fecha, título) llevan ese mismo fondo a propósito:
   es lo que recorta la línea vertical cuando les pasa por debajo.

   En la referencia esta sección además lleva margin-bottom:-100svh, para
   encimarse con la sección sticky que va después. Aquí no la hay, así que
   ese margen no está: si la metes, recupéralo.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── el cambio a brasa ──────────────────────────────────────────────
   Al final del recorrido la sección se vuelve naranja para que el canto
   con la franja de abajo desaparezca: en vez de un corte gris→brasa, la
   franja ya viene puesta cuando llega.

   Todo cuelga de --road-bg, que es lo que pinta la sección Y el fondo de
   las etiquetas -esas lo llevan a propósito, es lo que recorta la línea
   vertical al pasarles por debajo-. Cambiando el token, las etiquetas
   siguen recortando sobre el color nuevo sin tocarlas una por una.

   Los textos se remapean a los tokens de la franja, que son los que ya
   están calculados para leerse sobre naranja. */
.road{ position:relative; z-index:2; background-color:var(--road-bg);
       transition:background-color .55s var(--sec-ease-out) }
.road[data-fondo="brasa"]{
  --road-bg:#FF5A1F;
  --road-line:rgba(20,20,22,.28);
  --road-tile-a:rgba(20,20,22,.14);
  --road-tile-b:rgba(20,20,22,.04);
  --sec-strong:#140A06;
  --sec-sub:rgba(20,10,6,.74);
  --sec-note:rgba(20,10,6,.58);
  --sec-line:rgba(20,20,22,.22);
}
.road-item-phase,.road-item-date,.road-item-title,.road-main,
.road-label,.road-title,.road-sub{ transition:background-color .55s var(--sec-ease-out),
  color .55s var(--sec-ease-out) }
@media(prefers-reduced-motion:reduce){
  .road,.road *{ transition-duration:.001ms !important }
}
.road-stick-wrap{ position:relative; height:500svh }
.road-stick{ position:sticky; top:0; width:100%; height:100svh }
.road-grid{ height:100% }

.road-head-wrap{
  grid-area:1/1/2/8;
  display:grid;
  column-gap:var(--sec-container-gap);
  grid-template-columns:repeat(7, minmax(0,1fr));
  grid-template-rows:1fr auto auto;
}
.road-title-wrap{
  grid-area:1/1/2/-1;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:flex-start;
  max-width:48.8rem; margin-top:12rem;
}
.road-label{ color:var(--sec-note); margin-bottom:4rem }
.road-title{ color:var(--sec-strong) }
.road-sub-wrap{ grid-area:2/1/3/8 }
.road-sub{ max-width:40.4rem; color:var(--sec-sub); margin-bottom:20% }
.road-btn-wrap{
  grid-area:3/1/4/8;
  display:flex; flex-flow:column; justify-content:flex-end; align-items:flex-start;
  margin-bottom:9.4rem;
}

.road-main{ grid-area:1/8/2/16; position:relative; width:100% }
.road-main-inner{
  position:relative; z-index:2;
  display:flex; column-gap:var(--sec-container-gap);
  height:100%;
}

/* Cada fase mide lo mismo que la columna de tarjetas: width:100% con
   flex:none, así que son cinco anchos de columna en fila. */
.road-item{
  flex:none;
  display:grid;
  column-gap:var(--sec-container-gap);
  grid-template-columns:repeat(8, minmax(0,1fr));
  grid-template-rows:auto 1fr 9.4rem;
  width:100%; height:100%;
}
.road-item-phase-wrap{
  grid-area:1/1/2/6;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:flex-start;
  margin-top:12rem;
}
.road-item-phase{
  background-color:var(--road-bg);
  color:var(--sec-sub);
  margin-bottom:5.3rem;
}
.road-item-inner{
  grid-area:2/1/3/6;
  position:relative;
  display:flex; flex-flow:column; justify-content:flex-end;
}
.road-item-content{
  position:absolute; bottom:0; left:0;
  display:flex; flex-flow:column; row-gap:1.6rem;
  width:100%;
}
.road-item-thumb{ position:relative; width:100% }
.road-item-thumb-inner{
  position:absolute; top:0; left:0; z-index:2;
  width:100%; height:100%;
  border-radius:1.2rem; overflow:hidden;
  background-image:linear-gradient(160deg, var(--road-tile-a), var(--road-tile-b));
}
/* El truco viejo del padding-bottom para el cuadrado: aquí sigue siendo
   necesario porque el hijo va absoluto y no puede sostener el alto. */
.ar-1-1{ width:100%; height:0; padding-bottom:100%; pointer-events:none }
.road-item-title{
  background-color:var(--road-bg);
  color:var(--sec-sub);
  margin-left:-.8rem; padding-inline:.8rem;
}
.road-item-time{
  grid-area:3/1/4/9;
  display:flex; justify-content:flex-start; align-items:center;
  margin-top:1.6rem;
}
.road-item-date{
  background-color:var(--road-bg);
  font-weight:700;
  color:var(--sec-strong);
  margin-left:-.8rem; padding-inline:.8rem;
}
/* Misma regla de marcas que la barra del navbar: 1px cada .8rem */
.road-item-ruler{
  flex:1; height:1rem;
  background-image:repeating-linear-gradient(to right,
    var(--road-line), var(--road-line) 1px, transparent 1px, transparent calc(1px + .8rem));
}
.road-item:last-child .road-item-ruler{ margin-right:-100vw }

.road-line-vert{
  position:absolute; top:0; z-index:1;
  width:1px; height:100%;
  background-color:var(--road-line);
}
.road-head-line{ display:none }

@media only screen and (max-width:991px){
  .road-head-wrap{ grid-column-end:6 }
  .road-title-wrap{ max-width:31.2rem }
  .road-label{ margin-bottom:2.8rem }
  .road-sub-wrap{ grid-column-end:7 }
  .road-sub{ max-width:31.2rem; margin-bottom:16.5rem }
  .road-btn-wrap{ margin-bottom:10rem }
  .road-main{ grid-column:7/13 }
  /* siete anchos de columna de doce: la quinta tarjeta asoma por la orilla */
  .road-main-inner{
    width:calc(((100% - (var(--sec-container-gap)*5))/6)*7 + (var(--sec-container-gap)*6));
  }
  .road-item{
    grid-template-columns:repeat(6, minmax(0,1fr)) 1fr;
    grid-template-rows:auto 1fr 10rem;
  }
  .road-item-phase-wrap{ grid-column-end:6 }
  .road-item-phase{ margin-bottom:20.9rem }
  .road-item-time{ grid-column-end:8; margin-top:2.6rem }
  .road-item:last-child .road-item-ruler{ margin-right:-100svh }
}

/* Phone: la cabecera y la fila de fases se vuelven sticky por separado, y
   el .road-stick deja de serlo. El wrapper crece a 600svh. */
@media only screen and (max-width:767px){
  .road-stick-wrap{ height:600svh }
  .road-stick{ position:static; height:100% }
  .road-grid{ grid-template-rows:auto 1fr }
  .road-head-wrap{
    position:sticky; top:0;
    grid-column-end:-1;
    display:flex; flex-flow:column; justify-content:flex-start; align-items:flex-start;
    max-height:100svh; padding-top:6rem;
  }
  .road-title-wrap{ max-width:none; margin-top:0 }
  .road-label{ margin-bottom:2.4rem }
  .road-title{ margin-bottom:3.2rem }
  .road-sub{ max-width:none; margin-bottom:4rem }
  .road-btn-wrap{ margin-bottom:6rem }
  .road-main{ grid-area:2/1/3/-1; z-index:2; background-color:var(--road-bg) }
  .road-main-inner{ position:sticky; top:0; width:calc(100% - 1.6rem); height:100svh }
  .road-item{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr 7.4rem }
  .road-item-phase-wrap{ grid-column-end:2; margin-top:10rem }
  .road-item-phase{ margin-bottom:11svh }
  .road-item-inner{ grid-column-end:2; max-width:30rem }
  .road-item-time{ grid-column-end:2; margin-top:2rem }
  .road-head-line{
    display:block; height:1px;
    width:calc(100% + 3.2rem);
    margin-left:-1.6rem; margin-right:-400svh;
    background-color:var(--road-line);
  }
}


/* ── 10 · ACCESIBILIDAD ───────────────────────────────────────────────────
   Con reduce, el carrusel se congela en su estado poblado y el apilado de
   mobile ni se instala (eso lo decide secciones.js).                        */
@media (prefers-reduced-motion:reduce){
  .nft-card,
  .art-item, .art-tile,
  .art-bg-main-inner::before{ animation-play-state:paused }
}