/* ============================================================
   Sistema de diseño — basado en la referencia "Flim"
   (lienzo de papel cuadriculado, tinta casi negra, cero sombras)

   Reglas del sistema que se respetan en TODO el archivo:
     · Sin box-shadow en ningun sitio. La elevacion se consigue con
       borde de 1px y contraste de superficies.
     · Nunca #000000: el negro del sistema es #141414.
     · Tres radios: 8px botones, 16px tarjetas/imagenes, 160px pastillas.
     · El amarillo de resalte va DETRAS de palabras, no como superficie.
     · Etiquetas y navegacion: monoespaciadas, mayusculas, 0.06em.
   ============================================================ */

:root {
  /* ---------- Colores ---------- */
  --color-ink: #141414;
  --color-paper: #ffffff;
  --color-canvas: #f5f5f5;
  --color-mist: #e9e9e9;
  --color-hairline: #d9d9d9;
  --color-signal-green: #30a81d;
  --color-forest: #21935b;
  --color-highlight-yellow: #fecc33;
  --color-ember: #ff8400;
  /* Un escalon mas claro para los estados :hover sobre tinta. */
  --color-ink-hover: #2b2b2b;

  /* ---------- Tipografia ---------- */
  /* Las fuentes originales (Swizzy, PP Neue Montreal Mono) son de pago y no
     se cargan desde fuera para no romper la promesa de la politica de
     privacidad ("sin seguimiento de terceros") ni anadir dependencias.
     Se usan las sustitutas que recomienda la propia referencia. */
  --font-display: 'Druk Wide', 'Migra', 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'PP Neue Montreal Mono', 'JetBrains Mono', 'IBM Plex Mono', 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-body: Arial, 'Helvetica Neue', Helvetica, system-ui, sans-serif;

  --text-caption: 12px;
  --text-body-sm: 15px;
  --text-body: 16px;
  --text-subheading: 21px;
  --text-heading-sm: 27px;
  --text-heading: 32px;
  --text-heading-lg: 47px;
  --text-display: 125px;

  --tracking-mono: 0.06em;
  --tracking-display: -0.02em;

  /* ---------- Espaciado (base 4px) ---------- */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-52: 52px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-100: 100px;

  --section-gap: 80px;
  --card-padding: 20px;
  --element-gap: 24px;

  /* ---------- Radios ---------- */
  --radius-links: 4px;
  --radius-buttons: 8px;
  --radius-cards: 16px;
  --radius-images: 16px;
  --radius-headings: 25px;
  --radius-pills: 160px;

  /* ---------- Accion de WhatsApp ----------
     La referencia dice que el UNICO boton relleno debe ser tinta #141414.
     Se respeta, y la senal de WhatsApp se da con el punto verde de estado.
     Para volver al verde de WhatsApp (mas reconocible al instante en
     Colombia, pero menos fiel al sistema) basta con descomentar estas dos: */
  --whatsapp-bg: var(--color-ink);
  --whatsapp-text: var(--color-paper);
  /* --whatsapp-bg: #25d366;
     --whatsapp-text: #ffffff; */

  --ancho: 1140px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-ink);
  /* El lienzo con reticula: es la superficie de la marca, no un adorno. */
  background-color: var(--color-canvas);
  background-image:
    repeating-linear-gradient(to right, var(--color-hairline) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(to bottom, var(--color-hairline) 0 1px, transparent 1px 36px);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-ink);
  text-decoration: none;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--spacing-20);
}

/* ============================================================
   Tipografia
   ============================================================ */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  /* Peso 500, no 800: la firma del sistema es un display confiado a peso
     medio y gran escala, no una losa pesada. */
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--spacing-16);
}

h1 {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  /* 1.06 y no 0.94: el interlineado apretado del wordmark de la referencia
     es para UNA linea. Aqui el titular ocupa dos y, al ir resaltado, las
     cajas de cada linea se solapaban y tapaban las letras. */
  line-height: 1.06;
}

h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1;
}

h3 {
  font-size: var(--text-subheading);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 var(--spacing-16);
}

.subtitulo {
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-ink);
  opacity: 0.72;
  margin: 0;
}

/* Etiqueta de seccion: la voz micro del sistema. El tracking ancho ES la
   identidad; sin el, deja de parecer una anotacion tecnica. */
