/* ==========================================================================
   EGES — hoja de estilo del tema
   Los colores y tipografías salen del manual de identidad (wiki: Identidad de
   Marca EGES). Se declaran UNA vez como variables para que ningún componente
   vuelva a escribir un hex a mano.
   ========================================================================== */

:root {
  /* Marca */
  --eges-azul: #0083CA;
  /* Aquí vivía `--eges-azul-oscuro: #00539F`, sin usarse en ningún sitio.
     `Identidad de Marca EGES` dice literalmente que ese azul NO es de marca:
     es el del Tailwind interno de myEGES. Sentado en el bloque «Marca» era
     cuestión de tiempo que alguien lo usara creyendo que sí. */
  --eges-magenta: #B70E5E;
  --eges-magenta-claro: #D1568F;
  --eges-fondo: #F6F8FB;
  --eges-tinta: #1F2D3D;
  --eges-verde-whatsapp: #128c7e;

  /* Tipografías del manual de identidad: Ofelia Display para títulos,
     Avenir LT Pro para lectura. Las carga Adobe Fonts (use.typekit.net) en
     todo el sitio. Fallback acordado en la wiki: Montserrat -> sans-serif. */
  --eges-tipo-titulo: "ofelia-display", "Montserrat", system-ui, sans-serif;
  --eges-tipo-texto: "avenir-lt-pro", "Montserrat", system-ui, sans-serif;

  /* Ritmo */
  --eges-ancho: 1180px;
  --eges-radio: 10px;
  --eges-sombra: 0 2px 14px rgba(0, 40, 80, .08);
}

/* Este archivo crece pieza por pieza según se migran las plantillas de
   Elementor. Cada bloque de abajo sustituye a una plantilla y, con ella, al
   snippet que la venía parchando. */

/* La fuente de lectura del sitio. Antes la ponía el kit de Elementor SOLO en
   sus widgets: al migrar el pie y el encabezado se quedaron con la fuente del
   sistema sin que nadie lo notara (medido el 2026-09-08). Puesta aquí, vale
   para toda pieza que salga de Elementor. Los widgets que aún son de Elementor
   traen su propia regla y no se ven afectados. */
body { font-family: var(--eges-tipo-texto); }

/* ==========================================================================
   ENCABEZADO  (sustituye a la plantilla Elementor 16 y a los parches de
   celular del snippet 9 para esta zona)
   ========================================================================== */

.eges-saltar {
  position: absolute; left: -9999px;
  background: var(--eges-azul); color: #fff; padding: 10px 16px; z-index: 100;
}
.eges-saltar:focus { left: 8px; top: 8px; }

/* --- barra de avisos --- */
/* El degradado nació copiando el de la barra de myEGES (`.tbar` en
   `webapp/templates/base.html`) —Emilio quiere que la web pública y la app se
   vean de la misma familia—, pero el 2026-09-10 él mismo lo acotó con el
   cuentagotas: se queda con el TRAMO CENTRAL, de #0472af a #008fdd, sin el
   #003D7A casi marino del arranque, que en la web pública pesaba demasiado.
   Ojo: siguen sin ser azules del manual de identidad, así que esta barra es la
   única excepción viva a «los colores salen del manual». Los dos tonos los
   eligió Emilio: no se «corrigen» hacia #0083CA sin hablarlo con él. */
