/* DERMIX System · dermixsystem.com — hoja única del sitio.
   Piel del brandbook J1: negro #0B0B0D, grafito #26262A, plata (degradado), marfil #F3F0E9,
   gris piedra #8A8780. Cinzel (títulos, mayúsculas) + Jost (textos, etiquetas espaciadas).
   Nunca dorado ni colores. Los tokens viven SOLO acá (bloque :root).
   Regla W50: el color de texto lo declara cada CONTENEDOR de fondo (.f-negro / .f-grafito /
   .f-marfil), no el elemento. Tonos de piedra medidos (WCAG, texto normal >= 4.5:1):
     piedra #8A8780 sobre marfil = 3.15 (NO pasa)  -> --piedra-claro #6A6862 = 4.90 / blanco 5.57
     piedra #8A8780 sobre grafito = 4.20 (NO pasa) -> --piedra-oscuro #96938D = 4.92 / negro 6.42
   Sin comillas invertidas en este archivo (W48). */

@font-face{font-family:"Cinzel";src:url("/fuentes/cinzel.woff2?v=c8828d40") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("/fuentes/jost.woff2?v=43e9e336") format("woff2");font-weight:300 600;font-style:normal;font-display:swap}

:root{
  --negro:#0B0B0D;
  --grafito:#26262A;
  --marfil:#F3F0E9;
  --blanco:#FFFFFF;
  --plata:#C9CBCF;
  --plata-degradado:linear-gradient(180deg,#F3F4F6 0%,#CDD0D5 42%,#AEB2B9 58%,#DFE1E5 100%);
  --piedra:#8A8780;
  --piedra-oscuro:#96938D;
  --piedra-claro:#6A6862;
  --f-titulo:"Cinzel",Georgia,"Times New Roman",serif;
  --f-texto:"Jost","Segoe UI",system-ui,-apple-system,sans-serif;
  --ancho:1180px;
  --aire:clamp(16px,4.5vw,40px);
  --seccion:clamp(64px,10vw,120px);
  --radio:2px;
  --alto-cabecera:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--alto-cabecera) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--negro);color:var(--marfil);font-family:var(--f-texto);font-weight:400;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,figure,table{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}

/* ── contenedores de fondo (W50: cada uno declara su texto) ─────────────────────── */
.f-negro{background:var(--negro);--tx:var(--marfil);--tx2:var(--piedra-oscuro);--acento:var(--plata);--borde:rgba(201,203,207,.22);--campo:#141417;color:var(--tx)}
.f-grafito{background:var(--grafito);--tx:var(--marfil);--tx2:var(--piedra-oscuro);--acento:var(--plata);--borde:rgba(201,203,207,.26);--campo:var(--negro);color:var(--tx)}
.f-marfil{background:var(--marfil);--tx:var(--grafito);--tx2:var(--piedra-claro);--acento:var(--grafito);--borde:rgba(38,38,42,.18);--campo:var(--blanco);color:var(--tx)}

.envoltura{width:100%;max-width:var(--ancho);margin:0 auto;padding-left:var(--aire);padding-right:var(--aire)}
.seccion{padding-top:var(--seccion);padding-bottom:var(--seccion)}

/* ── foco visible (W17) ───────────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--acento,var(--plata));outline-offset:3px}
.f-marfil :focus-visible{outline-color:var(--grafito)}

.saltar{position:absolute;left:12px;top:-100px;z-index:100;background:var(--marfil);color:var(--negro);padding:12px 18px;font-weight:500;text-decoration:none}
.saltar:focus{top:12px}
.solo-lector{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── un solo sistema de titulares (W33) ───────────────────────────────────────── */
.antetitulo{display:block;font-family:var(--f-texto);font-weight:500;font-size:13px;line-height:1.5;letter-spacing:.24em;text-transform:uppercase;color:var(--tx2);margin-bottom:18px}
.titulo-1,.titulo-2,.titulo-3{font-family:var(--f-titulo);font-weight:400;text-transform:uppercase;color:var(--tx);letter-spacing:.04em;line-height:1.14}
.titulo-1{font-size:clamp(32px,8.4vw,54px);letter-spacing:.03em}
.titulo-2{font-size:clamp(28px,4.4vw,46px)}
.titulo-3{font-size:clamp(19px,2.1vw,22px);letter-spacing:.06em;line-height:1.3}
.entrada{font-size:clamp(17px,1.7vw,19px);font-weight:400;color:var(--tx);max-width:62ch;margin-top:20px}
.cabeza-seccion{max-width:760px;margin-bottom:clamp(36px,5vw,56px)}
.nota{font-size:15px;color:var(--tx2);line-height:1.55}

/* ── botones (>= 48 px, W9) ───────────────────────────────────────────────────── */
.boton{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 28px;border-radius:var(--radio);font-family:var(--f-texto);font-weight:500;font-size:14px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid transparent;text-align:center;line-height:1.3;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,background-color .3s ease,filter .3s ease}
/* micro-interacción: barrido de luz en el plata, halo en la línea, se hunde al apretar */
.boton-plata::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-130%);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.boton-plata:hover::after,.boton-plata:focus-visible::after{transform:translateX(130%)}
.boton:hover{transform:translateY(-1px)}
.boton:active{transform:translateY(0) scale(.985)}
.boton-plata{background:var(--plata-degradado);color:var(--negro);border-color:#AEB2B9}
.boton-plata:hover{filter:brightness(1.05);box-shadow:0 12px 30px -14px rgba(223,225,229,.55)}
.boton-linea{background:transparent;color:var(--tx);border-color:var(--acento)}
.boton-linea:hover{background:rgba(201,203,207,.08);box-shadow:inset 0 0 0 1px var(--acento),0 0 26px -10px rgba(201,203,207,.45)}
.f-marfil .boton-linea:hover{background:rgba(38,38,42,.06)}
.boton-oscuro{background:var(--grafito);color:var(--marfil);border-color:var(--grafito)}
.boton-oscuro:hover{background:var(--negro)}
.boton[disabled]{opacity:.75;cursor:progress}
.botones{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ── cabecera fija ────────────────────────────────────────────────────────────── */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(11,11,13,.94);border-bottom:1px solid transparent;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cabecera::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,203,207,.3) 18%,rgba(201,203,207,.3) 82%,transparent);pointer-events:none}
.cabecera .envoltura{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--alto-cabecera)}
.cab-logo{position:relative;display:flex;align-items:center;min-height:48px;flex:none}
.cab-logo img{width:132px;height:auto}
.cab-menu{display:none}
.cab-menu a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--marfil)}
.cab-menu a:hover{color:var(--plata);text-decoration:underline;text-underline-offset:6px}
.cab-acciones{display:flex;align-items:center;gap:8px}
/* teléfono: DERMIX al mínimo del brandbook (140 px); el sonido sale de la cabecera (sigue en el encendido) */
@media (max-width:479px){.cab-logo img{width:140px}.cabecera .sonido.sonido-cab{display:none}.cab-acciones{gap:6px}.cabecera .cab-acciones .boton{padding:10px 12px;font-size:12px;letter-spacing:.08em;white-space:nowrap}.inst-cabeza{letter-spacing:.16em}}
@media (max-width:374px){.sonido-cab{display:none}}
.idioma{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 8px;font-size:13px;font-weight:500;letter-spacing:.18em;text-decoration:none;color:var(--marfil);border:1px solid rgba(201,203,207,.3);border-radius:var(--radio)}
.idioma:hover{border-color:var(--plata)}
.cabecera .boton{min-height:48px;padding:10px 18px;font-size:13px;letter-spacing:.16em}
@media (min-width:1000px){
  .cab-logo img{width:168px}
  .cab-menu{display:flex;align-items:center;gap:2px}
  :root{--alto-cabecera:76px}
}

