/* ===========================================================================
   prevencion-online.es — hoja de estilo unica
   Centro Medico Siglo XXI, S.L.

   POR QUE ESTE ASPECTO Y NO OTRO
   Pedro pidio "moderno, serio y DISTINTO" a sus demas webs. Las otras dos
   referencias de la casa son:
     - tpcmetal.es      : editorial oscuro, tipografia Bodoni, acento naranja.
     - prevencionmadrid : tarjetas redondeadas con sombra, azul corporativo.
   Aqui se va por el lado contrario a las dos: papel blanco, reticula de
   lineas de 1 px, CERO sombras en el contenido, una sola tipografia (Inter)
   y un unico acento verde. La referencia visual es un informe tecnico, no
   un folleto: es lo que encaja con vender un servicio de prevencion.

   UNA SOLA HOJA. Un segundo CSS es una peticion mas que bloquea el pintado;
   la leccion esta escrita en el CSS de tpcmetal y aqui se aplica de entrada.
   =========================================================================== */

/* --- 1. TIPOGRAFIA -------------------------------------------------------
   Inter variable, servida desde nuestro dominio. Un solo fichero cubre los
   pesos 100-900: declarar pesos sueltos acaba bajando el mismo .woff2
   varias veces (paso en tpcmetal, 241 KB para usar 48). */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(/fuentes/inter-variable-latin.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:100 900; font-display:swap;
  src:url(/fuentes/inter-variable-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- 2. VARIABLES --------------------------------------------------------
   Los nombres --ember / --paper-cold / --steel se conservan tal cual porque
   el banner de cookies (apartado 15) viene copiado de tpcmetal y los usa.
   Cambiarles el nombre obligaria a tocar un codigo que ya esta probado. */
:root{
  --ink:#0B1B2B;          /* texto y bandas oscuras */
  --ink-soft:#56697B;     /* texto secundario */
  --paper:#FFFFFF;
  --paper-cold:#E2E9EE;   /* TODAS las lineas de la reticula */
  --soft:#F4F7F9;         /* fondo de seccion alterna */
  --ember:#0E7C66;        /* acento unico */
  --ember-deep:#0A5C4B;
  --steel:#C3CDD6;
  --aviso:#9A3412;        /* solo para "esto NO esta incluido" */
  --font-text:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-display:var(--font-text);
  --ancho:1160px;
  --gutter:clamp(20px,5vw,48px);
  --space:clamp(56px,8vw,104px);
}

/* --- 3. BASE ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-text); font-size:1.0625rem; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;   /* que los precios cuadren en columna */
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--ember); text-underline-offset:3px; }
a:hover{ color:var(--ember-deep); }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0 0 .5em; line-height:1.15; letter-spacing:-.022em; font-weight:700; }
h1{ font-size:clamp(2.1rem,5.2vw,3.55rem); letter-spacing:-.035em; }
h2{ font-size:clamp(1.55rem,3.4vw,2.3rem); letter-spacing:-.028em; }
h3{ font-size:1.135rem; font-weight:660; letter-spacing:-.012em; }
p{ margin:0 0 1.1em; }
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; border-radius:2px; }
.salto{ position:absolute; left:-9999px; }
/* Titulo que solo leen los lectores de pantalla. Hace falta para que los
   encabezados vayan en orden: en la portada habia un h1 y justo despues los
   h3 del resumen de pasos, saltandose el h2. */
