/* =============================================================
   1. Tokens: variante os-integral (azul noche + menta)
   ============================================================= */
:root {
  --bg: #0a1b2e;
  --bg-2: #0e2540;
  --card: #13314f;
  --cream: #f4f1e8;
  --cream-2: #cfd8c9;
  --mute: #93a9c4;
  --accent: #38c6a4;
  --accent-2: #7ab8ff;
  --ink: #0a1b2e;
  --glass: rgba(244, 241, 232, 0.08);
  --glass-2: rgba(244, 241, 232, 0.14);
  --line: rgba(244, 241, 232, 0.14);
  --sans: "Montserrat", system-ui, sans-serif;
  --body: "Roboto", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius: 22px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
body {
  font-family: var(--body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background: var(--bg); color: var(--cream);
  overflow-x: clip; overscroll-behavior-y: none;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; line-height: 1.06; letter-spacing: -0.02em; font-family: var(--sans); }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: fixed; top: -100px; left: 1rem; padding: .6rem 1rem; background: var(--cream); color: var(--ink); z-index: 9999; border-radius: 8px; }
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container { width: min(1120px, 100% - var(--gutter) * 2); margin-inline: auto; }
.narrow { max-width: 760px; }
.concepto { background: var(--accent); color: var(--ink); text-align: center; font-size: .82rem; font-weight: 600; padding: .45rem 1rem; }
.fine { color: var(--mute); font-size: .86rem; }
.lede { color: var(--cream-2); font-size: 1.05rem; }

/* =============================================================
   4. Buttons / nav
   ============================================================= */
.btn { display: inline-block; border-radius: 999px; font-weight: 600; padding: .7rem 1.3rem; text-decoration: none; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.btn-sm { padding: .5rem .95rem; font-size: .88rem; }
.btn-lg { padding: .9rem 1.6rem; font-size: 1.02rem; }
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(56, 198, 164, .35); }
.btn-ghost { border: 1px solid var(--line); color: var(--cream); }
.btn-glass { background: var(--glass-2); border: 1px solid rgba(244,241,232,.35); color: var(--cream); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav { position: sticky; top: 0; z-index: 50; background: rgba(10, 27, 46, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; }
.brand { display: flex; align-items: center; gap: .7rem; font-family: var(--sans); font-weight: 700; font-size: 1.35rem; }
.brand small { display: block; font-family: var(--sans); font-weight: 400; font-size: .8rem; color: var(--mute); }
.brand-mark { width: 54px; height: 54px; color: var(--accent); }
.nav-links { display: none; gap: 1.1rem; margin-left: auto; }
.nav-links a { color: var(--cream-2); font-size: .95rem; }
/* Último ítem del menú en pantallas angostas: el teléfono siempre a mano. */
.nav-call { display: block; color: var(--accent); font-weight: 700; padding-top: .5rem; }
.nav-ctas { display: none; gap: .6rem; margin-left: 1rem; }
.nav-num { display: none; }
.nav-num-short { display: inline; }
.nav-gmaps { display: none; }
.nav-toggle { margin-left: auto; display: grid; gap: 5px; padding: .5rem; }
.nav-toggle span { width: 22px; height: 2px; background: var(--cream); display: block; }

/* =============================================================
   5. Hero / sections
   ============================================================= */
.hero { position: relative; overflow: clip; padding: 3.2rem 0 2.4rem; }
.hero-mesh { position: absolute; inset: -20% -10% auto; height: 640px; z-index: -1;
  background:
    radial-gradient(at 18% 30%, rgba(56, 198, 164, .5) 0%, transparent 52%),
    radial-gradient(at 82% 62%, rgba(122, 184, 255, .5) 0%, transparent 55%),
    radial-gradient(at 50% 95%, rgba(56, 198, 164, .22) 0%, transparent 55%);
  filter: blur(60px) saturate(140%); }
.hero-grid { display: grid; gap: 2rem; }
.kicker { display: flex; align-items: center; gap: .5rem; color: var(--cream-2); font-size: .88rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hero-title { font-family: var(--sans); font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 700; }
.hero-title em { font-style: italic; color: var(--accent); }
.hero-sub { color: var(--cream-2); font-size: 1.1rem; max-width: 34rem; margin: 1rem 0 1.4rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
/* Hero: botones más anchos, con presencia. El CTA final usa el mismo patrón
   de padding que .btn-lg del cierre, y un mínimo ancho para que "Llamar"
   no quede mucho más chico que "Reservar". */
.hero .hero-actions .btn-lg { padding-inline: 2.4rem; min-width: 11rem; text-align: center; }
.hero-visual { position: relative; }
.hero-visual img { width: 100%; height: clamp(250px, 34vw, 430px); object-fit: cover; border-radius: var(--radius); box-shadow: 0 40px 70px rgba(0,0,0,.5); }
.glass { background: var(--glass); border: 1px solid rgba(244,241,232,.22); border-radius: var(--radius); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
.hero-card-kicker { color: var(--accent); font-size: .78rem; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; }
.hero-card-title { font-family: var(--sans); font-size: 1.5rem; margin: .4rem 0 1rem; }
.hero-visual { padding-bottom: 0; }
.chat-panel[hidden] { display: none; }

.ticker { border-block: 1px solid var(--line); overflow: hidden; padding: .7rem 0; color: var(--cream-2); }
.ticker-track { display: inline-flex; gap: 1.2rem; white-space: nowrap; animation: ticker 28s linear infinite; }
.ticker-track i { color: var(--accent); font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }

.section { padding: 3.4rem 0; }
.section-tint { background: var(--bg-2); border-block: 1px solid var(--line); }
.section-num { color: var(--accent); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .6rem; }
.section-head h2 { font-family: var(--sans); font-size: clamp(1.7rem, 4vw, 2.6rem); max-width: 22ch; }
.section-head p { color: var(--cream-2); max-width: 44rem; margin-top: .7rem; }
.pillars, .cards { display: grid; gap: 1rem; margin-top: 1.8rem; }
/* 7 tarjetas (6 grupos + 1 destacada): auto-tainfill evita la fila de 1 huérfana */
#tratamientos .cards { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.contact-list a { color: var(--accent); }
.card { padding: 1.3rem; }
.card h3 { font-size: 1.12rem; margin: .5rem 0; }
.card p { color: var(--cream-2); font-size: .95rem; }
/* Tarjeta de tratamiento: la foto de ejemplo va arriba, a sangre, y el nombre
   del tratamiento hace de título. Sin etiqueta de categoría arriba. */
.trat { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* height: auto es clave: el atributo height del <img> fijaba la altura en px
   y anulaba el aspect-ratio. */
.trat .card-photo { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.trat .card-body { padding: 1.1rem 1.3rem 1.35rem; }
.trat h3 { font-size: 1.2rem; line-height: 1.2; margin: 0 0 .5rem; }
.trat p { line-height: 1.55; }
.card-destacado { background: rgba(56, 198, 164, .12); border-color: rgba(56, 198, 164, .45); }
.pillar h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.pillar p { color: var(--cream-2); font-size: .94rem; }

/* Split: "La clínica". La imagen va a la izquierda, como en el molde Hettich,
   y el copy a la derecha, que es la columna que carga el texto.
   .split-media queda centrado en vertical respecto al copy (que es más alto):
   la foto ya no se pega al borde superior, baja hasta quedar a media altura. */
.split { display: grid; gap: 2rem; align-items: center; }
.split-copy h2 { font-family: var(--sans); font-size: clamp(1.7rem, 4vw, 2.6rem); }
.split-copy h2 em { font-style: italic; color: var(--accent); }
.split-media { margin: 0; }
/* La foto se muestra entera: en el molde Hettich el recorte no tapa nada. */
.split-media img { width: 100%; height: auto; object-fit: cover; border-radius: var(--radius); box-shadow: 0 30px 60px rgba(0,0,0,.45); }
/* Los pilares van apilados en la columna del copy, como en el molde Hettich.
   En una grilla de 4 columnas dentro del split quedaban ilegibles. */
.split-copy .pillars { grid-template-columns: 1fr; }

/* Créditos fotográficos (creditos.html) */
.credits-list { margin-top: 1.2rem; display: grid; gap: .7rem; padding-left: 1.2rem; color: var(--cream-2); }
.credits-list li { font-size: .92rem; }
.credits-list a { color: var(--accent); }

/* Credencial del profesional: la foto sube a la esquina y el texto corre en una
   sola columna. Cada tamaño de letra tiene su propio interlineado, para que la
   escala se lea de arriba a abajo sin que nada se amontone. */
.credencial { padding: 1.6rem; margin-top: 1.8rem; }
.credencial h3 { font-family: var(--sans); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.12; margin: .45rem 0 .7rem; }
.credencial .lede { max-width: 56ch; font-size: 1.06rem; line-height: 1.55; }
/* La foto acompaña el texto, no compite con él: al costado derecho.
   Es material de ejemplo, así que va enlazada a la página de créditos:
   no se rotula en pantalla, pero el enlace y el alt sí lo declaran. */
.credencial-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "nombre" "datos" "foto";
  gap: 1.7rem 2.2rem;
  align-items: start;
}
.credencial-nombre { grid-area: nombre; min-width: 0; }
.credencial-head .datos { grid-area: datos; }
.credencial-foto { grid-area: foto; display: block; width: 400px; max-width: 100%; align-self: start; }
.credencial-foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; }
.credencial-foto:hover img, .credencial-foto:focus-visible img { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Lista de datos: etiqueta arriba, valor abajo, con aire entre los dos y
   entre un dato y el siguiente. */
.datos { list-style: none; padding: 0; margin: 0; display: grid; gap: .95rem; color: var(--cream); font-size: .98rem; line-height: 1.45; }
.datos li { border-left: 2px solid var(--accent); padding-left: .9rem; }
.datos strong { display: block; color: var(--mute); font-weight: 500; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; margin-bottom: .3rem; }

/* Cita de la clínica y nota al pie: se retiraron de la credencial, sus reglas
   de estilo ya no se usan. */

/* Reseña única: se retiró la tarjeta de la reseña, `.cita` ya no se usa. */

.steps { list-style: none; padding: 0; display: grid; gap: 1rem; margin-top: 1.8rem; }
.step-n { font-family: var(--sans); color: var(--accent); font-size: 1.6rem; }
.orientador { padding: 1.4rem; display: grid; gap: 1rem; margin-top: 1.6rem; }
.orientador label { display: grid; gap: .4rem; font-weight: 600; }
.orientador select, .orientador input { font: inherit; color: var(--cream); background: rgba(10,27,46,.7); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; width: 100%; }
.orientador-result { border-left: 3px solid var(--accent); padding: .6rem .9rem; color: var(--cream-2); display: none; }
.orientador-result.is-on { display: block; }
.faq { display: grid; gap: .7rem; margin-top: 1.4rem; }
.faq-item { border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1.1rem; background: rgba(244,241,232,.04); }
.faq-item summary { cursor: pointer; font-weight: 600; font-family: var(--sans); }
.faq-item p { color: var(--cream-2); margin-top: .5rem; }
.contact-grid { display: grid; gap: 1.6rem; }
.contact-list { list-style: none; padding: 0; display: grid; gap: .5rem; margin: 1rem 0 1.2rem; color: var(--cream-2); }
.contact-list strong { color: var(--cream); }
.map-card { padding: 1.6rem; display: grid; gap: .7rem; align-content: start; }
/* Mapa de Google embebido: sin API key, con el embed público de Maps.
   El fondo del marco evita un panel blanco si el iframe no llega a cargar. */
.map-frame { border-radius: 14px; overflow: hidden; line-height: 0; background: var(--glass-2); }
.map-frame iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; }
.social { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.social a { color: var(--cream-2); text-decoration: underline; text-underline-offset: 4px; }
.footer { border-top: 1px solid var(--line); padding: 1.6rem 0 5.5rem; color: var(--mute); font-size: .9rem; }

/* Chat */
.chat-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; background: var(--accent); color: var(--ink); font-weight: 700; border-radius: 999px; padding: .8rem 1.2rem; box-shadow: 0 14px 34px rgba(0,0,0,.4); }
.chat-panel { position: fixed; right: 1rem; bottom: 4.4rem; z-index: 60; width: min(360px, calc(100vw - 2rem)); padding: 1rem; display: grid; gap: .7rem; }
.chat-panel header { display: flex; justify-content: space-between; align-items: center; font-family: var(--sans); }
.chat-log { display: grid; gap: .5rem; max-height: 300px; overflow: auto; font-size: .92rem; }
.chat-log p { background: rgba(10,27,46,.6); border: 1px solid var(--line); border-radius: 12px; padding: .55rem .75rem; }
.chat-panel form { display: flex; gap: .5rem; }
.chat-panel input { flex: 1; font: inherit; color: var(--cream); background: rgba(10,27,46,.7); border: 1px solid var(--line); border-radius: 999px; padding: .6rem .9rem; }

/* Reveals */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].revealed { opacity: 1; transform: none; }

/* =============================================================
   6. Responsive (mobile-first, solo estos)
   ============================================================= */
@media (min-width: 540px) {
  .pillars, .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; align-items: center; }
}
@media (min-width: 960px) {
  /* El nav pasa a horizontal recién acá: con seis links + los CTA, a 720-959
     el menu desbordeba y los links se pisaban con el teléfono. */
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-call { display: none; }
  .nav-ctas { display: flex; }
  .pillars { grid-template-columns: repeat(4, 1fr); }
  .cards { grid-template-columns: repeat(3, 1fr); }
  /* 7 tarjetas con foto: 3 + 3 y la destacada de banner abajo, sin huecos. */
  #tratamientos .cards { grid-template-columns: repeat(3, 1fr); }
  #tratamientos .cards .card-destacado { grid-column: 1 / -1; display: grid; grid-template-columns: 1.05fr 1fr; }
  #tratamientos .cards .card-destacado .card-photo { aspect-ratio: auto; height: 100%; min-height: 250px; }
  #tratamientos .cards .card-destacado .card-body { padding: 1.7rem 1.9rem; display: grid; align-content: center; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .contact-grid { grid-template-columns: 1.1fr .9fr; }
  .split { grid-template-columns: .9fr 1.1fr; gap: 2.6rem; }
  /* La foto se va al costado derecho del texto (en móvil queda arriba).
     Comparte fila con la lista de datos, así su borde superior cae en la
     misma línea que "Registro en la Superintendencia de Salud".
     Recién desde 960px: a 720-959 la imagen de 400px dejaría al nombre
     del Dr. Ortúzar en una columna demasiado angosta. */
  .credencial-head {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas:
      "nombre foto"
      "datos  foto";
    gap: 1.9rem 2.4rem;
  }
}
@media (min-width: 1280px) {
  .hero { padding: 4.5rem 0 3rem; }
  /* Con espacio de sobra vuelve el teléfono completo y el acceso al mapa. */
  .nav-num { display: inline; }
  .nav-num-short { display: none; }
  .nav-gmaps { display: inline-block; }
}
.nav-links.is-open { display: grid; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-2); padding: 1rem; border-bottom: 1px solid var(--line); }

/* =============================================================
   7. Reduced-motion (solo intrusivo)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .hero-mesh { display: none; }
  html { scroll-behavior: auto; }
}

/* =============================================================
   Testimonios (ejemplos) — carrusel
   ============================================================= */
.carousel{position:relative;max-width:820px;margin:1.8rem auto 0}
.carousel__viewport{overflow:hidden;border-radius:var(--radius)}
.carousel__viewport:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.carousel__track{display:flex;transition:transform .5s ease}
.tcard{flex:0 0 100%;padding:clamp(1.5rem, 4vw, 2.5rem)}
.tcard__quoteicon{display:block;color:var(--accent);margin-bottom:.5rem}
.tcard .tcard__quote{font-family:var(--sans);font-size:1.25rem;line-height:1.5;color:var(--cream);margin:0}
.tcard__meta{display:flex;align-items:center;gap:.75rem;margin-top:1.2rem}
.tcard__avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:1.05rem;color:var(--ink);background:var(--accent);flex:none}
.tcard .tcard__name{font-weight:600;color:var(--cream);margin:0;font-size:.92rem}
.tcard .stars{color:var(--accent);letter-spacing:.12em;margin:.1rem 0 0;font-size:.95rem}
.carousel__ctrl{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1.3rem}
.carousel__btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--glass-2);color:var(--cream);cursor:pointer;display:grid;place-items:center;transition:border-color .2s ease,background .2s ease}
.carousel__btn:hover{border-color:var(--accent);background:var(--glass)}
.carousel__btn:focus-visible,.carousel__dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.carousel__dots{display:flex;gap:.5rem}
.carousel__dot{width:11px;height:11px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.24);cursor:pointer;transition:background .2s ease,transform .2s ease}
.carousel__dot[aria-current="true"]{background:var(--accent);transform:scale(1.25)}

