/* ==========================================================================
   Camlab — hoja de estilo del sitio · versión 8, «Mostrador» en la paleta C
   «Ingeniería de precisión»
   Es la v7 (la v6 pasada a Noche y cian) llevada a la paleta C: sitio claro,
   fondo piedra, lo que se toca en blanco, texto grafito y naranja resina. La
   maquetación, los textos y los scripts son los de la v7. Lo que cambió está
   en CLAUDE.md, «Sexto laboratorio · sitio-v8».

   Reglas que siguen de la v4 y la v6:
   1. Las cifras son lo más grande de la página, más que los títulos.
   2. Dos esquinas: 4 px en lo que se aprieta y 8 px en lo que contiene. Sin
      sombras, salvo las dos capas que flotan de verdad (el desplegable de
      dientes y el visor).
   3. Un solo color que actúa, el naranja resina. Sin degradados.
   4. Nada se mueve solo. Solo estados: foco, hover y abierto/cerrado (dos
      excepciones pedidas por Francisco: el despiece del hero y la franja de logos).
   5. Nada depende solo del color y los enlaces se subrayan siempre.
   6. Contraste medido con la fórmula WCAG: texto ≥ 4,5:1; bordes de controles
      ≥ 3:1 (tabla en CLAUDE.md).

   Orden del archivo: tokens · base · tipografía · secciones · cifras ·
   botones · cabecera · pie · hero · casos y visor · pasos · listas ·
   confianza · cierre · interiores · tabla · cotizador · preguntas ·
   recorrido · formulario · avisos · movimiento · adaptación.
   ========================================================================== */

:root{
  color-scheme: light;

  /* Paleta C «Ingeniería de precisión». Los cinco tonos de la paleta llevan el nombre de lo que son;
     los cuatro marcados «derivado» son tonos calculados para pasar AA (Francisco no los ha visto).
     Más abajo, los papeles que cumple cada uno: --tinta, --tinta-2, --tinta-3, --fondo, --superficie… */
  --piedra:#ECEBE7;              /* el fondo de la página */
  --blanco:#FFFFFF;              /* lo que se toca y lo que contiene: campos, tarjetas, cabecera, menús, bandas */
  --grafito:#1F2A33;             /* la tinta: títulos y cifras · 12,2:1 sobre la piedra, 14,6:1 sobre el blanco */
  --gris:#58666F;                /* el secundario: contorno de los controles, bajada del logo · 5,0:1 y 5,9:1 */
  --acento:#C2410C;              /* el naranja resina de la paleta: rellenos (el botón principal, con texto blanco: 5,2:1). Como texto sobre la piedra da 4,3:1 y no llega a 4,5 */

  --acento-hover:#A8360A;        /* el botón principal bajo el mouse: más oscuro, no más claro. Blanco sobre él, 6,6:1 */
  --acento-texto:#B03809;        /* DERIVADO · el naranja que actúa, en versión que llega a AA como texto: enlaces, foco, selección, check, números. 5,2:1 sobre la piedra y 6,2:1 sobre el blanco */
  --sobre-acento:var(--blanco);  /* texto sobre los rellenos de naranja: 6,2:1 sobre --acento-texto, 5,2:1 sobre --acento */
  --cuerpo:#36434D;              /* DERIVADO · texto corrido: 8,5:1 sobre la piedra · 10,2:1 sobre el blanco */
  --notas:#4F5D67;               /* DERIVADO · notas y rótulos (el --gris cae a 4,5:1 sobre un hover): 5,7:1 · 6,8:1 */

  /* papeles */
  --superficie:var(--blanco);    /* lo que se toca y lo que contiene */
  --tinta:var(--grafito);        /* títulos, cifras y lo que se enfatiza */
  --tinta-2:var(--cuerpo);       /* texto corrido */
  --tinta-3:var(--notas);        /* notas, ayudas, rótulos, bajadas y enlaces inactivos */
  --fondo:var(--piedra);         /* el fondo de la página */

  /* líneas: velos de grafito. --linea separa (decorativa); --borde-control dibuja el contorno de lo
     que se toca y llega a 3,4:1 sobre el blanco y 3,1:1 sobre la piedra (WCAG 1.4.11) */
  --linea:rgba(31,42,51,.14);
  --linea-fuerte:rgba(31,42,51,.28);
  --borde-control:rgba(88,102,111,.75);
  --realce:rgba(31,42,51,.05);                 /* el hover: un velo de grafito */
  --acento-velo:rgba(176,56,9,.08);            /* selección y avisos */
  --acento-anillo:rgba(176,56,9,.3);           /* el halo del foco */

  /* lo decidido: el total, lo aprobado, lo recibido. La C no tiene verde: se propone el naranja resina,
     en el tono derivado (--acento-texto) porque también va de texto: el #C2410C sobre la piedra da 4,3:1 */
  --decidido:var(--acento-texto);
  --decidido-velo:rgba(194,65,12,.08);

  /* alerta: un carmesí (derivado), distinto del naranja del acento para que un error no se confunda
     con una acción: 7,8:1 sobre el blanco, 6,5:1 sobre la piedra y 5,7:1 sobre su velo en la piedra */
  --alerta:#A3162A;
  --alerta-fondo:rgba(163,22,42,.08);
  --alerta-tinta:var(--alerta);

  /* dos esquinas: la chica en lo que se aprieta, la mayor en lo que contiene */
  --radio:4px;
  --radio-caja:8px;

  /* capas: una escala, en vez de números sueltos por el archivo */
  --z-contenido:1;
  --z-menu:20;          /* el desplegable de dientes */
  --z-barra:40;         /* la barra de «Enviar un caso» en el teléfono */
  --z-cabecera:50;
  --z-saltar:100;       /* el enlace «Saltar al contenido», sobre todo lo demás */

  /* tipografía: una sola familia variable, Bricolage Grotesque, con eje de
     tamaño óptico. El navegador elige solo el corte de texto en los párrafos y
     el de titular en los títulos. Dos variables para dos papeles, por si algún
     día se separan. "Bricolage respaldo" es Arial con las métricas ajustadas,
     para que el texto no salte cuando llega la fuente de verdad. */
  --titular:"Bricolage Grotesque","Bricolage respaldo","Helvetica Neue",Arial,sans-serif;
  --texto:"Bricolage Grotesque","Bricolage respaldo","Helvetica Neue",Arial,sans-serif;

  /* escala modular 1,16 desde 1rem: plana a propósito. La jerarquía la dan
     el peso y el color, no el tamaño — salvo en las cifras. */
  --t--1:0.84rem;
  --t-0:1rem;
  --t-1:1.16rem;
  --t-2:1.35rem;
  --t-3:1.56rem;
  --t-4:1.81rem;
  --t-5:2.1rem;
  --t-6:2.9rem;

  /* espacio: un 25 % más apretado que la v3. Minimalista acá es denso, no aireado */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:28px; --s-7:40px; --s-8:56px; --s-9:72px; --s-10:96px;

  /* movimiento: una curva, dos duraciones. Solo estados. */
  --curva:cubic-bezier(.2,.7,.2,1);
  --t-estado:.14s;
  --t-abrir:.2s;

  --medida:62ch;
  --ancho:1080px;
  --gutter:24px;

  /* alto de la cabecera, medido: el hero lo descuenta para llenar justo la
     pantalla. Si cambia la cabecera, volver a medir (ver .hero). */
  --cabecera:67px;
}

/* Fuente alojada en el sitio: Bricolage Grotesque variable (pesos 200 a 800 y
   tamaño óptico 12 a 96) en un solo WOFF2 de 77 KB, subconjunto latino, que
   cubre tildes, ñ, ¿ y ¡. Licencia OFL. Sin conexiones a Google. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url("fuentes/bricolage-grotesque.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}
/* métricas calculadas contra Arial con fontTools: mismo ancho promedio de letra
   y mismas alturas, así el cambio de fuente no mueve el texto de lugar */
@font-face{font-family:"Bricolage respaldo";src:local("Arial"),local("Helvetica Neue");size-adjust:95.7%;ascent-override:97.2%;descent-override:28.2%;line-gap-override:0%}

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

html{-webkit-text-size-adjust:100%;font-size:105%;scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-gutter:stable}

::selection{background:var(--acento-texto);color:var(--sobre-acento)}

body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta-2);
  font-family:var(--texto);
  font-size:1.02rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

[hidden]{display:none!important}

img,svg{max-width:100%}
img{height:auto}

.wrap{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}
.medida{max-width:var(--medida)}

/* --- tipografía ---------------------------------------------------------- */
/* Titulares grandes y negros (800), con el tracking cerrado que pide Bricolage
   en tamaño de titular. Las cifras crecen a la par y siguen mandando. */

h1,h2,h3,h4{
  font-family:var(--titular);
  color:var(--tinta);
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.3rem,1.5rem + 2.4vw,3.4rem);font-weight:800;line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(1.8rem,1.3rem + 2.1vw,3.05rem);font-weight:800;line-height:1.02;letter-spacing:-.038em}
h3{font-size:var(--t-1);font-weight:700;line-height:1.25;letter-spacing:-.02em}
h4{font-size:var(--t-0);font-weight:600;line-height:1.35}

p{margin:0 0 var(--s-4);text-wrap:pretty}   /* pretty: sin palabras sueltas en el último renglón */
p:last-child{margin-bottom:0}
li{text-wrap:pretty}

a{color:var(--acento-texto);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--tinta)}
:focus-visible{outline:2px solid var(--acento-texto);outline-offset:3px;border-radius:2px}

strong{font-weight:700;color:var(--tinta)}
.lede{font-size:var(--t-1);line-height:1.55;color:var(--tinta-3);max-width:58ch}
.nota{font-size:var(--t--1);color:var(--tinta-3);line-height:1.55}

td.valor,.dato-valor{font-variant-numeric:tabular-nums}

/* --- la etiqueta: mayúsculas espaciadas, usadas con cuentagotas ----------- */
/* 600, mayúsculas, tracking .14em: el eco de DIGITAL DENTAL SOLUTIONS bajo el
   logotipo. En la v4 solo rotula datos (contacto, total, resumen); nunca va de
   antetítulo decorativo sobre un h2. */

.etiqueta{
  font-family:var(--titular);font-weight:600;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);
  margin:0 0 var(--s-4);
}

/* --- secciones ----------------------------------------------------------- */

/* abajo un poco más que arriba: con el mismo relleno, el bloque se ve
   corrido hacia abajo, porque el ojo mide desde la línea de base del texto */
section{padding-block:var(--s-8) calc(var(--s-8) + var(--s-3))}
main > section ~ section{border-top:1px solid var(--linea)}

.seccion-cabeza{margin-bottom:var(--s-6);max-width:62ch}
.seccion-cabeza h2{margin-bottom:var(--s-3)}
.seccion-cabeza .lede{margin:0;font-size:var(--t-0);color:var(--tinta-3)}

/* franja breve: una sección de poca altura */
.seccion-breve{padding-block:var(--s-7)}

/* --- franjas: piedra y blanco alternados ----------------------------------- */
/* Pedido de Francisco (27 de septiembre de 2026, opción A entre tres fotos):
   cada sección se distingue de la vecina por el fondo, a todo el ancho. Las
   blancas llevan .banda en el HTML; no se alterna con :nth-of-type porque hay
   pares que se leen juntos (el h1 de «Cómo enviar un caso» y «Lo que
   necesitamos») y porque el formulario se queda en piedra: sus campos son
   blancos y sobre blanco se perderían. Donde cambia el color no va regla; entre
   dos secciones del mismo color, sí. */
.banda{background:var(--superficie)}
main > .banda,main > .banda + section{border-top:0}
/* el contenido de cada sección, por encima del despiece del hero, que ahora
   sigue a la vista mientras se baja por las primeras secciones */
main > section:not(.hero) > .wrap{position:relative;z-index:var(--z-contenido)}

