/* ==========================================================================
   LAYOUT & COMPONENTS — clinica-vital
   No cambiar aquí para "re-marcar" el sitio: eso es tokens.css.
   ========================================================================== */

h1, h2, h3 { font-family: var(--font-display); line-height: var(--lh-tight); color: var(--c-ink); }
h1 { font-size: var(--text-title); font-weight: 600; }
h2 { font-size: var(--text-l); font-weight: 600; }
h3 { font-size: var(--text-ms); font-weight: 600; }
.eyebrow {
  display: inline-flex; align-items: center; gap: calc(var(--m)*6);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-primary);
}
.lead { font-size: var(--text-ms); color: var(--c-ink-soft); }
.muted { color: var(--c-muted); }
.section { padding: calc(var(--m)*56) 0; }
.section.tint { background: var(--c-surface-tint); }
.section-head { max-width: 46ch; margin-bottom: calc(var(--m)*32); }
.section-head p { margin-top: calc(var(--m)*8); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--m)*8);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-s);
  padding: calc(var(--m)*13) calc(var(--m)*22); border-radius: var(--r-pill);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover { filter: brightness(.96); }
.btn:active { transform: scale(.98); }
.btn-wa { background: var(--c-wa); color: #fff; }
.btn-accent { background: var(--c-accent); color: #fff; }
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-ghost { background: transparent; color: var(--c-primary); border: 1.5px solid var(--c-primary); }
.btn-ghost:hover { background: var(--c-primary-tint); }
.btn svg { width: calc(var(--m)*18); height: calc(var(--m)*18); flex: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,249,242,.92);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--c-border);
}
.site-header .bar { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: calc(var(--m)*12); }
.brand { display: flex; align-items: center; gap: calc(var(--m)*8); font-family: var(--font-display); font-weight: 700; font-size: var(--text-ms); color: var(--c-ink); }
.brand .mark { width: calc(var(--m)*34); height: calc(var(--m)*34); border-radius: var(--r-sm); background: var(--c-primary); display: flex; align-items: center; justify-content: center; flex: none; }
.brand .mark svg { width: calc(var(--m)*20); height: calc(var(--m)*20); fill: #fff; }
.header-cta { display: none; }
@media (min-width: 701px) { .header-cta { display: flex; gap: calc(var(--m)*10); } }
.header-phone { display: none; align-items: center; gap: calc(var(--m)*6); font-weight: 600; color: var(--c-primary-ink); }
@media (min-width: 1020px) { .header-phone { display: flex; } }

/* ---------- Hero ---------- */
.hero { padding: calc(var(--m)*44) 0 calc(var(--m)*52); }
.hero .grid { display: grid; gap: calc(var(--m)*32); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .hero .grid { grid-template-columns: 1.05fr .95fr; } }
.hero-badges { display: flex; flex-wrap: wrap; gap: calc(var(--m)*10); margin: calc(var(--m)*18) 0 calc(var(--m)*22); }
.hero-badge {
  display: flex; align-items: center; gap: calc(var(--m)*6); background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-pill); padding: calc(var(--m)*7) calc(var(--m)*13);
  font-size: var(--text-xs); font-weight: 600; color: var(--c-ink-soft); box-shadow: var(--shadow-card);
}
.hero-badge b { color: var(--c-primary-ink); font-family: var(--font-display); }
.hero-cta { display: flex; gap: calc(var(--m)*10); flex-wrap: wrap; }
.hero-photo { position: relative; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lift); aspect-ratio: 4/5; background: var(--c-primary-tint); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-float {
  position: absolute; left: calc(var(--m)*16); bottom: calc(var(--m)*16); background: var(--c-white);
  border-radius: var(--r-sm); padding: calc(var(--m)*12) calc(var(--m)*14); box-shadow: var(--shadow-lift);
  display: flex; align-items: center; gap: calc(var(--m)*10); max-width: calc(100% - var(--m)*32);
}
.hero-float .stars { color: var(--c-gold); font-weight: 700; }
.hero-float b { font-family: var(--font-display); font-size: var(--text-ms); display: block; }
.hero-float span { font-size: var(--text-xs); color: var(--c-muted); }

