/* =========================================================================
   LANZALIBRE — public site (Codex + Apple, Inter Variable self-hosted)
   ========================================================================= */

@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/InterVariable.woff2') format('woff2-variations'),
       url('/static/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/InterVariable-Italic.woff2') format('woff2-variations'),
       url('/static/fonts/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --granate:       #8B2332;
  --granate-dark:  #6E1A27;
  --tinta:         #2A2118;
  --ink:           #0A0A0A;
  --charcoal:      #3D352D;
  --slate:         #7A6F62;
  --crema:         #FAF6EE;
  --crema-alt:     #F4EDE0;
  --hueso:         #FFFFFF;
  --terracota:     #C97B5A;
  --silver:        #D9D2C5;

  --font-sys:  'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI Variable", "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular,
               "SF Mono", Menlo, Monaco, Consolas, monospace;

  --shadow-sm:   0 1px 2px rgba(42, 33, 24, .06);
  --shadow-md:   0 4px 16px -8px rgba(42, 33, 24, .10);

  --radius-sm: 4px;
  --radius:    6px;

  --container: 1180px;
  --gutter:    clamp(20px, 4vw, 32px);

  --header-h:  72px;
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sys);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-feature-settings: "kern", "liga", "calt", "ss01", "cv11";
  font-variant-ligatures: common-ligatures contextual;
}
/* Variable axis support: when 'Inter var' is fully loaded, take advantage of it */
@supports (font-variation-settings: normal) {
  body { font-family: 'Inter', var(--font-sys); }
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--granate); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }

.skip {
  position: absolute; left: -9999px; top: 8px;
  padding: 8px 14px; background: var(--tinta); color: var(--hueso);
  border-radius: var(--radius-sm); z-index: 1000;
}
.skip:focus { left: 8px; }

/* ── Containers ───────────────────────────────────────────────────────── */
.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
}
.container-narrow { max-width: 760px; }

