/* ============================================================
   Webland · Hoja de estilos
   Sora para titulares · Inter para todo lo demás
   ============================================================ */

/* ---------- 1. Variables ---------- */
:root {
  /* Tintas de texto (no son colores de marca) */
  --ink:    #1F2124;
  --body:   #4B4C4C;
  --muted:  #7A7B7B;

  /* Color de marca */
  --red:    #DA1A22;
  --red-dark: #B31419;

  /* Superficies */
  --white:  #FFFFFF;
  --soft:   #F7F7F7;
  --rule:   #E4E4E4;

  /* Tipografía */
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display:'Sora', var(--sans);

  /* Retícula */
  --max:    1200px;
  --gutter: 24px;

  /* Ritmo vertical */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 96px;
  --s7: 140px;
}

/* ---------- 2. Reinicio ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* alto del menú fijo */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

/* Foco visible: accesibilidad, no es opcional */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido */
.saltar {
  position: absolute;
  top: -100px; left: var(--s3);
  z-index: 200;
  background: var(--red);
  color: var(--white);
  padding: 12px 20px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: top .15s ease;
}
.saltar:focus { top: 12px; }

/* ---------- 3. Retícula ---------- */
.contenedor {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.seccion { padding-block: var(--s7); }
.seccion--suave { background: var(--soft); }
.seccion--filete { border-top: 1px solid var(--rule); }

/* ---------- 4. Tipografía ---------- */
.antetitulo {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s2);
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(34px, 6.2vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
}

h2 {
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 800;
  letter-spacing: -.015em;
  margin-bottom: var(--s3);
}

h3 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* La palabra en rojo dentro de un titular */
.acento { color: var(--red); }

.entrada {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  color: var(--body);
  max-width: 62ch;
  margin: 0;
}

.nota {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- 5. Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}

.btn--primario {
  background: var(--red);
  color: var(--white);
}
.btn--primario:hover { background: var(--red-dark); }

.btn--fantasma {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
  padding-inline: 4px;
}
.btn--fantasma:hover { color: var(--red); }

.btn--linea {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn--linea:hover { border-color: var(--ink); }

.btn:active { transform: translateY(1px); }

/* ---------- 6. Menú ---------- */
.menu {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.menu.esta-fijo {
  border-bottom-color: var(--rule);
}

.menu__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  height: 76px;
}

.menu__logo { display: flex; align-items: center; flex-shrink: 0; }
.menu__logo img { height: 30px; width: auto; }

.menu__enlaces {
  display: flex;
  align-items: center;
  gap: var(--s3);
  list-style: none;
  margin: 0; padding: 0;
}
/* :not(.btn) es indispensable: sin él este selector gana por
   especificidad y le pisa el color blanco al botón del diagnóstico. */
.menu__enlaces a:not(.btn) {
  font-size: 15px;
  font-weight: 500;
  color: var(--body);
  text-decoration: none;
  transition: color .15s ease;
}
.menu__enlaces a:not(.btn):hover { color: var(--ink); }

.menu__enlaces .btn--primario { color: var(--white); }

.menu__hamburguesa {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.menu__hamburguesa span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  position: relative;
  transition: background-color .2s ease;
}
.menu__hamburguesa span::before,
.menu__hamburguesa span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px; height: 2px;
  background: var(--ink);
  transition: transform .2s ease;
}
.menu__hamburguesa span::before { top: -7px; }
.menu__hamburguesa span::after  { top: 7px; }

.menu.esta-abierto .menu__hamburguesa span { background: transparent; }
.menu.esta-abierto .menu__hamburguesa span::before { transform: translateY(7px) rotate(45deg); }
.menu.esta-abierto .menu__hamburguesa span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

.hero__red {
  position: absolute;
  inset: 0;
  /* El ancho y el alto explícitos son obligatorios: canvas es un elemento
     reemplazado, así que con «inset: 0» y medidas automáticas el navegador
     usa su tamaño intrínseco —el del bitmap— y lo deja anclado en la
     esquina en vez de estirarlo. */
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero__contenido {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--s6) var(--s5);
}

.hero__texto { max-width: 55%; }

.hero h1 { margin-bottom: var(--s3); }

.hero__entrada { margin-bottom: var(--s4); }

.hero__acciones {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}

.hero__franja {
  display: flex;
  flex-wrap: wrap;
  gap: 10px var(--s3);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  max-width: 55%;
}
.hero__franja span { display: inline-flex; align-items: center; gap: var(--s3); }
.hero__franja span:not(:last-child)::after {
  content: '·';
  color: var(--rule);
}

/* ---------- 8. Encabezado de sección ---------- */
.encabezado { max-width: 62ch; margin-bottom: var(--s5); }
.encabezado p { margin: 0; }

/* ---------- 9. Ficha del caso ---------- */
.caso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  align-items: start;
}

