/* Pulzo · landing de pulzoapp.com
   Los colores y el vidrio salen del sistema de diseño (docs/sistema-de-diseno.md).
   Si cambias un token aquí, cámbialo también allí. */

:root {
  --texto: #0F1621;
  --texto2: #63707F;
  --fondo: #F7F9FC;
  --elemento: #FFFFFF;
  --seleccionado: #DDE8FB;
  --cromo: #0F1621;
  --on-cromo: #F7F9FC;
  --acento: #1D6CF0;
  --acento-profundo: #0B4AB8;
  --urgencia: #D6122C;
  --on-urgencia: #FFFFFF;
  --borde: rgba(15, 22, 33, .09);

  /* vidrio: relleno translúcido + barrido de brillo + canto blanco */
  --vidrio-fondo: rgba(255, 255, 255, .38);
  --vidrio-brillo: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.03) 55%, rgba(255,255,255,.12) 100%);
  --vidrio-canto: rgba(255, 255, 255, .75);
  --vidrio-desenfoque: blur(18px) saturate(140%);

  --ancho: 1344px;
  --radio: 24px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--fondo);
  /* los tres resplandores del sistema, fijos al hacer scroll */
  background-image:
    radial-gradient(circle farthest-side at 92% 2%, rgba(29,108,240,.22) 0%, rgba(29,108,240,.07) 38%, rgba(29,108,240,0) 68%),
    radial-gradient(circle farthest-side at 2% 40%, rgba(29,108,240,.13) 0%, rgba(29,108,240,.04) 40%, rgba(29,108,240,0) 70%),
    radial-gradient(circle farthest-side at 86% 98%, rgba(11,74,184,.14) 0%, rgba(11,74,184,.04) 40%, rgba(11,74,184,0) 70%);
  background-attachment: fixed;
  color: var(--texto);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; line-height: 1.15; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--cromo); color: var(--on-cromo);
  padding: 12px 18px; border-radius: 0 0 12px 0; z-index: 100;
}
.saltar:focus { left: 0; }

/* ---------- vidrio ---------- */
.vidrio, .tarjeta, .nav, .cookies, .cierre, .faq details, .urgencia__aviso {
  background-color: var(--vidrio-fondo);
  background-image: var(--vidrio-brillo);
  border: 1px solid var(--vidrio-canto);
  -webkit-backdrop-filter: var(--vidrio-desenfoque);
  backdrop-filter: var(--vidrio-desenfoque);
}