.etiqueta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--spacing-16);
}

/* Resalte tipo rotulador DETRAS de unas palabras concretas.
   No es una superficie: es una marca de rotulador.

   Se pinta una BANDA, no la caja entera. Con el fondo completo, la caja de
   la segunda linea se pinta despues del texto de la primera y le tapaba el
   descendente de "Hola, soy Carlos". La banda vive dentro de la caja de su
   propia linea, asi que no puede invadir la de al lado, y ademas queda con
   el aspecto real de un rotulador: cubre la mitad inferior de las letras y
   deja libres los ascendentes. */
.resaltado {
  display: inline;
  background-image: linear-gradient(var(--color-highlight-yellow), var(--color-highlight-yellow));
  background-repeat: no-repeat;
  background-size: 100% 0.62em;
  background-position: 0 0.46em;
  border-radius: var(--radius-headings);
  padding: 0 0.22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* El emoji del saludo no debe saltar solo a la linea siguiente. */
.saludo-linea {
  white-space: nowrap;
}

/* ============================================================
   Secciones
   ============================================================ */

.seccion {
  padding: var(--section-gap) 0;
}

.seccion-compacta {
  padding: var(--spacing-52) 0;
}

.seccion-alt {
  background: var(--color-mist);
}

.seccion-oscura {
  background: var(--color-ink);
  color: var(--color-paper);
}

.seccion-oscura h1,
.seccion-oscura h2,
.seccion-oscura h3 {
  color: var(--color-paper);
}

.seccion-oscura .subtitulo {
  color: rgba(255, 255, 255, 0.72);
  opacity: 1;
}

.seccion-oscura .etiqueta {
  color: rgba(255, 255, 255, 0.8);
}

.encabezado-seccion {
  max-width: 680px;
  margin-bottom: var(--spacing-40);
}

.encabezado-seccion p {
  margin-bottom: 0;
}

.centrado {
  text-align: center;
}

.centrado .encabezado-seccion {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   Cabecera y navegacion
   ============================================================ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 245, 245, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-hairline);
}

.cabecera-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  min-height: 68px;
  position: relative;
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: var(--tracking-display);
}

.marca-punto {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-links);
  background: var(--color-highlight-yellow);
}

/* Navegacion fantasma: solo tipografia monoespaciada espaciada, sin fondo. */
.nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}

.nav a:not(.boton) {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-ink);
  padding: 6px 10px;
  border-radius: var(--radius-links);
}

.nav a:not(.boton):hover,
.nav a[aria-current="page"]:not(.boton) {
  background: var(--color-mist);
}

.menu-boton {
  display: none;
  border: 1px solid var(--color-hairline);
  background: var(--color-paper);
  border-radius: var(--radius-buttons);
  padding: 8px 12px;
  font-size: 1.1rem;
  color: var(--color-ink);
  cursor: pointer;
}

/* ============================================================
   Botones — 8px de radio, sin sombra
   ============================================================ */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding: 12px 20px;
  border-radius: var(--radius-buttons);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* El unico boton relleno del sistema. */
.boton-primario,
.boton-oscuro {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}

.boton-primario:hover,
.boton-oscuro:hover {
  background: var(--color-ink-hover);
  border-color: var(--color-ink-hover);
}

/* Todos los demas CTA son fantasma. */
.boton-borde {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-hairline);
}

.boton-borde:hover {
  border-color: var(--color-ink);
}

/* WhatsApp: mismo boton de tinta, con el punto verde de estado.
   El verde es la unica senal de color, como manda la referencia. */
.boton-whatsapp {
  background: var(--whatsapp-bg);
  color: var(--whatsapp-text);
  border-color: var(--whatsapp-bg);
}

.boton-whatsapp:hover {
  background: var(--color-ink-hover);
  border-color: var(--color-ink-hover);
}

/* Se conserva el glifo de WhatsApp: en blanco sobre tinta sigue siendo
   reconocible al instante, y el punto verde aporta la senal de color que
   pide el sistema sin recurrir a un boton verde entero. */
.boton-whatsapp::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-signal-green);
  flex: 0 0 auto;
}

