:root{--navy:#050D32;--plata:#BFBFC0}
*{box-sizing:border-box}body{margin:0;font-family:Montserrat,system-ui,sans-serif;color:var(--navy);background:#F4F4F5;line-height:1.55}
h1,h2,.marca{font-family:Cinzel,serif}
header{background:var(--navy);color:#fff;padding:14px 20px;display:flex;justify-content:space-between;align-items:center}
.marca{letter-spacing:.08em;font-weight:700}header a{color:var(--plata);text-decoration:none;font-weight:600}
.hero{background:linear-gradient(90deg,rgba(5,13,50,.92) 0%,rgba(5,13,50,.75) 55%,rgba(5,13,50,.45) 100%),url(../img/fondo-hero.jpg) center/cover no-repeat var(--navy);color:#fff;padding:28px 20px 56px}
.wrap{max-width:1040px;margin:0 auto}
.grid{display:grid;gap:28px;align-items:center}
.foto{width:180px;height:180px;border-radius:50%;object-fit:cover;border:4px solid var(--plata);margin:0 auto;display:block}
.eyebrow{color:var(--plata);font-weight:600;letter-spacing:.12em;font-size:.8rem;text-transform:uppercase}
h1{font-size:clamp(1.9rem,6vw,3.2rem);line-height:1.1;margin:.3em 0}
.sub{font-size:1.05rem;color:#E6E6EA}
.cta{display:inline-block;background:linear-gradient(180deg,#2a8cff 0%,#0a5fe0 100%);color:#fff;font-weight:700;font-size:1.15rem;padding:16px 34px;border-radius:999px;border:2px solid #6fd3ff;text-decoration:none;margin-top:18px;box-shadow:0 0 0 3px rgba(111,211,255,.25),0 0 22px rgba(42,140,255,.55),0 6px 20px rgba(0,0,0,.3);transition:transform .15s}
.cta:hover{transform:translateY(-2px)}
.nota{font-size:1rem;font-weight:700;color:#fff;margin-top:12px;text-shadow:0 1px 6px rgba(5,13,50,.85)}
.pend{display:none;background:#fff3cd;color:#664d03;padding:10px 14px;border-radius:8px;margin-top:12px;font-size:.9rem}
section{padding:40px 20px}
.cards{display:grid;gap:16px}
.card{background:#fff;border-radius:14px;padding:20px;border-top:4px solid var(--navy)}
.card h2{font-size:1.05rem;margin:0 0 6px}
table{border-collapse:collapse;width:100%}td{padding:6px 0;border-bottom:1px solid #e3e3e6}
.bk{background:#fff;border-radius:16px;padding:22px;border-top:5px solid var(--navy);max-width:720px;margin:0 auto;box-shadow:0 6px 24px rgba(5,13,50,.08)}
.bk h2{margin:0 0 12px}.bk h3{font-size:1rem;margin:18px 0 10px}
.demo{background:#fff3cd;color:#664d03;padding:10px 14px;border-radius:8px;font-weight:600}
.calhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.calhead button{background:var(--navy);color:#fff;border:0;border-radius:8px;width:40px;height:36px;font-size:1.3rem;cursor:pointer}.calhead button:disabled{opacity:.3}
.dows,.dias{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}.dows{font-size:.75rem;color:#666;font-weight:600}
.dias button{aspect-ratio:1;border:1px solid #d7d7dc;background:#fff;border-radius:10px;font:600 .95rem Montserrat,sans-serif;color:var(--navy);cursor:pointer}.dias button:disabled{background:#f1f1f3;color:#bbb;border-color:#eee;cursor:default}.dias button.sel{background:#0a5fe0;color:#fff;border-color:#0a5fe0}
.horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.horas button{padding:10px 4px;border:2px solid #0a5fe0;background:#fff;color:#0a5fe0;border-radius:10px;font:600 .9rem Montserrat,sans-serif;cursor:pointer}.horas button.sel{background:#0a5fe0;color:#fff}
.f2{display:grid;gap:12px;margin-bottom:12px}label{font-weight:600;font-size:.9rem}input{display:block;width:100%;margin-top:4px;padding:12px;border:1px solid #c9c9cf;border-radius:10px;font:1rem Montserrat,sans-serif}
.hp{position:absolute;left:-9999px}.err{color:#b00020;font-weight:600}.okbox{text-align:center}.okbox .cta{color:#fff}
button.cta{cursor:pointer;font-family:Montserrat,sans-serif}button.cta:disabled{opacity:.6}
@media(min-width:600px){.f2{grid-template-columns:1fr 1fr}}
footer{background:var(--navy);color:var(--plata);text-align:center;padding:24px 20px;font-size:.85rem}
footer a{color:#fff}
@media(max-width:799px){.hero{background:linear-gradient(180deg,rgba(5,13,50,.92) 0%,rgba(5,13,50,.6) 35%,rgba(5,13,50,0) 55%),url(../img/fondo-hero-movil.jpg) center bottom/cover no-repeat var(--navy);min-height:1000px}}
@media(min-width:800px){.grid{grid-template-columns:minmax(0,640px)}.foto{width:260px;height:260px}.cards{grid-template-columns:repeat(3,1fr)}.hero{padding:48px 20px 72px}}
.marca-b{color:#fff}.peq{font-size:.85rem}
/* ---- diseño vidrio ---- */
.hero{padding:18px 16px 32px}
.hero .grid{gap:14px;align-items:start}
.hero h1{font-size:clamp(1.6rem,6.4vw,2.6rem);margin:.2em 0 .1em;text-shadow:0 2px 10px rgba(5,13,50,.7)}
.hero .nota{margin:4px 0 0;font-weight:600;font-size:.95rem}
.eyebrow{text-shadow:0 1px 6px rgba(5,13,50,.9)}
.bk{background:rgba(5,13,50,.58);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25);border-top:1px solid rgba(255,255,255,.35);color:#fff;box-shadow:0 10px 36px rgba(0,0,0,.35);padding:16px;margin:0;max-width:none}
.bk h2{font-size:1.15rem;margin:0 0 10px;color:#fff}.bk h3{color:#fff;margin:14px 0 8px}
.calhead b{color:#fff}.calhead button{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35)}
.dows{color:#D9DAE3}
.dias{gap:5px}.dias button{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.6)}
.dias button:disabled{background:rgba(255,255,255,.08);color:rgba(255,255,255,.45);border-color:rgba(255,255,255,.12)}
.dias button.sel{background:#0a5fe0;color:#fff;border-color:#6fd3ff}
.horas button{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.6);color:var(--navy)}.horas button.sel{background:#0a5fe0;color:#fff;border-color:#6fd3ff}
.bk label{color:#fff}.bk input{background:rgba(255,255,255,.95);color:var(--navy)}
.bk .err{color:#ffb4c0}.okbox p{color:#fff}
@media(max-width:799px){.solo-pc{display:none}.hero{min-height:0;background:linear-gradient(180deg,rgba(5,13,50,.85) 0%,rgba(5,13,50,.35) 30%,rgba(5,13,50,.1) 60%,rgba(5,13,50,.5) 100%),url(../img/fondo-hero-movil.jpg) center bottom/cover no-repeat var(--navy);padding-bottom:300px}.dias button{aspect-ratio:auto;height:40px}}
@media(min-width:800px){.hero{background:linear-gradient(90deg,rgba(5,13,50,.85) 0%,rgba(5,13,50,.55) 40%,rgba(5,13,50,.05) 70%),url(../img/fondo-hero.jpg) 70% center/cover no-repeat var(--navy);padding:24px 20px 40px;min-height:calc(100vh - 54px)}
 .wrap.grid{max-width:1200px;grid-template-columns:minmax(0,520px);justify-content:start}
 .hero h1{font-size:2.1rem}.hero .sub{margin:6px 0 0;font-size:.95rem}
 .dias button{aspect-ratio:auto;height:38px}.bk{padding:16px 18px}}
/* ---- vidrio 2: más transparente ---- */
.bk{background:rgba(5,13,50,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bk,.bk h2,.bk h3,.calhead b,.dows{text-shadow:0 1px 4px rgba(5,13,50,.9)}
.dias button,.horas button{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);color:#fff;text-shadow:0 1px 3px rgba(5,13,50,.9)}
.dias button:hover:not(:disabled),.horas button:hover{background:rgba(255,255,255,.3)}
.dias button:disabled{background:rgba(255,255,255,.04);color:rgba(255,255,255,.4);border-color:rgba(255,255,255,.1);text-shadow:none}
.dias button.sel,.horas button.sel{background:#0a5fe0;border-color:#6fd3ff;color:#fff}
@media(max-width:799px){.hero{background:linear-gradient(180deg,rgba(5,13,50,.8) 0%,rgba(5,13,50,.25) 30%,rgba(5,13,50,.05) 60%,rgba(5,13,50,.4) 100%),url(../img/fondo-hero-movil.jpg) center bottom/cover no-repeat var(--navy)}}
@media(min-width:800px){.hero{background:linear-gradient(90deg,rgba(5,13,50,.7) 0%,rgba(5,13,50,.4) 40%,rgba(5,13,50,0) 70%),url(../img/fondo-hero.jpg) 70% center/cover no-repeat var(--navy)}}
.dias button.sel,.dias button.sel:hover,.horas button.sel,.horas button.sel:hover{background:#0a5fe0;border-color:#6fd3ff;color:#fff}
.hero .bk{margin-top:28px}
/* ---- bajar2: en celular el panel empieza debajo de la carpeta del escritorio ---- */
@media(max-width:799px){
 .hero{position:relative;padding:18px 16px 32px;background:linear-gradient(180deg,rgba(5,13,50,.8) 0,rgba(5,13,50,.2) 22vw,rgba(5,13,50,.05) 100vw,rgba(5,13,50,.6) 170vw,var(--navy) 178vw),url(../img/fondo-hero-movil.jpg) center top/100% auto no-repeat var(--navy)}
 .hero .grid>div:first-child{position:absolute;top:18px;left:16px;right:16px}
 .hero .bk{margin-top:calc(132vw - 18px)}
}
/* ---- cara: tamaños de letra del hero como en la versión en vivo; panel bajo la cara ---- */
.hero h1{font-size:clamp(1.9rem,6vw,3.2rem);margin:.3em 0}
.hero .sub{font-size:1.05rem}
.hero .nota{font-size:1rem;font-weight:700;margin-top:12px}
@media(min-width:800px){.hero h1{font-size:clamp(1.9rem,6vw,3.2rem)}.hero .sub{font-size:1.05rem}}
@media(max-width:799px){.hero .bk{margin-top:calc(116vw - 18px)}}
/* ---- maria: TODO reemplazar img/fondo-hero.jpg (horizontal) y img/fondo-hero-movil.jpg (vertical) con las fotos finales de María ---- */
@media(min-width:800px){
 .hero{background:linear-gradient(270deg,rgba(5,13,50,.75) 0%,rgba(5,13,50,.4) 35%,rgba(5,13,50,0) 60%),url(../img/fondo-hero.jpg) 30% center/cover no-repeat var(--navy)}
 .wrap.grid{justify-content:end}
}
/* ---- maria móvil: foto vertical 489x941 (alto ≈192vw); panel empieza bajo la laptop (~83%) ---- */
@media(max-width:799px){
 .hero{background:linear-gradient(180deg,rgba(5,13,50,.8) 0,rgba(5,13,50,.2) 22vw,rgba(5,13,50,.05) 100vw,rgba(5,13,50,.6) 184vw,var(--navy) 192vw),url(../img/fondo-hero-movil.jpg) center top/100% auto no-repeat var(--navy)}
 .hero .bk{margin-top:calc(160vw - 18px)}
}