/* ============================================================
   BASE COMPARTIDA DE TODO EL SITIO — DIAZA
   (variables, barra superior, cabecera, footer y botón WhatsApp)

   Este archivo lo usan TODAS las páginas. Si cambias un color o
   un teléfono aquí, cambia en todo el sitio.
   ============================================================ */

:root {
  /* Colores globales del sitio (kit de Elementor del sitio original) */
  --color-primario: #1565AD;   /* azul DIAZA: barra superior, footer, hover del menú */
  --color-secundario: #07A831; /* verde: líneas divisorias e iconos */
  --color-texto: #919191;      /* gris de textos secundarios */
  --color-acento: #61CE70;     /* verde claro: subrayado del menú al pasar el mouse */
  --color-negro: #000000;
  --color-blanco: #FFFFFF;
  --fondo-celeste: #EEF6FF;    /* celeste de secciones claras */
  --hover-footer: #C8D5DC;     /* gris azulado: links del footer al pasar el mouse */

  /* Fuentes */
  --fuente-titulos: "Archivo", sans-serif;     /* títulos grandes */
  --fuente-texto: "Montserrat", sans-serif;    /* menú y textos */
  --fuente-footer: "Poppins", sans-serif;      /* footer */

  /* Ancho máximo del contenido (igual que Elementor) */
  --ancho-contenido: 1140px;
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--fuente-texto); font-size: 16px; color: var(--color-negro); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

.contenedor { max-width: var(--ancho-contenido); margin: 0 auto; width: 100%; }

/* Iconos SVG (mismo sistema que Elementor: se pintan con "fill") */
.icono { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; }

/* Enlace "Ir al contenido" (accesibilidad): oculto salvo con teclado */
.saltar-contenido {
  position: absolute; left: -9999px; top: 0; background: #fff; padding: 8px; z-index: 999;
}
.saltar-contenido:focus { left: 0; }

/* ============================================================
   BARRA SUPERIOR AZUL
   ============================================================ */
.barra-superior { background: var(--color-primario); }
.barra-superior__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
/* Columna izquierda: teléfonos y dirección (texto blanco 13px) */
.lista-contacto { flex: 0 0 70%; }
.lista-contacto li {
  display: flex; align-items: center; color: var(--color-blanco);
  font-size: 13px; font-weight: 400; padding: 2px 0;
}
.lista-contacto .icono { font-size: 14px; margin-right: 24px; fill: var(--color-blanco); }

/* Columna derecha: redes sociales (iconos blancos 18px) */
.lista-redes { display: flex; align-items: flex-end; justify-content: flex-end; flex: 1; margin-right: -9px; }
.lista-redes li { margin: 0 8px; }
.lista-redes .icono { font-size: 18px; fill: var(--color-blanco); transition: fill 0.3s; }
.lista-redes a:hover .icono { fill: var(--color-acento); }

/* ============================================================
   CABECERA BLANCA STICKY
   (se queda pegada arriba al hacer scroll)
   ============================================================ */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-blanco);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
}
.cabecera__inner { display: flex; align-items: center; }

/* Logo: 15% del ancho, enlaza a la portada */
.cabecera__logo { width: 15%; display: block; }

/* Menú: Montserrat 16px seminegrita, negro */
.menu-principal { width: 85%; }
.menu-principal ul { display: flex; justify-content: flex-end; }
.menu-principal li { margin: 0 10px; }
.menu-principal a {
  position: relative; display: block;
  padding: 13px 20px;
  font-family: var(--fuente-texto); font-size: 16px; font-weight: 600;
  color: var(--color-negro);
  transition: color 0.4s;
}
/* EFECTO: al pasar el mouse el texto se vuelve azul... */
.menu-principal a:hover,
.menu-principal a:focus,
.menu-principal a.activo { color: var(--color-primario); }
/* ...y crece un subrayado verde desde el centro */
.menu-principal a::after {
  content: ""; position: absolute; bottom: 0; left: 50%;
  width: 0; height: 0; background: var(--color-acento);
  transition: all 0.4s; z-index: 2;
}
.menu-principal a:hover::after,
.menu-principal a:focus::after,
.menu-principal a.activo::after { left: 0; width: 100%; height: 3px; }