/* Sobre fondo tinta el boton se invierte para seguir siendo el unico
   elemento relleno de la seccion. */
.seccion-oscura .boton-whatsapp {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
}

.seccion-oscura .boton-whatsapp:hover {
  background: var(--color-mist);
  border-color: var(--color-mist);
}

.boton-grande {
  padding: 15px 26px;
  font-size: 13px;
}

/* ============================================================
   Tarjetas — superficie blanca, borde de 1px, SIN sombra
   ============================================================ */

.rejilla {
  display: grid;
  gap: var(--element-gap);
}

.rejilla-2 {
  grid-template-columns: repeat(2, 1fr);
}

.rejilla-3 {
  grid-template-columns: repeat(3, 1fr);
}

.rejilla-4 {
  grid-template-columns: repeat(4, 1fr);
}

.tarjeta,
.paso,
.testimonio,
.accion-rapida {
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color 0.15s ease;
}

.tarjeta:hover,
.accion-rapida:hover,
.paso:hover {
  border-color: var(--color-ink);
}

/* Foto del modelo dentro de la tarjeta. Es opcional: si no hay, la tarjeta
   funciona igual solo con texto (y sigue viendose completa, no a medias).

   Proporcion 16:9 y no 3:2. Comprobado con las fotos reales: las de prensa y
   las tomadas en el concesionario vienen en 1.77 - 1.90 de ancho. En una caja
   3:2 (1.50) se recortaba el 15-21% del ANCHO, y en un perfil lateral a todo lo
   ancho eso significa cortarle los parachoques al carro. En 16:9 casi no hay
   recorte horizontal, y las fotos mas altas (1.50, 1.41) solo pierden cielo y
   suelo, que no importa. */
.tarjeta-foto {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-images);
  border: 1px solid var(--color-hairline);
  background: var(--color-mist);
  margin-bottom: var(--spacing-16);
}

.tarjeta h3 {
  margin-bottom: var(--spacing-8);
}

.tarjeta p {
  color: var(--color-ink);
  opacity: 0.72;
  font-size: var(--text-body-sm);
  margin: 0 0 var(--spacing-16);
}

.tarjeta-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-12);
}

.tarjeta-cabecera h3 {
  margin: 0;
}

.tipo {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0.6;
  margin-bottom: var(--spacing-4);
}

/* Pastilla: radio 160px, borde de color, relleno suave. */
.pastilla {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-forest);
  border: 1px solid var(--color-signal-green);
  border-radius: var(--radius-pills);
  padding: 3px 10px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.lista-check {
  list-style: none;
  padding: 0;
  /* Sin `margin: auto`. Con el auto, en una fila donde una tarjeta lleva foto
     y las otras no, las de solo texto se estiraban a la misma altura y el
     `auto` metia todo ese hueco EN MEDIO del contenido, dejando el boton
     flotando abajo. */
  margin: 0 0 var(--spacing-16);
  display: grid;
  gap: 6px;
}

/* El boton se ancla al fondo de la tarjeta. Asi, cuando todas las tarjetas de
   una fila tienen la misma altura (el caso normal: todas con foto), los
   botones quedan alineados entre si. */
.tarjeta > .boton {
  margin-top: auto;
}

.lista-check li {
  font-size: var(--text-body-sm);
  color: var(--color-ink);
  opacity: 0.75;
  padding-left: 20px;
  position: relative;
}

.lista-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--color-forest);
  border-bottom: 1.5px solid var(--color-forest);
  transform: rotate(-45deg);
}

.tarjeta .boton {
  align-self: flex-start;
}

/* ============================================================
   Portada
   ============================================================ */

.portada {
  padding: var(--spacing-80) 0 var(--spacing-64);
}

.portada-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--spacing-64);
  align-items: center;
}

/* Seccion "Quien te atiende": foto a la izquierda, texto a la derecha.
   Columnas iguales y foto en 4:3 en vez de 16:9. En 16:9 la foto quedaba
   pequena y la franja del nombre le tapaba media imagen; ademas el recorte
   lateral del 4:3 quita a las personas que asoman por los bordes. */
.asesor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-52);
  align-items: center;
}

.asesor-foto {
  margin: 0;
}

.asesor-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-images);
  border: 1px solid var(--color-hairline);
  background: var(--color-mist);
}

