/* Web pública Eternum — negro/oro + crema/bronce */
:root{
  --carbon:#0e0c0a; --carbon2:#171310; --oro:#c9a54a; --oro-claro:#e6c877;
  --bronce:#7a5b3c; --crema:#faf5ec; --piedra:#efe6d6; --tinta:#2b241d; --suave:#6f6354;
  --linea:rgba(139,107,74,.28);
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Jost",system-ui,sans-serif;
  --w:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:400;color:var(--tinta);background:var(--crema);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:-.01em}
.eyebrow{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronce);font-weight:500;margin-bottom:14px}
.dark .eyebrow{color:var(--oro)}
.btn{min-height:44px;display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:2px;font-weight:500;font-size:.95rem;letter-spacing:.04em;text-decoration:none;border:1px solid var(--oro);transition:.2s;cursor:pointer;font-family:var(--sans)}
.btn-oro{background:var(--oro);color:var(--carbon)} .btn-oro:hover{background:var(--oro-claro)}
.btn-linea{color:var(--oro);background:transparent} .btn-linea:hover{background:rgba(201,165,74,.12)}
.btn-bronce{background:var(--bronce);border-color:var(--bronce);color:#fff} .btn-bronce:hover{background:#664c32;border-color:#664c32}
.btn-wa{background:#187a41;border-color:#187a41;color:#fff} .btn-wa:hover{background:#146a37;border-color:#146a37}

/* barra */
.top{background:var(--carbon);position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(201,165,74,.18)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.top img{height:50px;width:auto}
.top nav{display:flex;gap:28px}
.top nav a{color:#d9cdb6;text-decoration:none;font-size:.9rem;letter-spacing:.06em;padding:12px 2px;display:inline-block}
.top nav a:hover{color:var(--oro-claro)}
.top .btn{padding:10px 20px;font-size:.85rem}
@media(max-width:920px){
  .top .wrap{position:relative}
  .top nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--carbon);flex-direction:column;gap:0;padding:8px 24px 14px;border-bottom:1px solid rgba(201,165,74,.25)}
  .top.abierto nav{display:flex}
  .top nav a{padding:15px 2px;border-top:1px solid rgba(201,165,74,.12)}
  .top-acc{margin-left:auto}
}

/* hero */
.hero{background:radial-gradient(120% 90% at 78% 40%,#1c1610 0%,var(--carbon) 60%);color:#efe6d6;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;min-height:640px;padding-top:70px;padding-bottom:70px}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.6rem);color:#f5ecd9;margin-bottom:24px}
.hero h1 em{color:var(--oro);font-style:italic;font-weight:400}
.hero p.lead{font-size:1.15rem;color:#cfc3ab;max-width:34em;margin-bottom:34px;font-weight:300}
.hero .acciones{display:flex;flex-wrap:wrap;gap:14px}
.hero .nota{margin-top:26px;font-size:.88rem;color:#9c917d;letter-spacing:.04em}
.luz{position:relative;display:flex;justify-content:center;align-items:center}
.luz::before{content:"";position:absolute;width:118%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(230,200,119,.30) 0%,rgba(201,165,74,.12) 38%,transparent 66%);
  animation:respira 7s ease-in-out infinite}
.luz img{position:relative;width:min(380px,78%);filter:drop-shadow(0 0 28px rgba(201,165,74,.22))}
@keyframes respira{0%,100%{opacity:.75;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr;min-height:0;text-align:left}.luz{order:-1;margin-bottom:-10px}.luz img{width:min(240px,60%)}}

/* secciones */
section{padding:96px 0}
.head{max-width:640px;margin-bottom:52px}
.head h2{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:14px}
.head p{color:var(--suave);font-weight:400;font-size:1.08rem}

/* pasos */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--linea)}
.paso{padding:30px 28px 10px 0;position:relative}
.paso .n{font-family:var(--serif);font-size:2.6rem;color:var(--oro);line-height:1;margin-bottom:14px;font-style:italic}
.paso h3{font-size:1.5rem;margin-bottom:8px}
.paso p{color:var(--suave);font-size:.98rem;font-weight:400}
@media(max-width:860px){.pasos{grid-template-columns:1fr 1fr}.paso{padding-bottom:28px}}
@media(max-width:520px){.pasos{grid-template-columns:1fr}}

/* servicios */
.servicios{background:var(--piedra)}
.cols{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.serv{background:var(--crema);border:1px solid var(--linea);padding:38px 32px;display:flex;flex-direction:column}
.serv h3{font-size:1.75rem;margin-bottom:10px}
.serv .desc{color:var(--suave);font-weight:400;margin-bottom:20px;flex:1}
.serv ul{list-style:none;margin-bottom:26px}
.serv li{padding:8px 0;border-top:1px solid var(--linea);font-size:.95rem}
.serv .precio{font-family:var(--serif);font-size:1.5rem;color:var(--bronce);margin-bottom:18px}
.serv .precio small{font-family:var(--sans);font-size:.78rem;color:var(--suave);letter-spacing:.06em}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.extra{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px 32px;color:var(--suave);font-size:.95rem}
.extra span::before{content:"— ";color:var(--oro)}

/* homenajes */
.homenajes{background:var(--carbon);color:#efe6d6}
.homenajes .head p{color:#a89d88}
.homenajes h2{color:#f5ecd9}
.velas{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vela{border:1px solid rgba(201,165,74,.25);padding:30px 26px;background:var(--carbon2);display:flex;flex-direction:column}
.vela .flama{width:14px;height:22px;margin-bottom:18px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 70%,#fff4c9 0%,var(--oro-claro) 40%,var(--oro) 100%);
  box-shadow:0 0 18px 4px rgba(230,200,119,.35);animation:flama 3.2s ease-in-out infinite}
.vela:nth-child(2) .flama{animation-delay:-1s}.vela:nth-child(3) .flama{animation-delay:-2s}
@keyframes flama{0%,100%{transform:scale(1) rotate(-2deg);opacity:.9}50%{transform:scale(1.08,1.14) rotate(2deg);opacity:1}}
.vela h3{font-size:1.9rem;color:#f5ecd9}
.vela .fechas{color:var(--oro);font-size:.85rem;letter-spacing:.14em;margin:4px 0 14px}
.vela p{color:#bfb39b;font-weight:400;font-size:.98rem;flex:1;font-style:italic;font-family:var(--serif);font-size:1.2rem;line-height:1.45}
.vela .pie{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.vela .btn{padding:9px 16px;font-size:.8rem}
.mas{margin-top:34px}
@media(max-width:900px){.velas{grid-template-columns:1fr}}

/* plan */
.plan{background:var(--crema)}
.plan .caja{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--linea);background:#fff8ec}
.plan .izq{padding:54px 48px}
.plan .der{background:var(--bronce);color:#fbf3e4;padding:54px 44px;display:flex;flex-direction:column;justify-content:center}
.plan h2{font-size:clamp(2rem,3.4vw,2.8rem);margin-bottom:16px}
.plan .izq p{color:var(--suave);font-weight:400;margin-bottom:22px}
.plan ul{list-style:none;margin-bottom:28px}
.plan li{padding:6px 0 6px 26px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:15px;width:12px;height:1px;background:var(--oro)}
.plan .der h3{font-size:1.7rem;margin-bottom:12px;color:#fff}
.plan .der p{font-weight:400;margin-bottom:22px;opacity:.92}
.plan .der a{color:#fff;font-weight:500;letter-spacing:.04em;text-underline-offset:5px}
@media(max-width:860px){.plan .caja{grid-template-columns:1fr}.plan .izq,.plan .der{padding:36px 26px}}

/* recuerdos */
.recuerdos{background:var(--piedra)}
.rec{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rec div{border-top:1px solid var(--bronce);padding-top:18px}
.rec h3{font-size:1.4rem;margin-bottom:6px}
.rec p{color:var(--suave);font-size:.94rem;font-weight:400}
@media(max-width:860px){.rec{grid-template-columns:1fr 1fr}}

/* faq */
.faq details{border-top:1px solid var(--linea);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:1.45rem;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--oro);font-size:1.6rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--suave);font-weight:400;margin-top:12px;max-width:44em}
.faq .wrap{max-width:820px}

/* contacto */
.contacto{background:var(--carbon);color:#efe6d6;text-align:center}
.contacto h2{color:#f5ecd9;font-size:clamp(2rem,3.6vw,3rem);margin-bottom:14px}
.contacto p{color:#b3a891;font-weight:400;max-width:34em;margin:0 auto 30px}
.contacto .acciones{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* pie */
footer{background:#080706;color:#9c917d;padding:56px 0 34px;font-size:.9rem}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}
footer img{height:64px;margin-bottom:14px}
footer h4{font-family:var(--sans);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--oro);margin-bottom:12px;font-weight:500}
footer a{text-decoration:none;display:block;padding:11px 0} footer a:hover{color:var(--oro-claro)}
.aliado{grid-column:1/-1;border-top:1px solid rgba(201,165,74,.18);padding-top:22px;margin-top:8px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.aliado a{display:inline-block;padding:11px 0;color:var(--oro);text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){footer .wrap{grid-template-columns:1fr}}

/* whatsapp fijo */
.wa-fijo{position:fixed;right:18px;bottom:18px;z-index:30;background:#187a41;min-height:44px;display:inline-flex;align-items:center;color:#fff;border-radius:50px;padding:13px 20px;text-decoration:none;font-weight:500;font-size:.9rem;box-shadow:0 6px 22px rgba(0,0,0,.3)}

/* popup */
.pop{position:fixed;inset:0;background:rgba(8,7,6,.72);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
.pop.on{display:flex}
.pop-c{background:var(--crema);max-width:520px;width:100%;position:relative;border:1px solid var(--oro);padding:46px 40px 38px;text-align:center}
.pop-c h3{font-size:2.1rem;margin-bottom:12px}
.pop-c p{color:var(--suave);font-weight:400;margin-bottom:24px}
.pop-c .x{position:absolute;top:6px;right:8px;width:44px;height:44px;background:none;border:0;font-size:1.8rem;cursor:pointer;color:var(--suave);line-height:1}
.pop-c .peq{display:block;margin-top:6px;padding:12px 0;font-size:.9rem;color:var(--suave);text-decoration:none}

@media(prefers-reduced-motion:reduce){.luz::before,.vela .flama{animation:none}html{scroll-behavior:auto}}

/* ── Portal de clientes ───────────────────────────────────── */
.top-acc{display:flex;gap:10px;align-items:center}
.top .btn.btn-linea{padding:10px 20px;font-size:.85rem}
.page{padding:64px 0 96px;min-height:60vh}
.auth{max-width:460px;margin:0 auto;background:#fff8ec;border:1px solid var(--linea);padding:40px 36px}
.auth h1{font-size:2.2rem;margin-bottom:8px}
.auth .sub{color:var(--suave);font-weight:400;margin-bottom:24px}
.campo{margin-bottom:16px}
.campo label{display:block;font-size:.85rem;letter-spacing:.06em;color:var(--tinta);margin-bottom:5px;font-weight:500}
.campo .ayuda{font-size:.82rem;color:var(--suave);margin-top:4px;font-weight:400}
.campo input,.campo select,.campo textarea{width:100%;padding:12px 14px;border:1px solid rgba(139,107,74,.45);background:#fff;font:inherit;color:var(--tinta);border-radius:2px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--oro);outline-offset:1px;border-color:var(--oro)}
.campo.error input,.campo.error select{border-color:#b3261e}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.fila{grid-template-columns:1fr}.auth{padding:30px 22px}}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;margin:6px 0 18px;color:var(--suave)}
.check input{margin-top:4px;accent-color:var(--bronce)}
.check a{color:var(--bronce)}
.aviso-err{background:#fdecea;color:#7a1d16;border-left:3px solid #b3261e;padding:11px 14px;margin-bottom:18px;font-size:.93rem}
.aviso-ok{background:#eaf5ee;color:#1b5e37;border-left:3px solid #187a41;padding:11px 14px;margin-bottom:18px;font-size:.93rem}
.aviso-ok a,.aviso-err a{color:inherit;font-weight:500}
.auth .btn{width:100%;justify-content:center}
.auth .pie-form{margin-top:20px;font-size:.92rem;color:var(--suave);text-align:center}
.auth .pie-form a{color:var(--bronce)}
.btn-sm{padding:9px 18px;font-size:.92rem}
.btn-gris{background:transparent;color:var(--suave);border-color:rgba(139,107,74,.4)}
.btn-gris:hover{background:rgba(139,107,74,.08)}

.cuenta h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:6px}
.cuenta .sub{color:var(--suave);font-weight:400;margin-bottom:34px}
.cuenta-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:30px;align-items:start}
@media(max-width:900px){.cuenta-grid{grid-template-columns:1fr}}
.caja-c{background:#fff8ec;border:1px solid var(--linea);padding:30px}
.caja-c h2{font-size:1.7rem;margin-bottom:16px}
.caja-c + .caja-c{margin-top:24px}
.masc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.masc{border:1px solid var(--linea);background:#fff;padding:18px;text-align:center}
.masc .foto{width:96px;height:96px;border-radius:50%;margin:0 auto 12px;background:var(--piedra);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--bronce);font-family:var(--serif);font-size:2.2rem}
.masc .foto img{width:100%;height:100%;object-fit:cover}
.masc h3{font-size:1.5rem}
.masc .det{color:var(--suave);font-size:.88rem;font-weight:400;margin:2px 0 12px}
.masc .estado{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bronce);margin-bottom:10px}
.masc-vacio{color:var(--suave);font-weight:400;padding:8px 0 18px}

dialog.modal{border:1px solid var(--oro);padding:0;max-width:520px;width:calc(100% - 32px);background:var(--crema);color:var(--tinta)}
dialog.modal::backdrop{background:rgba(8,7,6,.7)}
dialog.modal form{padding:32px 30px 26px}
dialog.modal h2{font-size:1.9rem;margin-bottom:18px}
.modal-acc{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.prosa{max-width:760px}
.prosa h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:22px}
.prosa p{margin-bottom:16px;color:#4a4036;font-weight:400}
.prosa .borrador{font-size:.85rem;color:var(--suave)}

/* ── Accesibilidad y usabilidad ───────────────────────────── */
section[id]{scroll-margin-top:84px}
.salto{position:absolute;left:12px;top:-60px;background:var(--oro);color:var(--carbon);padding:12px 18px;z-index:100;font-weight:500;text-decoration:none;transition:top .15s}
.salto:focus{top:12px}
.top-menu{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:1px solid rgba(201,165,74,.5);color:var(--oro-claro);cursor:pointer;font-size:1.4rem;border-radius:2px}
.top-menu:hover{background:rgba(201,165,74,.12)}
@media(min-width:921px){.top-menu{display:none}}
.campo input,.campo select,.campo textarea{min-height:46px}
.btn:focus-visible,.top-menu:focus-visible,summary:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
summary{min-height:44px;align-items:center}

.top .btn,.top-acc .btn{white-space:nowrap}
.top-menu{flex:none}
@media(max-width:920px){.top .btn.btn-linea{padding:10px 14px}.top .wrap{gap:10px}}

/* ── Efectos elegidos: E1 aparecer, E2 cascada, E4 palabra por palabra, B3 botón que sube, M1 luz ── */
/* Todo cuelga de la clase "js": sin JavaScript (o si algo falla) el contenido se ve normal. */
.js .rev{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rev.on{opacity:1;transform:none}
.js .casc>*{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .casc.on>*{opacity:1;transform:none}
.js .casc.on>*:nth-child(2){transition-delay:.12s}.js .casc.on>*:nth-child(3){transition-delay:.24s}.js .casc.on>*:nth-child(4){transition-delay:.36s}
.js .casc.on>*:nth-child(n+5){transition-delay:.48s}
.pal{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .14em;margin-bottom:-.14em}
.js .pal>span{display:inline-block;transform:translateY(112%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.js .pal-on .pal>span{transform:none}

.btn{transition:transform .3s,box-shadow .3s,background .2s,color .2s,border-color .2s}
@media (hover:hover){
  .btn:hover{transform:translateY(-3px)}
  .btn-oro:hover{box-shadow:0 12px 24px rgba(201,165,74,.32)}
  .btn-bronce:hover{box-shadow:0 12px 24px rgba(122,91,60,.35)}
  .btn-linea:hover,.btn-gris:hover{box-shadow:0 10px 22px rgba(0,0,0,.18)}
  .btn-wa:hover{box-shadow:0 12px 24px rgba(24,122,65,.35)}
}
.btn:active{transform:translateY(0);box-shadow:none}
.top .btn:hover{transform:none;box-shadow:none}

/* M1: luz dorada que sigue al mouse en la portada (solo con mouse) */
.hero{position:relative}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--mx,72%) var(--my,45%),rgba(230,200,119,.16),transparent 62%)}
.hero .wrap{position:relative}

@media(prefers-reduced-motion:reduce){
  .js .rev,.js .casc>*{opacity:1;transform:none;transition:none}
  .js .pal>span{transform:none;transition:none}
  .btn:hover{transform:none;box-shadow:none}
}

.salir{display:inline-block;padding:13px 0;color:var(--bronce);text-decoration:underline;text-underline-offset:4px}
.masc .btn-sm{padding:9px 14px}

/* Celular: enlaces sueltos y casilla cómodos para tocar, letra de ayuda legible */
.auth .pie-form a{display:inline-block;padding:13px 6px}
.campo .ayuda{font-size:.9rem}
.check{align-items:center;padding:6px 0}
.check input{width:24px;height:24px;flex:none;margin-top:0}