/* RawPace · rawpace.app (T-web-0). Diseño v1 (docs/diseno/web-v1/), a mano y sin framework.
   Tema: sigue al del sistema; el botón sol/luna lo fija en <html data-theme> (lo guarda theme.js). */

@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2"); }

/* Claro: fondo hueso y acentos oscurecidos (contraste medido en el informe de T-web-0). */
:root {
  color-scheme: light;
  --bg: #F7F6F2; --band: #EFEEE8; --surf: #FFFFFF; --line: #DAD8D0; --line2: #E4E2DB;
  --tx: #161816; --tx2: #3A3E3A; --tx3: #565B56; --chip: #E9E7E0;
  --acc: #FF6B35; --accTx: #120A05; --accSoft: #B8410E;
  --betaBg: #FFF0E8; --betaLine: #F2C4AC; --ring: #D9D7CF; --shadow: rgba(40, 30, 20, 0.18);
  --c1: #D9531F; --c2: #C92A4B; --c3: #8A4BD1; --c4: #0A7FA0; --good: #2B8454; --hr: #C92A4B;
  --watch: #0E110E;
}
/* Oscuro: el del reloj. Dos veces: por el sistema (si no se eligió claro) y por elección. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E110E; --band: #121512; --surf: #171A17; --line: #2E332E; --line2: #1F231F;
    --tx: #F2F5F2; --tx2: #C9CCC9; --tx3: #A3A6A3; --chip: #1C1F1C;
    --acc: #FF6B35; --accTx: #120A05; --accSoft: #FF8A5C;
    --betaBg: #1E1510; --betaLine: #4A2A1A; --ring: #1C1F1C; --shadow: rgba(0, 0, 0, 0.6);
    --c1: #FF6B35; --c2: #FF4D6D; --c3: #C77DFF; --c4: #00B4D8; --good: #52B788; --hr: #FF4D6D;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E110E; --band: #121512; --surf: #171A17; --line: #2E332E; --line2: #1F231F;
  --tx: #F2F5F2; --tx2: #C9CCC9; --tx3: #A3A6A3; --chip: #1C1F1C;
  --acc: #FF6B35; --accTx: #120A05; --accSoft: #FF8A5C;
  --betaBg: #1E1510; --betaLine: #4A2A1A; --ring: #1C1F1C; --shadow: rgba(0, 0, 0, 0.6);
  --c1: #FF6B35; --c2: #FF4D6D; --c3: #C77DFF; --c4: #00B4D8; --good: #52B788; --hr: #FF4D6D;
}

/* El icono del botón de tema: sol en oscuro (pasa a claro), luna en claro. */
.icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--tx);
  font-family: "Barlow", system-ui, sans-serif; font-weight: 400; font-size: 17px; line-height: 1.5;
}
a { color: var(--accSoft); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accSoft); outline-offset: 3px; }
h1, h2, h3, .cond { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 600; letter-spacing: 0.5px; }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 16px; border-radius: 8px; background: var(--acc); color: var(--accTx); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 20px; }

