/* ==========================================================
   Centro de Acceso · estilos
   Una sola capa, de móvil a escritorio. Cada bloque dice qué pinta.
   ========================================================== */

/* ============ 1 · Tokens (colores del libro y del kit) ============ */
:root{
  --bg:#F0E8DD;            /* fondo cálido del producto */
  --paper:#FFFDF9;
  --ink:#211E1A;
  --soft:#5B5646;
  --faint:#6E6857;         /* gris claro: 4,5:1 sobre el fondo */
  --must:#B87A1B;          /* mostaza de la marca */
  --mustd:#8F5E12;         /* mostaza oscura: texto dorado y botones claros */
  --mustdd:#734B0E;
  --line:#DDD3BF;
  --ok:#3F5B2A;
  --err:#8A2F1E;
  --r:4px;                 /* radio de botones */
  --rc:7px;                /* radio de tarjetas */
  --pad:20px;
}
@media (min-width:768px){ :root{ --pad:28px } }

/* ============ 2 · Base ============ */
*{box-sizing:border-box}
[hidden]{ display:none !important }
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.55; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
}
@media (min-width:768px){ body{ font-size:16.5px } }
.wrap{ width:100%; max-width:1160px; margin:0 auto; padding:0 var(--pad); }
h1,h2,h3{ font-family:'Fraunces',Georgia,'Times New Roman',serif; font-weight:600; letter-spacing:-.01em; margin:0; }
p{margin:0}
a{color:inherit}
:focus-visible{ outline:3px solid var(--mustd); outline-offset:3px; }
.eyebrow{ font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mustd); font-weight:600; }
.lead{ font-family:'Fraunces',Georgia,serif; font-style:italic; color:var(--soft); }
.grid{ display:grid; gap:14px; }
@media (min-width:768px){ .grid.three{ grid-template-columns:repeat(3,1fr) } }

