/* ============================================================
   DR. LAHUERTA — Clínica dental, Valencia
   Sistema de diseño: blanco clínico premium, minimalista
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=Inter:wght@300;400;500;600&family=Fraunces:ital,wght@1,300;1,400;1,500&display=swap');

:root{
  --white:#ffffff;
  --off-white:#f7f7f6;
  --paper:#fbfbfa;
  --charcoal:#24262a;
  --charcoal-2:#3a3d42;
  --ink:#1b1c1e;
  --gray-700:#54585d;
  --gray-500:#6b6f74; /* oscurecido respecto al gris original para cumplir contraste AA (4.5:1) sobre fondos claros */
  --gray-300:#c8cacc;
  --gray-200:#e2e3e4;
  --gray-100:#eeeeed;
  --line:#e5e5e3;
  --surgical:#4b5c50;      /* verde quirúrgico sutil */
  --surgical-soft:#eef1ee;
  --silver:#aab0b3;
  --shadow: 0 20px 60px -25px rgba(20,20,20,.25);
  --shadow-sm: 0 8px 24px -12px rgba(20,20,20,.18);
  --radius: 2px;
  --maxw: 1220px;
  --font-head:'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-script:'Fraunces', 'Times New Roman', serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  font-weight:400;
  line-height:1.65;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:500;line-height:1.15;margin:0 0 .5em;letter-spacing:.005em;color:var(--charcoal);}
p{margin:0 0 1em;color:var(--gray-700);}
.container{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
section{padding:72px 0;}
@media (max-width:780px){
  section{padding:44px 0;}
  .container{padding:0 20px;}
}

/* ---------- Eyebrow / kicker ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-head);
  font-size:12.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--surgical); font-weight:500; margin-bottom:18px;
}
.kicker::before{content:"";width:22px;height:1px;background:var(--surgical);display:inline-block;}

h2.section-title{font-size:clamp(28px,3.4vw,42px); max-width:760px;}
.section-lede{font-size:18px;color:var(--gray-700);max-width:640px;}
.section-head{margin-bottom:38px;}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto;}
.section-head.center .section-lede{margin-left:auto;margin-right:auto;}

/* ---------- Logo / wordmark (recreación del logo bordado real) ---------- */
.logo{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-head); font-weight:500;
  color:var(--charcoal); line-height:1;
  white-space:nowrap;
}
.logo .dr{font-size:.42em; letter-spacing:.12em; font-weight:400; padding-bottom:.42em; color:var(--surgical);}
.logo .name{font-size:1em; letter-spacing:.09em; text-transform:uppercase;}
.logo.on-dark{color:var(--white);}
.logo.on-dark .dr{color:var(--silver);}
.logo img{height:28px; width:auto; display:block;}
.footer-brand .logo img{height:24px;}
@media (max-width:780px){ .logo img{height:23px;} }

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
}
.main-nav{display:flex; align-items:center; gap:34px;}
.main-nav > ul{display:flex; align-items:center; gap:34px;}
.main-nav a{
  font-size:13.5px; letter-spacing:.03em; color:var(--charcoal-2);
  padding:8px 0; position:relative;
}
.main-nav a:hover{color:var(--surgical);}
.has-drop{position:relative;}
.has-drop > a::after{content:"";display:inline-block;margin-left:5px;border:4px solid transparent;border-top-color:var(--gray-500);vertical-align:middle;transform:translateY(-1px);}
.dropdown{
  position:absolute; top:100%; left:0; padding-top:14px; min-width:210px;
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:all .18s ease;
}
.has-drop:hover .dropdown, .has-drop:focus-within .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown ul{background:var(--white); box-shadow:var(--shadow); border:1px solid var(--line);}
.dropdown a{display:block; padding:13px 20px; font-size:13px; border-bottom:1px solid var(--line);}
.dropdown li:last-child a{border-bottom:none;}
.dropdown a:hover{background:var(--off-white);}
.main-nav .nav-cta{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--charcoal); color:var(--white);
  border:1px solid var(--charcoal); padding:11px 28px; font-size:12.5px;
  letter-spacing:.04em; white-space:nowrap;
}
.main-nav .nav-cta:hover{background:var(--ink); border-color:var(--ink); color:var(--white);}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--charcoal);margin:5px 0;}