.eges-avisos {
  background: linear-gradient(90deg, #0472af 0%, #008fdd 100%);
  color: #fff;
  font-size: 14px;
  padding: 9px 20px;
}
/* El aviso va centrado en la barra ENTERA, no en el hueco que dejan las redes:
   por eso el bloque de redes sale del flujo (absoluto a la derecha) en vez de
   ser una tercera columna. Con `justify-content:center` a secas, su ancho
   empujaría el texto ~20 px a la izquierda. */
.eges-avisos__interior {
  position: relative;
  max-width: var(--eges-ancho);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 22px;
}
.eges-avisos p { margin: 0; }
.eges-avisos__envio { font-weight: 600; }
.eges-avisos__redes {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 12px;
}
.eges-avisos__red {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; transition: color .15s;
}
/* La medida la pone aquí y no el SVG: la «f» de Facebook viene en un lienzo más
   alto que ancho (320x512), así que se igualan por ALTO —15 px las dos— y el
   ancho de la «f» sale solo. Igualarlas por ancho la haría gigante. */
.eges-avisos__red svg { display: block; height: 15px; width: auto; }
.eges-avisos__red--ig svg { width: 15px; }
/* Sin círculo: el icono es el que se tiñe. El magenta de marca es el «rojo» que
   pidió Emilio (manual de identidad: Magic Velvet #B70E5E).
   Colgaba de `a` —Facebook es un <span> sin enlace todavía— para no prometer un
   clic que no existe. Emilio lo cambió el 2026-09-10: los dos iconos se pintan
   igual aunque uno no lleve URL. Por eso el selector NO lleva `a.`, y por eso
   Facebook tampoco lleva `cursor:pointer`: se tiñe como Instagram, pero el
   puntero sigue siendo flecha mientras no haya a dónde ir. */
.eges-avisos__red:hover,
.eges-avisos__red:focus-visible { color: var(--eges-magenta); }

/* --- cabecera --- */
.eges-cabecera {
  background: #fff;
  box-shadow: var(--eges-sombra);
  position: sticky; top: 0; z-index: 60;
}
.eges-cabecera__interior {
  max-width: var(--eges-ancho);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex; align-items: center; gap: 26px;
}
.eges-cabecera__logo { flex: 0 0 auto; display: block; line-height: 0; }
.eges-cabecera__logo img { width: 270px; max-width: none; height: auto; display: block; }

/* El buscador ocupa el hueco que dejó el menú al bajar a su propia fila. Es el
   elástico de la fila: logo y botón de WhatsApp miden lo que miden. */
.eges-cabecera__buscador { flex: 1 1 auto; min-width: 0; }

/* Segunda fila: las categorías, sobre blanco y con su línea de separación. */
.eges-nav {
  border-top: 1px solid #E6ECF3;
}
.eges-nav__interior {
  max-width: var(--eges-ancho);
  margin: 0 auto;
  padding: 0 20px;
}
/* `space-between` es lo que pidió Emilio: repartidas, no apelotonadas en el
   centro. Pero repartir los siete enlaces —468 px de texto— en los 1140 px de
   la columna dejaba huecos de 112 px, y Emilio los pidió más juntos el
   2026-09-10. Se acota el ANCHO en vez de cambiar a `center` con un hueco fijo:
   así el reparto sigue siendo uniforme y no depende de la anchura de cada
   rótulo. A 740 px los huecos quedan en ~45. */
.eges-nav__lista {
  list-style: none; margin: 0; padding: 0;
  max-width: 740px; margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between;
}
/* `display:block` y no inline: un enlace inline con padding NO estira el alto
   de su fila, así que la franja blanca medía 25 px, el enlace 32, y el subrayado
   magenta del activo caía 5 px por DEBAJO del blanco, sobre la foto del hero
   (medido el 2026-09-10). En bloque el `<li>` crece con el enlace y el fondo de
   la franja termina exactamente donde empieza el subrayado: los dos se juntan y
   parecen un solo trazo, que es lo que pidió Emilio. Por eso el padding va
   entero ARRIBA — abajo cualquier hueco vuelve a separarlos. */
.eges-nav__lista a {
  display: block;
  color: var(--eges-azul);
  font-weight: 600; font-size: 15px; text-decoration: none;
  padding: 8px 0 0;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.eges-nav__lista a:hover { color: var(--eges-magenta); }
.eges-nav__lista .current-menu-item > a {
  color: var(--eges-magenta);
  border-bottom-color: var(--eges-magenta);
}

.eges-boton-wa {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--eges-verde-whatsapp); color: #fff;
  padding: 12px 18px; border-radius: 8px;
  font-weight: 700; font-size: 15px; text-decoration: none; line-height: 1.2;
}
.eges-boton-wa:hover { color: #fff; filter: brightness(1.08); }
/* En celular el rótulo largo empujaba la hamburguesa a otro renglón. */
.eges-boton-wa__corto { display: none; }

/* --- hamburguesa: solo en celular --- */
.eges-hamburguesa {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 42px; height: 38px; padding: 8px; flex: 0 0 auto;
}
.eges-hamburguesa span {
  display: block; height: 3px; border-radius: 2px;
  background: var(--eges-tinta); margin: 4px 0;
  transition: transform .2s ease, opacity .2s ease;
}
body.eges-menu-abierto .eges-hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.eges-menu-abierto .eges-hamburguesa span:nth-child(2) { opacity: 0; }
body.eges-menu-abierto .eges-hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Entre el menú de celular y la pantalla ancha el encabezado va justo: se
   encoge el logo y el botón se queda con su rótulo corto, que es lo que sobra
   antes que la navegación. */
@media (min-width: 981px) and (max-width: 1200px) {
  .eges-cabecera__interior { gap: 18px; }
  .eges-cabecera__logo img { width: 210px; }
  .eges-nav__lista { gap: 6px 13px; }
  .eges-boton-wa__largo { display: none; }
  .eges-boton-wa__corto { display: inline; }
  /* El placeholder largo no cabe en el campo estrecho de estas anchuras. */
  .eges-buscador--barra .eges-buscador__caja { padding-left: 14px; }
}

@media (max-width: 980px) {
  /* La barra de avisos crece con su contenido: con alto fijo el texto se
     cortaba en celular (medido el 2026-09-08). */
  .eges-avisos__interior { flex-direction: column; gap: 2px; text-align: center; }
  .eges-avisos { font-size: 12px; line-height: 1.35; padding: 7px 12px; }
  /* Las redes siguen absolutas a la derecha, así que el aviso se aparta de
     ellas: sin este hueco su segunda línea les pasa por debajo. Son dos iconos
     de 15 px con 12 de separación, más aire. */
  .eges-avisos__envio { padding: 0 52px; }

  /* Logo, botón y hamburguesa caben en UNA fila: 150+140+42+gaps < 390.
     Si el botón se va a su propio renglón, el encabezado ocupa media pantalla. */
  .eges-cabecera__interior { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
  .eges-cabecera__logo { order: 1; }
  .eges-cabecera__logo img { width: 150px; }
  .eges-boton-wa { order: 2; margin-left: auto; padding: 9px 12px; font-size: 13px; }
  .eges-boton-wa__largo { display: none; }
  .eges-boton-wa__corto { display: inline; }
  .eges-hamburguesa { display: block; order: 3; width: 38px; padding: 7px 4px; }

  /* El buscador se lleva su propio renglón: en la fila del logo no cabe (150 de
     logo + 140 de botón + 38 de hamburguesa ya llenan los 390). */
  .eges-cabecera__buscador { order: 4; flex: 1 1 100%; }

  /* `.eges-nav` ya no es hijo de la fila del logo —es la segunda fila del
     encabezado—, así que aquí no van `order` ni `flex-basis`: solo se esconde
     hasta que la hamburguesa lo abre, igual que antes. */
  .eges-nav { display: none; border-top: 0; }
  body.eges-menu-abierto .eges-nav { display: block; }
  .eges-nav__interior { padding: 0 12px 8px; }
  .eges-nav__lista {
    /* `max-width` es la medida del reparto en escritorio: en el desplegable de
       celular estrecharía la lista y la dejaría centrada a media pantalla. */
    max-width: none;
    flex-direction: column; gap: 0; justify-content: flex-start;
    border-top: 1px solid rgba(0,131,202,.15);
  }
  .eges-nav__lista li { border-bottom: 1px solid rgba(0,131,202,.12); }
  .eges-nav__lista a { display: block; padding: 13px 4px; border-bottom: 0; }
}

/* ==========================================================================
   PIE  (sustituye a la plantilla Elementor 26 y al snippet 8)
   Mantiene el aspecto acordado en julio: fondo claro, texto azul y una franja
   magenta arriba — el pie azul original se descartó entonces.
   ========================================================================== */

.eges-pie {
  background: var(--eges-fondo);
  color: var(--eges-azul);
  border-top: 9px solid transparent;
  border-image: linear-gradient(90deg, var(--eges-magenta), var(--eges-magenta-claro)) 1;
  padding: 46px 20px 0;
  font-size: 15px;
  line-height: 1.6;
}

.eges-pie__interior {
  max-width: var(--eges-ancho);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  align-items: flex-start;
}

/* La marca ocupa el ancho que sobra; las columnas son de ancho fijo.
   Así el pie no se descuadra al añadir o quitar un enlace. */
/* La marca crecía hasta 762 px y empujaba «Contacto» a un segundo renglón en
   cuanto el texto se hizo más ancho con Avenir. Con tope, los cuatro bloques
   caben: 430 + 175 + 175 + contacto + huecos <= 1140. */
.eges-pie__marca { flex: 1 1 380px; max-width: 430px; display: flex; gap: 24px; align-items: flex-start; }
/* flex:0 0 auto o el logo se comprime hasta ~100 px cuando el texto empuja */
.eges-pie__logo { flex: 0 0 auto; display: block; }
.eges-pie__logo img { width: 150px; max-width: none; height: auto; display: block; }
.eges-pie__texto { flex: 1 1 auto; }
.eges-pie__texto p { margin: 0 0 12px; }

.eges-pie__siguenos { font-weight: 700; margin-top: 18px !important; }
.eges-pie__red {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--eges-magenta); color: #fff; text-decoration: none;
  transition: transform .15s ease;
}
.eges-pie__red:hover { transform: translateY(-2px); color: #fff; }
/* El SVG viene de eges_icono() sin medida propia (lo comparte con la barra de
   avisos, que lo pinta a 15). Los 19 px de aquí son los que tenía el pie. */
.eges-pie__red svg { display: block; width: 19px; height: 19px; }

.eges-pie__columna { flex: 0 0 175px; }
/* Encoge si hace falta: el correo largo es lo que hacía crecer la columna. */
.eges-pie__contacto { flex: 0 1 auto; min-width: 250px; }
.eges-pie__columna h2 {
  font-family: var(--eges-tipo-titulo);
  font-size: 20px; margin: 0 0 14px; color: var(--eges-azul);
}
.eges-pie__columna ul { list-style: none; margin: 0; padding: 0; }
.eges-pie__columna li { margin-bottom: 9px; word-break: break-word; }
.eges-pie__columna span { font-weight: 600; }

.eges-pie a { color: var(--eges-azul); text-decoration: none; }
.eges-pie a:hover { color: var(--eges-magenta); }

.eges-pie__legal {
  max-width: var(--eges-ancho);
  margin: 38px auto 0;
  border-top: 1px solid rgba(0, 131, 202, .18);
  padding: 16px 0 22px;
  font-size: 13px;
}
.eges-pie__legal p { margin: 0; }

/* En pantallas de portátil los cuatro bloques no caben en un renglón (piden
   1180 px y hay 984 a 1024 px de ventana): «Contacto» se caía solo y dejaba un
   hueco grande bajo «Ayuda». Aquí la marca se lleva su propio renglón y las
   tres columnas van juntas debajo, sin huecos. */
@media (min-width: 901px) and (max-width: 1240px) {
  .eges-pie__marca { flex: 1 1 100%; max-width: none; }
}

/* En celular todo se apila: a 390 px cuatro columnas quedaban de 85 px y el
   texto se cortaba (medido el 2026-09-08 en el pie de Elementor). */
@media (max-width: 900px) {
  .eges-pie__interior { gap: 26px; }
  .eges-pie__marca { flex-direction: column; gap: 18px; }
  .eges-pie__columna, .eges-pie__contacto { flex: 1 1 100%; }
  .eges-pie__logo img { width: 190px; }
}

/* ==========================================================================
   FICHA DE PRODUCTO  (sustituye a la plantilla Elementor 492)
   Medidas tomadas del diseño en vivo el 2026-09-08 para que la migración no
   se note: tarjetas blancas de radio 20 sobre el fondo Ghost White, ancho de
   contenido 1140 px (el mismo del encabezado y el pie), título ofelia-display
   35/600 en azul de marca y botón WhatsApp #128c7e.
   ========================================================================== */

.eges-ficha {
  max-width: var(--eges-ancho);
  margin: 0 auto;
  padding: 22px 20px 44px;
}

.eges-ficha .woocommerce-breadcrumb {
  font-size: 15px;
  color: var(--eges-tinta);
  margin: 0 0 18px;
}
.eges-ficha .woocommerce-breadcrumb a { color: var(--eges-azul); text-decoration: none; }
.eges-ficha .woocommerce-breadcrumb a:hover { color: var(--eges-magenta); }

.eges-tarjeta {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 26px;
}

/* --- tarjeta principal: foto + datos --- */
.eges-ficha__principal { display: flex; gap: 36px; align-items: flex-start; }

.eges-ficha__foto { flex: 0 0 46%; }
.eges-ficha__imagen {
  display: block; width: 100%; height: auto;
  border-radius: 14px;
}

.eges-ficha__datos { flex: 1 1 auto; min-width: 0; }

.eges-ficha__titulo {
  font-family: var(--eges-tipo-titulo);
  font-size: 35px; font-weight: 600; line-height: 1.1;
  color: var(--eges-azul);
  margin: 0;
}

.eges-ficha__meta {
  list-style: none; margin: 22px 0 26px; padding: 0;
  display: flex; flex-direction: column; gap: 15px;
  font-size: 16px;
}
.eges-ficha__meta li { display: flex; align-items: center; gap: 13px; }
.eges-ficha__meta a { color: var(--eges-azul); text-decoration: none; }
.eges-ficha__meta a:hover { color: var(--eges-magenta); }

/* El icono no encoge: si lo hace, el texto largo lo aplasta contra el margen. */
.eges-ficha__icono {
  flex: 0 0 21px; width: 21px; height: 21px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--eges-azul);
}
.eges-ficha__icono svg { width: 100%; height: auto; display: block; }

.eges-ficha__cotizar {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--eges-verde-whatsapp); color: #fff;
  padding: 12px 18px; border-radius: 5px;
  font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none;
}
.eges-ficha__cotizar:hover { color: #fff; filter: brightness(1.08); }

.eges-ficha__aviso {
  margin: 22px 0 0;
  background: #E9F6F2; color: #31708F;
  border-left: 5px solid #00A36C;
  border-radius: 0 6px 6px 0;
  padding: 15px 18px;
  font-size: 16px; line-height: 1.5;
}

/* --- tarjeta de la ficha técnica --- */
.eges-ficha__descripcion h2 {
  font-family: var(--eges-tipo-titulo);
  font-size: 27px; font-weight: 600;
  color: var(--eges-azul);
  margin: 0 0 18px;
}
.eges-ficha__descripcion table { width: 100%; border-collapse: collapse; }
/* La tabla la escribe publicar.py con sus estilos en línea (color y relleno);
   aquí va SOLO lo que allí no se dice. Sin esto la columna del rótulo se lleva
   la mitad del ancho y el dato queda a 580 px de su etiqueta. */
.eges-ficha__descripcion th { width: 1%; font-weight: 700; }
/* WooCommerce pinta toda celda con recuadro de 1 px y un gris al 7% en las filas
   impares: la ficha se veía como una hoja de cálculo rayada (medido 2026-09-08).
   Se apaga y queda una sola línea entre renglones. */
.eges-ficha .eges-ficha__descripcion table tbody > tr > th,
.eges-ficha .eges-ficha__descripcion table tbody > tr > td {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(0, 131, 202, .14);
}
.eges-ficha .eges-ficha__descripcion table tbody > tr:last-child > th,
.eges-ficha .eges-ficha__descripcion table tbody > tr:last-child > td { border-bottom: 0; }

/* En celular la ficha de Elementor NO se apilaba: a 390 px las dos columnas se
   quedaban en 156 px y el título se salía de la tarjeta (medido 2026-09-08). */
@media (max-width: 980px) {
  .eges-ficha { padding: 14px 12px 32px; }
  .eges-tarjeta { padding: 20px 16px; border-radius: 16px; margin-bottom: 18px; }
  .eges-ficha .woocommerce-breadcrumb { font-size: 14px; margin-bottom: 14px; }

  .eges-ficha__principal { flex-direction: column; gap: 22px; }
  .eges-ficha__foto { flex: 1 1 auto; width: 100%; max-width: 380px; margin: 0 auto; }

  .eges-ficha__titulo { font-size: 26px; }
  .eges-ficha__meta { margin: 18px 0 22px; gap: 13px; }

  /* Botón a todo lo ancho: es la acción de la página y se pulsa con el pulgar. */
  .eges-ficha__cotizar { display: flex; width: 100%; justify-content: center; padding: 14px 18px; font-size: 16px; }

  .eges-ficha__descripcion h2 { font-size: 22px; }
  .eges-ficha__descripcion table { font-size: 15px; }
}

/* ==========================================================================
   CATÁLOGO  (sustituye a las plantillas Elementor 478 «Catálogo» y 593
   «categorías», y a la tarjeta del loop-item 446 en estas páginas)
   Medidas tomadas del diseño en vivo el 2026-09-08: contenido 1140 px, título
   ofelia-display 60/600 en azul de marca, tarjetas #F6F8FB de radio 15 con
   borde #E3E9F0, botón azul de radio 5 y cierre en degradado verde WhatsApp.
   ========================================================================== */

/* Etiqueta que solo leen los lectores de pantalla. */
.eges-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- portada --- */
.eges-catalogo__portada {
  /* Ruta relativa a la raíz: el dominio no se escribe en la hoja de estilo. */
  background-image: url("/wp-content/uploads/2026/07/farmacia-scaled.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  /* 108/152 y no 72/115: el titulo de Elementor traia ademas un relleno propio
     del 5%, y sin el la portada se encogia 70 px y el catalogo subia de golpe. */
  padding: 108px 4% 152px;
  text-align: center;
  position: relative;
}
/* El velo claro va DELANTE de la foto y DETRÁS del título: sin él, el azul de
   marca sobre la estantería no llega al contraste de lectura. */
.eges-catalogo__portada::before {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(233deg, #C9EAFC 0%, #FAFBFD 100%);
  opacity: .85;
}
.eges-catalogo__portada > * { position: relative; }

.eges-catalogo__portada h1 {
  font-family: var(--eges-tipo-titulo);
  font-size: 60px; font-weight: 600; line-height: 1.05;
  color: var(--eges-azul);
  margin: 0;
}
.eges-catalogo__filete {
  display: block; width: 130px; height: 0;
  border-top: 3px solid var(--eges-magenta);
  margin: 18px auto 0;
}

/* --- texto de entrada --- */
.eges-catalogo__entrada {
  max-width: var(--eges-ancho);
  margin: 0 auto;
  padding: 62px 20px 22px;
  font-size: 19px; line-height: 1.5; color: #010000;
  text-align: justify;
}

/* --- buscador --- */
.eges-buscador {
  width: min(100% - 40px, 1008px);
  margin: 0 auto 20px;
  background: var(--eges-fondo);
  border-radius: 15px;
  padding: 10px;
  position: relative;
}
.eges-buscador__caja {
  display: flex; align-items: center;
  background: #fff;
  border: 1px solid #CFD9E4;
  border-radius: 5px;
  padding: 8px;
}
.eges-buscador__lupa {
  flex: 0 0 22px; width: 22px; height: 22px;
  margin: 0 10px 0 12px; color: #7A7A7A;
}
.eges-buscador__lupa svg { width: 100%; height: 100%; display: block; }

/* Dos clases y no una: `input[type="search"]` de la hoja base gana a un
   selector de clase suelta, y le devolvia al campo su recuadro gris de 1 px
   -que ademas hacia saltar el boton de renglon en celular (medido a 390 px el
   2026-09-08). `flex-basis: 0` lo obliga a compartir renglon con la lupa. */
.eges-buscador__caja .eges-buscador__campo {
  flex: 1 1 0; min-width: 0;
  border: 0; background: none; box-shadow: none;
  font-family: inherit; font-size: 16px; line-height: 1.5;
  color: var(--eges-tinta);
  padding: 12px 12px 12px 0;
}
.eges-buscador__caja .eges-buscador__campo:focus { outline: 0; box-shadow: none; }
.eges-buscador__campo::placeholder { color: #7A7A7A; }

.eges-buscador__enviar {
  flex: 0 0 auto;
  border: 0; cursor: pointer;
  background: var(--eges-azul); color: #fff;
  font-family: inherit; font-size: 16px; line-height: 1.5;
  padding: 11px 18px; border-radius: 5px;
}
.eges-buscador__enviar:hover { background: var(--eges-magenta); }

/* --- el buscador del encabezado (variante «barra») ---
   La forma sale del ejemplo que trajo Emilio (yza.mx): una sola píldora gris
   clara, sin caja alrededor, y la lupa DENTRO a la derecha haciendo de botón.
   La lupa va en el azul de marca #0083CA, que es lo único que cambia respecto
   al ejemplo (allí es verde). */
.eges-buscador--barra {
  width: 100%; margin: 0; padding: 0;
  background: none; border-radius: 0;
}
.eges-buscador--barra .eges-buscador__caja {
  background: #F1F4F8;
  border: 1px solid #DDE5EE;
  border-radius: 999px;
  padding: 0 5px 0 20px;
}
/* El foco se marca en la píldora entera y no en el campo: el campo no tiene
   borde propio, así que sin esto teclear no se distingue de mirar. */
.eges-buscador--barra .eges-buscador__caja:focus-within {
  background: #fff;
  border-color: var(--eges-azul);
  box-shadow: 0 0 0 3px rgba(0, 131, 202, .12);
}
.eges-buscador--barra .eges-buscador__caja .eges-buscador__campo {
  font-size: 15px; padding: 11px 0;
}
.eges-buscador__lupa-boton {
  flex: 0 0 auto;
  border: 0; background: none; cursor: pointer;
  color: var(--eges-azul);
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: color .15s, background .15s;
}
.eges-buscador__lupa-boton svg { width: 21px; height: 21px; display: block; }
.eges-buscador__lupa-boton:hover { color: var(--eges-magenta); background: rgba(0, 131, 202, .08); }
/* El desplegable cuelga de la píldora, no de la caja gris de la otra variante:
   sin esto se pintaba 10 px metido por cada lado y 8 px subido. */
.eges-buscador--barra .eges-buscador__vivo {
  left: 0; right: 0; top: calc(100% + 6px);
}

/* Resultados en vivo: los pinta eges.js mientras se escribe. Enter y «COTIZAR»
   llevan igual a la página de resultados, así que sin JS no se pierde nada. */
.eges-buscador__vivo {
  position: absolute; left: 10px; right: 10px; top: calc(100% - 8px);
  z-index: 55;
  background: #fff;
  border: 1px solid #E3E9F0;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 8px 20px rgba(0, 40, 80, .12);
  max-height: 420px; overflow-y: auto;
}
.eges-buscador__vivo a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 131, 202, .10);
}
.eges-buscador__vivo a:last-child { border-bottom: 0; }
.eges-buscador__vivo a:hover, .eges-buscador__vivo a:focus { background: var(--eges-fondo); }
.eges-buscador__vivo img {
  flex: 0 0 44px; width: 44px; height: 44px; object-fit: contain; display: block;
}
.eges-buscador__vivo strong {
  display: block; font-weight: 600; font-size: 15px; line-height: 1.3;
  color: var(--eges-tinta);
}
.eges-buscador__vivo small { display: block; font-size: 13px; color: #6B7A8C; }
.eges-buscador__todos {
  justify-content: center;
  color: var(--eges-azul); font-weight: 600; font-size: 15px;
}
.eges-buscador__nada {
  padding: 14px 12px; margin: 0; font-size: 15px; color: #6B7A8C; text-align: center;
}

/* --- tira de categorías --- */
.eges-categorias {
  max-width: var(--eges-ancho);
  margin: 0 auto;
  padding: 14px 20px 28px;
}
.eges-categorias ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 5px;
}
.eges-categorias a {
  display: block;
  font-family: var(--eges-tipo-titulo);
  font-size: 16px; font-weight: 500;
  color: var(--eges-azul); text-decoration: none;
  padding: 10px 5px;
}
.eges-categorias a:hover { color: var(--eges-magenta); }

/* --- resultados de una búsqueda --- */
.eges-catalogo__cuenta {
  max-width: var(--eges-ancho);
  margin: 0 auto; padding: 0 20px 18px;
  font-size: 16px; color: var(--eges-tinta);
}
.eges-catalogo__cuenta a { color: var(--eges-azul); margin-left: 8px; }
.eges-catalogo__cuenta a:hover { color: var(--eges-magenta); }

.eges-catalogo__vacio {
  max-width: var(--eges-ancho);
  margin: 0 auto; padding: 10px 20px 80px;
  font-size: 18px; line-height: 1.6; color: var(--eges-tinta);
}

/* --- rejilla de tarjetas --- */
.eges-rejilla {
  max-width: var(--eges-ancho);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: stretch;
}

/* En una categoria la rejilla va pegada a la portada: alli no hay ni texto de
   entrada ni buscador que dejen aire. */
.eges-catalogo__portada + .eges-rejilla { padding-top: 48px; }

.eges-producto {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--eges-fondo);
  border: 1px solid #E3E9F0;
  border-radius: 15px;
  padding: 18px;
  transition: box-shadow .15s ease;
}
.eges-producto:hover { box-shadow: 5px 5px 7px rgba(0, 0, 0, .4); }

.eges-producto__foto { display: block; line-height: 0; }
.eges-producto__foto img {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 5px;
  display: block;
}

.eges-producto__titulo {
  font-family: var(--eges-tipo-titulo);
  font-size: 19px; font-weight: 600; line-height: 1.25;
  margin: 0;
}
.eges-producto__titulo a { color: var(--eges-azul); text-decoration: none; }
.eges-producto__titulo a:hover { color: var(--eges-magenta); }

.eges-producto__codigo {
  margin: 0;
  font-size: 15px; line-height: 1.5; color: #010000;
}

/* margin-top:auto deja todos los botones de la fila a la misma altura aunque
   los nombres midan distinto: es lo que hace que la rejilla se vea alineada. */
.eges-producto__boton {
  margin-top: auto; align-self: center;
  background: var(--eges-azul); color: #fff;
  font-family: var(--eges-tipo-titulo);
  font-size: 15px; font-weight: 500; letter-spacing: -0.5px; line-height: 1.2;
  text-decoration: none;
  padding: 12px 17px; border-radius: 5px;
}
.eges-producto__boton:hover { background: var(--eges-magenta); color: #fff; }

/* --- paginación --- */
.eges-paginacion {
  max-width: var(--eges-ancho);
  margin: 0 auto;
  padding: 38px 20px 0;
}
.eges-paginacion ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.eges-paginacion a, .eges-paginacion span {
  display: block;
  padding: 9px 14px; border-radius: 5px;
  font-size: 15px; line-height: 1.2;
  color: var(--eges-azul); text-decoration: none;
  border: 1px solid rgba(0, 131, 202, .25);
}
.eges-paginacion a:hover { color: #fff; background: var(--eges-magenta); border-color: var(--eges-magenta); }
.eges-paginacion .current { background: var(--eges-azul); color: #fff; border-color: var(--eges-azul); }
.eges-paginacion .dots { border-color: transparent; }

/* --- cierre verde --- */
/* El degradado es una regla del tema y no depende de JS. En Elementor sí: los
   fondos de los contenedores van en diferido y solo aparecen cuando su
   observador de scroll les pone `.e-lazyloaded`. Con texto blanco encima, eso
   es un bloque que se apaga entero si el JS no corre. */
.eges-cierre {
  background-image: linear-gradient(90deg, #075E54 0%, #128C7E 100%);
  margin-top: 90px;
  padding: 48px 20px;
}
.eges-cierre__interior {
  max-width: var(--eges-ancho);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 34px;
}
.eges-cierre__texto { flex: 1 1 auto; min-width: 0; color: #fff; }
.eges-cierre__texto h2 {
  font-family: var(--eges-tipo-titulo);
  font-size: 33px; font-weight: 600; line-height: 1.2;
  color: #fff; margin: 0 0 12px;
}
.eges-cierre__texto p { margin: 0; font-size: 19px; line-height: 1.5; color: #fff; }

.eges-cierre__boton {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: #128C7E;
  font-family: var(--eges-tipo-titulo);
  font-size: 15px; font-weight: 500; letter-spacing: -0.5px; line-height: 1.2;
  text-decoration: none;
  padding: 12px 17px; border-radius: 5px;
}
.eges-cierre__boton:hover { color: #075E54; filter: brightness(.97); }

/* En pantallas medianas caben dos tarjetas por renglón; una sola dejaría una
   columna de 700 px con una foto gigante. */
@media (max-width: 1024px) {
  .eges-rejilla { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .eges-catalogo__portada { padding: 78px 4% 104px; }
  .eges-catalogo__portada h1 { font-size: 46px; }
}

@media (max-width: 767px) {
  .eges-rejilla { grid-template-columns: 1fr; gap: 18px; }

  .eges-catalogo__portada { padding: 52px 16px 66px; }
  .eges-catalogo__portada h1 { font-size: 32px; }
  .eges-catalogo__filete { width: 90px; margin-top: 14px; }

  /* Justificado en una columna estrecha abre ríos blancos entre palabras. */
  .eges-catalogo__entrada {
    padding: 26px 20px 14px;
    font-size: 17px; text-align: left;
  }

  /* `:not(--barra)` en todas: estas medidas son de la caja gris del catálogo, y
     el buscador del encabezado es una píldora sin caja. Sin acotarlas le
     devolvían el padding de 8 px y le partían el renglón, y ganaban por ir
     después en el fichero (un media query no sube la especificidad). */
  .eges-buscador:not(.eges-buscador--barra) { width: min(100% - 24px, 1008px); padding: 8px; border-radius: 12px; }
  .eges-buscador:not(.eges-buscador--barra) .eges-buscador__caja { flex-wrap: wrap; }
  .eges-buscador__lupa { margin: 0 8px 0 6px; }
  .eges-buscador:not(.eges-buscador--barra) .eges-buscador__campo { padding: 10px 6px 10px 0; }
  /* El botón se lleva su propio renglón: a 390 px, junto al campo, dejaba un
     hueco de escritura de 150 px. */
  .eges-buscador__enviar { flex: 1 1 100%; margin-top: 8px; padding: 12px 18px; }
  .eges-buscador:not(.eges-buscador--barra) .eges-buscador__vivo { left: 8px; right: 8px; max-height: 320px; }
  .eges-buscador--barra .eges-buscador__vivo { max-height: 320px; }
  /* En celular la píldora se pega a los bordes del encabezado y aprieta un poco
     el texto: el placeholder es largo y a 390 px se recortaba a la mitad. */
  .eges-buscador--barra .eges-buscador__caja { padding-left: 16px; }
  .eges-buscador--barra .eges-buscador__caja .eges-buscador__campo { font-size: 14px; padding: 9px 0; }

  .eges-categorias { padding: 10px 12px 20px; }
  .eges-categorias ul { justify-content: flex-start; }
  .eges-categorias a { font-size: 15px; padding: 8px 4px; }

  .eges-rejilla, .eges-catalogo__cuenta, .eges-catalogo__vacio {
    padding-left: 14px; padding-right: 14px;
  }
  .eges-producto__titulo { font-size: 18px; }
  /* El botón se pulsa con el pulgar: a todo lo ancho de la tarjeta. */
  .eges-producto__boton { align-self: stretch; text-align: center; padding: 13px 17px; }

  .eges-paginacion { padding-top: 26px; }

  .eges-cierre { margin-top: 56px; padding: 34px 16px; }
  .eges-cierre__interior { flex-direction: column; align-items: flex-start; gap: 20px; }
  .eges-cierre__texto h2 { font-size: 24px; }
  .eges-cierre__texto p { font-size: 17px; }
  .eges-cierre__boton { align-self: stretch; justify-content: center; padding: 14px 17px; }
}

/* ==========================================================================
   PORTADA  (sustituye a la plantilla Elementor 60 y a los snippets 7, 9 y 11)
   Medidas tomadas del diseño en vivo el 2026-09-09: H1 ofelia-display 55/600,
   títulos de sección 40/600, antetítulos 15/500 en magenta, contenido 1140 px.
   Reusa lo que ya existe del catálogo: .eges-buscador, .eges-rejilla,
   .eges-producto y .eges-cierre.
   ========================================================================== */

.eges-ancho {
  max-width: var(--eges-ancho);
  margin: 0 auto;
  padding: 0 20px;
}

/* Antetítulo: el textito sobre cada título de sección. En el diseño va en
   mayúsculas por CSS, no tecleado, para que el texto siga siendo legible. */
.eges-kicker {
  font-family: var(--eges-tipo-titulo);
  font-size: 15px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
  margin: 0 0 10px;
}
.eges-kicker--magenta { color: var(--eges-magenta); }
.eges-kicker--blanco { color: #fff; }

.eges-titulo {
  font-family: var(--eges-tipo-titulo);
  font-size: 40px; font-weight: 600; line-height: 1.15;
  color: var(--eges-azul);
  margin: 0 0 16px;
}
.eges-titulo--blanco { color: #fff; }

/* --- hero --- */
/* Esto era `.eges-hero`, la banda de foto de 55 px de título que ocupaba la
   primera pantalla entera. El 2026-09-10 la sustituyó el carrusel de banners y
   su contenido bajó aquí: sigue siendo el ÚNICO H1 de la portada y el único
   sitio donde salen «oncología», «hematología» y «medicamento de patente».
   Ya no lleva foto de fondo —esa la pone el banner de arriba— ni velo: sobre
   blanco el azul de marca se lee mejor, y es una petición menos al servidor. */
.eges-presenta {
  background: #fff;
  padding: 52px 20px 46px;
}
.eges-presenta__interior {
  max-width: var(--eges-ancho);
  margin: 0 auto;
}

/* 44 y no los 55 de antes: aquí el título ya no es lo primero que se ve —lo es
   el banner—, y a 55 px competía con él y empujaba las categorías fuera de
   pantalla. */
.eges-presenta__titulo {
  font-family: var(--eges-tipo-titulo);
  font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.12;
  color: var(--eges-azul);
  margin: 0 0 18px;
  max-width: 17em;
}
/* La segunda mitad del título, en serif itálica magenta: es del diseño original
   (la clase `.serif-it` de Elementor) y es lo que le da carácter a la portada. */
.eges-presenta__titulo em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: var(--eges-magenta);
}

.eges-presenta__texto {
  font-size: 19px; line-height: 1.5; color: #010000;
  margin: 0 0 8px;
  max-width: 46em;
}

.eges-presenta__ayuda { margin: 14px 0 0; font-size: 16px; color: var(--eges-tinta); }
.eges-presenta__ayuda a { color: var(--eges-magenta); font-weight: 600; }
.eges-presenta__ayuda a:hover { color: var(--eges-azul); }

.eges-presenta__sellos {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  font-size: 15px; font-weight: 600; color: var(--eges-tinta);
}
.eges-presenta__sellos li { display: flex; align-items: center; gap: 9px; }
.eges-presenta__sello {
  flex: 0 0 30px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--eges-fondo); color: var(--eges-azul);
  box-shadow: var(--eges-sombra);
}
.eges-presenta__sello svg { width: 15px; height: 15px; }

/* --- los tres avisos --- */
/* En Elementor era un carrusel de uno en uno: para ver el segundo aviso había
   que esperar. Caben los tres, así que se enseñan los tres. */
.eges-avisos-fila { padding: 34px 20px; }
/* Ya no es rejilla de tres: su unico hijo es el carrusel, y un grid de tres
   columnas lo dejaria ocupando un tercio del ancho. */
.eges-avisos-fila__interior {
  max-width: var(--eges-ancho);
  margin: 0 auto;
}

/* El aviso ES la diapositiva: el `flex: 0 0 100%` se lo pone .eges-slider__slide.
   Las medidas salen del diseño original, no de mi criterio: al devolver el
   carrusel lo rehice "a ojo" y quedaba en pequeño — 22 px de título donde el
   diseño pedía 40, y sin la píldora del fondo. Medido de portada.css el
   2026-09-09: alto mínimo 280, radio 20, título 40/600, texto 19, botón 18
   siempre azul sobre blanco con radio 7, e icono enmarcado de 120. */
.eges-aviso {
  position: relative;
  display: flex; align-items: center; gap: 24px;
  min-height: 280px;
  border-radius: 20px;
  padding: 30px 40px;
  color: #fff;
  overflow: hidden;
}
.eges-aviso--azul { background-image: linear-gradient(90deg, #0074B4 0%, #0083CA 100%); }
.eges-aviso--magenta { background-image: linear-gradient(90deg, #9B085C 0%, #B70E5E 100%); }
.eges-aviso--verde { background-image: linear-gradient(90deg, #075E54 0%, #128C7E 100%); }

/* La píldora del diseño, abajo a la derecha y al 75% como en el original. */
.eges-aviso::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("/wp-content/uploads/2026/07/pildora.png");
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .75;
  pointer-events: none;
}
/* El contenido va POR ENCIMA de la píldora. */
.eges-aviso__texto, .eges-aviso__icono { position: relative; z-index: 1; }

.eges-aviso__texto { flex: 1 1 auto; min-width: 0; }
.eges-aviso h2 {
  font-family: var(--eges-tipo-titulo);
  font-size: 40px; font-weight: 600; line-height: 1.15;
  color: #fff; margin: 0 0 10px;
}
.eges-aviso p { margin: 0 0 22px; font-size: 19px; line-height: 1.45; color: #fff; }

/* El botón es azul sobre blanco en las TRES tarjetas, no del color de cada una:
   así lo tenía el diseño. */
.eges-aviso__boton {
  display: inline-block;
  background: #fff; color: var(--eges-azul);
  font-family: var(--eges-tipo-titulo);
  font-size: 18px; font-weight: 500; line-height: 1.2;
  text-decoration: none;
  padding: 13px 22px; border-radius: 7px;
}
.eges-aviso__boton:hover { color: var(--eges-magenta); }

/* Icono enmarcado, como el `view-framed` de Elementor. */
.eges-aviso__icono {
  flex: 0 0 120px; width: 120px; height: 120px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid #fff; border-radius: 16px;
  padding: 26px;
  color: #fff;
}
.eges-aviso__icono svg { width: 100%; height: 100%; }

/* --- categorías --- */
.eges-categorias-inicio {
  background: var(--eges-fondo);
  padding: 62px 0;
  text-align: center;
}
.eges-categorias-inicio .eges-titulo { margin-bottom: 34px; }

.eges-puertas {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
}
.eges-puertas a {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  height: 100%;
  background: #fff;
  border: 1px solid #E3E9F0;
  border-radius: 12px;
  padding: 20px 12px;
  text-decoration: none;
  color: #0074B4;
  font-family: var(--eges-tipo-titulo);
  font-size: 17px; font-weight: 500; line-height: 1.25;
  transition: box-shadow .15s ease, transform .15s ease;
}
.eges-puertas a:hover {
  box-shadow: var(--eges-sombra);
  transform: translateY(-2px);
  color: var(--eges-magenta);
}
.eges-puertas__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: inherit;
}
.eges-puertas__icono svg { width: 100%; height: auto; }

/* --- servicios --- */
.eges-servicios {
  background-image: linear-gradient(165deg, #0083CA 0%, #0074B4 100%);
  padding: 66px 0;
  text-align: center;
}
.eges-servicios__entrada {
  color: #fff; font-size: 17px; line-height: 1.5;
  margin: 0 auto 34px; max-width: 44em;
}
.eges-servicios__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  text-align: left;
}
.eges-servicios__lista li {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  padding: 22px 20px;
}
.eges-servicios__icono {
  display: inline-flex; width: 32px; height: 32px; color: #fff; margin-bottom: 12px;
}
.eges-servicios__icono svg { width: 100%; height: auto; }
.eges-servicios__lista h3 {
  font-family: var(--eges-tipo-titulo);
  font-size: 17px; font-weight: 500; line-height: 1.3;
  color: #fff; margin: 0 0 8px;
}
.eges-servicios__lista p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.92); }

/* --- últimos en llegar --- */
.eges-destacados { padding: 62px 0; text-align: center; }
.eges-destacados__entrada { font-size: 17px; color: var(--eges-tinta); margin: 0 0 32px; }
/* La rejilla es la del catálogo; aquí solo se le quita el ancho propio, que ya
   lo pone .eges-ancho, y se le devuelve la alineación a la izquierda. */
.eges-destacados .eges-rejilla { padding: 0; text-align: left; }
.eges-destacados__pie { margin: 34px 0 0; }

.eges-boton-azul {
  display: inline-block;
  background: var(--eges-azul); color: #fff;
  font-family: var(--eges-tipo-titulo);
  font-size: 15px; font-weight: 500; letter-spacing: -0.5px; line-height: 1.2;
  text-decoration: none;
  padding: 13px 20px; border-radius: 5px;
}
.eges-boton-azul:hover { background: var(--eges-magenta); color: #fff; }

/* --- laboratorios --- */
.eges-labs { background: var(--eges-fondo); padding: 46px 0; text-align: center; }

/* --- sucursales --- */
.eges-sucursales { padding: 62px 0; text-align: center; }
.eges-sucursales .eges-titulo { margin-bottom: 32px; }
.eges-sucursales__lista {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px;
  text-align: left;
}
.eges-sucursal {
  background: var(--eges-fondo);
  border: 1px solid #E3E9F0;
  border-radius: 14px;
  overflow: hidden;
}
.eges-sucursal__mapa {
  display: block; width: 100%; height: 220px; border: 0;
}
.eges-sucursal__datos { padding: 22px; }
.eges-sucursal__datos h3 {
  font-family: var(--eges-tipo-titulo);
  font-size: 24px; font-weight: 600;
  color: var(--eges-azul); margin: 0 0 14px;
}
.eges-sucursal__datos ul { list-style: none; margin: 0 0 18px; padding: 0; }
.eges-sucursal__datos li {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 9px; font-size: 15px; line-height: 1.45; color: var(--eges-tinta);
}
.eges-sucursal__datos li > span {
  flex: 0 0 17px; width: 17px; height: 17px; margin-top: 3px; color: var(--eges-azul);
}
.eges-sucursal__datos li > span svg { width: 100%; height: auto; display: block; }
.eges-sucursal__datos a { color: var(--eges-azul); text-decoration: none; }
.eges-sucursal__datos a:hover { color: var(--eges-magenta); }
/* El botón de WhatsApp del encabezado, aquí en bloque. Dos clases y no una:
   `.eges-sucursal__datos a` (0,2,0) le ganaba a `.eges-boton-wa` (0,1,0) y le
   pintaba el texto de AZUL sobre el verde — ilegible (medido el 2026-09-09). */
.eges-sucursal__datos .eges-boton-wa {
  display: inline-flex; color: #fff; text-decoration: none;
}
.eges-sucursal__datos .eges-boton-wa:hover { color: #fff; }

/* --- testimonio --- */
/* Era un carrusel con UN testimonio girando sobre sí mismo. Aquí es una cita. */
.eges-testimonio { background: #E4F5EE; padding: 54px 0; text-align: center; }
.eges-testimonio__estrellas { margin: 0 0 14px; color: #F5A623; font-size: 20px; letter-spacing: 3px; }
.eges-testimonio blockquote { margin: 0; }
.eges-testimonio blockquote p {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic; font-size: 24px; line-height: 1.45;
  color: var(--eges-azul);
  margin: 0 auto 20px; max-width: 34em;
}
.eges-testimonio footer { font-size: 15px; color: var(--eges-tinta); }
.eges-testimonio footer strong { display: block; font-weight: 700; }
.eges-testimonio footer span { display: block; opacity: .8; }

/* --- adaptación --- */
@media (max-width: 1024px) {
  /* El título ya no lleva medida fija aquí: `clamp()` lo resuelve solo entre
     28 y 44 px. Se deja el hueco por si vuelve a hacer falta afinarlo. */
  .eges-titulo { font-size: 32px; }
  .eges-puertas { grid-template-columns: repeat(3, 1fr); }
  .eges-servicios__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .eges-presenta { padding: 34px 16px 38px; }
  .eges-presenta__titulo { max-width: none; }
  .eges-presenta__texto { font-size: 17px; }
  .eges-presenta__sellos { gap: 10px 18px; font-size: 14px; }

  .eges-avisos-fila { padding: 24px 16px; }
  /* Las medidas de escritorio (280 px de alto, título de 40) no caben a 390. */
  .eges-aviso { padding: 22px 20px; gap: 12px; min-height: 0; border-radius: 16px; }
  .eges-aviso h2 { font-size: 24px; }
  .eges-aviso p { font-size: 16px; margin-bottom: 16px; }
  .eges-aviso__boton { display: block; text-align: center; font-size: 16px; }
  /* El icono decorativo se va: a 390 px le quita 120 px al texto que sí importa. */
  .eges-aviso__icono { display: none; }
  /* Y con él, la píldora del fondo, que sin el icono queda encima del texto. */
  .eges-aviso::after { background-size: 55% auto; opacity: .35; }

  .eges-categorias-inicio, .eges-destacados, .eges-sucursales { padding: 40px 0; }
  .eges-servicios { padding: 44px 0; }
  .eges-titulo { font-size: 26px; }

  .eges-puertas { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .eges-puertas a { font-size: 15px; padding: 16px 10px; }

  .eges-servicios__lista { grid-template-columns: 1fr; }
  .eges-sucursales__lista { grid-template-columns: 1fr; }
  .eges-sucursal__mapa { height: 180px; }

  .eges-labs { padding: 34px 0; }

  .eges-testimonio { padding: 38px 0; }
  .eges-testimonio blockquote p { font-size: 19px; }
}

/* ==========================================================================
   CARRUSEL  (los avisos y los logos de laboratorio de la portada)
   Un solo componente para los dos. La pista es scroll nativo con scroll-snap:
   sin JavaScript se sigue deslizando con el dedo y no se pierde ningún aviso.
   eges.js le añade encima el giro automático, las flechas y los puntos.
   ========================================================================== */

.eges-slider { position: relative; }

.eges-slider__pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* La barra de scroll se oculta: el control son las flechas y los puntos. El
     scroll sigue funcionando con el dedo y con la rueda. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.eges-slider__pista::-webkit-scrollbar { display: none; }

.eges-slider__slide { scroll-snap-align: start; flex: 0 0 100%; }

/* --- flechas --- */
.eges-slider__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .92);
  color: var(--eges-tinta);
  box-shadow: 0 2px 10px rgba(0, 40, 80, .18);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
}
.eges-slider__flecha:hover { background: #fff; color: var(--eges-magenta); }
.eges-slider__flecha--izq { left: 10px; }
.eges-slider__flecha--der { right: 10px; }

/* --- puntos --- */
.eges-slider__puntos {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; justify-content: center; gap: 8px;
}
.eges-slider__puntos button {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0, 131, 202, .30);
}
.eges-slider__puntos button:hover { background: rgba(0, 131, 202, .60); }
.eges-slider__puntos [aria-current="true"] { background: var(--eges-azul); width: 22px; border-radius: 5px; }

/* --- el carrusel de avisos: uno por pantalla --- */
.eges-slider--avisos .eges-slider__pista { gap: 20px; }
.eges-slider--avisos .eges-slider__slide { flex: 0 0 100%; }
/* Los avisos son tarjetas de color: las flechas van DENTRO, y por eso el
   contenido se aparta de los lados — si no, la flecha se come el principio de
   la frase (medido el 2026-09-09: tapaba «Consulta disponibilidad…»). */
.eges-slider--avisos .eges-aviso { padding-left: 58px; padding-right: 58px; }
.eges-slider--avisos .eges-slider__flecha { background: rgba(255, 255, 255, .85); }

/* --- el carrusel de logos: varios por pantalla --- */
.eges-slider--labs .eges-slider__pista { gap: 20px; padding: 4px 0; }
.eges-slider--labs .eges-slider__slide {
  flex: 0 0 calc((100% - 60px) / 4);
  background: #fff;
  border-radius: 10px;
  padding: 16px 22px;
  display: flex; align-items: center; justify-content: center;
  min-height: 76px;
}
.eges-slider--labs img { width: auto; height: 38px; max-width: 100%; display: block; }
/* Las flechas de los logos se salen un poco, para no taparlos. */
.eges-slider--labs .eges-slider__flecha--izq { left: -6px; }
.eges-slider--labs .eges-slider__flecha--der { right: -6px; }

@media (max-width: 1024px) {
  .eges-slider--labs .eges-slider__slide { flex: 0 0 calc((100% - 40px) / 3); }
}

@media (max-width: 767px) {
  .eges-slider--avisos .eges-slider__pista { gap: 12px; }
  /* Sin flechas en celular, el hueco que les hacia sitio sobra. */
  .eges-slider--avisos .eges-aviso { padding-left: 20px; padding-right: 20px; }
  .eges-slider--labs .eges-slider__slide {
    flex: 0 0 calc((100% - 20px) / 2);
    min-height: 62px; padding: 12px 16px;
  }
  .eges-slider--labs img { height: 30px; }
  /* En celular sobra la flecha: se desliza con el dedo y estorba al pulsar. */
  .eges-slider__flecha { display: none; }
}

/* ==========================================================================
   EL CARRUSEL DE BANNERS  (modo «fundido»)
   Sustituye al hero grande de la portada. Las diapositivas NO se deslizan: se
   apilan en el mismo sitio y se cruzan por opacidad, como el ejemplo que trajo
   Emilio (curitek), que ahí lo hace un plugin de pago.

   Lo único que se anima es `opacity` y `transform`: son las dos propiedades que
   el navegador resuelve en la tarjeta gráfica sin volver a dibujar la página.
   Animar `left`, `top` o `width` es lo que traba un sitio al hacer scroll.
   ========================================================================== */
.eges-banners { background: var(--eges-fondo); }

.eges-slider--banners .eges-slider__pista {
  display: grid;                 /* todas en la MISMA celda: apiladas */
  overflow: visible;             /* sin scroll: aquí no se desliza nada */
  scroll-snap-type: none;
}
.eges-slider--banners .eges-slider__slide {
  grid-area: 1 / 1;
  position: relative;
  flex: none;
  min-width: 0;
  opacity: 0;
  /* `visibility` además de la opacidad: una diapositiva a opacidad 0 sigue
     recibiendo clics, y el botón invisible de la 3 se comía el de la 1. */
  visibility: hidden;
  transition: opacity .8s ease, visibility 0s linear .8s;
}
.eges-slider--banners .eges-slider__slide.es-activa {
  opacity: 1;
  visibility: visible;
  transition: opacity .8s ease, visibility 0s;
  z-index: 1;
}

.eges-banner {
  display: block;
  width: 100%;
  /* El alto va en `clamp` y NO en `aspect-ratio` + `max-height`.
     Esa pareja tiene una trampa que costó un banner roto (Emilio, 2026-09-10,
     alejando el zoom del navegador): cuando el alto llega a su tope, el
     navegador **encoge el ANCHO** para conservar la proporción. Medido: a 2560
     y a 3400 px de ventana el banner se quedaba clavado en 1920 y dejaba el
     resto en blanco, mientras el ejemplo de curitek seguía a todo lo ancho.
     Con `height` el hueco queda igual de reservado —la página no da el salto
     que Google penaliza— y el ancho es siempre el 100 %.
     29vw es la proporción 560/1920; los topes evitan la franja aplastada en
     pantallas panorámicas y el banner gigante en las muy anchas. */
  /* El alto lo elige Emilio por banner (`--alto`, en px sobre 1920). El
     `clamp` sigue: el mínimo evita la franja aplastada en pantallas
     panorámicas, y el máximo es el alto que él pidió. */
  height: clamp(240px, calc(var(--alto, 560) * 100vw / 1920), calc(var(--alto, 560) * 1px));
  overflow: hidden;
}
.eges-banner__foto, .eges-banner__foto img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;             /* la foto llena el hueco sin deformarse */
  /* Y QUÉ parte se ve cuando hay que recortar. Estaba siempre al centro: en una
     foto con la cara arriba o el producto abajo, eso es justo lo que se pierde. */
  object-position: var(--foco, center center);
}

/* «Toda la imagen enlaza»: una capa transparente por encima de todo. No envuelve
   al banner porque dentro hay un botón que también sería <a>, y un enlace dentro
   de otro no es HTML válido. `z-index` 2 para pasar por delante del texto. */
.eges-banner__manta {
  position: absolute; inset: 0; z-index: 2;
  display: block;
}

/* ==========================================================================
   EL DISEÑO DEL BANNER — lo decide Emilio desde el editor del panel.

   Hasta el 2026-09-10 esto eran nueve posiciones y tres tamaños cerrados. Él
   pidió libertad: colocar el texto donde quiera, del tamaño que quiera y del
   color que quiera. Así que aquí ya no hay valores, hay VARIABLES: `--x`, `--y`,
   `--tit`, `--col-tit`… las escribe la plantilla en el `style` de cada banner
   desde `eges_banner_estilo()`, ya validadas.

   Las medidas de letra están en píxeles «a 1920 de ancho» y se escalan con
   `cqw` (el ancho del propio banner), no con `vw`. Dos motivos: el banner es el
   contenedor real —si algún día no ocupa toda la pantalla, sigue cuadrando— y
   `100vw` incluye la barra de scroll, que provoca desbordes de un pelo.
   ========================================================================== */
/* El contenedor de medida es el VELO, no el banner.
   Las letras se calculan con `100cqw / 1920`, así que escalan con el ancho del
   contenedor más cercano. Estando en `.eges-banner` —que ocupa la pantalla
   entera— en modo «respetar el diseño» las letras crecían con la PANTALLA y no
   con la pieza: medido a 3400 px, el título salía en 78 px cuando debía medir
   44, y se desbordaba. El velo mide siempre lo mismo que la pieza, así que es
   el que manda. */
.eges-banner__texto { container-type: inline-size; }

/* --- «Respetar el diseño»: la pieza a su ancho, centrada, y los lados en color.
   En una pantalla de 3400 px, `cover` estira la foto hasta cubrirla entera y el
   encuadre de una pieza diseñada se va al traste. Aquí la pieza se queda a su
   ancho máximo en el centro y el sobrante se rellena — que es lo que hace el
   ejemplo que trajo Emilio.

   Lo que lo hace funcionar de verdad: el velo se acota al MISMO ancho, así que
   el `--x` del bloque de texto es un porcentaje **de la pieza** y no de la
   pantalla. Sin eso, el texto colocado al 29 % se iría a donde ya no hay
   diseño. */
.eges-banner--enc-pieza { background: var(--fondo, #002846); }
.eges-banner--enc-pieza .eges-banner__foto {
  width: min(100%, calc(var(--max, 1920) * 1px));
  margin-inline: auto;
}

/* El VELO: a todo lo ancho, para que no se vea dónde empieza. */
.eges-banner__texto {
  position: absolute; inset: 0;
  color: #fff;
  pointer-events: none;   /* la foto de debajo sigue siendo pulsable */
}
.eges-banner--enc-pieza .eges-banner__texto {
  inset: 0 auto;
  left: 50%; transform: translateX(-50%);
  width: min(100%, calc(var(--max, 1920) * 1px));
}
.eges-banner--velo-plano     .eges-banner__texto { background: var(--velo); }
.eges-banner--velo-degradado.eges-banner--lado-izq .eges-banner__texto {
  background: linear-gradient(90deg, var(--velo) 0%, var(--velo-medio) 62%, var(--velo-nada) 100%);
}
.eges-banner--velo-degradado.eges-banner--lado-der .eges-banner__texto {
  background: linear-gradient(270deg, var(--velo) 0%, var(--velo-medio) 62%, var(--velo-nada) 100%);
}
/* Bloque centrado: el velo se abre desde el centro hacia los dos lados. Un
   degradado lateral se desvanece justo donde está el texto. */
.eges-banner--velo-degradado.eges-banner--lado-centro .eges-banner__texto {
  background: linear-gradient(90deg, var(--velo-nada) 0%, var(--velo-medio) 18%,
                              var(--velo) 38%, var(--velo) 62%, var(--velo-medio) 82%, var(--velo-nada) 100%);
}
.eges-banner--velo-sin  .eges-banner__texto,
.eges-banner--velo-caja .eges-banner__texto { background: none; }

/* El BLOQUE de texto: donde Emilio lo dejó, en % del banner. En porcentaje y no
   en píxeles porque es lo único que aguanta de 390 a 5000 px de ancho. */
.eges-banner__col {
  position: absolute;
  left: var(--x, 8%); top: var(--y, 28%);
  width: var(--ancho, 46%);
  display: flex; flex-direction: column;
  /* El hueco iba en `em`, así que subir la letra separaba las partes. Ahora es
     suyo, en px sobre 1920 como el resto de medidas. */
  gap: calc(var(--hueco, 18) * 100cqw / 1920);
  pointer-events: auto;   /* el botón vuelve a ser pulsable */
}
.eges-banner--al-izq    .eges-banner__col { align-items: flex-start; text-align: left; }
.eges-banner--al-centro .eges-banner__col { align-items: center;     text-align: center; }
.eges-banner--al-der    .eges-banner__col { align-items: flex-end;   text-align: right; }
/* «Caja»: el velo solo detrás del texto, para fotos donde no se puede oscurecer
   toda la imagen sin estropearla. */
.eges-banner--velo-caja .eges-banner__col {
  background: var(--velo);
  padding: calc(var(--caja-pad, 20) * 100cqw / 1920) calc(var(--caja-pad, 20) * 1.2 * 100cqw / 1920);
  border-radius: calc(var(--caja-rad, 10) * 100cqw / 1920);
}

/* Las letras. `max()` con un mínimo en píxeles: por debajo de eso no se lee en
   ninguna pantalla, por mucho que la proporción diga otra cosa. */
.eges-banner__col .eges-kicker {
  font-family: var(--txt-fam, var(--eges-tipo-texto));
  font-size: max(11px, calc(var(--kick, 15) * 100cqw / 1920));
  /* Antes heredaba el color del título y las mayúsculas de la clase general del
     sitio: no se podía tener un antetítulo de otro color ni en minúsculas. */
  color: var(--kick-col, #fff);
  font-weight: var(--kick-peso, 500);
  text-transform: var(--kick-may, uppercase);
  letter-spacing: var(--kick-esp, .04em);
  margin: 0;
}
.eges-banner__titulo {
  font-family: var(--tit-fam, var(--eges-tipo-titulo));
  font-weight: var(--tit-peso, 700);
  font-style: var(--tit-it, normal);
  text-transform: var(--tit-may, none);
  letter-spacing: var(--tit-esp, 0);
  font-size: max(20px, calc(var(--tit, 46) * 100cqw / 1920));
  line-height: var(--tit-alto, 1.1); margin: 0;
  color: var(--col-tit, #fff);
}
.eges-banner__frase {
  font-family: var(--txt-fam, var(--eges-tipo-texto));
  font-weight: var(--txt-peso, 400);
  font-size: max(13px, calc(var(--txt, 19) * 100cqw / 1920));
  line-height: var(--txt-alto, 1.45); margin: 0;
  color: var(--col-txt, #fff);
}
.eges-banner__boton { font-family: var(--txt-fam, var(--eges-tipo-texto)); }
.eges-banner--sombra-si .eges-banner__titulo,
.eges-banner--sombra-si .eges-banner__frase,
.eges-banner--sombra-si .eges-kicker { text-shadow: 0 2px 14px rgba(0, 30, 60, .45); }

/* El botón: color, tamaño y esquinas los pone Emilio. El `min()` del radio deja
   que 999 signifique «píldora» sin que la píldora se deforme al encoger. */
.eges-banner__boton {
  margin-top: 0;
  display: inline-block;
  background: var(--btn-bg, #b70e5e);
  color: var(--btn-fg, #fff);
  font-size: max(12px, calc(var(--btn-px, 16) * 100cqw / 1920));
  /* El relleno iba en `em`: subir la letra engordaba el botón y no había forma
     de tener letra pequeña en botón grande. Ahora es medida propia, en px sobre
     1920, igual que todo lo demás (pedido de Emilio, 2026-09-10). */
  padding: calc(var(--btn-alto, 14) * 100cqw / 1920) calc(var(--btn-ancho, 30) * 100cqw / 1920);
  border-radius: min(999px, calc(var(--btn-radio, 999) * 100cqw / 1920));
  border: calc(var(--btn-borde, 0) * 100cqw / 1920) solid var(--btn-bcol, #fff);
  font-weight: 700; text-decoration: none;
  transition: transform .15s, filter .15s;
}
a.eges-banner__boton:hover { color: var(--btn-fg, #fff); filter: brightness(1.12); transform: translateY(-2px); }

/* Las capas entran escalonadas: antetítulo, título, frase y botón, cada uno un
   poco después del anterior (`--paso` lo pone la plantilla). Es LO ÚNICO que
   hace que el banner del ejemplo parezca caro, y aquí son unas líneas de CSS.
   La animación arranca al ponerse `.es-activa`, no al cargar: si no, se
   dispararía en las cinco diapositivas a la vez, con cuatro sin verse.

   Desde el 2026-09-10 el movimiento lo elige Emilio en el editor: qué entrada,
   cuánto dura y cuánto se espera entre una parte y la siguiente. Solo se anima
   `opacity` y `transform`, que es lo que el navegador resuelve en la tarjeta
   gráfica sin volver a dibujar la página. */

.eges-slider--banners .eges-slider__slide .eges-capa { opacity: 0; }
.eges-slider--banners .eges-slider__slide.es-activa .eges-capa {
  /* `both` deja la capa en su estado final: sin él, al acabar vuelve a
     `opacity: 0` y el texto desaparece. El retraso base de 180 ms espera a que
     el fundido de la foto haya avanzado; encima va el escalonado. */
  animation-duration: var(--anim-ms, 550ms);
  animation-timing-function: ease;
  animation-fill-mode: both;
  animation-delay: calc(var(--paso, 0) * var(--anim-paso, 120ms) + 180ms);
}
.eges-slider--banners .eges-banner--anim-aparecer.es-activa  .eges-capa { animation-name: eges-entra-aparecer; }
.eges-slider--banners .eges-banner--anim-subir.es-activa     .eges-capa { animation-name: eges-entra-subir; }
.eges-slider--banners .eges-banner--anim-bajar.es-activa     .eges-capa { animation-name: eges-entra-bajar; }
.eges-slider--banners .eges-banner--anim-izquierda.es-activa .eges-capa { animation-name: eges-entra-izquierda; }
.eges-slider--banners .eges-banner--anim-derecha.es-activa   .eges-capa { animation-name: eges-entra-derecha; }
.eges-slider--banners .eges-banner--anim-acercar.es-activa   .eges-capa { animation-name: eges-entra-acercar; }
/* «Sin movimiento» no es «sin animación»: la capa arranca invisible, así que hay
   que encenderla a mano o el texto no aparece nunca. */
.eges-slider--banners .eges-banner--anim-ninguna .eges-capa { opacity: 1; animation: none; }

/* --- el movimiento lento de la foto ---
   Seis segundos, que es lo que dura un banner delante. `alternate` en el paneo
   para que no dé el salto de vuelta al empezar de nuevo. */

.eges-banner--foto-acercar.es-activa .eges-banner__foto img { animation: eges-foto-acercar 6s ease-out both; }
.eges-banner--foto-alejar.es-activa  .eges-banner__foto img { animation: eges-foto-alejar  6s ease-out both; }
.eges-banner--foto-panear.es-activa  .eges-banner__foto img { animation: eges-foto-panear  6s ease-in-out infinite alternate; }

/* En celular la foto vertical manda: el recorte central de una panorámica deja
   fuera casi todo, y el texto necesita más aire del que da una franja de 560. */
@media (max-width: 700px) {
  /* Misma regla que arriba y por el mismo motivo: alto en `clamp`, nunca
     `aspect-ratio` con tope. El máximo lo pone Emilio por banner. */
  .eges-banner { height: clamp(260px, 110vw, calc(var(--alto-movil, 470) * 1px)); }

  /* En celular el diseño libre se ignora a propósito (decisión de Emilio,
     2026-09-10): un bloque colocado al 70 % de ancho, en una columna de 350 px,
     no es una decisión de diseño — es texto apretado contra un borde. Aquí el
     texto va abajo, a lo ancho y alineado a la izquierda, que es lo único que
     se lee bien con cualquier foto. Los colores y el velo que eligió SÍ se
     respetan: lo que se ignora es la POSICIÓN y el ancho.

     Los selectores llevan `[class]` para ganar en especificidad: las reglas de
     arriba son de dos clases y un `@media` no sube la especificidad (la misma
     trampa que costó el buscador del encabezado ese día). */
  .eges-banner[class] .eges-banner__texto { padding: 0 16px 26px; }
  .eges-banner[class] .eges-banner__col {
    position: static;
    width: auto;
    align-items: flex-start;
    text-align: left;
    margin-top: auto;         /* al fondo del banner */
    padding: 0;
  }

  /* ...salvo que Emilio haya diseñado la vista de celular aparte. Entonces
     manda la suya, con sus propias medidas —estas en px sobre 390, no sobre
     1920— y su propia posición. */
  .eges-banner--cel-propio[class] .eges-banner__texto { padding: 0; display: block; }
  .eges-banner--cel-propio[class] .eges-banner__col {
    position: absolute;
    left: var(--m-x, 5%); top: var(--m-y, 58%);
    width: var(--m-ancho, 90%);
    margin: 0;
  }
  .eges-banner--cel-propio.eges-banner--mal-izq[class]    .eges-banner__col { align-items: flex-start; text-align: left; }
  .eges-banner--cel-propio.eges-banner--mal-centro[class] .eges-banner__col { align-items: center;     text-align: center; }
  .eges-banner--cel-propio.eges-banner--mal-der[class]    .eges-banner__col { align-items: flex-end;   text-align: right; }
  .eges-banner--cel-propio[class] .eges-banner__titulo { font-size: max(14px, calc(var(--m-tit, 26) * 100cqw / 390)); }
  .eges-banner--cel-propio[class] .eges-banner__frase  { font-size: max(11px, calc(var(--m-txt, 15) * 100cqw / 390)); }
  .eges-banner--cel-propio[class] .eges-kicker         { font-size: max(9px,  calc(var(--m-kick, 12) * 100cqw / 390)); }
  .eges-banner[class] .eges-banner__texto {
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  /* El velo se endereza: en vertical tiene que subir desde abajo, que es donde
     está el texto, y no cruzar la foto de lado. */
  .eges-banner--velo-degradado[class] .eges-banner__texto {
    background: linear-gradient(0deg, var(--velo) 0%, var(--velo-medio) 46%, var(--velo-nada) 100%);
  }
  /* Y las letras dejan de escalar con el ancho: a 390 px la proporción de un
     banner de 1920 deja el título en 9 px. */
  .eges-banner[class] .eges-banner__titulo { font-size: 26px; }
  .eges-banner[class] .eges-banner__frase  { font-size: 15px; }
  .eges-banner[class] .eges-kicker         { font-size: 12px; }
  .eges-banner[class] .eges-banner__boton  { font-size: 15px; border-radius: min(999px, var(--btn-radio, 999) * 1px); }
  /* El velo en «caja» también deja de escalar: su margen interior sale de la
     proporción de 1920, y a 390 px quedaba en 3 px — el fondo se pegaba a las
     letras y el rectángulo no cuadraba con el texto. */
  .eges-banner--velo-caja[class] .eges-banner__col {
    padding: 14px 16px; border-radius: 12px;
  }
}

/* Quien pide menos movimiento no recibe un carrusel que se mueve solo. Lo
   respeta también el JS, que no arranca el giro automático. */
@media (prefers-reduced-motion: reduce) {
  .eges-slider__pista { scroll-behavior: auto; }
  /* Los banners cambian igual con las flechas, pero de golpe y sin que las
     capas entren volando: el mareo que evita esto es real. */
  .eges-slider--banners .eges-slider__slide { transition: none; }
  .eges-slider--banners .eges-slider__slide.es-activa .eges-capa { animation: none; opacity: 1; }
  /* Y la foto se queda quieta, elija Emilio lo que elija: el acercamiento lento
     es justo el movimiento que peor sienta a quien pide menos movimiento.
     `[class]` no es adorno: la regla que enciende la animación es de tres clases
     y esta era de dos, así que perdía y la foto seguía moviéndose. Medido con el
     navegador en «reducir movimiento»: el texto sí paraba, la foto no. Un
     `@media` NO sube la especificidad — tercera vez hoy. */
  .eges-slider--banners .eges-banner[class] .eges-banner__foto img {
    animation: none; transform: none;
  }
}

/* ============================================================================
   PÁGINAS DE CONTENIDO
   Las ocho que quedaban en Elementor (Nosotros, Especialidades, Servicios,
   Sucursales, Contacto, Cómo Cotizar, Facturación, Preguntas Frecuentes).
   Todas comparten portada y ritmo; lo propio de cada una va más abajo.
   Medidas tomadas del original con `web/medir.py` a 1440 px, el 2026-09-09.
   ========================================================================== */

/* --- portada: foto, velo claro, título y filete --- */
.eges-portada {
  /* Ruta relativa a la raíz: el dominio no se escribe en la hoja de estilo. */
  background-image: url("/wp-content/uploads/2026/07/farmacia-scaled.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  /* 138/117 medidos: el 5 % del contenedor MÁS el 5 % propio del título. */
  padding: 138px 4% 117px;
  text-align: center;
  position: relative;
}
/* El velo va DELANTE de la foto y DETRÁS del título. */
.eges-portada::before {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(233deg, #C9EAFC 0%, #FAFBFD 100%);
  opacity: .85;
}
.eges-portada > * { position: relative; }

.eges-portada h1 {
  font-family: var(--eges-tipo-titulo);
  font-size: 60px; font-weight: 600; line-height: 1;
  color: var(--eges-azul);
  margin: 0;
}
/* En el original esto se colocaba con un margin-top:-65px fijo, y a 390 px la
   línea magenta cruzaba el título. Aquí va debajo, en el flujo. */
.eges-portada__filete {
  display: block; width: 132px; height: 0;
  border-top: 3px solid var(--eges-magenta);
  margin: 24px auto 0;
}

/* --- cuerpo de la página --- */
/* El aire de arriba va aquí y no en el primer elemento, porque no todas las
   páginas empiezan por el mismo: Preguntas Frecuentes arranca en una caja. */
.eges-pagina { padding-top: 116px; padding-bottom: 86px; }
.eges-pagina--corta { padding-top: 96px; }
/* Con cierre verde abajo, el aire lo pone su propio `margin-top` de 90 px. */
.eges-pagina--con-cierre { padding-bottom: 20px; }

.eges-pagina__entrada {
  margin: 0 0 34px;
  font-size: 19px; line-height: 1.5; color: #010000;
  text-align: justify;
}

.eges-pagina__fila { display: flex; gap: 15px; align-items: stretch; }
.eges-pagina__fila + .eges-pagina__fila { margin-top: 41px; }
.eges-pagina__fila > * { flex: 1 1 0; min-width: 0; }

/* --- tarjeta azul claro --- */
/* El `margin-bottom` explícito no sobra: hello-elementor le pone 26 px a todo
   `section`, y eso movía la fila siguiente 26 px de más (medido). */
.eges-tarjeta {
  background: #E3F3FB;
  border-radius: 10px;
  padding: 10px;
  margin: 0;
}
.eges-tarjeta h2 {
  font-family: var(--eges-tipo-titulo);
  font-size: 25px; font-weight: 600; line-height: 1;
  color: var(--eges-azul);
  text-align: center;
  margin: 10px 0 0;
}
.eges-tarjeta p {
  font-size: 17px; line-height: 1.5; color: #010000;
  text-align: justify;
  /* 24 abajo y no 14: en el original el margen del widget era
     calc(kit-widget-spacing + 10px), y con eso la tarjeta medía 191 px. */
  margin: 10px 0 24px;
}
.eges-tarjeta__lista {
  margin: 10px 0 24px;
  padding-left: 22px;
  font-size: 17px; line-height: 1.5; color: #010000;
}
/* 14 y no 6: el original anidaba un <p> dentro de cada <li>, y cada uno traía
   su propio margen. La tarjeta de Valores medía 235 px. */
.eges-tarjeta__lista li + li { margin-top: 14px; }

@media (max-width: 1024px) {
  .eges-portada { padding: 100px 4% 86px; }
  .eges-portada h1 { font-size: 46px; }
  .eges-pagina, .eges-pagina--corta { padding-top: 76px; }
  .eges-pagina__entrada--suelto { margin-bottom: 70px; }
}

@media (max-width: 767px) {
  .eges-portada { padding: 62px 16px 56px; }
  .eges-portada h1 { font-size: 32px; }
  .eges-portada__filete { width: 90px; margin-top: 16px; }

  .eges-pagina, .eges-pagina--corta { padding-top: 44px; }
  /* Justificado en una columna estrecha abre ríos blancos entre palabras. */
  .eges-pagina__entrada {
    margin-bottom: 32px;
    font-size: 17px; text-align: left;
  }
  .eges-pagina__entrada--medio, .eges-pagina__entrada--suelto { margin-bottom: 40px; }
  /* En el original estas dos tarjetas seguían al 50 % —168 px cada una— con el
     texto justificado dentro. Aquí se apilan. */
  .eges-pagina__fila { flex-direction: column; gap: 18px; }
  .eges-pagina__fila + .eges-pagina__fila { margin-top: 18px; }
  .eges-tarjeta { padding: 14px; }
  .eges-tarjeta p, .eges-tarjeta__lista { text-align: left; font-size: 16px; }
  .eges-pagina { padding-bottom: 52px; }
}

/* --- caja con icono a la izquierda (el «icon-box» de Elementor) --- */
/* Tres variantes medidas en el original, mismo esqueleto:
   `--dos`   rejilla de dos (Servicios)
   `--fila`  renglón a lo ancho, con recuadro (Cómo Cotizar, Preguntas)
   `--paso`  renglón sin recuadro y título magenta (Facturación) */
.eges-cajas { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
/* `1fr` y no `auto`: en el original las cuatro cajas miden lo mismo —140 px,
   el alto de la más larga—, no cada renglón lo suyo. */
.eges-cajas--dos { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
.eges-cajas--fila { gap: 19px; }
.eges-cajas--paso { gap: 21px; }

.eges-caja { display: flex; align-items: flex-start; gap: var(--caja-hueco, 9px); }
.eges-caja__icono {
  flex: 0 0 var(--caja-icono, 59px);
  width: var(--caja-icono, 59px); height: var(--caja-icono, 59px);
  display: grid; place-items: center;
  background: rgba(110, 193, 228, .42);
  border-radius: 10%;
  padding: 7px;
  color: #0074B4;
}
.eges-caja__icono svg { width: 100%; height: 100%; }
.eges-caja__cuerpo { min-width: 0; }
.eges-caja h3 {
  font-family: var(--eges-tipo-titulo);
  font-size: 17px; font-weight: 500; line-height: 1.2;
  color: #0074B4;
  margin: 0 0 5px;
}
.eges-caja p { margin: 0; font-size: 17px; line-height: 1.5; color: #010000; }

.eges-cajas--dos .eges-caja {
  background: #E3F3FB; border-radius: 15px; padding: 15px;
}

.eges-cajas--fila .eges-caja {
  --caja-icono: 66px; --caja-hueco: 11px;
  background: #F4FBFF;
  border: 1px solid #CFD9E4;
  border-radius: 10px;
  padding: 14px 10px;
}
.eges-cajas--fila .eges-caja__icono { background: #E3F3FB; padding: 8px; }
.eges-cajas--fila h3 { font-size: 25px; line-height: 1.2; margin: 0 0 8px; }
.eges-cajas--fila p { font-size: 19px; }

.eges-cajas--paso .eges-caja { --caja-icono: 46px; --caja-hueco: 10px; }
.eges-cajas--paso .eges-caja__icono { background: #E3F3FB; padding: 8px; color: var(--eges-magenta); }
.eges-cajas--paso h3 { font-size: 25px; line-height: 1.2; color: var(--eges-magenta); margin: 0 0 4px; }
.eges-cajas--paso p { font-size: 16px; line-height: 1.5; }

/* --- variantes del párrafo de entrada (los tres aires están medidos) --- */
.eges-pagina__entrada--centro { text-align: center; }
.eges-pagina__entrada--medio { margin-bottom: 64px; }
.eges-pagina__entrada--suelto { margin-bottom: 107px; }

/* --- botón centrado bajo una sección --- */
.eges-pagina__boton { text-align: center; margin: 30px 0 0; }

@media (max-width: 900px) {
  .eges-cajas--dos { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .eges-cajas { gap: 14px; }
  .eges-cajas--fila h3, .eges-cajas--paso h3 { font-size: 20px; }
  .eges-cajas--fila p { font-size: 17px; }
  .eges-cajas--fila .eges-caja { --caja-icono: 48px; }
  .eges-caja p { font-size: 16px; }
}

/* El número lo pone el contador del <ol> y no va tecleado en el título: en el
   original había DOS preguntas número 7 en Preguntas Frecuentes. */
.eges-cajas--numerada { counter-reset: eges-num; }
.eges-cajas--numerada .eges-caja { counter-increment: eges-num; }
.eges-cajas--numerada h3::before { content: counter(eges-num) ". "; }

/* La tira de especialidades reusa la del catálogo; dentro de .eges-ancho ya no
   necesita ancho ni relleno lateral propios. */
.eges-categorias--pagina { max-width: none; padding: 0; }

/* --- sucursales a lo ancho (la página /sucursales/) --- */
/* La portada las pinta en tarjeta vertical; aquí el mapa va al lado. Mismo
   dato, distinto diseño: por eso es un modificador y no otro componente. */
.eges-sucursales__fila { display: grid; gap: 20px; }
.eges-sucursal--fila {
  display: grid; grid-template-columns: 549px 1fr;
  gap: 20px; align-items: start;
  padding: 10px;
}
.eges-sucursal--fila .eges-sucursal__mapa { height: 250px; border-radius: 8px; }
.eges-sucursal--fila .eges-sucursal__datos { padding: 10px 10px 10px 0; }
.eges-sucursal--fila .eges-sucursal__datos h2 {
  font-family: var(--eges-tipo-titulo);
  font-size: 25px; font-weight: 600; line-height: 1;
  color: var(--eges-azul);
  margin: 0 0 18px;
}
.eges-sucursal--fila .eges-sucursal__datos li { font-size: 16px; line-height: 1.5; margin-bottom: 6px; }
.eges-sucursal--fila .eges-sucursal__datos ul { margin-bottom: 16px; }

@media (max-width: 900px) {
  /* Con el mapa al lado no caben dos columnas: se apila, mapa arriba. */
  .eges-sucursal--fila { grid-template-columns: 1fr; gap: 0; }
  .eges-sucursal--fila .eges-sucursal__mapa { height: 220px; }
  .eges-sucursal--fila .eges-sucursal__datos { padding: 16px 12px 12px; }
}

/* --- dos columnas: contenido a la izquierda, panel a la derecha --- */
/* Medido en el original: 530 + 550 con 190 px de calle. */
.eges-pagina__dos {
  display: grid; grid-template-columns: minmax(0, 530px) minmax(0, 550px);
  justify-content: space-between; gap: 40px; align-items: start;
}
.eges-pagina__dos .eges-pagina__entrada { margin-bottom: 26px; }

.eges-cajas--contacto { gap: 12px; }
.eges-cajas--contacto .eges-caja { --caja-icono: 56px; --caja-hueco: 10px; }
.eges-cajas--contacto .eges-caja h2 {
  font-family: var(--eges-tipo-titulo);
  font-size: 20px; font-weight: 500; line-height: 1.2;
  color: var(--eges-azul); margin: 0 0 4px;
}
.eges-cajas--contacto .eges-caja p { font-size: 16px; }
.eges-cajas--contacto a { color: var(--eges-tinta); text-decoration: none; }
.eges-cajas--contacto a:hover { color: var(--eges-magenta); }

/* --- panel (donde el original tenía el formulario que no enviaba nada) --- */
.eges-panel {
  background: var(--eges-fondo);
  border: 1px solid #E3E9F0;
  border-radius: 15px;
  padding: 26px 24px;
}
.eges-panel h2 {
  font-family: var(--eges-tipo-titulo);
  font-size: 25px; font-weight: 600; line-height: 1.15;
  color: var(--eges-azul);
  margin: 0 0 12px;
}
.eges-panel p { margin: 0 0 14px; font-size: 17px; line-height: 1.5; color: #010000; }
.eges-panel__horario { color: var(--eges-tinta); font-size: 15px; }
.eges-panel__lista {
  margin: 0 0 20px; padding-left: 20px;
  font-size: 16px; line-height: 1.7; color: var(--eges-tinta);
}
.eges-panel__aviso { margin: 14px 0 0; font-size: 15px; color: var(--eges-tinta); }
.eges-panel .eges-boton-wa { display: inline-flex; color: #fff; text-decoration: none; }
.eges-panel .eges-boton-wa:hover { color: #fff; }

.eges-titulo--centro { text-align: center; margin-top: 68px; margin-bottom: 30px; }

@media (max-width: 900px) {
  .eges-pagina__dos { grid-template-columns: 1fr; gap: 28px; }
}

/* --- formulario (Facturación) --- */
/* Medidas del original: etiqueta de 15 px, campo de 36 px de alto con borde
   #D6D5D5 y relleno 8/16, y 10 px entre un campo y la etiqueta siguiente.
   El texto del campo iba a 12 px; aquí va a 16 porque por debajo de 16 el
   navegador del iPhone hace zoom solo al tocar el campo, y la página salta. */
.eges-form { margin: 0; }
.eges-form__campo { margin: 0 0 10px; }
.eges-form__campo label {
  display: block;
  font-size: 15px; line-height: 1.4; color: #010000;
  margin: 0 0 6px;
}
.eges-form__campo input {
  display: block; width: 100%;
  font-family: var(--eges-tipo-texto); font-size: 16px; line-height: 1.25;
  color: #0C0D0E; background: #fff;
  border: 1px solid #D6D5D5; border-radius: 4px;
  padding: 8px 16px;
}
.eges-form__campo input:focus {
  outline: 2px solid var(--eges-azul); outline-offset: 1px;
  border-color: var(--eges-azul);
}
/* El campo trampa: fuera de la vista, pero NO con `display:none` ni
   `visibility:hidden` — hay robots que descartan lo que está así. */
.eges-form__trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.eges-form__acepto {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 16px 0 18px;
  font-size: 14px; line-height: 1.45; color: var(--eges-tinta);
}
.eges-form__acepto input { flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0; }
.eges-form button.eges-boton-azul {
  font-family: var(--eges-tipo-titulo);
  border: 0; cursor: pointer;
}

/* Un aviso que DICE lo que pasó. El formulario que se sustituye daba las
   gracias pasara lo que pasara. */
.eges-aviso {
  margin: 0 0 16px; padding: 12px 14px;
  border-radius: 8px; border-left: 4px solid;
  font-size: 16px; line-height: 1.45;
}
.eges-aviso--bien { background: #E4F5EE; border-color: #128C7E; color: #0A5B50; }
.eges-aviso--mal  { background: #FDECF3; border-color: var(--eges-magenta); color: #8A0B47; }

.eges-pagina__aviso-plazo { margin: 22px 0 0; font-size: 16px; line-height: 1.5; color: var(--eges-tinta); }
.eges-pagina__dudas { margin: 16px 0 0; }
.eges-pagina__dudas .eges-boton-wa { display: inline-flex; color: #fff; text-decoration: none; }
.eges-pagina__dudas .eges-boton-wa:hover { color: #fff; }