/* =============================================================
   OXYNATUR — Design System
   Presión. Oxígeno. Recuperación.
   ============================================================= */

/* Fonts are loaded via <link> tags in each page's <head> (faster than @import) */

:root{
  /* ---- Color tokens ---- */
  --ink:        #10202E;   /* body text */
  --abismo:     #0F2A44;   /* deep navy — dark sections, footer, headings */
  --abismo-2:   #163A5C;   /* lighter navy for gradients/hover on dark */
  --presion:    #2E6DA4;   /* structural blue — secondary accent */
  --oxigeno:    #4FD1B8;   /* oxygen teal — primary accent */
  --oxigeno-2:  #38B79F;   /* deeper teal for hover states */
  --pulso:      #F2543D;   /* warm coral — CTAs, urgency, the needle */
  --pulso-2:    #D6432E;   /* pulso hover */
  --bruma:      #F5F9FA;   /* page background */
  --bruma-2:    #E9F1F2;   /* card / alt background */
  --linea:      #D7E3E6;   /* hairlines, borders */
  --white:      #FFFFFF;

  /* ---- Type ---- */
  --font-display: 'Archivo', sans-serif;
  --font-body:    'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* ---- Spacing scale ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6rem;
  --sp-7: 9rem;

  /* ---- Shape / shadow signature ---- */
  --radius-card: 30px 6px 30px 6px;   /* signature asymmetric cut — reserved for hero/singular moments (sede-card) */
  --radius-soft: 16px;                /* calm default for repeated grid cards — signature shape loses power if used on every card */
  --radius-pill: 999px;
  --radius-sm: 10px;
  --shadow-soft: 0 24px 60px -24px rgba(15,42,68,0.28);
  --shadow-tight: 0 10px 26px -12px rgba(15,42,68,0.22);

  --container: 1180px;
}

/* ---- Reset ---- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd{ margin:0; }
ul[class], ol[class]{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
input, textarea, select{ font:inherit; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bruma);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- Focus visibility ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline: 3px solid var(--pulso);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--abismo); color:var(--white);
  padding:0.8rem 1.2rem; z-index:200; font-family:var(--font-mono); font-size:0.85rem;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ---- Typography ---- */
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--abismo); line-height:1.08; font-weight:600; letter-spacing:-0.01em; }
h1{ font-size:clamp(2.4rem, 5vw, 4.2rem); }
h2{ font-size:clamp(1.9rem, 3.4vw, 2.8rem); }
h3{ font-size:clamp(1.3rem, 2vw, 1.6rem); }
p{ max-width:62ch; }
p.lede{ font-size:1.2rem; color:#3A4C58; }
.mono{ font-family:var(--font-mono); }
.eyebrow{
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--presion); display:inline-flex; align-items:center; gap:0.6rem; margin-bottom:var(--sp-2);
}
.eyebrow::before{ content:""; width:1.4rem; height:2px; background:var(--pulso); display:inline-block; }

/* ---- Layout ---- */
.container{ max-width:var(--container); margin-inline:auto; padding-inline:1.5rem; }
.section{ padding-block: var(--sp-6); }
.section--tight{ padding-block: var(--sp-5); }
.section--dark{ background:var(--abismo); color:#DCE7EE; }
.section--dark h2, .section--dark h3{ color:var(--white); }
.section--alt{ background:var(--bruma-2); }
.grid{ display:grid; gap:var(--sp-3); }
.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:960px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
}
.stack{ display:flex; flex-direction:column; gap:var(--sp-2); }
.cluster{ display:flex; flex-wrap:wrap; gap:0.8rem; align-items:center; }
.center{ text-align:center; margin-inline:auto; }
.max-56{ max-width:56ch; }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:0.6rem; font-family:var(--font-body); font-weight:600;
  font-size:0.98rem; padding:0.9rem 1.6rem; border-radius:var(--radius-pill); border:2px solid transparent;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--pulso); color:var(--white); box-shadow:var(--shadow-tight); }
