/* ═══════════════════════════════════════════════════════════════
   ESTILOS · cpastudio.es
   ═══════════════════════════════════════════════════════════════

   AQUÍ VA TODO EL DISEÑO: colores, tipografías, tamaños, posiciones
   y el comportamiento en móvil. Si quieres cambiar cómo SE VE algo,
   es aquí. Si quieres cambiar lo que DICE, es en index.html.

   ATAJOS ÚTILES:
   · Colores de la web ................. busca ":root" (justo abajo)
   · Tamaño de los huecos de imagen .... busca ".hueco" y ".proceso"
   · Alto del comparador ............... busca ".comparador"
   · Ancho del rail lateral ............ busca ".shell"
   · Comportamiento en móvil ........... busca "@media" (al final)
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   1. VARIABLES
   Los colores y fuentes se declaran UNA vez aquí con un nombre.
   Luego se usan como var(--nombre). Para cambiar un color en toda
   la web, se cambia solo aquí.
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   0. FUENTES (alojadas en la carpeta fonts/)
   @font-face le dice al navegador: "cuando pida la fuente X con este
   peso y estilo, descarga este archivo". Fraunces es una fuente
   VARIABLE: un solo archivo contiene todos los pesos (100-900) y el
   eje de tamaño óptico, por eso font-weight lleva un rango.
   font-display:swap muestra el texto al momento con una fuente del
   sistema y la cambia cuando termina de descargar.
   unicode-range limita cada archivo a los caracteres latinos (incluye
   tildes, ñ, ¿ y ¡): el navegador solo lo descarga si hacen falta.
   Licencia de las tres fuentes: SIL Open Font License 1.1.
   ═══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/fraunces-latin-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;
  src:url('fonts/fraunces-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}

:root{
  --hueso:#F4F3F0;        /* fondo claro principal */
  --hueso2:#FBFAF8;       /* tarjetas claras */
  --hueso3:#EDEBE6;       /* rail lateral y franjas */
  --tinta:#1F1E19;        /* texto y fondos oscuros */
  --tinta2:#2A2924;
  --tinta3:#252420;       /* recuadro terminal */
  --gris-txt:#57564F;     /* texto secundario */
  --gris-sub:#6A6961;
  --gris-ten:#6A6963;     /* etiquetas pequeñas sobre fondo claro (contraste ≥4,5:1) */
  --gris-osc:#8A8880;     /* etiquetas pequeñas sobre fondo oscuro */
  --gris-deco:#8A8880;    /* solo para texto grande decorativo ("del color") */     /* etiquetas discretas */
  --borde:#E4E2DA;        /* líneas sobre claro */
  --borde-rail:#DDDBD2;
  --borde-osc:#3A3833;    /* líneas sobre oscuro */
  --cobre:#B05C3B;        /* ACENTO: titulares, cifras grandes y detalles */
  --cobre-txt:#A05436;    /* cobre para TEXTO PEQUEÑO sobre claro (contraste ≥4,5:1) */        /* ACENTO principal */
  --cobre-cl:#C98A5E;
  --cobre-ar:#E0A878;     /* acento sobre fondo oscuro */

  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* Padding horizontal que se adapta solo al ancho de pantalla.
     clamp(mínimo, valor fluido, máximo) */
  --pad-x:clamp(22px,4vw,48px);
}

/* Reset: quitamos márgenes por defecto del navegador */
*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}   /* desplazamiento suave al pulsar el menú */

body{
  background:var(--hueso);
  color:var(--tinta);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}

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

/* ═══════════════════════════════════════════════════════════════
   2. ESTRUCTURA GENERAL
   La página es una rejilla de 2 columnas: el rail fijo (izquierda)
   y el contenido (derecha). Los bloques 03, 04 y 05 salen de esa
   rejilla y ocupan el ancho completo.
   ═══════════════════════════════════════════════════════════════ */
.shell{
  display:grid;
  grid-template-columns:392px 1fr;   /* rail de 392px + resto */
  align-items:start;
}
.col-der{min-width:0}   /* evita que el contenido desborde la columna */