/* ── Type (tighter scale, Apple-style soft jumps) ─────────────────────── */
.eyebrow {
  font-size: .92rem;
  font-weight: 500;
  color: var(--granate);
  margin: 0 0 14px;
  letter-spacing: -.005em;
}
.display {
  font-size: clamp(2.5rem, 5.2vw, 3.8rem);
  font-weight: 600;
  letter-spacing: -.026em;
  line-height: 1.06;
  color: var(--ink);
}
.h2 {
  font-size: clamp(1.5rem, 2.8vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -.016em;
  line-height: 1.18;
  color: var(--tinta);
}
.h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--tinta);
}
.lede {
  font-size: clamp(1.0625rem, 1.3vw, 1.15rem);
  line-height: 1.65;
  color: var(--charcoal);
  max-width: 56ch;
  font-weight: 400;
}
.prose {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--charcoal);
  max-width: 70ch;
}
.prose + .prose { margin-top: 1em; }
.kicker {
  font-size: 1rem;
  color: var(--granate);
  font-weight: 500;
  margin: 0 0 18px;
  letter-spacing: 0;
}
.section-h2 { margin-bottom: clamp(28px, 4vw, 48px); }
.muted { color: var(--slate); }
.small { font-size: .875rem; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
/* Un botón nunca puede ser más ancho que su hueco.

   Sin esto, «inline-flex» crece con el texto y no para: al poner el rótulo
   largo de Ana —«Puedes comprobar mi nombramiento en el buscador oficial del
   MAEC», en vez de «Comprobar el nombramiento n.º 7521»— el botón medía 536
   px en una pantalla de 375 y arrastraba la página entera, botón flotante de
   WhatsApp incluido.

   Los textos los escribe Ana, así que el largo no lo decide el código: la
   caja tiene que aguantar cualquiera. «min-width:0» hace falta aparte porque
   dentro de un flex un hijo no encoge por debajo de su contenido si no se le
   dice. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  max-width: 100%; min-width: 0; text-align: center;
  gap: 8px; padding: 12px 26px; min-height: 44px;
  font-size: .98rem; font-weight: 500;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--tinta);
  text-decoration: none;
  transition:background var(--t-2) var(--e),color var(--t-1) var(--e),border-color var(--t-2) var(--e),transform var(--t-3) var(--e),box-shadow var(--t-2) var(--e);
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--granate); color: var(--hueso);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--granate-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: transparent; color: var(--tinta);
  border-color: var(--silver);
}
.btn-ghost:hover { border-color: var(--tinta); background: rgba(42,33,24,.04); }
.btn-cream {
  background: var(--hueso); color: var(--granate);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.btn-cream:hover {
  background: var(--crema-alt);
  color: var(--granate-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}
.btn-lg { padding: 14px 28px; font-size: 1rem; min-height: 52px; }
.btn-block { width: 100%; }

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 246, 238, .85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition:border-color var(--t-2) var(--e),background var(--t-2) var(--e);
}
.site-header[data-scrolled="1"] {
  border-bottom-color: var(--silver);
  background: rgba(250, 246, 238, .94);
}
.nav-bar {
  display: flex; align-items: center; gap: 24px;
  height: var(--header-h);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--tinta); font-weight: 600;
}
.brand:hover { text-decoration: none; }
.brand img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.site-header .brand img,
.mobile-menu .brand img {
  height: 36px;
  width: auto;
}
.admin-header .brand img {
  width: 32px;
  height: 32px;
}
.brand-name {
  font-size: 1.05rem; letter-spacing: -.005em;
}
.nav {
  display: flex; gap: 4px; margin-left: auto;
  font-size: .94rem;
}
.nav a {
  color: var(--charcoal);
  padding: 8px 16px;
  border-radius: 999px;
  transition:color var(--t-1) var(--e),background var(--t-2) var(--e);
}
.nav a:hover {
  color: var(--tinta);
  background: rgba(42, 33, 24, .05);
  text-decoration: none;
}
.nav a[aria-current="page"] {
  color: var(--granate);
}
.nav-cta { margin-left: 8px; padding: 10px 18px; min-height: 40px; font-size: .92rem; }
.nav-back {
  margin-left: auto;
  font-size: .92rem;
  color: var(--charcoal);
  font-weight: 500;
}
.nav-back:hover { color: var(--granate); text-decoration: none; }
.nav-toggle { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px; height: 40px;
  background: transparent;
  border: 0;
  padding: 0;
  margin-left: auto;
  position: relative;
  z-index: 110;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition:transform var(--t-3) var(--e),opacity var(--t-2) var(--e);
}
.nav-toggle span + span { margin-top: 5px; }
body.menu-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile fullscreen menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--crema);
  z-index: 100;
  display: none;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition:opacity var(--t-2) var(--e),visibility var(--t-2) var(--e) 280ms;
}
body.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transition:opacity var(--t-2) var(--e);
}
.mobile-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--gutter);
}
.mobile-menu-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0 var(--gutter);
  text-align: center;
}
.mobile-menu-nav a {
  font-size: clamp(1.7rem, 6.5vw, 2.4rem);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.024em;
  padding: 14px 0;
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  transition:opacity var(--t-2) var(--e),transform var(--t-3) var(--e);
}
body.menu-open .mobile-menu-nav a {
  opacity: 1; transform: none;
}
body.menu-open .mobile-menu-nav a:nth-child(1) { transition-delay: 120ms; }
body.menu-open .mobile-menu-nav a:nth-child(2) { transition-delay: 180ms; }
body.menu-open .mobile-menu-nav a:nth-child(3) { transition-delay: 240ms; }
body.menu-open .mobile-menu-nav a:nth-child(4) { transition-delay: 300ms; }
body.menu-open .mobile-menu-nav a:nth-child(5) { transition-delay: 360ms; }
.mobile-menu-cta {
  padding: 0 var(--gutter) calc(env(safe-area-inset-bottom, 0) + 32px);
}
.mobile-menu-cta .btn {
  width: 100%;
  opacity: 0;
  transform: translateY(12px);
  transition:opacity var(--t-2) var(--e),transform var(--t-3) var(--e);
  transition-delay: 420ms;
}
body.menu-open .mobile-menu-cta .btn { opacity: 1; transform: none; }

/* UN SOLO PUNTO DE CORTE: 900 px.

   Habia dos, 880 y 900, y entre ellos la cabecera se quedaba sin enlaces
   (los escondia el de 900) y sin boton de menu (lo enseñaba el de 880). Una
   franja de veinte pixeles sin ninguna manera de navegar. */
@media (max-width: 900px) {
  .nav, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-menu { display: flex; }
  body.menu-open { overflow: hidden; }
}
@media (min-width: 901px) {
  .mobile-menu { display: none !important; }
  .nav-toggle { display: none !important; }
}

/* CON EL MENÚ ABIERTO, LA CABECERA VA ENCIMA.

   La cabecera está en z-index 50 y el menú en 100, así que el panel la
   tapaba entera: la hamburguesa —que con el menú abierto se convierte en una
   cruz, y es la única salida visible— quedaba debajo, y en un teléfono no hay
   tecla Escape. Se salía pulsando un enlace y punto.

   El z-index:110 que ya tenía el botón no servía de nada: está dentro de la
   cabecera, y la cabecera crea su propio contexto de apilado. Hay que subir
   la cabecera, no el botón. */
body.menu-open .site-header {
  z-index: 110;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* ── Hero (text-only pitch, ALWAYS perfectly centered) ─────────────────
   Diego: "siempre, en cualquier pantalla, el texto y los botones del HERO
   aparezcan siempre centrados. EN el medio exacto."
   Implementation: flex centering both axes, viewport min-height,
   inner content vertically + horizontally centered. The header sits on
   top — we account for it with min-height calc, not padding-top. */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;          /* vertical centering */
  justify-content: center;       /* horizontal centering */
  padding: calc(var(--header-h) + 24px) var(--gutter) 48px;
}
.hero-pitch .hero-content {
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}
/* H1 — wider so the language pair fits on a single line on most viewports.
   `hero-h1-langs` keeps "inglés ↔ español" as a single token (no wrap mid-pair).
   The whole H1 still wraps naturally on narrow phones, but the LANG
   PAIR never breaks. */
.hero-content .display {
  margin: 0 auto 24px;
  max-width: 24ch;
  text-wrap: balance;
}
.hero-h1-langs {
  white-space: nowrap;
  display: inline-block;
}
.hero-content .lede { margin: 0 auto 40px; max-width: 56ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Tighten the H1 on small phones so "inglés ↔ español" still fits */
@media (max-width: 480px) {
  .hero-content .display { font-size: clamp(1.85rem, 9vw, 2.4rem); }
}

/* Scroll cue — desktop only, simple chevron, fade-in + subtle bounce.
   Hidden on mobile widths AND on short laptop heights, where it overlaps
   the CTAs or sits awkwardly close to the fold. */
.scroll-cue {
  position: absolute;
  bottom: clamp(28px, 4.5vh, 64px);
  left: 50%;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--slate);
  text-decoration: none;
  opacity: 0;
  transform: translateX(-50%);
  animation: scroll-cue-fade 600ms cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: 700ms;
  transition:color var(--t-1) var(--e),background var(--t-2) var(--e);
}
.scroll-cue:hover {
  color: var(--ink);
  background: rgba(42, 33, 24, .05);
  text-decoration: none;
}
.scroll-cue svg {
  animation: scroll-bounce 2.2s ease-in-out infinite;
  animation-delay: 1.6s;
}
@keyframes scroll-cue-fade {
  to { opacity: 1; }
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (max-width: 880px), (max-height: 760px) {
  .scroll-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: scroll-cue-fade 400ms forwards 400ms; }
  .scroll-cue svg { animation: none; }
}

/* Apple-style staggered entrance — pure CSS, honors reduced-motion */
.hero-content > * {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-enter 800ms cubic-bezier(.22, 1, .36, 1) forwards;
}
.hero-content > *:nth-child(1) { animation-delay: 80ms; }
.hero-content > *:nth-child(2) { animation-delay: 180ms; }
.hero-content > *:nth-child(3) { animation-delay: 320ms; }
.hero-content > *:nth-child(4) { animation-delay: 460ms; }
@keyframes hero-enter {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content > * { opacity: 1; transform: none; animation: none; }
}

/* ── Sobre mí grid (foto pequeña por petición de Ana) ─────────────────── */
.sobre-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) clamp(200px, 22vw, 280px);
  gap: clamp(48px, 6vw, 80px);
  align-items: center;
}
.sobre-text { min-width: 0; }
.sobre-text .h2 { margin-bottom: 22px; }
.sobre-photo {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--crema-alt);
  /* Match the natural aspect of the source photo (2079x2184 ≈ 19/20) so
     object-fit doesn't crop body off. Cover becomes a no-op visually. */
  aspect-ratio: 19 / 20;
  width: 100%;
  justify-self: end;
  box-shadow: 0 18px 44px -22px rgba(42, 33, 24, .18);
}
.sobre-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) {
  .sobre-grid { grid-template-columns: 1fr; }
  .sobre-photo {
    order: 2;
    max-width: 280px;
    justify-self: center;
    margin-top: 8px;
  }
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section-alt { background: var(--crema-alt); }
.section-cta { padding-bottom: clamp(72px, 9vw, 112px); }
.section-head { margin-bottom: clamp(28px, 4vw, 48px); max-width: 60ch; }

/* ── Idiomas (Apple-clean: hairline border que aparece en hover) ──────── */
.lang-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.lang-card {
  background: var(--hueso);
  border: 1px solid rgba(42, 33, 24, .06);
  border-radius: 14px;
  padding: 32px 28px;
  cursor: default;
  transition:border-color var(--t-2) var(--e),transform var(--t-3) var(--e);
}
.lang-card:hover {
  border-color: rgba(42, 33, 24, .18);
  transform: translateY(-2px);
}
.lang-name {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.018em;
  color: var(--ink);
  margin: 0 0 12px;
}
.lang-desc {
  color: var(--charcoal);
  font-size: .98rem;
  line-height: 1.6;
  margin: 0;
}

/* ── CTA row ──────────────────────────────────────────────────────────── */
.cta-row {
  margin-top: 32px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px;
}
.cta-note {
  color: var(--slate); font-size: .92rem;
}

/* ── Footer (dark, brand + Legal col + Contacto col) ──────────────────── */
.site-footer {
  background: var(--tinta);
  color: rgba(255, 255, 255, .72);
  padding: clamp(56px, 8vw, 88px) 0 32px;
}
.site-footer .brand-name { color: var(--hueso); }
.footer-grid {
  display: grid;
  gap: 40px 56px;
  grid-template-columns: 1.6fr auto auto auto;
  align-items: start;
}
.footer-brand { min-width: 0; }
.footer-brand-link {
  display: inline-flex;
  align-items: center;
  color: var(--hueso);
}
.footer-brand-link:hover { text-decoration: none; }
.footer-brand-link img {
  height: 32px;
  width: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.footer-tagline {
  color: rgba(255, 255, 255, .55);
  margin: 18px 0 14px;
  max-width: 32ch;
  font-size: .94rem;
  line-height: 1.6;
}
.footer-fineprint {
  color: rgba(255, 255, 255, .42);
  margin: 0;
  max-width: 36ch;
  font-size: .82rem;
  line-height: 1.65;
}
.footer-fineprint a {
  color: rgba(255, 255, 255, .65);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .25);
  transition:color var(--t-1) var(--e),text-decoration-color var(--t-1) var(--e);
}
.footer-fineprint a:hover {
  color: rgba(255, 255, 255, .92);
  text-decoration-color: rgba(255, 255, 255, .55);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.footer-col-title {
  color: var(--terracota);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.footer-col a {
  color: rgba(255, 255, 255, .82);
  font-size: .94rem;
  padding: 2px 0;
  transition:color var(--t-1) var(--e);
}
.footer-col a:hover {
  color: var(--hueso);
  text-decoration: none;
}
.footer-copy {
  grid-column: 1 / -1;
  margin: 28px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  font-size: .82rem;
  color: rgba(255, 255, 255, .45);
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Modal ────────────────────────────────────────────────────────────── */
dialog.modal {
  border: 0; padding: 0; max-width: 640px; width: calc(100% - 32px);
  border-radius: var(--radius);
  background: var(--hueso); color: var(--tinta);
  box-shadow: 0 32px 80px -24px rgba(42, 33, 24, .35);
  overflow: hidden;
}
dialog.modal::backdrop {
  background: rgba(42, 33, 24, .55);
  backdrop-filter: blur(2px);
}
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 24px 28px 16px;
  border-bottom: 1px solid var(--silver);
}
.modal-close {
  background: transparent; border: 0; font-size: 28px; line-height: 1;
  color: var(--slate); padding: 4px; border-radius: var(--radius-sm);
  transition:color var(--t-1) var(--e),background var(--t-2) var(--e);
}
.modal-close:hover { color: var(--granate); background: var(--crema); }
.form-body { padding: 20px 28px; display: grid; gap: 16px; }
.modal-foot {
  padding: 16px 28px 24px;
  border-top: 1px solid var(--silver);
  background: var(--crema);
}
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; }

/* ── Form ─────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-row {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.label {
  font-size: .9rem; font-weight: 600; color: var(--tinta);
  display: block;
}
.req { color: var(--granate); margin-left: 2px; }
.field-hint {
  font-size: .85rem;
  color: var(--slate);
  margin-top: 2px;
  display: inline-flex; gap: 4px;
}
.field-hint strong { color: var(--granate); font-weight: 600; }
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
  width: 100%; max-width: 100%;
  padding: 14px 18px; min-height: 50px;
  font-family: inherit; font-size: 15px;
  color: var(--tinta); background: var(--crema-alt);
  border: 1px solid transparent; border-radius: 12px;
  transition:background var(--t-2) var(--e),border-color var(--t-2) var(--e),box-shadow var(--t-2) var(--e);
}
textarea { min-height: 120px; resize: none; padding: 14px 18px; }
input::placeholder, textarea::placeholder { color: var(--slate); }
input:hover, textarea:hover { background: rgba(244, 237, 224, .65); }
input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--hueso);
  border-color: rgba(42, 33, 24, .28);
  box-shadow: none;
}
input[readonly] { background: var(--crema); color: var(--charcoal); cursor: default; }
input[readonly]:hover { background: var(--crema); }
.input-with-icon {
  position: relative;
  display: block;
}
.input-with-icon .input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  transition:color var(--t-1) var(--e);
}
.input-with-icon input {
  padding-left: 46px;
}
.input-with-icon input:focus ~ .input-icon,
.input-with-icon:focus-within .input-icon {
  color: var(--granate);
}
.honeypot {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
}
.radio-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.radio {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; min-height: 48px;
  border: 1px solid var(--silver); border-radius: var(--radius);
  cursor: pointer; user-select: none;
  background: var(--hueso);
  font-weight: 500;
  transition:border-color var(--t-2) var(--e),background var(--t-2) var(--e),color var(--t-1) var(--e);
}
.radio input { position: absolute; opacity: 0; pointer-events: none; }
.radio:has(input:checked) {
  border-color: var(--granate);
  background: rgba(139, 35, 50, .04);
  color: var(--granate);
  font-weight: 600;
}
.radio:hover { border-color: var(--charcoal); }

/* dropzone — big, filled cream-alt with icon */
.dropzone-big {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 48px 32px;
  background: var(--crema-alt);
  border: 1.5px dashed transparent;
  border-radius: 16px;
  cursor: pointer;
  transition:background var(--t-2) var(--e),border-color var(--t-2) var(--e);
}
.dropzone-big:hover { background: rgba(244, 237, 224, .65); border-color: var(--silver); }
.dropzone-big.is-dragover {
  border-color: var(--granate);
  background: rgba(139, 35, 50, .04);
}
.dropzone-big input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.dropzone-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--hueso);
  border-radius: 12px;
  color: var(--charcoal);
  margin-bottom: 6px;
  transition:color var(--t-1) var(--e);
  pointer-events: none;
}
.dropzone-big:hover .dropzone-icon,
.dropzone-big.is-dragover .dropzone-icon { color: var(--granate); }
.dropzone-title {
  font-size: 1.02rem; font-weight: 600;
  color: var(--tinta); pointer-events: none;
}
.dropzone-sub {
  font-size: .92rem; color: var(--charcoal); pointer-events: none;
}
.dropzone-hint {
  font-size: .82rem; color: #6E6355; margin-top: 6px; pointer-events: none;
}