@media (max-width:980px){
  .main-nav{position:fixed; inset:84px 0 0 0; background:var(--white); flex-direction:column; align-items:stretch; padding:20px 24px 40px; overflow-y:auto; transform:translateX(100%); transition:transform .25s ease;}
  .main-nav.open{transform:translateX(0);}
  .main-nav > ul{flex-direction:column; align-items:stretch; gap:0;}
  .main-nav > ul > li{border-bottom:1px solid var(--line);}
  .main-nav a{padding:16px 2px; display:block;}
  .dropdown{position:static; padding-top:0; opacity:1; visibility:visible; transform:none; display:none;}
  .has-drop.open .dropdown{display:block;}
  .has-drop > a::after{float:right; margin-top:8px;}
  .nav-cta{margin-top:18px; text-align:center;}
  .nav-toggle{display:block;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-size:13.5px; letter-spacing:.04em;
  padding:15px 28px; border:1px solid var(--charcoal); color:var(--charcoal);
  transition:all .2s ease; cursor:pointer; background:none;
}
.btn:hover{background:var(--charcoal); color:var(--white);}
.btn-solid{background:var(--charcoal); color:var(--white);}
.btn-solid:hover{background:var(--ink); color:var(--white);}
.btn-ghost-light{border-color:rgba(255,255,255,.55); color:var(--white);}
.btn-ghost-light:hover{background:var(--white); color:var(--charcoal); border-color:var(--white);}
.btn-sm{padding:11px 20px; font-size:12.5px;}

/* ---------- Hero ---------- */
.hero{
  position:relative; display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch;
  min-height:88vh; background:var(--paper);
}
.hero-copy{display:flex; flex-direction:column; justify-content:center; padding:60px 5vw 60px 32px;}
.hero-copy h1{font-size:clamp(34px,4.6vw,58px); max-width:640px;}
.hero-copy .lede{font-size:19px; max-width:480px; color:var(--gray-700);}
.hero-actions{display:flex; gap:16px; margin-top:8px; flex-wrap:wrap;}
.hero-media{position:relative; overflow:hidden; background:var(--charcoal);}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:top center;}
.hero-tags{display:flex; gap:10px; flex-wrap:wrap; margin:26px 0 34px;}
.tag{
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--surgical);
  border:1px solid var(--surgical-soft); background:var(--surgical-soft); padding:7px 12px;
}
@media (max-width:980px){
  .hero{grid-template-columns:1fr; min-height:auto;}
  .hero-media{height:52vh; order:-1;}
  .hero-copy{padding:44px 20px;}
}

/* ---------- Bands / trust bar ---------- */
.trust-bar{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--white);}
.trust-bar .container{display:flex; flex-wrap:wrap; gap:28px 46px; justify-content:space-between; padding-top:30px; padding-bottom:30px;}
.trust-item{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--gray-700); letter-spacing:.01em;}
.trust-item .dot{width:6px;height:6px;background:var(--surgical);flex:none;}

/* ---------- Cards / grids ---------- */
.grid{display:grid; gap:28px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

.value-card{padding:34px 30px; border:1px solid var(--line); background:var(--white); transition:box-shadow .2s, border-color .2s;}
.value-card:hover{box-shadow:var(--shadow-sm); border-color:transparent;}
.value-card .num{font-family:var(--font-head); font-size:13px; color:var(--surgical); letter-spacing:.08em; margin-bottom:16px; display:block;}
.value-card h3{font-size:19px; margin-bottom:10px;}
.value-card p{font-size:14.5px; margin-bottom:0;}

.photo-card{position:relative; overflow:hidden; background:var(--gray-100);}
.photo-card img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.photo-card:hover img{transform:scale(1.045);}

/* ---------- Section variants ---------- */
.section-dark{background:var(--charcoal); color:var(--white);}
.section-dark h2, .section-dark h3, .section-dark h4{color:var(--white);}
.section-dark p{color:var(--gray-300);}
.section-alt{background:var(--off-white);}

/* ---------- Antes / Después ---------- */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line);}
.compare figure{margin:0; position:relative; background:var(--gray-100); aspect-ratio:4/3; overflow:hidden;}
.compare img{width:100%; height:100%; object-fit:cover;}
.compare figcaption{
  position:absolute; left:0; bottom:0; padding:7px 12px;
  font-family:var(--font-head); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(27,28,30,.72); color:var(--white);
}
.case-card{background:var(--white); border:1px solid var(--line);}
.case-card .case-body{padding:22px 22px 26px;}
.case-card h4{font-size:16.5px; margin-bottom:8px;}
.case-card p{font-size:13.8px; margin-bottom:0;}
.evidence-card{background:var(--white); border:1px solid var(--line);}
.evidence-card .evidence-body{padding:20px 22px 24px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.evidence-card h4{font-size:15.5px; margin:0;}
.case-triple{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line);}
.case-triple figure{margin:0; position:relative; background:var(--gray-100); aspect-ratio:4/3; overflow:hidden;}
.case-triple img{width:100%; height:100%; object-fit:cover;}
.case-triple figcaption{position:absolute; left:0; bottom:0; padding:6px 10px; font-family:var(--font-head); font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:rgba(27,28,30,.72); color:#fff;}

/* ---------- Treatment category block ---------- */
.tx-block{padding:64px 0; border-top:1px solid var(--line);}
.tx-head{display:grid; grid-template-columns:.9fr 1.6fr; gap:48px; margin-bottom:38px;}
.tx-head .tx-eyebrow{font-family:var(--font-head); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--surgical); margin-bottom:10px; display:block;}
.tx-head h3{font-size:clamp(24px,2.6vw,32px);}
.tx-featured{background:var(--surgical-soft); border:1px solid #dfe6e0;}
@media (max-width:900px){.tx-head{grid-template-columns:1fr; gap:16px;}}

/* ---------- Timeline (trayectoria) ---------- */
.timeline{border-left:1px solid var(--line); margin-left:6px;}
.timeline-item{position:relative; padding:0 0 40px 34px;}
.timeline-item::before{content:"";position:absolute; left:-6px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--white); border:2px solid var(--surgical);}
.timeline-item .yr{font-family:var(--font-head); font-size:13px; letter-spacing:.06em; color:var(--surgical); margin-bottom:4px; display:block;}
.timeline-item h4{font-size:17.5px; margin-bottom:6px;}
.timeline-item p{font-size:14.5px;}
.trayectoria-photo{
  position:sticky;
  top:110px;
}