/* --- dónde se desvanece el despiece ---------------------------------------- */
/* Pedido de Francisco (29 de septiembre): el despiece se desvanece en la línea
   que separa el título de «Cómo funciona» de su primera fila, y no se ve más
   abajo. El despiece es fijo a la ventana (z-index 0); lo que va desde esa
   línea hacia abajo se pinta encima y lo tapa, así que al bajar la línea sube
   y se lo va comiendo. Tres piezas:
   1. un velo del color de la franja, pegado a la lista de los tres pasos, a
      todo el ancho y hasta el final de la sección, con 48 px de degradado
      justo antes de la línea para que se desvanezca y no se corte en seco. Va
      con z-index -1 dentro del .wrap (que es z-index 1): queda bajo el texto y
      sobre el despiece;
   2. las secciones que siguen, con su fondo y por encima del despiece;
   3. el pie, igual.
   No depende de la animación: también funciona en Firefox y con «reducir
   movimiento», donde antes el despiece se quedaba fijo sobre toda la página.
   Solo existe en la portada (.hero). */
.hero + section{overflow:clip}   /* el velo se sale de la columna hacia los lados; esto lo recorta al ancho de la sección */
.hero + section .pasos-breve{position:relative}
.hero + section .pasos-breve::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-48px;bottom:calc(-1 * (var(--s-8) + var(--s-3)));   /* hasta el borde inferior de la sección */
  left:-100vw;right:-100vw;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--superficie) 48px);   /* la franja de «Cómo funciona» es .banda: Superficie */
}
.hero + section ~ section,.pie{position:relative;z-index:var(--z-contenido)}
.hero + section ~ section{background:var(--fondo)}
.hero + section ~ section.banda{background:var(--superficie)}

/* --- las cifras: lo más grande de la página ------------------------------ */
/* Tres datos sobre una regla. Sin cajas: la cifra en 800 y su etiqueta
   debajo, como el cajetín de valores de una lámina. */

.rail{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 var(--s-6);
  margin:0;padding:0;
  border-top:1px solid var(--linea-fuerte);
}
/* en el HTML va primero el rótulo (<dt>) y después la cifra (<dd>), que es el
   orden válido de una lista de definiciones y el que leen los lectores de
   pantalla; en pantalla la cifra sube arriba con order */
.dato{margin:0;padding:var(--s-5) 0 0;display:flex;flex-direction:column}
.dato-valor{
  order:-1;
  display:block;margin:0;             /* <dd> trae 40px de sangría por defecto */
  font-family:var(--titular);
  font-size:clamp(2.6rem,1.8rem + 2.9vw,4.3rem);
  font-weight:800;line-height:.98;letter-spacing:-.05em;color:var(--tinta);
}
.dato-etq{
  display:block;font-family:var(--titular);font-size:.88rem;font-weight:500;
  line-height:1.35;color:var(--tinta);padding-top:var(--s-3);max-width:24ch;
}   /* en tinta (grafito), no en cuerpo ni en notas: el despiece pasa por detrás y ahí solo la tinta da 4,5:1 (5,6:1 sobre su parte más oscura) */

/* --- botones -------------------------------------------------------------- */
/* Tres niveles: el naranja lleno (la acción de la página), el de línea (la
   alternativa que pesa, como «Ver el arancel») y el enlace con flecha (lo
   secundario de un cierre). Así no hay siempre un par lleno + contorno. */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--titular);font-size:.98rem;font-weight:600;line-height:1;letter-spacing:-.01em;
  padding:14px 20px;border-radius:var(--radio);border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color var(--t-estado) var(--curva),color var(--t-estado) var(--curva),border-color var(--t-estado) var(--curva),transform .1s var(--curva);
}
.btn-primario{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.btn-primario:hover{background:var(--acento-hover);border-color:var(--acento-hover);color:var(--sobre-acento)}
.btn-linea{background:transparent;color:var(--tinta);border-color:var(--borde-control)}
.btn-linea:hover{border-color:var(--tinta);background:var(--realce);color:var(--tinta)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-grupo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}

.enlace-flecha{
  display:inline-flex;align-items:center;gap:8px;padding-block:10px;
  font-family:var(--titular);font-weight:600;font-size:.98rem;letter-spacing:-.01em;
  color:var(--tinta);text-decoration:underline;text-decoration-color:var(--borde-control);text-underline-offset:.3em;
  transition:text-decoration-color var(--t-estado) var(--curva);
}
.enlace-flecha::after{content:"→";transition:transform var(--t-estado) var(--curva)}
.enlace-flecha:hover{color:var(--acento-texto);text-decoration-color:var(--acento-texto)}
@media (hover:hover){.enlace-flecha:hover::after{transform:translateX(3px)}}

/* espacio sobre los botones de un cierre, antes en un style="" en cada página */
.cierre .btn-grupo,.resumen .btn-grupo{margin-top:var(--s-6)}

/* --- cabecera ------------------------------------------------------------- */

.encabezado{
  position:sticky;top:0;z-index:var(--z-cabecera);
  background:var(--superficie);
  border-bottom:1px solid var(--linea);
  transition:border-color var(--t-abrir) var(--curva);
}
.encabezado.con-scroll{border-bottom-color:var(--linea-fuerte)}
.encabezado .wrap{display:flex;align-items:center;gap:var(--s-6);padding-block:var(--s-3)}
.marca{display:flex;align-items:center;flex:0 0 auto}
.marca img{width:138px;display:block}   /* teléfono y tablet: el lockup corto con facetas (138 a 183 px) */
@media (min-width:861px){.marca img{width:208px}}   /* escritorio: el lockup completo (desde 200 px) */
.nav{display:flex;align-items:center;gap:var(--s-5);margin-left:auto;font-family:var(--titular);font-size:.95rem;font-weight:600;letter-spacing:-.01em}
.nav a:not(.btn){
  position:relative;color:var(--tinta-3);text-decoration:none;padding:8px 0;
  transition:color var(--t-estado) var(--curva);
}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--acento-texto);opacity:0;
}
.nav a[aria-current="page"]:not(.btn){color:var(--tinta)}
.nav a[aria-current="page"]:not(.btn)::after{opacity:1}
.nav .btn{margin-left:var(--s-2);padding:11px 16px;font-size:.92rem}

/* --- pie ------------------------------------------------------------------ */
/* Cierra la página y ahí firma la marca.
   Tres columnas y no cuatro: la marca, el contacto y una sola lista de
   enlaces. La columna «Servicio» de la v4 repetía la barra de navegación. */

.pie{
  /* Piedra y no blanco: cuatro páginas terminan en un cierre .banda (blanco) y un pie del mismo
     tono se fundiría con él. Lleva la regla de arriba, como dos secciones del mismo color. */
  background:var(--piedra);color:var(--tinta-2);border-top:1px solid var(--linea-fuerte);
  padding-block:var(--s-8) var(--s-6);font-size:.96rem;
}
.pie-grid{display:grid;grid-template-columns:1.4fr 1.2fr 1fr;gap:var(--s-6)}
.pie-titulo{font-family:var(--titular);font-weight:600;font-size:.88rem;color:var(--tinta-3);margin:0 0 var(--s-3)}
.pie-lema{max-width:34ch}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:0}
.pie a{display:inline-block;padding-block:5px;color:var(--tinta-2);text-decoration:none;transition:color var(--t-estado) var(--curva)}
.pie a:hover{color:var(--acento-texto);text-decoration:underline}
.pie img{width:208px;margin-bottom:var(--s-3);display:block}
.pie .nota{color:var(--tinta-3)}
.pie-legal{
  margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid var(--linea);
  font-family:var(--titular);font-size:.88rem;color:var(--tinta-3);display:flex;flex-wrap:wrap;gap:var(--s-5);
}

/* --- hero ----------------------------------------------------------------- */
/* Una sola columna: el titular —«Centro de planificación digital», que es lo
   que Camlab es—, la bajada, el párrafo, los dos botones y, cerrando la
   primera pantalla, las tres cifras. Sin ilustración y sin panel oscuro. */

/* el hero llena exactamente la primera pantalla, descontada la cabecera: al
   entrar no asoma nada de la sección siguiente. svh y no dvh: en el teléfono
   es el alto con la barra del navegador visible, el más chico, así que al
   cargar nunca se ve un borde de lo que viene. El texto queda centrado en el
   alto que sobra y las cifras apoyan en el borde inferior, como el cajetín de
   una lámina. Si el contenido es más alto que la pantalla, el hero crece. */
.hero{
  position:relative;
  display:flex;flex-direction:column;
  min-height:calc(100vh - var(--cabecera));
  min-height:calc(100svh - var(--cabecera));
  padding-block:var(--s-7) var(--s-6);
}
.hero > .wrap{position:relative;z-index:var(--z-contenido);flex:1;display:flex;flex-direction:column;width:100%}
.hero-texto{margin-block:auto}

/* despiece del pack Stackable: las cinco capas de un caso real —hueso, guía
   maestra, guía de implantes, guía de posicionamiento y provisorios— que se
   separan a medida que se baja por la portada. Es la pieza más cara del
   arancel explicada sin una línea de texto.

   El render lo generó Francisco en Gemini a partir de una captura de Camlab, y
   herramientas/generar-despiece.py lo corta en capas; las posiciones de abajo
   salen de ese script y reconstruyen el render original.

   Las imágenes se cargan desde el CSS, no desde el HTML, y solo dentro de la
   consulta de ≥861 px: en el teléfono el navegador no las pide siquiera. */
.hero-despiece{
  /* fijo a la ventana, no al hero: si se fuera con el scroll, la pila terminaría
     de abrirse cuando ya no se ve. Así se abre delante del lector y recién
     después se desvanece. */
  position:fixed;z-index:0;pointer-events:none;
  top:96px;right:max(-10px, calc(50vw - var(--ancho) / 2 - 40px));
  width:min(560px,44vw);aspect-ratio:1/1;
  --marco:min(560px,44vw);
  --u:calc(var(--marco) / 100);   /* 1 % del marco: los desplazamientos escalan con él */
  opacity:.32;  /* fondo, no ilustración. Sobre la piedra, más de .36 deja los rótulos chicos de las cifras bajo 4,5:1 */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 34%);
  mask-image:linear-gradient(90deg,transparent,#000 34%);
}
.hd-capa{position:absolute;background-size:100% 100%;background-repeat:no-repeat;will-change:transform}
.hd-hueso          {left:23.65%;top: 3.45%;width:50.95%;aspect-ratio:1019/551}
.hd-maestra        {left:28.40%;top:31.00%;width:41.00%;aspect-ratio:820/288}
.hd-implantes      {left:26.15%;top:45.40%;width:46.65%;aspect-ratio:933/272}
.hd-posicionamiento{left:28.40%;top:59.00%;width:43.55%;aspect-ratio:871/218}
.hd-provisorios    {left:29.05%;top:70.85%;width:42.70%;aspect-ratio:854/487}

.hero-texto{max-width:880px}
/* el titular termina donde la imagen del despiece empieza a verse */
.hero h1{font-size:clamp(2.4rem,1.5rem + 3.5vw,4.65rem);line-height:.98;letter-spacing:-.04em;max-width:740px;margin-bottom:var(--s-5)}
/* la bajada: el titular dice qué es Camlab y la bajada, qué gana quien opera
   con la guía. Va en 500 contra el 800 del titular, así la jerarquía la marca
   el grosor y no solo el tamaño; y en tinta, un paso por encima del párrafo
   gris que la sigue. Cada frase es un <span> en bloque: una por renglón,
   cortando en la coma. El tope de 1,6 rem deja la segunda frase, la más
   larga, en 675 px, y desde 1.280 px de ancho las guías del despiece
   empiezan a 682 px del borde del texto: con 1,7 rem, «predecibles» se
   montaba sobre ellas. Si cambia el texto, volver a medir. */
