/* ============================================================================
   Sabrio · Estilo C: claro, futurista, glass. Gradiente #0ECF9A → #12B3D6 → #7C5CFF.
   Solo modo claro (§5), igual que la app.

   Sin dependencias externas a propósito: nada de Google Fonts ni CDN. Servir una fuente desde un
   tercero envía la IP de cada visitante a ese tercero, y esta es la web de una app de salud (§3).
   Se usa la pila del sistema, que en iPhone y Mac —de donde vendrá la mayoría— ya es SF Pro.
   ============================================================================ */

:root {
  --brand-start: #0ECF9A;
  --brand-mid:   #12B3D6;
  --brand-end:   #7C5CFF;
  --brand-deep:  #0B7186;   /* enlaces: brand-mid no contrasta lo bastante sobre blanco */

  --ink:       #0E1726;
  --ink-soft:  #5B6472;
  --ink-faint: #8A93A0;

  --surface: #F7F9FC;
  --card:    #FFFFFF;
  --linea:   #E6EBF2;

  --radio:   24px;
  --sombra:  0 1px 2px rgba(14,23,38,.04), 0 8px 28px rgba(14,23,38,.06);
  --sombra-alta: 0 2px 6px rgba(14,23,38,.05), 0 18px 48px rgba(14,23,38,.10);

  --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto,
            Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  /* Malla de color muy suave de fondo: da profundidad sin competir con el contenido. */
  background:
    radial-gradient(900px 520px at 8% -6%,  rgba(14,207,154,.10), transparent 62%),
    radial-gradient(900px 620px at 104% 4%, rgba(124,92,255,.10), transparent 58%),
    var(--surface);
  background-attachment: fixed;
}

h1, h2, h3 { line-height: 1.18; letter-spacing: -0.022em; font-weight: 700; margin: 0; }

a { color: var(--brand-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-end); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- Hero ---- */

header.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(56px, 9vw, 92px) 0 clamp(44px, 6vw, 68px);
  color: var(--ink);
}

/* Dos capas: la malla de marca y un velo blanco que la aclara, para que el texto oscuro contraste
   de sobra (AA) sin renunciar al color. Un hero con texto blanco sobre gradiente saturado se ve
   bonito en la maqueta y se lee mal en el móvil, al sol. */
header.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(720px 440px at 10% -4%,  rgba(14,207,154,.75), transparent 58%),
    radial-gradient(780px 500px at 92% 2%,   rgba(124,92,255,.62), transparent 56%),
    radial-gradient(900px 520px at 50% 108%, rgba(18,179,214,.62), transparent 60%);
}
/* Velo mucho más ligero que el primer intento: con .62 arriba el color se perdía y el hero quedaba
   gris. Aquí solo se aclara lo justo para que el titular oscuro siga en AA. */
header.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.58) 55%,
                                       rgba(247,249,252,.92) 88%, var(--surface));
}

.hero .logo {
  width: clamp(96px, 14vw, 132px); height: auto; display: block; margin: 0 auto 20px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.95);   /* separa el icono del fondo claro del hero */
  box-shadow: 0 18px 44px rgba(18,80,120,.22), 0 3px 10px rgba(14,23,38,.08);
  animation: entrada .7s cubic-bezier(.22,.9,.28,1) both;
}

/* La animación se queda SOLO en el logo, que es decorativo. Encadenarla también en el titular, el
   subtítulo y el destacado obligaba a partir de `opacity: 0`: si por cualquier motivo la animación no
   corre (extensión, ahorro de batería, un motor que la ignore), el mensaje de la portada se queda
   invisible. El texto que vende la app no puede depender de que un keyframe se ejecute. */
@keyframes entrada {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.hero .marca {
  margin: 0 0 18px;
  font-size: .82rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-deep);
}

.hero h1 {
  font-size: clamp(2.05rem, 5.6vw, 3.7rem);
  max-width: 22ch; margin: 0 auto 18px;
}

.degradado {
  background: linear-gradient(100deg, var(--brand-start), var(--brand-mid) 45%, var(--brand-end));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.hero .lead {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--ink-soft); max-width: 52ch; margin: 0 auto 28px;
}