@media (max-width:620px){
  .trayectoria-photo{
    position:relative;
    top:auto;
  }
}

/* ---------- Quote / interview ---------- */
.qa{border-top:1px solid var(--line); padding:30px 0;}
.qa .q{font-family:var(--font-head); font-size:19px; color:var(--charcoal); margin-bottom:12px;}
.qa .q::before{content:"— "; color:var(--surgical);}
.big-quote{font-family:var(--font-head); font-size:clamp(22px,2.6vw,32px); color:var(--charcoal); line-height:1.4; max-width:820px;}
.big-quote .mark{color:var(--surgical);}
.text-link{color:var(--surgical); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.text-link:hover{text-decoration-thickness:2px;}

/* ---------- FAQ accordion ---------- */
.accordion-item{border-bottom:1px solid var(--line);}
.accordion-item summary{
  list-style:none; cursor:pointer; padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--font-head); font-size:16.5px; color:var(--charcoal);
}
.accordion-item summary::-webkit-details-marker{display:none;}
.accordion-item summary::after{content:"+"; font-size:22px; color:var(--surgical); flex:none; transition:transform .2s;}
.accordion-item[open] summary::after{transform:rotate(45deg);}
.accordion-item .a-body{padding:0 0 26px; max-width:760px; color:var(--gray-700); font-size:15px;}

/* ---------- Blog ---------- */
.post-card{border:1px solid var(--line); background:var(--white);}
.post-card .post-body{padding:26px;}
.post-meta{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--surgical); margin-bottom:10px;}
.post-card h3{font-size:19px;}
article.post{max-width:740px; margin:0 auto;}
article.post h2{font-size:24px; margin-top:1.6em;}
article.post p{font-size:16.5px; color:var(--gray-700);}
article.post ul{margin:0 0 1.4em; padding-left:20px; list-style:disc; color:var(--gray-700); font-size:16.5px;}
article.post li{margin-bottom:.4em;}
article.post .p-punch{font-family:var(--font-head); font-size:19px; color:var(--charcoal); margin:1.4em 0;}
article.post .post-cover{aspect-ratio:16/9; overflow:hidden; margin-bottom:36px; background:var(--charcoal);}
article.post .post-cover img{width:100%; height:100%; object-fit:cover; display:block;}
.link-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:6px;
  color:var(--surgical); font-weight:600; text-decoration:underline; text-underline-offset:3px;
}
.link-cta::after{content:"→"; transition:transform .15s;}
.link-cta:hover::after{transform:translateX(3px);}

.post-layout{display:flex; gap:64px; align-items:flex-start;}
.post-main{flex:1 1 auto; min-width:0;}
.post-main article.post{max-width:none; margin:0;}
.post-sidebar{flex:0 0 280px; position:sticky; top:104px;}
.sidebar-card{border:1px solid var(--line); padding:26px 24px;}
.sidebar-card h4{
  font-family:var(--font-body); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--surgical); font-weight:600; margin-bottom:6px;
}
.sidebar-list{list-style:none; margin:14px 0 0; padding:0;}
.sidebar-list li{border-top:1px solid var(--line);}
.sidebar-list li:first-child{border-top:none;}
.sidebar-list a{display:block; padding:14px 0;}
.sidebar-list .s-meta{display:block; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-500); margin-bottom:4px;}
.sidebar-list .s-title{display:block; font-family:var(--font-head); font-size:15px; color:var(--charcoal); line-height:1.35;}
.sidebar-list a:hover .s-title{color:var(--surgical);}
.sidebar-card .btn{width:100%; text-align:center; margin-top:20px;}
@media (max-width:900px){
  .post-layout{flex-direction:column; gap:40px;}
  .post-sidebar{position:static; width:100%;}
}