.form-error {
  margin: 0 0 8px;
  padding: 10px 14px; border-radius: var(--radius);
  background: rgba(139, 35, 50, .08); color: var(--granate);
  border: 1px solid rgba(139, 35, 50, .25);
  font-size: .92rem;
}
.field-error {
  margin: 6px 0 0;
  font-size: .82rem;
  color: var(--granate);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: field-error-in 220ms cubic-bezier(.22, 1, .36, 1);
}
.field-error::before {
  content: '';
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--granate);
}
@keyframes field-error-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}
.field.has-error input,
.field.has-error textarea,
.field.has-error .tl-select-trigger {
  border-color: rgba(139, 35, 50, .45) !important;
  background: rgba(139, 35, 50, .03) !important;
}

/* Submit-button loading state */
.btn .btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: lz-spin .7s linear infinite;
}
.btn.is-loading {
  cursor: progress;
  pointer-events: none;
}
.btn.is-loading .btn-label { opacity: .65; }
.btn.is-loading .btn-spinner { display: inline-block; }
@keyframes lz-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn .btn-spinner { animation: none; }
}

.form-success {
  padding: 32px 28px; text-align: center;
}
.form-success .h3 { margin-bottom: 12px; }
.form-success p { color: var(--charcoal); margin: 0 0 20px; }

/* ── Reveal animation ─────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:opacity var(--t-2) var(--e),transform var(--t-3) var(--e);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Stagger any group of .reveal siblings */
.reveal.is-visible:nth-of-type(2) { transition-delay: 80ms; }
.reveal.is-visible:nth-of-type(3) { transition-delay: 160ms; }
.reveal.is-visible:nth-of-type(4) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ── Thanks page ──────────────────────────────────────────────────────── */
.thanks-wrap {
  /* Subtract header height so the card is visually centered in the
     remaining viewport, not pushed below center by the fixed header. */
  min-height: calc(100dvh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vw, 56px) var(--gutter);
  text-align: center;
}
.thanks-card {
  max-width: 560px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-inline: auto;
}
.thanks-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(139, 35, 50, .08);
  color: var(--granate);
  margin-bottom: 4px;
}
.thanks-icon svg { width: 36px; height: 36px; }
.thanks-card .display {
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  line-height: 1.1;
}
.thanks-card .lede {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.55;
}
.thanks-card .lede strong { font-weight: 600; }
.thanks-note {
  margin: 4px 0 8px;
  max-width: 52ch;
  font-size: .9rem;
  line-height: 1.5;
}
/* El aviso de que los ficheros no han subido. Mismo recuadro que el de los
   textos legales —fondo crema-alt y filo granate— para no inventar un patrón
   nuevo; lo que cambia es que este va alineado a la izquierda dentro de una
   tarjeta centrada, porque es un texto que hay que leer entero, no un remate. */
.thanks-aviso {
  max-width: 46ch;
  text-align: left;
  padding: 16px 20px;
  background: var(--crema-alt);
  border-radius: var(--radius);
  border-left: 3px solid var(--granate);
  color: var(--charcoal);
}
.thanks-aviso strong { display: block; margin-bottom: 4px; }
.thanks-aviso[hidden] { display: none; }

.thanks-card .btn-primary { margin-top: 8px; }

@media (max-width: 480px) {
  .thanks-icon { width: 60px; height: 60px; }
  .thanks-icon svg { width: 30px; height: 30px; }
  .thanks-card { gap: 14px; }
}

/* ── CTA band (granate) ───────────────────────────────────────────────── */
.cta-band {
  background: var(--granate);
  color: var(--hueso);
  padding: clamp(64px, 9vw, 104px) 0;
  text-align: center;
}
.cta-band-inner {
  max-width: 720px;
  margin-inline: auto;
}
.cta-band-title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--hueso);
  margin: 0 0 12px;
}
.cta-band-sub {
  color: rgba(255, 255, 255, .82);
  margin: 0 auto 28px;
  max-width: 52ch;
  text-wrap: pretty;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ── Page hero (presupuesto / gracias) ────────────────────────────────── */
.page-hero {
  padding: clamp(64px, 9vw, 120px) 0 clamp(28px, 4vw, 48px);
}
.page-hero .display { margin: 8px 0 16px; max-width: 18ch; }
.page-hero .lede { max-width: 56ch; }

/* ── Form section / page form ─────────────────────────────────────────── */
.form-section {
  padding: clamp(8px, 2vw, 16px) 0 clamp(72px, 9vw, 120px);
}
.quote-form-bare {
  display: block;
}
.form-divider {
  border: 0;
  border-top: 1px solid var(--silver);
  margin: 0;
}
.form-group {
  display: grid;
  gap: 26px;
  padding: clamp(36px, 5vw, 56px) 0;
}
.form-section-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tinta);
  letter-spacing: -.005em;
  margin: 0 0 6px;
  text-align: center;
}
.lang-pair-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: end;
}
.lang-pair-grid .field { min-width: 0; }
.lang-pair-grid .tl-select-compact { min-width: 0; width: 100%; }
.lang-arrow {
  font-size: 1.3rem;
  color: var(--slate);
  padding-bottom: 14px;
  user-select: none;
  text-align: center;
}
@media (max-width: 600px) {
  .lang-pair-grid { grid-template-columns: 1fr; gap: 16px; }
  .lang-arrow { transform: rotate(90deg); padding: 0; margin: -4px auto; }
}
.checkbox-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 4px 0;
  cursor: pointer;
  user-select: none;
}
.checkbox-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  margin: 0;
  flex-shrink: 0;
  background: var(--crema-alt);
  border: 1px solid var(--silver);
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  transition:background var(--t-2) var(--e),border-color var(--t-2) var(--e);
}
.checkbox-row input[type="checkbox"]:checked {
  background: var(--granate);
  border-color: var(--granate);
}
.checkbox-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 6px; height: 11px;
  border: solid var(--hueso);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox-label {
  font-size: .94rem;
  line-height: 1.55;
  color: var(--charcoal);
  padding-top: 1px;
}
.checkbox-label a { color: var(--granate); text-decoration: underline; text-underline-offset: 3px; }
.form-actions-bare {
  display: flex; gap: 14px;
  justify-content: space-between; align-items: center;
  flex-wrap: wrap;
  padding-top: clamp(28px, 4vw, 44px);
}
@media (max-width: 520px) {
  .form-actions-bare { flex-direction: column-reverse; align-items: stretch; }
  .form-actions-bare .btn { width: 100%; }
}

/* ── Custom select (TLSelect) ─────────────────────────────────────────── */
.tl-select { position: relative; display: block; }
.tl-select-compact { display: inline-block; min-width: 220px; }
.tl-select-trigger {
  width: 100%;
  text-align: left;
  background: var(--crema-alt);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  min-height: 50px;
  color: var(--tinta);
  font-family: inherit;
  font-size: 15px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition:background var(--t-2) var(--e),border-color var(--t-2) var(--e);
}
.tl-select-trigger:hover { background: rgba(244, 237, 224, .65); }
.tl-select-trigger:focus-visible,
.tl-select.is-open .tl-select-trigger {
  outline: none;
  background: var(--hueso);
  border-color: rgba(42, 33, 24, .28);
  box-shadow: none;
}
.tl-select-readonly .tl-select-trigger {
  cursor: default;
  background: var(--crema-alt);
  pointer-events: none;
}
.tl-select-readonly.has-value .tl-select-trigger {
  background: var(--crema-alt);
}
/* Un tono más oscuro que --slate: ese pasa sobre blanco (4,91) pero no sobre
   el crema del formulario, donde se quedaba en 4,22. */
.tl-select-placeholder { color: #6E6355; }
.tl-select-caret {
  flex-shrink: 0;
  color: var(--slate);
  transition:transform var(--t-3) var(--e),color var(--t-1) var(--e);
}
.tl-select.is-open .tl-select-caret {
  transform: rotate(180deg);
  color: var(--charcoal);
}
.tl-select-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  min-width: 100%;
  background: var(--hueso);
  border: 1px solid var(--silver);
  border-radius: 12px;
  list-style: none;
  margin: 0; padding: 6px;
  z-index: 30;
  max-height: 280px;
  overflow-y: auto;
  /* Lighter, more minimal shadow */
  box-shadow: 0 8px 24px -10px rgba(42, 33, 24, .14),
              0 2px 6px -2px rgba(42, 33, 24, .05);
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transform-origin: top center;
  pointer-events: none;
  transition:opacity var(--t-2) var(--e),transform var(--t-3) var(--e);
}
.tl-select.is-open .tl-select-list {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.tl-select-option[hidden] { display: none; }
.tl-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--charcoal);
  cursor: pointer;
  transition:background var(--t-2) var(--e),color var(--t-1) var(--e);
  user-select: none;
}
.tl-select-option:hover,
.tl-select-option.is-active {
  background: rgba(42, 33, 24, .05);
  color: var(--ink);
}
.tl-select-option.is-selected {
  color: var(--ink);
  font-weight: 600;
}
.tl-select-option-check {
  flex-shrink: 0;
  color: var(--charcoal);
  opacity: 0;
  transition:opacity var(--t-2) var(--e);
}
.tl-select-option.is-selected .tl-select-option-check { opacity: 1; }