/* Insignia glass: el mismo material que la app (Liquid Glass, iOS 26). */
.chip {
  display: inline-block; margin: 0;
  padding: 11px 22px; border-radius: 999px;
  font-size: .94rem; font-weight: 600; color: var(--brand-deep);
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 10px 30px rgba(18,80,120,.12);
}

/* Destacado "LO + POTENTE" del onboarding, traído al hero. */
.destacado {
  display: flex; align-items: center; gap: 16px; text-align: left;
  max-width: 520px; margin: 34px auto 0;
  padding: 18px 20px; border-radius: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(124,92,255,.24);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 34px rgba(18,80,120,.10);
}
.destacado .marco {
  flex: 0 0 54px; height: 54px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: linear-gradient(140deg, var(--brand-start), var(--brand-mid) 50%, var(--brand-end));
  box-shadow: 0 8px 20px rgba(18,179,214,.32);
}
.destacado .etiqueta {
  display: block; font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-end); margin-bottom: 3px;
}
.destacado strong { font-size: 1.02rem; font-weight: 650; color: var(--ink); }

/* ------------------------------------------------------------ Secciones ---- */

main { padding-bottom: 24px; }

.seccion { padding: clamp(48px, 7vw, 76px) 24px; }
main > .seccion:first-child { padding-top: clamp(34px, 5vw, 52px); }

.titulo-seccion {
  font-size: clamp(1.6rem, 3.6vw, 2.35rem);
  text-align: center; margin-bottom: 10px;
}
.sub-seccion {
  text-align: center; color: var(--ink-soft); margin: 0 auto clamp(28px, 4vw, 44px);
  max-width: 44ch; font-size: 1.05rem;
}
.titulo-seccion + .grid, .titulo-seccion + .lista { margin-top: clamp(28px, 4vw, 44px); }

/* Banda de color para separar bloques del relato sin usar líneas. */
.banda {
  padding: clamp(52px, 8vw, 88px) 0;
  background:
    radial-gradient(700px 380px at 20% 0%, rgba(18,179,214,.10), transparent 65%),
    radial-gradient(700px 420px at 90% 100%, rgba(124,92,255,.10), transparent 60%),
    #FFFFFF;
  border-block: 1px solid var(--linea);
}

/* ------------------------------------------------------- Tres beneficios ---- */

.bloques {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.bloque {
  position: relative;
  background: var(--card);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 30px 28px 32px;
  box-shadow: var(--sombra);
  transition: transform .22s ease, box-shadow .22s ease;
}
.bloque:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }

/* Filo superior con el gradiente de marca: firma visual barata y consistente. */
.bloque::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: var(--radio) var(--radio) 0 0;
  background: linear-gradient(90deg, var(--brand-start), var(--brand-mid) 50%, var(--brand-end));
}

.bloque .emoji {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 18px;
  font-size: 27px; border-radius: 18px;
  background: linear-gradient(140deg, rgba(14,207,154,.26), rgba(18,179,214,.20) 55%, rgba(124,92,255,.26));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.bloque h2 { font-size: 1.28rem; margin-bottom: 10px; }
.bloque p { margin: 0 0 10px; color: var(--ink-soft); }
.bloque p:last-child { margin-bottom: 0; }

/* --------------------------------------------------- Problemas/soluciones ---- */

.lista { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; }

.lista li {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 17px 20px; margin-bottom: 12px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--linea);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(14,23,38,.03);
}
.lista li:last-child { margin-bottom: 0; }

.lista li > span:first-child {
  flex: 0 0 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; border-radius: 50%;
}
/* El ámbar marca el problema y el color de marca la solución: el mismo código que en la app. */
.problemas li > span:first-child  { background: rgba(246,193,75,.20); }
.soluciones li > span:first-child { background: rgba(18,179,214,.16); }

.pie-seccion {
  text-align: center; margin: clamp(26px, 4vw, 38px) auto 0; max-width: 44ch;
  color: var(--ink-soft); font-size: 1.02rem; font-style: italic;
}

/* ------------------------------------------------------------- Detalles ---- */

.grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  max-width: 1000px; margin-inline: auto;
}

