/* estilo.css — Kalmo, textos legales (2026-08-19).
   Antes cada una de las 7 páginas llevaba su propio <style> en el <head>,
   con los mismos colores repetidos a mano. Ahora un solo archivo, colores
   en variables CSS (:root), enlazado por las 7.

   EQUIVALENCIAS -- dadas por Marian, ninguna inventada:
     #1E6A66 teal        -> --primario      #3D6B57
     #1B3432 marina      -> --tinta         #2A352E
     #F7F5F0 hueso       -> --hueso         #F7F5F0 (sin cambio)
     #E3E6DE borde       -> --borde         #E3E6DE (sin cambio)
     #EDF2F0 tabla       -> --tabla-cabecera #EFF2EE
     #fff                -> --blanco        #fff (sin cambio, variable
                                             añadida solo por completitud)

   CORRECCIONES DE CONTRASTE, TRAS DOS VUELTAS (2026-08-19, sobre la
   primera versión de la paleta -- los valores intermedios no dejan rastro
   aquí, ver el informe de la sesión si hace falta el historial completo):
     --gris-claro   #5A6B66  (fechas, footer, ayuda, placeholder -- antes
                              casi invisible, era la prioridad en una web
                              legal)
     --acento       #A85832  (coral oscurecido -- SOLO lo usa el asterisco
                              de campo obligatorio en solicitud.html)
     `.top a`       --blanco (el enlace "← Kalmo" de la barra superior de
                              condiciones.html/privacidad.html -- es una
                              barra de navegación, no necesitaba el verde
                              claro)
     `.lema`        --blanco (el subtítulo de la portada, index.html --
                              mismo motivo: no puede quedarse por debajo
                              de 4,5:1)

   --burbuja (#A8C3B1) YA NO LA USA NINGÚN SELECTOR de este archivo -- las
   dos instancias que la llevaban (`.top a` y `.lema`) pasaron a blanco.
   Se retira de `:root` a propósito: es un color de la paleta Agua que
   existe en la app (`COLORS.burbuja`), pero esta web no tiene ningún sitio
   donde usarlo hoy sin bajar de 4,5:1. Si aparece un uso nuevo que SÍ
   tolere ese contraste (un fondo, un adorno, algo sin texto encima), se
   puede volver a dar de alta.

   --error (#C75A3E) se queda TAL CUAL, a propósito: es el rojo de error
   de solicitud.html, una sola pantalla, y no se toca a la vez que el resto
   de la paleta. DEUDA: sigue por debajo de 4,5:1 (3,89:1 sobre hueso).

   DERIVAS CORREGIDAS AL UNIFICAR -- no eran una decisión de diseño, eran
   una copia mal hecha del CSS de arriba, y SOLO estaban en normas.html y
   seguridad.html:
     #3D524E (texto de párrafo/li) -> ahora --tinta, igual que en el resto del sitio
     #E0DFD6 (borde superior de .fecha) -> ahora --borde, igual que en el resto

   LAS SOMBRAS venían como rgba(27,52,50,X) -- 27,52,50 es el marina VIEJO
   (#1B3432) en RGB, nunca fue un color aparte, siempre fue "marina a poca
   opacidad". Se actualizan al RGB de la --tinta nueva (42,53,46) para no
   dejar una sombra teñida de un color que ya no existe en la paleta --
   mismo alfa que tenían (.06/.10/.12), eso no lo pidió nadie cambiar. */

:root {
  --primario: #3D6B57;
  --tinta: #2A352E;
  --hueso: #F7F5F0;
  --gris-claro: #5A6B66;
  --gris: #4E625E;
  --borde: #E3E6DE;
  --acento: #A85832;
  --error: #C75A3E;
  --tabla-cabecera: #EFF2EE;
  --blanco: #fff;
  --sombra-suave: rgba(42, 53, 46, .06);
  --sombra-media: rgba(42, 53, 46, .10);
  --sombra-fuerte: rgba(42, 53, 46, .12);
}

