/* OJAI · Cuatro momentos: menú superior, barra inferior en celular y el centro «Mi camino». */
.top nav{gap:30px!important}
.top nav button{position:relative}
.top nav button[aria-current=page]{text-decoration:none!important}
.top nav button[aria-current=page]::after{content:'';position:absolute;left:50%;bottom:2px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:currentColor}

/* Barra inferior (solo celular) */
.ojai-tabbar{display:none}
@media (max-width:767px){
 .ojai-tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:var(--o-capa-barra-inferior);padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:#211820f2;backdrop-filter:blur(16px);border-top:1px solid #ffffff1f}
 .ojai-tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;padding:6px 2px;color:var(--o-i-lila-83);font-size:11px;font-weight:600;letter-spacing:.02em;border-radius:14px}
 .ojai-tabbar button[aria-current=page]{color:var(--o-blanco);background:#ffffff14}
 .ojai-tabbar button[aria-current=page] svg{stroke:var(--o-i-lila-89)}
 body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
 body[data-view=quiz] .ojai-tabbar{display:none}
 body[data-view=quiz]{padding-bottom:0}
 .menu-is-open .ojai-tabbar{display:none}
 /* Lo que flota se sube para no tapar la barra */
 .san-pause-btn{bottom:calc(78px + env(safe-area-inset-bottom))!important}
 .vida-mate{bottom:calc(140px + env(safe-area-inset-bottom))!important}
 #status{bottom:calc(80px + env(safe-area-inset-bottom))!important}
}