.hero-bajada{
  font-family:var(--titular);font-size:clamp(1.25rem,1rem + .9vw,1.6rem);
  font-weight:500;line-height:1.22;letter-spacing:-.018em;color:var(--tinta);
  max-width:740px;margin-bottom:var(--s-5);text-wrap:balance;
}
.hero-bajada span{display:inline-block}
.hero .lede{max-width:52ch;margin-bottom:var(--s-6)}
/* con el despiece a la vista (desde 861 px) la bajada se angosta para quedar a su izquierda; en el teléfono y la tablet chica
   no hay despiece y el párrafo usa todo el ancho (en la v7 se quedaba angosto también ahí) */
@media (min-width:861px){.hero .lede{max-width:min(52ch,calc(66vw - 44px))}}   /* más angosta que el 56ch de antes: a 1.366 px la primera línea rozaba el borde del despiece, donde el texto de cuerpo no llega a 4,5:1. 52ch (640 px) queda a la izquierda de las piezas desde 950 px; bajo eso, 66vw - 44px */
.hero .rail{margin-top:var(--s-7)}
.hero .dato-valor{white-space:nowrap}

/* --- casos clínicos: la imagen arriba, el texto debajo -------------------- */
/* Nada de rótulos encima de la foto: la imagen se muestra entera y el pie va
   fuera, donde se lee.

   Uno destacado y dos al lado, no tres columnas iguales: el primer caso es el
   que trae la secuencia completa (catorce fotos, del laboratorio al cierre) y
   ocupa las dos filas de la izquierda; los otros dos se apilan a la derecha.
   La proporción 2,4 : 1 no es al azar: con ella la foto destacada, estirada
   hasta el borde inferior de la segunda tarjeta, queda casi en su proporción
   nativa (recorta un 5 % de los costados a 1.440 px) y las de la derecha no
   se recortan nada. */

.casos{
  display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);
  gap:var(--s-6);margin:0;padding:0;list-style:none;
}
.casos > li:first-child{grid-row:1 / span 2}
.casos > li:first-child .caso-boton{display:flex;flex-direction:column;height:100%}
.casos > li:first-child .caso-boton img{flex:1 1 0;min-height:0;aspect-ratio:auto}
.casos > li:first-child .caso-titulo{font-size:var(--t-3)}
.caso-boton{
  display:block;width:100%;padding:0;border:0;background:none;
  cursor:pointer;text-align:left;font:inherit;color:inherit;
}
.caso-boton:focus-visible{outline:2px solid var(--acento-texto);outline-offset:4px;border-radius:var(--radio-caja)}
.caso-boton img{
  display:block;width:100%;aspect-ratio:560/440;object-fit:cover; /* la proporción nativa de la foto: no se recorta nada */
  border-radius:var(--radio-caja);border:1px solid var(--linea);background:var(--superficie);
  transition:border-color var(--t-estado) var(--curva);
}
.caso-texto{display:block;padding-top:var(--s-3)}
.caso-prestacion{
  display:block;font-family:var(--titular);font-weight:600;font-size:.8rem;
  color:var(--tinta-3);margin-bottom:2px;
}
.caso-titulo{
  display:block;font-family:var(--titular);font-weight:700;font-size:1.32rem;
  line-height:1.2;letter-spacing:-.02em;color:var(--tinta);
}
/* cuántas imágenes trae, en una línea bajo el título: información, no un
   adhesivo sobre la foto. (El aviso de «referencial» se fue con el último caso
   referencial; si vuelve uno, va en esta misma línea.) */
.caso-cuenta{
  display:inline-block;margin-top:var(--s-2);
  font-family:var(--titular);font-weight:500;font-size:.8rem;color:var(--tinta-3);
  font-variant-numeric:tabular-nums;
}

/* el visor: un <dialog> nativo, con el fondo de la página velado en grafito */
.visor{border:0;padding:0;background:transparent;width:min(96vw,940px);max-width:none;max-height:96vh;max-height:96dvh;overflow:visible}
.visor::backdrop{background:rgba(31,42,51,.84)}
html.visor-abierto{overflow:hidden}
.visor-cuerpo{
  background:var(--superficie);color:var(--tinta);border-radius:var(--radio-caja);
  border:1px solid var(--linea-fuerte);overflow:hidden;box-shadow:0 30px 70px -28px rgba(31,42,51,.55);
  max-height:96vh;max-height:96dvh;display:grid;grid-template-rows:auto 1fr auto auto;
}
.visor-cabeza{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);padding:var(--s-5) var(--s-6) var(--s-4)}
.visor-prestacion{font-family:var(--titular);font-weight:600;font-size:.8rem;color:var(--tinta-3);margin:0 0 3px}
.visor-cabeza h3{color:var(--tinta);font-size:var(--t-2);margin:0;line-height:1.18;font-weight:700}
/* la cruz y las flechas se dibujan con CSS y no con los caracteres × ‹ ›
   del HTML (que quedan para quien lee sin estilos): un carácter se sienta en
   la línea de base de la letra y nunca queda al centro del botón */
.visor-cerrar{
  position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:var(--radio);border:1px solid var(--borde-control);
  background:transparent;color:var(--tinta);font-size:0;cursor:pointer;
  transition:background-color var(--t-estado) var(--curva);
}
.visor-cerrar::before,.visor-cerrar::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:1.5px;margin:-.75px 0 0 -9px;
  background:currentColor;border-radius:1px;transform:rotate(45deg);
}
.visor-cerrar::after{transform:rotate(-45deg)}
.visor-cerrar:hover{background:var(--linea)}
.visor-figura{position:relative;margin:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto}
/* el marco de la foto tiene alto fijo: las fotos vienen verticales, apaisadas
   y cuadradas, y si el marco siguiera a cada una el visor saltaría al pasar.
   contain: se ven enteras, nunca se recortan, y lo que sobra es del mismo
   tono piedra del visor. */
.visor-figura img{display:block;width:100%;height:min(58vh,620px);height:min(58dvh,620px);min-height:0;object-fit:contain;background:var(--piedra)}
.visor-img--cambio{animation:visor-fundido .22s var(--curva)}
@keyframes visor-fundido{from{opacity:.4}to{opacity:1}}
.visor-flecha{
  position:absolute;top:calc(50% - 22px);width:44px;height:44px;border-radius:var(--radio);
  border:1px solid var(--borde-control);background:rgba(255,255,255,.9);color:var(--tinta);   /* las flechas van sobre la foto: blancas, no oscuras */
  font-size:0;cursor:pointer;transition:background-color var(--t-estado) var(--curva);
}
.visor-flecha::before{
  content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;
  border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translate(-30%,-50%) rotate(45deg);   /* -30 y no -50: el vértice de la flecha pesa, se corre hacia la punta */
}
.visor-flecha--sig::before{transform:translate(-70%,-50%) rotate(-135deg)}
.visor-flecha:hover{background:var(--blanco)}
.visor-flecha--ant{left:var(--s-4)}
.visor-flecha--sig{right:var(--s-4)}
.visor-figura figcaption{display:flex;gap:var(--s-3);align-items:baseline;padding:var(--s-4) var(--s-6) 0;color:var(--tinta-2);font-size:.98rem;line-height:1.5}
#visor-pie{min-height:3em}   /* dos renglones reservados: si el pie cambia de largo, el visor no salta */
.visor-contador{flex:0 0 auto;font-family:var(--titular);font-weight:700;color:var(--acento-texto);font-variant-numeric:tabular-nums}
/* la tira de miniaturas se desplaza de lado cuando no caben (un caso trae
   catorce fotos); casos.js mantiene la activa al centro */
.visor-puntos{
  position:relative;display:flex;gap:var(--s-3);list-style:none;margin:0;padding:var(--s-4) var(--s-6) var(--s-2);
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:rgba(31,42,51,.35) transparent;
  /* los bordes se desvanecen en el ancho del relleno: la miniatura que queda
     cortada avisa que hay más, y la primera y la última se ven enteras */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--s-6),#000 calc(100% - var(--s-6)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--s-6),#000 calc(100% - var(--s-6)),transparent);
}
.visor-puntos li{flex:0 0 auto}
.visor-puntos button{padding:0;border:1px solid transparent;border-radius:var(--radio);overflow:hidden;background:var(--piedra);cursor:pointer;width:84px;aspect-ratio:560/440;opacity:.5;transition:opacity var(--t-estado) var(--curva)}
.visor-puntos button:hover{opacity:.85}
.visor-puntos button[aria-current="true"]{border-color:var(--acento-texto);opacity:1}
.visor-puntos button img{display:block;width:100%;height:100%;object-fit:cover}
.visor-nota{margin:0;padding:var(--s-4) var(--s-6) var(--s-5);font-size:.84rem;color:var(--tinta-3)}
.visor-cerrar:focus-visible,.visor-flecha:focus-visible,.visor-puntos button:focus-visible{outline:2px solid var(--acento-texto);outline-offset:2px}
@media (max-height:640px){.visor-puntos{display:none}.visor-figura img{height:52vh;height:52dvh}}

/* --- los tres pasos de la portada ---------------------------------------- */
/* Tres filas sobre reglas: lo que hace el odontólogo, lo que hace Camlab y
   cuándo llega. El recorrido completo, con los requisitos de archivos, está
   en /como-enviar. */

.pasos-breve{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea-fuerte)}
.pasos-breve li{
  display:grid;grid-template-columns:minmax(0,25ch) minmax(0,1fr) auto;
  gap:var(--s-4) var(--s-6);align-items:baseline;
  padding:var(--s-5) 0;border-bottom:1px solid var(--linea);
}
.pasos-breve h3{font-family:var(--titular);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;color:var(--tinta);margin:0}
.pasos-breve p{margin:0;font-size:.98rem;color:var(--tinta-2);max-width:52ch}
.plazo{
  display:inline-block;justify-self:end;white-space:nowrap;
  font-family:var(--titular);font-size:.88rem;font-weight:600;color:var(--tinta);
  font-variant-numeric:tabular-nums;
}   /* igual que .dato-etq: el despiece pasa por detrás */

/* --- listas con marca, íconos y requisitos -------------------------------- */

.marca-lista{list-style:none;margin:0;padding:0}
.marca-lista li{position:relative;padding-left:26px;margin-bottom:var(--s-3);font-size:1rem;color:var(--tinta-2)}
.marca-lista li::before{
  content:"";position:absolute;left:2px;top:.52em;
  width:5px;height:9px;border-right:1.5px solid var(--acento-texto);border-bottom:1.5px solid var(--acento-texto);
  transform:rotate(45deg);
}
.marca-lista li strong{color:var(--tinta)}

.icono{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;color:var(--acento-texto);margin-bottom:var(--s-3);
}
.icono svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

.requisitos{display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--s-8)}
.requisitos > div{padding:0}
.requisitos h3{margin-bottom:var(--s-4);font-size:var(--t-2);font-weight:700}
.requisitos-enlace{margin-top:var(--s-6)}

/* --- confianza: quién planifica y con qué sistemas ------------------------ */

/* quién planifica: tres controles antes de imprimir. Los números, del tamaño
   de las cifras del hero; cada uno sobre una regla grafito gruesa, y el tercero
   —la aprobación, lo que decide el implantólogo— en el naranja de «lo decidido». En el teléfono,
   el número pasa al lado del texto para no ocupar media pantalla cada uno. */
.controles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s-5)}
.controles li{padding:var(--s-5) 0 var(--s-6);border-top:3px solid var(--tinta)}
.controles li.control--tuyo{padding-inline:var(--s-5);background:var(--decidido-velo);border-top-color:var(--decidido);border-radius:0 0 var(--radio-caja) var(--radio-caja)}
.control--tuyo .control-num{color:var(--decidido)}
.control-num{
  display:block;margin-bottom:var(--s-4);
  font-family:var(--titular);font-weight:800;font-size:clamp(3.6rem,2.4rem + 3.6vw,5.4rem);
  line-height:.9;letter-spacing:-.05em;color:var(--tinta);font-variant-numeric:tabular-nums;
}
.control-texto{font-family:var(--titular);font-size:var(--t-1);line-height:1.35;color:var(--tinta-2);max-width:24ch;margin:0}
.control-texto strong{display:block;font-size:var(--t-2);font-weight:700;letter-spacing:-.015em;color:var(--tinta);margin-bottom:2px}
.controles-nota{margin-top:var(--s-5)}

