/* Sistema compartido Casa Sanidad
   Se carga DESPUES del <style> de cada pagina para poder normalizar.
   No toca tipografias, colores de marca ni imagenes: solo espacio,
   cajas, elevacion, foco y movimiento. */

:root{
  /* Escala de espaciado. Cada pagina traia entre 23 y 28 valores sueltos. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;

  --radius-sm:10px;

  /* Elevacion en tres niveles, tintada al gris del fondo.
     Reemplaza las 53 sombras distintas que habia solo en la home. */
  --elev-1:0 1px 2px rgba(169,168,163,.16);
  --elev-2:0 10px 24px -12px rgba(169,168,163,.45);
  --elev-3:0 24px 48px -20px rgba(169,168,163,.55);

  /* Salida suave, sin rebote: los objetos reales desaceleran. */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.45s;
}

/* --------------------------------------------------------------------------
   Foco visible. No existia en ninguna pagina: quien navega con teclado
   no sabia donde estaba parado.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid #4f6f4d;
  outline-offset:3px;
  border-radius:4px;
}

/* --------------------------------------------------------------------------
   Interactivos: transicion y respuesta tactil.
   Solo transform y opacity, que no provocan reflow.
   -------------------------------------------------------------------------- */
.navbar-links a,
.navbar-cta,
.cta-btn{
  transition:color .2s var(--ease),
             background-color .2s var(--ease),
             transform .25s var(--ease),
             box-shadow var(--dur) var(--ease);
}

.navbar-cta:hover,
.cta-btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--elev-2);
}

/* El boton "se hunde" al presionar: confirma que el clic ocurrio. */
.navbar-cta:active,
.cta-btn:active{
  transform:translateY(0) scale(.985);
}

/* --------------------------------------------------------------------------
   Aparicion al hacer scroll. sistema.js marca los elementos;
   si el JS no corre, todo queda visible igual.
   -------------------------------------------------------------------------- */
[data-reveal]{
  opacity:0;
  transform:translateY(16px);
}

[data-reveal].reveal-in{
  opacity:1;
  transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:var(--reveal-delay, 0ms);
}

/* --------------------------------------------------------------------------
   Quien pidio menos movimiento en su sistema no ve ninguno.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }

  [data-reveal]{
    opacity:1;
    transform:none;
  }
}

/* ==========================================================================
   Criterio de diseño del home, aplicado a todo el sitio.
   Esta hoja se carga DESPUES del <style> de cada pagina, asi que normaliza
   sin necesidad de repetir reglas en cada archivo.
   ========================================================================== */

/* --- Tipografia ----------------------------------------------------------
   Figtree en todo. El caracter viene del peso y el tracking, no de mezclar
   familias. 800 se veia demasiado grueso. */
h1,
.section-title,
.page-title{
  font-weight:700;
  letter-spacing:-.025em;
}

h2,
h3,
.service-title,
.step-title,
.professional-name,
.value-title{
  font-weight:600;
  letter-spacing:-.015em;
}

/* --- Encabezados a la izquierda ------------------------------------------
   Centrarlos aplana la lectura y choca con las grillas asimetricas. */
.section-header{
  text-align:left;
}
.section-divider{
  margin-left:0;
  margin-right:auto;
}

/* --- Pie de pagina -------------------------------------------------------
   El texto casi blanco sobre el gris #A9A8A3 daba 2.25:1 de contraste,
   muy por debajo del minimo 4.5:1. Con el fondo claro de marca y el color
   de texto de marca sube a 9.12:1. Mismos colores, distinto rol. */
