/* 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;
  /* la capa del parallax se sale a lo ancho a propósito; 'clip' la recorta sin
     crear barra horizontal y sin romper position: sticky (hidden sí la rompe) */
  overflow-x: clip;
  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: 4 / 3; 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 ---------- */
/* 'center', no 'stretch' (deformaba) ni 'flex-end' (los dejaba desalineados
   por abajo): los dos de los lados quedan a media altura del del centro. */
.telefonos { display: flex; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap; }
.telefonos img {
  width: 249px; height: auto; align-self: center; 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: 4 / 3; 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; }
}


/* ---------- añadidos de la segunda tanda ---------- */

.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.tarjeta--foto { padding: 16px 16px 22px; }
.tarjeta--foto img { border-radius: 20px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.tarjeta--foto h3 { font-size: 19px; font-weight: 700; margin-top: 16px; }
.tarjeta .medico__esp { font-size: 15px; font-weight: 500; color: var(--acento-profundo); margin-top: 4px; }
.tarjeta .medico__col { font-size: 14px; color: var(--texto2); margin-top: 2px; }

/* el teléfono del centro sobresale un poco */
.telefonos img.telefono--destacado {
  width: 284px;
  box-shadow: 0 26px 60px -10px rgba(10, 23, 51, .26);
  z-index: 1;
}

.icono--urgencia {
  background: rgba(255, 255, 255, .2);
  color: var(--on-urgencia);
  width: 56px; height: 56px; border-radius: 20px;
  margin-bottom: 18px;
}
.icono--urgencia svg { width: 26px; height: 26px; }

.idioma a { color: var(--texto2); text-decoration: none; }
.idioma a:hover { color: var(--texto); }
.idioma--pie a { color: #9DA8B6; }
.idioma--pie a:hover { color: #F7F9FC; }
.cookies p a { color: var(--acento-profundo); }

/* ---------- páginas legales ---------- */

.legal { max-width: 900px; margin: 0 auto; padding: 170px 48px 100px; }
.legal h1 { font-size: 46px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.legal .fecha { margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--texto2); }
.legal__cuerpo { border-radius: 28px; padding: 48px 56px; margin-top: 40px; }
.legal__cuerpo h2 { font-size: 22px; font-weight: 700; margin-top: 32px; }
.legal__cuerpo h2:first-child { margin-top: 0; }
.legal__cuerpo p { font-size: 16px; line-height: 1.65; color: var(--texto2); margin-top: 10px; }
.legal .volver { display: inline-block; margin-top: 32px; color: var(--acento-profundo); font-weight: 600; font-size: 15px; text-decoration: none; }

/* aviso de borrador: solo en la web, no en el Figma */
.chip-borrador {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 28px; padding: 10px 16px;
  border-radius: 999px;
  background: #FEF3C7; color: #92400E;
  border: 1px solid rgba(146, 64, 14, .22);
  font-size: 14px; font-weight: 600;
}
.chip-borrador::before { content: "⚠"; font-size: 15px; }

@media (max-width: 900px) {
  .rejilla--2 { grid-template-columns: 1fr; }
  .telefonos img.telefono--destacado { width: calc(50% - 7px); }
  .legal { padding: 120px 20px 60px; }
  .legal h1 { font-size: 30px; }
  .legal__cuerpo { padding: 28px 24px; border-radius: 24px; }
  .legal__cuerpo h2 { font-size: 19px; margin-top: 26px; }
  .legal__cuerpo p { font-size: 15px; }
}


/* ---------- hero con vídeo y parallax ---------- */

.hero { position: relative; }

/* Capa de fondo del parallax.
   Ocupa el ANCHO DE LA VENTANA, no el del hero: el hero está centrado con un
   ancho máximo, así que al recortarlo aquí se veía un rectángulo azul con los
   bordes rectos en los márgenes. Ese era el "cuadrado azul". Ahora se sale de
   la caja y el degradado muere solo. */
.hero__capa {
  position: absolute;
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  top: -420px; bottom: -340px;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle 720px at 70% 44%, rgba(29,108,240,.20) 0%, rgba(29,108,240,.06) 44%, rgba(29,108,240,0) 70%),
    radial-gradient(circle 600px at 20% 70%, rgba(11,74,184,.15) 0%, rgba(11,74,184,.04) 44%, rgba(11,74,184,0) 70%);
  will-change: transform;
}
.hero__texto, .hero__foto { position: relative; z-index: 1; }

.hero__foto { will-change: transform; }
.hero__video {
  display: block; width: 100%; height: auto;
  /* 4:3, la proporción del vídeo: con 616/540 el recorte se comía el portátil
     por la derecha, que es justo lo que hay que ver. */
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 32px;
  background: #DDE8FB;
}

/* el navegador respeta a quien pidió menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .hero__capa, .hero__foto { transform: none !important; }
}

@media (max-width: 900px) {
  .hero__video { aspect-ratio: 4 / 3; border-radius: 24px; }
  .hero__capa { top: -220px; bottom: -220px; }
}