/* =========================================================
   BioClinique — sistema de diseño
   Paleta extraída del logo real (no colores genéricos):
   - Verde salvia profundo (hojas)      #1E7368
   - Verde casi negro (texto)           #1B2723
   - Rojo ladrillo (cruz)               #B23A2E
   - Fondo cálido neutro                #F6F4EE
   - Salvia muy pálido (secciones)      #E9EEE6
   Tipografía: Fraunces (serif con carácter, para titulares)
               Work Sans (sans neutra, para texto y UI)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --teal:#1E7368;
  --teal-dark:#134D45;
  --ink:#1B2723;
  --brick:#B23A2E;
  --brick-dark:#8E2C22;
  --bg:#F6F4EE;
  --bg-soft:#E9EEE6;
  --paper:#FFFFFF;
  --line:#D8D3C4;
  --muted:#5B6660;
  --radius:2px;
  --serif:'Fraunces', Georgia, serif;
  --sans:'Work Sans', -apple-system, sans-serif;
  --maxw:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

h1,h2,h3{font-family:var(--serif); font-weight:500; line-height:1.15; margin:0 0 .4em;}
h1{font-size:clamp(2.1rem,4vw,3.4rem); font-weight:600;}
h2{font-size:clamp(1.6rem,2.6vw,2.2rem);}
h3{font-size:1.25rem;}
p{max-width:64ch;}
.lede{font-size:1.15rem; color:var(--muted);}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40; background:rgba(246,244,238,.92);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; gap:24px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{height:44px; width:auto;}
.brand span{font-family:var(--serif); font-size:1.15rem; color:var(--teal-dark); font-weight:600;}
nav.main-nav{display:flex; gap:26px; align-items:center;}
nav.main-nav a{text-decoration:none; font-size:.95rem; color:var(--ink); border-bottom:2px solid transparent; padding-bottom:2px;}
nav.main-nav a:hover, nav.main-nav a.active{border-color:var(--brick); color:var(--brick-dark);}
.lang-switch{display:flex; gap:6px; margin-left:10px;}
.lang-switch a{
  font-size:.78rem; text-decoration:none; padding:4px 8px; border:1px solid var(--line);
  color:var(--muted); text-transform:uppercase; letter-spacing:.02em;
}
.lang-switch a.active{background:var(--teal); border-color:var(--teal); color:#fff;}
.nav-toggle{display:none;}

/* ---------- hero ---------- */
.hero{padding:64px 0 76px; border-bottom:1px solid var(--line);}
.hero .wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:56px; align-items:center;}
.hero-logo img{max-width:340px; width:100%; margin:0 auto;}
.hero-copy{max-width:760px;}
.spec-photo{display:block; width:100%; max-width:480px; border-radius:2px; margin:24px 0;}
.hero-copy .eyebrow{color:var(--brick); font-family:var(--serif); font-style:italic; font-size:1.05rem; margin-bottom:10px; display:block;}
.hero-photo{position:relative;}
.hero-photo img{border-radius:var(--radius); box-shadow:0 18px 40px -18px rgba(27,39,35,.35);}
.hero-photo::before{
  content:""; position:absolute; inset:18px -18px -18px 18px; border:1px solid var(--brick);
  z-index:-1;
}
.btn{
  display:inline-block; background:var(--teal); color:#fff; text-decoration:none;
  padding:13px 26px; font-size:.95rem; font-weight:500; border:1px solid var(--teal);
  border-radius:var(--radius); margin-top:22px; transition:background .15s, color .15s;
}
.btn:hover{background:var(--teal-dark); border-color:var(--teal-dark);}
.btn.outline{background:transparent; color:var(--teal-dark); border-color:var(--teal-dark);}
.btn.outline:hover{background:var(--teal-dark); color:#fff;}
.btn.brick{background:var(--brick); border-color:var(--brick);}
.btn.brick:hover{background:var(--brick-dark); border-color:var(--brick-dark);}

/* ---------- sections ---------- */
section{padding:64px 0;}
section.soft{background:var(--bg-soft);}
.section-head{max-width:640px; margin-bottom:40px;}

/* ---------- specialty cards ---------- */
.grid-specialties{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px;}
.card-specialty{background:var(--paper); border:1px solid var(--line); padding:30px 26px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:10px;}
.card-specialty .num{font-family:var(--serif); font-size:.85rem; color:var(--brick);}
.card-specialty h3{margin:0;}
.card-specialty p{margin:0; font-size:.92rem; color:var(--muted);}
.card-specialty .go{margin-top:auto; font-size:.85rem; color:var(--teal-dark); font-weight:500;}

/* ---------- finder ---------- */
.finder-form{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
.finder-form button{
  font-family:var(--sans); font-size:.92rem; padding:10px 18px; background:var(--paper);
  border:1px solid var(--line); cursor:pointer; border-radius:var(--radius); text-align:left;
}
.finder-form button:hover, .finder-form button.selected{border-color:var(--teal); color:var(--teal-dark);}
.finder-result{margin-top:36px; padding:26px; background:var(--paper); border-left:4px solid var(--brick); display:none;}
.finder-result.show{display:block;}

/* ---------- reviews ---------- */
.review-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; margin-top:10px;}
.review-card{background:var(--paper); border:1px solid var(--line); padding:24px; border-radius:var(--radius);}
.stars{color:var(--brick); letter-spacing:2px; font-size:.95rem;}
.review-card .who{margin-top:14px; font-size:.85rem; color:var(--muted);}
.review-form{background:var(--paper); border:1px solid var(--line); padding:32px; margin-top:44px; max-width:640px;}
.review-form label{display:block; font-size:.88rem; margin:16px 0 6px; color:var(--muted);}
.review-form input, .review-form textarea, .review-form select{
  width:100%; padding:11px 12px; border:1px solid var(--line); font-family:var(--sans); font-size:.95rem;
  border-radius:var(--radius); background:var(--bg);
}
.review-form textarea{min-height:120px; resize:vertical;}
.notice{margin-top:16px; padding:14px 16px; background:var(--bg-soft); border-left:3px solid var(--teal); font-size:.9rem;}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line); margin-top:10px;}
.contact-card{background:var(--paper); padding:30px;}
.contact-card h3{color:var(--teal-dark);}
.contact-card .addr{font-size:1.02rem; margin:12px 0;}
.contact-card a.tel{color:var(--brick-dark); text-decoration:none; font-weight:500;}
.map-embed{margin-top:14px; border:0; width:100%; height:220px; filter:grayscale(.15);}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:36px 0; font-size:.85rem; color:var(--muted);}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}