.blog-index-section{padding:56px 0;}
.blog-index-section:first-of-type{padding-top:0;}
.blog-index-section .section-head{margin-bottom:28px;}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr; gap:40px;}}
.contact-line{display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line);}
.contact-line:last-child{border-bottom:1px solid var(--line);}
.contact-line .lbl{width:120px; flex:none; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-500); padding-top:2px;}
.contact-line .val{font-size:16px; color:var(--charcoal);}
.contact-line a:hover{color:var(--surgical);}
.contact-line.hours-line{align-items:flex-start;}
.hours-table{border-collapse:collapse; font-size:15px;}
.hours-table td{padding:3px 0; color:var(--charcoal);}
.hours-table td:first-child{padding-right:24px; color:var(--gray-500);}
.form-field{margin-bottom:20px;}
.hp-field{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden;}
.form-field.field-error input{border-color:#c0392b;}
.form-field .field-error-msg{display:block; color:#c0392b; font-size:12.5px; margin-top:6px;}
.form-field label{display:block; font-size:12.5px; letter-spacing:.04em; color:var(--gray-700); margin-bottom:8px;}
.form-field input, .form-field textarea, .form-field select{
  width:100%; border:1px solid var(--gray-300); background:var(--white); padding:13px 14px;
  font-family:var(--font-body); font-size:14.5px; color:var(--charcoal);
}
.form-field input:focus, .form-field textarea:focus{outline:none; border-color:var(--surgical);}
.map-embed{border:1px solid var(--line); height:340px; background:var(--gray-100); position:relative;}
.map-embed iframe{width:100%; height:100%; border:0; filter:grayscale(.35) contrast(1.05);}
/* cookie-consent gate: Google Maps only loads (and only sets its cookies)
   once the visitor accepts, or clicks straight through this card. */
.map-consent-gate{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; text-align:center; padding:24px 28px;
  background:var(--gray-100);
}
.map-consent-gate p{font-size:13px; color:var(--gray-700); max-width:360px; margin:0; line-height:1.55;}
.map-embed.map-consent-given .map-consent-gate{display:none;}

/* ---------- Footer ---------- */
.site-footer{background:var(--charcoal); color:var(--gray-300); padding:72px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:56px;}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}}
.footer-grid h5{font-family:var(--font-head); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--silver); margin-bottom:18px;}
.footer-grid li{margin-bottom:10px; font-size:14px;}
.footer-grid a:hover{color:var(--white);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--gray-300);} /* --gray-300 en vez de --gray-500: sobre el fondo oscuro del footer da contraste AA, al revés que sobre fondo claro */
.footer-brand p{color:var(--gray-300); font-size:14px; max-width:280px; margin-top:16px;}

/* ---------- Page header (banner interior) ---------- */
.page-hero{padding:64px 0 56px; background:var(--paper); border-bottom:1px solid var(--line);}
.page-hero .kicker{margin-bottom:14px;}
.page-hero h1{font-size:clamp(30px,4vw,46px); max-width:760px;}
.page-hero .lede{font-size:17.5px; max-width:620px;}
.breadcrumb{font-size:12.5px; color:var(--gray-500); margin-bottom:20px; letter-spacing:.02em;}
.breadcrumb a:hover{color:var(--surgical);}

/* ---------- Cinematic pan section (Ken Burns) ---------- */
.pan-hero{position:relative; height:78vh; min-height:460px; overflow:hidden; background:var(--charcoal);}
.pan-hero .pan-img{
  position:absolute; top:0; left:-14%; width:128%; height:100%;
  background-size:cover; background-position:center;
  animation:panSweep 22s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes panSweep{
  0%{transform:translateX(0);}
  100%{transform:translateX(-9%);}
}
.pan-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,21,22,.72) 0%, rgba(20,21,22,.15) 45%, rgba(20,21,22,.05) 100%);
}
.pan-hero .pan-copy{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 0 48px;}
.pan-hero .kicker{color:var(--silver);}
.pan-hero .kicker::before{background:var(--silver);}
.pan-hero h2{color:var(--white); font-size:clamp(24px,3vw,36px); max-width:640px; margin:0;}
@media (max-width:780px){
  .pan-hero{height:56vh;}
  .pan-hero .pan-img{left:-30%; width:160%;}
}
@media (prefers-reduced-motion: reduce){
  .pan-hero .pan-img{animation:none;}
}

/* ---------- Full-bleed quote section ---------- */
.quote-hero{
  position:relative; min-height:66vh; display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center; overflow:hidden;
}
.quote-hero::after{content:""; position:absolute; inset:0; background:rgba(18,19,20,.5);}
.quote-hero .quote-copy{position:relative; z-index:2; text-align:center; padding:60px 24px; max-width:820px;}
.quote-hero p{
  font-family:var(--font-head); color:var(--white); font-weight:300;
  font-size:clamp(26px,4.2vw,48px); line-height:1.3; margin:0;
  letter-spacing:.01em;
}
.quote-hero .kicker{justify-content:center; color:var(--silver); margin-bottom:22px;}
.quote-hero .kicker::before{background:var(--silver);}

/* ---------- Atmosphere strip ---------- */
.atmos-strip{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:16px; align-items:stretch;}
.atmos-strip .photo-card:nth-child(1){aspect-ratio:3/4;}
.atmos-strip .photo-card:nth-child(2){aspect-ratio:1/1; margin-top:36px;}
.atmos-strip .photo-card:nth-child(3){aspect-ratio:1/1;}
.atmos-strip .photo-card:nth-child(4){aspect-ratio:3/4; margin-top:36px;}
@media (max-width:900px){
  .atmos-strip{grid-template-columns:1fr 1fr;}
  .atmos-strip .photo-card{margin-top:0 !important; aspect-ratio:1/1 !important;}
}

/* ---------- Main hero (Ken Burns photo, principal) ---------- */
.hero-main{position:relative; min-height:140vh; overflow:hidden; background:var(--charcoal);}
.hero-main-img{
  position:absolute; top:0; left:-14%; width:128%; height:100%;
  background-size:cover; background-position:center;
  animation:panSweep 15s ease-in-out infinite alternate;
  will-change:transform;
}
.hero-main::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, rgba(15,16,17,.1) 0%, rgba(15,16,17,.12) 45%, rgba(15,16,17,.3) 100%);
  pointer-events:none;
}
/* Positioned/pinned by JS (see main.js) while scrolling through the hero
   image; padding-top here is just the sensible no-JS / reduced-motion
   default (box appears near the top rather than vertically centered). */
