:root{
  color-scheme: only light; /* que el navegador no oscurezca el sitio solo (03/11) */
  --verde:#6BB347;
  --verde-wash:#EFF6EA;
  --verde-wash-strong:#DFEFD6;
  --gris-oscuro:#211F1E;   /* CONSULTORIOS */
  --gris-claro:#3B3B3B;    /* Techo / BERASAIN */
  --blanco:#FFFFFF;
  --line:#E4E2DF;
  --shadow: 0 1px 2px rgba(33,31,30,.05), 0 10px 26px rgba(33,31,30,.08);
}
*{box-sizing:border-box;}
/* ---------- Tamaño base y ancho de la página (17/10) ----------
   El tamaño base crece en pantallas anchas, para que el sitio no quede
   "chiquito" en el medio de un monitor grande. Todo está medido en rem, así
   que crece todo junto (letra, botones, espacios, fotos).
   --letra-paso lo cambian los botones A− / A+ (de -1 a +3, pasos de 12.5%,
   ver assets/js/main.js y functions.php). */
html{
  --letra-base:112.5%;
  font-size:calc(var(--letra-base) + var(--letra-paso, 0) * 12.5%);
}
@media (min-width: 1600px){ html{ --letra-base:125%; } }
@media (min-width: 2200px){ html{ --letra-base:137.5%; } }
/* Los links internos (#encuesta, #fotos...) bajan suave. Sin animación para
   quien pidió "reducir movimiento" en su sistema. */
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
/* Al saltar a una sección, que el título no quede tapado por el header fijo. */
section[id]{ scroll-margin-top:8rem; }
body{
  margin:0;
  background:var(--blanco);
  color:var(--gris-oscuro);
  font-family:"Montserrat", "Segoe UI", Arial, sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Noto Serif", Georgia, "Times New Roman", serif;
  font-weight:700;
  line-height:1.22;
  text-wrap:balance;
  margin:0 0 .5em;
  color:var(--gris-oscuro);
}
p{ margin:0 0 1em; max-width:62ch; color:var(--gris-claro); }
a{ color:var(--gris-oscuro); }
img{ max-width:100%; display:block; }

.skip-link{
  /* Escondido arriba con transform (no con top negativo fijo): con la letra
     al máximo el texto ocupa dos líneas y asomaba por encima del header. */
  position:absolute; left:1rem; top:0; transform:translateY(-120%);
  background:var(--gris-oscuro); color:var(--blanco);
  padding:.75rem 1.25rem; border-radius:.5rem;
  z-index:200; transition:transform .15s ease; font-weight:600;
}
.skip-link:focus{ transform:translateY(1rem); }
:focus-visible{ outline:3px solid var(--gris-oscuro); outline-offset:3px; border-radius:4px; }

/* Texto solo para lectores de pantalla (ej. "se abre en otra pestaña"). */
.nowrap{ white-space:nowrap; } /* ej. el teléfono: que no se corte en dos líneas */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.wrap{ max-width:78rem; margin:0 auto; padding:0 clamp(1.25rem, 3vw, 2.5rem); }