.tarjeta {
  background: var(--card);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 26px;
  box-shadow: var(--sombra);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tarjeta:hover {
  transform: translateY(-2px); box-shadow: var(--sombra-alta);
  border-color: rgba(18,179,214,.35);
}
.tarjeta h3 { font-size: 1.1rem; margin-bottom: 8px; }
.tarjeta p  { margin: 0; color: var(--ink-soft); font-size: .98rem; }

/* --------------------------------------------------------------- Aviso ---- */

.aviso {
  max-width: 780px; margin: 0 auto;
  border: 1px solid rgba(154,91,0,.22);
  border-left: 4px solid #9A5B00;
  background: #FFFAF2;
  border-radius: 6px 18px 18px 6px;
  padding: 20px 24px;
}
.aviso p { margin: 0; font-size: .96rem; color: #4A3410; }
.aviso strong { color: #7A4700; }

/* --------------------------------------------------------------- Cierre ---- */

.cierre {
  text-align: center; max-width: 640px; margin: 0 auto;
  padding: clamp(38px, 6vw, 56px) 32px;
  border-radius: 28px;
  background:
    radial-gradient(600px 300px at 50% -20%, rgba(18,179,214,.14), transparent 70%),
    var(--card);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra);
}
.cierre h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 10px; }
.cierre p  { margin: 0; color: var(--ink-soft); }

/* ------------------------------------------------------------------ Pie ---- */

footer {
  border-top: 1px solid var(--linea);
  background: rgba(255,255,255,.7);
  margin-top: 24px;
  padding: 38px 0 56px;
  color: var(--ink-faint);
  font-size: .88rem;
  text-align: center;
}
.pie-links { margin-bottom: 16px; }
.pie-links a {
  display: inline-block; margin: 0 14px 6px; font-weight: 600; font-size: .95rem;
  color: var(--ink-soft); text-decoration: none;
}
.pie-links a:hover { color: var(--brand-deep); text-decoration: underline; }
.pie-fino { margin: 6px 0; }

/* ------------------------------------------ Documentos legales (Markdown) ---- */

.doc {
  background: var(--card);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(26px, 5vw, 44px);
  box-shadow: var(--sombra);
  max-width: 760px; margin: 0 auto;
}
.doc h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: .6em; }
.doc h2 { font-size: 1.25rem; margin-top: 2em; margin-bottom: .5em; }
.doc h3 { font-size: 1.05rem; margin-top: 1.6em; margin-bottom: .4em; }
.doc p, .doc li { color: var(--ink-soft); }
.doc li { margin-bottom: .4em; }
.doc table {
  width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .92rem;
  display: block; overflow-x: auto;
}
.doc th, .doc td { border: 1px solid var(--linea); padding: 9px 12px; text-align: left; vertical-align: top; }
.doc th { background: var(--surface); color: var(--ink); font-weight: 600; }
.doc blockquote {
  border-left: 3px solid var(--brand-mid); margin: 1.5em 0; padding: 6px 20px;
  color: var(--ink-soft); background: rgba(18,179,214,.05); border-radius: 0 10px 10px 0;
}
.doc code {
  background: var(--surface); padding: 2px 6px; border-radius: 5px; font-size: .9em;
  border: 1px solid var(--linea);
}
.volver {
  display: inline-block; margin-bottom: 22px; font-size: .95rem; font-weight: 600;
  text-decoration: none;
}
.volver:hover { text-decoration: underline; }

/* --------------------------------------------------------- Accesibilidad ---- */

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

:focus-visible { outline: 3px solid var(--brand-mid); outline-offset: 3px; border-radius: 6px; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .seccion { padding-inline: 18px; }
  .lista li { padding: 15px 16px; gap: 13px; }
  .destacado { flex-direction: row; padding: 16px; gap: 13px; }
}

/* Páginas legales: mismo aire que la portada, con la malla de marca arriba para que no parezcan
   un documento pegado en otro sitio. */
.pagina-legal { padding-top: clamp(26px, 5vw, 44px); }
.pagina-legal::before {
  content: "";
  position: fixed; inset: 0 0 auto 0; height: 320px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(620px 300px at 12% 0%, rgba(14,207,154,.30), transparent 62%),
    radial-gradient(640px 320px at 90% 4%, rgba(124,92,255,.26), transparent 60%);
}