/* ---------- navegación: cápsula flotante ---------- */
.nav {
  position: fixed;
  top: 20px; left: 48px; right: 48px;
  max-width: var(--ancho);
  margin: 0 auto;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px 12px 12px 22px;
  border-radius: 999px;
  box-shadow: 0 14px 40px -6px rgba(10, 23, 51, .12);
}
.nav__marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-weight: 700; font-size: 22px; letter-spacing: -.02em; }
.nav__enlaces { display: flex; gap: 32px; }
.nav__enlaces a { color: var(--texto2); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav__enlaces a:hover { color: var(--texto); }
.nav__acciones { display: flex; align-items: center; gap: 20px; }
.idioma { display: flex; gap: 6px; font-size: 13px; color: var(--texto2); }
.idioma strong { color: var(--texto); font-weight: 600; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 28px;
  border: 0; border-radius: 15px;
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn--grande { height: 62px; padding: 0 32px; font-size: 18px; border-radius: 19px; }
.btn--acento { background: var(--acento); color: #fff; }
.btn--cromo { background: var(--cromo); color: var(--on-cromo); }
.btn--blanco { background: #fff; color: var(--urgencia); height: 56px; padding: 0 30px; border-radius: 18px; font-size: 17px; }
.btn--borde { background: rgba(255,255,255,.6); color: var(--texto); border: 1.5px solid var(--borde); }
.btn:hover { opacity: .9; }

/* ---------- estructura ---------- */
.hero, .seccion, .pie__cols, .pie__legal { max-width: var(--ancho); margin: 0 auto; }
.seccion { padding: 96px 48px; }
.seccion--centrada { text-align: center; }
.seccion h2 { font-size: 40px; font-weight: 700; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--acento); text-transform: uppercase; margin-bottom: 14px; }
.bajada { font-size: 18px; color: var(--texto2); margin-top: 16px; max-width: 760px; line-height: 1.5; }
.bajada--centrada { margin-left: auto; margin-right: auto; }
.seccion h2 + .rejilla, .bajada + .rejilla, .bajada + .telefonos, .seccion h2 + .faq, .bajada + .faq { margin-top: 44px; }
.nota { margin-top: 20px; font-size: 14px; color: var(--texto2); }

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  padding: 150px 48px 96px;
}
.pildora {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  background: var(--seleccionado); color: var(--acento-profundo);
  border: 1px solid rgba(29, 108, 240, .22);
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
}
.hero h1 { font-size: 60px; font-weight: 700; margin-top: 20px; letter-spacing: -.03em; line-height: 1.08; }
.hero .bajada { font-size: 19px; }
.hero__ctas { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.confianza { margin-top: 28px; font-size: 14px; font-weight: 500; color: var(--texto2); }
.hero__foto { margin: 0; }
.hero__foto img { border-radius: 32px; aspect-ratio: 616 / 540; object-fit: cover; width: 100%; }

/* ---------- rejillas y tarjetas ---------- */
.rejilla { display: grid; gap: 20px; }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }
.rejilla--suelta { gap: 24px; }
.rejilla--suelta h3 { font-size: 19px; font-weight: 700; }
.rejilla--suelta p { margin-top: 8px; color: var(--texto2); font-size: 15px; }
.tarjeta { border-radius: var(--radio); padding: 28px; }
.tarjeta h3 { font-size: 21px; font-weight: 700; margin-top: 18px; }
.tarjeta p { margin-top: 8px; color: var(--texto2); font-size: 15px; }
.tarjeta--compacta { padding: 24px 22px; }
.tarjeta__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tarjeta--compacta .tarjeta__cab + h3 { margin-top: 18px; }
.tarjeta--compacta h3 { font-size: 18px; margin-top: 18px; }
.tarjeta--compacta p { font-size: 14px; }
.icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 20px;
  background: var(--seleccionado); color: var(--acento);
}
.icono svg { width: 24px; height: 24px; }
.tarjeta--compacta .icono { width: 44px; height: 44px; border-radius: 17px; }
.tarjeta--compacta .icono svg { width: 21px; height: 21px; }
.rejilla--suelta .icono { width: 48px; height: 48px; border-radius: 18px; margin-bottom: 16px; }
.estado {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: #EDEFF3; color: var(--texto2);
}
.estado--si { background: var(--seleccionado); color: var(--acento-profundo); }
/* ojo: .tarjeta p y .tarjeta h3 tienen más peso que una clase suelta.
   Por eso estos van anidados: si no, el precio sale pequeño y gris. */
.tarjeta .precio__nombre { font-size: 17px; font-weight: 600; color: var(--texto2); margin-top: 18px; }
.tarjeta .precio { font-size: 42px; font-weight: 700; color: var(--texto); letter-spacing: -.03em; margin-top: 6px; line-height: 1.1; }
.tarjeta .estado { font-size: 12px; font-weight: 600; margin-top: 0; color: var(--texto2); }
.tarjeta .estado--si { color: var(--acento-profundo); }

/* ---------- la app ---------- */
.telefonos { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.telefonos img {
  width: 249px; border-radius: 28px;
  border: 2px solid rgba(255,255,255,.8);
  box-shadow: 0 18px 44px -8px rgba(10, 23, 51, .18);
}

/* ---------- urgencia ---------- */
.urgencia {
  display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: center;
  background: var(--urgencia); color: var(--on-urgencia);
  border-radius: 32px; padding: 48px;
}
.urgencia h2 { font-size: 34px; }
.urgencia p { margin-top: 12px; font-size: 17px; }
.urgencia .btn { margin-top: 22px; }
.urgencia__aviso {
  background-color: rgba(255,255,255,.16);
  background-image: none;
  border: 0;
  border-radius: 20px; padding: 20px 22px;
}
.urgencia__aviso h3 { font-size: 15px; font-weight: 700; }
.urgencia__aviso p { font-size: 14px; margin-top: 8px; }

/* ---------- dos columnas ---------- */
.dos-columnas { display: grid; grid-template-columns: 1fr 520px; gap: 56px; align-items: center; }
.foto-lateral { margin: 0; }
.foto-lateral img { border-radius: var(--radio); aspect-ratio: 520 / 400; object-fit: cover; width: 100%; }
.lista-check { margin-top: 26px; display: grid; gap: 12px; }
.lista-check li { display: flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 500; }
.lista-check li::before {
  content: ""; flex: 0 0 20px; height: 20px; border-radius: 50%;
  background: var(--acento);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1a9 9 0 110 18 9 9 0 010-18zm4.3 6.1a1 1 0 00-1.4 0L9 11l-1.9-1.9a1 1 0 10-1.4 1.4l2.6 2.6a1 1 0 001.4 0l5-5a1 1 0 000-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1a9 9 0 110 18 9 9 0 010-18zm4.3 6.1a1 1 0 00-1.4 0L9 11l-1.9-1.9a1 1 0 10-1.4 1.4l2.6 2.6a1 1 0 001.4 0l5-5a1 1 0 000-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- preguntas ---------- */
.faq { display: grid; gap: 12px; }
.faq details { border-radius: 18px; padding: 22px 24px; }
.faq summary { font-size: 18px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 18px; height: 18px; flex: 0 0 18px; background: var(--texto2); transition: transform .2s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.3 7.3a1 1 0 011.4 0L10 11.6l4.3-4.3a1 1 0 111.4 1.4l-5 5a1 1 0 01-1.4 0l-5-5a1 1 0 010-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.3 7.3a1 1 0 011.4 0L10 11.6l4.3-4.3a1 1 0 111.4 1.4l-5 5a1 1 0 01-1.4 0l-5-5a1 1 0 010-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq p { margin-top: 10px; color: var(--texto2); font-size: 15px; }

/* ---------- cierre ---------- */
.cierre { border-radius: 32px; padding: 60px 48px; text-align: center; }
.cierre h2 { font-size: 42px; }
.cierre p { margin-top: 14px; font-size: 18px; color: var(--texto2); }
.cierre .btn { margin-top: 30px; }

/* ---------- pie ---------- */
.pie { background: var(--cromo); color: #F7F9FC; padding: 72px 48px 36px; margin-top: 40px; }
.pie__cols { display: grid; grid-template-columns: 320px repeat(3, 1fr); gap: 64px; }
.pie__logo { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 700; }
.pie__marca p + p { margin-top: 16px; }
.pie__marca p:nth-child(2) { color: #9DA8B6; font-size: 14px; }
.idioma--pie { color: #9DA8B6; }
.idioma--pie strong { color: #F7F9FC; }
.pie h2 { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.pie ul { display: grid; gap: 12px; }
.pie a { color: #9DA8B6; text-decoration: none; font-size: 14px; }
.pie a:hover { color: #F7F9FC; }
.pie__pendiente li { color: #9DA8B6; font-size: 14px; }
.pie hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 56px auto 24px; max-width: var(--ancho); }
.pie__legal { display: flex; justify-content: space-between; gap: 24px; color: #9DA8B6; font-size: 13px; flex-wrap: wrap; }

/* ---------- cookies ---------- */
.cookies {
  /* más opaco que el resto del vidrio: el aviso puede caer sobre el pie oscuro
     y tiene que leerse siempre */
  background-color: rgba(255, 255, 255, .88);
  position: fixed; left: 48px; bottom: 24px; z-index: 60;
  width: 440px; max-width: calc(100vw - 40px);
  border-radius: 26px; padding: 24px;
  box-shadow: 0 14px 40px -6px rgba(10, 23, 51, .14);
}
.cookies[hidden] { display: none; }
.cookies h2 { font-size: 16px; font-weight: 700; }
.cookies p { margin-top: 8px; font-size: 14px; color: var(--texto2); }
.cookies__botones { display: flex; gap: 10px; margin-top: 18px; }
.cookies__botones .btn { flex: 1; height: 44px; font-size: 14px; padding: 0 12px; }

/* ---------- móvil ---------- */
@media (max-width: 1100px) {
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .pie__cols { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  .seccion { padding: 58px 20px; }
  .seccion h2 { font-size: 26px; }
  .bajada { font-size: 16px; }
  .nav { top: 16px; left: 20px; right: 20px; padding: 12px 12px 12px 16px; }
  .nav__enlaces, .nav__acciones .idioma { display: none; }
  .nav__marca { font-size: 19px; }
  .nav .btn { height: 42px; padding: 0 16px; font-size: 14px; }

  .hero { grid-template-columns: 1fr; gap: 32px; padding: 110px 20px 58px; }
  .hero h1 { font-size: 34px; }
  .hero .bajada { font-size: 16px; }
  .hero__ctas { flex-direction: column; margin-top: 28px; }
  .hero__ctas .btn { width: 100%; height: 56px; font-size: 17px; }
  .hero__foto img { aspect-ratio: 362 / 300; border-radius: 24px; }

  .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
  .telefonos { gap: 14px; }
  .telefonos img { width: calc(50% - 7px); }

  .urgencia { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; border-radius: 26px; }
  .urgencia h2 { font-size: 23px; }
  .urgencia .btn { width: 100%; }

  .dos-columnas { grid-template-columns: 1fr; gap: 28px; }
  .foto-lateral img { aspect-ratio: 362 / 240; }

  .cierre { padding: 40px 24px; border-radius: 26px; }
  .cierre h2 { font-size: 30px; }

  .pie { padding: 48px 20px 28px; }
  .pie__cols { grid-template-columns: 1fr; gap: 34px; }
  .pie__legal { flex-direction: column; gap: 8px; }

  .cookies { left: 20px; right: 20px; width: auto; bottom: 20px; }
}