/* ==========================================================================
   Dr. Olaf Bautista — Cirugía general y laparoscópica · Puebla
   Paleta del logotipo: azul petróleo, azul cielo y amarillo (arco). Neutros: blanco.
   Titulares: Sora (sin remates). Texto: Montserrat (la del logo).
   Firma geométrica: arco/círculo en fotos y fondos; esquinas redondeadas.
   ========================================================================== */

:root{
  --petroleo:#075063;
  --petroleo-900:#053847;
  --petroleo-rgb:7,80,99;
  --petroleo-900-rgb:5,56,71;
  --cielo:#9CCBE8;
  --cielo-claro:#EAF4FA;
  --oro:#FDB515;
  --oro-oscuro:#E29F00;
  --oro-rgb:253,181,21;
  --blanco:#fff;
  --ink:#0F2D38;
  --muted:#4A6672;
  --line:#D6E4EB;

  --acento:var(--oro);
  --acento-oscuro:var(--oro-oscuro);
  --acento-contraste:#fff;
  --btn-radius:999px;
  --btn-font-size:.98rem;

  --header-h:80px;
  --header-bg:#fff;
  --header-text:var(--petroleo-900);

  --radius:22px;
  --radius-lg:34px;
  --shadow-card:0 1px 2px rgba(var(--petroleo-900-rgb),.06), 0 14px 38px -12px rgba(var(--petroleo-900-rgb),.20);
  --f-display:'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Arco dorado del logo (media luna) como recurso decorativo reutilizable */
  --arc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cmask id='m'%3E%3Crect width='200' height='200' fill='white'/%3E%3Ccircle cx='113' cy='88' r='86' fill='black'/%3E%3C/mask%3E%3Ccircle cx='100' cy='100' r='94' fill='%23FDB515' mask='url(%23m)'/%3E%3C/svg%3E");
  color-scheme:light only;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--f-body); font-size:1rem; line-height:1.65;
  color:var(--ink); background:var(--blanco); -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.14; color:var(--petroleo-900); margin:0 0 .5em; letter-spacing:-.02em; }