/* RESET COMPARTIDO. box-sizing:border-box ya lo llevaban, cada una por su
   cuenta, index.html/condiciones.html/privacidad.html/solicitud.html/
   informacion-basica.html -- normas.html y seguridad.html NO lo llevaban.
   Al hacerlo universal aquí, `.contenido` (más abajo, la familia de esas
   dos) sube su max-width de 720 a 768: con border-box el padding pasa a
   restar del max-width en vez de sumarle, y 768-48(padding)=720, el mismo
   ancho de texto que tenía sin border-box. Resultado: ni el ancho total ni
   el ancho de columna de texto cambian ni un píxel en ninguna página. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hueso);
  font-family: 'Outfit', sans-serif;
  color: var(--tinta);
}

strong { font-weight: 600; }
a { color: var(--primario); }

/* footer -- letra por letra igual en index.html, condiciones.html y
   privacidad.html (las únicas 3 con <footer>): no hace falta escoparlo. */
footer {
  border-top: 1px solid var(--borde);
  padding: 22px 24px;
  text-align: center;
  font: 400 13px 'Outfit', sans-serif;
  color: var(--gris-claro);
}

/* ==========================================================================
   PORTADA -- index.html (única página con body.portada)
   ========================================================================== */
body.portada {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.portada .hero { background: var(--primario); padding: 64px 24px 56px; text-align: center; }
body.portada .marca { font: 700 40px 'Quicksand', sans-serif; color: var(--hueso); margin: 0; }
body.portada .lema { font: 400 16px 'Outfit', sans-serif; color: var(--blanco); margin: 10px 0 0; }
body.portada main { flex: 1; max-width: 620px; margin: 0 auto; padding: 44px 24px 60px; width: 100%; }
body.portada h2 { font: 700 20px 'Quicksand', sans-serif; margin: 0 0 22px; }
body.portada .doc {
  display: block;
  background: var(--blanco);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px var(--sombra-suave);
  border-left: 3px solid var(--primario);
  transition: transform .15s ease, box-shadow .15s ease;
}
body.portada .doc:hover { transform: translateY(-2px); box-shadow: 0 6px 18px var(--sombra-media); }
body.portada .doc-t { font: 600 17px 'Outfit', sans-serif; margin: 0 0 5px; }
body.portada .doc-d { font: 400 14px/1.55 'Outfit', sans-serif; color: var(--gris); margin: 0; }
body.portada .contacto { margin-top: 36px; font: 400 14.5px/1.7 'Outfit', sans-serif; color: var(--gris); }
body.portada .contacto a { color: var(--primario); }

/* ==========================================================================
   FAMILIA A -- condiciones.html y privacidad.html (barra ".top" + <main>).
   Sin clase de página: son el par "por defecto", igual que hoy.
   ========================================================================== */
.top { background: var(--primario); padding: 22px 24px; }
.top a { font: 600 15px 'Outfit', sans-serif; color: var(--blanco); text-decoration: none; }
.top a:hover { color: var(--hueso); }
main { max-width: 680px; margin: 0 auto; padding: 40px 24px 80px; }
main h1 { font: 700 30px 'Quicksand', sans-serif; margin: 0 0 6px; line-height: 1.25; }
main .version { font: 400 13.5px 'Outfit', sans-serif; color: var(--gris-claro); margin: 0 0 34px; }
main h2 { font: 700 20px 'Quicksand', sans-serif; margin: 38px 0 12px; line-height: 1.3; }
main h3 { font: 600 16px 'Outfit', sans-serif; margin: 22px 0 8px; }
main p { font: 400 15.5px/1.7 'Outfit', sans-serif; margin: 0 0 14px; }
main ul { margin: 0 0 16px; padding-left: 20px; }
main li { font: 400 15.5px/1.7 'Outfit', sans-serif; margin-bottom: 8px; }
main li::marker { color: var(--primario); }
main .destacado {
  background: var(--blanco);
  border-left: 3px solid var(--primario);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 18px;
  box-shadow: 0 1px 3px var(--sombra-suave);
}
main .destacado p:last-child { margin-bottom: 0; }
/* table/th/td -- solo privacidad.html las usa, viven aquí igualmente
   porque cuelgan de <main>. */
main table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  background: var(--blanco);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px var(--sombra-suave);
}
main th {
  font: 600 13.5px 'Outfit', sans-serif;
  text-align: left;
  padding: 12px 14px;
  background: var(--tabla-cabecera);
  color: var(--tinta);
  border-bottom: 1px solid var(--borde);
}
main td {
  font: 400 14.5px/1.6 'Outfit', sans-serif;
  padding: 12px 14px;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}
main tr:last-child td { border-bottom: none; }
@media (max-width: 520px) {
  main th, main td { padding: 10px; font-size: 13.5px; }
}