/* Mi camino */
.camino-hub{max-width:1150px;margin:auto;padding:34px 30px 10px}
.camino-hub h1{font-size:clamp(32px,4.6vw,56px);line-height:1.08;margin:12px 0 22px}
.camino-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.camino-hub em{color:#7d5a8a}
.camino-card{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;border-radius:22px;border:1px solid var(--o-i-lila-89);background:var(--o-crema-luz);color:var(--o-i-lila-21);min-height:92px;transition:transform .2s,box-shadow .2s}
.camino-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px #5a3e6a1f}
.camino-card img{width:62px;height:62px;border-radius:50%;object-fit:cover;flex:none;background:var(--o-niebla)}
.camino-card strong{display:block;font-size:17px}
.camino-card small{display:block;font-size:13px;line-height:1.45;opacity:.8;margin-top:2px}
.camino-card em{display:inline-block;margin-top:6px;font-style:normal;font-family:inherit;font-size:12px;padding:2px 10px;border-radius:20px;background:var(--o-i-lila-92);color:var(--o-lavanda)}
@media (max-width:900px){.camino-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.camino-hub{padding:22px 16px 6px}.camino-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.camino-card{transition:none}.camino-card:hover{transform:none}}

/* Menú del celular agrupado por momentos */
.menu-momentos{gap:18px!important;overflow-y:auto;max-height:78svh}
.menu-momentos>div{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.menu-grupo{font-size:11px!important;letter-spacing:.16em;text-transform:uppercase;color:var(--o-i-lila-79)!important;margin:0!important;font-weight:600}
.menu-momentos button{font-size:21px!important}
.menu-momentos a.menu-enlace{font-size:21px;font-weight:400;letter-spacing:-.035em;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;color:inherit}
.menu-momentos .menu-inicio{font-size:15px!important;opacity:.75;margin-top:6px}

/* ---------- Mi cuaderno: todo lo que has caminado (20 sep 2026) ---------- */
.cuaderno-intro{padding-bottom:10px}
.cuaderno-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px;margin:28px 0 8px}
.cuaderno-cifras div{border:1px solid var(--line,#0002);border-radius:20px;padding:16px 14px;text-align:center}
.cuaderno-cifras strong{display:block;font-size:34px;line-height:1}
.cuaderno-cifras span{font-size:13px;opacity:.75}
.cuaderno-jardin{margin:30px 0;padding:42px 0 30px;background:linear-gradient(180deg,var(--o-i-lila-23b) 0%,#7a5a86 22%,var(--o-arena) 62%,var(--o-i-durazno-91) 100%);color:var(--o-blanco)}
.cuaderno-jardin .eyebrow,.cuaderno-jardin h2{color:var(--o-blanco)}
.cuaderno-jardin .wrap>p:not(.eyebrow){color:var(--o-blanco);opacity:.9}
.cuaderno-jardin .san-garden{margin:10px auto 50px}
.cuaderno-row{justify-content:center;padding:0 16px}
.cuaderno-partes section{margin:46px 0}
.cuaderno-lista{list-style:none;padding:0;margin:18px 0}
.cuaderno-lista li{padding:14px 0;border-bottom:1px solid var(--line,#0001);overflow-wrap:anywhere}
.cuaderno-lista li span{font-size:13px;opacity:.7}
.cuaderno-jardin .btn.secondary{color:var(--o-i-lila-23b);border-color:var(--o-i-lila-23b);background:transparent}

/* ---------- Una sola puerta en «Sentir» (20 sep 2026) ----------
   El Iris entra primero y con peso propio. Las otras cinco puertas siguen
   estando, pero debajo y en voz más baja: se encuentran, no se imponen. */
.menu-momentos .menu-primero{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  width:100%;text-align:left;padding:14px 16px;min-height:44px;
  border:1px solid rgba(217,185,220,.34);border-radius:16px;
  background:rgba(217,185,220,.10);font-size:21px!important;line-height:1.25}
.menu-momentos .menu-primero-nota{font-size:13px!important;opacity:.72;font-weight:400;letter-spacing:.01em}
.menu-subgrupo{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--o-i-lila-79);opacity:.62;margin:14px 0 0;font-weight:600}
.menu-momentos .menu-subgrupo ~ button{font-size:17px!important;opacity:.82}

/* El cuaderno vacío (21 sep 2026): una sola acción, la que lo llena. */
.cuaderno-empieza{margin:22px 0 8px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.cuaderno-empieza .btn{min-height:48px;padding-inline:26px}

/* ---------- «¿Aún no sabes qué sientes?» · 21 sep 2026 ----------
   Una ventana tranquila con cuatro maneras de mirar. El Iris va primero. */
.ans{box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;
  border:0;border-radius:26px;padding:26px 22px 22px;background:var(--o-crema-luz);color:var(--o-ciruela-media);
  box-shadow:0 24px 70px color-mix(in srgb,var(--o-ciruela-noche) 45%,transparent)}
.ans::backdrop{background:color-mix(in srgb,var(--o-ciruela-noche) 62%,transparent)}
.ans-cerrar{position:absolute;right:14px;top:12px;width:44px;height:44px;border:0;border-radius:50%;background:var(--o-niebla);color:var(--o-ciruela-media);font-size:24px;line-height:1}
.ans-kicker{margin:0 0 6px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--o-lavanda)}
.ans h2{margin:0 44px 8px 0;font-size:clamp(24px,5vw,30px);line-height:1.15;color:var(--o-ciruela-noche);text-wrap:balance}
.ans-lead{margin:0 0 16px;font-size:16px;line-height:1.5}
.ans-maneras{display:grid;gap:10px}
.ans-manera{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:10px 14px;text-align:left;
  border:1.5px solid var(--o-lila-claro);border-radius:18px;background:var(--o-blanco);color:inherit;cursor:pointer}
.ans-manera img{width:48px;height:48px;object-fit:contain;flex:none}
.ans-manera strong{display:block;font-size:17px;color:var(--o-ciruela-noche)}
.ans-manera small{display:block;font-size:14px;color:var(--o-lavanda);margin-top:2px}
.ans-primera{border-color:var(--o-durazno);background:color-mix(in srgb,var(--o-durazno) 12%,var(--o-blanco))}
.ans-manera:focus-visible,.ans-cerrar:focus-visible{outline:3px solid var(--o-miel);outline-offset:2px}
.ans-pie{margin:16px 0 0;font-size:14px;color:var(--o-lavanda);text-align:center}