/* Veritas 360 — hoja de estilos común */

@font-face { font-family: "Schibsted Grotesk"; src: url("../fuentes/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fuentes/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fuentes/schibsted-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fuentes/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fuentes/schibsted-grotesk-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fuentes/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fuentes/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --fondo: #F3F5F8;
  --tinta: #0E2240;
  --texto: #33465F;
  --apagado: #475A73;
  --linea: #D3DAE3;
  --linea-suave: #E6ECF2;
  --verde: #15784A;
  --verde-fondo: #F2FAF5;
  --verde-chip: #E6F3EC;
  --verde-chip-texto: #0F5E38;
  --ambar: #A8520A;
  --ambar-texto: #8A4208;
  --ambar-fondo: #FFF8F1;
  --neuronal: #7C8FB0;
  --marino: #0E2240;
  --marino-2: #15305A;
  --marino-linea: #2B4166;
  --pie: #0A1A33;
  --lateral: clamp(20px, 6.6vw, 96px);
  --sans: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--sans); font-size: 17px; line-height: 1.55; }
img, svg { max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--tinta); }
h3 { font-size: 22px; font-weight: 800; line-height: 1.25; }
a { color: var(--tinta); text-underline-offset: 4px; }
a:hover { color: var(--verde); }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 4px; }

