/* ==========================================================================
   Anthony Stevenson · Landing de gestión de Google Ads
   Identidad «Noche»: azul marino, crema y dorado arena
   Móvil primero · Breakpoints de Divi: 768 px (tableta) y 981 px (escritorio)
   ========================================================================== */

/* ---------- 1. Variables: colores, tipografías y medidas ---------- */
:root {
  /* Colores de marca (guía de uso del logo) */
  --azul-marino: #0B1F3A;
  --azul-tinta: #1C2B3A;
  --dorado: #D4B483;
  --crema: #F5F3EE;

  /* Derivados para la interfaz */
  --azul-profundo: #081A31;      /* secciones alternas */
  --azul-pie: #061427;           /* pie de página */
  --dorado-hover: #E2CAA2;
  --texto: var(--crema);
  --texto-apoyo: #DCDFE3;        /* frases de apoyo (≈ 13:1 sobre azul marino) */
  --texto-suave: #C2C8D0;        /* textos secundarios (≈ 9:1 sobre azul marino) */
  --linea: rgba(245, 243, 238, .14);
  --linea-dorada: rgba(212, 180, 131, .38);
  --error: #FFB4A6;
  --whatsapp: #25D366;

  /* Informe de muestra (fondo claro) */
  --papel: var(--crema);
  --papel-tarjeta: #FFFFFF;
  --papel-texto: var(--azul-tinta);
  --papel-suave: #4A5868;

  /* Tipografías */
  --fuente-titulos: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --fuente-texto: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --texto-largo: 1.125rem;       /* párrafos largos (18 px) */

  /* Medidas */
  --ancho-max: 1200px;
  --margen: 20px;
  --seccion: 72px;
  --radio: 16px;
  --radio-boton: 12px;
}

@media (min-width: 768px) {
  :root { --margen: 32px; --seccion: 96px; }
}
@media (min-width: 981px) {
  :root { --margen: 40px; --seccion: 120px; }
}

/* ---------- 2. Fuentes (descargadas en sitio/fonts) ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--azul-marino);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 981px) {
  body { font-size: 1.0625rem; }
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
strong { font-weight: 600; color: var(--crema); }

:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 3px;
  border-radius: 4px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icono {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 4. Estructura y tipografía ---------- */
.contenedor {
  width: 100%;
  max-width: calc(var(--ancho-max) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion { padding-block: var(--seccion); }
.seccion--alterna { background: var(--azul-profundo); }

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.3vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -.025em;
}
h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}
p { text-wrap: pretty; }

/* Título de sección con filete dorado */
.titulo-seccion { max-width: 22ch; }
.titulo-seccion::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 20px;
  border-radius: 2px;
  background: var(--dorado);
}

.entrada {
  margin-top: 16px;
  max-width: 62ch;
  font-size: var(--texto-largo);
  color: var(--texto-apoyo);
}
@media (min-width: 981px) {
  .entrada { font-size: 1.1875rem; }
}

.etiqueta {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dorado);
}

/* Tarjetas sobre el azul marino */
.tarjeta {
  background: var(--azul-tinta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 28px 24px;
}
@media (min-width: 981px) {
  .tarjeta { padding: 36px 32px; }
}

.icono-caja {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 12px;
  background: rgba(212, 180, 131, .12);
  color: var(--dorado);
}

.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-block: 7px;
}
.lista-check .icono {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--dorado);
  stroke-width: 2.25;
}