/* Bloques con el padding estándar */
.pad{padding:clamp(44px,6vw,64px) var(--pad-x)}
.sec{border-top:1px solid var(--borde);scroll-margin-top:60px}

/* ═══════════════════════════════════════════════════════════════
   3. RAIL LATERAL (el "instrumento")
   position:sticky hace que se quede fijo mientras se hace scroll.
   ═══════════════════════════════════════════════════════════════ */
.rail{
  position:sticky;
  top:0;
  height:100vh;                 /* 100% del alto de la ventana */
  background:var(--hueso3);
  border-right:1px solid var(--borde);
  padding:24px 26px;
  display:flex;
  flex-direction:column;
  gap:20px;
  overflow-y:auto;
  scrollbar-width:thin;
}
.rail-cab{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:22px;
}
.marca{font:500 12px var(--mono);letter-spacing:.22em;color:var(--tinta)}
.marca-sub{font:400 10px var(--mono);color:var(--gris-ten)}

/* El instrumento agrupa carta + lectura, en el rail o en móvil */
.instrumento{display:flex;flex-direction:column;gap:20px}
/* Sección móvil del instrumento: oculta en escritorio */
.instrumento-movil{display:none}

/* --- La carta ColorChecker: 24 parches en rejilla de 6 columnas --- */
.checker{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:5px;
  max-width:420px;
}
.checker span{
  aspect-ratio:1;               /* cuadrados perfectos */
  /* filete interior sutil: sin él, el parche blanco se funde con el fondo */
  box-shadow:inset 0 0 0 1px rgba(31,30,25,.10);
  cursor:crosshair;
  transition:transform .18s,box-shadow .18s;
}
.checker span:hover{
  transform:scale(1.22);
  box-shadow:0 0 0 2px var(--hueso),0 6px 14px rgba(0,0,0,.28);
}
/* El parche seleccionado se marca con un borde */
.checker span[aria-pressed="true"]{
  box-shadow:inset 0 0 0 1px rgba(31,30,25,.10),0 0 0 2px var(--tinta);
}
.checker-pie{
  display:flex;justify-content:space-between;
  font:400 10px var(--mono);color:var(--gris-ten);
  margin-top:10px;max-width:420px;
}
.checker-pie .cta{color:var(--cobre-txt)}

/* --- Panel de lectura en vivo --- */
.lectura{max-width:420px}
.lectura-cab{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:12px;
}
.lectura-cab .t{font:500 10px var(--mono);letter-spacing:.2em;color:var(--gris-ten)}
.lectura-cab .s{font:400 9.5px var(--mono);color:var(--gris-ten)}
/* Dos cuadros: referencia y muestra derivada */
.muestras{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:#D9D7CD;height:84px;margin-bottom:10px;
}
.muestras div{transition:background .25s}
.lab{
  display:flex;justify-content:space-between;
  font:400 11px var(--mono);color:var(--gris-txt);
}
/* Deslizador de ΔE */
.slider{width:100%;margin:14px 0 6px;accent-color:var(--tinta)}
.veredicto{
  display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid #D9D7CD;padding-top:10px;
}
.veredicto .de{font:400 28px/1 var(--mono)}
.veredicto .txt{font:500 9.5px var(--mono);letter-spacing:.14em}
.tolerancia{
  display:flex;justify-content:space-between;
  font:400 9.5px var(--mono);color:var(--gris-ten);margin-top:6px;
}
/* Barra de grises del rail */
.barra{display:flex;gap:2px;height:8px;margin-top:14px}
.barra span{flex:1}

