/* Web de compradores (rediseño del 15-10-2026: centro B + entrada A, auditado por ChatGPT).
   La usan el Centro de acceso (/), /acceso y las páginas del Worker (/acceder, /activar).
   Regla tipográfica: Manrope en todo; Newsreader solo en el título de la pantalla de entrada.
   Las dos letras son archivos propios (OFL, @fontsource-variable 5.3): nada se pide a otros sitios.
   Si se cambia un archivo de letra, cambiarle el nombre (se guardan un año en caché). */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fuentes/manrope-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fuentes/newsreader-latin-wght-normal.woff2) format('woff2')}

:root{
  color-scheme:light;
  --fondo:#FAFAF6; --sup:#FFFFFF; --tinta:#202820; --tinta2:#4A554C;
  --verde:#244B3A; --verde-h:#1B3A2C; --verde-s:#E8EFE7; --verde-t:#D5E2D6;
  --mand:#D95B32; --mand-texto:#B44726; --linea:#D9DFD6; --linea-f:#B9C3B6; /* mand-texto: 5,2:1 sobre el fondo, para los números 01–04 */
  --campo:#7A8878; /* borde de los campos: 3,6:1 sobre blanco (auditoría: el anterior daba 1,8:1) */
  --error-f:#FBEDE7; --error-t:#8A2E11;
  --ui:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ed:'Newsreader',Georgia,serif;
  --ease:cubic-bezier(.23,1,.32,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 16.5px/1.55 var(--ui);-webkit-font-smoothing:antialiased}
::selection{background:var(--verde);color:#fff}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ol,ul,figure{margin:0}
a{color:var(--verde);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--verde);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
@media (min-width:768px){.wrap{padding:0 32px}}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.salto{position:absolute;left:8px;top:-60px;z-index:20;padding:10px 14px;border-radius:8px;background:var(--verde);color:#fff;font-weight:700}
.salto:focus{top:8px}

/* ========== Marca ========== */
.marca{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--tinta);text-decoration:none;white-space:nowrap}
.marca img{width:24px;height:24px}

/* ========== Centro · cabecera y navegación ========== */
.cab{background:var(--sup);border-bottom:1px solid var(--linea)}
.cab .wrap{display:flex;align-items:center;gap:24px;min-height:60px}
.cab .marca{margin-right:auto}
.cab form{margin:0}
.nav{display:flex;gap:2px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;color:var(--tinta2);font-weight:600;font-size:15px;text-decoration:none}
.nav a:hover{background:var(--verde-s);color:var(--tinta)}
.nav a[aria-current]{background:var(--verde-s);color:var(--verde)}
.cuenta{min-height:44px;padding:0 14px;border:1px solid var(--linea-f);border-radius:8px;background:none;color:var(--tinta2);font:600 14.5px var(--ui);cursor:pointer}
.cuenta:hover{border-color:var(--campo);color:var(--tinta)}
.cuenta .corto{display:none}
@media (max-width:767px){.cab .nav{display:none}.cab .wrap{min-height:56px;gap:12px}}
@media (max-width:374px){.cab .marca{font-size:15px}.cuenta .largo{display:none}.cuenta .corto{display:inline}}

/* Barra inferior (solo móvil). El margen de las anclas evita que tape el título al saltar. */
.tabbar{display:none}
@media (max-width:767px){
  body.con-barra{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  html{scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:10;
    background:var(--sup);border-top:1px solid var(--linea);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:64px;
    font-size:13px;font-weight:700;color:var(--tinta2);text-decoration:none}
  .tabbar a{position:relative}
  .tabbar a[aria-current]{color:var(--verde)}
  .tabbar a[aria-current]::before{content:"";position:absolute;top:0;left:25%;right:25%;height:3px;border-radius:0 0 3px 3px;background:var(--verde)}
}

/* Aviso mientras se comprueba la sesión o si falla la conexión */
.aviso-sesion{padding:12px 0;background:var(--verde-s);font-size:15px}
.aviso-sesion .wrap{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.aviso-sesion button{min-height:44px;padding:0 14px;border:1px solid var(--verde);border-radius:8px;background:var(--sup);color:var(--verde);font:700 15px var(--ui);cursor:pointer}

/* ========== Centro · tu semana ========== */
.hoy{padding:24px 0 40px}
@media (min-width:768px){.hoy{padding:40px 0 56px}}
.hoy .wrap{display:grid;gap:24px}
@media (min-width:960px){.hoy .wrap{grid-template-columns:1fr 300px;gap:48px;align-items:start}}
.hoy h1{font-family:var(--ui);font-weight:800;font-size:clamp(28px,2.2vw + 21px,40px);line-height:1.1;letter-spacing:-.025em}
.hoy .sub{margin-top:6px;color:var(--tinta2)}

.tareas{margin-top:20px;display:grid;gap:10px}
.tarea{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px;border:1px solid var(--linea);border-radius:12px;
  background:var(--sup);color:var(--tinta);text-decoration:none;transition:border-color .15s var(--ease),background-color .15s var(--ease)}
.tarea:hover{border-color:var(--linea-f)}
.tarea .ico-c{width:44px;height:44px;border-radius:10px;background:var(--verde-s);color:var(--verde);display:grid;place-items:center}
.tarea b{display:block;font-size:17px;font-weight:700}
.tarea .txt{display:block;font-size:14.5px;line-height:1.4;color:var(--tinta2)}
.tarea .flecha{color:var(--tinta2)}
.tarea.principal{padding:20px 18px;background:var(--verde);border-color:var(--verde);color:#fff}
.tarea.principal:hover{background:var(--verde-h)}
.tarea.principal .ico-c{background:rgba(255,255,255,.14);color:#fff}
.tarea.principal b{font-size:19px}
.tarea.principal .txt,.tarea.principal .flecha{color:var(--verde-t)}

.semanas{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--verde-s);font-size:15px;display:flex;gap:12px;align-items:flex-start}
.semanas .ico{color:var(--verde);margin-top:1px}

/* Captura lateral (solo escritorio): más baja para no alargar la primera sección */
.lateral{display:none}
@media (min-width:960px){.lateral{display:block;position:sticky;top:24px}}
.lateral figure{padding:12px;border:1px solid var(--linea);border-radius:12px;background:var(--sup)}
/* Las capturas laterales son fondos CSS dentro de @media de escritorio: el móvil no las descarga (auditoría 15-10). */
.captura{aspect-ratio:780/1688;margin:0 auto;border-radius:8px;background:var(--verde-s) center/cover no-repeat}
@media (min-width:960px){
  .captura-plan{height:420px;background-image:url(capturas/plan-movil-400.webp)}
  .captura-lista{height:min(70vh,700px);border-radius:10px;box-shadow:0 22px 50px -22px rgba(32,40,32,.5);
    background-image:url(capturas/lista-movil-600.webp)}
}
@media (min-width:960px) and (max-height:700px){.captura-plan{height:340px}}
.lateral figcaption{margin-top:10px;font-size:13.5px;font-weight:600;color:var(--tinta2);text-align:center}

/* ========== Centro · secciones ========== */
.sec{padding:48px 0;border-top:1px solid var(--linea)}
@media (min-width:960px){.sec{padding:64px 0}}
.sec h2{font-family:var(--ui);font-weight:800;font-size:clamp(22px,1vw + 19px,28px);line-height:1.15;letter-spacing:-.022em;text-wrap:balance}
.sec .intro{margin-top:8px;color:var(--tinta2);max-width:56ch}

/* Método: el ciclo abierto, siempre visible, con su número (01–04) para que el orden no dependa del arco */
.ciclo{list-style:none;padding:0;margin-top:28px;display:grid}
@media (min-width:768px){.ciclo{grid-template-columns:repeat(4,1fr);gap:28px;margin-top:36px}}
.ciclo li{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:18px 0;border-top:1px solid var(--linea)}
@media (min-width:768px){.ciclo li{grid-template-columns:1fr;gap:12px;padding:22px 0 0;border-top:2px solid var(--linea)}}
.ciclo svg{width:44px;height:44px;fill:none;stroke-width:2.6;stroke-linecap:round}
.ciclo path{stroke:var(--linea-f)}
.ciclo path.on{stroke:var(--mand)}
.ciclo h3{font:700 18px/1.3 var(--ui)}
.ciclo .n{margin-right:8px;font-size:14px;font-weight:800;color:var(--mand-texto);font-variant-numeric:tabular-nums}
.ciclo p{margin-top:4px;color:var(--tinta2);font-size:15.5px}
.metodo .mas{margin-top:24px;font-size:15.5px;color:var(--tinta2)}

/* Biblioteca: filas por recurso, con el formato a la vista */
.libros{margin-top:28px;border-top:1px solid var(--linea)}
.libro{display:grid;grid-template-areas:"t" "d" "f";gap:8px 24px;padding:20px 0;border-bottom:1px solid var(--linea)}
.libro > :first-child{grid-area:t}
.libro > p{grid-area:d}
.libro > .formatos{grid-area:f}
@media (min-width:768px){
  .libro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"t f" "d f";align-items:start}
}
@media (min-width:1100px){
  .libro{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1.35fr);grid-template-areas:"t d f";align-items:center}
}
.libro h3{font:700 17.5px/1.3 var(--ui)}
.libro p{color:var(--tinta2);font-size:15.5px}
.ebook{display:flex;gap:16px;align-items:center}
.ebook img{width:56px;border-radius:3px;box-shadow:0 6px 14px -6px rgba(32,40,32,.5)}
.formatos{display:flex;flex-wrap:wrap;gap:8px}
/* A 320 px, dos botones por fila: así no queda un Excel suelto en su propia línea */
@media (max-width:399px){.formatos.cuatro{display:grid;grid-template-columns:1fr 1fr}}
.fmt{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--linea-f);border-radius:8px;background:var(--sup);
  color:var(--tinta);font:600 15px var(--ui);text-decoration:none;transition:border-color .15s var(--ease),color .15s var(--ease)}
.fmt:hover{border-color:var(--verde);color:var(--verde)}
.fmt small{padding:2px 6px;border-radius:4px;background:var(--verde-s);color:var(--verde);font-size:13px;font-weight:700}

/* Ayuda y legal */
.ayuda{padding:28px 0 40px;border-top:1px solid var(--linea);font-size:15px;color:var(--tinta2)}
.ayuda .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.ayuda p{max-width:64ch}
.ayuda nav{display:flex;flex-wrap:wrap;gap:0 16px}
.ayuda nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--tinta2)}

