/* ============================================================
   Dra. Catalina Kehoe Wilson — hoja de estilos
   Reconstruida en CSS limpio y editable.

   Tipografías: Manrope (texto) + Newsreader (títulos serif).
   Los colores están definidos como variables abajo (:root):
   cambiá un valor una sola vez y se actualiza en todo el sitio.
   ============================================================ */

:root {
  --paper:        #f7f4ee;  /* fondo general */
  --white:        #fffefb;
  --ink:          #24312d;  /* texto principal */
  --forest:       #173f3a;  /* verde de marca */
  --forest-dark:  #0e302c;
  --sage:         #a7b7aa;
  --sage-light:   #dce4dc;
  --clay:         #c77c61;  /* acento terracota */
  --sand:         #e6ded2;
  --muted:        #6b756f;  /* texto secundario */
  --line:         #d8d4ca;  /* bordes/divisores */
  --ring:         #718f83;

  --serif: "Newsreader", Georgia, serif;
  --sans:  "Manrope", Arial, sans-serif;

  --maxw: 1240px;
}

/* ---------- Reset mínimo ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 500; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* Íconos de trazo (estilo Lucide) */
.ico {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   ENCABEZADO
   ============================================================ */
.siteHeader {
  position: sticky; top: 0; z-index: 50;
  background: #f7f4eee6;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #d8d4cac7;
}
.headerInner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px;
  max-width: var(--maxw); height: 78px;
  margin: auto; padding: 0 28px;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  min-width: max-content;
}
.monogram {
  display: grid; place-items: center;
  width: 43px; height: 43px;
  border: 1px solid var(--forest); border-radius: 50%;
  font: 500 14px var(--serif); letter-spacing: .09em;
}
.brandText strong { display: block; font: 500 15px var(--serif); }
.brandText small {
  display: block; margin-top: 4px;
  color: var(--muted); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
nav { display: flex; align-items: center; gap: 30px; }
nav a { font-size: 13px; font-weight: 500; color: var(--ink); }
nav a:hover { color: var(--forest); }
.headerCta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 45px; padding: 0 19px;
  background: var(--forest); color: #fff;
  border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 700;
  transition: background .2s, transform .2s;
}
.headerCta .ico { width: 15px; height: 15px; }
.headerCta:hover { background: var(--forest-dark); transform: translateY(-1px); }