.saltar { position: absolute; left: -9999px; top: 8px; z-index: 20; background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 8px; }
.saltar:focus { left: 16px; color: #fff; }
.contenedor { width: 100%; max-width: calc(1248px + 2 * var(--lateral)); margin: 0 auto; padding-inline: var(--lateral); }

/* Cabecera */
.cabecera { background: var(--fondo); border-bottom: 1px solid var(--linea); }
.cabecera .contenedor { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.marca { display: flex; align-items: center; gap: 12px; color: var(--tinta); text-decoration: none; }
.marca:hover { color: var(--tinta); }
.marca-nombre { font-size: 23px; font-weight: 800; letter-spacing: -0.01em; }
.marca-num { font-size: 23px; font-weight: 500; color: var(--apagado); }
.menu { display: flex; align-items: center; gap: 32px; font-size: 16px; font-weight: 600; }
.menu a { text-decoration: none; }
.menu a[aria-current="page"] { padding: 6px 0; border-bottom: 2px solid var(--tinta); }
.menu-movil { display: none; position: relative; }
.menu-movil summary { list-style: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-desplegable { display: none; position: absolute; right: 0; top: 52px; z-index: 10; min-width: 240px; padding: 12px; flex-direction: column; background: #fff; border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 12px 32px rgba(14, 34, 64, 0.12); }
.menu-movil[open] .menu-desplegable { display: flex; }
.menu-desplegable a { padding: 12px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.menu-desplegable a:hover { background: var(--fondo); }
@media (max-width: 960px) {
  .menu { display: none; }
  .menu-movil { display: block; }
  .cabecera .contenedor { height: 64px; }
  .marca-nombre, .marca-num { font-size: 20px; }
}

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 0; border-radius: 8px; background: var(--tinta); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.boton:hover { background: #1B3560; color: #fff; }
.boton-grande { min-height: 56px; padding: 0 28px; border-radius: 10px; font-size: 18px; }
.boton-verde { background: var(--verde); }
.boton-verde:hover { background: #106139; }
.boton-claro { background: #fff; color: var(--tinta); }
.boton-claro:hover { background: var(--linea-suave); color: var(--tinta); }
.enlace-fuerte { font-size: 17px; font-weight: 700; }

/* Tipografía de secciones */
.titulo-portada { font-size: clamp(42px, 6.2vw, 84px); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; }
.titulo-pagina { font-size: clamp(38px, 5vw, 68px); line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; }
.titulo-seccion { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; }
.subtitulo { font-size: clamp(19px, 1.7vw, 22px); font-weight: 600; line-height: 1.45; }
.entrada { max-width: 62ch; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: var(--texto); text-wrap: pretty; }
.texto { color: var(--texto); }
.nota { font-size: 13px; color: #5A6B82; }

.seccion { padding: clamp(64px, 8vw, 112px) 0; }
.seccion-blanca { background: #fff; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.seccion-marina { background: var(--marino); color: #E8EEF6; }
.seccion-marina .titulo-seccion { color: #fff; }
.seccion-marina .entrada { color: #B9C6D8; }
.cabeza-seccion { display: flex; flex-direction: column; gap: 16px; max-width: 840px; margin-bottom: clamp(36px, 4vw, 56px); }

/* Portada */
.portada { padding: clamp(48px, 6vw, 80px) 0 clamp(64px, 8vw, 112px); }
.portada .titulo-portada { margin-bottom: clamp(32px, 4vw, 56px); }
.portada-rejilla { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(40px, 6.6vw, 96px); align-items: start; }
.portada-texto { display: flex; flex-direction: column; gap: 28px; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
@media (max-width: 1080px) { .portada-rejilla { grid-template-columns: minmax(0, 1fr); } }

.lecturas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lectura { min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; background: #FAFBFD; border: 2px dashed var(--neuronal); border-radius: 14px; }
.lectura-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lectura-cab strong { font-size: 15px; }
.lectura-cab span { font-size: 13px; color: var(--apagado); }
.registro { margin: 0; overflow-x: auto; font-family: var(--mono); font-size: 11.5px; line-height: 1.65; white-space: pre; }
.puente { height: 64px; padding-left: 40px; display: flex; align-items: center; gap: 16px; font-size: 15px; font-weight: 600; }
.puente-linea { height: 64px; display: flex; flex-direction: column; }
.puente-linea span:first-child { height: 28px; border-left: 2px dashed var(--neuronal); }
.puente-linea span:last-child { height: 36px; border-left: 2px solid var(--tinta); }
.decision { padding: 24px 28px; display: flex; flex-direction: column; gap: 14px; background: #fff; border: 2px solid var(--tinta); border-radius: 14px; }
.decision ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.decision li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.4; }
.decision li svg { flex-shrink: 0; margin-top: 1px; }
.portada .nota { margin-top: 14px; }
@media (max-width: 560px) {
  .lecturas { grid-template-columns: minmax(0, 1fr); }
  .puente { padding-left: 24px; font-size: 14px; }
  .decision { padding: 18px; }
}

/* Comparativa */
.tabla-desplazable { overflow-x: auto; }
.comparativa { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 18px; line-height: 1.4; }
.comparativa th, .comparativa td { padding: 22px 24px; text-align: left; vertical-align: top; }
.comparativa thead th { padding-block: 18px; font-size: 17px; font-weight: 600; color: #A9B8CC; }
.comparativa tbody tr { border-top: 1px solid var(--marino-linea); }
.comparativa tbody th { width: 28%; padding-left: 0; font-weight: 500; color: #A9B8CC; }
.comparativa td { color: #C9D4E3; }
.comparativa .columna-veritas { background: var(--marino-2); color: #fff; font-weight: 700; }
.comparativa thead .columna-veritas { font-weight: 800; }

/* Pasos */
.capas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin-bottom: 28px; font-size: 14px; font-weight: 700; }
.capa-ia { padding-top: 10px; border-top: 3px dashed var(--neuronal); color: var(--apagado); }
.capa-reglas { grid-column: span 4; padding-top: 10px; border-top: 3px solid var(--tinta); }
.pasos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.pasos li { display: flex; flex-direction: column; gap: 12px; }
.pasos p { font-size: 16.5px; color: var(--texto); }
@media (max-width: 1080px) {
  .capas { display: none; }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 600px) { .pasos { grid-template-columns: minmax(0, 1fr); } }

/* Rejillas */
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6.6vw, 96px); align-items: start; }
.tres-columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.cuatro-columnas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.bloque-raya { padding-top: 24px; display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--tinta); }
.bloque-raya ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--texto); }
.bloque-icono { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 1080px) {
  .tres-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .cuatro-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) { .dos-columnas { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .tres-columnas, .cuatro-columnas { grid-template-columns: minmax(0, 1fr); }
}

/* Estados */
.estado { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.estado-si { background: var(--verde-chip); color: var(--verde-chip-texto); }
.estado-pronto { background: #EEF1F5; color: var(--apagado); border: 1px solid #C9D2DE; }
.lista-estados { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; color: var(--texto); }
.lista-estados li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Principio Veritas */
.principios { display: flex; flex-direction: column; gap: 32px; }
.principio { display: flex; flex-direction: column; gap: 6px; }
.principio p { color: var(--texto); }
.pruebas { display: flex; flex-direction: column; gap: 20px; }
.prueba { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; background: #fff; border: 2px solid var(--tinta); border-radius: 12px; }
.prueba-cab { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.prueba-cab svg { flex-shrink: 0; }
.prueba-alerta { background: var(--ambar-fondo); border-color: var(--ambar); }
.prueba-alerta .prueba-cab { color: var(--ambar-texto); }
.prueba-ok { background: var(--verde-fondo); border-color: var(--verde); }
.prueba-ok .prueba-cab { color: var(--verde); }
.cifras { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; font-family: var(--mono); font-size: 14px; }
.cifras dt, .cifras dd { margin: 0; }
.cifras dd { text-align: right; }

/* Sectores */
.rejilla-sectores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sector { padding: 28px; display: flex; flex-direction: column; gap: 18px; background: #fff; border: 1px solid var(--linea); border-radius: 14px; }
.sector-cab { min-height: 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sector dl { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.sector dt { font-size: 14px; font-weight: 700; color: var(--apagado); }
.sector dd { margin: 4px 0 0; font-size: 16.5px; line-height: 1.5; }
@media (max-width: 1080px) { .rejilla-sectores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .rejilla-sectores { grid-template-columns: minmax(0, 1fr); } }

.lista-filas { display: flex; flex-direction: column; }
.fila { padding: 22px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; border-top: 1px solid var(--linea); }
.fila:last-child { border-bottom: 1px solid var(--linea); }
.fila strong { display: block; font-size: 20px; }
.fila span.texto { font-size: 16px; }

/* Módulos */
.leyenda { margin-bottom: 24px; display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 15px; color: var(--apagado); }
.leyenda span { display: inline-flex; align-items: center; gap: 8px; }
.modulos { width: 100%; min-width: 620px; border-collapse: collapse; background: #fff; border: 1px solid var(--linea); font-size: 17px; line-height: 1.45; }
.modulos thead th { padding: 14px 24px; background: var(--linea-suave); text-align: left; font-size: 14px; font-weight: 700; color: var(--apagado); }
.modulos .grupo th { padding: 22px 24px 10px; border-top: 1px solid var(--linea); text-align: left; font-size: 20px; font-weight: 800; }
.modulos tbody tr:not(.grupo) th { width: 28%; padding: 16px 24px; border-top: 1px solid var(--linea-suave); text-align: left; font-weight: 700; vertical-align: top; }
.modulos td { padding: 16px 24px; border-top: 1px solid var(--linea-suave); color: var(--texto); vertical-align: top; }
.modulos td:last-child { width: 160px; }

/* Precio */
.precios { display: flex; flex-direction: column; gap: 20px; }
.precio { padding: 32px; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 2px solid var(--tinta); border-radius: 14px; }
.precio-secundario { background: var(--fondo); border: 1px solid var(--linea); }
.precio-cifra { font-size: clamp(44px, 5vw, 60px); line-height: 1; font-weight: 800; letter-spacing: -0.02em; }
.lista-numerada { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 24px; }
.lista-numerada li { display: flex; align-items: flex-start; gap: 18px; }
.lista-numerada strong { display: block; font-size: 19px; }
.num { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 2px solid currentColor; border-radius: 50%; font-size: 15px; font-weight: 800; }

/* Preguntas */
.preguntas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(40px, 6.6vw, 96px); }
.pregunta h3 { margin-bottom: 8px; font-size: 20px; }
.pregunta p { color: var(--texto); }
@media (max-width: 860px) { .preguntas { grid-template-columns: minmax(0, 1fr); } }

/* Demo y formulario */
.demo-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6.6vw, 96px); align-items: center; }
.demo-texto { display: flex; flex-direction: column; gap: 28px; }
.pasos-demo { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 20px; font-size: 19px; }
.pasos-demo li { display: flex; align-items: center; gap: 16px; }
.pasos-demo .num { color: #5CCB94; }
.formulario { position: relative; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 18px; background: #fff; color: var(--tinta); border-radius: 16px; }
.fila-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label { font-size: 15px; font-weight: 600; }
.campo input, .campo select { width: 100%; height: 48px; padding: 0 14px; background: #fff; border: 1.5px solid #9FAEC2; border-radius: 8px; color: var(--tinta); font: inherit; font-size: 16px; }
.campo input:focus, .campo select:focus { border-color: var(--tinta); }
.consentimiento { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--apagado); }
.consentimiento input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--verde); }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) { .demo-rejilla { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .fila-2 { grid-template-columns: minmax(0, 1fr); } }

.banda-final { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 48px; }
.banda-final > div { max-width: 760px; display: flex; flex-direction: column; gap: 14px; }

/* Pie */
.pie { background: var(--pie); color: #A9B8CC; font-size: 15px; }
.pie .contenedor { min-height: 120px; padding-block: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.pie a { color: #C9D4E3; }
.pie a:hover { color: #fff; }

/* Páginas de texto */
.texto-largo { max-width: 760px; }
.texto-largo h2 { margin: 40px 0 12px; font-size: 24px; font-weight: 800; }
.texto-largo p, .texto-largo li { color: var(--texto); }
.texto-largo p + p { margin-top: 12px; }
.texto-largo ul { padding-left: 22px; }
.pendiente { padding: 0 6px; background: #FDE7CF; color: #7A3A06; border-bottom: 2px dashed var(--ambar); border-radius: 4px; font-weight: 700; }