/* --- Navegación del rail --- */
.railmenu{border-top:1px solid var(--borde-rail);padding-top:14px;max-width:420px}
.railmenu .t{font:500 10px var(--mono);letter-spacing:.2em;color:var(--gris-ten);margin-bottom:8px}
.railmenu .lista{display:flex;flex-direction:column;border-top:1px solid var(--borde-rail)}
.railmenu a{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 10px 10px 0;
  border-bottom:1px solid var(--borde-rail);
  font:500 11.5px var(--mono);letter-spacing:.1em;
  transition:padding .18s,background .18s;
}
.railmenu a:hover{background:#E3E0D8;padding-left:10px}
.railmenu a .n{color:var(--cobre-txt)}
.railmenu a .fl{color:var(--gris-ten)}
.railmenu a.destacado{
  padding:11px 12px;margin-top:10px;
  background:var(--tinta);color:var(--hueso);
  border-bottom:none;
  transition:background .18s;
}
.railmenu a.destacado:hover{background:var(--cobre);padding-left:12px}

/* ═══════════════════════════════════════════════════════════════
   4. BARRA MÓVIL
   Oculta por defecto; solo aparece en pantallas estrechas.
   ═══════════════════════════════════════════════════════════════ */
.mobbar{
  display:none;
  position:sticky;top:0;z-index:40;
  align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;
  background:rgba(244,243,240,.82);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--borde);
  overflow-x:auto;
}
.mobbar .m{font:500 11.5px var(--mono);letter-spacing:.2em;white-space:nowrap}
.mobbar .links{display:flex;gap:14px;white-space:nowrap}
.mobbar .links a{font:500 10.5px var(--mono);letter-spacing:.1em;color:var(--gris-txt)}
.mobbar .links a:last-child{color:var(--cobre-txt)}

/* ═══════════════════════════════════════════════════════════════
   5. HERO
   ═══════════════════════════════════════════════════════════════ */
.hero{padding:clamp(56px,9vw,96px) var(--pad-x) clamp(48px,7vw,80px)}
/* Firma: nombre + rol */
.firma{display:flex;flex-direction:column;gap:9px;margin-bottom:30px}
.firma .nombre{
  font:500 clamp(15px,1.3vw,17px)/1.2 var(--sans);
  color:var(--tinta);letter-spacing:.01em;
}
.hero .rol{
  font:500 10.5px var(--mono);letter-spacing:.24em;color:var(--cobre-txt);
}
/*
  El titular es UN solo <h1> con tres líneas dentro.
  Antes eran tres <h1> separados: visualmente igual, pero un buscador
  espera un único h1 por página que resuma de qué va. Cada línea es
  ahora un <span> convertido en bloque.
*/
.hero-titulo{
  font-family:var(--serif);
  font-size:clamp(46px,8.5vw,104px);
  line-height:.88;
  letter-spacing:-.045em;
  font-weight:400;
  margin:0;
}
.hero-titulo span{display:block}
.hero-titulo .l1{margin-bottom:-6px}
.hero-titulo .l2{font-weight:300;color:var(--gris-deco);margin-bottom:-6px}
.hero-titulo .l3{font-style:italic;color:var(--cobre)}
.hero p{
  font-size:clamp(15px,1.4vw,17px);line-height:1.65;
  color:var(--gris-txt);max-width:520px;margin-top:34px;
}
/* Accesos directos de contacto bajo el texto del hero */
.hero-contacto{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hero-contacto a{
  font:500 12.5px var(--mono);letter-spacing:.04em;
  padding:12px 16px;border:1px solid var(--tinta);
  transition:background .2s,border-color .2s,color .2s;
}
.hero-contacto .principal{background:var(--tinta);color:var(--hueso)}
.hero-contacto .principal:hover{background:var(--cobre);border-color:var(--cobre)}
.hero-contacto .secundario{color:var(--tinta)}
.hero-contacto .secundario:hover{background:var(--hueso3)}
.hero .scroll{font:400 11px var(--mono);color:var(--gris-ten);margin-top:38px}

/* ═══════════════════════════════════════════════════════════════
   6. PERFIL (01)
   ═══════════════════════════════════════════════════════════════ */
.eyebrow{font:500 10.5px var(--mono);letter-spacing:.2em;color:var(--cobre-txt);margin-bottom:24px}
.frase-grande{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(26px,3.6vw,40px);line-height:1.22;
  margin-bottom:26px;max-width:640px;
}
.dos-col{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,3vw,36px);max-width:700px;
}
.dos-col p{font-size:14.5px;line-height:1.75;color:var(--gris-txt)}
.cifras{display:flex;margin-top:42px;border-top:1px solid var(--borde)}
.cifras > div{flex:1;padding:20px 0}   /* ">" = solo hijos directos */
.cifras .n{
  font:400 clamp(32px,4vw,42px)/1 var(--mono);letter-spacing:-.03em;
}
.cifras .n.acento{color:var(--cobre)}
.cifras .l{font-size:11.5px;color:var(--gris-ten);margin-top:6px}

