/* Mujer Imán · app. Editorial: Instrument Serif para títulos, Inter Tight para texto. Marfil + bordó + dorado. */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/instrument-serif.woff2") format("woff2")}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url("fonts/instrument-serif-italic.woff2") format("woff2")}
@font-face{font-family:'Inter Tight';font-weight:400 600;font-display:swap;src:url("fonts/inter-tight.woff2") format("woff2")}

:root{
  --ivory:#F8F3EC; --paper:#FFFDFB; --ink:#1E1614; --ink2:#6F635D; --ink3:#A89C95;
  --line:#EADFD4; --gold:#9B7C50; --goldL:#E8DAC4; --blush:#F2E1DA; --wine:#4A2226; --night:#1C1416;
  --ok:#5E7E62; --okL:#EFF4EE; --bad:#C98B8B; --badL:#F8ECEA; --peach:#F3D9C8;
  --serif:'Instrument Serif',Georgia,serif; --sans:'Inter Tight',system-ui,-apple-system,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--ivory)}
body{font-family:var(--sans);color:var(--ink);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100dvh}
body.noche{background:var(--night)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
input,textarea{font:inherit;color:inherit}
#app{max-width:480px;margin:0 auto;min-height:100dvh;position:relative}
.vista{min-height:100dvh;padding-bottom:calc(118px + var(--safe-b));animation:aparece .4s ease both}
@keyframes aparece{from{opacity:0}}
.vista>.h1,.vista>.hero,.vista>.top+.h1{animation:entra .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
svg.i{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold)}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);font-weight:500}
.oscuro{background:var(--night);color:#fff}
.oscuro .eyebrow{color:rgba(255,255,255,.55)}
.oscuro em{color:var(--peach)}

/* encabezados */
.top{display:flex;justify-content:space-between;align-items:center;padding:calc(22px + var(--safe-t)) 24px 0;min-height:64px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--blush);display:grid;place-items:center;font-family:var(--serif);font-size:19px;color:var(--wine)}
.atras{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--paper);box-shadow:0 1px 0 var(--line)}
.oscuro .atras{background:rgba(255,255,255,.08);box-shadow:none}
.h1{font-family:var(--serif);font-weight:400;font-size:46px;line-height:1;letter-spacing:-.015em;padding:18px 24px 0}
.h1 small{display:block;font-family:var(--sans);font-size:15px;color:var(--ink2);letter-spacing:0;margin-top:12px;line-height:1.45}
.sec{margin:40px 24px 14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sec h3{font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.05}
.sec a{font-size:13px;color:var(--ink2)}

/* auras */
.aura{position:absolute;border-radius:50%;filter:blur(42px);pointer-events:none}
.aura.a1{width:270px;height:270px;top:-100px;right:-90px;opacity:.95;animation:flota 10s ease-in-out infinite}
.aura.a2{width:210px;height:210px;bottom:-90px;left:-50px;opacity:.7;animation:flota 13s ease-in-out infinite reverse}
@keyframes flota{50%{transform:translate(-22px,26px) scale(1.08)}}
.grano{position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* tarjeta del día */
.hero{margin:26px 16px 0;border-radius:30px;background:var(--wine);color:#fff;position:relative;overflow:hidden;padding:24px 22px 22px;min-height:318px;display:flex;flex-direction:column;isolation:isolate}
.hero>*:not(.aura):not(.grano){position:relative}
.hero .eyebrow{color:rgba(255,255,255,.72)}
.hero h2{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.02;margin-top:auto;padding-top:56px;letter-spacing:-.015em}
.hero h2 em{color:var(--peach)}
.hero .meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:12px;font-size:13px;color:rgba(255,255,255,.75)}
.hero .go{margin-top:20px;display:flex;align-items:center;justify-content:space-between;background:#fff;color:var(--ink);border-radius:99px;padding:6px 6px 6px 22px;font-weight:500}
.hero .go .c{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
.segs{display:flex;gap:5px;margin-top:18px}
.segs i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.22)}
.segs i.d{background:#fff}
.segs i.h{background:linear-gradient(90deg,#fff 50%,rgba(255,255,255,.22) 50%)}

/* contador de silencio */
.silencio{margin:36px 24px 0;display:flex;align-items:flex-end;gap:16px}
.silencio .n{font-family:var(--serif);font-size:100px;line-height:.78;letter-spacing:-.03em}
.silencio .t{padding-bottom:4px}
.silencio .t b{display:block;font-weight:500;font-size:15.5px}
.silencio .t small{color:var(--ink2);font-size:13px}
.puntos{display:grid;grid-template-columns:repeat(14,1fr);gap:6px;margin:18px 24px 0}
.puntos i{aspect-ratio:1;border-radius:50%;background:var(--line)}
.puntos i.d{background:var(--gold)}
.puntos i.h{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--gold)}
.linkchico{margin:14px 24px 0;font-size:12.5px;color:var(--ink3);text-decoration:underline;text-underline-offset:3px;display:inline-block}

/* listas */
.lista{margin:0 16px;background:var(--paper);border-radius:24px;overflow:hidden;box-shadow:0 1px 0 var(--line)}
.fila{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);width:100%;text-align:left}
.fila:last-child{border:0}
.fila .ic{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;flex:none}
.fila b{font-weight:500;display:block}
.fila small{color:var(--ink2);font-size:13px;display:block}
.fila .ch{margin-left:auto;color:var(--ink3)}
.ic.rosa{background:var(--blush);color:var(--wine)} .ic.verde{background:#E9EFE6;color:var(--ok)} .ic.lila{background:#ECEAF6;color:#5D5A99} .ic.oro{background:#F3EBDD;color:var(--gold)}
.pend{margin:0 16px;display:grid;gap:8px}
.audioc{margin:0 16px;border-radius:24px;padding:18px;display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,#EFE4F0,#F6E7DC)}
.audioc .p{width:50px;height:50px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none}
.audioc b{font-weight:500;display:block}.audioc small{color:var(--ink2);font-size:13px}

/* navegación */
.nav{position:fixed;left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:456px;bottom:calc(12px + var(--safe-b));height:70px;border-radius:26px;background:rgba(255,253,251,.84);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 12px 34px rgba(60,30,20,.14),0 0 0 1px rgba(234,223,212,.6);display:flex;align-items:center;justify-content:space-around;z-index:30}
.nav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--ink3);min-width:54px;transition:color .2s}
.nav a.on{color:var(--ink)}
.nav a.sos{width:54px;height:54px;border-radius:50%;background:var(--wine);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 6px rgba(74,34,38,.09);min-width:0}
.oscuro .nav{background:rgba(40,28,30,.78);box-shadow:0 12px 34px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06)}
.oscuro .nav a{color:rgba(255,255,255,.45)}.oscuro .nav a.on{color:#fff}
.oscuro .nav a.sos{background:#fff;color:var(--wine);box-shadow:0 0 0 6px rgba(255,255,255,.08)}

/* botones */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;border-radius:99px;background:var(--ink);color:#fff;font-weight:500;width:100%;transition:transform .15s,opacity .2s;padding:0 24px;text-align:center}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.22;pointer-events:none}
.btn.claro{background:#fff;color:var(--ink)}
.btn.borde{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor;opacity:.8}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;border:1px solid var(--line);border-radius:99px;padding:6px 12px;white-space:nowrap;background:var(--paper);color:var(--ink)}

/* ───── historia del día ───── */
.story{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:var(--ivory);color:var(--ink);transition:background .5s,color .5s;max-width:480px;margin:0 auto;overflow:hidden}
.story.dark{background:var(--wine);color:#fff}
.story .aura{opacity:0;transition:opacity .6s}
.story.dark .aura{opacity:.85}
.barras{display:flex;gap:4px;padding:calc(14px + var(--safe-t)) 16px 0;position:relative;z-index:2}
.barras i{flex:1;height:2.5px;border-radius:2px;background:rgba(30,22,20,.12);overflow:hidden}
.barras i b{display:block;height:100%;width:0;background:var(--ink);transition:width .35s}
.story.dark .barras i{background:rgba(255,255,255,.22)}.story.dark .barras i b{background:#fff}
.shead{display:flex;justify-content:space-between;align-items:center;padding:14px 20px 0;position:relative;z-index:2}
.story.dark .eyebrow{color:rgba(255,255,255,.65)}
.cards{flex:1;position:relative;z-index:1}
.card{position:absolute;inset:0;padding:26px 26px calc(24px + var(--safe-b));display:flex;flex-direction:column;opacity:0;transform:translateX(26px);transition:opacity .4s,transform .45s cubic-bezier(.2,.7,.2,1);pointer-events:none;overflow-y:auto}
.card.on{opacity:1;transform:none;pointer-events:auto}
.card.prev{transform:translateX(-26px)}
.tap{position:absolute;inset:0;display:flex;z-index:0}
.tap div{flex:1}.tap div:last-child{flex:2}
.card>*:not(.tap){position:relative;z-index:1}
.card .sinclick{pointer-events:none}
.big{font-family:var(--serif);font-size:38px;line-height:1.08;letter-spacing:-.015em}
.story.dark .big em{color:var(--peach)}
.portada h1{font-family:var(--serif);font-weight:400;font-size:60px;line-height:.95;margin-top:auto;letter-spacing:-.02em}
.portada h1 em{color:var(--peach)}
.portada p{margin-top:16px;color:rgba(255,255,255,.75);font-size:16px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tags span{border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:6px 12px;font-size:12.5px}
.hint{margin-top:auto;padding-top:24px;font-size:12.5px;color:var(--ink3);display:flex;align-items:center;gap:6px}
.story.dark .hint{color:rgba(255,255,255,.55)}
.num{font-family:var(--serif);font-size:22px;color:var(--gold);margin-bottom:auto;padding-bottom:30px}
.apoyo{margin-top:18px;font-size:16px;color:var(--ink2);line-height:1.55}
.lista7{margin-top:16px;display:grid;counter-reset:n}
.lista7 li{list-style:none;display:flex;gap:14px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.lista7 li:last-child{border:0}
.lista7 li::before{counter-increment:n;content:counter(n);font-family:var(--serif);font-size:22px;color:var(--gold);min-width:18px}

.op{display:flex;gap:10px;width:100%;text-align:left;background:var(--paper);border:1.5px solid transparent;border-radius:18px;padding:15px 17px;margin-top:10px;font-size:15.5px;transition:.25s;box-shadow:0 1px 0 var(--line)}
.op .l{font-family:var(--serif);font-size:21px;line-height:1;color:var(--gold);padding-top:1px}
.op.bien{border-color:var(--ok);background:var(--okL)}
.op.mal{border-color:var(--bad);background:var(--badL)}
.op.apagada{opacity:.38}
.fb{margin-top:16px;border-radius:18px;padding:16px 18px;background:var(--ink);color:#fff;font-size:15px;animation:entra .4s both}
.fb b{font-family:var(--serif);font-weight:400;font-size:23px;display:block;margin-bottom:4px}

.tiles{display:grid;gap:10px;margin-top:22px}
.tile{display:flex;align-items:center;gap:14px;background:var(--paper);border-radius:20px;padding:15px 16px;text-align:left;box-shadow:0 1px 0 var(--line);transition:background .3s;width:100%}
.ck{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);flex:none;display:grid;place-items:center;transition:.35s cubic-bezier(.3,1.6,.5,1)}
.ck svg{opacity:0;transform:scale(.4);transition:.35s cubic-bezier(.3,1.6,.5,1);stroke:#fff;width:16px;height:16px;stroke-width:2}
.tile.ok{background:#F3EDE3}
.tile.ok .ck{background:var(--gold);border-color:var(--gold)}
.tile.ok .ck svg{opacity:1;transform:none}
.tile.ok b{text-decoration:line-through;text-decoration-color:rgba(155,124,80,.55)}
.tile b{font-weight:500;display:block}
.tile small{color:var(--ink2);font-size:13px;display:block}
.tile .pill{margin-left:auto}

.animos{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:22px}
.animo{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11.5px;color:var(--ink2)}
.animo i{width:100%;aspect-ratio:1;border-radius:50%;display:block;transition:.3s;box-shadow:0 1px 0 var(--line)}
.animo.on i{transform:scale(1.1);box-shadow:0 0 0 2px var(--ink)}
.animo.on{color:var(--ink);font-weight:500}
.rango{margin-top:30px}
.rango .v{font-family:var(--serif);font-size:46px;line-height:1}
input[type=range]{width:100%;margin-top:14px;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--gold) var(--p,30%),var(--line) var(--p,30%));outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.2)}
input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.escala{display:flex;justify-content:space-between;font-size:12px;color:var(--ink3);margin-top:8px}
.abrir-diario{margin-top:24px;font-size:14px;color:var(--ink2);display:flex;align-items:center;gap:8px}
.area{width:100%;border:0;border-radius:18px;background:var(--paper);box-shadow:0 1px 0 var(--line);padding:16px;font-size:16px;line-height:1.5;resize:none;min-height:110px;outline:0;margin-top:10px}
.area:focus{box-shadow:0 0 0 1.5px var(--gold)}
.campos{display:grid;gap:10px;margin-top:22px}
.campo-l{display:flex;align-items:center;gap:12px;background:var(--paper);border-radius:16px;padding:4px 16px;box-shadow:0 1px 0 var(--line)}
.campo-l span{font-family:var(--serif);font-size:22px;color:var(--gold);min-width:16px}
.campo-l input{flex:1;border:0;background:none;padding:14px 0;font-size:15.5px;outline:0;min-width:0}
.pie{margin-top:auto;padding-top:22px}
.pie small{display:block;text-align:center;color:var(--ink3);font-size:12.5px;margin-top:10px}
.story.dark .pie small{color:rgba(255,255,255,.5)}

.med-ops{display:grid;gap:8px;margin-top:20px}
.med-ops button{background:var(--paper);border-radius:16px;padding:15px 17px;box-shadow:0 1px 0 var(--line);font-size:15.5px;transition:.2s}
.med-ops button.on{background:var(--ink);color:#fff}
.gauge{margin-top:24px}
.gauge .barra{position:relative;height:8px;border-radius:8px;background:linear-gradient(90deg,#D9C9D9,#E5D3CB,#E7D9B6,#C9A66B)}
.gauge .punto{position:absolute;top:50%;left:3%;width:22px;height:22px;border-radius:50%;background:var(--ink);border:3px solid #fff;transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.2);transition:left 1.2s cubic-bezier(.2,.7,.2,1)}
.gauge .labs{display:flex;justify-content:space-between;font-size:11px;color:var(--ink3);margin-top:10px}

.fin{align-items:center;text-align:center;justify-content:center}
.anillo{width:176px;height:176px;position:relative;margin-bottom:28px;flex:none}
.anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
.anillo circle{fill:none;stroke-width:5}
.anillo .bg{stroke:rgba(255,255,255,.15)}
.anillo .fg{stroke:var(--peach);stroke-linecap:round;stroke-dasharray:503;stroke-dashoffset:503;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1) .3s}
.anillo .c{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:58px;line-height:1}
.anillo .c small{display:block;font-family:var(--sans);font-size:12px;opacity:.6;margin-top:2px}
.manana{margin-top:26px;border-top:1px solid rgba(255,255,255,.15);padding-top:18px;width:100%;font-size:13px;color:rgba(255,255,255,.65)}
.manana b{display:block;font-family:var(--serif);font-weight:400;font-size:23px;color:#fff;margin-top:4px}

/* ───── SOS ───── */
.sosw{display:flex;flex-direction:column;align-items:center;padding:calc(50px + var(--safe-t)) 26px 0;text-align:center}
.sosw h1{font-family:var(--serif);font-weight:400;font-size:42px;line-height:1.04;margin-top:12px;letter-spacing:-.015em}
.sosw.izq{align-items:stretch;text-align:left;padding-top:calc(18px + var(--safe-t))}
.resp{position:relative;width:264px;height:264px;margin:30px 0 20px;display:grid;place-items:center;cursor:pointer}
.resp .o{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#C47F6E 0,#6B3236 55%,transparent 72%);transform:scale(.55);filter:blur(2px)}
.resp .o2{position:absolute;inset:30px;border-radius:50%;border:1px solid rgba(255,255,255,.18);transform:scale(.55)}
.resp.run .o,.resp.run .o2{animation:respira 12s ease-in-out infinite}
@keyframes respira{0%{transform:scale(.55)}33%{transform:scale(1)}50%{transform:scale(1)}100%{transform:scale(.55)}}
.resp .txt{position:relative;font-family:var(--serif);font-size:31px;line-height:1.1}
.resp .seg{position:relative;font-size:13px;opacity:.6;margin-top:6px}
.lead{color:rgba(255,255,255,.7);max-width:320px}
.sosops{width:100%;margin-top:28px;display:grid;gap:10px}
.sosop{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:16px 18px;background:rgba(255,255,255,.03)}
.sosop b{font-weight:500;display:block}
.sosop small{color:rgba(255,255,255,.55);font-size:13px;display:block}
.sosop .ch{margin-left:auto;opacity:.5}
.frenados{margin-top:14px;font-size:13px;color:rgba(255,255,255,.5);text-align:center}
.carta{width:100%;min-height:42dvh;border:0;background:transparent;color:#fff;font-family:var(--serif);font-size:26px;line-height:1.3;resize:none;outline:0;margin-top:22px}
.carta::placeholder{color:rgba(255,255,255,.3)}
.motivo{border-top:1px solid rgba(255,255,255,.12);padding:22px 0;font-family:var(--serif);font-size:27px;line-height:1.18}
.motivo small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:8px}

/* audio */
.player{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 26px}
.orbe{position:relative;width:220px;height:220px;margin:26px 0}
.orbe i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#E7B8A4,#8E4A4E 55%,transparent 72%);filter:blur(4px)}
.orbe i+i{inset:24px;background:radial-gradient(circle at 60% 60%,#C9A66B,transparent 65%);mix-blend-mode:screen;opacity:.7}
.player.suena .orbe i{animation:latido 4s ease-in-out infinite}
.player.suena .orbe i+i{animation-duration:6s;animation-direction:reverse}
@keyframes latido{50%{transform:scale(1.1) rotate(12deg)}}
.linea{font-family:var(--serif);font-size:27px;line-height:1.22;min-height:5em;display:flex;align-items:center;justify-content:center;transition:opacity .25s;max-width:340px}
.prog{width:100%;height:3px;border-radius:3px;background:rgba(255,255,255,.15);margin-top:22px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--peach);transition:width .5s}
.playb{width:76px;height:76px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;margin-top:26px}
.playb svg{width:28px;height:28px;fill:currentColor;stroke:none}
.nota-o{margin-top:16px;font-size:12.5px;color:rgba(255,255,255,.45)}
.otros{width:100%;margin-top:34px;display:grid;gap:8px;text-align:left}

/* kit */
.seg-ctl{display:flex;margin:24px 16px 0;background:#EFE7DD;border-radius:99px;padding:4px}
.seg-ctl a{flex:1;text-align:center;padding:10px 0;border-radius:99px;font-size:14px;color:var(--ink2);transition:.25s}
.seg-ctl a.on{background:var(--paper);color:var(--ink);font-weight:500;box-shadow:0 1px 4px rgba(60,30,20,.08)}
.intro{margin:20px 24px 14px;color:var(--ink2);font-size:14px}
.cat-cab{padding:0 24px}
.cat-cab h1{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.02;letter-spacing:-.015em;margin-top:18px}
.cat-cab p{color:var(--ink2);margin-top:10px}
.porque{margin:22px 16px 0;border-radius:22px;padding:18px 20px;background:var(--wine);color:#fff;position:relative;overflow:hidden;font-size:14.5px}
.porque>*:not(.aura):not(.grano){position:relative}
.porque b{font-family:var(--serif);font-weight:400;font-size:21px;display:block;margin-bottom:4px;color:var(--peach)}
.chat{margin:24px 16px 0;display:grid;gap:14px}
.burbuja{justify-self:end;max-width:88%;background:var(--paper);border-radius:22px 22px 6px 22px;padding:14px 16px;box-shadow:0 1px 0 var(--line);font-size:15.5px}
.burbuja .acc{display:flex;justify-content:flex-end;margin-top:10px}
.copiar{font-size:12.5px;color:var(--gold);font-weight:500;display:flex;align-items:center;gap:6px}
.copiar.ok{color:var(--ok)}
.copiar svg{width:15px;height:15px}
.senal{margin:0 16px 10px;background:var(--paper);border-radius:22px;box-shadow:0 1px 0 var(--line);overflow:hidden}
.senal>button{display:flex;align-items:center;gap:12px;width:100%;padding:17px 18px;text-align:left}
.senal>button b{font-weight:500;flex:1}
.fuerza{display:flex;gap:3px}
.fuerza i{width:6px;height:16px;border-radius:3px;background:var(--line)}
.fuerza i.on{background:var(--gold)}
.senal .det{display:none;padding:0 18px 18px;font-size:14.5px;color:var(--ink2)}
.senal .det p+p{margin-top:10px}
.senal .det b{color:var(--ink);font-weight:500}
.senal.abierta .det{display:block;animation:entra .3s both}
.reglas{margin:0 16px;background:var(--paper);border-radius:24px;padding:6px 20px;box-shadow:0 1px 0 var(--line)}
.reglas li{list-style:none;display:flex;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.reglas li:last-child{border:0}
.reglas li span{font-family:var(--serif);font-size:22px;color:var(--gold);min-width:16px}
.semh{margin:10px 16px 0;border-radius:24px;padding:20px;position:relative;overflow:hidden;color:#fff;background:var(--wine)}
.semh .eyebrow{color:rgba(255,255,255,.7)}
.semh ul{margin-top:12px;display:grid;gap:8px}
.semh li{list-style:none;font-size:15px;padding-left:16px;position:relative}
.semh li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--peach)}
.semh>*:not(.aura):not(.grano){position:relative}

/* camino */
.semana{margin:30px 16px 0}
.semana-cab{border-radius:26px;padding:22px 20px;color:#fff;position:relative;overflow:hidden;min-height:134px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--wine)}
.semana-cab>*:not(.aura):not(.grano){position:relative}
.semana-cab .eyebrow{color:rgba(255,255,255,.7)}
.semana-cab h3{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1;margin-top:6px}
.semana-cab small{color:rgba(255,255,255,.75);font-size:13px;margin-top:6px;display:block}
.dias{margin-top:6px}
.dia{display:flex;align-items:center;gap:14px;padding:14px 8px;border-bottom:1px solid var(--line)}
.dia:last-child{border:0}
.dia .n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:20px;flex:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink2)}
.dia.ok .n{background:var(--gold);color:#fff;box-shadow:none}
.dia.hoy .n{background:var(--ink);color:#fff;box-shadow:0 0 0 4px rgba(30,22,20,.08)}
.dia b{font-weight:500;display:block;font-size:15px}
.dia small{color:var(--ink2);font-size:13px}
.dia.cerrado{opacity:.45}
.dia .der{margin-left:auto;color:var(--ink3)}

/* progreso */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px 16px 0}
.stat{background:var(--paper);border-radius:22px;padding:18px;box-shadow:0 1px 0 var(--line)}
.stat b{font-family:var(--serif);font-weight:400;font-size:46px;line-height:1;display:block;letter-spacing:-.02em}
.stat span{font-size:13px;color:var(--ink2);display:block;margin-top:6px}
.stat.osc{background:var(--wine);color:#fff;box-shadow:none}.stat.osc span{color:rgba(255,255,255,.7)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:0 20px}
.cal i{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12.5px;color:var(--ink3);box-shadow:inset 0 0 0 1px var(--line)}
.cal i.ok{background:var(--gold);color:#fff;box-shadow:none}
.cal i.hoy{background:var(--ink);color:#fff;box-shadow:none}
.grafico{margin:0 16px;background:var(--paper);border-radius:24px;padding:20px 18px 16px;box-shadow:0 1px 0 var(--line)}
.barras-g{display:flex;align-items:flex-end;gap:4px;height:110px}
.barras-g i{flex:1;border-radius:4px 4px 2px 2px;background:var(--goldL);min-height:3px}
.barras-g i.v{background:var(--gold)}
.grafico .pie-g{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink3);margin-top:10px}
.grafico p{font-size:13.5px;color:var(--ink2);margin-bottom:14px}
.meds{margin:0 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.medc{background:var(--paper);border-radius:20px;padding:16px 10px;text-align:center;box-shadow:0 1px 0 var(--line)}
.medc b{font-family:var(--serif);font-weight:400;font-size:20px;display:block;line-height:1.1}
.medc span{font-size:12px;color:var(--ink3);display:block;margin-top:6px}
.medc .mb{height:4px;border-radius:4px;background:var(--line);margin-top:10px;overflow:hidden}
.medc .mb i{display:block;height:100%;background:var(--gold)}
.logros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 16px}
.logro{background:var(--paper);border-radius:20px;padding:16px 8px;text-align:center;font-size:12px;color:var(--ink3);box-shadow:0 1px 0 var(--line);line-height:1.3}
.logro .li{width:46px;height:46px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line)}
.logro.ok{color:var(--ink)}
.logro.ok .li{background:var(--wine);color:var(--peach);box-shadow:none}
.entradas{margin:0 16px;display:grid;gap:10px}
.entrada{background:var(--paper);border-radius:20px;padding:16px 18px;box-shadow:0 1px 0 var(--line);font-size:15px;white-space:pre-wrap}
.entrada small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px;white-space:normal}
.entrada q{display:block;font-family:var(--serif);font-size:19px;color:var(--ink2);quotes:none;margin-bottom:8px;line-height:1.2;white-space:normal}
.vacio{margin:0 24px;color:var(--ink3);font-size:14px}

/* perfil */
.ajustes{margin:26px 16px 0;background:var(--paper);border-radius:24px;box-shadow:0 1px 0 var(--line);overflow:hidden}
.ajustes input{border:0;background:none;text-align:right;outline:0;font-size:15px;flex:1;min-width:0}
.ajustes .fila span:last-child{margin-left:auto;color:var(--ink2);text-align:right;overflow:hidden;text-overflow:ellipsis}
.cuidado{margin:18px 16px 0;border-radius:22px;padding:18px 20px;background:var(--blush);font-size:14px;color:var(--wine)}
.cuidado b{font-weight:600}

/* bienvenida */
.bienv{min-height:100dvh;display:flex;flex-direction:column;background:var(--wine);color:#fff;position:relative;overflow:hidden}
.bienv .arriba{flex:1;position:relative;padding:calc(36px + var(--safe-t)) 28px 34px;display:flex;flex-direction:column;min-height:44dvh}
.bienv .arriba>*:not(.aura):not(.grano){position:relative}
.bienv h1{font-family:var(--serif);font-weight:400;font-size:56px;line-height:.98;letter-spacing:-.02em;margin-top:auto}
.bienv h1 em{color:var(--peach)}
.bienv p{color:rgba(255,255,255,.75);margin-top:14px;font-size:15.5px;max-width:330px}
.marca{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:22px}
.hoja-b{background:var(--ivory);color:var(--ink);border-radius:32px 32px 0 0;padding:26px 20px calc(24px + var(--safe-b));position:relative;display:grid;gap:10px}
.inp{display:block;background:var(--paper);border-radius:18px;padding:12px 18px;box-shadow:0 1px 0 var(--line)}
.inp span{display:block;font-size:12px;color:var(--ink3)}
.inp input{width:100%;border:0;background:none;outline:0;font-size:16.5px;padding-top:2px}
.inp:focus-within{box-shadow:0 0 0 1.5px var(--gold)}
.bienv .nota{font-size:12.5px;color:var(--ink3);text-align:center;margin-top:4px;max-width:none}
::placeholder{color:#C4B9B1;opacity:1}

/* hoja inferior y avisos */
.velo{position:fixed;inset:0;background:rgba(20,12,12,.45);z-index:80;display:flex;align-items:flex-end;justify-content:center;animation:velo .3s both}
@keyframes velo{from{opacity:0}}
.hoja{width:100%;max-width:480px;background:var(--ivory);color:var(--ink);border-radius:30px 30px 0 0;padding:12px 24px calc(24px + var(--safe-b));animation:sube .4s cubic-bezier(.2,.8,.2,1) both;text-align:center}
@keyframes sube{from{transform:translateY(100%)}}
.hoja .asa{width:40px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 24px}
.hoja h2{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.05;letter-spacing:-.01em}
.hoja p{color:var(--ink2);margin-top:10px}
.hoja .btns{display:grid;gap:8px;margin-top:24px}
.hoja .btn.borde{color:var(--ink)}
.medalla{width:84px;height:84px;border-radius:50%;margin:4px auto 18px;background:var(--wine);color:var(--peach);display:grid;place-items:center}
.medalla svg.i{width:36px;height:36px}
.toast{position:fixed;left:50%;bottom:calc(100px + var(--safe-b));transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:99px;font-size:14px;z-index:99;animation:entra .3s both;white-space:nowrap}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}