/* Cabecera, pie y piezas de las páginas interiores. Filas con línea fina, sin tarjetas ni sombras. */

/* Cabecera */
.cabecera { background: var(--fondo); border-bottom: 1px solid var(--linea); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); flex-wrap: wrap; padding-block: var(--e-2); }
.menu summary { list-style: none; cursor: pointer; font: 600 1rem var(--fuente-titulos); color: var(--navy); border: 1.5px solid var(--navy); border-radius: var(--radio); padding: 0.5rem 1rem; min-height: 44px; display: inline-flex; align-items: center; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; left: 0; right: 0; top: 4.5rem; background: var(--fondo); border-bottom: 1px solid var(--linea); padding: var(--e-2) var(--e-3) var(--e-3); z-index: 10; display: flex; flex-direction: column; gap: var(--e-2); }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.menu li a { display: block; color: var(--tinta); text-decoration: none; padding: 0.75rem 0; border-bottom: 1px solid var(--linea); font-size: 1.0625rem; }
.menu li a[aria-current="page"] { color: var(--navy); font-weight: 600; box-shadow: inset 3px 0 0 var(--teal); padding-left: var(--e-1); }
.cabecera { position: relative; }
@media (min-width: 900px) {
  .menu summary { display: none; }
  .menu nav { position: static; flex-direction: row; align-items: center; gap: var(--e-4); padding: 0; border: 0; background: none; }
  .menu ul { flex-direction: row; gap: var(--e-3); }
  .menu li a { border: 0; padding: 0.5rem 0; font-size: 1rem; }
  .menu li a:hover { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .menu li a[aria-current="page"] { box-shadow: none; padding-left: 0; text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 3px; text-underline-offset: 6px; }
}
.boton--chico { padding: 0.5rem 1rem; min-height: 44px; display: inline-flex; align-items: center; }

/* Pie */
.pie { background: var(--navy); color: #dbe8ef; padding-block: var(--e-5) var(--e-4); }
.pie a { color: #fff; }
.pie__marca { display: grid; gap: 4px; font-size: 0.9375rem; margin-bottom: var(--e-4); }
.pie__marca img { margin-bottom: var(--e-1); }
.pie__columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e-3) var(--e-4); }
.pie h2 { font: 600 0.8125rem var(--fuente-titulos); text-transform: uppercase; letter-spacing: 0.08em; color: #9fc0d0; margin-bottom: var(--e-1); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 0.9375rem; }
.pie li a { display: inline-block; padding-block: 6px; text-decoration: none; }
.pie li a:hover { text-decoration: underline; }
.pie__final { margin-top: var(--e-4); padding-top: var(--e-2); border-top: 1px solid #ffffff2e; font-size: 0.875rem; color: #9fc0d0; }

/* Encabezado de página interior */
.encabezado { padding-block: var(--e-5) var(--e-4); }
.encabezado h1 { font-size: var(--t-4); line-height: 1.12; color: var(--navy); max-width: 22ch; letter-spacing: -0.02em; }
.encabezado__texto { font-size: 1.1875rem; color: var(--tinta-2); max-width: 56ch; margin-top: var(--e-2); }
.encabezado .botones { margin-top: var(--e-3); }
.migas { font-size: 0.9375rem; color: var(--tinta-2); margin-bottom: var(--e-2); }
.migas a { color: var(--tinta-2); }

.bloque { padding-block: var(--e-5); }
.bloque > .contenedor > h2, .bloque__titulo { font-size: var(--t-3); line-height: 1.2; color: var(--navy); margin-bottom: var(--e-3); }
.bloque--tinte { background: var(--tinte); }
.bloque--final { border-bottom: 0; }

/* Texto corrido */
.prosa { max-width: 66ch; }
.prosa > * + * { margin-top: var(--e-2); }
.prosa h2 { font-size: var(--t-3); color: var(--navy); margin-top: var(--e-5); line-height: 1.2; }
.prosa h3 { font-size: var(--t-2); color: var(--navy); margin-top: var(--e-4); line-height: 1.25; }
.prosa ul, .prosa ol { padding-left: 1.25rem; }
.prosa li + li { margin-top: 6px; }
.prosa strong { font-weight: 600; color: var(--navy); }
.prosa blockquote { margin: var(--e-3) 0; padding-left: var(--e-2); border-left: 3px solid var(--teal); color: var(--tinta-2); }
.prosa code, code { font-family: var(--fuente-codigo); font-size: 0.875em; }

/* Filas con línea: la unidad de lista del sitio */
.filas { list-style: none; margin: 0; padding: 0; }
.filas > li { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 4px var(--e-4); padding-block: var(--e-2);  }
.filas h3 { font-size: 1.1875rem; color: var(--navy); line-height: 1.3; }
.filas h3 a { color: inherit; text-decoration: none; }
.filas h3 a:hover { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 3px; }
.filas p { color: var(--tinta); }
.filas .meta { color: var(--tinta-2); font-size: 0.9375rem; }
@media (max-width: 720px) { .filas > li { grid-template-columns: 1fr; } }

/* Medidas de un caso */
.medidas { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.medidas th, .medidas td { text-align: left; padding: 0.625rem 0.75rem 0.625rem 0; border-top: 1px solid var(--linea); vertical-align: top; }
.medidas thead th { font: 600 0.8125rem var(--fuente-titulos); text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-2); border-top: 0; }
.medidas tbody th { font-weight: 400; }
.medidas td:last-child, .medidas th:last-child { padding-right: 0; }
.nota { background: var(--tinte); padding: var(--e-2) var(--e-3); border-radius: var(--radio); max-width: 66ch; }

/* Formularios */
.formulario { display: grid; gap: var(--e-3); max-width: 34rem; }
.campo { display: grid; gap: 6px; }
.campo label, .campo legend { font: 600 1rem var(--fuente-titulos); color: var(--navy); }
.campo .ayuda { font-size: 0.9375rem; color: var(--tinta-2); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo input[type="number"], .campo input[type="password"], .campo select, .campo textarea {
  font: inherit; color: var(--tinta); background: var(--superficie); border: 1.5px solid #8a97a6; border-radius: var(--radio); padding: 0.6875rem 0.75rem; min-height: 44px; width: 100%;
}
.campo textarea { min-height: 7rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--navy); }
.campo.campo--error input, .campo.campo--error select, .campo.campo--error textarea { border-color: #a4262c; }
.error { color: #a4262c; font-size: 0.9375rem; font-weight: 600; }
.error::before { content: "Error: "; }
.casilla { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0 var(--e-1); align-items: start; }
.casilla input { width: 1.25rem; height: 1.25rem; margin: 0.25rem 0 0; accent-color: var(--navy); }
.casilla label { font: 400 1rem var(--fuente-texto); color: var(--tinta); }
.aviso-privacidad { font-size: 0.9375rem; color: var(--tinta-2); border-left: 3px solid var(--teal); padding-left: var(--e-2); max-width: 34rem; }
.aviso-privacidad p + p { margin-top: 6px; }
.trampa { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.mensaje { padding: var(--e-2) var(--e-3); border-radius: var(--radio); background: var(--tinte); max-width: 40rem; }
.mensaje--error { background: #fbe9ea; }

/* Código */
.codigo { font-family: var(--fuente-codigo); font-size: 0.875rem; line-height: 1.6; background: var(--superficie); border: 1px solid var(--linea); border-left: 3px solid var(--teal); padding: var(--e-2); overflow-x: auto; margin: 0; color: var(--tinta); }

/* Columnas */
.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
@media (max-width: 760px) { .dos { grid-template-columns: 1fr; } }

.subtitulo { font: 600 var(--t-2)/1.25 var(--fuente-titulos); color: var(--navy); margin: var(--e-4) 0 var(--e-2); }
.bloque .prosa + p, .bloque .filas + .prosa { margin-top: var(--e-4); }
.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 2.75rem 1fr; gap: 2px var(--e-2); }
.pasos li::before { content: counter(paso); font: 600 1.625rem var(--fuente-titulos); color: var(--teal-texto); grid-row: 1 / span 2; }
.pasos strong { font: 600 1.1875rem var(--fuente-titulos); color: var(--navy); }
.pasos span { color: var(--tinta-2); max-width: 62ch; }
.botones.arriba { margin-top: var(--e-3); }
.meta { color: var(--tinta-2); font-size: 0.9375rem; }
.bloque > .contenedor > .meta { margin-bottom: var(--e-3); }
.bloque .prosa + .botones, .bloque p + .botones { margin-top: var(--e-3); }

.pasos--sin-numero li::before { content: none; }
.pasos--sin-numero li { grid-template-columns: 1fr; }
.seccion__mas { margin-top: var(--e-3); }
.bloque .cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); list-style: none; margin: 0; padding: 0; gap: var(--e-3); }
.bloque .cifras > li { border-right: 0; margin: 0; padding: 0 0 var(--e-2); border-bottom: 1px solid var(--linea); }
.cifra__valor { font: 600 clamp(2.25rem, 4vw + 0.5rem, 3.25rem)/1 var(--fuente-titulos); color: var(--navy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cifra__texto { margin-top: var(--e-1); }

/* Un solo juego de iconos: mismo tamaño, mismo trazo y mismo color en todo el sitio */
.icono { width: 1.75rem; height: 1.75rem; flex: none; fill: none; stroke: var(--teal-texto); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }

/* Bloque de llamada final: centrado como los demás títulos principales */
.bloque--tinte .contenedor { text-align: center; }
.bloque--tinte .prosa { margin-inline: auto; }
.bloque--tinte .botones { justify-content: center; }

/* Aviso de privacidad simplificado: un enlace que abre una ventana */
.aviso-enlace { font-size: 0.9375rem; }
.aviso-modal { border: 0; padding: 0; width: min(38rem, 92vw); max-height: 88vh; border-radius: var(--radio); background: var(--fondo); color: var(--tinta); }
.aviso-modal::backdrop { background: rgb(18 52 71 / 0.65); }
.aviso-modal__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--e-4) var(--e-1); position: sticky; top: 0; background: var(--fondo); }
.aviso-modal__cabecera h2 { font-size: var(--t-2); line-height: 1.25; color: var(--navy); }
.aviso-modal__cuerpo { padding: var(--e-1) var(--e-4) var(--e-4); }
.aviso-modal__cuerpo p + p { margin-top: var(--e-1); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) { .aviso-modal__cabecera, .aviso-modal__cuerpo { padding-inline: var(--e-3); } }

/* Avisos (react-hot-toast, como en el nuevo ContaWizard): la tarjeta es la de la librería. Solo se fija la posición,
   debajo de la barra, y se le pone una sombra que no se pierda sobre el fondo claro. Con JavaScript, el texto del error
   junto al campo se oculta y queda el borde marcado. */
.js .error, .js .mensaje--error { display: none; }
.avisos { top: 5rem !important; }
.aviso-flotante { box-shadow: 0 6px 16px rgb(21 33 46 / 0.24), 0 28px 56px -12px rgb(21 33 46 / 0.62) !important; }