/* ════════════════════════════════════════════════════════════════
   T3AMPO — sistema de diseño
   Un solo archivo. Lo cargan la tienda, Mixtape y T3AMPO TV.

   CÓMO ESTÁ ARMADO: TRES CAPAS
   El orden de abajo decide quién gana cuando dos reglas chocan. Va
   de la que menos manda a la que más:

     base         tipografía, colores, el cuerpo de la página.
                  Cada sitio puede ajustarla si lo necesita.

     sitio        el CSS propio de cada página: su rejilla, su
                  barra, sus cosas raras. Ahí va lo que solo le
                  importa a esa página.

     componentes  los botones, los campos, las tarjetas, los
                  avisos. Esto NO se puede pisar desde un sitio.
                  Si hay que cambiar un botón, se cambia aquí y
                  cambia en los tres.

   Antes esto no existía y cada sitio pisaba lo compartido solo por
   cargarse después. Por eso los botones se veían distintos en cada
   página aunque la regla compartida estuviera bien escrita.

   Para que funcione, el CSS de cada página tiene que estar dentro
   de @layer sitio { … }. Eso lo hace el script de instalación.

   DE DÓNDE SALE
   La dirección es la de Apple: tipografía del sistema con ajuste
   óptico, materiales translúcidos, profundidad por capas, y
   movimiento con resortes en vez de duraciones fijas.

   El color sale del logo de T3AMPO, que va de magenta a amarillo.
   La forma del botón sale de Mixtape, que ya la tenía bien.

   LAS TRES REGLAS QUE MÁS SE ROMPEN
   1. El tracking depende del tamaño. Un solo letter-spacing para
      todo está mal en algún lado.
   2. Nunca apiles un material translúcido sobre otro.
   3. Sobre un material translúcido el texto va más contrastado y
      un punto más pesado, nunca gris plano.
   ════════════════════════════════════════════════════════════════ */

@layer base, sitio, componentes;

