/* Procedure pages (rinoplastia, abdominoplastia, busto, lifting, bótox): one shared look, same palette and type as the home page */
/* typefaces served with the site: Bodoni Moda, DM Mono, Poppins (SIL Open Font License) */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 500;font-display:swap;src:url('fonts/bodoni-moda.woff2') format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/bodoni-moda-italic.woff2') format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/dm-mono-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/poppins-300.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-500.woff2') format('woff2')}
:root{
  --canvas:#060B15;--panel:#0C1626;--accent:#D9B46A;--accent-hover:#E8C887;--accent-line:rgba(217,180,106,.58);
  --text-primary:#F3ECDF;--text-secondary:#A9B6C8;--ink:#060B15;
  --f-display:'Bodoni Moda','Didot','Bodoni MT',Georgia,serif;
  --f-body:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'DM Mono',ui-monospace,'Cascadia Mono',monospace;
  --ease-out:cubic-bezier(.22,1,.36,1);--radius:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:radial-gradient(ellipse 80% 50% at 80% 0%,rgba(47,180,200,.08),rgba(47,180,200,0) 60%),var(--canvas);color:var(--text-primary);font-family:var(--f-body);font-weight:300;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.12;margin:0;letter-spacing:.005em}
h2{font-size:clamp(1.9rem,3.2vw,2.7rem)}
h2 em,h1 em{font-style:italic;color:var(--accent)}
h3{font-size:1.3rem}
p{margin:0}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.kicker{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin:0 0 16px;display:block}
.lede{color:var(--text-secondary);max-width:60ch;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 26px;border-radius:999px;background:var(--accent);color:var(--ink);font-weight:500;font-size:.95rem;text-decoration:none;border:1px solid var(--accent);transition:background .3s var(--ease-out),transform .3s var(--ease-out)}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--text-primary);border-color:var(--accent-line)}
.btn.ghost:hover{background:rgba(217,180,106,.1)}
.btn svg{width:18px;height:18px}
.section{padding:clamp(72px,10vw,128px) 0}
.rule{border-top:1px solid rgba(217,180,106,.14)}