header.site{
  padding:1.1rem 0; border-bottom:1px solid var(--line);
  background:var(--blanco); position:sticky; top:0; z-index:100;
  box-shadow:0 1px 2px rgba(33,31,30,.05);
}
.header-row{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.brand{
  display:flex; align-items:center; gap:.75rem; text-decoration:none; margin-right:auto;
  min-height:4.5rem; /* reserva el alto del isologo aunque todavía no esté subido */
}

/* ---------- Isologo horizontal (header y footer, ver partials/header.php y footer.php) ----------
   Mientras el consultorio no suba assets/img/isologo-horizontal.svg/.png, este
   espacio queda vacío a propósito (sin logo de relleno).
   En el header se ve a todo color (fondo claro). En el footer (fondo oscuro) el
   logo a color casi no se lee, así que ahí se muestra una versión distinta:
   un silueteado blanco (ver .footer-logo-negativo), la variante habitual para
   usar un logo sobre fondos oscuros. */
.logo-horizontal{ height:4.5rem; width:auto; display:block; }
.footer-logo{ height:3.25rem; margin-bottom:.75rem; }
.footer-logo-negativo{ filter:brightness(0) invert(1); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:"Montserrat", sans-serif; font-weight:600; font-size:1rem; text-decoration:none;
  padding:.85rem 1.5rem; border-radius:.6rem; border:2px solid var(--gris-oscuro);
  cursor:pointer; min-height:3rem; line-height:1.1;
}
.btn-solid{ background:var(--gris-oscuro); color:var(--blanco); }
.btn-solid:hover{ background:#000; border-color:#000; }
.btn-outline{ background:transparent; color:var(--gris-oscuro); }
.btn-outline:hover{ background:var(--verde-wash); }
.btn-whatsapp{ background:var(--verde); color:var(--blanco); border-color:var(--verde); }
.btn-whatsapp:hover{ background:#5a9c3b; border-color:#5a9c3b; }
.btn-sm{ padding:.6rem 1.1rem; min-height:2.6rem; font-size:.9rem; white-space:nowrap; }

.header-actions{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.text-size-group{ display:flex; align-items:center; gap:.25rem; border:1px solid var(--line); border-radius:.6rem; padding:.15rem; }
.text-size-group button{
  font-family:"Montserrat", sans-serif; font-weight:700; background:transparent; border:none;
  color:var(--gris-oscuro); width:2.1rem; height:2.1rem; border-radius:.4rem; cursor:pointer; font-size:1rem;
}
.text-size-group button:hover{ background:var(--verde-wash); }
.text-size-group button[aria-disabled="true"]{ opacity:.35; cursor:default; }
.text-size-group button[aria-disabled="true"]:hover{ background:transparent; }
.text-size-group span{ font-size:.68rem; color:var(--gris-claro); padding:0 .3rem; }

/* ---------- Hero ---------- */
.hero{ padding:3.25rem 0 3rem; }
.hero-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:3rem; align-items:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:"Montserrat", sans-serif; font-size:.8rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gris-claro); margin-bottom:.9rem;
}
.eyebrow::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--verde); }
.hero h1{ font-size:clamp(1.9rem, 1.3rem + 2.1vw, 2.7rem); }
.hero .lede{ font-size:1.12rem; }
.hero-ctas{ display:flex; gap:.9rem; flex-wrap:wrap; margin:1.5rem 0; }
/* Hero de Bienvenida: dos bloques "texto + botón" (turno / encuesta opcional). */
.hero-bloque{ margin:1.1rem 0 0; }
.hero-bloque .lede{ margin-bottom:.8rem; }
.hero-acciones{ display:flex; flex-wrap:wrap; gap:.75rem; }
.hero-alternativa{ font-size:.92rem; margin:.9rem 0 0; }
.hero-alternativa a{ color:var(--gris-oscuro); text-underline-offset:.15em; }
.hero-bloque + .hero-bloque{ margin-top:1.6rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.facts{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.85rem; }
.facts li{ display:flex; gap:.7rem; align-items:flex-start; font-size:1rem; color:var(--gris-oscuro); }
.facts .ico{ flex:none; width:1.5rem; height:1.5rem; color:var(--verde); margin-top:.1rem; }
.facts a{ color:var(--gris-oscuro); text-underline-offset:.15em; }
.mail-link{ overflow-wrap:anywhere; } /* el mail es largo: que corte antes que desbordar en celulares */
.hero-card{
  background:var(--verde-wash); border:1px solid var(--line); border-radius:1.25rem;
  padding:2rem; box-shadow:var(--shadow);
}
.hero-card .tag{
  display:inline-block; background:var(--blanco); border:1px solid var(--line); color:var(--gris-oscuro);
  font-weight:600; font-size:.85rem; padding:.35rem .8rem; border-radius:2rem; margin-bottom:.9rem;
}
.hero-card h2{ font-size:1.35rem; }
.team-list{ display:grid; gap:.9rem; margin:0 0 1rem; }
.team-item{ display:flex; flex-direction:column; gap:.1rem; }
.team-item strong{ font-family:"Noto Serif", serif; font-size:1.05rem; color:var(--gris-oscuro); }
.team-item + .team-item{ padding-top:.9rem; border-top:1px solid var(--line); }
.team-especialidad{ font-size:.9rem; font-weight:600; color:var(--gris-oscuro); }
.team-descripcion{ font-size:.88rem; margin:.35rem 0 .3rem; }
.team-horarios{ font-size:.85rem; margin:0; }
.team-horarios span{ font-weight:600; color:var(--gris-oscuro); }
.team-atencion{ font-size:.85rem; margin:0; }
.team-atencion span{ font-weight:600; color:var(--gris-oscuro); }
.team-note{ font-size:.88rem; margin:0; }

/* ---------- Sections ---------- */
section{ padding:clamp(3.25rem, 2rem + 3vw, 5rem) 0; border-top:1px solid var(--line); }
section.alt{ background:var(--verde-wash); }
.section-head{ max-width:40rem; margin-bottom:2rem; }

/* ---------- Fotos ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.25rem; } /* 4 fotos: frente, recepción, sala de espera, consultorio */
.photo-slot{
  aspect-ratio:4/3; border-radius:1rem; border:2px dashed var(--line);
  background:var(--blanco); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.6rem; text-align:center; padding:1rem; color:var(--gris-claro);
  overflow:hidden;
}
.photo-slot.has-photo{
  border-style:solid; border-color:var(--line); padding:0; margin:0;
  aspect-ratio:auto; display:block; background:var(--blanco); box-shadow:var(--shadow);
}
.photo-slot.has-photo img{ width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; }
.photo-slot.has-photo figcaption{
  padding:.7rem 1rem; font-weight:600; font-size:.95rem; color:var(--gris-oscuro); text-align:left;
  border-top:3px solid var(--verde);
}
.photo-slot svg{ width:2.3rem; height:2.3rem; color:var(--verde); }
.photo-slot strong{ color:var(--gris-oscuro); font-family:"Montserrat", sans-serif; font-size:1rem; font-weight:600; }

/* ---------- Cómo encontrarnos (Bienvenida) ----------
   Mapa grande a todo el ancho y, abajo, tres tarjetas: Dirección, Contacto y Turnos. */
.mapa-embed{
  border:1px solid var(--line); border-radius:1rem; overflow:hidden; box-shadow:var(--shadow);
}
.mapa-embed iframe{ width:100%; height:320px; border:0; display:block; }
.mapa-grande iframe{ height:clamp(20rem, 38vw, 34rem); }
.encontrar-datos{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem; margin-top:1.5rem;
}
.dato-card{
  background:var(--blanco); border:1px solid var(--line); border-radius:1rem;
  padding:1.4rem 1.5rem; display:flex; flex-direction:column; gap:.2rem;
}
.dato-card h3{ font-size:1.1rem; margin:.6rem 0 .3rem; }
.dato-card p{ margin:0; font-size:1rem; }
.dato-card p strong{ color:var(--gris-oscuro); }
.dato-ico{
  display:flex; align-items:center; justify-content:center;
  width:2.6rem; height:2.6rem; border-radius:50%;
  background:var(--verde-wash-strong); color:var(--gris-oscuro);
}
.dato-ico svg{ width:1.35rem; height:1.35rem; }
.dato-lista{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.dato-lista a{ color:var(--gris-oscuro); text-underline-offset:.15em; }
.dato-acciones{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:auto; padding-top:1rem; }

/* ---------- Coberturas (compartida, ver partials/coberturas.php) ----------
   Lista (no chips): los textos son frases largas. */
.coberturas-lista{
  list-style:none; margin:0; padding:0; display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr));
}
.coberturas-lista li{
  display:flex; gap:.8rem; align-items:flex-start;
  background:var(--blanco); border:1px solid var(--line); border-radius:.75rem;
  padding:.9rem 1.1rem; color:var(--gris-oscuro); font-size:1rem; line-height:1.5;
}
.coberturas-lista .ico{
  flex:none; width:1.4rem; height:1.4rem; margin-top:.05rem; padding:.2rem;
  border-radius:50%; background:var(--verde-wash-strong); color:var(--gris-oscuro);
}
.coberturas-lista strong{ font-weight:600; letter-spacing:.02em; display:block; }
.coberturas-detalle{ display:block; font-size:.9rem; color:var(--gris-claro); }
.coberturas-aclaracion{
  margin:1.5rem 0 0; max-width:48rem;
  padding:.2rem 0 .2rem 1rem; border-left:3px solid var(--verde);
}
.coberturas-aclaracion p{ font-size:.95rem; margin:0 0 .5rem; max-width:none; }
.coberturas-aclaracion p:last-child{ margin-bottom:0; }