@layer base {

  :root {
    color-scheme: dark;

    /* ── Tipografía ────────────────────────────────────────────────
       La del sistema, a propósito. En un iPhone o un Mac eso es San
       Francisco, que ya trae ajuste óptico, tablas de tracking y
       afinado de legibilidad hechos por gente que solo hace eso. En
       Android es Roboto, en Windows Segoe. Ninguna se descarga: la
       página abre sin esperar una fuente.                            */
    --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, 'Segoe UI', Roboto, sans-serif;
    --mono:   ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* La escala. Cada paso trae SU tamaño, SU tracking y SU
       interlineado, porque los tres cambian juntos: cuanto más grande
       el texto, más se aprietan las letras y más se juntan las
       líneas. Todo en rem para que crezca con el ajuste de tamaño de
       letra del sistema operativo.                                   */
    --t-display: clamp(2.6rem, 6vw, 4.5rem);
    --tk-display: -0.028em;   --lh-display: 1.04;

    --t-tit:     clamp(2rem, 4vw, 2.75rem);
    --tk-tit:    -0.022em;    --lh-tit:     1.08;

    --t-sec:     1.5rem;
    --tk-sec:    -0.015em;    --lh-sec:     1.2;

    --t-sub:     1.1875rem;
    --tk-sub:    -0.008em;    --lh-sub:     1.35;

    --t-texto:   1.0625rem;   /* 17px, la medida de lectura de iOS */
    --tk-texto:  0;           --lh-texto:   1.6;

    --t-base:    1rem;
    --tk-base:   0;           --lh-base:    1.5;

    --t-chico:   0.875rem;
    --tk-chico:  0.002em;     --lh-chico:   1.5;

    --t-mini:    0.8125rem;
    --tk-mini:   0.01em;      --lh-mini:    1.4;

    --t-micro:   0.75rem;
    --tk-micro:  0.02em;      --lh-micro:   1.35;

    /* ── Superficies ───────────────────────────────────────────────
       Cuatro capas sólidas, de la más honda a la que está al frente.
       Los materiales translúcidos van aparte, más abajo: son otra
       cosa, flotan sobre estas.                                      */
    --fondo:  #0B0B0F;
    --capa-1: #101015;
    --capa-2: #16161C;
    --capa-3: #1C1C23;
    --capa-4: #26262F;   /* al pasar el mouse, al estar activo */

    /* ── Bordes ────────────────────────────────────────────────────
       En blanco con alfa, no en gris sólido: así el borde funciona
       igual encima de cualquiera de las capas. --borde-luz es el
       filo de arriba de un material, el que simula la luz pegando
       en el canto del vidrio.                                        */
    --borde:       rgba(255, 255, 255, 0.10);
    --borde-suave: rgba(255, 255, 255, 0.055);
    --borde-luz:   rgba(255, 255, 255, 0.16);

    /* ── Texto ─────────────────────────────────────────────────────
       Sólidos, no blancos con alfa: sobre un material translúcido el
       alfa se come el contraste justo donde más hace falta.          */
    --txt-alto:  #F5F5F7;
    --txt:       #D6D6DC;
    --txt-dim:   #9A9AA5;
    --txt-tenue: #7B7B86;

    /* ── Color ─────────────────────────────────────────────────────
       El acento es el magenta del logo (tono 322°) subido de tono
       hasta que da 5.5:1 contra el fondo. Uno solo, en todo el
       sistema: si dos cosas compiten por ser la acción principal,
       ninguna lo es.                                                 */
    --acento:       #F236AD;
    --acento-alto:  #F84FBA;   /* al pasar el mouse */
    --acento-tenue: rgba(242, 54, 173, 0.14);
    --acento-linea: rgba(242, 54, 173, 0.38);

    /* Los otros salen del mismo logo, que va de magenta a amarillo.
       No decoran: cada uno dice una cosa.                            */
    --naranja: #FF7D1A;   /* avisa */
    --amarillo:#FFDA0A;   /* destaca un dato */
    --rojo:    #FA4238;   /* falló */
    --verde:   #32D74B;   /* salió bien */

    --naranja-tenue: rgba(255, 125, 26, 0.13);
    --rojo-tenue:    rgba(250, 66, 56, 0.13);
    --verde-tenue:   rgba(50, 215, 75, 0.13);

    /* ── Materiales ────────────────────────────────────────────────
       Barras, hojas y paneles que flotan con el contenido corriendo
       por debajo. Dos pesos: el fino para chrome que acompaña, el
       grueso para lo que interrumpe. Superficie más grande =
       material más espeso.

       REGLA: nunca uno encima de otro.                               */
    --mat-fino:        rgba(20, 20, 25, 0.62);
    --mat-fino-filtro: saturate(180%) blur(20px);

    --mat-grueso:        rgba(14, 14, 18, 0.78);
    --mat-grueso-filtro: saturate(180%) blur(40px);

    /* El velo que empuja el fondo hacia atrás cuando algo bloquea */
    --velo: rgba(0, 0, 0, 0.5);

    /* ── Sombras ───────────────────────────────────────────────────
       Escalan con el objeto: una ficha casi no levanta, una hoja
       modal levanta mucho.                                           */
    --sombra-ficha: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-panel: 0 8px 24px rgba(0, 0, 0, 0.45);
    --sombra-hoja:  0 24px 64px rgba(0, 0, 0, 0.6);

    /* ── Espaciado ─────────────────────────────────────────────────
       En rem, no en px: si alguien sube el tamaño de letra del
       sistema, el aire crece con la letra y el diseño no se rompe.   */
    --e1:  0.25rem;
    --e2:  0.5rem;
    --e3:  0.75rem;
    --e4:  1rem;
    --e5:  1.5rem;
    --e6:  2rem;
    --e7:  3rem;
    --e8:  4rem;
    --e9:  6rem;
    --e10: 9rem;

    /* ── Radios ────────────────────────────────────────────────────
       Continuos y generosos, como los de iOS. Escalan con el objeto:
       un radio chico en una tarjeta grande se ve duro.               */
    --r-min:  0.25rem;
    --r-sm:   0.5rem;
    --r-md:   0.75rem;
    --r-lg:   1.125rem;
    --r-xl:   1.5rem;
    --r-pill: 999px;

    /* ── Movimiento ────────────────────────────────────────────────
       Duraciones, por cuántas veces al día lo ve alguien:
         toque de botón      100–160ms
         globito, menú       150–250ms
         hoja, gaveta        260–420ms
       Arriba de 300ms en interfaz se siente lento. Y lo que se
       dispara con el teclado cien veces al día no se anima: la
       animación solo estorba.

       Nunca ease-in: arranca lento justo cuando el ojo está mirando.

       Los resortes son la respuesta de un resorte real al soltarlo,
       escrita como linear(). A diferencia de una curva fija, se
       puede interrumpir a mitad sin que salte: si alguien cambia de
       opinión, el movimiento se devuelve desde donde iba.            */
    --dur-toque: 120ms;
    --dur-chico: 180ms;
    --dur-medio: 260ms;
    --dur-hoja:  380ms;

    --salida: cubic-bezier(.23, 1, .32, 1);      /* entra o sale — Apple custom ease-out */
    --mov:    cubic-bezier(.77, 0, .175, 1);     /* se mueve en pantalla — Apple ease-in-out */
    --cajon:  cubic-bezier(.32, .72, 0, 1);      /* gaveta/hoja iOS */

    --resorte-suave: linear(0, 0.0273 4%, 0.0942 8%, 0.1832 12%, 0.2818 16%, 0.3817 20%, 0.4772 24%, 0.5652 28%, 0.6438 32%, 0.7124 36%, 0.771 40%, 0.8204 44%, 0.8612 48%, 0.8944 52%, 0.9212 56%, 0.9424 60%, 0.9589 64%, 0.9716 68%, 0.9812 72%, 0.9884 76%, 0.9935 80%, 0.9972 84%, 0.9997 88%, 1.0013 92%, 1.0023 96%, 1);
    --resorte-vivo:  linear(0, 0.0278 4%, 0.0975 8%, 0.1922 12%, 0.2991 16%, 0.4086 20%, 0.5142 24%, 0.6117 28%, 0.6985 32%, 0.7735 36%, 0.8365 40%, 0.888 44%, 0.929 48%, 0.9607 52%, 0.9844 56%, 1.0014 60%, 1.0129 64%, 1.0201 68%, 1.024 72%, 1.0253 76%, 1.025 80%, 1.0234 84%, 1.0211 88%, 1.0184 92%, 1.0157 96%, 1);

    /* ── Medidas ───────────────────────────────────────────────── */
    --ancho-texto:  68ch;
    --ancho-pagina: 71.25rem;
    --toque:        2.75rem;   /* 44px: lo mínimo que un dedo acierta */
  }

  /* ════════════════════════════════════════════════════════════════
     BASE
     ════════════════════════════════════════════════════════════════ */

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

  html {
    font: 100%/1.5 var(--fuente);
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    background: var(--fondo);
    color: var(--txt);
    font-size: var(--t-base);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    font-synthesis-weight: none;
  }

  /* Los títulos toman su tracking y su interlineado del paso que les
     toca, no uno solo para todos. La jerarquía se arma con peso +
     tamaño + interlineado juntos: el peso da presencia sin ocupar
     más espacio. */
  h1, h2, h3 {
    margin: 0 0 var(--e4);
    color: var(--txt-alto);
    font-weight: 600;
    font-optical-sizing: auto;
    text-wrap: balance;
  }
  h1 { font-size: var(--t-tit); letter-spacing: var(--tk-tit); line-height: var(--lh-tit); }
  h2 { font-size: var(--t-sec); letter-spacing: var(--tk-sec); line-height: var(--lh-sec); }
  h3 { font-size: var(--t-sub); letter-spacing: var(--tk-sub); line-height: var(--lh-sub); font-weight: 590; }

  .t-display {
    font-size: var(--t-display);
    letter-spacing: var(--tk-display);
    line-height: var(--lh-display);
    font-weight: 700;
    color: var(--txt-alto);
    text-wrap: balance;
  }

  /* El ancho máximo es para leer de corrido: pasada esa medida el
     ojo pierde el renglón al volver a la izquierda. Pero un párrafo
     centrado con ancho máximo y sin márgenes automáticos se recuesta
     a la izquierda y se desalinea de su propio título — así que el
     margen se centra solo cuando el contexto está centrado. */
  p {
    margin: 0 0 var(--e4);
    max-width: var(--ancho-texto);
    font-size: var(--t-texto);
    line-height: var(--lh-texto);
  }
  :is(center, [align='center']) p,
  .t-centrado p { margin-inline: auto; }

  a {
    color: var(--acento);
    text-decoration-color: var(--acento-linea);
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--dur-toque) var(--salida);
  }
  a:hover { text-decoration-color: var(--acento); }

  strong { color: var(--txt-alto); font-weight: 600; }

  hr { border: 0; border-top: 1px solid var(--borde-suave); margin: var(--e7) 0; }

  ::selection { background: var(--acento-tenue); color: var(--txt-alto); }

  :focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
    border-radius: var(--r-min);
  }


}