/* Botón hamburguesa (oculto en escritorio) */
.menu-toggle {
  display: none; border: 0; cursor: pointer;
  background: var(--color-primario); color: var(--color-blanco);
  padding: 10px; border-radius: 3px; font-size: 20px; line-height: 0;
}
.menu-toggle svg { width: 1em; height: 1em; fill: var(--color-blanco); }
.menu-toggle__cerrar { display: none; }
.menu-toggle.abierto .menu-toggle__abrir { display: none; }
.menu-toggle.abierto .menu-toggle__cerrar { display: block; }

/* EFECTO "wobble-top": el icono se tambalea al pasar el mouse */
@keyframes wobble-top {
  16.65% { transform: skew(-12deg); }
  33.3%  { transform: skew(10deg); }
  49.95% { transform: skew(-6deg); }
  66.6%  { transform: skew(4deg); }
  83.25% { transform: skew(-2deg); }
  100%   { transform: skew(0); }
}
.menu-toggle:hover .wobble, .menu-toggle:focus .wobble {
  transform-origin: 0 100%;
  animation: wobble-top 1s ease-in-out 1;
}

/* ---------- BOTÓN "INTRANET" (recuadro verde al final del menú) ----------
   Lleva al sistema interno del centro (centromedicodiaza.com) y se abre en
   una pestaña nueva. Para cambiar la dirección, edítala en el HTML de las
   páginas (aparece en el menú de escritorio y en el menú móvil). */
.menu-intranet { display: flex; align-items: center; }
.menu-principal .menu-intranet a {
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--color-secundario);
  color: var(--color-blanco);
  font-weight: 700; letter-spacing: 0.4px;
  box-shadow: 0 10px 22px -12px rgba(7, 168, 49, 0.75);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s, background-color 0.25s;
}
/* Este botón NO lleva el subrayado verde de los demás ítems del menú */
.menu-principal .menu-intranet a::after { content: none; }
/* Al pasar el mouse se eleva y se aclara un poco */
.menu-principal .menu-intranet a:hover,
.menu-principal .menu-intranet a:focus {
  background: var(--color-acento);
  color: var(--color-blanco);
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -12px rgba(7, 168, 49, 0.85);
}
.menu-principal .menu-intranet a:active { transform: translateY(0) scale(0.97); }
.menu-principal .menu-intranet a:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 2px; }

/* En el menú móvil se ve como una barra verde a todo el ancho */
.menu-movil .menu-intranet { display: block; }
.menu-movil .menu-intranet a {
  background: var(--color-secundario);
  color: var(--color-blanco);
  font-weight: 700;
  border-bottom: 0;
}
.menu-movil .menu-intranet a:hover { background: var(--color-acento); color: var(--color-blanco); }