.btn-primary:hover{ background:var(--pulso-2); }
/* oxigeno is too light for white text — abismo on teal reads at 7.8:1 */
.btn-accent{ background:var(--oxigeno); color:var(--abismo); box-shadow:var(--shadow-tight); }
.btn-accent:hover{ background:var(--oxigeno-2); }
.btn-outline{ border-color:var(--linea); color:var(--abismo); background:transparent; }
.btn-outline:hover{ border-color:var(--presion); background:var(--white); }
.btn-ghost-light{ border-color:rgba(255,255,255,0.35); color:var(--white); }
.btn-ghost-light:hover{ border-color:var(--oxigeno); background:rgba(255,255,255,0.06); }
.btn-sm{ padding:0.6rem 1.1rem; font-size:0.88rem; }

/* ---- Nav ---- */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(245,249,250,0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding-block:1.1rem; }
.brand{ display:flex; align-items:center; gap:0.6rem; font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--abismo); }
.brand img{ width:42px; height:42px; display:block; }
.nav-links{ display:flex; gap:1.9rem; align-items:center; }
.nav-links a{ font-size:0.96rem; font-weight:500; color:var(--ink); position:relative; padding-block:0.3rem; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--oxigeno);
  transition:right .2s ease;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ right:0; }
.nav-links a[aria-current="page"]{ color:var(--abismo); font-weight:600; }
.nav-actions{ display:flex; align-items:center; gap:0.8rem; }
.nav-toggle{ display:none; background:none; border:none; padding:0.4rem; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:24px; height:2px; background:var(--abismo); position:relative; transition:.2s;
}
.nav-toggle span::before{ position:absolute; top:-7px; }
.nav-toggle span::after{ position:absolute; top:7px; }

@media (max-width:1199px){
  .nav{ gap:0.6rem; }
  .brand{ flex-shrink:0; }
  /* Hamburger at the far right, the action button just before it */
  .nav-actions{ margin-left:auto; }
  .nav-toggle{ display:block; order:3; }
  /* Anchored to the sticky header, so it opens right under it whatever its height.
     .site-header in the selector outranks ul[class]{padding:0}. z-index:-1 slides it
     beneath the header's content; visibility keeps the closed menu out of tab order. */
  .site-header .nav-links{
    position:absolute; top:100%; left:0; right:0; z-index:-1; background:var(--white); flex-direction:column; align-items:flex-start;
    padding:1.5rem; gap:1.1rem; border-bottom:1px solid var(--linea); box-shadow:var(--shadow-soft);
    transform:translateY(-100%); visibility:hidden; transition:transform .25s ease, visibility .25s;
    max-height:80vh; overflow:auto;
  }
  .site-header .nav-links.is-open{ transform:translateY(0); visibility:visible; }
  .nav-actions .btn-outline{ display:none; }
}
/* Logo + hamburger + button don't fit side by side on a phone at full size */
@media (max-width:480px){
  .brand{ font-size:1.15rem; gap:0.45rem; }
  .brand img{ width:36px; height:36px; }
  .nav-actions .btn-sm{ padding:0.55rem 0.85rem; font-size:0.8rem; }
}

/* ---- WhatsApp float ---- */
.wa-float{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:150; background:#25D366; color:var(--white);
  width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(0,0,0,0.4); transition:transform .18s ease;
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:30px; height:30px; }

/* ---- Hero ---- */
.hero{ padding-block: var(--sp-5) var(--sp-6); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--sp-5); align-items:center; }
/* Without this a wide child (the sede <select> in contacto) stretches the column past the screen */
.hero-grid > *{ min-width:0; }
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{ margin-bottom:var(--sp-2); }
.hero h1 em{ font-style:normal; color:var(--presion); }
.hero-ctas{ margin-top:var(--sp-3); }