/* Cabecera */
.site-header { border-bottom: 1px solid var(--line2); position: relative; }
.site-header .wrap { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--tx); text-decoration: none; }
.brand svg { width: 32px; height: 32px; flex-shrink: 0; }
.brand span { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 26px; letter-spacing: 0.5px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.nav { display: none; }
.nav a { color: var(--tx2); text-decoration: none; }
.nav a:hover { color: var(--tx); }
.nav a[aria-current="page"] { color: var(--tx); }
.round-btn {
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 22px; background: var(--chip); color: var(--tx);
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.round-btn svg { width: 20px; height: 20px; }
.lang { min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 22px; color: var(--tx); display: flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: 0.5px; }
.header-actions .cta-sm { display: none; }
.menu-btn .icon-close { display: none; }
.menu-btn[aria-expanded="true"] .icon-open { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: block; }
.mobile-nav { border-top: 1px solid var(--line2); background: var(--bg); }
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: 8px 20px 16px; }
.mobile-nav a { display: block; padding: 12px 0; color: var(--tx); text-decoration: none; font-size: 18px; border-bottom: 1px solid var(--line2); }
.mobile-nav li:last-child a { border-bottom: 0; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 600;
  background: var(--acc); color: var(--accTx); border-radius: 28px; height: 54px; padding: 0 28px; font-size: 18px;
}
.btn:hover { filter: brightness(1.06); }

/* Portada */
.hero .wrap { padding-top: 40px; padding-bottom: 56px; display: grid; gap: 22px; }
.hero-text { display: flex; flex-direction: column; gap: 22px; }
.eyebrow { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 3px; color: var(--accSoft); text-transform: uppercase; }
.hero h1 { font-size: 46px; line-height: 1.04; }
.hero .lead { font-size: 18px; line-height: 1.5; color: var(--tx2); }
.hero-cta { display: flex; flex-direction: column; gap: 14px; }
.hero-cta .soon { font-size: 15px; color: var(--tx3); text-align: center; }

/* Relojes: capturas reales recortadas en redondo */
.watches { position: relative; height: 330px; margin-top: 12px; }
.watch { position: absolute; border-radius: 50%; overflow: hidden; background: var(--watch); }
.watch img { width: 100%; height: 100%; display: block; }
/* Hueco de una captura que falta (T-web-0): se ve, para que no se publique sin ella. */
.watch-pending { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12%; border: 2px dashed var(--line); background: var(--surf); color: var(--tx3); font-size: 14px; }
.watch-a { left: 12px; top: 10px; width: 260px; height: 260px; box-shadow: 0 0 0 10px var(--ring), 0 24px 60px var(--shadow); }
.watch-b { left: 200px; top: 150px; width: 160px; height: 160px; box-shadow: 0 0 0 7px var(--ring), 0 18px 40px var(--shadow); }

/* Funciones */
.band { background: var(--band); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.features .wrap { padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 28px; }
.section-head { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.section-head h2 { font-size: 34px; line-height: 1.1; }
.section-head p { font-size: 17px; color: var(--tx3); }
.cards { display: grid; gap: 14px; }
.card { background: var(--surf); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.card svg { width: 36px; height: 36px; }
.card h3 { font-size: 26px; line-height: 1.1; }
.card p { font-size: 16px; color: var(--tx3); }
.ic1 { stroke: var(--c1); } .ic2 { stroke: var(--c2); } .ic3 { stroke: var(--c3); } .ic4 { stroke: var(--c4); } .ictx { stroke: var(--tx); }

/* La captura del mapa con su atribución */
.map-shot { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 8px 0 0; }
.map-shot .watch { position: relative; width: 240px; height: 240px; box-shadow: 0 0 0 9px var(--ring), 0 20px 50px var(--shadow); }
.map-shot figcaption { font-size: 14px; color: var(--tx3); text-align: center; }
.map-pending { width: 240px; height: 240px; border-radius: 50%; border: 2px dashed var(--line); display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; color: var(--tx3); font-size: 14px; }

/* Precisión */
.accuracy .wrap { padding-top: 56px; padding-bottom: 56px; display: grid; gap: 22px; }
.accuracy h2 { font-size: 34px; }
.accuracy p { font-size: 17px; line-height: 1.55; color: var(--tx3); }
.stats { display: grid; gap: 14px; }
.stat { background: var(--surf); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.stat .num { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 48px; line-height: 1; }
.stat .num.good { color: var(--good); } .stat .num.hr { color: var(--hr); }
.stat .what { font-size: 15px; line-height: 1.45; color: var(--tx3); }

/* Privacidad y relojes */
.duo .wrap { padding-bottom: 56px; display: grid; gap: 14px; }
.panel { background: var(--surf); border: 1px solid var(--line); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.panel h2 { font-size: 30px; line-height: 1.1; }
.panel p { font-size: 16px; line-height: 1.55; color: var(--tx3); }

/* Probadores */
.beta-wrap { padding: 0 20px 56px; max-width: 1440px; margin: 0 auto; }
.beta { background: var(--betaBg); border: 1px solid var(--betaLine); border-radius: 24px; padding: 32px 24px; display: flex; flex-direction: column; gap: 22px; }
.beta h2 { font-size: 34px; line-height: 1.1; }
.beta p { font-size: 17px; color: var(--tx2); margin-top: 12px; }
.beta .btn { white-space: normal; text-align: center; height: auto; min-height: 56px; padding: 12px 24px; }

/* Pie */
.site-footer { border-top: 1px solid var(--line2); color: var(--tx3); font-size: 15px; }
.site-footer .wrap { padding-top: 32px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 16px; }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }

/* Política */
.policy .wrap { max-width: 760px; padding-top: 40px; padding-bottom: 64px; }
.policy h1 { font-size: 42px; line-height: 1.05; }
.policy .updated { margin-top: 12px; color: var(--tx3); font-size: 15px; }
.policy h2 { font-size: 28px; line-height: 1.15; margin-top: 40px; }
.policy p, .policy ul { margin-top: 14px; color: var(--tx2); }
.policy ul { padding-left: 22px; }
.policy li + li { margin-top: 8px; }
.policy strong { color: var(--tx); font-weight: 600; }
.review { background: var(--betaBg); border: 1px dashed var(--betaLine); border-radius: 4px; padding: 0 4px; color: var(--tx); font-weight: 600; }
.policy .back { display: inline-block; margin-top: 48px; }

/* Escritorio */
@media (min-width: 760px) {
  .wrap { padding: 0 48px; }
  .beta-wrap { padding: 0 48px 80px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .duo .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1100px) {
  .wrap { padding: 0 120px; }
  .beta-wrap { padding: 0 120px 110px; }
  .site-header .wrap { height: 88px; }
  .brand svg { width: 36px; height: 36px; }
  .brand span { font-size: 30px; }
  .nav { display: flex; align-items: center; gap: 32px; font-size: 17px; margin-right: 16px; }
  .header-actions { gap: 12px; }
  .menu-btn, .mobile-nav { display: none !important; }
  .header-actions .cta-sm { display: inline-flex; height: 44px; padding: 0 20px; border-radius: 22px; font-size: 17px; }

  .hero .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; min-height: 700px; padding-top: 0; padding-bottom: 0; }
  .hero-text { gap: 28px; }
  .eyebrow { font-size: 18px; }
  .hero h1 { font-size: 76px; line-height: 1.02; }
  .hero .lead { font-size: 21px; max-width: 540px; }
  .hero-cta { flex-direction: row; align-items: center; gap: 24px; padding-top: 8px; }
  .hero-cta .btn { height: 56px; }
  .hero-cta .soon { font-size: 16px; text-align: left; }
  .watches { height: 560px; margin-top: 0; }
  .watch-a { left: 40px; top: 40px; width: 420px; height: 420px; box-shadow: 0 0 0 14px var(--ring), 0 30px 80px var(--shadow); }
  .watch-b { left: 370px; top: 250px; width: 260px; height: 260px; box-shadow: 0 0 0 10px var(--ring), 0 24px 60px var(--shadow); }

  .features .wrap { padding-top: 100px; padding-bottom: 110px; gap: 48px; }
  .section-head { gap: 14px; }
  .section-head h2 { font-size: 48px; }
  .section-head p { font-size: 19px; }
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card { padding: 28px; gap: 16px; }
  .card h3 { font-size: 28px; }
  .card p { font-size: 17px; }
  .features-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: center; }
  .features-body .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-shot { margin: 0; }
  .map-shot .watch, .map-pending { width: 280px; height: 280px; }

  .accuracy .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center; padding-top: 110px; padding-bottom: 110px; }
  .accuracy h2 { font-size: 48px; }
  .accuracy p { font-size: 19px; }
  .stat { padding: 28px; gap: 8px; border-radius: 20px; }
  .stat .num { font-size: 56px; }
  .stat .what { font-size: 16px; }
  .duo .wrap { padding-bottom: 110px; }
  .panel { padding: 40px; gap: 14px; border-radius: 24px; }
  .panel h2 { font-size: 36px; }
  .panel p { font-size: 18px; }
  .beta { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; padding: 64px 72px; border-radius: 28px; }
  .beta > div { max-width: 700px; }
  .beta h2 { font-size: 48px; }
  .beta p { font-size: 19px; }
  .beta .btn { white-space: nowrap; height: 60px; min-height: 0; padding: 0 32px; font-size: 19px; border-radius: 30px; }
  .site-footer .wrap { flex-direction: row; justify-content: space-between; align-items: center; padding-top: 40px; padding-bottom: 40px; }
  .site-footer .links { gap: 28px; }
  .policy .wrap { padding-top: 72px; padding-bottom: 96px; }
  .policy h1 { font-size: 56px; }
}

/* ---- T-web-1 (revisión del 1 oct) ---- */

/* Cabecera: el logo un poco más grande. */
.brand svg { width: 38px; height: 38px; }
/* Idioma: «ES · EN», el actual resaltado. Misma cápsula que antes, con los dos dentro. */
.lang { gap: 6px; padding: 0 12px; font-weight: 400; color: var(--tx3); }
.lang a { color: var(--tx3); text-decoration: none; }
.lang a:hover { color: var(--tx); }
.lang .lang-sep { color: var(--line); }
.lang .lang-current { color: var(--tx); font-weight: 600; }

/* Funciones: dos capturas a la derecha, el reloj con el mapa y la app del móvil en «Descargar región». */
.shots { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.phone-pending { width: 150px; height: 300px; border-radius: 22px; border: 2px dashed var(--line); display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; color: var(--tx3); font-size: 13px; }
.shots .phone { width: 150px; height: 300px; border-radius: 22px; overflow: hidden; background: var(--watch); box-shadow: 0 0 0 6px var(--ring), 0 18px 40px var(--shadow); }
.shots .phone img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* «Lo que no se ve, también cuenta»: cuatro puntos, sin cifras ni marcas. */
.why { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.why li { background: var(--surf); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; font-size: 16px; line-height: 1.5; color: var(--tx3); }
.why li strong { display: block; font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 600; font-size: 24px; line-height: 1.1; letter-spacing: 0.5px; color: var(--tx); margin-bottom: 4px; }

/* Relojes compatibles: lista de probados con marca de verificado. */
.panel .tested-label { font-family: "Barlow Condensed", "Barlow", sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--tx3); margin-top: 4px; }
.tested { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tested li { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--tx); }
.tested svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--good); }

/* «En camino»: lo que viene, sin fechas. */
.next .wrap { padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 24px; }
.roadmap { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.roadmap li { background: var(--surf); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; font-size: 17px; color: var(--tx); }
.next-ask { font-size: 17px; color: var(--tx2); }

@media (min-width: 760px) {
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .brand svg { width: 44px; height: 44px; }
  .features-body { grid-template-columns: minmax(0, 1fr) 460px; }
  .shots { flex-wrap: nowrap; gap: 26px; }
  .phone-pending, .shots .phone { width: 170px; height: 340px; }
  .accuracy .wrap { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .why li { padding: 22px 24px; font-size: 17px; }
  .why li strong { font-size: 26px; }
  .next .wrap { padding-top: 100px; padding-bottom: 110px; gap: 32px; }
  .roadmap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .roadmap li { padding: 20px 24px; font-size: 18px; }
  .next-ask { font-size: 19px; }
}

/* ---- T-web-3 (2 oct) ---- */

/* La captura del móvil conserva su proporción (antes, un hueco de 1:2 que la recortaba por los lados). */
.shots .phone { height: auto; aspect-ratio: 480 / 855; }
.shots .watch { flex-shrink: 0; }

/* Portada: los dos relojes miden lo de siempre mientras caben, y encogen en proporción cuando la columna se queda
   corta. Se salían de la página en móviles de menos de 387 px (20 px a 360 px) y, en escritorio, por debajo de
   1440 px (18 px a 1280 px con barra de desplazamiento). En móvil el conjunto mide 367 px y puede usar 17 px del
   margen derecho; en escritorio mide 640 px y el diseño le deja invadir 100 px del margen. */
.watches { container-type: inline-size; }
.watch-a {
  left: min(12px, calc((100cqw + 17px) * 0.0327));
  width: min(260px, calc((100cqw + 17px) * 0.70845)); height: auto; aspect-ratio: 1;
}
.watch-b {
  left: min(200px, calc((100cqw + 17px) * 0.54496)); top: min(150px, calc((100cqw + 17px) * 0.40872));
  width: min(160px, calc((100cqw + 17px) * 0.43597)); height: auto; aspect-ratio: 1;
}

@media (min-width: 1100px) {
  .features-body { grid-template-columns: minmax(0, 1fr) 480px; }
  .watch-a {
    left: min(40px, calc((100cqw + 100px) * 0.0625)); top: min(40px, calc((100cqw + 100px) * 0.0625));
    width: min(420px, calc((100cqw + 100px) * 0.65625));
  }
  .watch-b {
    left: min(370px, calc((100cqw + 100px) * 0.578125)); top: min(250px, calc((100cqw + 100px) * 0.390625));
    width: min(260px, calc((100cqw + 100px) * 0.40625));
  }
}

/* ---- Figura de navegación (Miguel, 2 oct): el móvil más grande detrás y el reloj más pequeño delante ---- */
.map-shot .shots { position: relative; display: block; width: 300px; height: 410px; margin: 0 auto; }
.map-shot .shots .phone { position: absolute; right: 0; top: 0; width: 220px; height: auto; aspect-ratio: 480 / 855; }
.map-shot .shots .watch { position: absolute; left: 0; bottom: 0; width: 150px; height: 150px; z-index: 2;
  box-shadow: 0 0 0 7px var(--ring), 0 18px 40px var(--shadow); }
@media (min-width: 1100px) {
  .map-shot .shots { width: 360px; height: 470px; }
  .map-shot .shots .phone { width: 255px; }
  .map-shot .shots .watch { width: 180px; height: 180px; box-shadow: 0 0 0 8px var(--ring), 0 20px 50px var(--shadow); }
}