/* ==========================================================================
   FAMILIA B -- normas.html y seguridad.html (wrapper ".contenido", sin
   barra superior).
   ========================================================================== */
.contenido {
  max-width: 768px; /* ver la nota del reset, arriba */
  margin: 0 auto;
  padding: 48px 24px 64px;
  line-height: 1.65;
}
.contenido h1 { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 32px; margin: 0 0 4px; }
.contenido .subtitulo { color: var(--gris); font-size: 16px; margin: 0 0 32px; }
.contenido h2 { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 20px; margin: 36px 0 12px; color: var(--primario); }
.contenido p { margin: 0 0 14px; color: var(--tinta); font-size: 15.5px; }
.contenido ul { margin: 0 0 14px; padding-left: 22px; }
.contenido li { margin-bottom: 10px; color: var(--tinta); font-size: 15.5px; }
.contenido .intro {
  background: var(--blanco);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px var(--sombra-suave);
  margin-bottom: 8px;
}
.contenido .fecha {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--borde);
  color: var(--gris-claro);
  font-size: 13.5px;
}
.contenido a { color: var(--primario); font-weight: 600; text-decoration: none; }
.contenido a:hover { text-decoration: underline; }
.contenido strong { color: var(--tinta); }

/* ==========================================================================
   FORMULARIO -- solicitud.html
   ========================================================================== */
body.formulario {
  margin: 0 auto;
  max-width: 560px;
  padding: 28px 22px 60px;
}
body.formulario h1 { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 26px; margin: 0 0 6px; }
body.formulario .sub { font-size: 14px; color: var(--gris); margin: 0 0 26px; line-height: 1.5; }
body.formulario label { display: block; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 13px; margin: 18px 0 8px; }
body.formulario .req { color: var(--acento); }
body.formulario input,
body.formulario textarea {
  width: 100%;
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: 14px;
  padding: 14px 15px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--tinta);
}
body.formulario input:focus,
body.formulario textarea:focus { outline: none; border-color: var(--primario); }
body.formulario textarea { min-height: 130px; resize: vertical; }
body.formulario .ayuda { font-size: 12px; color: var(--gris-claro); margin-top: 7px; }
body.formulario .desp { position: relative; }
body.formulario #cabeza {
  width: 100%;
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: 14px;
  padding: 14px 15px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--gris-claro);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
body.formulario #cabeza.puesto { color: var(--tinta); font-weight: 500; }
body.formulario #cabeza .flecha { color: var(--gris-claro); font-size: 12px; }
body.formulario #lista {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: 14px;
  overflow: hidden;
  z-index: 10;
  box-shadow: 0 10px 30px var(--sombra-fuerte);
}
body.formulario #lista.abierta { display: block; }
body.formulario .op {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--borde);
  padding: 14px 15px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
}
body.formulario .op:last-child { border-bottom: none; }
body.formulario .op:hover { background: var(--hueso); }
body.formulario button#enviar {
  width: 100%;
  background: var(--primario);
  color: var(--blanco);
  border: none;
  border-radius: 999px;
  padding: 16px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 15px;
  margin-top: 28px;
  cursor: pointer;
}
body.formulario button#enviar:disabled { opacity: .5; }
body.formulario .oculto { position: absolute; left: -9999px; }
body.formulario #aviso { margin-top: 18px; font-size: 14px; line-height: 1.5; display: none; }
body.formulario .mal { color: var(--error); }
body.formulario #gracias { display: none; text-align: center; padding: 40px 0; }
body.formulario #gracias h1 { margin-bottom: 10px; }

/* ==========================================================================
   AVISO CORTO -- informacion-basica.html (la enlaza la app desde el
   registro; su URL, informacion-basica.html en la raíz, no cambia).
   ========================================================================== */
body.info-basica {
  margin: 0 auto;
  max-width: 560px;
  padding: 28px 22px 60px;
  line-height: 1.6;
}
body.info-basica h1 { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 24px; margin: 0 0 22px; line-height: 1.3; }
body.info-basica p { margin: 0 0 16px; font-size: 14.5px; }
body.info-basica strong { font-family: 'Quicksand', sans-serif; font-weight: 700; }
body.info-basica a { color: var(--primario); font-weight: 600; }
body.info-basica .pie { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--borde); font-size: 13px; color: var(--gris-claro); }