.caso__imagen {
  background: var(--soft);
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: var(--s3);
}

.caso__meta {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0 0 var(--s2);
}

.caso__reto { margin: 0 0 var(--s4); }

.caso__decisiones {
  list-style: none;
  margin: 0 0 var(--s4);
  padding: 0;
  counter-reset: decision;
  border-top: 1px solid var(--rule);
}
.caso__decisiones li {
  counter-increment: decision;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--s2);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
}
.caso__decisiones li::before {
  content: counter(decision);
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  color: var(--red);
  line-height: 1.6;
}
.caso__decisiones strong {
  color: var(--ink);
  font-weight: 700;
  display: block;
}

/* ---------- 10. Retícula de piezas ---------- */
.piezas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin-bottom: var(--s5);
}

.pieza {
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 3;
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
a.pieza:hover { border-color: var(--ink); transform: translateY(-2px); }

.pieza__etiqueta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}
.pieza__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.3;
}
.pieza__origen {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- 11. Etapas ---------- */
.etapas {
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
  border-top: 1px solid var(--rule);
}
.etapa {
  display: grid;
  grid-template-columns: 56px minmax(140px, 200px) 1fr;
  gap: var(--s3);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.etapa__numero {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  color: var(--red);
  line-height: 1.2;
}
.etapa__nombre {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.etapa__texto { margin: 0; font-size: 16px; }

/* ---------- 12. Declaración ---------- */
.declaracion {
  background: var(--ink);
  color: var(--white);
  padding: var(--s6) var(--s5);
}
.declaracion h3 {
  color: var(--white);
  font-size: clamp(24px, 3.2vw, 34px);
  margin-bottom: var(--s3);
  max-width: 20ch;
}
.declaracion p {
  color: rgba(255, 255, 255, .82);
  max-width: 64ch;
  margin: 0;
}

/* ---------- 13. Lista de requisitos ---------- */
.requisitos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}
.requisitos li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s2);
  font-size: 16px;
}
.requisitos li::before {
  content: '—';
  color: var(--red);
  font-weight: 700;
}

/* ---------- 14. Tarjetas de la oferta ---------- */
.lineas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
  margin-bottom: var(--s6);
}

.linea {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
}
.linea__nombre {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--s2);
}
.linea__texto {
  margin: 0 0 var(--s3);
  font-size: 16px;
  flex-grow: 1;
}
.linea__precio {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--red);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}

/* ---------- 15. Bloque del diagnóstico ---------- */
.diagnostico {
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--red);
  padding: var(--s6) var(--s5);
  text-align: center;
  margin-bottom: var(--s4);
}
.diagnostico h3 {
  font-size: clamp(26px, 3.6vw, 38px);
  margin-bottom: var(--s3);
}
.diagnostico p {
  max-width: 60ch;
  margin: 0 auto var(--s4);
}
.diagnostico__precio {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s4);
}

.despedida {
  font-size: 15px;
  color: var(--muted);
  max-width: 68ch;
  margin: 0;
}

/* ---------- 16. Preguntas ---------- */
.preguntas { border-top: 1px solid var(--rule); }

.pregunta { border-bottom: 1px solid var(--rule); }

.pregunta summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: var(--s3);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color .15s ease;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:hover { color: var(--red); }

.pregunta summary::after {
  content: '';
  flex-shrink: 0;
  width: 12px; height: 12px;
  margin-top: 8px;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.pregunta[open] summary::after { transform: rotate(-135deg); margin-top: 12px; }

.pregunta__respuesta {
  padding-bottom: var(--s4);
  max-width: 72ch;
  margin: 0;
  font-size: 16px;
}

/* ---------- 17. Formulario ---------- */
.contacto {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--s6);
  align-items: start;
}