.asesor-texto h2 {
  margin-bottom: var(--spacing-16);
}

.asesor-texto .pruebas-confianza {
  margin-top: var(--spacing-24);
}

.asesor-texto .acciones {
  margin-top: var(--spacing-24);
}

.portada-texto h1 {
  margin-bottom: var(--spacing-24);
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  margin-top: var(--spacing-28);
}

.nota-accion {
  margin: var(--spacing-16) 0 0;
  font-size: var(--text-body-sm);
  color: var(--color-ink);
  opacity: 0.6;
}

/* Pruebas de confianza: filas con marca de verificacion. */
.pruebas-confianza {
  list-style: none;
  padding: 0;
  margin: var(--spacing-32) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-12) var(--spacing-24);
}

.pruebas-confianza li {
  position: relative;
  padding-left: 22px;
  font-size: var(--text-body-sm);
  color: var(--color-ink);
  opacity: 0.8;
}

.pruebas-confianza li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 12px;
  height: 6px;
  border-left: 1.5px solid var(--color-forest);
  border-bottom: 1.5px solid var(--color-forest);
  transform: rotate(-45deg);
}

.pruebas-confianza b {
  color: var(--color-ink);
  font-weight: 700;
}

/* La foto: tarjeta redondeada con borde de pelo, sin sombra. */
.portada-foto {
  margin: 0;
  position: relative;
}

.portada-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-images);
  border: 1px solid var(--color-hairline);
  background: var(--color-mist);
}

.foto-pie {
  position: absolute;
  left: var(--spacing-16);
  right: var(--spacing-16);
  bottom: var(--spacing-16);
  background: rgba(20, 20, 20, 0.92);
  color: var(--color-paper);
  border-radius: var(--radius-buttons);
  padding: var(--spacing-12) var(--spacing-16);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.foto-pie b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-body);
  letter-spacing: -0.01em;
}

.foto-pie span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   Acciones rapidas
   ============================================================ */

.accion-rapida {
  gap: var(--spacing-4);
}

.accion-rapida .icono {
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: var(--spacing-8);
}

.accion-rapida h3 {
  font-size: var(--text-body);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0;
}

.accion-rapida p {
  font-size: var(--text-body-sm);
  color: var(--color-ink);
  opacity: 0.7;
  margin: 0;
  flex: 1;
}

.accion-rapida .ir {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-forest);
  margin-top: var(--spacing-12);
}

.accion-rapida .ir::after {
  content: " →";
}

/* ============================================================
   Pasos
   ============================================================ */

.paso-numero {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-buttons);
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  margin-bottom: var(--spacing-16);
}

.paso h3 {
  font-size: var(--text-body);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0;
}

.paso p {
  color: var(--color-ink);
  opacity: 0.72;
  font-size: var(--text-body-sm);
}

/* ============================================================
   Preguntas frecuentes
   ============================================================ */

.faq {
  display: grid;
  gap: var(--spacing-8);
  max-width: 860px;
}

.faq details {
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-cards);
}

.faq details[open] {
  border-color: var(--color-ink);
}

.faq summary {
  cursor: pointer;
  padding: var(--spacing-20);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-body);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-16);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.1rem;
  opacity: 0.5;
  flex: 0 0 auto;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "−";
  opacity: 1;
}

.faq details p {
  margin: 0;
  padding: 0 var(--spacing-20) var(--spacing-20);
  color: var(--color-ink);
  opacity: 0.75;
  font-size: var(--text-body-sm);
}

/* ============================================================
   Testimonios
   ============================================================ */

.testimonio blockquote {
  margin: 0 0 var(--spacing-16);
  font-size: var(--text-body-sm);
  color: var(--color-ink);
  flex: 1;
}

.testimonio cite {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0.7;
}

.testimonio cite b {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  margin-bottom: 2px;
}

/* ============================================================
   Noticias
   ============================================================ */

.noticia {
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
  margin-bottom: var(--spacing-12);
}

.noticia-fecha {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0.6;
}

.noticia h3 {
  font-size: var(--text-subheading);
  margin: var(--spacing-8) 0 var(--spacing-12);
}

