:root{
  --verde:#15302F;--verde2:#4A5340;--oro:#D8B04C;--cobre:#E8B58A;
  --pergamino:#E9E1D1;--tinta:#1d1a16;--cuero:#4A2E2A;--hielo:#BFE3EA;
  --disp:'Abril Fatface','Playfair Display',Georgia,serif;
  --txt:'Cormorant Garamond','EB Garamond',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--txt);font-size:1.25rem;line-height:1.7;background:var(--verde);color:var(--pergamino)}
a{color:inherit}
:focus-visible{outline:2px solid var(--oro);outline-offset:4px}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.5rem}

/* navegación */
.nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem 2rem;padding:1.25rem 0;border-bottom:1px solid rgba(216,176,76,.35)}
.nav .logo{font-family:var(--disp);font-size:1.6rem;color:var(--oro);text-decoration:none;letter-spacing:.04em}
.nav ul{display:flex;gap:1.75rem;list-style:none;font-size:1.15rem}
.nav a{text-decoration:none}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--oro);border-bottom:1px solid var(--oro)}

/* ornamentos (SVG en línea como fondo) */
.orn{height:26px;margin:2rem auto;max-width:320px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26'%3E%3Cg stroke='%23D8B04C' stroke-width='1.5' fill='none'%3E%3Cpath d='M6 13h118M176 13h118'/%3E%3C/g%3E%3Cg fill='%23D8B04C'%3E%3Cpath d='M0 13l8-5v10zM300 13l-8-5v10zM150 2c9 5 9 17 0 22-9-5-9-17 0-22z'/%3E%3Cpath d='M132 13c5-7 12-7 16 0-4 7-11 7-16 0zM152 13c4-7 11-7 16 0-5 7-12 7-16 0z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.marco{border:1px solid var(--oro);outline:1px solid var(--oro);outline-offset:7px;padding:2.5rem 2rem;margin:10px}

/* textura de papel */
.papel{background-color:var(--pergamino);color:var(--tinta);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}
.cuero{background:var(--cuero);color:var(--pergamino)}
.hondo{background:#0e2221;color:var(--pergamino)}
.musgo{background:var(--verde2);color:var(--pergamino)}

/* tipografía */
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.1}
h1{font-size:clamp(3.5rem,13vw,8rem);color:var(--oro);letter-spacing:.03em;text-align:center}
h2{font-size:clamp(2rem,5vw,3rem);color:var(--oro);margin-bottom:1rem}
.papel h2{color:var(--verde)}
h3{font-size:1.9rem;margin-bottom:.5rem}
.sub{text-align:center;font-size:clamp(1.5rem,4vw,2.2rem);color:#fff}
.lema{text-align:center;max-width:36rem;margin:1.5rem auto 0;font-style:italic;opacity:.9}
p+p{margin-top:1rem}
.prosa{max-width:40rem}

section{padding:4.5rem 0}
.hero{padding:2.5rem 0 3rem}
.hero h1{font-size:clamp(3rem,9vw,5.5rem)}
.centro{text-align:center}

/* botón Hotmart */
.btn{display:inline-block;margin-top:1.5rem;padding:.75rem 2rem;border:1px solid var(--oro);background:var(--oro);color:var(--verde);font-family:var(--txt);font-weight:700;font-size:1.15rem;text-decoration:none;transition:background .2s,color .2s}
.btn:hover{background:transparent;color:var(--oro)}
.botones{display:flex;flex-wrap:wrap;gap:0 .75rem}
.btn.sec{background:transparent;color:var(--oro)}
.btn.off{opacity:.55;pointer-events:none;border-style:dashed;cursor:default}
.btn.sec:hover{background:var(--oro);color:var(--verde)}

/* dispositivos */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2rem;margin-top:2.5rem}
.disp-card{text-align:center}
.num{font-family:var(--disp);font-size:4rem;color:var(--oro);line-height:1}
.disp{display:grid;grid-template-columns:minmax(10rem,16rem) 1fr;gap:3rem;align-items:center}
.disp.inv{grid-template-columns:1fr minmax(10rem,16rem)}
.disp.inv .portada{order:2}
.datos{list-style:none;margin-top:1rem;font-size:1.1rem}
.datos li{padding:.25rem 0;border-top:1px solid rgba(216,176,76,.35)}
.portada{width:100%;height:auto;display:block;border:1px solid var(--oro);outline:1px solid var(--oro);outline-offset:5px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.disp-card .portada{max-width:12rem;margin:.5rem auto 1.75rem}
.hotmart{margin-top:1rem;font-size:1rem;font-style:italic;opacity:.75}

/* aviso */
.aviso{background:rgba(0,0,0,.2)}
ul.sintomas{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:1rem 0}
ul.sintomas li{border:1px solid var(--oro);padding:.2rem 1rem;font-style:italic}
.papel ul.sintomas li{border-color:var(--verde)}

footer{padding:2.5rem 0;text-align:center;font-size:1rem;border-top:1px solid rgba(216,176,76,.35)}

@media(max-width:640px){
  body{font-size:1.15rem}
  .disp,.disp.inv{grid-template-columns:1fr;gap:2.5rem}
  .disp .portada{max-width:15rem;margin:0 auto}
  .disp.inv .portada{order:0}
  .marco{padding:1.75rem 1.25rem}
  section{padding:3rem 0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* vela (Scriptorium e Inicio) */
.vela{--h:100%;position:relative;width:54px;height:190px;margin:0 auto}
.cera{position:absolute;left:0;right:0;bottom:0;height:var(--h);background:linear-gradient(90deg,#d9cbb0,#f6eedb 50%,#cdbd9c);border-radius:4px 4px 2px 2px;transition:height 1s linear}
.cera::before{content:"";position:absolute;left:50%;top:-8px;width:2px;height:10px;background:#2a1d14;transform:translateX(-50%)}
.llama{position:absolute;left:50%;bottom:calc(var(--h) + 8px);width:16px;height:34px;margin-left:-8px;background:radial-gradient(ellipse at 50% 70%,#fff6c8,#ffc94d 45%,rgba(255,140,30,0) 75%);border-radius:50% 50% 50% 50%/65% 65% 35% 35%;box-shadow:0 0 34px 14px rgba(255,190,80,.35);transform-origin:50% 100%;animation:fl .18s infinite alternate;transition:bottom 1s linear}
@keyframes fl{from{transform:scale(1,1) rotate(-2deg)}to{transform:scale(.9,1.1) rotate(2deg)}}
.platillo{width:96px;height:9px;margin:0 auto;background:var(--oro);border-radius:0 0 50% 50%}
/* portal al Scriptorium */
.nav a.dest{color:var(--oro)}
.portal{display:grid;grid-template-columns:minmax(8rem,14rem) 1fr;gap:2.5rem;align-items:center;text-decoration:none;color:var(--pergamino);padding:2.5rem;margin-top:1.5rem;background:radial-gradient(ellipse at 20% 50%,rgba(255,190,80,.22),rgba(10,24,23,.9) 62%),#0b1c1b;animation:glow 4s ease-in-out infinite alternate;transition:box-shadow .3s}
@keyframes glow{from{box-shadow:0 0 30px rgba(216,176,76,.12)}to{box-shadow:0 0 60px rgba(216,176,76,.3)}}
.portal:hover{animation:none;box-shadow:0 0 80px rgba(216,176,76,.42)}
.portal:hover .btn{background:transparent;color:var(--oro)}
.pv{transform:scale(1.2);padding:1.5rem 0}
.portal h2{font-size:clamp(2.4rem,6.5vw,3.8rem);margin-bottom:.5rem}
.eyebrow{font-style:italic;color:var(--cobre);letter-spacing:.04em}
.ct{margin:1.25rem 0 .25rem;padding:.6rem 1.1rem;border-left:2px solid var(--oro);font-style:italic}
.ct small{display:block;font-style:normal;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
@media(max-width:640px){.nav ul{gap:.4rem 1.1rem;font-size:1.05rem;flex-wrap:wrap}.pv{transform:scale(.75);padding:0;margin:-2.2rem 0}.portal{grid-template-columns:1fr;text-align:center;padding:2rem 1.25rem;gap:1rem}.portal ul.sintomas{justify-content:center}.ct{border-left:0;border-top:1px solid var(--oro);border-bottom:1px solid var(--oro)}}
@media(prefers-reduced-motion:reduce){.llama,.portal{animation:none}}