/* Paleta American Express — sustituir por los hex exactos del kit de marca. */
:root{
  --azul:#006FCF;
  --azul-oscuro:#0059a8;
  --profundo:#00175A;
  --bruma:#ECF5FC;
  --cielo:#9BD3F5;
  --tinta:#0f172a;
  --texto:#334155;
  --suave:#64748b;      /* 4.6:1 sobre blanco — AA */
  --borde:#e2e8f0;
  --fondo:#f8fafc;
  --max:64rem;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,sans-serif;
  color:var(--texto);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{color:var(--tinta);line-height:1.15;margin:0}
sup{font-size:.6em;vertical-align:super}
img{max-width:100%;height:auto;display:block}

.contenedor{max-width:var(--max);margin-inline:auto;padding-inline:1rem}
.centrado{text-align:center}
.nota{font-size:.7rem;color:var(--suave)}

/* Aviso legal sobre el fold */
.aviso{
  margin:0;padding:.45rem 1rem;
  background:#1e293b;color:#cbd5e1;      /* 8.6:1 — AA */
  font-size:.68rem;line-height:1.45;text-align:center;
}
.aviso strong{color:#fff}

/* Cabecera */
.cabecera{border-bottom:1px solid var(--borde)}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;height:3.5rem}
.logo{
  display:flex;align-items:center;gap:.5rem;
  color:var(--tinta);text-decoration:none;
}
.logo__marca{
  width:2rem;height:2rem;border-radius:.5rem;flex-shrink:0;
  background:var(--profundo);color:#fff;
  display:grid;place-items:center;
  font-size:.875rem;font-weight:900;
}
.logo__texto{display:flex;flex-direction:column;line-height:1.1}
.logo__nombre{font-weight:900;font-size:1.15rem;letter-spacing:-.02em}
.logo__acento{color:var(--azul)}
/* Declara la relación marca/dominio: el usuario ve emouseclick.com en la barra
   y aquí encuentra la explicación, en vez de una sorpresa. */
.logo__editor{
  font-size:.625rem;font-weight:600;color:var(--suave);
  letter-spacing:.01em;margin-top:.1rem;
}
.etiqueta{
  font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:#475569;background:#f1f5f9;padding:.25rem .5rem;border-radius:.25rem;
}

/* Hero */
.hero{background:var(--profundo);color:#fff;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;opacity:.07;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);
  background-size:22px 22px;
}
.hero__rejilla{position:relative;display:grid;gap:2rem;padding-block:2rem 2.5rem}
.hero__urgencia{
  display:inline-block;margin:0 0 1rem;
  font-size:.6875rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em;
  color:var(--cielo);border:1px solid rgb(155 211 245 / .4);
  border-radius:999px;padding:.3rem .75rem;
}
.hero__titulo{color:#fff;font-size:1.75rem;font-weight:900;margin-bottom:.75rem}
.hero__titulo sup{color:var(--cielo)}
.hero__bajada{color:#e2e8f0;font-size:1rem;margin:0 0 .5rem}
.hero__bajada strong{color:#fff}
.hero__anualidad{color:#cbd5e1;font-size:.875rem;margin:0 0 1.5rem}  /* 7.4:1 — AA */
.hero__garantias{
  margin:.85rem 0 0;font-size:.6875rem;color:#cbd5e1;
  display:flex;flex-wrap:wrap;gap:.5rem;
}

.tarjeta-figura{margin:0}
.tarjeta-img{border-radius:.75rem;box-shadow:0 18px 40px rgb(0 0 0 / .35);margin-inline:auto}
.tarjeta-pie{margin-top:.5rem;font-size:.625rem;color:#94a3b8;text-align:center}

/* Botones */
.boton{
  display:inline-block;background:var(--azul);color:#fff;
  font-weight:900;font-size:1rem;text-decoration:none;
  padding:.85rem 2rem;border-radius:999px;
  box-shadow:0 10px 25px rgb(0 111 207 / .3);
  transition:background .15s;
}
.boton:hover,.boton:focus-visible{background:var(--azul-oscuro)}
.boton:focus-visible{outline:3px solid var(--cielo);outline-offset:3px}
.boton--grande{font-size:1.0625rem;padding:1rem 2.25rem;width:100%;text-align:center}
.boton--bloque{display:block;width:100%;text-align:center}

/* Franja de confianza */
.franja{background:var(--bruma);border-bottom:1px solid var(--borde)}
.franja__fila{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.5rem;
  padding-block:.75rem;font-size:.6875rem;font-weight:600;color:#475569;
}
.franja__fila span::before{content:"✓ ";color:var(--azul);font-weight:900}

/* Secciones */
.seccion{padding-block:2.5rem}
.seccion__titulo{font-size:1.5rem;font-weight:900;text-align:center;margin-bottom:.25rem}
.seccion__bajada{font-size:.875rem;color:var(--suave);text-align:center;margin:0 0 1.75rem}

/* Beneficios */
.beneficios{list-style:none;display:grid;gap:1rem;margin:0 0 2rem;padding:0}
.beneficio{border:1px solid var(--borde);border-radius:1rem;padding:1.25rem;transition:border-color .15s}
.beneficio:hover{border-color:var(--azul)}
.beneficio__cifra{font-size:1.75rem;font-weight:900;color:var(--azul);margin:0 0 .25rem;line-height:1.1}
.beneficio__titulo{font-size:.875rem;font-weight:700;margin-bottom:.35rem}
.beneficio__texto{font-size:.875rem;color:var(--suave);margin:0;line-height:1.5}

/* Encaje */
.encaje{background:var(--fondo);border-block:1px solid var(--borde);padding-block:2.5rem}
.encaje__lista{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:.625rem;max-width:44rem;margin-inline:auto}
.encaje__item{
  display:flex;gap:.75rem;align-items:flex-start;
  background:#fff;border:1px solid var(--borde);border-radius:.75rem;
  padding:.85rem 1rem;font-size:.875rem;cursor:pointer;
  transition:border-color .15s;
}
.encaje__item:hover{border-color:var(--azul)}
.encaje__item:focus-within{outline:2px solid var(--azul);outline-offset:2px}
.encaje__check{
  width:1.15rem;height:1.15rem;margin:.15rem 0 0;flex-shrink:0;
  accent-color:var(--azul);cursor:pointer;
}
.encaje__marcador{
  max-width:44rem;margin:0 auto 1.25rem;padding:.75rem 1rem;
  background:var(--bruma);border:1px solid rgb(0 111 207 / .25);border-radius:.75rem;
  font-size:.875rem;font-weight:600;color:var(--profundo);text-align:center;
}

/* FAQ */
.faq{margin:0;max-width:44rem;margin-inline:auto}
.faq__item{border-bottom:1px solid var(--borde);padding-block:1rem}
.faq__item dt{font-weight:700;color:var(--tinta);font-size:.9375rem;margin-bottom:.35rem}
.faq__item dd{margin:0;font-size:.875rem;color:var(--suave);line-height:1.6}

/* Pie */
.pie{background:#fff;border-top:1px solid var(--borde);padding-block:2rem 6rem}
.pie p{font-size:.6875rem;color:var(--suave);line-height:1.65;margin:0 0 .65rem}
.logo--pie{margin-bottom:1rem}
.logo--pie .logo__nombre{font-size:1rem}
.pie__enlaces{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1rem}
.pie__enlaces a{font-size:.6875rem;color:var(--suave);text-decoration:underline}
.pie__enlaces a:hover{color:var(--tinta)}

/* CTA fija — solo móvil */
.cta-fija{
  position:fixed;inset-inline:0;bottom:0;z-index:40;
  padding:.65rem 1rem;
  background:rgb(255 255 255 / .96);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--borde);
}

@media (min-width:640px){
  .hero__rejilla{grid-template-columns:3fr 2fr;align-items:center;padding-block:3rem}
  .hero__titulo{font-size:2.25rem}
  .hero__bajada{font-size:1.125rem}
  .boton--grande{width:auto}
  .beneficios{grid-template-columns:1fr 1fr}
  .seccion__titulo{font-size:1.75rem}
  .cta-fija{display:none}
  .pie{padding-bottom:2rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}