.formulario { display: grid; gap: var(--s3); }

.campo { display: grid; gap: 6px; }

.campo label {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.campo__ayuda {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.campo input,
.campo textarea,
.campo select {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 13px 14px;
  width: 100%;
  transition: border-color .15s ease;
}
.campo input:hover,
.campo textarea:hover,
.campo select:hover { border-color: var(--muted); }
.campo input:focus,
.campo textarea:focus,
.campo select:focus { border-color: var(--ink); outline-offset: 1px; }

.campo textarea { resize: vertical; min-height: 92px; }

.campo__error {
  font-size: 14px;
  color: var(--red);
  margin: 0;
  min-height: 0;
}
.campo.tiene-error input,
.campo.tiene-error textarea,
.campo.tiene-error select { border-color: var(--red); }

/* Trampa antispam: fuera de la vista sin usar display:none, porque
   algunos robots saltan los campos ocultos de esa forma. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario__envio { margin-top: var(--s2); }
.formulario__envio .btn { width: 100%; }

.confirmacion {
  background: var(--soft);
  border-left: 6px solid var(--red);
  padding: var(--s4);
  font-size: 16px;
}
.confirmacion p { margin: 0; }

.contacto__lado { font-size: 16px; }
.contacto__lado dl { margin: var(--s4) 0 0; }
.contacto__lado dt {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.contacto__lado dd {
  margin: 0 0 var(--s3);
  font-size: 17px;
  color: var(--ink);
}
.contacto__lado a { color: var(--ink); text-decoration-color: var(--rule); }
.contacto__lado a:hover { color: var(--red); }

/* ---------- 18. Pie ---------- */
.pie {
  background: var(--ink);
  color: rgba(255, 255, 255, .72);
  padding-block: var(--s6) var(--s4);
  font-size: 15px;
}
.pie__fila {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.pie__logo img { height: 30px; width: auto; margin-bottom: var(--s2); }
.pie__lema { margin: 0; color: rgba(255, 255, 255, .6); }
.pie__datos { text-align: right; }
.pie__correo {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
}
.pie__correo:hover { color: var(--red); }
.pie__lugar { margin: 6px 0 0; color: rgba(255, 255, 255, .6); }

.pie__legal {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  padding-top: var(--s3);
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
}
.pie__legal a { color: rgba(255, 255, 255, .72); text-decoration-color: rgba(255,255,255,.25); }
.pie__legal a:hover { color: var(--white); }

/* ============================================================
   19. Ficha de caso
   ============================================================ */

.ficha-cab {
  padding-block: var(--s6) var(--s5);
  border-bottom: 1px solid var(--rule);
}
/* Cuando viene después de la franja de marca no necesita tanto aire
   arriba: la franja ya separa del menú. */
.ficha-marca + .ficha-cab { padding-top: var(--s5); }

/* ---------- Franja de marca del cliente ----------
   Solo lleva lo que es suyo: el wordmark y su declaración de portada.
   Todo lo que dice Webland vuelve al blanco, debajo. Es la misma
   relación que en las muestras: la pieza arriba, el pie después.

   El fondo va oscuro porque su oro sobre blanco da 2.29:1, por debajo
   del 3:1 que pide hasta un titular grande; sobre su negro da 8.50:1.
   Aclarar el oro para que cupiera en blanco sería desvirtuar la marca
   para acomodarla a la nuestra. */
.ficha-marca {
  background: var(--ex-dark);
  padding-block: var(--s6);
}

/* El wordmark, con los valores exactos de extrangers.com */
.ex-wm {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(3.4rem, 9vw, 7rem);
  line-height: .95;
  letter-spacing: -.04em;
  color: #fff;
  margin: 0 0 var(--s4);
}
.ex-wm .ex-em { font-weight: 600; color: var(--ex-gold); }
.ex-wm .ex-tr { color: #fff; }

/* Su declaración de portada, en su voz y su tipografía */
.ex-statement {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.32;
  color: rgba(255, 255, 255, .9);
  max-width: 22ch;
  margin: 0 0 var(--s5);
}
.ex-statement strong { color: var(--ex-gold); font-weight: 600; }
.ex-statement:last-child { margin-bottom: 0; }
.ficha-cab h1 {
  font-size: clamp(40px, 7vw, 76px);
  margin-block: var(--s2) var(--s3);
}
.ficha-cab__entrada {
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.55;
  color: var(--body);
  max-width: 60ch;
  margin: 0 0 var(--s4);
}
.ficha-cab__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--s3);
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
.ficha-cab__meta span:not(:last-child)::after {
  content: '·';
  margin-left: var(--s3);
  color: var(--rule);
}
.ficha-cab__meta a { color: var(--ink); text-decoration-color: var(--rule); }
.ficha-cab__meta a:hover { color: var(--red); }

/* El reto */
.reto {
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 56ch;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
}

/* Decisiones */
.decisiones {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: dec;
}
.decision {
  counter-increment: dec;
  padding-block: var(--s5);
  border-top: 1px solid var(--rule);
}
.decision:last-child { border-bottom: 1px solid var(--rule); }

/* El cuerpo va dentro del contenedor; la muestra sale a todo el ancho */
.decision__cuerpo {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--s3);
}
.decision__cuerpo::before {
  content: counter(dec);
  font-family: var(--display);
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  color: var(--red);
}
.decision__titulo {
  font-size: clamp(21px, 2.6vw, 28px);
  margin-bottom: var(--s2);
  max-width: 24ch;
}
.decision__texto {
  margin: 0 0 var(--s3);
  max-width: 68ch;
  font-size: 17px;
}
/* Lo que se descartó: es la mitad del valor de la decisión */
.decision__descarte {
  margin: 0;
  padding-left: var(--s3);
  border-left: 3px solid var(--red);
  font-size: 16px;
  font-style: italic;
  color: var(--muted);
  max-width: 64ch;
}

/* ============================================================
   Muestras: piezas del sitio del cliente, en su propio código
   ------------------------------------------------------------
   No son capturas: son el HTML y el CSS de extrangers.com, con su
   paleta y sus tipografías. Se ven nítidas en cualquier pantalla, el
   texto se puede seleccionar y buscar, y un lector de pantalla las lee.

   TODO lo de EXtraños vive bajo el prefijo .ex- y sus variables de
   color van declaradas en .muestra--ex, no en :root. Así su hoja no
   puede salirse de la franja ni la de Webland entrar. Si algún día se
   añade otro caso, se repite el patrón con su propio prefijo.
   ============================================================ */

.muestra {
  margin-top: var(--s5);
  padding-block: var(--s5);
  background: var(--white);
  border-block: 1px solid var(--rule);
}
.muestra__pie {
  margin: var(--s3) 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Paleta de EXtraños ----------
   Tomada del :root de extrangers.com, pero declarada aquí y no en el
   :root de Webland: fuera de estos bloques no existe. */
.muestra--ex,
.ficha-marca {
  --ex-noche: #1A1A2E;
  --ex-gold:  #C9A84C;
  --ex-goldd: #7A6028;
  --ex-dark:  #0D0D0D;
  --ex-hair:  rgba(201, 168, 76, .14);
}

/* ---------- Franja con el aspecto real de EXtraños ---------- */
.muestra--ex {
  background: var(--ex-dark);
  border-block-color: transparent;
  color: #fff;
}
.muestra--ex .muestra__pie {
  color: rgba(255, 255, 255, .45);
  border-top: 1px solid var(--ex-hair);
  padding-top: var(--s3);
}
.muestra--ex .muestra__pie strong {
  color: rgba(255, 255, 255, .72);
  font-weight: 600;
}

/* 1 · Los dos botones de la portada */
.ex-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.ex-btn {
  font-family: 'Space Mono', monospace;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 1.05rem 1.8rem;
  border-radius: 2rem;
  border: 1px solid transparent;
}
.ex-btn--primary { background: var(--ex-gold); color: var(--ex-noche); font-weight: 700; }
.ex-btn--ghost {
  background: transparent;
  color: rgba(255, 255, 255, .55);
  border-color: rgba(201, 168, 76, .4);
}

/* 2 · La ficha del retrato: tarjeta con lenguaje de cámara */
.ex-prueba {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--ex-hair);
  border-radius: 12px;
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.ex-leica {
  width: clamp(180px, 24vw, 230px);
  background: #080808;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .5);
  border: 1px solid rgba(201, 168, 76, .12);
}
.ex-leica__foto { width: 100%; aspect-ratio: 3 / 4; overflow: hidden; }
.ex-leica__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(100%) contrast(1.1) brightness(.93);
  display: block;
}
.ex-leica__meta {
  border-top: 1.5px solid rgba(201, 168, 76, .3);
  padding: .7rem .85rem .85rem;
}
.ex-lm-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .4rem;
}
.ex-lm-brand .ex-em { font-weight: 700; color: var(--ex-gold); font-size: .8rem; }
.ex-lm-brand .ex-tr { font-weight: 400; color: rgba(255, 255, 255, .7); font-size: .8rem; }
.ex-lm-num { font-family: 'Space Mono', monospace; font-size: .46rem; color: rgba(201, 168, 76, .4); }
.ex-lm-rule { height: 1px; background: rgba(201, 168, 76, .15); margin: .4rem 0; }
.ex-lm-nk {
  font-family: 'Space Mono', monospace;
  font-size: .42rem;
  color: rgba(201, 168, 76, .45);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ex-lm-nv { font-weight: 600; font-size: .9rem; color: #fff; margin: 1px 0 .4rem; }
.ex-lm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .8rem; }
.ex-lm-k {
  font-family: 'Space Mono', monospace;
  font-size: .4rem;
  color: rgba(201, 168, 76, .45);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ex-lm-v {
  font-family: 'Space Mono', monospace;
  font-size: .56rem;
  color: rgba(255, 255, 255, .85);
  margin-top: 1px;
}
.ex-prueba__texto { flex: 1; min-width: 240px; }
.ex-prueba__texto h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  color: #fff;
}
.ex-prueba__texto h4 strong { color: var(--ex-gold); font-weight: 600; }
.ex-prueba__texto p {
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .65);
  margin: 0;
}

/* 3 · El vestíbulo: cuatro puertas con filete de un píxel */
.ex-docs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ex-hair);
  border: 1px solid var(--ex-hair);
  border-radius: 12px;
  overflow: hidden;
}
.ex-doc {
  background: #100f1a;
  padding: 2.2rem 2rem 2.4rem;
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.ex-doc__n {
  font-family: 'Space Mono', monospace;
  font-size: .7rem;
  color: var(--ex-gold);
  letter-spacing: .14em;
  margin-bottom: auto;
}
.ex-doc__name {
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  color: #fff;
  margin-top: 2.4rem;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.ex-doc__tech {
  font-family: 'Space Mono', monospace;
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ex-goldd);
  margin-top: .55rem;
}
.ex-doc__desc {
  font-size: .92rem;
  color: rgba(255, 255, 255, .5);
  line-height: 1.55;
  margin-top: 1.1rem;
  max-width: 42ch;
}
.ex-doc__arrow {
  font-family: 'Space Mono', monospace;
  font-size: .68rem;
  color: rgba(201, 168, 76, .5);
  margin-top: 1.4rem;
  letter-spacing: .1em;
}

/* Entregables */
.entregado {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 76ch;
}
.entregado li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s2);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--rule);
  font-size: 17px;
}
.entregado li:first-child { border-top: 1px solid var(--rule); }
.entregado li::before { content: '—'; color: var(--red); font-weight: 700; }

