/* El sitio de Ponos.
 *
 * La paleta sale de `lib/core/theme/app_theme.dart`, no de la nada: negro puro
 * como la app, azul #4C9AFF de acento y la tinta levemente fría #E8EDF7. Que la
 * web y el producto se vean del mismo lado no es cosmética — es lo que hace que
 * alguien que llega desde la App Store sepa que llegó bien.
 *
 * Tipografía del sistema y ninguna petición externa. Esto no es pereza: la
 * política de privacidad de este mismo sitio promete que no hay terceros, y
 * cargar Google Fonts para escribirlo la desmentiría en la misma carga. Además
 * el sistema en un iPhone es San Francisco, que es exactamente lo que queremos.
 */

:root {
  color-scheme: dark;

  --fondo:       #000000;
  --sup-1:       #0C0E12;
  --sup-2:       #111419;
  --borde:       #1E242E;
  --borde-vivo:  #2A303B;

  --tinta:       #E8EDF7;
  --tinta-suave: #C3CBDA;
  --tenue:       #838D9E;

  --acento:      #4C9AFF;
  --acento-hondo:#0A63E0;

  --radio:       14px;

  /* Ancho completo. El tope de 120rem (1920px) no se ve en un monitor normal —
     está para que en una pantalla de 5K la cabecera no termine con la marca y
     el selector de idioma separados por medio metro de negro. */
  --ancho:       120rem;

  /* La medida de lectura NO crece con el contenedor: un párrafo de 1700px de
     ancho es ilegible por más pantalla que haya. Lo que se ensancha es la
     grilla y las barras; la prosa se queda acá. */
  --prosa:       68ch;

  /* El aire crece con la pantalla en vez de saltar en un breakpoint. */
  --margen:      clamp(1.25rem, 4vw, 4rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* El resplandor del hero se sale a propósito por los costados. `clip` deja
     que se salga sin generar barra horizontal; `hidden` habría creado un
     contenedor de scroll y roto el `position: sticky` de la cabecera. */
  overflow-x: clip;
  background: var(--fondo);
  color: var(--tinta-suave);
  font: 400 16px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", Roboto, system-ui, sans-serif;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--acento); color: #00121F; }

/* El resplandor del acento, anclado al BORDE SUPERIOR del documento y no al
   hero. Colgado del hero empezaba donde empieza el `<main>` —debajo del padding
   superior— y dejaba una franja negra entre la cabecera y el degradado.
   Acá pasa por detrás de la cabecera, que es semitransparente y lo deja ver:
   el color arranca en el pixel cero. */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 46rem;
  background: radial-gradient(
    75% 100% at 28% 0%,
    color-mix(in srgb, var(--acento) 15%, transparent),
    transparent 72%);
  pointer-events: none;
  z-index: 0;
}
/* El contenido va por encima del resplandor; la cabecera ya tiene su z-index. */
main, footer { position: relative; z-index: 1; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- Cabecera */

header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--borde);
  /* Semitransparente con desenfoque: el contenido pasa por debajo en vez de
     desaparecer detrás de una banda opaca. Con respaldo sólido, porque Firefox
     puede tener el desenfoque apagado. */
  background: rgba(0, 0, 0, .72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
@supports not (backdrop-filter: blur(1px)) {
  header { background: #000; }
}

header .barra {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: .875rem var(--margen);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--tinta);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
}
.marca svg { height: 20px; width: auto; display: block; }
.marca:hover { color: var(--acento); }

header nav {
  margin-left: auto;
  display: flex;
  gap: 1.25rem;
}
header nav a {
  color: var(--tenue);
  text-decoration: none;
  font-size: .9375rem;
  transition: color .15s ease;
}
header nav a:hover { color: var(--tinta); }

/* Control segmentado, no dos botones sueltos: son una sola decisión. */
.idiomas {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--borde-vivo);
  border-radius: 999px;
}
.idiomas button {
  appearance: none;
  background: none;
  border: 0;
  color: var(--tenue);
  border-radius: 999px;
  padding: .25rem .625rem;
  font: inherit;
  font-size: .8125rem;
  line-height: 1.4;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.idiomas button:hover { color: var(--tinta); }
.idiomas button[aria-pressed="true"] {
  background: var(--tinta);
  color: #000;
  font-weight: 500;
}

/* ---------------------------------------------------------------- Contenido */

main {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--margen) 5rem;
}

section[lang] { display: none; }
body[data-idioma="en"] section[lang="en"],
body[data-idioma="es"] section[lang="es"] { display: block; }

h1, h2, h3 {
  color: var(--tinta);
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 5.5vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 600;
  margin-bottom: .5rem;
}

h2 {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  font-weight: 600;
  margin: 3.5rem 0 1rem;
}

h3 {
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: -.01em;
  font-weight: 600;
  margin: 2rem 0 .5rem;
}

p, li { max-width: var(--prosa); text-wrap: pretty; }
p { margin: 0 0 1rem; }

ul { padding-left: 1.15rem; margin: 0 0 1rem; }
li { margin: .4rem 0; }
li::marker { color: var(--tenue); }

strong { color: var(--tinta); font-weight: 600; }

a {
  color: var(--acento);
  text-decoration-color: color-mix(in srgb, var(--acento) 40%, transparent);
  text-underline-offset: .2em;
  transition: text-decoration-color .15s ease;
}
a:hover { text-decoration-color: currentColor; }

.fecha {
  color: var(--tenue);
  font-size: .9375rem;
  margin-bottom: 2.5rem;
}

.caja {
  border: 1px solid var(--borde-vivo);
  border-radius: var(--radio);
  background: var(--sup-1);
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
}
.caja > :first-child { margin-top: 0; }
.caja > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ Portada */

.hero {
  position: relative;
  padding: clamp(1rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3.5rem);
  /* Alto mínimo para que las fichas tengan dónde flotar. Sin esto la caja mide
     lo que mide el texto y las siete se amontonan sobre el titular. */
  min-height: min(70vh, 32rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* El `stretch` por defecto estiraría la pastilla del CTA a toda la columna. */
.hero-texto { display: flex; flex-direction: column; align-items: flex-start; }

.hero h1 {
  font-size: clamp(2.25rem, 7vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  max-width: 17ch;
}

.bajada {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
  color: var(--tinta-suave);
  max-width: 46ch;
  margin-top: 1.25rem;
}


/* La suscripción se distingue del resto: es lo único que cuesta plata. */
.caja.destacada {
  border-color: color-mix(in srgb, var(--acento) 30%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--acento) 7%, transparent),
      transparent 60%),
    var(--sup-1);
}
/* En pantalla ancha la caja se parte: la oferta a la izquierda, la letra chica
   —que es larga y la exige Apple— a la derecha. Sin esto quedaba una caja de
   1700px con el texto amontonado en el tercio izquierdo. */
.caja.destacada { display: grid; gap: 1.5rem; }
@media (min-width: 60rem) {
  .caja.destacada {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
}
.oferta > :last-child, .letra-chica > :last-child { margin-bottom: 0; }

.precio {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  letter-spacing: -.02em;
  color: var(--tinta);
  font-weight: 600;
}
.chico { font-size: .875rem; color: var(--tenue); }

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

footer {
  border-top: 1px solid var(--borde);
  margin-top: 2rem;
}
footer .barra {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 2rem var(--margen) 3.5rem;
  color: var(--tenue);
  font-size: .875rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: center;
}
footer a { color: var(--tenue); text-decoration: none; }
footer a:hover { color: var(--tinta); }
footer .copy { margin-left: auto; }

/* ------------------------------------------------------------- Pantallitas */

/* Debajo de esto la navegación del encabezado estorba más de lo que ayuda: los
   mismos links están en el pie de las tres páginas. */
@media (max-width: 30rem) {
  header nav { display: none; }
  /* El `auto` que empujaba el selector a la derecha vivía en el nav, así que al
     esconderlo el selector se venía contra la marca. */
  .idiomas { margin-left: auto; }
  footer .copy { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ======================================================== Fichas flotantes */

/* Las fichas son los colores de grupo muscular de la app
   (`AppTheme._colores`), no una paleta decorativa: naranja pecho, violeta
   espalda, verde cuádriceps, celeste hombro. Y el texto va en `#0B0D11`, que es
   el `sobreColor` con el que la app escribe arriba de un chip de color —
   blanco sobre el amarillo sería ilegible. */

.orbita {
  position: absolute;
  inset: -2rem 0 0;
  pointer-events: none;
  z-index: -1;
}

.ficha {
  position: absolute;
  padding: .45rem .95rem;
  border-radius: 999px;
  white-space: nowrap;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #0B0D11;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c) 88%, #ffffff 12%),
    color-mix(in srgb, var(--c) 82%, #000000 18%));
  box-shadow:
    0 14px 34px -10px color-mix(in srgb, var(--c) 60%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .35);

  /* `rotate` y `translate` son propiedades independientes de `transform`, así
     que el giro, el paralaje y el flotar se componen sin pisarse. Antes había
     que meter los tres en un solo `transform` y cualquiera anulaba al otro. */
  rotate: var(--r, 0deg);
  translate: calc(var(--mx, 0px) * var(--p, 1)) calc(var(--my, 0px) * var(--p, 1));
  transition: translate .5s cubic-bezier(.2, .8, .2, 1);
  animation: flotar var(--dur, 7s) ease-in-out var(--retraso, 0s) infinite;
}

/* Las de atrás: desenfocadas y apagadas. Es lo que da profundidad — sin esto
   son siete pastillas en el mismo plano. */
.ficha.lejos {
  filter: blur(3px);
  opacity: .5;
  scale: .92;
}

@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* El texto del hero ocupa la franja izquierda, de un 20% a un 80% de alto.
   Las fichas viven fuera de esa zona: arriba del titular y en la mitad derecha.
   Una pastilla de color encima de un párrafo no es profundidad, es un párrafo
   ilegible. */
.f1 { top:  2%; left:  2%; --r: -11deg; --dur: 7.5s; }
.f2 { top:  4%; left: 58%; --r:   9deg; --dur: 9s;   --retraso: -2s; }
.f3 { top: 28%; left: 76%; --r:   7deg; --dur: 8s;   --retraso: -4s; }
.f4 { top: 60%; left: 87%; --r:  13deg; --dur: 10s;  --retraso: -1s; }
.f5 { top: 80%; left: 63%; --r:  -7deg; --dur: 7s;   --retraso: -3s; }
.f6 { top: 44%; left: 53%; --r:   5deg; --dur: 9.5s; --retraso: -5s; }
.f7 { top: 90%; left: 33%; --r:  -4deg; --dur: 8.5s; --retraso: -2.5s; }

/* ============================================================ Declaración */

.declaracion {
  font-size: clamp(1.375rem, 3vw, 2.125rem);
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--tinta);
  /* 26ch alcanzaba para una frase corta; con la entrada destacada más la
     explicación quedaban nueve líneas en una columna flaca. A 40 respira, y
     sigue lejos del ancho de párrafo largo. */
  max-width: 40ch;
  margin: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 4rem);
}

/* ================================================================== Bento */

.bento { display: grid; gap: 1rem; margin: 1.5rem 0; }

@media (min-width: 60rem) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .celda.ancha { grid-column: span 2; flex-direction: row; align-items: center; }
  .celda.ancha .texto { flex: 1 1 0; }
  .celda.ancha .maqueta { flex: 1.15 1 0; }
}

.celda {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: linear-gradient(180deg, var(--sup-2), var(--sup-1));
  transition: border-color .25s ease;
}
.celda:hover { border-color: var(--borde-vivo); }
.celda .texto h3 { margin: 0 0 .5rem; }
.celda .texto p { margin: 0; font-size: .9375rem; color: var(--tenue); max-width: 42ch; }

/* ============================================== Maquetas: la app en HTML */

/* Ninguna captura de pantalla. Son fragmentos de interfaz hechos con HTML y
   CSS: pesan nada, quedan nítidos en cualquier densidad, y el día que cambie un
   color de la app se actualizan cambiando una variable. */
.maqueta {
  margin-top: auto;
  padding: .875rem 1rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: rgba(0, 0, 0, .38);
  font-size: .8125rem;
}

.m-titulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--tinta);
  font-weight: 600;
  padding-bottom: .5rem;
}
.m-titulo span { color: var(--tenue); font-weight: 400; font-size: .6875rem; }

.m-serie {
  display: grid;
  grid-template-columns: 1.25rem 1fr auto;
  gap: .6rem;
  align-items: center;
  padding: .4rem 0;
  border-top: 1px solid var(--borde);
  font-variant-numeric: tabular-nums;
}
.m-serie b { color: var(--tenue); font-weight: 500; font-size: .75rem; }
.m-serie .hoy { color: var(--tinta); }
.m-serie .antes { color: var(--tenue); font-size: .75rem; }
.m-serie.vacia .hoy { color: var(--acento); }

.m-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.m-semana button {
  text-align: center;
  padding: .45rem 0 .35rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--tenue);
  font-size: .75rem;
}
.m-semana button i { display: block; height: 3px; width: 55%; margin: .35rem auto 0; border-radius: 2px; }
.m-semana .on { color: var(--tinta); border-color: var(--borde-vivo); }
.m-semana .on i { background: var(--acento); }
.m-semana .hoy {
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  background: color-mix(in srgb, var(--acento) 12%, transparent);
}

