/* Lee con Lala · Librería clásica
   Marfil #F6F1E6 · Vinotinto #6B1F2A · Dorado viejo #C9A84C
   Playfair Display (títulos) · Cormorant Garamond (cursivas) · Inter (cuerpo) */
:root{
  --marfil:#F6F1E6; --carta:#FCF9F1;
  --vino:#6B1F2A; --vino-2:#571722;
  --dorado:#C9A84C; --dorado-suave:rgba(201,168,76,0.35);
  --tinta:#33261F; --pluma:#6D5C49; --borde:#D9CBAF;
  /* biblioteca de acentos: tinta azul, verde botella y terracota */
  --azul:#274060; --verde:#2E4B3F; --terra:#B4552D;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--marfil);color:var(--tinta);font-family:'Inter',sans-serif;font-weight:300;line-height:1.8;font-size:15.5px}
a{color:var(--vino);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
em{font-family:'Cormorant Garamond',serif;font-style:italic}

/* marco doble de la página */
.marco{position:fixed;inset:14px;border:1px solid var(--dorado-suave);pointer-events:none;z-index:90}
.marco::after{content:"";position:absolute;inset:6px;border:1px solid rgba(201,168,76,0.18)}
@media(max-width:700px){.marco{inset:8px}.marco::after{inset:4px}}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(246,241,230,0.94);border-bottom:1px solid var(--borde);backdrop-filter:blur(6px)}
.nav-inner{max-width:1060px;margin:0 auto;padding:20px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.logo{font-family:'Playfair Display',serif;font-size:22px;color:var(--tinta);white-space:nowrap}
.logo .orn{color:var(--vino)}
.logo:hover{text-decoration:none}
.nav-links{display:flex;gap:20px;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--pluma);font-weight:600;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
.nav-links a{color:var(--pluma)}
.nav-links a:hover{color:var(--vino);text-decoration:none}
.nav-links a.activo{color:var(--vino)}

/* layout */
.contenedor{max-width:1060px;margin:0 auto;padding:0 22px;position:relative;z-index:1}
section{padding:76px 0;position:relative}
.regla{max-width:1060px;margin:0 auto;padding:0 22px}
.regla div{height:1px;background:var(--borde);position:relative}
.regla div::after{content:"❦";position:absolute;left:50%;top:-14px;transform:translateX(-50%);background:var(--marfil);padding:0 18px;color:var(--dorado);font-size:17px}
.eyebrow{font-size:12px;letter-spacing:0.3em;text-transform:uppercase;color:var(--pluma);font-weight:600;display:block;margin-bottom:22px}
h1.display{font-family:'Playfair Display',serif;font-size:44px;line-height:1.14;font-weight:500;color:var(--tinta)}
h1.display em,h2.titulo em{color:var(--vino)}
h2.titulo{font-family:'Playfair Display',serif;font-size:34px;line-height:1.18;font-weight:500;color:var(--tinta)}
.sub-cursiva{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:24px;color:var(--pluma);margin-top:16px}
.lead{max-width:600px;color:var(--tinta);margin-top:20px}

/* botones */
.btn{display:inline-block;font-size:12px;letter-spacing:0.2em;text-transform:uppercase;font-weight:600;padding:15px 28px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 24px rgba(51,38,31,0.15)}
.btn.vino{background:var(--vino);color:var(--marfil)}
.btn.vino:hover{background:var(--vino-2);color:var(--marfil)}
.btn.borde{border:1px solid var(--dorado);color:var(--tinta)}

/* hero */
.hero{text-align:center;padding:72px 0 64px}
.hero .foto-arco{width:300px;height:300px;margin:44px auto 0;border-radius:50% 50% 0 0;overflow:hidden;border:1px solid rgba(201,168,76,0.55)}
.hero .foto-arco img{width:100%;height:100%;object-fit:cover;filter:sepia(0.18) saturate(0.9) contrast(1.03)}
.hero .ctas{display:flex;gap:14px;justify-content:center;margin-top:42px;flex-wrap:wrap}

/* tarjetas */
.grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:34px}
.carta{background:var(--carta);border:1px solid var(--borde);padding:30px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;display:flex;flex-direction:column;gap:10px}
@media(hover:hover){.carta:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(51,38,31,0.12);border-color:var(--dorado)}}
.carta .num-orn{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:30px;color:var(--vino);line-height:1}
.carta h3{font-family:'Playfair Display',serif;font-size:21px;font-weight:500;color:var(--tinta);line-height:1.3}
.carta p{font-size:14.5px}
.carta .precio{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:19px;color:var(--vino)}
.badge{display:inline-block;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;font-weight:600;padding:5px 12px;border:1px solid var(--borde);color:var(--pluma);align-self:flex-start}
.badge.vino{background:var(--vino);color:var(--marfil);border-color:var(--vino)}
.badge.dorado{color:#8a6d22;border-color:var(--dorado);background:rgba(201,168,76,0.10)}

/* cita */
.cita{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:27px;line-height:1.55;color:var(--pluma);text-align:center;max-width:640px;margin:0 auto;padding:20px 0}
.cita span{color:var(--vino)}

/* footer */
footer{padding:50px 22px 64px;position:relative;z-index:1}
.pie{max-width:1060px;margin:0 auto;border-top:1px solid var(--borde);padding-top:24px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--pluma);font-weight:600}

