/* La portada de cronda.app, igual en los tres idiomas.
   La idea: la pared del gimnasio. El reloj gigante de la sesión manda en la escena y el cronómetro, enorme, entra
   desde el borde derecho como un objeto delante de la pared, con su aguja marcando los segundos. Los colores de cada
   fase son los de la pantalla de sesión de la app: papel en el round, rojo en los últimos 10 segundos y tinta en el
   descanso; la fase nueva barre la pantalla de abajo hacia arriba.
   La fase está en <html>: data-fase cambia los colores del texto y data-fondo el fondo, para que el texto cambie a
   mitad del barrido. Un script en el <head> los pone antes del primer cuadro si había una sesión guardada. */
/* Archivo (licencia SIL OFL, assets/archivo-OFL.txt), servida desde cronda.app: sin pedidos a terceros. Recortada a lo
   que usa la web: ancho 62 a 100 y peso 400 a 900, letras latinas. */
@font-face {
  font-family: "Archivo"; src: url("/assets/archivo.woff2") format("woff2");
  font-weight: 400 900; font-stretch: 62% 100%; font-display: swap;
}
:root {
  --tinta: #111418; --papel: #F6F5F1; --rojo: #C8102E;
  --texto: var(--tinta); --suave: #4A4F57; --pista: rgba(17,20,24,.13); --lleno: var(--tinta);
  --linea: rgba(17,20,24,.16); --boton-fondo: rgba(17,20,24,.05); --inverso: var(--papel); --sombra: rgba(17,20,24,.34);
  --pagina: #F1F0EC;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  /* El tamaño del reloj manda en la composición: todo lo demás se mide contra él. */
  --cifra: clamp(150px, min(54vh, 30vw), 480px);
  --crono-alto: calc(var(--cifra) * 1.5);
  --crono-ancho: calc(var(--crono-alto) * 544 / 714);
}
:root[data-fase="aviso"] {
  --texto: #fff; --suave: #fff; --pista: rgba(255,255,255,.28); --lleno: #fff;
  --linea: rgba(255,255,255,.34); --boton-fondo: rgba(255,255,255,.12); --inverso: #B8142D; --sombra: rgba(70,0,10,.45);
}
:root[data-fase="descanso"] {
  --texto: var(--papel); --suave: #B9BCC2; --pista: rgba(246,245,241,.15); --lleno: var(--papel);
  --linea: rgba(246,245,241,.18); --boton-fondo: rgba(246,245,241,.07); --inverso: #15181D; --sombra: rgba(0,0,0,.6);
}
:root[data-fondo="aviso"] { --pagina: #C11A33; }
:root[data-fondo="descanso"] { --pagina: #171A1F; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* El cronómetro sale del borde derecho: la página no se desplaza de costado (Safari en iOS necesita el html también). */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body {
  margin: 0; background: var(--pagina); color: var(--texto);
  font-family: "Archivo", system-ui, sans-serif; font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; transition: color .45s ease;
}
::selection { background: var(--rojo); color: #fff; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 10px; }

/* El fondo de la fase actual, y encima la fase nueva que entra de abajo hacia arriba. */
.fondo, .fondo i { position: fixed; inset: 0; }
.fondo { z-index: -1; }
.fondo, .fondo i[data-fase="round"] { background: radial-gradient(120% 90% at 30% 40%, #FBFAF7 0%, #F1F0EC 45%, #E3E1DA 100%); }
:root[data-fondo="aviso"] .fondo, .fondo i[data-fase="aviso"] { background: radial-gradient(120% 90% at 30% 40%, #DA2540 0%, #C11A33 45%, #9E0E25 100%); }
:root[data-fondo="descanso"] .fondo, .fondo i[data-fase="descanso"] { background: radial-gradient(120% 90% at 30% 40%, #252A31 0%, #171A1F 45%, #0B0D10 100%); }
.fondo i { animation: barrido .7s var(--ease-out) both; }
@keyframes barrido { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

.pantalla {
  min-height: 100vh; min-height: 100svh; max-width: 1280px; margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 32px max(14px, env(safe-area-inset-bottom));
  display: grid; grid-template-rows: auto 1fr auto; gap: 8px;
}

/* Arriba: la marca, el selector de idioma y el botón de los sonidos. */
header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.marca { font-stretch: 62%; font-weight: 800; font-size: 28px; letter-spacing: -.2px; text-decoration: none; }
.herramientas { display: flex; align-items: center; gap: 10px; }
.idiomas {
  display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--boton-fondo); transition: border-color .45s ease;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.idiomas a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
.idiomas svg { width: 24px; height: 24px; border-radius: 50%; filter: grayscale(1) opacity(.55); transition: filter .2s ease; }
.idiomas a[aria-current="page"] { background: var(--texto); }
.idiomas a[aria-current="page"] svg { filter: none; box-shadow: 0 0 0 2px var(--inverso); }
.sonido {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid var(--linea); background: var(--boton-fondo); color: var(--texto); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .2s ease, border-color .45s ease, color .2s ease, transform .16s var(--ease-out);
}
.sonido:active { transform: scale(.94); }
.sonido svg { width: 21px; height: 21px; }
.sonido .encendido { display: none; }
.sonido[aria-pressed="true"] { background: var(--texto); color: var(--inverso); border-color: var(--texto); }
.sonido[aria-pressed="true"] .encendido { display: inline; }
.sonido[aria-pressed="true"] .apagado { display: none; }
@media (hover: hover) and (pointer: fine) {
  .idiomas a:hover svg { filter: none; }
  .sonido:hover { border-color: currentColor; }
}

/* La escena: el reloj arriba y la promesa con la tienda abajo, a la izquierda; a la derecha, el lugar del cronómetro.
   En el DOM la promesa va primero, para quien lee con lector de pantalla; a la vista, el reloj manda. */
.escena {
  position: relative; display: grid; align-content: center; gap: clamp(14px, 3vh, 32px) 40px;
  padding-right: calc(var(--crono-ancho) * .62 + 24px);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "reloj reloj" "promesa cta";
}
.promesa {
  grid-area: promesa; align-self: end; margin: 0; max-width: 15ch;
  font-stretch: 62%; font-weight: 850; letter-spacing: -.6px; line-height: .92;
  font-size: clamp(34px, min(4.4vw, 7.2vh), 68px); text-wrap: balance;
}
.cta { grid-area: cta; align-self: end; display: grid; justify-items: start; gap: 16px; max-width: 34ch; }
.lead { margin: 0; color: var(--suave); font-size: clamp(16px, 2.1vh, 18px); line-height: 1.45; text-wrap: pretty; transition: color .45s ease; }

/* El distintivo de Google Play, con "Próximamente" mientras la app no está publicada. */
.play {
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px 0 14px;
  border-radius: 12px; background: #000; color: #fff; border: 1px solid #A6A6A6;
  box-shadow: 0 12px 26px -14px rgba(0,0,0,.6);
}
.play svg { width: 26px; height: 29px; flex: none; }
.play span { display: grid; line-height: 1.05; }
.play small { font-size: 12px; font-weight: 500; letter-spacing: .1px; opacity: .92; }
.play strong { font-size: 21px; font-weight: 600; letter-spacing: -.2px; }

/* La sesión de ejemplo, en vivo. */
.reloj { grid-area: reloj; display: grid; gap: 6px; }
.fase-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.fase { margin: 0; font-stretch: 62%; font-weight: 800; font-size: clamp(26px, 4.4vh, 44px); line-height: 1; }
.fase small { font-stretch: 100%; font-weight: 500; font-size: .5em; color: var(--suave); margin-left: .3em; transition: color .45s ease; }
.nota { margin: 0; font-size: 16px; font-weight: 600; color: var(--suave); transition: color .45s ease; }
.tiempo {
  margin: 0; font-stretch: 62%; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap;
  font-size: var(--cifra); line-height: .8; letter-spacing: -.025em; transition: opacity .3s ease;
}
:root.pausada .tiempo { opacity: .45; }

/* El cronómetro: el render sin aguja y la aguja dibujada encima. Enorme y a la derecha, sale del borde de la
   pantalla, con su sombra sobre la pared; tiembla con cada aviso, como el teléfono que vibra en el banco, y tocarlo
   pausa la sesión. */
.crono {
  position: absolute; top: 50%; right: calc(var(--crono-ancho) * -.34); translate: 0 -50%;
  display: block; height: var(--crono-alto); aspect-ratio: 544 / 714;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 40%;
  filter: drop-shadow(0 calc(var(--crono-alto) * .035) calc(var(--crono-alto) * .045) var(--sombra));
  transition: transform .2s var(--ease-out), filter .45s ease;
}
.crono:active { transform: scale(.985); }
.crono picture, .crono img, .crono svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.aguja g { transform-box: view-box; transform-origin: 271px 444px; transition: transform .22s cubic-bezier(.3, 1.7, .5, 1); }
/* Al abrir la página, la aguja sale de las 12 hasta su lugar, como un cronómetro que se arma. Pasa una sola vez. */
.aguja g.arma { transition: transform 1.1s var(--ease-out); }
.crono.vibra { animation: vibra .34s linear; }
@keyframes vibra {
  0%, 100% { rotate: 0deg; } 20% { rotate: -1.6deg; } 40% { rotate: 1.6deg; } 60% { rotate: -1deg; } 80% { rotate: 1deg; }
}
@media (hover: hover) and (pointer: fine) {
  .crono:hover { transform: translateX(-6px); }
  .crono:hover:active { transform: translateX(-6px) scale(.985); }
}

/* La sesión entera: un tramo por round y uno corto por descanso. El tramo actual se llena y la perilla roja marca
   el ahora, como en la app. */
.linea { display: grid; gap: 8px; margin-top: 6px; }
.barra { position: relative; display: flex; gap: 4px; height: 12px; align-items: stretch; }
.barra i { position: relative; flex: 3; border-radius: 3px; background: var(--pista); overflow: hidden; transition: background-color .45s ease; }
.barra i.d { flex: 1; background: transparent; box-shadow: inset 0 0 0 1.5px var(--pista); }
.barra u { position: absolute; inset: 0; background: var(--lleno); transform-origin: left; transform: scaleX(0); transition: background-color .45s ease; }
.barra i.d u { background: transparent; box-shadow: inset 0 0 0 1.5px var(--lleno); }
.barra b {
  position: absolute; top: 50%; left: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: var(--rojo); box-shadow: 0 0 0 3px var(--inverso), 0 3px 8px rgba(0,0,0,.25);
}
:root[data-fase="aviso"] .barra b { background: #fff; box-shadow: 0 0 0 3px var(--rojo), 0 3px 8px rgba(0,0,0,.25); }
.linea p { display: flex; justify-content: space-between; margin: 0; font-size: 13px; font-weight: 600; color: var(--suave); transition: color .45s ease; }

footer {
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 22px;
  padding-top: 12px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--suave);
  transition: border-color .45s ease, color .45s ease;
}
footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
footer a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { footer a:hover { text-decoration: underline; color: var(--texto); } }

/* Tableta y teléfono: una columna. El cronómetro entra desde el borde derecho, al lado del título. */
@media (max-width: 860px) {
  :root {
    --cifra: clamp(96px, min(50vw, 25svh), 300px);
    --crono-alto: clamp(140px, min(46vw, 27svh), 320px);
  }
  .pantalla { padding-left: 20px; padding-right: 20px; }
  .escena { padding-right: 0; grid-template-columns: 1fr; grid-template-areas: "promesa" "reloj" "cta"; gap: 18px; }
  .promesa { font-size: clamp(32px, min(9.4vw, 5.2svh), 60px); max-width: 13ch; align-self: start; }
  .reloj { position: relative; }
  .fase-fila { flex-direction: column; align-items: flex-start; gap: 4px; padding-right: calc(var(--crono-ancho) * .62); }
  .crono { top: auto; bottom: calc(100% - var(--crono-alto) * .32); right: calc(var(--crono-ancho) * -.3 - 20px); translate: none; }
  .nota { font-size: 15px; }
  .cta { max-width: none; gap: 14px; }
  .lead { font-size: 15.5px; }
  .play { height: 52px; }
  .marca { font-size: 26px; }
  .herramientas { gap: 6px; }
  .idiomas a { width: 32px; height: 32px; }
  .idiomas svg { width: 22px; height: 22px; }
  footer { font-size: 13px; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .lead { display: none; }
}
@media (max-width: 360px) {
  .pantalla { padding-left: 16px; padding-right: 16px; }
  .idiomas a { width: 30px; height: 30px; }
  .idiomas svg { width: 20px; height: 20px; }
  .sonido { width: 40px; height: 40px; }
  .marca { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .fondo i, .crono.vibra { animation: none; }
  .aguja g, .aguja g.arma, .crono { transition: none; }
}