/* ---- Gauge (signature element) ---- */
.gauge-wrap{ position:relative; }
.gauge-readout{ font-family:var(--font-mono); text-anchor:middle; }
.gauge-value{ font-size:34px; font-weight:600; fill:var(--abismo); }
.gauge-unit{ font-family:var(--font-body); font-size:13px; letter-spacing:0.02em; fill:var(--presion); }
.gauge-tick-label{ font-family:var(--font-mono); font-size:13px; fill:#5B7080; text-anchor:middle; }
.gauge-value-arc{
  stroke-dasharray:304; stroke-dashoffset:304;
  animation: gauge-fill 1.6s cubic-bezier(.34,1.1,.5,1) 0.3s forwards;
}
.gauge-needle{ transform-origin:200px 200px; transform:rotate(-120deg); animation: gauge-sweep 1.6s cubic-bezier(.34,1.1,.5,1) 0.3s forwards; }
@keyframes gauge-fill{ to{ stroke-dashoffset:0; } }
@keyframes gauge-sweep{ to{ transform:rotate(0deg); } }

/* ---- Stat bar ---- */
.statbar{ border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); background:var(--white); }
.statbar-inner{ display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:space-between; padding-block:var(--sp-3); }
.stat{ min-width:140px; }
.stat-num{ font-family:var(--font-mono); font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:600; color:var(--presion); display:block; }
.stat-label{ font-size:0.86rem; color:#4A5C68; }

/* ---- Cards ---- */
.card{
  background:var(--white); border-radius:var(--radius-soft); padding:var(--sp-3); border:1px solid var(--linea);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-tight); }
