/* --- Piloto de rediseño: CSS crítico en línea, sin dependencias externas --- */
:root{--azul:#003c71;--azul2:#00568f;--rojo:#e2001a;--tinta:#1d2733;--gris:#5a6673;--linea:#e3e8ee;--fondo:#f6f8fb}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--tinta);background:#fff;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul2)}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}

header.top{border-bottom:1px solid var(--linea);position:sticky;top:0;background:#fff;z-index:20}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;flex-wrap:wrap}
.topbar img{height:44px;width:auto}
nav.main ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav.main a{color:var(--tinta);text-decoration:none;font-size:15px;font-weight:500}
nav.main a:hover,nav.main a[aria-current]{color:var(--rojo)}
.acciones{display:flex;gap:10px}

.btn{display:inline-block;padding:12px 24px;border-radius:6px;text-decoration:none;font-weight:600;font-size:15px;border:1px solid transparent}
.btn-1{background:var(--rojo);color:#fff}
.btn-2{background:#fff;color:var(--azul);border-color:var(--azul)}
.btn-3{background:var(--azul);color:#fff}
.btn:hover{opacity:.9}
.btn-sm{padding:8px 16px;font-size:14px}

.miga{font-size:13px;color:var(--gris);padding:14px 0 0}
.miga a{color:var(--gris)}

.hero{padding:28px 0 40px}
.hero h1{font-size:clamp(28px,4.4vw,44px);line-height:1.15;margin:.2em 0 .4em;color:var(--azul);letter-spacing:-.01em}
.hero p.lead{font-size:clamp(17px,2.1vw,20px);color:var(--gris);max-width:62ch;margin:0 0 24px}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap}
.hero .apoyo{margin-top:18px;font-size:14px;color:var(--gris)}

section{padding:34px 0;border-top:1px solid var(--linea)}
h2{font-size:clamp(22px,3vw,30px);color:var(--azul);margin:0 0 6px;letter-spacing:-.01em}
h2+p.sub{color:var(--gris);margin:0 0 22px;max-width:62ch}
h3{font-size:18px;margin:0 0 8px;color:var(--azul)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
.card{border:1px solid var(--linea);border-radius:10px;padding:20px;background:var(--fondo)}
.card ul{margin:10px 0 0;padding-left:18px;color:var(--gris);font-size:15px}
.card li{margin:4px 0}
.card a.mas{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;text-decoration:none}

ol.pasos{counter-reset:p;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
ol.pasos li{counter-increment:p;padding-left:46px;position:relative}
ol.pasos li::before{content:counter(p);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--azul);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
ol.pasos strong{display:block;color:var(--azul)}
ol.pasos span{color:var(--gris);font-size:15px}

ul.ops{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0}
ul.ops li{border:1px solid var(--linea);border-radius:999px;padding:8px 18px;background:#fff;font-size:14px;font-weight:500}

.faq details{border-bottom:1px solid var(--linea);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;color:var(--azul);font-size:17px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--rojo);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:10px 0 0;color:var(--gris)}

.cierre{background:var(--azul);color:#fff;border-radius:12px;padding:32px;text-align:center;margin:12px 0}
.cierre h2{color:#fff}
.cierre p{color:#cfe0ef;max-width:56ch;margin:0 auto 20px}
.cierre .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cierre .btn-2{background:transparent;color:#fff;border-color:#fff}

footer.pie{background:#f2f4f7;border-top:1px solid var(--linea);padding:28px 0;margin-top:36px;font-size:14px;color:var(--gris)}
footer.pie ul{list-style:none;display:flex;flex-wrap:wrap;gap:18px;padding:0;margin:0 0 14px}
footer.pie a{color:var(--gris);text-decoration:none}
footer.pie a:hover{color:var(--rojo)}

@media (max-width:640px){
  .topbar{justify-content:center;text-align:center}
  nav.main ul{justify-content:center;gap:14px}
  .cierre{padding:24px 18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ══════════════════════════════════════════════════════════
   Capa de diseño: ilustraciones, profundidad y animación
   ══════════════════════════════════════════════════════════ */

/* --- Hero con ilustración a dos columnas --- */
.hero-split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:44px 0 52px}
.hero-split .ilu{width:100%;max-width:440px;margin-left:auto}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rojo);background:#fdeaec;padding:6px 14px;border-radius:999px;margin-bottom:14px}
.hero-split h1{margin-top:0}

/* --- Ilustraciones --- */
.ilu{display:block;height:auto}
.ilu-flujo{width:100%;max-width:660px;margin:8px auto 0}
.onda{display:block;width:100%;height:48px;margin-bottom:-1px}

/* --- Iconos de tarjeta --- */
.ico{width:30px;height:30px;color:var(--rojo)}
.card .ico-caja{width:52px;height:52px;border-radius:12px;background:#fff;border:1px solid var(--linea);display:flex;align-items:center;justify-content:center;margin-bottom:14px;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.card:hover .ico-caja{transform:translateY(-3px) rotate(-4deg);box-shadow:0 8px 20px rgba(0,60,113,.14)}

/* --- Tarjetas con más profundidad --- */
.card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;background:#fff}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,60,113,.10);border-color:#c9d9e8}
.card .mas{color:var(--rojo)}
.card .mas::after{content:"";display:inline-block;width:0;transition:width .2s ease}
.card:hover .mas::after{width:4px}

/* --- Cifras destacadas --- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;text-align:center}
.cifra{padding:22px 14px;border:1px solid var(--linea);border-radius:12px;background:linear-gradient(180deg,#fff,var(--fondo))}
.cifra b{display:block;font-size:34px;line-height:1.1;color:var(--azul);letter-spacing:-.02em}
.cifra span{font-size:14px;color:var(--gris)}

/* --- Sección con fondo alterno --- */
.franja{background:var(--fondo);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:40px 0}
.franja+section{border-top:0}

/* --- Botones con relieve --- */
.btn{transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}
.btn-1{box-shadow:0 6px 16px rgba(226,0,26,.24)}
.btn-3{box-shadow:0 6px 16px rgba(0,60,113,.22)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--rojo);outline-offset:3px;border-radius:4px}

/* --- Navegación entre páginas del grupo --- */
.hermanas{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:8px}
.hermana{display:flex;gap:12px;align-items:center;border:1px solid var(--linea);border-radius:10px;padding:14px;text-decoration:none;color:var(--tinta);background:#fff;transition:border-color .2s ease,transform .2s ease}
.hermana:hover{border-color:var(--rojo);transform:translateX(3px)}
.hermana .ico{flex:0 0 auto;width:24px;height:24px}
.hermana b{display:block;font-size:15px;color:var(--azul)}
.hermana span{font-size:13px;color:var(--gris)}
.hermana[aria-current]{border-color:var(--rojo);background:#fff7f8}

/* ── Animaciones ───────────────────────────────────────── */

/* Aparición al hacer scroll (activada por v2.js) */
.rv{opacity:0;transform:translateY(22px)}
.js .rv{transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.rv.visible{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
/* Sin JS todo queda visible: el contenido nunca depende del script */
html:not(.js) .rv{opacity:1;transform:none}

/* Ondas de emisión del hero */
@keyframes pulso{0%{transform:scale(.55);opacity:.55}70%{opacity:0}100%{transform:scale(1);opacity:0}}
.ondas circle{transform-origin:120px 150px;animation:pulso 3.2s ease-out infinite}
.ondas circle:nth-child(2){animation-delay:1.05s}
.ondas circle:nth-child(3){animation-delay:2.1s}

/* Sobre en vuelo */
@keyframes volar{0%{transform:translate(0,0);opacity:0}12%{opacity:1}80%{opacity:1}100%{transform:translate(78px,-4px);opacity:0}}
.sobre{animation:volar 3.2s ease-in-out infinite}

/* Entrada escalonada de las burbujas del móvil */
@keyframes burbujear{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
.burbuja{transform-origin:center;animation:burbujear .6s cubic-bezier(.22,.61,.36,1) both}
.b1{animation-delay:.25s}.b2{animation-delay:.75s}.b3{animation-delay:1.25s}

/* Flujo: el trazo discontinuo avanza */
@keyframes correr{to{stroke-dashoffset:-24}}
.flujo-linea line{animation:correr 1.4s linear infinite}

/* Respeta la preferencia del sistema: sin movimiento, sin animación */
@media (prefers-reduced-motion:reduce){
  .ondas circle,.sobre,.burbuja,.flujo-linea line{animation:none}
  .rv{opacity:1!important;transform:none!important}
  .btn:hover,.card:hover,.hermana:hover,.card:hover .ico-caja{transform:none}
}

@media (max-width:820px){
  .hero-split{grid-template-columns:1fr;gap:24px;padding-top:28px}
  .hero-split .ilu{margin:0 auto;max-width:360px}
}

/* --- Soluciones: móvil con mensajes de ejemplo --- */
.movil-caja{display:flex;justify-content:center}
.ilu-movil{max-width:212px;width:100%}
.sub-ancho{max-width:78ch}
.hero .eyebrow{margin-bottom:10px}

/* --- Listas con marca de verificación --- */
.lista-ok{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.lista-ok li{position:relative;padding-left:30px;color:var(--gris)}
.lista-ok li::before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;background:var(--azul)}
.lista-ok li::after{content:"";position:absolute;left:5.5px;top:12px;width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* --- Formularios --- */
.form-cot{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px 20px;background:var(--fondo);border:1px solid var(--linea);border-radius:12px;padding:26px}
.form-cot .campo{margin:0;display:flex;flex-direction:column;gap:6px}
.form-cot .campo-ancho{grid-column:1/-1}
.form-cot label,.form-cot legend{font-weight:600;font-size:14px;color:var(--azul)}
.form-cot input[type=text],.form-cot input[type=email],.form-cot input[type=tel],
.form-cot select,.form-cot textarea{
  font:inherit;font-size:15px;color:var(--tinta);background:#fff;
  border:1px solid #c9d5e2;border-radius:8px;padding:11px 13px;width:100%;
  transition:border-color .18s ease,box-shadow .18s ease}
.form-cot input:focus,.form-cot select:focus,.form-cot textarea:focus{
  outline:none;border-color:var(--azul2);box-shadow:0 0 0 3px rgba(0,86,143,.15)}
.form-cot textarea{resize:vertical;min-height:110px}
.form-cot fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.form-cot .opciones{display:flex;flex-wrap:wrap;gap:8px}
.form-cot .opcion{display:inline-flex;align-items:center;gap:8px;font-weight:400;font-size:14px;color:var(--tinta);
  background:#fff;border:1px solid #c9d5e2;border-radius:999px;padding:8px 16px;cursor:pointer;
  transition:border-color .18s ease,background .18s ease}
.form-cot .opcion:hover{border-color:var(--azul2)}
.form-cot .opcion:has(input:checked){border-color:var(--rojo);background:#fff7f8}
.form-cot .opcion input{accent-color:var(--rojo);margin:0}
.acciones-form{flex-direction:row!important;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.acciones-form small{color:var(--gris)}
.form-cot button{border:0;cursor:pointer;font:inherit;font-weight:600}

/* Aviso de resultado del formulario */
.aviso{border-radius:10px;padding:18px 20px;margin:8px 0;border:1px solid}
.aviso-ok{background:#eef7f0;border-color:#bcdcc4;color:#1d5c2e}
.aviso-error{background:#fdeef0;border-color:#f2c2c8;color:#8c1220}

@media (max-width:560px){
  .form-cot{padding:18px}
  .acciones-form{flex-direction:column!important;align-items:stretch}
  .acciones-form .btn{width:100%;text-align:center}
}

/* --- Páginas legales: texto largo, ancho de lectura cómodo --- */
.texto-legal{max-width:80ch}
.texto-legal p,.texto-legal li,.texto-legal td{color:var(--gris);font-size:15px}
.texto-legal h2,.texto-legal h3,.texto-legal b,.texto-legal strong{color:var(--azul)}
.texto-legal table{width:100%;border-collapse:collapse}
.texto-legal img{margin:12px 0}

/* --- Rejillas: evitar la tarjeta suelta en la última fila ---
   Con auto-fit, cuatro tarjetas entran de tres en tres y la cuarta se queda
   colgando sola. Cuando la rejilla tiene exactamente 4 (o 2) elementos, se
   fuerzan 2 columnas para que las filas queden completas. Las de 3 y 6 ya
   cuadran a 3 columnas, así que se dejan como están.
   Si el navegador no soporta :has(), se mantiene el comportamiento anterior. */
@media (min-width:900px){
  .grid:has(> :nth-child(4):last-child),
  .grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
  .hermanas:has(> :nth-child(4):last-child),
  .hermanas:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
}

/* Honeypot: fuera de la vista y fuera del alcance, pero no display:none
   (algunos bots ignoran los campos ocultos de forma evidente). */
.hp{position:absolute!important;left:-9999px!important;top:auto!important;
    width:1px!important;height:1px!important;overflow:hidden!important}
.mail a,.tel a{color:inherit}

/* ── Correcciones de accesibilidad (WCAG 2.2 AA) ──────────────────
   Medidas con calculadora de contraste, no a ojo:
   - El rojo de marca sobre el fondo rosa del "eyebrow" daba 4.27:1,
     por debajo del 4.5:1 exigido para texto. Se oscurece a 5.2:1.
   - El borde de los campos daba 1.49:1, por debajo del 3:1 que piden
     los componentes de interfaz (WCAG 1.4.11). Se oscurece a 3.1:1. */
.eyebrow{color:#c8001a}
.form-cot input[type=text],.form-cot input[type=email],.form-cot input[type=tel],
.form-cot select,.form-cot textarea,.form-cot .opcion{border-color:#6f8298}

/* Salto al contenido: primer tabulador de la página, visible sólo al enfocar */
.saltar{position:absolute;left:-9999px;top:0;z-index:100;background:var(--azul);color:#fff;
  padding:12px 20px;border-radius:0 0 8px 0;text-decoration:none;font-weight:600}
.saltar:focus{left:0}

/* --- Select: igualar altura con el resto de campos ---
   El desplegable nativo se dibujaba 44px frente a los 48,8px de los inputs,
   porque el navegador le aplica su propio line-height y su flecha. Se anula el
   estilo nativo, se fija la misma caja que los <input> y se dibuja una flecha
   propia en SVG (embebida, sin petición extra). */
.form-cot select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  line-height:inherit;height:auto;  /* igual que los input, que heredan 1.65 del body */
  padding-right:42px;                       /* hueco para la flecha */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235a6673' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 16px;
  cursor:pointer;
}
/* Al abrirse o enfocarse, la flecha toma el color de marca */
.form-cot select:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23003c71' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
/* Internet Explorer / Edge antiguo: ocultar su propia flecha */
.form-cot select::-ms-expand{display:none}
/* El texto en gris mientras no se ha elegido nada, como un placeholder */
.form-cot select:invalid,.form-cot select option[value=""]{color:#6f8298}

/* --- Página 404 --- */
.ilu-404{width:100%;max-width:400px;margin-left:auto}
.hero-split code{background:#eef2f7;border:1px solid var(--linea);border-radius:5px;
  padding:2px 8px;font-size:14px;color:var(--azul);word-break:break-all}
@keyframes caer{0%{transform:translate(0,-14px) rotate(-6deg);opacity:0}
                20%{opacity:1}80%{opacity:1}
                100%{transform:translate(10px,16px) rotate(8deg);opacity:0}}
.sobre404{animation:caer 3.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.sobre404{animation:none}}

/* ══════════════════════════════════════════════════════════
   Correcciones móvil / tableta (medidas, no estimadas)
   ══════════════════════════════════════════════════════════ */

/* 1. ÁREA TÁCTIL de los enlaces de texto.
   Medido: los enlaces de menú, pie y migas ocupaban 18px de alto, por debajo
   del mínimo de 24x24 CSS px que pide WCAG 2.5.8 (AA). Se amplía el área
   sensible con un pseudo-elemento en lugar de con padding, para no alterar
   el interlineado ni la altura de la cabecera en escritorio. */
nav.main a, footer.pie a, .miga a, .card a.mas, .faq summary {
  position:relative;
}
nav.main a::after, footer.pie a::after, .miga a::after, .card a.mas::after {
  content:"";
  position:absolute;
  left:-6px; right:-6px; top:-13px; bottom:-13px;
}
/* El ::after de .mas ya se usaba para la animación de la flecha: se reubica */
.card .mas::after{ left:-6px; right:-6px; top:-13px; bottom:-13px; width:auto; transition:none; }
.card:hover .mas{ text-decoration:underline; }

/* 2. ILUSTRACIÓN DE MENSAJES en móvil.
   El SVG tenía un ancho máximo de 212px; a esa escala su texto interno se
   renderizaba a ~9px, ilegible. Se le deja crecer, y como es vectorial el
   texto crece con él de forma proporcional. */
/* Se usa .hero-split .ilu-movil porque ".hero-split .ilu" (max-width:360px en
   móvil) tiene más especificidad que ".ilu-movil" y ganaba el pulso. */
.hero-split .ilu-movil{max-width:212px}
@media (max-width:820px){
  .hero-split .ilu-movil{max-width:300px}   /* texto interno ≈ 15px */
  .movil-caja{margin-top:8px}
}
@media (min-width:821px) and (max-width:1080px){
  .hero-split .ilu-movil{max-width:250px}   /* tableta: ≈ 12,4px */
}

/* 3. Respiro lateral en pantallas muy estrechas (320px) */
@media (max-width:360px){
  .wrap{padding-left:16px;padding-right:16px}
  .cierre{padding:22px 16px}
  .card{padding:16px}
}

/* 4. CABECERA — dos fallos medidos a 768px:
   a) ".topbar" declaraba "padding:12px 0" y machacaba el "padding:0 20px" que
      hereda de ".wrap", así que el logotipo quedaba pegado al borde de la
      pantalla en cualquier ancho por debajo de 1080px.
   b) El menú necesitaba 819px y sólo había 768: las acciones saltaban a una
      segunda línea y se alineaban a la izquierda, fuera del margen.
   Se recupera el padding y se adelanta el punto de reorganización. */
.topbar{padding-left:20px;padding-right:20px}

@media (max-width:1000px){
  .topbar{justify-content:center;text-align:center;gap:10px}
  nav.main ul{justify-content:center;gap:16px}
  nav.main a{font-size:14px}
  .acciones{justify-content:center}
}
@media (max-width:360px){
  .topbar{padding-left:16px;padding-right:16px}
  nav.main ul{gap:12px}
}

/* 5. MARGEN LATERAL — el fallo de fondo.
   ".wrap" define "padding:0 20px", pero varias reglas posteriores que se aplican
   a los mismos elementos (".topbar", ".hero", ".hero-split", "section") declaran
   "padding: X 0" y, con la misma especificidad y estando después, borraban ese
   margen lateral. Resultado: en cualquier ancho por debajo de 1080px el texto
   quedaba pegado al borde de la pantalla.
   Se restituye aquí, al final de la hoja, para que gane siempre. */
.wrap{padding-left:20px;padding-right:20px}
@media (max-width:360px){
  .wrap{padding-left:16px;padding-right:16px}
}

/* 6. Enlaces de título dentro de tarjeta: 21px de alto medidos. Se amplía el
   área igual que en el menú. (Los enlaces en línea dentro de un párrafo —el
   teléfono, el correo— quedan fuera: WCAG 2.5.8 los exceptúa expresamente.) */
.card h3 a{position:relative}
.card h3 a::after{content:"";position:absolute;left:-6px;right:-6px;top:-12px;bottom:-12px}

/* 7. DIAGRAMA DE FLUJO — medido: con viewBox de 640px, en un móvil quedaba a
   escala 0,52 y su texto se renderizaba a 6,3px (a 320px, a 5,4px). Se sirve
   una versión vertical por debajo de 700px, donde el texto sale a ~15px. */
.ilu-flujo-v{display:none;width:100%;max-width:300px;margin:8px auto 0}
@media (max-width:700px){
  .ilu-flujo{display:none}
  .ilu-flujo-v{display:block}
}

/* Casilla de consentimiento: a diferencia de las otras "opciones", es un
   bloque de texto, así que no lleva forma de píldora ni se centra. */
.form-cot .opcion-legal{border-radius:8px;align-items:flex-start;padding:12px 14px;
  font-size:14px;line-height:1.55;text-align:left;width:100%}
.form-cot .opcion-legal input{margin-top:3px;flex:0 0 auto}
.form-cot .opcion-legal a{color:var(--azul);font-weight:600}
.form-cot .consentimiento{margin-top:4px}

/* 8. LOGOTIPO más grande sin tocar la altura de la cabecera.
   El logo era el elemento más alto de la barra (44px) y por tanto el que fijaba
   su altura: 12px de padding + 44 + 12 = 68px. Subirlo a 60px la habría llevado
   a 84px. Con márgenes negativos de 8px arriba y abajo, la caja sigue ocupando
   44px en el flujo (60 − 8 − 8) mientras la imagen se ve a 60px: sobresale 8px
   por lado, holgadamente dentro de los 12px de padding, así que no toca el
   borde ni desplaza nada. La cabecera se queda exactamente igual. */
.topbar img{
  height:60px;
  width:auto;
  margin-top:-8px;
  margin-bottom:-8px;
}

/* Identificación fiscal en el pie: presente pero discreta */
footer.pie .pie-legal{font-size:12.5px;color:#6f8298;margin:0 0 4px}