/* ---------- 5. Botones y enlaces ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--radio-boton);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.boton .icono { width: 20px; height: 20px; stroke-width: 2.25; transition: transform .2s; }
.boton:hover .icono { transform: translateX(3px); }

.boton--principal {
  background: var(--dorado);
  color: var(--azul-marino);
  box-shadow: 0 12px 32px -12px rgba(212, 180, 131, .6);
}
.boton--principal:hover { background: var(--dorado-hover); }

.boton--secundario {
  background: transparent;
  color: var(--crema);
  border: 1.5px solid rgba(245, 243, 238, .4);
}
.boton--secundario:hover { border-color: var(--crema); background: rgba(245, 243, 238, .06); }
.boton--secundario .icono--wa { width: 22px; height: 22px; color: var(--whatsapp); }
.boton--secundario:hover .icono--wa { transform: none; }

.boton--ancho { width: 100%; }

/* Móvil: botón más compacto para que el texto quepa en una línea */
@media (max-width: 767px) {
  .boton { padding-inline: 20px; font-size: 1rem; }
}
@media (max-width: 380px) {
  .cta-bloque .boton .icono,
  .formulario .boton .icono { display: none; }
}

.enlace {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--crema);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--dorado);
  text-underline-offset: 3px;
  cursor: pointer;
}
.enlace:hover { color: var(--dorado); }

/* Etiquetas sobre las fotos */
.etiqueta-foto {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(245, 243, 238, .18);
  border-radius: 999px;
  background: rgba(11, 31, 58, .75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--crema);
}
.etiqueta-foto::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dorado);
}

/* ---------- 6. Encabezado ---------- */
.encabezado {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  padding-top: 12px;
}
.encabezado__logo { width: 120px; }

@media (min-width: 981px) {
  .encabezado { padding-top: 28px; }
  .encabezado__logo { width: 156px; }
}

/* ---------- 7. Primera pantalla (#inicio) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--azul-marino);
}

/* Rejilla dorada muy sutil */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(212, 180, 131, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 180, 131, .07) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(180deg, transparent 35%, #000 75%);
  mask-image: linear-gradient(180deg, transparent 35%, #000 75%);
}

/* Móvil: foto arriba que se funde con el azul; el texto la monta por debajo.
   El alto se adapta a la pantalla para que titular y botón se vean sin hacer scroll. */
.hero__foto {
  position: relative;
  height: clamp(230px, calc(100vh - 440px), 470px);
  height: clamp(230px, calc(100svh - 440px), 470px);
}
.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%; /* conserva el pelo completo en pantallas bajas (360×640) */
}
.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--azul-marino) 0%, rgba(11, 31, 58, .82) 20%, rgba(11, 31, 58, 0) 58%),
    linear-gradient(180deg, rgba(11, 31, 58, .55) 0%, rgba(11, 31, 58, 0) 30%),
    rgba(11, 31, 58, .12);
}
.hero__etiqueta { right: var(--margen); bottom: 84px; }

.hero__contenido {
  position: relative;
  z-index: 2;
  margin-top: -64px;
  padding-bottom: 44px;
}

.hero__ante {
  margin-bottom: 12px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--dorado);
}

.hero h1 {
  font-size: clamp(1.9rem, 1.2rem + 3.3vw, 4.125rem);
  line-height: 1.04;
  letter-spacing: -.03em;
}
.resaltado { color: var(--dorado); }

.hero__apoyo {
  margin-top: 14px;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--texto-apoyo);
}

.hero__confianza {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
}
.hero__confianza .icono { width: 22px; height: 22px; color: var(--dorado); }

.hero__accion { margin-top: 22px; }
.hero__accion .boton { width: 100%; }

.hero__nota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 1rem;
  color: var(--texto-suave);
}
.hero__nota .icono { width: 18px; height: 18px; color: var(--dorado); }

/* Pantallas bajas (ej. 360×640): la etiqueta taparía la cara, y la foto sube para que el texto no tape la barbilla */
@media (max-width: 980px) and (max-height: 700px) {
  .hero__etiqueta { display: none; }
  .hero__foto img { object-position: 50% 20%; }
}
/* Tableta: la banda es muy ancha y baja; se encuadra de la frente al pecho para que el texto quede debajo de la cara */
@media (min-width: 768px) and (max-width: 980px) {
  .hero__foto img { object-position: 50% 28%; }
}
/* Pantallas angostas (ej. 360 px): la nota cabe en una línea sin el icono */
@media (max-width: 380px) {
  .hero__nota .icono { display: none; }
}