.hero-main-copy{position:absolute; top:0; left:0; right:0; z-index:2; width:100%; padding:40px 0; will-change:transform;}
.hero-main-copy .container{display:flex; justify-content:flex-end;}
.hero-main-text{max-width:520px; background:rgba(10,11,12,.6); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); padding:42px 44px;}
.hero-main-text .kicker{color:var(--silver);}
.hero-main-text .kicker::before{background:var(--silver);}
.hero-main-text h1{color:var(--white); font-size:clamp(30px,3.6vw,46px); max-width:460px; margin:0 0 18px;}
.hero-main-text .hero-subtitle{color:var(--white); font-family:var(--font-script); font-style:italic; font-weight:400; font-size:clamp(17px,1.7vw,21px); max-width:460px; margin:0 0 14px;}
.hero-main-text .lede{color:rgba(255,255,255,.86); font-size:16.5px; max-width:460px; margin:0;}
.hero-main-text .hero-tags{margin:24px 0 28px;}
.hero-main-text .tag{color:var(--white); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.32);}
@media (max-width:780px){
  .hero-main{min-height:86vh;}
  .hero-main-img{left:-30%; width:160%;}
  .hero-main-copy{position:static; padding:100px 0 40px; transform:none !important;}
  .hero-main-copy .container{justify-content:flex-start;}
  .hero-main-text{max-width:100%; padding:26px 22px;}
}
@media (prefers-reduced-motion: reduce){
  .hero-main-img{animation:none;}
}

/* ---------- Word / feature rows (fotos de relleno) ---------- */
.word-feature{padding-top:72px; padding-bottom:0;}
.word-row{display:flex; align-items:center; gap:0; margin-bottom:0;}
.word-row:last-child{margin-bottom:0;}
.word-row.reverse{flex-direction:row-reverse;}
.word-row-media{position:relative; flex:1 1 50%; aspect-ratio:4/3; overflow:hidden; background:var(--charcoal);}
.word-row-media img{width:100%; height:100%; object-fit:cover; display:block;}
.word-row-media::after{content:""; position:absolute; inset:0; pointer-events:none;}
.word-row:not(.reverse) .word-row-media::after{background:linear-gradient(to right, rgba(20,21,22,0) 55%, var(--charcoal) 100%);}
.word-row.reverse .word-row-media::after{background:linear-gradient(to left, rgba(20,21,22,0) 55%, var(--charcoal) 100%);}
.word-row-text{flex:1 1 50%; padding:0 7vw; overflow:hidden;}
.word-row-word{display:block; font-family:var(--font-script); font-style:italic; font-weight:400; font-size:clamp(46px,6.4vw,96px); color:var(--white); letter-spacing:.005em; line-height:1;
  opacity:0; will-change:opacity, transform;}
.word-row-phrase{color:var(--silver); font-size:15px; line-height:1.6; margin:22px 0 0; max-width:360px;}
.word-collage{position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr; gap:10px;}
.word-collage img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:900px){
  .word-row, .word-row.reverse{flex-direction:column; align-items:stretch; gap:26px; margin-bottom:52px;}
  .word-row-media{aspect-ratio:4/3;}
  .word-row:not(.reverse) .word-row-media::after{background:linear-gradient(0deg, var(--charcoal) 0%, rgba(20,21,22,0) 42%);}
  .word-row.reverse .word-row-media::after{background:linear-gradient(0deg, var(--charcoal) 0%, rgba(20,21,22,0) 42%);}
  .word-row-text{padding:0 4px;}
  .word-collage{grid-template-columns:1fr 1fr 1fr;}
}

/* ---------- Quote split (light, two columns) ---------- */
.quote-clinic-combo{background:var(--white); padding-top:0; padding-bottom:0;}
.quote-split-full{display:flex; align-items:stretch;}
.quote-split-full-text{flex:0 0 60%; width:60%; box-sizing:border-box; padding:72px 56px 40px max(32px, calc((100vw - 1220px) / 2 + 32px));}
.quote-split-full-photo{flex:0 0 40%; width:40%; min-height:100%; overflow:hidden; background:var(--charcoal);}
.quote-split-full-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.quote-split-text{font-family:var(--font-script); font-style:italic; font-weight:400; color:var(--charcoal); font-size:clamp(30px,3.8vw,50px); line-height:1.3; margin:0;}
.quote-split-full-text .kicker{margin-bottom:22px;}
/* .reverse: photo placed first in the markup (so it renders on the left);
   the text pane then needs its outer inset flipped to the right edge. */
.quote-split-full.reverse .quote-split-full-text{padding:72px max(32px, calc((100vw - 1220px) / 2 + 32px)) 40px 56px;}
@media (max-width:780px){
  .quote-split-full, .quote-split-full.reverse{flex-direction:column;}
  .quote-split-full-text, .quote-split-full.reverse .quote-split-full-text{width:100%; max-width:100%; padding:36px 20px 24px;}
  .quote-split-full-photo{width:100%; aspect-ratio:4/3;}
}

