@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --tinta: #16213F;      /* texto principal: 15,9:1 sobre blanco */
  --apagado: #4B5270;    /* texto secundario: 7,7:1 sobre blanco */
  --enlace: #1F4FC4;     /* enlaces y foco: 7,1:1 sobre blanco */
  --cian: #68E1FD;       /* color de marca: solo fondo o decoración; 10,4:1 con tinta, 1,5:1 con blanco */
  --papel: #E8F9FE;      /* tinta 14,7:1 · enlace 6,5:1 · apagado 7,1:1 */
  --blanco: #FFFFFF;
  --linea: #7A819E;      /* bordes de interfaz: 3,9:1 */
  --medida: 68ch;
  --ancho: 72rem;
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
}

h1, h2, h3 { line-height: 1.15; font-weight: 700; margin: 0 0 1rem; }
h1 { font-size: clamp(2.25rem, 5.5vw, 4rem); letter-spacing: -0.02em; max-width: 18ch; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; }
p, ul, ol { margin: 0 0 1rem; max-width: var(--medida); }
strong { font-weight: 700; }

a { color: var(--enlace); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.16em; }

:focus-visible {
  outline: 3px solid var(--enlace);
  outline-offset: 3px;
  border-radius: 2px;
}

.saltar {
  position: absolute;
  left: 1rem;
  top: -10rem;
  padding: 0.75rem 1rem;
  background: var(--cian);
  color: var(--tinta);
  font-weight: 700;
  z-index: 10;
}
.saltar:focus { top: 1rem; }

.visual-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 1.5rem; }

/* Cabecera */
.cabecera { border-bottom: 1px solid var(--linea); }
.cabecera .contenedor {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 2rem; padding-top: 1.25rem; padding-bottom: 1.25rem;
}
.marca { font-weight: 700; font-size: 1.25rem; color: var(--tinta); text-decoration: none; }
.marca span { background: var(--cian); padding: 0 0.2em; }
.navegacion ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; padding: 0; }
.navegacion a { color: var(--tinta); }

/* Portada */
.portada { padding: clamp(3rem, 8vw, 6rem) 0; }

.entradilla { font-size: 1.3rem; color: var(--apagado); max-width: 52ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.boton {
  display: inline-block; padding: 0.85rem 1.4rem; font-weight: 700; text-decoration: none;
  border: 2px solid var(--tinta); border-radius: 4px;
}
.boton-principal { background: var(--tinta); color: var(--blanco); }
.boton-principal:hover { background: var(--enlace); border-color: var(--enlace); }
.boton-secundario { color: var(--tinta); background: var(--blanco); }
.boton-secundario:hover { background: var(--papel); }

/* Subrayado a mano, como el rotulador de un auditor */
.subrayado {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 60 6, 120 4, 180 8 S 270 14, 297 7' fill='none' stroke='%2368E1FD' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 0.45em;
  background-position: 0 92%;
  padding-bottom: 0.08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Tabla de ejemplo antes/después */
.tabla-desplazable { overflow-x: auto; margin: 2rem 0 1.5rem; }
.ejemplo { border-collapse: collapse; width: 100%; min-width: 36rem; }
.ejemplo th, .ejemplo td { text-align: left; padding: 1rem 1.25rem 1rem 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.ejemplo thead th { border-bottom: 3px solid var(--tinta); }
.ejemplo td:last-child { font-weight: 700; }
.ejemplo td:last-child::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; background: var(--cian); border: 2px solid var(--tinta); margin-right: 0.5rem; vertical-align: 0.05em; }

/* Fuentes oficiales */
.fuentes { padding-left: 1.25rem; }
.fuentes li { margin-bottom: 0.4rem; }

/* Preguntas frecuentes: details/summary nativos */
.preguntas { max-width: 52rem; margin-top: 1.5rem; }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas details:first-child { border-top: 1px solid var(--linea); }
.preguntas summary {
  cursor: pointer; font-weight: 700; padding: 1.1rem 2.5rem 1.1rem 0; position: relative; list-style: none;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  width: 1.6rem; height: 1.6rem; line-height: 1.5rem; text-align: center; font-size: 1.3rem;
  background: var(--cian); border: 2px solid var(--tinta); border-radius: 50%;
}
.preguntas details[open] summary::after { content: "−"; }
.preguntas details p { padding-bottom: 1rem; }

/* Tarjetas */
.bloque { margin-top: 2.5rem; }
.tarjetas { list-style: none; padding: 0; margin: 1rem 0 0; max-width: none; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 1.4rem 1.4rem 1.2rem; }
.tarjeta h4 { font-size: 1.1rem; margin: 0.9rem 0 0.4rem; line-height: 1.25; }
.tarjeta p { margin: 0; color: var(--apagado); font-size: 1rem; }
.tarjeta-icono { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--cian); border: 2px solid var(--tinta); color: var(--tinta); }
.tarjeta-destacada { background: var(--cian); border-color: var(--tinta); }
.tarjeta-destacada p { color: var(--tinta); }
.tarjeta-destacada .tarjeta-icono { background: var(--blanco); }
.tarjeta .precio { font-size: 1.6rem; color: var(--tinta); }

.nota { margin-top: 2rem; }

/* Paquetes de servicios */
.paquetes { list-style: none; padding: 0; margin: 2rem 0 0; max-width: none; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: stretch; }
.paquete { display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 1.75rem 1.5rem 1.5rem; }
.paquete-destacado { border: 3px solid var(--tinta); box-shadow: 6px 6px 0 var(--cian); }
.paquete h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.paquete-desc { color: var(--apagado); font-size: 1rem; }
.paquete-precio { font-size: 2rem; font-weight: 700; line-height: 1.1; margin: 0.5rem 0 0.25rem; }
.paquete-precio span { font-size: 1rem; font-weight: 400; color: var(--apagado); }
.paquete-plazo { font-weight: 700; font-size: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linea); margin-bottom: 1rem; }
.paquete .lista-marcada { font-size: 1rem; flex-grow: 1; }
.paquete .boton { align-self: flex-start; margin-top: 0.75rem; }