/* ---------- specialty detail ---------- */
.specialty-detail .wrap{max-width:760px;}
.specialty-detail .back{font-size:.9rem; color:var(--teal-dark); text-decoration:none; display:inline-block; margin-bottom:18px;}
.disclaimer{margin-top:30px; padding:16px 18px; background:var(--bg-soft); border-left:3px solid var(--brick); font-size:.88rem; color:var(--muted);}

/* ---------- responsive ---------- */
@media (max-width:860px){
  nav.main-nav{position:fixed; inset:64px 0 0 0; background:var(--bg); flex-direction:column; align-items:flex-start; padding:24px 28px; gap:18px; display:none; border-top:1px solid var(--line);}
  nav.main-nav.open{display:flex;}
  .nav-toggle{display:block; background:none; border:0; font-size:1.6rem; cursor:pointer; color:var(--ink);}
  .hero .wrap{grid-template-columns:1fr;}
  .hero-photo{order:-1;}
  .contact-grid{grid-template-columns:1fr;}
}

:focus-visible{outline:2px solid var(--brick); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

/* color y vistosidad */
.hero{background:linear-gradient(135deg,var(--teal-dark),var(--teal)); border:0; color:#fff;}
.hero h1{color:#fff;} .hero .lede{color:#e6f0ee;} .hero .eyebrow{color:#ffd9d3;}
.hero .btn.brick{background:#fff; color:var(--brick-dark); border-color:#fff;}
.hero-logo{background:#fff; padding:30px; border-radius:2px; text-align:center;}
.hero-logo img{max-width:300px;} .hero-img{width:100%; max-height:480px; object-fit:cover; border-radius:2px; box-shadow:0 18px 40px -18px rgba(0,0,0,.5);}
.card-specialty{border-top:4px solid var(--teal);} .card-specialty:nth-child(even){border-top-color:var(--brick);}
.card-specialty:hover{box-shadow:0 10px 24px -14px rgba(27,39,35,.45);}
footer{background:var(--ink); color:#cfd8d4; border:0;}
.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px;}
.pillar{background:#fff; border:1px solid var(--line); border-top:4px solid var(--teal); padding:28px 24px;}
.pillar:nth-child(2){border-top-color:var(--brick);} .pillar h3{margin:12px 0 6px;} .pillar p{margin:0; color:var(--muted); font-size:.95rem;}
.ico{display:inline-flex; width:48px; height:48px; align-items:center; justify-content:center; border-radius:50%; background:var(--bg-soft); color:var(--teal-dark);} .ico svg{width:26px; height:26px;}
.num{display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:50%; background:var(--brick); color:#fff; font-family:var(--serif); font-size:1.3rem;}
.chips{display:flex; flex-wrap:wrap; gap:10px;} .chip{background:#fff; border:1px solid var(--teal); color:var(--teal-dark); padding:10px 18px; border-radius:30px; text-decoration:none; font-size:.95rem;} .chip:hover{background:var(--teal); color:#fff;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.band-img{width:100%; max-height:460px; object-fit:cover; border-radius:2px; box-shadow:0 18px 40px -20px rgba(27,39,35,.5);}
.band-dark{background:linear-gradient(135deg,#10203a,#1b2d4f); color:#fff;} .band-dark h2{color:#fff;} .band-dark .lede{color:#cdd8ea;}
.book-img{width:100%; max-width:300px; margin:0 auto; border-radius:2px; box-shadow:0 22px 44px -16px rgba(0,0,0,.7);}
@media (max-width:860px){.two-col{grid-template-columns:1fr;}}

/* Identidad: verde bosque, marfil, dorado champán, antracita, salvia */
:root{--teal:#1F4D3F; --teal-dark:#12382F; --ink:#2B2F2E; --brick:#9A7B3C; --brick-dark:#7E6329; --bg:#FAF7F0; --bg-soft:#E9EFE8; --line:#DDD6C5; --muted:#5B615E; --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',-apple-system,sans-serif;}
h1{font-weight:600; font-size:clamp(2.6rem,5vw,4.2rem);} h2{font-weight:600; font-size:clamp(2rem,3.2vw,2.8rem);} h3{font-weight:600; font-size:1.5rem;}
.section-head h2::after{content:""; display:block; width:56px; height:2px; background:var(--brick); margin-top:14px;}
.hero{background:linear-gradient(135deg,#0F2F27,#1F4D3F);}
.hero .eyebrow{font-family:var(--sans); font-style:normal; letter-spacing:.2em; font-size:.78rem; color:#D9C28F; display:inline-block; margin-right:14px;}
.hero .tag{display:inline-block; border:1px solid #C9AE72; color:#F3E7C9; padding:3px 12px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;}
.hero .lede{color:#E8EFEA;} .hero .btn.brick{background:#C9AE72; color:#12382F; border-color:#C9AE72;} .hero .btn.outline{color:#fff; border-color:#C9AE72; margin-left:8px;}
.hero-note{color:#C8D6CE; font-size:.95rem; border-left:2px solid #C9AE72; padding-left:14px; margin-top:26px;}
.band-dark{background:linear-gradient(135deg,#0F2F27,#1F4D3F);} .band-dark .lede{color:#DCE7E0;}
.pro-name{font-family:var(--serif); font-size:1.7rem; font-weight:600; margin:6px 0 0;} .pro-role{color:var(--brick-dark); letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; margin:0 0 14px;}
nav.main-nav a.btn{margin:0; padding:9px 18px; color:#fff; border-bottom:1px solid var(--teal);}
footer{background:#2B2F2E; color:#C9D1CD; padding:46px 0 24px;} footer a{color:#E5EAE7; text-decoration:none; margin-right:20px;}
.foot{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;} .foot-logo{display:inline-block; background:#fff; padding:8px 14px; border-radius:2px;}
.foot-note{max-width:520px; font-size:.88rem; margin-top:14px;} .foot-links{display:flex; flex-wrap:wrap; align-content:start; gap:6px 0;} .foot-copy{margin-top:30px; padding-top:18px; border-top:1px solid #4A504D; font-size:.82rem;}