.compat h2{margin-bottom:var(--s-5)}

/* la franja de sistemas: los logos de las marcas se deslizan en una sola
   fila (pedido de Francisco: que se vean todas). Van dos copias iguales de la
   lista, una detrás de la otra; cada una se corre su propio ancho y, cuando la
   primera terminó de salir por la izquierda, la segunda está justo donde
   empezó la primera, así el ciclo no tiene costura. Por eso el relleno derecho
   de cada lista es el mismo espacio que hay entre logos. Los bordes se
   desvanecen, con la regla de arriba incluida.
   Los logos van todos en una misma tinta (el filtro #logo-tinta, en el HTML),
   para que la franja se lea como una sola pieza y acompañe a la página en vez
   de competir con ella; bajo el mouse la franja se detiene y el logo recupera
   su color. Los tamaños los calcula preparar-logos.py: misma superficie para
   todos, no mismo alto. */
.filtros{position:absolute;width:0;height:0;overflow:hidden}   /* display:none apagaría el filtro */
.marcas{
  --marcas-vuelta:68s;   /* lo calcula preparar-logos.py: unos 40 px por segundo */
  display:flex;overflow:hidden;
  padding-top:var(--s-6);border-top:1px solid var(--linea-fuerte);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--s-9),#000 calc(100% - var(--s-9)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--s-9),#000 calc(100% - var(--s-9)),transparent);
}
.marcas-pista{
  flex:none;display:flex;align-items:center;gap:var(--s-9);
  list-style:none;margin:0;padding:0 var(--s-9) 0 0;
  animation:marcas-desliza var(--marcas-vuelta,60s) linear infinite;
}
.marcas-pista li{flex:none;margin:0}
.marcas-pista img{
  display:block;max-width:none;filter:url(#logo-tinta);
  transition:filter var(--t-estado) var(--curva),opacity var(--t-estado) var(--curva);
}
.marcas:hover .marcas-pista{animation-play-state:paused}
@media (hover:hover){.marcas-pista img:hover{filter:none}}   /* bajo el mouse la franja se detiene y el logo recupera su color */
@keyframes marcas-desliza{to{transform:translateX(-100%)}}
/* quieta: una sola copia, en filas */
@media (prefers-reduced-motion:reduce){
  .marcas{-webkit-mask-image:none;mask-image:none}
  .marcas-pista{flex:1 1 auto;flex-wrap:wrap;row-gap:var(--s-6);padding-right:0;animation:none}
  .marcas-pista[aria-hidden]{display:none}
}

/* --- contacto: en el cierre de la portada y de preguntas ------------------ */

.contacto{border-top:1px solid var(--linea-fuerte);padding-top:var(--s-4)}
.contacto .etiqueta{margin-bottom:var(--s-3)}
.contacto-lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2);font-family:var(--titular);font-weight:600;font-size:var(--t-1);color:var(--tinta);line-height:1.3}
.contacto-lista a{color:var(--tinta);text-decoration:none;overflow-wrap:anywhere}
.contacto-lista a:hover{text-decoration:underline;text-underline-offset:.2em}

/* --- cierre --------------------------------------------------------------- */
/* Sin banda de color: el naranja de «lo decidido» queda reservado para los totales. */

.cierre{border-top:1px solid var(--linea-fuerte)}
.cierre h2{font-size:clamp(2.2rem,1.5rem + 2.4vw,3.5rem)}
.cierre .lede{color:var(--tinta-3)}
.cierre-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--s-8);align-items:start}

/* --- interiores: cabecera de página, versión y documento ------------------ */

.cabecera-pagina{padding-block:var(--s-7) var(--s-6)}
/* la página 404: adónde ir, con una línea que dice qué hay en cada lugar, en
   vez de cuatro botones iguales en fila */
.destinos{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea-fuerte);max-width:720px}
.destinos a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s-4);
  padding:var(--s-4) 0;border-bottom:1px solid var(--linea);text-decoration:none;color:inherit;
}
.destinos a::after{
  content:"→";grid-column:2;grid-row:1 / span 2;align-self:center;
  font-family:var(--titular);color:var(--tinta-3);transition:transform var(--t-estado) var(--curva),color var(--t-estado) var(--curva);
}
.destino-titulo{font-family:var(--titular);font-weight:700;font-size:var(--t-1);color:var(--tinta);letter-spacing:-.015em}
.destino-texto{font-size:.94rem;color:var(--tinta-3)}
@media (hover:hover){
  .destinos a:hover .destino-titulo{color:var(--acento-texto)}
  .destinos a:hover::after{transform:translateX(3px);color:var(--tinta)}
}

/* la miga de pan de las páginas que cuelgan de otra (el protocolo, del paso 2) */
.miga{margin-bottom:var(--s-4);font-family:var(--titular);font-size:.9rem;font-weight:500}
.miga a{color:var(--tinta-3)}
.miga a:hover{color:var(--tinta)}
.cabecera-pagina .seccion-cabeza{margin-bottom:0;max-width:64ch}
.cabecera-pagina h1{margin-bottom:var(--s-3)}
.cabecera-pagina .lede{max-width:58ch;font-size:var(--t-1);color:var(--tinta-3)}
.cabecera-pagina .rail{margin-top:var(--s-7)}
.cabecera-pagina .dato-valor{font-size:var(--t-3);line-height:1.15;letter-spacing:-.025em;overflow-wrap:anywhere} /* más chico que en el hero, así que el tracking se abre: a -.05em las letras se tocaban */
.cabecera-pagina .dato-etq{max-width:34ch;padding-top:var(--s-2)}
.cabecera-pagina .nota{margin-bottom:var(--s-4)}
/* un h1 solo, sin bajada (en «Cómo enviar un caso» lo sigue directamente «Lo
   que necesitamos para empezar»): sin regla entre los dos, que se leen juntos */
.cabecera-pagina--sola{padding-bottom:0}
.cabecera-pagina--sola + section{border-top:0;padding-top:var(--s-6)}

.version{
  display:flex;flex-wrap:wrap;gap:var(--s-5);padding:var(--s-3) 0;margin-top:var(--s-5);
  border-top:1px solid var(--linea-fuerte);border-bottom:1px solid var(--linea);
  font-family:var(--titular);font-size:.96rem;color:var(--tinta-3);
}
.version b{color:var(--tinta);font-weight:600}

.doc h2{font-size:var(--t-2);margin-top:var(--s-8);margin-bottom:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--linea)}
.doc h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.doc h3{font-size:var(--t-1);margin-top:var(--s-6);margin-bottom:var(--s-3)}
.doc p,.doc li{max-width:var(--medida)}
.doc ul{padding-left:1.1em}
.doc li{margin-bottom:var(--s-2);color:var(--tinta-2)}
.doc li::marker{color:var(--gris)}

/* --- tabla de arancel ----------------------------------------------------- */
/* Una lista de precios, sin caja. Regla fina entre filas y el valor a la derecha. */

.tabla-envoltorio{overflow-x:auto}
.tabla-envoltorio + .tabla-envoltorio{margin-top:var(--s-7)}
table.arancel{border-collapse:collapse;width:100%;font-family:var(--titular);font-size:1rem}
table.arancel caption{
  text-align:left;font-weight:700;font-size:var(--t-2);letter-spacing:-.014em;color:var(--tinta);
  padding:0 0 var(--s-3);
}
table.arancel th{
  text-align:left;font-weight:600;font-size:.88rem;color:var(--tinta-3);   /* en caja normal: las mayúsculas espaciadas quedan solo para el total y el contacto */
  padding:var(--s-2) var(--s-3) var(--s-2) 0;border-bottom:1px solid var(--linea-fuerte);
}
table.arancel th.n,table.arancel td.valor{text-align:right}
table.arancel td{padding:var(--s-3) var(--s-3) var(--s-3) 0;border-bottom:1px solid var(--linea);vertical-align:top}
table.arancel td:last-child,table.arancel th:last-child{padding-right:0}
table.arancel tbody tr:hover td{background:var(--realce)}
table.arancel td.valor{font-weight:700;color:var(--tinta);white-space:nowrap;font-size:1.08rem}
table.arancel td .detalle{display:block;font-size:.88rem;color:var(--tinta-3);font-weight:400;font-family:var(--texto);margin-top:2px}

/* --- cotizador: tres categorías en paralelo, cada una desplegable -------- */
/* El markup lo genera assets/catalogo.js; acá solo el aspecto. */

.cotiz-categorias{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);align-items:start;margin-bottom:var(--s-6)}
.categoria{border:1px solid var(--linea);border-radius:var(--radio-caja);overflow:hidden;transition:border-color var(--t-estado) var(--curva)}
.categoria[open]{border-color:var(--linea-fuerte)}

.categoria-cabecera{
  display:flex;align-items:center;gap:var(--s-3);position:relative;
  font-family:var(--titular);font-weight:700;font-size:var(--t-0);color:var(--tinta);
  padding:var(--s-4) 44px var(--s-4) var(--s-5);cursor:pointer;list-style:none;
  transition:background-color var(--t-estado) var(--curva);
}
.categoria-cabecera:hover{background:var(--realce)}
.categoria-cabecera::-webkit-details-marker{display:none}
.categoria-cabecera::after{
  content:"";position:absolute;right:var(--s-5);top:50%;
  width:8px;height:8px;margin-top:-6px;
  border-right:1.5px solid var(--tinta-3);border-bottom:1.5px solid var(--tinta-3);
  transform:rotate(45deg);transition:transform var(--t-abrir) var(--curva);
}
.categoria[open] > .categoria-cabecera::after{transform:rotate(-135deg);margin-top:-2px;border-color:var(--tinta)}
.categoria-nombre{text-wrap:balance}
.categoria-cuenta{
  font-family:var(--titular);font-weight:700;font-size:.78rem;color:var(--sobre-acento);
  background:var(--acento-texto);padding:1px 7px;border-radius:var(--radio);line-height:1.5;font-variant-numeric:tabular-nums;
}

.categoria-cuerpo{padding:0 var(--s-5) var(--s-4)}

.item-fila{
  padding:var(--s-3) 0;border-top:1px solid var(--linea);
  display:grid;grid-template-columns:1fr auto;column-gap:var(--s-3);row-gap:2px;align-items:start;
}
.item-nombre{font-family:var(--titular);font-weight:600;font-size:.95rem;color:var(--tinta);margin:0;line-height:1.3}
.item-detalle{font-size:.8rem;color:var(--tinta-3);margin:0;line-height:1.3}
.item-precio{
  grid-column:2;grid-row:1;
  font-family:var(--titular);font-weight:700;font-size:.95rem;color:var(--tinta);
  font-variant-numeric:tabular-nums;white-space:nowrap;margin:0;
}
.item-cant{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.cant-btn{
  width:40px;height:40px;flex:0 0 auto;border:1px solid var(--borde-control);background:var(--superficie);
  color:var(--tinta);font-family:var(--titular);font-weight:700;font-size:1rem;line-height:1;
  border-radius:var(--radio);cursor:pointer;transition:background-color var(--t-estado) var(--curva),border-color var(--t-estado) var(--curva),color var(--t-estado) var(--curva);
}
.cant-btn:hover{border-color:var(--acento-texto);color:var(--sobre-acento);background:var(--acento-texto)}
.cant-input{
  width:44px;text-align:center;font-family:var(--titular);font-weight:700;font-size:16px; /* bajo 16 px, iOS hace zoom al tocar */
  color:var(--tinta);border:1px solid var(--borde-control);border-radius:var(--radio);padding:8px 2px;
  background:var(--superficie);font-variant-numeric:tabular-nums;
}
.cant-input:focus{border-color:var(--acento-texto);outline:none;box-shadow:0 0 0 3px var(--acento-anillo)}
.cant-input::-webkit-outer-spin-button,.cant-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cant-input[type=number]{-moz-appearance:textfield}

/* resultado: desglose + total. El total lleva el velo naranja de «lo decidido»: es el único lugar
   del sitio con un fondo de color, porque es lo único que se decide. */
.cotiz-resultado{
  display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:0;
  border:1px solid var(--linea-fuerte);border-radius:var(--radio-caja);overflow:hidden;
}
.cotiz-desglose{padding:var(--s-6);border-right:1px solid var(--linea)}
.cotiz-desglose h3{font-size:var(--t-1);font-weight:700;margin-bottom:var(--s-3)}
.cotiz-total{padding:var(--s-6);background:var(--decidido-velo);border-top:2px solid var(--decidido)}

.desglose-lista{list-style:none;margin:0;padding:0}
.desglose-item{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--linea)}
.desglose-lista li:last-child{border-bottom:0}
.d-nombre{font-family:var(--titular);font-weight:600;font-size:.96rem;color:var(--tinta);margin:0}
.d-cant{font-weight:500;color:var(--tinta-3)}
.d-detalle{font-size:.86rem;color:var(--tinta-3);margin:2px 0 0}
.d-valor{font-family:var(--titular);font-weight:700;color:var(--tinta);white-space:nowrap;font-variant-numeric:tabular-nums;flex:0 0 auto}
.desglose-vacio{font-size:.96rem;color:var(--tinta-3);padding:var(--s-2) 0}