/* Testimonios: encabezado centrado (molde V2 de Chacabuco) */
#testimonios .section-head{max-width:640px;margin-inline:auto;text-align:center}
#testimonios .section-head h2{max-width:none}
#testimonios .section-head .section-title{max-width:none}
#testimonios .section-head p{margin-inline:auto}
#testimonios .section-lead{max-width:44rem}

/* =============================================================
   07 · Ubicación y contacto + CTA final
   Adaptado de Clínica Alerces V2 (web/index.html · web/styles.css)
   ============================================================= */
.contacto-sec,
.cta-final-block {
  --c-paper: var(--glass, var(--paper));
  --c-ink: var(--cream, var(--ink));
  --c-soft: var(--cream-2, var(--ink-soft));
  --c-mute: var(--mute, var(--ink-mute));
  --c-accent: var(--accent);
  --c-line: var(--line);
  --c-accent-deep: var(--accent-deep, color-mix(in srgb, var(--accent) 70%, #000));
  --c-glass-2: var(--glass-2, var(--c-paper));
}

/* --- 07 · Ubicación y contacto --- */
.contacto-sec,
.cta-final-block { scroll-margin-top: 98px; }
.contacto-sec .section-num {
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-mute); font-weight: 600; margin-bottom: 1rem;
}
.contacto-sec .section-head { max-width: 640px; margin-bottom: 2.5rem; }
.contacto-sec .section-head h2 {
  font-size: clamp(1.8rem, 4.2vw, 2.8rem); line-height: 1.15;
  margin-bottom: .75rem; max-width: none;
}
.contacto-sec .section-head p {
  color: var(--c-soft); font-size: 1.08rem; line-height: 1.7; margin-top: .7rem;
}
.contacto-grid {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.5rem; align-items: stretch;
}
.contacto-card {
  border-radius: 1.6rem; padding: 2rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 24px 60px -30px rgba(8, 24, 34, .45);
}
.contacto-card h3 { font-size: 1.35rem; margin-bottom: 1rem; }
.contacto-foto {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 1rem; margin-bottom: .5rem; border: 1px solid var(--c-line);
}
.contacto-card .foto-credit { margin-bottom: 1rem; }
.contacto-card p { margin-bottom: .7rem; line-height: 1.7; color: var(--c-soft); }
.contacto-card p strong { color: var(--c-ink); }
.contacto-card a:not(.btn) {
  color: var(--c-accent); font-weight: 600; text-decoration: none;
}
.contacto-card a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }
.contacto-horarios {
  list-style: none; padding: 1rem 0; margin: 1.1rem 0;
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  font-size: .95rem;
}
.contacto-horarios li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .35rem 0; line-height: 1.6;
}
.contacto-horarios li span:first-child { color: var(--c-ink); flex: 1 1 auto; min-width: 0; }
.contacto-horarios li span:last-child { color: var(--c-soft); text-align: right; white-space: nowrap; }
.contacto-card .fine { margin-top: .6rem; line-height: 1.6; }
.split-grid { display: grid; gap: 2rem; align-items: center; }
.split-media { margin: 0; }
.split-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
.split-copy > p { color: var(--mute); max-width: 42rem; }
.check-list { list-style: none; padding: 0; display: grid; gap: .6rem; margin: 1.1rem 0 0; }
.check-list li { position: relative; padding-left: 2rem; color: var(--mute); }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: .1rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; background: var(--accent); color: var(--ink); }
@media (min-width: 960px) { .split-grid { grid-template-columns: 1.05fr .95fr; } }
.contacto-acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.3rem; }
.contacto-acciones .btn { text-decoration: none; text-align: center; padding: .7rem 1.05rem; }
.contacto-acciones .btn-ghost {
  border: 1.5px solid var(--c-line); color: var(--c-ink); background: transparent;
}
.contacto-acciones .btn-ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }
/* 01 · La clínica: "Cómo llegar" con tinte menta */
#clinica .contacto-acciones .btn-ghost {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
#clinica .contacto-acciones .btn-ghost:hover {
  border-color: var(--accent);
  color: var(--ink);
  background: var(--accent);
  box-shadow: 0 12px 28px rgba(56, 198, 164, .35);
  transform: translateY(-2px);
}
.contacto-acciones .btn-glass {
  background: var(--c-glass-2); border: 1px solid var(--c-line); color: var(--c-ink);
}
.contacto-mapa {
  border-radius: 1.6rem; overflow: clip; padding: .8rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 24px 60px -30px rgba(8, 24, 34, .45);
  display: flex; flex-direction: column;
}
.contacto-mapa iframe {
  width: 100%; height: 340px; min-height: 340px; flex: 1 1 auto;
  border: 0; border-radius: 1rem; display: block;
}
.contacto-mapa .fine { padding: .6rem .4rem 0; line-height: 1.6; }