/* ── File list — Codex-style flat rows ────────────────────────────────
   No chip backgrounds, single colour, minimal padding. The icon, name
   and size all share the same charcoal ink. The remove (×) icon shows
   only on hover. Animation only on freshly-added items (`.is-new`),
   set by JS so existing rows don't re-animate when one is added/removed. */
.file-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  border-radius: 6px;
  color: var(--charcoal);
  font-size: 14px;
  line-height: 1.4;
  transition:background var(--t-2) var(--e),opacity var(--t-2) var(--e),transform var(--t-3) var(--e);
}
.file-item.is-new {
  animation: file-in 240ms cubic-bezier(.22, 1, .36, 1) both;
}
.file-item:hover {
  background: rgba(42, 33, 24, .04);
}
.file-item.is-collapsed { display: none; }
.file-item.is-leaving {
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
}
@keyframes file-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

.file-list-toggle {
  background: transparent;
  border: 0;
  color: var(--charcoal);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  transition:background var(--t-2) var(--e),color var(--t-1) var(--e);
}
.file-list-toggle:hover {
  background: rgba(42, 33, 24, .04);
  color: var(--ink);
}
.file-list-toggle svg {
  transition:transform var(--t-3) var(--e);
}
.file-list-toggle.is-expanded svg { transform: rotate(180deg); }

.file-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}
.file-item-icon svg {
  width: 16px;
  height: 16px;
}
.file-item-name {
  flex: 1;
  min-width: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-item-size {
  flex-shrink: 0;
  color: inherit;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  opacity: .55;
}
.file-item-remove {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  width: 22px; height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transition:opacity var(--t-2) var(--e),background var(--t-2) var(--e);
}
.file-item-remove svg {
  width: 14px;
  height: 14px;
}
.file-item:hover .file-item-remove,
.file-item-remove:focus-visible {
  opacity: 1;
}
.file-item-remove:hover {
  background: rgba(42, 33, 24, .08);
}
@media (hover: none) {
  .file-item-remove { opacity: 1; }
}
.file-total {
  margin: 12px 0 0;
  font-size: .85rem;
  color: var(--slate);
}
.file-total.is-warning { color: #b45309; }
.file-total.is-error { color: var(--granate); font-weight: 500; }

/* ── Legal pages ──────────────────────────────────────────────────────── */
.legal-page {
  padding: clamp(40px, 6vw, 80px) 0 clamp(72px, 9vw, 120px);
}
.legal-doc { color: var(--charcoal); }
.legal-title {
  margin-bottom: 8px;
  font-size: clamp(2rem, 4vw, 2.8rem);
}
.legal-updated {
  color: var(--slate);
  margin: 0 0 32px;
  font-size: .9rem;
}
.legal-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--charcoal);
  margin: 0 0 36px;
  padding: 18px 22px;
  background: var(--crema-alt);
  border-radius: var(--radius);
  border-left: 3px solid var(--granate);
}
.legal-doc h2 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--tinta);
  letter-spacing: -.012em;
  margin: 44px 0 16px;
  line-height: 1.3;
}
.legal-doc p {
  font-size: 1rem;
  line-height: 1.75;
  margin: 0 0 14px;
}
.legal-doc ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 20px;
}
.legal-doc li {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 10px;
  padding-left: 22px;
  position: relative;
}
.legal-doc li::before {
  content: '';
  position: absolute;
  left: 0; top: .82em;
  width: 8px; height: 1px;
  background: var(--terracota);
}
.legal-doc strong { color: var(--tinta); }
.legal-doc a {
  color: var(--granate);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal-doc a:hover { color: var(--granate-dark); }

/* ── Marketing sections (3 prose blocks on the home, no zebra) ────────── */
.section-marketing {
  padding: clamp(96px, 13vw, 160px) 0;
}
.section-marketing + .section-marketing {
  padding-top: 0;
}
.prose-center {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(1.125rem, 1.35vw, 1.25rem);
  line-height: 1.7;
  color: var(--tinta);
  text-wrap: pretty;
  hyphens: none;
  font-weight: 400;
  letter-spacing: -.005em;
}

/* Center the Idiomas section heading (rest of the page is centered) */
#idiomas .section-h2 { text-align: center; }

/* ── /sobre page ──────────────────────────────────────────────────────── */
.sobre-page { padding-top: clamp(64px, 9vw, 104px); }

.sobre-article {
  padding-bottom: clamp(64px, 9vw, 104px);
  text-align: center;
}

.sobre-header { margin-bottom: clamp(28px, 4vw, 40px); }

.sobre-title {
  font-family: var(--font-sys);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--tinta);
  text-transform: none;
  margin: 0;
  line-height: 1.2;
}

.sobre-photo-large {
  margin: 0 auto clamp(28px, 4vw, 40px);
  width: clamp(160px, 20vw, 200px);
  aspect-ratio: 600 / 630;
  border-radius: 16px;
  overflow: hidden;
  background: var(--crema-alt);
}
.sobre-photo-large picture,
.sobre-photo-large img {
  display: block;
  width: 100%;
  height: 100%;
}
.sobre-photo-large img {
  object-fit: cover;
  object-position: 50% 30%;
}

.sobre-lede {
  max-width: 56ch;
  margin: 0 auto clamp(36px, 5vw, 56px);
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--charcoal);
  text-wrap: balance;
  hyphens: none;
}

.sobre-body {
  max-width: 62ch;
  margin: 0 auto;
  text-align: left;
}
.sobre-body .prose {
  max-width: none;
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--charcoal);
  hyphens: none;
  text-wrap: pretty;
  word-break: normal;
  overflow-wrap: break-word;
}
.sobre-body .prose + .prose { margin-top: 1.35em; }

@media (max-width: 600px) {
  .sobre-body .prose { font-size: 1rem; line-height: 1.72; }
}


/* ── Focus visible (keyboard nav only — form fields handle their own) ─── */
:focus-visible {
  outline: 2px solid var(--granate);
  outline-offset: 3px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.tl-select-trigger:focus-visible {
  outline: none;
}

/* ── Bilingual switcher (i18n) ──────────────────────────────────────────
   The visible language is driven by the `lang` attribute on <html>:
   when lang=es, every [lang="en"] alternate hides; when lang=en, the
   [lang="es"] alternates hide. Structural elements carry no lang attr,
   so they show in both. These rules are completely inert on pages that
   have no [lang] alternates (i.e. the current Spanish-only live pages),
   so shipping this CSS does not change them. */
html[lang="es"] [lang="en"],
html[lang="en"] [lang="es"] {
  display: none !important;
}

/* Segmented ES / EN control, Codex-minimal: hairline pill, granate active. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--silver);
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
}
.lang-opt {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--slate);
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition:color var(--t-1) var(--e),background var(--t-2) var(--e),box-shadow var(--t-2) var(--e);
}
.lang-opt:hover { color: var(--tinta); text-decoration: none; }
.lang-opt[aria-pressed="true"] {
  color: var(--granate);
  background: var(--hueso);
  box-shadow: var(--shadow-sm);
  cursor: default;
}

/* Desktop: switcher sits with the CTA, to the right of the nav links. */
.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.nav-actions .nav-cta { margin-left: 0; }

/* Mobile: bigger touch targets, centered inside the fullscreen menu. */
.mobile-menu-lang {
  display: flex;
  justify-content: center;
  padding: 8px var(--gutter) 24px;
}
.mobile-menu-lang .lang-opt {
  font-size: .95rem;
  padding: 10px 18px;
  min-height: 44px;
}
.mobile-menu-lang .lang-switch {
  opacity: 0;
  transform: translateY(12px);
  transition:opacity var(--t-2) var(--e),transform var(--t-3) var(--e);
  transition-delay: 380ms;
}
body.menu-open .mobile-menu-lang .lang-switch { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .nav-actions { display: none; }
}

/* Enlace de verificacion MAEC en el kicker del heroe */
/* En esta página los enlaces se marcan SIEMPRE con filete propio.
   El subrayado del navegador duplicaba la línea al pasar el ratón. */
a:hover,a:focus-visible{text-decoration:none}
/* Se quedaba en 23 px de alto, justo por debajo del minimo. */
.kicker-link{color:inherit;text-decoration:none;display:inline-block;padding-block:1px;
  border-bottom:1px solid rgb(139 35 50 / .40);padding-bottom:2px;
  transition:border-color var(--t-2) var(--e)}
.kicker-link:hover,.kicker-link:focus-visible{
  border-bottom-color:var(--granate);opacity:1;text-decoration:none}
.kicker-link:focus-visible{outline:2px solid var(--granate);outline-offset:4px;border-radius:2px}
a.tile__cta:hover,a.tile__cta:focus-visible{text-decoration:none}


html{scroll-padding-top:92px}
:root{--slate2:#6B6155}
a:focus-visible,button:focus-visible{outline:2px solid var(--granate);outline-offset:3px;border-radius:6px}

/* Cabecera · 6 · el CTA no se subraya nunca */
.nav-bar.prop{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;max-width:1180px;margin:0 auto;padding:1.05rem 2rem}
.nav-bar.prop>.brand{justify-self:start}
.nav-bar.prop>.nav-actions{justify-self:end}
.nav-bar.prop .brand{flex:0 0 auto;display:flex;align-items:center;text-decoration:none}
.nav-bar.prop .nav-links{display:flex;justify-content:center;gap:2.4rem;margin:0}
.nav-bar.prop .nav-links a{text-decoration:none;font-size:.95rem;color:var(--charcoal);padding:.3rem 0;border-bottom:2px solid transparent;transition:color var(--t-1) var(--e),border-color var(--t-2) var(--e)}
.nav-bar.prop .nav-links a:hover{color:var(--granate);text-decoration:none}
.nav-bar.prop .nav-links a[aria-current]{color:var(--granate);border-bottom-color:var(--granate)}
.nav-cta,.nav-cta:hover,.nav-cta:focus,.nav-cta:active,.nav-cta:visited{text-decoration:none!important}
.nav-cta{flex:0 0 auto;background:transparent;color:var(--granate);border:1.5px solid rgba(139,35,50,.4);
  border-radius:999px;padding:.58rem 1.15rem;font-size:.9rem;font-weight:600;transition:background var(--t-2) var(--e),border-color var(--t-2) var(--e),color var(--t-1) var(--e)}
.nav-cta:hover{background:var(--granate);border-color:var(--granate);color:#fff}
@media(max-width:900px){
  .nav-bar.prop .nav-links{display:none}
  /* Marca a la izquierda y el botón de menú a la derecha. Antes la segunda
     columna estaba vacía porque el botón no existía. */
  .nav-bar.prop{grid-template-columns:1fr auto;padding-inline:1.25rem}
  .nav-bar.prop>.nav-toggle{justify-self:end}
}

.bloque{padding:clamp(5rem,9.5vh,7.4rem) 0}
.bloque--alt{background:var(--crema-alt)}
.bloque__head{max-width:40rem;margin:0 auto clamp(3.2rem,6vh,4.4rem);text-align:center}
.bloque__head h2{margin:0;font-size:clamp(1.7rem,3.1vw,2.25rem);letter-spacing:-.026em;color:var(--tinta);line-height:1.16}
.bloque__head p{margin:1rem 0 0;color:var(--slate2);font-size:1.05rem;line-height:1.62}

/* Heroe */
.hero-pitch.prop{padding-top:clamp(3.4rem,7vh,5.2rem)!important;padding-bottom:clamp(3.6rem,7vh,5.2rem)!important;min-height:auto!important}
.hero-pitch.prop .hero-content{padding-top:0!important;margin-top:0!important}
.hero-pitch.prop h1.display{font-size:clamp(2.3rem,4.6vw,3.4rem)!important;line-height:1.1;letter-spacing:-.028em}
.hero-pitch.prop .lede{max-width:34rem;margin:1.35rem auto 0;font-size:1.075rem;line-height:1.62}
.hero-actions{display:flex;gap:1rem;justify-content:center;margin-top:2.2rem}
.hero-actions a{text-decoration:none}

/* 7 · Badges sin la linea secundaria */
.confianza{display:flex;justify-content:center;align-items:center;gap:clamp(2rem,4.5vw,3.6rem);
  margin:clamp(3rem,5.5vh,3.8rem) auto 0;max-width:56rem;flex-wrap:wrap}
.dato{position:relative;padding:0 clamp(.3rem,1.2vw,.9rem);font-size:.965rem;font-weight:600;
  color:var(--tinta);letter-spacing:-.01em;line-height:1.4;white-space:nowrap}
.dato + .dato::before{content:"";position:absolute;left:calc(-1 * clamp(1rem,2.25vw,1.8rem));top:.15rem;bottom:.15rem;width:1px;
  background:linear-gradient(180deg,transparent,var(--silver) 28%,var(--silver) 72%,transparent)}
/* 20 px de alto: cuatro por debajo del minimo. El relleno va SOLO arriba —la
   raya de subrayado es un border-bottom y con relleno abajo se despegaria del
   texto— y se compensa con un margen negativo para que la fila no se mueva. */
.dato a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(139,35,50,.32);
  display:inline-block;padding-top:4px;margin-top:-4px;
  transition:color var(--t-1) var(--e),border-color var(--t-2) var(--e)}
.dato a:hover{color:var(--granate);border-color:var(--granate)}
@media(max-width:760px){.confianza{flex-direction:column;gap:1.15rem}
  .dato + .dato::before{left:50%;transform:translateX(-50%);top:-.6rem;bottom:auto;width:2.4rem;height:1px;
    background:linear-gradient(90deg,transparent,var(--silver),transparent)}}

/* 1 · Como funciona: centrado, con aire y linea que une los circulos */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2.4rem,5vw,4.2rem);
  max-width:64rem;margin:0 auto;position:relative}
