/* Portada, cabecera y pie. Lo de la conversación está en conv.css y se carga al pulsar «Háblanos». */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fuentes/fraunces-600-mensaje.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fuentes/manrope-400.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fuentes/manrope-700.woff2) format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--color-paper); color: var(--color-text);
  font: var(--text-body-weight) var(--text-body-size)/var(--text-body-line) var(--font-body);
}
a { color: var(--color-ink); text-underline-offset: 0.2em; }
:focus-visible { outline: var(--size-focus-ring) solid var(--color-ink); outline-offset: 2px; }
img { display: block; max-width: 100%; height: auto; }
.ico { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* tema: cada pieza dice para qué tema es */
.solo-oscuro { display: none; }
:root[data-theme='dark'] .solo-claro { display: none; }
:root[data-theme='dark'] .solo-oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .solo-claro { display: none; }
  :root:not([data-theme='light']) .solo-oscuro { display: block; }
}
.theme-btn .solo-oscuro, .theme-btn .solo-claro { display: none; }
:root:not([data-theme='dark']) .theme-btn .solo-claro { display: block; }
:root[data-theme='dark'] .theme-btn .solo-oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-btn .solo-claro { display: none; }
  :root:not([data-theme='light']) .theme-btn .solo-oscuro { display: block; }
}

/* sin JavaScript: mensaje y enlace al correo; ni «Háblanos» ni interruptor de tema */
.sin-js { display: none; }
html:not(.js) .solo-js, html:not(.js) .theme-btn { display: none; }
html:not(.js) .sin-js, .sin-js.es-fallo { display: inline; }
.js .sin-js:not(.es-fallo) { display: none; }

.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 30; padding: var(--space-3) var(--space-4); background: var(--color-action); color: var(--color-on-action); border-radius: var(--radius-control); }
.skip:focus { top: var(--space-3); }

.top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.brand { display: block; flex: none; border-radius: var(--radius-control); }
.top__brand { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-4); row-gap: var(--space-1); min-width: 0; }
.top__descriptor { margin: 0; font-size: var(--text-small-size); color: var(--color-muted); }
.top__tools { display: flex; align-items: center; gap: var(--space-2); }
.theme-btn, .lang summary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: var(--size-touch); min-height: var(--size-touch); padding: 0 var(--space-3);
  background: transparent; color: var(--color-ink); border: 1px solid transparent; border-radius: var(--radius-control);
  font: inherit; cursor: pointer; list-style: none;
}
.lang summary::-webkit-details-marker { display: none; }
.theme-btn:hover, .lang summary:hover { background: var(--color-surface); border-color: var(--color-rule); }
.theme-btn[aria-pressed='true'] { border-color: var(--color-rule); }
.lang { position: relative; }
.lang__code { text-transform: uppercase; font-weight: 700; }
.lang__list {
  position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 20; margin: 0; padding: var(--space-1); list-style: none;
  min-width: 10rem; background: var(--color-paper); border: var(--rule-hairline); border-radius: 0;
}
.lang__list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--size-touch); padding: 0 var(--space-3); text-decoration: none; }
.lang__list a:hover { background: var(--color-surface); }
.lang__list [aria-current='true'] { font-weight: 700; }

main { flex: 1; display: flex; flex-direction: column; width: 100%; }
main:focus { outline: none; }
.vista { flex: 1; width: 100%; }

/* statement: el mensaje ocupa la pantalla */
.mensaje { display: flex; flex-direction: column; justify-content: center; padding: var(--space-6) var(--space-5); max-width: 96rem; margin: 0 auto; }
.mensaje__texto {
  margin: 0; max-width: 22ch; color: var(--color-ink);
  font: 600 clamp(3rem, 9vw, 9rem)/1.05 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; hyphens: manual;
}
.mensaje__texto .punto { color: var(--color-accent); }
.mensaje__cta { margin: var(--space-5) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.solo-js { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.mensaje__pregunta { font-weight: 700; color: var(--color-ink); font-size: var(--text-h3-size); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--size-touch); padding: 0 var(--space-5);
  background: var(--color-action); color: var(--color-on-action); border: 1px solid var(--color-action); border-radius: var(--radius-control);
  font: 700 1rem/1 var(--font-body); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); }
.btn:active { background: var(--color-action-active); border-color: var(--color-action-active); }
.btn[disabled], .btn[aria-busy='true'] { opacity: 0.6; cursor: progress; }

.foot { padding: var(--space-4) var(--space-5) var(--space-5); }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); font-size: var(--text-small-size); }
.foot__links a { display: inline-flex; align-items: center; min-height: var(--size-touch); }

/* privacidad y 404 */
.doc { max-width: 44rem; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-8); }
.doc h1 { font: 700 var(--text-h1-size)/var(--text-h1-line) var(--font-body); color: var(--color-ink); margin: 0 0 var(--space-4); }
.doc h2 { font: 700 var(--text-h3-size)/var(--text-h3-line) var(--font-body); color: var(--color-ink); margin: var(--space-6) 0 var(--space-2); }
.doc p, .doc li { max-width: 62ch; }
.doc .aviso { border: var(--rule-hairline); border-left: var(--size-marker-strong) solid var(--color-warning); padding: var(--space-3) var(--space-4); }
.pend { font-family: var(--font-mono); font-size: 0.875em; background: var(--color-surface); padding: 0 var(--space-1); }
.muted { color: var(--color-muted); }

@media (max-width: 40rem) {
  .top, .foot { padding-left: var(--space-4); padding-right: var(--space-4); }
  .mensaje { padding: var(--space-5) var(--space-4); }
  .doc h1 { font-size: var(--text-h2-size); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}