/* 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);
  --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);
  /* La imagen trae la sombra horneada, con 60 px de margen sobre 544 × 714: la caja del botón es más grande que el
     cronómetro que se ve. */
  --crono-margen: calc(var(--crono-alto) * 60 / 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;
}
: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;
}
: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; }
.lead { margin: 0; max-width: 36ch; color: var(--suave); font-size: clamp(16px, 2.1vh, 18px); line-height: 1.45; text-wrap: pretty; transition: color .45s ease; }

/* Los distintivos de Google Play y del App Store, con "Próximamente" mientras la app no está publicada. */
.tiendas { display: flex; gap: 10px; }
.tienda {
  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);
}
.tienda svg { width: 26px; height: 29px; flex: none; }
.tienda .manzana { width: 25px; height: 30px; margin-top: -3px; }
.tienda span { display: grid; line-height: 1.05; white-space: nowrap; }
.tienda small { font-size: 12px; font-weight: 500; letter-spacing: .1px; opacity: .92; }
.tienda 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 - var(--crono-margen)); translate: 0 -50%;
  display: block; height: calc(var(--crono-alto) + 2 * var(--crono-margen)); aspect-ratio: 664 / 834;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer; overflow: visible;
  transition: transform .2s var(--ease-out);
}
/* La sombra viene horneada en la imagen: Safari recorta la de un filtro drop-shadow en la caja y deja un rectángulo. */
.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: 331px 504px; 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 - var(--crono-margen)); right: calc(var(--crono-ancho) * -.3 - 20px - var(--crono-margen)); translate: none; }
  .nota { font-size: 15px; }
  .cta { max-width: none; gap: 14px; }
  .lead { font-size: 15.5px; max-width: none; }
  .tiendas { gap: 8px; }
  .tienda { height: 48px; padding: 0 12px 0 10px; gap: 8px; border-radius: 10px; }
  .tienda svg { width: 21px; height: 23px; }
  .tienda .manzana { width: 21px; height: 25px; margin-top: -2px; }
  .tienda small { font-size: 10.5px; }
  .tienda strong { font-size: 17px; }
  .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; }
  .tienda { height: 44px; padding: 0 10px 0 8px; gap: 6px; }
  .tienda svg { width: 19px; height: 21px; }
  .tienda .manzana { width: 19px; height: 23px; }
  .tienda small { font-size: 9.5px; }
  .tienda strong { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .fondo i, .crono.vibra { animation: none; }
  .aguja g, .aguja g.arma, .crono { transition: none; }
}