/* pomondor.com — la misma paleta que la app, el paywall y las capturas: siempre oscuro. */

@property --acento {
  syntax: "<color>";
  inherits: true;
  initial-value: #E44B4B;
}

:root {
  --fondo: #060608;
  --texto: #F4F2EE;
  --suave: #9A9AA0;
  --tenue: #808086;
  --tarjeta: #111114;
  --borde: #242428;
  --acento: #E44B4B;
  --ancho: 1120px;
  color-scheme: dark;
  transition: --acento 0.9s ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--acento) 45%, transparent); }

/* ── El hilo de arriba: el de las capturas, con el punto que avanza al bajar ─────────── */

.hilo {
  position: fixed; inset: 0 0 auto; height: 1px; z-index: 30;
  background: linear-gradient(90deg, transparent, #ffffff1f 12%, #ffffff1f 88%, transparent);
}
.punto {
  position: absolute; top: -3.5px; left: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 6px var(--acento), 0 0 22px var(--acento);
  transform: translateX(calc(var(--avance, 0) * (100vw - 8px)));
}

/* ── Cabecera ────────────────────────────────────────────────────────────────────────── */

.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px max(20px, env(safe-area-inset-left));
  /* Fondo con desenfoque: con el degradado transparente de antes, el texto que pasaba por
     debajo al bajar se mezclaba con la marca. */
  background: #060608eb;
  -webkit-backdrop-filter: saturate(150%) blur(18px);
          backdrop-filter: saturate(150%) blur(18px);
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca img { width: 26px; height: 26px; }
.marca span { font-weight: 700; font-size: 13px; letter-spacing: 0.22em; }
.cabecera-derecha { display: flex; align-items: center; gap: 10px; }
.idioma-boton {
  background: none; border: 1px solid var(--borde); border-radius: 99px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; padding: 6px 11px;
  color: var(--suave); cursor: pointer;
}
.idioma-boton:hover { color: var(--texto); border-color: #3a3a40; }

.pastilla {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--acento); color: #fff; text-decoration: none; font-weight: 600;
  border-radius: 99px; padding: 14px 26px;
  box-shadow: 0 8px 28px -6px color-mix(in srgb, var(--acento) 55%, transparent);
}
.pastilla.pequena { padding: 7px 14px; font-size: 13px; box-shadow: none; }
.pastilla.grande { padding: 17px 32px; font-size: 17px; }

/* ── Secciones ───────────────────────────────────────────────────────────────────────── */

.seccion {
  --c: #E44B4B;
  position: relative;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 18vh 24px;
}
.etiqueta {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--suave);
}
.etiqueta b { color: var(--c); letter-spacing: 0.1em; }
.etiqueta i { width: 28px; height: 1px; background: #ffffff33; }
.titular {
  margin: 18px 0 0;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.punto-final { color: var(--c); }
.sub {
  margin: 22px 0 0; max-width: 34em;
  color: var(--suave); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.5;
}
.nota { color: var(--tenue); font-size: 14px; margin: 18px 0 0; }

.dos-columnas {
  display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 64px;
}
.dos-columnas.invertida .texto { order: 2; }
.centrada { text-align: center; }
.centrada .sub { margin-left: auto; margin-right: auto; }
.visual { display: flex; flex-direction: column; align-items: center; position: relative; }
.centrada > .visual { margin-top: 64px; }

/* Lo que entra al bajar. */
.aparece { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.2,1); }
.aparece.visible { opacity: 1; transform: none; }

/* ── 01 · Portada y el aro ───────────────────────────────────────────────────────────── */

.portada { text-align: center; padding-top: 12vh; padding-bottom: 12vh; }
.portada .sub { margin-left: auto; margin-right: auto; }
.aro-envoltura {
  position: relative; width: min(78vw, 46vh, 520px); min-width: min(78vw, 300px); aspect-ratio: 1; margin: 5vh auto 0;
}
.aro-envoltura::before {
  /* El brillo que respira detrás del aro, como en la captura 01. */
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 22%, transparent), transparent 68%);
  filter: blur(30px);
  animation: respira 8s ease-in-out infinite;
}
@keyframes respira { 50% { transform: scale(1.12); opacity: 0.6; } }
.aro {
  position: relative; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.aro svg { width: 100%; height: 100%; overflow: visible; }
.aro-fondo, .aro-avance { fill: none; stroke-width: 14; }
.aro-fondo { stroke: color-mix(in srgb, var(--c) 16%, transparent); }
.aro-avance {
  stroke: var(--c); stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 200px 200px;
  filter: drop-shadow(0 0 10px var(--c)) drop-shadow(0 0 28px color-mix(in srgb, var(--c) 60%, transparent));
  transition: stroke 1s ease;
}
.marcas line { stroke: #ffffff26; stroke-width: 1.4; stroke-linecap: round; }
.marcas line.larga { stroke: #ffffff59; stroke-width: 2; }
.aro-centro {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.aro-fase { color: var(--suave); font-size: clamp(0.85rem, 1.6vw, 1rem); font-weight: 500; }
.aro-tiempo {
  font-size: clamp(3.6rem, 12vw, 7.2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.aro-accion {
  color: var(--tenue); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.3s;
}
.aro:hover .aro-accion, .aro:focus-visible .aro-accion, .aro.en-pausa .aro-accion { opacity: 1; }
.aro.en-pausa .aro-tiempo { animation: parpadeo 1.6s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0.35; } }
.aro:focus-visible { outline: 2px solid var(--c); outline-offset: 10px; }

/* ── Los móviles ─────────────────────────────────────────────────────────────────────── */

.movil {
  --w: min(300px, 72vw);
  position: relative; width: var(--w); aspect-ratio: 552 / 1200;
  padding: calc(var(--w) * 0.032);
  border-radius: calc(var(--w) * 0.16);
  background: linear-gradient(145deg, #2a2a2f, #0d0d10 40%, #1c1c20);
  box-shadow:
    inset 0 0 0 1px #ffffff14,
    0 50px 120px -50px color-mix(in srgb, var(--c) 70%, transparent),
    0 30px 80px -30px #000;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.movil::after {
  /* La isla dinámica. */
  content: ""; position: absolute; left: 50%; top: calc(var(--w) * 0.058);
  width: 29%; height: calc(var(--w) * 0.085); transform: translateX(-50%);
  border-radius: 99px; background: #000;
}
.movil.sin-isla::after { display: none; }
.pantalla {
  position: absolute; inset: calc(var(--w) * 0.032);
  width: calc(100% - var(--w) * 0.064); height: calc(100% - var(--w) * 0.064);
  border-radius: calc(var(--w) * 0.13); object-fit: cover; background: #000;
}
.movil.horizontal {
  --w: min(620px, 88vw);
  aspect-ratio: 1200 / 552;
  border-radius: calc(var(--w) * 0.075);
  padding: calc(var(--w) * 0.015);
}
.movil.horizontal::after {
  left: calc(var(--w) * 0.028); top: 50%; width: calc(var(--w) * 0.04); height: 28%;
  transform: translateY(-50%);
}
.movil.horizontal .pantalla {
  inset: calc(var(--w) * 0.015);
  width: calc(100% - var(--w) * 0.03); height: calc(100% - var(--w) * 0.03);
  border-radius: calc(var(--w) * 0.062);
  transition: opacity 0.8s ease;
}
.capa-sombra { opacity: 0; }
.modo-sombra .capa-sombra { opacity: 1; }

.levantable { transform: perspective(1200px) rotateX(14deg) translateY(10px); }
.levantable:hover, .visible > .levantable { transform: perspective(1200px) rotateX(0) translateY(-14px); }

/* ── 02 · Esferas ────────────────────────────────────────────────────────────────────── */

.esferas { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; max-width: 440px; }
.esferas button {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 99px;
  padding: 8px 15px; font-size: 14px; color: var(--suave); cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.esferas button:hover { color: var(--texto); }
.esferas button[aria-selected="true"] {
  color: var(--texto); border-color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, var(--tarjeta));
}
.esfera-video { transition: opacity 0.35s ease; cursor: pointer; }
.esfera-video.cambiando { opacity: 0; }

/* ── 04 · Sombra ─────────────────────────────────────────────────────────────────────── */

.segmentado {
  display: inline-flex; margin-top: 30px; padding: 3px; border-radius: 99px;
  background: var(--tarjeta); border: 1px solid var(--borde);
}
.segmentado button {
  background: none; border: 0; border-radius: 99px; padding: 8px 20px; font-size: 14px;
  color: var(--suave); cursor: pointer; transition: background 0.3s, color 0.3s;
}
.segmentado button[aria-checked="true"] { background: #2a2a2e; color: var(--texto); }
.prueba { margin: 64px auto 0; max-width: 30em; color: var(--suave); font-size: 15px; }
.prueba strong { color: var(--texto); font-weight: 600; }
.ocho { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.ocho i {
  width: 7px; height: 7px; border-radius: 50%; background: #2c2c31;
  transition: background 0.3s, box-shadow 0.3s;
}
.ocho i.lleno { background: var(--c); box-shadow: 0 0 10px var(--c); }

.sombra {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #0b0b0c; opacity: 0; pointer-events: none;
  transition: opacity 1.4s ease;
}
.sombra.activa { opacity: 1; pointer-events: auto; cursor: none; }
.sombra-tiempo {
  font-size: clamp(5rem, 22vw, 17rem); font-weight: 600; letter-spacing: -0.02em;
  color: #2b2b2e; font-variant-numeric: tabular-nums;
}
.sombra-pista { color: #3a3a3e; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ── 05 · Código de sala ─────────────────────────────────────────────────────────────── */

.codigo { display: flex; gap: 8px; margin-top: 32px; }
.codigo span {
  width: 46px; height: 58px; display: grid; place-items: center;
  border-radius: 12px; background: var(--tarjeta); border: 1px solid var(--borde);
  font: 600 24px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--texto);
  opacity: 0.12; transform: translateY(8px);
  transition: opacity 0.35s, transform 0.35s, border-color 0.35s;
}
.codigo span.on { opacity: 1; transform: none; }
.codigo span.ultimo { border-color: var(--c); box-shadow: 0 0 18px -4px var(--c); }
.nota.izquierda { text-align: left; }

/* ── 06 · Muro ───────────────────────────────────────────────────────────────────────── */

.muro { min-height: 560px; }
.entrada {
  position: absolute; width: 250px; padding: 14px 16px; border-radius: 16px;
  background: #17171b; border: 1px solid #2e2e34;
  box-shadow: 0 24px 60px -20px #000;
  font-size: 14px; text-align: left;
  animation: flota 9s ease-in-out infinite;
}
.entrada header { display: flex; justify-content: space-between; align-items: center; }
.entrada small { color: var(--suave); font-size: 12px; }
.entrada p { margin: 6px 0 0; }
.estrellas { color: #E4C84B; font-size: 11px; letter-spacing: 1px; }
.mini { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); padding: 2px 7px; border-radius: 99px; }
.entrada .respuestas { display: block; margin-top: 8px; color: var(--c); }
.entrada.e1 { left: -12%; top: 18%; }
.entrada.e2 { right: -10%; bottom: 16%; animation-delay: -4.5s; }
@keyframes flota { 50% { transform: translateY(-14px); } }

/* ── 07 · Rejilla ────────────────────────────────────────────────────────────────────── */

.rejilla {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr);
  gap: 5px; margin: 56px auto 0; width: fit-content; max-width: 100%;
}
.rejilla i {
  width: clamp(9px, 1.3vw, 19px); aspect-ratio: 1; border-radius: 4px; background: #1a1a1e;
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
.rejilla i[data-n="1"].on { background: color-mix(in srgb, var(--c) 30%, #1a1a1e); }
.rejilla i[data-n="2"].on { background: color-mix(in srgb, var(--c) 55%, #1a1a1e); }
.rejilla i[data-n="3"].on { background: color-mix(in srgb, var(--c) 80%, #1a1a1e); }
.rejilla i[data-n="4"].on { background: var(--c); box-shadow: 0 0 10px -2px var(--c); }

/* ── 08 · Planificador ───────────────────────────────────────────────────────────────── */

.planificador {
  margin: 56px auto 0; max-width: 760px; padding: 28px; border-radius: 24px;
  background: var(--tarjeta); border: 1px solid var(--borde); text-align: left;
}
.mandos { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.mandos label { display: block; color: var(--suave); font-size: 14px; }
.mandos output { float: right; color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin: 16px 0 0;
  border-radius: 4px; background: #2a2a2f; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--texto); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 35%, transparent); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--texto); cursor: pointer;
}
.barras {
  display: flex; align-items: flex-end; gap: 6px; height: 220px; margin-top: 36px;
}
.barras div {
  position: relative; flex: 1; min-width: 6px; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(to top, color-mix(in srgb, var(--c) 55%, transparent), var(--c));
  transition: height 0.5s cubic-bezier(.2,.7,.2,1);
}
.barras div span {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  font-size: 11px; color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity 0.2s;
}
.barras div:hover span, .barras div:last-child span { opacity: 1; }
.leyenda { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; color: var(--tenue); letter-spacing: 0.08em; text-transform: uppercase; }
.leyenda .examen { color: var(--c); }

/* ── Pro ─────────────────────────────────────────────────────────────────────────────── */

.planes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 820px; margin: 56px auto 0; text-align: left; }
.plan { padding: 30px; border-radius: 24px; background: var(--tarjeta); border: 1px solid var(--borde); }
.plan.destacado {
  border: 2px solid var(--c);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 12%, var(--tarjeta)), var(--tarjeta) 60%);
}
.plan h3 { margin: 0 0 18px; font-size: 22px; letter-spacing: -0.01em; }
.plan.destacado h3 { color: var(--c); }
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan li { position: relative; padding: 7px 0 7px 28px; color: var(--texto); }
.plan li::before {
  content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px;
  border-left: 2px solid var(--suave); border-bottom: 2px solid var(--suave); transform: rotate(-45deg);
}
.plan.destacado li::before { border-color: var(--c); }
.plan-nota { margin: 18px 0 0; color: var(--suave); font-size: 14px; }

/* ── Final y pie ─────────────────────────────────────────────────────────────────────── */

.final { text-align: center; padding-bottom: 22vh; }
.final .sub { margin: 22px auto 40px; }
.final .pastilla { cursor: default; }

.pie {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 48px 24px 64px; border-top: 1px solid #ffffff12; color: var(--tenue); font-size: 14px;
}
.pie img { opacity: 0.85; }
.pie nav { display: flex; gap: 22px; }
.pie a { color: var(--suave); text-decoration: none; }
.pie a:hover { color: var(--texto); }

/* ── Páginas legales ─────────────────────────────────────────────────────────────────── */

.legal main { max-width: 680px; margin: 0 auto; padding: 110px 22px 90px; }
.legal h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); letter-spacing: -0.03em; line-height: 1.05; margin: 14px 0 6px; }
.legal h1::after { content: "."; color: var(--acento); }
.legal h2 { font-size: 1.15rem; margin: 2.4em 0 0.5em; }
.legal p, .legal li { color: #d6d4d0; }
.legal strong { color: var(--texto); }
.legal main a { color: var(--acento); }
.legal ul { padding-left: 1.2em; }
.legal li { margin: 0.45em 0; }
.legal .fecha { color: var(--tenue); font-size: 0.9rem; margin: 0; }
.legal .idioma { text-align: right; margin: 0; font-size: 0.9rem; }

/* ── Móvil ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .seccion { padding: 13vh 20px; }
  .dos-columnas { grid-template-columns: 1fr; gap: 44px; }
  .dos-columnas > * { min-width: 0; }
  /* El móvil se mide por la altura de la pantalla, no solo por el ancho: a 72vw salía más
     alto que el propio teléfono y no dejaba ver a la vez el reloj y lo que lo cambia. */
  .movil { --w: min(250px, 64vw, calc((100vh - 190px) * 0.46)); }
  .movil { --w: min(250px, 64vw, calc((100svh - 190px) * 0.46)); }
  #relojes .movil { --w: min(240px, 60vw, calc((100vh - 250px) * 0.46)); }
  #relojes .movil { --w: min(240px, 60vw, calc((100svh - 250px) * 0.46)); }
  .esferas {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    /* De borde a borde de la pantalla con márgenes negativos, no con 100vw: un hijo de
       100vw ensanchaba la columna y cortaba el texto de al lado en los iPhone pequeños. */
    max-width: none; align-self: stretch; margin: 22px -20px 0; padding: 2px 20px;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
  .esferas::-webkit-scrollbar { display: none; }
  .esferas button { flex: none; scroll-snap-align: center; }
  .dos-columnas.invertida .texto { order: 0; }
  .entrada { width: 210px; font-size: 13px; }
  .entrada.e1 { left: -4%; top: 6%; }
  .entrada.e2 { right: -4%; bottom: 4%; }
  .mandos { grid-template-columns: 1fr; gap: 20px; }
  .planificador { padding: 22px 18px; }
  .barras { height: 180px; gap: 4px; }
  .planes { grid-template-columns: 1fr; }
  .codigo span { width: 40px; height: 52px; font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aparece { opacity: 1; transform: none; transition: none; }
  .aro-envoltura::before, .entrada { animation: none; }
  .movil, .barras div { transition: none; }
}