/* ---------- Team page (dark, hierarchical, scroll reveal) ---------- */
.page-hero-dark{padding:64px 0 56px; background:#101112; border-bottom:1px solid rgba(255,255,255,.08);}
.page-hero-dark .breadcrumb{color:rgba(255,255,255,.45);}
.page-hero-dark .breadcrumb a{color:rgba(255,255,255,.7);}
.page-hero-dark .breadcrumb a:hover{color:var(--surgical);}
.page-hero-dark .kicker{color:var(--silver);}
.page-hero-dark .kicker::before{background:var(--silver);}
.page-hero-dark h1{color:var(--white);}
.page-hero-dark .lede{color:rgba(255,255,255,.72);}
.team-section{background:#101112; padding:90px 0 100px;}

/* ---------- Split hero: text left (on the normal page-hero paper
   background), video bleeding to the right edge of the viewport, with a
   soft gradient seam blending the two instead of a hard edge. ---------- */
/* .hero-split is used on .page-hero, which carries its own top/bottom
   padding — that padding would stop the video panel from reaching the
   real top/bottom edges of the hero box (showing up as a blank margin
   above/below the video), so it's zeroed here and given back only to the
   text column, which needs the breathing room. */
.hero-split.page-hero{padding-top:0; padding-bottom:0;}
.hero-split{position:relative; display:flex; align-items:stretch; overflow:hidden; min-height:440px;}
.hero-split-text{
  flex:0 0 47%; width:47%; display:flex; align-items:center;
  padding:56px 48px 56px max(32px, calc((100vw - 1220px)/2 + 32px));
}
.hero-split-text > div{max-width:540px;}
.hero-split-video{position:relative; flex:0 0 53%; width:53%; overflow:hidden; background:#101112;}
.hero-split-video video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;}
/* a taller box gives object-fit:cover a less extreme aspect ratio to work
   with, so a tall/portrait clip crops far less tightly — still guaranteed
   to cover edge-to-edge (no letterboxing), just showing more of the frame. */
@media (min-width:901px){
  .hero-split-tall{min-height:640px;}
}
.hero-split-video::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, var(--paper) 0%, rgba(251,251,250,.75) 10%, rgba(251,251,250,0) 32%);
}
/* narrower, portrait-shaped video panel for a vertical clip — cover still
   keeps the source's own proportions (no stretching), just crops the sides
   of a wider clip instead of showing it edge-to-edge. */
@media (min-width:901px){
  .hero-split-narrow-video{min-height:640px;}
  .hero-split-narrow-video .hero-split-text{flex:0 0 66%; width:66%;}
  .hero-split-narrow-video .hero-split-video{flex:0 0 34%; width:34%;}
}
@media (max-width:900px){
  .hero-split{flex-direction:column; min-height:0;}
  .hero-split-text, .hero-split-video{flex:none; width:100%;}
  .hero-split-text{padding:40px 20px 28px;}
  .hero-split-text > div{max-width:none;}
  .hero-split-video{aspect-ratio:16/10;}
  .hero-split-video::before{background:linear-gradient(180deg, var(--paper) 0%, rgba(251,251,250,.75) 8%, rgba(251,251,250,0) 28%);}
}
.team-tier{display:grid; gap:44px; margin:0 auto 86px; max-width:1160px;}
.team-tier:last-child{margin-bottom:0;}
.team-tier-1{grid-template-columns:1fr; max-width:300px;}
.team-tier-2{grid-template-columns:repeat(3,1fr);}
.team-tier-3{grid-template-columns:repeat(3,1fr);}
.team-card{opacity:0; will-change:opacity, transform;}
.team-card .team-photo-dark{position:relative; aspect-ratio:3/4; overflow:hidden; background:#101112;}
.team-card .team-photo-dark img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block; filter:grayscale(1);}
.team-card .team-photo-dark.placeholder{display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.14);}
.team-card .team-photo-dark.placeholder span{color:rgba(255,255,255,.45); font-size:12.5px; letter-spacing:.06em;}
.team-card h3{color:var(--white); font-size:19px; margin:20px 0 4px;}
.team-card .team-role{display:block; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--silver); margin-bottom:6px;}
.team-card .pending{color:rgba(255,255,255,.45); font-size:13px; font-style:italic;}
.team-tier-1 .team-card h3{font-size:22px; text-align:center;}
.team-tier-1 .team-card{text-align:center;}
.team-tier-1 .team-card .team-role{text-align:center;}
@media (max-width:760px){
  .team-tier, .team-tier-1, .team-tier-2, .team-tier-3{grid-template-columns:1fr 1fr; max-width:520px;}
}
@media (max-width:520px){
  .team-tier, .team-tier-1, .team-tier-2, .team-tier-3{grid-template-columns:1fr; max-width:340px;}
}