/* la historia — sobreviví para enseñar */
.historia{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;margin-top:38px}
.historia .foto{width:100%;max-width:380px;margin:0 auto;border:1px solid rgba(201,168,76,0.55);padding:10px;background:var(--carta)}
.historia .foto img{width:100%;display:block;filter:sepia(0.15) saturate(0.92) contrast(1.03)}
.historia .foto .pie-foto{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;color:var(--pluma);text-align:center;padding-top:10px}
.historia .texto p{margin-bottom:18px;font-size:15.5px}
.historia .texto p:last-child{margin-bottom:0}
.historia .texto .gran-frase{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:21px;color:var(--vino);line-height:1.5}
.mini-datos{display:flex;gap:1px;background:var(--borde);border:1px solid var(--borde);margin-top:22px}
.mini-datos div{flex:1;background:var(--carta);padding:14px 8px;text-align:center}
.mini-datos .n{font-family:'Playfair Display',serif;font-size:19px;color:var(--vino);line-height:1.2}
.mini-datos .d{font-size:8.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--pluma);font-weight:600;margin-top:4px}
@media(min-width:700px){.historia{grid-template-columns:400px 1fr;gap:56px}}

/* banner del portal del estudiante */
.banner-portal{background:var(--vino);position:relative;overflow:hidden}
.banner-portal::before{content:"";position:absolute;inset:10px;border:1px solid rgba(201,168,76,0.4);pointer-events:none}
.banner-portal .bp-inner{max-width:1060px;margin:0 auto;padding:26px 22px;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;text-align:center}
.banner-portal .bp-txt{font-family:'Playfair Display',serif;font-size:20px;color:var(--marfil)}
.banner-portal .bp-txt em{color:var(--dorado)}
.banner-portal .btn{background:var(--dorado);color:var(--vino-2);padding:12px 24px}
.banner-portal .btn:hover{filter:brightness(1.08);box-shadow:none}

/* toast (productos "muy pronto") */
.toast{position:fixed;left:16px;right:16px;bottom:18px;z-index:100;background:var(--vino);color:var(--marfil);padding:16px 20px;display:none;border-left:3px solid var(--dorado);box-shadow:0 12px 30px rgba(51,38,31,0.3)}
.toast.visible{display:block;animation:toast-in .35s ease}
.toast .t-label{font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:var(--dorado);font-weight:600;display:block;margin-bottom:4px}
@keyframes toast-in{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}

/* aparición al scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- EFECTOS ---------- */
/* firma manuscrita que se escribe sola, con cursor pluma */
.script-lala{font-family:'Great Vibes',cursive;font-size:42px;color:var(--vino);line-height:1.1;display:block;margin-bottom:14px;min-height:1.2em}
.script-lala .cursor{display:inline-block;width:2px;height:0.9em;background:var(--dorado);margin-left:4px;vertical-align:-0.12em;animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{0%,55%{opacity:1}56%,100%{opacity:0}}

/* palabra que va cambiando (mundo → poder → pasado…) */
.palabra-rota{display:inline-block;font-family:'Cormorant Garamond',serif;font-style:italic;transition:opacity .38s ease,transform .38s ease,color .38s ease}
.palabra-rota.saliendo{opacity:0;transform:translateY(-14px)}
.palabra-rota.entrando{opacity:0;transform:translateY(14px);transition:none}

/* subrayado dorado que se dibuja al aparecer */
.resalta{background-image:linear-gradient(rgba(201,168,76,0.4),rgba(201,168,76,0.4));background-repeat:no-repeat;background-position:0 92%;background-size:0% 22%;transition:background-size .9s cubic-bezier(.22,1,.36,1) .2s;padding:0 2px}
.resalta.marcado{background-size:100% 22%}

/* biblioteca de colores: las cartas alternan acento */
.grid .carta:nth-child(3n+1){--acc:var(--vino)}
.grid .carta:nth-child(3n+2){--acc:var(--azul)}
.grid .carta:nth-child(3n){--acc:var(--verde)}
.carta{border-top:2px solid var(--acc,var(--borde))}
.carta .num-orn{color:var(--acc,var(--vino))}
@media(hover:hover){.carta:hover{border-color:var(--acc,var(--dorado))}}

/* ornamentos de las reglas alternan color */
.regla.r-azul div::after{color:var(--azul)}
.regla.r-verde div::after{color:var(--verde)}
.regla.r-terra div::after{color:var(--terra)}

/* brillo sutil que recorre el botón vinotinto */
.btn.vino{background-image:linear-gradient(105deg,transparent 40%,rgba(201,168,76,0.25) 50%,transparent 60%);background-size:250% 100%;background-position:120% 0;background-repeat:no-repeat}
.btn.vino:hover{background-position:-120% 0;transition:transform .2s ease,box-shadow .2s ease,background-position .8s ease}

/* entrada del hero en cascada */
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero .eyebrow{animation:fadeup .6s ease both}
.hero .script-lala{animation:fadeup .6s ease .1s both}
.hero h1{animation:fadeup .7s ease .22s both}
.hero .sub-cursiva{animation:fadeup .7s ease .34s both}
.hero .foto-arco{animation:fadeup .9s ease .46s both}
.hero .ctas{animation:fadeup .7s ease .58s both}

@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}.reveal{opacity:1;transform:none}.resalta{background-size:100% 32%}}

/* desktop */
@media(min-width:700px){
  h1.display{font-size:62px}
  h2.titulo{font-size:42px}
  .grid.dos{grid-template-columns:repeat(2,1fr)}
  .grid.tres{grid-template-columns:repeat(3,1fr)}
  .hero{padding:96px 0 80px}
  .hero .foto-arco{width:360px;height:360px}
  .nav-inner{padding:20px 40px}
  .toast{left:auto;right:32px;bottom:28px;max-width:380px}
  section{padding:92px 0}
}