/* ============================================================
   ELEMENTOS COMPARTIDOS
   ============================================================ */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 22px;
  color: var(--forest); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
}
.eyebrow > span { width: 25px; height: 1px; background: currentColor; }
.eyebrow.light { color: #dbe5df; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 53px; padding: 0 24px;
  border-radius: 999px; font-size: 13px; font-weight: 700;
  transition: transform .2s, background .2s;
}
.button .ico { width: 17px; height: 17px; }
.button:hover { transform: translateY(-2px); }
.buttonPrimary { background: var(--forest); color: #fff; }
.buttonPrimary:hover { background: var(--forest-dark); }

.textLink {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 0 5px;
  border-bottom: 1px solid #acb7b0;
  font-size: 12px; font-weight: 700;
}
.textLink .ico { width: 14px; height: 14px; transition: transform .2s; }
.textLink:hover .ico { transform: translate(2px, -2px); }

/* Relleno estándar de secciones (mismo que el original) */
.sectionPad { padding: 112px max(28px, calc(50vw - 592px)); }

.sectionIntro {
  display: grid; grid-template-columns: 1.25fr .75fr;
  align-items: end; gap: 70px; margin-bottom: 60px;
}
.sectionIntro h2, .faqHeading h2 {
  max-width: 720px; margin: 0;
  font-size: clamp(45px, 5vw, 66px); line-height: 1.02;
}
.sectionLead {
  max-width: 475px; margin: 0 0 5px;
  color: var(--muted); font-size: 14px; line-height: 1.8;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  display: grid; grid-template-columns: 1.06fr .94fr;
  align-items: center; gap: 74px;
  max-width: var(--maxw); min-height: 690px;
  margin: auto; padding: 62px 28px 72px;
}
.hero h1 {
  max-width: 660px; margin: 0;
  font-size: clamp(56px, 6.2vw, 88px); line-height: .98;
}
.heroLead {
  max-width: 555px; margin: 30px 0 0;
  color: var(--muted); font-size: 17px; line-height: 1.75;
}
.heroActions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.heroDetails {
  display: flex; align-items: center; gap: 13px;
  max-width: 530px; margin-top: 64px; padding-top: 23px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.heroDetails i { width: 3px; height: 3px; background: var(--clay); border-radius: 50%; }

.heroPortrait { position: relative; min-height: 548px; }
.portraitFrame {
  position: absolute; inset: 0 25px 28px 0; overflow: hidden;
  background: var(--sand); border-radius: 165px 8px 8px;
}
.portraitFrame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(#0000 70%, #142c2729);
}
.portraitFrame img { width: 100%; height: 100%; object-fit: cover; object-position: center 51%; }
.availabilityCard {
  position: absolute; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 13px;
  width: 232px; padding: 19px;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 18px 50px #1e393221;
}
.liveDot { width: 10px; height: 10px; background: #6d9977; border-radius: 50%; box-shadow: 0 0 0 5px #e5ede7; }
.availabilityCard small {
  display: block; color: var(--muted);
  font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.availabilityCard strong { display: block; margin-top: 4px; font: 500 14px var(--serif); }
.portraitLabel {
  position: absolute; top: 46%; right: -63px; transform: rotate(90deg);
  color: var(--muted); font-size: 9px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
}

/* ============================================================
   BARRA DE CONFIANZA
   ============================================================ */
.trustBar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 1184px; margin: 0 auto 18px;
  border-block: 1px solid var(--line);
}
.trustBar > div {
  display: flex; align-items: center; gap: 14px;
  min-height: 106px; padding: 22px 25px;
}
.trustBar > div + div { border-left: 1px solid var(--line); }
.trustBar .ico { width: 23px; height: 23px; color: var(--clay); stroke-width: 1.4; }
.trustBar span { font: 500 15px var(--serif); }
.trustBar small {
  display: block; margin-bottom: 5px;
  color: var(--muted); font: 700 8px var(--sans);
  letter-spacing: .13em; text-transform: uppercase;
}

/* ============================================================
   ESPECIALIDADES
   ============================================================ */
.services { background: var(--white); }
.serviceCards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.serviceCard {
  display: flex; flex-direction: column;
  min-height: 415px; padding: 35px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 24px;
  transition: transform .25s, box-shadow .25s;
}
.serviceCard:hover { transform: translateY(-5px); box-shadow: 0 20px 48px #233f3814; }
.serviceCard.featured { background: var(--forest); color: #fff; border-color: var(--forest); }
.cardTop { display: flex; align-items: flex-start; justify-content: space-between; }
.iconShell {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  color: #e2ebe6; border: 1px solid #ffffff4d; border-radius: 50%;
}
.iconShell.leaf { color: var(--forest); border-color: var(--sage); border-radius: 50% 50% 10px; }
.iconShell .ico { width: 23px; height: 23px; stroke-width: 1.4; }
.cardNumber { color: var(--clay); font: 500 12px var(--serif); }
.serviceCard h3 { margin: 50px 0 13px; font-size: 31px; line-height: 1.02; }
.serviceCard p { max-width: 475px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.serviceCard.featured p { color: #c8d8d1; }
.serviceCard a {
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content; margin-top: auto; padding-top: 28px;
  border-bottom: 1px solid; font-size: 12px; font-weight: 700;
}
.serviceCard a .ico { width: 14px; height: 14px; }

/* ============================================================
   ENFOQUE
   ============================================================ */
.approach {
  display: grid; grid-template-columns: .92fr 1.08fr;
  align-items: center; gap: 88px; min-height: 780px;
  background: var(--forest); color: #fff;
}
.approachVisual { position: relative; height: 590px; }
.approachVisual > img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 51%;
  border-radius: 8px 120px 8px 8px;
}
.imageNote {
  position: absolute; right: -32px; bottom: 28px;
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px;
  background: var(--clay); color: #fff;
  font-size: 11px; line-height: 1.45;
  box-shadow: 0 14px 35px #081b172e;
}
.imageNote .ico { width: 23px; height: 23px; stroke-width: 1.4; }
.approachCopy h2 { max-width: 650px; margin: 0; font-size: clamp(47px, 5vw, 68px); line-height: 1; }
.approachLead { max-width: 590px; margin: 27px 0 0; color: #cad9d2; font-size: 14px; line-height: 1.8; }
.approachSteps { margin: 42px 0 0; padding: 0; list-style: none; }
.approachSteps li {
  display: flex; gap: 22px; padding: 22px 0;
  border-top: 1px solid #ffffff2b;
}
.approachSteps li > span { color: #d6a18e; font: 500 12px var(--serif); }
.approachSteps strong { font: 500 19px var(--serif); }
.approachSteps p { margin: 7px 0 0; color: #b8cbc2; font-size: 12px; line-height: 1.6; }

/* ============================================================
   CONSULTORIOS
   ============================================================ */
.locations { background: var(--sand); }
.locationIntro { align-items: end; }
.locationGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.locationCard {
  position: relative; min-height: 330px; padding: 37px;
  background: #fffefb94; border: 1px solid #d1c7b9; border-radius: 22px;
}
.locationCard > .ico { width: 25px; height: 25px; margin-bottom: 34px; color: var(--clay); stroke-width: 1.5; }
.locationNumber { position: absolute; top: 35px; right: 36px; color: var(--clay); font: 500 12px var(--serif); }
.locationCard small {
  display: block; color: var(--muted);
  font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.locationCard h3 { margin: 8px 0 12px; font-size: 35px; }
.locationCard p { margin: 0; color: var(--muted); font-size: 13px; }
.locationActions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 35px; }
.locationActions a {
  display: inline-flex; align-items: center;
  min-height: 42px; padding: 0 16px;
  border: 1px solid #b9afa2; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  transition: background .2s, color .2s, border-color .2s;
}
.locationActions a:hover { background: var(--forest); color: #fff; border-color: var(--forest); }

/* ============================================================
   PREGUNTAS FRECUENTES (acordeón <details>)
   ============================================================ */
.faq { display: grid; grid-template-columns: .82fr 1.18fr; gap: 100px; background: var(--paper); }
.faqHeading { position: sticky; top: 120px; align-self: start; }
.faqHeading h2 { font-size: clamp(44px, 4.6vw, 61px); }
.faqHeading > p:not(.eyebrow) {
  max-width: 440px; margin: 24px 0 22px;
  color: var(--muted); font-size: 13px; line-height: 1.75;
}
.faqAccordion { border-top: 1px solid var(--line); }
.faqAccordion details { border-bottom: 1px solid var(--line); }
.faqAccordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 25px 0; cursor: pointer; list-style: none;
  color: var(--ink); font: 500 18px var(--serif);
}
.faqAccordion summary::-webkit-details-marker { display: none; }
.faqAccordion summary:hover { color: var(--forest); }
.faqAccordion .chev {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--muted); transition: transform .2s;
}
.faqAccordion details[open] .chev { transform: rotate(180deg); }
.faqAnswer {
  padding: 0 50px 25px 0;
  color: var(--muted); font-size: 13px; line-height: 1.75;
}

/* ============================================================
   TURNOS / CTA
   ============================================================ */
.booking {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 50px;
  margin: 0 28px 28px; padding: 78px max(28px, calc(50vw - 592px));
  background: var(--clay); color: #fff; border-radius: 8px;
}
.booking h2 { max-width: 760px; margin: 0; font-size: clamp(47px, 5.3vw, 70px); line-height: 1; }
.booking > div > p:not(.eyebrow) { margin: 20px 0 0; color: #fff0ea; font-size: 14px; }
.bookingButton { background: var(--white); color: var(--forest); white-space: nowrap; }
.bookingButton:hover { background: var(--paper); }

/* ============================================================
   PIE
   ============================================================ */
footer {
  display: grid; grid-template-columns: 1.35fr repeat(3, .65fr); gap: 50px;
  max-width: var(--maxw); margin: auto; padding: 65px 28px 90px;
  border-top: 1px solid var(--line);
}
.footerMain > p { max-width: 260px; margin: 22px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.footerColumn { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; font-size: 11px; }
.footerColumn small {
  margin-bottom: 5px; color: var(--muted);
  font-size: 8px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.footerColumn a:hover { color: var(--clay); }

/* Botón flotante de WhatsApp — oculto en escritorio, visible en móvil */
.floatingWhatsapp { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  nav { display: none; }
  .hero { gap: 42px; }
  .portraitLabel { display: none; }
  .trustBar { grid-template-columns: 1fr 1fr; margin-inline: 28px; }
  .trustBar > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .trustBar > div:nth-child(4) { border-top: 1px solid var(--line); }
  .approach { gap: 55px; }
  .faq { gap: 60px; }
  .serviceCards { grid-template-columns: 1fr 1fr; }
  .serviceCard:last-child { grid-column: 1 / -1; min-height: 350px; }
  footer { grid-template-columns: 1.2fr 1fr 1fr; }
  footer .footerColumn:last-child { display: none; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 76px; }
  .headerInner { height: 70px; padding: 0 20px; }
  .brandText small { display: none; }
  .brandText strong { font-size: 13px; }
  .monogram { width: 38px; height: 38px; }
  .headerCta { min-height: 41px; padding: 0 15px; font-size: 11px; }
  .headerCta .ico { display: none; }
  .hero { grid-template-columns: 1fr; gap: 47px; min-height: auto; padding: 47px 20px 62px; }
  .hero h1 { font-size: clamp(50px, 14.8vw, 67px); }
  .heroLead { font-size: 15px; }
  .heroActions { flex-direction: column; align-items: flex-start; gap: 16px; }
  .buttonPrimary { width: 100%; }
  .heroDetails { flex-wrap: wrap; margin-top: 40px; }
  .heroPortrait { min-height: 500px; }
  .portraitFrame { border-radius: 115px 7px 7px; inset: 0 10px 25px 0; }
  .availabilityCard { width: 220px; }
  .trustBar { grid-template-columns: 1fr; margin: 0 20px 8px; }
  .trustBar > div { min-height: 85px; padding: 18px; }
  .trustBar > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .sectionPad { padding: 84px 20px; }
  .sectionIntro { grid-template-columns: 1fr; gap: 25px; margin-bottom: 42px; }
  .sectionIntro h2, .faqHeading h2 { font-size: 47px; }
  .serviceCards, .locationGrid { grid-template-columns: 1fr; }
  .serviceCard { min-height: 360px; padding: 32px 27px; }
  .serviceCard:last-child { grid-column: auto; }
  .approach { grid-template-columns: 1fr; gap: 55px; }
  .approachVisual { height: 500px; }
  .approachVisual > img { border-radius: 7px 90px 7px 7px; }
  .imageNote { right: -5px; }
  .approachCopy h2 { font-size: 49px; }
  .faq { grid-template-columns: 1fr; gap: 48px; }
  .faqHeading { position: static; }
  .faqAccordion summary { font-size: 17px; }
  .booking { flex-direction: column; align-items: flex-start; margin: 0 12px 12px; padding: 58px 28px; }
  .booking h2 { font-size: 49px; }
  .bookingButton { white-space: normal; text-align: center; width: 100%; }
  footer { grid-template-columns: 1fr 1fr; gap: 45px 25px; padding: 52px 20px 110px; }
  .footerMain { grid-column: 1 / -1; }
  .floatingWhatsapp {
    position: fixed; right: 17px; bottom: 17px; z-index: 60;
    display: grid; place-items: center;
    width: 57px; height: 57px;
    background: #1f7a5b; color: #fff;
    border: 4px solid var(--paper); border-radius: 50%;
    box-shadow: 0 12px 32px #11342a40;
  }
}

@media (max-width: 420px) {
  .brandText strong { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .headerCta { padding-inline: 13px; }
  .heroPortrait { min-height: 455px; }
  .availabilityCard { width: 205px; padding: 16px; }
  .heroDetails { gap: 9px; }
  .sectionIntro h2, .faqHeading h2, .approachCopy h2, .booking h2 { font-size: 43px; }
  .locationCard { padding: 30px 25px; }
  footer { grid-template-columns: 1fr; }
  .footerMain { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}