/* Mis Pastillas · web de presentación
   Estilo de página de producto: el producto real en grande, mucho espacio, frases cortas.
   Letra del sistema: en iPhone y Mac es la de Apple; en otros sistemas, la suya. */

:root {
  --negro: #000;
  --gris-oscuro: #1d1d1f;
  --gris-panel: #161617;
  --blanco: #fbfbfd;
  --tinta: #1d1d1f;
  --texto-claro: #f5f5f7;
  --gris-sobre-negro: #a1a1a6;   /* 8,3:1 sobre negro */
  --gris-sobre-blanco: #6e6e73;  /* 5,0:1 sobre #fbfbfd */
  --verde: #30d158;              /* acento sobre negro */
  --verde-oscuro: #1e7b3c;       /* acento sobre blanco: 5,3:1 */
  --azul: #0071e3;
  --azul-enlace: #2997ff;
  --rojo: #c4211a;
  --ambar: #a35400;
  --radio: 28px;
  --ancho: 1040px;
  --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
  --suave: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--negro); color: var(--texto-claro);
  font-family: var(--fuente); font-size: 17px; line-height: 1.47;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
a { color: var(--azul-enlace); }
.claro a { color: #0066cc; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--azul-enlace); outline-offset: 3px; border-radius: 6px; }

.saltar { position: absolute; left: -9999px; top: 8px; z-index: 50; background: #fff; color: #000; padding: 10px 16px; border-radius: 10px; }
.saltar:focus { left: 8px; }

/* ── Navegación ─────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav__dentro { max-width: var(--ancho); margin: 0 auto; padding: 0 22px; min-height: 52px; display: flex; align-items: center; gap: 24px; }
.nav__marca { color: var(--texto-claro); text-decoration: none; font-weight: 600; font-size: 21px; letter-spacing: -.01em; margin-right: auto; display: inline-flex; align-items: center; gap: 10px; }
.nav__icono { width: 28px; height: 28px; border-radius: 22.5%; display: block; }
.portada__icono { width: 112px; height: 112px; border-radius: 22.5%; display: block; margin: 0 auto 22px; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
.nav__enlaces { display: flex; gap: 26px; }
.nav__enlaces a { color: #d2d2d7; text-decoration: none; font-size: 13px; transition: color .2s; }
.nav__enlaces a:hover { color: #fff; }
@media (max-width: 720px) { .nav__enlaces { display: none; } }

/* ── Botones ────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  background: var(--azul); color: #fff; text-decoration: none; border: 0; cursor: pointer;
  padding: 12px 24px; border-radius: 999px; font: 400 17px/1 var(--fuente);
  transition: background .2s, transform .2s var(--suave);
}
.boton:hover { background: #0077ed; }
.boton:active { transform: scale(.97); }
.boton--pequeno { min-height: 32px; padding: 7px 15px; font-size: 13px; color: #fff !important; }
.enlace-flecha { font-size: 17px; text-decoration: none; }
.enlace-flecha::after { content: " ›"; }
.enlace-flecha:hover { text-decoration: underline; }

/* ── Temas de bloque ────────────────────────────────────── */
.oscuro { background: var(--negro); color: var(--texto-claro); }
.claro { background: var(--blanco); color: var(--tinta); }

.antetitulo { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.oscuro .antetitulo { color: var(--verde); }
.antetitulo--verde { color: var(--verde-oscuro); }
.oscuro .antetitulo--verde { color: var(--verde); }

.titular { font-size: clamp(40px, 6.2vw, 80px); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; }
.titular--medio { font-size: clamp(32px, 4.4vw, 56px); }
.entradilla { font-size: clamp(19px, 2vw, 24px); line-height: 1.38; font-weight: 500; max-width: 36ch; margin: 22px auto 0; letter-spacing: -.01em; }
.claro .entradilla { color: var(--gris-sobre-blanco); }
.oscuro .entradilla { color: var(--gris-sobre-negro); }

/* ── Portada ────────────────────────────────────────────── */
.portada { text-align: center; padding: clamp(64px, 10vw, 110px) 22px 0; overflow: hidden; }
.portada__titulo { font-size: clamp(46px, 8.6vw, 112px); font-weight: 700; line-height: 1.0; letter-spacing: -.045em; margin-top: 10px; }
.portada__titulo span { display: block; }
.portada__respuesta {
  margin-top: 18px; font-size: clamp(46px, 8.6vw, 112px); font-weight: 700; line-height: 1; letter-spacing: -.045em;
  color: var(--verde);
}
.portada__texto { margin: 28px auto 0; max-width: 34ch; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.38; font-weight: 500; color: var(--gris-sobre-negro); }
.portada__acciones { margin-top: 32px; display: flex; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap; }
.portada__pronto { margin-top: 18px; font-size: 14px; color: var(--gris-sobre-negro); }

/* ── El iPhone (marco dibujado con CSS: sin descargas de terceros) ── */
.iphone {
  position: relative; margin: 0 auto; width: min(340px, 82vw);
  border-radius: 15% / 7%; padding: 3.6%; background: #1d1d1f;
  box-shadow: inset 0 0 0 1.5px #4a4a4d, 0 0 0 1px #000, 0 50px 120px -20px rgba(48, 209, 88, .22);
}
.iphone::before { /* botón lateral */
  content: ""; position: absolute; right: -3px; top: 24%; width: 3px; height: 10%; border-radius: 0 3px 3px 0; background: #3a3a3c;
}
/* La pantalla tiene EXACTAMENTE la proporción de las capturas (1206×2622): nada se recorta. */
.iphone__pantalla { position: relative; width: 100%; aspect-ratio: 1206 / 2622; border-radius: 12.5% / 5.8%; overflow: hidden; background: #fff; }
.iphone__pantalla img, .iphone__video { width: 100%; height: 100%; object-fit: cover; }
.iphone--portada { margin-top: clamp(56px, 7vw, 84px); margin-bottom: -18%; }

/* ── Bloques ────────────────────────────────────────────── */
.bloque { padding: clamp(96px, 13vw, 160px) 22px; }
.bloque__cabecera { text-align: center; max-width: 900px; margin: 0 auto; }
.rejilla { max-width: var(--ancho); margin: clamp(56px, 7vw, 80px) auto 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.tarjeta { background: #fff; border-radius: var(--radio); padding: 38px 32px 40px; box-shadow: 0 2px 30px rgba(0, 0, 0, .05); }
.tarjeta h3 { font-size: 24px; line-height: 1.17; font-weight: 700; letter-spacing: -.02em; margin: 18px 0 10px; }
.tarjeta p { color: var(--gris-sobre-blanco); font-size: 17px; }
.tarjeta__icono { width: 40px; height: 40px; fill: none; stroke: var(--verde-oscuro); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tarjeta__cifra { font-size: 48px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.tarjeta__cifra--rojo { color: var(--rojo); }
.tarjeta__cifra--ambar { color: var(--ambar); }
.rejilla--texto { gap: 44px; }
.rejilla--texto h3 { font-size: 22px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.01em; }
.rejilla--texto p { color: var(--gris-sobre-negro); }

/* ── Historia: el iPhone se queda fijo y cambia de pantalla al bajar ── */
.historia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(24px, 6vw, 96px); max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.historia__fija { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; }
.historia__fija { padding-top: 52px; } /* la barra fija no tapa el iPhone */
/* El iPhone cabe siempre en la altura disponible: ancho limitado por la altura de la ventana. */
.historia .iphone { width: min(320px, 38vw, calc((100svh - 52px - 64px) * 0.43)); }
.historia__img { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity .7s var(--suave), transform .9s var(--suave); }
.historia__img.activa { opacity: 1; transform: none; }
.historia__pasos { padding: 30vh 0; }
.historia__paso { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; opacity: .25; transition: opacity .5s; }
.historia__paso.activa { opacity: 1; }
.historia__hora { font-size: clamp(64px, 9vw, 120px); font-weight: 700; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.historia__hora--verde { color: var(--verde); }
.historia__paso h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin-top: 16px; }
.historia__paso p:last-child { margin-top: 14px; font-size: clamp(18px, 1.7vw, 21px); color: var(--gris-sobre-negro); max-width: 30ch; }
@media (max-width: 760px) {
  .historia { grid-template-columns: 1fr; }
  .historia__fija { height: auto; position: sticky; top: 52px; padding: 20px 0 8px; background: linear-gradient(#000 85%, rgba(0, 0, 0, 0)); z-index: 2; }
  .historia .iphone { width: min(210px, 52vw, calc((48svh) * 0.43)); }
  .historia__pasos { padding: 4vh 0 20vh; text-align: center; }
  .historia__paso { min-height: 62vh; align-items: center; }
}

/* ── Aviso del familiar ─────────────────────────────────── */
.aviso { max-width: 420px; margin: clamp(56px, 7vw, 76px) auto 0; }
.aviso__burbuja { display: flex; gap: 14px; align-items: flex-start; background: rgba(44, 44, 46, .94); border-radius: 22px; padding: 16px 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.aviso__icono { width: 38px; height: 38px; border-radius: 9px; flex: none; background: var(--verde-oscuro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.aviso__burbuja > div { flex: 1; min-width: 0; }
.aviso__app { display: flex; justify-content: space-between; font-size: 13px; color: var(--gris-sobre-negro); }
.aviso__titulo { font-weight: 600; margin-top: 3px; }
.aviso__cuerpo { color: #d2d2d7; font-size: 15px; }
.aviso__botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.aviso__botones span { background: rgba(44, 44, 46, .94); border-radius: 16px; padding: 14px; text-align: center; font-weight: 600; }

/* ── Precio ─────────────────────────────────────────────── */
.precios { max-width: 760px; margin: 60px auto 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.precio { background: var(--gris-oscuro); border-radius: var(--radio); padding: 34px 32px; }
.precio__nombre { color: var(--gris-sobre-negro); }
.precio__cifra { font-size: 48px; font-weight: 700; letter-spacing: -.04em; margin: 6px 0 4px; }
.precio__cifra span { font-size: 19px; font-weight: 500; letter-spacing: 0; color: var(--gris-sobre-negro); }
.precio__nota { color: var(--gris-sobre-negro); }
.precio__nota--verde { color: var(--verde); }

/* ── Formulario «Avísame» ───────────────────────────────── */
.formulario { max-width: 560px; margin: 48px auto 0; }
.formulario__etiqueta { display: block; font-weight: 600; margin-bottom: 10px; }
.formulario__fila { display: flex; gap: 10px; flex-wrap: wrap; }
.formulario__fila input {
  flex: 1 1 260px; min-height: 52px; border: 1px solid #c7c7cc; border-radius: 14px; padding: 0 18px;
  font: 400 17px var(--fuente); color: var(--tinta); background: #fff;
}
.formulario__fila input:focus { border-color: var(--azul); outline: 3px solid rgba(0, 113, 227, .25); outline-offset: 0; }
.formulario__fila .boton { min-height: 52px; flex: 0 0 auto; }
.formulario__acepto { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: 15px; color: var(--gris-sobre-blanco); }
.formulario__acepto input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--azul); }
.formulario__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario__estado { margin-top: 16px; min-height: 1.5em; font-weight: 600; }
.formulario__estado.bien { color: var(--verde-oscuro); }
.formulario__estado.mal { color: var(--rojo); }

/* ── Preguntas ──────────────────────────────────────────── */
.preguntas { padding-top: 0; }
.preguntas .titular { text-align: center; }
.preguntas__lista { max-width: 760px; margin: 40px auto 0; border-top: 1px solid #d2d2d7; }
.preguntas details { border-bottom: 1px solid #d2d2d7; }
.preguntas summary { cursor: pointer; list-style: none; padding: 24px 40px 24px 0; font-size: 21px; font-weight: 600; letter-spacing: -.01em; position: relative; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 28px; font-weight: 300; transition: transform .3s var(--suave); }
.preguntas details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.preguntas details p { padding: 0 0 24px; color: var(--gris-sobre-blanco); max-width: 60ch; }

/* ── Pie ────────────────────────────────────────────────── */
.pie { background: #f5f5f7; color: var(--gris-sobre-blanco); font-size: 13px; }
.pie__dentro { max-width: var(--ancho); margin: 0 auto; padding: 28px 22px 40px; }
.pie__aviso { padding-bottom: 16px; border-bottom: 1px solid #d2d2d7; }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0; }
.pie__enlaces a { color: #424245; text-decoration: none; }
.pie__enlaces a:hover { text-decoration: underline; }

/* ── Animaciones ────────────────────────────────────────── */
@keyframes aparecer { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(140px) scale(.94); } to { opacity: 1; transform: none; } }
.aparece { animation: aparecer 1.1s var(--suave) both; }
.r1 { animation-delay: .05s; } .r2 { animation-delay: .15s; } .r3 { animation-delay: .9s; }
.r4 { animation-delay: 1.1s; } .r5 { animation-delay: 1.25s; } .r6 { animation-delay: 1.35s; }
.sube { animation: subir 1.6s .5s var(--suave) both; }
/* Lo que aparece al bajar: oculto solo si hay JavaScript (si no, se ve todo). */
.js .revela { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--suave), transform 1s var(--suave); }
.js .revela.visto { opacity: 1; transform: none; }
.rejilla .revela:nth-child(2) { transition-delay: .08s; }
.rejilla .revela:nth-child(3) { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aparece, .sube { animation: none; }
  .js .revela { opacity: 1; transform: none; transition: none; }
  .historia__img, .historia__paso { transition: none; }
}

/* ── Páginas legales y de soporte ───────────────────────── */
.legal { padding: clamp(56px, 8vw, 96px) 22px clamp(80px, 10vw, 120px); }
.legal__texto { max-width: 760px; margin: 0 auto; color: var(--tinta); }
.legal__texto h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; margin-bottom: 28px; }
.legal__texto h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 56px 0 16px; }
.legal__texto h3 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 36px 0 12px; }
.legal__texto h4 { font-size: 18px; font-weight: 700; margin: 26px 0 8px; }
.legal__texto p, .legal__texto li { font-size: 17px; line-height: 1.6; color: #333336; }
.legal__texto p { margin: 0 0 16px; }
.legal__texto ul, .legal__texto ol { margin: 0 0 18px; padding-left: 1.3em; }
.legal__texto ul { list-style: disc; } .legal__texto ol { list-style: decimal; }
.legal__texto li { margin: 6px 0; }
.legal__texto hr { border: 0; border-top: 1px solid #d2d2d7; margin: 48px 0; }
.legal__texto a { color: #0066cc; overflow-wrap: anywhere; }
.tabla { overflow-x: auto; margin: 0 0 22px; border: 1px solid #d2d2d7; border-radius: 14px; }
.tabla table { border-collapse: collapse; width: 100%; font-size: 15px; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: 12px 14px; border-top: 1px solid #e5e5ea; line-height: 1.5; color: #333336; }
.tabla tr:first-child th, .tabla tr:first-child td { border-top: 0; }
.tabla thead th { background: #f5f5f7; font-weight: 600; }
.tabla th[scope="row"] { font-weight: 600; width: 30%; min-width: 130px; background: #fafafc; }

/* Que la barra fija no tape el título al saltar a una sección. */
[id] { scroll-margin-top: 64px; }

/* Dos iPhones en el bloque de seguridad */
.pareja { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(28px, 6vw, 72px); margin: clamp(56px, 7vw, 80px) auto 0; }
.pareja__item { margin: 0; text-align: center; }
.iphone--pequeno { width: min(250px, 66vw); box-shadow: inset 0 0 0 1.5px #4a4a4d, 0 0 0 1px #000, 0 30px 70px -20px rgba(0, 0, 0, .35); }
.pareja__item figcaption { margin-top: 18px; font-size: 17px; font-weight: 600; color: var(--gris-sobre-blanco); }