/* header */
.top{position:sticky;top:0;z-index:30;background:rgba(6,11,21,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(217,180,106,.12)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.brand img{width:42px}
.brand b{font-family:var(--f-display);font-weight:500;font-size:1rem;letter-spacing:.02em;display:block;line-height:1.15}
.brand small{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:block}
.top nav{display:flex;align-items:center;gap:26px;font-size:.88rem}
.top nav a:not(.btn){color:var(--text-secondary);text-decoration:none;padding:10px 0}
.top nav a:not(.btn):hover{color:var(--text-primary)}
.top .btn{min-height:42px;padding:9px 20px;font-size:.86rem}
@media (max-width:820px){.top nav a:not(.btn){display:none}}
@media (max-width:420px){.brand span{display:none}}
/* language switch: the current one in gold, the other a quiet link; stays visible on phones */
.lang{display:flex;align-items:center;margin:0;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em}
.lang>*+*{border-left:1px solid rgba(217,180,106,.3)}
.lang b{display:block;padding:12px 8px;line-height:1;color:var(--accent);font-weight:400}
.top nav .lang a{display:block;padding:12px 8px;line-height:1;color:var(--text-secondary);text-decoration:none}
.top nav .lang a:hover{color:var(--text-primary)}
@media (max-width:820px){.top nav{gap:10px}}

/* breadcrumb */
.crumbs{font-size:.8rem;color:var(--text-secondary);padding-top:28px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.crumbs li+li::before{content:"›";margin-right:8px;color:var(--accent)}
.crumbs a{text-decoration:none;color:var(--text-secondary);padding:8px 0}
.crumbs a:hover{color:var(--accent)}

/* hero */
.hero{display:grid;gap:44px;align-items:center;padding:clamp(36px,6vw,72px) 0 clamp(64px,9vw,112px)}
@media (min-width:900px){.hero{grid-template-columns:1.05fr .95fr;gap:72px}}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1.02}
.hero .lead{font-family:var(--f-display);font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.45;color:#EFE6D6;margin-top:22px;max-width:30ch}
.hero .lede{margin-top:16px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.trust b{color:var(--accent);font-weight:400}
.hero-media{margin:0;justify-self:center;width:100%;max-width:540px}
.hero-media.tall{max-width:420px}
.hero-media figcaption{font-size:.84rem;color:var(--text-secondary);margin-top:12px}

/* before / after figures */
.ba{position:relative;display:block;margin:0;border-radius:var(--radius);overflow:hidden;background:#0B1424;box-shadow:0 40px 90px -50px rgba(47,180,200,.45),inset 0 0 0 1px rgba(217,180,106,.18)}
.ba img,.ba video{width:100%}
.ba[data-ba]::before,.ba[data-ba]::after,.vtag{position:absolute;z-index:1;padding:4px 11px;border-radius:999px;background:rgba(6,10,18,.74);font-size:.74rem;color:#EFE6D3;pointer-events:none}
.ba[data-ba]::before{content:"Antes";left:12px;top:12px}
.ba[data-ba="lado"]::after{content:"Después";left:calc(50% + 12px);top:12px}
.ba[data-ba="arriba"]::after{content:"Después";left:12px;top:calc(50% + 12px)}
html[lang="en"] .ba[data-ba]::before{content:"Before"}
html[lang="en"] .ba[data-ba]::after{content:"After"}
.vtag{left:12px;bottom:12px;top:auto;display:flex;align-items:center;gap:6px}
.vtag::before{content:"";width:0;height:0;border-left:7px solid #EFE6D3;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}

/* what it is */
.two{display:grid;gap:40px}
@media (min-width:900px){.two{grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}}
.prose p{color:var(--text-secondary);max-width:62ch}
.prose p+p{margin-top:16px}
.prose strong{color:var(--text-primary);font-weight:400}

/* what can change */
.grid{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:28px 36px;grid-template-columns:1fr}
@media (min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
.grid li{padding-top:22px;border-top:1px solid rgba(217,180,106,.32)}
.grid b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.25rem;margin-bottom:8px}
.grid p{color:var(--text-secondary);font-size:.94rem}

/* candidates */
.checks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.checks li{position:relative;padding-left:34px;color:var(--text-secondary)}
.checks li::before{content:"";position:absolute;left:0;top:.45em;width:18px;height:18px;border-radius:50%;border:1px solid var(--accent-line);background:radial-gradient(circle at 50% 50%,var(--accent) 0 3px,transparent 4px)}
.note{margin-top:22px;font-size:.88rem;color:#8E9BB0}

/* process */
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:18px;counter-reset:s}
@media (min-width:720px){.steps{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{position:relative;padding:30px 26px 34px;border-radius:var(--radius);background:rgba(9,16,28,.72);border:1px solid rgba(217,180,106,.16);counter-increment:s}
.steps li::before{content:"0" counter(s);display:block;font-family:var(--f-display);font-style:italic;font-size:2.2rem;line-height:1;color:rgba(217,180,106,.5);margin-bottom:18px}
.steps h3{font-size:1.25rem}
.steps p{color:var(--text-secondary);font-size:.93rem;margin-top:10px}

/* the doctor explains: his own video, with chapters when it has them */
.explain{display:grid;gap:40px;align-items:center}
@media (min-width:860px){.explain{grid-template-columns:auto 1fr;gap:64px}}
.phone{position:relative;width:min(19rem,78vw);aspect-ratio:9/16;border-radius:30px;overflow:hidden;margin:0 auto;border:1px solid rgba(217,180,106,.45);background:#060b14;box-shadow:0 40px 90px -50px rgba(47,180,200,.55)}
.phone video{width:100%;height:100%;object-fit:cover}
.chapters{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:8px}
@media (min-width:1100px){.chapters{grid-template-columns:1fr 1fr}}
.chapters button{width:100%;min-height:48px;display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:baseline;text-align:left;padding:12px 16px;border-radius:14px;border:1px solid rgba(217,180,106,.16);background:rgba(9,16,28,.6);color:inherit;font:inherit;cursor:pointer;transition:background .35s var(--ease-out),border-color .35s var(--ease-out)}
.chapters button:hover,.chapters button.on{background:rgba(217,180,106,.1);border-color:rgba(217,180,106,.5)}
.chapters span{font-family:var(--f-mono);font-size:.72rem;color:var(--accent)}
.chapters b{font-weight:400;font-size:.92rem}

/* cases */
.cases{columns:3 280px;column-gap:22px;margin-top:44px}
.cases figure{break-inside:avoid;margin:0 0 26px}
.cases button{display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:zoom-in;border-radius:var(--radius)}
.cases .ba img,.cases .ba video{transition:transform .8s var(--ease-out)}
.cases button:hover .ba img,.cases button:hover .ba video{transform:scale(1.03)}
.cases figcaption{font-size:.84rem;color:var(--text-secondary);margin-top:12px}
@media (max-width:600px){.cases{columns:2 150px;column-gap:12px}.cases figure{margin-bottom:16px}.ba[data-ba]::before,.ba[data-ba]::after,.vtag{font-size:.62rem;padding:3px 7px}}
.consent{margin-top:14px;font-size:.86rem;color:#8E9BB0;max-width:72ch}

/* the doctor */
.why{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0;border-top:1px solid rgba(217,180,106,.18)}
.why li{padding:16px 0;border-bottom:1px solid rgba(217,180,106,.18);color:var(--text-secondary)}
.why b{color:var(--text-primary);font-weight:400}
.doc-photo{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;max-width:420px;justify-self:center;width:100%;box-shadow:0 40px 90px -50px rgba(47,180,200,.5),inset 0 0 0 1px rgba(217,180,106,.2)}
.doc-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.more{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(217,180,106,.45);display:inline-block;margin-top:22px;padding:6px 0}

/* faq */
.faq{display:grid;gap:36px}
@media (min-width:900px){.faq{grid-template-columns:.8fr 1.2fr;gap:72px}}
.qa{border-bottom:1px solid rgba(217,180,106,.2)}
.qa:first-child{border-top:1px solid rgba(217,180,106,.2)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 0;font-family:var(--f-display);font-size:1.12rem}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;position:relative;width:16px;height:16px}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--accent);transition:transform .35s var(--ease-out)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i::after{transform:rotate(0)}
.qa p{color:var(--text-secondary);padding:0 0 22px;max-width:64ch}

/* other procedures */
.related{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.related{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.related{grid-template-columns:repeat(4,1fr)}}
.related a{display:block;height:100%;padding:24px 22px;border-radius:18px;border:1px solid rgba(217,180,106,.18);background:rgba(9,16,28,.6);text-decoration:none;transition:border-color .35s var(--ease-out),background .35s var(--ease-out)}
.related a:hover{border-color:rgba(217,180,106,.55);background:rgba(217,180,106,.07)}
.related b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.2rem}
.related span{display:block;color:var(--text-secondary);font-size:.88rem;margin-top:6px}
.related i{display:block;font-style:normal;color:var(--accent);font-size:.84rem;margin-top:14px}

/* closing */
.closing{text-align:center;padding:clamp(72px,10vw,120px) 0;border-top:1px solid rgba(217,180,106,.14);background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(47,180,200,.1),rgba(47,180,200,0) 70%)}
.closing h2{max-width:20ch;margin-inline:auto}
.closing .lede{margin-inline:auto}
.closing .cta-row{justify-content:center}
.closing address{font-style:normal;margin-top:28px;color:var(--text-secondary);font-size:.92rem}

/* footer */
footer{border-top:1px solid rgba(217,180,106,.18);background:rgba(8,13,24,.9);padding:56px 0 calc(44px + env(safe-area-inset-bottom))}
@media (max-width:900px){footer{padding-bottom:calc(108px + env(safe-area-inset-bottom))}}
.foot{display:grid;gap:32px}
@media (min-width:900px){.foot{grid-template-columns:1fr 1fr;gap:60px}}
.foot img{width:min(280px,76%)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:.9rem;margin-top:18px}
.foot nav a{color:var(--text-secondary);text-decoration:none;padding:10px 0}
.foot nav a:hover{color:var(--accent)}
.foot h3{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-top:26px}
.legal{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--text-secondary);line-height:2}
.legal b{color:#E2D6BE;font-weight:400}
.fine{margin-top:30px;padding-top:22px;border-top:1px solid rgba(217,180,106,.12);font-size:.8rem;color:#8E9BB0}

/* whatsapp float */
.wa{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:40;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--ink);box-shadow:0 14px 34px -12px rgba(0,0,0,.6);transition:transform .4s var(--ease-out)}
.wa:hover{transform:scale(1.06)}
.wa svg{width:28px;height:28px}
@media (max-width:520px){.wa{width:50px;height:50px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom))}.wa svg{width:24px;height:24px}}

/* lightbox */
.lightbox{padding:0;border:0;background:transparent;max-width:min(94vw,1100px);max-height:94vh;overflow:visible}
.lightbox::backdrop{background:rgba(3,6,12,.9);backdrop-filter:blur(6px)}
.lightbox img,.lightbox video{max-width:min(94vw,1100px);max-height:84vh;width:auto;border-radius:16px;margin:0 auto;background:#000}
.lightbox img[hidden],.lightbox video[hidden]{display:none}
.lightbox p{text-align:center;color:#E9DFC9;font-size:.92rem;margin-top:12px}
.lb-close{position:fixed;top:16px;right:16px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(232,200,135,.6);background:rgba(8,12,22,.6);color:#EFE6D3;cursor:pointer;font-size:1.4rem;line-height:1}

/* short landscape screens: keep pictures and videos within the screen */
@media (orientation:landscape) and (max-height:560px){
  .hero-media,.doc-photo{width:min(100%,calc((100svh - 100px) * .98))}
  .hero-media.tall{width:min(100%,calc((100svh - 100px) * .7))}
  .phone{width:min(19rem,calc((100svh - 100px) * 9 / 16))}
  .lightbox img,.lightbox video{max-height:78svh}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}