@media (min-width: 768px) {
  .hero__contenido { margin-top: -80px; padding-bottom: 64px; }
  .hero__texto { max-width: 640px; }
  .hero__accion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .hero__accion .boton { width: auto; }
  .hero__nota { margin-top: 0; }
  .hero__apoyo { font-size: 1.1875rem; }
}

@media (min-width: 981px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: clamp(660px, 100vh, 880px);
  }
  .hero::before {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .6) 40%, transparent 62%);
    mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .6) 40%, transparent 62%);
  }
  .hero__foto {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56%;
    height: auto;
  }
  .hero__foto img { object-position: 50% 10%; }
  .hero__foto::after {
    background:
      linear-gradient(90deg, var(--azul-marino) 0%, rgba(11, 31, 58, .6) 24%, rgba(11, 31, 58, 0) 52%),
      linear-gradient(0deg, var(--azul-marino) 0%, rgba(11, 31, 58, 0) 26%),
      rgba(11, 31, 58, .1);
  }
  .hero__etiqueta { right: auto; left: 22%; bottom: 44px; }
  .hero__contenido { margin-top: 0; padding-block: 148px 96px; }
  .hero__texto { max-width: 500px; }
  .hero__ante { margin-bottom: 18px; font-size: 1.0625rem; }
  .hero__apoyo { margin-top: 22px; max-width: 30em; }
  .hero__confianza { margin-top: 22px; }
  .hero__accion { margin-top: 34px; }
}

@media (min-width: 981px) and (max-width: 1199px) {
  .hero__foto { width: 52%; }
}
@media (min-width: 1200px) {
  .hero__texto { max-width: 620px; }
}

/* ---------- 8. Para quién (#para-quien) ---------- */
.perfiles {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}
.perfil .icono-caja { margin-bottom: 20px; }
.perfil h3 { margin-bottom: 10px; }
.perfil p { font-size: var(--texto-largo); color: var(--texto-suave); }

.sectores {
  display: grid;
  gap: 24px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--linea-dorada);
}
.sectores__texto h3 { font-size: 1.375rem; max-width: 24ch; }
.sectores__texto p { margin-top: 10px; color: var(--texto-suave); }

.sectores__lista { display: grid; gap: 10px; }
.sectores__lista li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 14px 18px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: rgba(28, 43, 58, .55);
  font-weight: 500;
  line-height: 1.35;
}
.sectores__lista .icono { color: var(--dorado); }

@media (min-width: 768px) {
  .perfiles { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
  .sectores__lista { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (min-width: 981px) {
  .sectores {
    grid-template-columns: 5fr 7fr;
    align-items: center;
    gap: 56px;
    margin-top: 64px;
    padding-top: 56px;
  }
  .sectores__texto h3 { font-size: 1.625rem; }
}

/* ---------- 9. Diferencia (#diferencia) ---------- */
.dividida { display: grid; gap: 32px; }

.diferenciales li {
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 16px;
  row-gap: 6px;
  padding-block: 24px;
  border-top: 1px solid var(--linea);
}
.diferenciales li:last-child { border-bottom: 1px solid var(--linea); }
.diferenciales__num {
  grid-row: span 2;
  font-family: var(--fuente-titulos);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--dorado);
}
.diferenciales h3 { font-size: 1.1875rem; }
.diferenciales p { grid-column: 2; font-size: var(--texto-largo); color: var(--texto-suave); }

@media (min-width: 981px) {
  .dividida { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
  .dividida__cabecera { position: sticky; top: 56px; }
  .diferenciales li { grid-template-columns: 88px 1fr; padding-block: 32px; }
  .diferenciales__num { font-size: 2.75rem; }
  .diferenciales h3 { font-size: 1.375rem; }
}

/* ---------- 10. Nosotros (#nosotros) ---------- */
.nosotros { display: grid; gap: 40px; }

.nosotros__foto {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: var(--radio);
  background: var(--azul-tinta);
}
/* Foto cuadrada: en móvil (5:4) se recorta abajo, para no cortar la cabeza;
   en escritorio (4:5) se recorta a los lados, dejando fuera la taza del borde derecho */
.nosotros__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 0%; }
.nosotros__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11, 31, 58, .7) 0%, rgba(11, 31, 58, 0) 45%), rgba(11, 31, 58, .12);
}
.nosotros__foto .etiqueta-foto { left: 16px; bottom: 16px; }

