/* base.css — el armazón: lo que enmarca TODA página del sitio.
 *
 * Aquí viven las piezas que no pertenecen a una pantalla sino a la casa:
 * la paleta, la tipografía, el contenedor, los botones, los campos de
 * formulario que comparten el sitio público y el panel, la cabecera y el pie.
 * Si algo sólo se usa en una pantalla, NO va aquí — va en la hoja de esa
 * pantalla (sitio.css · formas.css · panel.css).
 *
 * La paleta NO está inventada: los azules salen del archivo del logotipo, uno
 * por uno. El único color añadido es el latón del botón de acción, que existe
 * porque un azul sobre azul no llama a nadie y porque el latón es el metal de
 * las manijas y los timbres de un hotel. Ese sí está a discusión con Mayra.
 *
 * No hay estilos en línea en ninguna plantilla: la política de contenido del
 * servidor prohíbe el atributo style=, así que un estilo suelto no se ve gris,
 * se ve roto. Todo vive en estas cuatro hojas.
 */

@font-face {
  font-family: "Plex Sans";
  src: url("/fuentes/plexsans-var.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Del logotipo, medidos del archivo ── */
  --marino:        #182557;
  --marino-hondo:  #0f1838;
  --azul:          #224770;
  --acero:         #47698e;
  --acero-claro:   #5a92b8;
  --niebla:        #adbbcb;

  /* ── Papel y tinta ── */
  --hueso:         #f6f8fb;
  --blanco:        #ffffff;
  --tinta:         #141a30;
  --tinta-suave:   #4d566f;
  --linea:         #dde3ec;

  /* ── El acento añadido ── */
  --laton:         #c07b2c;
  --laton-claro:   #e3a355;
  --laton-tenue:   #fdf3e6;

  /* ── Aviso de revisión ── */
  --ambar:         #fff8e6;
  --ambar-borde:   #e0a83c;
  --ambar-fuerte:  #fdece9;
  --rojo-borde:    #c0492c;

  --ancho:         1140px;
  --radio:         14px;
  --sombra:        0 1px 2px rgba(20,26,48,.06), 0 12px 32px -18px rgba(20,26,48,.35);
}

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

/* El atributo `hidden` del navegador vale `display:none`, pero es regla del
   navegador y CUALQUIER regla nuestra le gana: `.boton { display:inline-block }`
   dejaba visibles «Atrás» y «Enviar» en el primer paso del asistente. Esta
   línea devuelve a `hidden` la autoridad que debe tener — esconder algo no
   puede depender de qué otra regla lo tocó antes. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  color: var(--tinta);
  background: var(--blanco);
  font-weight: 400;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); }

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
p { margin: 0 0 1em; }

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--marino); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 8px 0;
}
.saltar:focus { left: 0; }

/* ── Botones ────────────────────────────────────────────────────────────── */

.boton {
  display: inline-block;
  padding: .95rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  background: var(--marino);
  color: #fff;
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton--acento { background: var(--laton); color: #fff; box-shadow: 0 10px 24px -12px rgba(192,123,44,.9); }
.boton--acento:hover { background: var(--laton-claro); }
.boton--fantasma { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); box-shadow: none; }
.boton--fantasma:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.boton--chico { padding: .55rem 1rem; font-size: .93rem; border-radius: 8px; }
.boton--ancho { width: 100%; text-align: center; }
.boton--grande { padding: 1.15rem 1.6rem; font-size: 1.08rem; }
.boton--llano {
  background: transparent; color: var(--tinta-suave); border-color: var(--linea);
  box-shadow: none; font-weight: 500;
}
.boton--llano:hover { border-color: var(--acero); color: var(--marino); background: var(--hueso); }
.boton[disabled], .boton.es-enviando { opacity: .6; cursor: default; transform: none; }

.enlace { color: var(--azul); font-weight: 600; }

/* ── Cabecera ───────────────────────────────────────────────────────────── */

.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__fila { display: flex; align-items: center; gap: 1rem; min-height: 74px; }

.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--marino); }
.marca__logo { width: 92px; height: auto; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.15; padding-left: .1rem;
  border-left: 1px solid var(--linea); padding-left: .7rem; }
