/* ==========================================================================
   Caelus · sistema visual común
   Única fuente de colores, tipografías y componentes compartidos por todas
   las páginas públicas (inicio, quiz, privacidad). Cada página agrega solo
   lo propio en su hoja: inicio.css, quiz.css, legal.css.

   Reglas del sistema
   - Slate y Paper son las dos superficies. Las secciones alternan entre ellas
     (.on-slate / .on-paper); los componentes se adaptan solos a cada una.
   - Ochre no es un color de texto ni de fondo: marca. En la web aparece como
     filete (.filete) y, sobre paper, en las etiquetas (.eyebrow). En las
     ilustraciones marca el elemento del dolor (el anillo de Atlas, el hilo
     de Teseo…). Si algo nuevo necesita ochre, probablemente no lo necesita.
   - Libre Caslon (400, nunca bold) para títulos y nombres. Hanken Grotesk
     para texto e interfaz. Spline Sans Mono para datos, contadores y legales.
   - Esquinas rectas en todo. Bordes de 1px; grillas separadas por 2px de stone.
   ========================================================================== */

:root{
  --slate:#35444e;
  --slate-deep:#2b373f;
  --ochre:#9a8a52;
  --ochre-deep:#6a5f33;
  --ochre-light:#c2b178;    /* ochre para texto sobre slate: el ochre base no llega a 4,5:1 ahí (2,9:1); este, 4,7:1 */
  --paper:#e6e8e5;
  --surface:#dcdfdb;
  --stone:#c7ccc6;
  --muted:#4a5760;          /* texto secundario sobre paper */

  /* texto sobre slate */
  --on-slate-strong:rgba(230,232,229,0.86);
  --on-slate-soft:rgba(230,232,229,0.6);
  --on-slate-line:rgba(198,204,198,0.28);

  --serif:"Libre Caslon Text", Georgia, serif;
  --sans:"Hanken Grotesk", Arial, sans-serif;
  --mono:"Spline Sans Mono", Consolas, "Courier New", monospace;

  --edge:clamp(1.25rem, 5vw, 4.5rem);
  --maxw:1140px;
  --nav-h:68px;
}

/* --- base --- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--slate);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
p{max-width:60ch}
button{font:inherit;color:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--edge);padding-right:var(--edge)}

/* --- superficies --- */
.on-slate{background:var(--slate);color:var(--paper)}
.on-paper{background:var(--paper);color:var(--slate)}

/* --- tipografía --- */
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-0.01em}
.h2{font-size:clamp(1.9rem, 3.6vw, 2.7rem);margin-bottom:1.5rem}
.lead{font-size:clamp(1.05rem, 1.6vw, 1.2rem);max-width:52ch}
.on-slate .lead{color:rgba(230,232,229,0.82)}

/* Etiqueta sobre títulos. Con filete inferior por defecto; .plain sin él. */
.eyebrow{
  font-family:var(--sans);font-weight:500;font-size:0.74rem;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ochre-deep);
  display:inline-block;
  padding-bottom:0.85rem;border-bottom:1px solid var(--stone);margin-bottom:1.9rem;
}
.on-slate .eyebrow{color:var(--stone);border-color:var(--on-slate-line)}
.eyebrow.plain{border:0;padding:0;margin-bottom:0}

/* El único uso del ochre como forma */
.filete{width:56px;height:3px;background:var(--ochre)}