.total-etq{font-family:var(--titular);font-weight:600;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--decidido);margin-bottom:var(--s-3)}
.total-cifra{font-family:var(--titular);font-weight:700;font-size:var(--t-6);line-height:.98;letter-spacing:-.028em;color:var(--decidido);font-variant-numeric:tabular-nums;margin-bottom:var(--s-3)}
.cotiz-total .nota{color:var(--tinta-3)}

/* --- preguntas: a la vista, lado a lado ------------------------------------ */
/* En la v4 eran doce acordeones cerrados: para leer una respuesta había que
   adivinar cuál abrir, y el buscador del navegador no encontraba lo que estaba
   plegado. Las respuestas son de una a tres frases, así que van abiertas. El
   tema a la izquierda, fijo mientras se lee su grupo; las preguntas a la
   derecha, separadas por una regla. */

.faq-grupo{
  display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);column-gap:var(--s-8);
  padding-block:var(--s-6) var(--s-7);border-top:1px solid var(--linea-fuerte);
}
.faq-grupo:first-child{padding-top:0;border-top:0}
.faq-grupo:last-child{padding-bottom:0}
.faq-grupo > h2{font-size:var(--t-2);align-self:start;position:sticky;top:92px}
.faq{display:grid;gap:0}
.pregunta{padding-block:0 var(--s-5);margin-bottom:var(--s-5);border-bottom:1px solid var(--linea)}
.pregunta:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.pregunta h3{font-size:var(--t-1);font-weight:700;margin-bottom:var(--s-2);text-wrap:balance}
.pregunta p{max-width:var(--medida);color:var(--tinta-2)}

/* --- el recorrido del caso (como-enviar) --------------------------------- */
/* Sin JavaScript: una lista vertical con los diez pasos abiertos. Con
   JavaScript (.con-js) en escritorio: una fila de diez números sobre una
   regla y, debajo, el panel del paso abierto. En móvil, acordeón. */

.recorrido{position:relative;display:grid;gap:0;border-top:1px solid var(--linea-fuerte)}
.recorrido-linea{display:none}
.recorrido-grupo{
  font-family:var(--titular);font-weight:600;font-size:.9rem;color:var(--tinta-3);
  margin:var(--s-5) 0 var(--s-2);
}
.paso{padding:0;border-bottom:1px solid var(--linea)} /* padding:0 anula el de section */
.paso-cabeza{margin:0;font-size:inherit;line-height:inherit}
.paso-boton{
  display:flex;align-items:center;gap:var(--s-4);width:100%;text-align:left;
  background:none;border:0;padding:var(--s-4) 0;cursor:pointer;font:inherit;color:var(--tinta);
}
.paso-boton:focus-visible{outline:2px solid var(--acento-texto);outline-offset:2px;border-radius:2px}
.paso-num{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;
  border-radius:var(--radio);background:var(--superficie);border:1px solid var(--borde-control);color:var(--tinta-3);
  font-family:var(--titular);font-weight:700;font-size:.96rem;font-variant-numeric:tabular-nums;
  transition:background-color var(--t-estado) var(--curva),color var(--t-estado) var(--curva),border-color var(--t-estado) var(--curva);
}
.paso-titulo{font-family:var(--titular);font-weight:600;font-size:var(--t-1);flex:1;line-height:1.25}
.paso-corto{display:none}
.recorrido.con-js .paso-boton::after{
  content:"";width:8px;height:8px;border-right:1.5px solid var(--tinta-3);border-bottom:1.5px solid var(--tinta-3);
  transform:rotate(45deg);margin:0 6px 4px 0;transition:transform var(--t-abrir) var(--curva);flex:0 0 auto;
}
.recorrido.con-js .paso-boton[aria-expanded="true"]::after{transform:rotate(-135deg);margin:4px 6px 0 0}
.paso-boton[aria-expanded="true"] .paso-num{background:var(--acento-texto);border-color:var(--acento-texto);color:var(--sobre-acento)}
.paso-boton[aria-expanded="true"] .paso-titulo{font-weight:700}
.paso-panel{padding:0 0 var(--s-5) calc(36px + var(--s-4))}
.paso-panel p{max-width:var(--medida)}
.paso-panel .marca-lista li{max-width:none}
.paso-panel-cabeza{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-3)}
.paso-panel-titulo{display:none}
.paso-dos{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s-6);align-items:start}
.paso-figura{margin:0}
.paso-figura svg{width:100%;height:auto;display:block;border-radius:var(--radio-caja)}
.paso-figura figcaption{font-family:var(--titular);font-size:.88rem;color:var(--tinta-3);margin-top:var(--s-2)}
/* el dibujo del escaneo: dos fichas de piedra, el arco en grafito y el vacío en carmesí (el color del error) */
.paso-figura .fig-fondo{fill:var(--piedra)}
.paso-figura .fig-trazo{stroke:var(--tinta)}
.paso-figura .fig-falta{stroke:var(--alerta)}
.paso-figura .fig-ok{fill:var(--tinta)}
.paso-figura .fig-mal{fill:var(--alerta)}
.paso-panel-cabeza .plazo{justify-self:auto;margin-left:auto}

/* paso 2: qué CBCT tomar */
.selector{border:1px solid var(--linea-fuerte);border-radius:var(--radio-caja);padding:var(--s-4) var(--s-5)}
.selector-titulo{font-family:var(--titular);font-weight:700;color:var(--tinta);margin:0 0 var(--s-3);font-size:var(--t-0)}
.selector-grupo{border:0;margin:0 0 var(--s-3);padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.selector-etq{font-family:var(--titular);font-weight:600;font-size:.94rem;color:var(--tinta-3);margin-right:4px}
.pildora{position:relative;display:inline-block}
.pildora input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pildora span{
  display:inline-block;padding:7px 14px;border-radius:var(--radio);border:1px solid var(--borde-control);
  background:var(--superficie);font-family:var(--titular);font-weight:600;font-size:.94rem;color:var(--tinta-2);cursor:pointer;
  transition:background-color var(--t-estado) var(--curva),color var(--t-estado) var(--curva),border-color var(--t-estado) var(--curva);
}
.pildora input:checked + span{background:var(--acento-velo);border-color:var(--acento-texto);box-shadow:inset 0 0 0 1px var(--acento-texto);color:var(--tinta)}
.pildora input:focus-visible + span{outline:2px solid var(--acento-texto);outline-offset:2px}
.selector-salida{margin:var(--s-3) 0 0;padding-top:var(--s-3);border-top:1px solid var(--linea);font-size:1rem;color:var(--tinta)}

/* paso 3: instrucciones según el computador */
.sistema{margin:var(--s-4) 0}
.sistema-botones{display:inline-flex;border:1px solid var(--borde-control);border-radius:var(--radio);padding:3px;margin-bottom:var(--s-3)}
.sistema-boton{border:0;background:none;font:inherit;font-family:var(--titular);font-weight:600;font-size:.94rem;padding:6px 16px;border-radius:2px;color:var(--tinta-3);cursor:pointer}
.sistema-boton[aria-pressed="true"]{background:var(--acento-texto);color:var(--sobre-acento)}
.sistema-boton:focus-visible{outline:2px solid var(--acento-texto);outline-offset:2px}
.sistema-pasos{margin:0;padding-left:22px;max-width:var(--medida)}
.sistema-pasos li{margin-bottom:6px;color:var(--tinta-2)}
.sistema-pasos li::marker{color:var(--tinta-3);font-weight:700}
.recorrido:not(.con-js) .sistema-botones{display:none}
.recorrido:not(.con-js) .sistema-pasos{margin-bottom:var(--s-4)}
.recorrido:not(.con-js) .sistema-pasos::before{content:attr(data-etq);display:block;margin:0 0 6px -22px;font-family:var(--titular);font-weight:700;color:var(--tinta)}

/* escritorio con JavaScript: la fila de números sobre la regla y el panel debajo.
   Desde 1.040 px y no desde 861: con Bricolage, «Despachamos» mide 102 px y bajo
   ~1.020 los rótulos vecinos se montan. Entre 861 y 1.039 va la lista desplegable
   de la tablet, que funciona igual. Si cambia la fuente, volver a medir. */
@media (min-width:1040px){
  .recorrido.con-js{grid-template-columns:repeat(10,minmax(0,1fr));column-gap:var(--s-2);row-gap:0;border-top:0}
  .recorrido.con-js .recorrido-linea{
    display:block;grid-row:2;grid-column:1/-1;align-self:start;height:1px;
    margin-top:calc(var(--s-3) + 18px);
    background:linear-gradient(90deg,var(--gris) 0%,var(--gris) 39%,var(--linea) 41%,var(--linea) 100%);
  }
  .recorrido.con-js .recorrido-grupo{grid-row:1;margin:0 0 var(--s-3)}
  .recorrido.con-js .recorrido-grupo--tu{grid-column:1/5}
  .recorrido.con-js .recorrido-grupo--nosotros{grid-column:5/11}
  .recorrido.con-js .paso{display:contents}
  .recorrido.con-js .paso-cabeza{grid-row:2;position:relative;z-index:var(--z-contenido)}
  .recorrido.con-js .paso:nth-of-type(1) .paso-cabeza{grid-column:1}
  .recorrido.con-js .paso:nth-of-type(2) .paso-cabeza{grid-column:2}
  .recorrido.con-js .paso:nth-of-type(3) .paso-cabeza{grid-column:3}
  .recorrido.con-js .paso:nth-of-type(4) .paso-cabeza{grid-column:4}
  .recorrido.con-js .paso:nth-of-type(5) .paso-cabeza{grid-column:5}
  .recorrido.con-js .paso:nth-of-type(6) .paso-cabeza{grid-column:6}
  .recorrido.con-js .paso:nth-of-type(7) .paso-cabeza{grid-column:7}
  .recorrido.con-js .paso:nth-of-type(8) .paso-cabeza{grid-column:8}
  .recorrido.con-js .paso:nth-of-type(9) .paso-cabeza{grid-column:9}
  .recorrido.con-js .paso:nth-of-type(10) .paso-cabeza{grid-column:10}
  .recorrido.con-js .paso-boton{flex-direction:column;gap:var(--s-2);padding:var(--s-3) 4px;text-align:center;border-radius:var(--radio)}
  .recorrido.con-js .paso-boton:hover .paso-num{border-color:var(--acento-texto);color:var(--acento-texto)}
  .recorrido.con-js .paso-boton::after{display:none}
  .recorrido.con-js .paso-num{flex-basis:auto;width:36px;height:36px}
  .recorrido.con-js .paso-titulo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .recorrido.con-js .paso-corto{display:block;font-family:var(--titular);font-weight:600;font-size:.88rem;color:var(--tinta-3);line-height:1.15}
  .recorrido.con-js .paso-boton[aria-expanded="true"] .paso-corto{color:var(--tinta);font-weight:700}
  .recorrido.con-js .paso-panel{
    grid-column:1/-1;margin-top:var(--s-4);
    border:1px solid var(--linea-fuerte);border-radius:var(--radio-caja);
    padding:var(--s-5) var(--s-6) var(--s-6);
  }
  .recorrido.con-js .paso-panel-titulo{display:block;font-family:var(--titular);font-weight:700;font-size:var(--t-2);color:var(--tinta);margin:0;line-height:1.2}
}

/* lista de verificación */
.verificacion{border:1px solid var(--linea-fuerte);border-radius:var(--radio-caja);padding:var(--s-5) var(--s-6)}
.verificacion-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-1) var(--s-5)}
.verificacion-lista label{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:10px 12px;border-radius:var(--radio);cursor:pointer;transition:background-color var(--t-estado) var(--curva)}
.verificacion-lista label:hover{background:var(--realce)}
.verificacion-lista input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--acento-texto);cursor:pointer}
.verificacion-lista span{font-size:1rem;color:var(--tinta-2);line-height:1.45}
.verificacion-lista input:checked + span{color:var(--tinta-3);text-decoration:line-through;text-decoration-color:var(--linea-fuerte)}
.verificacion-condicional{grid-column:1/-1;border-top:1px dashed var(--linea-fuerte);margin-top:var(--s-2);padding-top:var(--s-2)}
.verificacion-pie{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--linea)}
.verificacion-metal{display:inline-flex;align-items:center;gap:8px;font-family:var(--titular);font-weight:600;font-size:.94rem;color:var(--tinta-2);cursor:pointer}
.verificacion-metal input{width:18px;height:18px;accent-color:var(--acento-texto);cursor:pointer}
.verificacion-avance{margin:0 0 0 auto;font-family:var(--titular);font-weight:700;color:var(--tinta-3);font-variant-numeric:tabular-nums}
.verificacion-avance--listo{color:var(--decidido)}
.verificacion-acciones{display:flex;gap:var(--s-3);flex-wrap:wrap}

