/* ============================================================
   DoceIA Estudio — página pública para estudiantes (alumnos.html)
   Misma paleta que el estudio. Lo memorable: los apuntes a mano que
   se convierten en apuntes limpios con fosforito.
   ============================================================ */
@font-face{font-family:'Outfit';font-style:normal;font-weight:400 900;font-display:swap;src:url('../assets/fonts/outfit-var.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../assets/fonts/dmsans-var.woff2') format('woff2')}

:root{
  --ink:#14112A; --ink-2:#4B4F63; --ink-3:#656A80;
  --bg:#F4F2FB; --line:#E7E3F5; --line-2:#D9D2F3;
  --v:#6D3BFF; --v2:#5B2EF5; --v-ink:#4B22C9; --lav:#F1ECFF; --hl:#FFE873;
  --df:'Outfit',system-ui,-apple-system,sans-serif; --bf:'DM Sans',system-ui,-apple-system,sans-serif;
  --hand:"Bradley Hand","Segoe Print","Marker Felt","Comic Sans MS",cursive;
  --focus:0 0 0 3px #fff,0 0 0 5px var(--v);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.02rem/1.6 var(--bf)}
a{color:var(--v-ink)}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:8px}
.al-skip{position:absolute;left:1rem;top:-4rem;z-index:50;padding:.6rem 1rem;border-radius:10px;background:var(--ink);color:#fff}
.al-skip:focus{top:1rem}

/* Cabecera */
.al-top{display:flex;align-items:center;gap:1.5rem;max-width:1200px;margin:0 auto;padding:1rem clamp(1rem,3vw,2rem)}
.al-brand{display:flex;align-items:center;gap:.55rem;text-decoration:none}
.al-brand img{height:30px;width:auto;display:block}
.al-brand span{padding:.32rem .55rem;border-radius:8px;background:var(--hl);color:var(--ink);font:600 1.02rem/1 var(--df)}
.al-links{display:flex;gap:1.3rem}
.al-links a{color:var(--ink-2);text-decoration:none;font:500 .95rem/1 var(--df)}
.al-links a:hover{color:var(--ink)}
.al-actions{margin-left:auto;display:flex;align-items:center;gap:.5rem}

.al-btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.55rem 1.15rem;border-radius:999px;border:1px solid transparent;font:600 .95rem/1.15 var(--df);text-decoration:none;cursor:pointer}
.al-btn--lg{min-height:52px;padding:.7rem 1.5rem;font-size:1.02rem}
.al-btn--primary{background:var(--v);color:#fff}
.al-btn--primary:hover{background:var(--v2)}
.al-btn--soft{background:#fff;border-color:var(--line-2);color:var(--ink)}
.al-btn--soft:hover{border-color:var(--v);color:var(--v-ink)}
.al-btn--text{color:var(--ink)}
.al-btn--text:hover{background:#ECE8F8}
.al-btn--hl{background:var(--hl);color:var(--ink)}
.al-btn--hl:hover{background:#FFDF3F}

/* Portada */
.al-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;max-width:1200px;margin:0 auto;padding:clamp(2rem,6vw,4.5rem) clamp(1rem,3vw,2rem) clamp(3rem,6vw,5rem)}
.al-hero h1{margin:0;font:800 clamp(2.5rem,5.6vw,4.4rem)/1.02 var(--df);letter-spacing:-.04em;max-width:12ch}
.al-lead{margin:1.3rem 0 0;max-width:34rem;color:var(--ink-2);font-size:1.12rem}
.al-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.al-fine{margin:1rem 0 0;color:var(--ink-3);font-size:.92rem}

.al-demo{position:relative;display:grid;grid-template-columns:minmax(0,.82fr) 48px minmax(0,1.18fr);align-items:center;gap:.4rem;min-height:420px;padding-bottom:3.5rem}
.al-note{
  margin:0;padding:1.2rem 1.1rem 2.6rem 2.4rem;border-radius:4px;transform:rotate(-2.5deg);
  background:repeating-linear-gradient(#FFFDF4 0 27px,#C9DDF2 27px 28px),#FFFDF4;
  box-shadow:0 2px 3px rgba(20,17,42,.08),0 22px 40px rgba(20,17,42,.12);position:relative;line-height:28px
}
.al-note::before{content:"";position:absolute;left:1.6rem;top:0;bottom:0;border-left:2px solid #F2A7B3}
.al-hand{margin:0;font:400 1.02rem/28px var(--hand);color:#2A3A73}
.al-hand--title{font-size:1.2rem;text-decoration:underline;text-decoration-color:#2A3A73;text-underline-offset:4px}
.al-hand s{color:#8A90A8}
.al-note figcaption{position:absolute;left:2.4rem;bottom:.6rem;font:500 .78rem/1 var(--bf);color:var(--ink-3)}
.al-arrow{width:56px;color:var(--v)}
.al-clean{padding:1.3rem 1.4rem;border-radius:10px;background:#fff;box-shadow:0 2px 3px rgba(20,17,42,.06),0 24px 50px rgba(20,17,42,.12);font-size:.92rem;line-height:1.6;color:#24223A}
.al-clean-h{margin:0 0 .5rem;font:700 1.3rem/1.2 var(--df);color:var(--ink)}
.al-clean p{margin:0 0 .6rem}
.al-clean ul{margin:0 0 .7rem;padding-left:1.1rem}
.al-clean li::marker{color:var(--v)}
.al-clean b{font-weight:650;color:var(--ink);background:linear-gradient(transparent 50%,var(--hl) 50%,var(--hl) 92%,transparent 92%)}
.al-formula{margin:0!important;padding:.5rem .7rem;overflow-wrap:anywhere;border-radius:8px;background:var(--lav);border-left:3px solid var(--v);font-size:.88rem;color:var(--ink)}
.al-card{
  position:absolute;right:-.5rem;bottom:0;width:min(250px,60%);padding:.9rem 1rem;border-radius:16px;background:var(--ink);color:#fff;
  transform:rotate(3deg);box-shadow:0 20px 40px rgba(20,17,42,.28)
}
.al-card small{display:block;margin-bottom:.3rem;font:600 .74rem/1 var(--df);color:var(--hl)}
.al-card p{margin:0;font:600 1rem/1.35 var(--df)}

/* Secciones */
.al-section{max-width:1200px;margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,3vw,2rem)}
.al-section h2,.al-end h2{margin:0;font:750 clamp(1.9rem,3.6vw,2.7rem)/1.1 var(--df);letter-spacing:-.03em}
.al-sub{margin:.7rem 0 0;max-width:40rem;color:var(--ink-2)}

.al-formats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 2.5rem;margin:2rem 0 0;padding:0;list-style:none}
.al-formats li{display:flex;gap:1rem;padding:1.15rem 0;border-top:1px solid var(--line-2)}
.al-ic{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:13px;background:#fff;color:var(--v)}
.al-ic svg{width:23px;height:23px}
.al-formats h3,.al-steps h3{margin:0;font:650 1.15rem/1.3 var(--df)}
.al-formats p,.al-steps p{margin:.25rem 0 0;color:var(--ink-2);font-size:.97rem}

.al-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin:2rem 0 0;padding:0;list-style:none;counter-reset:paso}
.al-steps li{counter-increment:paso;padding:1.4rem 1.3rem;border-radius:20px;background:#fff}
.al-steps li::before{content:counter(paso);display:grid;place-items:center;width:36px;height:36px;margin-bottom:.9rem;border-radius:50%;background:var(--ink);color:#fff;font:700 1rem/1 var(--df)}

.al-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem;align-items:start}
.al-price{display:flex;flex-direction:column;gap:.2rem;padding:1.5rem;border-radius:20px;background:#fff;border:1px solid var(--line)}
.al-price h3{margin:0;font:650 1.2rem/1.2 var(--df)}
.al-amount{margin:.3rem 0 .6rem;color:var(--ink-3)}
.al-amount b{font:800 2.2rem/1 var(--df);color:var(--ink);letter-spacing:-.02em}
.al-price ul{margin:0 0 1.2rem;padding:0;list-style:none;display:grid;gap:.45rem}
.al-price li{position:relative;padding-left:1.5rem;font-size:.95rem;color:var(--ink-2)}
.al-price li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;background:var(--v);-webkit-mask:var(--chk) center/contain no-repeat;mask:var(--chk) center/contain no-repeat}
:root{--chk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.al-price .al-btn{margin-top:auto;align-self:flex-start}
.al-price--plus{background:var(--ink);border-color:var(--ink);color:#fff}
.al-price--plus .al-amount,.al-price--plus li{color:#D8D5E8}
.al-price--plus .al-amount b{color:#fff}
.al-price--plus li::before{background:var(--hl)}
.al-packs li{display:flex;justify-content:space-between;padding:.45rem 0 .45rem 0!important;border-bottom:1px solid var(--line)}
.al-packs li::before{display:none}
.al-packs b{font:650 1rem/1.3 var(--df);color:var(--ink)}
.al-price-note{margin:0;font-size:.88rem;color:var(--ink-3)}

.al-costs{margin-top:2rem;padding:1.5rem;border-radius:20px;background:#fff;border:1px solid var(--line);max-width:760px}
.al-costs h3{margin:0 0 .7rem;font:650 1.15rem/1.3 var(--df)}
.al-costs table{width:100%;border-collapse:collapse}
.al-costs th,.al-costs td{padding:.55rem 0;border-bottom:1px solid var(--line);text-align:left;font-size:.96rem}
.al-costs th{font-weight:500;color:var(--ink)}
.al-costs td{text-align:right;color:var(--ink-2)}
.al-costs p{margin:1rem 0 0;font-size:.9rem;color:var(--ink-3)}

.al-faq{display:grid;gap:.5rem;max-width:820px;margin-top:1.8rem}
.al-faq details{padding:0 1.2rem;border-radius:16px;background:#fff;border:1px solid var(--line)}
.al-faq summary{padding:1rem 0;font:600 1.05rem/1.35 var(--df);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.al-faq summary::-webkit-details-marker{display:none}
.al-faq summary::after{content:"";flex:none;width:12px;height:12px;margin-top:.3rem;border-right:2px solid var(--v);border-bottom:2px solid var(--v);transform:rotate(45deg);transition:transform .2s}
.al-faq details[open] summary::after{transform:rotate(-135deg);margin-top:.55rem}
.al-faq p{margin:0 0 1.1rem;color:var(--ink-2)}

.al-end{margin:0 max(clamp(1rem,3vw,2rem),calc((100% - 1200px) / 2)) clamp(2rem,5vw,3rem);padding:clamp(2.5rem,6vw,4rem) clamp(1.2rem,4vw,3rem);border-radius:28px;background:var(--ink);color:#fff;text-align:center}
.al-end h2{max-width:22ch;margin:0 auto}
.al-end p{margin:.8rem 0 1.6rem;color:#D8D5E8}

.al-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 2rem;max-width:1200px;margin:0 auto;padding:1.5rem clamp(1rem,3vw,2rem) 2.5rem;color:var(--ink-3);font-size:.9rem}
.al-foot p{margin:0}
.al-foot nav{display:flex;flex-wrap:wrap;gap:1.2rem}
.al-foot a{color:var(--ink-2)}

@media (max-width:980px){
  .al-hero{grid-template-columns:minmax(0,1fr)}
  .al-demo{max-width:640px;min-height:0;margin-bottom:1.5rem}
  .al-prices{grid-template-columns:minmax(0,1fr);max-width:560px}
  .al-steps{grid-template-columns:minmax(0,1fr);max-width:640px}
}
@media (max-width:760px){
  .al-links{display:none}
  .al-formats{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .al-top{gap:.6rem}
  .al-brand img{height:26px}
  .al-actions .al-btn--primary{padding:.5rem .9rem;font-size:.9rem}
  .al-hide-s{display:none}
  .al-actions .al-btn--text{padding:.5rem .6rem}
  .al-demo{grid-template-columns:minmax(0,1fr);gap:0}
  .al-arrow{justify-self:center;transform:rotate(90deg);margin:.4rem 0}
  .al-note{transform:rotate(-1.5deg)}
  .al-card{position:relative;right:auto;bottom:auto;justify-self:end;margin-top:-1rem;width:75%}
}