footer{
  background:var(--bg,#F7F9F6);
  color:var(--text,#444542);
  font-size:14px;
  border-top:1px solid var(--line,rgba(169,168,163,.30));
}

.footer-inner{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:var(--space-7);
  align-items:start;
  padding:var(--space-8) var(--space-5) var(--space-7);
}

.footer-col{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  min-width:0;
}

/* align-self evita que la imagen se estire: en una columna flex los hijos
   se estiran al ancho por defecto y con la altura fija se deforman. */
.footer-logo{
  height:34px;
  width:auto;
  align-self:flex-start;
  object-fit:contain;
}

.footer-brand p{
  margin:0;
  max-width:34ch;
  color:var(--muted,#777873);
  line-height:1.6;
}

.footer-title{
  margin:0 0 var(--space-1);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:800;
  color:#5f7d5d;
}

.footer-col a{
  color:var(--text,#444542);
  width:max-content;
  max-width:100%;
  transition:opacity .2s var(--ease);
}
.footer-col a:hover{opacity:.6;}

.footer-cta{
  margin-top:var(--space-2);
  padding:10px 18px;
  border-radius:999px;
  background:var(--brand,#A3C9A0);
  color:#1f2a1e;
  font-weight:700;
  font-size:13px;
}

.footer-legal{
  border-top:1px solid var(--line,rgba(169,168,163,.30));
}
.footer-legal-inner{
  max-width:1120px;
  margin:0 auto;
  padding:var(--space-5);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4) var(--space-6);
}
/* Atribucion institucional: la Fundacion es la persona juridica tras el centro. */
.footer-fundacion{
  display:inline-flex;
  flex-direction:column;
  gap:var(--space-2);
  min-width:0;
  max-width:100%;
  text-decoration:none;
  color:inherit;
}
.footer-fundacion-kicker{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted,#777873);
}
.footer-fundacion-logo{
  display:block;
  height:38px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  transition:opacity var(--dur,.45s) var(--ease,cubic-bezier(.16,1,.3,1));
}
.footer-fundacion:hover .footer-fundacion-logo,
.footer-fundacion:focus-visible .footer-fundacion-logo{
  opacity:.7;
}
.footer-legal p{
  margin:0;
  min-width:0;
  text-align:right;
  color:var(--muted,#777873);
  font-size:13px;
  line-height:1.65;
}
@media (max-width:720px){
  .footer-legal p{ text-align:left; }
}

@media (max-width:860px){
  .footer-inner{
    grid-template-columns:1fr;
    gap:var(--space-6);
    padding:var(--space-7) var(--space-5) var(--space-6);
  }
}

/* Misión usa .values-header en vez de .section-header: mismo criterio,
   alineado a la izquierda como el resto del sitio. */
.values-header{
  text-align:left;
  margin-left:0;
  margin-right:auto;
}

/* ==========================================================================
   Menu movil: boton con desplegable.
   Antes .navbar-links era una tira con scroll horizontal: los ultimos
   items quedaban fuera de vista y nadie descubre que hay que arrastrar.
   ========================================================================== */

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;               /* minimo tactil recomendado */
  height:44px;
  padding:0;
  border:1px solid var(--line,rgba(169,168,163,.30));
  border-radius:12px;
  background:transparent;
  color:inherit;
  cursor:pointer;
  flex:0 0 auto;
}

.nav-toggle__barras,
.nav-toggle__barras::before,
.nav-toggle__barras::after{
  display:block;
  width:20px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__barras::before,
.nav-toggle__barras::after{
  content:"";
  position:absolute;
}
.nav-toggle__barras::before{transform:translateY(-6px);}
.nav-toggle__barras::after{transform:translateY(6px);}
.nav-toggle{position:relative;}

/* Abierto: las barras forman una X. */
.navbar.esta-abierto .nav-toggle__barras{background:transparent;}
.navbar.esta-abierto .nav-toggle__barras::before{transform:rotate(45deg);}
.navbar.esta-abierto .nav-toggle__barras::after{transform:rotate(-45deg);}

@media (max-width:960px){
  .nav-toggle{display:inline-flex;}

  /* La barra ya es position:fixed en las cuatro paginas, y eso alcanza
     como contexto para el panel absoluto. Forzar relative aqui la
     desprenderia del tope al hacer scroll. */

  .navbar-inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    padding:8px 16px;
  }

  /* El menu deja de ser tira y pasa a panel desplegable. */
  .navbar-links{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    display:grid;
    gap:0;
    width:auto;
    overflow:visible;
    padding:var(--space-2) var(--space-4) var(--space-4);
    background:var(--bg,#F7F9F6);
    border-top:1px solid var(--line,rgba(169,168,163,.30));
    box-shadow:var(--elev-2);

    /* Cerrado. Se usa display y no visibility/opacity: son propiedades
       que otras reglas de cada pagina pueden pisar, y ademas visibility
       es discreta, asi que al ponerla en un transition el cambio se
       aplica recien al final. Con display el estado es inequivoco y el
       menu queda fuera del orden de tabulacion. */
    display:none;
  }

  /* Abre al instante. Se probo con animacion de entrada y el fill-mode
     dejaba el panel en opacity 0; para un menu, que aparezca de una es
     lo estandar y no hay estado intermedio que pueda fallar. */
  .navbar.esta-abierto .navbar-links{
    display:grid;
  }

  /* Cada opcion es una fila completa y comoda de tocar. */
  .navbar-links a{
    display:block;
    padding:14px 4px;
    font-size:16px;
    border-bottom:1px solid var(--line,rgba(169,168,163,.22));
    white-space:normal;
  }
  .navbar-links a:last-child{border-bottom:0;}

  .navbar-links .navbar-cta{
    margin-top:var(--space-3);
    text-align:center;
    border-bottom:0;
  }
}

@media (prefers-reduced-motion:reduce){
  .navbar-links,
  .nav-toggle__barras,
  .nav-toggle__barras::before,
  .nav-toggle__barras::after{transition:none;}
}

/* --- Barra superior: misma altura y mismo logo en todo el sitio -----------
   Estaban desparejas: 70px en index/nosotros/contacto, 80px en mision
   (padding 10px y logo de 60) y 77px en agenda, que usa .topbar.
   El logo tambien variaba entre 60 y 62px. */
.navbar-inner{
  padding:4px 20px;
}

.navbar-logo{
  height:62px;
}

.navbar-logo img,
.brand-link img{
  height:100%;
  width:auto;
  object-fit:contain;
  display:block;
}

/* agenda.html no usa .navbar sino .topbar. */
.topbar__inner{
  min-height:70px;
}
.brand-link img{
  height:62px;
}

@media (max-width:960px){
  /* En movil la barra baja de alto para no comerse la pantalla,
     pero igual en todas las paginas. */
  .navbar-inner{
    padding:6px 16px;
  }
  .navbar-logo{
    height:48px;
  }
  .topbar__inner{
    min-height:60px;
  }
  .brand-link img{
    height:48px;
  }
}

/* agenda sumaba 1px por un border-bottom. Las demas barras usan sombra,
   que no ocupa espacio: asi las cinco miden exactamente lo mismo. */
.topbar{
  border-bottom:0;
  box-shadow:0 1px 0 rgba(116,117,111,.14);
}

/* Accesos del equipo en el pie: correo y panel interno.
   Se pedian porque el personal andaba buscando el enlace cada vez.
   Deliberadamente discretos: el sitio es para pacientes, no para el equipo. */
.footer-equipo{
  border-top:1px solid var(--line,rgba(169,168,163,.30));
}
.footer-equipo-inner{
  max-width:1120px;
  margin:0 auto;
  padding:14px var(--space-5);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px var(--space-5);
}
.footer-equipo-label{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted,#777873);
}
.footer-equipo-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.footer-equipo-links a{
  display:inline-flex;
  align-items:center;
  padding:8px 16px;
  border:1px solid var(--line,rgba(169,168,163,.30));
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  color:var(--text,#444542);
  text-decoration:none;
  background:#fff;
  transition:border-color var(--dur,.45s) var(--ease,cubic-bezier(.16,1,.3,1)),
             background var(--dur,.45s) var(--ease,cubic-bezier(.16,1,.3,1));
}
.footer-equipo-links a:hover,
.footer-equipo-links a:focus-visible{
  border-color:var(--brand,#A3C9A0);
  background:var(--brand-soft,#F7F9F6);
}
@media (max-width:720px){
  .footer-equipo-inner{ justify-content:flex-start; }
  .footer-equipo-links{ width:100%; }
  .footer-equipo-links a{ flex:1 1 auto; justify-content:center; }
}