/* ==========================================================================
   Clínica del Sur — styles.css
   Arquitectura: mobile-first, breakpoints en 768px y 1024px (igual que EndoExperts)
   v1-frutillar-logofinal-20260728
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root{
  /* Marca — familia burdeos/lila (paleta entregada por el cliente + derivados afines) */
  --c-burdeos:        #604830; /* primario: botones, links activos, CTA — muestreado directo del logo final */
  --c-burdeos-profundo:#a38769; /* hero, footer, fondos oscuros — tono medio pedido por la dueña */
  --c-burdeos-suave:   #8a6f4d; /* hover de nav, texto secundario con acento */
  --c-lila:            #d4bd98; /* acento sobre fondo oscuro: eyebrows, estrellas, hairline */
  --c-lila-palido:      #f8ede2; /* derivado — fondos suaves de sección, hover de tarjeta */
  --c-crema:            #f4e4d5; /* derivado — fondo general, muestreado del círculo del logo */
  --c-tinta:            #33261a; /* derivado — texto de cuerpo */

  --c-blanco:  #ffffff;
  --c-borde:   #ecd9c8;
  --c-muted:   #8a7862;

  /* Tipografía — se mantiene la del mockup de Lovable */
  --f-titulo: "Cormorant Garamond", Georgia, serif;
  --f-texto:  "Inter", system-ui, -apple-system, sans-serif;

  --radio: 0.5rem;
  --radio-lg: 1.5rem;
  --radio-xl: 2rem;

  --sombra-suave:    0 1px 2px rgba(163,135,105,0.06), 0 10px 30px -10px rgba(163,135,105,0.18);
  --sombra-elevada:  0 30px 60px -25px rgba(163,135,105,0.38);
}

/* --------------------------------------------------------------------------
   2. Reset base
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--c-crema);
  color:var(--c-tinta);
  font-family:var(--f-texto);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{ max-width:100%; display:block; }
svg{ display:inline-block; overflow:hidden; } /* evita el bug de SVG a 100% ancho en mobile — lección de EndoExperts */
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{
  font-family:var(--f-titulo);
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--c-burdeos);
}
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

/* --------------------------------------------------------------------------
   3. Utilidades de layout
   -------------------------------------------------------------------------- */
.container-page{
  width:100%;
  margin-inline:auto;
  padding-inline:1.25rem;
  max-width:80rem;
}
@media (min-width:768px){
  .container-page{ padding-inline:2rem; }
}

.eyebrow{
  font-family:var(--f-texto);
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--c-burdeos-suave);
  font-weight:600;
}
.eyebrow--sobre-oscuro{ color:#3f3020; }

.hairline{
  height:1px;
  background:linear-gradient(to right, transparent, var(--c-lila), transparent);
}

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  background:var(--c-burdeos);
  color:var(--c-blanco);
  padding:0.875rem 1.75rem;
  border-radius:9999px;
  font-size:0.9rem;
  font-weight:600;
  letter-spacing:0.02em;
  border:none;
  transition:all .25s ease;
  box-shadow:var(--sombra-suave);
}
.btn-primary:hover{ background:var(--c-burdeos-profundo); transform:translateY(-1px); }

.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  background:transparent;
  color:var(--c-burdeos);
  padding:0.875rem 1.75rem;
  border-radius:9999px;
  font-size:0.9rem;
  font-weight:600;
  letter-spacing:0.02em;
  border:1px solid var(--c-burdeos);
  transition:all .25s ease;
}
.btn-outline:hover{ background:var(--c-burdeos); color:var(--c-blanco); }