/* ---------- Encuesta ---------- */
.survey-card{
  background:var(--blanco); border:1px solid var(--line); border-radius:1.25rem;
  padding:2rem; box-shadow:var(--shadow); display:grid; grid-template-columns:1.1fr 1fr; gap:2rem; align-items:center;
}
.survey-list{ list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:.7rem; }
.survey-list li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.98rem; color:var(--gris-oscuro); }
.survey-list .num{
  flex:none; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--verde-wash-strong);
  color:var(--gris-oscuro); font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center;
}
.survey-titulo{ font-family:"Noto Serif", serif; font-size:1.2rem; color:var(--gris-oscuro); margin:0 0 1rem; }
.survey-motivos .ico{ flex:none; width:1.35rem; height:1.35rem; color:var(--verde); margin-top:.1rem; }
.survey-nota{ font-size:.9rem; color:var(--gris-claro); margin:0 0 1.5rem; max-width:none; }
.survey-side{ background:var(--verde-wash); border-radius:1rem; padding:1.75rem; text-align:center; }
.survey-side .big-ico{ width:3rem; height:3rem; color:var(--verde); margin:0 auto 1rem; }
.survey-side p{ max-width:none; font-size:.95rem; }
.survey-pronto{
  margin:0; font-size:.95rem; font-weight:600; color:var(--gris-oscuro);
  padding:.8rem 1rem; background:var(--verde-wash); border-radius:.6rem; max-width:none;
}