/* Menú desplegable móvil (cerrado por defecto) */
.menu-movil { display: none; background: var(--color-blanco); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.menu-movil.abierto { display: block; }
.menu-movil a {
  display: block; padding: 13px 20px;
  font-weight: 500; color: var(--color-negro);
  border-bottom: 1px solid #eee;
}
.menu-movil a:hover, .menu-movil a.activo { background: var(--color-primario); color: var(--color-blanco); }

/* ============================================================
   FOOTER AZUL
   ============================================================ */
.pie { background: var(--color-primario); color: var(--color-blanco); font-family: var(--fuente-footer); }
.pie__principal {
  display: flex; justify-content: space-between; align-items: stretch; gap: 30px;
  padding: 5% 8%;
}
/* Anchos de columnas en escritorio (los mismos del original: 24/15/19/23%) */
.pie__col--logo { width: 24%; }
.pie__col:nth-child(2) { width: 15%; }
.pie__col:nth-child(3) { width: 19%; }
.pie__col:nth-child(4) { width: 23%; }

.pie__col--logo img { width: 100%; }
.pie__lema { margin-top: 20px; font-family: var(--fuente-texto); font-size: 16px; }

.pie__titulo {
  font-size: 22px; font-weight: 600; text-transform: capitalize;
  line-height: 1.2em; margin-bottom: 20px;
}
.pie__lista li { display: flex; align-items: flex-start; padding: 5px 0; }
.pie__lista a { display: flex; align-items: flex-start; }
.pie__lista .icono { font-size: 14px; margin-top: 5px; margin-right: 8px; fill: var(--color-blanco); transition: fill 0.3s; }
.pie__lista span {
  font-size: 16px; font-weight: 300; line-height: 1.5em;
  color: var(--color-blanco); transition: color 0.3s;
}
/* EFECTO: los links del footer pasan de blanco a gris claro */
.pie__lista a:hover span { color: var(--hover-footer); }

.pie__reclamos { display: block; margin-top: 20px; }
.pie__reclamos img { width: 57%; }

/* Barra inferior del footer */
.pie__inferior {
  display: flex; align-items: center; min-height: 45px;
  padding: 0 8%; background: var(--color-primario);
}
/* Los enlaces legales ocupan toda la barra (la columna derecha con el
   crédito de la agencia se retiró del sitio) */
.pie__inferior-izq { width: 100%; display: flex; gap: 24px; }
.pie__inferior a { font-size: 16px; font-weight: 300; line-height: 1.5em; color: #FFFFFF; }
.pie__inferior a:hover { color: var(--hover-footer); }

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP
   Círculo verde abajo a la derecha, entra con rebote a los 3s
   (lo muestra js/comun.js) y se oscurece al pasar el mouse.
   ============================================================ */
@keyframes whatsapp-entrada {
  from { transform: scale3d(0, 0, 0); }
  to   { transform: scale3d(1, 1, 1); }
}
.whatsapp-flotante {
  position: fixed; right: 28px; bottom: 28px; z-index: 9000;
  width: 60px; height: 60px; border-radius: 50%;
  background: #25d366;
  box-shadow: 1px 6px 24px 0 rgba(7, 94, 84, 0.24);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.2s linear;
  animation: whatsapp-entrada 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}
.whatsapp-flotante[hidden] { display: none; }
.whatsapp-flotante svg { width: 60%; height: 60%; }
.whatsapp-flotante:hover { background: #128c7e; }

/* ============================================================
   RESPONSIVE de las partes compartidas
   Mismos puntos de corte que Elementor: tablet ≤1024px, móvil ≤767px
   ============================================================ */
@media (max-width: 1024px) {
  .barra-superior { padding: 4px 30px; }
  .lista-contacto li { font-size: 16px; }
  .cabecera__inner { padding: 20px; }
  .menu-principal a { padding: 13px 12px; }
  .menu-principal li { margin: 0 8.5px; }
  .pie__principal { padding: 30px 20px 40px; justify-content: space-around; align-items: flex-start; }
  .pie__lista span { font-size: 14px; }
  .pie__inferior { justify-content: space-between; padding: 0 5%; }
  .pie__inferior a { font-size: 14px; }
}

@media (max-width: 767px) {
  .barra-superior { padding: 15px 20px; }
  .barra-superior__inner { flex-direction: column; gap: 10px; }
  .lista-contacto { flex: none; }
  .lista-contacto li { justify-content: center; text-align: center; }
  .lista-contacto .icono { align-self: flex-start; margin-top: 5px; }
  .lista-redes { justify-content: center; margin-right: 0; }

  /* En móvil: logo 60% + hamburguesa; el menú horizontal se oculta */
  .cabecera__inner { justify-content: space-between; }
  .cabecera__logo { width: 60%; }
  .menu-principal { display: none; }
  .menu-toggle { display: block; }

  /* Footer apilado y centrado */
  .pie__principal { flex-wrap: wrap; padding: 30px; }
  .pie__col--logo, .pie__col:nth-child(2), .pie__col:nth-child(3), .pie__col:nth-child(4) { width: 100%; }
  .pie__col { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .pie__col--logo img { width: 77%; margin: 0 auto; }
  .pie__titulo { font-size: 18px; }
  .pie__inferior { flex-direction: column; padding: 10px 5%; }
  .pie__inferior-izq { width: 100%; justify-content: center; text-align: center; }
}

/* ============================================================
   TELÉFONO Y CORREO CLICABLES
   Los datos de contacto de la barra superior, del pie y del bloque
   "Teléfono" son enlaces tel:/mailto: para poder tocarlos desde el
   celular. Deben verse igual que el texto que los rodea.
   La regla `.pie__lista a { display: flex }` convertiría cada número
   en una fila propia, por eso se acota con `a.tel-enlace`.
   ============================================================ */
.tel-enlace { color: inherit; text-decoration: none; }
.tel-enlace:hover { text-decoration: underline; }
.pie__lista a.tel-enlace { display: inline; }