@layer componentes {

  /* ════════════════════════════════════════════════════════════════
     PIEZAS
     ════════════════════════════════════════════════════════════════ */

  /* ── Material ────────────────────────────────────────────────────
     Una barra o un panel que flota, con el contenido corriendo por
     debajo. El filo claro de arriba es la luz pegando en el canto.
     Si el navegador no soporta backdrop-filter, cae a un fondo
     sólido: se pierde el efecto, no la legibilidad.                  */
  .t-material {
    background: rgba(20, 20, 25, 0.92);
    border: 1px solid var(--borde);
    border-top-color: var(--borde-luz);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .t-material {
      background: var(--mat-fino);
      -webkit-backdrop-filter: var(--mat-fino-filtro);
      backdrop-filter: var(--mat-fino-filtro);
    }
    .t-material.grueso {
      background: var(--mat-grueso);
      -webkit-backdrop-filter: var(--mat-grueso-filtro);
      backdrop-filter: var(--mat-grueso-filtro);
      box-shadow: var(--sombra-hoja);
    }
  }

  /* Sobre un material, el texto va más contrastado y un punto más
     pesado. El gris plano se pierde apenas pasa algo claro por
     detrás. */
  .t-material .t-vibrante { color: var(--txt-alto); font-weight: 500; letter-spacing: 0.004em; }

  /* ── Borde de scroll ─────────────────────────────────────────────
     En vez de una raya de 1px debajo de la barra, un degradado corto
     donde el contenido se mete debajo del chrome. Se nota menos y
     separa mejor.                                                    */
  .t-borde-scroll {
    position: relative;
  }
  .t-borde-scroll::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1.5rem;
    height: 1.5rem;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(11, 11, 15, 0.55), transparent);
  }

  /* ── Etiqueta ──────────────────────────────────────────────────── */
  .t-etq {
    font-size: var(--t-micro);
    letter-spacing: var(--tk-micro);
    line-height: var(--lh-micro);
    font-weight: 590;
    text-transform: uppercase;
    color: var(--txt-dim);
  }

  /* ── Dato ────────────────────────────────────────────────────────
     Todo número que se compare o se lea en columna: cifras del mismo
     ancho para que los decimales queden alineados.                   */
  .t-dato {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    color: var(--txt-alto);
  }
  .t-dato.mono { font-family: var(--mono); }

  /* ── Botón ───────────────────────────────────────────────────────
     UNA sola definición para los tres sitios. La lista de selectores
     de abajo incluye los nombres que ya usaban la tienda, la portada
     3D y Mixtape, así que ninguno define botones por su cuenta: si
     hay que cambiar un botón, se cambia aquí y cambia en todos.

     La forma es la que tenía Mixtape y funcionaba: rectángulo de
     esquina suave, borde fino, compacto, relleno solo cuando es la
     acción principal.

     El encogido a 0.97 al presionar es la respuesta más barata que
     existe: confirma el toque sin esperar a que cargue nada. Va con
     resorte, así que si el dedo se va a mitad se devuelve desde donde
     iba en vez de saltar.                                            */
  .t-boton,
  .boton,                    /* tienda: páginas de texto y formulario */
  .btn,                      /* tienda: portada 3D */
  .tab-btn,                  /* tienda: barra de explorar */
  .nav-accion,               /* tienda: acción de la barra */
  .talla,                    /* tienda: selector de talla */
  .filtro,                   /* panel de pedidos */
  .b,                        /* panel de T3AMPO TV */
  html.te .play,             /* Mixtape */
  html.te .mini,
  html.te .pro,
  html.te .seg button,
  html.te .export,
  html.te .tbig,
  html.te .undo,
  html.te .rec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    min-height: 2rem;
    padding: 0 var(--e3);
    border: 1px solid var(--borde-suave);
    border-radius: var(--r-sm);
    background: var(--capa-3);
    color: var(--txt);
    font-family: var(--fuente);
    font-size: var(--t-chico);
    font-weight: 590;
    font-style: normal;
    letter-spacing: -0.01em;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;
    animation: none;
    box-shadow: none;
    transition: transform    var(--dur-medio) var(--resorte-suave),
                background   var(--dur-toque) var(--salida),
                color        var(--dur-toque) var(--salida),
                border-color var(--dur-toque) var(--salida);
  }

  .t-boton:active, .boton:active, .btn:active, .tab-btn:active,
  .nav-accion:active, .talla:active, .filtro:active, .b:active,
  html.te .play:active, html.te .mini:active,
  html.te .pro:active, html.te .seg button:active,
  html.te .export:active, html.te .tbig:active,
  html.te .undo:active, html.te .rec:active {
    transform: scale(0.97);
    transition: transform var(--dur-toque) var(--salida);
  }

  @media (hover: hover) and (pointer: fine) {
    .t-boton:hover, .boton:hover, .btn:hover, .tab-btn:hover,
    .nav-accion:hover, .talla:hover, .filtro:hover, .b:hover,
    html.te .mini:hover, html.te .pro:hover,
    html.te .export:hover, html.te .tbig:hover,
    html.te .undo:hover, html.te .rec:hover {
      background: var(--capa-4);
      color: var(--txt-alto);
    }
  }

  /* ── La acción principal ───────────────────────────────────────
     Relleno con el acento. Una por pantalla: si dos gritan igual,
     ninguna manda.                                                  */
  .t-boton.primario,
  .boton,
  .btn-primary,
  .tab-btn.active,
  .talla[aria-pressed="true"],
  .filtro.on,
  .b.on,
  html.te .play {
    background: var(--acento);
    border-color: transparent;
    color: #14040D;
  }
  @media (hover: hover) and (pointer: fine) {
    .t-boton.primario:hover, .boton:hover, .btn-primary:hover,
    html.te .play:hover {
      background: var(--acento-alto);
      color: #14040D;
    }
  }

  /* PLAY encendido y las cosas que están sonando van en amarillo:
     contra el magenta se distinguen, contra el naranja no. */
  html.te .play.on { background: var(--amarillo); color: #1A1400; }

  /* ── El secundario ───────────────────────────────────────────── */
  .t-boton.vacio,
  .boton.vacio,
  .btn-secondary {
    background: var(--capa-3);
    border-color: var(--borde-suave);
    color: var(--txt);
  }

  /* ── El destructivo ──────────────────────────────────────────────
     Borrar, cortar, reiniciar a la fuerza. Nunca relleno: un rojo
     sólido invita a apretarlo, y esto es lo contrario.              */
  .t-boton.roja,
  .b.roja,
  .tab-btn.tab-close {
    background: transparent;
    border-color: rgba(250, 66, 56, .34);
    color: var(--rojo);
  }
  @media (hover: hover) and (pointer: fine) {
    .t-boton.roja:hover, .b.roja:hover, .tab-btn.tab-close:hover {
      background: var(--rojo-tenue);
      border-color: var(--rojo);
      color: var(--rojo);
    }
  }

  /* ── El llano ────────────────────────────────────────────────────
     Para lo que se puede ignorar sin consecuencias.                 */
  .t-boton.llano {
    background: transparent;
    border-color: transparent;
    color: var(--acento);
  }
  @media (hover: hover) and (pointer: fine) {
    .t-boton.llano:hover { background: var(--acento-tenue); color: var(--acento); }
  }

  /* ── Las alturas ─────────────────────────────────────────────────
     La normal son 44 px, que es lo que un dedo acierta. Las chicas
     bajan de eso, así que son para chrome con mouse — nunca para la
     acción principal de una pantalla táctil.                        */
  .t-boton, .boton, .btn, .talla {
    min-height: var(--toque);
    padding: 0 var(--e5);
    font-size: var(--t-base);
  }
  .t-boton.chico, .btn-small, .b.chico { min-height: 2rem;     padding: 0 var(--e3); font-size: var(--t-chico); }
  .t-boton.micro             { min-height: 1.625rem; padding: 0 var(--e2); font-size: var(--t-micro); }
  .t-boton.grande            { min-height: 3rem;     padding: 0 var(--e6); font-size: var(--t-sub); }

  .t-boton:disabled, .boton[disabled], .btn:disabled,
  .talla:disabled, .filtro:disabled, .b:disabled, html.te .mini:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    transform: none;
  }

  /* ── Grupo de opciones ───────────────────────────────────────────
     La caja va hundida y la opción puesta se levanta, así se lee cuál
     está sin leer el texto.                                          */
  .t-grupo,
  html.te .seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--capa-2);
    border: 0;
    border-radius: var(--r-md);
  }
  .t-grupo .t-boton,
  html.te .seg button {
    background: transparent;
    border-color: transparent;
    color: var(--txt-dim);
  }
  .t-grupo .t-boton.on,
  html.te .seg button.on {
    background: #33333D;
    color: var(--txt-alto);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  }

  @media (prefers-reduced-motion: reduce) {
    .t-boton, .boton, .btn, .tab-btn, .nav-accion, .talla, .filtro,
    html.te .play, html.te .mini, html.te .pro, html.te .seg button {
      transition: none;
    }
    .t-boton:active, .boton:active, .btn:active, .tab-btn:active,
    .nav-accion:active, .talla:active, .filtro:active,
    html.te .play:active, html.te .mini:active,
    html.te .pro:active, html.te .seg button:active { transform: none; }
  }

  /* ── Tarjeta ─────────────────────────────────────────────────── */
  .t-tarjeta {
    background: var(--capa-1);
    border: 1px solid var(--borde-suave);
    border-radius: var(--r-lg);
    padding: var(--e5);
    box-shadow: var(--sombra-ficha);
  }

  /* ── Aviso ───────────────────────────────────────────────────────
     Cuatro clases de aviso, y cada una tiene su momento: estado,
     terminado, advertencia, error. El color es el que dice cuál es;
     el texto explica qué hacer.                                      */
  .t-aviso {
    border-radius: var(--r-md);
    padding: var(--e3) var(--e4);
    font-size: var(--t-chico);
    line-height: var(--lh-chico);
    border: 1px solid var(--borde-suave);
    background: var(--capa-1);
  }
  .t-aviso.bien { border-color: rgba(50, 215, 75, 0.3);  background: var(--verde-tenue); }
  .t-aviso.ojo  { border-color: rgba(255, 125, 26, 0.3); background: var(--naranja-tenue); }
  .t-aviso.mal  { border-color: rgba(250, 66, 56, 0.3);  background: var(--rojo-tenue); }

  /* ── Campo ───────────────────────────────────────────────────────
     La validación se muestra mientras se escribe, no al enviar: que
     alguien llene doce campos para enterarse al final de que el
     segundo estaba mal es cruel.                                     */
  .t-campo {
    width: 100%;
    min-height: var(--toque);
    font-family: inherit;
    font-size: var(--t-base);
    color: var(--txt-alto);
    background: var(--capa-2);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    padding: var(--e3) var(--e4);
    transition: border-color var(--dur-toque) var(--salida),
                background   var(--dur-toque) var(--salida);
  }
  .t-campo:focus { border-color: var(--acento); background: var(--capa-1); outline: none; }
  .t-campo::placeholder { color: var(--txt-tenue); }
  .t-campo[aria-invalid='true'] { border-color: var(--rojo); }

  /* ── Envoltura ───────────────────────────────────────────────── */
  .t-pagina  { max-width: var(--ancho-pagina); margin: 0 auto; padding: 0 var(--e5); }
  .t-lectura { max-width: var(--ancho-texto); }

  /* ════════════════════════════════════════════════════════════════
     LÍNEAS TÉCNICAS Y DIVISORES (ESTILO MIXTAPE & APPLE)
     Líneas nítidas de 1px que articulan grupos de controles, datos
     técnicos y separaciones estructurales.
     ════════════════════════════════════════════════════════════════ */
  .t-vdiv {
    width: 1px;
    height: 1.25rem;
    background: var(--borde-suave);
    flex-shrink: 0;
    margin: 0 var(--e2);
    display: inline-block;
    vertical-align: middle;
  }
  .t-vdiv.alto { height: 2rem; }
  .t-vdiv.chico { height: 0.85rem; }

  .t-hdiv {
    width: 100%;
    height: 1px;
    background: var(--borde-suave);
    border: none;
    margin: var(--e3) 0;
    flex-shrink: 0;
  }

  /* Tira de especificaciones técnicas con divisores */
  .t-tira-tecnica {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    padding: 6px var(--e3);
    background: var(--capa-1);
    border: 1px solid var(--borde-suave);
    border-radius: var(--r-sm);
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--txt-dim);
    flex-wrap: wrap;
  }
  .t-tira-tecnica span {
    color: var(--txt-alto);
    font-variant-numeric: tabular-nums;
  }

  /* Tarjeta técnica con acento lateral */
  .t-tarjeta-tecnica {
    position: relative;
    border: 1px solid var(--borde-suave);
    border-radius: var(--r-md);
    background: var(--capa-1);
    padding: var(--e4) var(--e5);
    overflow: hidden;
  }
  .t-tarjeta-tecnica::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2.5px;
    background: var(--acento);
  }

  /* ════════════════════════════════════════════════════════════════
     TRANSPARENCIA REDUCIDA (ACCESIBILIDAD APPLE)
     ════════════════════════════════════════════════════════════════ */
  @media (prefers-reduced-transparency: reduce) {
    .t-material {
      background: var(--capa-2) !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      border: 1px solid var(--borde-luz) !important;
    }
  }

  /* ════════════════════════════════════════════════════════════════
     MOVIMIENTO REDUCIDO
     Menos movimiento, no cero. El color y la opacidad se quedan
     porque ayudan a entender; lo que se va es el desplazamiento.
     ════════════════════════════════════════════════════════════════ */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .t-boton:active { transform: none; }
  }

}