/* ---------- 404: lista de páginas que sí existen ---------- */
.error-404{ border-top:none; }
.links-404{
  list-style:none; margin:1.75rem 0 0; padding:0; display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr));
}
.links-404 a{
  display:flex; flex-direction:column; gap:.15rem; height:100%;
  padding:1rem 1.2rem; border:1px solid var(--line); border-left:4px solid var(--verde);
  border-radius:.75rem; text-decoration:none; background:var(--blanco);
}
.links-404 a:hover{ background:var(--verde-wash); }
.links-404 strong{ color:var(--gris-oscuro); }
.links-404 span{ font-size:.9rem; color:var(--gris-claro); }

/* ---------- Footer (compartido, ver partials/footer.php) ---------- */
.site-footer-nuevo{ background:var(--gris-oscuro); color:#fff; padding-top:3rem; }
.footer-grid-nuevo{
  display:grid; grid-template-columns:1.2fr 1fr 1fr 1.35fr; gap:2rem 2.5rem; padding-bottom:2.5rem;
}
.footer-titulo{
  font-family:"Montserrat", sans-serif; font-size:.85rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--verde); margin:0 0 1rem; line-height:1.3;
}
.footer-list .ico-ext{ display:inline-block; vertical-align:.05em; opacity:.7; }
.footer-nota{ color:#b8b8b8; font-size:.9rem; }
.footer-redes{ list-style:none; margin:1rem 0 0; padding:0; display:flex; gap:1rem; }
.footer-redes a{ color:#e7e7e7; }
.footer-tagline{ color:#cfcfcf; font-size:.95rem; margin:0; }
.footer-wordmark{ font-family:"Noto Serif", serif; font-size:1.2rem; color:#fff; display:block; margin-bottom:.5rem; }
.footer-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; font-size:.95rem; }
.footer-list a{ color:#e7e7e7; text-decoration:none; }
.footer-list a:hover{ color:var(--verde); text-decoration:underline; }
.site-footer-nuevo .fine-print{
  border-top:1px solid rgba(255,255,255,.12); padding:1.25rem 1.5rem; font-size:.85rem; color:#b8b8b8;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; margin-top:0;
}
.site-footer-nuevo .fine-print .credit a{ color:#b8b8b8; text-decoration:underline; }

/* ---------- Botón flotante de WhatsApp (todas las páginas, ver partials/footer.php) ----------
   Es una alternativa para consultas: el turno se sigue sacando online.
   Verde de la marca; en celular queda solo el ícono para no tapar contenido. */
.whatsapp-flotante{
  position:fixed; right:clamp(1rem, 2.5vw, 2rem); bottom:clamp(1rem, 2.5vw, 2rem); z-index:90;
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--verde); color:var(--blanco); text-decoration:none;
  font-weight:700; font-size:1rem; padding:.85rem 1.25rem; border-radius:2rem;
  box-shadow:0 6px 18px rgba(33,31,30,.22);
}
.whatsapp-flotante:hover{ background:#5a9c3b; }
.whatsapp-flotante svg{ width:1.4rem; height:1.4rem; flex:none; }
@media (max-width: 600px){
  .whatsapp-flotante{ padding:.95rem; }
  .whatsapp-flotante span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}

/* ---------- Franja "¿Sos profesional de la salud?" (arriba del footer) ----------
   Es el acceso a la página Profesionales en celulares, donde el botón
   "Soy profesional" del header se oculta para que no desborde. */
.footer-pro{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 1.5rem;
  padding-bottom:2rem; margin-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-pro p{ margin:0; max-width:none; color:#cfcfcf; }
.footer-pro strong{ color:#fff; }
.footer-pro-btn{ background:var(--blanco); color:var(--gris-oscuro); border-color:var(--blanco); }
.footer-pro-btn:hover{ background:var(--verde-wash); border-color:var(--verde-wash); }

@media (max-width: 860px){
  .hero-grid{ grid-template-columns:1fr; }
  .encontrar-datos{ grid-template-columns:1fr; }
  /* Footer en tablet/celular: la marca arriba a todo el ancho, las otras
     columnas de a dos. */
  .footer-grid-nuevo{ grid-template-columns:1fr 1fr; }
  .footer-col-marca{ grid-column:1 / -1; }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  .survey-card{ grid-template-columns:1fr; }
}
@media (max-width: 480px){
  .gallery-grid{ grid-template-columns:1fr; }
  .footer-logo{ height:2.6rem; }
  /* Header en celulares: logo arriba y, abajo, letra a la izquierda y
     "Pedir turno" a la derecha, a todo el ancho — sin scroll horizontal y
     ocupando la menor altura posible (es sticky, queda siempre visible). */
  header.site{ padding:.7rem 0; }
  .header-row{ gap:.6rem; }
  header.site .logo-horizontal{ height:2.75rem; }
  /* "Soy profesional" no entra junto a la letra y "Pedir turno": en celular
     el acceso queda en la franja de arriba del footer. */
  .btn-profesional{ display:none; }
  .brand{ min-height:2.75rem; }
  .header-actions{ width:100%; justify-content:space-between; }
  /* Celular: marca y contacto a todo el ancho; los dos menús, lado a lado. */
  .footer-grid-nuevo{ gap:1.75rem 1.25rem; }
  .footer-col-contacto{ grid-column:1 / -1; }
}