/* ═══════════════════════════════════════════════════════════════
   7. ESPECIALIZACIÓN (02)
   ═══════════════════════════════════════════════════════════════ */
.h-seccion{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(32px,4.6vw,54px);line-height:1.02;
  letter-spacing:-.03em;margin-bottom:40px;max-width:600px;
}
.esp-fila{
  display:grid;grid-template-columns:52px 1fr 1.2fr;
  gap:20px;align-items:start;
  border-top:1px solid var(--borde);
  padding:24px 0;
  transition:background .2s;
}
.esp-fila:hover{background:var(--hueso3)}
.esp-marca{display:flex;flex-direction:column;gap:7px;padding-top:4px}
.esp-marca .cuadro{width:16px;height:16px;background:var(--cobre)}
/* Cada fila tiene un cuadro distinto: sirve para distinguirlas de un vistazo */
.esp-marca .cuadro.medio{background:linear-gradient(90deg,var(--cobre) 50%,var(--cobre-ar) 50%)}
.esp-marca .cuadro.claro{background:var(--cobre-ar)}
.esp-marca .cuadro.hueco{background:transparent;border:2px solid var(--cobre)}
.esp-marca .cod{font:500 9.5px var(--mono);letter-spacing:.12em;color:var(--gris-ten)}
.esp-fila h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,2.2vw,26px);line-height:1.15;
}
.esp-fila p{font-size:13.5px;line-height:1.65;color:var(--gris-sub)}

/* Barra de herramientas */
.herramientas{
  display:flex;flex-wrap:wrap;align-items:baseline;
  border-top:1px solid var(--borde);margin-top:8px;padding-top:20px;
}
.herramientas .et{
  font:500 10px var(--mono);letter-spacing:.18em;color:var(--gris-ten);
  padding:6px 0;margin-right:12px;
}
.herramientas span.h{
  font:400 12px var(--mono);color:#4A4842;
  border-bottom:1px solid #C9C7BE;
  padding:6px 0;margin-right:14px;
}

/* ═══════════════════════════════════════════════════════════════
   8. FRANJA DE NORMATIVA
   ═══════════════════════════════════════════════════════════════ */
.normativa{
  border-top:1px solid var(--borde);
  padding:clamp(38px,5vw,56px) var(--pad-x);
  background:var(--hueso3);
}
.normativa p{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(26px,3.8vw,42px);line-height:1.16;
  margin-bottom:20px;max-width:620px;
}
.normativa .isos{
  display:flex;gap:clamp(14px,3vw,34px);flex-wrap:wrap;
  font:400 12px var(--mono);color:var(--gris-txt);
}
.normativa .isos i{font-style:normal;color:var(--gris-ten)}
.normativa .isos .ac{color:var(--cobre-txt)}

/* ═══════════════════════════════════════════════════════════════
   9. I+D + CÓDIGO (03) — bloque estrella, ancho completo
   ═══════════════════════════════════════════════════════════════ */