/* ── 1 · inicio: el héroe de la CASA (corrida 4, DECISIONES §7) ────────────────────────────
   DERMIX System grande (el logo, nunca tecleado), el titular de la casa en Cinzel, la línea (01 LÉVILIF ·
   disponible / 02 · próximamente) y una cinta de cifras. El escenario es el póster del loop (imagen LCP);
   sitio.js monta encima el video en bucle después del load.
   Teléfono: marca y H1 sobre negro, el escenario (la máquina), la línea y los botones dentro de la
   primera pantalla (W10); la bajada va después. Escritorio: texto a la izquierda sobre negro, escenario
   a la derecha fundido al negro: el texto nunca queda sobre la imagen (W53). */
.heroe{position:relative;overflow:hidden;display:flex;flex-direction:column}
/* teléfono y tablet: el contenido se «disuelve» (display:contents) para que el escenario, que va aparte, quede
   intercalado entre el titular y la línea con order; en escritorio vuelve a ser la columna de la izquierda */
.heroe-contenido{display:contents}
.heroe-marca,.heroe-titulo,.heroe-linea,.heroe-botones,.heroe-texto,.heroe-nota{position:relative;z-index:2;padding-left:var(--aire);padding-right:var(--aire)}
.heroe-marca{padding-top:24px}
.heroe-nota{padding-bottom:28px}
.heroe-marca{order:1}
.heroe-titulo{order:2}
.heroe-escena{order:3}
.heroe-linea{order:4}
.heroe-botones{order:5}
.heroe-texto{order:6}
.heroe-nota{order:7}
.heroe-logo{position:relative;display:inline-block;width:min(64vw,250px)}
.heroe-logo img{display:block;width:100%;height:auto}
.heroe-logo .brillo{inset:0}
.heroe-titulo{margin-top:16px;font-family:var(--f-titulo);font-weight:400;text-transform:uppercase;font-size:clamp(23px,6.4vw,44px);line-height:1.18;letter-spacing:.06em;color:var(--marfil);max-width:20ch}
.heroe-texto{margin-top:22px;font-size:clamp(17px,1.5vw,19px);line-height:1.62;color:var(--marfil);max-width:46ch}
.heroe-nota{margin-top:12px;font-size:14px;color:var(--tx2)}
.heroe-botones{margin-top:22px}
/* el escenario: en teléfono es una franja dentro del flujo; en escritorio, el fondo de la derecha */
.heroe-escena{position:relative;overflow:hidden;margin:18px 0 0;aspect-ratio:4/3;background:#050506}
.heroe-escena picture,.heroe-escena video{position:absolute;inset:0;display:block;width:100%;height:100%;transform:translate3d(0,var(--py-esc,0px),0) scale(var(--esc-esc,1))}
.heroe-escena img,.heroe-escena video{width:100%;height:100%;object-fit:cover;object-position:50% 74%}
.heroe-escena video{opacity:0;transition:opacity 1.2s ease}
.heroe-escena.vivo video{opacity:1}
.heroe-velo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0B0B0D 0%,rgba(11,11,13,0) 18%,rgba(11,11,13,0) 74%,#0B0B0D 100%)}
.heroe-haz{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.10) 49%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.10) 51%,transparent 58%) no-repeat;background-size:320% 100%;background-position:130% 0;opacity:0}
.heroe-escena .encender{left:14px;bottom:14px}
@media (orientation:landscape),(min-width:700px){
  .heroe-escena{aspect-ratio:16/9}
  .heroe-escena img,.heroe-escena video{object-position:50% 50%}
}
/* indicador de la línea */
.heroe-linea{margin-top:16px}
@media (max-width:479px){.heroe-linea ol{gap:8px}.heroe-linea a,.hl-caja{gap:9px;padding:6px 13px;letter-spacing:.14em}}
.heroe-linea ol{display:flex;flex-wrap:wrap;gap:10px}
.heroe-linea a,.hl-caja{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:6px 16px;border:1px solid rgba(201,203,207,.32);border-radius:999px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--marfil);background:rgba(11,11,13,.6)}
.heroe-linea a:hover{border-color:var(--plata)}
.hl-num{font-family:var(--f-titulo);font-size:15px;letter-spacing:.08em;color:var(--plata)}
.hl-nombre{font-family:var(--f-titulo);font-size:14px;letter-spacing:.14em}
.hl-estado{display:inline-flex;align-items:center;gap:7px;color:var(--tx2)}
.hl-disponible .hl-estado::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8)}
.hl-proximamente .hl-caja{border-style:dashed;border-color:rgba(201,203,207,.24);background:transparent}
.hl-proximamente .hl-num{color:var(--tx2)}
/* la cinta de cifras */
.cinta{order:9;position:relative;z-index:2;display:flex;align-items:center;border-top:1px solid rgba(201,203,207,.16);border-bottom:1px solid rgba(201,203,207,.16);background:rgba(11,11,13,.85)}
.cinta-ventana{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* a la izquierda: a la derecha queda debajo de la burbuja del chat */
.cinta-pausa{order:-1;flex:none;display:grid;place-items:center;width:48px;height:48px;margin:0 4px 0 var(--aire);padding:0;border:1px solid rgba(201,203,207,.3);border-radius:50%;background:var(--negro);color:var(--marfil);cursor:pointer}
.cinta-pausa:hover{border-color:var(--plata)}
.cinta-pausa svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cinta-pausa .cp-play{display:none}
.cinta-pausa[aria-pressed=true] .cp-pausa{display:none}
.cinta-pausa[aria-pressed=true] .cp-play{display:inline}
.sin-js .cinta-pausa{display:none}
.cinta-pista{display:flex;width:max-content}
.cinta-lista{display:flex;align-items:center;flex:none}
.cinta-lista li{display:inline-flex;align-items:baseline;gap:12px;padding:15px 34px 15px 0;white-space:nowrap}
.cinta-lista li::before{content:"";align-self:center;flex:none;width:6px;height:6px;margin-right:22px;transform:rotate(45deg);background:var(--plata);opacity:.8}
.cinta-valor{font-size:18px;font-weight:500;letter-spacing:.04em;color:var(--marfil);font-variant-numeric:lining-nums}
.cinta-rotulo{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--piedra-oscuro)}
@media (min-width:1000px){
  .heroe{min-height:clamp(640px,calc(100svh - var(--alto-cabecera)),940px)}
  .heroe-contenido{position:relative;z-index:2;display:flex;flex-direction:column;flex:1;justify-content:center;padding-top:clamp(40px,7vh,88px);padding-bottom:clamp(48px,8vh,96px)}
  .heroe-marca,.heroe-titulo,.heroe-linea,.heroe-botones,.heroe-texto,.heroe-nota{padding-left:0;padding-right:0;max-width:560px}
  .heroe-marca{padding-top:0}
  .heroe-nota{padding-bottom:0}
  .heroe-texto{order:3}
  .heroe-linea{order:4;margin-top:26px}
  .heroe-botones{order:5;margin-top:26px}
  .heroe-logo{width:clamp(300px,27vw,420px)}
  .heroe-titulo{font-size:clamp(30px,2.9vw,44px)}
  .heroe-escena{position:absolute;z-index:1;top:0;right:0;bottom:0;width:62%;margin:0;aspect-ratio:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%);mask-image:linear-gradient(90deg,transparent 0,#000 42%)}
  .heroe-escena img,.heroe-escena video{object-position:58% 50%}
  .heroe-velo{background:radial-gradient(120% 90% at 70% 50%,rgba(11,11,13,0) 40%,#0B0B0D 100%),linear-gradient(180deg,rgba(11,11,13,.5) 0%,rgba(11,11,13,0) 18%,rgba(11,11,13,0) 78%,#0B0B0D 100%)}
  .heroe-escena .encender{left:40%;bottom:84px}
}
/* LÉVILIF en texto, en los dos idiomas (Q6-01: siempre más chico que el DERMIX visible) */
.modelo-texto{display:block;font-family:var(--f-titulo);font-size:23px;letter-spacing:.12em;line-height:1;color:var(--plata)}
.modelo-desc{display:block;margin-top:6px;font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--tx2)}

/* ── 2 · video ────────────────────────────────────────────────────────────────── */
.video-marco{position:relative;background:var(--negro);border:1px solid var(--borde)}
/* esquinas de plata, como el bisel de la pantalla del equipo */
.video-marco::before,.visor::before,.instrumento::after{content:"";position:absolute;inset:-1px;z-index:3;pointer-events:none;--e:18px;--c:var(--plata);background:linear-gradient(var(--c),var(--c)) 0 0/var(--e) 1px,linear-gradient(var(--c),var(--c)) 0 0/1px var(--e),linear-gradient(var(--c),var(--c)) 100% 0/var(--e) 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px var(--e),linear-gradient(var(--c),var(--c)) 0 100%/var(--e) 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px var(--e),linear-gradient(var(--c),var(--c)) 100% 100%/var(--e) 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px var(--e);background-repeat:no-repeat}
.video-marco video{width:100%;height:auto;aspect-ratio:16/9;background:var(--negro)}

/* ── 3 · ficha técnica ────────────────────────────────────────────────────────── */
.ficha-rejilla{display:grid;gap:40px}
.ficha-figura{position:relative;background:var(--blanco);border:1px solid var(--borde)}
.ficha-figura img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tabla{width:100%;border-collapse:collapse;font-size:16px}
.tabla caption{text-align:left}
.tabla th,.tabla td{text-align:left;vertical-align:top;padding:14px 0;border-bottom:1px solid var(--borde)}
.tabla thead th{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--tx2);padding-top:0}
.tabla tbody th{font-weight:500;padding-right:18px;width:44%}
.tabla td{font-variant-numeric:lining-nums}
.ficha-pdf{margin-top:40px}
@media (min-width:1000px){
  .ficha-rejilla{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:start}
  .ficha-figura{position:sticky;top:calc(var(--alto-cabecera) + 24px)}
}

/* ── 4 · el equipo en 3D ──────────────────────────────────────────────────────── */
.visor{position:relative;background:radial-gradient(ellipse at 50% 40%,#1c1c20 0%,var(--negro) 70%);border:1px solid var(--borde)}
.visor-lienzo{position:relative;width:100%;aspect-ratio:1/1;max-height:72vh}
@media (min-width:700px){.visor-lienzo{aspect-ratio:3/2}}
.visor-lienzo>picture img,.visor-lienzo>img{width:100%;height:100%;object-fit:contain}
.visor-lienzo model-viewer{position:absolute;inset:0;width:100%;height:100%;background:transparent;--poster-color:transparent}
.visor-lienzo model-viewer:not([data-listo]){opacity:0}
.visor-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-top:1px solid var(--borde)}
.visor-ayuda{font-size:14px;color:var(--tx2)}
.visor-ayuda .tactil{display:none}
@media (pointer:coarse){.visor-ayuda .tactil{display:inline}.visor-ayuda .puntero{display:none}}
.visor-estado{font-size:13px;color:var(--tx2)}
.visor .boton{min-height:48px;padding:10px 18px;font-size:12px}
/* Textos con dos versiones (control Q1-08): .t3d con visor, .t-no3d sin él. <html> lleva «sin-js»
   hasta que corre el JS, y «sin-3d» si el visor cae (sin WebGL, GLB en error) o se construyó --sin-3d. */
.t-no3d{display:none}
.sin-3d .t3d,.sin-js .t3d{display:none}
.sin-3d .t-no3d,.sin-js .t-no3d{display:inline}
.sin-3d .visor,.sin-js .visor{display:none}
.galeria{margin-top:clamp(48px,7vw,80px)}
.galeria-cabeza{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.galeria-controles{display:flex;gap:10px}
.galeria-flecha{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid var(--acento);background:transparent;color:var(--tx);border-radius:var(--radio);cursor:pointer}
.galeria-flecha:hover{background:rgba(201,203,207,.08)}
.galeria-flecha svg{width:20px;height:20px}
.galeria-pista{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--piedra) transparent;padding-bottom:10px;margin:0 calc(var(--aire) * -1);padding-left:var(--aire);padding-right:var(--aire);scroll-padding:0 var(--aire)}
.galeria-pista>li{flex:0 0 88%;scroll-snap-align:start}
.galeria-pista figure{position:relative;background:var(--negro);border:1px solid var(--borde)}
.galeria-pista img{width:100%;aspect-ratio:16/9;object-fit:cover}
.galeria-pista figcaption{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.galeria-pista figcaption span:last-child{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--tx2)}
@media (min-width:768px){.galeria-pista>li{flex-basis:62%}}
@media (min-width:1000px){.galeria-pista>li{flex-basis:calc((100% - 28px) / 2.2)}}

/* ── 5 · aplicaciones ─────────────────────────────────────────────────────────── */
.apl-principal{padding:28px;border:1px solid var(--borde);background:rgba(11,11,13,.35)}
.apl-principal .titulo-3{font-size:clamp(22px,2.6vw,28px)}
.apl-principal p{margin-top:12px;max-width:60ch}
.apl-ademas{margin-top:40px}
.apl-lista{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:16px;background:var(--borde);border:1px solid var(--borde)}
.apl-lista li{background:var(--grafito);padding:18px 16px;font-family:var(--f-titulo);font-size:17px;letter-spacing:.06em;text-transform:uppercase}
.apl-nota{margin-top:28px;max-width:70ch}
@media (min-width:1000px){.apl-lista{grid-template-columns:repeat(3,1fr)}}

/* ── 6 · la casa ──────────────────────────────────────────────────────────────── */
.casa-rejilla{display:grid;gap:36px}
.casa-figura{position:relative;overflow:hidden}
.casa-figura picture{display:block;transform:translate3d(0,var(--py,0px),0) scale(var(--esc,1))}
.casa-figura img{width:100%;aspect-ratio:16/10;object-fit:cover}
.casa-texto p+p{margin-top:16px}
.casa-correo{margin-top:24px}
.casa-correo a,.enlace-correo{font-weight:500;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;display:inline-flex;align-items:center;min-height:48px}
@media (min-width:1000px){.casa-rejilla{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}}

/* ── 7 · preguntas ────────────────────────────────────────────────────────────── */
.preguntas-lista{max-width:860px;border-top:1px solid var(--borde)}
.preguntas-lista details{border-bottom:1px solid var(--borde)}
.preguntas-lista summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 0;cursor:pointer;list-style:none;font-size:18px;font-weight:500}
.preguntas-lista summary::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--plata-degradado);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.preguntas-lista summary:hover::before,.preguntas-lista details[open] summary::before{transform:scaleX(1)}
.preguntas-lista summary::-webkit-details-marker{display:none}
.preguntas-lista summary::after{content:"";flex:none;width:12px;height:12px;border-right:1.5px solid var(--acento);border-bottom:1.5px solid var(--acento);transform:rotate(45deg) translate(-3px,-3px)}
.preguntas-lista details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.preguntas-lista .respuesta{padding:0 0 22px;max-width:70ch;color:var(--tx)}
.respuesta a{font-weight:500;text-underline-offset:4px}