/* ========== Pantalla de entrada (/acceder, /activar, /acceso) ========== */
.entrar{min-height:100dvh;display:grid}
@media (min-width:960px){.entrar{grid-template-columns:1fr 1fr}}
.lado-form{display:flex;flex-direction:column;padding:28px 20px 48px}
@media (min-width:768px){.lado-form{padding:40px 64px 64px}}
.lado-form .marca{margin-bottom:auto}
.form-in{width:100%;max-width:440px;margin:40px auto 0}
@media (min-width:960px){.form-in{margin:auto 0}}
.entrar h1{font:500 clamp(36px,5vw,48px)/1.05 var(--ed);letter-spacing:-.02em;text-wrap:balance}
.entrar .lead{margin-top:12px;color:var(--tinta2)}
.form-in > p{margin-top:12px;color:var(--tinta2)}
.form-in ol{margin-top:12px;padding-left:22px;color:var(--tinta2)}
.form-in ol li{margin-top:6px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:1px solid transparent;border-radius:8px;
  font:700 16px/1 var(--ui);text-decoration:none;cursor:pointer;transition:background-color .16s var(--ease),transform .12s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-p{background:var(--verde);color:#fff}
.btn-p:hover{background:var(--verde-h)}
.form-in > .btn{margin-top:24px;width:100%}

.campos{margin-top:28px;display:grid;gap:6px}
.campos label{margin-top:12px;font-weight:700;font-size:15.5px}
.campos .ayuda-campo{margin-top:-2px;font-size:14.5px;color:var(--tinta2)}
.campos input{width:100%;min-height:52px;padding:0 14px;border:1px solid var(--campo);border-radius:8px;background:var(--sup);color:var(--tinta);font:500 17px var(--ui)}
.campos input::placeholder{color:#6B756C;opacity:1}
.campos input:hover{border-color:var(--tinta2)}
.campos input:focus{outline:3px solid var(--verde);outline-offset:1px;border-color:var(--verde)}
.campos .btn{margin-top:20px;width:100%}

/* El error lo pinta el servidor solo cuando hay error (ya no depende de un ancla de demostración) */
.error{display:flex;gap:10px;margin-top:20px;padding:14px 16px;border-radius:8px;background:var(--error-f);color:var(--error-t);font-size:15.5px}
.error .ico{width:20px;height:20px;margin-top:2px}
.error:focus{outline:3px solid var(--error-t);outline-offset:2px}

.ayudas{margin-top:24px;border-top:1px solid var(--linea)}
.entrar details{border-bottom:1px solid var(--linea)}
.entrar summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;font-weight:700;color:var(--verde);cursor:pointer;list-style:none}
.entrar summary::-webkit-details-marker{display:none}
.entrar summary .chev{width:20px;height:20px;transition:transform .16s var(--ease)}
.entrar details[open] summary .chev{transform:rotate(180deg)}
.entrar details p{margin:0 0 14px;font-size:15.5px;color:var(--tinta2)}
.otras{margin-top:16px;font-size:14.5px;color:var(--tinta2)}

/* Captura de la pantalla de entrada: solo en escritorio (en el móvil quedaba pequeña e ilegible) */
.lado-img{display:none}
@media (min-width:960px){
  .lado-img{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:48px 40px;background:var(--verde-s)}
  .lado-img p{font-size:14px;font-weight:600;color:var(--tinta2);text-align:center}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.tabbar,.cab form,.salto{display:none!important}}
.form-in form{margin-top:20px}
.form-in .fino{font-size:14.5px}
.form-in form .btn{width:100%}