/* ---------- Pilares de confianza ---------- */
.pillars { display: grid; gap: calc(var(--m)*18); grid-template-columns: 1fr; }
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar { text-align: left; }
.pillar .icon { width: calc(var(--m)*46); height: calc(var(--m)*46); border-radius: var(--r-sm); background: var(--c-primary-tint); display: flex; align-items: center; justify-content: center; margin-bottom: calc(var(--m)*12); }
.pillar .icon svg { width: calc(var(--m)*24); height: calc(var(--m)*24); fill: none; stroke: var(--c-primary); stroke-width: 1.8; }
.pillar h3 { margin-bottom: calc(var(--m)*4); }
.pillar p { color: var(--c-ink-soft); font-size: var(--text-s); }

/* ---------- Servicios ---------- */
.services { display: grid; gap: calc(var(--m)*16); grid-template-columns: 1fr; }
@media (min-width: 640px) { .services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .services { grid-template-columns: repeat(3, 1fr); } }
.service-card {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: calc(var(--m)*20); box-shadow: var(--shadow-card); transition: transform var(--dur) var(--ease);
}
.service-card:hover { transform: translateY(calc(var(--m)*-3)); }
.service-card .icon { width: calc(var(--m)*42); height: calc(var(--m)*42); border-radius: var(--r-sm); background: var(--c-accent-tint); display: flex; align-items: center; justify-content: center; margin-bottom: calc(var(--m)*14); }
.service-card .icon svg { width: calc(var(--m)*22); height: calc(var(--m)*22); fill: none; stroke: var(--c-accent-ink); stroke-width: 1.8; }
.service-card h3 { margin-bottom: calc(var(--m)*6); }
.service-card p { font-size: var(--text-s); color: var(--c-ink-soft); }

/* ---------- Equipo ---------- */
.team { display: grid; gap: calc(var(--m)*20); grid-template-columns: 1fr; }
@media (min-width: 700px) { .team { grid-template-columns: 1fr 1fr; } }
.team-card { display: flex; gap: calc(var(--m)*16); align-items: flex-start; background: var(--c-surface); border-radius: var(--r-md); padding: calc(var(--m)*18); border: 1px solid var(--c-border); }
.team-photo { width: calc(var(--m)*72); height: calc(var(--m)*72); border-radius: 50%; background: var(--c-primary-tint); flex: none; display: flex; align-items: center; justify-content: center; }
.team-photo svg { width: 55%; fill: var(--c-primary); }
.team-card h3 { margin-bottom: calc(var(--m)*2); }
.team-role { font-size: var(--text-xs); font-weight: 700; color: var(--c-accent-ink); text-transform: uppercase; letter-spacing: .03em; margin-bottom: calc(var(--m)*6); }
.team-card p.bio { font-size: var(--text-s); color: var(--c-ink-soft); }

/* ---------- Reseñas ---------- */
.reviews-head { display: flex; align-items: center; gap: calc(var(--m)*14); flex-wrap: wrap; margin-bottom: calc(var(--m)*26); }
.rating-badge { display: flex; align-items: center; gap: calc(var(--m)*10); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: calc(var(--m)*12) calc(var(--m)*16); }
.rating-badge .num { font-family: var(--font-display); font-size: var(--text-l); color: var(--c-ink); }
.rating-badge .stars { color: var(--c-gold); font-size: var(--text-ms); letter-spacing: .05em; }
.reviews-grid { display: grid; gap: calc(var(--m)*16); grid-template-columns: 1fr; }
@media (min-width: 700px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: calc(var(--m)*18); }
.review-card .stars { color: var(--c-gold); font-size: var(--text-s); margin-bottom: calc(var(--m)*8); display: block; }
.review-card p { font-size: var(--text-s); color: var(--c-ink-soft); }
.review-card footer { margin-top: calc(var(--m)*12); font-size: var(--text-xs); font-weight: 700; color: var(--c-ink); }