/* Iconos de línea (SVG): mismo dibujo en todos los teléfonos, toman el color del texto */
.ico{ width:1.15em; height:1.15em; flex:none; vertical-align:-.2em; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.estado h2 .ico{ margin-right:.3em }

/* ============ 3 · Botones y sus estados ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:14px 22px; width:100%;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--ink); border-radius:var(--r); background:var(--ink); color:#fff;
  text-decoration:none; cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
@media (min-width:768px){ .btn{ width:auto } }
.btn:hover{ background:#3A342C; }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn.ghost:hover{ border-color:var(--must); color:var(--mustd); background:rgba(184,122,27,.05); }
.btn.gold{ background:var(--mustd); border-color:var(--mustd); }
.btn:active{ transform:translateY(1px) }
.btn.gold:hover{ background:var(--mustdd); border-color:var(--mustdd); transform:translateY(-1px) }
/* Sin sesión: contenido bloqueado (lleva a /acceso) */
.btn.locked{ background:transparent; color:var(--faint); border-color:var(--line); border-style:dashed }
.btn.locked:hover{ background:rgba(184,122,27,.05); color:var(--mustd); border-color:var(--must) }
/* Descargas: preparando · iniciada · error */
.btn[data-estado="cargando"]{ opacity:.7; cursor:progress }
.btn[data-estado="listo"]{ background:var(--ok); border-color:var(--ok); color:#fff }
.btn[data-estado="error"]{ background:var(--err); border-color:var(--err); color:#fff }
.linkbtn{ font:inherit; font-size:12.5px; color:var(--mustd); background:none; border:0; padding:10px 6px; cursor:pointer; text-decoration:underline; min-height:44px }

/* ============ 4 · Cabecera y menú ============ */
header.top{ border-bottom:1px solid var(--line); background:rgba(240,232,221,.92); backdrop-filter:saturate(120%) blur(4px);
  position:sticky; top:0; z-index:10; }
.top .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; row-gap:6px; padding-top:14px; padding-bottom:14px; }
.brand{ display:flex; flex-direction:column; gap:2px; text-decoration:none; }
.brand b{ font-family:'Fraunces',Georgia,serif; font-size:19px; font-weight:600; letter-spacing:-.01em; }
.brand span{ font-size:10.5px; color:var(--soft); }
.top .acceso{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--soft) }
.top .acceso form{ margin:0 }
.nav{ order:3; width:100%; display:flex; flex-wrap:wrap; gap:2px 4px; margin:0 -8px }
.nav a{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color:var(--soft); text-decoration:none; padding:12px 8px; border-radius:var(--r); min-height:44px; display:inline-flex; align-items:center }
.nav a:hover{ color:var(--mustd); background:rgba(184,122,27,.06) }
.nav a.locked{ color:var(--faint) }
/* Móvil: cabecera no fija y menú en una sola línea */
@media (max-width:899px){
  header.top{ position:static }
  .brand span{ display:none }
  .nav{ flex-wrap:nowrap; justify-content:space-between; gap:0; overflow-x:auto; scrollbar-width:none }
  .nav a{ font-size:10.5px; letter-spacing:.04em; padding:12px 5px; white-space:nowrap }
}
/* Móviles muy estrechos (320 px): las 5 entradas caben sin cortarse */
@media (max-width:359px){ .nav a{ letter-spacing:0; padding:12px 4px } }
@media (min-width:900px){ .top .wrap{ flex-wrap:nowrap } .nav{ order:0; width:auto; margin:0 0 0 auto } }

/* ============ 5 · Secciones ============ */
section{ padding:82px 0; border-top:1px solid var(--line); }
section:first-of-type{ border-top:none }
section[id]{ scroll-margin-top:110px }
.s-head{ margin-bottom:28px; max-width:680px }
.s-head h2{ font-size:clamp(31px,4vw,43px); line-height:1.02; margin:8px 0 8px }
.s-head p{ color:var(--soft); font-size:15px }

/* ============ 6 · Hero y estado de acceso ============ */
.hero{ padding:56px 0 64px }
.hero .wrap{ display:grid; gap:40px }
.hero .wrap > *{ min-width:0 }
.hero h1{ font-size:clamp(44px,7vw,72px); line-height:.96; letter-spacing:-.035em; margin:10px 0 12px }
.hero .lead{ font-size:21px; line-height:1.42; max-width:590px; margin-bottom:18px }
@media (min-width:768px){ .hero{ padding:88px 0 80px } .hero .wrap{ gap:48px } }
/* El Hero solo da la bienvenida y el estado del acceso. La vista del Planificador
   vive en la tarjeta «Planificar mi semana» (11-10: en el Hero parecía la app). */
@media (min-width:1000px){
  .hero{ padding:96px 0 72px }
  .hero h1{ font-size:clamp(54px,5.2vw,64px) }
}

.estado{ margin-top:28px; max-width:560px; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:22px }
.estado h2{ font-size:22px; line-height:1.15; margin-bottom:6px }
.estado p{ color:var(--soft); font-size:15px; margin-bottom:16px }
.estado .btn{ width:100% }
.estado.ok{ border-color:#B9CBA8; background:#F7FAF2 }
.estado.ok h2{ color:var(--ok) }
.estado.aviso{ border-color:#D9B48A }
@media (min-width:768px){ .estado .btn{ width:auto } }

/* Vista del Planificador real: pestaña «Plan semanal» con la Semana 1 cargada.
   Copia fiel de los estilos del Planificador (/app/sistema): pestañas, tabla con
   cabecera oscura, días en mostaza y recetas en casillas. Es una imagen, no se usa:
   nada dentro recibe foco. En móvil adopta las fichas por día del Planificador. */
.plan-vista{ background:var(--paper); border:1px solid var(--line); border-radius:var(--rc); overflow:hidden;
  box-shadow:0 1px 2px rgba(33,30,26,.05), 0 14px 34px rgba(33,30,26,.07) }
.pv-barra{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px;
  border-bottom:1px solid var(--line); background:#F6F1E6 }
.pv-barra .eyebrow{ font-size:10px; letter-spacing:.2em }
.pv-semana{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color:var(--soft); border:1px solid var(--line); background:var(--paper); border-radius:2px; padding:4px 8px; white-space:nowrap }
.pv-cuerpo{ padding:6px 16px 16px }
.pv-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:14px; overflow:hidden }
.pv-tabs span{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  padding:10px 10px 9px; color:var(--soft); border-bottom:2px solid transparent; margin-bottom:-1px }
.pv-tabs span:first-child{ color:var(--ink); border-bottom-color:var(--must); font-weight:600 }
.pv-tabla{ width:100%; border-collapse:collapse; table-layout:fixed; background:#fff; font-size:12px }
.pv-tabla th{ background:var(--ink); color:#fff; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600; text-align:left; padding:8px 6px }
.pv-tabla th:first-child{ width:76px }
.pv-tabla td{ padding:4px; border-bottom:1px solid #EEE6D6 }
.pv-tabla tr:last-child td{ border-bottom:0 }
.pv-tabla .dia{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  color:var(--mustd); background:#F6F1E6; padding-left:8px }
.pv-tabla td > span{ display:block; border:1px solid #E3DACA; border-radius:2px; padding:5px 6px; line-height:1.3;
  min-height:calc(2.6em + 12px); color:var(--ink) }
.pv-tabla td > span > span{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden }
.pv-nota{ margin-top:12px; font-size:12.5px; color:var(--soft) }
.pv-nota b{ color:var(--ink); font-weight:600 }

/* Móvil: como el Planificador en el móvil, una ficha por día (se ven los dos primeros) */
@media (max-width:599px){
  .pv-cuerpo{ padding:4px 12px 14px }
  .pv-tabs span:nth-child(n+3){ display:none }
  .pv-tabla, .pv-tabla tbody, .pv-tabla tr, .pv-tabla td{ display:block; width:100% }
  .pv-tabla{ background:none; font-size:13px }
  .pv-tabla thead{ display:none }
  .pv-tabla tr{ background:#fff; border:1px solid var(--line); margin-bottom:8px; padding:6px 8px 8px }
  .pv-tabla tr:nth-child(n+3){ display:none }
  .pv-tabla td{ border:0; padding:3px 0 }
  .pv-tabla td > span{ min-height:0 }
  .pv-tabla .dia{ background:none; padding:2px 0 4px; font-size:10px }
  .pv-tabla td[data-m]{ display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:8px }
  .pv-tabla td[data-m]::before{ content:attr(data-m); font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--faint) }
}

/* ============ 7 · Tarjetas ============ */
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--rc); padding:25px;
  transition:border-color .18s ease, box-shadow .18s ease; }
.card h3{ font-size:23px; line-height:1.15; margin:8px 0 8px }
.card p{ color:var(--soft); font-size:14.5px; margin-bottom:18px }
.tag{ display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mustd); border:1px solid var(--line); background:#F8F1E7;
  padding:5px 8px; border-radius:3px; }

/* Tarjeta destacada (oscura): la acción principal */
.card.hero-card{ background:var(--ink); border-color:var(--ink); color:#F6F1E6; padding:34px; display:grid; gap:28px }
.card.hero-card > *{ min-width:0 }
@media (min-width:900px){ .card.hero-card{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:40px; align-items:center } }
/* Vista dentro de la tarjeta: solo los primeros días, desvaneciéndose (es una muestra) */
.vista-t{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:#F0C071 !important; margin-bottom:10px }
.hc-vista .plan-vista{ box-shadow:none }
.hc-vista .pv-cuerpo{ position:relative }
.hc-vista .pv-cuerpo::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:64px; pointer-events:none;
  background:linear-gradient(rgba(255,253,249,0), var(--paper)) }
.hc-vista .pv-tabla tr:nth-child(n+4){ display:none }
@media (max-width:599px){ .hc-vista .pv-tabla tr:nth-child(n+2){ display:none } }
.card.hero-card h3{ color:#fff; font-size:32px; line-height:1.02 }
.card.hero-card p{ color:#CFC7B4 }
.card.hero-card .dentro{ font-size:13.5px; color:#B4AB98; margin:-6px 0 18px }
.card.hero-card .tag{ color:#F0C071; border-color:#4A4338; background:transparent }
/* Sobre fondo oscuro, el dorado lleva letra oscura (4,8:1) */
.card.hero-card .btn{ background:var(--must); border-color:var(--must); color:var(--ink) }
.card.hero-card .btn:hover{ background:#D08D22; border-color:#D08D22 }
.card.hero-card :focus-visible{ outline-color:#F0C071 }

/* Hover de todas las tarjetas (va después de .hero-card a propósito: su borde también cambia) */
.card:hover{ transform:translateY(-2px); border-color:#C5B79E; box-shadow:0 12px 28px rgba(33,30,26,.06) }
.card.hero-card:hover{ box-shadow:0 3px 18px rgba(33,30,26,.16) }

/* Tarjeta con portada (e-book) */
.ebook{ display:grid; gap:30px; align-items:center; border-radius:8px; padding:24px }
/* <picture> es la celda de la cuadrícula; la imagen la llena */
.ebook picture{ display:block; width:100%; max-width:220px; justify-self:center }
.ebook img{ width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:2px;
  box-shadow:12px 16px 30px rgba(33,30,26,.12) }
.ebook h3{ font-size:32px; line-height:1.02 }

@media (min-width:768px){
  .card.hero-card{ padding:40px }
  .ebook{ grid-template-columns:210px 1fr }
  .ebook picture{ justify-self:start }
}
@media (min-width:1024px){ .card{ padding:28px } }

/* ============ 8 · Bloques de la página ============ */
/* ¿Qué quieres hacer? */
.secundarias{ display:grid; gap:14px; margin-top:14px }
@media (min-width:768px){ .secundarias{ grid-template-columns:1fr 1fr } }

/* Así funciona (compacto) */
section.compacta{ padding:44px 0 }
.compacta .s-head{ margin-bottom:16px }
.compacta .s-head h2{ font-size:28px }
.pasos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden }
.pasos li{ background:var(--paper); padding:14px 16px }
.pasos .num{ display:block; font-family:'Fraunces',Georgia,serif; font-size:44px; line-height:1; letter-spacing:-.02em; color:var(--must); font-weight:600 }
.pasos h3{ font-size:19px; margin:6px 0 2px }
.pasos p{ color:var(--soft); font-size:13.5px; line-height:1.45 }
@media (min-width:768px){ .pasos{ grid-template-columns:repeat(4,1fr) } }

/* Conoce el método */
.metodo{ display:grid; gap:14px }

/* Recursos (secundario: tarjetas más compactas) */
#recursos .card{ padding:20px }
#recursos .card h3{ font-size:19px }
#recursos .card p{ font-size:14px; margin-bottom:14px }
.extra{ display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:12px; font-size:13.5px }
.extra-t{ width:100%; color:var(--faint); font-size:12.5px }
.extra a{ color:var(--mustd); padding:8px 0; min-height:44px; display:inline-flex; align-items:center }
.extra a.locked{ color:var(--faint) }

/* Ayuda */
.ayuda{ display:grid; gap:14px }
@media (min-width:768px){ .ayuda{ grid-template-columns:1fr 1fr } }

/* ============ 9 · Pie ============ */
footer{ border-top:1px solid var(--line); padding:34px 0 46px; }
footer b{ font-family:'Fraunces',Georgia,serif; font-size:16px }
footer p{ color:var(--soft); font-size:14px; margin-top:6px }
footer .legal{ margin-top:16px; font-size:12.5px; color:var(--faint) }
footer .legal a{ color:var(--faint); padding:12px 4px; min-height:44px; display:inline-flex; align-items:center }
footer .legal a:not([hidden]) ~ a:not([hidden])::before{ content:"·"; margin:0 8px 0 -4px; color:var(--faint); display:inline-block; text-decoration:none }

/* ============ 10 · Avisos y animación ============ */
.toast{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%); max-width:92vw;
  background:var(--ink); color:#fff; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.06em;
  padding:12px 16px; border-radius:3px; opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:30; }
.toast.on{ opacity:.95 }
/* Aparición sutil al hacer scroll (solo si el JS funciona) */
.js .rise{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
.js .rise.in{ opacity:1; transform:none }

/* ============ 11 · Menos movimiento ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rise{ opacity:1; transform:none; transition:none }
  .card:hover{ transform:none !important }
}