.m-pie { margin-top: .6rem; color: var(--tenue); font-size: .75rem; }

.m-macro {
  display: grid;
  grid-template-columns: 4.25rem 1fr 3rem;
  gap: .65rem;
  align-items: center;
  padding: .35rem 0;
}
.m-macro > span { color: var(--tenue); font-size: .75rem; }
.m-macro i {
  position: relative;
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--borde-vivo);
  overflow: hidden;
}
.m-macro i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v);
  background: var(--c);
  border-radius: 3px;
}
.m-macro b { color: var(--tinta); font-size: .75rem; text-align: right; font-variant-numeric: tabular-nums; }

.m-racha { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; min-height: 58px; }
.m-racha span { aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--acento) var(--i), transparent); }

.m-sync { display: flex; align-items: center; gap: .65rem; padding: .4rem 0; color: var(--tinta-suave); }
.m-sync .punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 20%, transparent);
  animation: latir 2s ease-in-out infinite;
}
.m-sync.ok .punto { background: #22C55E; box-shadow: 0 0 0 4px rgba(34,197,94,.2); animation: none; }
@keyframes latir { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--acento) 5%, transparent); } }

/* ====================================================== Aparecer al bajar */

/* La clase `js` la pone `interacciones.js` en cuanto arranca. Si el script no
   carga, esta regla no aplica y todo se ve: un error de JavaScript no puede
   dejar la página en blanco. */
