/* ==========================================================================
   ALGIEBA — alma: papel, cuaderno y calidez humana. Editorial en serif sobre lila,
   libreta con tildes dibujadas a mano, celular con avisos a los padres y notas adhesivas.
   ========================================================================== */
body.al { --c: #690681; --cg: #d18ae6; --paper: #f4eef6; --paper2: #eadff0; --white: #fbf8fb; --line: #dccfe3; --ink: #2a1633; --ink2: #4a3156; --mut: #7b6a85; background: #f4eef6; }
.hand { font-family: 'Caveat', 'Segoe Script', cursive; }

/* ---------- Hero editorial ---------- */
.al-hero { padding: calc(var(--hdr) + clamp(34px, 6vw, 84px)) 0 0; background: #f4eef6; }
.al-top { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(24px, 5vw, 90px); align-items: end; }
.al-hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 5.7vw, 5.5rem); line-height: .98; letter-spacing: -.04em; color: var(--ink); }
.al-hero h1 em { color: #690681; font-style: italic; font-weight: 400; }
.al-side { display: grid; gap: 22px; padding-bottom: 8px; }
.al-side p { font-family: var(--serif); font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.38; color: var(--ink2); }
.al-side .cta { display: flex; gap: 10px; flex-wrap: wrap; }
.al-pill { display: inline-flex; gap: 10px; align-items: center; font: 500 .74rem 'Geist Mono', monospace; letter-spacing: .1em; color: #690681; margin-bottom: 1.6rem; }
.al-pill i { width: 8px; height: 8px; border-radius: 50%; background: #690681; box-shadow: 0 0 0 4px rgba(105,6,129,.15); }
@media (max-width: 900px) { .al-top { grid-template-columns: 1fr; } }

.al-stage { position: relative; margin-top: clamp(34px, 5vw, 64px); border-radius: 32px; background-color: #e5d5ee; background-image: radial-gradient(rgba(105,6,129,.18) 1.2px, transparent 1.7px); background-size: 20px 20px; min-height: 620px; overflow: hidden; padding: clamp(22px, 4vw, 60px); display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: center; }
.al-cap { position: absolute; left: 24px; bottom: 18px; font: 500 .7rem 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #6b2a80; z-index: 3; }
@media (max-width: 900px) { .al-stage { grid-template-columns: 1fr; padding-bottom: 60px; } }

/* libreta */
.al-nb { position: relative; max-width: 560px; justify-self: center; width: 100%; background: #fffdf8; border-radius: 6px 18px 18px 6px; padding: 26px 26px 26px 78px; box-shadow: 0 30px 60px -28px rgba(60,10,75,.5), 0 2px 0 rgba(0,0,0,.04); transform: rotate(-2.2deg);
  background-image: repeating-linear-gradient(transparent 0, transparent 41px, #cfd6e8 41px, #cfd6e8 42px); background-position: 0 70px; }
.al-nb::before { content: ''; position: absolute; left: 60px; top: 0; bottom: 0; width: 2px; background: #f0a4b3; opacity: .85; }
.al-nb .holes { position: absolute; left: 18px; top: 0; bottom: 0; display: grid; align-content: space-around; }
.al-nb .holes i { width: 16px; height: 16px; border-radius: 50%; background: #e5d5ee; box-shadow: inset 0 2px 3px rgba(0,0,0,.25); }
.al-nb h4 { font-family: 'Caveat', cursive; font-weight: 600; font-size: 2rem; color: #3a1a49; line-height: 1; }
.al-nb .dt { font-family: 'Caveat', cursive; font-size: 1.35rem; color: #7b6a85; margin-bottom: 14px; display: block; }
.al-row { display: flex; align-items: center; justify-content: space-between; height: 42px; font-family: 'Caveat', cursive; font-size: 1.7rem; color: #2b2540; }
.al-row .mx { display: flex; align-items: center; gap: 10px; }
.al-row svg { width: 44px; height: 30px; overflow: visible; }
.al-row path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3.2; stroke-dasharray: 60; stroke-dashoffset: 60; }
.al-row .ok path { stroke: #1b8a4b; } .al-row .no path, .al-row .no circle { stroke: #c12425; } .al-row .la path { stroke: #c27700; }
.al-row circle { fill: none; stroke-width: 2.6; stroke-dasharray: 100; stroke-dashoffset: 100; }
.al-nb.go .al-row path, .al-nb.go .al-row circle { animation: draw .7s ease-out forwards; animation-delay: calc(var(--i) * .55s + .4s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.al-row small { font-family: 'Geist Mono', monospace; font-size: .62rem; letter-spacing: .06em; color: #8a7a96; opacity: 0; transition: opacity .4s; } .al-nb.go .al-row small { opacity: 1; transition-delay: calc(var(--i) * .55s + 1s); }

/* celular */
.al-phone { position: relative; width: min(290px, 72vw); aspect-ratio: 9 / 18.6; border-radius: 46px; background: #151115; padding: 10px; box-shadow: 0 50px 90px -30px rgba(40,6,55,.7), inset 0 0 0 2px #2a232b; transform: rotate(3deg); justify-self: center; }
.al-scr { height: 100%; border-radius: 37px; overflow: hidden; background: linear-gradient(170deg, #4a0d5d, #240a30 58%, #10051a); padding: 52px 12px 12px; color: #fff; position: relative; }
.al-notch { position: absolute; top: 11px; left: 50%; translate: -50% 0; width: 92px; height: 25px; border-radius: 99px; background: #000; z-index: 2; }
.al-clock { text-align: center; font: 300 4rem 'Geist', sans-serif; letter-spacing: -.05em; line-height: 1; } .al-date { text-align: center; font-size: .78rem; color: rgba(255,255,255,.7); margin-top: 6px; }
.al-nots { display: grid; gap: 8px; margin-top: 22px; }
.al-not { background: rgba(255,255,255,.93); color: #1d1024; border-radius: 17px; padding: 10px 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; animation: notIn .7s var(--ease) both; }
.al-not.old { opacity: .72; transform: scale(.97); transition: all .5s; }
@keyframes notIn { from { opacity: 0; transform: translateY(-18px) scale(.96); } }
.al-not .ap { width: 30px; height: 30px; border-radius: 9px; background: #690681; color: #fff; display: grid; place-items: center; } .al-not .ap svg { width: 16px; height: 16px; }
.al-not b { font-size: .72rem; display: block; color: #690681; letter-spacing: .02em; } .al-not span { font-size: .83rem; line-height: 1.3; display: block; }
.al-not em { font-style: normal; font-size: .66rem; color: #8a7a96; }

/* ---------- Modos (pestañas) ---------- */
.al-seg { display: inline-flex; padding: 5px; border: 1px solid var(--line); border-radius: 99px; background: var(--white); }
.al-seg button { appearance: none; border: 0; background: none; padding: .62rem 1.2rem; border-radius: 99px; font-weight: 500; color: var(--mut); transition: all .25s; }
.al-seg button.on { background: #690681; color: #fff; }
.al-modes { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 5vw, 80px); align-items: center; margin-top: 34px; }
.al-modes h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.03em; line-height: 1.05; }
.al-modes p.lead { margin-top: 1rem; }
.al-modes ul { margin-top: 22px; display: grid; border-top: 1px solid var(--line); } .al-modes li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .98rem; color: var(--ink2); } .al-modes li svg { width: 18px; height: 18px; color: #690681; flex: none; margin-top: 3px; }
.al-pane { display: none; } .al-pane.on { display: block; animation: paneIn .6s var(--ease); }
.al-vis { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: 0 30px 50px -34px rgba(60,10,75,.5); min-height: 280px; display: grid; gap: 12px; align-content: start; }
.al-vis .lab { color: var(--mut); }
.al-ent { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #faf5fc; border: 1px solid #eadff0; animation: notIn .6s var(--ease) both; }
.al-ent .av { width: 34px; height: 34px; border-radius: 50%; background: #e8d3f0; color: #690681; display: grid; place-items: center; font-weight: 700; font-size: .72rem; flex: none; }
.al-ent b { display: block; font-weight: 600; } .al-ent small { color: var(--mut); font-size: .78rem; } .al-ent .t { margin-left: auto; font: 500 .74rem 'Geist Mono', monospace; color: var(--mut); text-align: right; }
.al-bd { font: 600 .64rem 'Geist', sans-serif; padding: 2px 8px; border-radius: 99px; } .al-bd.ok { background: #d1fae5; color: #047857; } .al-bd.wr { background: #fef3c7; color: #b45309; } .al-bd.er { background: #fee2e2; color: #c12425; }
.al-sub { display: grid; grid-template-columns: 84px 1fr 44px; gap: 12px; align-items: center; font-size: .9rem; color: var(--ink2); } .al-sub em { font-style: normal; font-family: 'Geist Mono', monospace; text-align: right; font-size: .84rem; }
.al-track { height: 10px; border-radius: 99px; background: #f0e6f4; position: relative; } .al-track i { display: block; height: 100%; border-radius: 99px; background: #690681; transform-origin: left; animation: mkGrow 1.4s var(--ease) both; } .al-track::after { content: ''; position: absolute; left: 75%; top: -4px; bottom: -4px; width: 2px; background: #c12425; opacity: .6; }
@media (max-width: 900px) { .al-modes { grid-template-columns: 1fr; } }

/* ---------- Notas adhesivas ---------- */
.al-notes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.al-nt { position: relative; padding: 30px 26px 28px; background: #fff; border: 1px solid #e8dcee; box-shadow: 0 18px 30px -22px rgba(60,10,75,.5); transition: transform .4s var(--ease); }
.al-nt:nth-child(1), .al-nt:nth-child(2) { grid-column: span 3; } .al-nt:nth-child(n+3) { grid-column: span 2; }
.al-nt:nth-child(1) { transform: rotate(-.8deg); background: #fdf6ff; } .al-nt:nth-child(2) { transform: rotate(.7deg); background: #fffaf0; }
.al-nt:nth-child(3) { transform: rotate(.6deg); background: #fff; } .al-nt:nth-child(4) { transform: rotate(-.7deg); background: #f6f1ff; } .al-nt:nth-child(5) { transform: rotate(.5deg); background: #fff5f7; } .al-nt:nth-child(6) { transform: rotate(-.5deg); background: #f2faf5; }
.al-nt:hover { transform: rotate(0) translateY(-4px); }
.al-nt::before { content: ''; position: absolute; top: -11px; left: 50%; translate: -50% 0; width: 84px; height: 22px; background: rgba(209,138,230,.45); transform: rotate(-2deg); }
.al-nt h3 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; letter-spacing: -.025em; margin-bottom: 8px; } .al-nt p { color: var(--mut); font-size: .98rem; }
@media (max-width: 900px) { .al-notes { grid-template-columns: 1fr 1fr; } .al-nt:nth-child(n) { grid-column: span 1; } }
@media (max-width: 560px) { .al-notes { grid-template-columns: 1fr; } }

/* ---------- Planes provisionales ---------- */
.al-prov { display: inline-flex; gap: 8px; align-items: center; font: 600 .66rem 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; padding: 4px 11px; border-radius: 99px; background: #fff3c4; color: #8a5a00; border: 1px solid #f1d98a; margin-left: 12px; vertical-align: middle; }
.al-plans { display: grid; grid-template-columns: 1fr 1fr; border: 1px dashed #c9b3d3; background: #fff; }
.al-plans > div { padding: 28px; display: grid; gap: 18px; align-content: start; } .al-plans > div + div { border-left: 1px dashed #c9b3d3; }
.al-plans h3 { font-family: var(--serif); font-weight: 500; font-size: 1.8rem; letter-spacing: -.03em; }
.al-tier { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.al-tier > div { display: grid; gap: 10px; align-content: start; padding-top: 14px; border-top: 2px solid #690681; } .al-tier .nm { font: 500 .72rem 'Geist Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #690681; }
.al-tier ul { display: grid; gap: 8px; } .al-tier li { display: flex; gap: 9px; font-size: .9rem; color: var(--ink2); } .al-tier li svg { width: 15px; height: 15px; color: #690681; flex: none; margin-top: 3px; }
@media (max-width: 900px) { .al-plans { grid-template-columns: 1fr; } .al-plans > div + div { border-left: 0; border-top: 1px dashed #c9b3d3; } }
@media (max-width: 480px) { .al-tier { grid-template-columns: 1fr; } }
body.al .faq summary::after { color: #690681; }
body.al .cp { background: radial-gradient(110% 120% at 0% 110%, #a83fc4 0%, #690681 32%, #3a0449 64%, #170220 100%); }
body.al .btn-primary { background: #690681; } body.al .btn-primary:hover { background: #52065a; }
.still .al-nb path, .still .al-nb circle { stroke-dashoffset: 0 !important; animation: none !important; } .still .al-row small { opacity: 1; }
body.al .hdr, body.ag .hdr { background: rgba(10,10,10,.94); }
.al-row > span:first-child { white-space: nowrap; }
@media (max-width: 560px) { .al-row { font-size: 1.3rem; } .al-nb { padding-left: 70px; } }