.nosotros__destacado {
  margin-top: 20px;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--crema);
}
.nosotros__destacado + p { margin-top: 12px; font-size: var(--texto-largo); color: var(--texto-suave); }
.nosotros__firma { width: 150px; margin-top: 16px; }

.datos { margin-top: 28px; }
.datos > div {
  padding-block: 16px;
  border-top: 1px solid var(--linea);
}
.datos dt {
  font-family: var(--fuente-titulos);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--dorado);
}
.datos dd { margin-top: 2px; font-size: var(--texto-largo); color: var(--texto-suave); }

@media (min-width: 981px) {
  .nosotros { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .nosotros__foto { aspect-ratio: 4 / 5; }
  .nosotros__destacado { font-size: 1.3125rem; }
  .nosotros__firma { width: 170px; }
}

/* ---------- 11. Proceso (#proceso) ---------- */
.pasos { margin-top: 40px; }

.paso {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 18px;
  row-gap: 6px;
  padding-bottom: 32px;
}
/* Línea que une los pasos */
.paso::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 56px;
  bottom: 8px;
  width: 2px;
  border-radius: 1px;
  background: var(--linea-dorada);
}
.paso:last-child { padding-bottom: 0; }
.paso:last-child::before { display: none; }

.paso__num {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--dorado);
  border-radius: 50%;
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dorado);
}
.paso:first-child .paso__num { background: var(--dorado); color: var(--azul-marino); }
.paso h3 { padding-top: 10px; }
.paso p { grid-column: 2; font-size: var(--texto-largo); color: var(--texto-suave); }

.incluye { margin-top: 56px; }
.incluye .etiqueta { margin-bottom: 16px; }
.incluye__grid { display: grid; gap: 16px; }
.incluye__grid h3 { margin-bottom: 12px; }

.cta-bloque {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  margin-top: 40px;
  padding: 28px 16px 20px;
  border: 1px solid var(--linea-dorada);
  border-radius: var(--radio);
  background: radial-gradient(120% 140% at 0% 0%, rgba(212, 180, 131, .14) 0%, rgba(212, 180, 131, 0) 60%);
  text-align: center;
}
.cta-bloque p {
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .incluye__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .cta-bloque { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; padding: 28px 32px; }
  /* El botón no se encoge: su texto va siempre en una línea */
  .cta-bloque .boton { flex: none; }
}

@media (min-width: 981px) {
  .pasos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 56px;
  }
  .paso { grid-template-columns: 1fr; padding-bottom: 0; }
  .paso::before { left: 64px; right: -24px; top: 23px; bottom: auto; width: auto; height: 2px; }
  .paso:last-child::before { display: none; }
  .paso__num { grid-row: auto; margin-bottom: 18px; }
  .paso h3 { padding-top: 0; }
  .paso p { grid-column: 1; }
  .incluye { margin-top: 72px; }
  .cta-bloque { margin-top: 48px; padding: 32px 40px; }
  .cta-bloque p { font-size: 1.375rem; }
}

/* ---------- 12. Inversión (#inversion) ---------- */
.precios {
  display: grid;
  gap: 12px;
  margin-top: 40px;
}
.precio {
  height: 100%;
  padding: 28px 24px;
  border: 1px solid var(--linea);
  border-radius: 20px;
  background: var(--azul-tinta);
}
.precio--gestion {
  border-color: var(--dorado);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(212, 180, 131, .16) 0%, rgba(212, 180, 131, 0) 55%),
    var(--azul-tinta);
}
.precio__cifra {
  margin: 10px 0 14px;
  font-family: var(--fuente-titulos);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
}
.precio__menor {
  font-family: var(--fuente-texto);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--texto-suave);
}
.precio p:last-child { font-size: var(--texto-largo); color: var(--texto-suave); }