.js .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.js .revelar.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ficha { animation: none; transition: none; }
  .m-sync .punto { animation: none; }
  .js .revelar { opacity: 1; transform: none; transition: none; }
}

/* Con poco ancho las fichas de los costados se comen el titular. */
@media (max-width: 46rem) {
  /* Con poco ancho no hay "mitad derecha" libre: quedan tres, arriba y abajo
     del texto, y ninguna al costado. */
  .f3, .f4, .f6 { display: none; }
  .f1 { top: 0%;  left: 2%; }
  .f2 { top: 4%;  left: 55%; }
  .f5 { top: 92%; left: 8%; }
  .f7 { top: 84%; left: 52%; }
  .ficha { font-size: .75rem; padding: .35rem .75rem; }
}

/* ------------------------------------------- Maquetas nuevas: récord y grupos */

.m-record { display: flex; align-items: baseline; gap: .6rem; padding: .35rem 0 .1rem; }
.m-record b { font-size: 1.5rem; color: var(--tinta); letter-spacing: -.02em; }
.m-record span { color: var(--tenue); font-size: .75rem; }

/* La curva va en SVG y no en una imagen: son nueve puntos, pesa 200 bytes y se
   tiñe con el acento del tema. `non-scaling-stroke` mantiene el grosor de la
   línea aunque el viewBox se estire para llenar la tarjeta. */
