/* Sitio público de Cuadrillera. Colores y tipografía: MARCA.md.
   Una sola hoja y sin dependencias: debe cargar rápido con mala señal. */

@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('/_assets/fuentes/barlow-semi-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('/_assets/fuentes/barlow-semi-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/_assets/fuentes/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('/_assets/fuentes/barlow-latin-600-normal.woff2') format('woff2'); }

:root {
  --azul: #14324A;
  --azul-profundo: #0E2536;
  --naranja: #F26A1B;
  --concreto: #EEF1F4;
  --tinta: #0E1C28;
  --blanco: #FFFFFF;
  --secundario: #3A4A58;
  --borde: #D3D9E0;
  --exito: #1E7A46;
  --alerta: #B45309;
  --error: #B3261E;
  --titulos: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --texto: 'Barlow', Arial, sans-serif;
  --radio: 12px;
  --radio-boton: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--concreto); color: var(--tinta); font: 400 1.0625rem/1.5 var(--texto); }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--azul); text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--titulos); font-weight: 700; line-height: 1.12; margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1em; }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
/* El encabezado es fijo: sin esto, las anclas quedan tapadas por él. */
[id] { scroll-margin-top: 84px; }

.ancho { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.ancho--angosto { max-width: 760px; }
.cifra { font-variant-numeric: tabular-nums; }

.saltar { position: absolute; left: -999px; top: 0; background: var(--blanco); padding: 12px 16px; z-index: 20; }
.saltar:focus { left: 8px; top: 8px; }

/* Botones (MARCA.md, sección 9) */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px;
  border: 2px solid transparent; border-radius: var(--radio-boton); font: 700 1.125rem/1.1 var(--titulos);
  letter-spacing: .02em; text-decoration: none; cursor: pointer; text-align: center; }
.boton--primario { background: var(--azul); color: var(--blanco); }
.boton--primario:hover { background: var(--azul-profundo); }
/* En el botón naranja el texto va en tinta, nunca en blanco: contraste 5.6. */
.boton--checar { background: var(--naranja); color: var(--tinta); }
.boton--checar:hover { background: #ff7b2e; }
.boton--contorno { border-color: var(--blanco); color: var(--blanco); }
.boton--contorno:hover { background: rgba(255,255,255,.12); }
.boton--chico { min-height: 44px; padding: 8px 16px; font-size: 1rem; }
.boton--grande { width: 100%; min-height: 56px; font-size: 1.25rem; }

/* Encabezado */
.encabezado { position: sticky; top: 0; z-index: 10; background: var(--blanco); border-bottom: 1px solid var(--borde); }
.encabezado__fila { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.encabezado__logo { display: flex; margin-right: auto; }
.encabezado__logo img { height: 36px; width: auto; }
.encabezado__nav { display: none; gap: 24px; }
.encabezado__nav a { color: var(--tinta); font-weight: 600; text-decoration: none; padding: 12px 0; }
.encabezado__nav a:hover { text-decoration: underline; }
@media (min-width: 760px) { .encabezado__nav { display: flex; } }

/* Portada */
.portada { background: var(--azul); color: var(--blanco); padding: 48px 0 56px; overflow: hidden; }
.portada__fila { display: grid; gap: 40px; align-items: center; }
.portada h1 { font-size: clamp(2.5rem, 7vw, 4.25rem); margin-bottom: .35em; }
.portada__bajada { font-size: clamp(1.125rem, 2.4vw, 1.375rem); max-width: 34em; }
.portada__botones { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 24px; }
.portada__puntos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 0; margin: 0;
  font: 600 1.125rem var(--titulos); letter-spacing: .04em; text-transform: uppercase; }
.portada__puntos li::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px;
  border-radius: 50%; background: var(--naranja); }
@media (min-width: 900px) {
  .portada { padding: 72px 0 80px; }
  .portada__fila { grid-template-columns: 1.25fr .75fr; }
}

.etiqueta { display: inline-block; font: 600 .9375rem var(--titulos); letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 20px; }
.etiqueta--clara { background: var(--azul-profundo); color: var(--blanco); border: 1px solid rgba(255,255,255,.35); }

/* Dibujo del teléfono */
.telefono { justify-self: center; width: min(300px, 82vw); padding: 12px; border-radius: 36px; background: var(--azul-profundo);
  border: 2px solid rgba(255,255,255,.22); }