/* ── 8 · cotizar ──────────────────────────────────────────────────────────────── */
.cot-rejilla{display:grid;gap:40px}
.cot-directo{margin-top:28px;padding-top:24px;border-top:1px solid var(--borde)}
.cot-directo p{color:var(--tx2);font-size:15px}
.form{display:grid;gap:22px}
.campo{display:grid;gap:8px}
.campo label,.campo .etiqueta{font-size:15px;font-weight:500;letter-spacing:.02em}
.obligatorio-marca{color:var(--tx2)}
.campo input[type=text],.campo input[type=email],.campo input[type=tel],.campo select,.campo textarea{width:100%;min-height:52px;padding:12px 14px;font-size:17px;line-height:1.4;background:var(--campo);color:var(--tx);border:1px solid var(--piedra-oscuro);border-radius:var(--radio);-webkit-appearance:none;appearance:none}
.campo select{background-image:linear-gradient(45deg,transparent 50%,var(--plata) 50%),linear-gradient(135deg,var(--plata) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.campo select option{background:var(--negro);color:var(--marfil)}
.campo textarea{min-height:130px;resize:vertical}
.campo input[type=file]{font-size:16px;min-height:52px;padding:10px 0;color:var(--tx)}
.campo input[type=file]::file-selector-button{min-height:44px;margin-right:14px;padding:8px 16px;font:500 13px/1 var(--f-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--tx);background:transparent;border:1px solid var(--acento);border-radius:var(--radio);cursor:pointer}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{outline:2px solid var(--marfil);outline-offset:1px;border-color:var(--marfil)}
.ayuda{font-size:14px;color:var(--tx2);line-height:1.5}
.error{font-size:14px;font-weight:500;color:var(--tx);display:flex;gap:8px;align-items:flex-start}
.error:not(:empty)::before{content:"!";flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--marfil);color:var(--negro);font-size:12px;font-weight:600}
.error:empty{display:none}
[aria-invalid=true]{border-color:var(--marfil)!important;border-width:2px!important}
.casilla{display:grid;grid-template-columns:48px 1fr;gap:6px;align-items:start}
/* Casilla: el área que se toca mide 48x48 (W9); la caja que se ve, 24 px dibujada con fondos. */
.casilla input{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;width:48px;height:48px;margin:-10px 0 0 -12px;cursor:pointer;border:0;border-radius:0;
  background:linear-gradient(var(--campo),var(--campo)) center/22px 22px no-repeat,linear-gradient(var(--piedra-oscuro),var(--piedra-oscuro)) center/24px 24px no-repeat}
.casilla input:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230B0B0D' stroke-width='2.4'/%3E%3C/svg%3E") center/18px 18px no-repeat,linear-gradient(var(--plata),var(--plata)) center/24px 24px no-repeat}
.casilla input:focus-visible{outline:2px solid var(--marfil);outline-offset:-8px}
.casilla input[aria-invalid=true]{background:linear-gradient(var(--campo),var(--campo)) center/20px 20px no-repeat,linear-gradient(var(--marfil),var(--marfil)) center/24px 24px no-repeat}
.casilla label{font-size:15px;font-weight:400;line-height:1.55}
.casilla-enlace{margin:2px 0 0 54px;font-size:15px}
.casilla-enlace a{display:inline-flex;align-items:center;min-height:48px;font-weight:500;text-underline-offset:4px}
.trampa{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form-pie{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.form-pie .boton{min-width:220px}
.form-aviso{font-size:14px;color:var(--tx2)}
.form-estado{padding:22px;border:1px solid var(--acento)}
.form-estado:empty{display:none}
.form-estado h3{margin-bottom:10px}
.form-estado a{font-weight:500}
.form .dos{display:grid;gap:22px}
@media (min-width:768px){.form .dos{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.cot-rejilla{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}}

/* ── pie ──────────────────────────────────────────────────────────────────────── */
.pie{padding:64px 0 40px;border-top:1px solid rgba(201,203,207,.14);font-size:15px}
.pie-rejilla{display:grid;gap:32px}
.pie-logo{position:relative;display:inline-block}
.pie-logo img{width:180px;height:auto}
.pie-lema{margin-top:14px;font-family:var(--f-titulo);font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--plata)}
.pie-enlaces{display:grid;gap:0}
.pie-enlaces a{display:inline-flex;align-items:center;min-height:48px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.pie-legal{margin-top:36px;padding-top:24px;border-top:1px solid rgba(201,203,207,.14);display:grid;gap:8px;font-size:14px;color:var(--tx2)}
.pie .pmso-firma{color:var(--plata);min-height:48px;margin-top:0} /* W9: área táctil de 48 px; el sello no cambia de tamaño (W32) */
@media (min-width:1000px){.pie-rejilla{grid-template-columns:2fr 1fr 1fr;align-items:start}}

/* ── páginas sueltas (gracias, privacidad, 404) ───────────────────────────────── */
.pagina-simple{min-height:calc(100vh - 220px);display:flex;align-items:center}
.pagina-simple .titulo-2{margin-top:4px}
.legal{max-width:760px}
.legal h2{margin-top:44px;margin-bottom:12px}
.legal p{max-width:70ch}
.legal .actualizado{margin-top:18px;font-size:14px;color:var(--tx2)}
.borrador{margin-top:20px;padding:12px 16px;border:1px dashed var(--acento);font-size:14px}
.dos-idiomas{display:grid;gap:56px}
@media (min-width:1000px){.dos-idiomas{grid-template-columns:1fr 1fr;gap:72px}}

/* ══ Corrida 3 · detalles finos y gadgets de la marca (pedido de Joan, 6-oct) ═══════════════════
   Regla de esta capa: TODO lo que se mueve está dentro de prefers-reduced-motion:no-preference o lo
   activa efectos.js (que no hace nada con «reducir movimiento»). Sin JavaScript la página se ve
   completa y quieta. Colores: solo los tokens de :root (plata, negro, grafito, marfil, piedra). */
::selection{background:rgba(201,203,207,.34)}

/* Numeración romana de las secciones (joyería romana, J1). Decorativa: el texto alternativo es vacío. */
main{counter-reset:sec}
.ante-sec::before{counter-increment:sec;content:counter(sec,upper-roman) "\2002\00B7\2002" / "";color:var(--acento)}

/* Barra de progreso de lectura bajo la cabecera (la mueve efectos.js) */
.progreso{position:absolute;left:0;right:0;bottom:-1px;z-index:1;height:1px;background:linear-gradient(90deg,#AEB2B9,#F3F4F6);transform:scaleX(var(--prog,0));transform-origin:0 50%;pointer-events:none}

/* Destello de luz sobre el logo: la máscara es el mismo SVG, así la luz solo pasa por las letras */
.brillo{position:absolute;inset:0;pointer-events:none;-webkit-mask:url("/marca/DERMIX-principal-plata.svg") center/contain no-repeat;mask:url("/marca/DERMIX-principal-plata.svg") center/contain no-repeat;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%) no-repeat;background-size:320% 100%;background-position:150% 0}

/* Conmutador de sonido (silenciado por defecto). Se ve cuando efectos.js está listo. */
.sonido{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;padding:0;background:transparent;border:1px solid rgba(201,203,207,.3);border-radius:var(--radio);color:var(--marfil);cursor:pointer;visibility:hidden;transition:border-color .3s,box-shadow .3s}
.fx .sonido{visibility:visible}
.sonido:hover{border-color:var(--plata)}
.sonido svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sonido .s-onda{display:none}
.sonido[data-on] .s-onda{display:inline}
.sonido[data-on] .s-mudo{display:none}
.sonido[data-on]{border-color:var(--plata);box-shadow:0 0 18px -6px rgba(223,225,229,.6)}
.sin-js .sonido{display:none}

/* El filete con rombo (brandbook J1): dos líneas que nacen del centro y una joya que se enciende */
.filete-rombo{display:block;width:200px;max-width:60%;margin:0 0 18px}
.filete-rombo svg{display:block;width:100%;height:auto;overflow:visible}
.fr-linea{stroke:var(--acento);stroke-width:1;stroke-dasharray:110;stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.6,0,.2,1)}
.fr-rombo{fill:var(--acento);transform-box:fill-box;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.3,1.4,.4,1) .7s,opacity .4s .7s}
.f-negro .fr-rombo,.f-grafito .fr-rombo{fill:#fff;filter:drop-shadow(0 0 4px rgba(255,255,255,.75))}
.fr-casa{width:160px;margin:26px 0 0}
.mov .fr-casa:not(.en-vista) .fr-linea{stroke-dashoffset:110}
.mov .fr-casa:not(.en-vista) .fr-rombo{transform:scale(0) rotate(90deg);opacity:0}

/* Revelado al scroll (efectos.js marca .rv solo en lo que está DEBAJO de la pantalla al llegar) */
.mov .rv{opacity:0;transform:translate3d(0,24px,0);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rv-d,0s)}
.mov .rv.en-vista{opacity:1;transform:none}

/* Halo que sigue al cursor (solo puntero fino, solo fondos negros: no toca el contraste del grafito) */
/* capa propia DEBAJO del contenido: el fondo opaco de la sección sigue siendo el que se mide */
.halo{position:relative}
.halo>:not(.heroe-escena){position:relative}
.halo::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(560px circle at var(--hx,50%) var(--hy,-600px),rgba(201,203,207,.065),transparent 70%)}

/* Botón de encendido sobre la máquina del inicio */
.encender{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:5px 18px 5px 5px;border:1px solid rgba(201,203,207,.38);border-radius:999px;background:rgba(11,11,13,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--marfil);font:500 12px/1 var(--f-texto);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:border-color .3s,box-shadow .3s,transform .3s}
.encender:hover{border-color:var(--plata);box-shadow:0 0 30px -8px rgba(223,225,229,.5)}
.encender-aro{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(223,225,229,.6);background:radial-gradient(circle,#1d1d21,#0b0b0d)}
.encender-aro svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round}
.sin-js .encender{display:none}

/* Pantalla completa de la secuencia de encendido */
.encendido{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#000;color:var(--marfil);--tx:var(--marfil);--acento:var(--plata);opacity:0;transition:opacity .6s ease}
.encendido[hidden]{display:none}
.encendido.abierto{opacity:1}
.encendido video{width:100%;height:100%;object-fit:cover;background:#000}
.encendido-controles{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));display:flex;gap:10px}
.encendido .boton{min-height:48px;padding:10px 20px;font-size:12px}

/* ── Instrumentos de la ficha (980 ↔ 1470 nm · osciloscopio CW/PW/SSW) ───────────────────── */
.ficha-sub{display:grid;gap:24px;margin-top:64px}
@media (min-width:1000px){.ficha-sub{grid-template-columns:1fr 1fr;gap:28px}}
.instrumento{position:relative;display:flex;flex-direction:column;gap:18px;min-width:0;padding:18px 18px 22px;border-radius:4px;border:1px solid #34343a;background:radial-gradient(120% 80% at 50% 0%,#18181b 0%,var(--negro) 62%);box-shadow:0 34px 60px -34px rgba(11,11,13,.6);color:var(--marfil);--tx:var(--marfil);--tx2:var(--piedra-oscuro);--acento:var(--plata);--borde:rgba(201,203,207,.18)}
.instrumento::before{content:"";position:absolute;inset:6px;border:1px solid rgba(201,203,207,.12);border-radius:2px;pointer-events:none}
.f-marfil .instrumento :focus-visible{outline-color:var(--plata)}
.instrumento .titulo-3{color:var(--marfil)}
.inst-cabeza{display:flex;align-items:center;gap:10px;font:500 11px/1.3 var(--f-texto);letter-spacing:.26em;text-transform:uppercase;color:var(--piedra-oscuro)}
.inst-canal{margin-left:auto}
.inst-led{flex:none;width:7px;height:7px;transform:rotate(45deg);background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8)}
.selector{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));min-width:0;margin:0;padding:4px;border:1px solid rgba(201,203,207,.28);border-radius:999px;background:#0e0e10}
.sel-op{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 6px;border-radius:999px;font:500 14px/1 var(--f-texto);letter-spacing:.14em;color:var(--piedra-oscuro);cursor:pointer;transition:color .35s}
.sel-op input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;font-size:16px;cursor:pointer;-webkit-appearance:none;appearance:none}
.sel-op:has(input:checked){color:var(--negro)}
.sel-op:has(input:focus-visible){outline:2px solid var(--plata);outline-offset:3px}
.sel-op:hover{color:var(--marfil)}
.sel-op:has(input:checked):hover{color:var(--negro)}
.sel-perilla{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n));border-radius:999px;background:var(--plata-degradado);box-shadow:0 0 22px -4px rgba(223,225,229,.45);transition:transform .5s cubic-bezier(.3,1.25,.4,1)}
.selector:has(.sel-op:nth-of-type(2) input:checked) .sel-perilla{transform:translateX(100%)}
.selector:has(.sel-op:nth-of-type(3) input:checked) .sel-perilla{transform:translateX(200%)}
.inst-escena{position:relative;overflow:hidden;border-radius:3px;border:1px solid rgba(201,203,207,.12);background:#08080a;touch-action:pan-y}
.inst-escena svg{display:block;width:100%;height:auto}
.inst-pista{position:absolute;right:10px;bottom:6px;margin:0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--piedra-oscuro);display:none}
@media (pointer:coarse){.inst-pista{display:block}}
.lecturas{display:grid}
.lectura{grid-area:1/1;opacity:0;visibility:hidden;transform:translate3d(0,6px,0);transition:opacity .45s ease,transform .45s ease,visibility 0s .45s}
.lect-fila{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid rgba(201,203,207,.14)}
.lect-rot{font:500 12px/1.4 var(--f-texto);letter-spacing:.22em;text-transform:uppercase;color:var(--piedra-oscuro)}
.lect-valor{font:400 clamp(22px,2.6vw,28px)/1.1 var(--f-texto);letter-spacing:.02em;color:var(--marfil);text-align:right;font-variant-numeric:lining-nums tabular-nums}
.lect-afin{padding-top:12px;font-size:16px;line-height:1.55;color:var(--marfil)}
.lect-afin .lect-rot{display:block;margin-bottom:6px}
.lect-afin strong{display:block;font-weight:500;font-size:18px;margin-bottom:2px}
/* qué estado se ve: el radio marcado (funciona sin JavaScript) */
.instrumento:has(.sel-op:nth-of-type(1) input:checked) .lect-0,
.instrumento:has(.sel-op:nth-of-type(2) input:checked) .lect-1,
.instrumento:has(.sel-op:nth-of-type(3) input:checked) .lect-2{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .1s,transform .45s ease .1s,visibility 0s}
@supports not selector(:has(*)){.lect-0,.hz-0,.osc-0{opacity:1!important;visibility:visible!important}}
/* el haz */
.hz-regla line{stroke:rgba(201,203,207,.3);stroke-width:1}
.hz-fibra{stroke:var(--plata);stroke-width:2}
.hz-canula{fill:#24242a;stroke:rgba(201,203,207,.55);stroke-width:1}
.hz-punta{fill:#fff;filter:drop-shadow(0 0 6px #fff)}
.hz-ola,.osc-traza{opacity:0;transition:opacity .5s ease}
.inst-onda:has(.sel-op:nth-of-type(1) input:checked) .hz-0,.inst-onda:has(.sel-op:nth-of-type(2) input:checked) .hz-1{opacity:1}
.hz-trazo{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:var(--brillo)}
.hz-halo{fill:none;stroke:#E6E8EC;stroke-width:8;opacity:calc(var(--brillo) * .75)}
.hz-lambda path{fill:none;stroke:rgba(201,203,207,.7);stroke-width:1}
.hz-lambda text{fill:var(--plata);font:500 12px var(--f-texto);letter-spacing:.14em;text-anchor:middle}
/* el osciloscopio */
.osc-reja line{stroke:rgba(201,203,207,.1);stroke-width:1}
.osc-eje{fill:var(--piedra-oscuro);font:500 10px var(--f-texto);letter-spacing:.24em;text-transform:uppercase}
.inst-modos:has(.sel-op:nth-of-type(1) input:checked) .osc-0,.inst-modos:has(.sel-op:nth-of-type(2) input:checked) .osc-1,.inst-modos:has(.sel-op:nth-of-type(3) input:checked) .osc-2{opacity:1}
.osc-tenue{fill:none;stroke:rgba(223,225,229,.24);stroke-width:1.5}
.osc-linea{fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.osc-halo{fill:none;stroke:#E6E8EC;stroke-width:6;opacity:.55}
.instrumento.quieto .hz-mov,.instrumento.quieto .osc-barra{animation-play-state:paused}

/* ── Puntos sobre el modelo 3D (hotspots) ─────────────────────────────────────────────────── */
.punto{position:relative;display:block;width:48px;height:48px;padding:0;border:0;background:transparent;color:var(--marfil);cursor:pointer;transition:opacity .35s}
.punto:not([data-visible]){opacity:0;pointer-events:none}
.punto:focus-visible{outline:none}
.punto-rombo{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;transform:rotate(45deg);background:var(--plata-degradado);border:1px solid #fff;box-shadow:0 0 0 4px rgba(11,11,13,.5),0 0 16px rgba(255,255,255,.6)}
.punto-rombo::after{content:"";position:absolute;inset:-8px;border:1px solid rgba(223,225,229,.65)}
.punto:focus-visible .punto-rombo{outline:2px solid var(--plata);outline-offset:8px}
.punto-etiqueta{position:absolute;left:42px;top:50%;display:block;padding:9px 14px 9px 14px;white-space:nowrap;text-align:left;background:rgba(11,11,13,.9);border:1px solid rgba(201,203,207,.35);border-left:2px solid var(--plata);opacity:0;transform:translate(-6px,-50%);pointer-events:none;transition:opacity .3s,transform .3s}
.punto.izq .punto-etiqueta{left:auto;right:42px;border-left:1px solid rgba(201,203,207,.35);border-right:2px solid var(--plata);text-align:right;transform:translate(6px,-50%)}
.punto-etiqueta strong{display:block;font:500 12px/1.35 var(--f-texto);letter-spacing:.2em;text-transform:uppercase;color:var(--marfil)}
.punto-etiqueta>span:not(.solo-lector){display:block;margin-top:2px;font-size:13px;line-height:1.4;color:#BDBAB3}
.punto:hover .punto-etiqueta,.punto:focus-visible .punto-etiqueta,.punto[aria-expanded=true] .punto-etiqueta{opacity:1;transform:translate(0,-50%)}

/* ══ Corrida 4 · la línea DERMIX (una tarjeta por equipo; sumar uno = sumar un ítem en producto.json) ══ */
.linea-lista{display:grid;gap:24px}
.linea-item article{position:relative;height:100%;display:flex;flex-direction:column;border-radius:4px;overflow:hidden}
.linea-disponible article{background:var(--negro);color:var(--marfil);border:1px solid #34343a;box-shadow:0 34px 60px -34px rgba(11,11,13,.55);--tx:var(--marfil);--tx2:var(--piedra-oscuro);--acento:var(--plata);--borde:rgba(201,203,207,.2)}
.f-marfil .linea-disponible :focus-visible{outline-color:var(--plata)}
.linea-figura{position:relative;aspect-ratio:16/10;overflow:hidden}
.linea-figura img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.linea-disponible:hover .linea-figura img{transform:scale(1.035)}
.linea-figura::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,0) 55%,#0B0B0D 100%);pointer-events:none}
.linea-cuerpo{display:flex;flex-direction:column;flex:1;padding:22px 22px 26px}
.linea-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px}
.linea-num{font-family:var(--f-titulo);font-size:15px;letter-spacing:.18em;color:var(--plata)}
.linea-estado{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--tx2)}
.linea-led{width:7px;height:7px;transform:rotate(45deg);background:currentColor}
.linea-estado-disponible .linea-led{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8)}
.linea-nombre{margin-top:18px}
.linea-titulo{margin-top:16px;font-family:var(--f-titulo);text-transform:uppercase;font-size:clamp(19px,2vw,23px);letter-spacing:.06em;line-height:1.3}
.linea-texto{margin-top:12px;max-width:52ch}
.linea-cuerpo .botones{margin-top:auto;padding-top:24px}
/* el equipo que viene: velado, sin forma de ningún equipo (DECISIONES §7: no se inventa nada) */
.linea-proximo article{background:var(--grafito);color:var(--marfil);border:1px dashed rgba(201,203,207,.3);--tx:var(--marfil);--tx2:var(--piedra-oscuro);--acento:var(--plata)}
.linea-velo{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;background:radial-gradient(60% 70% at 50% 60%,#2e2e33 0%,#1a1a1d 55%,#121214 100%)}
.linea-velo::before{content:"";position:absolute;inset:-20%;background:repeating-linear-gradient(100deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px);filter:blur(1px)}
.linea-velo-num{position:relative;font-family:var(--f-titulo);font-size:clamp(88px,12vw,150px);line-height:1;letter-spacing:.06em;color:transparent;-webkit-text-stroke:1px rgba(201,203,207,.45)}
.linea-velo .filete-rombo{position:absolute;left:50%;bottom:16%;width:150px;margin:0;transform:translateX(-50%)}
.linea-nombre-texto{margin-top:18px;font-family:var(--f-titulo);font-weight:400;text-transform:uppercase;font-size:clamp(19px,2vw,23px);letter-spacing:.08em}
@media (min-width:768px){.linea-lista{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
/* 320 px (pedido de la corrida 4): el <select> de perfil medía su opción más larga y empujaba la columna del
   formulario a 327 px. Las columnas pueden achicarse y el select no pasa del ancho de su campo. */
.cot-rejilla>*,.form .dos>*,.campo,.linea-item{min-width:0}
.campo select{max-width:100%}
.form{grid-template-columns:minmax(0,1fr)}
.campo input[type=file]{width:100%}
@media (min-width:1000px){.linea-lista{grid-template-columns:1.25fr 1fr}}

@media (prefers-reduced-motion:no-preference){
  .cab-logo .brillo{animation:brillo 1.9s cubic-bezier(.4,0,.2,1) .6s both}
  .cab-logo:hover .brillo,.cab-logo:focus-visible .brillo,.pie-logo:hover .brillo,.pie-logo.en-vista .brillo{animation:brillo-b 1.6s cubic-bezier(.4,0,.2,1) both}
  .encender-aro::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(223,225,229,.7);animation:latido 2.8s ease-out infinite}
  .inst-led{animation:led 2.4s ease-in-out infinite}
  .hz-mov{animation:ola var(--dur) linear infinite}
  .osc-barra{animation:barrido 2.6s linear infinite}
  .punto-rombo::after{animation:onda-punto 2.6s ease-out infinite}
  /* corrida 4 · el filete se dibuja, el rombo se enciende y enciende el logo; el haz barre el escenario; la cinta corre */
  .heroe-logo img{animation:logo-enciende 1.6s cubic-bezier(.6,0,.2,1) .2s both}
  .heroe-logo .brillo{animation:brillo 2.2s cubic-bezier(.4,0,.2,1) 1.7s both}
  .heroe-haz{animation:haz 9s cubic-bezier(.45,0,.25,1) 2.4s infinite}
  .cinta-pista{animation:cinta 46s linear infinite}
  .cinta:hover .cinta-pista,.cinta:focus-within .cinta-pista,.cinta.pausada .cinta-pista{animation-play-state:paused}
  .linea-proximo .linea-velo::before{animation:velo 14s linear infinite}
}
@media (prefers-reduced-motion:reduce){
  .cinta-pausa{display:none}
  .cinta-pista{width:auto}
  .cinta-lista{flex-wrap:wrap;justify-content:center;flex:1}
  .cinta-lista[aria-hidden]{display:none}
  .sonido{display:none}
  .osc-vivo{mask:none}
}
@keyframes fr-trazo{from{stroke-dashoffset:110}to{stroke-dashoffset:0}}
@keyframes fr-joya{from{transform:scale(0) rotate(90deg);opacity:0}to{transform:none;opacity:1}}
@keyframes brillo{from{background-position:150% 0}to{background-position:-50% 0}}
@keyframes brillo-b{from{background-position:150% 0}to{background-position:-50% 0}}
@keyframes latido{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.55);opacity:0}}
@keyframes led{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes ola{to{transform:translateX(var(--p))}}
@keyframes barrido{from{transform:translateX(0)}to{transform:translateX(1020px)}}
@keyframes logo-enciende{0%{clip-path:inset(0 50% 0 50%);filter:brightness(2.2)}55%{clip-path:inset(0 0 0 0);filter:brightness(1.5)}100%{clip-path:inset(0 0 0 0);filter:none}}
@keyframes haz{0%{background-position:130% 0;opacity:0}12%{opacity:1}40%{background-position:-30% 0;opacity:1}46%,100%{background-position:-30% 0;opacity:0}}
@keyframes cinta{to{transform:translate3d(-50%,0,0)}}
@keyframes velo{to{transform:translate3d(14px,0,0)}}
@keyframes onda-punto{from{transform:scale(.6);opacity:.9}to{transform:scale(1.7);opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ── Lane Q corrida 3 (AXIS, 6-oct) ─────────────────────────────────────────────────────────── */
/* Q3-01 · W17: un punto del 3D que queda detrás del equipo se apaga, pero si recibe el foco del teclado se ve */
.punto:focus-visible{opacity:1 !important;visibility:visible}
/* Q3-02 · W8bis: a menos de 375 px (Android de 360) el conmutador de sonido sale de la cabecera para que entre «Get a quote».
   Va al final y con más especificidad: antes lo anulaba `.sonido{display:inline-flex}` que venía después. */
@media (max-width:359px){.cabecera .envoltura{gap:6px}.cab-acciones{gap:4px}.cabecera .cab-acciones .boton{padding:10px 8px;letter-spacing:.04em}}

/* Q4-02 · W8bis: «ONICOMICOSIS» / «ODONTOLOGÍA» no entran en 2 columnas por debajo de 375 px */
@media (max-width:374px){.apl-lista{grid-template-columns:1fr}.apl-lista li{overflow-wrap:anywhere}}

/* Q5-01 · el botón nativo «Elegir archivo» desbordaba a 320 px */
.form input[type=file]{max-width:100%}