.m-curva { display: block; width: 100%; height: 44px; margin: .2rem 0 .7rem; }
.m-curva polyline {
  fill: none;
  stroke: var(--acento);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.m-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.m-chips span {
  font-size: .6875rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
}

/* ------------------------------------------------------ Frase con entrada */

.declaracion b { color: var(--acento); font-weight: 600; }

/* ------------------------------------------------------------- Lista larga */

/* Lo que no da para tarjeta pero existe. Sin maqueta y sin adorno: es una lista
   de lo que hay, y su valor está en que se lea entera de un vistazo. */
.lista {
  display: grid;
  gap: .55rem 2.5rem;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
@media (min-width: 48rem) { .lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .lista { grid-template-columns: repeat(3, 1fr); } }

.lista li {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  margin: 0;
  max-width: none;
  font-size: .9375rem;
  color: var(--tinta-suave);
}
.lista li::before {
  content: "✓";
  flex: none;
  color: var(--acento);
  font-size: .8125rem;
}

/* ======================================================= Tarjetas que hacen */

/* Todo lo que se puede tocar es un `<button>` de verdad, no un div con un
   listener: así se llega con el tabulador y se activa con Enter. Una maqueta
   que solo responde al mouse es una maqueta que la mitad de la gente no puede
   probar. */
.m-semana button,
.m-macro.sumable,
button.m-serie,
button.m-sync,
.m-vasos button,
.m-supl button {
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.m-semana button, .m-macro.sumable, button.m-serie, button.m-sync {
  background: none;
  color: inherit;
  text-align: left;
  width: 100%;
  /* El `<button>` trae borde propio. Se saca y se devuelve solo la línea de
     arriba que separa una serie de la siguiente. */
  border: 0;
}
button.m-serie { border-top: 1px solid var(--borde); }
.m-semana button { text-align: center; }
button.m-serie { display: grid; }
button.m-sync { border: 0; }
.m-macro.sumable { border: 0; padding: .35rem 0; }

.m-semana button:hover, .m-macro.sumable:hover { border-color: var(--acento); }
.m-macro.sumable:hover b { color: var(--acento); }
button.m-serie:hover .hoy { color: var(--acento); }
button.m-serie.hecha .hoy { color: var(--tinta); }
button.m-serie.hecha { background: color-mix(in srgb, var(--acento) 7%, transparent); }

button.m-sync.ok .punto { background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); animation: none; }

/* --- Agua y suplementos --- */
.m-vasos { display: flex; gap: 5px; margin: .55rem 0 .7rem; }
.m-vasos button {
  flex: 1;
  height: 28px;
  border: 1px solid var(--borde-vivo);
  border-radius: 5px;
  background: transparent;
}
.m-vasos button.lleno {
  background: color-mix(in srgb, var(--acento) 55%, transparent);
  border-color: var(--acento);
}
.m-vasos button:hover { border-color: var(--acento); }

.m-supl { display: flex; flex-wrap: wrap; gap: .35rem; }
.m-supl button {
  padding: .25rem .65rem;
  font-size: .6875rem;
  color: var(--tenue);
  background: transparent;
  border: 1px solid var(--borde-vivo);
  border-radius: 999px;
}
.m-supl button.hecho {
  color: #22C55E;
  border-color: color-mix(in srgb, #22C55E 45%, transparent);
  background: color-mix(in srgb, #22C55E 12%, transparent);
}
.m-supl button.hecho::before { content: "✓ "; }

/* La pantalla no es negro plano: un resplandor tenue arriba hace que la isla
   —que es negra— se despegue. En un iPhone real con fondo negro la isla
   desaparece; en una maqueta eso se lee como un error de dibujo. */

.app-tabs .on { color: var(--acento); font-weight: 600; }

.app-agua i {
  position: absolute; inset: 0 auto 0 0;
  width: var(--v);
  border-radius: 3px;
  background: var(--acento);
}

/* ------------------------------------------------------ El botón de la App Store */

/* Sin el logo de Apple: su badge oficial es un recurso de ellos con reglas de
   uso propias, y traerlo obligaría a hospedar una imagen de terceros en un
   sitio que promete no cargar nada externo. Un botón de texto cumple igual. */
.boton {
  display: inline-block;
  margin-top: .5rem;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  background: var(--acento);
  color: #00121F;
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.boton:hover { background: #6dadff; transform: translateY(-1px); }
.boton:active { transform: none; }