.pasos::before{content:"";position:absolute;top:1.42rem;left:16.66%;right:16.66%;height:1px;
  background:linear-gradient(90deg,rgba(139,35,50,.1),rgba(139,35,50,.3),rgba(139,35,50,.1))}
.paso{text-align:center;position:relative;z-index:1}
.paso__n{display:inline-flex;align-items:center;justify-content:center;width:2.85rem;height:2.85rem;
  border-radius:50%;border:1.5px solid rgba(139,35,50,.3);color:var(--granate);background:var(--crema-alt);
  font-size:1.06rem;font-weight:600;margin:0 auto 1.65rem}
.paso h3{font-size:1.145rem;margin:0 0 .85rem;font-weight:650;color:var(--tinta);letter-spacing:-.014em;line-height:1.3}
.paso p{margin:0 auto;max-width:19rem;color:var(--slate2);font-size:.985rem;line-height:1.7}
.pasos-cta{text-align:center;margin-top:clamp(3.2rem,6vh,4.2rem)}
.pasos-cta a{text-decoration:none}
@media(max-width:760px){.pasos{grid-template-columns:1fr;gap:2.8rem;max-width:24rem}.pasos::before{display:none}}

/* 2 · Firma digital con aire */
.firma{max-width:64rem;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr;
  gap:clamp(3rem,6.5vw,5.5rem);align-items:start}
@media(min-width:720px){.firma-h2{max-width:20ch}}
.firma h2,.firma-h2{margin:0 0 1.5rem;font-size:clamp(1.55rem,2.9vw,2.05rem);letter-spacing:-.026em;color:var(--tinta);line-height:1.2}
.firma-p{max-width:34rem}
.firma p,.firma-p{margin:0 0 1.35rem;color:var(--charcoal);line-height:1.78;font-size:1.02rem}
.firma p:last-child{margin-bottom:0}
.sello{display:inline-flex;align-items:center;gap:.95rem;background:var(--hueso);margin-top:2.4rem;
  border:1px solid var(--silver);border-radius:14px;padding:1.15rem 1.4rem;text-decoration:none!important;
  transition:border-color var(--t-2) var(--e),transform var(--t-3) var(--e),box-shadow var(--t-2) var(--e)}
.sello *{text-decoration:none!important;border-bottom:0!important}
.sello:hover{border-color:var(--granate);transform:translateY(-1px);box-shadow:0 5px 16px rgba(42,33,24,.08)}
.sello__ico{flex:0 0 auto;color:var(--granate)}
.sello__t{display:block;font-size:.945rem;font-weight:650;color:var(--tinta);line-height:1.35}
.sello__s{display:block;font-size:.825rem;color:var(--slate2);margin-top:.24rem;line-height:1.45}
.firma__socios{margin:1.4rem 0 0;font-size:.875rem;color:var(--slate2);line-height:1.6}
.firma__socios a{color:var(--granate);text-decoration:none;border-bottom:1px solid rgba(139,35,50,.3)}

/* Las tres asociaciones, una debajo de otra.

   Iban en una frase corrida, y Ana pidió separarlas con la pista de cómo
   encontrarla en cada directorio: en una sola línea, tres paréntesis seguidos
   no se leen. La pista va en gris y más pequeña porque es una instrucción,
   no el nombre de la asociación. */
.socios{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.3rem;
  font-size:.875rem;color:var(--slate2);line-height:1.6}
.socios a{color:var(--granate);text-decoration:none;
  border-bottom:1px solid rgba(139,35,50,.3);display:inline-block;
  padding-top:4px;margin-top:-4px}
.socios__pista{color:var(--slate3,var(--slate2));font-size:.82rem}

/* La flechita de «esto se abre fuera».

   Va en un <span> aparte y no pegada al texto para que no la parta un salto
   de línea, y con «aria-hidden» porque al lado hay un texto de verdad para
   quien no la ve. */
.fuera{margin-left:.35em;font-size:.85em;line-height:1;display:inline-block;
  transform:translateY(-1px)}

/* Para el lector de pantalla y para nadie más. Sin «display:none», que lo
   escondería también de él. */
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:860px){.firma{grid-template-columns:1fr;gap:2.6rem}}

/* 3 · Idiomas: todas iguales, banderas de tamaño uniforme */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;max-width:62rem;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",system-ui,sans-serif}
.tile{background:var(--hueso);border-radius:28px;padding:2.9rem 2.85rem 2.35rem;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(42,33,24,.045),0 10px 34px -18px rgba(42,33,24,.2);
  transition:transform var(--t-3) var(--e),box-shadow var(--t-2) var(--e)}
.tile:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(42,33,24,.05),0 26px 52px -22px rgba(42,33,24,.3)}
.tile__nombre{margin:0;display:flex;align-items:center;gap:.78rem;font-size:2.1rem;line-height:1.06;
  font-weight:600;letter-spacing:-.032em;color:var(--tinta)}
.tile__flag{width:30px;height:21px;object-fit:cover;border-radius:3px;display:block;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(42,33,24,.18);position:relative;top:.2rem}
.tile__body{flex:1 1 auto}
/* Más grande y con más peso que el nombre del idioma en proporción: es el
   dato por el que el cliente decide, y antes se leía como un pie de foto. */
