/* =========================================================================
   SITIO · Bloque 1 de la hoja única — Sol y Tierra
   Fase 1 de la refundación · 2026-08-13 · docs/DESIGN.md manda sobre esto.

   Hoja consolidada enlazada por las 22 páginas del sitio.
   Este bloque inicial contiene los tokens validados de la Fase 1; el resto
   reúne base, componentes, utilidades y media queries de la Fase 2.

   Estado final correcto de web/assets/css/:  fonts.css + syt-sitio.css
   ========================================================================= */

:root{
  /* =======================================================================
     PALETA DE TRES COLORES · naranjo, blanco y negro
     -----------------------------------------------------------------------
     Decisión de Carlitos (14-ago): fuera el coral oscuro, fuera el crema.
     Solo naranjo, blanco y negro, con la referencia KTM como norte.

     El naranjo es VIVO, y por eso el texto que va ENCIMA de un relleno
     naranjo es NEGRO: blanco sobre #ff6a13 da 2.6 y no cumple, negro da 8.9.
     Es además lo que hace la referencia. Para naranjo COMO TEXTO sobre blanco
     existe una versión oscurecida.

     Los tonos intermedios que quedan son negro o blanco con transparencia
     —líneas, sombras y tintas secundarias—, no colores nuevos.
     ======================================================================= */
  --naranjo:            #ff6a13;  /* el naranjo. Rellenos y acentos */
  --naranjo-hover:      #ff7d33;
  --naranjo-texto:      #a63c00;  /* naranjo COMO TEXTO sobre blanco → 5.6 */
  --negro:              #000000;
  --blanco:             #ffffff;

  /* Puente con los nombres antiguos: todo lo que decía "coral" apunta al
     naranjo que corresponde por rol. */
  --syt-coral:          var(--naranjo);
  --syt-coral-vivo:     var(--naranjo);
  --syt-coral-texto:    var(--naranjo-texto);
  --syt-coral-relleno:  var(--naranjo);

  /* --- Superficies oscuras ---------------------------------------------- */
  --sitio-fondo:        #000000;
  --sitio-fondo-alt:    #000000;
  --sitio-tinta-1:      #ffffff;  /* 19.8 sobre fondo */
  --sitio-tinta-2:      #d6d6d6;  /* 13.1 */
  --sitio-tinta-3:      #a6a6a6;  /*  7.8 */

  /* --- Superficies claras ------------------------------------------------ */
  --sitio-claro:        #ffffff;
  --sitio-claro-alt:    #ffffff;
  --sitio-tinta-osc-1:  #000000;  /* 21.0 sobre blanco */
  --sitio-tinta-osc-2:  #3d3d3d;  /* 10.9 */
  --sitio-tinta-osc-3:  #5c5c5c;  /*  7.0 */

  /* --- Líneas ------------------------------------------------------------ */
  --sitio-linea:        #e0e0e0;
  --sitio-linea-osc:    #262626;

  /* --- Estados: color + TEXTO siempre, nunca color solo ------------------ */
  --ok-relleno:         #0f6b3d;  --ok-texto:      #0b5330;
  --alerta-relleno:     #8a5200;  --alerta-texto:  #6b4000;
  --error-relleno:      #a3231a;  --error-texto:   #8c1e16;

  --fuente: 'League Spartan', system-ui, -apple-system, Arial, sans-serif;
  --font-base: 'League Spartan', system-ui, -apple-system, Arial, sans-serif;
  --font-display: 'League Spartan', system-ui, -apple-system, Arial, sans-serif;
  --font-editorial: 'Libre Baskerville', Georgia, serif;
  --font-mono: 'League Spartan', monospace;

  --t-display:  clamp(2.6rem, 6vw, 5.2rem);
  --t-titulo:   clamp(2rem, 4.2vw, 3.2rem);
  --t-seccion:  clamp(1.5rem, 2.6vw, 2.1rem);
  --t-sub:      clamp(1.15rem, 1.6vw, 1.35rem);
  --t-bajada:   clamp(1.05rem, 1.3vw, 1.2rem);
  --t-cuerpo:   1rem;
  --t-cuerpo-s: 0.9rem;
  --t-etiqueta: 0.78rem;        /* mínimo absoluto: nada más chico */

  --p-display: 800; --p-titulo: 800; --p-seccion: 750;
  --p-sub: 700; --p-bajada: 500; --p-cuerpo: 450; --p-etiqueta: 700;

  --i-apretada: 1.02;  --i-titulo: 1.06;  --i-media: 1.20;
  --i-lectura: 1.65;   --i-densa: 1.55;

  --l-display: -.045em; --l-titulo: -.035em; --l-seccion: -.025em;
  --l-sub: -.015em;     --l-etiqueta: .06em;

  --medida: 68ch;               /* 60–75 caracteres de ancho de línea */

  /* --- Espaciado: ritmo 4/8, sin valores fuera de escala ----------------- */
  --e-1:4px; --e-2:8px;  --e-3:12px; --e-4:16px; --e-5:24px;
  --e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px; --e-10:128px;

  /* --- Radios ------------------------------------------------------------ */
  --r-1:8px; --r-2:12px; --r-3:16px; --r-4:24px; --r-full:999px;

  /* --- Sombras: tres niveles, no más ------------------------------------- */
  --s-1: 0 1px 2px rgba(7,7,7,.06), 0 2px 8px -4px rgba(7,7,7,.10);
  --s-2: 0 4px 12px -4px rgba(7,7,7,.12), 0 12px 32px -16px rgba(7,7,7,.18);
  --s-3: 0 12px 32px -12px rgba(7,7,7,.20), 0 32px 72px -40px rgba(7,7,7,.36);
  --s-coral: 10px 10px 0 rgba(217,70,37,.09), 0 30px 72px -44px rgba(217,70,37,.42);

  /* --- Movimiento: nada supera 300 ms ------------------------------------ */
  --curva: cubic-bezier(.22, 1, .36, 1);
  --t-1: 150ms; --t-2: 220ms; --t-3: 300ms;

  /* --- Táctil ------------------------------------------------------------ */
  --toque: 44px;                /* área mínima de toque */
  --input-movil: 16px;          /* por debajo, iOS hace zoom al enfocar */
}



/* =========================================================================
   CONSOLIDACIÓN FASE 2 · reglas base y componentes
   Cada selector exacto aparece una sola vez por contexto responsive.
   ========================================================================= */

@layer legacy{

*, *::before, *::after{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img{
  max-width: 100%;
  display: block;
  height: auto;
}

a{
  color: inherit;
  text-decoration: none;
}

button{
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.skip-link{
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--sitio-claro);
  color: var(--sitio-fondo-alt);
  font-weight: 800;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--sitio-fondo) 25%, transparent);
}

.skip-link:focus{
  top: 12px;
}

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}

h1{
  font-size: clamp(2.2rem,5vw,3.6rem);
  font-weight: 900;
}

h2{
  font-size: clamp(1.6rem,3.5vw,2.4rem);
  font-weight: 800;
}

h3{
  font-size: 1.15rem;
  font-weight: 700;
}

p{
  line-height: 1.7;
  font-size: 1.05rem;
}

strong{
  font-weight: 700;
}

.brand:visited, .brand:active{
  color: var(--white);
}

.nav-links>a, .nav-links .nav-dropdown-trigger{
  color: var(--sitio-tinta-1);
  font-weight: 600;
  padding: 10px 0;
  transition: color .2s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-links>a:hover, .nav-links>a.active, .nav-dropdown-trigger:hover{
  color: var(--coral);
}

.nav-dropdown{
  position: relative;
}

.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a{
  display: block;
  padding: 10px 18px;
  color: var(--sitio-tinta-1);
  font-size: .88rem;
  font-weight: 500;
  transition: all .15s;
}

.nav-dropdown-menu a:hover{
  background: color-mix(in srgb, var(--syt-coral-vivo) 12%, transparent);
  color: var(--white);
  padding-left: 22px;
}

.nav-dropdown-menu a.active{
  color: var(--coral);
}

.nav-actions{
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .9rem;
  border-radius: 999px;
  transition: transform .2s,background .2s;
}

.btn-ghost:hover{
  background: color-mix(in srgb, var(--sitio-claro) 5%, transparent);
}

.btn-block{
  display: flex;
  width: 100%;
  padding: 14px;
}

.menu-btn{
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 15%, transparent);
  color: var(--white);
  align-items: center;
  justify-content: center;
}

.mobile-menu{
  display: none;
}

.section-dark{
  background: var(--sitio-fondo);
  background-image: radial-gradient(ellipse at 50% 0%,color-mix(in srgb, var(--syt-coral-vivo) 6%, transparent) 0%,transparent 60%),linear-gradient(180deg,var(--sitio-fondo-alt) 0%,var(--sitio-fondo) 100%);
  color: var(--white);
}

.section-dark h1, .section-dark h2, .section-dark h3, .section-dark strong{
  color: var(--white);
}

.section-dark p{
  color: var(--sitio-tinta-1);
}

.section-light{
  background: var(--sitio-claro);
  background-image: linear-gradient(180deg,var(--sitio-tinta-1) 0%,var(--sitio-claro) 100%);
  color: var(--text-dark);
}

.section-light h1, .section-light h2, .section-light h3, .section-light strong{
  color: var(--text-dark);
}

.section-light p{
  color: var(--text-muted);
}

.card{
  background: var(--white);
  border: 1px solid var(--sitio-linea);
  border-radius: 16px;
  padding: 24px;
}

.card-dark{
  background: color-mix(in srgb, var(--sitio-claro) 4%, transparent);
  border: 1px solid var(--sitio-linea-osc);
  border-radius: 16px;
  padding: 24px;
}

.photo{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-photo);
  background: var(--black);
}

.photo img{
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center 18%;
}

.grid-2{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 24px;
}

.grid-3{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}

.grid-4{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}

.price{
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--coral);
}

.num{
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--coral);
  display: block;
  line-height: 1;
  margin-bottom: 12px;
}

.footer-grid{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}

/* Los titulos de columna del pie pasaron de `h4` a `h3`: venian detras de un
   `h2` y saltarse un nivel rompe el indice del documento para quien navega con
   lector de pantalla. Se mantiene el aspecto; cambia solo la jerarquia. */
.footer-col h3, .footer-col h4{
  color: var(--sitio-tinta-1);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 14px;
  font-weight: 700;
  font-family: var(--font-body);
}

.footer-col a{
  display: block;
  color: var(--sitio-tinta-1);
  padding: 5px 0;
  font-size: .9rem;
  font-weight: 500;
  transition: color .2s;
}

.footer-col a:hover{
  color: var(--coral);
}

.footer-col p{
  color: var(--sitio-tinta-1);
  font-size: .9rem;
  line-height: 1.65;
  max-width: 280px;
}

.footer-bottom{
  max-width: 1180px;
  margin: 40px auto 0;
  padding: 20px 28px;
  border-top: 1px solid var(--sitio-linea-osc);
  display: flex;
  justify-content: space-between;
  color: var(--sitio-tinta-1);
  font-size: .82rem;
}

.fab:hover{
  transform: scale(1.08);
}

.fab svg{
  width: 26px;
  height: 26px;
  fill: var(--sitio-tinta-1);
}

.cond-card{
  background: var(--white);
  border: 1px solid var(--sitio-linea);
  border-radius: 16px;
  padding: 28px;
  transition: border-color .2s,box-shadow .2s;
}

.cond-card:hover{
  border-color: var(--coral);
  box-shadow: var(--shadow-card);
}

.cond-card h3{
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.cond-card p{
  color: var(--text-muted);
  font-size: .95rem;
}

.cond-card p strong{
  color: var(--text-dark);
}

details{
  border-bottom: 1px solid var(--sitio-linea);
  padding: 18px 0;
}

details summary{
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  color: var(--text-dark);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color .2s;
}

details summary::-webkit-details-marker{
  display: none;
}

details summary::after{
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--coral);
  transition: transform .2s;
}

details[open] summary::after{
  transform: rotate(45deg);
}

details summary:hover{
  color: var(--coral);
}

details p{
  padding-top: 10px;
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.65;
}

.calc{
  background: var(--white);
  border: 1px solid var(--sitio-linea);
  border-radius: 16px;
  padding: 28px;
  max-width: 480px;
}

.calc-row{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.calc-row label{
  font-size: .95rem;
  font-weight: 600;
  flex: 1;
}

.calc-row input[type=number]{
  width: 72px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 800;
  background: transparent;
  border: 1px solid var(--sitio-linea);
  border-radius: 10px;
  padding: 8px;
  color: var(--text-dark);
}

.calc-row button{
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  border: 1px solid var(--sitio-linea);
  background: transparent;
  color: var(--text-dark);
  font-size: 1.2rem;
  font-weight: 700;
  transition: background .2s;
  touch-action: manipulation;
}

.calc-row button:hover{
  background: var(--sitio-linea);
}

.calc-total{
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--sitio-linea);
}

.calc-total span{
  color: var(--text-muted);
  font-size: .95rem;
}

.calc-total b{
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
}

.calc-total.final{
  border-top: 2px solid var(--coral);
  border-bottom: none;
  margin-top: 8px;
  padding-top: 16px;
}

.calc-total.final b{
  color: var(--coral);
  font-size: 1.35rem;
}

/* Los titulos de traje pasaron de `h3` a `h2` (venian detras del `h1` y
   saltarse un nivel rompe el indice del documento). Se aceptan los dos para
   que el aspecto no dependa de la etiqueta. */
.traje-card :is(h2, h3){
  color: var(--white);
  margin-bottom: 6px;
}

.traje-card .body p{
  color: var(--sitio-tinta-1);
  font-size: .92rem;
  margin-bottom: 14px;
}

.val-table{
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--sitio-linea);
}

.val-table td{
  padding: 10px 16px;
  border-bottom: 1px solid var(--sitio-linea);
  color: var(--text-muted);
}

.val-table tr:last-child td{
  border-bottom: none;
}

.val-table td:last-child{
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--coral);
}

.traje-stack{
  position: relative;
  margin-top: 56px;
}

.traje-stack-item:hover{
  transform: translateY(-4px);
}

.traje-stack-item .ts-top{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 32px 36px 24px;
}

.traje-stack-item .ts-num{
  font-family: var(--font-mono);
  font-size: 3rem;
  font-weight: 800;
  color: var(--coral);
  line-height: 1;
}

.traje-stack-item h3{
  font-size: 1.8rem;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.traje-stack-item .ts-cat{
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--coral);
  font-weight: 700;
  margin-bottom: 6px;
}

.traje-stack-item .ts-price{
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--coral);
  white-space: nowrap;
}

.carousel-track{
  display: flex;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  gap: 12px;
}

.carousel-track::-webkit-scrollbar{
  display: none;
}

.carousel-track img:last-child{
  margin-right: 0;
}

.carousel-btn.prev{
  left: 12px;
}

.carousel-btn.next{
  right: 12px;
}

.carousel-dots{
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 12px 0;
  background: transparent;
}

.carousel-dots span{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sitio-linea);
  transition: background .2s,transform .2s;
}

.ts-info-grid{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  padding: 0 36px 32px;
}

.ts-info-card{
  background: var(--white);
  border: 1px solid var(--sitio-linea);
  border-radius: 14px;
  padding: 16px;
}

.ts-info-card .label{
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 4px;
}

.ts-info-card .value{
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
}

.ts-info-card .value.price-val{
  color: var(--coral);
  font-size: 1.3rem;
}

body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, .brand, .footer-brand, .hero-title, .section-title, .mono, .num, .price, .calc-total b, .val-table td:last-child, .ts-num, .ts-price, .ts-info-card .value{
  font-family: 'League Spartan',system-ui,sans-serif;
}

p, .section-light p{
  color: var(--sitio-tinta-osc-2);
}

.section-light, .parts-section{
  background: var(--sitio-claro);
}

.section-dark, .site-footer{
  background: var(--sitio-fondo);
}

.card, .cond-card, .calc, .traje-stack-item, .ts-info-card{
  background: var(--sitio-claro);
}

.tag{
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--coral,var(--syt-coral-vivo));
  color: var(--sitio-tinta-1);
  border: 1px solid var(--coral,var(--syt-coral-vivo));
}

.personal-number, .blk-num{
  background: var(--sitio-fondo-alt);
  color: var(--sitio-tinta-1);
}

.bg-arena{
  background-color: var(--sitio-claro);
}

.border-linea, .border-crema-dark{
  border-color: var(--sitio-tinta-2);
}

.text-carbon-light{
  color: var(--sitio-tinta-osc-2);
}

.home-hero h1, .home-hero .hero-title{
  color: var(--sitio-tinta-1);
}

.site-header .brand, .site-footer :is(h2, h3, h4){
  color: var(--sitio-tinta-1);
}

.site-header .brand, .site-footer .brand, .footer-brand, .jack-footer-brand{
  text-transform: none;
  letter-spacing: -.02em;
  font-weight: 900;
}

.hero-title{
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.section-title{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
}

[data-fade]{
  opacity: 1;
  transform: none;
  /* .3s, no .6s. La regla del sistema es que nada supere 300 ms, y 600 ms en
     una entrada se nota como si la pagina tardara en reaccionar. La sensacion
     de orden la da el ESCALONADO entre hermanos, no que cada uno tarde el
     doble. La curva sigue siendo la misma, asi que el gesto no cambia. */
  transition: opacity .3s ease, transform .3s ease;
}

.js [data-fade]{
  opacity: 0;
  transform: translateY(16px);
}

.js [data-fade].visible{
  opacity: 1;
  transform: none;
}

:focus-visible{
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}

.brand span, .footer-brand span, .jack-footer-brand span{
  display: inline;
}

.footer-brand, .jack-footer-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-weight: 900;
  font-size: 1.2rem;
  font-family: var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.jack-footer-brand{
  display: block;
  margin-bottom: 18px;
}

.btn, .menu-btn, .carousel-btn, .fab{
  min-width: 44px;
  min-height: 44px;
}

.site-header .mobile-menu{
  display: none;
}

.site-header .mobile-menu.open{
  display: flex;
}

.nav-actions .btn{
  white-space: nowrap;
}

.photo img, .traje-card img, .carousel-track img{
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}

.photo:hover img, .traje-card:hover>img{
  transform: scale(1.025);
}

.image-zoomable{
  cursor: zoom-in;
}

.consent-box{
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--sitio-linea);
  border-radius: 16px;
  background: var(--sitio-claro-alt);
  text-align: left;
}

.consent-box label{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text-dark);
  font-size: .9rem;
  line-height: 1.55;
  margin-bottom: 14px;
  cursor: pointer;
}

.consent-box input{
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  accent-color: var(--coral);
}

.consent-box a{
  color: var(--syt-coral-relleno);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 750;
}

.consent-box p{
  font-size: .78rem;
  color: var(--text-muted);
  margin: 2px 0 0;
}

.sol-root.sol-shelved{
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}

.sol-fab{
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  margin-left: auto;
  display: grid;
  place-items: center;
  background: var(--sitio-fondo);
  color: var(--sitio-tinta-1);
  border: 2px solid color-mix(in srgb, var(--syt-coral-vivo) 78%, transparent);
  box-shadow: 0 16px 42px color-mix(in srgb, var(--sitio-fondo) 28%, transparent);
  isolation: isolate;
}

.sol-fab::before, .sol-fab::after{
  content: "";
  position: absolute;
  inset: -7px;
  border: 1.5px solid color-mix(in srgb, var(--syt-coral-vivo) 72%, transparent);
  border-radius: 50%;
  z-index: -1;
  animation: solPulse 2.6s ease-out infinite;
}

.sol-fab::after{
  animation-delay: 1.3s;
}

.sol-fab svg{
  width: 27px;
  height: 27px;
  color: var(--syt-coral-vivo);
}

.sol-panel{
  position: absolute;
  right: 0;
  bottom: 72px;
  width: min(380px,calc(100vw - 32px));
  max-height: min(650px,calc(100vh - 150px));
  display: grid;
  grid-template-rows: auto minmax(120px,1fr) auto auto;
  background: var(--sitio-claro);
  border: 1px solid var(--sitio-linea);
  border-radius: 22px;
  box-shadow: 0 28px 80px color-mix(in srgb, var(--sitio-fondo) 26%, transparent);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.97);
  transform-origin: 100% 100%;
  transition: .24s cubic-bezier(.22,1,.36,1);
}

.sol-root[data-open="true"] .sol-panel{
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sol-head{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--sitio-fondo);
  color: var(--sitio-tinta-1);
  border-top: 3px solid var(--coral);
}

.sol-avatar{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--syt-coral-vivo) 13%, transparent);
  color: var(--syt-coral-vivo);
}

.sol-avatar svg{
  width: 21px;
  height: 21px;
}

.sol-head-txt{
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.sol-head-txt strong{
  font-family: var(--font-display);
  font-size: 1rem;
}

.sol-sub{
  font-size: .72rem;
  color: var(--sitio-tinta-1);
  margin-top: 3px;
}

.sol-x{
  margin-left: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--sitio-tinta-1);
}

.sol-x:hover{
  background: color-mix(in srgb, var(--sitio-claro) 10%, transparent);
}

.sol-x svg{
  width: 21px;
  height: 21px;
}

.sol-body{
  padding: 18px;
  overflow: auto;
  background: var(--sitio-claro-alt);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sol-msg{
  max-width: 88%;
  padding: 12px 14px;
  border-radius: 15px;
  font-size: .88rem;
  line-height: 1.55;
  box-shadow: 0 1px 1px color-mix(in srgb, var(--sitio-fondo) 4%, transparent);
}

.sol-bot{
  align-self: flex-start;
  background: var(--sitio-claro);
  border: 1px solid var(--sitio-linea);
  border-bottom-left-radius: 4px;
}

.sol-msg strong{
  font-weight: 800;
}

.sol-sys{
  align-self: center;
  color: var(--text-muted);
  font-size: .74rem;
  text-align: center;
  padding: 5px 10px;
}

.sol-quick{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 14px;
  background: var(--sitio-claro);
  border-top: 1px solid var(--sitio-claro-alt);
  scrollbar-width: none;
}

.sol-quick::-webkit-scrollbar{
  display: none;
}

.sol-chip{
  flex: 0 0 auto;
  min-height: 38px;
  border: 1px solid var(--sitio-linea);
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--sitio-claro);
  font-size: .76rem;
  font-weight: 750;
  color: var(--text-dark);
}

.sol-chip:hover{
  border-color: var(--coral);
  color: var(--syt-coral-relleno);
}

.sol-input{
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--sitio-claro-alt);
  background: var(--sitio-claro);
}

.sol-input input{
  min-width: 0;
  height: 44px;
  border: 1px solid var(--sitio-linea);
  border-radius: 12px;
  padding: 0 12px;
  font: 500 .88rem var(--font-body);
}

.sol-input button{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--coral);
  color: var(--sitio-tinta-1);
  display: grid;
  place-items: center;
}

.sol-input button svg{
  width: 21px;
  height: 21px;
}

.sol-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 12px;
  background: var(--coral);
  color: var(--sitio-tinta-1);
  font-size: .82rem;
  font-weight: 800;
  margin-top: 2px;
}

.sol-lead{
  background: var(--sitio-claro);
  border: 1px solid var(--sitio-linea);
  border-radius: 15px;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.sol-lead label{
  display: grid;
  gap: 5px;
  font-size: .72rem;
  font-weight: 800;
}

.sol-lead input{
  width: 100%;
  height: 42px;
  border: 1px solid var(--sitio-linea);
  border-radius: 9px;
  padding: 0 10px;
}

.sol-lead button{
  min-height: 44px;
  border-radius: 10px;
  background: var(--coral);
  color: var(--sitio-tinta-1);
  font-weight: 800;
}

.sol-phone{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  border: 1px solid var(--sitio-linea);
  border-radius: 9px;
  overflow: hidden;
}

.sol-phone i{
  padding: 0 9px;
  font-style: normal;
  color: var(--text-muted);
  font-weight: 700;
}

.sol-phone input{
  border: 0;
  border-left: 1px solid var(--sitio-linea);
  border-radius: 0;
}

.sol-nudge{
  position: absolute;
  right: 70px;
  bottom: 4px;
  width: min(292px,calc(100vw - 116px));
  background: var(--sitio-fondo);
  color: var(--sitio-tinta-1);
  padding: 11px 14px;
  border-radius: 15px 15px 4px 15px;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--sitio-fondo) 24%, transparent);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: .25s;
  cursor: pointer;
}

.sol-nudge.on{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.sol-nudge strong{
  color: var(--syt-coral-vivo);
}

/* Espacio a la derecha para la × que descarta, para que no se monte sobre la
   última palabra del mensaje. */
.sol-nudge{ padding-right: 32px; }

.sol-nudge-x{
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sitio-tinta-1);
  opacity: .5;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.sol-nudge-x:hover, .sol-nudge-x:focus-visible{ opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }

/* Se agacha mientras la persona baja leyendo. No se usa `display:none`: el botón
   sigue existiendo para el teclado y para quien lo busque con el lector de
   pantalla, solo se aparta de la vista. */
.sol-root.sol-agachado{
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}
.sol-root.sol-agachado .sol-nudge{ opacity: 0; }

/* El centinela marca dónde termina el contenido. No ocupa ni pinta nada: solo
   avisa que la persona llegó al final. */
.sol-centinela{ height: 1px; margin: 0; padding: 0; pointer-events: none; }

/* Sitio reservado al pie mientras la burbuja está arriba. Sin esto se montaba
   sobre la letra chica del pie -el precio y la garantía-, que es justo el dato
   que alguien mira al final. Es la diferencia entre "casi no tapa" y "no tapa". */
.sol-con-burbuja body{ padding-bottom: 132px; }

.sol-notify{
  position: absolute;
  right: -2px;
  top: -3px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--coral);
  color: var(--sitio-tinta-1);
  font: 800 11px/21px var(--font-body);
  text-align: center;
  border: 2px solid var(--sitio-tinta-1);
}

.sol-typing span{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sitio-tinta-3);
  margin-right: 4px;
  animation: solDot 1s infinite;
}

.sol-typing span:nth-child(2){
  animation-delay: .15s;
}

.sol-typing span:nth-child(3){
  animation-delay: .3s;
}

.zoom-dialog{
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(94vw,1100px);
  max-height: 92vh;
}

.zoom-dialog::backdrop{
  background: color-mix(in srgb, var(--sitio-fondo) 88%, transparent);
  backdrop-filter: blur(6px);
}

.zoom-dialog img{
  max-width: 94vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 16px;
}

.zoom-dialog button{
  position: fixed;
  top: 18px;
  right: 18px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sitio-claro);
  color: var(--sitio-fondo);
  font-size: 25px;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--sitio-fondo) 30%, transparent);
}

.section-light, .parts-section, .card, .cond-card, .calc, .traje-stack-item, .ts-info-card, .consent-box, .sol-body, .sol-panel, .sol-quick, .sol-input, .sol-lead, .sol-chip{
  background: var(--sitio-claro);
  background-image: none;
}

.section-dark, .site-footer, .site-header, .personal-number, .blk-num{
  background: var(--sitio-fondo);
  color: var(--sitio-tinta-1);
}

[class*="title-gradient"]{
  background: none;
  background-image: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

html, html body, html body *{
  font-family: 'League Spartan',system-ui,sans-serif;
}

/* AQUÍ ESTABA LA MUERTE DE LAS ANIMACIONES DEL SITIO.
   Esta regla decía `opacity:1; transform:none; transition:none` para todo
   `[data-fade]`, anulando el estado inicial y la transición que sí están bien
   definidos más arriba (líneas ~805-819):

     [data-fade]        → visible con transición  (fallback sin JS)
     .js [data-fade]    → opacity 0, translateY(16px)
     .js [data-fade].visible → entra

   Con ella puesta, los 27 elementos animados del sitio no se movían: es lo que
   Carlitos vio como "en los trajes quitaste las animaciones".
   Se elimina. El fallback sin JavaScript lo cubre la regla base, así que nadie
   se queda con contenido invisible. */

.syt-texture-dark, .care-section, .personal-section{
  background-color: var(--sitio-fondo);
  background-image: linear-gradient(90deg,color-mix(in srgb, var(--sitio-fondo) 91%, transparent),color-mix(in srgb, var(--sitio-fondo) 74%, transparent) 65%,color-mix(in srgb, var(--sitio-fondo) 58%, transparent)),url('../images/surfaces/syt-lamina-dark-v2.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.section-dark p, .care-section p, .personal-section p{
  color: var(--sitio-tinta-1);
}

.section-dark .btn-primary, .care-section .btn-primary, .personal-section .btn-primary{
  background: var(--sitio-claro);
  color: var(--sitio-fondo-alt);
  border: 1px solid var(--sitio-tinta-1);
}

.section-dark .btn-ghost{
  border-color: color-mix(in srgb, var(--sitio-tinta-1) 70%, transparent);
  color: var(--sitio-tinta-1);
}

.home-hero .tag{
  background: var(--sitio-claro);
  color: var(--sitio-fondo-alt);
  border: 1px solid var(--sitio-tinta-1);
}

.home-hero .btn-ghost{
  color: var(--sitio-tinta-1);
  border-color: color-mix(in srgb, var(--sitio-tinta-1) 78%, transparent);
}

.syt-zoom-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: color-mix(in srgb, var(--sitio-fondo) 94%, transparent);
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}

.syt-zoom-overlay.on{
  display: flex;
}

.syt-zoom-wrap{
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.syt-zoom-wrap img{
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--sitio-fondo) 50%, transparent);
  transition: transform .15s ease-out;
  will-change: transform;
  touch-action: none;
}

.syt-zoom-close{
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 10000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sitio-claro) 12%, transparent);
  color: var(--sitio-tinta-1);
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.syt-zoom-close:hover{
  background: color-mix(in srgb, var(--sitio-claro) 22%, transparent);
}

.brand{
  display: inline-flex;
  align-items: center;
  color: var(--white);
  font-weight: 900;
  font-size: 1.4rem;
  font-family: var(--font-display);
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
  gap: 0;
}

/* El logo real (el atardecer con Sudamérica) mide 500x561, proporción 0.89:1.
   Antes esta regla fijaba 102x42 -2.43:1- sobre lo que entonces era un
   monograma inventado: aplicada al logo real lo habría aplastado horizontal
   (justo lo que el sello de diseño prohíbe). Se fija solo el alto y se deja
   el ancho automático; `aspect-ratio` evita el salto de layout mientras carga. */
.brand img{
  height: 52px;
  width: auto;
  aspect-ratio: 500 / 561;
  object-fit: contain;
  object-position: left center;
}

.brand span, .footer-brand span{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.footer-brand{
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-weight: 800;
  font-size: 1rem;
  font-family: var(--font-display);
  display: block;
  margin-bottom: 20px;
}

.footer-brand img{
  width: clamp(148px,14vw,196px);
  height: auto;
  max-height: none;
}

.home-hero p{
  color: var(--sitio-tinta-1);
}

.conditions-hero{
  padding: 86px 0 44px;
}

.conditions-hero .wrap{
  max-width: 820px;
}

.conditions-stage{
  padding: 22px 0 90px;
}

.condition-progress::-webkit-scrollbar{
  display: none;
}

.condition-tab:hover, .condition-tab.is-active{
  border-color: var(--black);
  background: var(--black);
  color: var(--sitio-tinta-1);
}

.condition-tab:focus-visible{
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}

.condition-slides{
  min-height: 390px;
}

.condition-deck[data-ready="true"] .condition-slide{
  display: none;
}

.condition-deck[data-ready="true"] .condition-slide.is-active{
  display: grid;
  animation: conditionIn .35s cubic-bezier(.22,1,.36,1);
}

.condition-slide-index small{
  font: 800 .75rem/1.25 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--coral);
}

.condition-eyebrow{
  font: 800 .74rem/1.25 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--coral);
}

.condition-slide-copy{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px,6vw,68px);
}

.condition-slide-copy h2{
  font-size: clamp(2rem,4vw,3.45rem);
  max-width: 14ch;
  margin: 0 0 22px;
  color: var(--text-dark);
  text-wrap: balance;
}

.condition-slide-copy p{
  max-width: 62ch;
  color: var(--text-muted);
  font-size: 1.08rem;
  line-height: 1.78;
}

.condition-slide-copy strong{
  color: var(--text-dark);
}

.condition-key{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: 100%;
  margin-top: 25px;
  padding: 10px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--syt-coral-vivo) 9%, transparent);
  color: var(--syt-coral-texto);
  font-weight: 800;
  font-size: .82rem;
}

.condition-key::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  flex: 0 0 auto;
}

.condition-controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  border-top: 1px solid var(--sitio-linea);
  background: var(--sitio-claro);
}

.condition-controls button{
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid var(--sitio-linea);
  border-radius: 999px;
  background: var(--sitio-claro);
  color: var(--text-dark);
  font-weight: 800;
}

.condition-controls button:last-child{
  background: var(--coral);
  border-color: var(--coral);
  color: var(--sitio-tinta-1);
}

.condition-controls button:disabled{
  opacity: .36;
  cursor: not-allowed;
}

.care-section{
  padding: 96px 0;
  background: var(--sitio-fondo);
  color: var(--sitio-tinta-1);
}

.care-intro{
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}

.care-intro h2{
  margin: 14px 0;
  color: var(--sitio-tinta-1);
}

.care-intro p{
  color: var(--sitio-tinta-1);
}

.care-tabs{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.care-tabs::-webkit-scrollbar{
  display: none;
}

.care-tab{
  flex: 1 0 180px;
  min-height: 54px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 15%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sitio-claro) 4%, transparent);
  color: var(--sitio-tinta-1);
  font-weight: 800;
  scroll-snap-align: start;
}

.care-tab.is-active{
  background: var(--sitio-claro);
  color: var(--sitio-fondo-alt);
  border-color: var(--sitio-tinta-1);
}

.care-panels{
  margin-top: 10px;
}

.care-panel{
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(300px,.75fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 12%, transparent);
  border-radius: 26px;
  background: var(--sitio-tinta-osc-1);
}

.care-story[data-ready="true"] .care-panel{
  display: none;
}

.care-story[data-ready="true"] .care-panel.is-active{
  display: grid;
  animation: conditionIn .35s cubic-bezier(.22,1,.36,1);
}

.care-media{
  min-height: 470px;
  background: var(--sitio-linea-osc);
  overflow: hidden;
}

.care-media img{
  width: 100%;
  height: 100%;
  min-height: 470px;
  object-fit: cover;
}

.care-copy{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px,4vw,52px);
}

.care-label{
  font: 800 .74rem/1.25 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--syt-coral-vivo);
}

.care-copy h3{
  font-size: clamp(1.75rem,3vw,2.7rem);
  margin: 12px 0 18px;
  color: var(--sitio-tinta-1);
}

.care-copy p{
  color: var(--sitio-tinta-1);
  font-size: 1rem;
}

.care-copy ul{
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.care-copy li{
  display: flex;
  gap: 11px;
  color: var(--sitio-tinta-1);
  line-height: 1.45;
}

.care-copy li::before{
  content: "✓";
  color: var(--syt-coral-vivo);
  font-weight: 900;
}

.care-copy .btn{
  align-self: flex-start;
  margin-top: 24px;
}

.terms-summary{
  margin-top: 34px;
  padding: 24px;
  border-radius: 18px;
  background: var(--sitio-fondo);
  color: var(--sitio-tinta-1);
}

.terms-summary p{
  margin-top: 8px;
  color: var(--sitio-tinta-1);
}

.terms-summary strong{
  color: var(--sitio-tinta-1);
}

.care-section .terms-summary{
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 14%, transparent);
  background: var(--sitio-tinta-osc-1);
}

.parts-section{
  padding: 96px 0;
  background: var(--sitio-claro);
}

.parts-intro{
  max-width: 720px;
  margin: 0 auto 42px;
  text-align: center;
}

.parts-intro h2{
  margin: 14px 0;
  color: var(--text-dark);
}

.parts-intro p{
  color: var(--text-muted);
}

.parts-grid{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}

.part-card{
  overflow: hidden;
  border: 1px solid var(--sitio-linea);
  border-radius: 22px;
  background: var(--sitio-claro);
  box-shadow: 0 18px 44px -36px color-mix(in srgb, var(--sitio-fondo) 50%, transparent);
}

.part-media{
  display: grid;
  place-items: center;
  height: 360px;
  padding: 16px;
  background: var(--sitio-claro-alt);
}

.part-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.part-copy{
  padding: 22px;
}

.part-copy span{
  font: 800 .72rem/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--coral);
}

.part-copy h3{
  margin: 9px 0 8px;
  color: var(--text-dark);
  font-size: 1.35rem;
}

.part-copy p{
  font-size: .92rem;
  color: var(--text-muted);
}

.parts-hint{
  text-align: center;
  margin-top: 20px;
  color: var(--text-muted);
  font-size: .84rem;
}

.personal-section{
  padding: 96px 0;
  background: var(--sitio-fondo);
  color: var(--sitio-tinta-1);
}

.personal-intro{
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.personal-intro h2{
  margin: 14px 0;
  color: var(--sitio-tinta-1);
}

.personal-intro p{
  color: var(--sitio-tinta-1);
  font-size: 1.02rem;
}

.personal-board{
  display: grid;
  gap: 22px;
}

.personal-kit{
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 14%, transparent);
  border-radius: 24px;
  background: var(--sitio-claro);
}

.personal-kit img{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.personal-kit figcaption{
  padding: 13px 18px;
  background: var(--sitio-tinta-osc-1);
  color: var(--sitio-tinta-1);
  font: .72rem/1.45 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.personal-number{
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--coral);
  font: 800 .88rem/1 var(--font-mono);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--syt-coral-vivo) 90%, transparent);
}

.personal-kicker{
  margin: 2px 0 7px;
  color: var(--syt-coral-vivo);
  font: 800 .7rem/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.personal-specs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.personal-specs strong{
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 17%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--sitio-claro) 7%, transparent);
  color: var(--sitio-tinta-1);
  font-size: .78rem;
}

.personal-choice, .personal-cord{
  padding: clamp(22px,4vw,34px);
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 14%, transparent);
  border-radius: 26px;
  background: var(--sitio-tinta-osc-1);
}

.personal-choice-head{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.personal-choice-head h3{
  margin: 0;
  color: var(--sitio-tinta-1);
  font-size: clamp(1.35rem,2.5vw,1.8rem);
}

.pin-options{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.pin-option{
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 14%, transparent);
  border-radius: 20px;
  background: var(--sitio-tinta-osc-1);
}

.pin-option-featured{
  border-color: color-mix(in srgb, var(--syt-coral-vivo) 75%, transparent);
  box-shadow: 0 20px 44px -34px color-mix(in srgb, var(--syt-coral-vivo) 95%, transparent);
}

.pin-option figure{
  overflow: hidden;
  margin: 0;
  background: var(--sitio-claro);
}

.pin-option figure img{
  width: 100%;
  height: 260px;
  object-fit: contain;
}

.pin-option>div{
  padding: 20px;
}

.pin-badge{
  display: inline-flex;
  margin-bottom: 9px;
  color: var(--syt-coral-vivo);
  font: 800 .68rem/1.2 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Todos los `h4` del sitio pasaron a `h3`: venian detras de un `h2` y saltarse
   un nivel rompe el indice del documento para quien navega con lector de
   pantalla. Las reglas aceptan los dos para que el aspecto no dependa de la
   etiqueta. */
.pin-option :is(h3, h4){
  margin: 0 0 8px;
  color: var(--sitio-tinta-1);
  font-size: 1.2rem;
}

.pin-option p{
  margin: 0;
  color: var(--sitio-tinta-1);
  font-size: .88rem;
  line-height: 1.58;
}

.pin-note{
  margin: 16px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--coral);
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--syt-coral-vivo) 9%, transparent);
  color: var(--sitio-tinta-1);
  font-size: .88rem;
}

.pin-note strong{
  color: var(--sitio-tinta-1);
}

.personal-cord .personal-specs{
  margin-bottom: 18px;
}

.cord-lead{
  max-width: 78ch;
  margin: 0;
  color: var(--sitio-tinta-1);
  font-size: 1rem;
  line-height: 1.65;
}

.cord-lead strong{
  color: var(--sitio-tinta-1);
}

.cord-fit-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 20px;
}

.cord-fit-grid article{
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 13%, transparent);
  border-radius: 18px;
  background: var(--sitio-tinta-osc-1);
}

.cord-fit-grid span{
  color: var(--syt-coral-vivo);
  /* .68rem daba 11.56px. Nada de texto por debajo de 12px en un telefono, y
     menos una etiqueta en mayusculas, que ya cuesta mas de leer. */
  font: 800 .75rem/1.2 var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.cord-fit-grid :is(h3, h4){
  margin: 8px 0;
  color: var(--sitio-tinta-1);
  font-size: 1.08rem;
}

.cord-fit-grid p{
  margin: 0;
  color: var(--sitio-tinta-1);
  font-size: .88rem;
  line-height: 1.58;
}

.personal-warning{
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 22px;
  padding: 22px 26px;
  border: 1px solid color-mix(in srgb, var(--syt-coral-vivo) 58%, transparent);
  border-radius: 22px;
  background: var(--error-relleno);
  color: var(--sitio-tinta-1);
  box-shadow: 0 22px 50px -32px color-mix(in srgb, var(--syt-coral) 95%, transparent);
}

.personal-alert{
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 3px solid var(--sitio-tinta-1);
  border-radius: 50%;
  font: 900 2rem/1 var(--font-display);
}

.personal-warning div>span{
  display: block;
  margin-bottom: 4px;
  font: 800 .7rem/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.personal-warning strong{
  display: block;
  color: var(--sitio-tinta-1);
  font-size: clamp(1.2rem,2.4vw,1.75rem);
  line-height: 1.18;
}

.personal-warning p{
  margin: 7px 0 0;
  color: var(--sitio-tinta-1);
  font-size: .88rem;
}

.personal-buy{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  padding: 18px 22px;
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 13%, transparent);
  border-radius: 18px;
  background: var(--sitio-tinta-osc-1);
}

.personal-buy>span{
  color: var(--syt-coral-vivo);
  font: 800 .75rem/1.2 var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.personal-buy p{
  margin: 0;
  color: var(--sitio-tinta-1);
  font-size: .86rem;
}

.personal-buy ul{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  padding: 0;
  list-style: none;
}

.personal-buy li{
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--sitio-claro);
  color: var(--sitio-fondo-alt);
  font-size: .76rem;
  font-weight: 800;
}

.stepper-row::-webkit-scrollbar{
  display: none;
}

button.stepper-pill{
  font-family: inherit;
  text-align: left;
}

.req-main{
  padding-top: 26px;
}

.req-flow[data-ready="true"] .blk{
  display: none;
}

.req-flow[data-ready="true"] .blk.is-active{
  display: block;
  animation: conditionIn .35s cubic-bezier(.22,1,.36,1);
}

.req-flow .blk{
  scroll-margin-top: 238px;
}

.req-side{
  top: 158px;
}

.blk{
  border-color: var(--sitio-linea);
  border-radius: 24px;
  box-shadow: 0 22px 58px -48px color-mix(in srgb, var(--sitio-fondo) 55%, transparent);
  padding: clamp(22px,4vw,36px);
}

.blk-head{
  margin-bottom: 26px;
}

.blk-num{
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--sitio-fondo);
  color: var(--sitio-tinta-1);
  font-size: 1.15rem;
}

.blk-titles .blk-explain{
  max-width: 64ch;
  color: var(--text-muted);
}

.sum-card{
  border-radius: 22px;
  box-shadow: 0 22px 58px -48px color-mix(in srgb, var(--sitio-fondo) 50%, transparent);
}

.help-box{
  border-radius: 22px;
}

body:has(.req-flow input:focus) .sol-root:not(.is-open), body:has(.req-flow textarea:focus) .sol-root:not(.is-open), body:has(.req-flow select:focus) .sol-root:not(.is-open){
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}

html, body, body *{
  font-family: 'League Spartan',system-ui,sans-serif;
}

html, body{
  background: var(--sitio-claro);
  color: var(--sitio-fondo);
}

h1, h2, h3, h4, .hero-title{
  font-weight: 800;
  letter-spacing: -.04em;
  text-wrap: balance;
}

p, li, label, input, select, textarea, button, a{
  font-family: 'League Spartan',system-ui,sans-serif;
}

.price, .num, .mono, [class*="amount"], [class*="total"]{
  font-variant-numeric: tabular-nums lining-nums;
}

/* Los dos botones del hero de comuna se tocaban: `.local-actions` existía en
   el HTML de las 10 landings pero nunca tuvo una sola regla de CSS, así que
   "Consultar disponibilidad" terminaba en 245px y "Leer condiciones" empezaba
   en 245px — cero separación entre dos áreas táctiles. */
.local-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3, 12px);
  margin-top: var(--e-5, 24px);
}

.hero-premium, .contact-hero, .local-hero{
  background-color: var(--sitio-fondo);
  background-image: linear-gradient(90deg,color-mix(in srgb, var(--sitio-fondo) 96%, transparent),color-mix(in srgb, var(--sitio-fondo) 78%, transparent) 58%,color-mix(in srgb, var(--sitio-fondo) 38%, transparent)),var(--syt-surface-dark);
  background-size: cover;
  background-position: center;
}

.section-light.syt-texture-light, .section.soft, .contact-zone, .intranet-hero{
  background-color: var(--sitio-claro);
  background-image: linear-gradient(color-mix(in srgb, var(--sitio-tinta-1) 78%, transparent),color-mix(in srgb, var(--sitio-tinta-1) 91%, transparent)),var(--syt-surface-light);
  background-size: cover;
  background-position: center;
}

.section-dark.syt-texture-dark, .personal-section{
  background-color: var(--sitio-fondo);
  background-image: linear-gradient(90deg,color-mix(in srgb, var(--sitio-fondo) 90%, transparent),color-mix(in srgb, var(--sitio-fondo) 72%, transparent) 64%,color-mix(in srgb, var(--sitio-fondo) 58%, transparent)),var(--syt-surface-dark);
  background-size: cover;
  background-position: center;
}

.card, .contact-card, .traje-card, .personal-choice, .personal-cord, details{
  border-color: color-mix(in srgb, var(--sitio-fondo) 13%, transparent);
  box-shadow: 0 22px 55px -42px color-mix(in srgb, var(--sitio-fondo) 55%, transparent);
  background-color: var(--sitio-claro);
}

.section-dark .btn-ghost, .hero-premium .btn-ghost, .contact-hero .btn-ghost{
  background: var(--sitio-fondo);
  color: var(--sitio-tinta-1);
  border-color: color-mix(in srgb, var(--sitio-tinta-1) 30%, transparent);
}

.section-dark .cond-card, .section-dark .calc, .section-dark .card, .personal-section .personal-choice, .personal-section .personal-cord, .personal-section .pin-option, .personal-section .cord-fit-grid article{
  background: var(--sitio-tinta-osc-1);
  background-image: none;
  border-color: color-mix(in srgb, var(--sitio-tinta-1) 16%, transparent);
  color: var(--sitio-tinta-1);
}

.section-dark .cond-card h3, .section-dark .cond-card p, .section-dark .calc,
.personal-section .personal-choice :is(h3, h4, p),
.personal-section .personal-cord :is(h3, h4, p){
  color: var(--sitio-tinta-1);
}

.section-dark .cond-card p, .personal-section .personal-choice p, .personal-section .personal-cord p{
  color: var(--sitio-tinta-1);
}

.home-suits-heading{
  margin-bottom: clamp(24px,3vh,34px);
}

.home-suits .traje-card .body :is(h2, h3), .home-suits .traje-card .body p{
  margin: 0;
}

.home-suits .traje-card .body .btn{
  width: 100%;
  margin-top: auto;
  min-height: 44px;
}

.home-suits-more{
  margin-top: clamp(24px,3vh,34px);
}

.home-hero-copy > p{
  max-width: 56ch;
  color: var(--sitio-tinta-1);
  font-weight: 500;
  line-height: 1.62;
  text-shadow: 0 2px 10px color-mix(in srgb, var(--sitio-fondo) 88%, transparent);
}

.home-hero .btn-primary:hover{
  transform: translateY(-2px);
  background: var(--syt-coral);
}

.traje-card{
  overflow: hidden;
  border: 1px solid var(--syt-line-light);
  border-radius: var(--syt-radius-lg);
  background: var(--syt-white);
  box-shadow: var(--syt-shadow-card);
  transition: transform .35s var(--syt-ease),
    border-color .25s ease,
    box-shadow .35s var(--syt-ease);
}

.traje-card:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--syt-coral-vivo) 34%, transparent);
  box-shadow: var(--syt-shadow-card-hover);
}

.traje-card img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: center center;
  background: rgba(4, 6, 11, 0.45);
  filter: saturate(.98) contrast(1.02);
  transition: transform .35s cubic-bezier(0.23, 1, 0.32, 1), filter .25s ease;
}

.traje-card:hover img{
  transform: scale(1.02);
  filter: saturate(1) contrast(1.04);
}

.traje-card .body{
  padding: 22px;
  background: var(--syt-white);
  color: var(--syt-ink);
}

html body, html body *, html body button, html body input, html body select, html body textarea{
  font-family: 'League Spartan',Arial,sans-serif;
  font-synthesis: none;
}

.brand, .footer-brand, .hero-title, .section-title, .mono, .num, .price, .calc-total b, .val-table td:last-child, .ts-num, .ts-price, .ts-info-card .value{
  font-family: 'League Spartan',Arial,sans-serif;
}

h1, h2, h3, h4, h5, h6, .hero-title, .section-title{
  color: var(--sitio-fondo-alt);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.02;
  text-wrap: balance;
}

.nav-links{
  display: flex;
  align-items: center;
  font-size: .92rem;
  gap: clamp(20px,2.1vw,38px);
}

.nav-links>a{
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 4px;
}

.nav-links a, .nav-dropdown-trigger{
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--sitio-tinta-1);
}

.nav-links a:hover, .nav-links a.active, .nav-dropdown-trigger:hover{
  color: var(--sitio-tinta-1);
}

.nav-links a.active::after{
  background: linear-gradient(90deg,var(--solar-coral),var(--solar-orange));
}

.nav-dropdown-menu{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  border-radius: 12px;
  padding: 8px 0;
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transition: all .2s ease;
  z-index: 1100;
  background: color-mix(in srgb, var(--sitio-fondo) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--syt-coral-vivo) 20%, transparent);
  box-shadow: 10px 10px 0 color-mix(in srgb, var(--syt-coral-vivo) 8%, transparent),0 30px 70px -38px color-mix(in srgb, var(--sitio-fondo) 90%, transparent);
  backdrop-filter: blur(22px);
}

.btn, .btn-primary, .btn-ghost{
  min-height: 48px;
  border-radius: 16px;
  font-weight: 700;
  letter-spacing: -.025em;
  transition: transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,background .3s ease;
}

.btn-primary{
  padding: 11px 24px;
  border-color: var(--coral,var(--syt-coral-vivo));
  color: var(--sitio-tinta-1);
  background: linear-gradient(135deg,var(--solar-coral),var(--solar-orange));
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 18%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--syt-coral-vivo) 20%, transparent),0 18px 42px -20px color-mix(in srgb, var(--syt-coral-vivo) 82%, transparent);
}

.btn-primary:hover{
  background: var(--syt-coral);
  border-color: var(--syt-coral);
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--syt-coral-vivo) 50%, transparent),0 24px 52px -18px color-mix(in srgb, var(--syt-coral-vivo) 90%, transparent);
}

.btn-ghost{
  color: var(--white);
  padding: 10px 22px;
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 20%, transparent);
  background: color-mix(in srgb, var(--sitio-claro) 4%, transparent);
  backdrop-filter: blur(14px);
  border-color: color-mix(in srgb, var(--sitio-tinta-1) 28%, transparent);
}

.section-light, .parts-section, .section.soft, .contact-zone, .local-section{
  background-color: var(--sitio-claro);
  background-image: linear-gradient(color-mix(in srgb, var(--sitio-tinta-1) 88%, transparent),color-mix(in srgb, var(--sitio-tinta-1) 96%, transparent)),var(--solar-light-image);
  background-size: cover;
  background-position: center;
}

.section-light:nth-of-type(2n), .parts-section:nth-of-type(2n), .local-section:nth-of-type(2n){
  background-image: linear-gradient(color-mix(in srgb, var(--sitio-tinta-1) 90%, transparent),color-mix(in srgb, var(--sitio-tinta-1) 97%, transparent)),var(--solar-feather-light);
}

.section-light:nth-of-type(3n), .parts-section:nth-of-type(3n), .local-section:nth-of-type(3n){
  background-image: linear-gradient(color-mix(in srgb, var(--sitio-tinta-1) 91%, transparent),color-mix(in srgb, var(--sitio-tinta-1) 97%, transparent)),var(--solar-contour-light);
}

.section-dark, .care-section, .personal-section, .site-footer{
  background-color: var(--solar-black);
  background-image: linear-gradient(90deg,color-mix(in srgb, var(--sitio-fondo) 92%, transparent),color-mix(in srgb, var(--sitio-fondo) 72%, transparent)),var(--solar-dark-image);
  background-size: cover;
  background-position: center;
}

.section-dark:nth-of-type(2n), .care-section:nth-of-type(2n){
  background-image: linear-gradient(90deg,color-mix(in srgb, var(--sitio-fondo) 91%, transparent),color-mix(in srgb, var(--sitio-fondo) 70%, transparent)),var(--solar-feather-dark);
}

.section-dark:nth-of-type(3n), .personal-section:nth-of-type(3n){
  background-image: linear-gradient(90deg,color-mix(in srgb, var(--sitio-fondo) 88%, transparent),color-mix(in srgb, var(--sitio-fondo) 70%, transparent)),var(--solar-eclipse-dark);
}

main>.section-light:first-child:not(.home-hero), main>.guide-hero:first-child, main>.req-hero:first-child, .contact-hero, .local-hero, .intranet-hero, .conditions-hero{
  color: var(--sitio-tinta-1);
  background-color: var(--solar-black);
  background-image: linear-gradient(90deg,color-mix(in srgb, var(--sitio-fondo) 94%, transparent),color-mix(in srgb, var(--sitio-fondo) 58%, transparent)),var(--solar-eclipse-dark);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid color-mix(in srgb, var(--syt-coral-vivo) 22%, transparent);
}

main>.section-light:first-child:not(.home-hero) h1, main>.section-light:first-child:not(.home-hero) h2, main>.section-light:first-child:not(.home-hero) h3, main>.section-light:first-child:not(.home-hero) p, .contact-hero h1, .contact-hero h2, .contact-hero p, .local-hero h1, .local-hero h2, .local-hero p, .intranet-hero h1, .intranet-hero h2, .intranet-hero p, .conditions-hero h1, .conditions-hero h2, .conditions-hero p{
  color: var(--sitio-tinta-1);
}

main>.section-light:first-child:not(.home-hero) p, .contact-hero p, .local-hero p, .intranet-hero p, .conditions-hero p{
  color: var(--sitio-tinta-1);
}

.home-hero::before{
  background: radial-gradient(circle at 82% 40%, color-mix(in srgb, var(--syt-coral-vivo) 10%, transparent), transparent 34%),
    radial-gradient(circle at 94% 74%, color-mix(in srgb, var(--syt-coral) 8%, transparent), transparent 30%);
  content: "";
  position: absolute;
  inset: -4%;
  display: block;
  background-image: var(--solar-feather-dark);
  background-size: cover;
  background-position: center;
  opacity: .32;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  animation: solar-drift 12s ease-in-out infinite alternate;
}

.home-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--sitio-fondo) 98%, transparent) 0%,
      color-mix(in srgb, var(--sitio-fondo) 90%, transparent) 31%,
      color-mix(in srgb, var(--sitio-fondo) 50%, transparent) 54%,
      color-mix(in srgb, var(--sitio-fondo) 8%, transparent) 80%),
    linear-gradient(0deg, color-mix(in srgb, var(--sitio-fondo) 52%, transparent), transparent 40%);
  z-index: 1;
}

.home-hero-media, .home-hero .wrap{
  z-index: 2;
}

.home-hero .tag, .tag{
  color: var(--sitio-tinta-1);
  background: linear-gradient(135deg,var(--solar-coral),var(--solar-orange));
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 18%, transparent);
  box-shadow: 0 12px 34px -24px color-mix(in srgb, var(--syt-coral-vivo) 90%, transparent);
}

.card, .card-dark, .price-panel, .cond-card, .condition-slide, .contact-card, .local-step, .intranet-card, .traje-card, .traje-stack-item, .ts-info-card, .part-card, .personal-choice, .personal-cord, .pin-option, .calc, .consent-box, .val-card, .impact-card, .care-panel, .help-box, details{
  border: 1px solid color-mix(in srgb, var(--sitio-fondo) 13%, transparent);
  border-radius: 24px;
  box-shadow: var(--solar-shadow-hot);
}

.card, .price-panel, .cond-card, .condition-slide, .contact-card, .local-step, .intranet-card, .traje-card, .traje-stack-item, .ts-info-card, .part-card, .personal-choice, .personal-cord, .pin-option, .calc, .consent-box, .val-card, .impact-card, .help-box, details{
  background: linear-gradient(145deg,color-mix(in srgb, var(--sitio-claro) 99%, transparent),color-mix(in srgb, var(--sitio-claro-alt) 94%, transparent));
}

.price-panel, .condition-slide, .contact-card:nth-child(2n), .local-step:nth-child(2n){
  background-image: linear-gradient(145deg,color-mix(in srgb, var(--sitio-tinta-1) 95%, transparent),color-mix(in srgb, var(--sitio-tinta-1) 90%, transparent)),var(--solar-lamina-light);
  background-size: cover;
  background-position: center;
}

.section-dark .card:nth-child(2n), .section-dark .cond-card:nth-child(2n), .care-panel{
  background-image: linear-gradient(145deg,color-mix(in srgb, var(--sitio-fondo) 84%, transparent),color-mix(in srgb, var(--sitio-fondo) 90%, transparent)),var(--solar-lamina-dark);
  background-size: cover;
  background-position: center;
}

.card, .contact-card, .local-step, .intranet-card, .traje-card, .part-card, .pin-option, .ts-info-card{
  transition: transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s ease,border-color .25s ease;
}

.carousel{
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0 16px;
  border-radius: 20px;
  background: var(--sitio-fondo);
  border: 1px solid color-mix(in srgb, var(--syt-coral-vivo) 18%, transparent);
}

.carousel-track img{
  flex: 0 0 calc(50% - 6px);
  min-width: 0;
  aspect-ratio: 3/4;
  height: auto;
  scroll-snap-align: start;
  border-radius: 14px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--sitio-fondo) 12%, transparent);
  background: var(--sitio-fondo);
  object-fit: contain;
  object-position: center;
}

.carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--sitio-tinta-1);
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 5;
  backdrop-filter: blur(8px);
  transition: background .2s;
  background: color-mix(in srgb, var(--sitio-fondo) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 20%, transparent);
  box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--sitio-fondo) 90%, transparent);
}

.carousel-btn:hover{
  background: linear-gradient(135deg,var(--solar-coral),var(--solar-orange));
}

.carousel-dots span.active{
  transform: scale(1.4);
  background: var(--solar-orange);
  box-shadow: 0 0 14px color-mix(in srgb, var(--syt-coral-vivo) 80%, transparent);
}

.val-table, .form, .record-card, .sum-card{
  border-radius: 20px;
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--syt-coral-vivo) 7%, transparent),var(--solar-shadow);
  overflow: hidden;
}

.val-table th{
  text-align: left;
  padding: 12px 16px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .06em;
  background: var(--solar-black);
  color: var(--sitio-tinta-1);
}

input, select, textarea{
  border-color: color-mix(in srgb, var(--sitio-fondo) 16%, transparent);
  border-radius: 14px;
  background: var(--sitio-claro);
  color: var(--solar-ink);
  min-height: 48px;
}

input:focus, select:focus, textarea:focus{
  outline: 3px solid color-mix(in srgb, var(--syt-coral-vivo) 14%, transparent);
  border-color: var(--solar-coral);
}

.site-footer{
  background: var(--sitio-fondo);
  color: var(--white);
  padding: 56px 0 0;
  margin-top: auto;
  border-top: 1px solid color-mix(in srgb, var(--syt-coral-vivo) 22%, transparent);
  background-image: linear-gradient(color-mix(in srgb, var(--sitio-fondo) 85%, transparent),color-mix(in srgb, var(--sitio-fondo) 93%, transparent)),var(--solar-ember-dark);
  background-size: cover;
  background-position: center bottom;
}

.site-footer::before{
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--solar-coral),var(--solar-orange),transparent);
  opacity: .75;
}

.site-footer a{
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* El resplandor pulsante se retiro por completo (01-sep): Carlitos pidio
   quitar animaciones de CTA que no aportan a la lectura. Un boton latiendo
   sin parar distrae, y deja de leerse como invitacion para leerse como
   ruido. El boton mantiene su sombra estatica y sus estados hover/active. */

.wrap{
  margin: 0 auto;
  padding: 0 28px;
  max-width: var(--syt-layout);
  padding-inline: clamp(24px,4vw,56px);
}

.section{
  padding: 96px 0;
  position: relative;
  padding-block: clamp(64px,8vw,112px);
}

h1, h2, h3, h4, h5, h6{
  font-weight: 800;
  letter-spacing: -.048em;
  text-wrap: balance;
}

p, li{
  color: var(--sitio-tinta-osc-2);
  letter-spacing: -.012em;
  font-weight: 500;
  line-height: 1.58;
}

strong, b{
  font-weight: 700;
}

.section-light, .parts-section, .section-dark, .care-section, .personal-section{
  background-image: none;
}

.syt-glow-section{
  overflow: clip;
  padding-block: var(--syt-section-space);
  background-color: var(--syt-white);
  background-image: linear-gradient(color-mix(in srgb, var(--sitio-tinta-1) 82%, transparent),color-mix(in srgb, var(--sitio-tinta-1) 93%, transparent)), url('../images/surfaces/syt-lamina-light-v2.webp');
  background-size: cover;
  background-position: center;
  position: relative;
  isolation: isolate;
  background: var(--sitio-claro);
}

.syt-glow-section::before{
  aspect-ratio: 1;
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(46vw,680px);
  height: min(46vw,680px);
  right: -22%;
  top: -40%;
  border-radius: 50%;
  background: radial-gradient(circle,color-mix(in srgb, var(--syt-coral-vivo) 13%, transparent),color-mix(in srgb, var(--syt-coral-vivo) 5%, transparent) 37%,transparent 70%);
}

.syt-glow-section--dark{
  background-color: var(--syt-black);
  background: var(--sitio-fondo);
  background-image: linear-gradient(color-mix(in srgb, var(--sitio-fondo) 78%, transparent),color-mix(in srgb, var(--sitio-fondo) 92%, transparent)),var(--syt-orbit-dark);
  background-size: cover;
  background-position: center;
  color: var(--sitio-tinta-1);
}

.syt-glow-section--dark::before{
  left: -24%;
  right: auto;
  background: radial-gradient(circle,color-mix(in srgb, var(--syt-coral-vivo) 24%, transparent),color-mix(in srgb, var(--syt-coral-vivo) 8%, transparent) 37%,transparent 70%);
}

.syt-texture-light{
  background-color: var(--sitio-claro);
  background-image: linear-gradient(color-mix(in srgb, var(--sitio-tinta-1) 78%, transparent),color-mix(in srgb, var(--sitio-tinta-1) 91%, transparent)),url('../images/surfaces/syt-lamina-light-v2.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background: var(--sitio-claro);
}

.syt-texture-dark{
  background: var(--sitio-fondo);
}

.site-header .nav-links{
  gap: clamp(18px,2.2vw,38px);
}

.site-header .nav-dropdown.active>.nav-dropdown-trigger{
  color: var(--sitio-tinta-1);
}

.site-header .nav-actions .btn-primary{
  min-height: 52px;
  padding-inline: clamp(18px,2vw,28px);
}

.home-hero{
  position: relative;
  overflow: hidden;
  padding: 96px 0 84px;
  color: var(--sitio-tinta-1);
  background: var(--solar-black);
  isolation: isolate;
  box-sizing: border-box;
  height: auto;
  min-height: max(600px,calc(100svh - var(--syt-header-h)));
  max-height: none;
  padding-block: clamp(38px,5.6svh,68px);
  display: grid;
  align-items: center;
}

.home-hero .wrap{
  z-index: 2;
  position: relative;
  max-width: var(--syt-layout);
  width: 100%;
}

.home-hero-copy{
  max-width: min(590px,45vw);
  padding-block: 8px;
}

.home-hero [data-fade]{
  opacity: 1;
  transform: none;
}

.home-hero-copy>p{
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 15%, transparent);
  border-radius: 18px;
  background: linear-gradient(135deg,color-mix(in srgb, var(--sitio-claro) 11%, transparent),color-mix(in srgb, var(--sitio-claro) 4%, transparent));
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--syt-coral-vivo) 8%, transparent),0 22px 50px -34px color-mix(in srgb, var(--sitio-fondo) 90%, transparent);
  backdrop-filter: blur(16px);
  max-width: 34rem;
  margin-bottom: clamp(20px,3.2vh,34px);
}

.home-hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.96) contrast(1.035);
  object-position: 70% center;
}

.home-hero .btn{
  min-height: 54px;
}

.card, .price-panel, .cond-card, .condition-slide, .contact-card, .local-step, .intranet-card, .traje-card, .traje-stack-item, .ts-info-card, .part-card, .personal-choice, .personal-cord, .pin-option, .calc, .consent-box, .val-card, .impact-card, .care-panel, .help-box, details{
  background: linear-gradient(145deg,var(--sitio-claro) 0%,var(--sitio-claro) 100%);
  background-image: linear-gradient(145deg,var(--sitio-tinta-1) 0%,var(--sitio-claro) 100%);
  border-color: var(--syt-line);
  box-shadow: var(--syt-shadow);
}

.card::before, .traje-card::before{
  background: none;
}

.card:hover, .contact-card:hover, .local-step:hover, .intranet-card:hover, .traje-card:hover, .part-card:hover, .pin-option:hover, .ts-info-card:hover{
  transform: translate3d(0,-7px,0);
  border-color: color-mix(in srgb, var(--syt-coral-vivo) 34%, transparent);
  box-shadow: var(--syt-shadow-hot);
}

.home-suits{
  min-height: 0;
  padding: 74px 0 14px;
  scroll-margin-top: 74px;
  padding-block: clamp(68px,8vw,116px);
}

.home-suits-grid{
  align-items: stretch;
}

.home-suits .traje-card{
  grid-template-rows: auto 1fr;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.home-suits .traje-card>img{
  aspect-ratio: auto;
  background: var(--sitio-fondo);
  flex: 0 0 auto;
  width: 100%;
  height: clamp(210px,17vw,280px);
  object-fit: contain;
  object-position: center;
}

.home-suits .traje-card .body{
  align-items: flex-start;
  gap: 8px;
  padding: 18px 20px 20px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.home-suits .traje-card .btn{
  margin-top: auto;
}

main>.section-light:first-child:not(.home-hero), .guide-hero, .contact-hero, .local-hero, .intranet-hero, .conditions-hero, .req-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 0;
  padding-block: clamp(72px,10svh,132px) clamp(44px,6svh,76px);
  color: var(--sitio-tinta-1);
  background-color: var(--sitio-fondo);
  background-image: linear-gradient(100deg,color-mix(in srgb, var(--sitio-fondo) 97%, transparent) 8%,color-mix(in srgb, var(--sitio-fondo) 82%, transparent) 51%,color-mix(in srgb, var(--sitio-fondo) 42%, transparent)),var(--syt-orbit-dark);
  background-size: cover;
  background-position: center;
}

main>.section-light:first-child:not(.home-hero) .wrap, .guide-hero .wrap, .contact-hero .wrap, .local-hero .wrap, .intranet-hero .wrap, .conditions-hero .wrap, .req-hero .wrap{
  max-width: 980px;
  margin-inline: auto;
}

main>.section-light:first-child:not(.home-hero) h1, .guide-hero h1, .contact-hero h1, .local-hero h1, .intranet-hero h1, .conditions-hero h1, .req-hero h1{
  color: var(--sitio-tinta-1);
  max-width: 13ch;
}

main>.section-light:first-child:not(.home-hero) p, .guide-hero p, .contact-hero p, .local-hero p, .intranet-hero p, .conditions-hero p, .req-hero p{
  color: var(--sitio-tinta-1);
  max-width: 42rem;
}

.req-hero .crumbs{
  color: var(--sitio-tinta-1);
}

.req-hero .crumbs span{
  color: var(--syt-orange);
}

.home-suits, .parts-section{
  background-image: linear-gradient(color-mix(in srgb, var(--sitio-tinta-1) 91%, transparent),color-mix(in srgb, var(--sitio-tinta-1) 96%, transparent)),var(--syt-orbit-light);
  background-size: cover;
  background-position: center right;
}

.care-section, .personal-section{
  background-image: linear-gradient(90deg,color-mix(in srgb, var(--sitio-fondo) 94%, transparent),color-mix(in srgb, var(--sitio-fondo) 72%, transparent)),var(--syt-feather-ember);
  background-size: cover;
  background-position: center;
}

.req-stepper{
  top: 70px;
  z-index: 70;
  padding: 14px 0;
  backdrop-filter: blur(18px);
  position: sticky;
  background: var(--sitio-claro);
  padding-block: 18px;
  box-shadow: 0 14px 34px -30px color-mix(in srgb, var(--sitio-fondo) 45%, transparent);
}

.req-stepper .wrap{
  max-width: var(--syt-layout);
}

.stepper-row{
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 2px 0 7px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
  overflow: visible;
}

.stepper-pill{
  flex: 1 0 150px;
  scroll-snap-align: center;
  cursor: pointer;
  min-width: 0;
  min-height: 60px;
  padding: 11px 13px;
  white-space: normal;
  border-radius: 18px;
}

.stepper-pill .sp-tx{
  font-size: .76rem;
  line-height: 1.15;
  letter-spacing: .025em;
  text-align: left;
}

.site-header .brand{
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  min-width: 46px;
  color: var(--sitio-tinta-1);
  font-family: var(--font-display);
  font-size: 1.62rem;
  font-weight: 900;
  letter-spacing: -.09em;
  line-height: 1;
  text-transform: none;
}

/* Esta regla ocultaba cualquier <img> o <span> hijo directo del logo del
   encabezado. Tenía sentido cuando el contenido real era el TEXTO "SYT"
   suelto (nodo de texto, no <span>, así que no lo tocaba) y cualquier imagen
   ahí era sobrante o un intento fallido. Ahora el contenido SÍ es una imagen
   -el logo real-, así que esta regla la habría dejado invisible sin que se
   notara por qué: cargaba bien (naturalWidth 500) pero medía 0x0 en pantalla. */

.site-header .brand::before, .site-header .brand::after{
  content: none;
  display: none;
}

.site-header{
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 14px 0;
  transition: box-shadow .25s,background .25s;
  background-image: linear-gradient(90deg,color-mix(in srgb, var(--sitio-fondo) 96%, transparent),color-mix(in srgb, var(--sitio-fondo) 84%, transparent)),var(--solar-corridor-dark);
  background-size: auto,cover;
  background-position: center;
  box-shadow: 0 12px 36px -28px color-mix(in srgb, var(--syt-coral-vivo) 80%, transparent);
  background-color: color-mix(in srgb, var(--sitio-fondo) 98%, transparent);
  min-height: var(--syt-header-h);
  background: var(--sitio-fondo);
  border-bottom: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 8%, transparent);
}

.site-header .wrap{
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1440px;
  width: min(100%,1440px);
  margin-inline: auto;
  padding-inline: clamp(28px,4vw,64px);
}

.site-header .nav-links>a, .site-header .nav-dropdown-trigger{
  letter-spacing: -.025em;
  color: var(--sitio-tinta-1);
  font-weight: 700;
}

.site-header .nav-links>a:hover, .site-header .nav-links>a.active, .site-header .nav-dropdown.active>.nav-dropdown-trigger, .site-header .nav-dropdown.is-open>.nav-dropdown-trigger{
  color: var(--sitio-tinta-1);
}

.site-header .nav-dropdown.is-open>.nav-dropdown-menu{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.site-header .nav-dropdown-trigger{
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
}

.site-header .nav-actions .btn-primary, .btn-coral, .mobile-nav-cta{
  background: var(--syt-coral-deep);
  border-color: var(--syt-coral-deep);
  box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--syt-coral) 86%, transparent);
}

.site-header .nav-actions .btn-primary:hover, .btn-coral:hover{
  background: var(--syt-coral-ink);
}

.hero-premium{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  display: grid;
  align-items: center;
  min-height: clamp(510px,calc(100svh - var(--syt-header-h)),680px);
  padding: clamp(64px,8vw,110px) 0;
  color: var(--sitio-tinta-1);
  background: var(--sitio-fondo);
  background-image: linear-gradient(102deg,color-mix(in srgb, var(--sitio-fondo) 99%, transparent) 8%,color-mix(in srgb, var(--sitio-fondo) 88%, transparent) 50%,color-mix(in srgb, var(--sitio-fondo) 56%, transparent)),var(--syt-orbit-dark);
  background-size: cover;
  background-position: center;
}

.hero-premium::after{
  content: "";
  position: absolute;
  z-index: -1;
  width: 38vw;
  height: 38vw;
  min-width: 460px;
  min-height: 460px;
  right: -13vw;
  top: -22vw;
  border-radius: 50%;
  background: radial-gradient(circle,color-mix(in srgb, var(--syt-coral) 22%, transparent),color-mix(in srgb, var(--syt-coral) 6%, transparent) 39%,transparent 71%);
  filter: blur(3px);
  pointer-events: none;
}

.hero-premium .wrap-wide.hero-layout{
  width: min(100%,var(--syt-layout));
  margin-inline: auto;
  padding-inline: clamp(24px,4vw,56px);
  display: grid;
  grid-template-columns: minmax(0,1.02fr) minmax(330px,.72fr);
  gap: clamp(36px,6vw,88px);
  align-items: center;
}

.hero-premium .hero-copy{
  max-width: 620px;
  color: var(--sitio-tinta-1);
}

.hero-premium .seo-title{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.hero-premium .hero-title{
  color: var(--sitio-tinta-1);
  font-size: clamp(3rem,5.2vw,5.7rem);
  line-height: .91;
  letter-spacing: -.075em;
  margin: 14px 0 22px;
  max-width: 10.8ch;
}

.hero-premium .lead{
  max-width: 49ch;
  color: var(--syt-dark-copy);
  font-size: clamp(1rem,1.2vw,1.17rem);
  line-height: 1.62;
}

.hero-premium .eyebrow{
  color: var(--syt-coral-vivo);
  font-weight: 800;
  letter-spacing: .12em;
}

.hero-premium .hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero-premium .hero-actions .btn{
  min-height: 50px;
  padding-inline: 22px;
}

.hero-premium .btn-wsp{
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 35%, transparent);
  color: var(--sitio-tinta-1);
}

.hero-premium .device-frame{
  width: 100%;
  padding: 1px;
  border-radius: 25px;
  background: linear-gradient(145deg,color-mix(in srgb, var(--sitio-claro) 28%, transparent),color-mix(in srgb, var(--syt-coral) 42%, transparent));
  box-shadow: var(--syt-panel-shadow);
  transform: none;
}

.hero-premium .device-screen{
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 24px;
  background: var(--sitio-fondo-alt);
  color: var(--sitio-tinta-1);
}

.hero-premium .screen-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--syt-dark-line);
  color: var(--sitio-tinta-1);
  font-size: .75rem;
}

.hero-premium .screen-links{
  display: flex;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.hero-premium .screen-dot{
  background: var(--syt-coral-deep);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--syt-coral) 12%, transparent);
}

.hero-premium .device-screen>div[style]{
  padding: clamp(22px,3vw,34px);
}

.hero-premium .price-panel{
  min-height: 0;
  padding: clamp(22px,3vw,32px);
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 12%, transparent);
  border-radius: 18px;
  background: var(--sitio-tinta-osc-1);
  background-image: linear-gradient(145deg,color-mix(in srgb, var(--sitio-tinta-1) 6%, transparent),color-mix(in srgb, var(--syt-coral) 10%, transparent));
  color: var(--sitio-tinta-1);
  box-shadow: none;
}

.hero-premium .price-panel, .hero-premium .price-panel *{
  color: var(--sitio-tinta-1);
}

.hero-premium .price-panel .eyebrow{
  color: var(--syt-coral-vivo);
}

.hero-premium .price-panel p{
  color: var(--sitio-tinta-1);
  line-height: 1.6;
}

.hero-premium .impact-card{
  margin: 0;
  max-width: none;
  color: var(--sitio-tinta-1);
  background: var(--sitio-tinta-osc-1);
}

.hero-premium .impact-card h2, .hero-premium .impact-card p{
  color: var(--sitio-tinta-1);
}

.guide-hero{
  min-height: 0;
  padding-block: 0;
}

.guide-hero .hero-copy{
  max-width: 620px;
}

.guide-hero .hero-title{
  max-width: 11ch;
}

.section-head{
  max-width: 760px;
}

.section-head>h2, .section-head h1{
  letter-spacing: -.06em;
  line-height: .98;
}

.section-head .eyebrow, .section-head .tag{
  color: var(--syt-coral-deep);
}

.section-dark .section-head>h2, .syt-glow-section--dark .section-head>h2{
  color: var(--sitio-tinta-1);
}

.card, .contact-card, .local-step, .intranet-card, .traje-card, .traje-stack-item, .ts-info-card, .part-card, .impact-card, .val-card{
  border-radius: 22px;
  background: var(--sitio-claro);
  background-image: none;
  border: 1px solid color-mix(in srgb, var(--sitio-fondo) 13%, transparent);
  box-shadow: 0 20px 56px -44px color-mix(in srgb, var(--sitio-fondo) 38%, transparent);
}

.section-dark .card, .section-dark .cond-card, .section-dark .calc, .care-section .care-panel, .personal-section .personal-choice, .personal-section .personal-cord, .personal-section .pin-option{
  backdrop-filter: blur(18px);
  border-color: var(--syt-dark-line);
  background: var(--sitio-tinta-osc-1);
  background-image: none;
  color: var(--sitio-tinta-1);
  box-shadow: var(--syt-panel-shadow);
}

.card:hover, .traje-card:hover, .local-step:hover, .intranet-card:hover{
  border-color: color-mix(in srgb, var(--syt-coral) 62%, transparent);
  box-shadow: 0 24px 64px -42px color-mix(in srgb, var(--syt-coral) 42%, transparent);
}

body:has(.hero-premium) main>.section:not(.hero-premium), body:has(.guide-hero) main>.section:not(.section-dark){
  color: var(--sitio-tinta-1);
  background: var(--sitio-fondo-alt);
  background-image: radial-gradient(circle at 91% 6%,color-mix(in srgb, var(--syt-coral) 13%, transparent),transparent 24%);
}

body:has(.hero-premium) main>.section:not(.hero-premium) h2, body:has(.hero-premium) main>.section:not(.hero-premium) h3, body:has(.guide-hero) main>.section:not(.section-dark) h2, body:has(.guide-hero) main>.section:not(.section-dark) h3{
  color: var(--sitio-tinta-1);
}

body:has(.hero-premium) main>.section:not(.hero-premium) p, body:has(.guide-hero) main>.section:not(.section-dark) p{
  color: var(--sitio-tinta-1);
}

body:has(.hero-premium) main>.section:not(.hero-premium) .card, body:has(.hero-premium) main>.section:not(.hero-premium) .val-card, body:has(.guide-hero) main>.section:not(.section-dark) .card, body:has(.guide-hero) main>.section:not(.section-dark) .record-card{
  color: var(--sitio-tinta-1);
  background: var(--sitio-tinta-osc-1);
  background-image: linear-gradient(145deg,color-mix(in srgb, var(--sitio-tinta-1) 5%, transparent),transparent);
  border-color: var(--syt-dark-line);
  box-shadow: var(--syt-panel-shadow);
}

body:has(.hero-premium) main>.section:not(.hero-premium) .card p, body:has(.hero-premium) main>.section:not(.hero-premium) .val-card p, body:has(.guide-hero) main>.section:not(.section-dark) .card p, body:has(.guide-hero) main>.section:not(.section-dark) .record-card p{
  color: var(--sitio-tinta-1);
}

body:has(.hero-premium) main>.section:not(.hero-premium) table, body:has(.hero-premium) main>.section:not(.hero-premium) tbody, body:has(.hero-premium) main>.section:not(.hero-premium) td, body:has(.guide-hero) main>.section:not(.section-dark) table, body:has(.guide-hero) main>.section:not(.section-dark) tbody, body:has(.guide-hero) main>.section:not(.section-dark) td{
  color: var(--sitio-tinta-1);
}

body:has(.hero-premium) main>.section:not(.hero-premium) tr, body:has(.guide-hero) main>.section:not(.section-dark) tr{
  border-color: var(--syt-dark-line);
}

.traje-stack-item{
  position: sticky;
  top: 120px;
  margin-bottom: 80px;
  border: 1px solid var(--sitio-linea);
  border-radius: 24px;
  overflow: hidden;
  transition: transform .3s;
  scroll-margin-top: 104px;
  background: var(--sitio-fondo-alt);
  background-image: linear-gradient(145deg,color-mix(in srgb, var(--sitio-tinta-1) 4%, transparent),transparent 48%);
  border-color: var(--syt-dark-line);
  box-shadow: var(--syt-panel-shadow);
}

.traje-stack-item h3, .traje-stack-item .ts-desc, .traje-stack-item .ts-top, .traje-stack-item .ts-info-card{
  color: var(--sitio-tinta-1);
}

.traje-stack-item .ts-desc{
  font-size: 1rem;
  line-height: 1.6;
  max-width: 520px;
  color: var(--sitio-tinta-1);
}

.traje-stack-item .ts-info-card{
  background: var(--sitio-tinta-osc-1);
  border-color: var(--syt-dark-line);
}

.traje-stack-item .ts-info-card .label{
  color: var(--sitio-tinta-1);
}

.traje-stack-item .ts-info-card .value{
  color: var(--sitio-tinta-1);
}

.traje-stack-item .ts-price, .traje-stack-item .ts-num{
  color: var(--syt-coral-vivo);
}

.conditions-stage, .conditions-stage.section-light, .faq-section, .faq-section.section-light, .section.soft, .section-light.soft, .section-light:has(.condition-deck), .section-light:has(.care-story){
  color: var(--sitio-tinta-1);
  background: var(--sitio-fondo);
  background-image: linear-gradient(112deg,color-mix(in srgb, var(--sitio-fondo) 99%, transparent),color-mix(in srgb, var(--sitio-fondo) 87%, transparent)),var(--syt-orbit-dark);
  background-size: cover;
  background-position: center;
}

.conditions-stage h2, .conditions-stage h3, .faq-section h2, .faq-section h3, .section.soft h2, .section.soft h3{
  color: var(--sitio-tinta-1);
}

.conditions-stage p, .faq-section p, .section.soft p{
  color: var(--sitio-tinta-1);
}

.conditions-stage .tag, .faq-section .tag{
  color: var(--sitio-tinta-1);
  background: var(--syt-coral-deep);
  border-color: var(--syt-coral-deep);
}

.condition-deck{
  overflow: hidden;
  padding: clamp(22px,3vw,38px);
  border: 1px solid var(--syt-dark-line);
  border-radius: 26px;
  background: var(--sitio-fondo-alt);
  box-shadow: var(--syt-panel-shadow);
}

.condition-deck-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--sitio-linea);
  padding: 20px 24px;
  border-bottom-color: var(--syt-dark-line);
  background: var(--sitio-fondo-alt);
  color: var(--sitio-tinta-1);
}

.condition-deck-head>div{
  min-width: 0;
}

.condition-deck-head .tag{
  display: inline-flex;
  margin-bottom: 10px;
}

.condition-deck-head p{
  margin: 0;
  color: var(--sitio-tinta-1);
}

.condition-count{
  font: 800 .78rem/1 var(--font-mono);
  letter-spacing: .08em;
  flex: 0 0 auto;
  color: var(--sitio-tinta-3);
}

.condition-progress{
  display: flex;
  overflow-x: auto;
  padding: 14px 24px;
  border-bottom: 1px solid var(--sitio-linea);
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  gap: 8px;
}

.condition-tab{
  flex: 0 0 auto;
  min-width: 52px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 999px;
  font: 800 .72rem/1 var(--font-mono);
  scroll-snap-align: center;
  transition: .2s;
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 16%, transparent);
  background: var(--sitio-tinta-osc-1);
  color: var(--sitio-tinta-1);
}

.condition-tab.is-active{
  border-color: var(--syt-coral-deep);
  background: var(--syt-coral-deep);
  color: var(--sitio-tinta-1);
}

.condition-slide{
  display: grid;
  grid-template-columns: minmax(220px,.72fr) minmax(0,1.7fr);
  min-height: 390px;
  border: 1px solid var(--syt-dark-line);
  background: var(--sitio-tinta-osc-1);
  color: var(--sitio-tinta-1);
  box-shadow: none;
}

.condition-slide h2, .condition-slide p, .condition-slide-copy p{
  color: var(--sitio-tinta-1);
}

.condition-slide p, .condition-slide-copy p{
  color: var(--sitio-tinta-1);
}

.condition-slide-index span, .condition-key{
  color: var(--sitio-tinta-1);
  background: var(--syt-coral-deep);
  border-color: color-mix(in srgb, var(--sitio-tinta-1) 13%, transparent);
}

.condition-nav{
  border-color: color-mix(in srgb, var(--sitio-tinta-1) 24%, transparent);
  background: var(--sitio-tinta-osc-1);
  color: var(--sitio-tinta-1);
}

.condition-nav-next{
  background: var(--syt-coral-deep);
  border-color: var(--syt-coral-deep);
}

.faq-section{
  position: relative;
  isolation: isolate;
  padding-block: clamp(72px,9vw,116px);
}

.faq-section .wrap{
  max-width: 900px;
}

.faq-section details{
  margin: 0 0 12px;
  padding: 0;
  border: 1px solid var(--syt-dark-line);
  border-radius: 16px;
  background: var(--sitio-tinta-osc-1);
  background-image: none;
  box-shadow: none;
  color: var(--sitio-tinta-1);
}

.faq-section summary{
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 18px 52px 18px 20px;
  color: var(--sitio-tinta-1);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
}

.faq-section details summary::after{
  right: 20px;
  color: var(--syt-coral-vivo);
}

.faq-section details p{
  padding: 0 20px 20px;
  margin: 0;
  max-width: 68ch;
  color: var(--sitio-tinta-1);
}

.faq-section details p strong{
  color: var(--sitio-tinta-3);
  font-weight: 800;
}

.faq-section details[open]{
  border-color: color-mix(in srgb, var(--syt-coral) 68%, transparent);
  background: var(--sitio-tinta-osc-1);
  box-shadow: 0 18px 40px -34px color-mix(in srgb, var(--syt-coral) 48%, transparent);
}

.faq-section .faq-intro{
  max-width: 56ch;
  margin: 14px auto 34px;
  text-align: center;
}

footer.site-footer, footer.jack-footer, main+footer, body>footer{
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: clamp(52px,7vw,82px) 0 0;
  color: var(--sitio-tinta-1);
  background: var(--sitio-fondo);
  background-image: linear-gradient(112deg,color-mix(in srgb, var(--sitio-fondo) 99%, transparent),color-mix(in srgb, var(--sitio-fondo) 82%, transparent)),var(--syt-orbit-dark);
  background-size: cover;
  background-position: center;
  border-top: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 11%, transparent);
}

footer.site-footer::before, footer.jack-footer::before, main+footer::before, body>footer::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--syt-coral-deep);
  opacity: .9;
}

footer .footer-grid, footer .jack-footer-grid, footer .foot-grid{
  width: min(100%,var(--syt-layout));
  margin: 0 auto;
  padding: 0 clamp(24px,4vw,56px);
  display: grid;
  grid-template-columns: minmax(235px,1.65fr) repeat(3,minmax(130px,.8fr));
  gap: clamp(28px,4vw,64px);
}

footer .footer-grid>*, footer .jack-footer-grid>*, footer .foot-grid>*{
  min-width: 0;
}

footer .footer-brand, footer .jack-footer-brand, footer .brand{
  color: var(--sitio-tinta-1);
  font-size: 1.42rem;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.07em;
  text-transform: none;
  /* Logo y nombre lado a lado. Sin esto, `.footer-brand{display:block}` -que
     gana más abajo en el archivo por venir después con igual especificidad-
     apila el logo y el texto en vez de ponerlos en fila. */
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Antes ocultaba la imagen del logo en el pie por completo (`display:none`):
   tenía sentido mientras el pie solo mostraba el monograma "SYT" en texto y la
   imagen era un archivo roto. Ahora el logo real SÍ va en el pie -es donde más
   grande se puede mostrar-, así que se le da tamaño en vez de esconderlo. */
footer .footer-brand img, footer .brand img, footer .jack-footer-brand img{
  display: block;
  height: 56px;
  width: auto;
  aspect-ratio: 500 / 561;
  object-fit: contain;
}

/* El texto "Sol y Tierra" venía oculto para lectores de pantalla (sr-only):
   tenía sentido cuando el nombre completo era redundante con "SYT" a la
   vista. A 56px de alto el logo no se lee como texto -se necesitan sobre
   90px para eso-, así que en el pie SÍ conviene mostrar el nombre: es donde
   alguien confirma qué empresa es. En el header se deja oculto -ahí ya hay
   menos aire y el logo cumple solo como sello reconocible. */
footer .footer-brand span, footer .brand span{
  display: inline;
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  font-size: 1.05rem;
  letter-spacing: 0;
}

footer :is(h3, h4){
  margin: 0 0 15px;
  color: var(--sitio-tinta-1);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

footer p{
  max-width: 38ch;
  color: var(--sitio-tinta-1);
  font-size: .92rem;
  line-height: 1.64;
}

footer a:not(.brand){
  display: block;
  min-height: 34px;
  color: var(--sitio-tinta-1);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.42;
  text-decoration: none;
}

footer a:not(.brand):hover{
  color: var(--syt-coral-vivo);
}

footer .footer-bottom, footer .jack-footer-bottom, footer .foot-bottom{
  width: min(100%,var(--syt-layout));
  margin: clamp(36px,5vw,58px) auto 0;
  padding: 19px clamp(24px,4vw,56px);
  border-top: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 12%, transparent);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--sitio-tinta-1);
  font-size: .78rem;
}

html{
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  background: var(--solar-black);
  scroll-padding-top: calc(var(--syt-header-h,81px) + 18px);
}

main{
  isolation: isolate;
  overflow-x: clip;
}

.syt-skip-link{
  position: fixed;
  z-index: 10000;
  top: 8px;
  left: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--sitio-claro);
  color: var(--sitio-fondo);
  font-weight: 800;
  transform: translateY(-150%);
  transition: transform .2s var(--syt-v6-ease);
}

.syt-skip-link:focus{
  transform: none;
}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline: 3px solid var(--sitio-tinta-3);
  outline-offset: 3px;
}

.syt-lamina{
  position: relative;
  border: 1px solid var(--syt-v6-line);
  border-radius: 20px;
  background: var(--sitio-tinta-osc-1);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--syt-coral) 13%, transparent),0 28px 58px -44px color-mix(in srgb, var(--syt-coral-vivo) 72%, transparent);
}

.syt-lamina::before{
  content: "";
  position: absolute;
  inset: 7px -7px -7px 7px;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--syt-coral) 18%, transparent);
  border-radius: inherit;
  pointer-events: none;
}

.story-line{
  margin: 13px auto 0;
  max-width: 34ch;
  color: var(--sitio-tinta-3);
  font-size: clamp(1.08rem,2vw,1.28rem);
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
}

.section-light .story-line{
  color: var(--syt-coral-relleno);
}

.home-hero-intro .tag{
  display: inline-flex;
  margin-bottom: 18px;
}

.home-hero .hero-title{
  letter-spacing: -.052em;
  font-weight: 900;
  text-wrap: balance;
  text-shadow: 0 18px 48px color-mix(in srgb, var(--sitio-fondo) 66%, transparent);
  max-width: 12.4ch;
  line-height: .93;
  margin-bottom: clamp(16px,2.2vh,24px);
  margin: 0 0 18px;
  font-size: clamp(2.8rem,5.5vw,5.4rem);
}

.home-hero-story{
  max-width: 18ch;
  margin: 0 0 24px;
  color: var(--sitio-tinta-1);
  font-size: clamp(1.22rem,1.65vw,1.72rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.home-hero-detail>p{
  max-width: 47ch;
  margin: 0 0 18px;
  color: var(--sitio-tinta-1);
  font-size: 1.02rem;
  line-height: 1.55;
}

.home-hero-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.home-hero-actions .btn{
  min-height: 50px;
  padding: 13px 22px;
}

.conditions-stage strong, .condition-slide strong, .care-section strong, .terms-summary h3, .terms-summary p, .terms-summary strong{
  color: var(--sitio-tinta-1);
}

.condition-slide-index{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px;
  background: var(--sitio-fondo);
  color: var(--sitio-tinta-1);
  overflow: hidden;
}

/* El número de paso era `clamp(4.8rem,10vw,8.5rem)` — hasta 136px — dentro de
   un bloque coral de casi 400px de ancho. Ocupaba más que el contenido que
   numeraba. La numeración SÍ corresponde aquí (Precio → Reserva → Tallaje…
   es una secuencia real), pero un marcador de orden se lee de reojo: no
   compite con el título. Pasa a escala de ficha, como en las referencias. */
.condition-slide-index span{
  font: 900 clamp(1.5rem,2.6vw,2.1rem)/1 var(--font-mono);
  letter-spacing: -.04em;
  color: var(--sitio-tinta-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: .38em .62em;
  border-radius: 14px;
  line-height: .82;
}

/* Mientras el aviso está visible reserva su espacio al pie de la página. Sin
   esto tapaba contenido en 7 páginas a 375px: en condiciones.html cubría las
   etiquetas "Precio", "Reserva", "Tallaje" y "Transporte". El aviso se elimina
   del DOM al aceptarlo, así que `:has()` retira el colchón solo. */
body:has(.syt-privacy-notice){
  padding-bottom: 190px;
}

@media (min-width: 769px){
  body:has(.syt-privacy-notice){
    padding-bottom: 140px;
  }
}

.syt-privacy-notice{
  position: fixed;
  z-index: 9000;
  left: clamp(14px,3vw,34px);
  bottom: clamp(14px,3vw,30px);
  width: min(560px,calc(100vw - 28px));
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 18%, transparent);
  border-radius: 18px;
  background: var(--sitio-fondo-alt);
  color: var(--sitio-tinta-1);
  box-shadow: 0 26px 70px -34px color-mix(in srgb, var(--sitio-fondo) 90%, transparent);
  transition: opacity .22s ease,transform .22s var(--syt-v6-ease);
}

.syt-privacy-notice.is-closing{
  opacity: 0;
  transform: translateY(12px);
}

body:has(.site-header .mobile-menu.open) .syt-privacy-notice{
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.syt-privacy-notice strong{
  display: block;
  margin-bottom: 4px;
  color: var(--sitio-tinta-1);
  font-size: 1rem;
}

.syt-privacy-notice p{
  margin: 0;
  color: var(--sitio-tinta-1);
  font-size: .86rem;
  line-height: 1.42;
}

.syt-privacy-actions{
  display: flex;
  align-items: center;
  gap: 12px;
}

.syt-privacy-actions a{
  color: var(--sitio-tinta-3);
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}

.syt-privacy-actions button{
  min-width: 90px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--syt-v6-coral);
  border-radius: 11px;
  background: var(--syt-v6-coral);
  color: var(--sitio-tinta-1);
  font: 800 .85rem/1 var(--font-body);
  cursor: pointer;
}

.syt-motion-item{
  opacity: 0;
  transform: translate3d(0,10px,0);
  transition: opacity .36s var(--syt-v6-ease),transform .36s var(--syt-v6-ease);
}

.syt-motion-item.is-visible{
  opacity: 1;
  transform: none;
}

.home-hero-intro{
  animation: syt-enter-up .44s var(--syt-v6-ease) both;
}

.home-hero-media{
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
  animation: syt-enter-media .5s .08s var(--syt-v6-ease) both;
}

.home-hero-detail{
  max-width: 570px;
  padding: 20px 22px;
  animation: syt-enter-up .44s .15s var(--syt-v6-ease) both;
}

.home-hero::before, .site-header .nav-actions .btn-primary, .home-hero .btn-primary{
  animation-iteration-count: 1;
}

:where(.section-dark,.card-dark,.hero-premium,.impact-card,.syt-lamina){
  color: var(--syt-v7-copy-light);
}

:where(.section-dark,.card-dark,.hero-premium,.impact-card,.syt-lamina) :where(h1,h2,h3,h4,strong,b){
  color: var(--sitio-tinta-1);
}

:where(.section-dark,.card-dark,.hero-premium,.impact-card,.syt-lamina) :where(p,li){
  color: var(--syt-v7-copy-light);
}

:where(.section-light,.soft,.record-card,.val-card,.val-total){
  color: var(--syt-v7-copy-dark);
}

:where(.section-light,.soft,.record-card,.val-card,.val-total) :where(h1,h2,h3,h4,strong,b){
  color: var(--sitio-tinta-osc-1);
}

:where(.section-light,.soft,.record-card,.val-card,.val-total) :where(p,li){
  color: var(--sitio-tinta-osc-2);
}

/* ===========================================================================
   CONTRATO DE SUPERFICIE OSCURA
   ---------------------------------------------------------------------------
   El bug que esto resuelve, medido con `scripts/qa_pixel.mjs` (muestreo del
   pixel real, no del CSS declarado): 183 de 219 fallas del sitio eran tinta
   OSCURA sobre fondo OSCURO.

   Causa: la tinta se decidía por NOMBRE DE CLASE y el fondo por otra regla.
   `:where(.section-light,…){color:oscuro}` pinta la tinta oscura, mientras
   `main>.section-light:first-child` pinta ese mismo bloque de negro. La clase
   dice "light" y el render es dark: texto invisible.

   La regla correcta es que la tinta siga a la SUPERFICIE PINTADA, no al
   nombre. Aquí se declara una sola vez, para todos los contenedores que la
   hoja pinta oscuros, y cubre los elementos que fallaban: td, th, li, span,
   strong, b, dd, dt, además de títulos y párrafos.

   Sin marcas de prioridad forzada: gana por especificidad real sobre el
   `:where()`, que tiene especificidad cero.
   =========================================================================== */
main>.section-light:first-child:not(.home-hero),
.hero-premium, .contact-hero, .local-hero, .intranet-hero,
.conditions-hero, .guide-hero, .req-hero,
.section-dark, .care-section, .personal-section{
  color: var(--sitio-tinta-1);
}

main>.section-light:first-child:not(.home-hero) :is(h1,h2,h3,h4,h5,h6,strong,b,td,th,dt),
.hero-premium :is(h1,h2,h3,h4,h5,h6,strong,b,td,th,dt),
.contact-hero :is(h1,h2,h3,h4,h5,h6,strong,b,td,th,dt),
.local-hero :is(h1,h2,h3,h4,h5,h6,strong,b,td,th,dt),
.intranet-hero :is(h1,h2,h3,h4,h5,h6,strong,b,td,th,dt),
.conditions-hero :is(h1,h2,h3,h4,h5,h6,strong,b,td,th,dt),
.guide-hero :is(h1,h2,h3,h4,h5,h6,strong,b,td,th,dt),
.req-hero :is(h1,h2,h3,h4,h5,h6,strong,b,td,th,dt),
.section-dark :is(h1,h2,h3,h4,h5,h6,strong,b,td,th,dt),
.care-section :is(h1,h2,h3,h4,h5,h6,strong,b,td,th,dt),
.personal-section :is(h1,h2,h3,h4,h5,h6,strong,b,td,th,dt){
  color: var(--sitio-tinta-1);
}

main>.section-light:first-child:not(.home-hero) :is(p,li,dd,span:not(.tag):not(.dot)),
.hero-premium :is(p,li,dd,span:not(.tag):not(.dot)),
.contact-hero :is(p,li,dd,span:not(.tag):not(.dot)),
.local-hero :is(p,li,dd,span:not(.tag):not(.dot)),
.intranet-hero :is(p,li,dd,span:not(.tag):not(.dot)),
.conditions-hero :is(p,li,dd,span:not(.tag):not(.dot)),
.guide-hero :is(p,li,dd,span:not(.tag):not(.dot)),
.req-hero :is(p,li,dd,span:not(.tag):not(.dot)),
.section-dark :is(p,li,dd,span:not(.tag):not(.dot)),
.care-section :is(p,li,dd,span:not(.tag):not(.dot)),
.personal-section :is(p,li,dd,span:not(.tag):not(.dot)){
  color: var(--sitio-tinta-2);
}

/* Las tarjetas y tablas CLARAS que viven dentro de una sección oscura
   conservan su propia tinta oscura: ahí el fondo sí es claro. */
.section-dark :is(.card,.val-card,.val-table,.record-card,.calc,.consent-box):not(.card-dark) :is(h1,h2,h3,h4,strong,b,td,th,dt),
.hero-premium :is(.card,.val-card,.val-table,.record-card,.calc,.consent-box):not(.card-dark) :is(h1,h2,h3,h4,strong,b,td,th,dt){
  color: var(--sitio-tinta-osc-1);
}

.section-dark :is(.card,.val-card,.val-table,.record-card,.calc,.consent-box):not(.card-dark) :is(p,li,dd),
.hero-premium :is(.card,.val-card,.val-table,.record-card,.calc,.consent-box):not(.card-dark) :is(p,li,dd){
  color: var(--sitio-tinta-osc-2);
}

/* ---------------------------------------------------------------------------
   Casos sueltos que el muestreo de pixel destapó y que ninguna regla general
   cubría. Cada uno lleva el ratio medido ANTES, para que se note por qué está.
   --------------------------------------------------------------------------- */

/* REVERTIDO: forzar el fondo de `.personal-buy` a claro empeoró la medición
   de catálogo (19 → 23 fallas a 390px). La caja se pinta distinto según la
   sección que la contiene, así que fijarle un fondo desde aquí rompe los
   casos donde ya estaba bien. Queda anotado para resolverlo en el origen —
   averiguar qué regla decide su fondo— en vez de imponerlo desde afuera.

   Texto sobre fotografía: el fondo es una imagen de tono medio, así que
   ningún color de tinta garantiza contraste por sí solo. Se le da un velo
   oscuro propio al texto, que es lo que hacen las referencias premium: el
   texto trae su propio fondo, no depende de la foto. */
.personal-number, .part-card .part-index, .personal-choice :is(h4,p),
.personal-cord :is(h4,p){
  text-shadow: 0 1px 3px color-mix(in srgb, var(--sitio-fondo) 92%, transparent),
               0 0 14px color-mix(in srgb, var(--sitio-fondo) 78%, transparent);
}

/* ---------------------------------------------------------------------------
   Tarjetas que la hoja PINTA OSCURAS dentro de una sección "light"
   ---------------------------------------------------------------------------
   Las reglas `body:has(.hero-premium) …` y `body:has(.guide-hero) …` cambian
   el fondo de `.card` / `.record-card` a oscuro, pero el texto de adentro
   seguía recibiendo la tinta oscura de `:where(.section-light,…)`, porque la
   sección se sigue LLAMANDO "light".

   Medido: en guía de tallaje, `h3 "Femenino o masculino"` daba 1.03 y
   `li "Nombre de la estudiante"` 1.58. Otra vez: la tinta tiene que seguir a
   la superficie pintada, no al nombre de la clase.
   --------------------------------------------------------------------------- */
body:has(.hero-premium) .section:not(.hero-premium) :is(.card,.record-card) :is(h1,h2,h3,h4,h5,h6,strong,b,dt,th),
body:has(.guide-hero) .section:not(.section-dark) :is(.card,.record-card) :is(h1,h2,h3,h4,h5,h6,strong,b,dt,th){
  color: var(--sitio-tinta-1);
}

body:has(.hero-premium) .section:not(.hero-premium) :is(.card,.record-card) :is(p,li,dd,small),
body:has(.guide-hero) .section:not(.section-dark) :is(.card,.record-card) :is(p,li,dd,small){
  color: var(--sitio-tinta-2);
}

/* `.eyebrow` y `.tag` NO son lo mismo y no pueden compartir regla:
     · `.eyebrow` es texto suelto sobre el fondo de la sección → va naranjo
     · `.tag` es una píldora con RELLENO naranjo → su texto va NEGRO
   Meterlos juntos fue un error propio: pintar el `.tag` de naranjo lo dejó
   naranjo sobre naranjo (1.75) y sumó 6 fallas en guía de tallaje. */

/* El naranjo como TEXTO sobre negro da 6.90, de sobra para AA. */
.section-dark .eyebrow, .hero-premium .eyebrow,
.guide-hero .eyebrow, .section.soft .eyebrow,
body:has(.hero-premium) main>.section:not(.hero-premium) .eyebrow,
body:has(.guide-hero) main>.section:not(.section-dark) .eyebrow{
  color: var(--syt-coral-vivo);
}

/* La píldora lleva su relleno naranjo. La TINTA la fija el bloque de paleta
   del final del archivo (negro sobre naranjo, 6.90); aquí solo el relleno. */
.tag{
  background: var(--syt-coral-relleno);
}

/* `.help-box` de solicitud: caja CLARA que recibía la tinta para fondo oscuro
   (1.5) y, en los `strong`, un token de SUPERFICIE (`--sitio-claro-alt`) usado
   como tinta (1.1). Un fondo nunca es una tinta. */
.help-box :is(p,li,dd,small,span){
  color: var(--sitio-tinta-osc-2);
}

.help-box :is(strong,b,h1,h2,h3,h4){
  color: var(--sitio-tinta-osc-1);
}

/* El enlace de salto es invisible hasta que recibe foco; al enfocarse tiene
   que LEERSE. Antes era negro sobre negro también cuando aparecía. */
.syt-skip-link:focus, .syt-skip-link:focus-visible{
  color: var(--sitio-tinta-1);
  background: var(--sitio-fondo);
  outline: 3px solid var(--syt-coral-vivo);
}

.section-dark :where(.tag,.eyebrow), .hero-premium :where(.tag,.eyebrow){
  color: var(--sitio-tinta-2);
}

.section-light :where(.tag,.eyebrow), .soft :where(.tag,.eyebrow){
  color: var(--syt-coral-texto);
}

.val-grid{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
}

.val-card{
  overflow: hidden;
  border: 1px solid var(--syt-v7-line-light);
  background: var(--sitio-claro);
  color: var(--sitio-tinta-osc-1);
  box-shadow: 0 18px 48px -40px color-mix(in srgb, var(--sitio-tinta-osc-1) 60%, transparent);
}

.val-card summary{
  min-height: 112px;
  padding: 22px;
  background: var(--sitio-claro);
  color: var(--sitio-tinta-osc-1);
}

.val-card summary :where(.vc-title,.vc-meta,.vc-meta b){
  color: var(--sitio-tinta-osc-1);
}

.val-card .vc-tag{
  color: var(--syt-coral-texto);
}

.val-card .vc-toggle{
  border-color: var(--sitio-tinta-2);
  background: var(--sitio-claro-alt);
  color: var(--sitio-tinta-osc-1);
}

.val-card .val-body{
  padding: 0 22px 22px;
  background: var(--sitio-claro);
}

.val-card .val-table{
  overflow: hidden;
  border: 1px solid var(--sitio-linea);
  border-radius: 14px;
  background: var(--sitio-claro);
}

.val-card .val-table :where(th,td){
  color: var(--sitio-linea-osc);
}

/* El total SÍ pinta su propio fondo claro, así que su tinta va oscura.
   `.val-intro` en cambio es transparente sobre la sección oscura: por eso una
   está en la lista de superficies claras y la otra no. La diferencia no es el
   nombre, es si el bloque pinta o no su propio fondo. */
.val-card .val-total{
  background: var(--sitio-claro-alt);
}

.val-total :is(.vt-label,.vt-val,span,b,strong){
  color: var(--sitio-tinta-osc-1);
}

/* Usaba `--sitio-linea-osc` (#262626), que es un color de LÍNEA, como color de
   TEXTO sobre una sección oscura: 1.25 de contraste. Un token fuera de su rol.
   La tinta secundaria sobre oscuro es `--sitio-tinta-2` → 13.40. */
body:has(.hero-premium) main>.section .val-intro p, body:has(.hero-premium) main>.section .val-intro b, body:has(.hero-premium) main>.section .val-note p, body:has(.hero-premium) main>.section .val-note b{
  color: var(--sitio-tinta-2);
}

.impact-copy p, .impact-list span{
  color: var(--sitio-linea);
}

.val-tabs{
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--sitio-tinta-2);
  border-radius: 16px;
  background: var(--sitio-claro-alt);
}

.val-tabs button{
  min-height: 48px;
  color: var(--sitio-tinta-osc-2);
}

.val-tabs button.active{
  background: var(--sitio-tinta-osc-1);
  color: var(--sitio-tinta-1);
}

.record-card{
  border-color: var(--syt-v7-line-light);
  background: var(--sitio-claro);
}

.section .record-card h3, .section .record-card p, .section .record-card li{
  color: var(--sitio-linea-osc);
}

.section-light .card:not(.card-dark) p, .section-light .card:not(.card-dark) li, .soft .card:not(.card-dark) p, .soft .card:not(.card-dark) li{
  color: var(--sitio-tinta-osc-2);
}

.size-chip{
  color: var(--sitio-tinta-1);
}

.site-header .mobile-menu .mobile-nav-main{
  display: grid;
  gap: 4px;
}

.site-header .mobile-menu .mobile-nav-primary{
  position: relative;
  line-height: 1.2;
  min-height: 50px;
  padding: 12px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 10%, transparent);
  color: var(--sitio-tinta-1);
  font-size: 1.03rem;
  font-weight: 800;
}

.site-header .mobile-menu .mobile-nav-primary::before{
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 5px;
  height: 20px;
  border-radius: 6px;
  background: var(--syt-v6-coral);
  transform: translateY(-50%);
  display: none;
}

.site-header .mobile-menu .mobile-nav-cta{
  padding: 13px 18px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin: 10px 0 8px;
  border: 1px solid var(--syt-coral-vivo);
  border-radius: 14px;
  background: var(--syt-v7-coral);
  color: var(--sitio-tinta-1);
  font-weight: 850;
}

.mobile-nav-guides{
  margin: 8px 0;
  border: 1px solid var(--syt-v7-line-dark);
  border-radius: 14px;
  background: var(--sitio-tinta-osc-1);
  box-shadow: none;
  overflow: hidden;
}

.mobile-nav-guides summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 12px 14px;
  color: var(--sitio-tinta-1);
  font-size: .96rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.mobile-nav-guides summary::-webkit-details-marker{
  display: none;
}

.mobile-nav-guides summary::after{
  content: "+";
  font-size: 1.25rem;
  transition: transform .2s ease;
}

.mobile-nav-guides[open] summary::after{
  transform: rotate(45deg);
}

.mobile-nav-guides-list{
  display: grid;
  padding: 0 14px 10px;
}

.mobile-nav-guides-list a{
  min-height: 44px;
  padding: 11px 0;
  border-top: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 9%, transparent);
  color: var(--sitio-tinta-2);
  font-size: .91rem;
  font-weight: 650;
}

.mobile-nav-client{
  display: grid;
  gap: 4px;
  margin-top: 11px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 14%, transparent);
}

.mobile-nav-client>span{
  padding: 0 4px 6px;
  color: var(--sitio-tinta-2);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mobile-nav-portal, .mobile-nav-contact{
  display: flex;
  align-items: center;
  min-height: 45px;
  padding: 9px 4px;
  color: var(--sitio-tinta-1);
  font-size: .93rem;
  font-weight: 750;
}

.mobile-nav-contact{
  color: var(--sitio-tinta-2);
  font-weight: 650;
}

.site-header .mobile-menu a[aria-current="page"]:not(.mobile-nav-cta){
  color: var(--sitio-tinta-2);
}

.site-header .nav-actions>.btn-primary{
  background: var(--syt-coral-relleno);
  color: var(--sitio-tinta-1);
  border-color: var(--syt-coral-vivo);
}

.stepper-pill:not(.current) .sp-num, .req, .calc .v, .sum-card .v{
  color: var(--error-texto);
}

.stepper-pill.current .sp-num, .btn-coral{
  background: var(--error-texto);
  color: var(--sitio-tinta-1);
}

body{
  font-family: var(--font-body);
  line-height: 1.65;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -.008em;
  background: var(--syt-paper);
  color: var(--syt-ink);
  touch-action: pan-y pinch-zoom;
}

.syt-zoom-overlay:not(.on){
  display: none;
}

.sol-root{
  position: fixed;
  right: 24px;
  bottom: 24px;
  font-family: var(--font-body);
  color: var(--text-dark);
  transition: opacity .2s,transform .2s;
  z-index: 9100;
}

.fab{
  display: none;
}

.tag, .home-hero .tag, .home-hero-intro .tag, .section-dark .tag, .section-light .tag, .hero-premium .tag, .soft .tag{
  background: linear-gradient(135deg,var(--syt-v8-coral-aa),var(--syt-v8-coral-aa-deep));
  border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 22%, transparent);
  color: var(--sitio-tinta-1);
}

.home-hero .btn-primary{
  border: 1px solid var(--sitio-tinta-1);
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--syt-coral-vivo) 90%, transparent);
  background: linear-gradient(135deg,var(--syt-v8-coral-aa),var(--syt-v8-coral-aa-deep));
  border-color: color-mix(in srgb, var(--sitio-tinta-1) 20%, transparent);
  color: var(--sitio-tinta-1);
}

.section-light .price, .home-suits .price, .traje-card .price{
  color: var(--syt-coral-relleno);
}

.traje-card .btn-primary, .home-suits .btn-primary{
  background: linear-gradient(135deg,var(--syt-v8-coral-aa),var(--syt-v8-coral-aa-deep));
  border-color: color-mix(in srgb, var(--sitio-tinta-1) 20%, transparent);
  color: var(--sitio-tinta-1);
}

:root{
  --black: var(--sitio-fondo);
  --white: var(--sitio-tinta-1);
  --green: var(--ok-relleno);
  --border-dark: color-mix(in srgb, var(--sitio-tinta-1) 8%, transparent);
  --shadow-card: 0 2px 12px color-mix(in srgb, var(--sitio-fondo) 4%, transparent);
  --shadow-photo: 0 16px 48px color-mix(in srgb, var(--sitio-fondo) 18%, transparent);
  --border-light: var(--sitio-tinta-2);
  --text-dark: var(--sitio-fondo-alt);
  --text-muted: var(--sitio-tinta-osc-2);
  --bg2: var(--sitio-tinta-1);
  --surface: var(--sitio-tinta-1);
  --focus: 0 0 0 4px color-mix(in srgb, var(--syt-coral-vivo) 24%, transparent);
  --grad: linear-gradient(125deg,var(--sitio-tinta-3) 0%,var(--sitio-tinta-osc-3) 16%,var(--syt-coral-vivo) 43%,var(--syt-coral-vivo) 64%,var(--syt-coral-vivo) 83%,var(--syt-coral-vivo) 100%);
  --syt-surface-dark: url('../images/surfaces/syt-lamina-dark-v2.webp');
  --syt-surface-light: url('../images/surfaces/syt-lamina-light-v2.webp');
  --syt-black: var(--sitio-fondo);
  --syt-white: var(--sitio-tinta-1);
  --syt-berry: var(--syt-coral);
  --syt-muted: var(--sitio-tinta-osc-3);
  --syt-line-light: color-mix(in srgb, var(--sitio-fondo) 12%, transparent);
  --syt-line-dark: color-mix(in srgb, var(--sitio-tinta-1) 14%, transparent);
  --syt-radius-sm: 12px;
  --syt-radius-md: 18px;
  --syt-radius-lg: 24px;
  --syt-radius-xl: 32px;
  --syt-shadow-card: 0 1px 2px color-mix(in srgb, var(--sitio-fondo) 5%, transparent),
    0 18px 48px -30px color-mix(in srgb, var(--sitio-fondo) 36%, transparent);
  --syt-shadow-card-hover: 0 2px 4px color-mix(in srgb, var(--sitio-fondo) 6%, transparent),
    0 24px 58px -28px color-mix(in srgb, var(--syt-coral-vivo) 26%, transparent);
  --syt-shadow-dark: 0 20px 60px -30px color-mix(in srgb, var(--syt-coral) 32%, transparent);
  --syt-section-space: clamp(72px, 9vw, 118px);
  --syt-ease: cubic-bezier(.22, 1, .36, 1);
  --solar-black: var(--sitio-fondo);
  --solar-ink: var(--sitio-fondo-alt);
  --solar-white: var(--sitio-tinta-1);
  --solar-coral: var(--syt-coral-vivo);
  --solar-orange: var(--syt-coral-vivo);
  --solar-green: var(--ok-relleno);
  --solar-line: color-mix(in srgb, var(--sitio-fondo) 13%, transparent);
  --solar-line-dark: color-mix(in srgb, var(--sitio-tinta-1) 16%, transparent);
  --solar-shadow: 0 28px 70px -45px color-mix(in srgb, var(--sitio-fondo) 55%, transparent);
  --solar-shadow-hot: 10px 10px 0 color-mix(in srgb, var(--syt-coral-vivo) 9%, transparent),0 30px 72px -44px color-mix(in srgb, var(--syt-coral-vivo) 42%, transparent);
  --solar-dark-image: url('../images/surfaces/solar-dark-v3.webp');
  --solar-light-image: url('../images/surfaces/solar-light-v3.webp');
  --solar-feather-dark: url('../images/surfaces/solar-feather-dark.webp');
  --solar-feather-light: url('../images/surfaces/solar-feather-light.webp');
  --solar-lamina-dark: url('../images/surfaces/solar-lamina-dark.webp');
  --solar-lamina-light: url('../images/surfaces/solar-lamina-light.webp');
  --solar-eclipse-dark: url('../images/surfaces/solar-eclipse-dark.webp');
  --solar-ember-dark: url('../images/surfaces/solar-ember-dark.webp');
  --solar-contour-light: url('../images/surfaces/solar-contour-light.webp');
  --solar-corridor-dark: url('../images/surfaces/solar-corridor-dark.webp');
  /* League Spartan, sellada: sitio y panel, no se mezcla.

     Esta semana se probó Cabinet Grotesk + Manrope + JetBrains Mono en las tres
     variables. Carlitos: "si me encanta esa league spartan" — vuelve a ser la
     única fuente del proyecto. Las tres variables apuntan a la misma familia,
     como estaba antes de esta semana. */
  --font-display: 'League Spartan',Arial,sans-serif;
  --font-body: 'League Spartan',Arial,sans-serif;
  --font-mono: 'League Spartan',Arial,sans-serif;
  --font-editorial: 'Libre Baskerville', Georgia, serif;

  /* ===========================================================================
     LA PALETA SALE DEL LOGO — un tono por pestaña, no los seis a la vez
     ===========================================================================
     El logo de Sol y Tierra es un atardecer entero: lima, oro, naranjo y carmín
     sobre la silueta de Sudamérica. Medidos en el archivo original:

       #d20440  343°  22,5%   carmín        el que más pesa
       #cce211   66°  18,4%   lima
       #eb890b   34°  14,2%   naranjo dorado
       #e5af0d   45°   7,7%   ámbar
       #e86908   26°   7,5%   naranjo
       #ec2234  355°   4,9%   rojo

     Usarlos todos juntos satura: son seis colores fuertes peleando. El sistema
     es otro: **el naranjo es el color de la marca** y no se mueve —los botones
     de acción, el menú, el logo—, y **cada pestaña toma UN tono del logo como
     firma**, con su propia escala de claros y oscuros. Así el sitio cambia de
     temperatura al navegar sin que ninguna pantalla quede recargada.

     Cada escala se generó desde el color del logo manteniendo su tono y
     moviendo luminosidad y saturación. El paso donde cada una empieza a servir
     para TEXTO sobre blanco está medido y anotado: por debajo de eso, el tono
     solo va en fondos y filetes.
     ======================================================================== */
  --naranjo-50:#fbf7f2; --naranjo-100:#f8ecde; --naranjo-200:#f6dab7;
  --naranjo-300:#f6c483; --naranjo-400:#f6a946; --naranjo-500:#f49315;
  --naranjo-600:#cb770c; --naranjo-700:#a2600c; --naranjo-800:#7a490b;
  --naranjo-900:#57350a;            /* texto: desde 700 (5,0:1) */

  --carmin-50:#fbf1f4; --carmin-100:#f8dde5; --carmin-200:#f8b5c8;
  --carmin-300:#f980a3; --carmin-400:#fb4177; --carmin-500:#fa0f53;
  --carmin-600:#d00641; --carmin-700:#a60736; --carmin-800:#7d082a;
  --carmin-900:#59071f;             /* texto: desde 600 (5,5:1) */

  --oro-50:#faf8f2; --oro-100:#f7f1de; --oro-200:#f5e6b7;
  --oro-300:#f5d984; --oro-400:#f5c948; --oro-500:#f2bb17;
  --oro-600:#c99a0d; --oro-700:#a07b0d; --oro-800:#795e0c;
  --oro-900:#57430a;                /* texto: desde 800 (6,1:1) */

  --lima-50:#f9faf2; --lima-100:#f4f7de; --lima-200:#eef4b8;
  --lima-300:#e7f387; --lima-400:#e0f14b; --lima-500:#d8ee1b;
  --lima-600:#b2c511; --lima-700:#8f9e10; --lima-800:#6c770e;
  --lima-900:#4d550c;               /* texto: desde 800 (4,9:1) */

  /* El tono de la pestaña. Por defecto, el de la marca. Cada página lo cambia
     con `data-tono` en el <body>, y todo lo que use `--acento-*` la sigue. */
  --acento-50: var(--naranjo-50);   --acento-100: var(--naranjo-100);
  --acento-200: var(--naranjo-200); --acento-300: var(--naranjo-300);
  --acento-400: var(--naranjo-400); --acento-500: var(--naranjo-500);
  --acento-600: var(--naranjo-600); --acento-700: var(--naranjo-700);
  --acento-800: var(--naranjo-800); --acento-900: var(--naranjo-900);
  --acento-legible: var(--naranjo-700);   /* el primero que pasa 4,5:1 */

  /* El fondo profundo de las referencias: casi negro, no negro puro.
     El negro puro con brillo encima se ve plano; un negro con una gota del
     tono de la pestaña hace que el resplandor parezca salir de adentro. */
  --noche: #0b0a0c;
  --coral: var(--syt-coral-vivo);
  --pink: var(--syt-coral-vivo);
  --red: var(--syt-coral-vivo);
  --radius-card: 24px;
  --syt-layout: 1320px;
  --syt-ink: var(--sitio-fondo);
  --syt-paper: var(--sitio-tinta-1);
  --syt-coral: var(--syt-coral-vivo);
  --syt-orange: var(--syt-coral-vivo);
  --syt-green: var(--ok-relleno);
  --syt-line: color-mix(in srgb, var(--sitio-fondo) 14%, transparent);
  --syt-shadow: 0 28px 65px -46px color-mix(in srgb, var(--sitio-fondo) 45%, transparent);
  --syt-shadow-hot: 10px 10px 0 color-mix(in srgb, var(--syt-coral-vivo) 8%, transparent),0 34px 82px -48px color-mix(in srgb, var(--syt-coral-vivo) 48%, transparent);
  --syt-orbit-dark: url('../images/surfaces/syt-orbit-lamina-dark-v1.webp');
  --syt-orbit-light: url('../images/surfaces/syt-orbit-lamina-light-v1.webp');
  --syt-feather-ember: url('../images/surfaces/syt-feather-ember-v1.webp');
  --syt-header-h: 81px;
  --syt-coral-deep: var(--syt-coral);
  --syt-coral-ink: var(--syt-coral-texto);
  --syt-coral-soft: color-mix(in srgb, var(--syt-coral) 16%, transparent);
  --syt-dark: var(--sitio-fondo);
  --syt-dark-card: var(--sitio-tinta-osc-1);
  --syt-dark-line: color-mix(in srgb, var(--sitio-tinta-1) 14%, transparent);
  --syt-dark-copy: color-mix(in srgb, var(--sitio-tinta-1) 78%, transparent);
  --syt-panel-shadow: 0 26px 70px -46px color-mix(in srgb, var(--sitio-fondo) 90%, transparent),0 0 0 1px color-mix(in srgb, var(--sitio-tinta-1) 4%, transparent);
  --syt-v6-coral: var(--syt-coral);
  --syt-v6-coral-bright: var(--syt-coral-vivo);
  --syt-v6-ink: var(--sitio-fondo);
  --syt-v6-panel: var(--sitio-tinta-osc-1);
  --syt-v6-line: color-mix(in srgb, var(--sitio-tinta-1) 15%, transparent);
  --syt-v6-ease: cubic-bezier(.22,1,.36,1);
  --syt-v7-coral: var(--syt-coral);
  --syt-v7-coral-dark: var(--syt-coral-relleno);
  --syt-v7-coral-soft: var(--sitio-tinta-3);
  --syt-v7-black: var(--sitio-fondo);
  --syt-v7-panel: var(--sitio-tinta-osc-1);
  --syt-v7-white: var(--sitio-tinta-1);
  --syt-v7-copy-dark: var(--sitio-linea-osc);
  --syt-v7-copy-light: var(--sitio-linea);
  --syt-v7-line-dark: color-mix(in srgb, var(--sitio-tinta-1) 16%, transparent);
  --syt-v7-line-light: var(--sitio-linea);
  --syt-v8-coral-aa: var(--syt-coral-relleno);
  --syt-v8-coral-aa-deep: var(--syt-coral-texto);
  --syt-v8-txt: var(--sitio-claro-alt);
  --syt-v8-txt-2: var(--sitio-tinta-2);
}

body li, body p, body dd, body .card li, body .card p, body .lista li, body .detalle li{
  color: var(--syt-v8-txt-2);
}

body h1, body h2, body h3, body h4, body strong, body b{
  color: var(--syt-v8-txt);
}

.tag, .badge, .pill, .chip{
  color: var(--sitio-tinta-1);
}

.tag, .badge{
  background-image: linear-gradient(135deg,var(--syt-v8-coral-aa),var(--syt-v8-coral-aa-deep));
}

.card, .panel, .box{
  color: var(--syt-v8-txt-2);
}

.card h1, .card h2, .card h3, .card h4, .panel h3, .box h3{
  color: var(--syt-v8-txt);
}

@keyframes solPulse{0%{opacity:.7;transform:scale(.82)}72%,100%{opacity:0;transform:scale(1.45)}}

@keyframes solDot{50%{transform:translateY(-4px)}}

@keyframes conditionIn{from{opacity:.25;transform:translateX(18px)}to{opacity:1;transform:none}}

@keyframes solar-drift{from{transform:translate3d(-1%,0,0) scale(1.02)}to{transform:translate3d(1%,1%,0) scale(1.055)}}

@keyframes solar-glow{0%,100%{box-shadow:0 0 0 1px color-mix(in srgb, var(--syt-coral-vivo) 18%, transparent),0 18px 42px -20px color-mix(in srgb, var(--syt-coral-vivo) 66%, transparent)}50%{box-shadow:0 0 0 1px color-mix(in srgb, var(--syt-coral-vivo) 42%, transparent),0 22px 52px -16px color-mix(in srgb, var(--syt-coral-vivo) 90%, transparent)}}

@keyframes syt-enter-up{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}

@keyframes syt-enter-media{from{opacity:0;transform:translate3d(0,8px,0) scale(.985)}to{opacity:1;transform:none}}

}



/* =========================================================================
   FASE 2 · Contrato semántico de superficies del sitio
   Repara por patrón las colisiones medidas, usando exclusivamente tokens.
   ========================================================================= */

html, body{
  margin:0;
  max-width:100%;
}

.site-header .mobile-menu{
  display:none;
}

body[data-page="index"] .home-hero{
  background-color:var(--sitio-fondo);
}

.mobile-nav-cta,
.syt-privacy-actions button,
.btn-primary,
.btn-coral,
.condition-tab.is-active,
.condition-key,
.condition-nav-next,
.btn-login,
body[data-page="valorizacion"] .val-tabs button.active{
  background:var(--syt-coral-relleno);
  color:var(--sitio-tinta-1);
}

.mobile-nav-cta *,
.syt-privacy-actions button *,
.btn-primary *,
.btn-coral *,
.condition-tab.is-active *,
.condition-key *,
.condition-nav-next *,
.btn-login *{
  color:inherit;
}

body[data-page="valorizacion"] .val-table{
  background:var(--sitio-claro);
  color:var(--sitio-tinta-osc-1);
}
body[data-page="valorizacion"] .val-table th{
  background:var(--sitio-fondo);
  color:var(--sitio-tinta-1);
}
body[data-page="valorizacion"] .val-table td{
  background:var(--sitio-claro);
  color:var(--sitio-tinta-osc-2);
}
body[data-page="valorizacion"] .val-table td:last-child{
  color:var(--sitio-tinta-osc-1);
}
body[data-page="valorizacion"] .vc-tag,
body[data-page="valorizacion"] .par-note{
  color:var(--syt-coral-texto);
}
body[data-page="valorizacion"] .impact-card{
  background:var(--sitio-fondo-alt);
  color:var(--sitio-tinta-2);
}
body[data-page="valorizacion"] .impact-card h2,
body[data-page="valorizacion"] .impact-card strong{
  color:var(--sitio-tinta-1);
}
body[data-page="valorizacion"] .impact-card p,
body[data-page="valorizacion"] .impact-card .impact-list span{
  color:var(--sitio-tinta-2);
}
body[data-page="valorizacion"] .impact-card .eyebrow{
  color:var(--syt-coral-vivo);
}

body[data-page="catalogo"] table{
  background:var(--sitio-claro);
  color:var(--sitio-tinta-osc-1);
}
body[data-page="catalogo"] table th{
  background:var(--sitio-fondo);
  color:var(--sitio-tinta-1);
}
body[data-page="catalogo"] table td,
body[data-page="catalogo"] .personal-choice,
body[data-page="catalogo"] .personal-cord,
body[data-page="catalogo"] .personal-specs strong{
  background:var(--sitio-claro);
  color:var(--sitio-tinta-osc-2);
}
body[data-page="catalogo"] table td:last-child,
body[data-page="catalogo"] .personal-number,
body[data-page="catalogo"] .part-copy span{
  color:var(--syt-coral-texto);
}
body[data-page="catalogo"] .personal-number{
  background:var(--syt-coral-relleno);
  color:var(--sitio-tinta-1);
}
body[data-page="catalogo"] .personal-choice h3,
body[data-page="catalogo"] .personal-cord h3,
body[data-page="catalogo"] .personal-choice strong,
body[data-page="catalogo"] .personal-cord strong{
  color:var(--sitio-tinta-osc-1);
}
body[data-page="catalogo"] .personal-choice p,
body[data-page="catalogo"] .personal-cord p,
body[data-page="catalogo"] .pin-note,
body[data-page="catalogo"] .cord-lead,
body[data-page="catalogo"] .personal-kicker{
  color:var(--sitio-tinta-osc-2);
}
body[data-page="catalogo"] .pin-option p,
body[data-page="catalogo"] .cord-fit-grid p{
  color:var(--sitio-tinta-2);
}
body[data-page="catalogo"] .pin-option h4,
body[data-page="catalogo"] .cord-fit-grid :is(h3, h4){
  color:var(--sitio-tinta-1);
}

body[data-page="anatomia-traje-tobas"]{
  --bg2:var(--sitio-claro);
  --line:var(--sitio-linea);
  --title:var(--sitio-tinta-osc-1);
  --text:var(--sitio-tinta-osc-2);
  --ok:var(--ok-texto);
}
body[data-page="anatomia-traje-tobas"] table,
body[data-page="guia-visual-traje"] table{
  background:var(--sitio-claro);
  color:var(--sitio-tinta-osc-1);
}
body[data-page="anatomia-traje-tobas"] table th,
body[data-page="guia-visual-traje"] table th,
body[data-page="anatomia-traje-tobas"] .tag,
body[data-page="guia-visual-traje"] .tag{
  background:var(--syt-coral-relleno);
  color:var(--sitio-tinta-1);
}
body[data-page="anatomia-traje-tobas"] table td,
body[data-page="guia-visual-traje"] table td{
  color:var(--sitio-tinta-osc-2);
}

body[data-page="contacto"] .contact-card{
  background:var(--sitio-claro);
  color:var(--sitio-tinta-osc-2);
}
body[data-page="contacto"] .contact-next{
  background:var(--sitio-claro-alt);
  color:var(--sitio-tinta-osc-2);
}
body[data-page="contacto"] .contact-card h2,
body[data-page="contacto"] .contact-card b,
body[data-page="contacto"] .contact-next h2,
body[data-page="contacto"] .contact-next b{
  color:var(--sitio-tinta-osc-1);
}
body[data-page="contacto"] .contact-card p,
body[data-page="contacto"] .contact-card li,
body[data-page="contacto"] .contact-next p,
body[data-page="contacto"] .contact-next li,
body[data-page="contacto"] .contact-next span{
  color:var(--sitio-tinta-osc-2);
}
body[data-page="contacto"] .num{
  color:var(--syt-coral-texto);
}

body[data-page^="comunas-"] .local-proof article,
body[data-page^="comunas-"] .local-step{
  background:var(--sitio-claro);
  color:var(--sitio-tinta-osc-2);
}
body[data-page^="comunas-"] .local-proof b,
body[data-page^="comunas-"] .local-step h3{
  color:var(--sitio-tinta-osc-1);
}
body[data-page^="comunas-"] .local-proof span,
body[data-page^="comunas-"] .local-step p{
  color:var(--sitio-tinta-osc-2);
}
body[data-page^="comunas-"] .local-step .n{
  color:var(--syt-coral-texto);
}
body[data-page^="comunas-"] .local-head h2,
body[data-page^="comunas-"] .local-faq summary{
  color:var(--sitio-tinta-osc-1);
}
body[data-page^="comunas-"] .local-head p,
body[data-page^="comunas-"] .local-faq details p{
  color:var(--sitio-tinta-osc-2);
}
body[data-page^="comunas-"] .local-note{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:var(--e-6);
  padding:clamp(28px,5vw,52px);
  border-radius:var(--r-4);
  background:var(--sitio-fondo-alt);
  color:var(--sitio-tinta-1);
}
body[data-page^="comunas-"] .local-note h2{
  color:var(--sitio-tinta-1);
  font:900 clamp(1.8rem,4vw,3.6rem)/1 var(--font-display);
  letter-spacing:-.04em;
}
body[data-page^="comunas-"] .local-note p,
body[data-page^="comunas-"] .local-note li{
  color:var(--sitio-tinta-2);
}
body[data-page^="comunas-"] .local-note ul{
  display:grid;
  gap:var(--e-3);
  margin-top:var(--e-5);
  list-style:none;
}
body[data-page^="comunas-"] .local-note li{
  position:relative;
  padding-left:var(--e-5);
}
body[data-page^="comunas-"] .local-note li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--syt-coral-vivo);
  font-weight:900;
}

body[data-page="solicitud"] .form-shell,
body[data-page="solicitud"] .form-card,
body[data-page="solicitud"] .blk,
body[data-page="solicitud"] .step-panel{
  background:var(--sitio-claro);
  color:var(--sitio-tinta-osc-2);
}
body[data-page="solicitud"] .form-shell strong,
body[data-page="solicitud"] .form-card strong,
body[data-page="solicitud"] .blk strong,
body[data-page="solicitud"] .step-panel strong{
  color:var(--sitio-tinta-osc-1);
}
body[data-page="solicitud"] .form-shell h2,
body[data-page="solicitud"] .form-shell h3,
body[data-page="solicitud"] .form-shell h4,
body[data-page="solicitud"] .form-card h2,
body[data-page="solicitud"] .form-card h3,
body[data-page="solicitud"] .form-card h4,
body[data-page="solicitud"] .blk h2,
body[data-page="solicitud"] .blk h3,
body[data-page="solicitud"] .blk h4,
body[data-page="solicitud"] .step-panel h2,
body[data-page="solicitud"] .step-panel h3,
body[data-page="solicitud"] .step-panel h4{
  color:var(--sitio-tinta-osc-1);
}
body[data-page="solicitud"] .req-side h2,
body[data-page="solicitud"] .req-side h3,
body[data-page="solicitud"] .req-side h4{
  color:var(--sitio-tinta-osc-1);
}
body[data-page="solicitud"] .sum-legend{
  color:var(--sitio-tinta-osc-2);
}
body[data-page="solicitud"] .req,
body[data-page="solicitud"] .blk strong a{
  color:var(--syt-coral-texto);
}
body[data-page="solicitud"] .sp-num{
  background:var(--syt-coral-relleno);
  color:var(--sitio-tinta-1);
}
body[data-page="solicitud"] .crumbs span,
body[data-page="solicitud"] .summary-value .v,
body[data-page="solicitud"] .v{
  color:var(--syt-coral-texto);
}
body[data-page="solicitud"] .req-hero .lead strong,
body[data-page="solicitud"] .hero-premium .lead strong{
  color:var(--sitio-tinta-osc-1);
}

.syt-privacy-notice p{
  color:var(--sitio-tinta-2);
}

/* Estas reglas van FUERA de `@layer legacy`, así que le ganan a todo lo de
   la capa sin importar la especificidad. Daban por hecho que `.card` y
   `.record-card` dentro de una sección clara son claras — y se pintan
   OSCURAS (rgb(20,18,16)). Resultado medido: el h3 usaba exactamente el mismo
   color que el fondo de su tarjeta, ratio 1.03.
   La sección sí es clara y conserva su tinta oscura; las tarjetas de adentro
   son oscuras y llevan tinta clara. */
body[data-page="guia-tallaje"] .section-light{
  color:var(--sitio-tinta-osc-2);
}
body[data-page="guia-tallaje"] .section-light>.wrap>h2,
body[data-page="guia-tallaje"] .section-light>.wrap>h3,
body[data-page="guia-tallaje"] .section-light>h2,
body[data-page="guia-tallaje"] .section-light>h3{
  color:var(--sitio-tinta-osc-1);
}
body[data-page="guia-tallaje"] .section-light>.wrap>p,
body[data-page="guia-tallaje"] .section-light>.wrap>li,
body[data-page="guia-tallaje"] .section-light>p{
  color:var(--sitio-tinta-osc-2);
}

/* Las tarjetas oscuras de esta página: tinta clara. */
body[data-page="guia-tallaje"] .section-light :is(.card,.record-card),
body[data-page="guia-tallaje"] .section-light :is(.card,.record-card) :is(h1,h2,h3,h4,strong,b,dt){
  color:var(--sitio-tinta-1);
}
/* `span` excluye `.tag` y `.dot`: la píldora trae su propio relleno coral y su
   texto va blanco. Incluirla aquí la dejó gris claro sobre coral (2.83). */
body[data-page="guia-tallaje"] .section-light :is(.card,.record-card) :is(p,li,dd,small,span:not(.tag):not(.dot)){
  color:var(--sitio-tinta-2);
}

/* La píldora, en cualquier página y por encima de la capa. */
body .tag{
  background: var(--syt-coral-relleno);
  color: var(--sitio-tinta-1);
}

/* ===========================================================================
   PLACAS OPACAS · el texto no depende de la foto que tenga detrás
   ---------------------------------------------------------------------------
   Tres casos con la misma raíz: un contenedor con velo casi transparente
   (`rgba(255,255,255,.04)`) o con una textura clara encima de un fondo oscuro.
   El pixel real queda en tono medio (155–179) y ningún color de tinta cumple.
   El método que ya funcionó en la calculadora del catálogo: el bloque trae su
   propia placa opaca.
   =========================================================================== */

/* index · las tarjetas de condiciones: velo al 4% sobre la imagen de sección. */
/* La placa va OPACA. Al 88% todavía dejaba pasar la textura de la sección y
   el pixel real quedaba en tono medio (163-179): las cifras en blanco daban
   2.2-2.6 contra el 4.5 que pide el texto normal. Con el fondo del sistema
   sólido, el blanco encima da 18.88. */
body[data-page="index"] .cond-card{
  background: var(--sitio-fondo-alt);
  background-image: none;
  border-color: color-mix(in srgb, var(--sitio-tinta-1) 14%, transparent);
}

body[data-page="index"] .cond-card :is(p,li,small){
  color: var(--sitio-tinta-2);
}

body[data-page="index"] .cond-card :is(strong,b,h3,h4){
  color: var(--sitio-tinta-1);
}

/* guía de tallaje · la tarjeta declara fondo oscuro pero lleva una textura
   clara encima que lo sube a tono medio. Se refuerza la placa. */
body[data-page="guia-tallaje"] .section-light :is(.card,.record-card){
  background-color: var(--sitio-fondo);
  background-image: none;
}

/* condiciones · el hero y el cierre son `section-light` por nombre y NEGROS al
   renderizar (pixel rgb(7,7,7)). Se corrige en el TOKEN, como en anatomía:
   dentro de esa superficie los mismos tokens valen las tintas claras. */
body[data-page="condiciones"] .section-light:has(>.wrap>h1),
body[data-page="condiciones"] main>.section-light:first-of-type,
body[data-page="condiciones"] main>.section-light:last-of-type{
  --text: var(--sitio-tinta-2);
  --title: var(--sitio-tinta-1);
}

body[data-page="condiciones"] main>.section-light:first-of-type :is(p,li),
body[data-page="condiciones"] main>.section-light:last-of-type :is(p,li){
  color: var(--sitio-tinta-2);
}

/* ===========================================================================
   MOVIMIENTO · más vida, con criterio
   ---------------------------------------------------------------------------
   Regla del sistema: nada supera 300 ms y todo respeta `prefers-reduced-motion`.
   El movimiento acompaña la lectura; no la interrumpe.
   =========================================================================== */

/* Entrada escalonada: las tarjetas hermanas no aparecen todas de golpe, entran
   en cascada corta. Es lo que da sensación de orden en las referencias. */
.js [data-fade]:nth-child(2){ transition-delay: .06s }
.js [data-fade]:nth-child(3){ transition-delay: .12s }
.js [data-fade]:nth-child(4){ transition-delay: .18s }
.js [data-fade]:nth-child(5){ transition-delay: .24s }

/* Levante al pasar el mouse: la tarjeta responde, no se queda muerta. */
:is(.card,.traje-card,.contact-card,.step-card,.local-step,.intranet-card,
    .part-card,.val-card,.impact-card,.record-card){
  transition: transform var(--t-2, 220ms) var(--curva, cubic-bezier(.22,1,.36,1)),
              box-shadow var(--t-2, 220ms) ease,
              border-color var(--t-1, 150ms) ease;
}

@media (hover: hover){
  :is(.card,.traje-card,.contact-card,.step-card,.local-step,.intranet-card,
      .part-card,.val-card,.impact-card,.record-card):hover{
    transform: translate3d(0,-4px,0);
    border-color: color-mix(in srgb, var(--syt-coral-vivo) 38%, transparent);
  }

  /* El botón principal se hunde levemente al presionar: confirma el toque. */
  .btn:active{ transform: translate3d(0,1px,0) }
}

/* Los enlaces del pie y del menú subrayan desde el centro en vez de aparecer
   de golpe: un detalle chico que se nota. */
@media (hover: hover){
  .nav-links>a{ position: relative }
  .nav-links>a::after{
    content: "";
    position: absolute;
    left: 50%; right: 50%; bottom: 2px;
    height: 2px;
    background: var(--syt-coral-vivo);
    transition: left var(--t-2, 220ms) var(--curva, cubic-bezier(.22,1,.36,1)),
                right var(--t-2, 220ms) var(--curva, cubic-bezier(.22,1,.36,1));
  }
  .nav-links>a:hover::after{ left: 4px; right: 4px }
}

/* La imagen del catálogo respira al pasar por encima, dentro de su marco. */
@media (hover: hover){
  .traje-card>img, .carousel-track img{
    transition: transform var(--t-3, 300ms) var(--curva, cubic-bezier(.22,1,.36,1));
  }
  .traje-card:hover>img{ transform: scale(1.03) }
}

/* Contrato de accesibilidad: quien pide menos movimiento, no recibe ninguno. */
@media (prefers-reduced-motion: reduce){
  .js [data-fade]{ opacity: 1; transform: none; transition: none }
  .js [data-fade]:nth-child(n){ transition-delay: 0s }
  :is(.card,.traje-card,.contact-card,.step-card,.local-step,.intranet-card,
      .part-card,.val-card,.impact-card,.record-card):hover{ transform: none }
  .traje-card:hover>img{ transform: none }
  .nav-links>a::after{ transition: none }
}

/* ---------------------------------------------------------------------------
   Párrafos con tinta de fondo CLARO sobre superficie OSCURA
   ---------------------------------------------------------------------------
   `--sitio-tinta-osc-2` (#413b36) es la tinta secundaria para fondo claro.
   Aparecía sobre negro en anatomía (5 casos, 1.41–1.71) y en los heros de
   condiciones (2 casos, 1.82). Va fuera de la capa porque dentro perdía.
   --------------------------------------------------------------------------- */
/* La página declara `--text` y `--title` con las tintas para fondo CLARO, para
   toda la página. Pero tiene secciones oscuras, así que todo lo que use esos
   tokens queda ilegible ahí (5 párrafos entre 1.41 y 1.71).
   El arreglo va en el TOKEN, no en cada párrafo: dentro de una superficie
   oscura, los mismos tokens valen las tintas claras. Así cualquier elemento
   que los use queda bien sin tener que enumerarlo. */
body[data-page="anatomia-traje-tobas"] :is(.section-dark,.section.soft,.hero-premium,.guide-hero),
body[data-page="guia-visual-traje"] :is(.section-dark,.section.soft,.hero-premium,.guide-hero){
  --text: var(--sitio-tinta-2);
  --title: var(--sitio-tinta-1);
  --bg2: var(--sitio-fondo-alt);
}

body[data-page="anatomia-traje-tobas"] :is(.section,.section.soft)>.wrap>p,
body[data-page="anatomia-traje-tobas"] .section.soft :is(p,li),
/* En condiciones el hero y el cierre son `section-light` por nombre y OSCUROS
   al renderizar (pixel rgb(8,8,7) y rgb(7,7,7)). Mismo criterio que en
   anatomía: la tinta la decide la superficie, no la clase. */
body[data-page="condiciones"] .section-light>.wrap>p,
body[data-page="condiciones"] .section-light>.wrap>div>p,
body[data-page="condiciones"] .conditions-hero :is(p,li){
  color: var(--sitio-tinta-2);
}

/* REVERTIDO: darle coral al contador "01" del mazo subió condiciones de 3 a 4.
   Su cabecera no siempre es blanca, así que un color fijo falla en el otro
   estado. Necesita el mismo tratamiento de placa propia que el resto. */

/* El "01" de los pasos: tinta clara sobre su placa blanca (1.5). En una lista
   numerada el marcador se lee de reojo, pero tiene que leerse. */
body[data-page="condiciones"] .condition-slide-index span{
  color: var(--sitio-tinta-1);
}

/* ---------------------------------------------------------------------------
   CATÁLOGO · casos medidos que ninguna regla de la capa alcanzaba
   Van fuera de `@layer` a propósito: dentro de la capa perdían contra las
   reglas page-scoped que ya viven aquí.
   --------------------------------------------------------------------------- */

/* "Rosas / Independencia / Patronato / Meiggs": la caja se renderiza BLANCA
   (pixel rgb(255,255,255)) y la lista usaba la tinta para fondo oscuro → 1.5.
   Se corrige SOLO la tinta. Forzar el fondo ya se intentó y empeoró la
   medición: la caja se pinta distinto según la sección que la contiene. */
/* `.personal-buy` declara fondo oscuro en la capa y se RENDERIZA blanco: otra
   regla lo pisa. En vez de pelear por quién gana, se le fija la placa completa
   —fondo Y tinta juntos— fuera de la capa. Antes intenté solo la tinta y
   quedaron el `span` y el `p` en 1.69; y antes de eso intenté solo el fondo y
   empeoró. El par completo es lo que cierra el caso. */
body[data-page="catalogo"] .personal-buy{
  background: var(--sitio-claro);
  border-color: var(--sitio-linea);
}
body[data-page="catalogo"] .personal-buy :is(li,p,span,small,dd){
  color: var(--sitio-tinta-osc-2);
}
body[data-page="catalogo"] .personal-buy :is(strong,b,h3,h4){
  color: var(--sitio-tinta-osc-1);
}

/* `.personal-choice` / `.personal-cord`: el bloque se renderiza OSCURO
   (pixel rgb(10,9,9) y rgb(64,60,58)) y conservaba las tintas para fondo
   claro (1.71 y 1.80).

   Historial, porque costó: tocarle el FONDO empeoró la medición dos veces
   (3 → 7), porque es una composición sobre fotografía y al aplanarlo se
   pierde la imagen. Lo que faltaba probar era lo contrario: dejar el fondo
   como está y corregir SOLO la tinta.

   Tercer intento, también revertido: corregir SOLO la tinta subió catálogo de
   2 a 11. Con eso queda demostrado por qué ninguna regla de color funciona:

     · fondo solo        → peor (3 → 7)
     · fondo + tinta     → peor (3 → 7)
     · tinta sola        → peor (2 → 11)

   El bloque es MIXTO: unas partes se pintan oscuras (rgb(10,9,9)) y otras
   claras (blanco). Cualquier tinta uniforme arregla la mitad y rompe la otra.

   CONCLUSIÓN, para no volver a intentarlo por cuarta vez: este bloque necesita
   que cada texto lleve su propio recuadro legible sobre la fotografía, con
   fondo y tinta declarados juntos por pieza. Es rediseño de estructura en el
   HTML, no un ajuste en la hoja. Queda para la fase de deleite. */

/* "Para reservar $27.500": el total quedaba oscuro sobre oscuro (1.0). El
   coral vivo sobre el panel negro da 5.56. */
body[data-page="catalogo"] .calc-total.final b{
  color: var(--syt-coral-vivo);
}

/* La calculadora: sus cifras van en blanco, pero el bloque quedaba sobre un
   fondo de tono medio (pixel rgb(168,167,167)) y daban 2.4 contra el 3.0 que
   pide el texto grande. Cambiar el color no sirve —el fondo varía con la
   imagen de atrás—: la respuesta es que el bloque traiga SU PROPIA placa
   opaca, que es lo que hacen las referencias. Con el negro del sistema, el
   blanco encima da 20.14. */
body[data-page="catalogo"] .calc{
  background: var(--sitio-fondo);
  border-color: color-mix(in srgb, var(--sitio-tinta-1) 14%, transparent);
}

body[data-page="catalogo"] .calc :is(label,span,small){
  color: var(--sitio-tinta-2);
}

body[data-page="catalogo"] .calc :is(b,input,select){
  color: var(--sitio-tinta-1);
}

/* El aviso de la garantía traía su color y su fondo en atributos inline: un
   verde claro sobre un velo verde al 10% que dejaba pasar la foto de atrás
   (4.07 contra el 4.5 que pide). Pasa a placa opaca con el verde del sistema. */
body[data-page="catalogo"] .calc-aviso{
  border: 1px solid color-mix(in srgb, var(--ok-relleno) 55%, transparent);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: .85rem;
  line-height: 1.5;
  background: color-mix(in srgb, var(--ok-relleno) 22%, var(--sitio-fondo));
  color: var(--sitio-tinta-2);
}

body[data-page="catalogo"] .calc-aviso strong{
  display: block;
  margin-bottom: 4px;
  color: var(--sitio-tinta-1);
}

/* REVERTIDO: pintar de claro los `strong` de `.personal-choice` /
   `.personal-cord` subió catálogo de 9 a 12 fallas. Esos bloques tienen
   fondos de tono medio que varían por tarjeta, así que una tinta fija no
   sirve para todos. Queda anotado: el arreglo correcto es darles un fondo
   propio definido, no adivinarles la tinta.

   También se retiró un `text-shadow` sobre las cifras: mejora la lectura real
   pero NO cambia la relación de contraste medida, así que no resuelve nada
   verificable y solo agrega ruido a la hoja. */

body[data-page="intranet"] .login-card,
body[data-page="intranet"] .portal-card,
body[data-page="intranet"] .modal{
  background:var(--sitio-claro);
  color:var(--sitio-tinta-osc-2);
}
body[data-page="intranet"] .login-card h1,
body[data-page="intranet"] .login-card h2,
body[data-page="intranet"] .portal-card h2{
  color:var(--sitio-tinta-osc-1);
}
body[data-page="intranet"] .modal h2,
body[data-page="intranet"] .modal h3,
body[data-page="intranet"] .modal strong{
  color:var(--sitio-tinta-osc-1);
}
body[data-page="intranet"] .label{
  color:var(--sitio-tinta-osc-3);
}

body[data-page="privacidad"] .section-light .legal,
body[data-page="privacidad"] .section-light .legal p,
body[data-page="privacidad"] .section-light .legal li{
  color:var(--sitio-tinta-osc-2);
}

/* === Media queries agrupadas al final ================================ */

@media (min-width:981px) and (min-height:720px){
  @layer legacy{
    .traje-stack-item{
          display: grid;
          grid-template-columns: minmax(330px,.74fr) minmax(0,1.55fr);
          grid-template-rows: auto 1fr auto;
          grid-template-areas: "top gallery" "info gallery" "cta gallery";
          gap: 16px 24px;
          min-height: calc(100svh - 126px);
          max-height: calc(100svh - 126px);
          padding: 18px;
          overflow: hidden;
          top: 104px;
          margin-bottom: 56px;
        }

        .traje-stack-item .ts-top{
          grid-area: top;
          grid-template-columns: 64px minmax(0,1fr);
          padding: 20px 18px 8px;
          gap: 14px;
        }

        .traje-stack-item .ts-num{
          font-size: 3.2rem;
        }

        .traje-stack-item .ts-price{
          grid-column: 1/-1;
          text-align: left;
          padding: 12px 0 0 78px;
          font-size: 1.65rem;
        }

        .traje-stack-item .ts-desc{
          font-size: .96rem;
          line-height: 1.48;
        }

        .traje-stack-item .carousel{
          grid-area: gallery;
          height: 100%;
          min-height: 0;
          padding: 0;
          align-self: stretch;
        }

        .traje-stack-item .carousel-track{
          height: 100%;
          min-height: 0;
          gap: 10px;
        }

        .traje-stack-item .carousel-track img{
          height: 100%;
          min-height: 0;
          flex: 0 0 calc(50% - 5px);
          aspect-ratio: auto;
          border-radius: 18px;
        }

        .traje-stack-item .carousel-dots{
          position: absolute;
          bottom: 12px;
          left: 50%;
          transform: translateX(-50%);
          padding: 10px 14px;
          border-radius: 999px;
          background: color-mix(in srgb, var(--sitio-fondo) 72%, transparent);
          backdrop-filter: blur(12px);
        }

        .traje-stack-item .ts-info-grid{
          grid-area: info;
          grid-template-columns: repeat(3,minmax(0,1fr));
          align-self: end;
          padding: 0 18px;
          gap: 8px;
        }

        .traje-stack-item .ts-info-card{
          padding: 12px 10px;
          border-radius: 14px;
          box-shadow: 4px 4px 0 color-mix(in srgb, var(--syt-coral-vivo) 6%, transparent),0 18px 34px -28px color-mix(in srgb, var(--sitio-fondo) 50%, transparent);
        }

        .traje-stack-item .ts-info-card .label{
          font-size: .65rem;
          letter-spacing: .02em;
        }

        .traje-stack-item .ts-info-card .value{
          font-size: .94rem;
        }

        .traje-stack-item>div:last-child{
          grid-area: cta;
          padding: 0 18px 18px;
        }
  }
}

@media (min-width:981px){
  @layer legacy{
    .home-hero .hero-title{
          font-size: clamp(3.2rem,5vw,5.8rem);
        }

        .home-suits{
          padding: 54px 0;
        }

        .home-suits-heading{
          margin-bottom: 28px;
        }

        .home-suits-grid{
          gap: 24px;
        }

        .home-suits .traje-card>img{
          height: 190px;
          object-fit: contain;
          object-position: center;
          background: var(--sitio-fondo);
        }

        .home-suits .traje-card .body{
          padding: 17px 18px 18px;
        }

        .traje-stack-item{
          display: grid;
          grid-template-columns: minmax(320px,.78fr) minmax(0,1.45fr);
          grid-template-rows: auto minmax(0,1fr) auto;
          grid-template-areas: "top gallery" "info gallery" "cta gallery";
          gap: 14px 22px;
          height: min(650px,calc(100svh - 116px));
          min-height: 520px;
          max-height: none;
          margin-bottom: 58px;
          padding: 18px;
          overflow: hidden;
          top: 96px;
        }

        .traje-stack-item .ts-top{
          grid-area: top;
          grid-template-columns: 60px minmax(0,1fr);
          padding: 12px 16px 0;
          gap: 13px;
        }

        .traje-stack-item .ts-num{
          font-size: 3rem;
          line-height: .92;
        }

        .traje-stack-item h3{
          font-size: clamp(1.65rem,2.3vw,2.35rem);
          line-height: .97;
        }

        .traje-stack-item .ts-price{
          grid-column: 1/-1;
          padding: 4px 0 0 73px;
          text-align: left;
          font-size: 1.55rem;
        }

        .traje-stack-item .ts-desc{
          font-size: .94rem;
          line-height: 1.4;
          margin-top: 8px;
        }

        .traje-stack-item .carousel{
          grid-area: gallery;
          height: 100%;
          min-height: 0;
          margin: 0;
          padding: 0;
          align-self: stretch;
        }

        .traje-stack-item .carousel-track{
          height: 100%;
          min-height: 0;
          gap: 10px;
        }

        .traje-stack-item .carousel-track img{
          height: 100%;
          min-height: 0;
          flex: 0 0 calc(50% - 5px);
          aspect-ratio: auto;
          object-fit: contain;
        }

        .traje-stack-item .ts-info-grid{
          grid-area: info;
          grid-template-columns: repeat(3,minmax(0,1fr));
          align-self: end;
          padding: 0 16px;
          gap: 8px;
        }

        .traje-stack-item .ts-info-card{
          padding: 10px 8px;
          border-radius: 14px;
          box-shadow: 4px 4px 0 color-mix(in srgb, var(--syt-coral-vivo) 6%, transparent);
        }

        .traje-stack-item .ts-info-card .label{
          font-size: .61rem;
          line-height: 1.1;
        }

        .traje-stack-item .ts-info-card .value{
          font-size: .88rem;
          line-height: 1.05;
        }

        .traje-stack-item>div:last-child{
          grid-area: cta;
          padding: 0 16px 12px;
        }

        .traje-stack-item .btn{
          min-height: 46px;
        }

        .home-hero{
          box-sizing: border-box;
          padding: clamp(44px,6vh,70px) 0;
          height: calc(100svh - var(--syt-header-h));
          min-height: 0;
          max-height: none;
          padding-block: clamp(28px,4.2svh,54px);
          overflow: hidden;
        }

        .home-hero::before{
          display: none;
        }

        .home-hero::after{
          display: block;
          background: linear-gradient(90deg,var(--sitio-fondo) 0%,color-mix(in srgb, var(--sitio-fondo) 95%, transparent) 24%,color-mix(in srgb, var(--sitio-fondo) 72%, transparent) 42%,color-mix(in srgb, var(--sitio-fondo) 26%, transparent) 60%,color-mix(in srgb, var(--sitio-fondo) 3%, transparent) 78%),
            linear-gradient(0deg,color-mix(in srgb, var(--sitio-fondo) 58%, transparent),transparent 42%);
        }

        .home-hero-media{
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          margin: 0;
          z-index: 0;
        }

        .home-hero-media picture, .home-hero-media img{
          display: block;
          width: 100%;
          height: 100%;
        }

        .home-hero-media img{
          object-fit: cover;
          object-position: 64% center;
          opacity: 1;
          filter: saturate(1.02) contrast(1.035);
        }

        .home-hero .wrap{
          height: 100%;
          display: grid;
          align-content: center;
          position: relative;
          z-index: 2;
        }

        .home-hero-copy{
          max-width: min(650px,48vw);
          margin-left: clamp(18px,4vw,72px);
        }

        .home-hero :where(.hero-title,.home-hero-story){
          color: var(--sitio-tinta-1);
        }

        .home-hero-detail{
          border-color: color-mix(in srgb, var(--sitio-tinta-1) 20%, transparent);
          background: color-mix(in srgb, var(--sitio-fondo) 72%, transparent);
          box-shadow: 10px 10px 0 color-mix(in srgb, var(--syt-coral) 12%, transparent),0 28px 70px -44px color-mix(in srgb, var(--sitio-fondo) 95%, transparent);
          backdrop-filter: blur(14px);
        }

        .home-hero-detail p{
          color: var(--sitio-claro-alt);
        }
  }
}

@media (max-width:480px){
  @layer legacy{
    /* Alto fijo, ancho automático: misma lógica que en escritorio, para no
       repetir el aplaste de 86x36 (2,39:1) sobre un logo de 0,89:1. */
    .brand img{
          height: 44px;
          width: auto;
          aspect-ratio: 500 / 561;
        }

        .brand span{
          display: none;
        }

        .hero-title{
          font-size: 2.35rem;
        }

        .calc{
          padding: 20px;
        }

        .val-table{
          font-size: .78rem;
        }

        .val-table th, .val-table td{
          padding: 10px 8px;
        }

        .sol-nudge{
          font-size: .75rem;
        }

        :root{
          --syt-section-space: 68px;
        }

        .home-hero::before{
          background: radial-gradient(circle at 70% 24%, color-mix(in srgb, var(--syt-coral-vivo) 9%, transparent), transparent 34%),
            radial-gradient(circle at 88% 50%, color-mix(in srgb, var(--syt-coral) 7%, transparent), transparent 30%);
        }

        .home-hero::after{
          background: linear-gradient(0deg,
              color-mix(in srgb, var(--sitio-fondo) 99%, transparent) 0%,
              color-mix(in srgb, var(--sitio-fondo) 91%, transparent) 43%,
              color-mix(in srgb, var(--sitio-fondo) 28%, transparent) 76%,
              color-mix(in srgb, var(--sitio-fondo) 10%, transparent) 100%);
        }

        .home-hero-copy{
          max-width: none;
        }

        .home-hero .btn{
          width: 100%;
          min-height: 50px;
        }

        .grid-3{
          grid-template-columns: 1fr;
        }

        .traje-card{
          border-radius: 18px;
        }

        .wrap, .site-header .wrap{
          padding-inline: 15px;
        }

        .home-hero{
          align-items: end;
          padding: 88px 0 58px;
          min-height: 730px;
          padding-bottom: 48px;
        }

        .home-hero-media img{
          object-position: 64% center;
        }

        .home-hero-copy > p{
          line-height: 1.55;
          font-size: .96rem;
        }

        .content{
          padding-inline: 13px;
        }

        .traje-stack-item .ts-info-card{
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
        }

        .traje-stack-item .carousel{
          height: 250px;
        }

        .traje-stack-item .ts-info-grid{
          grid-template-columns: 1fr;
        }

        .home-hero-intro{
          padding-inline: 18px;
        }

        .home-hero-media, .home-hero-detail{
          width: calc(100% - 36px);
          margin-left: 18px;
          margin-right: 18px;
        }

        .home-hero .hero-title{
          max-width: 11ch;
          line-height: 1;
          letter-spacing: -.045em;
          font-size: 2.32rem;
        }

        .home-hero-intro, .home-hero-detail{
          width: calc(100% - 36px);
          padding-inline: 0;
        }

        .home-hero-detail{
          padding: 14px;
        }

        .home-hero-detail>p{
          margin-bottom: 12px;
          font-size: .88rem;
          line-height: 1.38;
        }

        .home-hero-actions{
          grid-template-columns: repeat(2,minmax(0,1fr));
          gap: 8px;
        }

        .home-hero-actions .btn{
          min-height: 50px;
          padding: 10px 8px;
          font-size: .83rem;
          line-height: 1.08;
        }

        .val-tabs{
          display: grid;
          grid-template-columns: 1fr 1fr;
        }

        .val-tabs button{
          padding-inline: 8px;
          font-size: .8rem;
        }

        .home-hero-media{
          width: calc(100% - 36px);
          height: 250px;
        }

        .mobile-nav-guides summary, .site-header .mobile-menu .mobile-nav-primary{
          font-size: .94rem;
        }

        .syt-privacy-actions{
          align-items: center;
          flex-direction: row;
        }

        .syt-privacy-actions button{
          width: auto;
        }
  }
}

@media (max-width:768px){
  @layer legacy{
    .grid-2, .grid-3, .grid-4{
          grid-template-columns: 1fr;
        }

        .traje-stack-item .ts-top{
          grid-template-columns: auto 1fr;
          gap: 12px;
          padding: 20px;
        }

        .traje-stack-item .ts-num{
          font-size: 2rem;
        }

        .carousel-track img{
          flex: 0 0 80%;
          margin-right: 8px;
        }

        .ts-info-grid{
          grid-template-columns: 1fr;
          padding: 0 20px 24px;
        }

        .home-hero::after{
          display: none;
        }

        .home-hero-copy{
          max-width: none;
          margin: 0;
          padding: 0 4px;
          background: var(--sitio-fondo);
        }

        .home-hero-copy>div:last-child{
          display: grid;
          grid-template-columns: 1fr;
          gap: 10px;
        }

        .home-hero .btn-ghost{
          background: transparent;
        }

        .section .wrap{
          padding-inline: 18px;
        }

        .section h2{
          font-size: clamp(1.8rem,8vw,2.35rem);
        }

        .sol-nudge{
          right: 0;
          bottom: 72px;
          width: min(292px,calc(100vw - 38px));
          font-size: .78rem;
        }

        body:has(.site-header .mobile-menu.open) .sol-fab, body:has(.site-header .mobile-menu.open) .sol-nudge{
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
        }

        .syt-zoom-close{
          top: 12px;
          right: 12px;
          width: 40px;
          height: 40px;
          font-size: 1.6rem;
        }

        .brand img{
          height: 44px;
          width: auto;
          aspect-ratio: 500 / 561;
        }

        .home-hero-media img{
          height: 100%;
          object-position: 65% 18%;
          filter: saturate(.98) contrast(1.04);
        }

        .home-hero p{
          max-width: 33ch;
          font-size: 1rem;
          line-height: 1.55;
          margin-bottom: 26px;
        }

        .condition-deck-head{
          align-items: flex-start;
          flex-direction: column;
          padding: 18px;
        }

        .condition-slides{
          min-height: 485px;
        }

        .condition-slide-copy h2{
          font-size: 2rem;
        }

        .condition-slide-copy p{
          font-size: .98rem;
          line-height: 1.66;
        }

        .condition-key{
          width: 100%;
          border-radius: 14px;
          align-items: flex-start;
        }

        .condition-controls{
          padding: 14px 18px;
        }

        .condition-controls button{
          flex: 1;
          padding: 9px 12px;
        }

        .care-section, .parts-section, .personal-section{
          padding: 72px 0;
        }

        .care-tab{
          flex-basis: 150px;
        }

        .care-media, .care-media img{
          min-height: 270px;
        }

        .care-copy{
          padding: 26px 22px 32px;
        }

        .parts-grid{
          grid-template-columns: 1fr;
        }

        .parts-grid .part-card:last-child{
          grid-column: auto;
        }

        .part-media{
          height: 330px;
        }

        .personal-intro{
          text-align: left;
          margin-bottom: 28px;
        }

        .personal-number{
          width: 44px;
          height: 44px;
          border-radius: 13px;
        }

        .pin-options, .cord-fit-grid{
          grid-template-columns: 1fr;
        }

        .pin-option figure img{
          height: 230px;
        }

        .personal-choice, .personal-cord{
          padding: 19px;
        }

        .personal-warning{
          grid-template-columns: 48px 1fr;
          padding: 20px;
          gap: 14px;
        }

        .personal-alert{
          width: 46px;
          height: 46px;
          font-size: 1.5rem;
        }

        .personal-buy{
          padding: 17px;
        }

        .req-stepper{
          top: calc(64px + env(safe-area-inset-top));
        }

        .stepper-row{
          display: grid;
          grid-template-columns: repeat(6,minmax(0,1fr));
          gap: 7px;
          overflow: visible;
          padding: 2px 0 7px;
        }

        .stepper-pill{
          position: relative;
          min-width: 0;
          min-height: 48px;
          flex: none;
          padding: 7px;
          justify-content: center;
          border-radius: 14px;
        }

        .stepper-pill.current{
          grid-column: span 2;
          justify-content: flex-start;
          padding-inline: 9px;
        }

        .stepper-pill .sp-num{
          width: 30px;
          height: 30px;
          margin: 0;
        }

        .stepper-pill .sp-tx{
          display: none;
          font-size: .62rem;
          line-height: 1.05;
          letter-spacing: .025em;
        }

        .stepper-pill.current .sp-tx{
          display: block;
        }

        .req-main .wrap{
          padding-inline: 15px;
        }

        .req-side{
          position: static;
        }

        .blk{
          padding: 20px;
        }

        .blk-head{
          gap: 12px;
        }

        .blk-num{
          width: 44px;
          height: 44px;
          border-radius: 13px;
        }

        .blk-titles .blk-explain{
          font-size: .88rem;
        }

        .blk-actions{
          display: grid;
          grid-template-columns: 1fr;
        }

        .blk-actions .btn-coral, .blk-actions .btn-outline, .blk-actions .btn-wsp{
          width: 100%;
          min-height: 50px;
        }

        .footer-brand img{
          width: 150px;
        }

        .hero-premium, .contact-hero, .local-hero{
          background-position: 76% center;
        }

        .card, .contact-card, .traje-card{
          border-radius: 18px;
        }

        .home-suits{
          padding: 70px 0 16px;
        }

        .home-suits-heading{
          text-align: left;
          margin-bottom: 24px;
        }

        .home-suits .traje-card{
          flex-basis: calc(100vw - 44px);
        }

        .home-suits .traje-card>img{
          height: 220px;
          max-height: none;
        }

        .home-suits .traje-card .body{
          min-height: 190px;
          padding: 17px 18px 18px;
        }

        .home-suits-more{
          margin-top: 20px;
          display: none;
        }

        body{
          font-size: 1rem;
        }

        h1, .hero-title{
          letter-spacing: -.045em;
          font-size: clamp(2.35rem,11vw,3.35rem);
          line-height: 1;
        }

        h2, .section-title{
          font-size: clamp(1.85rem,8.5vw,2.55rem);
        }

        .home-hero{
          display: flex;
          flex-direction: column;
          min-height: 0;
          padding: 0 0 28px;
          background: var(--sitio-fondo);
          overflow: clip;
          background-image: linear-gradient(color-mix(in srgb, var(--sitio-fondo) 80%, transparent),color-mix(in srgb, var(--sitio-fondo) 98%, transparent)),var(--solar-dark-image);
          background-size: cover;
        }

        .home-hero::before{
          opacity: .2;
        }

        .home-hero .wrap{
          order: 1;
          margin: 0;
          padding: 34px 16px 0;
          position: relative;
          z-index: 2;
          padding-top: 26px;
        }

        .home-hero-copy>p{
          padding: 0;
          border: 0;
          background: transparent;
          box-shadow: none;
          backdrop-filter: none;
        }

        .home-hero-media{
          order: 2;
          position: relative;
          inset: auto;
          width: calc(100% - 32px);
          margin: 24px 16px 0;
          border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 16%, transparent);
          border-radius: 22px;
          overflow: hidden;
          background: var(--sitio-fondo-alt);
          height: min(29svh,220px);
          margin-top: 18px;
          box-shadow: 8px 8px 0 color-mix(in srgb, var(--syt-coral-vivo) 13%, transparent),0 24px 50px -32px color-mix(in srgb, var(--syt-coral-vivo) 55%, transparent);
          border-color: color-mix(in srgb, var(--syt-coral-vivo) 32%, transparent);
        }

        main>.section-light:first-child:not(.home-hero){
          padding-top: 64px;
          padding-bottom: 54px;
        }

        .card, .contact-card, .local-step, .intranet-card, .traje-card, .part-card, .personal-choice, .personal-cord, .pin-option, .calc, .val-card, .impact-card, details{
          border-radius: 20px;
          box-shadow: 6px 6px 0 color-mix(in srgb, var(--syt-coral-vivo) 7%, transparent),0 24px 58px -42px color-mix(in srgb, var(--sitio-fondo) 50%, transparent);
        }

        .traje-stack-item h3{
          font-size: 1.35rem;
        }

        .traje-stack-item .ts-desc{
          font-size: .9rem;
          line-height: 1.45;
        }

        .traje-stack-item .ts-price{
          grid-column: 1/-1;
          text-align: right;
          border-top: 1px solid var(--sitio-linea);
          padding-top: 9px;
        }

        .section{
          padding: 56px 0;
          padding-block: 60px;
        }

        .home-hero .hero-title{
          margin-bottom: 18px;
          max-width: 100%;
          font-size: clamp(2.55rem,11vw,3.45rem);
          line-height: .94;
        }

        .home-hero .btn{
          min-height: 54px;
          padding: 14px 18px;
          width: 100%;
          justify-content: center;
        }

        .home-hero-copy>div{
          display: grid;
          grid-template-columns: 1fr;
          width: 100%;
        }

        .req-hero{
          padding-top: 78px;
        }

        .req-hero h1{
          font-size: clamp(2.45rem,10.2vw,3.35rem);
        }

        .traje-stack-item .carousel{
          height: 274px;
        }

        .hero-premium{
          padding-top: 64px;
        }

        .hero-premium .hero-actions{
          display: grid;
          grid-template-columns: 1fr;
        }

        .hero-premium .hero-actions .btn{
          width: 100%;
          justify-content: center;
        }

        .hero-premium .screen-links{
          display: none;
        }

        footer .footer-grid, footer .jack-footer-grid, footer .foot-grid{
          grid-template-columns: 1fr;
        }

        footer .footer-bottom, footer .jack-footer-bottom, footer .foot-bottom{
          flex-direction: column;
          gap: 8px;
        }

        .condition-deck{
          padding: 16px;
          border-radius: 20px;
        }

        .condition-progress{
          padding: 12px 18px;
          overflow-x: auto;
          padding-bottom: 6px;
          flex-wrap: nowrap;
        }

        .condition-tab{
          flex: 0 0 auto;
        }

        .faq-section summary{
          padding: 17px 48px 17px 16px;
        }

        .faq-section details p{
          padding: 0 16px 18px;
        }

        .sol-root{
          bottom: max(14px,env(safe-area-inset-bottom));
          left: auto;
          right: 12px;
        }

        .sol-panel, .sol-head, .sol-body, .sol-quick, .sol-input{
          max-width: calc(100vw - 24px);
          box-sizing: border-box;
        }

        .sol-panel{
          bottom: calc(82px + env(safe-area-inset-bottom));
          max-height: calc(100dvh - 104px - env(safe-area-inset-top));
          right: 0;
          left: auto;
          width: calc(100vw - 24px);
        }

        .sol-input input{
          min-width: 0;
          flex: 1 1 auto;
        }

        html, body{
          max-width: 100%;
        }

        .sol-root:not([data-open="true"]) .sol-panel{
          display: none;
        }
  }

  body[data-page^="comunas-"] .local-note{
    grid-template-columns:1fr;
  }
}

@media (max-width:981px){
  @layer legacy{
    .nav-links{
          display: none;
        }

        .mobile-menu.open{
          display: flex;
        }

        .grid-3, .grid-4{
          grid-template-columns: repeat(2,1fr);
        }

        .mobile-menu a{
          color: var(--white);
          font-weight: 600;
          border-bottom: 1px solid var(--sitio-linea-osc);
          min-height: 48px;
          display: flex;
          align-items: center;
          padding: 10px 4px;
          touch-action: manipulation;
        }

        /* En móvil se esconde el CTA de la cabecera, PERO nunca el botón de
           menú: las 10 landings de comuna lo marcan como `btn btn-icon
           menu-btn` y esta regla las dejaba sin ninguna navegación. Quien
           llegaba desde Google a "Trajes de Tobas en Maipú" en el teléfono
           no podía moverse a ninguna otra página del sitio. */
        .nav-actions>.btn:not(.menu-btn){
          display: none;
        }

        .section>.wrap[style*="grid-template-columns"], .section .wrap[style*="grid-template-columns"]{
          grid-template-columns: minmax(0,1fr);
          gap: 36px;
        }

        .section>.wrap>*{
          min-width: 0;
        }

        .hero-title{
          font-size: clamp(2.35rem,12.5vw,3.45rem);
          overflow-wrap: anywhere;
        }

        .photo{
          width: 100%;
          max-width: 520px;
          margin-inline: auto;
        }

        .photo img{
          aspect-ratio: 4/5;
          object-position: 50% 16%;
        }

        .carousel{
          padding: 0 18px;
        }

        .carousel-track{
          gap: 10px;
        }

        .carousel-track img{
          flex-basis: 88%;
          aspect-ratio: 4/5;
          object-position: 50% 18%;
        }

        .footer-grid{
          grid-template-columns: 1fr;
          gap: 24px;
          padding-left: max(20px,env(safe-area-inset-left));
          padding-right: max(20px,env(safe-area-inset-right));
        }

        .footer-bottom{
          padding-left: max(20px,env(safe-area-inset-left));
          padding-right: max(20px,env(safe-area-inset-right));
          padding-bottom: max(20px,env(safe-area-inset-bottom));
          gap: 10px;
          flex-direction: column;
        }

        .sol-root{
          right: max(18px,env(safe-area-inset-right));
          bottom: max(18px,env(safe-area-inset-bottom));
        }

        .sol-input input, .sol-lead input{
          font-size: 16px;
        }

        .sol-context-solicitud .sol-nudge{
          right: 0;
          bottom: 70px;
          width: min(280px,calc(100vw - 48px));
          border-radius: 15px 15px 4px 15px;
        }

        .brand{
          font-size: 1.22rem;
          letter-spacing: -.04em;
        }

        .menu-btn{
          display: inline-flex;
          width: 48px;
          height: 48px;
          border-radius: 12px;
        }

        .site-header .mobile-menu a{
          min-height: 54px;
          padding: 14px 4px;
          font-size: 1rem;
          font-weight: 700;
          color: var(--sitio-tinta-1);
        }

        .site-header .mobile-menu a:not(:last-child){
          border-bottom: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 13%, transparent);
        }

        .section{
          padding: 64px 0;
        }

        .btn{
          min-height: 52px;
          font-size: 1rem;
          font-weight: 800;
        }

        .sol-fab{
          width: 60px;
          height: 60px;
        }

        /* En móvil el mensaje emergente invade copy y CTA. Sol queda disponible
           mediante el botón fijo, pero nunca se interpone sobre la lectura. */
        .sol-nudge{
          display: none;
        }

        .sol-panel{
          position: fixed;
          left: max(12px,env(safe-area-inset-left));
          right: max(12px,env(safe-area-inset-right));
          bottom: calc(84px + env(safe-area-inset-bottom));
          width: auto;
          max-height: calc(100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
          border-radius: 20px;
        }

        .home-hero::after{
          background: linear-gradient(0deg,color-mix(in srgb, var(--sitio-fondo) 98%, transparent) 0%,color-mix(in srgb, var(--sitio-fondo) 86%, transparent) 45%,color-mix(in srgb, var(--sitio-fondo) 18%, transparent) 80%),linear-gradient(90deg,color-mix(in srgb, var(--sitio-fondo) 42%, transparent),transparent 70%);
        }

        .condition-slide, .condition-deck[data-ready="true"] .condition-slide.is-active{
          grid-template-columns: 1fr;
        }

        .condition-slide-copy{
          padding: 34px 26px 42px;
        }

        .care-panel, .care-story[data-ready="true"] .care-panel.is-active{
          grid-template-columns: 1fr;
        }

        .care-media, .care-media img{
          min-height: 360px;
        }

        .parts-grid{
          grid-template-columns: 1fr 1fr;
        }

        .parts-grid .part-card:last-child{
          grid-column: 1/-1;
        }

        .personal-board{
          grid-template-columns: 1fr;
        }

        .personal-buy{
          align-items: flex-start;
          flex-direction: column;
        }

        .personal-buy ul{
          margin-left: 0;
        }

        .home-suits{
          min-height: 0;
          padding: 70px 0 18px;
          scroll-margin-top: 66px;
        }

        .home-suits-grid::-webkit-scrollbar{
          display: none;
        }

        .home-suits .traje-card .body{
          min-height: 195px;
        }

        .site-header .brand{
          min-width: 48px;
          min-height: 48px;
          display: flex;
          align-items: center;
        }

        .mobile-menu{
          display: none;
          flex-direction: column;
          border-top: 1px solid var(--sitio-linea-osc);
          padding: 8px 0;
          background-image: linear-gradient(color-mix(in srgb, var(--sitio-fondo) 88%, transparent),color-mix(in srgb, var(--sitio-fondo) 98%, transparent)),var(--solar-corridor-dark);
          background-size: cover;
        }

        .home-suits-grid{
          overflow-x: auto;
          scrollbar-width: none;
          display: grid;
          grid-template-columns: minmax(0,1fr);
          gap: 18px;
          overflow: visible;
          margin-inline: 0;
          padding: 0;
          scroll-snap-type: none;
        }

        .home-suits .traje-card{
          scroll-snap-align: center;
          flex: none;
          width: 100%;
        }

        .traje-stack-item .ts-top{
          grid-template-columns: 44px minmax(0,1fr);
          padding: 22px 20px 16px;
        }

        .traje-stack-item .carousel-track{
          height: 100%;
        }

        .traje-stack-item .ts-info-grid{
          grid-template-columns: repeat(3,minmax(0,1fr));
          gap: 7px;
          padding: 14px 16px 16px;
        }

        .traje-stack-item .ts-info-card{
          padding: 11px 8px;
          border-radius: 13px;
          box-shadow: none;
        }

        .traje-stack-item .ts-info-card .label{
          font-size: .63rem;
          letter-spacing: 0;
        }

        .traje-stack-item .ts-info-card .value{
          font-size: .86rem;
          overflow-wrap: anywhere;
        }

        .traje-stack-item .ts-info-card .price-val{
          font-size: .98rem;
        }

        .traje-stack-item>div:last-child{
          padding: 0 16px 18px;
        }

        :root{
          --syt-header-h: 70px;
        }

        .wrap{
          padding-left: 20px;
          padding-right: 20px;
          padding-inline: clamp(18px,5vw,28px);
        }

        .home-hero-copy{
          max-width: 100%;
          padding: 0;
        }

        .home-hero::before{
          display: none;
        }

        .home-hero .wrap{
          z-index: 3;
        }

        .home-hero-copy>p{
          max-width: 100%;
          background: none;
          border: 0;
          box-shadow: none;
          padding: 0;
        }

        .home-suits .traje-card>img{
          max-height: none;
          height: 240px;
        }

        .traje-stack-item{
          display: block;
          margin-bottom: 34px;
          padding: 0;
          position: relative;
          top: auto;
          height: auto;
          min-height: 0;
          max-height: none;
          overflow: visible;
        }

        .traje-stack-item .carousel{
          margin: 0 14px;
          width: calc(100% - 28px);
          padding: 0;
          height: 300px;
        }

        .traje-stack-item .carousel-track img{
          height: 100%;
          flex: 0 0 86%;
          aspect-ratio: auto;
          object-fit: contain;
        }

        .stepper-row{
          display: flex;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          padding-bottom: 4px;
        }

        .stepper-pill{
          flex: 0 0 min(230px,72vw);
          scroll-snap-align: start;
        }

        .site-header .mobile-menu .mobile-nav-cta{
          justify-content: center;
          margin: 10px 0;
          border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 16%, transparent);
          border-radius: 14px;
          background: linear-gradient(135deg,var(--syt-coral),var(--syt-orange));
          color: var(--sitio-tinta-1);
          box-shadow: 0 16px 30px -22px color-mix(in srgb, var(--syt-coral-vivo) 85%, transparent);
        }

        .site-header .wrap{
          padding-left: max(18px,env(safe-area-inset-left));
          padding-right: max(18px,env(safe-area-inset-right));
          gap: 12px;
          padding-inline: max(20px,env(safe-area-inset-left));
        }

        .hero-premium{
          display: block;
          min-height: 0;
          padding-block: 76px 64px;
        }

        .hero-premium .wrap-wide.hero-layout{
          grid-template-columns: 1fr;
          gap: 32px;
        }

        .hero-premium .device-frame{
          max-width: 620px;
        }

        .hero-premium::after{
          right: -58vw;
          top: -42vw;
        }

        footer .footer-grid, footer .jack-footer-grid, footer .foot-grid{
          grid-template-columns: repeat(2,minmax(0,1fr));
          padding-inline: max(20px,env(safe-area-inset-left));
          gap: 28px;
        }

        footer .footer-grid> :first-child, footer .jack-footer-grid> :first-child, footer .foot-grid> :first-child{
          grid-column: 1/-1;
        }

        footer .footer-bottom, footer .jack-footer-bottom, footer .foot-bottom{
          padding-inline: max(20px,env(safe-area-inset-left));
          padding-bottom: max(20px,env(safe-area-inset-bottom));
        }

        .site-header{
          padding: 10px 0;
          padding-top: max(10px,env(safe-area-inset-top));
          background: var(--sitio-fondo-alt);
          background-position: 70% center;
          min-height: 66px;
        }

        .site-header .mobile-menu.open{
          display: flex;
        }

        .home-hero{
          align-items: end;
          display: grid;
          grid-template-columns: minmax(0,1fr);
          grid-template-rows: auto auto auto;
          min-height: 0;
          padding: 0 0 36px;
          background: var(--sitio-fondo);
          overflow: visible;
        }

        .home-hero>.wrap, .home-hero-copy{
          display: contents;
        }

        .home-hero-intro{
          grid-row: 1;
          padding: 25px max(20px,env(safe-area-inset-left)) 16px;
        }

        .home-hero-intro .tag{
          margin-bottom: 14px;
        }

        .home-hero .hero-title{
          max-width: 12ch;
          margin: 0 0 11px;
          font-size: clamp(2.35rem,10vw,3.2rem);
          line-height: .92;
          letter-spacing: -.065em;
        }

        .home-hero-story{
          max-width: 22ch;
          margin: 0;
          font-size: clamp(1.08rem,4.6vw,1.34rem);
          line-height: 1.08;
        }

        .home-hero-detail{
          grid-row: 3;
          width: calc(100% - 40px);
          max-width: none;
          margin: 0 20px;
          padding: 17px;
        }

        .home-hero-detail>p{
          margin-bottom: 14px;
          font-size: .94rem;
          line-height: 1.45;
        }

        .home-hero-actions{
          display: grid;
          grid-template-columns: 1fr;
          gap: 10px;
        }

        .home-hero-actions .btn{
          width: 100%;
          min-height: 48px;
          padding-block: 11px;
          justify-content: center;
        }

        .condition-slide-index{
          flex-direction: row;
          min-height: 112px;
          padding: 18px;
          align-items: center;
        }

        .condition-slide-index span{
          font-size: clamp(1.35rem,5vw,1.8rem);
        }

        .condition-slide-index small{
          max-width: 45%;
          text-align: right;
        }

        .site-header .mobile-menu{
          display: none;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          border-top: 1px solid var(--sitio-linea-osc);
          box-shadow: 0 20px 35px color-mix(in srgb, var(--sitio-fondo) 25%, transparent);
          padding-top: 12px;
          padding-bottom: max(22px,env(safe-area-inset-bottom));
          gap: 0;
          max-height: calc(100dvh - 66px);
          padding: 8px max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
          background: var(--sitio-fondo);
          background-image: radial-gradient(circle at 92% 8%,color-mix(in srgb, var(--syt-coral) 18%, transparent),transparent 30%);
          overflow-y: auto;
          overscroll-behavior: contain;
        }

        .home-hero-media img{
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: 50% 50%;
        }

        .home-hero-intro, .home-hero-detail{
          max-width: 640px;
          margin-inline: auto;
        }

        .home-hero-media{
          display: block;
          grid-row: 2;
          order: initial;
          position: relative;
          inset: auto;
          width: calc(100% - 40px);
          margin: 0 20px 22px;
          border: 1px solid color-mix(in srgb, var(--sitio-tinta-1) 16%, transparent);
          border-radius: 22px;
          overflow: hidden;
          background: var(--sitio-fondo-alt);
          box-shadow: 8px 8px 0 color-mix(in srgb, var(--syt-coral) 13%, transparent),0 24px 50px -36px color-mix(in srgb, var(--syt-coral-vivo) 62%, transparent);
          height: clamp(290px,74vw,390px);
          aspect-ratio: 4/5;
          max-width: 600px;
          margin-inline: auto;
        }

        .val-grid{
          grid-template-columns: 1fr;
        }

        .val-card summary{
          min-height: 96px;
          padding: 18px;
        }

        .val-card .val-body{
          padding: 0 16px 18px;
        }

        .hero-premium .hero-copy, .guide-hero>.hero-copy{
          text-align: left;
        }

        .hero-premium .hero-title{
          max-width: 10.5ch;
          font-size: clamp(2.25rem,11vw,3.45rem);
          line-height: .94;
        }

        .guide-hero{
          gap: 24px;
        }

        .record-card{
          padding: 22px;
        }

        .sol-fab::before, .sol-fab::after, .whatsapp-pulse, .site-header .nav-actions .btn-primary, .home-hero .btn-primary{
          animation: none;
        }

        .syt-privacy-notice{
          left: 10px;
          right: 10px;
          bottom: max(9px,env(safe-area-inset-bottom));
          width: auto;
          grid-template-columns: minmax(0,1fr) auto;
          gap: 9px;
          padding: 10px 11px;
          border-radius: 14px;
        }

        .syt-privacy-notice strong{
          margin: 0;
          font-size: .82rem;
          line-height: 1.15;
        }

        .syt-privacy-notice p{
          display: none;
        }

        .syt-privacy-actions{
          justify-content: space-between;
          gap: 7px;
        }

        .syt-privacy-actions a{
          font-size: .7rem;
        }

        .syt-privacy-actions button{
          min-width: 74px;
          min-height: 40px;
          padding: 8px 10px;
          font-size: .75rem;
        }

        body:has(.syt-privacy-notice) .sol-root{
          opacity: 0;
          transform: translateY(14px);
          pointer-events: none;
        }

        body:has(.syt-privacy-notice){
          padding-bottom: 84px;
        }
  }

  .site-header .mobile-menu.open{
      display:flex;
    }
}

@media (prefers-reduced-motion:reduce){
  @layer legacy{
    html{
          scroll-behavior: auto;
        }

        .sol-fab::before, .sol-fab::after, .sol-typing span{
          animation: none;
        }

        .photo img, .traje-card img, .carousel-track img{
          transition: none;
        }

        .condition-deck[data-ready="true"] .condition-slide.is-active, .care-story[data-ready="true"] .care-panel.is-active, .req-flow[data-ready="true"] .blk.is-active{
          animation: none;
        }

        *{
          scroll-behavior: auto;
        }

        .traje-card:hover{
          transform: none;
        }

        *, *::before, *::after{
          animation-duration: .01ms;
          animation-iteration-count: 1;
          transition-duration: .01ms;
          animation: none;
          transition: none;
          scroll-behavior: auto;
        }

        .home-hero-intro, .home-hero-media, .home-hero-detail{
          animation: none;
        }

        .syt-motion-item{
          opacity: 1;
          transform: none;
          transition: none;
        }

        .syt-privacy-notice{
          transition: none;
        }

        .mobile-nav-guides summary::after{
          transition: none;
        }
  }

  :root{ --t-1:.01ms; --t-2:.01ms; --t-3:.01ms; }

  *, *::before, *::after{
      animation-duration:var(--t-1);
      animation-iteration-count:1;
      transition-duration:var(--t-1);
      scroll-behavior:auto;
    }
}

/* ---------------------------------------------------------------------------
   Tarjeta de dato · el patrón de las referencias
   ---------------------------------------------------------------------------
   Las tres cifras del home (precio, garantía, reserva) vivían sueltas sobre
   una sección con textura que renderiza en tono medio (pixel 163-179): ni la
   tinta clara ni la oscura cumplían, porque el fondo no es ni una cosa ni la
   otra. Cuatro fallas medidas entre 2.11 y 2.51.

   La solución es la de Finexy y Donezo: el dato vive en su propia tarjeta,
   con placa opaca, y la jerarquía en tres tiempos —etiqueta chica arriba,
   cifra grande al medio, descripción abajo— separada con aire.
   --------------------------------------------------------------------------- */
.dato-card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3, 12px);
  padding: var(--e-6, 32px) var(--e-5, 24px);
  border-radius: var(--r-4, 24px);
  background: var(--sitio-claro);
  border: 1px solid var(--sitio-linea);
  box-shadow: var(--s-2, 0 4px 12px -4px rgba(7,7,7,.12));
}

.dato-card .section-title{
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1.05;
}

.dato-card .price{
  color: var(--syt-coral-texto);
}

.dato-card p{
  margin: 0;
  color: var(--sitio-tinta-osc-2);
  font-size: .96rem;
  line-height: 1.55;
  max-width: 34ch;
}

@media (max-width: 768px){
  .dato-card{ padding: var(--e-5, 24px) var(--e-4, 16px) }
}

/* El número de la pestaña de cuidados heredaba la tinta clara del botón
   inactivo (blanco sobre fondo translúcido). Al activarse, el botón se vuelve
   BLANCO pero el número seguía claro: 1.5 de contraste. Hereda del botón, que
   ya cambia de tinta según su estado. */
.care-tab.is-active span{
  color: inherit;
}

/* ---------------------------------------------------------------------------
   Los últimos casos, cada uno con selector estrecho
   ---------------------------------------------------------------------------
   Aprendizaje de esta sesión: cada vez que usé un selector amplio para cerrar
   los últimos casos, rompí páginas que ya estaban bien. Estos van al hueso.
   --------------------------------------------------------------------------- */

/* anatomía · párrafos sobre fotografía de tono medio (pixel 107-112). La tinta
   secundaria daba 3.36-3.67 contra el 4.5 que pide el texto normal; el blanco
   puro sobre ese mismo fondo da 4.7. */
body[data-page="anatomia-traje-tobas"] .section.soft .card.pad p,
body[data-page="anatomia-traje-tobas"] .section.soft .wrap p,
body[data-page="anatomia-traje-tobas"] .section.soft .wrap p.lead{
  color: var(--sitio-tinta-1);
}

/* solicitud · el `strong` de la bajada quedaba tinta oscura sobre el hero
   negro (1.04). En el hero la tinta va clara. */
body[data-page="solicitud"] .req-hero .lead strong,
body[data-page="solicitud"] .req-hero .lead b,
body[data-page="solicitud"] .req-hero .lead{
  color: var(--sitio-tinta-1);
}

/* solicitud · la miga de pan marca el paso actual con una pastilla coral, y el
   texto de adentro usaba el coral de TEXTO (2.05). Sobre relleno, va blanco. */
body[data-page="solicitud"] .crumbs span{
  color: var(--sitio-tinta-1);
}

/* ---------------------------------------------------------------------------
   Velo de los heros con fotografía
   ---------------------------------------------------------------------------
   Los últimos casos no son de color: la tinta ya es blanca y el fondo es una
   foto de tono medio (pixel 130-176), así que el blanco da 2.28-3.86 contra el
   4.5 que pide el texto normal.

   La solución de las referencias no es aclarar más el texto —ya es blanco—
   sino oscurecer la imagen debajo de él. El degradado del hero pasa de 58% a
   82% en su lado claro: la foto se sigue viendo, el texto se lee.
   --------------------------------------------------------------------------- */
main>.section-light:first-child:not(.home-hero),
main>.guide-hero:first-child,
main>.req-hero:first-child,
.contact-hero, .local-hero, .intranet-hero, .conditions-hero{
  background-image:
    linear-gradient(90deg,
      color-mix(in srgb, var(--sitio-fondo) 97%, transparent),
      color-mix(in srgb, var(--sitio-fondo) 82%, transparent)),
    var(--solar-eclipse-dark);
}

/* anatomía · las tarjetas de la sección con textura: la imagen sube el fondo a
   tono medio. Se le refuerza la placa sin perder la textura del contenedor. */
body[data-page="anatomia-traje-tobas"] .section.soft .card.pad{
  background-color: var(--sitio-fondo-alt);
  background-image: none;
}

/* ---------------------------------------------------------------------------
   solicitud · placa propia para la bajada del hero
   ---------------------------------------------------------------------------
   La sección declara fondo negro (rgb(7,7,7)) y sin embargo el pixel detrás del
   texto mide rgb(150,158,165): hay una capa clara que no aparece en la cadena
   de ancestros —muy probablemente un pseudo-elemento decorativo— y por eso el
   blanco daba 2.28.

   No se persigue esa capa: se le da al texto su propia placa, que es el método
   que ya resolvió la calculadora del catálogo y las tarjetas del home. Así el
   contraste deja de depender de lo que haya debajo.
   --------------------------------------------------------------------------- */
body[data-page="solicitud"] .req-hero .lead,
body[data-page="solicitud"] .req-hero .crumbs{
  position: relative;
  display: inline-block;
  padding: var(--e-3, 12px) var(--e-4, 16px);
  border-radius: var(--r-2, 12px);
  background: var(--sitio-fondo);
}

/* catálogo · la nota del alfiler usaba un velo coral al 9% sobre la fotografía
   del bloque: el pixel real quedaba en tono medio y la tinta oscura daba 1.71.
   Placa opaca con el mismo tinte coral, ahora sobre base sólida. */
body[data-page="catalogo"] .pin-note,
body[data-page="catalogo"] .personal-choice .pin-note,
body[data-page="catalogo"] .personal-cord .pin-note,
body[data-page="catalogo"] .personal-board .pin-note{
  /* Valor plano a propósito, no `color-mix()`: la sonda sellada de
     `qa_contraste.mjs` solo interpreta `rgb()/rgba()`, y ante un `color-mix()`
     sube por los ancestros hasta encontrar un blanco, reportando una falla que
     no existe. Es #f24a32 al 12% sobre #070707, calculado. Así las dos sondas
     —la del CSS declarado y la del pixel real— coinciden. */
  background: rgb(35, 15, 12);
  color: var(--sitio-tinta-2);
}

body[data-page="catalogo"] .pin-note strong,
body[data-page="catalogo"] .pin-note b{
  color: var(--sitio-tinta-1);
}

/* ---------------------------------------------------------------------------
   Móvil · el velo de los heros tiene que ser más denso
   ---------------------------------------------------------------------------
   A 390px la imagen ocupa proporcionalmente más de la caja del texto y el
   degradado la tapa menos: el pixel real sube a 103-129 y la tinta clara queda
   entre 3.36 y 4.36, bajo el 4.5.
   En escritorio el mismo velo alcanza; aquí se cierra un poco más. La foto no
   desaparece: sigue leyéndose en los bordes y detrás del bloque de texto.
   --------------------------------------------------------------------------- */
@media (max-width: 768px){
  main>.section-light:first-child:not(.home-hero),
  main>.guide-hero:first-child,
  main>.req-hero:first-child,
  .contact-hero, .local-hero, .intranet-hero, .conditions-hero,
  .section.soft{
    background-image:
      linear-gradient(180deg,
        color-mix(in srgb, var(--sitio-fondo) 93%, transparent),
        color-mix(in srgb, var(--sitio-fondo) 90%, transparent)),
      var(--solar-eclipse-dark);
  }

  /* Las comunas: el resumen del acordeón sobre su tarjeta con foto. */
  .local-section summary, .local-faq summary{
    background: var(--sitio-claro);
    color: var(--sitio-tinta-osc-1);
  }
}

/* Móvil · placa propia para la bajada de los heros que siguen sobre foto.
   El velo no alcanzó en estas páginas (pixel 103-112, ratios 3.36-3.92); la
   placa opaca cierra el caso sin tocar la imagen del resto del hero. */
@media (max-width: 768px){
  body[data-page="condiciones"] main>.section-light:first-child>.wrap>p,
  body[data-page="preguntas-frecuentes"] main>.section-light:first-child>.wrap>p,
  body[data-page="guia-visual-traje"] .section.soft .wrap>p,
  body[data-page="anatomia-traje-tobas"] .section.soft .wrap>p,
  body[data-page="anatomia-traje-tobas"] .section.soft .wrap>p.lead{
    padding: var(--e-3, 12px) var(--e-4, 16px);
    border-radius: var(--r-2, 12px);
    background: var(--sitio-fondo);
  }
}

/* Los dos últimos: una tarjeta con textura en guía visual y la bajada de
   anatomía. Mismo tratamiento de placa, cerrando por el contenedor real. */
@media (max-width: 768px){
  body[data-page="guia-visual-traje"] .card.pad{
    background-color: var(--sitio-fondo);
    background-image: none;
  }

  body[data-page="anatomia-traje-tobas"] .lead{
    padding: var(--e-3, 12px) var(--e-4, 16px);
    border-radius: var(--r-2, 12px);
    background: var(--sitio-fondo);
  }
}

/* ===========================================================================
   LECTURA Y TOQUE · lo que el contraste no mide
   ---------------------------------------------------------------------------
   Medido con `scripts/qa_layout.mjs`, móvil y escritorio por separado.
   =========================================================================== */

/* 34 párrafos pasaban de 82 caracteres por línea en escritorio. El sistema
   define 60-75 (`--medida: 68ch`) y no se estaba aplicando: por eso varias
   secciones se leían como un ladrillo. El ancho se limita en el párrafo, no en
   el contenedor, para no romper grillas ni tarjetas. */
main :is(p, li, dd):not(.tag):not(.eyebrow):not([class*="num"]){
  max-width: var(--medida, 68ch);
}

/* Los párrafos centrados conservan su centro al acortarse. */
main :is(.section-head, [style*="text-align:center"]) > p{
  margin-inline: auto;
}

/* Nada de texto bajo el mínimo del sistema (0.78rem = 12.5px). Había 29 casos
   en móvil y 21 en escritorio por debajo de 12px: ilegibles de cerca. */
main :is(.label, .pin-badge, .personal-kicker, .eyebrow, small, figcaption){
  font-size: max(0.78rem, 1em);
}

main small, main figcaption, main .label{
  font-size: 0.78rem;
}

/* Controles pegados: dos áreas táctiles sin separación hacen tocar la
   equivocada. Había 5 pares en móvil y 2 en escritorio. */
.stepper, .stepper-row, .tabs, .tab-row, .form-actions, .actions-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2, 8px);
}

.stepper-pill + .stepper-pill,
.save-ficha + .btn, .btn + .save-ficha{
  margin-inline-start: var(--e-2, 8px);
}

/* Móvil · los chips de talla y los precios no pueden salirse de la pantalla.
   Se dejan envolver en vez de empujar. */
@media (max-width: 768px){
  .size-chip, .price, .num{
    overflow-wrap: anywhere;
  }

  .size-grid, .size-row, .chip-row{
    flex-wrap: wrap;
    gap: var(--e-2, 8px);
  }
}

/* ===========================================================================
   EL AVISO DE PRIVACIDAD YA NO TAPA CONTENIDO
   ---------------------------------------------------------------------------
   Es un elemento fijo de 560x112 anclado abajo, y estaba cubriendo 8 trozos de
   contenido medidos en escritorio (dos `h2`, dos párrafos, el botón anterior
   del carrusel de catálogo...). Se veía en las propias capturas: el recuadro
   flotando sobre el hero.

   Mientras está en pantalla, la página le RESERVA sitio. Al aceptar, el aviso
   se borra del DOM —no se oculta— así que `:has()` retira el colchón solo, sin
   que haga falta ni una línea de JavaScript.
   =========================================================================== */
body:has(.syt-privacy-notice){
  padding-bottom: 150px;
}

@media (max-width: 768px){
  body:has(.syt-privacy-notice){
    padding-bottom: 200px;
  }
}

/* Y se estrecha. Con 560px de ancho llegaba hasta x=594 y se posaba justo
   encima del botón "anterior" del carrusel de catálogo (x=572): no era que se
   viera mal, es que el botón NO SE PODÍA PULSAR. Comprobado con
   `elementFromPoint`: en el centro del botón respondía el aviso.

   Además se compacta: cuanto menos ocupa, menos contenido tapa mientras está
   en pantalla. Es un aviso de primera visita —al aceptarlo se borra y no
   vuelve—, así que su trabajo es decir lo justo y quitarse de en medio. */
.syt-privacy-notice{
  max-width: min(420px, calc(100vw - 32px));
  gap: 14px;
  padding: 14px 16px;
  font-size: .84rem;
  line-height: 1.35;
}

.syt-privacy-notice p{
  margin: 4px 0 0;
}

.syt-privacy-notice strong{
  font-size: .9rem;
}

/* Dos controles pegados se tocan con el dedo por error. La guía pide 8px de
   separación; estas pestañas quedaban en 4.

   Poner `gap` no bastaba: el contenedor computaba `display: block`, y en un
   bloque el `gap` NO HACE NADA —se declara, se lee bien en la hoja y el
   navegador lo ignora—. Los 4px que quedaban eran el espacio entre elementos
   en línea. Hay que hacerlo contenedor flex para que el `gap` exista. */
.val-tabs{
  display: flex;
  gap: 12px;
}

/* Este `span` sin clase medía 11.9px. Se apunta con `:not([class])` a
   propósito: sus hermanos SÍ llevan clase y uno es el titular a 2rem, así que
   una regla para todos los `span` del bloque lo encogería a la mitad. */
.personal-warning span:not([class]){
  font-size: .75rem;
}

/* ---------------------------------------------------------------------------
   EL BOTÓN "+" DE LA COTIZACIÓN SE SALÍA DE LA PANTALLA
   ---------------------------------------------------------------------------
   A 390px quedaba en x=435 de un viewport de 390: fuera, inalcanzable. Y el
   catálogo se cotiza desde el teléfono, así que no se podía subir la cantidad
   de trajes.

   La causa es la de siempre en flex y grid: la etiqueta lleva `flex: 1`, que
   pone la base en 0 pero NO toca `min-width: auto`, así que se niega a encoger
   por debajo de su texto y empuja al resto fuera de la caja. Es el mismo fallo
   que cortaba las tablas de tallas del panel.
   --------------------------------------------------------------------------- */
.calc-row label{
  min-width: 0;
}

@media (max-width: 768px){
  /* En un teléfono la etiqueta va arriba y el contador debajo, entero y
     centrado: más aire y ningún control fuera de alcance. */
  .calc-row{
    flex-wrap: wrap;
  }

  .calc-row label{
    flex: 1 1 100%;
    margin-bottom: 4px;
  }

  .calc{
    padding: 20px;
  }
}

.save-ficha + .btn, .save-ficha + button,
#btn-save-ficha + button{
  margin-left: 12px;
}

/* Área de toque en móvil · 93 enlaces del pie medían 161x34 y los controles
   del portal 12 px de alto. La guía pide 44x44 como mínimo para el dedo.

   Los selectores por clase no bastaban: los enlaces del pie cuelgan de un
   `div` SIN clase dentro de `.foot-grid`, así que `.footer-col a` no llegaba
   y seguían midiendo 34 px de alto. Se ataca por el elemento `footer`, que es
   lo único estable. */
@media (max-width: 768px){
  /* `flex`, NO `inline-flex`: con `inline-flex` el enlace se encoge a su
     texto y pasaron de 161x34 a 38x44 —alto correcto, ancho inservible— y la
     medición empeoró de 21 a 23. En una lista de pie el enlace ocupa la fila
     entera, que es lo que da un blanco cómodo para el dedo. */
  /* 48 para que cuadre con el resto, pero esta regla NO es la que manda: más
     abajo, en el bloque de 640px, `body footer a[href]` la gana. El porqué del
     48 está escrito allá. */
  footer a,
  .site-footer a, .jack-footer a, .footer-col a,
  .foot-grid a{
    display: flex;
    align-items: center;
    min-height: 48px;
  }

  /* En cambio esta va en línea dentro de una fila de acciones: aquí el ancho
     completo rompería la fila, así que se ensancha con relleno. */
  .syt-privacy-actions a{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    padding-inline: 8px;
  }

  /* El logotipo medía 35x24: es el enlace al inicio y hay que poder darle. */
  a.brand, .brand{
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
    min-width: 44px;
  }

  /* Los campos de formulario venían con el tamaño por defecto del navegador
     (13.33 px). Por debajo de 16 px, Safari en iPhone hace ZOOM al enfocar y
     descoloca la página entera: es la causa de que al escribir el correo la
     solicitud "salte". 16 px lo evita y además se lee mejor. */
  input, select, textarea{
    font-size: 16px;
  }

  /* Nada de texto por debajo de 12 px en un teléfono. */
  .sp-tx, .mini, .tiny, small.xs{
    font-size: 12px;
  }

  .btn-login, .add-ficha, .save-ficha, .close,
  button.btn-login, button.add-ficha, button.save-ficha, button.close{
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ===========================================================================
   PALETA DE TRES COLORES · el naranjo lleva texto NEGRO
   ---------------------------------------------------------------------------
   Blanco sobre #ff6a13 da 2.6 y no cumple. Negro da 8.9. Es además lo que hace
   la referencia KTM: bloques naranjos con tipografía negra.
   Todo lo que sea RELLENO naranjo cambia su tinta a negro de una vez.
   =========================================================================== */
body .tag,
.btn-primary, .btn-coral, .mobile-nav-cta,
.site-header .nav-actions>.btn-primary,
.personal-number, .condition-slide-index span, .condition-key,
.calc-total.final .btn, .val-table th{
  background: var(--naranjo);
  color: var(--negro);
  border-color: var(--naranjo);
}

.btn-primary:hover, .btn-coral:hover,
.site-header .nav-actions>.btn-primary:hover{
  background: var(--naranjo-hover);
  color: var(--negro);
}

/* El acento sobre fondo NEGRO sí va naranjo vivo: 5.9 de contraste. */
.section-dark :is(.eyebrow, .condition-eyebrow),
.hero-premium .eyebrow, .guide-hero .eyebrow,
main>.section-light:first-child:not(.home-hero) .eyebrow{
  color: var(--naranjo);
}

/* El acento como TEXTO sobre blanco usa la versión oscurecida. */
.section-light .eyebrow, .card .eyebrow, .val-card .eyebrow{
  color: var(--naranjo-texto);
}

/* ===========================================================================
   LOS DOS ROLES DEL NARANJO · cierre del cambio de paleta
   ---------------------------------------------------------------------------
   El puente `--syt-coral: var(--naranjo)` fue un error propio: la paleta vieja
   tenía CUATRO tokens con roles distintos (marca, vivo, texto, relleno) y los
   colapsé todos en el naranjo vivo. Eso rompió 59 medidas del sitio de un
   golpe, en dos modos y solo dos:

     A · blanco como tinta sobre RELLENO naranjo   → 2.87, pide 4.5
     B · naranjo vivo como TINTA sobre blanco      → 2.87, pide 4.5

   El naranjo tiene dos roles y no son intercambiables:
     · RELLENO  #ff6a13 → su letra va NEGRA        (6.90)
     · TINTA    sobre blanco va #a63c00            (6.43)
     · TINTA    sobre negro  va #ff6a13            (6.90)
   =========================================================================== */

/* --- A · relleno naranjo, letra negra ------------------------------------ */
body :is(
  .tag, .sp-num, .personal-number,
  .condition-tab.is-active, .condition-nav-next, .condition-key,
  .condition-slide-index span,
  .btn-primary, .btn-coral, .btn-login, .mobile-nav-cta,
  .syt-privacy-actions button,
  .tabs button.active, .tab-btn.active,
  .site-header .nav-actions>.btn-primary
){
  color: var(--negro);
}

/* Las cabeceras de tabla de las guías llevan relleno naranjo. */
body[data-page="anatomia-traje-tobas"] table th,
body[data-page="guia-visual-traje"] table th{
  color: var(--negro);
}

/* Las pestañas de valorización se pintan con `body[data-page=...]`, así que
   hay que igualar esa fuerza para ganarles; van después, así que basta. */
body[data-page="valorizacion"] .val-tabs button.active{
  color: var(--negro);
}

/* --- B · naranjo como tinta sobre superficie clara ----------------------- */
/* `.ts-price` y `.ts-num` NO van aquí: viven en la pila de trajes de catálogo,
   que se pinta sobre #141414. Meterlos en la tinta clara los dejó en 2.87.
   Sobre oscuro les corresponde el naranjo vivo, que ya tienen más arriba. */
.section-light :is(.price, .story-line, .care-label, .personal-kicker,
                   .pin-badge),
.section.soft :is(.price, .story-line),
.card .price, .traje-card .price, .home-suits .price, .dato-card .price,
.personal-buy>span, .consent-box a,
.calc-total.final b, .sol-nudge strong, .care-copy li::before{
  color: var(--naranjo-texto);
}

/* `.cord-fit-grid` vive dentro de `.personal-choice`, que en catálogo se pinta
   sobre fondo OSCURO. Ahí el naranjo que corresponde es el vivo (6.90); el
   oscurecido daba 3.08. Es el mismo bloque de superficie mixta que ya está
   documentado más arriba: hasta que su HTML se rehaga, se trata como oscuro. */
.cord-fit-grid span{
  color: var(--naranjo);
}

/* ===========================================================================
   EL MOVIMIENTO SE APAGA ENTERO · Fase 6
   ---------------------------------------------------------------------------
   Ya habia bloques de `prefers-reduced-motion`, pero ENUMERABAN selectores, y
   una lista siempre se queda corta: medido, 175 elementos seguian moviendose
   con la preferencia activada. Para alguien con vertigo o migrana eso no es un
   detalle estetico.

   `.01ms` y no `none` a proposito: con duracion cero el navegador no dispara
   `transitionend` ni `animationend`, y cualquier JavaScript que espere ese
   evento se queda colgado. Asi el movimiento desaparece pero la mecanica
   sigue funcionando.

   Va al final y FUERA de cualquier capa: dentro de `@layer` perderia contra
   las reglas sin capa que ya existen en esta hoja.
   =========================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   TARJETAS OSCURAS DENTRO DE SECCIONES CLARAS
   ---------------------------------------------------------------------------
   Al pasar los titulos de `h4` a `h3` y de `h3` a `h2` (por accesibilidad:
   saltarse un nivel rompe el indice del documento) estos dos cambiaron de
   dueño en la cascada y quedaron NEGROS SOBRE NEGRO:

     `.traje-stack-item h2`  → lo captura `.section-light h2` y le da tinta
                               oscura, pero la tarjeta se pinta #141414.
     `.pin-option h3`        → lo captura `body[data-page] .personal-choice h3`
                               con tinta oscura, y la caja es #0a0a0a.

   Es otra vez el error de fondo que ya está documentado en este archivo: la
   tinta la decide la SUPERFICIE que se pinta, no la seccion que la contiene.
   Se ata la regla a la tarjeta, que es la que pone el fondo, y con fuerza
   suficiente para ganarle a la de la seccion.
   =========================================================================== */
body[data-page="catalogo"] .traje-stack-item :is(h2, h3),
body[data-page="catalogo"] .traje-stack-item .ts-desc{
  color: var(--sitio-tinta-1);
}

body[data-page="catalogo"] .pin-option :is(h3, h4),
body[data-page="catalogo"] .cord-fit-grid :is(h3, h4){
  color: var(--sitio-tinta-1);
}

/* ===========================================================================
   EL EYEBROW SOBRE FOTOGRAFÍA · placa opaca, no cambio de color
   ---------------------------------------------------------------------------
   La sonda de pixeles —no la del DOM— encontró estos: 2.17 a 2.76 donde el DOM
   veía todo bien. Son los rótulos naranjos de los heroes de las guías, que
   flotan sobre una foto: el color de la foto cambia de un pixel al siguiente y
   NINGUNA tinta cumple sobre todos.

   Ya está aprendido en este archivo y se aplica otra vez: sobre fotografía no
   se cambia la tinta, se pone una PLACA OPACA debajo. Convertirlos en píldora
   naranja con letra negra los fija en 6.90 pase lo que pase detrás, y de paso
   es el mismo gesto que la referencia.
   =========================================================================== */
.guide-hero .eyebrow,
.hero-premium .eyebrow,
main>.section-light:first-child:not(.home-hero) .eyebrow,
body[data-page="valorizacion"] .impact-card .eyebrow{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--naranjo);
  color: var(--negro);
  font-weight: 700;
}

/* El intro de condiciones y preguntas frecuentes se quedaba en 4.47 con AA en
   4.5. Primero lo di por sentado al reves y lo OSCURECÍ: no cambió nada, y con
   razón. Preguntándole al navegador aparece el motivo de verdad, que es el
   mismo error que ya está documentado arriba en este archivo:

     la sección se llama `.section-light` pero se pinta NEGRA (#0a0a0a).

   La tinta ya era clara (#d6d6d6). Lo que la hunde es la fotografía de tono
   medio que asoma bajo el degradado, y a 390px el recorte cae más claro que a
   1440 —por eso escritorio pasaba y móvil no—. Sobre superficie oscura la
   Intenté tres veces ganarle por TINTA y las tres fallé: hay ocho reglas
   peleándose el color de este párrafo, la que manda pesa (0,4,3) y cada
   selector que escribí para superarla o no casaba o se quedaba corto. El
   número no se movió de 4.47 ni una vez.

   La salida no era subir la especificidad, era dejar de competir. Sobre
   fotografía la respuesta correcta —ya escrita en este mismo archivo— es una
   PLACA OPACA debajo del texto, no un cambio de tinta. Un `background` no
   tiene rivales, así que funciona gane quien gane el color: la tinta clara
   que hay (#d6d6d6) sobre la placa negra da 13.62 en vez de 4.47.

   Además se ve mejor: el párrafo de entrada queda apoyado en su propia
   superficie en vez de flotando sobre la foto. */
.faq-section .faq-intro{
  background: var(--sitio-fondo);
  padding: 14px 18px;
  border-radius: 14px;
  max-width: 58ch;
  margin-inline: auto;
}

/* Catálogo 2026: un comparador único con fotos reales y decisión en contexto. */
.catalog-page {
  --traje-rojo: #c5221e;
  --traje-azul: #1251c6;
  --traje-fucsia: #da208a;
  --traje-morado: #8e1fa0;
  --catalog-accent: var(--traje-rojo);
  background: #fff;
}

.catalog-page main {
  overflow-x: clip;
  overflow-y: visible;
}

.catalog-hero {
  padding: 88px 0 56px;
  background-color: #000;
  background-image: url("../images/surfaces/syt-lamina-dark-v2.webp");
  background-position: center;
  background-size: cover;
  color: #fff;
}

.catalog-hero-inner {
  max-width: 1040px;
}

.catalog-eyebrow,
.catalog-kicker {
  display: block;
  margin-bottom: 12px;
  color: var(--coral);
  font: 800 .73rem/1.2 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.catalog-hero h1 {
  max-width: 14ch;
  margin: 0;
  color: #fff;
  font-size: clamp(2.35rem, 5vw, 4.7rem);
  line-height: .98;
  letter-spacing: -.04em;
}

.catalog-hero > .wrap > p {
  max-width: 700px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.72);
  font-size: clamp(1rem, 1.8vw, 1.16rem);
  line-height: 1.6;
}

.catalog-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.catalog-hero-facts span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 10px;
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.72);
  font-size: .84rem;
}

.catalog-hero-facts strong {
  margin-right: 6px;
  color: #fff;
  font-family: var(--font-mono);
}

.catalog-compare {
  padding: 72px 0 88px;
  background: #fff;
}

.catalog-root {
  max-width: 1180px;
}

.catalog-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.catalog-section-heading h2,
.catalog-planning h2,
.catalog-personal h2,
.catalog-help h2 {
  margin: 0;
  color: var(--black);
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  letter-spacing: -.035em;
}

.catalog-live {
  margin: 0 0 3px;
  color: var(--text-muted);
  font: 700 .8rem/1.3 var(--font-mono);
}

.catalog-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.catalog-tab {
  min-width: 0;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid #d8d5d0;
  border-radius: 10px;
  background: #fff;
  color: #3b3733;
  font-weight: 800;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}

.catalog-tab:hover {
  border-color: #aaa39c;
  transform: translateY(-1px);
}

.catalog-tab.is-active {
  border-color: #000;
  background: #000;
  color: #fff;
}

.catalog-tab:focus-visible,
.catalog-gallery-choice:focus-visible,
.catalog-disclosures summary:focus-visible,
.catalog-faq-list summary:focus-visible,
.catalog-qty-control button:focus-visible {
  outline: 3px solid rgba(240,69,46,.42);
  outline-offset: 3px;
}

.catalog-swatch {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 2px solid rgba(255,255,255,.42);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}

.catalog-swatch-rojo { background: var(--traje-rojo); }
.catalog-swatch-azul { background: var(--traje-azul); }
.catalog-swatch-fucsia { background: var(--traje-fucsia); }
.catalog-swatch-morado { background: var(--traje-morado); }

.catalog-product {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(350px, .92fr);
  gap: 34px;
  padding: 30px;
  border: 1px solid #dedbd6;
  border-top: 4px solid var(--catalog-accent);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 52px rgba(28,24,20,.08);
}

.catalog-product.color-rojo { --catalog-accent: var(--traje-rojo); }
.catalog-product.color-azul { --catalog-accent: var(--traje-azul); }
.catalog-product.color-fucsia { --catalog-accent: var(--traje-fucsia); }
.catalog-product.color-morado { --catalog-accent: var(--traje-morado); }

.catalog-gallery {
  min-width: 0;
}

.catalog-gallery-track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 13px;
  background: #fff;
}

.catalog-gallery-track::-webkit-scrollbar {
  display: none;
}

.catalog-slide {
  position: relative;
  min-width: 100%;
  margin: 0;
  scroll-snap-align: start;
}

.catalog-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  background: #fff;
}

.catalog-slide figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 7px 10px;
  border-radius: 7px;
  background: rgba(9,9,9,.82);
  color: #fff;
  font: 700 .72rem/1 var(--font-mono);
}

.catalog-gallery-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.catalog-gallery-choice {
  min-height: 44px;
  border: 1px solid #d8d5d0;
  border-radius: 8px;
  background: #fff;
  color: var(--text-muted);
  font-weight: 800;
}

.catalog-gallery-choice.is-active {
  border-color: var(--catalog-accent);
  color: var(--catalog-accent);
  box-shadow: inset 0 -2px 0 var(--catalog-accent);
}

.catalog-photo-pending {
  min-height: 500px;
  display: grid;
  place-items: center;
  padding: 36px;
  border: 1px solid #d7ceea;
  border-radius: 13px;
  background: #fff;
  text-align: center;
}

.catalog-photo-pending[hidden],
.catalog-gallery-track[hidden],
.catalog-gallery-controls[hidden] {
  display: none;
}

.catalog-pending-swatch {
  width: 74px;
  height: 74px;
  margin-bottom: 18px;
  border: 10px solid #fff;
  border-radius: 50%;
  background: var(--traje-morado);
  box-shadow: 0 0 0 1px #c9bce2;
}

.catalog-photo-pending p {
  max-width: 360px;
  margin: 0;
  color: #514866;
  font-size: .95rem;
}

.catalog-photo-pending strong {
  display: block;
  margin-bottom: 8px;
  color: #2f263f;
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.catalog-product-copy {
  min-width: 0;
  align-self: center;
}

.catalog-color-label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--catalog-accent);
  color: #fff;
  font: 800 .72rem/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.catalog-product-copy > h2 {
  margin: 14px 0 9px;
  color: var(--black);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.catalog-description {
  margin: 0;
  color: var(--text-muted);
  font-size: .98rem;
  line-height: 1.58;
}

.catalog-price-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}

.catalog-price-row > div {
  padding: 13px 14px;
  border: 1px solid #e0ddd9;
  border-radius: 10px;
  background: #fff;
}

.catalog-price-row span {
  display: block;
  color: var(--text-muted);
  font-size: .72rem;
  line-height: 1.25;
}

.catalog-price-row strong {
  display: block;
  margin-top: 5px;
  color: var(--black);
  font: 800 1.12rem/1 var(--font-mono);
}

.catalog-exclusion {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  border-left: 4px solid var(--coral);
  border-radius: 7px;
  background: #fff;
  color: #3d3d3d;
  font-size: .82rem;
  line-height: 1.45;
}

.catalog-exclusion strong {
  color: #9d301b;
}

.catalog-includes {
  margin-top: 18px;
}

.catalog-includes h3 {
  margin: 0 0 10px;
  color: var(--black);
  font-size: 1rem;
}

.catalog-includes ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalog-includes li {
  position: relative;
  padding-left: 20px;
  color: #4d4945;
  font-size: .86rem;
  line-height: 1.45;
}

.catalog-includes strong {
  color: var(--black);
}

.catalog-includes li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .48em;
  width: 8px;
  height: 8px;
  border: 2px solid var(--catalog-accent);
  border-radius: 50%;
}

.catalog-disclosures {
  display: grid;
  gap: 6px;
  margin-top: 18px;
}

.catalog-disclosures details,
.catalog-faq-list details {
  border-top: 1px solid #dedbd6;
}

.catalog-disclosures summary,
.catalog-faq-list summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: var(--black);
  font-weight: 800;
  list-style: none;
}

.catalog-disclosures summary::-webkit-details-marker,
.catalog-faq-list summary::-webkit-details-marker {
  display: none;
}

.catalog-disclosures summary::after,
.catalog-faq-list summary::after {
  content: "+";
  width: 20px;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--coral);
  font: 800 1.1rem/1 var(--font-mono);
}

.catalog-disclosures details[open] summary::after,
.catalog-faq-list details[open] summary::after {
  content: "−";
}

.catalog-disclosures details p,
.catalog-faq-list details p {
  margin: 0;
  padding: 0 26px 14px 0;
  color: var(--text-muted);
  font-size: .84rem;
  line-height: 1.55;
}

.catalog-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.catalog-primary-action {
  min-height: 50px;
  flex: 1 1 auto;
  padding: 12px 18px;
  border-radius: 9px;
  text-align: center;
}

.catalog-text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--text-dark);
  font-size: .84rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.catalog-planning {
  padding: 84px 0;
  background: #000;
  color: #fff;
}

.catalog-planning-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .75fr);
  align-items: center;
  gap: clamp(40px, 7vw, 90px);
  max-width: 1100px;
}

.catalog-planning h2 {
  color: #fff;
}

.catalog-planning-copy > p {
  max-width: 590px;
  margin: 16px 0 0;
  color: rgba(255,255,255,.67);
}

.catalog-process-list {
  display: grid;
  gap: 0;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.catalog-process-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.13);
}

.catalog-process-list li > span {
  color: var(--coral);
  font: 800 .74rem/1.4 var(--font-mono);
}

.catalog-process-list strong {
  display: block;
  color: #fff;
}

.catalog-process-list p {
  margin: 3px 0 0;
  color: rgba(255,255,255,.6);
  font-size: .84rem;
}

.catalog-calculator {
  padding: 28px;
  border-radius: 16px;
  background: #fff;
  color: var(--text-dark);
}

.catalog-calculator > label {
  display: block;
  margin-bottom: 10px;
  color: var(--black);
  font-weight: 800;
}

.catalog-qty-control {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 8px;
}

.catalog-qty-control button {
  min-width: 48px;
  min-height: 48px;
  border: 1px solid #d8d5d0;
  border-radius: 9px;
  background: #fff;
  color: var(--black);
  font-size: 1.3rem;
}

.catalog-qty-control input[type="number"] {
  width: 100%;
  height: 48px;
}

.catalog-calc-results {
  display: grid;
  gap: 0;
  margin: 18px 0;
}

.catalog-calc-results > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid #e5e2de;
}

.catalog-calc-results dt {
  color: var(--text-muted);
  font-size: .82rem;
}

.catalog-calc-results dd {
  margin: 0;
  color: var(--black);
  font: 800 .9rem/1 var(--font-mono);
}

.catalog-calc-results .catalog-calc-highlight {
  margin: 4px -10px;
  padding: 12px 10px;
  border: 0;
  border-radius: 8px;
  background: #fff;
}

.catalog-calc-highlight dt,
.catalog-calc-highlight dd {
  color: #9d301b;
  font-weight: 800;
}

.catalog-calculator .btn {
  min-height: 50px;
  border-radius: 9px;
}

.catalog-personal {
  padding: 84px 0;
  background: #fff;
}

.catalog-personal-heading {
  max-width: 760px;
}

.catalog-personal-heading > p {
  margin: 16px 0 0;
  color: var(--text-muted);
}

.catalog-personal-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.catalog-personal-items article {
  display: grid;
  grid-template-columns: 190px 1fr;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dedbd6;
  border-radius: 14px;
  background: #fff;
}

.catalog-personal-items img {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: contain;
  background: #fff;
}

.catalog-personal-items article > div {
  align-self: center;
  padding: 22px;
}

.catalog-personal-items span {
  color: var(--coral);
  font: 800 .68rem/1.2 var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.catalog-personal-items h3 {
  margin: 8px 0;
  color: var(--black);
  font-size: 1.2rem;
}

.catalog-personal-items p {
  margin: 0;
  color: var(--text-muted);
  font-size: .86rem;
  line-height: 1.5;
}

.catalog-personal-note {
  margin: 16px 0 0;
  padding: 13px 16px;
  border-left: 4px solid var(--coral);
  background: #fff;
  color: #3d3d3d;
  font-size: .88rem;
}

.catalog-help {
  padding: 84px 0;
  border-top: 1px solid #dedbd6;
  background: #fff;
}

.catalog-help-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(360px, 1fr);
  gap: clamp(40px, 7vw, 90px);
  max-width: 1080px;
}

.catalog-help-grid > div:first-child > p {
  margin: 16px 0 0;
  color: var(--text-muted);
}

.catalog-resource-links {
  display: grid;
  gap: 0;
  margin-top: 24px;
  border-bottom: 1px solid #d8d5d0;
}

.catalog-resource-links a {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #d8d5d0;
  color: var(--text-dark);
  font-weight: 800;
  text-decoration: none;
}

.catalog-resource-links a:hover {
  color: var(--coral);
}

.catalog-faq-list {
  align-self: start;
  padding: 8px 24px;
  border: 1px solid #dedbd6;
  border-radius: 14px;
  background: #fff;
}

.catalog-faq-list details:first-child {
  border-top: 0;
}

.catalog-faq-list summary {
  min-height: 58px;
}

.catalog-faq-list details p {
  font-size: .9rem;
}

.catalog-final-cta {
  padding: 48px 0;
  background: #000;
  color: #fff;
}

.catalog-final-cta .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.catalog-final-cta span {
  color: rgba(255,255,255,.58);
  font: 800 .7rem/1.2 var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.catalog-final-cta h2 {
  margin: 8px 0 0;
  color: #fff;
  font-size: clamp(1.55rem, 3vw, 2.4rem);
}

.catalog-final-cta .btn {
  min-height: 50px;
  flex: 0 0 auto;
  border-radius: 9px;
}

@media (max-width: 900px) {
  .catalog-product,
  .catalog-planning-grid,
  .catalog-help-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .catalog-gallery,
  .catalog-product-copy {
    max-width: 660px;
    width: 100%;
    margin-inline: auto;
  }
  .catalog-photo-pending {
    min-height: 420px;
  }
  .catalog-planning-grid,
  .catalog-help-grid {
    max-width: 720px;
  }
}

@media (max-width: 640px) {
  .catalog-page.catalog-compare-in-view .sol-root {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .catalog-hero {
    padding: 36px 0 30px;
  }
  .catalog-hero h1 {
    font-size: clamp(2.15rem, 11vw, 2.75rem);
  }
  .catalog-hero > .wrap > p {
    margin-top: 18px;
    font-size: .91rem;
  }
  .catalog-hero-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 22px;
  }
  .catalog-hero-facts span {
    min-height: 40px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
  }
  .catalog-hero-facts span:last-child {
    grid-column: 1 / -1;
  }
  .catalog-compare,
  .catalog-planning,
  .catalog-personal,
  .catalog-help {
    padding: 54px 0;
  }
  .catalog-section-heading {
    align-items: start;
    margin-bottom: 18px;
  }
  .catalog-live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
  .catalog-selector {
    gap: 6px;
    margin-bottom: 10px;
  }
  .catalog-tab {
    min-height: 46px;
    gap: 5px;
    padding: 8px 5px;
    font-size: .78rem;
  }
  .catalog-swatch {
    width: 10px;
    height: 10px;
    flex-basis: 10px;
  }
  .catalog-product {
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
  }
  .catalog-gallery {
    max-width: none;
  }
  .catalog-gallery-track {
    border-radius: 0;
  }
  .catalog-slide img {
    aspect-ratio: 4 / 4.85;
  }
  .catalog-slide figcaption {
    left: 12px;
    bottom: 12px;
  }
  .catalog-gallery-controls {
    margin: 8px 14px 0;
  }
  .catalog-photo-pending {
    min-height: 360px;
    border: 0;
    border-radius: 0;
  }
  .catalog-product-copy {
    max-width: none;
    padding: 22px 18px 24px;
  }
  .catalog-product-copy > h2 {
    font-size: 2rem;
  }
  .catalog-description {
    font-size: .91rem;
  }
  .catalog-price-row {
    margin-top: 17px;
  }
  .catalog-price-row > div {
    padding: 12px 10px;
  }
  .catalog-price-row span {
    font-size: .66rem;
  }
  .catalog-price-row strong {
    font-size: .98rem;
  }
  .catalog-exclusion {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .catalog-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
  }
  .catalog-primary-action,
  .catalog-text-link {
    width: 100%;
    justify-content: center;
  }
  .catalog-calculator {
    padding: 22px 18px;
  }
  .catalog-personal-items {
    grid-template-columns: minmax(0, 1fr);
  }
  .catalog-personal-items article {
    grid-template-columns: 126px minmax(0, 1fr);
  }
  .catalog-personal-items img {
    min-height: 180px;
  }
  .catalog-personal-items article > div {
    padding: 17px 14px;
  }
  .catalog-personal-items h3 {
    font-size: 1rem;
  }
  .catalog-faq-list {
    padding: 6px 16px;
  }
  .catalog-final-cta .wrap {
    align-items: stretch;
    flex-direction: column;
  }
  .catalog-final-cta .btn {
    width: 100%;
  }
}

/* ===========================================================================
   INICIO · JERARQUIA, AIRE Y SUPERFICIES SELLADAS
   =========================================================================== */
.home-page #precios,
.home-page .home-process,
.home-page .home-faq-entry {
  background: #fff;
  color: #0a0a0a;
}

.home-page :is(#precios,.home-process,.home-faq-entry)
  :is(h1,h2,h3,h4,p,span:not(.tag),strong,a:not(.btn)) {
  color: #0a0a0a;
  text-shadow: none;
}

.home-page .home-hero-support {
  display: inline-flex;
  width: fit-content;
  margin-top: 15px;
  padding-block: 6px;
  color: #fff;
  font-weight: 800;
  text-underline-offset: 5px;
  text-shadow: 0 2px 12px #000;
}

.home-page .home-pricing-grid {
  align-items: stretch;
}

.home-page .home-price-card {
  min-width: 0;
  height: 100%;
  padding: clamp(24px,3vw,32px);
  border-color: #c8c8c8;
  background: #fff;
  box-shadow: none;
}

.home-page .home-price-card--featured {
  border-color: var(--naranjo);
  box-shadow: 0 0 22px rgba(255,106,19,.2);
}

.home-page .home-price-head {
  display: grid;
  justify-content: start;
  justify-items: start;
  align-items: start;
  gap: 8px;
  min-height: 0;
  margin-bottom: 18px;
}

.home-page .home-price-head .tag {
  width: fit-content;
  max-width: 100%;
  padding: 9px 18px;
  font-size: .74rem;
  line-height: 1.2;
  white-space: normal;
  text-wrap: balance;
}

.home-page .home-price-meta {
  color: #3d3d3d;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.15;
}

.home-page .home-price-card:nth-child(2) .home-price-meta {
  color: #0b6b32;
}

.home-page .home-price-card--featured .home-price-meta {
  color: var(--naranjo-texto);
}

.home-page .home-price-card > p {
  max-width: 58ch;
  text-wrap: pretty;
}

.home-page .home-price-card > a {
  margin-top: 24px;
}

.home-page .home-pricing-summary {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 24px 30px;
  border-color: #c8c8c8;
  background: #fff;
}

.home-page .home-pricing-facts {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-page .home-pricing-facts li {
  position: relative;
  min-width: 0;
  padding-left: 18px;
}

.home-page .home-pricing-facts li::before {
  position: absolute;
  top: .45em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--naranjo);
  content: "";
}

.home-page .home-pricing-facts span {
  display: block;
  color: #0a0a0a;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.2;
}

.home-page .home-pricing-facts p {
  margin: 5px 0 0;
  color: #3d3d3d;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}

.home-page .home-process-grid {
  align-items: stretch;
}

.home-page .home-process .blk {
  height: 100%;
  margin: 0;
  padding: clamp(24px,3vw,34px);
  border: 1px solid #c8c8c8;
  border-radius: 22px;
  background: #fff;
  box-shadow: none;
}

.home-page .home-process .blk-head {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  align-items: start;
  gap: 22px;
}

.home-page .home-process .blk-num {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0;
  border-radius: 14px;
  background: #000;
  color: #fff !important;
  font-size: 1rem;
  font-family: var(--font-mono);
  font-weight: 900;
}

.home-page .home-process .blk-titles h3 {
  margin: 3px 0 12px;
  color: #0a0a0a;
  line-height: 1.12;
  text-wrap: balance;
}

.home-page .home-process .process-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0 0 0 18px;
  border-left: 4px solid var(--naranjo);
  list-style: none;
}

.home-page .home-process .process-list li {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.home-page .home-process .process-list li::before {
  position: absolute;
  top: .45em;
  left: -23px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--naranjo);
  content: "";
}

.home-page .home-process .process-list p {
  margin: 0;
  color: #3d3d3d;
  font-family: var(--font-body);
  font-size: .98rem;
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}

.home-page .home-process .process-list span {
  color: #0a0a0a;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-page .home-process .process-list strong {
  color: #0a0a0a;
  font-family: var(--font-display);
  font-weight: 800;
}

.home-page .home-process .process-list-highlight strong {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1.1;
}

.home-page .home-process .process-list-highlight small {
  color: #3d3d3d;
  font-family: var(--font-body);
  font-size: .82rem;
  line-height: 1.4;
}

.home-page .home-faq-entry {
  padding: clamp(70px,9vw,110px) 0;
}

.home-page .home-faq-entry-grid {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(360px,1fr);
  gap: clamp(36px,7vw,86px);
  align-items: start;
}

.home-page .home-faq-entry h2 {
  margin-top: 16px;
  max-width: 14ch;
  text-wrap: balance;
}

.home-page .home-faq-entry p {
  max-width: 54ch;
  margin-top: 14px;
  text-wrap: pretty;
}

.home-page .home-faq-entry nav {
  display: grid;
  border-top: 1px solid #0a0a0a;
}

.home-page .home-faq-entry nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: 18px;
  border-bottom: 1px solid #0a0a0a;
  font-weight: 800;
  text-decoration: none;
}

.home-page .home-faq-entry nav a::after {
  content: "→";
  flex: 0 0 auto;
  color: var(--naranjo-texto);
}

.home-page .home-story-run {
  overflow: clip;
  background-color: #000;
  background-image:
    linear-gradient(112deg, rgba(0,0,0,.92), rgba(0,0,0,.48) 58%, rgba(0,0,0,.76)),
    var(--syt-cosmos-orange);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.home-page .home-story-run > .section {
  background-color: transparent;
  background-image: none;
}

.home-page .home-story-run .home-colors > .wrap > div:first-child :is(h2,p),
.home-page .home-story-run .home-colors > .wrap > div:first-child .tag,
.home-page .home-story-run .home-conditions :is(h2,h3,p,strong) {
  color: #fff;
  text-shadow: 0 2px 14px #000;
}

.home-page .home-story-run .home-colors .tag,
.home-page .home-story-run .home-conditions .tag {
  background: var(--naranjo);
  color: #0a0a0a;
  text-shadow: none;
}

.home-page .home-conditions .cond-card {
  border: 1px solid rgba(255,106,19,.68);
  background: rgba(0,0,0,.88);
  box-shadow: 0 0 18px rgba(255,106,19,.16);
}

.home-page .home-colors .traje-card,
.home-page .home-colors .traje-card .body {
  background: #fff;
}

.home-page .home-colors .traje-card {
  border-color: var(--naranjo);
  box-shadow: 0 0 18px rgba(255,106,19,.16);
}

.home-page .home-colors .traje-card .body :is(h3,p,span) {
  color: #0a0a0a;
  text-shadow: none;
}

/* ===========================================================================
   PREGUNTAS FRECUENTES · PRIMERA CLASE EN LA NAVEGACION
   =========================================================================== */
.faq-page .faq-hero {
  min-height: min(66dvh, 680px);
  display: grid;
  align-items: center;
  padding: 92px 0 64px;
  background-color: #000;
  background-image:
    linear-gradient(110deg, rgba(0,0,0,.92), rgba(0,0,0,.48) 58%, rgba(0,0,0,.76)),
    var(--syt-cosmos-orange);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.faq-page .faq-hero :is(h1,p) {
  color: #fff;
  text-shadow: 0 3px 18px #000;
}

.faq-page main > .section-light {
  background: #fff;
  color: #0a0a0a;
}

.faq-page .faq-category-nav {
  position: sticky;
  top: 72px;
  z-index: 5;
  margin: 0 0 48px;
  padding: 14px;
  border: 1px solid #c8c8c8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(0,0,0,.1);
}

.faq-page .faq-category-nav a {
  border-color: #0a0a0a;
  background: #fff;
  color: #0a0a0a;
}

.faq-page .faq-category-nav a:hover,
.faq-page .faq-category-nav a:focus-visible {
  border-color: var(--naranjo);
  background: var(--naranjo);
  color: #0a0a0a;
}

.faq-page .faq-group {
  margin-bottom: clamp(48px,7vw,82px);
  scroll-margin-top: 160px;
}

.faq-page .faq-group-title {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  padding: 18px 20px;
  border: 1px solid var(--naranjo);
  border-radius: 18px;
  background: #000;
  color: #fff;
  box-shadow: 0 0 18px rgba(255,106,19,.18);
}

.faq-page .faq-group-title > span {
  min-width: 0;
  color: #fff;
  text-shadow: 0 2px 12px #000;
}

.faq-page .faq-group-title .badge {
  background: var(--naranjo);
  color: #0a0a0a;
  text-shadow: none;
}

.faq-page .faq-card,
.faq-page .faq-keynote {
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid #c8c8c8;
  border-radius: 18px;
  background: #fff;
  color: #0a0a0a;
  box-shadow: none;
}

/* La nota destacada no hereda padding de ninguna capa: sin esto el borde
   corta el texto pegado a la caja (5 casos visibles en preguntas-frecuentes). */
.faq-page .faq-keynote {
  padding: 18px 20px;
}

/* El badge de titulo de grupo no tiene padding ni radio en su regla base:
   el texto desborda el relleno naranjo. */
.faq-page .faq-group-title .badge {
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
}

.faq-page .faq-card :is(summary,p,li,strong,b,a),
.faq-page .faq-keynote :is(p,strong,b,a) {
  color: #0a0a0a;
  text-shadow: none;
}

.faq-page .faq-card summary {
  min-height: 66px;
  padding: 18px 54px 18px 20px;
  line-height: 1.35;
  text-wrap: pretty;
}

.faq-page .faq-answer {
  padding: 0 20px 24px;
}

.faq-page .faq-answer p,
.faq-page .faq-answer li {
  max-width: 68ch;
  line-height: 1.68;
  text-wrap: pretty;
}

.faq-page .sol-nudge {
  display: none;
}

@media (max-width: 720px) {
  .home-page .home-price-head {
    min-height: 0;
  }

  .home-page .home-pricing-summary {
    grid-template-columns: minmax(0,1fr);
    align-items: flex-start;
  }

  .home-page .home-pricing-facts {
    grid-template-columns: minmax(0,1fr);
    gap: 16px;
  }

  .home-page .home-pricing-summary .btn {
    width: 100%;
    justify-content: center;
  }

  .home-page .home-process .blk-head {
    grid-template-columns: 48px minmax(0,1fr);
    gap: 16px;
  }

  .home-page .home-process .blk-num {
    width: 48px;
    height: 48px;
  }

  .home-page .home-faq-entry-grid {
    grid-template-columns: minmax(0,1fr);
  }

  .home-page .home-story-run {
    background-size: 100% 100%;
  }

  .faq-page .faq-hero {
    min-height: 70dvh;
    padding: 84px 0 56px;
    background-size: 100% 100%;
  }

  .faq-page .faq-category-nav {
    top: 62px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -4px;
    padding: 10px;
    border-radius: 14px;
    scrollbar-width: none;
  }

  .faq-page .faq-category-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .faq-page .faq-group-title {
    grid-template-columns: auto minmax(0,1fr);
    gap: 12px;
    padding: 16px;
  }

  .faq-page .faq-group-title .badge {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .faq-page .faq-card summary {
    padding: 17px 48px 17px 16px;
  }

  .faq-page .faq-answer {
    padding: 0 16px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-gallery-track {
    scroll-behavior: auto;
  }
  .catalog-tab {
    transition: none;
  }
}

/* ===========================================================================
   SUPERFICIES PREMIUM · blanco, negro y cosmos naranjo
   ---------------------------------------------------------------------------
   La imagen fue elegida por Carlitos como la superficie persuasiva del sitio.
   No reemplaza las superficies informativas: esas permanecen en blanco puro.
   Las laminas oscuras conservan una placa negra bajo el contenido para que la
   lectura no dependa del punto luminoso que quede detras de cada palabra.
   =========================================================================== */

:root {
  --syt-cosmos-orange: url("../images/surfaces/syt-neon-orange-cosmos-v2.webp");
  --syt-text-shadow: 0 2px 14px rgba(0,0,0,.96), 0 1px 2px #000;
}

body,
.section-light,
.section.soft,
.catalog-page,
.catalog-compare,
.catalog-personal,
.catalog-help,
.contact-zone,
.contact-next,
.req-main,
.req-stepper,
.priv-content {
  background-color: #fff;
  background-image: none;
  --black: #000;
  --white: #fff;
  --text: #3d3d3d;
  --text-dark: #0a0a0a;
  --text-muted: #5c5c5c;
}

/* La textura aparece en los momentos de relato, decision o cierre. */
:is(
  .catalog-hero,
  .catalog-planning,
  .catalog-final-cta,
  .hero-premium,
  .contact-hero,
  .req-hero,
  .conditions-hero,
  .priv-hero,
  .intranet-hero,
  .section-dark,
  .care-section,
  .jack-faq,
  main > .section-light:first-child:not(.home-hero)
) {
  --syt-texture-position: center 68%;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
  background-color: #000;
  background-image:
    linear-gradient(100deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.78) 46%, rgba(0,0,0,.58) 100%),
    var(--syt-cosmos-orange);
  background-position: var(--syt-texture-position);
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  --black: #fff;
  --white: #fff;
  --text: #d6d6d6;
  --text-dark: #fff;
  --text-muted: #d6d6d6;
}

.catalog-hero,
.contact-hero,
.req-hero,
.conditions-hero,
.priv-hero,
.intranet-hero,
.hero-premium,
main > .section-light:first-child:not(.home-hero) {
  --syt-texture-position: center 22%;
}

.catalog-final-cta,
.jack-faq {
  --syt-texture-position: center 92%;
}

/* Las comunas comparten la misma atmosfera, conservando el retrato y el
   contenido propio de cada pagina por encima. */
.jack-hero-bg {
  background-color: #000;
  background-image:
    linear-gradient(100deg, rgba(0,0,0,.94), rgba(0,0,0,.68)),
    var(--syt-cosmos-orange);
  background-position: center 24%;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Sombra de lectura: se limita al texto que vive directamente en laminas.
   Las tarjetas blancas internas recuperan tinta negra y no heredan la sombra. */
:is(
  .catalog-hero,
  .catalog-planning,
  .catalog-final-cta,
  .hero-premium,
  .contact-hero,
  .req-hero,
  .conditions-hero,
  .priv-hero,
  .intranet-hero,
  .section-dark,
  .care-section,
  .jack-faq,
  .jack-hero
) :is(h1,h2,h3,h4,p,li,summary,figcaption) {
  color: #fff;
  text-shadow: var(--syt-text-shadow);
}

:is(
  .catalog-hero,
  .catalog-planning,
  .catalog-final-cta,
  .hero-premium,
  .contact-hero,
  .req-hero,
  .conditions-hero,
  .priv-hero,
  .intranet-hero,
  .section-dark,
  .jack-faq,
  .jack-hero
) :is(.card,.catalog-calculator,.contact-card,.faq-card,.record-card,.val-card,.req-card,.priv-card) :is(h1,h2,h3,h4,p,li,summary,figcaption) {
  color: #0a0a0a;
  text-shadow: none;
}

:is(
  .catalog-hero,
  .catalog-planning,
  .catalog-final-cta,
  .hero-premium,
  .contact-hero,
  .req-hero,
  .conditions-hero,
  .priv-hero,
  .intranet-hero,
  .section-dark,
  .care-section,
  .jack-faq
) :is(.card,.catalog-calculator,.contact-card,.faq-card,.record-card,.val-card,.req-card,.priv-card,.care-panel) {
  --black: #000;
  --white: #fff;
  --text: #3d3d3d;
  --text-dark: #0a0a0a;
  --text-muted: #5c5c5c;
}

/* La bajada tiene una placa real: ni un destello del fondo puede quitarle
   contraste. La caja crece con el texto y nunca usa altura fija. */
:is(
  .catalog-hero,
  .contact-hero,
  .req-hero,
  .conditions-hero,
  .priv-hero,
  .intranet-hero,
  .hero-premium,
  main > .section-light:first-child:not(.home-hero)
) :is(.lead, .hero-copy > p, .wrap > p, .catalog-hero-inner > p) {
  width: fit-content;
  max-width: min(68ch, 100%);
  padding: 12px 16px;
  border: 1px solid rgba(255,106,19,.32);
  border-radius: 12px;
  background: rgba(0,0,0,.82);
  color: #fff;
  text-shadow: var(--syt-text-shadow);
}

/* El contenido escrito manda sobre la caja: nada de elipsis, line-clamp ni
   palabras largas empujando una lamina fuera de la pantalla. */
main :is(h1,h2,h3,h4,p,li,dd,dt,summary,label,figcaption) {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

main :is(h1,h2,h3,h4) {
  text-wrap: balance;
}

main :is(p,li,dd,figcaption) {
  text-wrap: pretty;
}

main :is(.wrap,.wrap-wide,.hero-copy,.catalog-product-copy,.contact-card,.req-card,.card,.faq-card) {
  min-width: 0;
}

/* Brillo de scroll: la fotografia queda quieta para evitar repintados caros.
   Solo se mueve una capa de luz mediante transform y opacity. */
:is(
  .catalog-hero,
  .catalog-planning,
  .catalog-final-cta,
  .contact-hero,
  .req-hero,
  .conditions-hero,
  .priv-hero,
  .intranet-hero,
  .jack-faq
)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: -18%;
  inset-inline: 0;
  pointer-events: none;
  background: radial-gradient(circle at 76% 62%, rgba(255,106,19,.26), transparent 34%);
  opacity: .62;
  transform: translate3d(0,-2%,0);
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    :is(
      .catalog-hero,
      .catalog-planning,
      .catalog-final-cta,
      .contact-hero,
      .req-hero,
      .conditions-hero,
      .priv-hero,
      .intranet-hero,
      .jack-faq
    )::before {
      animation: syt-cosmos-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 70%;
      will-change: transform, opacity;
    }
  }
}

@keyframes syt-cosmos-drift {
  from { opacity: .34; transform: translate3d(0,-5%,0); }
  to { opacity: .72; transform: translate3d(0,5%,0); }
}

@media (max-width: 768px) {
  :is(
    .catalog-hero,
    .catalog-planning,
    .catalog-final-cta,
    .hero-premium,
    .contact-hero,
    .req-hero,
    .conditions-hero,
    .priv-hero,
    .intranet-hero,
    .section-dark,
    .care-section,
    .jack-faq,
    main > .section-light:first-child:not(.home-hero)
  ) {
    overflow-x: clip;
    overflow-y: visible;
    background-image:
      linear-gradient(180deg, rgba(0,0,0,.90), rgba(0,0,0,.72)),
      var(--syt-cosmos-orange);
    background-position: center 64%;
  }

  :is(
    .catalog-hero,
    .contact-hero,
    .req-hero,
    .conditions-hero,
    .priv-hero,
    .intranet-hero,
    .hero-premium,
    main > .section-light:first-child:not(.home-hero)
  ) :is(.lead, .hero-copy > p, .wrap > p, .catalog-hero-inner > p) {
    width: 100%;
    padding: 12px 14px;
  }

  main :is(.btn,button,a,summary,label) {
    min-width: 0;
  }

  .catalog-selector,
  .catalog-price-row {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .care-tabs {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
  }

  .care-tab {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    flex: none;
    white-space: normal;
  }

  .visual-comparison-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scrollbar-color: var(--naranjo) #000;
    scrollbar-width: thin;
  }

  .visual-comparison-scroll table {
    min-width: 640px;
  }
}

/* Una segunda lamina narrativa en las paginas por comuna evita grandes zonas
   negras planas y mantiene el mismo sistema visual del catalogo. */
.jack-about {
  background-color: #000;
  background-image:
    linear-gradient(100deg, rgba(0,0,0,.92), rgba(0,0,0,.64)),
    var(--syt-cosmos-orange);
  background-position: center 76%;
  background-repeat: no-repeat;
  background-size: cover;
}

.jack-about :is(h1,h2,h3,p,li,strong) {
  color: #fff;
  text-shadow: var(--syt-text-shadow);
}

/* La informacion sobre blanco siempre usa tinta oscura. Las excepciones
   oscuras se restablecen inmediatamente despues por su superficie real. */
body main :is(
  .section-light,
  .section.soft,
  .catalog-compare,
  .catalog-personal,
  .catalog-help,
  .contact-zone,
  .contact-next,
  .req-main,
  .priv-content
) :is(h1,h2,h3,h4,p,li,dd,dt,summary,label,strong,b,figcaption) {
  color: #0a0a0a;
  text-shadow: none;
}

body main :is(.section-light,.section.soft,.catalog-compare,.catalog-personal,.catalog-help,.contact-zone,.contact-next,.req-main,.priv-content)
  :is(.card-dark,.help-box,.traje-stack-item,.pin-option,.impact-card,.care-panel)
  :is(h1,h2,h3,h4,p,li,dd,dt,summary,label,strong,b,figcaption) {
  color: #fff;
}

/* Tarjetas blancas que antes conservaban tinta blanca de la pagina oscura. */
.contact-card :is(h1,h2,h3,h4,strong,b),
.contact-next :is(h1,h2,h3,h4,strong,b),
.faq-card :is(h1,h2,h3,h4,p,li,strong,b,summary),
.val-card :is(h1,h2,h3,h4,p,li,strong,b,summary),
.catalog-product :is(h1,h2,h3,h4,p,li,strong,b,summary),
.catalog-calculator :is(h1,h2,h3,h4,p,li,strong,b,label,dt,dd) {
  color: #0a0a0a;
  text-shadow: none;
}

/* El naranjo vivo se reserva para rellenos y fondos oscuros. Como texto sobre
   blanco se usa el naranjo oscuro accesible. */
:is(
  .catalog-kicker,
  .catalog-personal-items article > div > span,
  .catalog-color-label + *,
  .vc-tag,
  .piece-card-cat,
  .piece-value-badge,
  .personal-kicker,
  .contact-card .num,
  .req-main strong,
  .req-main .req,
  .intranet-card .label
) {
  color: var(--naranjo-texto);
}

body main .tag {
  background: var(--naranjo);
  border-color: var(--naranjo);
  color: var(--negro);
  text-shadow: none;
}

/* Comunas: los diez landing locales usan el mismo sistema de laminas. */
body.jack {
  background: #000;
  color: #fff;
}

.jack-hero,
.jack-services,
.jack-trajes,
.jack-faq {
  background-color: #000;
  color: #fff;
}

.jack-hero-eyebrow,
.jack-service-num,
.jack-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 38px;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--naranjo);
  color: #0a0a0a;
  font-weight: 900;
  text-shadow: none;
}

.jack-hero :is(h1,h2,h3,p,strong),
.jack-services :is(h1,h2,h3,p,strong),
.jack-trajes :is(h1,h2,h3,p,strong),
.jack-faq :is(h1,h2,h3,p,strong,summary,summary span),
.jack-card :is(h1,h2,h3,p,strong) {
  color: #fff;
  text-shadow: var(--syt-text-shadow);
}

.jack-contact {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--naranjo);
  color: #0a0a0a;
  font-weight: 900;
  text-decoration: none;
}

.jack-services {
  padding: clamp(56px,7vw,104px) clamp(20px,4vw,40px);
}

.jack-service {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 18px;
  max-width: 1080px;
  margin-inline: auto;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.14);
}

.jack-card {
  min-width: 0;
  padding: clamp(22px,3vw,34px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background: #000;
}

.jack-card-top {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 18px;
}

.jack-faq details {
  background: #000;
}

.jack-faq details :is(summary,summary span,p,strong) {
  color: #fff;
}

/* La seccion que contiene el formulario local es informativa: blanco puro y
   tinta negra, incluida la interfaz que common.js inyecta en el slot. */
.jack-services:has(#lead-form-slot),
.jack-services:has(#lead-form-slot) :is(form,div,label) {
  background-color: #fff;
  color: #0a0a0a;
}

.jack-services:has(#lead-form-slot) :is(h1,h2,h3,h4,p,label,span,strong,a) {
  color: #0a0a0a;
  text-shadow: none;
}

.jack-services:has(#lead-form-slot) :is(input,select,textarea) {
  background: #fff;
  color: #0a0a0a;
  border: 1px solid #b8b8b8;
}

.jack-services:has(#lead-form-slot) .whatsapp-pulse {
  background: var(--naranjo);
  color: #0a0a0a;
}

@media (max-width: 768px) {
  .jack-service,
  .jack-card-top {
    grid-template-columns: minmax(0,1fr);
  }

  .jack-hero-actions {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 10px;
  }

  .jack-contact {
    width: 100%;
  }
}

/* Cierre de contraste por componente: cada selector corresponde a una falla
   medida por la sonda AA en las 22 paginas. */
.section:not(.section-dark):not(.hero-premium):not(.conditions-hero):not(.care-section):not(.personal-section) {
  --bg2: #fff;
  --title: #0a0a0a;
  --text: #3d3d3d;
  --text-dark: #0a0a0a;
  --text-muted: #5c5c5c;
  --ok: #0b6b32;
  background-color: #fff;
  background-image: none;
}

.section:not(.section-dark):not(.hero-premium):not(.conditions-hero):not(.care-section):not(.personal-section)
  :is(h1,h2,h3,h4,p,li,span,strong,b,dd,dt,label,summary) {
  text-shadow: none;
}

.catalog-slide figcaption {
  background: rgba(0,0,0,.88);
  color: #fff;
}

body main .val-count,
body main .val-card .vc-tag,
body main .val-total .vt-val > span,
body main .req-main .req,
body main .req-main .sum-row .v,
body main .contact-card .num,
body main .intranet-card .label,
body main .section:not(.section-dark) .eyebrow,
body main .section:not(.section-dark) > .wrap > strong {
  color: var(--naranjo-texto);
}

body main .val-tabs button.active,
body main .val-card[open] .vc-toggle {
  background: var(--naranjo);
  color: #0a0a0a;
}

body main :is(.section-light,.section.soft,.section:not(.section-dark)) .btn-ghost {
  border-color: #0a0a0a;
  background: transparent;
  color: #0a0a0a;
}

body main :is(.section-light,.section.soft,.section:not(.section-dark)) .btn-ghost:hover {
  border-color: var(--naranjo-texto);
  color: var(--naranjo-texto);
}

body main :is(.section-light,.section.soft,.section:not(.section-dark)) table th {
  color: #0a0a0a;
}

.personal-section,
.personal-section .personal-card-pro,
.personal-section figure,
.donde-comprar-box {
  --black: #000;
  --text: #3d3d3d;
  --text-dark: #0a0a0a;
  --text-muted: #5c5c5c;
  background-color: #fff;
  color: #0a0a0a;
}

.personal-section :is(.personal-card-pro,.donde-comprar-box)
  :is(h1,h2,h3,h4,p,span,strong,b,a) {
  color: #0a0a0a;
  text-shadow: none;
}

.banner-sin-tripolino {
  background: #000;
  color: #fff;
}

.banner-sin-tripolino :is(span,strong,p) {
  color: #fff;
}

.donde-comprar-pills span {
  background: #fff;
  border: 1px solid #b8b8b8;
  color: #0a0a0a;
}

body.jack main > .section:not(.section-dark):not(.hero-premium) .card,
body.jack main > .section:not(.section-dark):not(.hero-premium) .card :is(h1,h2,h3,h4,p,span,strong,b) {
  --title: #0a0a0a;
  --text: #3d3d3d;
  background-color: #fff;
  color: #0a0a0a;
  text-shadow: none;
}

/* En las laminas oscuras la regla final es deliberadamente explicita: ningun
   titulo o parrafo puede heredar tinta oscura desde una seccion informativa. */
body main :is(
  .catalog-hero,
  .hero-premium,
  .conditions-hero,
  .contact-hero,
  .req-hero,
  .priv-hero,
  .intranet-hero,
  .section-dark,
  .care-section,
  .jack-hero,
  .jack-trajes,
  .jack-faq
) :is(h1,h2,h3,h4,p,li,strong,b,dd,dt,summary,summary span) {
  color: #fff;
  text-shadow: var(--syt-text-shadow);
}

body main :is(
  .catalog-hero,
  .hero-premium,
  .conditions-hero,
  .contact-hero,
  .req-hero,
  .priv-hero,
  .intranet-hero,
  .section-dark,
  .care-section,
  .jack-hero,
  .jack-trajes,
  .jack-faq
) :is(.tag,.eyebrow,.jack-hero-eyebrow,.jack-service-num,.jack-card-num) {
  color: #0a0a0a;
  text-shadow: none;
}

/* Cierres puntuales de contraste. Son superficies ya medidas; se evita que
   reglas historicas de paginas distintas vuelvan a cruzar sus tintas. */
body.catalog-page main .catalog-product .catalog-slide figcaption {
  background: rgba(0,0,0,.9);
  color: #fff;
  text-shadow: var(--syt-text-shadow);
}

body:has(.val-tabs) .impact-card .eyebrow {
  color: #fff;
}

body:has(.val-tabs) .cta-band {
  background: #000;
  color: #fff;
  border-radius: 22px;
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

body:has(.val-tabs) .cta-band h2 {
  margin: 0 0 8px;
}

body:has(.val-tabs) .cta-band p {
  margin: 0;
  max-width: 52ch;
}

body:has(.val-tabs) .cta-band :is(h2,p) {
  color: #fff;
  text-shadow: var(--syt-text-shadow);
}

body:has(.val-tabs) .cta-band .btn {
  border-color: var(--naranjo);
  background: var(--naranjo);
  color: #0a0a0a;
  text-shadow: none;
}

body:has(.conditions-hero) .care-section {
  background-color: #000;
  background-image:
    linear-gradient(100deg, rgba(0,0,0,.94), rgba(0,0,0,.64)),
    var(--syt-cosmos-orange);
  background-position: center 68%;
  background-repeat: no-repeat;
  background-size: cover;
}

body:has(.conditions-hero) .care-section .care-intro :is(h2,p),
body:has(.conditions-hero) .care-tab:not(.is-active) {
  color: #fff;
  text-shadow: var(--syt-text-shadow);
}

body:has(.conditions-hero) .care-tab:not(.is-active) {
  background: #000;
  border-color: rgba(255,255,255,.22);
}

body:has(.conditions-hero) .care-tab.is-active {
  background: #fff;
  color: #0a0a0a;
  text-shadow: none;
}

body:has(#faq-tallaje) main > .section:not(.section-dark) :is(h1,h2,h3,h4,p,li,strong,b) {
  color: #0a0a0a;
  text-shadow: none;
}

body:has(#faq-tallaje) .notice {
  border: 1px solid var(--naranjo);
  background: #fff;
  color: #0a0a0a;
}

body:has(#faq-tallaje) .notice :is(span,b,p),
body:has(#faq-tallaje) .section-light > .wrap > strong {
  color: #0a0a0a;
  text-shadow: none;
}

body:has(#faq-tallaje) .section-light > .wrap[style*="border"] strong[style] {
  color: var(--naranjo-texto);
}

body:has(#faq-piezas) main > .section-light:first-child {
  background-color: #000;
  background-image:
    linear-gradient(100deg, rgba(0,0,0,.94), rgba(0,0,0,.64)),
    var(--syt-cosmos-orange);
  background-position: center 22%;
  background-repeat: no-repeat;
  background-size: cover;
}

body:has(#faq-piezas) main > .section-light:first-child :is(h1,p,strong) {
  color: #fff;
  text-shadow: var(--syt-text-shadow);
}

body:has(#faq-piezas) main > .section-light:first-child .btn-ghost {
  border-color: #fff;
  color: #fff;
}

body:has(#faq-piezas) .banner-sin-tripolino,
body:has(#faq-piezas) .banner-sin-tripolino :is(span,strong,p) {
  background-color: #000;
  color: #fff;
  text-shadow: var(--syt-text-shadow);
}

body.anatomia-page main > .section:not(.hero-premium) {
  --bg2: #fff;
  --title: #0a0a0a;
  --text: #3d3d3d;
  background-color: #fff;
  background-image: none;
  color: #0a0a0a;
}

body.anatomia-page main > .section:not(.hero-premium)
  :is(h1,h2,h3,h4,p,li,strong,b,td,th,span) {
  color: #0a0a0a;
  text-shadow: none;
}

body.anatomia-page main > .section:not(.hero-premium) table,
body.anatomia-page main > .section:not(.hero-premium) :is(thead,tbody,tr,td) {
  background-color: #fff;
  color: #0a0a0a;
}

body.anatomia-page main > .section:not(.hero-premium) table th {
  background: var(--naranjo);
  color: #0a0a0a;
}

/* El eyebrow es TEXTO suelto sobre el fondo de la seccion (lamina 4149):
   naranjo como texto, sin relleno. El relleno sin padding se veia como un
   marcador cuadrado apretado detras de la palabra. */
body.anatomia-page main > .section:not(.hero-premium) .eyebrow {
  background: none;
  color: var(--naranjo-texto);
}

/* Contraste verificado sobre el pixel renderizado, no solo sobre el color
   declarado. Estas placas eliminan los ultimos casos dependientes de imagen. */
body.catalog-page .catalog-planning .catalog-kicker {
  color: #fff;
  text-shadow: var(--syt-text-shadow);
}

body:has(.conditions-hero) main .conditions-hero h1 {
  color: #fff;
  text-shadow: var(--syt-text-shadow);
}

body:has(.conditions-hero) .faq-keynote,
body:has(.faq-hero) .faq-keynote {
  background: #fff;
  color: #0a0a0a;
}

body:has(.conditions-hero) .faq-keynote :is(strong,b,a),
body:has(.faq-hero) .faq-keynote :is(strong,b) {
  color: #0a0a0a;
  text-shadow: none;
}

body:has(.contact-hero) .contact-hero .eyebrow,
body main :is(
  .catalog-hero,
  .hero-premium,
  .conditions-hero,
  .contact-hero,
  .req-hero,
  .priv-hero,
  .intranet-hero,
  .section-dark,
  .care-section,
  .jack-hero,
  .jack-trajes,
  .jack-faq
) :is(.tag,.eyebrow) {
  display: inline-flex;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--naranjo);
  color: #0a0a0a;
  text-shadow: none;
}

body:has(#faq-tallaje) main > .section:not(.section-dark) :is(.card,.record-card) {
  background-color: #fff;
  background-image: none;
  border-color: #c9c9c9;
  color: #0a0a0a;
}

body:has(#faq-tallaje) main > .section:not(.section-dark)
  :is(.card,.record-card) :is(h1,h2,h3,h4,p,li,strong,b,span:not(.tag)) {
  color: #0a0a0a;
  text-shadow: none;
}

body:has(.val-tabs) .section-light .faq-card :is(p,li,strong,b) {
  color: #000;
}

body:has(.faq-hero) .faq-group-title .badge {
  color: #0a0a0a;
  text-shadow: none;
}

.site-footer p,
.jack-footer p {
  /* Era #d7e2ea: un azul grisaceo que no existia en ninguna otra parte del
     sitio, para 95 caracteres del pie. Pasa al blanco atenuado, que es el
     unico tono secundario sobre fondo oscuro. */
  color: var(--sobre-osc-2);
  text-shadow: var(--syt-text-shadow);
}

/* ===========================================================================
   CONDICIONES · TRES ESCENAS, UN SOLO FONDO CONTINUO
   La continuidad vive en un contenedor elegido en el HTML. No se infiere
   desde la posicion de los section y no puede contaminar otras paginas.
   =========================================================================== */
.conditions-page .conditions-cosmos-run {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: #fff;
  background-color: #000;
  background-image:
    linear-gradient(110deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 54%, rgba(0,0,0,.7) 100%),
    var(--syt-cosmos-orange);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.conditions-page .conditions-cosmos-run > .section {
  color: #fff;
  background-color: transparent;
  background-image: none;
}

.conditions-page .conditions-hero {
  min-height: min(68dvh, 700px);
  display: grid;
  align-items: center;
}

.conditions-page .conditions-hero .wrap {
  display: grid;
  justify-items: center;
}

.conditions-page .conditions-hero h1 {
  width: min(100%, 18ch);
  max-width: none;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 4px 24px #000;
}

.conditions-page .conditions-hero p {
  width: min(100%, 62ch);
  color: #fff;
  text-wrap: pretty;
  text-shadow: 0 3px 16px #000;
}

.conditions-page .conditions-hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.conditions-page .conditions-hero .btn-ghost {
  border-color: #fff;
  color: #fff;
  background: rgba(0,0,0,.54);
}

.conditions-page .condition-deck {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--naranjo);
  border-radius: 28px;
  background: rgba(0,0,0,.9);
  box-shadow: 0 0 0 1px rgba(255,106,19,.22) inset,
              0 0 26px rgba(255,106,19,.24),
              0 28px 72px rgba(0,0,0,.54);
}

.conditions-page .condition-deck-head,
.conditions-page .condition-progress,
.conditions-page .condition-controls {
  background: #000;
  border-color: rgba(255,255,255,.18);
}

.conditions-page .condition-deck-head :is(h2,p),
.conditions-page .condition-count {
  color: #fff;
  text-shadow: 0 2px 12px #000;
}

.conditions-page .condition-progress {
  overscroll-behavior-inline: contain;
}

.conditions-page .condition-tab {
  border-color: rgba(255,255,255,.28);
  background: #000;
  color: #fff;
}

.conditions-page .condition-tab.is-active {
  border-color: var(--naranjo);
  background: var(--naranjo);
  color: #0a0a0a;
  box-shadow: 0 0 16px rgba(255,106,19,.48);
}

.conditions-page .condition-slide,
.conditions-page .condition-deck[data-ready="true"] .condition-slide.is-active {
  grid-template-columns: minmax(190px,.62fr) minmax(0,1.55fr);
  border: 0;
  border-radius: 0;
  background: #000;
}

.conditions-page .condition-slide[hidden] {
  display: none;
}

.conditions-page .condition-slide-index {
  min-width: 0;
  background: #000;
  border-right: 1px solid rgba(255,255,255,.16);
}

.conditions-page .condition-slide-index small,
.conditions-page .condition-slide-copy :is(h2,p),
.conditions-page .condition-eyebrow {
  color: #fff;
  text-shadow: 0 2px 12px #000;
}

.conditions-page .condition-slide-copy h2 {
  max-width: 18ch;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

.conditions-page .condition-slide-copy p {
  max-width: 58ch;
  text-wrap: pretty;
}

.conditions-page .condition-key {
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  background: var(--naranjo);
  color: #0a0a0a;
  box-shadow: 0 0 18px rgba(255,106,19,.26);
}

.conditions-page .condition-key::before {
  background: #000;
}

.conditions-page .condition-controls button {
  border-color: rgba(255,255,255,.34);
  background: #000;
  color: #fff;
}

.conditions-page .condition-controls button:last-child {
  border-color: var(--naranjo);
  background: var(--naranjo);
  color: #0a0a0a;
}

.conditions-page .care-story,
.conditions-page .terms-summary {
  border: 1px solid rgba(255,106,19,.72);
  background: rgba(0,0,0,.9);
  box-shadow: 0 0 24px rgba(255,106,19,.2), 0 24px 60px rgba(0,0,0,.5);
}

.conditions-page .care-panel {
  background: #000;
  color: #fff;
}

.conditions-page .care-panel :is(h3,p,li,strong),
.conditions-page .terms-summary :is(h3,p,strong) {
  color: #fff;
  text-shadow: 0 2px 12px #000;
}

.conditions-page #faq {
  background: #fff;
  color: #0a0a0a;
}

.conditions-page #faq :is(h2,h3,p,summary,strong) {
  color: #0a0a0a;
  text-shadow: none;
}

.conditions-page #faq details,
.conditions-page #faq .faq-keynote {
  background: #fff;
  color: #0a0a0a;
  border-color: #c8c8c8;
  box-shadow: none;
}

@media (max-width: 720px) {
  .conditions-page .conditions-cosmos-run {
    background-size: 100% 100%;
  }

  .conditions-page .conditions-hero {
    min-height: 72dvh;
    padding: 84px 0 54px;
  }

  .conditions-page .conditions-hero-actions,
  .conditions-page .conditions-hero-actions .btn {
    width: 100%;
  }

  .conditions-page .conditions-hero-actions .btn {
    justify-content: center;
  }

  .conditions-page .condition-deck {
    border-radius: 22px;
  }

  .conditions-page .condition-deck-head {
    padding: 20px;
  }

  .conditions-page .condition-progress {
    padding: 12px 18px 14px;
  }

  .conditions-page .condition-slide,
  .conditions-page .condition-deck[data-ready="true"] .condition-slide.is-active {
    grid-template-columns: minmax(0,1fr);
    min-height: 0;
  }

  .conditions-page .condition-slide-index {
    min-height: 96px;
    padding: 18px 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.16);
  }

  .conditions-page .condition-slide-copy {
    padding: 30px 22px 36px;
  }

  .conditions-page .condition-slide-copy h2 {
    max-width: none;
    font-size: clamp(1.75rem, 8vw, 2.35rem);
    line-height: 1.02;
  }

  .conditions-page .condition-key {
    border-radius: 14px;
  }

  .conditions-page .condition-controls {
    padding: 14px;
  }

  .conditions-page .condition-controls button {
    min-width: 0;
    padding-inline: 12px;
  }
}

/* ===========================================================================
   CATALOGO · DECISION SOBRE DOS ESCENAS CONTINUAS
   El fondo pertenece al bloque hero + selector. La informacion vive en una
   lamina blanca, con aire seguro para textos largos y modelos separados.
   =========================================================================== */
.catalog-page .catalog-cosmos-run {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-color: #000;
  background-image:
    linear-gradient(112deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.48) 56%, rgba(0,0,0,.76) 100%),
    var(--syt-cosmos-orange);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.catalog-page .catalog-cosmos-run > :is(.catalog-hero,.catalog-compare) {
  background-color: transparent;
  background-image: none;
}

.catalog-page .catalog-hero {
  min-height: min(68dvh, 720px);
  display: grid;
  align-items: center;
}

.catalog-page .catalog-hero-inner {
  display: grid;
  justify-items: start;
}

.catalog-page .catalog-hero :is(h1,p),
.catalog-page .catalog-compare .catalog-section-heading :is(h2,p),
.catalog-page .catalog-compare .catalog-kicker {
  color: #fff;
  text-shadow: 0 3px 18px #000;
}

.catalog-page .catalog-hero h1 {
  width: min(100%, 14ch);
  text-wrap: balance;
}

.catalog-page .catalog-hero > .wrap > p {
  max-width: 62ch;
  color: #fff;
  text-wrap: pretty;
}

.catalog-page .catalog-hero-facts span {
  border-color: rgba(255,255,255,.28);
  background: rgba(0,0,0,.76);
  color: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.32);
}

.catalog-page .catalog-hero-facts strong {
  color: #fff;
}

.catalog-page .catalog-hero-help {
  display: inline-flex;
  width: fit-content;
  margin-top: 18px;
  padding-block: 8px;
  color: #fff;
  font-weight: 800;
  text-underline-offset: 5px;
  text-shadow: 0 2px 12px #000;
}

.catalog-page .catalog-compare {
  padding-top: clamp(64px,8vw,108px);
  padding-bottom: clamp(76px,9vw,124px);
}

.catalog-page .catalog-tab {
  border-color: rgba(255,255,255,.3);
  background: #000;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
}

.catalog-page .catalog-tab:hover,
.catalog-page .catalog-tab.is-active {
  border-color: var(--naranjo);
  background: #000;
  color: #fff;
  box-shadow: 0 0 18px rgba(255,106,19,.42);
}

.catalog-page .catalog-product {
  border: 1px solid var(--naranjo);
  border-top-width: 1px;
  background: #fff;
  box-shadow: 0 0 24px rgba(255,106,19,.22), 0 28px 74px rgba(0,0,0,.52);
}

.catalog-page .catalog-product-copy,
.catalog-page .catalog-product-copy :is(h2,h3,h4,p,li,small,strong,span:not(.catalog-color-label),summary) {
  color: #0a0a0a;
  text-shadow: none;
}

.catalog-page .catalog-product-copy > h2,
.catalog-page .catalog-includes h3 {
  text-wrap: balance;
}

.catalog-page .catalog-description {
  max-width: 56ch;
  text-wrap: pretty;
}

.catalog-page .catalog-price-row > div,
.catalog-page .catalog-exclusion,
.catalog-page .catalog-gallery-choice,
.catalog-page .catalog-photo-pending {
  background: #fff;
  border-color: #c8c8c8;
}

.catalog-page .catalog-photo-pending p span {
  display: block;
}

.catalog-page .catalog-models {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.catalog-page .catalog-models article {
  min-width: 0;
  padding: 16px;
  border: 1px solid #c8c8c8;
  border-radius: 14px;
  background: #fff;
}

.catalog-page .catalog-models article > span {
  display: block;
  color: var(--naranjo-texto);
  font: 800 .68rem/1.3 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.catalog-page .catalog-models h4 {
  margin: 8px 0 6px;
  font-size: 1rem;
  line-height: 1.2;
}

.catalog-page .catalog-models p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.48;
  text-wrap: pretty;
}

.catalog-page .catalog-models small {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #c8c8c8;
  font-size: .73rem;
  line-height: 1.45;
}

.catalog-page .catalog-help {
  background: #fff;
  border-top: 0;
}

.catalog-page .catalog-help-grid {
  padding: clamp(24px,4vw,44px);
  border: 1px solid var(--naranjo);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 0 22px rgba(255,106,19,.15);
}

.catalog-page .catalog-faq-list,
.catalog-page .catalog-faq-list details {
  background: #fff;
  border-color: #c8c8c8;
  box-shadow: none;
}

.catalog-page .catalog-faq-list :is(summary,p,strong),
.catalog-page .catalog-help-grid > div:first-child :is(h2,p,a) {
  color: #0a0a0a;
  text-shadow: none;
}

.catalog-page .catalog-personal,
.catalog-page .catalog-personal-items article,
.catalog-page .catalog-personal-items img,
.catalog-page .catalog-personal-note,
.catalog-page .catalog-calculator,
.catalog-page .catalog-calculator :is(input,button),
.catalog-page .catalog-calc-highlight {
  background: #fff;
}

@media (max-width: 640px) {
  .catalog-page .catalog-cosmos-run {
    background-size: 100% 100%;
  }

  .catalog-page .catalog-hero {
    min-height: 70dvh;
    padding: 78px 0 48px;
  }

  .catalog-page .catalog-hero-facts {
    width: 100%;
  }

  .catalog-page .catalog-hero-help {
    width: 100%;
  }

  .catalog-page .catalog-compare {
    padding-block: 58px 74px;
  }

  .catalog-page .catalog-product {
    border-radius: 18px;
  }

  .catalog-page .catalog-product-copy {
    padding: 26px 20px 30px;
  }

  .catalog-page .catalog-models {
    grid-template-columns: minmax(0,1fr);
  }

  .catalog-page .catalog-models article {
    padding: 15px;
  }

  .catalog-page .catalog-help-grid {
    padding: 22px 18px;
    border-radius: 20px;
  }
}

/* ==========================================================================
   CAPA DE CIERRE 01-sep-2026 - tinta por superficie (sondeo de estilos
   computados + captura Playwright por pagina). Regla de la casa: la tinta
   la decide la superficie que se pinta; relleno naranjo lleva letra negra.
   ========================================================================== */

/* --- 1. Escenario de acuerdos (condiciones.html): lamina oscura quedo
          fuera de las listas de tinta blanca -> texto #0a0a0a sobre #000. */
.section:not(.section-dark):not(.hero-premium):not(.conditions-hero):not(.care-section):not(.personal-section).conditions-stage {
  --bg2: #000;
  --title: #fff;
  --text: #d6d6d6;
  --text-dark: #fff;
  --text-muted: #d6d6d6;
  --black: #fff;
}

body main .conditions-stage :is(h1,h2,h3,h4,p,li,strong,b,span,small) {
  color: #fff;
  text-shadow: none;
}

body main .conditions-stage .condition-eyebrow {
  color: var(--naranjo-texto);
}

body main .conditions-stage .condition-slide small,
body main .conditions-stage .condition-slide-index small {
  color: rgba(255,255,255,.72);
}

/* Pestañas activas y llaves con relleno naranjo -> letra negra (6.90 AA). */
body main .condition-tab.is-active,
body main .condition-key,
body main .condition-slide-index span {
  color: #0a0a0a;
}

body main .condition-controls button[data-condition-prev]:not(:disabled) {
  color: #fff;
  border-color: rgba(255,255,255,.45);
  background: transparent;
}

body main .condition-controls button:disabled {
  color: rgba(255,255,255,.4);
}

/* --- 2. Hero de preguntas frecuentes: h1 usa color inline var(--black)
          sobre lamina cosmos; se voltea la variable en su superficie. */
.faq-page .faq-hero {
  --black: #fff;
  --text-muted: #d6d6d6;
  --text-dark: #fff;
}

/* --- 3. Boton fantasma sobre laminas oscuras: la regla global le ponia
          tinta negra dentro de Heroes oscuros. */
body main :is(.section-light,.section.soft,.section:not(.section-dark)):is(.conditions-hero,.conditions-stage,.faq-hero,.section-dark,.care-section,.hero-premium,.faq-page .faq-hero) .btn-ghost,
body main .conditions-stage .btn-ghost {
  border-color: #fff;
  background: transparent;
  color: #fff;
}

/* --- 4. Chat Sol: relleno naranjo lleva letra negra; negrita del mensaje
          hereda la tinta de su burbuja (quedo invisible). */
body main .sol-cta {
  color: #0a0a0a;
}

body .sol-root .sol-panel .sol-msg strong,
body .sol-root .sol-panel .sol-msg b {
  color: inherit;
}

/* --- 5. Valorizacion: el <details> de cada tarjeta tiene toggle propio;
          el summary::after global duplicaba el control. */
.val-card summary::after {
  content: none;
}

/* --- 6. Banner "sin tripolino" (guia visual): tenia solo fondo y color,
          sin caja: icono apilado y texto pegado al borde. */
.banner-sin-tripolino {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  border-radius: 16px;
}

.banner-sin-tripolino-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
}

.banner-sin-tripolino > div:last-child {
  min-width: 0;
}

/* --- 7. Pastillas de tiendas (guia visual): chips sin caja ni ritmo. */
.donde-comprar-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.donde-comprar-pills span {
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .06em;
}

/* Cierre 01-sep (bis): una capa previa pinta los titulos del escenario con
   especificidad (0,2,3); se sube la de este cierre para ganarla. */
body main .conditions-stage.conditions-stage :is(h1,h2,h3,h4,p,li,strong,b,span,small) {
  color: #fff;
  text-shadow: none;
}

body main .conditions-stage.conditions-stage .condition-eyebrow {
  color: var(--naranjo-texto);
}

body main .conditions-stage.conditions-stage .condition-slide small,
body main .conditions-stage.conditions-stage .condition-slide-index small {
  color: rgba(255,255,255,.72);
}

/* El eyebrow vive sobre lamina negra: naranjo de texto = #ff6a13 (no el
   #a63c00 reservado para fondos claros). */
body main .conditions-stage.conditions-stage .condition-eyebrow {
  color: #ff6a13;
}

/* ==========================================================================
   LAMINA DE LAYOUT - paginas de comunas (plantilla jack). Las clases
   jack-hero-* y jack-portrait se generaron sin hoja de layout: solo vivian
   reglas de tinta. Geometria segun el inicio: contenedor centrado, retrato
   en placa, acentos naranjo #ff6a13 sobre negro.
   ========================================================================== */

.jack-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--syt-header-h, 81px) + clamp(36px,5vw,64px)) clamp(24px,6vw,72px) clamp(56px,7vw,88px);
}

.jack-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.jack-hero-top,
.jack-hero-grid,
.jack-hero > .jack-stack {
  max-width: 1200px;
  margin-inline: auto;
}

.jack-hero-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.jack-hero-seo {
  max-width: 52ch;
  color: rgba(255,255,255,.72);
  font-size: .95rem;
  line-height: 1.5;
}

.jack-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: clamp(32px,5vw,72px);
  align-items: center;
  margin-top: clamp(24px,3.5vw,48px);
}

.jack-hero-text {
  max-width: 640px;
}

.jack-hero-text .jack-hero-h1 {
  line-height: 1.02;
  letter-spacing: -.02em;
}

.jack-hero-tag {
  max-width: 46ch;
  margin-top: 18px;
  color: #d6d6d6;
  font-size: clamp(.95rem,1.4vw,1.1rem);
  line-height: 1.6;
}

.jack-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.jack-portrait {
  min-width: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 34px 82px -48px rgba(0,0,0,.85);
}

.jack-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.jack-hero .accent {
  color: #ff6a13;
}

.jack-stack {
  display: grid;
  gap: 16px;
}

.jack-trajes {
  padding: clamp(56px,7vw,104px) clamp(20px,4vw,40px);
}

.jack-trajes > h2,
.jack-services > h2,
.jack-about > h2 {
  max-width: 1080px;
  margin-inline: auto;
  line-height: 1.04;
  letter-spacing: -.02em;
}

.jack-stack > .jack-card + .jack-card {
  margin-top: 0;
}

@media (max-width: 900px) {
  .jack-hero-grid {
    grid-template-columns: minmax(0,1fr);
  }

  .jack-portrait {
    max-width: 520px;
  }
}

/* ===========================================================================
   LÁMINA DE MOTION - 01-sep-2026
   Tokens unificados + micro-interacciones + estados completos.
   Reglas: solo transform/opacity/background-color (sin jank),
   una animación por elemento, estados 200-400ms, reveals 700ms spring.
   La tinta la sigue decidiendo la superficie (sistema sellado).
   =========================================================================== */
:root {
  --syt-spring: cubic-bezier(.34, 1.35, .64, 1);   /* Shrink-to-Grow, entrada */
  --syt-glide: cubic-bezier(.22, 1, .36, 1);       /* salida suave */
  --syt-t-estado: 220ms;                            /* estados hover/focus */
  --syt-t-toque: 80ms;                              /* confirmación :active */
}

/* --- Confirmación de toque en botones (falta profesional #4) --- */
.btn:active,
.catalog-tab:active,
.catalog-gallery-choice:active,
.condition-tab:active {
  transform: translate3d(0, -1px, 0) scale(.97);
  transition-duration: var(--syt-t-toque);
}

/* --- Estados de formulario: transición + anillo de foco naranjo --- */
main input,
main select,
main textarea,
.sol-root input,
.sol-root select,
.sol-root textarea {
  transition: border-color var(--syt-t-estado) var(--syt-glide),
              box-shadow var(--syt-t-estado) var(--syt-glide),
              background-color var(--syt-t-estado) var(--syt-glide);
}

main input:focus-visible,
main select:focus-visible,
main textarea:focus-visible,
.sol-root input:focus-visible,
.sol-root select:focus-visible,
.sol-root textarea:focus-visible {
  outline: none;
  border-color: var(--naranjo, #ff6a13);
  box-shadow: 0 0 0 3px rgba(255, 106, 19, .20);
}

main input:hover:not(:focus):not([disabled]),
main select:hover:not(:focus):not([disabled]),
main textarea:hover:not(:focus):not([disabled]) {
  border-color: rgba(255, 106, 19, .55);
}

main input[disabled],
main select[disabled],
main textarea[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

/* Botón en carga: texto se retira, entra spinner propio del panel */
main button.is-loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}
main button.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .25);
  border-top-color: currentColor;
  color: #0a0a0a;
  animation: syt-spin .7s linear infinite;
}
@keyframes syt-spin { to { transform: rotate(360deg) } }

/* --- Hover de fila en tablas (falta profesional #5) --- */
main table tbody tr {
  transition: background-color 180ms var(--syt-glide);
}
main table tbody tr:hover {
  background-color: rgba(255, 106, 19, .06);
}
:is(.section-dark,.conditions-stage,.conditions-hero,.care-section,.hero-premium) main table tbody tr:hover,
main :is(.section-dark,.conditions-stage,.conditions-hero,.care-section,.hero-premium) table tbody tr:hover {
  background-color: rgba(255, 255, 255, .05);
}

/* --- Acordeones: chevron gira + pregunta acompaña --- */
main details summary {
  transition: color var(--syt-t-estado) var(--syt-glide);
}
main details[open] > summary .chev,
main details[open] > summary svg.chevron {
  transform: rotate(45deg);
}
main details > summary .chev,
main details > summary svg.chevron {
  transition: transform var(--syt-t-estado) var(--syt-spring);
}

/* --- Tipografía: títulos equilibrados en el salto de línea --- */
main h1, main h2 { text-wrap: balance; }
main p:not(.jack-hero-tag) { text-wrap: pretty; }

/* --- Nav: dropdown ya existe; se unifica su curva --- */
.nav-dropdown-menu {
  transition: opacity var(--syt-t-estado) var(--syt-glide),
              transform var(--syt-t-estado) var(--syt-spring),
              visibility var(--syt-t-estado);
}

/* --- Salvaguarda reduce-motion para TODO lo agregado en esta lámina --- */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .catalog-tab:active, .catalog-gallery-choice:active, .condition-tab:active { transform: none }
  main button.is-loading::after { animation-duration: .01ms }
  main details > summary .chev, main details > summary svg.chevron { transition: none }
  main details[open] > summary .chev, main details[open] > summary svg.chevron { transform: none }
}

/* ===========================================================================
   RESTO DEL SITIO · COHERENCIA, RITMO Y FLUJO (02-sep-2026)
   Aplica lo aprendido en catalogo sin convertir las paginas informativas en
   copias del carrusel. Conserva el contenido y la funcionalidad existentes.
   =========================================================================== */

/* La navegacion muestra la familia activa, incluso dentro de un desplegable. */
.site-header .nav-dropdown:has(.nav-dropdown-menu a.active) > .nav-dropdown-trigger,
.site-header .nav-links > a.active,
.site-header a[aria-current="page"] {
  color: #fff;
  text-decoration-color: var(--naranjo);
  text-underline-offset: 7px;
}

.site-header .nav-dropdown:has(.nav-dropdown-menu a.active) > .nav-dropdown-trigger::after,
.site-header .nav-links > a.active::after,
.site-header a[aria-current="page"]::after {
  opacity: 1;
}

main > section,
main > div[id],
main section[id] {
  scroll-margin-top: 108px;
}

/* Compactar con aire: menos recorrido muerto, no menos padding interior. */
.guide-tallaje-page main > .section:not(:first-child),
body:has(#faq-piezas) main > .section:not(:first-child),
body:has(.val-tabs) main > .section:not(.hero-premium),
.conditions-page #faq {
  padding-block: clamp(56px, 6vw, 84px) !important;
}

.faq-page .faq-group {
  margin-bottom: clamp(36px, 5vw, 58px);
}

/* Condiciones: controles tactiles reales y texto contenido en tablet. */
.conditions-page .condition-tab {
  min-width: 46px;
  min-height: 46px;
}

.conditions-page .condition-slide-index {
  overflow: hidden;
}

.conditions-page .condition-slide-index small {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (min-width: 721px) and (max-width: 900px) {
  .conditions-page .condition-slide,
  .conditions-page .condition-deck[data-ready="true"] .condition-slide.is-active {
    grid-template-columns: minmax(170px, .48fr) minmax(0, 1.52fr);
  }

  .conditions-page .condition-slide-index {
    padding-inline: 24px;
  }
}

/* Solicitud: en telefono se ve el paso actual y los demas quedan como hitos. */
@media (max-width: 640px) {
  body[data-page="solicitud"] .stepper-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
  }

  body[data-page="solicitud"] .stepper-pill {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    min-height: 52px;
    padding: 5px;
    justify-content: center;
    border-radius: 14px;
  }

  body[data-page="solicitud"] .stepper-pill.current {
    flex: 1 1 148px;
    width: auto;
    padding-inline: 10px;
    justify-content: flex-start;
  }

  body[data-page="solicitud"] .stepper-pill .sp-num {
    width: 32px;
    height: 32px;
  }

  body[data-page="solicitud"] .stepper-pill .sp-tx {
    display: none;
  }

  body[data-page="solicitud"] .stepper-pill.current .sp-tx {
    display: block;
    font-size: .66rem;
    line-height: 1.08;
  }
}

/* Guia visual: la lamina oficial completa reemplaza el bloque parcial viejo. */
.guide-advice-section {
  color: #fff;
  background-color: #000;
  background-image:
    linear-gradient(110deg, rgba(0,0,0,.93), rgba(0,0,0,.58) 58%, rgba(0,0,0,.82)),
    var(--syt-cosmos-orange);
  background-position: center 66%;
  background-repeat: no-repeat;
  background-size: cover;
}

.guide-advice-heading {
  max-width: 760px;
  margin-bottom: clamp(30px, 4vw, 48px);
}

.guide-advice-heading :is(h2,p) {
  color: #fff;
  text-shadow: var(--syt-text-shadow);
}

.guide-advice-heading h2 {
  margin: 14px 0 10px;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
}

.guide-advice-heading p {
  max-width: 64ch;
  line-height: 1.65;
}

.guide-advice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.guide-advice-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(170px, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 22px;
  background: rgba(0,0,0,.72);
  box-shadow: 0 24px 58px rgba(0,0,0,.38);
  backdrop-filter: blur(12px);
}

.guide-advice-card figure {
  align-self: stretch;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 12px;
  background: #fff;
}

.guide-advice-card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
}

.guide-advice-card > div {
  min-width: 0;
  padding: clamp(20px, 3vw, 30px);
}

.guide-advice-card > div > span {
  display: block;
  margin-bottom: 8px;
  color: #ff8a48;
  font: 800 .74rem/1.2 var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.guide-advice-card :is(h3,p) {
  color: #fff;
  text-shadow: var(--syt-text-shadow);
}

.guide-advice-card h3 {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.06;
}

.guide-advice-card p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.58;
}

.guide-advice-warning {
  width: min(100%, 884px);
  margin: clamp(28px, 4vw, 44px) auto 0;
  padding: 0;
}

.guide-advice-warning img {
  display: block;
  width: 100%;
  height: auto;
  border: 4px solid #fff;
  border-radius: 16px;
}

.guide-advice-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 24px;
}

.guide-advice-actions p {
  max-width: 58ch;
  margin: 0;
  color: #fff;
  line-height: 1.55;
  text-shadow: var(--syt-text-shadow);
}

@media (max-width: 900px) {
  .guide-advice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 580px) {
  .guide-advice-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-advice-card figure {
    max-height: 390px;
  }

  .guide-advice-card img {
    width: auto;
    max-width: 100%;
    max-height: 360px;
  }

  .guide-advice-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .guide-advice-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Paginas por comuna: el formulario inyectado ya no depende de Tailwind. */
.jack-services:has(#lead-form-slot) {
  position: relative;
  background-image:
    radial-gradient(circle at 92% 8%, rgba(255,106,19,.08), transparent 34%),
    linear-gradient(#fff, #fff);
}

#lead-form-slot #lead-form {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid #c8c8c8;
  border-top: 4px solid var(--naranjo);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 26px 60px -42px rgba(101,39,8,.42);
  text-align: left;
}

#lead-form-slot #lead-form > .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

#lead-form-slot #lead-form label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  margin-bottom: 18px;
  color: #0a0a0a;
}

#lead-form-slot #lead-form label > span:first-child {
  color: #3f3f3f;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .055em;
  line-height: 1.35;
  text-transform: uppercase;
}

#lead-form-slot #lead-form :is(input:not([type="checkbox"]), textarea, select) {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #b8b8b8;
  border-radius: 12px;
  background: #fff;
  color: #0a0a0a;
  font: inherit;
}

#lead-form-slot #lead-form textarea {
  min-height: 92px;
  resize: vertical;
}

#lead-form-slot #lead-form label:has(input[type="checkbox"]) {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 44px;
  padding-block: 10px;
  font-size: .9rem;
  line-height: 1.55;
  cursor: pointer;
}

#lead-form-slot #lead-form input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-height: 22px;
  margin: 2px 0 0;
  accent-color: var(--naranjo);
}

/* El resumen completo es el blanco tactil del acordeon, no solo su texto. */
main details > summary {
  min-height: 46px;
  box-sizing: border-box;
}

#lead-form-slot #lead-form .whatsapp-pulse {
  width: 100%;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  border: 1px solid var(--naranjo);
  border-radius: 14px;
  background: var(--naranjo);
  color: #0a0a0a;
  font-weight: 900;
}

#lead-form-slot #lead-form .whatsapp-pulse svg {
  width: 20px;
  height: 20px;
}

#lead-form-slot #lead-form > p:last-of-type {
  margin: 12px 0 0;
  color: #5c5c5c;
  font-size: .78rem;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 640px) {
  #lead-form-slot #lead-form > .grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  #lead-form-slot #lead-form {
    border-radius: 18px;
  }
}

/* ===========================================================================
   CATÁLOGO · COSMOS CONTINUO + LÁMINAS TRANSPARENTES LEGIBLES
   La escena hero → traje → cálculo → consejos comparte una sola imagen. Las
   láminas oscuras dejan verla sin sacrificar contraste ni depender del brillo
   que quede detrás de cada palabra.
   =========================================================================== */
.catalog-page .catalog-cosmos-run {
  background-position: center top;
  background-size: cover;
}

.catalog-page .catalog-cosmos-run > :is(.catalog-hero,.catalog-compare,.catalog-planning,.catalog-advice) {
  background-color: transparent;
  background-image: none;
}

.catalog-page .catalog-cosmos-run > :is(.catalog-hero,.catalog-planning)::before {
  display: none;
}

.catalog-page .catalog-product {
  border: 1px solid rgba(255,106,19,.86);
  background: rgba(0,0,0,.58);
  box-shadow: 0 0 26px rgba(255,106,19,.24), 0 30px 78px rgba(0,0,0,.52);
  backdrop-filter: blur(14px);
}

.catalog-page .catalog-gallery-track,
.catalog-page .catalog-price-row > div,
.catalog-page .catalog-exclusion,
.catalog-page .catalog-models article,
.catalog-page .catalog-disclosures details,
.catalog-page .catalog-gallery-choice,
.catalog-page .catalog-photo-pending {
  border-color: rgba(255,255,255,.24);
  background: rgba(0,0,0,.54);
}

.catalog-page .catalog-disclosures details {
  box-shadow: none;
}

.catalog-page .catalog-gallery-track {
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}

.catalog-page .catalog-product-copy,
.catalog-page .catalog-product-copy :is(h2,h3,h4,p,li,small,strong,span:not(.catalog-color-label),summary),
.catalog-page .catalog-price-row strong,
.catalog-page .catalog-gallery-choice,
.catalog-page .catalog-photo-pending :is(p,strong) {
  color: #fff;
  text-shadow: var(--syt-text-shadow);
}

.catalog-page .catalog-product-copy :is(.catalog-description,.catalog-models p,.catalog-models small,.catalog-disclosures p),
.catalog-page .catalog-price-row span,
.catalog-page .catalog-exclusion span,
.catalog-page .catalog-photo-pending p {
  color: rgba(255,255,255,.82);
}

.catalog-page .catalog-models article > span,
.catalog-page .catalog-exclusion strong {
  color: #ffb078;
}

.catalog-page .catalog-models small,
.catalog-page .catalog-disclosures details {
  border-color: rgba(255,255,255,.22);
}

.catalog-page .catalog-gallery-choice.is-active {
  border-color: var(--catalog-accent);
  color: #fff;
}

.catalog-page .catalog-text-link {
  color: #fff;
  text-shadow: var(--syt-text-shadow);
}

.catalog-page .catalog-color-label,
.catalog-page .catalog-primary-action {
  text-shadow: none;
}

/* Presentación de la lámina oficial: cuatro recortes exactos y copy HTML. */
.catalog-page .catalog-advice {
  padding: clamp(70px,8vw,108px) 0 clamp(82px,9vw,124px);
  color: #fff;
}

.catalog-page .catalog-advice-heading {
  max-width: 780px;
  margin-bottom: 28px;
}

.catalog-page .catalog-advice-heading h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem,4.2vw,3.55rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-shadow: var(--syt-text-shadow);
}

.catalog-page .catalog-advice-heading p {
  max-width: 64ch;
  margin: 16px 0 0;
  color: rgba(255,255,255,.84);
  font-size: 1rem;
  line-height: 1.58;
  text-shadow: var(--syt-text-shadow);
  text-wrap: pretty;
}

.catalog-page .catalog-advice-carousel {
  overflow: hidden;
  padding: clamp(18px,3vw,34px);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 24px;
  background: rgba(0,0,0,.56);
  box-shadow: 0 28px 70px rgba(0,0,0,.42);
  backdrop-filter: blur(14px);
  touch-action: pan-y;
}

.catalog-page .catalog-advice-slide {
  display: grid;
  grid-template-columns: minmax(280px,.82fr) minmax(0,1.18fr);
  align-items: center;
  gap: clamp(28px,5vw,72px);
}

.catalog-page .catalog-advice-slide[hidden] {
  display: none;
}

.catalog-page .catalog-advice-slide figure {
  display: grid;
  place-items: center;
  min-width: 0;
  margin: 0;
}

.catalog-page .catalog-advice-slide img {
  display: block;
  width: 100%;
  max-width: 438px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,.38);
}

.catalog-page .catalog-advice-copy {
  min-width: 0;
  padding: clamp(6px,2vw,18px) 0;
}

.catalog-page .catalog-advice-copy > span {
  display: block;
  margin-bottom: 12px;
  color: #ffb078;
  font: 850 .73rem/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: var(--syt-text-shadow);
}

.catalog-page .catalog-advice-copy h3 {
  max-width: 17ch;
  margin: 0;
  color: #fff;
  font-size: clamp(1.8rem,3.5vw,3.15rem);
  line-height: 1.03;
  letter-spacing: -.035em;
  text-shadow: var(--syt-text-shadow);
}

.catalog-page .catalog-advice-copy p,
.catalog-page .catalog-advice-copy li {
  color: rgba(255,255,255,.88);
  font-size: clamp(.94rem,1.4vw,1.05rem);
  line-height: 1.58;
  text-shadow: var(--syt-text-shadow);
}

.catalog-page .catalog-advice-copy p {
  max-width: 56ch;
  margin: 18px 0 0;
}

.catalog-page .catalog-advice-copy ul {
  display: grid;
  gap: 10px;
  max-width: 58ch;
  margin: 22px 0 0;
  padding-left: 21px;
}

.catalog-page .catalog-advice-copy strong {
  color: #fff;
}

.catalog-page .catalog-advice-controls {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 48px;
  align-items: stretch;
  gap: 10px;
  margin-top: 24px;
}

.catalog-page .catalog-advice-controls > div {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
}

.catalog-page .catalog-advice-controls button {
  min-width: 44px;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 10px;
  background: rgba(0,0,0,.66);
  color: #fff;
  font: 800 .78rem/1.2 var(--font-display);
  text-shadow: var(--syt-text-shadow);
  cursor: pointer;
  transition: border-color .18s ease,background-color .18s ease,color .18s ease,transform .18s ease;
}

.catalog-page .catalog-advice-controls button:hover {
  border-color: var(--naranjo);
  transform: translateY(-1px);
}

.catalog-page .catalog-advice-controls button.is-active {
  border-color: var(--naranjo);
  background: var(--naranjo);
  color: #0a0a0a;
  text-shadow: none;
}

.catalog-page .catalog-advice-controls button:focus-visible {
  outline: 3px solid rgba(255,176,120,.72);
  outline-offset: 3px;
}

.catalog-page .catalog-advice-live {
  margin: 14px 0 0;
  color: rgba(255,255,255,.78);
  font: 750 .76rem/1.3 var(--font-mono);
  text-align: center;
  text-shadow: var(--syt-text-shadow);
}

.catalog-page .catalog-advice-warning {
  max-width: 1080px;
  margin: 22px auto 0;
}

.catalog-page .catalog-advice-warning img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.36);
}

/* Inicio: un CTA que avanza el flujo con los tres datos operativos reales. */
.home-page .home-flow-cta {
  padding: clamp(64px,8vw,94px) 0;
  background-color: #000;
  background-image:
    linear-gradient(108deg,rgba(0,0,0,.92),rgba(0,0,0,.58)),
    var(--syt-cosmos-orange);
  background-position: center 58%;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}

.home-page .home-flow-cta-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(310px,.55fr);
  align-items: center;
  gap: clamp(36px,7vw,88px);
  padding: clamp(26px,4vw,44px);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 24px;
  background: rgba(0,0,0,.48);
  box-shadow: 0 28px 70px rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
}

.home-page .home-flow-cta h2 {
  max-width: 15ch;
  margin: 16px 0 0;
  color: #fff;
  font-size: clamp(2rem,4vw,3.4rem);
  line-height: 1.02;
  text-shadow: var(--syt-text-shadow);
}

.home-page .home-flow-cta p {
  max-width: 58ch;
  margin: 16px 0 0;
  color: rgba(255,255,255,.84);
  line-height: 1.58;
  text-shadow: var(--syt-text-shadow);
}

.home-page .home-flow-actions {
  display: grid;
  gap: 14px;
  justify-items: stretch;
}

.home-page .home-flow-actions .btn {
  min-height: 54px;
  justify-content: center;
  text-shadow: none;
}

.home-page .home-flow-actions > a:not(.btn) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-shadow: var(--syt-text-shadow);
}

.home-page .home-flow-actions small {
  color: rgba(255,255,255,.72);
  line-height: 1.4;
  text-align: center;
  text-shadow: var(--syt-text-shadow);
}

@media (max-width: 820px) {
  .catalog-page .catalog-advice-slide,
  .home-page .home-flow-cta-grid {
    grid-template-columns: minmax(0,1fr);
  }

  .catalog-page .catalog-advice-copy h3 {
    max-width: 20ch;
  }

  .catalog-page .catalog-advice-controls > div {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 520px) {
  .catalog-page .catalog-cosmos-run {
    background-size: auto 100%;
  }

  .catalog-page .catalog-product {
    padding: 0;
  }

  .catalog-page .catalog-advice-carousel {
    padding: 14px;
    border-radius: 18px;
  }

  .catalog-page .catalog-advice-slide {
    gap: 24px;
  }

  .catalog-page .catalog-advice-copy {
    padding: 0 4px 8px;
  }

  .catalog-page .catalog-advice-controls {
    grid-template-columns: 44px minmax(0,1fr) 44px;
    gap: 6px;
  }

  .catalog-page .catalog-advice-controls > div {
    gap: 6px;
  }

  .catalog-page .catalog-advice-controls button {
    min-height: 44px;
    padding: 7px 6px;
    font-size: .7rem;
  }

  .catalog-page .catalog-advice-warning {
    margin-top: 16px;
  }

  .home-page .home-flow-cta-grid {
    padding: 22px 18px;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-page .catalog-advice-controls button {
    transition: none;
  }
}

/* =============================================================================
   DISCIPLINA VISUAL 2026
   -----------------------------------------------------------------------------
   Esta hoja creció a 11.800 líneas con TRES sistemas de tokens superpuestos
   (`--sitio-*`, `--traje-*` y un `--text/--text-muted` que se redefine tres
   veces). El resultado, medido sobre la portada renderizada, eran CATORCE
   colores de texto distintos.

   Se midieron seis sitios premiados de awwwards con la misma vara: ninguno pasa
   de siete, y la mayoría usa dos o tres. Eso -- no la falta de animaciones -- es
   lo que separa un sitio profesional de uno que parece armado por partes.

   Lo que había, y por qué sobra:

     6 tonos de blanco   #fff y rgba(255,255,255,·) al .72 .75 .80 .84 .85
                         Nadie distingue un 80% de un 84%. Son dos: el blanco y
                         el blanco atenuado.
     3 negros            #0a0a0a, #000, #3d3d3d
     1 azul suelto       #d7e2ea, 95 caracteres en toda la página

   Va al final del archivo a propósito: gana por orden sin subir especificidad
   ni usar !important, igual que el bloque móvil del panel.
   ========================================================================== */
:root{
  /* Los cuatro de marca. Todo texto sale de acá. */
  --tinta:        #0a0a0a;   /* el negro. Titulares y cuerpo sobre claro       */
  --tinta-suave:  #5c5c5c;   /* lo secundario: pies, notas, rótulos            */
  --sobre-osc:    #ffffff;   /* texto sobre negro o sobre imagen               */
  --sobre-osc-2:  rgba(255,255,255,.78);   /* su versión atenuada, UNA sola    */
  --acento-txt:   #a63c00;   /* el naranjo legible como texto sobre blanco     */

  /* La escala. Antes había seis tamaños entre 13 y 18px -- eso no es una
     escala, es ruido: el ojo no distingue 15 de 16 y el resultado es una
     página sin jerarquía. Saltos de 1.25 para que cada nivel se note. */
  --t-pie:    .8125rem;   /* 13px · notas al pie, créditos                     */
  --t-menor:  .9375rem;   /* 15px · rótulos, metadatos                         */
  --t-base:   1.0625rem;  /* 17px · cuerpo. Sube de 16: se lee en un teléfono  */
  --t-guia:   1.375rem;   /* 22px · bajadas                                    */
  --t-h3:     1.75rem;
  --t-h2:     2.5rem;
  --t-h1:     clamp(2.75rem, 6vw, 4.5rem);

  /* El cuerpo de texto no pasa de acá. Medido en los premiados: entre 34 y 73
     caracteres. Sobre 75 el ojo pierde el renglón al volver. */
  --medida: 68ch;
}

/* ---- Los blancos, a dos ---------------------------------------------------- */
.hero p, .hero .sub, .seccion-osc p, .footer p, .footer a,
[class*="-osc"] p, [class*="dark"] p{ color: var(--sobre-osc-2); }

/* ---- Los negros, a dos ----------------------------------------------------- */
body{ color: var(--tinta); font-size: var(--t-base); }
small, figcaption, .nota, .pie, .meta{ color: var(--tinta-suave); }

/* ---- El ancho de lectura --------------------------------------------------- */
p{ max-width: var(--medida); }
/* Salvo donde el párrafo ES la maqueta: en una tarjeta o una celda manda la caja. */
.card p, .tarjeta p, td p, li p, .grid p, [class*="col"] p{ max-width: none; }

/* =============================================================================
   MOVIMIENTO
   -----------------------------------------------------------------------------
   Medido en los premiados: el movimiento NO viene de animaciones sueltas sino de
   transiciones (entre 27 y 389 elementos) y de revelar al entrar en pantalla.
   El nuestro tenía 55 transiciones pero UN solo elemento reaccionaba al scroll:
   la página no respira.

   Esto revela cada bloque al entrar, una vez y sin rebote. No es decoración:
   marca dónde empieza una idea nueva, que es lo que permite leer un sitio largo
   sin cansarse. Y se apaga entero si el sistema pide menos movimiento.
   ========================================================================== */
[data-revelar]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
[data-revelar].visible{ opacity: 1; transform: none; }
/* Escalonado corto: 60ms basta para que se lea como una secuencia. Más que eso
   se siente lento y la gente scrollea antes de que termine. */
[data-revelar][data-orden="1"]{ transition-delay: .06s }
[data-revelar][data-orden="2"]{ transition-delay: .12s }
[data-revelar][data-orden="3"]{ transition-delay: .18s }

@media (prefers-reduced-motion: reduce){
  [data-revelar]{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =============================================================================
   LOS TRAJES · una página en vez de tres
   -----------------------------------------------------------------------------
   Reemplaza a catalogo, guia-visual-traje y anatomia-traje-tobas. El orden sigue
   la decisión real del curso: primero el color, después las piezas de ESE color,
   al final los accesorios que van iguales para todos.
   ========================================================================== */
.hero-trajes{ padding: clamp(4rem, 10vw, 7rem) 0 clamp(2.5rem, 6vw, 4rem); }

/* El penacho en movimiento.

   Va AL LADO del titular, en su propio panel, no de fondo detrás del texto. Un
   video detrás de las letras obliga a taparlo con una capa oscura para que se
   lean, y termina siendo un fondo borroso que no se mira: se paga el peso del
   video y no se ve el traje. Al lado se ve entero y el texto no pelea con nada.

   Y es una sola pieza en toda la página. La instrucción era informar sin
   saturar; dos o tres de estos serían justo lo contrario. */
.hero-trajes .wrap{ display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }

@media (min-width: 900px){
  .hero-trajes .wrap{ grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .hero-trajes .hero-txt{ grid-column: 1; }
  .penacho{ grid-column: 2; }
}

/* Sin caja. El penacho está fotografiado sobre blanco puro -las cuatro esquinas
   miden 254-255- así que apoyado en la página blanca no tiene borde: se ve la
   pieza flotando, no un video incrustado.

   Nada de `border-radius`, `background` ni sombra: cualquiera de las tres dibuja
   el rectángulo que justamente no queremos que se vea. */
.penacho{
  position: relative;
  margin: 0;
  /* 4:3, que es la proporción de las fotos del catálogo. Forzar 16:9 obligaba a
     recortar y se comían las puntas de las plumas. */
  aspect-ratio: 4 / 3;
}
.penacho video,
.penacho img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* El nombre del color va DEBAJO, en la página, no encima de la imagen. Encima
   necesitaba sombra para leerse y eso volvía a marcar el rectángulo. */
.penacho figcaption{
  margin-top: 2px;
  text-align: center;
  font-size: var(--t-pie);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  transition: color .25s;
}
.hero-trajes .penacho figcaption{ color: var(--tinta-suave); }

/* Las cuatro capas ocupan el mismo sitio; solo se ve la del color elegido. Se
   funden entre sí, que es el único momento en que el movimiento aporta: cuando
   alguien cambia de color y ve el suyo. */
.penacho-capa{
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.penacho-capa[data-activa="si"]{ opacity: 1; }
.penacho-capa video,
.penacho-capa img{
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

/* NINGUNA se apaga. Bajarles la opacidad a las no elegidas las volvía pasteles
   —el rojo se veía rosado, el morado lila— y el color es justo lo que hay que
   mostrar bien: es lo que el curso está eligiendo.

   La elegida se marca con un anillo oscuro separado por un hilo blanco. Se ve
   cuál es sin tocarle el color a ninguna, y se distingue igual en una foto en
   blanco y negro o para quien no separa bien los tonos. */
.hero-trajes .chip-color[aria-pressed="false"]{
  box-shadow: none;
  transform: scale(.97);
}
.hero-trajes .chip-color[aria-pressed="true"]{
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px var(--sitio-claro), 0 0 0 4px var(--tinta),
              0 8px 20px -10px color-mix(in srgb, var(--traje) 70%, transparent);
}
.hero-trajes .chip-color:hover{ transform: translateY(-1px) scale(1); }
.hero-trajes .chip-color:focus-visible{
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
}

/* Quien pidió menos movimiento ve el primer fotograma, quieto.

   No hace falta ninguna regla para eso, y ahí estaba el error: había una imagen
   de respaldo y dos reglas peleando por cuál se veía, y ganaba la de esconder
   las dos. Quedaba un rectángulo negro.

   Con `preload="none"` y sin `autoplay`, el `<video>` muestra su `poster` -que
   es ese mismo fotograma- hasta que el guion decide cargarlo. Si pidieron menos
   movimiento, el guion no lo carga nunca y el póster se queda. Una sola pieza,
   nada que sincronizar. */
.hero-trajes h1{ font-size: var(--t-h1); line-height: .98; letter-spacing: -.025em; margin: .2em 0 .35em; }
.hero-trajes .sub{ font-size: var(--t-guia); line-height: 1.45; max-width: 34ch; color: var(--tinta-suave); }

.hero-colores{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2rem; }
/* La pastilla ES del color. Antes era una pastilla blanca con un puntito de
   color al lado: el color -que es LO que se elige- quedaba reducido a once
   píxeles, y las cuatro se veían iguales entre sí.

   La letra va blanca en las cuatro. Está medido: 5,48:1 en el rojo, 6,23 en el
   azul, 5,51 en el fucsia y 6,88 en el morado, sobre un mínimo de 4,5:1 para
   texto de este tamaño. Negro no llegaba en ninguno (2,88 a 3,61). */
/* Se califica con `.hero-trajes` delante a propósito: unas líneas más abajo,
   `.hero-trajes *{ color: var(--tinta) }` pinta TODO el texto del encabezado de
   negro y le gana a `.chip-color` a secas. Escrita sin ese prefijo, la letra
   blanca no se aplicaba y quedaba negro sobre rojo. */
.hero-trajes .chip-color{
  display: inline-flex; align-items: center; justify-content: center;
  /* Alto de dedo. Al pasar de `<span>` a `<button>` se volvieron tocables, y
     medían 38 px: por debajo de los 48 que usa el resto del sitio. */
  min-height: 48px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--traje);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--t-menor); font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  /* Sombra del propio color, no gris: apoya la pastilla sin ensuciarla. */
  box-shadow: 0 6px 18px -9px color-mix(in srgb, var(--traje) 70%, transparent);
  transition: transform .18s, box-shadow .18s, opacity .18s;
}

/* `padding-block`, NO `padding: X 0`.

   Estas secciones se escriben `<section class="wrap seccion">`, y `.wrap` trae
   su relleno lateral en `padding-inline`. El atajo `padding: X 0` lo borraba:
   entre 768 y 1280 px de ancho el texto quedaba pegado al borde izquierdo, sin
   un solo píxel de margen, y a 1440 arrancaba 56 px más adentro que el título
   del encabezado, que sí conserva el relleno por ser un `div.wrap` aparte.

   Se ve en cualquier notebook. No se ve en el teléfono ni en la pantalla
   grande, que son los dos anchos en los que uno mira. */
.seccion{ padding-block: clamp(3rem, 7vw, 5rem); }
.seccion h2{ font-size: var(--t-h2); line-height: 1.05; letter-spacing: -.02em; margin: .15em 0 .5em; }
.seccion h3{ font-size: var(--t-h3); line-height: 1.15; margin: 0 0 .4em; }

/* En este sitio los `<p>` van con margen 0 y cada componente pone su propio
   espacio. Las secciones nuevas no lo ponían: tres párrafos seguidos salían
   pegados, como un solo bloque de texto sin respiro.

   Se separa solo entre párrafo y párrafo (`p + p`), no debajo del último: así
   no aparece un hueco de más antes del borde de la sección. */
.seccion p + p,
.seccion p + .nota,
.bloque p + p,
.bloque p + .nota{ margin-top: .85em; }

.dos-col{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); margin-top: 1.5rem; }

/* Cada color abre su propio bloque, con una línea de su color arriba: es lo que
   permite saltar directo al que el curso eligió sin leer los otros tres. */
.color-bloque{
  padding: clamp(2rem, 5vw, 3rem) 0;
  border-top: 2px solid var(--traje);
  margin: 0 auto; max-width: var(--wrap, 1160px);
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.color-cab{ display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 1.5rem; }
.color-cab h3{ font-size: var(--t-h2); letter-spacing: -.02em; margin: 0; }
.color-cab p{ color: var(--tinta-suave); font-size: var(--t-menor); margin: 0; }
.color-punto{
  width: 14px; height: 14px; border-radius: 50%; background: var(--traje);
  flex: none; align-self: center;
}

/* La grilla de piezas. `auto-fill` y no `auto-fit`: con auto-fit, un color con
   pocas piezas estiraría las fotos hasta deformar la proporción. */
.piezas{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: clamp(10px, 2vw, 18px); }
.pieza{ margin: 0; }
.pieza img{
  width: 100%; aspect-ratio: 1; object-fit: contain;
  background: #fafafa; border: 1px solid var(--sitio-linea); border-radius: 14px;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s;
}
/* El hover acerca la pieza, que es lo que uno quiere hacer al mirarla. Sutil:
   1.5% se siente como que responde, 10% se siente como un anuncio. */
.pieza:hover img{ transform: scale(1.015); border-color: var(--traje, var(--sitio-linea)); }
.pieza figcaption{ padding: 9px 2px 0; font-size: var(--t-menor); line-height: 1.3; }
.pieza figcaption b{ font-weight: 700; }
.pieza figcaption small{ display: block; color: var(--tinta-suave); font-size: var(--t-pie); margin-top: 2px; }

.cierre{ text-align: center; }
.cierre p{ margin-inline: auto; }
.acciones{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; }

@media (max-width: 640px){
  .piezas{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .hero-trajes .sub{ max-width: none; }
}
@media (prefers-reduced-motion: reduce){
  .pieza img{ transition: none; }
  .pieza:hover img{ transform: none; }
}

/* Esta regla es la que de verdad ganaba y dejaba blanco el encabezado de
   «Cómo funciona»: era una `.hero-trajes{background:...}` duplicada, escrita
   cuando esta clase SIEMPRE iba sobre blanco. La de abajo, acotada con
   `:has(.penacho)`, quedaba sin efecto porque esta la precedía sin esa
   condición. Ahora solo el hero CON penacho (trajes.html) se queda en blanco;
   el de «Cómo funciona» se lee sobre el fondo oscuro, como el resto. */
.hero-trajes:has(.penacho) h1{ color: var(--tinta); }

/* Tinta oscura SOLO donde el fondo sigue siendo blanco de verdad: el
   encabezado de «Los trajes» con el penacho. `.seccion` y `.color-bloque` ya
   no llevan fondo propio -son parte del fondo oscuro continuo-, así que ya no
   van en esta lista: dejarlos habría vuelto a pintar de negro un texto que
   ahora vive sobre fondo negro, e invisible es invisible en cualquiera de los
   dos sentidos. Su tratamiento sobre oscuro vive en `tramos.css`. */
.hero-trajes:has(.penacho), .hero-trajes:has(.penacho) *{ color: var(--tinta); }
.hero-trajes:has(.penacho) .sub{ color: var(--tinta-suave); }
.hero-trajes:has(.penacho) .eyebrow{ color: var(--acento-txt); }
.seccion .btn-primary, .cierre .btn-primary{ color: var(--tinta); }

/* =============================================================================
   CÓMO FUNCIONA · una página en vez de cuatro
   ========================================================================== */
/* Los números van una sola vez en el sitio y tienen que leerse de un vistazo:
   es lo primero que un apoderado busca. */
.cifras{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 1.75rem 0 1.25rem; }
.cifra{ padding: 20px; border: 1px solid var(--sitio-linea); border-radius: 16px; }
.cifra b{ display: block; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cifra span{ display: block; margin-top: 8px; font-size: var(--t-menor); font-weight: 700; }
.cifra small{ display: block; margin-top: 3px; font-size: var(--t-pie); color: var(--tinta-suave); }
/* La de reservar es la que decide: es la cifra que el curso tiene que juntar. */
.cifra.destacada{ border-color: var(--naranjo); box-shadow: inset 0 0 0 1px var(--naranjo); }
.cifra.destacada b{ color: var(--acento-txt); }

.pasos{ list-style: none; counter-reset: paso; padding: 0; margin: 1.5rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.paso{ counter-increment: paso; padding: 20px; border-radius: 16px; background: var(--soft, #f6f6f6); }
.paso::before{ content: counter(paso); display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--naranjo); color: #0a0a0a;
  font-weight: 800; font-size: var(--t-menor); margin-bottom: 12px; }
.paso b{ display: block; font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.015em; margin-bottom: .35em; }
.paso p{ margin: 0; font-size: var(--t-menor); line-height: 1.5; }

.aviso{ margin-top: 2rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 18px; background: var(--soft, #f6f6f6); }
.aviso-fuerte{ border-left: 4px solid var(--naranjo); }
.aviso h3{ margin-top: 0; }

.tabla-atraso{ width: 100%; border-collapse: collapse; margin: 1rem 0; font-variant-numeric: tabular-nums; }
.tabla-atraso th{ text-align: left; font-size: var(--t-pie); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-suave); padding: 0 0 8px; border-bottom: 1px solid var(--sitio-linea); }
.tabla-atraso td{ padding: 11px 0; border-bottom: 1px solid var(--sitio-linea); font-size: var(--t-menor); }
.tabla-atraso tr:last-child td{ border-bottom: 0; font-weight: 800; }
/* Separación entre columnas. Sin esto las celdas se tocaban: en 390px de ancho
   se leía «30% del saldo$157.500», los dos textos pegados sin un espacio. */
.tabla-atraso th + th,
.tabla-atraso td + td{ padding-left: 14px; }
/* El ejemplo va debajo del cobro, no al lado: una tercera columna no cabe en el
   teléfono. En su propia línea se lee igual de bien en las dos pantallas. */
.tabla-atraso td small{ display: block; margin-top: 3px; font-size: var(--t-pie);
  font-weight: 400; color: var(--tinta-suave); }

/* Las láminas de preparación son las que hizo Carlitos: ya vienen diseñadas, así
   que la página solo las enmarca y las titula. */
.laminas{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 1.75rem; }
.lamina{ margin: 0; }
.lamina img{ width: 100%; height: auto; border: 1px solid var(--sitio-linea); border-radius: 14px; display: block; }
.lamina figcaption{ padding: 11px 2px 0; }
.lamina figcaption b{ display: block; font-size: var(--t-base); }
.lamina figcaption span{ display: block; margin-top: 3px; font-size: var(--t-menor); color: var(--tinta-suave); line-height: 1.45; }

.cifras *, .pasos *, .aviso *, .laminas *, .tabla-atraso *{ color: inherit; }

/* El botón naranja usaba #000 y el resto del sitio #0a0a0a. A ojo son el mismo
   negro; en la cuenta eran dos colores distintos. Uno.

   OJO con `.nav-cta`: se incluyó acá por error y quedó NEGRO SOBRE NEGRO -- es
   un enlace del menú, que va sobre el encabezado oscuro, no un botón con relleno
   naranjo. Solo lleva tinta oscura lo que tiene fondo claro debajo. */
.btn-primary{ color: var(--tinta); }
body .btn-primary,
.site-header .btn-primary,
.nav-actions .btn-primary{ color: var(--tinta); }
/* El del menú va sobre oscuro: se pinta con el naranjo, que es lo que lo hace
   destacar sin dejar de leerse. */
.site-header .nav-cta{ color: var(--naranjo); font-weight: 800; }

/* Dos cifras en la portada, no cuatro: acá solo van las que deciden si el curso
   sigue leyendo. El resto vive en «Cómo funciona». */
.cifras-2{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 620px; }
/* El enlace que lleva al detalle. Va marcado porque es la salida de la portada:
   si no se ve, la persona se queda sin saber dónde está lo demás. */
.enlace-fuerte{
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; color: var(--acento-txt); text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.enlace-fuerte:hover{ gap: 10px; }
.enlace-fuerte{ transition: gap .25s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce){ .enlace-fuerte{ transition: none } }

/* =============================================================================
   EL SITIO EN UN TELÉFONO
   Mismas medidas que se le aplicaron al panel: 44px de alto para lo que se toca
   y 12px de piso para el texto. Un enlace de 43px de alto -- que es lo que había
   en las preguntas frecuentes -- falla por un pixel, y falla igual.
   ========================================================================== */
@media (max-width: 640px){
  /* Todo lo que se toca, con alto de dedo. `inline-flex` y no `block`: un
     enlace dentro de un párrafo no puede romper el renglón. */
  a.enlace-fuerte,
  a.home-hero-support,
  .faq a, .faq-item a, details a,
  main p > a[href]{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* El formulario de reserva tenía tres textos bajo 12px. Es el paso donde la
     persona escribe sus datos: si algo hay que poder leer, es esto. */
  .sp-tx, .opt, .sum-legend, .solicitud small, .solicitud label span{
    font-size: var(--t-menor);
  }

  /* Los inputs no bajan de 16px o iOS agranda la página sola al tocarlos, y
     después queda corrida. */
  input, select, textarea{ font-size: 16px; }
}

@media (max-width: 640px){
  /* Calificados con `body`: las reglas de cada componente le ganaban a las de
     arriba por especificidad y el arreglo no aplicaba. Mismo problema que en el
     panel; se resuelve igualando, no con !important. */
  body .faq-category-nav a{
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  body .sp-tx, body .opt, body .sum-legend,
  body .solicitud .sp-tx, body .solicitud .opt{ font-size: var(--t-menor); }
}

@media (max-width: 640px){
  /* La etiqueta del paso actual del formulario estaba en .66rem (10,6px) y el
     «(opcional)» de cada campo en .7rem. Son el paso donde la persona escribe
     sus datos: si algo tiene que leerse, es esto.

     Se califica igual que la regla que ganaba
     (`body[data-page="solicitud"] .stepper-pill.current .sp-tx`), que es de
     donde venía el tamaño. */
  body[data-page="solicitud"] .stepper-pill.current .sp-tx{ font-size: var(--t-pie); }
  body[data-page="solicitud"] .opt{ font-size: var(--t-pie); }
}

@media (max-width: 640px){
  /* `.fld label .opt` vive en el <style> de la propia página y empata en
     especificidad con la regla de arriba; al venir después en el documento,
     ganaba. Se sube un escalón. */
  body[data-page="solicitud"] .fld label .opt{ font-size: var(--t-pie); }
}

@media (max-width: 640px){
  /* Regla general en vez de perseguir un enlace a la vez: en el teléfono, todo
     lo que se toca tiene alto de dedo. Se acota a `main` y al pie para no tocar
     los enlaces que van dentro de un párrafo de texto corrido, donde estirar la
     caja rompería el renglón. */
  /* 48 y no 44. 44 es el mínimo de la guía, y quedarse justo en el mínimo
     significaba que el enlace medía 43,99 o 44,00 según dónde cayera la
     fracción de píxel en esa página: la revisión de móvil marcaba enlaces del
     pie en una página distinta en cada pasada, y perseguirlos no llevaba a
     ninguna parte porque no había nada que arreglar en ellos.

     Ojo con dónde se toca esto: hay otra regla igual en el bloque de 768px
     (`footer a, .footer-col a`), pero pierde contra esta —`body footer a[href]`
     califica más alto y viene después—, así que cambiarla allá no hace nada. */
  body main a[href],
  body footer a[href],
  body .btn{ min-height: 48px; }
  /* NO se les pone `inline-flex`: probado, encoge el enlace a su contenido y
     enlaces de pie que medían 120px pasaron a 39. El alto ya lo da min-height;
     el ancho lo da el contenido, y ahí no hay que meterse.

     Los que quedan angostos son iconos y enlaces de una palabra en el pie: se
     les da ancho mínimo sin cambiar cómo fluyen. */
  body footer a[href]{ min-width: 44px; }

  /* Las casillas de verificación venían de 22px. Es lo que hay que tocar para
     aceptar las condiciones: fallarla y que no pase nada es peor que un botón
     chico cualquiera. */
  body input[type="checkbox"],
  body input[type="radio"]{ width: 24px; height: 24px; }
  /* El área tocable se agranda desde la etiqueta, no inflando la casilla: una
     casilla de 44px se ve enorme y desalineada. */
  /* `:has()` no llegó a aplicar en la estructura real de estas páginas. El área
     tocable se agranda con relleno alrededor de la casilla, que funciona igual y
     no depende de cómo esté anidada. */
  body input[type="checkbox"],
  body input[type="radio"]{ margin: 11px; }
}

@media (max-width: 640px){
  /* Los dos que quedaban, uno por uno y sin regla general.

     Se probó una regla amplia -- `display:flex` para todo `.btn` -- y rompió el
     encabezado: `nav-actions` pasó a 396px en una pantalla de 390 y se salió en
     cinco páginas. En una hoja de 12.000 líneas con componentes que traen sus
     propias reglas, la regla amplia rompe más de lo que arregla. */
  body a.underline{ min-height: 44px; display: inline-block; }


  /* La casilla de las páginas de comuna traía 22px por una clase de utilidad
     propia. Es la que hay que tocar para aceptar las condiciones: fallarla y que
     no pase nada es peor que errar cualquier otro botón. */
  body input.mt-1[type="checkbox"]{ width: 24px; height: 24px; margin: 10px 10px 10px 0; }
}

@media (max-width: 640px){
  /* La casilla de consentimiento NO se toca.

     Medía 22px y se marcó como defecto, pero era un falso positivo de la sonda:
     su ETIQUETA mide 304x111px y la envuelve, así que tocar cualquier parte del
     texto la marca. El objetivo real siempre estuvo bien.

     Y el 22px es deliberado: `#lead-form-slot #lead-form input[type=checkbox]`
     lo fija con dos IDs para escapar del `input{min-height:48px}` global. Una
     casilla de 48px se ve enorme. Quien lo escribió tenía razón. */

}

/* =============================================================================
   EL TONO DE CADA PESTAÑA
   -----------------------------------------------------------------------------
   Una línea por página. Todo lo que use `--acento-*` cambia de temperatura al
   navegar, sin tocar una sola regla más.

   El reparto no es al azar: sigue de qué habla cada página.
   ========================================================================== */
body[data-tono="carmin"]{
  --acento-50: var(--carmin-50);   --acento-100: var(--carmin-100);
  --acento-200: var(--carmin-200); --acento-300: var(--carmin-300);
  --acento-400: var(--carmin-400); --acento-500: var(--carmin-500);
  --acento-600: var(--carmin-600); --acento-700: var(--carmin-700);
  --acento-800: var(--carmin-800); --acento-900: var(--carmin-900);
  --acento-legible: var(--carmin-600);
}
body[data-tono="oro"]{
  --acento-50: var(--oro-50);   --acento-100: var(--oro-100);
  --acento-200: var(--oro-200); --acento-300: var(--oro-300);
  --acento-400: var(--oro-400); --acento-500: var(--oro-500);
  --acento-600: var(--oro-600); --acento-700: var(--oro-700);
  --acento-800: var(--oro-800); --acento-900: var(--oro-900);
  --acento-legible: var(--oro-800);
}
body[data-tono="lima"]{
  --acento-50: var(--lima-50);   --acento-100: var(--lima-100);
  --acento-200: var(--lima-200); --acento-300: var(--lima-300);
  --acento-400: var(--lima-400); --acento-500: var(--lima-500);
  --acento-600: var(--lima-600); --acento-700: var(--lima-700);
  --acento-800: var(--lima-800); --acento-900: var(--lima-900);
  --acento-legible: var(--lima-800);
}

/* El texto de acento usa SIEMPRE `--acento-legible`, no el color del logo a
   secas: el lima puro sobre blanco da 1,45:1, que no se lee. */
body[data-tono] .eyebrow,
body[data-tono] .hero-trajes .eyebrow,
body[data-tono] .seccion .eyebrow{ color: var(--acento-legible); }

/* -----------------------------------------------------------------------------
   EL FONDO QUE NO SE CORTA ENTRE SECCIONES

   El problema de antes: cada sección traía su propio fondo, así que al bajar se
   veía dónde terminaba una y empezaba la otra. Un corte cada pantalla, y eso es
   lo que hace que un sitio se sienta armado por pedazos.

   Acá el fondo es UNA sola capa fija detrás de todo, del alto de la ventana, que
   no se mueve con el scroll: no hay costura posible porque no hay dos fondos.
   Las secciones que quieran quedar sobre blanco se lo ponen encima.

   Es un degradado del tono de la pestaña, en su extremo más claro (50 y 100).
   No es un color plano: son manchas suaves que respiran, y el movimiento es tan
   lento que no se mira, se siente.
--------------------------------------------------------------------------- */
.fondo-vivo{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #04060b;
  background-image:
    linear-gradient(to bottom, rgba(4, 6, 11, 0.45) 0%, rgba(4, 6, 11, 0.85) 100%),
    url('../images/fondo-referencia.webp');
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  background-attachment: fixed;
}

/* Las manchas de luz: atmósfera celestial cálida y profunda de Sol y Tierra.
   Emanan destellos de luz solar sutil y azul cobalto sin colores planos ni amarillos toscos. */
.fondo-vivo::before{
  content: "";
  position: absolute;
  inset: -15%;
  background:
    /* Resplandor superior cálido ámbar / oro tenue de la marca Sol y Tierra */
    radial-gradient(48% 42% at 12% 6%,
      rgba(217, 119, 6, 0.18) 0%,
      rgba(180, 83, 9, 0.08) 38%,
      transparent 70%),
    /* Nebulosa profunda azul cobalto / zafiro al costado derecho */
    radial-gradient(56% 65% at 92% 58%,
      rgba(29, 78, 216, 0.18) 0%,
      rgba(15, 23, 42, 0.10) 42%,
      transparent 72%),
    /* Resplandor inferior tenue para base armónica */
    radial-gradient(50% 36% at 28% 96%,
      rgba(194, 65, 12, 0.14) 0%,
      transparent 66%);
  filter: blur(24px);
  animation: fondo-respira 52s ease-in-out infinite alternate;
}

/* El polvo de estrellas. Son puntos chicos repetidos, no una imagen: pesa cero
   y no hay que pedir otro archivo. */
.fondo-vivo::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.1px 1.1px at 72% 14%, rgba(255,255,255,.42), transparent),
    radial-gradient(1.6px 1.6px at 41% 68%, rgba(255,255,255,.38), transparent),
    radial-gradient(1.2px 1.2px at 88% 44%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.0px 1.0px at 12% 82%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 62% 90%, rgba(255,255,255,.30), transparent),
    radial-gradient(1.1px 1.1px at 33% 8%,  rgba(255,255,255,.40), transparent);
  background-size: 620px 620px;
  opacity: .8;
  animation: polvo-deriva 90s linear infinite;
}

@keyframes fondo-respira{
  from{ transform: scale(1)     translate3d(0, 0, 0); }
  to  { transform: scale(1.09)  translate3d(-2.4%, -1.6%, 0); }
}
@keyframes polvo-deriva{
  from{ background-position: 0 0; }
  to  { background-position: 620px 340px; }
}
@media (prefers-reduced-motion: reduce){
  .fondo-vivo::before,
  .fondo-vivo::after{ animation: none; }
}


/* =============================================================================
   TIPOGRAFÍA · vuelta a League Spartan, sellada
   -----------------------------------------------------------------------------
   Esta semana se probó Cabinet Grotesk + Manrope + JetBrains Mono. Carlitos:
   "si me encanta esa league spartan" — League Spartan es la fuente del
   proyecto, sitio y panel, y no se mezcla. Queda solo el tratamiento tabular
   de las cifras, que no depende de la familia: `font-variant-numeric` funciona
   igual sobre League Spartan y es lo que alinea $35.000 sobre $10.000 en una
   columna.
   ========================================================================== */
.cifra b, .tabla-atraso td, .tabla-atraso th,
.precio, .monto, [data-cifra]{
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   QUE EL FONDO SE VEA

   La capa `.fondo-vivo` estaba puesta pero no se notaba: el `<body>` se pinta
   de blanco (`--syt-paper`), así que le tapaba la vista. Se le saca el
   relleno y el degradado queda a la vista de punta a punta.
--------------------------------------------------------------------------- */
body{ background: transparent; }

/* -----------------------------------------------------------------------------
   EL FONDO ES UNO SOLO, DE PUNTA A PUNTA

   Carlitos, sobre la referencia que él mismo mandó: "esa referencia es un mal
   ejemplo, porque tiene un fondo bonito, otro fondo blanco, y luego láminas
   blancas... era más bonito dejar el fondo limpio con los degradados y las
   láminas encima".

   Así que no hay tramos claros y oscuros: el fondo con el resplandor
   (`.fondo-vivo`) se ve SIEMPRE, de la primera sección a la última. Lo que
   antes eran "secciones blancas" ahora son LÁMINAS -las tarjetas de precio,
   pasos, avisos- que flotan encima con su propio blanco sólido. El texto
   suelto que no está dentro de una lámina se lee en tinta clara, porque el
   fondo detrás siempre es oscuro.

   La única excepción es el encabezado de «Los trajes»: el penacho está
   fotografiado sobre blanco y sobre negro volvería a verse el rectángulo que
   se sacó a propósito. Esa sección es ella misma una lámina grande.

   Se acota con `:has(.penacho)` porque `.hero-trajes` también encabeza
   «Cómo funciona», que no tiene penacho ni necesita fondo propio: ese
   encabezado se lee sobre el fondo oscuro, como el resto de la página. */
.hero-trajes:has(.penacho){
  background: var(--sitio-claro);
  position: relative;
}
.hero-trajes:has(.penacho)::before, .hero-trajes:has(.penacho)::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 90px;
  pointer-events: none;
}
.hero-trajes:has(.penacho)::before{ top: -90px;    background: linear-gradient(to bottom, transparent, var(--sitio-claro)); }
.hero-trajes:has(.penacho)::after{ bottom: -90px; background: linear-gradient(to top,    transparent, var(--sitio-claro)); }

.cierre{
  padding-block: clamp(4rem, 9vw, 7rem);
}
.cierre .btn-ghost{
  color: var(--sitio-claro);
  border-color: color-mix(in oklab, var(--sitio-claro) 55%, transparent);
  background: color-mix(in oklab, var(--sitio-claro) 8%, transparent);
}



/* =============================================================================
   MICRO-ANIMACIÓN SHIMMER (REFLEJO DE LUZ SOLAR EN BOTONES CTA)
   ========================================================================== */
.btn-primary, .btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-primary::after, .btn-shimmer::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  );
  transform: rotate(25deg);
  animation: btn-luz-solar 4s infinite cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
@keyframes btn-luz-solar {
  0% { left: -100%; }
  35% { left: 200%; }
  100% { left: 200%; }
}

/* =============================================================================
   ACORDEONES DESPLEGABLES DE VIDRIO OSCURO (DARK GLASS DISCLOSURES)
   ========================================================================== */
.syt-desplegable {
  background: rgba(13, 20, 36, 0.72) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
  transition: border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.5);
}
.syt-desplegable:hover {
  border-color: rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 16px 40px -10px rgba(245, 158, 11, 0.15);
}
.syt-desplegable summary {
  padding: 20px 24px !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  user-select: none !important;
  outline: none !important;
}
.syt-desplegable summary::-webkit-details-marker {
  display: none !important;
}
.syt-desplegable summary::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid #f59e0b;
  border-bottom: 2px solid #f59e0b;
  transform: rotate(45deg);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: 16px;
  flex-shrink: 0;
}
.syt-desplegable[open] summary::after {
  transform: rotate(-135deg);
}
.syt-desplegable .syt-desplegable-cuerpo {
  padding: 0 24px 24px 24px !important;
  color: #cbd5e1 !important;
  font-size: 0.98rem !important;
  line-height: 1.65 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px !important;
  animation: sytDesplegableFade 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sytDesplegableFade {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   TARJETAS Y SECCIONES DE LA HOME EN VIDRIO OSCURO (CERO FONDOS BLANCOS)
   ========================================================================== */
.section-light, .home-colors {
  background: transparent !important;
}
.section-light h2, .home-colors h2 {
  color: #ffffff !important;
}
.section-light p, .home-colors p {
  color: #cbd5e1 !important;
}
.traje-card, .home-colors .traje-card {
  background: rgba(13, 20, 36, 0.72) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.65) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.traje-card:hover {
  transform: translateY(-6px) scale(1.015) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 25px 50px -10px rgba(245, 158, 11, 0.2) !important;
}
.traje-card .body, .home-colors .traje-card .body {
  background: transparent !important;
  color: #ffffff !important;
}
.traje-card h3 {
  color: #ffffff !important;
}
.traje-card p {
  color: #cbd5e1 !important;
}
.traje-card img {
  cursor: zoom-in;
  transition: transform 0.4s ease;
}
.traje-card:hover img {
  transform: scale(1.03);
}

/* =============================================================================
   UNIVERSAL VOLVER ARRIBA (SCROLL TO TOP) · TODAS LAS PÁGINAS
   ========================================================================== */
.btn-scroll-top {
  position: fixed;
  bottom: 24px;
  right: 88px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(8, 12, 22, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 98;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.2s ease,
              color 0.2s ease,
              box-shadow 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.btn-scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.btn-scroll-top:hover {
  color: var(--naranjo);
  border-color: rgba(255, 106, 19, 0.6);
  box-shadow: 0 0 20px rgba(255, 106, 19, 0.3);
  transform: translateY(-3px);
}

.btn-scroll-top:active {
  transform: translateY(0) scale(0.92);
}

.btn-scroll-top svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  .btn-scroll-top {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    right: 20px !important;
    width: 44px !important;
    height: 44px !important;
  }

  body:has(.sticky-mobile-cta.visible) .sol-root,
  body:has(.sticky-mobile-cta.visible) .fab {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body:has(.sticky-mobile-cta.visible) .btn-scroll-top {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
    right: 20px !important;
  }
}

/* =============================================================================
   STICKY MOBILE CTA BAR (SOL Y TIERRA) · MÓVIL ALTO RENDIMIENTO
   ========================================================================== */
.sticky-mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(5, 8, 15, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 106, 19, 0.3);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.65);
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 95;
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sticky-mobile-cta.visible {
  transform: translateY(0);
}

.sticky-mobile-cta-info {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.sticky-mobile-cta-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--naranjo);
}

.sticky-mobile-cta-price {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 850;
  color: #ffffff;
}

.sticky-mobile-cta-price small {
  font-size: 0.78rem;
  font-weight: 500;
  color: #94a3b8;
}

.sticky-mobile-cta-btn {
  padding: 9px 18px !important;
  font-size: 0.88rem !important;
  white-space: nowrap;
  font-weight: 800;
}

@media (min-width: 769px) {
  .sticky-mobile-cta {
    display: none !important;
  }
}

/* =============================================================================
   MICROINTERACCIONES Y EFECTO SHIMMER SOLAR
   ========================================================================== */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: rotate(25deg);
  animation: syt-shimmer 4.5s infinite ease-in-out;
  pointer-events: none;
}

@keyframes syt-shimmer {
  0%, 75% { left: -60%; }
  90%, 100% { left: 160%; }
}

.btn:active, .nav-links a:active, .chip-color:active, .btn-transicion:active {
  transform: scale(0.96) !important;
}

/* Transiciones entre secciones suaves hacia fondo oscuro */
.section-divisor {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  margin: 0;
}

/* =============================================================================
   MENÚ HAMBURGUESA ANIMADO Y MODAL DESPLEGABLE MÓVIL
   ========================================================================== */
.menu-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  user-select: none;
}

.menu-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.menu-btn:active {
  transform: scale(0.92) !important;
}

.menu-btn svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.menu-btn[aria-expanded="true"] {
  background: var(--naranjo) !important;
  color: #000000 !important;
  border-color: var(--naranjo) !important;
}

.menu-btn[aria-expanded="true"] svg {
  transform: rotate(90deg) !important;
}

.site-header .mobile-menu {
  background: rgba(4, 6, 11, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8) !important;
  padding: 18px !important;
  margin-top: 10px !important;
}

.site-header .mobile-menu a {
  font-family: var(--font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

.site-header .mobile-menu a:hover, .site-header .mobile-menu a.active {
  background: rgba(255, 106, 19, 0.15) !important;
  color: var(--naranjo) !important;
}