/* --- par de imágenes con marco de referencia ----------------------------- */

.imagenes-par{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-6)}
.marco-img{margin:0}
.marco-img .lugar{
  aspect-ratio:4 / 3;border:1px dashed var(--linea-fuerte);border-radius:var(--radio-caja);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--s-5);
}
.marco-img .lugar span{font-family:var(--titular);font-size:.96rem;line-height:1.5;color:var(--tinta-3)}
.marco-img img{display:block;width:100%;height:auto;border-radius:var(--radio-caja)}
.marco-img figcaption{font-size:.96rem;color:var(--tinta-2);line-height:1.5;padding-top:var(--s-3);border-top:1px solid var(--linea);margin-top:var(--s-3)}

/* --- avisos y marcador editorial ----------------------------------------- */

.aviso-inline{
  border-left:2px solid var(--acento-texto);background:var(--acento-velo);border-radius:0 var(--radio) var(--radio) 0;
  padding:var(--s-3) var(--s-4);font-size:.9rem;color:var(--tinta-2);margin-top:var(--s-3);max-width:560px;
}
.aviso-inline.alerta{border-left-color:var(--alerta);background:var(--alerta-fondo);color:var(--alerta-tinta)}

/* Contenido que Camlab debe aportar. Ver PENDIENTES.md. El empaquetador lo
   oculta al publicar; borrar el bloque .pendiente cuando se reemplace. */
.pendiente{
  border:1px dashed var(--alerta);background:var(--alerta-fondo);border-radius:var(--radio-caja);
  padding:var(--s-4) var(--s-5);color:var(--alerta-tinta);font-size:.96rem;
}
.pendiente b{font-family:var(--titular);display:block;margin-bottom:4px;color:var(--alerta)}
.doc .pendiente{margin-top:var(--s-8)}
.pendiente p:last-child{margin-bottom:0}

/* --- utilidades ----------------------------------------------------------- */

.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-9999px;background:var(--acento);color:var(--sobre-acento);padding:12px 18px;z-index:var(--z-saltar);font-family:var(--titular);font-weight:600}
.saltar:focus{left:var(--s-5);top:var(--s-3)}

/* ==========================================================================
   Formulario de caso — /solicitar.html
   Bloques numerados: el número y el título a la izquierda, los campos a la
   derecha, una regla entre bloque y bloque.
   ========================================================================== */

.bloque{
  display:grid;grid-template-columns:minmax(140px,200px) minmax(0,1fr);column-gap:var(--s-8);row-gap:0;
  border-top:1px solid var(--linea-fuerte);padding-block:var(--s-6) var(--s-8);
}
.bloque > *{grid-column:2;min-width:0}
.bloque > .bloque-cabeza{grid-column:1;grid-row:1 / span 60;align-self:start;position:sticky;top:92px}
.bloque-cabeza{display:flex;flex-direction:column;gap:var(--s-1);margin:0}
.bloque-num{
  font-family:var(--titular);font-weight:600;font-size:.75rem;letter-spacing:.18em;
  color:var(--tinta-3);font-variant-numeric:tabular-nums;
}
.bloque-cabeza h2{margin:0;font-size:var(--t-2)}
.bloque-lede{color:var(--tinta-3);margin:0 0 var(--s-5);max-width:58ch;font-size:.96rem}

.campo{margin-bottom:var(--s-5);max-width:560px}
.campo--ancho{max-width:880px} /* la lista de implantes con tres casillas necesita más ancho */
.campo:last-child{margin-bottom:0}
.campo > label,.campo-etiqueta{display:block;font-family:var(--titular);font-weight:600;font-size:.98rem;color:var(--tinta);margin:0 0 var(--s-2)}
fieldset.campo{border:0;padding:0;margin:0 0 var(--s-5);min-width:0}
fieldset.campo:last-child{margin-bottom:0}
legend.campo-etiqueta{float:left;width:100%;padding:0} /* el legend flotado se comporta como un bloque normal en todos los navegadores */
legend.campo-etiqueta + *{clear:both}
.campo .ayuda{font-size:.84rem;color:var(--tinta-3);margin:4px 0 0}
.campo .ayuda--previa{margin:0 0 var(--s-3)}   /* la ayuda que va antes de la lista, no debajo del campo */
.opciones-check + .ayuda{margin-top:var(--s-2)}
.campo input[type=text],.campo input[type=email],.campo input[type=tel],.campo input[type=date],.campo select,.campo textarea{
  width:100%;font-family:var(--texto);font-size:1rem;color:var(--tinta);
  padding:11px 13px;border:1px solid var(--borde-control);border-radius:var(--radio);background:var(--superficie);
  transition:border-color var(--t-estado) var(--curva),box-shadow var(--t-estado) var(--curva);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--acento-texto);outline:none;box-shadow:0 0 0 3px var(--acento-anillo)}
.campo textarea{resize:vertical;min-height:92px}
.campo ::placeholder{color:var(--tinta-3);opacity:1}   /* el de fábrica es un gris oscuro que sobre la superficie no llega a 4,5:1 */
.campo-fila{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);max-width:560px}
.campo-fila .campo{max-width:none}

.opciones-radio{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.opciones-radio label{
  display:flex;align-items:center;gap:9px;font-family:var(--titular);font-weight:600;font-size:.95rem;color:var(--tinta-2);
  border:1px solid var(--borde-control);padding:10px 15px;border-radius:var(--radio);cursor:pointer;background:var(--superficie);
  transition:border-color var(--t-estado) var(--curva),background-color var(--t-estado) var(--curva),color var(--t-estado) var(--curva);
}
.opciones-radio label:hover{border-color:var(--tinta-3)}
/* el círculo se dibuja con CSS: el radio nativo, en un color sobre la opción ya
   rellena de ese color, desaparecía, y la opción elegida parecía la única sin marcar */
.opciones-radio input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;margin:0;
  width:16px;height:16px;border-radius:50%;border:1.5px solid var(--borde-control);background:var(--piedra);
  transition:border-color var(--t-estado) var(--curva),box-shadow var(--t-estado) var(--curva);
}
.opciones-radio label:hover input{border-color:var(--tinta-3)}
.opciones-radio input:checked{border-color:var(--acento-texto);background:var(--acento-texto);box-shadow:inset 0 0 0 3px var(--superficie)}
.opciones-radio label:has(input:checked){border-color:var(--acento-texto);background:var(--acento-velo);box-shadow:inset 0 0 0 1px var(--acento-texto);color:var(--tinta)}
.opciones-radio label:has(input:focus-visible){outline:2px solid var(--acento-texto);outline-offset:2px}
.opciones-radio input:focus-visible{outline:none}

.check-linea{display:flex;align-items:flex-start;gap:10px;font-size:.94rem;color:var(--tinta-2);max-width:560px;cursor:pointer}
.check-linea input{margin-top:.3em;flex:0 0 auto;accent-color:var(--acento-texto)}

/* --- posición de implantes ------------------------------------------------ */

.implantes-lista{display:grid;gap:var(--s-3);margin-bottom:var(--s-3);max-width:560px}
.implante-fila{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:var(--s-3);align-items:center}
.implantes-lista--con-rehab{max-width:880px}
.implantes-lista--con-rehab .implante-fila{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.1fr) auto}
.implante-rehab{
  width:100%;font:inherit;font-size:1rem;line-height:normal;color:var(--tinta);background:var(--superficie); /* line-height: con font:inherit heredaba el 1,6 del texto y quedaba más alto que sus vecinos */
  border:1px solid var(--borde-control);border-radius:var(--radio);padding:11px 38px 11px 13px;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2358666F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.implante-rehab:focus{border-color:var(--acento-texto);outline:none;box-shadow:0 0 0 3px var(--acento-anillo)}
.implante-rehab:has(option:checked:not([value=""])){border-color:var(--tinta-3)}
.implante-tamano{
  width:100%;font-family:var(--texto);font-size:1rem;color:var(--tinta);
  padding:11px 13px;border:1px solid var(--borde-control);border-radius:var(--radio);background:var(--superficie);
  transition:border-color var(--t-estado) var(--curva),box-shadow var(--t-estado) var(--curva);
}
.implante-tamano:focus{border-color:var(--acento-texto);outline:none;box-shadow:0 0 0 3px var(--acento-anillo)}
.implante-quitar{
  flex:0 0 auto;background:none;border:0;padding:10px 6px;cursor:pointer;
  font-family:var(--titular);font-size:.84rem;color:var(--tinta-3);text-decoration:underline;text-underline-offset:.2em;
}
.implante-quitar:hover{color:var(--alerta)}
.implante-agregar{
  display:inline-flex;align-items:center;gap:9px;background:none;cursor:pointer;
  border:1px dashed var(--borde-control);border-radius:var(--radio);padding:10px 15px;
  font-family:var(--titular);font-weight:600;font-size:.94rem;color:var(--tinta);
  transition:border-color var(--t-estado) var(--curva),background-color var(--t-estado) var(--curva);
}
.implante-agregar:hover{border-color:var(--tinta-3);background:var(--realce)}
.implante-agregar-signo{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:2px;background:var(--acento-texto);color:var(--sobre-acento);font-size:.95rem;line-height:1;
}

.diente-select{position:relative}
.diente-boton{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--texto);font-size:1rem;color:var(--tinta);text-align:left;cursor:pointer;
  padding:11px 13px;border:1px solid var(--borde-control);border-radius:var(--radio);background:var(--superficie);
  transition:border-color var(--t-estado) var(--curva),box-shadow var(--t-estado) var(--curva);
}
.diente-boton:hover{border-color:var(--tinta-3)}
.diente-boton[aria-expanded="true"]{border-color:var(--acento-texto);box-shadow:0 0 0 3px var(--acento-anillo)}
.diente-boton::after{
  content:"";flex:0 0 auto;width:8px;height:8px;margin-bottom:3px;
  border-right:1.5px solid var(--tinta-3);border-bottom:1.5px solid var(--tinta-3);
  transform:rotate(45deg);transition:transform var(--t-abrir) var(--curva);
}
.diente-boton[aria-expanded="true"]::after{transform:rotate(-135deg);margin-bottom:-2px}
.diente-valor--vacio{color:var(--tinta-3)}
.diente-panel{
  position:absolute;z-index:var(--z-menu);top:calc(100% + 6px);left:0;right:0;
  max-height:280px;overflow-y:auto;padding:6px;
  background:var(--superficie);border:1px solid var(--borde-control);border-radius:var(--radio);
  box-shadow:0 16px 36px -16px rgba(31,42,51,.35);
}
.diente-grupo{font-family:var(--titular);font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);padding:9px 12px 4px;margin:0}
.diente-opcion{
  display:block;width:100%;text-align:left;cursor:pointer;background:none;border:0;
  font-family:var(--titular);font-size:.94rem;color:var(--tinta-2);padding:8px 12px;border-radius:2px;
}
.diente-opcion:hover,.diente-opcion:focus-visible{background:var(--acento-velo);color:var(--tinta)}
.diente-opcion[aria-selected="true"]{background:var(--acento-velo);font-weight:700;color:var(--acento-texto)}

