/* De mockups/servicio.html (mismo CSS). */
/* HERO */
.sh-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.sh-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 14s linear forwards}
@keyframes kb{from{transform:scale(1.1)}to{transform:scale(1)}}
.sh-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,7,.6),rgba(7,7,7,.05) 30%,rgba(7,7,7,.35) 58%,rgba(7,7,7,.96)),radial-gradient(ellipse at 10% 90%,rgba(7,7,7,.75),transparent 60%)}
.sh-hero .wrap{position:relative;z-index:2;width:100%;padding-top:150px;padding-bottom:clamp(40px,6vh,70px)}
.sh-hero h1{font-family:var(--wide);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(46px,min(8.4vw,15vh),156px);line-height:.86;letter-spacing:-.05em;max-width:15ch}
.sh-hero h1 .it{font-weight:400;display:block;font-size:1.04em;color:var(--paper)}
.sh-hero .row{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-top:30px}
.sh-hero p{max-width:46ch;color:var(--paper-2);font-size:clamp(15px,1.15vw,18px)}
.sh-hero .acts{display:flex;gap:10px;flex-wrap:wrap}
.tbar{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line);background:var(--ink)}
.tbar div{padding:22px var(--g);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.tbar div:last-child{border-right:0}
.tbar .lbl{color:var(--dim)}
.tbar b{font-family:var(--wide);font-stretch:118%;font-weight:600;font-size:clamp(15px,1.3vw,20px)}
.tbar b.red{color:var(--red)}
/* BENEFICIOS */
.ben{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.ben div{padding:36px 32px 10px 0;border-right:1px solid var(--line)}
.ben div+div{padding-left:32px}
.ben div:last-child{border-right:0}
.ben .n{font-family:var(--wide);font-stretch:125%;font-weight:200;font-size:clamp(54px,5vw,90px);line-height:.8;color:var(--red)}
.ben h3{font-family:var(--wide);font-stretch:125%;font-weight:700;text-transform:uppercase;font-size:clamp(20px,1.8vw,30px);letter-spacing:-.02em;margin:34px 0 12px;line-height:1}
.ben p{color:var(--paper-2);max-width:36ch}
/* GALERÍA */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(150px,16vw,280px);gap:clamp(8px,1vw,14px)}
.mosaic button{position:relative;overflow:hidden;cursor:none}
.mosaic button img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e),filter .6s;filter:brightness(.85)}
.mosaic button:hover img{transform:scale(1.05);filter:none}
.mosaic button:nth-child(1){grid-column:span 3;grid-row:span 2}
.mosaic button:nth-child(2){grid-column:span 3}
.mosaic button:nth-child(3){grid-column:span 2}
.mosaic button:nth-child(4){grid-column:span 1}
.mosaic button:nth-child(5){grid-column:span 2}
.mosaic button:nth-child(6){grid-column:span 4}
/* PAQUETES */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,22px);align-items:stretch}
.pk{position:relative;border:1px solid var(--line-2);padding:clamp(26px,2.6vw,40px);display:flex;flex-direction:column;gap:24px;background:var(--black);transition:border-color .4s,transform .5s var(--e)}
.pk:hover{border-color:var(--paper);transform:translateY(-4px)}
.pk.hot{border-color:var(--red);background:linear-gradient(180deg,rgba(218,56,50,.12),rgba(218,56,50,0) 60%),var(--black)}
.pk .badge{position:absolute;top:-13px;left:clamp(26px,2.6vw,40px);background:var(--red);color:#fff;padding:6px 12px;border-radius:999px}
.pk h3{font-family:var(--wide);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(26px,2.4vw,40px);letter-spacing:-.03em;line-height:.9}
.pk .price .lbl{color:var(--dim);display:block;margin-bottom:6px}
.pk .price b{font-family:var(--wide);font-stretch:118%;font-weight:700;font-size:clamp(30px,2.8vw,46px);letter-spacing:-.02em}
.pk .price small{color:var(--dim);font-size:14px;margin-left:6px}
.pk ul{list-style:none;display:grid;gap:12px;flex:1;border-top:1px solid var(--line);padding-top:22px}
.pk li{display:flex;gap:12px;color:var(--paper-2);font-size:15px}
.pk li::before{content:"";flex:0 0 auto;width:14px;height:14px;margin-top:4px;border-radius:50%;border:1px solid var(--red);background:radial-gradient(circle,var(--red) 0 3px,transparent 3.5px)}
.pk .btn{width:100%}
.pk-note{margin-top:22px;color:var(--dim);text-align:center}
/* PROCESO */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.steps div{border-top:2px solid var(--line-2);padding:26px 26px 0 0;position:relative}
.steps div::before{content:"";position:absolute;top:-2px;left:0;height:2px;width:0;background:var(--red);transition:width 1.4s var(--e)}
.steps.in div::before{width:100%}
.steps div:nth-child(2)::before{transition-delay:.25s}.steps div:nth-child(3)::before{transition-delay:.5s}.steps div:nth-child(4)::before{transition-delay:.75s}
.steps .lbl{color:var(--red)}
.steps h4{font-family:var(--wide);font-stretch:125%;font-weight:700;text-transform:uppercase;font-size:clamp(18px,1.5vw,24px);margin:16px 0 10px}
.steps p{color:var(--paper-2);font-size:15px;max-width:30ch}
/* TESTIMONIO */
.quote{position:relative;overflow:hidden;min-height:min(80vh,720px);display:flex;align-items:center}
.quote>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.32) grayscale(.3)}
.quote .wrap{position:relative;z-index:2;text-align:center}
.quote blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(30px,4.2vw,72px);line-height:1.08;max-width:22ch;margin:0 auto}
.quote blockquote::before{content:"“";display:block;color:var(--red);font-size:1.6em;line-height:.6;margin-bottom:12px}
.quote .who{margin-top:30px;color:var(--gold)}
/* FAQ + BRIEF */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:start}
.split .side h2{font-family:var(--wide);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(40px,5vw,96px);line-height:.86;letter-spacing:-.05em}
.split .side h2 .it{font-weight:400;display:block;font-size:.8em;color:var(--paper-2)}
.split .side p{color:var(--paper-2);margin-top:26px;max-width:40ch}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;color:var(--paper-2)}
.trust span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);margin-right:9px;vertical-align:2px}
.wa-l{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:36px;padding:20px 0;border-block:1px solid var(--line);transition:padding .4s var(--e),color .3s}
.wa-l:hover{padding-left:12px;color:var(--red)}
.brief-w{position:relative;overflow:hidden;background:var(--ink);border-top:1px solid var(--line)}
.brief-w::before{content:"";position:absolute;width:60vw;height:60vw;max-width:1000px;max-height:1000px;right:-20vw;top:-25vw;border-radius:50%;background:radial-gradient(circle,rgba(218,56,50,.18),transparent 62%);pointer-events:none}
.others{display:flex;flex-wrap:wrap;gap:8px}
.visit{margin-top:34px;padding:24px;border:1px solid var(--line-2);display:flex;flex-direction:column;gap:10px;background:var(--black)}
.visit b{font-family:var(--wide);font-stretch:125%;font-weight:700;text-transform:uppercase;font-size:clamp(18px,1.6vw,24px)}
.visit p{color:var(--paper-2);font-size:15px;margin:0}
.visit .va{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
/* CASO ESTRELLA */
.case{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.case .m{position:relative;aspect-ratio:16/11;overflow:hidden;cursor:none}
.case .m img{width:100%;height:100%;object-fit:cover;filter:brightness(.75);transition:transform 1.6s var(--e)}
.case .m:hover img{transform:scale(1.05)}
.case .m .live{position:absolute;top:18px;left:18px;display:flex;align-items:center;gap:8px;background:var(--red);color:#fff;padding:7px 12px;border-radius:999px}
.case .m .live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:bl 1.1s infinite}
@keyframes bl{50%{opacity:.2}}
.case .m .ph-note{position:absolute;left:18px;bottom:16px;color:var(--gold)}
.case h3{font-family:var(--wide);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(28px,3vw,52px);line-height:.9;letter-spacing:-.04em;margin:14px 0 14px}
.case p{color:var(--paper-2);max-width:46ch}
.stats{display:grid;grid-template-columns:1fr 1fr;margin-top:30px;border-top:1px solid var(--line)}
.stats div{padding:20px 0;border-bottom:1px solid var(--line)}
.stats div:nth-child(odd){padding-right:20px;border-right:1px solid var(--line)}
.stats div:nth-child(even){padding-left:20px}
.stats b{display:block;font-family:var(--wide);font-stretch:125%;font-weight:200;font-size:clamp(48px,4.6vw,80px);line-height:.85;color:var(--red)}
.stats .lbl{color:var(--paper-2);display:block;margin-top:10px}
/* COMPLEMENTOS */
.adds{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.ad{border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s}
.ad:hover{border-color:var(--line-2)}
.ad.hot{border-color:var(--red);background:linear-gradient(180deg,rgba(218,56,50,.1),transparent)}
.ad .t{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ad b{font-family:var(--wide);font-stretch:118%;font-weight:600;text-transform:uppercase;font-size:15px}
.ad .pr{color:var(--paper);white-space:nowrap}
.ad p{color:var(--dim);font-size:14px}
.ad .new{align-self:flex-start;background:var(--red);color:#fff;padding:4px 9px;border-radius:999px}
/* RESERVA */
.book{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);border:1px solid var(--line-2);padding:clamp(22px,3vw,40px);background:var(--black)}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.days button{border:1px solid var(--line);padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .3s}
.days button b{font-family:var(--wide);font-stretch:118%;font-weight:600;font-size:18px}
.days button:hover{border-color:var(--line-2)}
.days button.on{background:var(--paper);color:var(--black);border-color:var(--paper)}
.days button[disabled]{opacity:.3;cursor:not-allowed}
.hours{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:18px}
.hours button{border:1px solid var(--line);padding:11px 0;font-size:14px;transition:all .3s}
.hours button.on{background:var(--red);border-color:var(--red);color:#fff}
.hours button.busy{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.sum{display:flex;flex-direction:column;gap:14px}
.sum .row2{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.sum .row2 span:first-child{color:var(--dim)}
.sum .tot b{font-family:var(--wide);font-stretch:118%;font-weight:700;font-size:28px}
.sum label.x{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--paper-2);cursor:pointer}
.sum label.x input{accent-color:var(--red)}
@media (max-width:900px){.case,.book{grid-template-columns:minmax(0,1fr)}.hours{grid-template-columns:repeat(3,minmax(0,1fr))}.days button b{font-size:15px}}
@media (max-width:1024px){.tbar{grid-template-columns:1fr 1fr}.tbar div:nth-child(2){border-right:0}.tbar div:nth-child(-n+2){border-bottom:1px solid var(--line)}.packs{grid-template-columns:1fr;max-width:560px;margin-inline:auto}.steps{grid-template-columns:1fr 1fr;gap:30px 0}}
@media (max-width:860px){
  .ben{grid-template-columns:1fr}.ben div,.ben div+div{padding:30px 0;border-right:0;border-bottom:1px solid var(--line)}
  .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:42vw}
  .mosaic button:nth-child(n){grid-column:span 1;grid-row:span 1}
  .mosaic button:nth-child(1){grid-column:span 2;grid-row:span 1}
  .split{grid-template-columns:1fr}
  .sh-hero h1{font-size:8.6vw}
}
@media (max-width:520px){.steps{grid-template-columns:1fr}.tbar b{font-size:15px}}
.hero-trust{color:var(--paper);margin-top:18px;text-transform:none;letter-spacing:.02em;font-size:13px;font-family:var(--sans);font-weight:500}
.proof{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.pv{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;cursor:none}
.pv img{width:100%;height:100%;object-fit:cover;filter:brightness(.7);transition:transform 1.6s var(--e)}
.pv:hover img{transform:scale(1.05)}
.pv .pl2{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px;border-radius:50%;background:var(--red);display:grid;place-items:center}
.pv .cap{position:absolute;left:18px;bottom:16px}.pv .realtag{position:absolute;left:18px;top:16px;background:var(--red);color:#fff;padding:6px 10px;border-radius:999px}
.proof h3{font-family:var(--wide);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(26px,2.8vw,46px);line-height:.9;letter-spacing:-.04em;margin:12px 0}
.proof p{color:var(--paper-2)}
.mini{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.3;margin-top:22px}.mini .lbl{display:block;margin-top:8px;color:var(--gold);font-style:normal}
.guar{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px;color:var(--paper-2);font-size:14px}
.guar li::before{content:"✓";color:var(--red);margin-right:8px;font-weight:600}
.guar.row{justify-content:center;margin-top:30px}
.pk.picked{box-shadow:0 0 0 2px var(--paper)}
.cmp{margin-top:26px;border:1px solid var(--line-2)}
.cmp summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;justify-content:space-between;align-items:center}
.cmp summary::-webkit-details-marker{display:none}
.cmp summary i{font-style:normal;transition:transform .3s}.cmp[open] summary i{transform:rotate(45deg)}
.cmp-t{overflow-x:auto;padding:0 22px 22px}
.cmp table{width:100%;border-collapse:collapse;min-width:640px;font-size:14px}
.cmp th,.cmp td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-family:var(--wide);font-stretch:118%;font-weight:700;text-transform:uppercase;font-size:14px}
.cmp thead th span{display:block;color:var(--paper-2);font-weight:500;margin-top:4px}
.cmp tbody th{color:var(--dim);font-weight:400;width:18%}
.cmp td{color:var(--paper-2)}.cmp .hot{background:rgba(218,56,50,.07);color:var(--paper)}
.fecha-w{padding-block:clamp(60px,7vw,100px) 0}
.fecha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px 40px;align-items:center;padding:clamp(24px,3vw,40px);border:1px solid var(--red);background:linear-gradient(90deg,rgba(218,56,50,.1),transparent)}
.fecha h3{font-family:var(--wide);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(26px,2.6vw,42px);line-height:.9;letter-spacing:-.04em;margin:10px 0}
.fecha p{color:var(--paper-2)}.scar{color:var(--paper);font-weight:500}
.fq{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}
.fecha>*{min-width:0}.fq input{width:100%;min-width:0;background:var(--black);border:1px solid var(--line-2);color:var(--paper);font:inherit;padding:14px;border-radius:0;color-scheme:dark}
.fq input:focus{outline:none;border-color:var(--red)}
.fq-r{grid-column:1/-1;color:var(--paper-2);text-transform:none;letter-spacing:.02em;font-size:14px}
.fq-r .ok{color:#6FCF97}.fq-r .no{color:var(--red)}
.fq .fq-ap{grid-column:1/-1;align-items:center;gap:8px}.fq .fq-ap input{width:16px;height:16px;padding:0;margin:0;flex:0 0 auto}
.obj{padding-block:clamp(80px,10vw,150px);background:var(--ink);border-block:1px solid var(--line)}
.obj h2{font-family:var(--wide);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:clamp(36px,5vw,92px);line-height:.88;letter-spacing:-.045em;margin-top:18px;max-width:16ch}
.obj h2 .it{font-weight:400;display:block;color:var(--paper-2)}
.obj-g{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(40px,5vw,70px);border-top:1px solid var(--line)}
.obj-g div{padding:28px 28px 0 0;border-right:1px solid var(--line)}.obj-g div+div{padding-left:28px}.obj-g div:last-child{border-right:0}
.obj-g b{font-family:var(--wide);font-stretch:118%;font-weight:700;text-transform:uppercase;font-size:20px}
.obj-g p{color:var(--paper-2);margin-top:10px}
.visit.main{border-color:var(--red)}
.lvl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.lvl a{border:1px solid var(--line-2);padding:18px;display:flex;flex-direction:column;gap:6px;transition:border-color .3s}
.lvl a:hover{border-color:var(--paper)}
.lvl b{font-weight:500;font-size:15px}
@media (max-width:900px){.proof,.fecha{grid-template-columns:minmax(0,1fr)}.fq{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fq button{grid-column:1/-1}.obj-g{grid-template-columns:1fr}.obj-g div,.obj-g div+div{padding:24px 0;border-right:0;border-bottom:1px solid var(--line)}.lvl{grid-template-columns:1fr}}
.fold-t{display:none}
@media (max-width:860px){.fold:not(.open) .fold-b{max-height:560px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}.fold:not(.open) .fold-t{display:inline-flex;margin-top:12px}}

/* Reserva del estudio a 400 px: los 7 días caben sin desbordar la página. */
@media (max-width:480px){.days{gap:4px}.days button{padding:8px 0}.days button .lbl{font-size:9px;letter-spacing:.04em}.days button b{font-size:14px}}