/* ---------- Misc ---------- */
.divider{height:1px; background:var(--line); margin:60px 0;}
.center{text-align:center;}
.small-print{font-size:12.5px; color:var(--gray-500);}
.notice-box{border:1px solid var(--line); background:var(--off-white); padding:18px 22px; font-size:13.5px; color:var(--gray-700);}
.placeholder-note{border:1px dashed var(--gray-300); background:#fbfbf9; padding:16px 20px; font-size:13px; color:var(--gray-500); font-style:italic;}
.legal-list{margin:14px 0 18px; padding:0; list-style:none;}
.legal-list li{padding-left:19px; position:relative; margin-bottom:9px; font-size:14.5px; line-height:1.6; color:var(--gray-700);}
.legal-list li::before{content:"–"; position:absolute; left:0; color:var(--surgical); font-weight:600;}
.legal-list li strong{color:var(--ink);}
.legal-table{width:100%; border-collapse:collapse; margin:16px 0 20px; font-size:13.5px;}
.legal-table th, .legal-table td{border:1px solid var(--line); padding:10px 14px; text-align:left; vertical-align:top; line-height:1.5;}
.legal-table th{background:var(--gray-100); font-family:var(--font-head); font-weight:500; font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--gray-700);}
.anchor-offset{scroll-margin-top:100px;}
.cat-nav{display:flex; flex-wrap:wrap; gap:10px; padding:22px 0; border-bottom:1px solid var(--line); margin-bottom:8px; position:sticky; top:84px; background:rgba(255,255,255,.95); backdrop-filter:blur(6px); z-index:10;}
.cat-nav a{font-size:12.5px; letter-spacing:.03em; padding:9px 15px; border:1px solid var(--line); color:var(--gray-700);}
.cat-nav a:hover{border-color:var(--surgical); color:var(--surgical);}

/* ---------- Lightbox ---------- */
.lightbox-overlay{
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(10,11,12,.94);
  align-items:center; justify-content:center;
  padding:40px;
}
.lightbox-overlay.open{display:flex;}
.lightbox-img-wrap{position:relative; display:inline-block; line-height:0; max-width:88vw; max-height:80vh;}
.lightbox-overlay .lightbox-img{display:block; max-width:88vw; max-height:80vh; width:auto; height:auto; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.5); background:#0a0b0c;}
/* watermark: centered over the enlarged photo, visible enough to discourage
   copying without blocking the view of the image itself. The drop-shadow
   keeps it legible whether the photo underneath is light or dark. */
.lightbox-watermark{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:66%; max-width:560px; min-width:220px;
  opacity:.34; pointer-events:none; user-select:none;
  filter:drop-shadow(0 2px 16px rgba(0,0,0,.65));
}
/* watermark on the case-gallery thumbnails themselves, not just the
   click-to-enlarge lightbox — so it's visible in the general grid view
   too. .compare/.case-triple figures and .case-card photo-cards already
   have position:relative + overflow:hidden, so a centered background
   image on the container itself does the job without any extra markup. */
.compare figure::after,
.case-triple figure::after,
.case-card .photo-card::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url('../assets/img/brand/logo-mark-white.png');
  background-repeat:no-repeat; background-position:center; background-size:72% auto;
  opacity:.55;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.75));
}
/* small brand watermark on selected homepage photos (perla/texturas/
   precisión) — a subtle decorative touch, so noticeably smaller and
   lighter than the casos-clinicos gallery watermark above, which needs to
   read clearly as evidence-protection rather than a brand flourish. */
.has-watermark{position:relative;}
.quote-split-full-photo.has-watermark::after,
.word-row-media.has-watermark::before{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url('../assets/img/brand/logo-mark-white.png');
  background-repeat:no-repeat; background-position:center; background-size:34% auto;
  opacity:.38;
  filter:drop-shadow(0 1px 8px rgba(0,0,0,.6));
}
/* the "Precisión" photo has a bright, busy area right at its center where
   the watermark disappeared — nudge it lower into the plainer part of
   that specific frame. Only this photo asked for the adjustment. */
.word-row-media.wm-lower::before{background-position:center 78%;}
.lightbox-overlay .lightbox-caption{position:absolute; bottom:28px; left:0; right:0; text-align:center; color:rgba(255,255,255,.8); font-size:13.5px; letter-spacing:.02em;}
.lightbox-overlay button{
  position:absolute; background:transparent; border:1px solid rgba(255,255,255,.35); color:var(--white);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s;
}
.lightbox-overlay button:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.7);}
.lightbox-close{top:22px; right:22px; width:42px; height:42px; font-size:22px; line-height:1;}
.lightbox-prev, .lightbox-next{top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:28px;}
.lightbox-prev{left:16px;}
.lightbox-next{right:16px;}
@media (max-width:640px){
  .lightbox-overlay{padding:16px;}
  .lightbox-prev, .lightbox-next{width:42px; height:42px; font-size:22px;}
  .lightbox-close{width:36px; height:36px; font-size:18px; top:12px; right:12px;}
  .lightbox-overlay .lightbox-caption{bottom:14px; font-size:12px;}
}

/* ---------- Course preview + gated slider (Formación) ---------- */
.course-preview{position:relative; max-width:760px; aspect-ratio:16/9; overflow:hidden; background:var(--charcoal); border:1px solid var(--line);}
.course-preview img{width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.55);}
.course-preview .course-open{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap;}