.noticia p {
  color: var(--color-ink);
  opacity: 0.75;
  font-size: var(--text-body-sm);
  margin: 0 0 var(--spacing-12);
}

.noticia-fuente {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0;
}

.noticia-fuente a {
  color: var(--color-forest);
}

.vacio {
  background: var(--color-paper);
  border: 1px dashed var(--color-hairline);
  border-radius: var(--radius-cards);
  padding: var(--spacing-40);
  text-align: center;
  color: var(--color-ink);
  opacity: 0.7;
}

/* ============================================================
   Barra de contacto
   ============================================================ */

.barra-contacto {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-12);
  margin-top: var(--spacing-40);
  text-align: left;
}

.barra-contacto > a,
.barra-contacto > div {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-cards);
  padding: var(--spacing-16);
  transition: border-color 0.15s ease;
}

.barra-contacto > a:hover {
  border-color: var(--color-highlight-yellow);
}

.barra-contacto b {
  display: block;
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  line-height: 1.4;
}

.barra-contacto small {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--text-body-sm);
  line-height: 1.35;
  word-break: break-word;
}

.barra-icono {
  font-size: 1.2rem;
  line-height: 1;
  flex: 0 0 auto;
}

/* ============================================================
   Formularios
   ============================================================ */

.campo {
  display: grid;
  gap: 6px;
  margin-bottom: var(--spacing-16);
}

.campo label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-ink);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-buttons);
  font: inherit;
  font-size: var(--text-body-sm);
  background: var(--color-paper);
  color: var(--color-ink);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--color-ink);
}

.campo small {
  color: var(--color-ink);
  opacity: 0.6;
  font-size: 13px;
}

.consentimiento {
  display: flex;
  gap: var(--spacing-12);
  align-items: flex-start;
  font-size: 13px;
  color: var(--color-ink);
  opacity: 0.8;
  margin: var(--spacing-4) 0 var(--spacing-20);
}

.consentimiento input {
  width: auto;
  margin-top: 3px;
  flex: 0 0 auto;
}

.consentimiento a {
  text-decoration: underline;
}

.mensaje-estado {
  padding: 12px 16px;
  border-radius: var(--radius-buttons);
  font-size: var(--text-body-sm);
  margin-top: var(--spacing-16);
  display: none;
}

.mensaje-estado.visible {
  display: block;
}

.mensaje-estado.ok {
  background: var(--color-mist);
  border-left: 3px solid var(--color-signal-green);
  color: var(--color-ink);
}

.mensaje-estado.error {
  background: var(--color-mist);
  border-left: 3px solid var(--color-ember);
  color: var(--color-ink);
}

/* ============================================================
   Texto legal — sobre papel, para que la reticula no estorbe la lectura
   ============================================================ */

.legal {
  max-width: 820px;
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-cards);
  padding: var(--spacing-40);
}

.legal h1 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1;
  margin-bottom: var(--spacing-16);
}

.legal h2 {
  margin-top: var(--spacing-40);
  font-size: var(--text-heading-sm);
  padding-bottom: var(--spacing-8);
  border-bottom: 1px solid var(--color-hairline);
}

.legal h3 {
  margin-top: var(--spacing-24);
  font-size: var(--text-subheading);
}

.legal p,
.legal li {
  color: var(--color-ink);
  opacity: 0.8;
  font-size: var(--text-body-sm);
}

.legal ul,
.legal ol {
  padding-left: var(--spacing-24);
}

.legal li {
  margin-bottom: var(--spacing-8);
}

.legal a {
  color: var(--color-forest);
  text-decoration: underline;
}

.aviso {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-left: 3px solid var(--color-highlight-yellow);
  border-radius: var(--radius-buttons);
  padding: var(--spacing-16);
  margin: var(--spacing-24) 0;
}

.aviso p {
  margin: 0;
  color: var(--color-ink);
  opacity: 0.9;
  font-size: var(--text-body-sm);
}

.aviso-oscuro {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

.aviso-oscuro p {
  color: rgba(255, 255, 255, 0.85);
}

table.tabla {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-16) 0;
  font-size: var(--text-body-sm);
}

table.tabla th,
table.tabla td {
  text-align: left;
  padding: var(--spacing-12);
  border-bottom: 1px solid var(--color-hairline);
  vertical-align: top;
}