/* Resultado */
.resultado {
  background: var(--ink);
  color: rgba(255, 255, 255, .85);
  padding: var(--s6) var(--s5);
}
.resultado p {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.55;
  max-width: 60ch;
}
.resultado__nota {
  font-size: 15px !important;
  color: rgba(255, 255, 255, .55);
  margin-top: var(--s3) !important;
}

/* ============================================================
   Documento legal
   ============================================================ */
.legal { max-width: 68ch; }
.legal h2 {
  font-size: clamp(21px, 2.4vw, 26px);
  margin-block: var(--s5) var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal p { margin: 0 0 var(--s3); }
.legal ul {
  list-style: none;
  margin: 0 0 var(--s3);
  padding: 0;
  display: grid;
  gap: var(--s2);
}
.legal li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s2); }
.legal li::before { content: '—'; color: var(--red); font-weight: 700; }
.legal a { color: var(--ink); text-decoration-color: var(--rule); }
.legal a:hover { color: var(--red); }

/* Lo que falta por llenar antes de publicar */
.pendiente {
  background: #FFF6F6;
  border-left: 3px solid var(--red);
  padding: 2px 8px;
  font-style: italic;
}

/* ============================================================
   Página de error
   ============================================================ */
.error {
  min-height: 68vh;
  display: flex;
  align-items: center;
  padding-block: var(--s7);
}
.error h1 {
  font-size: clamp(34px, 5.6vw, 56px);
  margin-block: var(--s2) var(--s3);
}
.error p { max-width: 52ch; margin: 0 0 var(--s5); }
.error__acciones {
  display: flex;
  gap: var(--s3);
  align-items: center;
  flex-wrap: wrap;
}