.course-warning-overlay, .course-slider-overlay{
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(10,11,12,.94);
  align-items:center; justify-content:center;
  padding:24px;
}
.course-warning-overlay.open, .course-slider-overlay.open{display:flex;}
.course-warning-box{max-width:460px; background:var(--white); padding:36px 32px; text-align:center;}
.course-warning-box h4{font-size:18px; margin:0 0 14px;}
.course-warning-box p{font-size:14.5px; color:var(--gray-700); margin:0 0 26px;}
.course-warning-box .warning-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

.course-slider-overlay .course-slide-img{max-width:88vw; max-height:82vh; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.5); background:#0a0b0c;}
.course-slider-overlay .course-counter{position:absolute; bottom:28px; left:0; right:0; text-align:center; color:rgba(255,255,255,.8); font-size:13.5px; letter-spacing:.02em;}
.course-slider-overlay button{
  position:absolute; background:transparent; border:1px solid rgba(255,255,255,.35); color:var(--white);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s;
}
.course-slider-overlay button:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.7);}
.course-slider-close{top:22px; right:22px; width:42px; height:42px; font-size:22px; line-height:1;}
.course-slider-prev, .course-slider-next{top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:28px;}
.course-slider-prev{left:16px;}
.course-slider-next{right:16px;}
@media (max-width:640px){
  .course-slider-overlay{padding:16px;}
  .course-slider-prev, .course-slider-next{width:42px; height:42px; font-size:22px;}
  .course-slider-close{width:36px; height:36px; font-size:18px; top:12px; right:12px;}
  .course-slider-overlay .course-counter{bottom:14px; font-size:12px;}
}

/* ---------- WhatsApp flotante ---------- */
.whatsapp-float{
  position:fixed; right:22px; bottom:22px; z-index:950;
  width:54px; height:54px; border-radius:50%;
  background:var(--surgical); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); transition:background .2s, transform .2s;
}
.whatsapp-float:hover{background:var(--charcoal); transform:translateY(-2px);}
.whatsapp-float svg{width:26px; height:26px; fill:var(--white);}
/* se eleva mientras el aviso de cookies está visible, para no taparlo */
body:has(.cookie-banner.visible) .whatsapp-float{bottom:106px;}
@media (max-width:640px){
  .whatsapp-float{right:16px; bottom:16px; width:50px; height:50px;}
  .whatsapp-float svg{width:24px; height:24px;}
  body:has(.cookie-banner.visible) .whatsapp-float{bottom:168px;}
}

/* ---------- Cookie consent ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:900;
  background:var(--charcoal); color:var(--white); border-top:1px solid rgba(255,255,255,.1);
  padding:22px 24px; transform:translateY(110%); transition:transform .4s ease;
}
.cookie-banner.visible{transform:translateY(0);}
.cookie-banner-inner{
  max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:32px; flex-wrap:wrap;
}
.cookie-banner p{font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.82); margin:0; flex:1 1 380px;}
.cookie-banner p a{color:var(--white); text-decoration:underline; text-underline-offset:2px;}
.cookie-banner-actions{display:flex; gap:10px; flex-wrap:wrap; flex:0 0 auto;}
.cookie-banner .btn{border-color:rgba(255,255,255,.4); color:var(--white); padding:11px 18px; font-size:12.5px;}
.cookie-banner .btn:hover{background:var(--white); color:var(--charcoal);}
.cookie-banner .btn-solid{background:var(--white); color:var(--charcoal);}
.cookie-banner .btn-solid:hover{background:var(--surgical); color:var(--white); border-color:var(--surgical);}

.cookie-modal{
  position:fixed; inset:0; z-index:901; display:flex; align-items:center; justify-content:center;
  background:rgba(20,21,20,.55); padding:20px;
}
.cookie-modal[hidden]{display:none;}
.cookie-modal-card{
  background:var(--white); max-width:460px; width:100%; padding:32px; border:1px solid var(--line);
  max-height:86vh; overflow-y:auto;
}
.cookie-modal-card h3{font-family:var(--font-head); font-size:19px; margin:0 0 6px;}
.cookie-modal-card > p.intro{font-size:13px; color:var(--gray-700); margin:0 0 22px; line-height:1.55;}
.cookie-cat{padding:16px 0; border-top:1px solid var(--line);}
.cookie-cat:first-of-type{border-top:none;}
.cookie-cat-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px;}
.cookie-cat-head > span:first-child{font-weight:600; font-size:14.5px;}
.cookie-cat-status{font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--gray-500);}
.cookie-cat p{font-size:12.8px; color:var(--gray-700); margin:0; line-height:1.55;}
.cookie-modal-actions{margin-top:22px; display:flex; justify-content:flex-end;}
.switch{position:relative; display:inline-block; width:38px; height:22px; flex:none;}
.switch input{opacity:0; width:0; height:0;}
.switch-track{
  position:absolute; inset:0; background:var(--gray-300); cursor:pointer; transition:background .2s; border-radius:100px;
}
.switch-track::before{
  content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; background:var(--white);
  transition:transform .2s; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.switch input:checked + .switch-track{background:var(--surgical);}
.switch input:checked + .switch-track::before{transform:translateX(16px);}

@media (max-width:640px){
  .cookie-banner{padding:18px 16px;}
  .cookie-banner-inner{gap:16px;}
  .cookie-banner-actions{width:100%;}
  .cookie-banner-actions .btn{flex:1;}
}