/* --- navegación (igual en todas las páginas) --- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(230,232,229,0.92);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--stone);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
/* Marca: CAELUS en versales, en Caslon (la serif del sistema), en el menú y en el pie */
.wordmark{font-family:var(--serif);font-weight:400;font-size:1.3rem;letter-spacing:0.14em;text-transform:uppercase;line-height:1;color:var(--slate);text-decoration:none}
nav.links{display:flex;gap:2rem}
nav.links a{
  font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:500;
  color:var(--slate);text-decoration:none;padding:4px 0;
  border-bottom:1px solid transparent;transition:border-color .18s, color .18s;
}
nav.links a:hover,nav.links a:focus-visible,nav.links a[aria-current="page"]{color:var(--ochre-deep);border-color:var(--ochre-deep)}
.nav-toggle{display:none;background:none;border:0;padding:10px;margin-right:-10px;color:var(--slate)}
.nav-toggle span{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .2s, opacity .2s}
.nav-toggle span + span{margin-top:6px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* --- botones ---
   .btn: relleno. .btn-ghost: contorno. Ambos invierten al pasar el mouse
   y se adaptan a la superficie donde estén. */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:0.9rem;
  letter-spacing:0.04em;text-decoration:none;
  padding:0.95rem 1.9rem;border:1px solid var(--paper);
  background:var(--paper);color:var(--slate);
  transition:background .18s, color .18s;
}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--paper)}
.btn-ghost{background:transparent;color:var(--paper)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--paper);color:var(--slate)}
.on-paper .btn{background:var(--slate);border-color:var(--slate);color:var(--paper)}
.on-paper .btn:hover,.on-paper .btn:focus-visible{background:transparent;color:var(--slate)}
.on-paper .btn-ghost{background:transparent;color:var(--slate)}
.on-paper .btn-ghost:hover,.on-paper .btn-ghost:focus-visible{background:var(--slate);color:var(--paper)}

/* Acción secundaria en texto, con el lenguaje del menú */
.text-link{
  background:none;border:0;padding:4px 0;
  font-size:0.8rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
  border-bottom:1px solid currentColor;opacity:.75;transition:opacity .18s;
}
.text-link:hover,.text-link:focus-visible{opacity:1}

/* Recuadro de énfasis (inicio: "En la práctica"; quiz: diagnóstico) */
.callout{padding:2.3rem 2.2rem;background:var(--surface);border-left:2px solid var(--slate)}
.on-slate .callout{background:var(--slate-deep);border-left-color:var(--stone)}
.on-slate .callout .label{color:var(--stone)}
.callout .label{
  display:block;font-weight:600;font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ochre-deep);margin-bottom:0.8rem;
}

/* --- piezas de formulario (casilla de consentimiento, honeypot, Turnstile) --- */
.check{display:flex;gap:0.75rem;align-items:flex-start;font-size:0.88rem;line-height:1.55}
.check input{flex-shrink:0;width:1.05rem;height:1.05rem;margin-top:0.2rem;accent-color:var(--slate)}
.on-slate .check input{accent-color:var(--paper)}
.on-slate .check{color:var(--on-slate-strong)}
.check a{color:inherit;text-underline-offset:2px}
.check input:focus-visible{outline:2px solid var(--ochre);outline-offset:1px}
/* honeypot: fuera de pantalla (no display:none, que algunos bots detectan) */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.cf-turnstile{min-height:65px}
button.btn{cursor:pointer}

/* --- formulario plegable (.fold) ---
   Un <details> con aspecto de recuadro: empieza cerrado y se abre con el + de la derecha.
   Funciona sin JavaScript y con teclado. Lo usan contacto (inicio) y el resultado del quiz. */
.fold summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:1fr auto;column-gap:1.5rem;align-items:center;
}
.fold summary::-webkit-details-marker{display:none}
.fold summary:focus-visible{outline:2px solid var(--ochre);outline-offset:6px}
.fold summary .label{grid-column:1}
.fold-intro{grid-column:1;max-width:60ch}
.on-slate .fold-intro{color:var(--on-slate-strong)}
.fold-toggle{
  grid-column:2;grid-row:1 / span 2;position:relative;width:2.6rem;height:2.6rem;
  border:1px solid var(--stone);transition:border-color .18s;
}
.on-slate .fold-toggle{border-color:rgba(198,204,198,0.4)}
.fold-toggle::before,.fold-toggle::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .25s ease}
.fold-toggle::after{transform:translate(-50%,-50%) rotate(90deg)}
.fold[open] .fold-toggle::after{transform:translate(-50%,-50%) rotate(0deg)}
.fold summary:hover .fold-toggle{border-color:currentColor}
@keyframes fold-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- caja de contacto (.contact-box) ---
   La misma en el inicio y en el resultado del quiz. Tres filas del mismo peso: correo, agenda
   y contacto directo. Texto a la izquierda; a la derecha, una acción de ancho fijo con botones
   del mismo estilo y alto, para que ninguna opción parezca más importante que otra. */