.tile__tipo{margin:.55rem 0 0;font-size:1.24rem;font-weight:600;letter-spacing:-.016em;color:var(--slate2)}
.tile__tipo--jur{color:var(--granate);font-weight:650}
.tile__desc{margin:1.5rem 0 0;font-size:1.02rem;line-height:1.55;letter-spacing:-.014em;color:var(--charcoal)}
.tile__pie{margin-top:2.1rem;padding-top:1.3rem;border-top:1px solid rgba(42,33,24,.09);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.tile__dir{font-size:.875rem;color:var(--slate2);letter-spacing:-.006em}
/* La ficha del inglés lleva dos modalidades, así que la primera dirección va
   dentro del cuerpo, pegada a su tipo, y la segunda se queda abajo con el
   botón. Sin esto las dos direcciones acababan juntas al pie y no se sabía
   cuál era de cuál. */
.tile__dir--dentro{display:block;margin:.2rem 0 0}
/* El segundo tipo va separado del bloque de arriba y sin el granate: el
   granate marca lo jurado, que es lo que más pesa. */
.tile__tipo--seg{margin-top:1.15rem;padding-top:1.15rem;
  border-top:1px solid rgba(61,53,45,.10)}
/* Justo en 24: un pixel de relleno lo deja del lado bueno del limite. */
.tile__cta{font-size:.925rem;font-weight:500;color:var(--granate);text-decoration:none;
  white-space:nowrap;display:inline-block;padding-block:2px}
.tile__cta span{display:inline-block;transition:transform var(--t-3) var(--e)}
.tile__cta:hover span{transform:translateX(3px)}
@media(max-width:900px){.tiles{grid-template-columns:1fr;max-width:32rem;gap:1.2rem}
  .tile{padding:2.2rem 2rem 1.9rem}.tile__nombre{font-size:2.1rem}}

/* 4 · Banda CTA bien compuesta */
.cta-prop{background:var(--granate);color:#fff;padding:clamp(5.2rem,11vh,7.6rem) 0;text-align:center}
.cta-prop h2{margin:0 auto;max-width:24ch;font-size:clamp(1.75rem,3.5vw,2.5rem);letter-spacing:-.028em;
  color:#fff;line-height:1.22;font-weight:650}
.cta-prop p{margin:1.4rem auto 0;max-width:34ch;color:rgba(255,255,255,.8);font-size:1.05rem;line-height:1.6}
.cta-prop .btn{margin-top:2.8rem;background:#fff;color:var(--granate);text-decoration:none!important;border:0;
  transition:transform var(--t-3) var(--e),box-shadow var(--t-2) var(--e)}
.cta-prop .btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}

/* 8 · Footer real */
.pie{background:var(--tinta);color:rgba(255,255,255,.72);padding:clamp(3.4rem,6vh,4.6rem) 0 2rem}
/* Cinco columnas desde que Ana pidió que lo que traduce se viera también en
   el pie. La primera baja de 1.7 a 1.5: con cinco, mantenerla tan ancha
   dejaba a las otras sin sitio y los enlaces de navegación se partían. */
.pie__grid{max-width:1100px;margin:0 auto;padding:0 2rem;display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.1fr 1.3fr;gap:clamp(1.6rem,3vw,2.8rem)}
/* Prosa, no lista de enlaces: se le da el mismo aire que a la primera. */
.pie__que{margin:0;font-size:.85rem;line-height:1.65;color:rgba(255,255,255,.6)}
.pie__marca img{height:27px;width:auto;display:block;margin-bottom:1.25rem;opacity:.95}
.pie__marca p{margin:0 0 .8rem;font-size:.9rem;line-height:1.65;color:rgba(255,255,255,.6);max-width:26ch}
/* .48 y no .42: con .42 el contraste sobre el fondo del pie era 3,95 y la
   norma pide 4,5 para texto de este tamaño. Con .48 pasa. */
.pie h4,.pie h3,.pie h2{margin:0 0 1rem;font-size:.735rem;letter-spacing:.02em;
  color:rgba(255,255,255,.48);font-weight:700}
/* El blanco de los enlaces del pie medía 18 px de alto.

   Son ocho, uno debajo de otro, en todas las páginas. La norma pide 24 y en
   un teléfono ocho enlaces de 18 px seguidos son ocho ocasiones de darle al
   de al lado. Se les pone relleno arriba y abajo y se le quita otro tanto al
   hueco de la lista: el blanco crece y el pie mantiene su ritmo (33,5 px de
   paso pasarian a 28,4, contra los 27,9 de antes). El «line-height» hace
   falta porque al pasar a inline-block el enlace se queda con el alto de
   linea entero, y sin acotarlo el pie crecia medio centimetro por columna.

   En el teléfono, donde se pulsa con el dedo y no con un ratón, se va a los
   44 px que recomiendan tanto la norma como Apple. Ahí el pie es lo último de
   la página y crecer no le quita el sitio a nada. */
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.26rem}
.pie a{color:rgba(255,255,255,.75);text-decoration:none;font-size:.91rem;
  transition:color var(--t-1) var(--e)}
/* El relleno va SOLO a los enlaces de las listas de navegacion.
   Puesto en «.pie a» a secas cogia tambien los enlaces metidos dentro de los
   parrafos de la primera columna —«Ministerio de Asuntos Exteriores»,
   «APTIJ»— que llevan el subrayado hecho con border-bottom: el relleno se lo
   despegaba del texto y en el telefono la raya quedaba un centimetro por
   debajo. Esos, ademas, van dentro de una frase y la norma los exceptua. */
.pie ul a{display:inline-block;line-height:1.25;padding-block:3px}
.pie a:hover{color:#fff}
/* El copyright estaba en 4,32; sube a .48 por lo mismo. */
.pie__bottom{max-width:1100px;margin:clamp(2.6rem,5vh,3.4rem) auto 0;padding:1.5rem 2rem 0;
  border-top:1px solid rgba(255,255,255,.11);display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.83rem;color:rgba(255,255,255,.48)}
@media(max-width:880px){.pie__grid{grid-template-columns:1fr 1fr;gap:2.4rem}}
@media(max-width:520px){.pie__grid{grid-template-columns:1fr}
  .pie ul{gap:0}
  .pie ul a{padding-block:13px}}

/* ── La tarjeta de WhatsApp ──────────────────────────────────────────────

   Los colores de aquí dentro son los de WhatsApp y NO los del sitio, a
   propósito: la gracia de la tarjeta es que se reconozca de un vistazo, y con
   la paleta granate no se reconocería. Por eso van encerrados en sus propias
   variables, colgando de «.wac», y no en :root: así no se escapan al resto de
   la web ni tientan a nadie a reutilizarlos.

   El fondo del hilo lleva el punteado del papel de WhatsApp, hecho con dos
   degradados en vez de una imagen: no pide nada a ningún servidor. */
.wac{
  /* Dos verdes de WhatsApp, y los dos elegidos por el contraste.

     El botón empezó con el #25D366 de la marca, que es el del icono
     flotante, y el texto blanco encima daba 1,98 sobre el 4,5 que hace falta:
     ilegible para mucha gente y no un poco, sino a la mitad. Con el #008069
     —que también es suyo, el de la barra de WhatsApp Web— sube a 4,89.

     La cabecera baja al #075E54, el verde clásico, para que barra y botón no
     sean la misma mancha. Los dos son de WhatsApp: la tarjeta se sigue
     reconociendo a un metro. */
  --wac-verde:#075E54;      /* la barra de arriba */
  --wac-boton:#008069;      /* el botón, con texto blanco encima */
  --wac-papel:#ECE5DD;      /* el fondo del hilo */
  --wac-globo:#fff;
  --wac-tinta:#111b21;
  --wac-gris:#667781;
  position:fixed;right:1.5rem;bottom:calc(1.5rem + 56px + 14px);z-index:59;
  width:min(20.5rem,calc(100vw - 3rem));
  border-radius:14px;overflow:hidden;background:var(--wac-papel);
  box-shadow:0 12px 38px rgba(11,20,26,.28),0 2px 8px rgba(11,20,26,.16);
  font-family:inherit;
  transform-origin:100% 100%;
}
/* Nace desde la esquina del botón, que es de donde sale. */
.wac[hidden]{display:none}
.wac.wac--entra{animation:wac-entra var(--t-3) var(--e)}
@keyframes wac-entra{from{opacity:0;transform:scale(.9) translateY(10px)}
                     to{opacity:1;transform:none}}
.wac.wac--sale{animation:wac-entra var(--t-2) var(--e) reverse forwards}

.wac__cab{display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--wac-verde);color:#fff}
.wac__foto{flex:none;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.22);display:grid;place-items:center;
  font-weight:600;font-size:1.05rem;line-height:1}
.wac__quien{display:flex;align-items:center;line-height:1.25;min-width:0}
.wac__quien b{font-size:.95rem;font-weight:600}
.wac__cerrar{margin-left:auto;flex:none;width:30px;height:30px;border:0;
  border-radius:50%;background:transparent;color:#fff;cursor:pointer;
  display:grid;place-items:center;
  transition:background var(--t-1) var(--e)}
.wac__cerrar:hover,.wac__cerrar:focus-visible{background:rgba(255,255,255,.18)}

.wac__hilo{padding:16px 14px 10px;min-height:96px;
  background-color:var(--wac-papel);
  background-image:radial-gradient(rgba(11,20,26,.045) 1px,transparent 1px),
                   radial-gradient(rgba(11,20,26,.03) 1px,transparent 1px);
  background-size:22px 22px,22px 22px;
  background-position:0 0,11px 11px}

/* El globo, con su pico a la izquierda como los que llegan. */
.wac__globo{position:relative;background:var(--wac-globo);color:var(--wac-tinta);
  border-radius:0 8px 8px 8px;padding:8px 10px 6px;max-width:100%;
  box-shadow:0 1px 1px rgba(11,20,26,.13);font-size:.875rem;line-height:1.45;
  animation:wac-globo var(--t-2) var(--e)}
.wac__globo p{margin:0}
.wac__globo p + p{margin-top:6px}
.wac__globo::before{content:'';position:absolute;top:0;left:-7px;width:8px;height:13px;
  background:var(--wac-globo);
  clip-path:polygon(100% 0,100% 100%,0 0)}
@keyframes wac-globo{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wac__hora{display:block;text-align:right;font-size:.68rem;color:var(--wac-gris);
  margin-top:2px;font-variant-numeric:tabular-nums}

/* Los tres puntos de «está escribiendo», que es lo que hace que la tarjeta se
   lea como una conversación y no como un cartel. */
.wac__escribiendo{display:inline-flex;gap:4px;align-items:center;
  background:var(--wac-globo);border-radius:0 8px 8px 8px;padding:11px 12px;
  box-shadow:0 1px 1px rgba(11,20,26,.13)}
.wac__escribiendo[hidden]{display:none}
.wac__escribiendo span{width:7px;height:7px;border-radius:50%;background:#9aa6ac;
  animation:wac-punto 1.2s ease-in-out infinite}
.wac__escribiendo span:nth-child(2){animation-delay:.18s}
.wac__escribiendo span:nth-child(3){animation-delay:.36s}
@keyframes wac-punto{0%,60%,100%{opacity:.35;transform:translateY(0)}
                     30%{opacity:1;transform:translateY(-3px)}}

.wac__ir{display:flex;align-items:center;justify-content:center;gap:9px;
  margin:10px 12px 14px;padding:11px 16px;border-radius:999px;
  background:var(--wac-boton);color:#fff;text-decoration:none;
  font-size:.95rem;font-weight:600;
  box-shadow:0 3px 10px rgba(0,128,105,.32);
  transition:background var(--t-1) var(--e),box-shadow var(--t-2) var(--e)}
.wac__ir:hover,.wac__ir:focus-visible{background:#00705c;
  box-shadow:0 6px 18px rgba(0,128,105,.42)}

@media(max-width:520px){
  .wac{right:1rem;left:1rem;width:auto;bottom:calc(1rem + 56px + 12px)}
}
@media(prefers-reduced-motion:reduce){
  .wac.wac--entra,.wac.wac--sale,.wac__globo{animation:none}
  .wac__escribiendo span{animation:none;opacity:.55}
}

/* 5 · WhatsApp en su verde oficial */
.wa{position:fixed;right:1.5rem;bottom:1.5rem;z-index:60;height:56px;width:56px;display:flex;
  align-items:center;justify-content:flex-end;background:#25D366;color:#fff;border-radius:999px;overflow:hidden;
  text-decoration:none!important;box-shadow:0 5px 18px rgba(20,80,45,.34);
  transition:width .46s cubic-bezier(.22,1,.36,1),box-shadow .3s,background .2s}
.wa:hover,.wa:focus-visible{width:176px;background:#1EBE5A;box-shadow:0 10px 28px rgba(20,80,45,.42)}
.wa__txt{flex:1 1 auto;text-align:center;font-size:.955rem;font-weight:600;white-space:nowrap;opacity:0;
  transform:translateX(10px);transition:opacity .26s ease .12s,transform .38s cubic-bezier(.22,1,.36,1) .08s}
.wa:hover .wa__txt,.wa:focus-visible .wa__txt{opacity:1;transform:translateX(0)}
.wa__ico{flex:0 0 56px;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.wa__ico svg{width:27px;height:27px;transition:transform .62s cubic-bezier(.32,1.4,.4,1)}
.wa:hover .wa__ico svg,.wa:focus-visible .wa__ico svg{transform:rotate(360deg)}
@media(prefers-reduced-motion:reduce){.wa,.wa__txt,.wa__ico svg{transition-duration:.01ms}}




/* ══════════════════════════════════════════════════════════════
   PUNTO 6 · REJILLA DE TRES ANCHOS (líneas nombradas)
   Patrón de Rachel Andrew. Tres anchos deliberados en vez de uno.
   ══════════════════════════════════════════════════════════════ */
.rejilla{
  display:grid;
  grid-template-columns:
    [full-start] minmax(1.4rem,1fr)
    [wide-start] minmax(0,4.5rem)
    [content-start] minmax(0,44rem) [content-end]
    minmax(0,4.5rem) [wide-end]
    minmax(1.4rem,1fr) [full-end];
}
.rejilla > *      { grid-column:content }
.rejilla > .ancho { grid-column:wide }
.rejilla > .todo  { grid-column:full }

/* Por debajo de 900 px los canalones de la rejilla se comían 144 de los
   350 px útiles del móvil. Ahí no hay márgenes que repartir: todas las
   líneas nombradas colapsan en una columna y manda el padding del
   contenedor. (Se perdió al retirar la marginalia; vuelve aquí.) */
@media (max-width:900px){
  .rejilla{
    grid-template-columns:
      [full-start wide-start content-start] minmax(0,1fr) [content-end wide-end full-end];
  }
}

/* El facsímil dibujado a mano (punto 5) se sustituyó por la foto del
   documento: mismo contenido, pero el ojo lo lee como una prueba y no
   como una ilustración. Sus ~40 líneas de CSS se han retirado. */

/* ══════════════════════════════════════════════════════════════
   PUNTO 7 · TOKENS DE MOVIMIENTO
   Antes había 12 duraciones distintas (160/180/200/220/240/260/
   280/320/380/460/620/760 ms) y 3 curvas mezcladas. El ojo lee esa
   dispersión como "hecho por partes". Tres tiempos y una curva:
     --t-1 texto y color        (respuesta inmediata)
     --t-2 fondo, borde, opacidad
     --t-3 transform y tamaño   (recorre distancia, necesita más)
   La curva es easeOut pura: arranca rápido y frena. Nunca ease-in
   en UI: retrasa el arranque y se percibe como lag.
   ══════════════════════════════════════════════════════════════ */
:root{
  --t-1: 120ms;
  --t-2: 220ms;
  --t-3: 320ms;
  --e:   cubic-bezier(.22,1,.36,1);
}

/* ── Reveal al hacer scroll ───────────────────────────────────────
   Reglas: 12 px de recorrido (no 16+), 320 ms, escalonado de 55 ms
   y como mucho 4 elementos. El hero y el CTA final NO se animan:
   lo primero que ve el usuario nunca debe aparecer con retardo.
   Doble puerta: (1) prefers-reduced-motion como opt-in, no como
   opt-out; (2) la clase .js-anim la pone JS, así que sin JS el
   contenido se ve — nunca queda una página en blanco.
   ──────────────────────────────────────────────────────────────── */
.reveal{opacity:1;transform:none;will-change:auto;transition:none}

@media (prefers-reduced-motion: no-preference){
  html.js-anim .reveal{
    opacity:0; transform:translateY(12px);
    transition:opacity var(--t-2) var(--e),transform var(--t-3) var(--e);
    will-change:opacity, transform;
  }
  html.js-anim .reveal.is-visible{opacity:1;transform:none;will-change:auto}
  html.js-anim .reveal.is-visible:nth-of-type(2),
  html.js-anim .reveal.is-visible:nth-of-type(3),
  html.js-anim .reveal.is-visible:nth-of-type(4){transition-delay:0ms}
  html.js-anim .pasos > .reveal:nth-child(2){transition-delay:55ms}
  html.js-anim .pasos > .reveal:nth-child(3){transition-delay:110ms}
  html.js-anim .tiles > .reveal:nth-child(2){transition-delay:55ms}
  html.js-anim .tiles > .reveal:nth-child(3){transition-delay:110ms}
  html.js-anim .tiles > .reveal:nth-child(4){transition-delay:165ms}
  html.js-anim .rejilla > .reveal:nth-child(2){transition-delay:55ms}
  html.js-anim .rejilla > .reveal:nth-child(3){transition-delay:110ms}
}

/* PUNTO 8 · la marginalia se retiró: en el margen el texto queda
   pequeño y fuera del recorrido de lectura, y lo que contaba (la base
   legal) merece estar en el cuerpo, a tamaño normal. La rejilla de
   líneas nombradas del punto 6 se mantiene: es la que da los cuatro
   anchos distintos de la sección. */

/* ══════════════════════════════════════════════════════════════
   EL DOCUMENTO · foto de la última página de una jurada
   Todo es CSS y SVG: no hay ninguna imagen. Las cuatro señales
   que hacen que el ojo lo lea como una foto y no como una caja:
     1. luz direccional (más claro arriba-izquierda),
     2. sombra en capas — una de contacto y tres ambientales,
     3. grano de papel en multiply, y una marca de doblez,
     4. rotación de medio grado: nada real está perfectamente recto.
   La tinta del sello usa feTurbulence + feDisplacementMap para el
   borde irregular y un segundo ruido, más grueso, recortado con
   feComposite operator="out", para los huecos de entintado.
   ══════════════════════════════════════════════════════════════ */
html{--grano:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIj48ZmlsdGVyIGlkPSJnIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iNCIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48ZmVDb21wb25lbnRUcmFuc2Zlcj48ZmVGdW5jQSB0eXBlPSJsaW5lYXIiIHNsb3BlPSIwLjQyIi8+PC9mZUNvbXBvbmVudFRyYW5zZmVyPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIiBmaWx0ZXI9InVybCgjZykiLz48L3N2Zz4=')}

.docu{margin:var(--sp-2) 0 0;padding:30px 26px 34px;position:relative;isolation:isolate;
  perspective:1400px;perspective-origin:52% 34%}
.docu::before{content:"";position:absolute;inset:8% 3% 0;z-index:-1;
  background:radial-gradient(60% 70% at 50% 42%, rgb(120 96 60 / .07), transparent 72%);
  filter:blur(18px)}

.docu__hoja{
  position:relative;background:#FDFBF4;border-radius:2px;
  padding:clamp(1.7rem,3.6vw,2.9rem) clamp(1.5rem,3.6vw,2.8rem) clamp(1.9rem,3.4vw,2.6rem);
  max-width:44rem;margin-inline:auto;
  transform:rotateX(1.7deg) rotateY(-1.5deg) rotate(-.65deg);transform-style:preserve-3d;
  outline:1px solid rgb(120 100 70 / .10);outline-offset:-1px;
  box-shadow:0 1px 1px rgb(28 22 12 / .06),2px 3px 5px rgb(28 22 12 / .06),
             4px 9px 16px rgb(28 22 12 / .07),8px 22px 38px rgb(28 22 12 / .08),
             14px 40px 70px rgb(28 22 12 / .06);
}
.docu__hoja::before{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:2;
  background:radial-gradient(120% 90% at 18% 8%, rgb(255 255 255 / .62), rgb(255 255 255 / 0) 52%),
             linear-gradient(146deg, transparent 48%, rgb(120 100 70 / .085) 100%),
             radial-gradient(130% 110% at 50% 50%, transparent 58%, rgb(90 74 48 / .07) 100%)}
.docu__hoja::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:3;background-image:var(--grano);background-size:180px 180px;
  opacity:.26;mix-blend-mode:multiply}
.docu__doblez{position:absolute;left:0;right:0;top:47%;height:14px;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom, rgb(120 100 70 / 0) 0%, rgb(120 100 70 / .055) 45%,
             rgb(255 255 255 / .5) 55%, rgb(120 100 70 / 0) 100%)}
.docu__pdc{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);
  -webkit-mask-image:radial-gradient(115% 78% at 42% 46%, transparent 34%, #000 100%);
          mask-image:radial-gradient(115% 78% at 42% 46%, transparent 34%, #000 100%)}
.docu__polvo{position:absolute;inset:0;width:100%;height:100%;z-index:4;
  pointer-events:none;opacity:.5}
.docu__hoja > :not(.docu__doblez):not(.docu__pdc):not(.docu__polvo){position:relative;z-index:1}

.docu__cola{font:13.2px/1.85 Georgia,"Times New Roman",serif;color:rgb(28 27 25 / .45);
  margin:0 0 1.4rem;letter-spacing:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 62%);
          mask-image:linear-gradient(to bottom,transparent,#000 62%)}
.docu__regla{border:0;border-top:1px solid rgb(28 27 25 / .18);margin:0 0 1.5rem}
.docu__formula{font:15.1px/1.9 Georgia,"Times New Roman",serif;color:#26241F;
  margin:0;text-align:justify;hyphens:auto;letter-spacing:0;max-width:none}
.docu__formula b{font-weight:700;letter-spacing:.02em}
.docu__lugar{font:15.1px/1.9 Georgia,"Times New Roman",serif;color:#26241F;
  margin:1.1rem 0 0;letter-spacing:0}
.marca{background:linear-gradient(transparent 58%, rgb(255 214 92 / .60) 58%,
       rgb(255 214 92 / .60) 94%, transparent 94%);padding:0 .06em}

.docu__rubrica{margin-top:2rem;display:flex;align-items:flex-start;
  gap:clamp(.8rem,4vw,2.4rem);flex-wrap:wrap}
/* El nº de nombramiento es público — está en el registro del MAEC y no
   enseñarlo es señal de sospecha. Lo que NO se publica es una imagen
   utilizable del sello y de la firma: con el nombre y el número reales
   encima, sería una plantilla lista para falsificar (arts. 390-399 CP).
   Se difuminan: se ve que están, no se pueden calcar. */
.docu__firma{display:block;width:196px;max-width:100%;height:90px;overflow:visible;
  margin-left:-6px;mix-blend-mode:multiply;filter:blur(4.2px) saturate(1.05)}
.docu__sello{margin-top:4px;max-width:100%;height:auto;
  transform:rotate(-2.4deg) skewX(-.8deg);mix-blend-mode:multiply}
.docu__sello .lineas{filter:blur(3.2px)}
.docu__fdo{font:11.5px/1.4 Georgia,serif;color:rgb(28 27 25 / .45);margin:.15rem 0 0;letter-spacing:0}

.docu__pie{margin:1.6rem auto 0;font-size:.925rem;line-height:1.68;color:var(--slate2);
  letter-spacing:var(--tr-15);max-width:64ch;text-wrap:pretty;text-align:center}
.docu__pie b{font-weight:600;color:var(--charcoal)}
.docu__pie a{color:var(--granate);text-decoration:none;border-bottom:1px solid rgb(139 35 50 / .3)}
.docu__pie a:hover{border-color:var(--granate)}
.docu__aviso{display:block;margin-top:.7rem;padding-left:.85rem;
  border-left:2px solid var(--hair-firme);color:var(--slate2)}

/* Qué recibes: lista con entradilla en negrita */
.recibes{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:grid;gap:1.15rem}
.recibes li{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start}
.recibes svg{color:var(--granate);margin-top:.28rem;flex:none}
.recibes b{display:block;font-weight:600;color:var(--tinta);letter-spacing:var(--tr-16)}
.verifica{margin:var(--sp-2) 0 0;display:flex;flex-wrap:wrap;align-items:center;
  gap:.9rem 1.3rem}
.verifica .btn{flex:none}
.verifica__ayuda{margin:0;flex:1 1 17rem;min-width:0;font-size:.875rem;line-height:1.6;
  color:var(--slate2);letter-spacing:var(--tr-14);text-wrap:pretty}
.verifica__ayuda b{font-weight:600;color:var(--charcoal)}
.recibes span{color:var(--slate2);font-size:.945rem;line-height:1.6;letter-spacing:var(--tr-15)}

@media(max-width:560px){
  .docu{padding:16px 6px 22px}          /* en móvil el papel necesita todo el ancho */
  .docu__hoja{transform:rotateX(1.2deg) rotate(-.5deg)}   /* menos giro: cabe mejor */
  .docu__rubrica{gap:1.2rem}
  .docu__formula,.docu__lugar{font-size:14.2px;text-align:left}
}

/* ══════════════════════════════════════════════════════════════
   PUNTO 2 · FILETES A TINTA TRANSLÚCIDA
   Motivo: un filete sólido cambia de peso relativo al cambiar de
   fondo (1.39:1 sobre crema, 1.29:1 sobre crema-alt). Con alfa el
   peso se mantiene constante sobre cualquier fondo del sistema.
   ══════════════════════════════════════════════════════════════ */
:root{
  --silver:     rgb(28 27 25 / .14);   /* filete estructural  */
  --hair:       rgb(28 27 25 / .12);   /* divisiones suaves   */
  --hair-firme: rgb(28 27 25 / .20);   /* marca deliberada    */
  --hair-inv:   rgb(255 255 255 / .16);/* sobre fondo oscuro  */
}
.tile__pie          { border-top-color:var(--hair) }
.tile__flag         { box-shadow:0 0 0 1px rgb(28 27 25 / .20) }
.pie__bottom        { border-top-color:var(--hair-inv) }
.dato + .dato::before{
  background:linear-gradient(180deg,transparent,var(--hair-firme) 28%,var(--hair-firme) 72%,transparent) }

/* ══════════════════════════════════════════════════════════════
   PUNTO 4 · RITMO VERTICAL EN TRES NIVELES
   Antes: todas las secciones a 90 px de padding, hueco combinado
   de 180 px en todas las transiciones. Ahora la sección que
   sostiene el argumento respira más y el resto se ordena.
   ══════════════════════════════════════════════════════════════ */
:root{
  --sp-1: clamp(1.05rem, 2vh, 1.45rem);   /* dentro de un grupo      */
  --sp-2: clamp(2.6rem, 5vh, 3.5rem);     /* cabecera → contenido    */
  --sp-3: clamp(4.4rem, 8vh, 6.1rem);     /* sección estándar        */
  --sp-4: clamp(6rem, 11vh, 8.4rem);      /* sección con énfasis     */
}
.bloque              { padding:var(--sp-3) 0 }
.bloque--enfasis     { padding:var(--sp-4) 0 }
.bloque__head        { margin-bottom:var(--sp-2) }
.hero-pitch.prop     { padding-bottom:var(--sp-3)!important }
.pasos-cta           { margin-top:var(--sp-2) }
/* ══════════════════════════════════════════════════════════════
   PUNTO 1 · ESCALA DE TRACKING DE INTER + GRADO ÓPTICO
   Curva oficial de Rasmus Andersson (Inter Dynamic Metrics):
       tracking = −0.0223 + 0.185 · e^(−0.1745 · px)
   Inter Variable 4.001 expone el eje opsz (14–32).
   Las versalitas NO siguen la curva: Butterick pide +5–12%.
   ══════════════════════════════════════════════════════════════ */
:root{
  --tr-12:  0.0005em;   /* 12 px · etiquetas             */
  --tr-14: -0.0062em;   /* 14 px · pie, notas            */
  --tr-15: -0.0093em;   /* 15 px · enlaces, botones      */
  --tr-16: -0.0110em;   /* 16 px · cuerpo de texto       */
  --tr-18: -0.0143em;   /* 18 px · entradilla, h3        */
  --tr-25: -0.0199em;   /* 25 px · títulos medios        */
  --tr-36: -0.0223em;   /* 32 px+ · titulares (asíntota) */
  --tr-caps: 0.10em;    /* mayúsculas                    */
}
html{ font-optical-sizing:auto; }

/* — titulares (≥32 px, la curva ya es plana) — */
.hero-pitch.prop h1.display,
.bloque__head h2,
.firma h2,
.cta-prop h2,
.tile__nombre        { letter-spacing:var(--tr-36)!important }

/* — 18 px — */
.paso h3             { letter-spacing:var(--tr-18)!important }

/* — 16-17 px · cuerpo — */
.hero-pitch.prop .lede,
.kicker,
.bloque__head p,
.firma p,
.firma__lista li,
.tile__tipo,
.tile__desc,
.cta-prop p,
.paso__n             { letter-spacing:var(--tr-16)!important }

/* — 15 px — */
.dato,
.paso p,
.sello__t,
.nav-links a,
.btn,
.tile__cta           { letter-spacing:var(--tr-15)!important }

/* — 14 px — */
.tile__dir,
.nav-cta,
.pie a,
.pie__marca p,
.sello__s            { letter-spacing:var(--tr-14)!important }

/* — los rótulos del pie ya no van en versalitas: interletrado normal — */
.pie h4,.pie h3,.pie h2 { letter-spacing:.02em!important }

.btn,.btn:hover{text-decoration:none!important}

/* ── Cinta de vista previa ────────────────────────────────────────────────
   Sólo sale en /staging, dentro del panel. Sustituye a la cinta "maqueta ·
   sin publicar" que llevaba el fichero suelto. */
.aviso-preview{
  background:#F4EDE0;color:#6B6155;padding:.45rem 1rem;font-size:.73rem;
  text-align:center;letter-spacing:.05em;border-bottom:1px solid #D9D2C5;
}
.aviso-preview a{color:var(--granate);margin-left:.6rem;border-bottom:1px solid rgba(139,35,50,.35)}
.aviso-preview a:hover{border-bottom-color:var(--granate)}