.precios__mas {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linea-dorada);
  border-radius: 50%;
  background: var(--azul-marino);
  color: var(--dorado);
}
.precios__mas .icono { width: 20px; height: 20px; stroke-width: 2.25; }

.condiciones {
  display: grid;
  margin-top: 48px;
  border-top: 1px solid var(--linea-dorada);
}
.condiciones li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-block: 20px;
  border-bottom: 1px solid var(--linea);
}
.condiciones .icono { margin-top: 1px; color: var(--dorado); }
.condiciones p { font-size: var(--texto-largo); color: var(--texto-suave); }
.condiciones strong { display: block; margin-bottom: 2px; font-family: var(--fuente-titulos); font-size: 1.125rem; }

/* Botón principal después de ver el precio */
.inversion__accion { margin-top: 40px; }
.inversion__accion .boton { width: 100%; }

@media (min-width: 768px) {
  .precios { grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
  .precios__mas { margin-inline: -8px; }
  .inversion__accion .boton { width: auto; }
}
@media (min-width: 981px) {
  .precio { padding: 40px 36px; }
  .condiciones { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; border-top: 0; }
  .condiciones li { flex-direction: column; gap: 14px; padding-block: 28px 0; border-top: 1px solid var(--linea-dorada); border-bottom: 0; }
  .inversion__accion { margin-top: 56px; }
}

/* ---------- 13. Preguntas (#preguntas) ---------- */
.preguntas { max-width: calc(860px + 2 * var(--margen)); }
.preguntas .titulo-seccion { margin-bottom: 32px; }

/* Respuestas siempre visibles, sin acordeón */
.pregunta {
  padding-block: 24px;
  border-top: 1px solid var(--linea);
}
.pregunta:last-of-type { border-bottom: 1px solid var(--linea); }
.pregunta h3 { font-size: 1.1875rem; line-height: 1.35; }
.pregunta p {
  max-width: 64ch;
  margin-top: 10px;
  font-size: var(--texto-largo);
  color: var(--texto-suave);
}

@media (min-width: 981px) {
  .pregunta { padding-block: 32px; }
  .pregunta h3 { font-size: 1.375rem; }
  .pregunta p { margin-top: 12px; }
}

/* ---------- 14. Informe de muestra (#informe) ---------- */
.informe-seccion { display: grid; gap: 32px; }

.informe {
  padding: 20px 16px;
  border-radius: 20px;
  background: var(--papel);
  color: var(--papel-texto);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
}

.informe__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 0 4px 16px;
  border-bottom: 1px solid rgba(28, 43, 58, .14);
}
.informe__marca { display: flex; align-items: center; gap: 10px; }
.informe__marca img { width: 34px; }
.informe__marca p {
  font-family: var(--fuente-titulos);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--azul-marino);
}
.informe__ejemplo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--azul-marino);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--crema);
}
.informe__ejemplo::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dorado);
}

.informe__cifras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.kpi {
  padding: 14px;
  border: 1px solid rgba(28, 43, 58, .1);
  border-radius: 12px;
  background: var(--papel-tarjeta);
}
.kpi--principal, .kpi--ancho { grid-column: 1 / -1; }
/* Cifras pequeñas: valor abajo, alineado aunque la etiqueta ocupe dos líneas */
.kpi:not(.kpi--principal):not(.kpi--ancho) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.kpi__etiqueta {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--papel-suave);
}
.kpi__valor {
  margin-top: 4px;
  font-family: var(--fuente-titulos);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--azul-marino);
}
.kpi--principal .kpi__valor { font-size: 2.75rem; }