/* ---------- Horario / ubicación ---------- */
.hours-grid { display: grid; gap: calc(var(--m)*28); grid-template-columns: 1fr; }
@media (min-width: 820px) { .hours-grid { grid-template-columns: .9fr 1.1fr; align-items: start; } }
table.hours { width: 100%; border-collapse: collapse; }
table.hours td { padding: calc(var(--m)*8) 0; border-bottom: 1px solid var(--c-border); font-size: var(--text-s); }
table.hours td:first-child { font-weight: 600; color: var(--c-ink); }
table.hours td:last-child { text-align: right; color: var(--c-ink-soft); }
table.hours tr.today td { color: var(--c-primary-ink); font-weight: 700; }
.map-box { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--c-border); aspect-ratio: 16/10; background: var(--c-primary-tint); display: flex; align-items: center; justify-content: center; position: relative; }
.map-box svg { width: 30%; opacity: .55; }
.map-pin { position: absolute; }
.addr-card { margin-top: calc(var(--m)*14); display: flex; gap: calc(var(--m)*10); align-items: flex-start; }
.addr-card svg { width: calc(var(--m)*20); height: calc(var(--m)*20); flex: none; fill: var(--c-accent-ink); margin-top: 2px; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--c-border); }
.faq-item button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--m)*10);
  padding: calc(var(--m)*18) 0; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: var(--text-ms);
}
.faq-item .plus { flex: none; width: calc(var(--m)*22); height: calc(var(--m)*22); border-radius: 50%; background: var(--c-primary-tint); color: var(--c-primary); display: flex; align-items: center; justify-content: center; font-size: var(--text-s); transition: transform var(--dur) var(--ease); }
.faq-item[data-open="true"] .plus { transform: rotate(45deg); }
.faq-panel { max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--ease); }
.faq-panel p { padding-bottom: calc(var(--m)*18); color: var(--c-ink-soft); font-size: var(--text-s); max-width: 68ch; }

/* ---------- CTA final ---------- */
.final-cta {
  text-align: center; color: #fff; border-radius: var(--r-md); padding: calc(var(--m)*44) calc(var(--m)*24);
  background: linear-gradient(160deg, rgba(14,110,100,.94), rgba(10,90,81,.96)), url('../img/cat-portrait.jpg') center 30%/cover;
}
.final-cta h2 { color: #fff; }
.final-cta p { color: rgba(255,255,255,.85); margin-top: calc(var(--m)*8); }
.final-cta .hero-cta { justify-content: center; margin-top: calc(var(--m)*22); }

/* ---------- Footer ---------- */
footer.site-footer { padding: calc(var(--m)*36) 0; border-top: 1px solid var(--c-border); font-size: var(--text-xs); color: var(--c-muted); }
footer.site-footer .cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--m)*16); }

/* ---------- WhatsApp flotante + barra sticky móvil ---------- */
.wa-float {
  position: fixed; right: calc(var(--m)*18); bottom: calc(var(--m)*18); z-index: 60;
  width: calc(var(--m)*52); height: calc(var(--m)*52); border-radius: 50%; background: var(--c-wa);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lift);
}
.wa-float svg { width: 55%; fill: #fff; }
@media (max-width: 700px) {
  .wa-float { display: none; }
  .sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--c-surface);
    border-top: 1px solid var(--c-border); padding: calc(var(--m)*10) calc(var(--m)*16);
    display: flex; gap: calc(var(--m)*10); box-shadow: 0 -8px 24px rgba(14,110,100,.12);
  }
  .sticky-cta .btn { flex: 1; }
}
@media (min-width: 701px) { .sticky-cta { display: none; } }