.telefono__pantalla { background: var(--concreto); color: var(--tinta); border-radius: 26px; padding: 18px 16px 20px; text-align: center; }
.telefono__barra { display: flex; justify-content: space-between; gap: 8px; font-size: .8125rem; font-weight: 600; color: var(--secundario); text-align: left; }
.telefono__senal { color: var(--alerta); white-space: nowrap; }
.telefono__hora { font: 700 4rem/1 var(--titulos); margin: 22px 0 0; font-variant-numeric: tabular-nums; color: var(--azul); }
.telefono__fecha { color: var(--secundario); margin: 4px 0 20px; }
.telefono__boton { background: var(--naranja); color: var(--tinta); border-radius: var(--radio-boton); padding: 18px;
  font: 700 1.625rem var(--titulos); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
.telefono__estado { display: flex; align-items: center; gap: 8px; background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio-boton); padding: 10px 12px; font-size: .875rem; font-weight: 600; text-align: left; margin-top: 8px; }
.telefono__estado svg { flex: none; }
.telefono__estado--ok { color: var(--exito); }
.telefono__estado--pendiente { color: var(--alerta); }

/* Secciones */
.seccion { padding: 56px 0; }
.seccion--blanca { background: var(--blanco); }
.seccion--azul { background: var(--azul); color: var(--blanco); }
.seccion--azul a { color: var(--blanco); }
.seccion--sola { min-height: 60vh; }
@media (min-width: 900px) { .seccion { padding: 80px 0; } }

.titulo { font-size: clamp(1.875rem, 4.5vw, 2.75rem); letter-spacing: .04em; text-transform: uppercase; color: var(--azul); }
.titulo--largo { letter-spacing: 0; text-transform: none; }
.titulo--claro { color: var(--blanco); }
.subtitulo { font-size: 1.5rem; margin: 48px 0 20px; color: var(--azul); }
.entrada { font-size: 1.1875rem; max-width: 44em; margin-bottom: 32px; }
.nota { color: var(--secundario); margin-top: 24px; }
.fuente { font-size: .9375rem; border-top: 1px solid rgba(255,255,255,.3); padding-top: 16px; margin-top: 24px; }
.fuente--oscura { border-top-color: var(--borde); color: var(--secundario); }

.rejilla { display: grid; gap: 16px; }
@media (min-width: 700px) { .rejilla--2 { grid-template-columns: repeat(2, 1fr); } .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }

.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; }
.tarjeta h3, .tarjeta h4 { font-size: 1.375rem; color: var(--azul); }
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta--borde { background: var(--concreto); }
a.tarjeta { display: block; color: inherit; text-decoration: none; }
a.tarjeta:hover { border-color: var(--azul); }
a.tarjeta .tarjeta__mas { color: var(--azul); font-weight: 600; text-decoration: underline; }
@media (min-width: 700px) { .tarjeta--ancha { grid-column: 1 / -1; } }
.icono { width: 40px; height: 40px; margin-bottom: 12px; fill: none; stroke: var(--naranja); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

/* Pasos */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; }
.pasos li { position: relative; padding-left: 68px; }
.pasos__numero { position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--azul);
  color: var(--blanco); font: 700 1.5rem/48px var(--titulos); text-align: center; }
.pasos h3 { font-size: 1.5rem; color: var(--azul); margin-bottom: .25em; }
.pasos p { margin: 0; }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(3, 1fr); } }

/* Precios */
.plan { border: 2px solid var(--azul); border-radius: var(--radio); padding: 24px; background: var(--blanco); }
.plan h3 { font-size: 1.25rem; letter-spacing: .04em; text-transform: uppercase; color: var(--azul); }
.plan__precio { margin: 0; font-size: 1.0625rem; }
.plan__precio .cifra { font: 700 2.75rem/1 var(--titulos); color: var(--tinta); }
.plan__tope { margin: 8px 0 0; font-weight: 600; }

.calculadora { margin-top: 32px; background: var(--concreto); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; }
.calculadora h3 { font-size: 1.5rem; color: var(--azul); }
.calculadora label { font-weight: 600; display: block; margin-bottom: 8px; }
.calculadora__fila { display: flex; align-items: center; gap: 16px; }
.calculadora input[type=range] { flex: 1; min-width: 0; height: 48px; accent-color: var(--azul); }
.calculadora input[type=number] { width: 96px; }
.calculadora__resultado { font-size: 1.25rem; margin: 16px 0 0; }
.calculadora__resultado .cifra { font: 700 1.75rem var(--titulos); }
.calculadora__anual { display: block; font-size: 1.0625rem; color: var(--secundario); }
.calculadora__anual .cifra { font-size: 1.25rem; color: var(--tinta); }