.contact-box{width:100%;max-width:46rem}
.cb-rows{margin-top:1.6rem;animation:fold-open .3s ease}
.cb-row{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 18rem;gap:0.75rem 2rem;
  align-items:center;padding:1.2rem 0;border-top:1px solid var(--stone);
}
.on-slate .cb-row{border-color:var(--on-slate-line)}
.cb-row:last-child{padding-bottom:0.2rem}
.cb-copy .label{margin-bottom:0.25rem}
.cb-text{display:block;font-size:0.95rem}
.on-slate .cb-text{color:var(--on-slate-strong)}
.cb-action{display:flex}
.cb-btn{
  flex:1;display:flex;align-items:center;justify-content:center;min-height:3rem;padding:0 1.2rem;
  font-family:var(--sans);font-weight:600;font-size:0.88rem;letter-spacing:0.04em;white-space:nowrap;
  text-decoration:none;color:inherit;background:transparent;border:1px solid currentColor;
  cursor:pointer;transition:background .18s, color .18s;
}
/* Acento ochre: el borde marca las tres acciones por igual y al pasar el mouse se rellenan.
   Sobre slate se usa --ochre-light (el ochre base no alcanza contraste ahí). */
.cb-btn{border-color:var(--ochre-deep)}
.on-paper .cb-btn:hover,.on-paper .cb-btn:focus-visible{background:var(--ochre-deep);color:var(--paper)}
.on-slate .cb-btn{color:var(--paper);border-color:var(--ochre-light)}
.on-slate .cb-btn:hover,.on-slate .cb-btn:focus-visible{background:var(--ochre-light);color:var(--slate-deep)}
.cb-action input{
  flex:1;min-width:0;min-height:3rem;font:inherit;font-size:0.95rem;color:inherit;border-radius:0;
  padding:0 0.9rem;background:transparent;border:1px solid var(--stone);border-right:0;
}
.on-slate .cb-action input{border-color:rgba(230,232,229,0.55);background:rgba(43,55,63,0.6)}
.cb-action input::placeholder{color:inherit;opacity:.45}
.cb-action input:focus-visible{outline:2px solid var(--ochre);outline-offset:1px}
.cb-action input + .cb-btn{flex:0 0 auto;padding:0 1.3rem}
.copy-icon{margin-left:0.6rem;flex-shrink:0}
.cb-extra{grid-column:1 / -1}
.cb-extra .check{font-size:0.8rem}
.cb-extra .cf-turnstile{min-height:0}
@media (max-width:720px){ .cb-row{grid-template-columns:1fr} }

/* --- footer (igual en todas las páginas) --- */
footer{background:var(--slate-deep);color:var(--paper);padding-block:2.8rem}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
footer .wordmark{color:var(--paper)}
footer .copy{font-family:var(--mono);font-size:0.78rem;letter-spacing:0.02em;color:var(--on-slate-soft)}
.legal{display:flex;gap:1.5rem;flex-wrap:wrap}
.legal a,.legal button{
  font-family:var(--mono);font-size:0.78rem;letter-spacing:0.02em;line-height:1.6;
  color:var(--on-slate-soft);text-decoration:none;background:none;border:0;padding:0;
  border-bottom:1px solid transparent;transition:color .18s, border-color .18s;
}
.legal a:hover,.legal a:focus-visible,.legal button:hover,.legal button:focus-visible,.legal a[aria-current="page"]{color:var(--paper);border-color:currentColor}
.legal [hidden]{display:none}