.desglose { display: grid; gap: 8px; margin-top: 12px; }
.desglose li {
  display: grid;
  grid-template-columns: 6.5rem 1fr 2ch;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  color: var(--papel-texto);
}
.desglose__barra {
  height: 8px;
  border-radius: 4px;
  background: rgba(11, 31, 58, .08);
}
.desglose__barra span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--azul-marino);
}
.desglose__valor { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.presupuesto { margin-top: 6px; font-size: 1rem; color: var(--papel-texto); }
.presupuesto strong {
  font-family: var(--fuente-titulos);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--azul-marino);
}
.medidor {
  height: 10px;
  margin-top: 10px;
  border-radius: 5px;
  background: rgba(11, 31, 58, .1);
}
.medidor span {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--azul-marino), #2A4A78);
}

.informe__hicimos { margin-top: 16px; padding: 0 4px; }
.informe__hicimos ul { margin-top: 8px; }
.informe__hicimos li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-block: 5px;
  font-size: 1rem;
  line-height: 1.45;
}
.informe__hicimos .icono {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--azul-marino);
  stroke-width: 2.5;
}

/* Captura real de Google Ads (prueba real, debajo del informe de muestra) */
.captura-real { display: grid; gap: 20px; }
.captura-real__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--linea-dorada);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--crema);
}
.captura-real__etiqueta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dorado);
}
.captura-real__texto h3 { margin-top: 16px; }
.captura-real__texto p { margin-top: 8px; max-width: 46ch; font-size: var(--texto-largo); color: var(--texto-suave); }
.captura-real__imagen { display: block; }
.captura-real__imagen img {
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: 12px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
}

.informe-seccion__accion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.informe-seccion__accion p {
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .informe { padding: 28px; }
  .informe__cifras { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .kpi { padding: 18px; }
  .kpi--principal { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 28px; }
  .kpi--principal .desglose { margin-top: 0; }
  .kpi__valor { font-size: 2rem; }
  .kpi--principal .kpi__valor { font-size: 3.25rem; }
  .informe-seccion__accion { flex-direction: row; align-items: center; justify-content: space-between; }
  .informe-seccion__accion .boton { flex: none; }
}

@media (min-width: 981px) {
  .informe-seccion {
    grid-template-columns: 5fr 7fr;
    grid-template-areas: "texto informe" "accion informe" "captura captura";
    align-items: start;
    gap: 32px 72px;
  }
  .informe-seccion__texto { grid-area: texto; align-self: end; }
  .informe { grid-area: informe; padding: 32px; }
  /* Mismas columnas que arriba: texto a la izquierda, captura a la derecha */
  .captura-real { grid-area: captura; grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; margin-top: 32px; }
  .informe-seccion__accion { grid-area: accion; flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ---------- 15. Diagnóstico y formulario (#diagnostico) ---------- */
.diagnostico {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(212, 180, 131, .1) 0%, rgba(212, 180, 131, 0) 60%),
    var(--azul-profundo);
}
.diagnostico::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(212, 180, 131, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 180, 131, .06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 50%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 50%);
}

/* Móvil y tableta: menos espacio arriba para que el formulario se vea al tocar el botón */
@media (max-width: 980px) {
  .diagnostico { padding-top: 48px; }
}

.diagnostico__grid {
  position: relative;
  display: grid;
  grid-template-areas: "intro" "formulario" "incluye" "whatsapp";
  gap: 32px;
}
.diagnostico__intro { grid-area: intro; }
.diagnostico__incluye { grid-area: incluye; }
.diagnostico__incluye .etiqueta { margin-bottom: 8px; }

.formulario-tarjeta {
  grid-area: formulario;
  padding: 24px 18px;
  border: 1px solid var(--linea-dorada);
  border-radius: 20px;
  background: var(--azul-tinta);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
}

.campo { display: grid; gap: 8px; margin-bottom: 18px; }
.campo label { font-size: 1rem; font-weight: 600; line-height: 1.35; }
/* Ejemplo debajo de la etiqueta (fuera del campo, para que no parezca ya lleno) */
.campo__ayuda {
  margin-top: -4px;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--texto-suave);
}

.campo input[type="text"],
.campo input[type="tel"],
.campo select {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid rgba(245, 243, 238, .24);
  border-radius: 10px;
  background-color: var(--azul-marino);
  color: var(--crema);
  font-size: 1rem;
  line-height: 1.3;
  transition: border-color .2s, box-shadow .2s;
}
.campo input:focus,
.campo select:focus {
  border-color: var(--dorado);
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 180, 131, .25);
}
.campo select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23D4B483' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.campo select:invalid { color: #8E99A8; }
.campo select option { background: var(--azul-marino); color: var(--crema); }