.bloque-id{
  background:var(--tinta);
  position:relative;overflow:hidden;
  scroll-margin-top:60px;
}
/* Halo de luz cobre en la esquina superior izquierda */
.bloque-id::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(760px 420px at 20% 0%,rgba(176,92,59,.28),transparent 72%);
  pointer-events:none;
}
.id-inner{position:relative;padding:clamp(52px,7vw,76px) var(--pad-x) clamp(48px,6vw,66px)}
.id-cab{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;margin-bottom:24px;
}
.id-cab .a{font:500 10.5px var(--mono);letter-spacing:.22em;color:var(--cobre-ar)}
.id-cab .b{font:400 10.5px var(--mono);color:var(--gris-osc)}
.id-inner h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(38px,6.4vw,82px);line-height:.96;
  letter-spacing:-.04em;color:var(--hueso);
  margin-bottom:22px;max-width:900px;
}
.id-intro{
  font-size:clamp(15px,1.4vw,16px);line-height:1.7;
  color:#B4B2A8;max-width:600px;
  margin-bottom:clamp(40px,5vw,60px);
}
/* Las dos tarjetas con corte diagonal */
.diag{display:grid;grid-template-columns:1fr 1fr;margin-bottom:clamp(20px,3vw,32px)}
.diag>div{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
}
.diag .izq{
  border-radius:20px 0 0 20px;
  padding:34px 88px 34px 34px;
  clip-path:polygon(0 0,100% 0,calc(100% - 64px) 100%,0 100%);
}
.diag .der{
  background:rgba(255,255,255,.08);
  border-radius:0 20px 20px 0;
  padding:34px 34px 34px 88px;
  clip-path:polygon(64px 0,100% 0,100% 100%,0 100%);
}
.diag .et{font:500 12px var(--mono);letter-spacing:.18em;color:var(--cobre-ar);margin-bottom:24px}
.diag h3{font:400 24px var(--serif);color:var(--hueso);margin-bottom:12px}
.diag p{font-size:13.5px;line-height:1.7;color:#A8A69C}

/* --- Terminal --- */
.terminal{background:var(--tinta3);border:1px solid var(--borde-osc);border-radius:16px;overflow:hidden}
.terminal-cab{display:flex;align-items:center;padding:18px 26px;border-bottom:1px solid var(--borde-osc)}
.terminal-cab .linea{
  overflow:hidden;white-space:nowrap;
  font:500 13px var(--mono);color:var(--cobre-cl);
  animation:typ25 9s steps(25,end) infinite;
}
.cursor{font:500 13px var(--mono);color:var(--cobre-ar);animation:blink 1s steps(1,end) infinite}
/* auto-fit + minmax: caben tantas columnas de 240px como permita el ancho.
   Si añades un cuarto módulo, se recoloca solo. */
.term-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.term-grid>div{padding:26px;border-right:1px solid var(--borde-osc)}
.term-grid>div:last-child{border-right:none}
.modulo{display:flex}
.modulo .txt{
  overflow:hidden;white-space:nowrap;
  font:400 13px var(--mono);color:var(--cobre-cl);
}
.term-grid h4{font:500 14.5px var(--sans);color:var(--hueso);margin:10px 0 4px}
.term-grid p{font-size:12.5px;line-height:1.6;color:var(--gris-osc)}
/*
  ANIMACIONES DE ESCRITURA
  El texto se "escribe" animando su anchura en unidades ch
  (1ch = el ancho de un carácter en fuente monoespaciada).
  steps(n) hace que avance de carácter en carácter, no de forma continua.

  El ciclo tiene cuatro fases:
    escribe → mantiene → borra hacia atrás → espera y vuelve a empezar
  Cada fase lleva su propio animation-timing-function, así el borrado
  también va carácter a carácter.
*/
@keyframes typ25{
  0%  {width:0;    animation-timing-function:steps(25,end)}
  26% {width:25ch; animation-timing-function:steps(1,end)}
  68% {width:25ch; animation-timing-function:steps(25,end)}
  90% {width:0;    animation-timing-function:steps(1,end)}
  100%{width:0}
}
@keyframes typ15{
  0%  {width:0;    animation-timing-function:steps(15,end)}
  20% {width:15ch; animation-timing-function:steps(1,end)}
  68% {width:15ch; animation-timing-function:steps(15,end)}
  86% {width:0;    animation-timing-function:steps(1,end)}
  100%{width:0}
}
@keyframes typ17{
  0%  {width:0;    animation-timing-function:steps(17,end)}
  22% {width:17ch; animation-timing-function:steps(1,end)}
  68% {width:17ch; animation-timing-function:steps(17,end)}
  88% {width:0;    animation-timing-function:steps(1,end)}
  100%{width:0}
}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.m1{animation:typ15 9s steps(15,end) infinite;animation-delay:.9s}
.m2{animation:typ17 9s steps(17,end) infinite;animation-delay:1.8s}
.m3{animation:typ17 9s steps(17,end) infinite;animation-delay:2.7s}

/* --- Método: esquema + texto --- */
.metodo{
  display:grid;grid-template-columns:1fr 1.4fr;
  gap:clamp(20px,3vw,40px);
  margin-top:clamp(48px,6vw,72px);
  align-items:start;
}
.metodo .rot{font:500 13px var(--mono);letter-spacing:.18em;color:var(--cobre-cl);padding-top:10px;margin-bottom:22px}
.metodo svg{width:100%;max-width:340px;display:block;margin:0 auto;font-family:var(--mono)}
.metodo .frase{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(26px,3.4vw,40px);line-height:1.2;
  color:var(--hueso);margin-bottom:18px;
}
.metodo .cuerpo{font-size:14px;line-height:1.75;color:#A8A69C;max-width:640px}

/* ═══════════════════════════════════════════════════════════════
   10. TRABAJO (04)
   ═══════════════════════════════════════════════════════════════ */
.trabajo-cab{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;
  padding:clamp(44px,6vw,64px) var(--pad-x) 26px;
}
.trabajo-cab h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(32px,4.6vw,54px);line-height:1.02;letter-spacing:-.03em;
}
.trabajo-cab .n{font:500 10.5px var(--mono);letter-spacing:.2em;color:var(--cobre-txt)}

/* --- Comparador antes/después --- */
.comparador{
  margin:0;
  position:relative;
  height:clamp(240px,42vw,460px);
  user-select:none;
  border-top:1px solid var(--borde);
  border-bottom:1px solid var(--borde);
  overflow:hidden;
}
.capa{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--hueso3);
}
.capa.despues{background:#E6E3DC}
/* La carta: 6 × 4 parches con marco oscuro, como una ColorChecker real */
.carta{
  display:grid;grid-template-columns:repeat(6,1fr);gap:6px;
  height:78%;          /* alto: el 78% de la caja */
  aspect-ratio:3/2;    /* ancho: 1,5 veces el alto, como la carta real */
  max-width:88%;
  padding:12px;background:#1A1915;border-radius:6px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45);
}
.carta i{display:block;border-radius:2px}
/* Etiquetas fijas en las esquinas superiores de cada capa */
.etq{
  position:absolute;top:16px;
  font:500 10.5px var(--mono);letter-spacing:.16em;color:var(--tinta);
  background:rgba(251,250,248,.86);
  padding:8px 11px;border-radius:4px;
  display:flex;flex-direction:column;gap:3px;
}
.etq b{font-weight:400;letter-spacing:.02em;color:var(--gris-txt)}
.etq-izq{left:16px}
.etq-der{right:16px;text-align:right}
.etq-der b{color:var(--cobre-txt)}
.pie-comparador{
  font:400 11px/1.6 var(--mono);color:var(--gris-ten);
  padding:14px var(--pad-x) 0;max-width:760px;
}
.capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.divisor{position:absolute;top:0;bottom:0;width:2px;background:var(--hueso)}
.tirador{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  background:rgba(244,243,240,.45);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;
  font:500 12px var(--mono);color:var(--tinta);
  pointer-events:none;   /* el que recibe el ratón es el slider de debajo */
}
/* Deslizador invisible que cubre toda la caja */
.comparador input[type=range]{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:ew-resize;
}

/* --- Tira de proceso: tres cuadrados --- */
.proceso{display:grid;grid-template-columns:1fr 1fr 1fr}
/* Sin esto, display:grid anularía el atributo hidden del HTML */
.proceso[hidden]{display:none}
.proceso>div{
  aspect-ratio:1/1;
  background:repeating-linear-gradient(135deg,#CFCDC3 0 12px,#D8D6CC 12px 24px);
  border-right:1px solid var(--borde);
  display:flex;align-items:flex-end;padding:18px;
  position:relative;overflow:hidden;
}
.proceso>div:last-child{border-right:none}
.proceso span{font:400 11px var(--mono);color:var(--gris-txt);position:relative;z-index:1}
.proceso img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ═══════════════════════════════════════════════════════════════
   11. CONTACTO (05)
   ═══════════════════════════════════════════════════════════════ */
.contacto{
  background:var(--tinta);
  padding:clamp(56px,7vw,80px) var(--pad-x) 44px;
  scroll-margin-top:60px;
}
.contacto h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(44px,7.6vw,96px);line-height:.92;
  letter-spacing:-.045em;color:var(--hueso);margin-bottom:24px;
}
.contacto>p{
  font-size:clamp(15px,1.4vw,16px);line-height:1.75;
  color:#B4B2A8;max-width:540px;margin-bottom:40px;
}
.vias{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  border-top:1px solid var(--borde-osc);
  border-bottom:1px solid var(--borde-osc);
}
.vias>*{padding:26px 0;border-right:1px solid var(--borde-osc);transition:background .2s}
.vias>*+*{padding-left:26px}
.vias>*:last-child{border-right:none}
.vias a:hover{background:rgba(224,168,120,.08)}
.vias .et{font:500 9.5px var(--mono);letter-spacing:.18em;color:var(--gris-osc);margin-bottom:8px}
.vias .val{font-size:clamp(15px,1.5vw,17px);color:var(--hueso)}
/* Banda de grises que cierra la página (misma firma que el rail) */
.barra-cierre{height:10px;margin-top:36px}
.pie{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;margin-top:24px;
}
.pie .m{font:500 11px var(--mono);letter-spacing:.14em;color:var(--gris-osc)}
.pie .c{font:400 11px var(--mono);color:var(--gris-osc)}

/* ═══════════════════════════════════════════════════════════════
   11b. PREGUNTAS (05)
   <details> y <summary> son etiquetas nativas de HTML: el navegador
   ya sabe abrir y cerrar el bloque sin JavaScript.
   ═══════════════════════════════════════════════════════════════ */
.preguntas{border-top:1px solid var(--borde);scroll-margin-top:60px}
.preguntas-cab{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;
  padding:clamp(44px,6vw,64px) var(--pad-x) 26px;
}
.preguntas-cab h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(32px,4.6vw,54px);line-height:1.02;letter-spacing:-.03em;
}
.preguntas-cab .n{font:500 10.5px var(--mono);letter-spacing:.2em;color:var(--cobre-txt)}
.faq{padding:0 var(--pad-x) clamp(48px,6vw,72px);max-width:1080px}
.faq-item{border-top:1px solid var(--borde)}
.faq-item:last-child{border-bottom:1px solid var(--borde)}
.faq-item summary{
  display:grid;grid-template-columns:44px 1fr 24px;gap:14px;align-items:baseline;
  padding:22px 0;cursor:pointer;
  list-style:none;              /* quita el triángulo por defecto */
  transition:background .2s,padding .2s;
}
.faq-item summary::-webkit-details-marker{display:none}   /* ídem en Safari */
.faq-item summary:hover{background:var(--hueso3);padding-left:10px;padding-right:10px}
.faq-item summary:focus-visible{outline:2px solid var(--cobre);outline-offset:2px}
.faq-n{font:500 11px var(--mono);letter-spacing:.12em;color:var(--cobre-txt)}
.faq-q{font-family:var(--serif);font-weight:400;font-size:clamp(19px,2vw,24px);line-height:1.25}
.faq-mas{font:400 20px/1 var(--mono);color:var(--gris-ten);text-align:right;transition:transform .25s}
.faq-item[open] .faq-mas{transform:rotate(45deg)}   /* el + se convierte en × */
.faq-item p{
  padding:0 0 26px 58px;max-width:760px;
  font-size:14.5px;line-height:1.75;color:var(--gris-txt);
}