.btn-outline--sobre-oscuro{ color:#3f3020; border-color:rgba(63,48,32,0.45); }
.btn-outline--sobre-oscuro:hover{ background:var(--c-crema); color:var(--c-burdeos); }

.btn-primary--sobre-oscuro{ background:var(--c-crema); color:var(--c-burdeos); }
.btn-primary--sobre-oscuro:hover{ background:var(--c-blanco); }

/* WhatsApp — verde de marca a propósito, no forma parte de la paleta del sitio */
.btn-whatsapp{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:#25D366; color:#fff;
  padding:0.875rem 1.75rem; border-radius:9999px;
  font-size:.9rem; font-weight:600; letter-spacing:.02em;
  border:none; transition:all .25s ease; box-shadow:var(--sombra-suave);
}
.btn-whatsapp:hover{ background:#1EBE5B; transform:translateY(-1px); }

.whatsapp-float{
  position:fixed; right:1rem; bottom:1rem; z-index:60;
  display:grid; place-items:center;
  width:3.25rem; height:3.25rem; border-radius:9999px;
  background:#25D366; color:#fff;
  box-shadow:0 8px 22px rgba(37,211,102,0.45), 0 2px 8px rgba(0,0,0,0.18);
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover{ transform:scale(1.08); box-shadow:0 10px 26px rgba(37,211,102,0.55); }
@media (min-width:768px){
  .whatsapp-float{ right:2rem; bottom:2rem; width:3.75rem; height:3.75rem; }
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,248,251,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-borde);
}
.site-header__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  height:4.5rem;
}
.site-header__brand{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.site-header__logo{ height:3.5rem; width:auto; flex-shrink:0; }
.site-header__brandtext{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.site-header__name{ font-family:var(--f-titulo); font-size:1.15rem; color:var(--c-burdeos); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-header__loc{
  font-size:.68rem; letter-spacing:.05em; color:var(--c-burdeos);
  border:1px solid var(--c-lila); border-radius:9999px; padding:.3rem .7rem;
  text-decoration:none; white-space:nowrap; transition:background .2s ease;
}
.site-header__loc:hover{ background:var(--c-lila-palido); }
.site-header__loc--mobile{
  display:flex; align-items:center; gap:.4rem;
  padding:.75rem 0; margin-bottom:.5rem; border-bottom:1px solid var(--c-borde);
  font-size:.85rem; color:var(--c-burdeos); text-decoration:none;
}

.site-header__nav{ display:none; align-items:center; gap:2rem; }
.site-header__nav a{ font-size:.9rem; color:rgba(42,18,32,0.75); transition:color .2s ease; }
.site-header__nav a:hover, .site-header__nav a.is-active{ color:var(--c-burdeos); }

.site-header__cta{ display:none; }
.site-header__toggle{
  display:grid; place-items:center; height:2.5rem; width:2.5rem; border-radius:9999px;
  border:1px solid var(--c-lila); background:var(--c-lila-palido); color:var(--c-burdeos); flex-shrink:0;
}
.site-header__mobile{ display:none; border-top:1px solid var(--c-borde); background:var(--c-blanco); }
.site-header__mobile.is-open{ display:block; }
.site-header__mobile nav{ display:flex; flex-direction:column; padding-block:1rem; }
.site-header__mobile a{ padding:.75rem 0; border-bottom:1px solid var(--c-borde); font-size:1rem; color:rgba(42,18,32,0.85); }
.site-header__mobile .btn-primary{ margin-top:1rem; width:100%; color:var(--c-blanco); }

.site-header__mobile .site-header__loc--mobile{ color:var(--c-burdeos); font-weight:600; }

@media (min-width:1024px){
  .site-header__bar{ height:5rem; }
  .site-header__nav{ display:flex; }
  .site-header__cta{ display:block; }
  .site-header__toggle{ display:none; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--c-burdeos-profundo);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ height:100%; width:100%; object-fit:cover; opacity:.55; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right, var(--c-burdeos-profundo) 0%, rgba(163,135,105,0.85) 55%, rgba(163,135,105,0.45) 100%);
}
.hero__inner{ position:relative; z-index:1; padding-block:4rem 6rem; min-height:60vh; display:flex; align-items:flex-end; }
.hero__content{ max-width:38rem; }
.hero__title{ margin-top:1rem; color:#3f3020; font-size:2.25rem; line-height:1.08; }
.hero__lead{ margin-top:1.25rem; max-width:34rem; color:rgba(63,48,32,0.85); font-size:1rem; }
.hero__actions{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.75rem; }

@media (min-width:768px){
  .hero__inner{ min-height:72vh; align-items:center; padding-block:5rem; }
  .hero__title{ font-size:3.5rem; }
  .hero__lead{ font-size:1.125rem; }
}
@media (min-width:1024px){
  .hero__title{ font-size:4.25rem; }
}

/* --------------------------------------------------------------------------
   7. Showcase de la clínica (reemplaza el selector de dos sucursales)
   -------------------------------------------------------------------------- */
.showcase{ margin-top:-3.5rem; position:relative; z-index:2; }
.showcase__card{
  background:var(--c-blanco);
  border-radius:var(--radio-xl);
  box-shadow:var(--sombra-elevada);
  overflow:hidden;
  display:grid;
}
.showcase__media{ aspect-ratio:4/3; }
.showcase__media img{ height:100%; width:100%; object-fit:cover; }
.showcase__body{ padding:1.75rem; }
.showcase__body h3{ font-size:1.6rem; margin-top:.4rem; }
.showcase__row{ display:flex; align-items:flex-start; gap:.6rem; margin-top:.9rem; font-size:.9rem; color:var(--c-muted); }
.showcase__row svg{ flex-shrink:0; margin-top:.15rem; color:var(--c-burdeos); }

/* Mobile: mapa a ancho completo bajo la tarjeta (como en la v1 que se veía bien) */
.showcase__map-block{ padding:0 0 1.5rem; }
.showcase__map{
  width:100%; aspect-ratio:16/9; height:auto;
  border:0; border-top:1px solid var(--c-borde);
  display:block;
}
.showcase__map-link{
  display:inline-block; margin:.75rem 1.75rem 0; font-size:.75rem; font-weight:600;
  color:var(--c-burdeos); text-decoration:underline; text-underline-offset:2px;
}

@media (min-width:768px){
  .showcase__card{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; }
  .showcase__media{ grid-row:1 / 3; aspect-ratio:auto; height:100%; }
  .showcase__body{ grid-column:2; grid-row:1; padding:2.5rem 2.5rem 0; display:flex; flex-direction:column; justify-content:center; }
  .showcase__map-block{ grid-column:2; grid-row:2; padding:1rem 2.5rem 2.5rem; }
  .showcase__map{ width:100%; max-width:none; aspect-ratio:16/8; height:auto; border:1px solid var(--c-borde); border-radius:var(--radio); }
  .showcase__map-link{ margin:.5rem 0 0; display:block; }
}

/* --------------------------------------------------------------------------
   8. Pilares
   -------------------------------------------------------------------------- */
.section{ padding-block:4rem; }
@media (min-width:768px){ .section{ padding-block:5.5rem; } }

.section__head{ max-width:38rem; margin-inline:auto; text-align:center; }
.section__head h2{ margin-top:.6rem; font-size:1.9rem; }
.section__head .hairline{ margin:1.25rem auto 0; width:6rem; }
@media (min-width:768px){ .section__head h2{ font-size:2.75rem; } }

.pilares{ margin-top:3rem; display:grid; gap:1.5rem; }
.pilar{
  border:1px solid var(--c-borde); border-radius:var(--radio-lg);
  background:var(--c-blanco); padding:2rem; transition:box-shadow .2s ease;
}
.pilar:hover{ box-shadow:var(--sombra-suave); }
.pilar__icon{
  display:grid; place-items:center; height:3rem; width:3rem; border-radius:9999px;
  background:rgba(96,72,48,0.1); color:var(--c-burdeos);
}
.pilar h3{ margin-top:1.25rem; font-size:1.25rem; }
.pilar p{ margin-top:.5rem; font-size:.9rem; color:var(--c-muted); }

@media (min-width:768px){ .pilares{ grid-template-columns:repeat(3,1fr); } }
.pilares--servicios{ grid-template-columns:none !important; justify-content:center; }
.pilares--servicios .pilar{ max-width:22rem; }
@media (min-width:768px){ .pilares--servicios{ display:flex; flex-wrap:wrap; } }

.servicios-avanzados__grid{ margin-top:3rem; display:grid; gap:2rem; align-items:center; }
.servicios-avanzados__media img{ width:100%; border-radius:var(--radio-xl); box-shadow:var(--sombra-elevada); }
.servicios-avanzados__grid .pilares--servicios{ margin-top:0; }
@media (min-width:768px){
  .servicios-avanzados__grid{ grid-template-columns:1fr 1fr; }
  .servicios-avanzados__grid .pilares--servicios{ justify-content:flex-start; }
}

/* --------------------------------------------------------------------------
   9. Especialidades (preview, sobre fondo oscuro)
   -------------------------------------------------------------------------- */
.especialidades-preview{ background:var(--c-burdeos-profundo); color:#3f3020; }
.especialidades-preview h2{ color:#3f3020; }
.especialidades-preview__grid{ display:grid; gap:3rem; align-items:center; }
.especialidades-preview p.lead{ margin-top:1.25rem; max-width:30rem; color:rgba(63,48,32,0.78); }
.especialidades-preview__lista{ margin-top:2rem; display:grid; gap:.4rem; }
.especialidades-preview__lista li{ border-bottom:1px solid rgba(255,255,255,0.1); }
.especialidades-preview__lista a{
  display:flex; align-items:center; gap:.6rem; padding-block:.6rem;
  font-size:.9rem; color:rgba(63,48,32,0.88); text-decoration:none;
  transition:color .2s ease, gap .2s ease;
}
.especialidades-preview__lista a:hover{ color:#3f3020; gap:.85rem; }
.especialidades-preview__lista .dot{ height:.35rem; width:.35rem; border-radius:9999px; background:#3f3020; flex-shrink:0; }
.especialidades-preview__media img{ width:100%; border-radius:var(--radio-xl); box-shadow:var(--sombra-elevada); }

@media (min-width:768px){
  .especialidades-preview__grid{ grid-template-columns:1fr 1fr; }
  .especialidades-preview__lista{ grid-template-columns:1fr 1fr; column-gap:1.5rem; }
}

/* --------------------------------------------------------------------------
   10. Franja "espíritu" (foto + cita)
   -------------------------------------------------------------------------- */
.espiritu{ display:grid; gap:2.5rem; align-items:center; }
.espiritu__media{ order:2; }
.espiritu__media img{ width:100%; border-radius:var(--radio-xl); box-shadow:var(--sombra-elevada); }
.espiritu__body{ order:1; }
.espiritu__body p.lead{ margin-top:1.5rem; color:var(--c-muted); }
.espiritu blockquote{
  margin-top:2rem; padding-left:1.25rem; border-left:2px solid var(--c-burdeos);
  font-family:var(--f-titulo); font-size:1.2rem; font-style:italic; color:var(--c-burdeos);
}
@media (min-width:768px){
  .espiritu{ grid-template-columns:1fr 1fr; }
  .espiritu__media{ order:1; } .espiritu__body{ order:2; }
}

/* --------------------------------------------------------------------------
   11. Tecnología (preview)
   -------------------------------------------------------------------------- */
.tecnologia-preview{ background:var(--c-lila-palido); }
.tecnologia-preview__grid{ display:grid; gap:2.5rem; align-items:center; }
.tecnologia-preview__media img{ width:100%; border-radius:var(--radio-xl); box-shadow:var(--sombra-suave); }
.tecnologia-preview__lista{ margin-top:2rem; display:grid; gap:1rem; }
.tecnologia-preview__lista li{ border-top:1px solid var(--c-borde); padding-top:1rem; }
.tecnologia-preview__lista .t-name{ font-family:var(--f-titulo); font-size:1.1rem; color:var(--c-burdeos); }
.tecnologia-preview__lista .t-desc{ margin-top:.25rem; font-size:.9rem; color:var(--c-muted); }
@media (min-width:768px){ .tecnologia-preview__grid{ grid-template-columns:1fr 1fr; } }

/* --------------------------------------------------------------------------
   12. Testimonios (actualización manual — ver TESTIMONIOS en site-content.js)
   -------------------------------------------------------------------------- */
.testimonios{ background:var(--c-crema); }
.testimonios__grid{ margin-top:3rem; display:grid; gap:1.5rem; max-width:52rem; margin-inline:auto; }
.testimonio{
  display:flex; flex-direction:column; height:100%;
  border:1px solid var(--c-borde); border-radius:var(--radio-lg);
  background:var(--c-blanco); padding:2rem; box-shadow:var(--sombra-suave);
}
.testimonio__estrellas{ margin-top:.75rem; display:flex; gap:.15rem; color:var(--c-burdeos-suave); }
.testimonio blockquote{ margin-top:1rem; flex:1; font-family:var(--f-titulo); font-size:1.1rem; line-height:1.4; color:var(--c-burdeos); }
.testimonio__autor{ margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--c-borde); }
.testimonio__autor .nombre{ font-weight:600; }
.testimonio__autor .detalle{ margin-top:.15rem; font-size:.75rem; color:var(--c-muted); }
.testimonios__nota{ margin-top:2rem; text-align:center; font-size:.78rem; color:var(--c-muted); }

@media (min-width:768px){ .testimonios__grid{ grid-template-columns:1fr 1fr; } }

/* --------------------------------------------------------------------------
   13. Blog (preview)
   -------------------------------------------------------------------------- */
.blog-preview__head{ display:flex; flex-direction:column; gap:1rem; align-items:flex-start; justify-content:space-between; }
.blog-preview__head a{ font-size:.9rem; font-weight:600; color:var(--c-burdeos); }
.blog-preview__grid{ margin-top:2.5rem; display:grid; gap:2rem; }
.blog-card__media{
  aspect-ratio:5/4; border-radius:var(--radio-lg); overflow:hidden;
  background:linear-gradient(135deg, rgba(96,72,48,0.14), rgba(212,189,152,0.22));
  display:grid; place-items:center;
}
.blog-card__media span{ font-family:var(--f-titulo); font-size:3rem; color:rgba(96,72,48,0.4); }
.blog-card__media img{ height:100%; width:100%; object-fit:cover; }
.blog-card h3{ margin-top:1.1rem; font-size:1.2rem; }
.blog-card p{ margin-top:.4rem; font-size:.9rem; color:var(--c-muted); }

@media (min-width:768px){
  .blog-preview__head{ flex-direction:row; align-items:flex-end; }
  .blog-preview__grid{ grid-template-columns:repeat(3,1fr); }
}

/* --------------------------------------------------------------------------
   14. Cierre / CTA final
   -------------------------------------------------------------------------- */
.cierre__card{
  background:var(--c-burdeos-profundo); color:#3f3020;
  border-radius:var(--radio-xl); padding:2.5rem; overflow:hidden;
}
.cierre__grid{ display:grid; gap:2rem; }
.cierre h2{ color:#3f3020; font-size:1.9rem; }
.cierre p{ margin-top:1rem; max-width:32rem; color:rgba(63,48,32,0.85); }
.cierre__acciones{ display:flex; flex-direction:column; gap:.75rem; }
.cierre__acciones a{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:9999px; padding:.85rem 1.25rem; font-size:.9rem;
}
.cierre__acciones .contacto{ border:1px solid rgba(63,48,32,0.35); color:#3f3020; transition:background .2s ease; }
.cierre__acciones .contacto:hover{ background:rgba(255,255,255,0.1); }

@media (min-width:768px){
  .cierre__card{ padding:4rem; }
  .cierre h2{ font-size:2.75rem; }
  .cierre__grid{ grid-template-columns:1.5fr 1fr; align-items:center; }
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer{ margin-top:6rem; background:var(--c-burdeos-profundo); color:#3f3020; }
.site-footer__grid{ display:grid; gap:2.5rem; padding-block:4rem; }
.site-footer__logo{ height:5rem; width:auto; margin-bottom:1rem; }
.site-footer__marca h3{ color:#3f3020; font-size:1.5rem; }
.site-footer__marca p{ margin-top:.75rem; font-size:.9rem; color:rgba(63,48,32,0.75); }
.site-footer__social{ margin-top:1.5rem; display:flex; gap:.75rem; }
.site-footer__social a{
  display:grid; place-items:center; height:2.25rem; width:2.25rem; border-radius:9999px;
  border:1px solid rgba(255,255,255,0.2); transition:background .2s ease;
}
.site-footer__social a:hover{ background:rgba(255,255,255,0.1); }
.site-footer .eyebrow{ color:#3f3020; }
.site-footer h4{ margin-top:.5rem; color:#3f3020; font-size:1.15rem; }
.site-footer__lista{ margin-top:1rem; display:grid; gap:.5rem; font-size:.9rem; color:rgba(63,48,32,0.8); }
.site-footer__lista li{ display:flex; align-items:flex-start; gap:.5rem; }
.site-footer__lista svg{ margin-top:.15rem; flex-shrink:0; }
.site-footer__bottom{ border-top:1px solid rgba(255,255,255,0.1); }
.site-footer__bottom .container-page{
  display:flex; flex-direction:column; gap:.4rem; align-items:center; justify-content:space-between;
  padding-block:1.5rem; font-size:.72rem; color:rgba(63,48,32,0.6); text-align:center;
}
@media (min-width:768px){
  .site-footer__grid{ grid-template-columns:1.1fr 1fr 1fr; }
  .site-footer__bottom .container-page{ flex-direction:row; text-align:left; }
}

/* --------------------------------------------------------------------------
   16. Placeholders de imagen (mientras se cargan fotos reales)
   -------------------------------------------------------------------------- */
.img-placeholder{
  height:100%; width:100%; min-height:220px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:repeating-linear-gradient(135deg, var(--c-lila-palido), var(--c-lila-palido) 10px, #fff 10px, #fff 20px);
  border:1px dashed var(--c-burdeos-suave);
  color:var(--c-burdeos-suave); font-size:.75rem; font-weight:600; letter-spacing:.05em;
  padding:1rem; box-sizing:border-box;
}

/* --------------------------------------------------------------------------
   17. Utilidad de revelado al scroll (opcional, igual patrón EndoExperts)
   -------------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* --------------------------------------------------------------------------
   18. Page-hero — header sobrio de páginas internas (no full-bleed como el home)
   -------------------------------------------------------------------------- */
.page-hero{ background:var(--c-burdeos-profundo); color:#3f3020; padding-block:3.5rem; }
.page-hero h1{ margin-top:.6rem; color:#3f3020; font-size:2.1rem; max-width:38rem; }
.page-hero__lead{ margin-top:1rem; max-width:34rem; color:rgba(63,48,32,0.8); }
.page-hero__actions{ margin-top:1.75rem; }
.page-hero--con-foto{ position:relative; overflow:hidden; }
.page-hero__media{ position:absolute; inset:0; z-index:0; }
.page-hero__media img{ height:100%; width:100%; object-fit:cover; opacity:.4; }
body[data-page="especialidades"] .page-hero__media img{ object-position:center bottom; }
.page-hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right, var(--c-burdeos-profundo) 15%, rgba(163,135,105,0.75) 60%, rgba(163,135,105,0.55) 100%);
}
.page-hero__inner{ position:relative; z-index:1; }
@media (min-width:768px){
  .page-hero{ padding-block:5rem; }
  .page-hero h1{ font-size:3rem; }
}

/* --------------------------------------------------------------------------
   19. Por qué especialistas (texto simple, 2 columnas en desktop)
   -------------------------------------------------------------------------- */
.porque-especialistas__grid{ display:grid; gap:2rem; }
.porque-especialistas p{ color:var(--c-muted); }
.porque-especialistas p + p{ margin-top:1rem; }
@media (min-width:768px){ .porque-especialistas__grid{ grid-template-columns:1fr 1fr; } }

/* --------------------------------------------------------------------------
   20. Grid de especialidades (página especialidades.html — con ícono, no foto)
   -------------------------------------------------------------------------- */
.especialidades-grid{ margin-top:3rem; display:grid; gap:1.5rem; }
.especialidad-card{
  border:1px solid var(--c-borde); border-radius:var(--radio-lg);
  background:var(--c-blanco); padding:2rem; transition:box-shadow .2s ease, transform .2s ease;
}
.especialidad-card:hover{ box-shadow:var(--sombra-suave); transform:translateY(-2px); }
.especialidad-card__icon{
  display:grid; place-items:center; height:3.5rem; width:3.5rem; border-radius:9999px;
  background:var(--c-lila-palido); color:var(--c-burdeos);
}
.especialidad-card__icon img{ height:2.5rem; width:2.5rem; object-fit:contain; }
.especialidad-card__icon .img-placeholder{ min-height:0; height:1.75rem; width:1.75rem; border-radius:9999px; font-size:.5rem; padding:.2rem; }
.especialidad-card h3{ margin-top:1.25rem; font-size:1.25rem; }
.especialidad-card p{ margin-top:.5rem; font-size:.9rem; color:var(--c-muted); }
.especialidad-card a{
  margin-top:1.25rem; display:inline-flex; align-items:center; gap:.4rem;
  font-size:.85rem; font-weight:600; color:var(--c-burdeos);
}
@media (min-width:768px){ .especialidades-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .especialidades-grid{ grid-template-columns:repeat(3,1fr); } }

/* --------------------------------------------------------------------------
   21. Cómo funciona (proceso en 4 pasos)
   -------------------------------------------------------------------------- */
.proceso{ background:var(--c-lila-palido); }
.proceso__grid{ margin-top:3rem; display:grid; gap:2rem; }
.proceso__paso .num{ font-family:var(--f-titulo); font-size:2.25rem; color:rgba(96,72,48,0.3); }
.proceso__paso h3{ margin-top:.4rem; font-size:1.1rem; }
.proceso__paso p{ margin-top:.4rem; font-size:.85rem; color:var(--c-muted); }
@media (min-width:768px){ .proceso__grid{ grid-template-columns:repeat(4,1fr); } }

/* --------------------------------------------------------------------------
   22. Especialistas (tarjetas placeholder — página de detalle de especialidad)
   -------------------------------------------------------------------------- */
.especialistas__grid{ margin-top:2.5rem; display:grid; gap:1.5rem; }
.especialista-card{
  display:flex; align-items:flex-start; gap:1rem;
  border:1px solid var(--c-borde); border-radius:var(--radio-lg);
  background:var(--c-blanco); padding:1.5rem;
}
.especialista-card__avatar{
  flex-shrink:0; height:4rem; width:4rem; border-radius:9999px;
  display:grid; place-items:center;
  background:repeating-linear-gradient(135deg, var(--c-lila-palido), var(--c-lila-palido) 6px, #fff 6px, #fff 12px);
  border:1px dashed var(--c-burdeos-suave); color:var(--c-burdeos-suave);
}
.especialista-card h4{ font-size:1.05rem; color:var(--c-burdeos); }
.especialista-card .credencial{ margin-top:.15rem; font-size:.8rem; color:var(--c-muted); }
.especialista-card .nota{ margin-top:.3rem; font-size:.75rem; color:var(--c-burdeos-suave); font-weight:600; }
.especialista-card .academico{ margin-top:.5rem; font-size:.75rem; line-height:1.5; color:var(--c-muted); }
.especialista-card__formacion{ margin-top:.35rem; padding-left:1rem; font-size:.72rem; line-height:1.5; color:var(--c-muted); }
.especialista-card__formacion li{ list-style:disc; }
.especialista-card .rnpi{ margin-top:.35rem; font-size:.7rem; color:var(--c-muted); opacity:.7; }
@media (min-width:768px){ .especialistas__grid{ grid-template-columns:1fr 1fr; } }

/* --------------------------------------------------------------------------
   23. Qué es / beneficios (página de detalle)
   -------------------------------------------------------------------------- */
.que-es p{ margin-top:1.25rem; max-width:42rem; color:var(--c-muted); }
.que-es__grid{ display:grid; gap:2rem; align-items:center; }
.que-es__foto{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radio-xl); box-shadow:var(--sombra-suave); }
.que-es__grid p{ margin-top:1.25rem; max-width:none; }
@media (min-width:768px){ .que-es__grid{ grid-template-columns:1fr 1.1fr; gap:3rem; } }
@media (min-width:768px){
  .que-es__grid--invertido{ grid-template-columns:1.1fr 1fr; }
  .que-es__grid--invertido .que-es__foto{ order:2; }
}
.beneficios-lista{ margin-top:2.5rem; display:grid; gap:1rem; }
.beneficio-item{
  display:flex; align-items:flex-start; gap:.75rem;
  border-left:2px solid var(--c-lila); padding:.25rem 0 .25rem 1rem;
  font-size:.92rem; color:var(--c-tinta);
}
.beneficio-item__icon{
  flex:0 0 16px; width:16px; height:16px; margin-top:.2rem;
  color:var(--c-burdeos);
}
.beneficio-item__icon svg{ display:block; width:100%; height:100%; }
@media (min-width:768px){ .beneficios-lista{ grid-template-columns:1fr 1fr; } }

/* --------------------------------------------------------------------------
   24. FAQ — nativo con <details>/<summary>, sin JS
   -------------------------------------------------------------------------- */
.faq{ max-width:44rem; margin-inline:auto; }
.faq details{
  border-bottom:1px solid var(--c-borde); padding-block:1.1rem;
}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  cursor:pointer; list-style:none; font-family:var(--f-titulo); font-size:1.05rem; color:var(--c-burdeos);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.4rem; color:var(--c-burdeos); flex-shrink:0; transition:transform .2s ease; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin-top:.75rem; font-size:.9rem; color:var(--c-muted); }

/* --------------------------------------------------------------------------
   25. Blog — listado (blog.html)
   -------------------------------------------------------------------------- */
.blog-listado__grid{ margin-top:3rem; display:grid; gap:2rem; }
@media (min-width:768px){ .blog-listado__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .blog-listado__grid{ grid-template-columns:repeat(3,1fr); } }

/* --------------------------------------------------------------------------
   26. Blog — artículo individual
   -------------------------------------------------------------------------- */
.articulo{ max-width:42rem; margin-inline:auto; }
.articulo h2{ margin-top:2.5rem; font-size:1.5rem; color:var(--c-burdeos); }
.articulo p{ margin-top:1.1rem; color:var(--c-tinta); line-height:1.75; }
.articulo p:first-of-type{ margin-top:0; }
.articulo-meta{ max-width:42rem; margin-inline:auto; }

/* --------------------------------------------------------------------------
   27. Sucursal — info completa (mapa grande + datos)
   -------------------------------------------------------------------------- */
.sucursal-info__grid{ display:grid; gap:2rem; }
.sucursal-info__mapa{ width:100%; aspect-ratio:16/10; border:1px solid var(--c-borde); border-radius:var(--radio-xl); }
.sucursal-info__datos{ display:grid; gap:1.25rem; }
.sucursal-info__item{ display:flex; align-items:flex-start; gap:.75rem; }
.sucursal-info__item svg{ flex-shrink:0; margin-top:.2rem; color:var(--c-burdeos); }
.sucursal-info__item h4{ font-size:1rem; color:var(--c-burdeos); }
.sucursal-info__item p, .sucursal-info__item a{ margin-top:.15rem; font-size:.92rem; color:var(--c-muted); }
@media (min-width:768px){ .sucursal-info__grid{ grid-template-columns:1.3fr 1fr; align-items:start; } }

/* --------------------------------------------------------------------------
   28. Cómo llegar
   -------------------------------------------------------------------------- */
.como-llegar{ background:var(--c-lila-palido); }
.como-llegar__grid{ margin-top:3rem; display:grid; gap:1.5rem; }
.como-llegar__card{
  border:1px solid var(--c-borde); border-radius:var(--radio-lg);
  background:var(--c-blanco); padding:1.75rem;
}
.como-llegar__card h3{ font-size:1.1rem; }
.como-llegar__card p{ margin-top:.6rem; font-size:.88rem; color:var(--c-muted); }
@media (min-width:768px){ .como-llegar__grid{ grid-template-columns:repeat(3,1fr); } }

/* --------------------------------------------------------------------------
   29. Galería de fotos
   -------------------------------------------------------------------------- */
.galeria__grid{ margin-top:3rem; display:grid; gap:1rem; }
.galeria__item{ aspect-ratio:4/3; border-radius:var(--radio-lg); overflow:hidden; }
.galeria__item img{ height:100%; width:100%; object-fit:cover; }
@media (min-width:768px){ .galeria__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .galeria__grid{ grid-template-columns:repeat(4,1fr); } }

/* --------------------------------------------------------------------------
   30. Equipo / Especialistas — agenda por especialista
   Añadido v1-20260722. Usa los tokens de la sección 1 y las utilidades
   .btn-primary / .btn-outline ya definidas arriba.
   -------------------------------------------------------------------------- */

/* ---- "¿Qué necesitas?" — traduce el problema del paciente a especialidad ---- */
.necesidades-grid{ display:grid; gap:0.75rem; margin-top:2.5rem; }

.necesidad{
  text-align:left;
  background:var(--c-blanco);
  border:1px solid var(--c-borde);
  border-radius:var(--radio-lg);
  padding:1.25rem;
  transition:all .25s ease;
}
.necesidad:hover{
  border-color:var(--c-lila);
  background:var(--c-lila-palido);
  transform:translateY(-1px);
}
.necesidad:focus-visible{ outline:2px solid var(--c-burdeos); outline-offset:2px; }

.necesidad strong{
  display:block;
  font-family:var(--f-titulo);
  font-size:1.05rem;
  font-weight:600;
  color:var(--c-burdeos);
  margin-bottom:.6rem;
}
.necesidad__tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.necesidad__tag{
  font-size:.72rem;
  color:var(--c-burdeos-suave);
  background:var(--c-lila-palido);
  border-radius:9999px;
  padding:.25rem .7rem;
}

/* ---- Filtros por especialidad ---- */
.equipo-filtros{
  display:flex; gap:.5rem;
  overflow-x:auto;
  margin-top:2.5rem;
  padding:.25rem .125rem 1rem;
  -webkit-overflow-scrolling:touch;
}
.equipo-chip{
  flex:0 0 auto;
  background:var(--c-blanco);
  color:var(--c-burdeos);
  border:1px solid var(--c-borde);
  border-radius:9999px;
  padding:.55rem 1.1rem;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  transition:all .25s ease;
}
.equipo-chip:hover{ border-color:var(--c-burdeos); }
.equipo-chip.is-active{
  background:var(--c-burdeos);
  border-color:var(--c-burdeos);
  color:var(--c-blanco);
}
.equipo-chip:focus-visible{ outline:2px solid var(--c-burdeos); outline-offset:2px; }

/* ---- Grilla ---- */
.equipo-grid{ display:grid; gap:1.5rem; }
.equipo-item[hidden]{ display:none; }

.equipo-vacio{ text-align:center; color:var(--c-muted); padding:2.5rem 0; }

.equipo-nota{ margin-top:2rem; text-align:center; }
.equipo-nota a{
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--c-burdeos); font-weight:600; font-size:.9rem;
}
.equipo-nota a:hover{ color:var(--c-burdeos); }

/* ---- Cartilla con agenda (variante de .especialista-card) ---- */
.especialista-card--agenda{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  height:100%;
  gap:0;
  box-shadow:var(--sombra-suave);
}

.especialista-card__head{ display:flex; align-items:center; gap:1rem; }

/* Avatar real — reemplaza el tramado punteado de placeholder */
.especialista-card--agenda .especialista-card__avatar{
  background:linear-gradient(140deg, var(--c-lila), var(--c-burdeos));
  border:none;
  color:var(--c-blanco);
  overflow:hidden;
}
.especialista-card--agenda .especialista-card__avatar img{
  width:100%; height:100%; object-fit:cover;
}

.especialista-card__id{ min-width:0; }
.especialista-card__id h3{ font-size:1.05rem; line-height:1.2; color:var(--c-burdeos); }
.especialista-card--agenda .credencial{ margin-top:.15rem; font-size:.8rem; color:var(--c-muted); }
.especialista-card--agenda .rnpi{ margin-top:.25rem; font-size:.7rem; color:var(--c-muted); opacity:.7; }

.especialista-card__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.especialista-card__tag{
  font-size:.72rem; font-weight:600;
  color:var(--c-burdeos-suave);
  background:var(--c-lila-palido);
  border-radius:9999px;
  padding:.25rem .7rem;
  transition:all .25s ease;
}
.especialista-card__tag:hover{ background:var(--c-burdeos); color:var(--c-blanco); }

.especialista-card--agenda .academico{
  margin-top:.85rem;
  font-size:.75rem; line-height:1.5; color:var(--c-muted);
}

/* ---- Acciones ---- */
.especialista-card__acciones{
  display:flex; flex-direction:column; gap:.5rem;
  margin-top:1.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--c-borde);
}
.especialista-card__acciones .btn-primary,
.especialista-card__acciones .btn-outline{
  width:100%;
  padding:.75rem 1.25rem;
  font-size:.85rem;
}

/* ---- Tablet ---- */
@media (min-width:768px){
  .necesidades-grid{ grid-template-columns:1fr 1fr; gap:1rem; }
  .equipo-grid{ grid-template-columns:1fr 1fr; }
  .equipo-filtros{ flex-wrap:wrap; overflow:visible; justify-content:center; }
}

/* ---- Desktop ---- */
@media (min-width:1024px){
  .necesidades-grid{ grid-template-columns:repeat(3, 1fr); }
  .equipo-grid{ grid-template-columns:repeat(3, 1fr); }
}

@media (prefers-reduced-motion:reduce){
  .necesidad, .equipo-chip, .especialista-card__tag{ transition:none; }
  .necesidad:hover{ transform:none; }
}