.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"] { border-color: var(--error); }
.campo__error {
  font-size: 1rem;
  font-weight: 500;
  color: var(--error);
}

/* Casilla de autorización */
.campo--casilla { margin-top: 4px; }
.casilla {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--texto-suave);
  cursor: pointer;
}
.casilla input {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.casilla__caja {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1.5px solid rgba(245, 243, 238, .4);
  border-radius: 7px;
  background: var(--azul-marino);
  color: var(--azul-marino);
  transition: background-color .15s, border-color .15s;
}
.casilla__caja .icono { width: 16px; height: 16px; stroke-width: 3; opacity: 0; }
.casilla input:checked + .casilla__caja { border-color: var(--dorado); background: var(--dorado); }
.casilla input:checked + .casilla__caja .icono { opacity: 1; }
.casilla input:focus-visible + .casilla__caja { outline: 3px solid var(--dorado); outline-offset: 3px; }
.casilla input[aria-invalid="true"] + .casilla__caja { border-color: var(--error); }
/* Área táctil de 44 px sin mover el texto */
.casilla .enlace { min-height: 0; padding-block: 12px; margin-block: -12px; font-weight: 600; }

.formulario .boton--principal { margin-top: 8px; }
.formulario__nota {
  margin-top: 12px;
  font-size: 1rem;
  text-align: center;
  color: var(--texto-suave);
}

.diagnostico__whatsapp {
  grid-area: whatsapp;
  display: grid;
  gap: 14px;
  padding-top: 28px;
  border-top: 1px solid var(--linea);
}
.diagnostico__whatsapp > p:first-child { font-family: var(--fuente-titulos); font-size: 1.125rem; font-weight: 600; }
.horario {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1rem;
  color: var(--texto-suave);
}
.horario .icono { width: 20px; height: 20px; margin-top: 2px; color: var(--dorado); }

@media (min-width: 768px) {
  .formulario-tarjeta { padding: 32px; }
  .formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .diagnostico__whatsapp { justify-items: start; }
}

@media (min-width: 981px) {
  .diagnostico__grid {
    grid-template-columns: 5fr 6fr;
    grid-template-areas: "intro formulario" "incluye formulario" "whatsapp formulario";
    grid-template-rows: auto auto 1fr;
    gap: 40px 72px;
  }
  .formulario-tarjeta { padding: 40px; }
  .diagnostico__whatsapp { align-self: start; }
}

/* ---------- 16. Pie de página ---------- */
.pie {
  padding-block: 48px;
  border-top: 1px solid var(--linea);
  background: var(--azul-pie);
  font-size: 1rem;
  color: var(--texto-suave);
}
.pie__grid { display: grid; gap: 20px; }
.pie__logo { width: 132px; }
.pie__datos p + p { margin-top: 4px; }
.pie__legal { display: grid; justify-items: start; gap: 4px; }
.pie__legal .enlace { min-height: 44px; font-weight: 500; }

@media (min-width: 981px) {
  .pie__grid { grid-template-columns: auto 1fr auto; align-items: center; gap: 56px; }
  .pie__legal { justify-items: end; text-align: right; }
}

/* ---------- 17. Barra de acción fija (botón principal + WhatsApp) ---------- */
/* Móvil y tableta: barra abajo con el botón principal y WhatsApp */
.barra-accion {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linea-dorada);
  background: var(--azul-profundo);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.barra-accion__cta {
  flex: 1;
  max-width: 480px;
  min-height: 52px;
  padding: 10px 14px;
  box-shadow: none;
}
.wa-flotante {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border: 1.5px solid var(--whatsapp);
  border-radius: var(--radio-boton);
  color: var(--whatsapp);
}
.wa-flotante .icono { width: 28px; height: 28px; }

/* Con JS: aparece al pasar el botón de la primera pantalla y se oculta al llegar al formulario */
.js .barra-accion { opacity: 0; visibility: hidden; transform: translateY(100%); }
.js .barra-accion.barra-accion--visible { opacity: 1; visibility: visible; transform: none; }

/* Escritorio: solo el botón flotante de WhatsApp */
@media (min-width: 981px) {
  .barra-accion { inset: auto 28px 28px auto; padding: 0; border: 0; background: none; }
  .barra-accion__cta { display: none; }
  .wa-flotante {
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 50%;
    background: var(--whatsapp);
    color: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
    transition: transform .25s;
  }
  .wa-flotante .icono { width: 30px; height: 30px; }
  .wa-flotante:hover { transform: scale(1.06); }
  .js .barra-accion { transform: translateY(12px); }
}

/* ---------- 18. Ventana de política de privacidad ---------- */
.privacidad {
  width: min(640px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 28px 22px;
  border: 1px solid var(--linea-dorada);
  border-radius: 20px;
  background: var(--azul-tinta);
  color: var(--crema);
  overflow-y: auto;
}
.privacidad::backdrop { background: rgba(4, 12, 24, .78); }
.privacidad h2 { font-size: 1.625rem; margin-bottom: 8px; }
/* El título recibe el foco al abrir, para que la ventana empiece arriba y no en «Cerrar» */
.privacidad h2:focus { outline: none; }
.privacidad p { margin-top: 14px; font-size: var(--texto-largo); color: var(--texto-suave); }
.privacidad form { margin-top: 24px; }
.privacidad .boton { width: 100%; }
.pendiente {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(212, 180, 131, .18);
  color: var(--dorado);
}
@media (min-width: 768px) {
  .privacidad { padding: 36px; }
  .privacidad .boton { width: auto; }
}

/* ---------- 19. Página de gracias ---------- */
.gracias {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: 112px 0 64px;
}
.gracias::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(212, 180, 131, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 180, 131, .07) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 100%);
}
.gracias .contenedor { position: relative; max-width: calc(720px + 2 * var(--margen)); }
.gracias__icono {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: var(--dorado);
  color: var(--azul-marino);
}
.gracias__icono .icono { width: 32px; height: 32px; stroke-width: 2.5; }
.gracias h1 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.gracias .tarjeta { margin-top: 36px; }
.gracias .tarjeta .etiqueta { margin-bottom: 8px; }
.gracias .paso { padding-bottom: 24px; }
.gracias .paso h3 { padding-top: 0; font-family: var(--fuente-texto); font-size: 1.0625rem; font-weight: 500; line-height: 1.5; align-self: center; }
.gracias .paso::before { top: 52px; }
.gracias .paso:last-child { padding-bottom: 0; }
.gracias__accion { display: grid; gap: 14px; margin-top: 36px; }
.gracias__accion > p { font-family: var(--fuente-titulos); font-size: 1.125rem; font-weight: 600; }
.gracias__volver {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  color: var(--texto-suave);
  text-decoration: underline;
  text-decoration-color: var(--dorado);
  text-underline-offset: 3px;
}
.gracias__volver:hover { color: var(--crema); }

@media (min-width: 768px) {
  .gracias { padding-top: 140px; }
  .gracias__accion { justify-items: start; }
}
@media (min-width: 981px) {
  .gracias { padding-top: 168px; }
  /* En gracias los pasos van siempre en columna */
  .gracias .pasos { display: block; margin-top: 16px; }
  .gracias .paso { grid-template-columns: 48px 1fr; column-gap: 18px; padding-bottom: 24px; }
  .gracias .paso::before { left: 23px; right: auto; top: 52px; bottom: 0; width: 2px; height: auto; }
  .gracias .paso__num { grid-row: span 1; margin-bottom: 0; }
}