/* ═══════════════════════════════════════════════════════════════
   12. REVELADO AL HACER SCROLL
   Los elementos con .rev empiezan bajados y transparentes; cuando
   entran en pantalla, el JavaScript les añade la clase .visible.
   ═══════════════════════════════════════════════════════════════ */
.js .rev{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);
}
.js .rev.visible{opacity:1;transform:none}

/* Si el usuario ha pedido en su sistema "menos movimiento",
   desactivamos animaciones. Es una cuestión de accesibilidad. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rev{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════════════════════════
   12b. RAIL EN PANTALLAS BAJAS
   max-height mira el ALTO de la ventana. En portátiles de ~768px
   el rail no cabía y el botón de contacto quedaba cortado.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:901px) and (max-height:960px){
  .rail{padding:16px 22px;gap:12px}
  .rail-cab{margin-bottom:12px}
  .instrumento{gap:12px}
  .checker{gap:4px}
  .checker-pie{margin-top:6px}
  .muestras{height:54px}
  .veredicto .de{font-size:22px}
  .slider{margin:8px 0 4px}
  .barra{margin-top:8px}
  .railmenu{padding-top:8px}
  .railmenu a{padding:7px 10px 7px 0}
  .railmenu a.destacado{margin-top:6px;padding:9px 12px}
}
/* Segundo escalón: pantallas muy bajas (portátiles de 720-800px) */
@media (min-width:901px) and (max-height:800px){
  .railmenu .t{display:none}        /* el rótulo "NAVEGACIÓN" sobra aquí */
  .rail .barra{display:none}        /* la barra ya aparece en el pie de la web */
  .muestras{height:40px;margin-bottom:6px}
  .lectura-cab{margin-bottom:6px}
  .rail{gap:10px}
}