/* extras de All on X: casillas con precio */
.opciones-check{display:grid;gap:var(--s-2)}
.opciones-check label{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 15px;border:1px solid var(--borde-control);border-radius:var(--radio);
  font-family:var(--titular);font-weight:600;color:var(--tinta-2);cursor:pointer;background:var(--superficie);
  transition:border-color var(--t-estado) var(--curva),background-color var(--t-estado) var(--curva);
}
.opciones-check label:hover{border-color:var(--tinta-3)}
.opciones-check label:has(input:checked){border-color:var(--acento-texto);background:var(--acento-velo);box-shadow:inset 0 0 0 1px var(--acento-texto);color:var(--tinta)}
.opciones-check input{width:20px;height:20px;accent-color:var(--acento-texto);margin:0}
.opcion-precio{margin-left:auto;font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums}

/* otras prestaciones, plegadas */
.otras{margin:var(--s-5) 0;border:1px dashed var(--borde-control);border-radius:var(--radio-caja)}
.otras summary{padding:13px 16px;font-family:var(--titular);font-weight:600;color:var(--tinta);cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
.otras summary::-webkit-details-marker{display:none}
.otras summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:2px;background:var(--acento-texto);color:var(--sobre-acento);font-weight:700;font-size:.95rem}
.otras[open] summary::before{content:"–"}
.otras-lista{display:grid;gap:4px;padding:0 16px 14px}
.otras-fila{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:8px 10px;border-radius:var(--radio);cursor:pointer}
.otras-fila:hover{background:var(--realce)}
.otras-check{width:20px;height:20px;accent-color:var(--acento-texto);margin:0}
.otras-nombre{font-size:.96rem;color:var(--tinta-2)}
.otras-precio{font-family:var(--titular);font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums;white-space:nowrap}
.otras-cant{width:60px;font:inherit;font-size:1rem;color:var(--tinta);background:var(--superficie);padding:6px 8px;border:1px solid var(--borde-control);border-radius:var(--radio);text-align:center}

/* el valor del caso, con el mismo aspecto que el total del cotizador */
.valor-caso{margin-top:var(--s-5)}
.valor-caso .cotiz-desglose h3{margin-top:0}
.valor-caso #valor-aviso{margin-top:var(--s-4);max-width:none}

.error-resumen{
  border-left:2px solid var(--alerta);background:var(--alerta-fondo);color:var(--alerta-tinta);border-radius:0 var(--radio) var(--radio) 0;
  padding:var(--s-4) var(--s-5);margin-bottom:var(--s-6);
}
.error-resumen p{margin:0 0 8px;font-family:var(--titular);font-weight:600}
.error-resumen ul{margin:0;padding-left:1.15em}
.error-resumen li{margin-bottom:4px}

/* el error, también en el campo: la lista de arriba dice qué falta, y el borde
   rojo dice dónde. Aparece de dos maneras: al tratar de revisar el caso con
   datos pendientes (el script le pone .form--revisado al formulario), o apenas
   se deja un campo mal escrito, como un email sin @ (:user-invalid, que el
   navegador activa recién cuando la persona ya pasó por el campo) */
.form--revisado .campo :is(input[type=text],input[type=email],input[type=tel],input[type=date],textarea):invalid,
.campo :is(input[type=email],input[type=date]):user-invalid{
  border-color:var(--alerta);background:var(--alerta-fondo);
}
.form--revisado .opciones-radio:has(input:invalid) label:not(:hover){border-color:var(--alerta)}
.form--revisado .check-linea:has(input:invalid){color:var(--alerta-tinta)}
.form--revisado .archivo-slot--falta .archivo-zona{border-color:var(--alerta);background:var(--alerta-fondo)}
.campo-error{display:none;font-size:.84rem;color:var(--alerta-tinta);margin:4px 0 0}
.campo:has(input[type=email]:user-invalid) .campo-error{display:block}

/* --- selector de archivos por casillero ---------------------------------- */

.archivos-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6)}
.archivo-slot{max-width:520px}
.archivo-slot-nombre{font-family:var(--titular);font-weight:600;font-size:.98rem;color:var(--tinta);margin:0}
/* «obligatorio» en texto, no como etiqueta roja en mayúsculas: que falte un
   archivo no es un error hasta que se intenta revisar el caso */
.archivo-slot-nombre .req{color:var(--tinta-3);font-weight:500;font-size:.84rem;margin-left:6px}
.archivo-slot-nombre .req::before{content:"· "}
.archivo-slot-ayuda{font-size:.84rem;color:var(--tinta-3);margin:3px 0 var(--s-3);line-height:1.4}

.archivo-zona{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
  min-height:84px;padding:var(--s-3) var(--s-4);
  border:1px dashed var(--borde-control);background:var(--superficie);
  cursor:pointer;border-radius:var(--radio-caja);
  transition:border-color var(--t-estado) var(--curva),background-color var(--t-estado) var(--curva);
}
.archivo-zona:focus-visible,.archivo-zona:hover{border-color:var(--acento-texto);background:var(--acento-velo)}
.archivo-zona--activo{border-color:var(--acento-texto);background:var(--acento-velo)}
.archivo-zona-texto{font-family:var(--titular);font-size:.9rem;color:var(--tinta-3)}
.archivo-zona-texto strong{color:var(--tinta);font-weight:600;text-decoration:underline;text-decoration-color:var(--borde-control);text-underline-offset:.25em}
.archivo-zona:hover .archivo-zona-texto strong{text-decoration-color:var(--acento-texto)}
.archivo-lista{display:grid;gap:8px;width:100%}
.archivo-chip{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  width:100%;padding:10px 13px;background:var(--superficie);border:1px solid var(--borde-control);border-radius:var(--radio);text-align:left;
}
.archivo-chip-nombre{font-family:var(--titular);font-weight:600;font-size:.88rem;color:var(--tinta);margin:0;overflow-wrap:anywhere}
.archivo-chip-peso{font-size:.78rem;color:var(--tinta-3);margin:2px 0 0;font-variant-numeric:tabular-nums}
.archivo-chip-quitar{
  flex:0 0 auto;background:none;border:0;color:var(--tinta-3);font-family:var(--titular);
  font-size:.8rem;text-decoration:underline;text-underline-offset:.2em;cursor:pointer;padding:8px 0 8px 8px;
}
.archivo-chip-quitar:hover{color:var(--alerta)}

/* --- botón final, resumen, envío y recibido ------------------------------ */

.bloque-envio{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;padding-block:var(--s-6) 0}
.estado-envio{margin:0;font-size:.94rem;color:var(--tinta-3);line-height:1.5;max-width:46ch}
.estado-envio--listo{color:var(--decidido);font-weight:600}
.btn--listo::before{content:"✓";font-weight:700}

.resumen{border:1px solid var(--linea-fuerte);padding:var(--s-7);border-radius:var(--radio-caja);margin-top:var(--s-6)}
.resumen h2{font-size:var(--t-3)}
.resumen-titulo{margin-bottom:var(--s-5)}
.resumen-notas{color:var(--tinta-2);font-size:.94rem}
.resumen .aviso-inline{max-width:none;margin-top:var(--s-6)}
/* columnas, no grilla: el script escribe <dt> y <dd> sueltos, y en una grilla
   el rótulo caía en una celda y su valor en la siguiente. Con `columns` cada
   valor queda bajo su rótulo, y break-after:avoid impide que la columna los separe. */
.resumen-datos{columns:3;column-gap:var(--s-7);margin:0 0 var(--s-6)}
.resumen-datos dt{font-family:var(--titular);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);margin:0 0 3px;break-after:avoid;break-inside:avoid}
.resumen-datos dd{margin:0 0 var(--s-4);font-family:var(--titular);font-weight:600;color:var(--tinta);font-size:.96rem;break-inside:avoid}
.resumen-bloque{margin-bottom:var(--s-5)}
.resumen-bloque h3{font-size:.75rem;font-family:var(--titular);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:var(--s-2)}
.resumen-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.resumen-lista li{font-size:.94rem;color:var(--tinta-2);padding:6px 0;border-bottom:1px solid var(--linea)}
.resumen-lista li.resumen-total{font-weight:600;color:var(--tinta)}   /* antes, estilo en línea desde el script */

/* envío real: barra de avance y pantalla de caso recibido */
.envio{margin-top:var(--s-5);padding:var(--s-5);background:var(--superficie);border:1px solid var(--linea-fuerte);border-radius:var(--radio-caja)}
.envio-titulo{font-family:var(--titular);font-weight:700;color:var(--tinta);margin:0 0 var(--s-3)}
.envio-barra{height:8px;border-radius:2px;background:var(--piedra);border:1px solid var(--linea-fuerte);overflow:hidden}
.envio-barra-relleno{height:100%;width:0;background:var(--acento-texto);transition:width .3s linear}
.envio-detalle{margin:var(--s-3) 0 0;font-size:.94rem;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.envio #envio-error{margin-top:var(--s-3);max-width:none}
.enviado{text-align:center}
.enviado-marca{
  display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--radio);
  background:var(--decidido);color:var(--sobre-acento);font-size:1.6rem;font-weight:700;margin:0 auto var(--s-4);
}
.enviado .lede,.enviado p{max-width:52ch;margin-inline:auto}
.enviado .btn-grupo{justify-content:center}

/* ==========================================================================
   Movimiento
   Nada aparece ni se desplaza solo: el sitio se lee para decidir. Solo
   estados (foco, hover, abierto) y el fundido corto entre páginas.
   ========================================================================== */

/* hover solo con puntero: en pantallas táctiles no hay estado intermedio */
@media (hover:hover){
  .nav a:not(.btn):hover{color:var(--tinta)}
  .caso-boton:hover img{border-color:var(--acento-texto)}
  .caso-boton:hover .caso-titulo{color:var(--acento-texto)}
}

/* el despiece se abre con el scroll, no con el reloj. En la v6 se abre más
   despacio y acompaña más tramo de la página (pedido de Francisco, 27 de
   septiembre): las capas se separan a lo largo de 120vh de scroll, más o menos
   el hero entero y el comienzo de «Cómo funciona», en vez de los 300 px de la
   v4. Ya no se apaga por opacidad: desde el 29 de septiembre lo tapa la línea
   bajo el título de «Cómo funciona» (ver «dónde se desvanece el despiece»).
   En vh y no en px para que el ritmo sea el mismo en una pantalla baja y en
   una alta. Sin soporte de
   scroll-timeline (hoy, Firefox) o con «reducir movimiento», las capas se
   quedan quietas en la posición del render, que ya se ve bien. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: scroll()){
    .hd-capa{
      animation-timeline:scroll(root block);
      animation-range:0 120vh;
      animation-fill-mode:both;
      animation-timing-function:cubic-bezier(.3,.1,.4,1);   /* arranca suave y llega sin frenazo */
    }
    .hd-hueso          {animation-name:hd-hueso}
    .hd-maestra        {animation-name:hd-maestra}
    .hd-implantes      {animation-name:hd-implantes}
    .hd-posicionamiento{animation-name:hd-posicionamiento}
    .hd-provisorios    {animation-name:hd-provisorios}
  }
}
/* de la pila cerrada al despiece: las capas de los extremos son las que más
   viajan, así el conjunto se lee como algo que se abre y no como algo que se
   desliza. Solo transform: no hay reflujo ni repintado de layout. */