h1{ font-size:clamp(2.05rem, 1.25rem + 3vw, 3.55rem); }
h2{ font-size:clamp(1.7rem, 1.2rem + 1.75vw, 2.5rem); }
h3{ font-size:clamp(1.08rem, 1rem + .45vw, 1.3rem); font-weight:600; letter-spacing:-.01em; }
h4{ font-size:1rem; font-weight:600; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
.wrap{ width:min(1180px, 100% - 40px); margin-inline:auto; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible{ outline:2.5px solid var(--petroleo); outline-offset:3px; }

/* ---------- Íconos (máscara, recoloreables) ---------- */
.ico{
  display:inline-block; width:1.2em; height:1.2em; flex:none; background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat;
}

/* ---------- Tipografía de apoyo ---------- */
.eyebrow{
  display:block; font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--petroleo); margin-bottom:.9em;
}
.lede{ font-size:clamp(1.02rem, .98rem + .25vw, 1.15rem); color:var(--muted); max-width:56ch; }
.section-head{ max-width:760px; margin-bottom:clamp(30px, 4vw, 54px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .lede{ margin-inline:auto; }

/* ---------- Secciones (blanco · azul claro del logo · petróleo) ---------- */
.section{ padding:clamp(60px, 8vw, 108px) 0; position:relative; }
.bg-cielo{ background:var(--cielo-claro); }
.bg-oscuro{ background:var(--petroleo); color:rgba(255,255,255,.88); overflow:hidden; }
.bg-oscuro h1,.bg-oscuro h2,.bg-oscuro h3,.bg-oscuro h4{ color:#fff; }
.bg-oscuro .eyebrow{ color:var(--oro); }
.bg-oscuro .lede{ color:rgba(255,255,255,.82); }
.bg-oscuro a:focus-visible{ outline-color:#fff; }
.arc-bg::before{
  content:""; position:absolute; width:min(620px, 90vw); aspect-ratio:1; right:-170px; top:-120px;
  background:var(--arc) center/contain no-repeat; opacity:.14; pointer-events:none;
}

/* ---------- Botones: pastilla, mismo set de clases en todo el sitio ---------- */
.btn{ font-family:var(--f-body); letter-spacing:.01em; }
.btn .ico{ width:1.15em; height:1.15em; }
.btn-whatsapp{ color:#fff; }
.btn-whatsapp .ico{ background:#fff; }
.btn-call, .phone-link, .btn-whatsapp{ font-weight:700; text-shadow:0 1px 2px rgba(var(--petroleo-900-rgb),.35); }
.phone-link{ color:var(--acento-contraste); }
.btn-primary{ background:var(--petroleo); color:#fff; box-shadow:var(--btn-shadow); }
.btn-primary:hover{ background:var(--petroleo-900); }
.btn-ghost{
  background:transparent; color:var(--petroleo-900); border:1.6px solid rgba(var(--petroleo-900-rgb),.35); box-shadow:none;
}
.btn-ghost:hover{ background:rgba(var(--petroleo-900-rgb),.06); box-shadow:none; }
.bg-oscuro .btn-primary{ background:var(--oro); color:#fff; text-shadow:0 1px 2px rgba(var(--petroleo-900-rgb),.35); font-weight:700; }
.bg-oscuro .btn-ghost, .on-dark .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.55); }
.bg-oscuro .btn-ghost:hover, .on-dark .btn-ghost:hover{ background:rgba(255,255,255,.1); }
.btn-arrow .ico{ transition:transform .3s var(--ease-3, ease); }
.btn-arrow:hover .ico:last-child{ transform:translateX(5px); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- Plataformas y redes: círculo blanco con ícono (una sola forma en todo el sitio) ---------- */
.plats{ display:flex; flex-wrap:wrap; gap:10px; }
.plat{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:#fff; border:1px solid var(--line); text-decoration:none;
  box-shadow:0 4px 12px -6px rgba(var(--petroleo-900-rgb),.45); transition:transform .25s var(--ease-3, ease), box-shadow .25s ease;
}
.plat:hover{ transform:translateY(-3px); box-shadow:0 12px 20px -10px rgba(var(--petroleo-900-rgb),.55); }
.plat-ico{ display:grid; place-items:center; }
.plat-ico img{ width:22px; height:22px; object-fit:contain; }
.plat-ico .ico{ width:20px; height:20px; color:var(--petroleo); }
.on-dark .plat, .bg-oscuro .plat, .site-footer .plat{ border-color:transparent; }

/* ---------- Header ---------- */
.site-header{ border-bottom:1px solid transparent; }
.site-header.is-scrolled{ box-shadow:0 8px 28px -14px rgba(var(--petroleo-900-rgb),.35); border-bottom-color:var(--line); }
.site-header .wrap{ gap:clamp(12px, 2vw, 28px); }

/* Inicio: menú sobre el hero, transparente al inicio y de vidrio blanco al hacer scroll */
.site-header--over{ position:fixed; top:0; left:0; right:0; background:transparent; color:#fff; }
.site-header--over .brand-logo.logo-white{ display:block; }
.site-header--over .brand-logo.logo-color{ display:none; }
.site-header--over.is-scrolled .brand-logo.logo-white{ display:none; }
.site-header--over.is-scrolled .brand-logo.logo-color{ display:block; }
.site-header--over .main-nav > a, .site-header--over .nav-item > a{ color:#fff; text-shadow:0 1px 10px rgba(var(--petroleo-900-rgb),.45); }
.site-header--over .nav-toggle{ color:#fff; }
.site-header--over.is-scrolled{
  background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(18px) saturate(1.7); backdrop-filter:blur(18px) saturate(1.7);
  border-bottom-color:rgba(255,255,255,.65); box-shadow:0 10px 34px -14px rgba(var(--petroleo-900-rgb),.35), inset 0 -1px 0 rgba(255,255,255,.55);
}
.site-header--over.is-scrolled .main-nav > a, .site-header--over.is-scrolled .nav-item > a{ color:var(--petroleo-900); text-shadow:none; }
.site-header--over.is-scrolled .nav-toggle{ color:var(--petroleo-900); }
@media (max-width:1060px){
  .site-header--over .main-nav > a, .site-header--over .nav-item > a, .site-header--over.is-scrolled .main-nav > a, .site-header--over.is-scrolled .nav-item > a{ color:#fff; text-shadow:none; }
  .site-header--over .nav-toggle[aria-expanded="true"]{ color:#fff; }
}
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand-logo{ height:58px; width:auto; flex-shrink:0; }
.main-nav{ display:flex; align-items:center; gap:clamp(14px, 2.2vw, 34px); margin-left:auto; }
.main-nav > a, .nav-item > a{
  position:relative; font-weight:600; font-size:.92rem; text-decoration:none; color:var(--header-text); padding:8px 2px; display:inline-flex; align-items:center; gap:6px;
}
.main-nav > a::after, .nav-item > a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; background:var(--oro); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-3, ease);
}
.main-nav > a:hover::after, .nav-item:hover > a::after, .main-nav a[aria-current="page"]::after, .nav-item > a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-item{ position:relative; }
.nav-item > a .ico{ width:.9em; height:.9em; transition:transform .25s ease; }
.nav-item:hover > a .ico, .nav-item:focus-within > a .ico{ transform:rotate(180deg); }
.dropdown{
  position:absolute; top:100%; left:-18px; min-width:290px; padding:10px; margin-top:6px; background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow-card); border:1px solid var(--line);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{ opacity:1; visibility:visible; transform:none; }
.dropdown a{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:14px; text-decoration:none; font-weight:600; font-size:.9rem; color:var(--petroleo-900); }
.dropdown a:hover{ background:var(--cielo-claro); }
.dropdown .ico{ width:20px; height:20px; color:var(--petroleo); }
.header-cta{ display:inline-flex; }
.nav-toggle{ display:none; background:transparent; border:0; cursor:pointer; color:var(--petroleo-900); margin-left:auto; align-items:center; justify-content:center; border-radius:50%; }
.nav-toggle .ico{ width:28px; height:28px; }
.nav-mobile-cta{ display:none !important; }

@media (max-width:1060px){
  .header-cta{ display:none; }
  .nav-toggle{ display:inline-flex; z-index:96; position:relative; }
  .main-nav{
    position:fixed; inset:0; z-index:95; margin:0; background:var(--petroleo-900); flex-direction:column; justify-content:center; align-items:center; gap:6px;
    opacity:0; visibility:hidden; transform:scale(1.04); transition:opacity .3s ease, transform .35s var(--ease-3, ease), visibility .3s;
    padding:90px 24px 40px; overflow-y:auto;
  }
  .main-nav.is-open{ opacity:1; visibility:visible; transform:none; color:#fff; }
  .main-nav > a, .nav-item > a{ color:#fff; font-family:var(--f-display); font-size:1.55rem; font-weight:700; }
  .main-nav > a::after, .nav-item > a::after{ display:none; }
  .nav-item > a .ico{ display:none; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; background:transparent; border:0; box-shadow:none; padding:4px 0 8px; margin:0; min-width:0; text-align:center; }
  .dropdown a{ justify-content:center; color:rgba(255,255,255,.82); font-size:1rem; padding:6px; }
  .dropdown a:hover{ background:transparent; color:var(--oro); }
  .dropdown .ico{ display:none; }
  .nav-toggle[aria-expanded="true"]{ color:#fff; }
  .nav-mobile-cta{ display:inline-flex !important; margin-top:18px; }
}
body.menu-open{ overflow:hidden; }

/* ---------- Hero oscuro con foto de quirófano ---------- */
.hero{
  position:relative; overflow:hidden; background:var(--petroleo-900); color:#fff; isolation:isolate;
  height:100svh; min-height:640px; max-height:920px; display:flex; align-items:center; padding-top:var(--header-h);
}
.hero-bg{ position:absolute; top:0; bottom:0; left:18%; width:78%; height:100%; object-fit:cover; object-position:62% 8%; z-index:-3; -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 24%, #000 66%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0%, #000 24%, #000 66%, transparent 100%); }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg, rgba(var(--petroleo-900-rgb),.62) 0, rgba(var(--petroleo-900-rgb),0) 180px), linear-gradient(270deg, rgba(var(--petroleo-900-rgb),1) 0%, rgba(var(--petroleo-900-rgb),.92) 9%, rgba(var(--petroleo-900-rgb),0) 30%), linear-gradient(96deg, rgba(var(--petroleo-900-rgb),.97) 0%, rgba(var(--petroleo-900-rgb),.88) 34%, rgba(var(--petroleo-rgb),.35) 66%, rgba(var(--petroleo-rgb),.08) 100%);
}
.hero::after{
  content:""; position:absolute; width:min(640px, 70vw); aspect-ratio:1; left:-14%; bottom:-42%; z-index:-1; background:var(--arc) center/contain no-repeat; opacity:.3; transform:rotate(-8deg); pointer-events:none;
}
.hero-grid{ position:relative; }
.hero-copy{ max-width:640px; }
.hero .doctor-name{ display:block; font-weight:700; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--oro); margin-bottom:1em; }
.hero h1{ color:#fff; margin-bottom:.4em; }
.hero h1 em{ font-style:normal; color:var(--oro); }
.hero .lede{ color:rgba(255,255,255,.86); margin-bottom:1.3em; }
.rating-stack{ display:grid; gap:8px; margin-bottom:1.5em; justify-items:start; }
.stars{ display:inline-flex; gap:3px; color:var(--star-yellow); }
.stars .ico{ width:20px; height:20px; }
.rating-stack p{ margin:0; font-size:.9rem; font-weight:600; color:#fff; }
.hero-badge{
  position:absolute; right:clamp(88px, 8vw, 120px); bottom:clamp(20px, 4vh, 44px); display:flex; align-items:center; gap:12px; padding:12px 20px 12px 12px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(10px); border-radius:999px; max-width:320px; color:#fff;
}
.hero-badge .ico-wrap{ width:42px; height:42px; border-radius:50%; background:var(--oro); display:grid; place-items:center; flex:none; color:var(--petroleo-900); }
.hero-badge strong{ display:block; font-size:.85rem; line-height:1.2; }
.hero-badge span{ font-size:.74rem; line-height:1.25; display:block; opacity:.85; }
.avatar-mobile{ display:none; }

@media (max-width:860px){
  .hero{ height:auto; min-height:0; max-height:none; padding:calc(var(--header-h) + 22px) 0 34px; }
  .hero::before{ background:linear-gradient(180deg, rgba(var(--petroleo-900-rgb),.88) 0%, rgba(var(--petroleo-900-rgb),.94) 100%); }
  .hero-bg{ left:0; width:100%; object-position:68% 30%; -webkit-mask-image:none; mask-image:none; }
  .hero-grid{ text-align:center; }
  .hero-copy{ margin-inline:auto; }
  .hero-badge{ display:none; }
  .avatar-mobile{ display:block; position:relative; width:112px; height:112px; margin:0 auto 18px; }
  .avatar-mobile::before{ content:""; position:absolute; inset:-12px; background:var(--arc) center/contain no-repeat; transform:rotate(150deg); }
  .avatar-mobile img{ position:relative; width:112px; height:112px; border-radius:50%; object-fit:cover; object-position:50% 14%; border:3px solid #fff; box-shadow:var(--shadow-card); }
  .hero .lede{ margin-inline:auto; }
  .rating-stack{ justify-items:center; }
  .rating-stack .plats{ justify-content:center; }
  .hero .btn-row{ justify-content:center; }
}
@media (max-width:860px) and (max-height:700px){ .hero .lede{ display:none; } }

/* ---------- Valoración ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px, 6vw, 84px); align-items:center; }
.split.stretch{ align-items:stretch; }
.photo-frame{ position:relative; }
.photo-frame.tall{ display:flex; }
.photo-frame.tall > img{ height:100%; min-height:460px; aspect-ratio:auto; }
.photo-frame > img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); object-fit:cover; }
.photo-frame .arc-deco{ position:absolute; width:56%; aspect-ratio:1; left:-14%; bottom:-16%; background:var(--arc) center/contain no-repeat; z-index:-1; transform:rotate(-20deg); }
.float-card{
  position:absolute; right:-6%; bottom:-8%; background:#fff; border-radius:var(--radius); padding:18px 22px; box-shadow:var(--shadow-card); max-width:270px; z-index:2;
}
.float-card h4{ font-family:var(--f-body); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--petroleo); margin-bottom:.55em; display:flex; align-items:center; gap:8px; }
.float-card dl{ margin:0; display:grid; gap:4px; font-size:.86rem; }
.float-card dt{ font-weight:700; color:var(--petroleo-900); }
.float-card dd{ margin:0 0 6px; color:var(--muted); }
.check-list{ display:grid; gap:12px; margin:0 0 1.6em; --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23053847' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.check-list li{ display:flex; gap:12px; align-items:flex-start; }
.check-list li::before{ content:""; flex:none; width:24px; height:24px; margin-top:1px; border-radius:50%; background:var(--check) center/14px no-repeat, var(--oro); }
.note-card{ background:var(--cielo-claro); border-radius:var(--radius); padding:20px 22px; margin-bottom:1.6em; border-left:4px solid var(--oro); }
.note-card p{ margin:0 0 .6em; font-size:.94rem; }
.note-card p:last-child{ margin:0; }
.note-card strong{ color:var(--petroleo-900); }

/* ---------- Líneas de servicio: tarjetas con foto, toda la información visible ---------- */
.panels{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
.panel{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; color:#fff; isolation:isolate; min-height:430px; display:flex; flex-direction:column; justify-content:space-between; padding:30px 34px 32px;
  background:var(--petroleo-900); box-shadow:var(--shadow-card);
}
.panel::after{ content:""; position:absolute; inset:0; z-index:-2; background:var(--img) center/cover no-repeat; transition:transform .9s var(--ease-3, cubic-bezier(.2,.8,.2,1)); }
.panel:hover::after{ transform:scale(1.07); }
.panel::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(var(--petroleo-900-rgb),.2) 0%, rgba(var(--petroleo-900-rgb),.78) 42%, rgba(var(--petroleo-900-rgb),.96) 100%); }
.panel-num{ font-family:var(--f-display); font-weight:700; font-size:1rem; color:var(--oro); letter-spacing:.06em; }
.panel-title{ font-family:var(--f-display); font-weight:700; font-size:1.45rem; line-height:1.15; letter-spacing:-.01em; color:#fff; margin:0 0 .5em; }
.panel-body p{ margin:0 0 1em; font-size:.93rem; color:rgba(255,255,255,.92); }
.panel-body ul{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 1.2em; }
.panel-body li{ padding:6px 13px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); font-size:.79rem; font-weight:600; }
.panel .btn{ background:none; box-shadow:none; color:var(--oro); text-shadow:none; padding-left:0; padding-right:0; font-weight:700; }
.panel .btn:hover{ background:none; box-shadow:none; transform:none; color:#fff; }
.panel .btn .ico{ background:currentColor; }
.also{ margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; font-size:.9rem; }
.also strong{ color:var(--petroleo-900); margin-right:4px; }
.pill{ display:inline-flex; padding:7px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:.84rem; font-weight:600; color:var(--petroleo-900); }

/* ---------- Tabs (qué es la cirugía) ---------- */
.tabs-nav{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.tabs-nav button{
  font:600 .88rem var(--f-body); padding:10px 18px; border-radius:999px; border:1.5px solid rgba(var(--petroleo-rgb),.25); background:transparent; color:var(--petroleo-900); cursor:pointer; min-height:44px; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.tabs-nav button:hover{ border-color:var(--petroleo); }
.tabs-nav button[aria-selected="true"]{ background:var(--petroleo); border-color:var(--petroleo); color:#fff; }
[role="tabpanel"][hidden]{ display:none; }
[role="tabpanel"] .check-list{ grid-template-columns:1fr 1fr; gap:12px 22px; margin:0; }
[role="tabpanel"] .check-list li{ font-size:.94rem; }

/* ---------- Por qué elegirlo ---------- */
.why-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px, 6vw, 80px); align-items:center; position:relative; }
.why-cards{ display:grid; gap:16px; }
.why-card{ display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius); padding:24px 26px; }
.why-card .num{ font-family:var(--f-display); font-weight:700; font-size:2.6rem; line-height:1; color:var(--oro); min-width:2ch; }
.stats{ display:grid; grid-template-columns:repeat(4, 1fr); margin-top:clamp(40px, 5vw, 72px); padding-top:clamp(28px, 4vw, 44px); border-top:1px solid rgba(255,255,255,.2); }
.stat{ padding:0 24px; border-left:1px solid rgba(255,255,255,.2); }
.stat:first-child{ padding-left:0; border-left:0; }
.stat b{ font-variant-numeric:tabular-nums; display:block; font-family:var(--f-display); font-weight:700; font-size:clamp(2.7rem, 2rem + 2.6vw, 3.9rem); line-height:1; color:var(--oro); margin-bottom:.25em; letter-spacing:-.02em; }
.stat span{ font-size:.9rem; color:rgba(255,255,255,.84); line-height:1.4; display:block; }
.why-card h3{ margin:0 0 .3em; font-size:1.12rem; }
.why-card p{ margin:0; font-size:.94rem; color:rgba(255,255,255,.82); }

/* ---------- Doctor ---------- */
.doctor-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px, 6vw, 80px); align-items:center; }
.avatar-ring{ position:relative; width:min(100%, 420px); margin-inline:auto; }
.avatar-ring::before{ content:""; position:absolute; left:-14%; bottom:-9%; width:64%; aspect-ratio:1; background:var(--arc) center/contain no-repeat; transform:rotate(-20deg); }
.avatar-ring > img{ position:relative; width:100%; height:auto; aspect-ratio:3/4.7; object-fit:cover; object-position:50% 8%; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.rating-card{ position:absolute; right:-14%; bottom:12%; z-index:2; background:#fff; border-radius:var(--radius); padding:16px 20px 18px; box-shadow:var(--shadow-card); display:grid; gap:8px; justify-items:start; max-width:240px; }
.rating-card p{ margin:0; font-size:.82rem; font-weight:700; color:var(--petroleo-900); line-height:1.3; }
.rating-card .stars .ico{ width:18px; height:18px; }
.rating-card .plats{ gap:12px; }
.rating-card .plat{ width:auto; height:auto; background:none; border:0; box-shadow:none; }
.rating-card .plat:hover{ box-shadow:none; transform:translateY(-2px); }
.rating-card .plat-ico img{ width:20px; height:20px; }
.rating-card .plat-ico .ico{ width:19px; height:19px; }
@media (max-width:1100px){ .rating-card{ right:12px; bottom:14px; } }
.cedulas{ display:flex; flex-wrap:wrap; gap:6px 34px; margin:1.4em 0; padding:16px 0; border-top:1px solid rgba(var(--petroleo-rgb),.2); border-bottom:1px solid rgba(var(--petroleo-rgb),.2); font-size:.9rem; }
.cedulas div span{ display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.cedulas div strong{ font-weight:700; color:var(--petroleo-900); font-size:1rem; }
/* logos de certificaciones: sin recuadros */
.cert-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px 22px; margin:0 0 1.6em; align-items:start; }
.cert{ display:grid; grid-template-rows:54px auto; gap:8px; place-items:center; text-align:center; }
.cert img{ width:100%; height:100%; max-width:96px; object-fit:contain; }
.cert span{ font-size:.7rem; font-weight:600; line-height:1.25; color:var(--muted); }
.cert-grid.big{ grid-template-columns:repeat(6, 1fr); gap:20px 18px; }
.cert-grid.big .cert{ grid-template-rows:84px auto; }
.cert-grid.big .cert img{ max-width:150px; }
.cert-grid.big .cert span{ font-size:.8rem; }

/* ---------- Testimonios: cuadrícula con "Ver más" ---------- */
.reviews-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:30px; }
.reviews-head .section-head{ margin:0; }
.reviews-links{ display:flex; flex-wrap:wrap; gap:12px 24px; font-size:.92rem; font-weight:600; margin-top:1em; }
.reviews-links a{ display:inline-flex; align-items:center; gap:9px; color:#fff; }
.reviews-links img{ width:1.15em; height:1.15em; }
.reviews-wrap{ position:relative; }
.reviews-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; transition:max-height .8s var(--ease-3, ease); }
.reviews-wrap.is-collapsed .reviews-grid{ overflow:hidden; }
.reviews-wrap.is-collapsed::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:min(260px, 46%); pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--petroleo-rgb),0) 0%, rgba(var(--petroleo-rgb),.9) 58%, var(--petroleo) 100%);
}
.more-reviews{ position:absolute; left:0; right:0; margin-inline:auto; width:max-content; bottom:6px; z-index:2; display:none; }
.reviews-wrap.is-collapsed .more-reviews{ display:inline-flex; }
.review{ background:var(--cielo-claro); border:1px solid transparent; border-radius:var(--radius); padding:22px 20px 18px; display:flex; flex-direction:column; gap:12px; box-shadow:0 1px 2px rgba(var(--petroleo-900-rgb),.05); }
.review::before{ content:"\201C"; font-family:var(--f-display); font-weight:700; font-size:3rem; line-height:.6; color:var(--oro); height:22px; }
.review blockquote{ margin:0; font-size:.9rem; color:var(--ink); }
.review footer{ margin-top:auto; display:grid; gap:8px; padding-top:12px; border-top:1px solid rgba(var(--petroleo-rgb),.18); }
.review cite{ font-style:normal; font-weight:700; color:var(--petroleo-900); font-size:.88rem; }
.review a{ display:inline-flex; align-items:center; gap:7px; font-size:.74rem; font-weight:600; color:var(--muted); text-decoration:none; }
.review a img{ width:16px; height:16px; }
.review a:hover{ color:var(--petroleo); }

/* ---------- Proceso (primera consulta) ---------- */
.steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.step{ background:#fff; border-radius:var(--radius); padding:26px 24px 28px; box-shadow:var(--shadow-card); position:relative; overflow:hidden; }
.step-num{ font-family:var(--f-display); font-weight:700; font-size:3.4rem; line-height:1; color:transparent; -webkit-text-stroke:2px var(--oro); margin-bottom:.35em; }
.step h3{ font-size:1.12rem; }
.step p{ font-size:.92rem; color:var(--muted); margin:0; }
.step-note{ margin-top:22px; padding:18px 24px; border-radius:var(--radius); background:var(--petroleo); color:#fff; display:flex; gap:14px; align-items:center; font-size:.93rem; }
.step-note .ico{ width:26px; height:26px; color:var(--oro); }

/* ---------- Seguros y pagos: logos libres, sin recuadros ---------- */
.ins-layout{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); align-items:stretch; }
.ins-block{ padding:4px clamp(20px, 4vw, 52px); display:flex; flex-direction:column; min-width:0; }
.ins-block:first-child{ padding-left:0; }
.ins-block + .ins-block{ border-left:1px solid var(--line); padding-right:0; }
.ins-label{ font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--petroleo); margin-bottom:1em; display:block; }
.ins-allianz{ width:min(190px, 70%); height:auto; margin:4px 0 10px -12px; }
.ins-main p, .ins-note{ margin:0; font-size:.92rem; color:var(--muted); }
.ins-note{ margin-bottom:10px; }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); margin:auto 0; }
.marquee-track{ display:flex; align-items:center; width:max-content; animation:marquee 52s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.ins-logo{ flex:none; margin-right:34px; display:grid; place-items:center; }
.ins-logo img{ width:104px; height:104px; object-fit:contain; }
.ins-logo.txt{ font:700 1.05rem var(--f-display); color:var(--petroleo-900); white-space:nowrap; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
#seguros{ padding-bottom:clamp(44px, 5vw, 68px); }
.pay-band{ background:var(--petroleo); color:#fff; padding:22px 0; }
.pay-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; }
.pay-icon{ color:var(--oro); display:grid; place-items:center; }
.pay-icon .ico{ width:34px; height:34px; }
.pay-text h3{ margin:0; font-size:1.05rem; color:#fff; }
.pay-text p{ margin:0; font-size:.82rem; color:rgba(255,255,255,.8); }
.pay-methods{ display:flex; flex-wrap:wrap; margin-left:auto; }
.pay-method{ display:flex; align-items:center; gap:10px; padding:4px 24px; font-weight:600; font-size:.9rem; color:#fff; }
.pay-method + .pay-method{ border-left:1px solid rgba(255,255,255,.28); }
.pay-method:last-child{ padding-right:0; }
.pay-method .ico{ width:22px; height:22px; color:var(--oro); }

/* ---------- FAQ ---------- */
.faq-wrap{ max-width:820px; margin-inline:auto; }
details{ background:#fff; border:1px solid var(--line); border-radius:18px; margin-bottom:12px; transition:box-shadow .25s ease, border-color .25s ease; }
details[open]{ box-shadow:var(--shadow-card); border-color:transparent; }
summary{ list-style:none; cursor:pointer; padding:20px 24px; font-weight:700; color:var(--petroleo-900); display:flex; align-items:center; justify-content:space-between; gap:16px; --plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075063' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:""; flex:none; width:30px; height:30px; border-radius:50%; background:var(--cielo-claro) var(--plus) center/14px no-repeat; transition:transform .3s ease; }
details[open] summary::after{ transform:rotate(45deg); background-color:var(--oro); }
details > p, details > div{ padding:0 24px 22px; margin:0; color:var(--muted); }
.faq-callout{ margin-top:26px; padding:28px; border-radius:var(--radius); background:var(--petroleo); color:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; }
.faq-callout h3{ color:#fff; margin:0 0 .2em; }
.faq-callout p{ margin:0; color:rgba(255,255,255,.82); font-size:.94rem; }

/* ---------- Ubicación: mapa libre + barra de vidrio inferior ---------- */
.location{ position:relative; padding:0; }
.map-full{ width:100%; height:clamp(520px, 72vh, 660px); border:0; display:block; }
.loc-bar{
  position:absolute; left:max(20px, calc(50% - 590px)); right:max(20px, calc(50% - 590px)); bottom:24px; display:grid; grid-template-columns:1fr auto; gap:16px 34px; align-items:center;
  padding:22px 30px; border-radius:28px; background:rgba(var(--petroleo-900-rgb),.84); -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(255,255,255,.22); color:#fff; box-shadow:0 24px 50px -18px rgba(var(--petroleo-900-rgb),.7);
}
.loc-bar .eyebrow{ color:var(--oro); margin-bottom:.4em; }
.loc-bar h2{ color:#fff; font-size:1.35rem; margin:0; }
.loc-info{ grid-column:1 / -1; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:6px 24px; font-size:.86rem; padding-top:16px; border-top:1px solid rgba(255,255,255,.2); }
.loc-info li{ display:flex; gap:10px; align-items:flex-start; }
.loc-info .ico{ color:var(--oro); margin-top:3px; }
.loc-info strong{ display:block; color:#fff; font-size:.8rem; letter-spacing:.04em; }
.loc-info span{ color:rgba(255,255,255,.86); }
.loc-info a{ text-decoration:none; }
.loc-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.info-list{ display:grid; gap:14px; margin:0 0 20px; font-size:.93rem; }
.info-list li{ display:flex; gap:12px; align-items:flex-start; }
.info-list .ico{ color:var(--petroleo); margin-top:3px; }
.info-list strong{ display:block; color:var(--petroleo-900); }
.info-list a{ text-decoration:none; }
.info-list a:hover{ text-decoration:underline; }
@media (max-width:1100px){
  .loc-bar{ grid-template-columns:1fr; }
  .loc-info{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){ .loc-actions .btn{ flex:1 1 100%; } }
@media (max-width:760px){
  .location{ display:flex; flex-direction:column; }
  .map-full{ height:360px; }
  .loc-bar{ position:static; border-radius:0; background:var(--petroleo-900); -webkit-backdrop-filter:none; backdrop-filter:none; border:0; padding:28px 20px 32px; }
  .loc-info{ grid-template-columns:1fr; }
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--petroleo-900); color:rgba(255,255,255,.8); padding:clamp(50px, 7vw, 80px) 0 28px; position:relative; overflow:hidden; font-size:.92rem; }
.site-footer::before{ content:""; position:absolute; width:520px; aspect-ratio:1; left:-140px; bottom:-200px; background:var(--arc) center/contain no-repeat; opacity:.1; pointer-events:none; }
.footer-grid{ position:relative; display:grid; grid-template-columns:1.2fr 2fr; gap:clamp(30px, 6vw, 80px); }
.footer-brand img{ width:min(260px, 100%); margin-bottom:18px; }
.footer-brand p{ max-width:36ch; color:rgba(255,255,255,.72); }
.footer-cols{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.footer-cols h4{ font-family:var(--f-body); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--oro); margin-bottom:1.1em; font-weight:700; }
.footer-cols li{ margin-bottom:.7em; }
.footer-cols a{ text-decoration:none; }
.footer-cols a:hover{ color:#fff; text-decoration:underline; }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; }
.footer-contact .ico{ color:var(--oro); margin-top:3px; width:1.05em; height:1.05em; }
.footer-legal{ position:relative; margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.16); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 28px; font-size:.8rem; color:rgba(255,255,255,.62); }
.footer-legal a{ text-decoration:underline; }
.footer-legal .cedula-chip{ display:inline-block; padding:3px 12px; border:1px solid rgba(255,255,255,.3); border-radius:999px; margin:0 6px 4px 0; color:rgba(255,255,255,.85); }

/* ---------- Quicknav (puntos laterales, scrollspy) ---------- */
.quicknav{ position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:60; display:none; }
.quicknav ul{ display:grid; gap:6px; }
.quicknav a{ position:relative; display:flex; align-items:center; justify-content:flex-end; width:22px; height:22px; text-decoration:none; }
.quicknav a::before{ content:""; width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid var(--petroleo); transition:transform .25s ease, background .25s ease, border-color .25s ease; box-shadow:0 0 0 3px rgba(255,255,255,.6); }
.quicknav a.is-active::before{ background:var(--oro); border-color:var(--oro); transform:scale(1.35); }
.quicknav a span{ position:absolute; right:30px; white-space:nowrap; background:var(--petroleo-900); color:#fff; padding:5px 12px; border-radius:999px; font-size:.76rem; font-weight:600; opacity:0; transform:translateX(6px); pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.quicknav a:hover span, .quicknav a:focus-visible span{ opacity:1; transform:none; }
@media (min-width:1280px){ .quicknav{ display:block; } }

/* ---------- Páginas internas ---------- */
.page-hero{ position:relative; background:var(--petroleo); color:#fff; padding:clamp(54px, 8vw, 104px) 0 clamp(50px, 7vw, 90px); overflow:hidden; }
.page-hero::before{ content:""; position:absolute; width:min(560px, 90vw); aspect-ratio:1; right:-120px; top:-150px; background:var(--arc) center/contain no-repeat; opacity:.16; transform:rotate(40deg); }
.page-hero .wrap{ position:relative; }
.page-hero h1{ color:#fff; margin-bottom:.35em; max-width:20ch; }
.page-hero .lede{ color:rgba(255,255,255,.84); }
.breadcrumb{ font-size:.82rem; margin-bottom:1.4em; color:rgba(255,255,255,.7); }
.breadcrumb a{ text-decoration:underline; }

/* Servicios: índice lateral + artículos con banner */
.svc-layout{ display:grid; grid-template-columns:250px 1fr; gap:clamp(24px, 4vw, 56px); align-items:start; }
.svc-index{ position:sticky; top:calc(var(--header-h) + 24px); display:grid; gap:6px; }
.svc-index .eyebrow{ margin-bottom:.4em; }
.svc-index a{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:16px; text-decoration:none; font-weight:600; font-size:.92rem; color:var(--petroleo-900); transition:background .2s ease, color .2s ease; }
.svc-index a b{ font-family:var(--f-display); color:var(--oro-oscuro); font-size:.85rem; }
.svc-index a:hover{ background:var(--cielo-claro); }
.svc-index a.is-active{ background:var(--petroleo); color:#fff; }
.svc-index a.is-active b{ color:var(--oro); }
.svc-detail{ margin-bottom:clamp(36px, 5vw, 64px); border-radius:var(--radius-lg); overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-card); }
.svc-banner{ position:relative; min-height:250px; display:flex; align-items:flex-end; padding:28px 32px; color:#fff; background:var(--petroleo-900) var(--img) center/cover no-repeat; isolation:isolate; }
.svc-banner::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(var(--petroleo-900-rgb),.15) 0%, rgba(var(--petroleo-900-rgb),.9) 100%); }
.svc-banner .n{ font-family:var(--f-display); font-weight:700; font-size:.9rem; color:var(--oro); letter-spacing:.08em; display:block; margin-bottom:.4em; }
.svc-banner h2{ color:#fff; margin:0; font-size:clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); }
.svc-body{ display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:clamp(20px, 3vw, 40px); padding:30px 32px 34px; }
.svc-body h4{ font-family:var(--f-body); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--petroleo); margin-bottom:1em; font-weight:700; }
.svc-body p{ font-size:.96rem; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tags li{ padding:8px 14px; border-radius:999px; background:var(--cielo-claro); font-size:.84rem; font-weight:600; color:var(--petroleo-900); }
.signs{ display:grid; gap:10px; counter-reset:sg; }
.signs li{ counter-increment:sg; display:grid; grid-template-columns:auto 1fr; gap:12px; font-size:.9rem; align-items:start; }
.signs li::before{ content:counter(sg, decimal-leading-zero); font-family:var(--f-display); font-weight:700; color:var(--oro-oscuro); font-size:.85rem; padding-top:2px; }
.timeline{ position:relative; max-width:860px; margin-inline:auto; padding-left:34px; }
.timeline::before{ content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--oro), rgba(var(--oro-rgb),.25)); transform-origin:top; transform:scaleY(0); transition:transform 1.6s var(--ease-3, ease); }
.timeline.is-in::before{ transform:scaleY(1); }
.t-item{ position:relative; display:grid; grid-template-columns:1fr auto; gap:6px 22px; align-items:center; min-height:96px; background:#fff; border-radius:var(--radius); padding:22px 26px; margin-bottom:18px; box-shadow:var(--shadow-card); }
.t-item::before{ content:""; position:absolute; left:-31px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; background:var(--oro); box-shadow:0 0 0 5px var(--cielo-claro); }
.t-year{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--petroleo); }
.t-item h3{ margin:.1em 0 .2em; font-size:1.1rem; }
.t-item p{ margin:0; font-size:.92rem; color:var(--muted); }
.t-logo{ width:104px; height:64px; display:grid; place-items:center; overflow:hidden; }
.t-logo img{ width:100%; height:100%; object-fit:contain; }
.study-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; }
.study{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 16px; font-size:.86rem; font-weight:600; color:var(--petroleo-900); }
.study b{ display:block; font-family:var(--f-display); font-size:1.5rem; color:var(--oro-oscuro); margin-bottom:.2em; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 4vw, 50px); }
.card{ background:#fff; border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-card); }
.cta-band{ text-align:center; }
.cta-band .btn-row{ justify-content:center; }

/* ---------- Contacto / formulario ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(24px, 4vw, 50px); align-items:start; }
.form-card{ background:#fff; border-radius:var(--radius-lg); padding:clamp(24px, 4vw, 40px); box-shadow:var(--shadow-card); border:1px solid var(--line); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:6px; color:var(--petroleo-900); }
.field input, .field select, .field textarea{
  width:100%; font:inherit; padding:14px 16px; border-radius:14px; border:1.5px solid var(--line); background:#fff; color:var(--ink); transition:border-color .2s ease, box-shadow .2s ease;
}
.field select{ appearance:none; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23075063' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat; padding-right:42px; }
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--petroleo); box-shadow:0 0 0 4px rgba(var(--petroleo-rgb),.14); }
.field [aria-invalid="true"]{ border-color:#B3261E; }
.field .error{ display:none; color:#B3261E; font-size:.8rem; font-weight:600; margin-top:6px; }
.field [aria-invalid="true"] ~ .error{ display:block; }
.hp{ display:none; }
.form-legal{ font-size:.8rem; color:var(--muted); margin:14px 0 0; }
.form-legal a{ color:var(--petroleo); font-weight:600; }
.legal-content{ max-width:72ch; }
.legal-content h2{ font-size:1.5rem; margin-top:1.6em; }
.legal-content ul{ list-style:disc; padding-left:1.4em; margin-bottom:1em; }
.sitemap-list{ display:grid; gap:10px; max-width:520px; }
.sitemap-list a{ display:block; padding:14px 20px; border-radius:16px; background:#fff; box-shadow:var(--shadow-card); text-decoration:none; font-weight:600; color:var(--petroleo-900); }
.sitemap-list a:hover{ background:var(--cielo-claro); }
.not-found{ text-align:center; padding:clamp(70px, 10vw, 130px) 0; }
.not-found .big{ font-family:var(--f-display); font-weight:700; font-size:clamp(5rem, 18vw, 10rem); line-height:1; color:var(--petroleo); }

/* ---------- WhatsApp flotante ---------- */
.wa-float .ico{ background:#fff; width:30px; height:30px; }

/* ---------- Reveal / animación ---------- */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s var(--ease-3, ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
.js .reveal[data-d="1"]{ transition-delay:.1s; } .js .reveal[data-d="2"]{ transition-delay:.2s; } .js .reveal[data-d="3"]{ transition-delay:.3s; }
@media (prefers-reduced-motion: no-preference){
  .hero-copy > *{ animation:rise .8s var(--ease-3, ease) both; }
  .hero-copy > *:nth-child(2){ animation-delay:.08s; } .hero-copy > *:nth-child(3){ animation-delay:.16s; }
  .hero-copy > *:nth-child(4){ animation-delay:.24s; } .hero-copy > *:nth-child(5){ animation-delay:.32s; } .hero-copy > *:nth-child(6){ animation-delay:.4s; }

}
@keyframes rise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
@keyframes spin-slow{ to{ transform:rotate(510deg); } }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .timeline::before{ transform:none; transition:none; }
  .panel::after{ transition:none; }
  .marquee-track{ animation:none; flex-wrap:wrap; width:auto; }
  .marquee{ -webkit-mask-image:none; mask-image:none; }
  .marquee-track [aria-hidden="true"]{ display:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .stats{ grid-template-columns:repeat(2, 1fr); row-gap:30px; }
  .stat:nth-child(odd){ padding-left:0; border-left:0; }
  .panels{ grid-template-columns:repeat(2, 1fr); }
  .reviews-grid{ grid-template-columns:repeat(2, 1fr); }
  .steps{ grid-template-columns:repeat(2, 1fr); }
  .svc-body{ grid-template-columns:1fr 1fr; }
  .svc-body > :first-child{ grid-column:1 / -1; }
  .study-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:980px){
  .svc-layout{ grid-template-columns:1fr; }
  .svc-index{ display:none; }
}
@media (max-width:900px){
  .photo-frame.tall{ display:block; }
  .photo-frame.tall > img{ height:auto; min-height:0; aspect-ratio:4/4.2; }
  .split, .why-grid, .doctor-grid, .ins-grid, .contact-grid, .grid-2, .footer-grid{ grid-template-columns:1fr; }
  .float-card{ position:relative; right:auto; bottom:auto; margin:-40px 18px 0; max-width:none; }
  .footer-cols{ grid-template-columns:1fr 1fr; }
  .ins-layout{ grid-template-columns:minmax(0,1fr); }
  .ins-block + .ins-block{ border-left:0; border-top:1px solid var(--line); padding:28px 0 0; margin-top:28px; }
  .pay-methods{ margin-left:0; width:100%; }
  .pay-method:first-child{ padding-left:0; }
}
@media (max-width:600px){
  .wrap{ width:calc(100% - 32px); }
  .brand-logo{ height:50px; }
  :root{ --header-h:70px; }
  [role="tabpanel"] .check-list{ grid-template-columns:1fr; }
  .reviews-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .footer-cols{ grid-template-columns:1fr; }
  .t-item{ grid-template-columns:1fr; }
  .t-logo{ grid-row:1; width:120px; height:84px; }
  .btn-row .btn{ flex:1 1 100%; }
  .cedulas{ gap:12px 28px; }
  .cert-grid{ grid-template-columns:repeat(2, 1fr); }
  .svc-body{ grid-template-columns:1fr; padding:24px 22px 28px; }
  .svc-banner{ padding:22px; min-height:200px; }
  .study-grid{ grid-template-columns:repeat(2, 1fr); }
  .pay-method{ padding:8px 0; width:100%; }
  .pay-method + .pay-method{ border-left:0; border-top:1px solid rgba(255,255,255,.28); }
  .panels{ grid-template-columns:1fr; }
  .panel{ min-height:0; padding-top:200px; }
}

@media (max-width:1100px){ .cert-grid.big{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:600px){ .cert-grid.big{ grid-template-columns:repeat(2, 1fr); } .t-logo{ width:96px; height:60px; } }

.card.card-azul{ background:var(--petroleo); color:#fff; box-shadow:none; }
.card.card-azul h3{ color:#fff; }
.card.card-azul .eyebrow{ color:var(--oro); }
.card.card-azul p{ color:rgba(255,255,255,.9); }

/* Servicios (página): filas alternadas con foto a un lado */
.svc-pills{ position:sticky; top:var(--header-h); z-index:40; background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.svc-pills .wrap{ display:flex; gap:8px; overflow-x:auto; padding:12px 0; scrollbar-width:none; }
.svc-pills .wrap::-webkit-scrollbar{ display:none; }
.svc-pill{ flex:none; display:inline-flex; align-items:center; gap:10px; padding:9px 18px; border-radius:999px; border:1.5px solid rgba(var(--petroleo-rgb),.22); text-decoration:none; font-weight:600; font-size:.88rem; color:var(--petroleo-900); transition:background .2s ease, color .2s ease; }
.svc-pill b{ font-family:var(--f-display); color:var(--oro-oscuro); font-size:.8rem; }
.svc-pill:hover{ background:var(--petroleo); color:#fff; border-color:var(--petroleo); }
.svc-section{ padding:clamp(50px, 7vw, 92px) 0; }
.svc-row{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(30px, 5vw, 76px); align-items:center; }
.svc-section:nth-of-type(even) .svc-photo{ order:2; }
.svc-photo{ position:relative; }
.svc-photo img{ width:100%; aspect-ratio:1/1.05; object-fit:cover; object-position:50% 25%; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); }
.svc-num{ position:absolute; left:20px; top:18px; font-family:var(--f-display); font-weight:700; font-size:1.05rem; color:#fff; background:var(--petroleo); padding:6px 16px; border-radius:999px; }
.svc-info .lede{ margin-bottom:1.4em; }
.svc-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px 32px; margin-bottom:1.6em; }
.svc-cols h4{ font-family:var(--f-body); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--petroleo); margin-bottom:.9em; font-weight:700; }
@media (max-width:900px){
  .svc-row{ grid-template-columns:minmax(0,1fr); }
  .svc-section:nth-of-type(even) .svc-photo{ order:0; }
  .svc-cols{ grid-template-columns:minmax(0,1fr); }
  .svc-pills{ top:var(--header-h); }
}

.bg-cielo .tags li{ background:#fff; }

/* Barra de líneas (Servicios): azul, centrada, con texto */
.svc-pills{ background:var(--petroleo); border-bottom:0; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 10px 24px -16px rgba(var(--petroleo-900-rgb),.6); }
.svc-pills .wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; overflow:visible; padding:14px 0 16px; }
.svc-pills-label{ font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.svc-pills-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.svc-pill{ background:#fff; border-color:#fff; color:var(--petroleo-900); box-shadow:0 6px 16px -8px rgba(5,56,71,.6); }
.svc-pill b{ color:var(--oro-oscuro); }
.svc-pill:hover{ background:var(--oro); border-color:var(--oro); color:#fff; transform:translateY(-2px); }
.svc-pill:hover b{ color:#fff; }
@media (max-width:600px){
  .svc-pills .wrap{ padding:10px 0 12px; }
  .svc-pills-row{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; width:100%; padding:0 16px 4px; scrollbar-width:none; }
  .svc-pills-row::-webkit-scrollbar{ display:none; }
  .svc-pills-label{ font-size:.7rem; }
}
.svc-pills .wrap{ gap:5px; padding:9px 0 11px; }
.svc-pills-label{ font-size:.64rem; letter-spacing:.14em; line-height:1; }
.svc-pills-row{ gap:8px; }
.svc-pill{ padding:6px 14px; font-size:.82rem; }

/* Bloque de logos de formación: caja blanca con borde degradado (los logos con fondo blanco se funden con la caja) */
.cert-box{ position:relative; background:#fff; border-radius:26px; padding:26px 24px 8px; margin:0 0 1.6em; box-shadow:0 22px 44px -24px rgba(var(--petroleo-900-rgb),.5); }
.cert-box::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2.5px; pointer-events:none;
  background:linear-gradient(125deg, var(--petroleo) 0%, var(--cielo) 52%, var(--oro) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}
.cert-box .cert-grid{ margin:0 0 16px; }

/* Botones: sin negritas */
.btn, .btn *, button, .tabs-nav button, .svc-pill, .svc-pill b, .more-reviews, .panel .btn,
.btn-call, .phone-link, .btn-whatsapp, .bg-oscuro .btn-primary{ font-weight:500 !important; }

/* Logos de formación: sin esquinas ni borde; el blanco se desvanece hacia el fondo para que no se marque el recuadro */
.cert-box{
  border-radius:0; box-shadow:none; padding:34px 44px 20px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%), linear-gradient(180deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%), linear-gradient(180deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  mask-composite:intersect;
}
.cert-box::before{ display:none; }
@media (max-width:600px){ .cert-box{ padding:28px 30px 14px; } }

/* Botones: sin sombra en el texto; amarillo y verde un poco más profundos para que el texto blanco se lea bien sin sombra */
:root{ --acento:#F2A400; --acento-oscuro:#D98F00; --whatsapp-green:#1FB35B; --whatsapp-green-dark:#17984B; }
.btn, .btn-call, .phone-link, .btn-whatsapp, .bg-oscuro .btn-primary{ text-shadow:none !important; }

/* Rótulos pequeños en mayúsculas: amarillo en todo el sitio (ámbar más profundo sobre fondos claros para que se lea) */
:root{ --oro-texto:#D18B00; }
.eyebrow, .ins-label, .float-card h4, .svc-cols h4, .svc-body h4{ color:var(--oro-texto); }
.bg-oscuro .eyebrow, .loc-bar .eyebrow, .card.card-azul .eyebrow{ color:var(--oro); }
.ins-label{ color:var(--petroleo); }