.tramos { list-style: none; padding: 0; margin: 0 0 0.25rem; font-size: 1rem; }
.tramos li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px dotted var(--linea); }
.tramos strong { white-space: nowrap; }
.tramos-nota { font-size: 0.9rem; color: var(--apagado); margin-bottom: 1rem; }

/* Franjas cian: rompen el ritmo de la página */
.franja { background: var(--cian); padding: clamp(2rem, 5vw, 3rem) 0; }
.franja h2 { font-size: clamp(1.4rem, 2.5vw, 1.75rem); margin-bottom: 1.25rem; }
.motivos { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.motivos > li, .motivos > div { border-top: 3px solid var(--tinta); padding-top: 0.6rem; }
.motivos h3, .motivos dt { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.25rem; }
.motivos p, .motivos dd { margin: 0; }

/* Ilustraciones: decorativas, alt vacío */
.con-ilustracion { display: grid; gap: 2rem 3rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
.ilustracion { margin: 0; }
.con-ilustracion.invertida > .ilustracion { order: -1; }
.con-ilustracion.invertida { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.ilustracion img { display: block; width: 100%; max-width: 26rem; height: auto; margin-inline: auto; }

/* Secciones */
.seccion { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.seccion-papel { background: var(--papel); }
.seccion .introduccion { font-size: 1.25rem; color: var(--apagado); }

.dos-columnas { display: grid; gap: 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; }

.lista-marcada { padding-left: 0; list-style: none; }
.lista-marcada li { padding-left: 1.75rem; position: relative; margin-bottom: 0.6rem; }
.lista-marcada li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.8rem; height: 0.8rem; background: var(--cian); border: 2px solid var(--tinta);
}

.condiciones { border-collapse: collapse; width: 100%; max-width: 40rem; margin: 2rem 0 1rem; }
.condiciones th, .condiciones td { text-align: left; padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.condiciones th { font-weight: 700; width: 40%; }
.precio { font-size: 1.6rem; font-weight: 700; }

/* Pasos: es un proceso real, por eso va numerado */
.pasos { list-style: none; padding: 0; margin: 2rem 0 0; counter-reset: paso; max-width: none; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.pasos li { counter-increment: paso; border-top: 4px solid var(--tinta); padding-top: 1rem; }
.pasos li::before { content: counter(paso); display: block; font-size: 2.5rem; font-weight: 700; line-height: 1; margin-bottom: 0.5rem; }
.pasos h3 { margin-bottom: 0.4rem; }
.pasos p { color: var(--apagado); margin: 0; }

.equipo { list-style: none; padding: 0; margin: 2rem 0 0; max-width: none; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.equipo h3 { margin-bottom: 0.25rem; }
.equipo .rol { font-weight: 700; color: var(--apagado); margin-bottom: 0.5rem; }

/* Contacto: papel, para que la camiseta cian de la ilustración no se funda con el fondo */
.contacto { background: var(--blanco); color: var(--tinta); }
.contacto a { color: var(--tinta); }
.contacto :focus-visible { outline-color: var(--tinta); }
.correo { font-size: clamp(1.4rem, 3.5vw, 2.25rem); font-weight: 700; word-break: break-word; }

/* Pie */
.pie { padding: 2rem 0 3rem; font-size: 1rem; color: var(--apagado); }
.pie ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 1rem; }

/* Páginas legales */
.legal { padding: 3rem 0 4rem; }
.legal h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
.legal h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.pendiente { background: var(--cian); padding: 0 0.2em; }

@media (max-width: 48rem) {
  .dos-columnas, .con-ilustracion { grid-template-columns: 1fr; }
  .ilustracion img { max-width: 18rem; }
  .con-ilustracion.invertida { grid-template-columns: 1fr; }
  .con-ilustracion.invertida > .ilustracion { order: 0; }
}

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

@media print {
  .subrayado { background: none; text-decoration: underline; }
  .cabecera nav, .acciones, .saltar { display: none; }
  .ilustracion { display: none; }
}