/* Hasta dónde se abre (29 de septiembre, pedido de Francisco con una captura:
   «que solo se despliegue hasta la línea verde»). El borde inferior de los
   provisorios termina en 99,7 % del marco: a 96 px de la cabecera más
   99,7 × 5,6 px, unos 654 px desde el borde de arriba de la ventana, que en
   su pantalla es la regla bajo «Cómo funciona». Antes llegaba a 116 % (747 px).
   El conjunto abierto queda casi en la posición del render, con unos 3 % del
   marco (17 px) de aire extra entre capa y capa, parejo. La pila cerrada de
   partida no cambia. Si se cambia el marco (560 px) o su `top`, rehacer la
   cuenta: bottom = top + (95,2 + to de provisorios) % del marco. */
@keyframes hd-hueso{
  from{transform:translateY(calc(var(--u) * 19)) scale(.97)}
  to  {transform:translateY(calc(var(--u) * -6)) scale(1)}
}
@keyframes hd-maestra{
  from{transform:translateY(calc(var(--u) * 11)) scale(.98)}
  to  {transform:translateY(calc(var(--u) * -3)) scale(1)}
}
@keyframes hd-implantes{
  from{transform:translateY(calc(var(--u) * 1))}
  to  {transform:translateY(calc(var(--u) * -.5))}
}
@keyframes hd-posicionamiento{
  from{transform:translateY(calc(var(--u) * -7)) scale(.98)}
  to  {transform:translateY(calc(var(--u) * 2)) scale(1)}
}
@keyframes hd-provisorios{
  from{transform:translateY(calc(var(--u) * -16)) scale(.97)}
  to  {transform:translateY(calc(var(--u) * 4.5)) scale(1)}
}

/* entre páginas: fundido corto del contenido; cabecera y pie se quedan quietos */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
.encabezado{view-transition-name:cabecera}
.pie{view-transition-name:pie}
::view-transition-old(cabecera),::view-transition-new(cabecera),
::view-transition-old(pie),::view-transition-new(pie){animation:none}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  @view-transition{navigation:none}
}

/* --- barra fija de «Enviar un caso» en móvil ----------------------------- */
/* La cabecera es estática bajo 860 px (fija ocuparía un tercio de la pantalla),
   así que el botón principal vuelve abajo, quieto, en las páginas que no son
   el formulario. */

.cta-movil{display:none}
@media (max-width:860px){
  .cta-movil{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-barra);
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--superficie);border-top:1px solid var(--linea-fuerte);
  }
  .cta-movil .btn{width:100%}
  body:has(.cta-movil){padding-bottom:70px} /* que el pie no quede tapado */
  html.visor-abierto .cta-movil{display:none}
}

/* --- las capas del despiece, solo de 861 px para arriba --------------------- */
@media (min-width:861px){
  .hd-hueso          {background-image:url("despiece/hueso.webp")}
  .hd-maestra        {background-image:url("despiece/maestra.webp")}
  .hd-implantes      {background-image:url("despiece/implantes.webp")}
  .hd-posicionamiento{background-image:url("despiece/posicionamiento.webp")}
  .hd-provisorios    {background-image:url("despiece/provisorios.webp")}
}

/* --- impresión: el arancel como lista de precios ------------------------- */

/* --- piso táctil de 44 px (directrices de marca, 29 de septiembre de 2026) ---------- */
/* Las zonas que se tocan con el pulgar miden 44 px de alto como mínimo. El enlace del
   logo crece hacia su propio relleno (margen negativo) para no agrandar la cabecera. */
@media (max-width:860px){
  .marca{padding-block:10px;margin-block:-10px}
  .nav a:not(.btn){padding:10px 3px}
  .nav .btn{min-height:44px}
  .pie a{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
  .contacto-lista a,.miga a{display:inline-flex;align-items:center;min-height:44px}   /* el correo del cierre y el «← Cómo enviar un caso» del protocolo */
}
@media (max-width:860px),(pointer:coarse){
  .btn{min-height:44px}
  .cant-btn{width:44px;height:44px}
  .cant-input{height:44px}
  .implante-agregar{min-height:44px}
  .check-linea{min-height:44px;align-items:center}
  .check-linea input{margin-top:0}
}
/* los enlaces se subrayan siempre: el correo del pie es un enlace y también lleva subrayado */
.pie .contacto-lista a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}

@media print{
  :root{color-scheme:light;--piedra:#fff;--superficie:#fff;--fondo:#fff;--tinta:#000;--tinta-2:#111;--tinta-3:#444;--linea:rgba(0,0,0,.18);--linea-fuerte:rgba(0,0,0,.4);--borde-control:rgba(0,0,0,.5);--realce:transparent;--decidido:#000;--decidido-velo:transparent}
  .encabezado,.pie,.cierre,.btn,.btn-grupo,.cta-movil,#cotizador-host,.saltar,.pendiente{display:none!important}
  .hero-despiece{display:none}
  body{background:#fff;color:#000}
  section{padding-block:24px;border:0}
  table.arancel{page-break-inside:avoid}
  .tabla-envoltorio{overflow:visible}
  details{display:block}
  details > *{display:block}
  a{color:inherit;text-decoration:none}
}

/* --- notas y rótulos con más cuerpo ------------------------------------------ */
/* Herencia de la v7, donde el texto chico y fino sobre fondo oscuro se veía más delgado de lo que mide: las notas
   suben de 400 a 500 y un punto de tamaño, y los rótulos en mayúsculas de 12 a 12,8 px
   (el piso de 12 px sigue). Va casi al final para ganarle a las reglas de cada componente. */
.nota,.campo .ayuda,.bloque-lede,.archivo-slot-ayuda,.item-detalle,.d-detalle,table.arancel td .detalle,.pie .nota,.pie-legal,.paso-figura figcaption,.resumen-datos dt,.version,.destino-texto,.estado-envio{font-weight:500}   /* solo los que estaban en 400; los rótulos en 600 se quedan como están */
.nota,.campo .ayuda,.bloque-lede,.archivo-slot-ayuda{font-size:.9rem}
.item-detalle,.caso-prestacion,.caso-cuenta,.d-detalle{font-size:.88rem}
.etiqueta,.diente-grupo,.resumen-datos dt,.resumen-bloque h3,.total-etq,.bloque-num{font-size:.8rem}

/* ==========================================================================
   Adaptación
   ≥1100 escritorio · 861–1099 portátil chico · 561–860 tablet · ≤560 teléfono
   ========================================================================== */

@media (max-width:980px){
  .cotiz-resultado{grid-template-columns:1fr}
  .cotiz-desglose{border-right:0;border-bottom:1px solid var(--linea)}
  .pie-grid{grid-template-columns:1fr 1fr;gap:var(--s-6)}
  .pie-grid > :first-child{grid-column:1 / -1}
  .cierre-grid{grid-template-columns:1fr;gap:var(--s-6)}
  .pasos-breve li{grid-template-columns:minmax(0,20ch) minmax(0,1fr) auto}
}

@media (max-width:860px){
  :root{--s-9:56px;--s-8:44px;--cabecera:107px}
  html{scroll-padding-top:var(--s-4)}
  /* con dos filas de navegación, fija ocuparía un tercio de la pantalla */
  .encabezado{position:static}
  .encabezado .wrap{flex-wrap:wrap;gap:var(--s-3)}
  .nav{width:100%;margin-left:0;flex-wrap:wrap;gap:var(--s-4)}
  .nav .btn{margin-left:0}
  .hero-despiece{display:none}
  .paso-dos{grid-template-columns:1fr}
  .verificacion-lista{grid-template-columns:1fr}
  .verificacion{padding:var(--s-4) var(--s-5)}
  .verificacion-avance{margin-left:0;flex-basis:100%}
  /* el destacado pasa arriba, a todo el ancho y en su proporción; los otros dos, debajo, lado a lado */
  .casos{grid-template-columns:1fr 1fr;gap:var(--s-6) var(--s-5)}
  .casos > li:first-child{grid-row:auto;grid-column:1 / -1}
  .casos > li:first-child .caso-boton img{flex:none;aspect-ratio:560/440}
  .faq-grupo{grid-template-columns:1fr;row-gap:var(--s-4)}
  .faq-grupo > h2{position:static}
  .visor-cabeza,.visor-figura figcaption,.visor-puntos,.visor-nota{padding-left:var(--s-4);padding-right:var(--s-4)}
  .visor-puntos button{width:64px}
  .visor-figura img{height:min(56vh,96vw);height:min(56dvh,96vw)}   /* en el teléfono, un marco casi cuadrado: ni las verticales ni las apaisadas quedan diminutas */
  .requisitos{grid-template-columns:1fr;row-gap:var(--s-6)}
  .cotiz-categorias{grid-template-columns:1fr;gap:var(--s-4)}
  .imagenes-par{grid-template-columns:1fr;gap:var(--s-5)}
  .bloque{grid-template-columns:1fr;row-gap:var(--s-5);padding-block:var(--s-5) var(--s-7)}
  .bloque > .bloque-cabeza{grid-row:auto;position:static;flex-direction:row;align-items:baseline;gap:var(--s-3)}
  .bloque > *{grid-column:1}
  .campo-fila{grid-template-columns:1fr}
  .archivos-grid{grid-template-columns:1fr}
  .implante-fila{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s-2)}
  .implante-fila .diente-select{grid-column:1 / -1}
  .implantes-lista--con-rehab .implante-fila{grid-template-columns:minmax(0,1fr) auto}
  .implantes-lista--con-rehab .implante-fila .implante-rehab{grid-column:1 / -1}
  .otras-fila{grid-template-columns:22px minmax(0,1fr);row-gap:4px}
  .otras-precio,.otras-cant{grid-column:2}
  .resumen-datos{columns:2}
  .resumen{padding:var(--s-5)}
}

@media (max-width:560px){
  :root{--cabecera:162px}   /* con Bricolage el menú ocupa tres filas en todo este tramo (162-163 px, medido a 560, 480 y 390, con los enlaces del menú a 44 px) */
  #visor-pie{min-height:6em}   /* cuatro renglones: a este ancho el pie más largo ocupa cuatro */
  .nav{font-size:.92rem;gap:var(--s-3) var(--s-4)}
  .hero .lede{margin-bottom:var(--s-5)}
  .hero .rail{margin-top:var(--s-7)}
  .hero .btn-grupo .btn{flex:1 1 auto}
  .rail{grid-template-columns:1fr;gap:0}
  .dato{padding:var(--s-4) 0}
  .dato + .dato{border-top:1px solid var(--linea)}
  .dato-valor{font-size:2.6rem}
  .dato-etq{padding-top:var(--s-2);max-width:none}
  .pasos-breve li{grid-template-columns:1fr auto;row-gap:var(--s-2)}
  .pasos-breve p{grid-column:1 / -1}
  .paso-panel{padding-left:0}
  .paso-boton{padding:var(--s-3) 0}
  .paso-titulo{font-size:var(--t-0)}
  .pie-grid{grid-template-columns:1fr}
  .casos{grid-template-columns:1fr}
  .controles{grid-template-columns:1fr;row-gap:var(--s-3)}
  .controles li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);column-gap:var(--s-4);align-items:start;padding-block:var(--s-4)}
  .controles li.control--tuyo{padding-inline:var(--s-4)}
  .control-num{font-size:3rem;margin:0}
  .control-texto{max-width:none}
  .casos > li:first-child .caso-titulo{font-size:1.32rem}
  .resumen-datos{columns:1}
  table.arancel{font-size:.95rem}
}