/* ═══════════════════════════════════════════════════════════════
   13. RESPONSIVE (móvil y tablet)
   Por debajo de 900px: se oculta el rail, aparece la barra móvil
   y las rejillas pasan a una sola columna.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .mobbar{display:flex}
  .rail{display:none}
  .shell{grid-template-columns:1fr}
  .dos-col,.diag,.term-grid,.metodo,.vias,.proceso{grid-template-columns:1fr}
  .diag .izq,.diag .der{clip-path:none;border-radius:16px;padding:28px}
  .diag .der{margin-top:12px}
  .esp-fila{grid-template-columns:44px 1fr}
  .esp-fila p{grid-column:1/-1}
  .term-grid>div{border-right:none;border-bottom:1px solid var(--borde-osc)}
  .term-grid>div:last-child{border-bottom:none}
  .vias>*{border-right:none;border-bottom:1px solid var(--borde-osc)}
  .vias>*+*{padding-left:0}
  .vias>*:last-child{border-bottom:none}
  .proceso>div{border-right:none;border-bottom:1px solid var(--borde)}
  .cifras{flex-wrap:wrap}
  .cifras > div{min-width:33%}
  /* El instrumento aparece tras el titular */
  .instrumento-movil{
    display:block;
    padding:0 var(--pad-x) 44px;
  }
  .instrumento-movil .checker,
  .instrumento-movil .checker-pie,
  .instrumento-movil .lectura{max-width:none}
  .instrumento-movil .checker span:hover{transform:none;box-shadow:none}
  /* Comparador y preguntas más compactos */
  .etq{top:10px;font-size:9.5px;padding:6px 8px}
  .etq-izq{left:10px}
  .etq-der{right:10px}
  .carta{padding:7px;gap:3px;height:66%;margin-top:28px}
  .faq-item summary{grid-template-columns:34px 1fr 20px;gap:10px}
  .faq-item p{padding-left:0}
}