/* Cierre */
.cierre {
  text-align: center;
  padding-block: var(--s7);
  border-top: 1px solid var(--rule);
}
.cierre h2 {
  max-width: 22ch;
  margin-inline: auto;
}
.cierre p { max-width: 52ch; margin: 0 auto var(--s4); }
.cierre__acciones {
  display: flex;
  gap: var(--s3);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* ============================================================
   20. Versión móvil
   ============================================================ */
@media (max-width: 900px) {
  :root { --s6: 72px; --s7: 88px; }

  .menu__enlaces {
    position: fixed;
    inset: 76px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    padding: var(--s2) var(--gutter) var(--s4);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .menu.esta-abierto .menu__enlaces {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .menu__enlaces li { border-bottom: 1px solid var(--rule); }
  .menu__enlaces a:not(.btn) { display: block; padding-block: 15px; font-size: 17px; }
  .menu__enlaces li:last-child { border-bottom: 0; padding-top: var(--s3); }
  .menu__enlaces .btn { width: 100%; }

  /* La hamburguesa va al extremo derecho: el <nav> queda sin ancho
     porque su lista está fija, así que hay que ordenarlos a mano. */
  .menu__hamburguesa { display: inline-flex; order: 3; }
  .menu__fila nav    { order: 2; }

  .hero { min-height: auto; }
  .hero__texto,
  .hero__franja { max-width: 100%; }
  .hero__acciones .btn { flex: 1 1 auto; }

  /* Ficha de caso */
  .decision__cuerpo { grid-template-columns: 1fr; gap: var(--s2); }
  .decision__cuerpo::before { font-size: 34px; }
  /* Mismo corte que usa extrangers.com para su rejilla de documentos */
  .ex-docs { grid-template-columns: 1fr; }
  .ex-btn { flex: 1 1 auto; text-align: center; }
  .resultado { padding: var(--s5) var(--s4); }
  .cierre__acciones { flex-direction: column; align-items: stretch; }

  .caso { grid-template-columns: 1fr; gap: var(--s4); }
  .piezas { grid-template-columns: repeat(2, 1fr); }
  .etapa { grid-template-columns: 40px 1fr; }
  .etapa__texto { grid-column: 2; }
  .lineas { grid-template-columns: 1fr; }
  .contacto { grid-template-columns: 1fr; gap: var(--s5); }
  .declaracion,
  .diagnostico { padding: var(--s5) var(--s4); }

  .pie__fila { grid-template-columns: 1fr; gap: var(--s4); }
  .pie__datos { text-align: left; }
}

@media (max-width: 560px) {
  .piezas { grid-template-columns: 1fr; }
  .hero__acciones { flex-direction: column; align-items: stretch; }
  .hero__acciones .btn { width: 100%; }
}

/* ============================================================
   20. Preferencia de movimiento reducido — no es opcional
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- 21. Impresión ---------- */
@media print {
  .menu, .hero__red, .formulario { display: none; }
  body { color: #000; font-size: 12pt; }
  .seccion { padding-block: 24pt; }
}