/* --- banner de consentimiento ---
   Rechazar y Aceptar tienen el mismo peso visual a propósito: un "rechazar"
   escondido o más pálido invalida el consentimiento. */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:var(--slate-deep);color:var(--paper);
  border-top:1px solid var(--on-slate-line);
  box-shadow:0 -6px 24px rgba(0,0,0,0.18);
}
.consent[hidden]{display:none}
.consent-wrap{
  max-width:var(--maxw);margin:0 auto;padding:1.25rem var(--edge);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;
}
.consent-text{font-size:0.88rem;line-height:1.55;max-width:72ch;color:var(--on-slate-strong)}
.consent-text a{color:var(--paper);text-decoration:underline;text-underline-offset:2px}
.consent-actions{display:flex;gap:0.75rem;flex-shrink:0}
.consent-btn{
  font-weight:600;font-size:0.85rem;letter-spacing:0.04em;
  min-width:7.5rem;padding:0.7rem 1.3rem;
  background:transparent;color:var(--paper);border:1px solid var(--paper);
  transition:background .18s, color .18s;
}
.consent-btn:hover,.consent-btn:focus-visible{background:var(--paper);color:var(--slate-deep)}
/* En teléfonos el banner va compacto para que no tape el contenido (p. ej. «Empezar» del quiz).
   Los botones mantienen al menos 44 px de alto para tocarlos bien, y se respeta la barra de inicio del iPhone. */
@media (max-width:620px){
  .consent-wrap{padding:0.75rem var(--edge) calc(0.75rem + env(safe-area-inset-bottom, 0px));gap:0.6rem}
  .consent-text{font-size:0.78rem;line-height:1.4}
  .consent-btn{min-width:0;min-height:2.75rem;padding:0.45rem 1rem;font-size:0.82rem}
}

/* --- aparición al hacer scroll --- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* --- responsive común --- */
@media (max-width:620px){
  .nav-toggle{display:block}
  nav.links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;padding:0.5rem var(--edge) 1.25rem;
    background:rgba(230,232,229,0.98);border-bottom:1px solid var(--stone);
  }
  nav.links.open{display:flex}
  nav.links a{padding:0.9rem 0;font-size:0.9rem;border-bottom:1px solid rgba(0,0,0,0.06)}
  nav.links a:last-child{border-bottom:0}
  p{max-width:none}
  .consent-actions{width:100%}
  .consent-btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{transition:none !important;animation:none !important}
}

/* --- quiz destacado en el menú ---
   El único enlace del menú con forma propia: filete ochre, punto y un brillo lento.
   Con movimiento reducido el brillo no corre (regla general de arriba). */
nav.links a.nav-quiz{
  position:relative;color:var(--ochre-deep);
  padding:5px 12px 5px 24px;border:1px solid var(--ochre);
  background:rgba(194,177,120,0.16);
  animation:quiz-glow 3.2s ease-in-out infinite;
}
nav.links a.nav-quiz::before{
  content:"";position:absolute;left:11px;top:50%;width:6px;height:6px;margin-top:-3px;
  border-radius:50%;background:var(--ochre);
}
nav.links a.nav-quiz:hover,nav.links a.nav-quiz:focus-visible,nav.links a.nav-quiz[aria-current="page"]{
  background:var(--ochre-deep);border-color:var(--ochre-deep);color:var(--paper);animation:none;
}
nav.links a.nav-quiz:hover::before,nav.links a.nav-quiz:focus-visible::before,nav.links a.nav-quiz[aria-current="page"]::before{background:var(--paper)}
@keyframes quiz-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(194,177,120,0)}
  50%{box-shadow:0 0 16px 3px rgba(194,177,120,0.6)}
}
.nav-quiz-mobile{display:none}
@media (max-width:620px){
  .nav .wrap{gap:0.75rem}
  .nav .wordmark{margin-right:auto}
  .nav-quiz-mobile{
    display:inline-flex;align-items:center;gap:7px;position:relative;
    font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;
    color:var(--ochre-deep);text-decoration:none;
    padding:6px 11px;border:1px solid var(--ochre);background:rgba(194,177,120,0.16);
    animation:quiz-glow 3.2s ease-in-out infinite;
  }
  .nav-quiz-mobile::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ochre)}
  nav.links a.nav-quiz{border:0;background:none;padding:0.9rem 0 0.9rem 16px;animation:none;box-shadow:none}
  nav.links a.nav-quiz::before{left:0}
}