.marca__texto b { font-weight: 700; letter-spacing: -.02em; }
.marca__texto small { font-size: .78rem; color: var(--tinta-suave); font-weight: 500; letter-spacing: .01em; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.nav a { color: var(--tinta); text-decoration: none; font-size: .95rem; font-weight: 500; }
.nav a:hover { color: var(--azul); }
.nav__idioma {
  border: 1px solid var(--linea); border-radius: 999px;
  padding: .3rem .8rem; font-size: .86rem !important; color: var(--tinta-suave) !important;
}
.nav .boton { color: #fff; }

.menu__casilla { position: absolute; opacity: 0; pointer-events: none; }
.menu__boton { display: none; margin-left: auto; padding: .6rem; cursor: pointer; }
.menu__boton span { display: block; width: 26px; height: 2px; background: var(--marino); margin: 5px 0; border-radius: 2px; }

/* ── Cintilla de revisión ───────────────────────────────────────────────── */

.cintilla { background: var(--ambar-borde); color: #2a1c02; font-size: .9rem; padding: .55rem 0; }
.cintilla a { color: #2a1c02; }

/* ── Campos compartidos ──────────────────────────────────────────────────────
   El sitio público y el panel usan el mismo campo. Viven aquí y no en la hoja
   de los formularios porque el panel NO carga esa hoja: si se mudan, la
   pantalla de ajustes de Mayra pierde sus cajas de texto y nadie lo nota hasta
   que ella entra. */

.campo__error { color: var(--rojo-borde); font-size: .88rem; margin: .35rem 0 0; font-weight: 600; }
.campo__par { display: flex; gap: 1rem; }
.campo__mitad { flex: 1 1 0; min-width: 0; }

.campo3 { margin: 0 0 1.2rem; }
.campo3 label { display: block; font-weight: 600; font-size: .97rem; margin-bottom: .4rem; color: var(--tinta); }
.campo3 label em { font-style: normal; font-weight: 400; color: var(--tinta-suave); font-size: .88rem; }
.campo3 input, .campo3 textarea {
  width: 100%; font: inherit; font-size: 1.08rem; color: var(--tinta);
  padding: .9rem 1rem; border: 1.5px solid var(--linea); border-radius: 11px; background: var(--blanco);
}
.campo3 textarea { resize: vertical; }
.campo3 input::placeholder { color: #aab2c2; }
.campo3 input:focus, .campo3 textarea:focus {
  outline: 3px solid rgba(34,71,112,.22); outline-offset: 1px; border-color: var(--azul);
}
.campo3 input[aria-invalid="true"] { border-color: var(--rojo-borde); background: #fffafa; }

/* ── La caja de mensaje ──────────────────────────────────────────────────────
   Un renglón que le contesta a quien acaba de hacer algo: el error del
   formulario público y el resultado de guardar en el panel. NO confundir con
   `.aviso__cuerpo`, que es el documento del aviso de privacidad — hasta el
   2026-09-14 las dos cosas se llamaban `.aviso` y el documento heredaba de
   aquí `font-weight: 600`, así que el aviso entero salía en seminegrita. */

.aviso { padding: .8rem 1rem; border-radius: 9px; font-size: .95rem; font-weight: 600; }
.aviso--malo { background: var(--ambar-fuerte); border: 1px solid var(--rojo-borde); color: #7a2a16; }
.aviso--bien { background: #eaf6ee; border: 1px solid #1d6b3f; color: #14532a; }

/* ── Pie ────────────────────────────────────────────────────────────────── */

.pie { background: var(--marino-hondo); color: var(--niebla); padding: clamp(2.6rem, 5vw, 3.6rem) 0 1.6rem; }
.pie__rejilla { display: grid; gap: 2rem; grid-template-columns: 1.6fr 1fr 1fr; }
.pie h3 { color: #fff; font-size: 1rem; margin-bottom: .8rem; }
.pie p { margin: 0 0 .45rem; font-size: .94rem; }
.pie a { color: var(--niebla); text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__logo { width: 96px; background: #fff; border-radius: 8px; padding: .4rem .6rem; margin-bottom: 1rem; }
.pie__nota { max-width: 22rem; }
.pie__nota--tenue { color: #7f8ca3; font-size: .86rem; }
.pie__grande { font-size: 1.35rem !important; font-weight: 700; color: #fff !important; }
.pie__legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.4rem; padding-top: 1.2rem; }
.pie__legal p { font-size: .84rem; color: #7f8ca3; margin: 0; }

/* ── Pantallas chicas ───────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  /* El menú de hamburguesa es puro CSS: una casilla escondida y su etiqueta.
     Sin JavaScript, la navegación funciona aunque el script falle o esté
     bloqueado — y la política de contenido de este sitio no admite scripts
     en línea de todos modos. */
  .menu__boton { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blanco); border-bottom: 1px solid var(--linea);
    padding: .5rem 1.25rem 1.25rem;
    display: none;
  }
  .menu__casilla:checked ~ .nav { display: flex; }
  .nav a { padding: .85rem .2rem; border-bottom: 1px solid var(--linea); font-size: 1.02rem; }
  .nav__idioma { border: 0 !important; border-bottom: 1px solid var(--linea) !important; border-radius: 0; padding-inline: .2rem !important; }
  .nav .boton { margin-top: .9rem; text-align: center; border-bottom: 0; }
  .cabecera__fila { position: relative; flex-wrap: wrap; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .campo__par { flex-direction: column; gap: 0; }
  .pie__rejilla { grid-template-columns: 1fr; }
  .marca__texto small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .boton { transition: none; }
  .boton:hover { transform: none; }
}