table.tabla th {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-ink);
  background: var(--color-canvas);
  font-weight: 400;
}

/* ============================================================
   Pie
   ============================================================ */

.pie {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.72);
  padding: var(--spacing-64) 0 var(--spacing-28);
  font-size: var(--text-body-sm);
}

.pie a {
  color: rgba(255, 255, 255, 0.86);
}

.pie a:hover {
  color: var(--color-highlight-yellow);
}

.pie-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--spacing-32);
  margin-bottom: var(--spacing-32);
}

.pie h4 {
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  margin: 0 0 var(--spacing-16);
}

.pie ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--spacing-8);
}

.pie-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--spacing-20);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

.pie-legal p {
  margin: 0 0 var(--spacing-8);
}

/* ============================================================
   WhatsApp flotante
   ============================================================ */

.whatsapp-flotante {
  position: fixed;
  right: var(--spacing-20);
  bottom: var(--spacing-20);
  z-index: 60;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-ink);
  display: grid;
  place-items: center;
  border: 1px solid var(--color-ink);
}

.whatsapp-flotante svg {
  width: 26px;
  height: 26px;
  fill: var(--color-paper);
}

.whatsapp-flotante::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-signal-green);
  border: 2px solid var(--color-ink);
}

/* ============================================================
   Utilidades
   ============================================================ */

.mt-0 { margin-top: 0; }
.mt-32 { margin-top: var(--spacing-32); }
.mb-0 { margin-bottom: 0; }
.oculto { display: none !important; }

/* Texto secundario: se baja la opacidad en vez de usar un gris aparte,
   porque el sistema es 99% monocromo sobre el mismo #141414. */
.texto-suave {
  color: var(--color-ink);
  opacity: 0.65;
}

/* Lista de dato + valor (contacto). */
.datos-rapidos {
  list-style: none;
  padding: 0;
  margin: var(--spacing-16) 0 0;
  display: grid;
  gap: var(--spacing-12);
}

.datos-rapidos li {
  display: flex;
  gap: var(--spacing-12);
  font-size: var(--text-body-sm);
  color: var(--color-ink);
  opacity: 0.8;
  align-items: flex-start;
}

.datos-rapidos b {
  color: var(--color-ink);
  font-weight: 700;
  opacity: 1;
}

.datos-rapidos a {
  color: var(--color-forest);
  text-decoration: underline;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
  .portada-grid,
  .asesor-grid,
  .rejilla-2,
  .rejilla-3,
  .rejilla-4,
  .pie-grid {
    grid-template-columns: 1fr;
  }

  .menu-boton {
    display: block;
  }

  .nav {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--color-canvas);
    border-bottom: 1px solid var(--color-hairline);
    border-top: 1px solid var(--color-hairline);
    flex-direction: column;
    align-items: stretch;
    padding: var(--spacing-12) var(--spacing-16) var(--spacing-16);
    gap: var(--spacing-4);
  }

  .nav.abierto {
    display: flex;
  }

  .nav a:not(.boton) {
    padding: 10px 0;
  }

  .portada-foto {
    order: -1;
    max-width: 420px;
    margin: 0 auto var(--spacing-32);
  }

  .pruebas-confianza {
    grid-template-columns: 1fr;
  }

  .nota-accion {
    display: none;
  }

  .barra-contacto {
    grid-template-columns: 1fr 1fr;
  }

  .legal {
    padding: var(--spacing-24);
  }

  .seccion {
    padding: var(--spacing-52) 0;
  }
}

@media (max-width: 560px) {
  .acciones .boton {
    width: 100%;
  }

  .foto-pie {
    left: var(--spacing-12);
    right: var(--spacing-12);
    bottom: var(--spacing-12);
  }

  .barra-contacto {
    grid-template-columns: 1fr;
  }

  .legal {
    padding: var(--spacing-20);
    border-radius: var(--radius-buttons);
  }

  .faq summary {
    padding: var(--spacing-16);
  }

  .faq details p {
    padding: 0 var(--spacing-16) var(--spacing-16);
  }
}

@media print {
  body {
    background-image: none;
    background: var(--color-paper);
  }

  .cabecera,
  .whatsapp-flotante,
  .pie {
    display: none;
  }
}