/* --- CTA final --- */
.cta-final-block {
  background: var(--c-accent);
  background: linear-gradient(135deg, var(--c-accent-deep), var(--c-accent));
  color: #fff; padding: clamp(3.5rem, 8vw, 6rem) 0; text-align: center;
  border-radius: 2rem 2rem 0 0;
}
.cta-final-block h2 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.15; margin-bottom: .8rem; }
.cta-final-block p { opacity: .9; margin-bottom: 1.8rem; font-size: 1.1rem; line-height: 1.7; }
.cta-final-block .hero-actions { justify-content: center; margin-top: 0; }
.cta-final-block .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  text-decoration: none; border-radius: 999px; font-weight: 600;
}
.cta-final-block .btn-lg { padding: 1rem 2rem; font-size: 1.02rem; }
.cta-final-block .btn-light { background: rgba(255,255,255,.94); color: var(--c-accent-deep); }
.cta-final-block .btn-ghostlight {
  border: 1.5px solid rgba(255,255,255,.7); color: #fff; background: transparent;
}
.cta-final-block .btn-ghostlight:hover { background: rgba(255,255,255,.14); }

@media (max-width: 900px) {
  .contacto-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .contacto-horarios li { flex-direction: column; gap: .1rem; }
  .contacto-horarios li span:last-child { text-align: left; }
}
.btn-facebook{background:#1877F2;color:#fff;border-color:rgba(24,119,242,.6);display:inline-flex;align-items:center;justify-content:center}
.btn-facebook:hover{filter:brightness(1.08);color:#fff}
.btn-facebook .ico{width:20px;height:20px}

/* Hero: separación desde el título hasta los botones (el subtexto bajo el título fue retirado) */
.hero-title { margin-bottom: 2rem; }

/* Letra chica: aviso de fotos demo al pie de cada sección con fotos */
.fotos-demo{
  margin-top: 1.1rem;
  font-size: .8rem;
  opacity: .75;
  text-align: center;
}