.incluye { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 10px; }
.incluye li { position: relative; padding-left: 32px; }
.incluye li::before { content: ''; position: absolute; left: 4px; top: .35em; width: 14px; height: 8px;
  border-left: 3px solid var(--exito); border-bottom: 3px solid var(--exito); transform: rotate(-45deg); }

/* Preguntas */
.pregunta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: 10px; }
.pregunta summary { cursor: pointer; padding: 16px 48px 16px 20px; font: 600 1.25rem/1.25 var(--titulos); position: relative; list-style: none; min-height: 48px; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font: 700 1.75rem/1 var(--titulos); color: var(--naranja); }
.pregunta[open] summary::after { content: '–'; }
.pregunta p { padding: 0 20px 18px; margin: 0; }

/* Formulario */
.formulario { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .formulario { grid-template-columns: 1fr 1fr; } .formulario > * { grid-column: 1 / -1; } .formulario > .campo--mitad { grid-column: auto; } }
.campo label { display: block; font-weight: 600; margin-bottom: 6px; }
input[type=text], input[type=number], select { width: 100%; min-height: 52px; padding: 10px 14px; border: 2px solid var(--secundario);
  border-radius: var(--radio-boton); background: var(--blanco); color: var(--tinta); font: 400 1.0625rem var(--texto); }
input[aria-invalid=true], select[aria-invalid=true] { border-color: var(--error); }
.campo__error { color: var(--error); font-weight: 600; margin: 6px 0 0; }
.campo--casilla { display: grid; grid-template-columns: 28px 1fr; gap: 4px 10px; align-items: start; }
.campo--casilla input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--azul); }
.campo--casilla label { margin: 0; font-weight: 400; padding: 2px 0; }
.campo--casilla .campo__error { grid-column: 2; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aviso { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--radio-boton); font-weight: 600;
  border: 2px solid; background: var(--blanco); margin-bottom: 20px; }
.aviso--error { color: var(--error); }
.aviso--exito { color: var(--exito); display: inline-flex; }

/* Páginas de texto */
.texto h2 { font-size: 1.625rem; color: var(--azul); margin-top: 1.6em; }
.texto ul { padding-left: 1.25em; margin: 0 0 1em; }
.texto li { margin-bottom: .35em; }
.migas { font-size: .9375rem; color: var(--secundario); margin-bottom: 20px; }
.migas a { color: var(--secundario); }
.cierre { background: var(--concreto); border: 1px solid var(--borde); border-radius: var(--radio); padding: 28px 24px; margin-top: 40px; }
.cierre h2 { margin-top: 0; }

/* Pie */
.pie { background: var(--azul-profundo); color: var(--blanco); padding: 40px 0 24px; }
.pie__fila { display: grid; gap: 28px; }
.pie__lema { margin: 12px 0 0; }
.pie__nav { display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pie__nav a { color: var(--blanco); padding: 8px 0; }
.pie__nota { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.2); font-size: .9375rem; }
.pie__nota p { margin: 0; }
@media (min-width: 760px) { .pie__fila { grid-template-columns: 1fr 2fr; } }

/* Páginas de entrada */
.portada--interior { padding: 36px 0 44px; }
.portada--interior h1 { font-size: clamp(2.125rem, 6vw, 3.25rem); }
.portada--interior .portada__botones { margin-bottom: 0; }
.migas--claras, .migas--claras a { color: var(--blanco); }
.pregunta--borde { background: var(--concreto); }
.tabla-caja { overflow-x: auto; margin: 0 0 1.5em; border: 1px solid var(--borde); border-radius: var(--radio); }
.tabla { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 1rem; }
.tabla th, .tabla td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borde); }
.tabla thead th { background: var(--azul); color: var(--blanco); font: 600 1rem var(--titulos); letter-spacing: .04em; text-transform: uppercase; }
.tabla tbody th { font-weight: 600; }
.tabla tr:last-child th, .tabla tr:last-child td { border-bottom: 0; }
.tabla__propia th, .tabla__propia td { background: var(--concreto); font-weight: 600; }
.enlaces { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.enlaces a { display: flex; align-items: center; min-height: 52px; padding: 10px 16px; background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio-boton); font-weight: 600; text-decoration: none; }
.enlaces a:hover { border-color: var(--azul); text-decoration: underline; }
.pie__titulo { font: 600 1rem var(--titulos); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px; }