.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.salto:focus{ left:16px; top:12px; z-index:10000; background:var(--ink); color:#fff; padding:12px 18px; border-radius:2px; }

/* --- 4. REJILLA ---------------------------------------------------------- */
.env{ max-width:var(--ancho); margin:0 auto; padding-inline:var(--gutter); }
.sec{ padding-block:var(--space); border-top:1px solid var(--paper-cold); }
.sec--soft{ background:var(--soft); }
.sec--ink{ background:var(--ink); color:#E8EEF3; border-top:0; }
.sec--ink h2,.sec--ink h3{ color:#fff; }
.sec--ink a{ color:#6FD3BB; }
.dos{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:start; }
.tres{ display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:1px; background:var(--paper-cold); border:1px solid var(--paper-cold); }
.tres > *{ background:var(--paper); padding:clamp(22px,3vw,32px); margin:0; }
.sec--soft .tres > *{ background:var(--soft); }
/* OJO: minmax(0,1fr) y NO 1fr a secas. Un "1fr" pelado deja la columna con
   min-width:auto, y entonces la tabla de precios -que tiene min-width:520px
   para que quepan las cinco columnas- estira la rejilla y saca la pagina
   entera de la pantalla del movil. Medido: se salian 167 px. El
   overflow-x:auto de .tabla-caja no basta si la columna que la contiene
   puede crecer. Lo mismo en .portada__g. */
@media (max-width:860px){ .dos{ grid-template-columns:minmax(0,1fr); } }
.tabla-caja{ min-width:0; max-width:100%; }
/* La tabla de empresas tiene cinco columnas y no cabe en media pagina: en
   escritorio se le da mas sitio que a la de autonomos, que solo tiene dos. */
@media (min-width:861px){ .dos--precios{ grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); } }

/* LOS DOS BOTONES DE "VER EL DETALLE", A LA MISMA ALTURA.
   Antes el de empresas caia mas abajo porque su columna lleva una linea de
   texto de mas. No se arregla con margenes: las dos columnas se estiran a la
   misma altura (align-items:stretch) y el boton de cada una se empuja al
   fondo con margin-top:auto. Asi siguen cuadrados aunque maniana cambie el
   texto de cualquiera de los dos. */
.dos--precios{ align-items:stretch; }
.dos--precios > div{ display:flex; flex-direction:column; }
.dos--precios > div > .botones{ margin-top:auto; }
/* Y LAS DOS CAJAS, IGUAL DE ALTAS.
   Con el mismo numero de filas seguian descuadradas, porque en la columna
   estrecha el texto se parte en dos lineas. Se arregla estirando la CAJA, no
   la tabla.
   OJO, probado y descartado: poner height:100% a la tabla parecia mas
   elegante, pero empujaba la ultima fila -el "Total anual 200 EUR"- fuera
   del recorte de .tabla-caja, que tiene overflow. Se veia en la captura: la
   fila del total desaparecia. Que la caja crezca y le sobre hueco abajo es
   feo de menos y no esconde ningun dato. */
@media (min-width:861px){
  .dos--precios > div > .tabla-caja{ flex:1 1 auto; }
}

/* --- 5. MARCAS DE TEXTO -------------------------------------------------- */
.rotulo{
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ember); margin:0 0 14px; display:flex; align-items:center; gap:10px;
}
.rotulo::before{ content:""; width:26px; height:2px; background:var(--ember); flex:0 0 auto; }
.sec--ink .rotulo{ color:#6FD3BB; } .sec--ink .rotulo::before{ background:#6FD3BB; }
.entrada{ font-size:clamp(1.06rem,1.9vw,1.25rem); line-height:1.6; color:var(--ink); }
.apunte{ font-size:.9rem; color:var(--ink-soft); line-height:1.6; }
.sec--ink .apunte{ color:#9FB3C4; }

/* --- 6. CABECERA --------------------------------------------------------- */
.cab{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:blur(9px); border-bottom:1px solid var(--paper-cold); }
.cab__in{ max-width:var(--ancho); margin:0 auto; padding:14px var(--gutter); display:flex; align-items:center; gap:22px; }
.marca{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); font-weight:700; letter-spacing:-.02em; font-size:1.02rem; margin-right:auto; }
.marca__m{ width:30px; height:30px; flex:0 0 auto; }
.marca small{ display:block; font-weight:500; font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-soft); }
.nav{ display:flex; gap:26px; align-items:center; }
.nav a{ color:var(--ink); text-decoration:none; font-size:.9rem; font-weight:520; padding:6px 0; border-bottom:2px solid transparent; }
.nav a:hover,.nav a[aria-current="page"]{ color:var(--ember); border-bottom-color:var(--ember); }
@media (max-width:900px){ .nav{ display:none; } }

/* --- 7. BOTONES ---------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-text); font-size:.94rem; font-weight:640; letter-spacing:.005em;
  padding:15px 30px; border-radius:2px; border:1px solid var(--ember);
  background:var(--ember); color:#fff; text-decoration:none; cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{ background:var(--ember-deep); border-color:var(--ember-deep); color:#fff; }

/* ZOOM DEL 15 % AL PASAR EL CURSOR (lo pidio Pedro el 11/09/2026).
   Va dentro de @media (hover:hover) a proposito: en un movil el :hover se
   queda "pegado" despues de tocar y el boton se quedaria grande.
   El z-index es necesario: al crecer un 15 %, dos botones seguidos se
   solapan, y sin el se verian cortados por el de al lado. */
@media (hover:hover){
  .btn,.ck-btn{ position:relative; transform:scale(1); transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease; }
  .btn:hover,.btn:focus-visible,.ck-btn:hover,.ck-btn:focus-visible{ transform:scale(1.15); z-index:2; }
}
@media (prefers-reduced-motion:reduce){
  .btn:hover,.ck-btn:hover{ transform:none; }
}
.btn--linea{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--linea:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.sec--ink .btn--linea{ color:#fff; border-color:rgba(255,255,255,.45); }
.sec--ink .btn--linea:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.botones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

/* --- 8. PORTADA ---------------------------------------------------------- */
.portada{ padding-block:clamp(48px,7vw,84px) clamp(40px,6vw,72px); }
.portada__g{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(32px,5vw,72px); align-items:center; }
@media (max-width:940px){ .portada__g{ grid-template-columns:minmax(0,1fr); } }
.portada h1 .verde{ color:var(--ember); }
/* Linea de confianza de la portada: "Mas de 1.800 empresas confian en
   nosotros". Va pegada a los botones, no dentro de la tira de cifras: es una
   frase, no un dato de tarifa. */
.confianza{
  display:flex; align-items:center; gap:11px;
  margin:22px 0 0; font-size:.97rem; color:var(--ink);
}
.confianza::before{
  content:""; flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  background:var(--ember);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tira{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--paper-cold); margin-top:30px; }
.tira div{ flex:1 1 150px; padding:14px 18px; border-right:1px solid var(--paper-cold); }
.tira div:last-child{ border-right:0; }
.tira b{ display:block; font-size:1.28rem; letter-spacing:-.02em; }
.tira span{ font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }

/* --- 9. PASOS (la reticula numerada, la firma de esta web) --------------- */
.pasos{ counter-reset:p; display:grid; gap:1px; background:var(--paper-cold); border:1px solid var(--paper-cold); }
.paso{ background:var(--paper); padding:clamp(22px,3vw,30px) clamp(22px,3vw,34px); display:grid; grid-template-columns:64px minmax(0,1fr); gap:8px 22px; align-items:start; margin:0; }
.sec--soft .paso{ background:var(--soft); }
.paso::before{
  counter-increment:p; content:counter(p,decimal-leading-zero);
  grid-row:1 / span 2; font-size:1.5rem; font-weight:700; color:var(--ember);
  letter-spacing:-.03em; line-height:1.1;
}
.paso h3{ margin:0 0 4px; }
.paso p{ margin:0; color:var(--ink-soft); font-size:.97rem; }
@media (max-width:560px){ .paso{ grid-template-columns:44px minmax(0,1fr); gap:6px 14px; } }

/* --- 10. TABLAS DE PRECIO ------------------------------------------------ */
/* --- LOS CUADROS DE PRECIOS Y SU LASER AZUL ------------------------------
   Pedro pidio (11/09/2026) "un efecto laser azul alrededor al pasar el
   cursor". Se hace con un conic-gradient girando en el BORDE, no con un
   pseudoelemento: .tabla-caja tiene overflow-x, y un ::before por fuera se
   quedaria recortado por ese mismo overflow.

   El giro lo lleva la variable --giro, registrada abajo con @property (sin
   registrar, una variable de angulo no se puede animar). Se declara ademas
   un valor normal en la propia clase para que, en un navegador antiguo que
   no entienda @property, el conic-gradient siga siendo valido: se ve el
   borde azul quieto en vez de desaparecer el borde entero.

   El borde es de 2 px SIEMPRE, encendido o apagado. Si solo creciera al
   pasar el cursor, la tabla daria un salto de 1 px. */
.tabla-caja{
  --giro:0deg;
  overflow-x:auto; border:2px solid var(--paper-cold);
  transition:box-shadow .3s ease, border-color .3s ease;
}
@media (hover:hover){
  .tabla-caja:hover{
    border-color:transparent;
    border-image:conic-gradient(from var(--giro),
        rgba(30,144,255,.28) 0deg 175deg, #1E90FF 245deg,
        #B6E0FF 282deg, #1E90FF 315deg, rgba(30,144,255,.28) 350deg 360deg) 1;
    box-shadow:0 0 24px rgba(30,144,255,.45);
    animation:laser 2.2s linear infinite;
  }
}
@property --giro{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes laser{ to{ --giro:360deg; } }
@media (prefers-reduced-motion:reduce){
  .tabla-caja:hover{ animation:none; }
}
table.precios{ width:100%; border-collapse:collapse; font-size:.97rem; background:var(--paper); }
/* LA TABLA DE EMPRESAS TIENE QUE CABER ENTERA, SIN SCROLL LATERAL.
   Lo pidio Pedro el 11/09/2026: "este cuadro hay que hacer scroll, lo quiero
   completo". Antes llevaba min-width:520px y en pantallas estrechas obligaba
   a arrastrar. Ahora no lleva ancho minimo y lo que se aprieta, segun va
   habiendo menos sitio, es la letra y el relleno de las celdas. Son cinco
   columnas de numeros cortos: caben de sobra.
   El overflow-x de .tabla-caja se queda como red de seguridad, pero con esto
   no deberia saltar nunca. */
/* OJO CON LA ESPECIFICIDAD. La regla base de mas abajo es
   `table.precios th, table.precios td { padding: 13px clamp(12px,2vw,18px) }`,
   una abreviatura que pisa cualquier `padding-inline` suelto por mucho que
   vaya en un @media. Por eso estos selectores llevan delante `.tabla-caja`:
   no es adorno, es lo que hace que ganen. Medido: sin esto el relleno seguia
   siendo de 12 px por lado y la tabla pedia 97 px de scroll a 390 px. */
.tabla-caja table.precios--ancha th,
.tabla-caja table.precios--ancha td{ padding-inline:clamp(4px,1.5vw,18px); }

@media (max-width:760px){
  .tabla-caja table.precios{ font-size:.88rem; }
  .tabla-caja table.precios th,.tabla-caja table.precios td{ padding-block:10px; }
  .tabla-caja table.precios--ancha thead th{ font-size:.62rem; letter-spacing:.02em; }
}
@media (max-width:470px){
  .tabla-caja table.precios--ancha{ font-size:.78rem; }
  .tabla-caja table.precios--ancha th,
  .tabla-caja table.precios--ancha td{ padding-block:9px; padding-inline:4px; }
  .tabla-caja table.precios--ancha thead th{ font-size:.58rem; letter-spacing:0; }
  .tabla-caja table.precios--ancha caption{ font-size:.95rem; padding-inline:10px; }
}
.sec--soft table.precios{ background:var(--soft); }
table.precios caption{ text-align:left; padding:18px clamp(16px,2.4vw,22px) 0; font-weight:700; letter-spacing:-.015em; font-size:1.06rem; }
table.precios th,table.precios td{ padding:13px clamp(12px,2vw,18px); border-bottom:1px solid var(--paper-cold); text-align:right; }
table.precios th:first-child,table.precios td:first-child{ text-align:left; font-weight:560; }
table.precios thead th{
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft); border-bottom:1px solid var(--ink);
}
table.precios tbody tr:last-child td{ border-bottom:0; }
table.precios tr.total td{ border-top:1px solid var(--ink); font-weight:700; font-size:1.06rem; }
.destacado{ color:var(--ember); font-weight:700; }
/* "190 € + 21 % IVA" se partia por la mitad en la columna estrecha y quedaba
   "190 € + 21 %" / "IVA". Mejor que la aclaracion baje entera a su linea. */
table.precios td .apunte{ display:block; }

/* --- 11. AVISOS Y BLOQUES ------------------------------------------------ */
.nota{ border-left:3px solid var(--ember); padding:4px 0 4px 20px; margin:26px 0; }
.nota--aviso{ border-left-color:var(--aviso); }
.nota h3{ margin:0 0 6px; font-size:1.02rem; }
.nota p:last-child{ margin-bottom:0; }
.nota--aviso h3{ color:var(--aviso); }
.lista{ list-style:none; padding:0; margin:0 0 1.1em; }
.lista li{ padding:9px 0 9px 28px; position:relative; border-bottom:1px solid var(--paper-cold); }
.lista li:last-child{ border-bottom:0; }
.lista li::before{ content:""; position:absolute; left:2px; top:1.06em; width:9px; height:2px; background:var(--ember); }
.lista--no li::before{ background:var(--aviso); }
.sellos{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--paper-cold); margin-top:28px; }
.sellos div{ flex:1 1 180px; padding:16px 20px; border-right:1px solid var(--paper-cold); font-size:.85rem; color:var(--ink-soft); transition:background .22s ease,color .22s ease; }
/* Al pasar el raton, el sello por el que va se ilumina en azul claro.
   Solo con (hover:hover): en un movil el :hover se queda pegado despues de
   tocar y el cuadro se quedaria encendido sin motivo. */
@media (hover:hover){
  .sellos div:hover{ background:rgba(30,144,255,.14); color:var(--ink); }
  .sec--ink .sellos div:hover{ background:rgba(30,144,255,.28); color:#EAF4FF; }
  .sec--ink .sellos div:hover b{ color:#CDE8FF; }
}
.sellos div:last-child{ border-right:0; }
.sellos b{ display:block; color:var(--ink); font-size:.94rem; letter-spacing:-.01em; }
.sec--ink .sellos{ border-color:rgba(255,255,255,.2); }
.sec--ink .sellos div{ border-right-color:rgba(255,255,255,.2); color:#9FB3C4; }
.sec--ink .sellos b{ color:#fff; }
details.faq{ border-bottom:1px solid var(--paper-cold); padding:4px 0; }
details.faq summary{ cursor:pointer; padding:16px 0; font-weight:620; list-style:none; display:flex; justify-content:space-between; gap:18px; align-items:center; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{ content:"+"; color:var(--ember); font-size:1.3rem; font-weight:400; line-height:1; }
details.faq[open] summary::after{ content:"\2013"; }
details.faq p{ margin:0 0 16px; color:var(--ink-soft); font-size:.97rem; max-width:74ch; }

/* --- 12. FORMULARIO ------------------------------------------------------ */
.form{ background:var(--paper); border:1px solid var(--paper-cold); padding:clamp(22px,3.4vw,38px); }
.sec--soft .form{ background:var(--paper); }
.eleccion{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--paper-cold); border:1px solid var(--paper-cold); margin-bottom:26px; }
.eleccion label{
  background:var(--paper); padding:16px 18px; cursor:pointer; display:block;
  position:relative;               /* lo necesita el anillo del ::after */
  transition:background .2s ease, color .2s ease;
}
.eleccion input{ position:absolute; opacity:0; width:0; height:0; }
.eleccion b{ display:block; font-size:1rem; letter-spacing:-.01em; }
.eleccion span{ font-size:.83rem; color:var(--ink-soft); }
.eleccion label:has(input:checked){ background:var(--ember); color:#fff; }
/* .95 y no .85: con .85 el texto quedaba en #dbebe8 sobre el verde, o sea
   un contraste de 4,16 cuando el minimo legible es 4,5. Medido con
   Lighthouse el 11/09/2026. Con .95 sube a 4,76. */
.eleccion label:has(input:checked) span{ color:rgba(255,255,255,.95); }
.eleccion label:has(input:focus-visible){ outline:2px solid var(--ember); outline-offset:2px; }

/* Al pasar el raton, el que NO esta elegido se ilumina en azul claro. */
@media (hover:hover){
  .eleccion label:hover{ background:rgba(30,144,255,.12); }
  .eleccion label:has(input:checked):hover{ background:var(--ember-deep); }
}

/* EL ELEGIDO LLEVA UN LASER SUAVE ALREDEDOR.
   Va en un ::after encima, no en el borde de la propia etiqueta: estas
   etiquetas dibujan sus lineas con el hueco de la rejilla, y ponerles un
   borde de 2 px las movería de sitio al cambiar de opcion.
   Es el mismo truco que el de los cuadros de precios, pero mas lento y con
   menos brillo: aqui solo tiene que decir "es este", no llamar la atencion. */
.eleccion label::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid transparent; opacity:0; transition:opacity .25s ease;
}
.eleccion label:has(input:checked)::after{
  opacity:1;
  border-image:conic-gradient(from var(--giro),
      rgba(120,200,255,.30) 0deg 185deg, #7FC6FF 250deg,
      #E4F4FF 288deg, rgba(120,200,255,.30) 345deg 360deg) 1;
  animation:laser 3.4s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  .eleccion label:has(input:checked)::after{ animation:none; }
}
.campo{ margin-bottom:18px; }
.campo label{ display:block; font-size:.86rem; font-weight:620; margin-bottom:7px; letter-spacing:.005em; }
.campo input,.campo textarea,.campo select{
  width:100%; font-family:var(--font-text); font-size:1rem; color:var(--ink);
  padding:12px 14px; border:1px solid var(--steel); border-radius:2px; background:var(--paper);
  transition:border-color .15s ease;
}
.campo input:focus,.campo textarea:focus,.campo select:focus{ border-color:var(--ember); outline:none; box-shadow:0 0 0 3px rgba(14,124,102,.14); }
.campo textarea{ min-height:110px; resize:vertical; }
.fila{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:620px){ .fila,.eleccion{ grid-template-columns:1fr; } }
.req{ color:var(--aviso); }
.opc{ font-weight:400; color:var(--ink-soft); font-size:.8rem; }
.grupo{ border:0; padding:0; margin:0 0 4px; }
.grupo legend{
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); padding:0; margin:26px 0 16px; width:100%;
  border-top:1px solid var(--paper-cold); padding-top:20px;
}
.campo--error input,.campo--error textarea{ border-color:var(--aviso); background:#FEF6F3; }
.consent{ display:flex; gap:12px; align-items:flex-start; font-size:.9rem; margin:22px 0 6px; cursor:pointer; }
.consent input{ margin-top:4px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--ember); }
.consent.campo--error{ color:var(--aviso); }
.form-error{ border:1px solid var(--aviso); border-left-width:3px; background:#FEF6F3; padding:16px 20px; margin-bottom:22px; }
.form-error__titulo{ font-weight:700; color:var(--aviso); margin:0 0 8px; }
.form-error ul{ margin:0; padding-left:20px; font-size:.93rem; }
.form-error li{ margin-bottom:4px; }
.obligatorios{ font-size:.82rem; color:var(--ink-soft); margin:16px 0 0; }
.sinjs{ border:1px solid var(--aviso); border-left-width:3px; background:#FEF6F3; padding:16px 20px; margin-bottom:22px; font-size:.93rem; }

/* --- 13. PIE ------------------------------------------------------------- */
.pie{ background:var(--ink); color:#9FB3C4; padding-block:clamp(44px,6vw,68px) 0; font-size:.92rem; }
.pie__g{ max-width:var(--ancho); margin:0 auto; padding-inline:var(--gutter); display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:34px; }
.pie h4{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin:0 0 14px; }
.pie ul{ list-style:none; margin:0; padding:0; }
.pie li{ margin-bottom:8px; }
.pie a{ color:#C9D6E0; text-decoration:none; }
.pie a:hover{ color:#6FD3BB; text-decoration:underline; }
.pie p{ margin:0 0 8px; }
.pie__base{
  max-width:var(--ancho); margin:38px auto 0; padding:20px var(--gutter) 26px;
  border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:12px 26px;
  justify-content:space-between; font-size:.82rem;
}
.barra-movil{ display:none; }
@media (max-width:900px){
  .barra-movil{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
    border-top:1px solid var(--paper-cold); background:var(--paper);
  }
  .barra-movil a{ flex:1 1 0; text-align:center; padding:13px 6px; font-size:.88rem; font-weight:620; text-decoration:none; color:var(--ink); border-right:1px solid var(--paper-cold); }
  .barra-movil a:last-child{ border-right:0; background:var(--ember); color:#fff; }
  body{ padding-bottom:52px; }
  .ck-banner{ bottom:52px; }
}

/* --- 14. PAGINAS LEGALES ------------------------------------------------- */
.legal{ max-width:820px; }
.legal h2{ font-size:1.22rem; margin-top:2.2em; }
.legal h3{ margin-top:1.6em; }
.legal ul{ padding-left:22px; }
.legal li{ margin-bottom:8px; }
.ficha{ background:var(--soft); border-left:3px solid var(--ember); padding:20px 24px; margin:26px 0; font-size:.95rem; }
.ficha p{ margin:0 0 4px; }
.enlaces-legal{ margin-top:44px; padding-top:22px; border-top:1px solid var(--paper-cold); display:flex; flex-wrap:wrap; gap:26px; }

/* --- 15. BANNER DE COOKIES ----------------------------------------------
   Copiado de tpcmetal.es sin tocar mas que los colores: es codigo ya probado
   y cumple la guia de la AEPD (Rechazar con el mismo peso visual que
   Aceptar, opcionales apagadas por defecto). Por eso arriba se conservan los
   nombres de variable --ember, --paper-cold y --steel. */
.ck-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:9998;
  background:var(--paper); color:var(--ink); border-top:3px solid var(--ember);
  box-shadow:0 -6px 34px rgba(11,27,43,.2); padding:20px clamp(16px,4vw,40px); display:none;
}
.ck-banner.visible{ display:block; animation:ck-aparecer .3s ease both; }
@media (max-width:900px),(max-height:560px){ .ck-banner.visible{ display:flex; } }
@keyframes ck-aparecer{ from{ opacity:0; } to{ opacity:1; } }
.ck-banner__inner{ max-width:var(--ancho); margin:0 auto; display:flex; flex-wrap:wrap; gap:20px 32px; align-items:center; justify-content:space-between; }
.ck-banner__texto{ flex:1 1 420px; }
.ck-banner__texto p{ margin:0; font-size:.87rem; line-height:1.55; color:var(--ink-soft); }
.ck-titulo{ font-weight:700; letter-spacing:.09em; text-transform:uppercase; font-size:.72rem !important; color:var(--ink) !important; margin-bottom:6px !important; }
.ck-banner__texto a{ color:var(--ember); }
.ck-banner__acciones{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.ck-btn{
  font-family:var(--font-text); font-size:.79rem; font-weight:640; letter-spacing:.06em; text-transform:uppercase;
  padding:13px 26px; border:1px solid var(--ink); border-radius:2px; background:var(--ink); color:var(--paper);
  cursor:pointer; transition:background .18s ease,color .18s ease;
}
.ck-btn:hover,.ck-btn:focus-visible{ background:var(--ember); border-color:var(--ember); color:#fff; }
.ck-btn--fuerte{ background:var(--ember); border-color:var(--ember); color:#fff; }
.ck-btn--fuerte:hover{ background:var(--ember-deep); border-color:var(--ember-deep); }
.ck-enlace{ background:none; border:0; cursor:pointer; color:var(--ink-soft); font-family:var(--font-text); font-size:.79rem; text-decoration:underline; text-underline-offset:3px; padding:13px 6px; }
.ck-enlace:hover{ color:var(--ember); }
.ck-overlay{ position:fixed; inset:0; z-index:9999; display:none; background:rgba(11,27,43,.6); padding:20px; align-items:center; justify-content:center; }
.ck-overlay.visible{ display:flex; }
.ck-panel{ background:var(--paper); width:min(620px,100%); max-height:88vh; overflow:auto; border-radius:3px; box-shadow:0 24px 70px rgba(11,27,43,.4); }
.ck-panel__cab{ padding:26px 28px 18px; border-bottom:1px solid var(--paper-cold); }
.ck-panel__cab h2{ font-size:1.3rem; font-weight:700; margin:0 0 6px; }
.ck-panel__cab p{ margin:0; font-size:.85rem; color:var(--ink-soft); }
.ck-panel__cuerpo{ padding:6px 28px; }
.ck-grupo{ display:flex; gap:20px; align-items:flex-start; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--paper-cold); }
.ck-grupo h3{ font-size:.95rem; font-weight:660; margin:0 0 4px; }
.ck-grupo p{ margin:0; font-size:.82rem; color:var(--ink-soft); line-height:1.5; }
.ck-panel__pie{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; padding:20px 28px 26px; }
.ck-interruptor{ position:relative; flex:0 0 auto; width:48px; height:27px; cursor:pointer; }
.ck-interruptor input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.ck-interruptor span{ position:absolute; inset:0; background:var(--steel); border-radius:27px; transition:background .2s ease; }
.ck-interruptor span::before{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; background:#fff; border-radius:50%; transition:transform .2s ease; }
.ck-interruptor input:checked + span{ background:var(--ember); }
.ck-interruptor input:checked + span::before{ transform:translateX(21px); }
.ck-interruptor input:disabled + span{ opacity:.5; cursor:not-allowed; }
.ck-interruptor input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:2px; }
@media (max-width:900px),(max-height:560px){
  .ck-banner{ padding:16px; max-height:78vh; overflow:hidden; }
  .ck-banner__inner{ display:flex; flex-direction:column; gap:14px; max-height:100%; width:100%; min-height:0; }
  .ck-banner__texto{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .ck-banner__acciones{ flex:0 0 auto; width:100%; gap:8px; padding-top:12px; border-top:1px solid var(--paper-cold); }
  .ck-banner__acciones .ck-btn{ flex:1 1 0; padding:14px 8px; min-height:46px; }
  .ck-enlace{ flex:1 1 100%; text-align:center; padding:10px 6px; }
}
@media (max-width:640px){
  .ck-banner__texto p{ font-size:.82rem; }
  .ck-panel{ max-height:84vh; }
  .ck-panel__pie .ck-btn{ flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){ .ck-banner.visible{ animation:none; opacity:1; } }

/* --- 16. IMPRESION ------------------------------------------------------- */
@media print{
  .cab,.pie,.barra-movil,.ck-banner,.ck-overlay,.botones,.form{ display:none !important; }
  body{ font-size:11pt; } .sec{ padding-block:18px; break-inside:avoid; }
}