.card-icon{ width:52px; height:52px; margin-bottom:var(--sp-2); }
.card h3{ margin-bottom:0.5rem; }
.card p{ color:#3A4C58; font-size:0.98rem; }
.card-link{ margin-top:var(--sp-2); display:inline-flex; align-items:center; gap:0.4rem; font-weight:600; color:var(--presion); font-size:0.92rem; }

/* ---- Price panel (servicios — replaces repeated inline border-left/background) ---- */
.price-panel{ border-left:3px solid var(--presion); }
.price-panel--oxigeno{ border-left-color:var(--oxigeno); }
.price-panel--pulso{ border-left-color:var(--pulso); background:var(--bruma-2); }

/* ---- Diagnostic row (patologías — replaces repeated inline padding/border) ---- */
.dx-row{ padding-block:var(--sp-3); border-top:1px solid var(--linea); }
.dx-row:last-of-type{ border-bottom:1px solid var(--linea); }
.dx-row__head{ display:flex; flex-wrap:wrap; gap:0.9rem; align-items:center; margin-bottom:var(--sp-2); }
.dx-row__head h3{ margin:0; }
.dx-idx{ font-family:var(--font-mono); font-size:0.85rem; color:var(--presion); font-weight:600; }
.dx-row__head svg{ width:30px; height:30px; flex:none; }

/* ---- Chips ---- */
.chip{
  font-family:var(--font-mono); font-size:0.82rem; padding:0.5rem 1rem; border-radius:var(--radius-pill);
  background:var(--bruma-2); border:1px solid var(--linea); color:var(--abismo); display:inline-block;
}
.chip--tag{ background:rgba(79,209,184,0.14); border-color:rgba(79,209,184,0.4); color:#0E6E5C; }

/* ---- Section divider (arc echo of the gauge) ---- */
.divider-arc{ display:block; width:100%; height:56px; }
.section--dark + .section .divider-arc, .divider-arc{ color:var(--bruma); }

/* ---- Sede card ---- */
.sede-card{ background:var(--white); border:1px solid var(--linea); border-radius:var(--radius-card); overflow:hidden; }
.sede-card__head{ background:var(--abismo); color:var(--white); padding:var(--sp-2) var(--sp-3); }
.sede-card__head .mono{ color:var(--oxigeno); font-size:0.8rem; letter-spacing:.06em; }
.sede-card__body{ padding:var(--sp-3); }
.sede-map{ aspect-ratio:16/9; border:0; width:100%; filter:grayscale(0.15); }
.sede-fact{ display:flex; justify-content:space-between; padding-block:0.5rem; border-bottom:1px dashed var(--linea); font-size:0.94rem; }
.sede-fact:last-child{ border-bottom:none; }
.sede-fact dt{ color:#5B7080; }
.sede-fact dd{ font-family:var(--font-mono); font-weight:600; text-align:right; }
/* an address is too long for the dt/dd face-off — let it stack and use the full width */
.sede-fact--wide{ display:block; }
.sede-fact--wide dd{ text-align:left; margin-top:0.25rem; line-height:1.5; }

/* the two functional CTAs at the foot of each sede card */
.sede-actions{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:var(--sp-3); }
.sede-actions .btn{ flex:1 1 auto; justify-content:center; }
.sede-actions .btn svg{ width:17px; height:17px; flex:none; }

/* ---- Ficha de dirección médica ---- */
/* landscape graphic, not a portrait: it fills its grid column (~614px at container
   width) so the lettering baked into the image stays readable. No aspect-ratio —
   the width/height attributes on the tag reserve the space and avoid the layout jump */
.dr-photo{
  width:100%; max-width:680px; height:auto;
  border-radius:var(--radius-soft); border:1px solid var(--linea); box-shadow:var(--shadow-soft);
}

/* placeholder callout used where real assets (photos/addresses) are still pending */
.placeholder{
  border:1.5px dashed #A9BDC6; border-radius:var(--radius-sm); background:repeating-linear-gradient(135deg, #EEF4F5, #EEF4F5 10px, #E4ECEE 10px, #E4ECEE 20px);
  display:flex; align-items:center; justify-content:center; text-align:center; color:#4A5C68; font-size:0.85rem;
  font-family:var(--font-mono); padding:var(--sp-2); min-height:180px;
}

/* ---- Accordion (FAQ, native details/summary) ---- */
.faq-item{ border-bottom:1px solid var(--linea); padding-block:var(--sp-2); }
.faq-item summary{
  font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--abismo);
  display:flex; justify-content:space-between; align-items:center; list-style:none; gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family:var(--font-mono); font-size:1.4rem; color:var(--presion); flex:none;
  transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin-top:var(--sp-1); color:#3A4C58; max-width:70ch; }

/* ---- Forms ---- */
.field{ display:flex; flex-direction:column; gap:0.4rem; }
.field label{ font-size:0.88rem; font-weight:600; color:var(--abismo); }
.field input, .field select, .field textarea{
  padding:0.85rem 1rem; border:1.5px solid var(--linea); border-radius:var(--radius-sm); background:var(--white);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--presion); outline:none; }
.form-note{ font-size:0.85rem; color:#5B7080; }

/* ---- Footer ---- */
.site-footer{ background:var(--abismo); color:#B9CBD6; padding-block:var(--sp-5) var(--sp-3); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 0.8fr 0.9fr 1fr; gap:var(--sp-4); }
@media (max-width:880px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h4{ color:var(--white); font-size:0.92rem; letter-spacing:.04em; margin-bottom:var(--sp-2); font-family:var(--font-mono); text-transform:uppercase; }
.site-footer a:hover{ color:var(--oxigeno); }
.footer-links{ display:flex; flex-direction:column; gap:0.6rem; font-size:0.94rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); margin-top:var(--sp-4); padding-top:var(--sp-3); display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:0.82rem; color:#7E93A0; }
.footer-brand{ color:var(--white); font-family:var(--font-display); font-weight:700; font-size:1.3rem; margin-bottom:var(--sp-2); display:flex; gap:.5rem; align-items:center; }
.footer-brand img{ width:38px; height:38px; display:block; }

/* ---- Page hero (interior pages) ---- */
.page-hero{ padding-block:var(--sp-5) var(--sp-4); background:var(--bruma-2); border-bottom:1px solid var(--linea); }
.page-hero h1{ font-size:clamp(2rem,4vw,3rem); }
.breadcrumb{ font-family:var(--font-mono); font-size:0.82rem; color:#5B7080; margin-bottom:var(--sp-2); }
.breadcrumb a:hover{ color:var(--presion); }

/* ---- Utility ---- */
.text-muted{ color:#4A5C68; }
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)}
.mb-1{margin-bottom:var(--sp-1)} .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)}