/* Italmédica — hoja de estilos propia.
   Cortes del original (Elementor): tableta hasta 1024 px, teléfono hasta 767 px.
   Tipografía: el original pide Inter y Heebo por http:// y el navegador no las carga (contenido
   mixto), así que el texto sale en la sin serifa del sistema. La copia pide las mismas familias sin
   cargarlas, para verse igual (ver README, «Tipografía»). */

:root {
  --azul: #002e4b;
  --azul-claro: #006aae;
  --verde: #00987c;
  --verde-suave: #00987ca3;
  --verde-claro: #5cbdab;
  --verde-tenue: #00987c29;
  --gris: #848e9f;
  --blanco: #fff;
  --f-titulos: "Inter", sans-serif;
  --f-texto: "Heebo", sans-serif;
  --t-titulo1: 50px;
  --t-titulo2: 32px;
  --t-titulo-pagina: 36px;
  --t-tarjeta: 24px;
  --t-subtitulo: 18px;
  --t-antetitulo: 18px;
  --t-texto: 16px;
  --t-boton: 16px;
  --t-boton-chico: 14px;
}
@media (max-width: 767px) {
  :root {
    --t-titulo1: 32px;
    --t-titulo2: 24px;
    --t-titulo-pagina: 26px;
    --t-tarjeta: 20px;
    --t-subtitulo: 16px;
    --t-antetitulo: 16px;
    --t-texto: 14px;
    --t-boton: 14px;
    --t-boton-chico: 12px;
  }
}

/* ---------- Base ---------- */
*, ::before, ::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--gris);
  font-family: var(--f-texto);
  font-size: var(--t-texto);
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul { margin: 0; }
p { margin-block-end: .9rem; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a { color: var(--verde); text-decoration: none; }
button { font: inherit; color: inherit; }
main a { text-decoration: underline; }
/* Novedades y las notas son plantillas de Elementor Pro: no llevan el subrayado de las páginas del tema. */
.pagina-novedades a, .pagina-nota a { text-decoration: none; }
strong { font-weight: bolder; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.saltar {
  position: absolute; top: -9999px; left: 5px; z-index: 100000;
  padding: 12px 24px; background: #eee; color: #333; font-size: 1rem; line-height: normal;
}
.saltar:focus { top: 5px; }
svg { fill: currentColor; overflow: visible; }
.ancla { display: block; }
/* El ancla #nosotros es un widget del original a 20 px de la cuarta caja (que suma 10 px de margen). */
#nosotros { margin-top: 20px; }

/* Botones */
.boton {
  display: inline-block;
  font-family: var(--f-titulos);
  font-weight: 500;
  line-height: 1em;
  color: var(--blanco);
  text-align: center;
  border-radius: 50px;
  transition: all .3s;
}
.boton:hover, .boton:focus { color: var(--blanco); }
.boton--verde {
  padding: 18px 32px;
  background: var(--verde);
  font-size: var(--t-boton-chico);
}
.boton--icono { display: inline-flex; align-items: center; gap: 10px; }
.boton--icono svg { width: .75em; height: 1em; flex: none; }
/* Elementor «float»: el elemento sube 8 px al pasar el puntero. */
.flota { transition-duration: .3s; transition-property: transform; transition-timing-function: ease-out; }
.flota:hover, .flota:focus, .flota:active { transform: translateY(-8px); }

/* Antetítulo y títulos de sección */
.antetitulo {
  margin: 0;
  font-family: var(--f-titulos);
  font-size: var(--t-antetitulo);
  font-weight: 500;
  line-height: 1em;
  color: var(--verde);
}
.antetitulo--centrado { text-align: center; }
.antetitulo--claro { color: var(--verde-claro); }
.titulo-seccion {
  margin: 20px 0 0;
  font-family: var(--f-titulos);
  font-size: var(--t-titulo2);
  font-weight: 600;
  line-height: 1.2em;
  color: var(--azul);
  text-align: center;
}
.bajada { margin: 20px 0 34.4px; padding: 0 26%; text-align: center; }

/* ---------- Encabezado ---------- */
.encabezado__superior { position: relative; z-index: 2; background: var(--blanco); }
.encabezado__superior .encabezado__fila {
  display: flex;
  align-items: center;
  margin: 0 max(10px, (100% - 1150px) / 2);
  padding: 20px 0;
  border-bottom: 1px solid #eaeaea;
}
.encabezado__logo { flex: 0 0 19.315%; line-height: 0; }
.encabezado__logo img { width: 90%; }
.encabezado__datos {
  display: flex;
  flex: 0 0 58.891%;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
  padding-right: 40px;
}
.dato { display: flex; align-items: center; gap: 15px; padding: 6px 40px 6px 0; }
.dato--correo { border-right: 1px solid #eaeaea; }
.dato--telefono { padding: 6px 0 6px 40px; }
.dato__icono { display: block; width: 32px; height: 32px; color: var(--verde-suave); transition: all .3s; }
.dato__icono svg { display: block; width: 32px; height: 32px; }
.dato p { margin: 0; }
.encabezado__acciones {
  display: flex;
  flex: 0 0 21.452%;
  justify-content: flex-end;
  align-items: center;
  border-left: 1px solid #eaeaea;
}
.encabezado__nob { flex: 0 0 35%; max-width: 35%; line-height: 0; text-align: center; }
.encabezado__nob img { width: 36%; }
.boton--encabezado { padding: 15px 30px; background: var(--azul); font-size: 14px; }

.encabezado__navegacion {
  position: relative;
  z-index: 1;
  box-shadow: 0 3px 15px 0 rgba(0, 0, 0, .06);
}
.encabezado__navegacion .encabezado__fila {
  display: flex;
  align-items: center;
  max-width: 1170px;
  margin: 0 auto;
}
/* Como las columnas de Elementor, los bloques flexibles pueden quedar más angostos que su contenido. */
.menu { flex: 0 0 87%; min-width: 0; padding: 0 10px; }
.redes--encabezado { flex: 0 0 13%; padding-right: 5px; }

/* Redes */
.redes { display: flex; justify-content: flex-end; }
.redes a {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: var(--verde);
  transition: transform .3s;
}
.redes a:hover { color: var(--blanco); opacity: .9; transform: scale(.9); }
.redes svg { display: block; color: var(--blanco); }
.redes--encabezado { gap: 15px; }
.redes--encabezado a { width: 31.2px; height: 31.2px; background: var(--verde-suave); }
.redes--encabezado a:hover { background: var(--azul); }
.redes--encabezado svg { width: 13px; height: 13px; }

/* Menú de escritorio */
.menu__abrir, .menu__identidad, .menu__velo { display: none; }
.menu__lista { display: flex; flex-wrap: wrap; height: 74px; }
.menu__lista > li { position: relative; }
.menu__lista > li > a, .menu__padre {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 35px 0 0;
  border: 0;
  background: none;
  font-family: var(--f-titulos);
  font-size: 13px;
  font-weight: 600;
  line-height: 1em;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--azul);
  cursor: pointer;
  transition: all .4s ease;
}
.menu__lista > li:hover > a, .menu__lista > li:hover > .menu__padre { color: var(--verde-suave); }
.menu__flecha {
  width: 12.3px;
  height: 13px;
  margin: 0 6px;
  color: var(--azul);
}
.menu__lista > li:hover .menu__flecha { color: var(--verde-suave); }
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  min-width: 220px;
  padding: 10px;
  background: var(--blanco);
  box-shadow: 0 3px 15px 0 rgba(0, 0, 0, .05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: transform .4s ease;
}
.con-submenu:hover > .submenu, .con-submenu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.submenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  background: var(--blanco);
  font-family: var(--f-titulos);
  font-size: 13px;
  font-weight: 600;
  line-height: 1em;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--azul);
  transition: all .3s;
}
.submenu a:hover { color: var(--verde-suave); }
.submenu a[aria-current] { color: var(--verde); }

/* ---------- Portada ---------- */
.portada {
  position: relative;
  padding: 120px 0 140px;
  background: url(../images/portada-familia-1312x1412.jpg) 77% 25% / cover no-repeat;
}
.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(120deg, var(--azul) 40%, #000e4400 36%);
}
.portada__interior { position: relative; display: flex; max-width: 1170px; margin: 0 auto; }
.portada__recuadro {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 57.356%;
  padding: 60px;
  border-radius: 5px;
  background: var(--blanco);
  box-shadow: 0 5px 30px 0 rgba(4, 4, 71, .13);
}
.portada__recuadro::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: url(../images/fondo-cruces-1920x1280.jpg) center / cover no-repeat;
  opacity: .4;
}
.portada__recuadro > * { position: relative; }
.portada__titulo {
  width: 100%;
  margin: 8px 0 21px;
  font-family: var(--f-titulos);
  font-size: var(--t-titulo1);
  font-weight: 700;
  line-height: 1.2em;
  color: var(--azul);
}
.resaltado {
  display: inline-block;
  background-image: linear-gradient(180deg, #ffffff00 72%, #00987c52 26%);
}
.resaltado span { font-size: var(--t-titulo1); }
.portada__texto { width: 100%; margin: 0 90px 34.4px 0; }
.portada__boton { padding: 19px 48px 0 0; }
.boton--portada { padding: 20px 40px; background: var(--azul); font-size: var(--t-boton); }
.portada__hir { line-height: 0; }
.portada__hir img { width: 190px; }
.portada__video {
  position: absolute;
  left: 85%;
  bottom: -10%;
  z-index: 1;
  padding: 40px;
  border-radius: 5px;
  background: #00987cde;
}
.video {
  position: relative;
  z-index: 6;
  display: block;
  width: 60px;
  height: 60px;
  padding-left: 5px;
  border-radius: 50%;
  line-height: 45px;
  text-align: center;
  background: var(--blanco);
  color: var(--verde);
  font-size: 18px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
  transition: all .4s ease;
}
.video:hover { color: var(--verde); }
/* El icono es texto en el original: lleva el subrayado del enlace (1 px, 17 px debajo de su caja) y
   la sombra del texto. */
.video__icono {
  display: inline-block;
  width: 18px;
  height: 20px;
  vertical-align: -4px;
  background: linear-gradient(currentColor, currentColor) 0 16.7px / 100% 1px no-repeat;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, .3));
}
.video__icono svg { display: block; width: 18px; height: 20px; }
/* Ondas del botón (glow-ripple de ElementsKit): tres anillos desfasados */
.video::before, .video::after, .video__icono::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  color: var(--blanco);
  box-shadow: 0 0 0 0 currentColor;
  opacity: .6;
  animation: onda 3s infinite;
}
.video::before { animation-delay: .9s; }
.video::after { animation-delay: .3s; }
@keyframes onda {
  70% { box-shadow: 0 0 0 15px currentColor; opacity: 0; }
  100% { box-shadow: 0 0 0 0 currentColor; opacity: 0; }
}

/* ---------- Destacados (cuatro cajas) ---------- */
.destacados { position: relative; z-index: 2; padding: 100px 0 0; }
.destacados__lista { display: flex; max-width: 1170px; margin: 0 auto; }
.destacado { display: flex; flex: 0 1 31%; flex-direction: column; }
.destacado--emergencias { flex-basis: 32%; }
.caja {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
  padding: 40px 50px;
  border-radius: 5px 0 0 5px;
  box-shadow: 0 3px 30px 0 rgba(61, 113, 117, .149);
  text-align: left;
  transition: all .4s ease;
}
.destacado--emergencias .caja {
  border-radius: 0 0 5px 5px;
  background: var(--azul);
  box-shadow: 0 3px 15px 0 rgba(0, 0, 0, .1);
}
.destacado--atencion .caja {
  padding-bottom: 70px;
  border-radius: 0 5px 5px 0;
  background: var(--verde-claro);
  box-shadow: 0 5px 30px 0 rgba(0, 229, 204, .11);
}
.caja__icono { position: relative; z-index: 2; height: 60px; margin-bottom: 20px; line-height: 0; }
.caja__icono svg { position: relative; top: -1px; display: block; color: var(--verde-claro); }
.destacado--planes .caja__icono svg { top: 2px; width: 60px; height: 67px; }
.destacado--emergencias .caja__icono svg, .destacado--atencion .caja__icono svg { width: 60px; height: 62px; }
.destacado--credencial .caja__icono svg { width: 50.45px; height: 62px; }
.destacado--atencion .caja__icono svg { color: var(--blanco); }
.caja__cuerpo { position: relative; z-index: 2; }
.caja__titulo {
  margin: 0 0 10px;
  font-family: var(--f-titulos);
  font-size: var(--t-tarjeta);
  font-weight: 600;
  line-height: 1.2em;
  color: var(--azul);
}
.destacado--planes .caja__titulo { margin-bottom: 15px; }
.destacado--emergencias .caja__titulo, .destacado--atencion .caja__titulo { color: var(--blanco); }
.caja__texto { margin: 0 0 10px; }
.destacado--atencion .caja__texto { color: var(--blanco); }
.caja__enlace {
  display: inline-block;
  margin: 15px 0 0;
  border-radius: 5px;
  font-family: var(--f-titulos);
  font-size: var(--t-boton-chico);
  font-weight: 500;
  line-height: 1em;
  color: var(--verde);
  white-space: nowrap;
  vertical-align: middle;
  transition: all .4s ease;
}
.caja__enlace svg { width: 10.5px; height: 12px; margin-left: 10px; vertical-align: -2px; }
.caja__enlace--boton {
  padding: 15px 30px;
  border-radius: 50px;
  background: var(--verde-claro);
  color: var(--blanco);
}
.caja__enlace--boton svg { width: 12px; height: 12px; margin: 0 10px 0 0; vertical-align: -2px; }
.caja:hover .caja__enlace--boton { background: var(--verde); }
.caja__enlace--boton:hover { color: var(--blanco); }
.caja__marca {
  position: absolute;
  right: 0;
  bottom: -50px;
  z-index: 1;
  line-height: 0;
  opacity: 0;
  transition: all .4s ease;
}
.caja:hover .caja__marca { bottom: 0; opacity: 1; }
/* El <i> del original cuelga de un renglón: su caja asoma 1,5 px (2 px en el teléfono) por debajo. */
.caja__marca svg { display: block; width: 100px; height: 104px; margin-bottom: -1.5px; color: var(--verde-tenue); }
.destacado--emergencias .caja__marca svg { color: #29a4ff42; }
.destacado--credencial .caja__marca svg { width: 84.08px; }
/* Este <i> no fija su interlineado: hereda 24 px y el glifo asoma 14,5 px por debajo de su línea. */
.destacado--atencion .caja__marca svg { height: 112px; margin-bottom: -14.5px; color: #ffffff52; }

/* ---------- Sobre Italmédica ---------- */
.nosotros { padding: 100px 0 240px; }
.nosotros__interior { display: flex; max-width: 1170px; margin: 0 auto; }
.nosotros__fotos { display: flex; flex-direction: column; width: 50%; padding: 10px; }
.nosotros__foto {
  width: 85%;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 39px 39px 0 5px rgba(0, 152, 124, .161);
}
/* La caja de las dos fotos que en el original no cargan sale de sus atributos width/height (800 × 534 y
   800 × 468), no de la foto: se fija esa proporción para que todo lo que sigue quede en el mismo lugar
   (la foto se recorta en décimas de píxel). */
.nosotros__detalle {
  box-sizing: content-box;
  width: calc(52% - 15px);
  aspect-ratio: 800 / 534;
  object-fit: cover;
  margin-top: -199px;
  border: solid #fff;
  border-width: 15px 15px 0 0;
  border-radius: 0 5px;
}
.nosotros__texto { width: 50%; padding: 10px 10px 10px 30px; }
.nosotros__titulo {
  margin: 20px 20px 0 0;
  font-family: var(--f-titulos);
  font-size: var(--t-titulo2);
  font-weight: 600;
  line-height: 1.2em;
  color: var(--azul);
}
.nosotros__bajada { margin: 20px 0 54.4px; }
.valores { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px; }
.valor { display: flex; align-items: flex-start; gap: 15px; }
.valor svg { flex: none; width: 40px; height: 41px; margin-top: 4px; color: var(--verde); }
.valor__titulo {
  margin: 0 0 10px;
  font-family: var(--f-titulos);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2em;
  color: var(--azul);
}
.nosotros__boton { margin-top: 20px; }

/* ---------- Credencial Digital ---------- */
.credencial {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  min-height: 190px;
  max-height: 202px;
  margin-top: -120px;
  background: var(--azul-claro);
}
.credencial::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/fondo-credencial-621x467.png) top right repeat;
  mix-blend-mode: overlay;
  opacity: .55;
}
.credencial__franja {
  position: relative;
  display: flex;
  gap: 20px;
  width: 1170px;
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 5px 40px 0 rgba(61, 113, 117, .51);
}
.credencial__texto {
  display: flex;
  flex: 0 1 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.credencial__titulo {
  margin-bottom: 10px;
  font-family: var(--f-titulos);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: .052em;
  text-transform: uppercase;
  color: var(--blanco);
  text-align: center;
}
.credencial__imagen { flex: 0 1 100%; align-self: flex-start; margin: -45px 0 -40px; line-height: 0; }
.credencial__imagen img { width: 470px; aspect-ratio: 800 / 468; object-fit: cover; }

/* ---------- Nuestros Servicios ---------- */
.servicios { position: relative; padding: 100px 0; background: #00987c17; }
.servicios::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/fondo-cruces-1920x1280.jpg) center no-repeat;
  opacity: .3;
}
.servicios__interior { position: relative; display: flex; flex-direction: column; max-width: 1170px; margin: 0 auto; padding: 10px; }
.servicios__lista { display: flex; margin-top: 40px; }
.servicio { flex: 0 0 33.333%; min-width: 0; }
.servicio:nth-child(1) { padding: 50px 20px 0 0; }
.servicio:nth-child(2) { padding: 0 10px; }
.servicio:nth-child(3) { padding: 50px 0 20px 20px; }
.tarjeta {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
  padding: 40px;
  border-radius: 5px;
  background: var(--blanco);
  box-shadow: 0 5px 40px 0 rgba(0, 229, 204, .11);
  transition: all .4s ease;
}
.tarjeta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -101%;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: all .6s ease;
}
.tarjeta:hover::before { left: 0; background-color: var(--azul); }
.tarjeta > * { position: relative; z-index: 2; }
.tarjeta__icono { display: block; width: 60px; height: 60px; margin: 0 0 15px; line-height: 0; }
.tarjeta__icono img { width: 60px; }
.tarjeta__titulo {
  margin: 0 0 10px;
  font-family: var(--f-titulos);
  font-size: var(--t-tarjeta);
  font-weight: 600;
  line-height: 1.2em;
  color: var(--azul);
  transition: all .4s ease;
}
.tarjeta:hover .tarjeta__titulo { color: var(--blanco); }
.tarjeta__texto { margin: 0; }
.tarjeta__enlace {
  display: inline-block;
  margin: 15px 0 0;
  border-radius: 5px;
  font-family: var(--f-titulos);
  font-size: var(--t-boton-chico);
  font-weight: 500;
  line-height: 1em;
  color: var(--verde);
  white-space: nowrap;
  vertical-align: middle;
}
.tarjeta__enlace svg { width: 10.5px; height: 12px; margin-left: 10px; vertical-align: -2px; }

/* ---------- Nuestros Planes ---------- */
.planes { padding: 90px 0 100px; }
.planes__interior { display: flex; flex-direction: column; max-width: 1140px; margin: 0 auto; }
.planes__interior > .antetitulo, .planes__interior > .titulo-seccion, .planes__interior > .bajada { margin-inline: 10px; }
/* El 26 % de relleno del original se calcula sobre el ancho del widget, 20 px más angosto que el contenedor. */
.planes__interior > .bajada { padding-inline: calc((100% - 20px) * .26); }
.planes__interior > .antetitulo { margin-top: 10px; }
.planes__interior > .bajada { margin-bottom: 24.4px; }
.planes__lista { display: flex; margin: 40px 0; }
.plan { flex: 0 0 33.333%; padding: 20px; }
.plan__tabla {
  overflow: hidden;
  border-radius: 5px;
  background: #f9fafa;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .15);
  text-align: center;
}
.plan__cabecera { padding: 25px 0 20px; background: var(--plan-color); }
.plan--veneto { --plan-color: #013229; --plan-hover: var(--verde); }
.plan--lazio { --plan-color: var(--azul); --plan-hover: var(--azul-claro); }
.plan--milano { --plan-color: #4e0014; --plan-hover: #cd0035; }
.plan__nombre {
  font-family: var(--f-titulos);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2; /* número, como en Elementor (no em) */
  color: var(--blanco);
}
.plan__lema { margin: 0; font-size: 16px; font-weight: 200; color: var(--blanco); }
.plan--veneto .plan__lema { font-weight: 400; letter-spacing: .13em; color: #00e5cc; }
.plan__coberturas { margin-top: 45px; padding: 0 15px; text-align: start; }
.plan__coberturas > li { padding: 0 15px; font-size: 14px; line-height: 1.3em; }
.plan__coberturas > li:not(:first-child)::before {
  content: "";
  display: block;
  /* El original centra la raya en el 75 % del ítem, sin la sangría de 15 px del texto. */
  margin: 15px calc((100% + 30px) * .125 - 15px);
  border-top: 1px solid #ddd;
}
.plan__coberturas > li > svg { width: 18.2px; height: 18px; margin-right: 10px; vertical-align: -1px; color: var(--gris); }
.plan__pie { padding: 50px 30px 30px; }
.plan__boton { padding: 20px 40px; background: var(--plan-color); font-size: var(--t-boton); }
.plan__boton:hover { background: var(--plan-hover); }

/* ---------- Beneficios NOB ---------- */
.nob {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  min-height: 300px;
  max-height: 202px;
  background-image: linear-gradient(180deg, #3c3c3b 0%, #b91732 100%);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
}
.nob::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/fondo-estadio-nob-1920x420.jpg) top center repeat;
  mix-blend-mode: overlay;
  opacity: .35;
}
.nob__franja { position: relative; display: flex; gap: 20px; width: 1170px; max-width: 100%; border-radius: 10px; }
.nob__oferta {
  display: flex;
  flex: 0 1 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 0;
  color: var(--blanco);
  text-align: center;
}
.nob__oferta p { margin: 0; }
.nob__porcentaje { font-size: 74px; font-weight: 900; line-height: .7em; }
.nob__descuento { font-size: 32px; font-weight: 600; line-height: 1em; }
.nob__socios {
  padding: 8px 10px 5px;
  border: 1px solid var(--blanco);
  border-radius: 8px;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.2em;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.nob__socios strong { font-weight: 400; }
.nob__detalle { margin-bottom: 14.4px !important; font-size: 16px; font-weight: 300; letter-spacing: .05em; }
/* El original tiene un botón para escritorio y tableta y otro para tableta y teléfono. */
@media (min-width: 1025px) { .nob__boton-movil { display: none; } }
.nob__lado { display: flex; flex: 0 1 100%; flex-direction: column; gap: 70px; }
.nob__logos {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 20px;
  padding: 10px 20px 10px 0;
  border-radius: 0 0 20px 20px;
  background: #eee;
}
.nob__logo { line-height: 0; }
.nob__logo img { max-width: none; }
.nob__logo--italmedica img { width: 56px; }
.nob__logo--nob img { width: 42px; margin-left: 20px; }
.nob__logo--hir img { width: 118px; margin-right: -50px; }
.nob__accion { display: flex; justify-content: center; padding: 10px; }
.boton--nob {
  padding: 15px 30px;
  border: 1px solid var(--blanco);
  background-image: linear-gradient(90deg, #b91732 0%, #000 100%);
  font-size: 14px;
  line-height: 1.4em;
}

/* ---------- Novedades ---------- */
.novedades { padding: 100px 0 80px; }
.novedades__interior { display: flex; flex-direction: column; max-width: 1170px; margin: 0 auto; padding: 10px; }
.novedades__bloque { display: flex; flex-direction: column; align-items: center; margin-top: 60px; }
.notas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  width: 100%;
  margin-bottom: 20px;
}
.notas > li { margin-bottom: 32px; }
.nota { height: 100%; }
.nota__foto { position: relative; display: block; overflow: hidden; height: 300px; border-radius: 5px; background: #eaeaeb; }
.nota__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nota__titulo {
  margin: 20px 0 8px;
  font-family: var(--f-titulos);
  font-size: var(--t-subtitulo);
  font-weight: 600;
  line-height: 1.3em;
}
.nota__titulo a { color: var(--verde); }
.nota__titulo a:hover { color: var(--verde); }
.nota__resumen { margin: 8px 0; }
.nota__pie { margin: 24px 0 0; font-size: 12px; }
.nota__mas {
  display: inline-block;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  font-family: var(--f-titulos);
  font-size: var(--t-boton-chico);
  font-weight: 500;
  line-height: 1em;
  color: var(--verde);
  vertical-align: middle;
  transition: all .2s ease;
}
.nota__mas svg { width: .875em; height: 1em; margin-left: 5px; vertical-align: -2px; }
.novedades__todas { margin-top: 20px; }

/* ---------- Turnos y Autorizaciones ---------- */
.turnos {
  position: relative;
  background: url(../images/fondo-turnos-1920x1280.jpg) top center / cover no-repeat fixed;
}
.turnos::before { content: ""; position: absolute; inset: 0; background: var(--azul); opacity: .86; }
.turnos__interior { position: relative; display: flex; max-width: 1170px; margin: 0 auto; padding: 100px 0; }
.turnos__contenido {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  margin-left: 60px;
  padding: 10px;
  color: var(--blanco);
}
.turnos__contenido > * { margin: 0; }
.turnos__titulo {
  font-family: var(--f-titulos);
  font-size: var(--t-titulo2);
  font-weight: 600;
  line-height: 1.2em;
  color: var(--blanco);
}
.turnos__contenido > .turnos__bajada, .turnos__plazo { margin-bottom: 14.4px; }
.turnos__vias { display: flex; gap: 30px; }
.turnos__via--turnos {
  display: flex;
  flex: 0 0 33.326%;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid #e1e1e1;
}
.turnos__via--autorizaciones { display: flex; flex: 1; flex-direction: column; gap: 24px; min-width: 0; }
.turnos__subtitulo {
  font-family: var(--f-titulos);
  font-size: var(--t-subtitulo);
  font-weight: 600;
  line-height: 1.3em;
  color: var(--blanco);
}
.turnos__medios { display: flex; flex-direction: column; gap: 20px; }
.turnos__medios li { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.boton--turno {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 15px 30px;
  background: var(--verde);
  font-size: 14px;
  line-height: 1.4em;
  text-decoration: none;
}
.boton--turno svg { width: 1em; height: 1.4em; }
.boton--turno .boton__whatsapp { height: 1em; }
.turnos__aclaracion { position: relative; top: -12px; align-self: stretch; height: calc(1.5em - 12px); margin: 0; padding-left: 8px; }
.turnos__requisitos p { margin: 0 0 14.4px; }
.turnos__requisitos ul { padding-left: 40px; list-style: disc; }
.turnos__envio { display: flex; flex-direction: column; gap: 20px; }
.turnos__correo { display: flex; align-items: center; gap: 15px; margin: -9px 0 0; }
.turnos__correo-icono { display: block; width: 32px; height: 32px; color: var(--blanco); }
.turnos__correo-icono svg { display: block; width: 32px; height: 32px; }
.turnos__correo-texto {
  flex: 1;
  margin: 8px 0 3px;
  font-family: var(--f-titulos);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2em;
}
.turnos__correo-texto a, .turnos__correo-texto a:hover { color: var(--blanco); text-decoration: none; }
.turnos__divisor { width: 100%; margin: 20px 0 15px; border: 0; border-top: 1px solid #e1e1e1; }
.boton--borde {
  align-self: flex-start;
  padding: 15px 30px;
  border: 2px solid var(--verde);
  background: transparent;
  font-size: 14px;
  text-decoration: none;
}
.boton--borde:hover, .boton--borde:focus { background: var(--verde); border-color: var(--verde); }

/* ---------- Páginas interiores: encabezado de la página y miga de pan ---------- */
/* Foto de fondo con un velo del color de la página; título, lema, texto y miga, centrados. */
.banner {
  position: relative;
  padding: 128px 0;
  background: center / cover no-repeat;
  color: var(--blanco);
  text-align: center;
}
.banner::before { content: ""; position: absolute; inset: 0; background: var(--plan-oscuro); opacity: .65; }
.banner__interior {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 1170px;
  margin: 0 auto;
  padding: 10px;
}
.banner__titulo {
  margin-bottom: 20px;
  font-family: var(--f-titulos);
  font-size: var(--t-titulo-pagina);
  font-weight: 600;
  line-height: 1.2em;
}
.banner__lema {
  margin-bottom: 20px;
  font-family: var(--f-titulos);
  font-size: var(--t-tarjeta);
  font-weight: 400;
  line-height: 1.2em;
}
.banner__texto { margin-bottom: calc(.9rem + 20px); }
/* Miga de pan (lista de iconos de Elementor en línea): textos sin enlace, separados por una flecha
   de 14 px centrada en una caja de 1,25em, con 10 px a la derecha y 5 px antes del texto. La flecha
   fina (Jeg Kit) tiene una caja de 14 px de alto, centrada en el renglón. */
.miga { overflow: hidden; }
.miga ol { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -5px; padding: 0; list-style: none; }
.miga li { display: flex; align-items: center; margin: 0 5px; }
.miga__flecha {
  display: flex;
  flex: none;
  justify-content: center;
  width: 17.5px;
  margin-right: 15px;
  color: var(--plan-flecha);
}
.miga__flecha svg { width: 14px; height: 14px; }
/* La de ElementsKit (Plan Veneto) ocupa todo el renglón y es texto: Chrome le da arriba la mitad del
   interlineado redondeada hacia abajo (renglón de 24 px: 4 px; de 21 px en teléfono: 2 px, no 2,5). */
.miga__flecha--elementskit { align-self: stretch; align-items: flex-start; }
.miga__flecha--elementskit svg { height: 16px; margin-top: 4px; }

/* ---------- Planes (Veneto, Lazio y Milano) ---------- */
/* Colores de cada plan: el velo de las fotos y la tabla del medio, las otras dos tablas, la flecha de
   la miga y el botón de «Ver Prestadores». */
.pagina-plan--veneto, .pagina-prestadores--veneto { --plan-oscuro: #013229; --plan-acento: var(--verde); --plan-flecha: var(--verde); --plan-boton: var(--verde); }
.pagina-plan--lazio, .pagina-prestadores--lazio { --plan-oscuro: var(--azul); --plan-acento: var(--azul-claro); --plan-flecha: #009bff; --plan-boton: #007fd1; }
/* En Milano la tabla del medio no lleva el color del velo sino un bordó. */
.pagina-plan--milano { --plan-oscuro: #170006; --plan-acento: #cd0035; --plan-flecha: #cd0035; --plan-boton: #8f0025; }
.pagina-plan--milano .tabla-plan--oscura th { background: #4e0014; }
.pagina-prestadores--milano { --plan-oscuro: #170006; --plan-acento: #4e0014; --plan-flecha: #cd0035; --plan-boton: #8f0025; }
.pagina-plan .banner {
  background-image: url(../images/fondo-familia-pasto-1920x1280.jpg);
  background-position: 0 64%;
}
.pagina-plan--lazio .banner { padding: 140px 0; }
.pagina-plan--milano .banner { padding: 129px 0 128px; }
:is(.pagina-plan, .pagina-prestadores) .llamado { background-image: url(../images/fondo-equipo-medico-2000x1333.jpg); }
:is(.pagina-plan--veneto, .pagina-prestadores--veneto, .pagina-prestadores--milano) .llamado { background-color: var(--plan-oscuro); }
/* En Prestadores Lazio el llamado conserva debajo de la foto el verde de Veneto (no se ve). */
.pagina-prestadores--lazio .llamado { background-color: #013229; }

.prestaciones { padding: 70px 0; }
.prestaciones__tablas { display: flex; max-width: 1366px; margin: 0 auto; }
.prestaciones__columna { flex: 0 0 33.333%; min-width: 0; padding: 30px; }
/* Tablas de TablePress con el CSS escrito a mano del original («so-css»): 14 px, celdas livianas,
   primera columna al 60 % y la segunda alineada a la derecha, filas alternadas. */
.tabla-plan {
  width: 100%;
  margin: 0 auto 1rem;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
}
.tabla-plan th, .tabla-plan td {
  padding: .5em .8em;
  line-height: 1.3em;
  text-align: left;
  vertical-align: top;
}
.tabla-plan th {
  padding: 1em;
  background: var(--plan-acento);
  color: var(--blanco);
  font-weight: 500;
  text-transform: uppercase;
  vertical-align: middle;
}
.tabla-plan th:first-child { border-radius: 5px 0 0 0; }
.tabla-plan th:last-child { border-radius: 0 5px 0 0; }
.tabla-plan th:only-child { border-radius: 5px 5px 0 0; }
.tabla-plan--oscura th { background: var(--plan-oscuro); }
.tabla-plan td { font-weight: 300; background: var(--blanco); }
.tabla-plan tbody tr:nth-child(even) td { background: #848e9f12; }
.tabla-plan td:first-child { width: 60%; }
.tabla-plan td:nth-child(2) { text-align: right; }
/* En el original se anima la caja de la tabla con su margen de abajo: sube desde un poco más abajo. */
.tabla-plan[data-entrada="desde-abajo"].es-visible { animation-name: desde-abajo-tabla; }
@keyframes desde-abajo-tabla { from { opacity: 0; transform: translate3d(0, calc(100% + 1rem), 0); } to { opacity: 1; transform: none; } }

/* «Conocé nuestros Prestadores»: foto fija (en escritorio) con velo del color del plan. */
.llamado {
  position: relative;
  padding: 100px 0;
  background: center / cover no-repeat;
  color: var(--blanco);
  text-align: center;
}
@media (min-width: 1025px) { .llamado { background-attachment: fixed; } }
.llamado::before { content: ""; position: absolute; inset: 0; background: var(--plan-oscuro); opacity: .7; }
.llamado__interior {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 1170px;
  margin: 0 auto;
  padding: 10px;
}
.llamado__titulo {
  margin-bottom: 20px;
  font-family: var(--f-titulos);
  font-size: var(--t-titulo-pagina);
  font-weight: 600;
  line-height: 1.2em;
}
.llamado__texto { margin-bottom: 20px; padding: 0 26%; }
.llamado__texto--parrafo { margin-bottom: calc(.9rem + 20px); }
.llamado__boton {
  align-self: center;
  margin-top: 20px;
  padding: 20px 40px;
  background: var(--plan-boton);
  font-size: var(--t-boton);
}

/* ---------- Prestadores de cada plan ---------- */
.pagina-prestadores .banner {
  background-image: url(../images/fondo-prestadores-1920x1280.jpg);
  background-position: 0 64%;
}
.prestadores { padding: 80px 0; }
.prestadores__interior { max-width: 1366px; margin: 0 auto; padding: 30px; }
/* Caja de cada tabla (la que entra animada), con el margen de DataTables adentro. */
.prestadores__tabla { display: flow-root; }
.prestadores__tabla:not(:last-child) { margin-bottom: 20px; }
/* DataTables con desplazamiento horizontal: si la tabla no entra, se corre de costado. */
.tabla-desplazable { position: relative; margin-bottom: 16px; padding: 5px 0; overflow-x: auto; }
.tabla-prestadores { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 14px; }
.tabla-prestadores th, .tabla-prestadores td {
  padding: .5em .8em;
  line-height: 1.3em;
  text-align: left;
  vertical-align: top;
}
.tabla-prestadores th { padding: 1em; background: var(--plan-acento); color: var(--blanco); vertical-align: middle; }
.tabla-prestadores td { font-weight: 300; background: var(--blanco); }
.tabla-prestadores tbody tr:nth-child(even) td { background: #848e9f12; }
/* Una celda vacía en el encabezado (tabla de Rosario): TablePress la pinta con su celeste por defecto. */
.tabla-prestadores thead td { background: #d9edf7; color: #111; vertical-align: middle; }
.tabla-prestadores .grupo { margin: 0 0 10px; font-weight: 800; }
/* Enlaces sueltos del contenido (kit de Elementor: a:hover sin clase), sin transición. */
.tabla-prestadores a:hover { color: var(--azul-claro); }

/* ---------- Planes NOB ---------- */
/* Logos de Italmédica, Newell's y el Hospital Italiano. El del Hospital desborda 50 px a la derecha de
   su lugar (margen negativo en el original). Si no entran (tablas de 768 px), se achican en proporción
   a su ancho, como los widgets del original. */
.alianza { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0 20px 10px 0; list-style: none; }
.alianza li { flex: 0 1 auto; min-width: 0; }
.alianza img { display: block; }
.alianza li:nth-child(1) img { width: 64px; }
.alianza li:nth-child(2) img { width: 50px; }
.alianza li:nth-child(3) { width: 80px; }
.alianza li:nth-child(3) img { width: 130px; max-width: calc(100% + 50px); }
.alianza--portada { justify-content: center; gap: 100px; padding: 10px 20px 10px 0; }
.alianza--portada li:nth-child(2) { padding-left: 20px; }

/* Encabezado: degradado de negro a rojo y la foto del estadio encima, al 25 %. */
.portada-nob {
  position: relative;
  padding: 116px 0;
  background: linear-gradient(180deg, #000 0%, #b91732 100%);
  color: var(--blanco);
  text-align: center;
}
.portada-nob::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #170006 url(../images/fondo-estadio-nob-1920x420.jpg) top center / cover;
  opacity: .25;
}
.portada-nob__interior {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1170px;
  margin: 0 auto;
  padding: 10px;
}
.portada-nob__titulo {
  font-family: var(--f-titulos);
  font-size: var(--t-titulo-pagina);
  font-weight: 600;
  line-height: 1.2em;
}
.portada-nob__descuento {
  margin: 0;
  font-family: var(--f-titulos);
  font-size: 36px;
  font-weight: 900;
  line-height: 1.2em;
}
.portada-nob__texto { font-weight: 300; letter-spacing: .05em; }

/* Las dos tablas (el mismo componente que «Nuestros Planes» de la portada), con otros colores. */
.planes-nob__lista { display: flex; max-width: 1366px; margin: 0 auto; padding: 70px 0; list-style: none; }
.planes-nob__columna { display: flex; flex-direction: column; flex: 0 1 100%; min-width: 0; }
.planes-nob__columna--lazio { padding: 30px 20px 30px 40px; }
.planes-nob__columna--milano { padding: 30px 40px 30px 20px; }
.pagina-nob .plan--lazio { --plan-color: #b91732; }
.pagina-nob .plan--milano { --plan-color: #000; }
.pagina-nob .plan__coberturas { padding-bottom: 50px; }
.pagina-nob .plan--milano .plan__coberturas { padding-bottom: 49px; }
.pagina-nob .plan--lazio .plan__coberturas > li:not(:first-child)::before { margin-block: 20px; }
/* Lazio cierra con los logos, sin raya (CSS escrito a mano del original). */
.pagina-nob .plan__coberturas .plan__logos::before { display: none; }
.plan__logos .alianza { margin-top: 50px; }
/* Milano cierra con «Beneficios especiales»: sube 23 px para quedar al lado del tilde, y la franja de
   logos (con el fondo de la tabla) sube 25 px más sobre las listas y tapa el final del tercer renglón,
   como en el original. */
.beneficios { display: flex; flex-direction: column; margin-top: -23px; padding-left: 30px; }
.beneficios__titulo { font-size: 14px; font-weight: 700; line-height: 2em; }
.beneficios__listas { display: flex; align-items: flex-start; }
.beneficios__listas p { flex: 1 1 0; min-width: 0; line-height: 2em; }
.beneficios__logos {
  position: relative;
  margin: -25px 0 0 -30px;
  overflow: hidden;
  background: #f9fafa;
}
.beneficios__logos .alianza { margin-top: 50px; }

/* ---------- Hospital Italiano Rosario ---------- */
.pagina-hir { --plan-oscuro: var(--azul); --plan-flecha: #8dd2ff; }
.pagina-hir .banner {
  padding: 140px 0;
  background-color: var(--azul);
  background-image: url(../images/fondo-hir-1899x1043.jpg);
  background-position: 0 73%;
}

/* «Dedicados a nuestra comunidad»: texto y dos fotos encimadas con el botón del video. */
.hir-historia { padding: 100px 0; }
.hir-historia__interior { display: flex; max-width: 1170px; margin: 0 auto; }
.hir-historia__texto { display: flex; flex: 0 0 50%; flex-direction: column; min-width: 0; padding: 10px 80px 10px 10px; }
.hir-historia .antetitulo { margin-bottom: 20px; }
.hir-historia__titulo {
  margin-bottom: 20px;
  font-family: var(--f-titulos);
  font-size: var(--t-titulo2);
  font-weight: 600;
  line-height: 1.2em;
  color: var(--azul);
}
.hir-historia__parrafos { font-size: 16px; line-height: 1.75em; }
/* Las fotos y el botón son renglones de un contenedor flexible centrado: los márgenes negativos
   encima cada pieza sobre la anterior, y el centrado se calcula con esos renglones (como en Elementor). */
.hir-historia__fotos {
  display: flex;
  flex: 0 0 50%;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  min-width: 0;
  padding: 10px;
}
.hir-historia__fotos > div { width: 100%; }
.hir-historia__foto-grande { margin-bottom: 20px; text-align: end; }
.hir-historia__foto-grande img { width: 82%; border-radius: 5px; box-shadow: -55px 20px 0 1px rgba(0, 229, 204, .17); }
/* El margen negativo va en la imagen: si la foto mide menos que el margen, el contenedor queda en 0 de
   alto (no negativo), como el widget del original. */
.hir-historia__foto-chica { margin-bottom: 20px; }
.hir-historia__foto-chica img { display: block; width: 52%; margin-top: -199px; border: solid #fff; border-width: 15px 15px 0 0; border-radius: 0 5px 0 5px; }
/* En el original, el margen negativo del botón va en un envoltorio interno y el widget queda con alto 0:
   el margen de abajo (330 − 60 del botón) hace lo mismo, para que el renglón no reste alto al centrado. */
.hir-historia__fotos > .hir-historia__video { width: calc(100% - 110px); margin: -330px 0 270px 110px; text-align: center; }
/* Botón de video de Jeg Kit, con dos ondas que se expanden (jkit-ripple). En el original es un enlace
   con renglón de 65 px; un <button> centra el renglón en su alto, así que va con renglón de 60 px y el
   icono 2 px más abajo (mismo lugar). */
.boton-video {
  position: relative;
  z-index: 6;
  display: inline-block;
  width: 60px;
  height: 60px;
  padding: 0 0 0 5px;
  border: 0;
  border-radius: 50%;
  background: var(--verde);
  color: var(--blanco);
  font-family: inherit;
  font-size: 18px;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  transition: all .4s ease;
}
.boton-video svg { width: 18px; height: 18px; vertical-align: -3px; }
.boton-video::before, .boton-video::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: var(--verde-suave);
  box-shadow: 0 0 0 0 currentColor;
  opacity: .6;
  animation: onda-video 3s infinite;
}
.boton-video::after { animation-delay: .3s; }
@keyframes onda-video {
  70% { box-shadow: 0 0 0 15px currentColor; opacity: 0; }
  100% { box-shadow: 0 0 0 0 currentColor; opacity: 0; }
}

/* «Profesionales calificados»: fondo azul con trama al 15 % y las tres sedes. */
.hir-profesionales { position: relative; padding: 100px 0 210px; background: #000a31; }
.hir-profesionales::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/fondo-trama-oscura-1920x1280.jpg) bottom center / cover;
  opacity: .15;
}
.hir-profesionales__interior { position: relative; display: flex; max-width: 1170px; margin: 0 auto; }
.hir-profesionales__texto { display: flex; flex: 0 0 66.67%; flex-direction: column; min-width: 0; padding: 10px 50px 10px 10px; color: var(--blanco); }
.hir-profesionales .antetitulo { margin-bottom: 20px; }
.hir-profesionales__titulo {
  margin-bottom: 20px;
  font-family: var(--f-titulos);
  font-size: var(--t-titulo-pagina);
  font-weight: 600;
  line-height: 1.2em;
}
.hir-profesionales__parrafos { margin-top: 10px; }
.sedes { flex: 0 0 33.33%; min-width: 0; margin: 0; padding: 10px; list-style: none; }
/* Cajas de Jeg Kit: al pasar el puntero sube un fondo desde abajo y cambian los colores. */
.sede {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
  padding: 28px;
  border: 1px solid #434d75;
  border-radius: 5px;
  background: #00dbc3;
  color: var(--blanco);
  transition: all .4s ease;
}
.sede:not(:last-child) { margin-bottom: 30px; }
.sede::before {
  content: "";
  position: absolute;
  bottom: -101%;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all .6s ease;
}
.sede:hover::before { bottom: 0; background-color: var(--blanco); }
.sede__icono { position: relative; z-index: 2; display: flow-root; width: fit-content; height: 40px; margin-bottom: 20px; transition: all .4s ease; }
.sede__icono svg { display: block; width: 40px; height: 41px; margin-top: -1px; }
.sede__nombre {
  position: relative;
  z-index: 2;
  margin-bottom: 10px;
  font-family: var(--f-titulos);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3em;
  transition: all .4s ease;
}
.sede__direccion { position: relative; z-index: 2; margin: 0; color: var(--gris); }
.sede--sur:hover { background: var(--blanco); }
.sede--sur:hover .sede__nombre { color: var(--azul-claro); }
.sede--sur:hover .sede__icono { color: var(--verde); }
.sede--centro { border-color: #00e5cc; background: #fff0; }
.sede--centro .sede__icono { color: var(--verde); }
.sede--centro:hover { border-color: var(--blanco); background: var(--blanco); }
.sede--centro:hover .sede__nombre { color: var(--azul-claro); }
.sede--consultorios { background: var(--blanco); }
.sede--consultorios .sede__icono { color: var(--verde); }
.sede--consultorios .sede__nombre { color: var(--azul-claro); }
.sede--consultorios:hover { background: var(--verde-claro); }
.sede--consultorios:hover::before { background-color: #00e5cc; }
.sede--consultorios:hover .sede__nombre, .sede--consultorios:hover .sede__icono { color: var(--blanco); }

/* «Desde hace 126 años»: tarjeta encimada sobre las secciones de arriba y de abajo. */
.hir-trayectoria { position: relative; z-index: 4; display: flow-root; margin-top: -155px; }
.hir-trayectoria__tarjeta {
  position: relative;
  max-width: 1170px;
  margin: 2px auto 0;
  padding: 110px 50px;
  border-radius: 10px;
  background: #fff url(../images/fondo-hir-tarjeta-1843x900.jpg) 50% 15% / 160% auto;
  box-shadow: 0 5px 40px 0 rgba(61, 113, 117, .51);
}
.hir-trayectoria__tarjeta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--verde-suave) 9%, var(--verde-claro) 80%);
}
.hir-trayectoria__titulo {
  position: relative;
  font-family: var(--f-titulos);
  font-size: var(--t-titulo2);
  font-weight: 300;
  line-height: 48px;
  letter-spacing: 1.6px;
  color: var(--blanco);
  text-align: center;
}

/* «Avances de Obras»: video de YouTube. */
.hir-obras { margin-top: -164px; padding: 220px 0 100px; }
.hir-obras__interior { display: flex; flex-direction: column; max-width: 1170px; margin: 0 auto; padding: 10px; }
.hir-obras .antetitulo { margin-bottom: 20px; }
.hir-obras__titulo {
  margin-bottom: 20px;
  font-family: var(--f-titulos);
  font-size: var(--t-titulo2);
  font-weight: 600;
  line-height: 1.2em;
  color: var(--azul);
  text-align: center;
}
.hir-obras__texto { margin-bottom: calc(.9rem + 20px); padding: 0 26%; text-align: center; }
.hir-obras__video { position: relative; overflow: hidden; margin-top: 40px; aspect-ratio: 1.77777; }
.hir-obras__video iframe { display: flex; width: 100%; height: 100%; border: 0; background: #000; }

/* Galería: tres carruseles. */
.hir-galeria { position: relative; }
.hir-galeria::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/fondo-trama-clara-1920x1280.jpg) bottom center / cover;
  opacity: .2;
}
.hir-galeria__interior { position: relative; display: flex; flex-direction: column; max-width: 1140px; margin: 0 auto; padding: 80px 10px 120px; }
.hir-galeria__antetitulo { margin-bottom: 40px; color: var(--azul); }
.hir-galeria__titulo {
  margin-bottom: 25px;
  font-family: var(--f-titulos);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2em;
  color: var(--verde);
  text-align: center;
  text-transform: uppercase;
}
.hir-galeria__titulo:not(:nth-child(2)) { margin-top: 20px; }
.carrusel:not(:last-child) { margin-bottom: 20px; }
/* Carrusel de imágenes de Elementor (Swiper): 1 foto, 2 desde 767 px y 3 desde 1024 px (cortes de
   Swiper, por ancho mínimo), 20 px entre fotos, flechas afuera y puntos debajo. */
.carrusel { --por-vista: 1; position: relative; }
@media (min-width: 767px) { .carrusel { --por-vista: 2; } }
@media (min-width: 1024px) { .carrusel { --por-vista: 3; } }
.carrusel__ventana { width: calc(100% - 60px); margin: 0 auto; padding-bottom: 30px; overflow: hidden; touch-action: pan-y; }
.carrusel__pista { display: flex; margin: 0; padding: 0; list-style: none; transition-property: transform; transition-timing-function: ease; }
.carrusel__foto { flex: 0 0 calc((100% - 20px * (var(--por-vista) - 1)) / var(--por-vista)); margin-right: 20px; text-align: center; }
.carrusel__foto img { vertical-align: baseline; user-select: none; -webkit-user-drag: none; }
.carrusel__flecha {
  position: absolute;
  top: calc(50% - 15px);
  z-index: 1;
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--verde-claro);
  font-size: 22px;
  line-height: inherit;
  cursor: pointer;
  transform: translateY(-50%);
}
.carrusel__flecha--anterior { left: 0; }
.carrusel__flecha--anterior svg { width: 22px; height: 26px; }
.carrusel__flecha--siguiente { right: 0; }
.carrusel__flecha--siguiente svg { width: 22px; height: 22px; }
.carrusel__puntos { position: absolute; bottom: 5px; left: 0; z-index: 10; width: 100%; text-align: center; transform: translate3d(0, 0, 0); }
.carrusel__punto {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--verde-tenue);
  vertical-align: baseline;
  cursor: pointer;
}
.carrusel__punto[aria-current="true"] { background: var(--verde-claro); }

/* Visor del video propio (SweetAlert2 de Jeg Kit): velo al 40 %, sin fundido, video de 720 × 480
   centrado y la cruz arriba a la derecha. */
.visor.visor--archivo { display: grid; grid-template-columns: minmax(0, 1fr); padding: 10px; background: rgba(0, 0, 0, .4); animation: none; }
.visor__archivo { position: relative; width: 100%; max-width: 900px; margin: auto; font-size: 18px; line-height: normal; text-align: center; }
.visor__archivo video { max-width: 100%; height: auto; vertical-align: baseline; }
.visor__cruz {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blanco);
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 16px;
  cursor: pointer;
  transform: translateY(-100%);
}

/* ---------- Contacto ---------- */
.pagina-contacto { --plan-oscuro: var(--azul); --plan-flecha: #8dd2ff; }
.pagina-contacto .banner {
  padding: 140px 0;
  background-color: var(--azul);
  background-image: url(../images/fondo-formulario-medico-2000x1335.jpg);
  background-position: 0 68%;
}
.contacto { padding: 100px 0; }
.contacto__interior { display: flex; max-width: 1170px; margin: 0 auto; }
/* Las dos columnas centran su contenido en el alto de la fila (la del formulario es la más alta). */
.contacto__formulario {
  display: flex;
  flex: 0 0 50%;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 40px 55px;
  border-radius: 5px;
  box-shadow: 0 5px 40px 0 #3d717526;
}
.contacto__datos {
  display: flex;
  flex: 0 0 calc(50% - 60px);
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  margin-left: 60px;
  padding: 10px;
}
.contacto__datos .antetitulo { margin-bottom: 20px; }
.contacto__titulo {
  margin-bottom: 20px;
  font-family: var(--f-titulos);
  font-size: var(--t-titulo2);
  font-weight: 600;
  line-height: 1.2em;
  color: var(--azul);
}
.contacto__texto { margin-bottom: calc(.9rem + 20px); }
/* «Nuestras Oficinas» (recuadro de ElementsKit): todo el recuadro es un enlace subrayado. */
.oficina {
  display: flex;
  align-items: flex-start;
  margin: 20px 10px 0 0;
  border-radius: 5px;
  background: var(--blanco);
}
/* Al pasar el puntero, el subrayado toma el color de los enlaces del tema (sin transición). */
.oficina:hover, .oficina:active { color: #336; }
.oficina__icono {
  display: flex;
  flex: none;
  justify-content: center;
  margin: 5px 15px 0 0;
  padding: 20px;
  border-radius: 5px;
  background: var(--verde);
  color: var(--blanco);
}
.oficina__icono svg { width: 30px; height: 30px; }
.oficina__titulo {
  margin: 5px 0 10px;
  font-family: var(--f-titulos);
  font-size: var(--t-subtitulo);
  font-weight: 600;
  line-height: 1.3em;
  color: var(--azul);
  transition: all .4s;
}
.oficina__direccion { margin: 0 0 10px; color: var(--gris); }
.contacto__divisor { width: 100%; margin: 45px 0 35px; border: 0; border-top: 1px solid #e1e1e1; }
.contacto__subtitulo {
  margin-bottom: 20px;
  font-family: var(--f-titulos);
  font-size: var(--t-subtitulo);
  font-weight: 600;
  line-height: 1.3em;
  color: var(--azul);
}
.contacto__horario { display: flex; align-self: flex-start; align-items: center; margin: 0 0 20px; }
.contacto__horario svg { flex: none; width: 17.5px; height: 14px; color: var(--verde); }
.contacto__horario span { padding-left: 5px; }
.boton--borde-verde { color: var(--verde); }

/* Formulario (el de Elementor Pro): campos de 14 px con renglón de 34 px y 32 px entre filas. Es una
   maqueta: site.js no lo envía y muestra el aviso (ver README). */
.formulario__campo { margin-bottom: 32px; }
/* En el original, entre el mensaje y el botón va un reCAPTCHA (la casilla «No soy un robot», de 78 px
   de alto, con su fila): se reserva el lugar. */
.formulario__campo--mensaje { margin-bottom: calc(32px + 78px + 32px); }
.formulario input, .formulario textarea {
  display: block;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  background: var(--blanco);
  color: var(--gris);
  font-family: var(--f-texto);
  font-size: 14px;
  line-height: 34px;
  vertical-align: middle;
  transition: all .3s;
}
.formulario textarea { padding: 5px 14px; resize: vertical; }
.formulario input::placeholder, .formulario textarea::placeholder { color: inherit; opacity: .6; }
.formulario input:focus, .formulario textarea:focus { border-color: #333; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); outline: 0; }
/* El botón ocupa media fila (con 5 px de separación a cada lado, como las columnas de Elementor). */
.formulario__envio { width: calc(50% - 5px); }
.formulario__boton {
  width: 100%;
  min-height: 40px;
  padding: 20px 40px;
  border: 0;
  border-radius: 50px;
  background: var(--verde);
  color: var(--blanco);
  font-family: var(--f-titulos);
  font-size: var(--t-boton);
  font-weight: 500;
  line-height: 1em;
  white-space: nowrap;
  cursor: pointer;
  transition: all .3s;
}
.formulario__estado { margin: 20px 0 0; color: var(--azul); text-align: center; }
.formulario__estado:empty { display: none; }
.formulario__estado--error { color: #b3261e; }
.formulario__estado--cargando::before {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px;
  border: 2px solid var(--verde-tenue); border-top-color: var(--verde); border-radius: 50%; animation: girar .8s linear infinite;
}
.formulario__boton:disabled { opacity: .6; cursor: wait; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Mapa de Google a todo el ancho; el pie se le monta encima 50 px. */
.mapa { margin-bottom: -50px; }
.mapa iframe { display: block; width: 100%; height: 480px; border: 0; }

/* ---------- Novedades y notas ---------- */
.pagina-novedades, .pagina-nota { --plan-oscuro: var(--azul); --plan-flecha: #8dd2ff; }
.pagina-novedades .banner, .pagina-nota .banner { padding: 140px 0; background-color: var(--azul); }
.pagina-novedades .banner {
  background-image: url(../images/fondo-enfermera-recepcion-2000x1331.jpg);
  background-position: 0 98%;
}
.pagina-nota .banner {
  background-image: url(../images/fondo-medicos-tableta-2000x1333.jpg);
  background-position: 0 91%;
}
/* Título de la nota (en el original, en línea) y, debajo, la fecha y la categoría con sus iconos: cuatro
   piezas sueltas, que en pantallas angostas pasan de renglón cada una por su lado. */
.banner__titulo--nota { align-self: center; margin: 8px 0 36px; }
.nota-datos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0; padding: 0 0 10px; }
.nota-datos__icono { color: var(--verde); }
.nota-datos__icono svg { width: 16px; height: 16px; }
.nota-datos__texto { margin: 0 20px 4px 10px; }
/* La fecha es un párrafo con su margen (.9rem) en un contenedor de −10 px: 0,4 px más que la categoría. */
time.nota-datos__texto { margin-bottom: calc(.9rem - 10px); }

/* Cuerpo: la columna principal (65 %) y la lateral, a 40 px. */
.listado { padding: 100px 0; }
.listado__interior { display: flex; max-width: 1170px; margin: 0 auto; }
.listado__principal { flex: 0 0 65%; min-width: 0; padding: 10px; }
.listado__lateral { flex: 0 0 calc(34.869% - 40px); min-width: 0; margin-left: 40px; padding: 10px; }
.listado--nota .listado__lateral { flex-basis: calc(35% - 40px); }

/* Listado: las tarjetas de nota de la portada, en una columna, con la foto de 460 px y el texto con
   20 px de aire a la derecha. */
.notas--listado { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
.notas--listado .nota__foto { height: 460px; background: none; }
.notas--listado .nota__titulo { margin: 20px 20px 0 0; }
/* El enlace lleva letra más grande que el título que lo contiene (como en el original): el renglón
   suma la de los dos. */
.notas--listado .nota__titulo a { font-size: var(--t-tarjeta); line-height: 1.2em; }
.notas--listado .nota__resumen { margin: 8px 20px 0 0; }
.notas--listado .nota__pie { display: flex; margin: 24px 20px 0 0; }
.notas--listado .nota__mas { margin-bottom: 20px; background: var(--blanco); }

/* Tarjeta «Emergencias Médicas»: foto con un velo azul oscuro al 70 %. */
.emergencias {
  position: relative;
  padding: 40px 30px 30px;
  border-radius: 5px;
  background: url(../images/fondo-equipo-profesional-2000x1333.jpg) center / cover no-repeat;
  color: var(--blanco);
  text-align: center;
}
.emergencias::before { content: ""; position: absolute; inset: 0; border-radius: 5px; background: #000e44; opacity: .7; }
.emergencias > * { position: relative; }
.emergencias__titulo {
  margin-bottom: 20px;
  font-family: var(--f-titulos);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2em;
}
.emergencias__texto { margin-bottom: calc(.9rem + 20px); }
.emergencias__boton {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 auto;
  padding: 15px 30px;
  border-radius: 50px;
  background: var(--verde);
  color: var(--blanco);
  font-family: var(--f-titulos);
  font-size: var(--t-boton-chico);
  font-weight: 500;
  line-height: 1em;
  text-decoration: none;
}
.emergencias__boton svg { flex: none; width: 1em; height: 1em; }

/* Nota: foto, texto, divisor y «Compartir» (en columna, para que los márgenes no se fundan). */
.articulo { display: flex; flex-direction: column; }
.articulo__foto { display: block; align-self: center; margin-bottom: 70px; border-radius: 8px; }
.articulo__texto { margin-bottom: 20px; }
.articulo__divisor { margin: 2px 0 42px; border: 0; border-top: 1px solid #e1e1e1; }
/* La mitad derecha de una fila de 800 px como máximo, centrada. */
.compartir { align-self: flex-end; width: 50%; max-width: 400px; margin-right: max(0px, (100% - 800px) / 2); padding: 10px; }
.compartir__texto { margin-bottom: calc(.9rem + 20px); text-align: end; }
.compartir__lista { display: flex; justify-content: flex-end; gap: 10px; }
.compartir__boton {
  display: flex;
  transition-property: filter, background-color, border-color;
  transition-duration: .2s;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 999px;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0));
  color: var(--blanco);
}
.compartir__boton:hover { filter: saturate(1.5) brightness(1.2); }
.compartir__boton svg { height: 17px; }
.compartir__boton--whatsapp { background-color: #25d366; }
.compartir__boton--whatsapp svg { width: 14.875px; }
.compartir__boton--facebook { background-color: #3b5998; }
.compartir__boton--twitter { background-color: #1da1f2; }
.compartir__boton--facebook svg, .compartir__boton--twitter svg { width: 17px; }

/* «Últimas Novedades»: miniatura de 130 px, fecha y título. */
.ultimas { display: flex; flex-direction: column; padding: 10px; background: var(--blanco); }
.ultimas__encabezado {
  margin-bottom: 20px;
  font-family: var(--f-titulos);
  font-size: var(--t-tarjeta);
  font-weight: 600;
  line-height: 1.2em;
  color: var(--verde);
}
.ultimas__lista { margin-bottom: 40px; }
.ultimas__lista li { display: flex; align-items: center; }
.ultimas__lista li:not(:last-child) { padding-bottom: 10px; }
.ultimas__lista li:not(:first-child) { margin-top: 10px; }
.ultimas__lista a { display: flex; align-items: center; text-decoration: none; }
.ultimas__texto { display: flex; flex-direction: column; align-items: flex-start; }
.ultimas__lista img { flex: none; width: 130px; margin-right: 15px; border-radius: 5px; object-fit: cover; }
.ultimas__fecha { display: inline-block; margin: 0 0 10px 10px; color: var(--gris); font-size: 14px; line-height: 21px; }
.ultimas__titulo { padding-left: 10px; transition: all .4s; }
.ultimas__todas { align-self: flex-start; }
.listado__lateral .emergencias { margin-top: 40px; }
.listado:not(.listado--nota) .listado__lateral .emergencias { margin-top: 0; }

/* ---------- Pie ---------- */
.pie { position: relative; padding: 80px 0 20px; background: var(--azul); }
.pie__interior { max-width: 1170px; margin: 0 auto; }
.pie__columnas { display: flex; padding: 0 10px; }
.pie__columna { display: flex; flex-direction: column; min-width: 0; }
.pie__columna--marca { flex: 0 0 calc(28% - 30px); margin-right: 30px; border-radius: 10px; }
.pie__columna--contacto { flex: 0 0 25%; padding: 0 40px 0 20px; }
.pie__columna--secciones { flex: 0 0 calc(25% - 40px); margin-left: 40px; }
.pie__columna--redes { flex: 0 0 calc(22% - 30px); margin-left: 30px; }
.pie__logo { margin-bottom: 20px; line-height: 0; }
.pie__logo img { width: 75%; }
.pie__texto { margin: 10px 0 14.4px; }
.pie__titulo {
  font-family: var(--f-titulos);
  font-size: var(--t-subtitulo);
  font-weight: 600;
  line-height: 1.3em;
  color: var(--blanco);
}
.pie__titulo { position: relative; margin-bottom: 46px; }
/* La raya del original es un separador de 2 px con 2 px de aire arriba y abajo, a 20 px del título y
   de la lista. */
.pie__titulo::after {
  content: "";
  position: absolute;
  top: calc(100% + 22px);
  left: 0;
  width: 30%;
  border-top: 2px solid var(--verde-claro);
}
.pie__lista { margin-top: 10px; }
.pie__lista li, .pie__lista a { display: flex; align-items: center; color: var(--blanco); }
.pie__lista li + li { margin-top: 10px; }
.pie__lista li:not(:last-child) { padding-bottom: 10px; }
.pie__lista svg { flex: none; width: 17.5px; height: 14px; margin-right: 10px; color: var(--verde-claro); }
.pie__lista span { padding-left: 5px; transition: color .3s; }
.pie__lista svg { transition: color .3s; }
.pie__lista--secciones li + li { margin-top: 5.5px; }
.pie__lista--secciones li:not(:last-child) { padding-bottom: 5.5px; }
.pie__lista--secciones svg { margin-right: 0; }
.redes--pie { justify-content: flex-start; gap: 20px; margin-top: 20px; }
.redes--pie a { width: 38.4px; height: 38.4px; background: var(--verde-claro); }
.redes--pie a:hover { background: var(--blanco); }
.redes--pie a:hover svg { color: #00e5cc; }
.redes--pie svg { width: 16px; height: 16px; }
.pie__divisor { width: 98%; margin: 62px auto 22px; border: 0; border-top: 1px solid #a0aaba2b; }
.pie__base { display: flex; align-items: flex-start; padding: 0 10px; font-size: 14px; line-height: 1.5em; }
.pie__base p { flex: 1; margin: 0; }
.pie__autor a { color: #00b5f0; }
.pie__autor a:hover { color: #80daf8; }
.pie__derechos { margin-bottom: 14.4px !important; text-align: end; }

/* WhatsApp (Click to Chat) */
.whatsapp {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 99999999;
  display: flex;
  align-items: center;
  cursor: pointer;
  animation: whatsapp-entrada .4s cubic-bezier(.25, 1, .5, 1) both;
  transform-origin: bottom right;
}
.whatsapp--movil { right: 10px; bottom: 10px; }
.whatsapp__icono { display: block; width: 50px; height: 50px; pointer-events: none; }
.whatsapp__etiqueta {
  display: none;
  margin: 0 10px;
  padding: 0 16px;
  border-radius: 10px;
  background: #25d366;
  color: var(--blanco);
  font-size: 15px;
  line-height: 1.6;
}
.whatsapp:hover .whatsapp__etiqueta, .whatsapp__etiqueta.se-oculta { display: block; }
.whatsapp:hover .whatsapp__etiqueta { animation: whatsapp-etiqueta .12s; }
.whatsapp__etiqueta.se-oculta { opacity: 0; transition: opacity .1s; }
@keyframes whatsapp-entrada { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes whatsapp-etiqueta { from { opacity: 0; transform: translateX(6px) scaleX(.6); } to { opacity: 1; transform: none; } }

/* Visor del video (como el de ElementsKit, Magnific Popup): fondo oscuro al 80 %, el video a 900 px de
   ancho como máximo y el botón de cerrar en la esquina de la ventana. */
.visor {
  position: fixed;
  inset: 0;
  z-index: 100000000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 6px;
  background: rgba(11, 11, 11, .8);
  animation: visor-entrada .3s ease-out;
}
@keyframes visor-entrada { from { opacity: 0; } }
.visor__marco { position: relative; width: 100%; max-width: 900px; aspect-ratio: 16 / 9; }
.visor__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; box-shadow: 0 0 8px rgba(0, 0, 0, .6); }
/* En el original la cruz no carga (se ve un recuadro vacío): la copia muestra el icono que corresponde. */
.visor__cerrar {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #000;
  color: var(--blanco);
  font-size: 10px;
  cursor: pointer;
  opacity: .65;
  transition: all .3s;
}
.visor__cerrar:hover, .visor__cerrar:focus-visible { opacity: 1; }
.visor__cerrar svg { display: block; width: 1em; height: 1em; }

/* ---------- Entradas animadas (animaciones de entrada de Elementor, «animated-slow»: 2 s) ---------- */
.con-animaciones [data-entrada]:not(.es-visible) { visibility: hidden; }
/* Sin animation-fill-mode, como Elementor: al terminar, el elemento vuelve a ser texto común (con
   suavizado subpíxel); si la animación quedara aplicada, el navegador lo dibujaría en grises. */
.con-animaciones [data-entrada].es-visible { animation-duration: 2s; }
.con-animaciones [data-entrada][data-velocidad="normal"].es-visible { animation-duration: 1.25s; }
[data-entrada="desde-izquierda"].es-visible { animation-name: desde-izquierda; }
[data-entrada="desde-derecha"].es-visible { animation-name: desde-derecha; }
[data-entrada="desde-abajo"].es-visible { animation-name: desde-abajo; }
[data-entrada="aparece"].es-visible { animation-name: aparece; }
@keyframes desde-izquierda { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes desde-derecha { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes desde-abajo { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

/* ================= Tableta (hasta 1024 px) ================= */
@media (max-width: 1024px) {
  .encabezado__superior .encabezado__fila { padding: 20px 10px; }
  .encabezado__logo { flex-basis: 25%; }
  .encabezado__datos { flex-basis: 70%; }
  .dato--correo { padding: 0 20px 0 0; }
  .dato--telefono { padding: 0 0 0 20px; }
  .dato p { font-size: 14px; }
  .encabezado__acciones { display: none; }

  .encabezado__navegacion { z-index: 4; padding: 20px; }
  .menu { flex-basis: 70%; padding: 0 20px 0 0; }
  .redes--encabezado { flex-basis: 30%; }

  /* Menú compacto: panel lateral */
  .menu__abrir {
    display: block;
    width: 45px;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 3px;
    background: var(--verde);
    cursor: pointer;
    transition: all .4s ease-in;
  }
  .menu__raya { display: block; width: 100%; height: 1px; margin-bottom: 4px; background: var(--blanco); }
  .menu__raya:last-child { margin-bottom: 0; }
  .menu__panel {
    position: fixed;
    top: 0;
    left: -100vw;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 350px;
    height: 100%;
    padding-bottom: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--blanco);
    transition: left .6s cubic-bezier(.6, .1, .68, .53);
  }
  .menu.abierto .menu__panel { left: 0; }
  .menu__identidad { display: flow-root; position: relative; z-index: 5; flex: none; width: 100%; padding: 20px 20px 10px; }
  .menu__logo { display: inline-block; margin: 5px 0; padding: 5px; }
  .menu__logo img { max-width: 160px; max-height: 60px; width: auto; }
  .menu__cerrar {
    float: right;
    width: 45px;
    margin: 12px;
    padding: 10px;
    border: 0;
    border-radius: 3px;
    background: var(--verde);
    color: var(--blanco);
    font-family: var(--f-titulos);
    font-size: var(--t-boton);
    font-weight: 500;
    line-height: 1em;
    cursor: pointer;
    transition: all .4s ease-in;
  }
  .menu__cerrar:hover { color: #fffffff7; }
  .menu__velo {
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    z-index: 14;
    width: 100%;
    height: 100%;
    padding-bottom: 10px;
    background: rgba(51, 51, 51, .5);
    transition: all .6s cubic-bezier(.6, .1, .68, .53) .4s;
  }
  .menu.abierto .menu__velo { left: 0; transition: all .6s cubic-bezier(.22, .61, .24, 1) 0s; }
  .menu__lista { display: block; flex: 1 1 auto; height: auto; overflow-y: auto; }
  .menu__lista > li > a, .menu__padre {
    width: 100%;
    height: auto;
    padding: 10px 15px 25px 25px;
    font-size: 13px;
    text-align: left;
  }
  .menu__lista > li > a:is([aria-current], [href^="#"]) { color: var(--verde); }
  /* El ítem que contiene la página actual (current-menu-ancestor), con su flecha. */
  .menu__lista > li.es-actual > .menu__padre, .menu__lista > li.es-actual .menu__flecha { color: var(--verde); }
  .menu__lista > li:hover > a, .menu__lista > li:hover > .menu__padre { color: var(--verde); }
  .menu__flecha {
    order: 2;
    box-sizing: content-box;
    width: 12.3px;
    height: 13px;
    margin: 0 0 0 15px;
    padding: 4px 15px;
    border: 1px solid;
    border-radius: 30px;
  }
  .menu__lista > li:hover .menu__flecha { color: var(--verde); }
  .submenu {
    position: relative;
    top: auto;
    display: none;
    min-width: 0;
    padding: 10px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .con-submenu.abierto > .submenu { display: block; }
  .submenu a { padding: 20px 15px; }
  .submenu a:hover { color: var(--verde); }

  /* Portada */
  .portada { background-position: 56% 0%; }
  .portada__recuadro { padding: 40px; }
  .portada__texto { margin-right: 0; }
  .portada__boton { padding: 0; }
  .portada__hir { padding: 25px 0 0 15px; }

  /* Destacados */
  .destacados { padding-top: 80px; }
  .destacados__lista { flex-wrap: wrap; padding: 10px 20px; }
  .destacado, .destacado--emergencias { flex-basis: 50%; }
  .caja { border-radius: 0 0 0 10px; }
  .destacado--planes .caja, .destacado--emergencias .caja, .destacado--credencial .caja { margin-bottom: 0; }
  .destacado--planes .caja, .destacado--credencial .caja { padding-bottom: 60px; }
  .destacado--emergencias .caja { border-radius: 0 10px 0 0; }
  .destacado--credencial .caja { border-radius: 0 10px 0 0; }
  .destacado--atencion .caja { padding: 40px 50px 36px; border-radius: 0 0 10px 0; }
  .destacado--emergencias .caja__enlace--boton { margin-top: 34px; }

  /* Sobre Italmédica */
  .nosotros { padding: 40px 10px 80px; }
  .nosotros__interior { flex-wrap: wrap; }
  .nosotros__fotos { width: 100%; padding: 10px 10px 40px; }
  .nosotros__detalle { margin-top: -258px; }
  .nosotros__texto { width: 100%; padding: 10px; }

  /* Credencial Digital */
  .credencial { margin-top: 0; padding: 0 20px; }
  .credencial__franja { width: 100%; }
  .credencial__titulo { margin-bottom: 0; }
  .credencial__imagen { margin: -10px 0; }

  /* Servicios */
  .servicios { padding: 80px 10px; }
  .bajada { padding: 0 10%; }
  .servicios__lista { flex-wrap: wrap; }
  .servicio { flex-basis: 50%; }
  .servicio:nth-child(1) { padding: 0 15px 0 0; }
  .servicio:nth-child(2) { padding: 0 0 0 15px; }
  .servicio:nth-child(3) { flex-basis: 100%; padding: 20px 0 20px; }

  /* Planes */
  .planes { padding: 90px 0 60px; }
  .planes__interior > .bajada { padding-inline: calc((100% - 20px) * .1); }
  .planes__lista { flex-wrap: wrap; }
  .plan { flex-basis: 100%; }
  .plan:not(:first-child) { padding: 60px 20px 20px; }

  /* NOB */
  .nob { padding: 0 20px; }
  .nob__franja { width: 100%; }

  /* Novedades */
  .novedades { padding: 80px 10px 40px; }
  .novedades__interior { padding: 0 10px; }
  .notas { grid-template-columns: minmax(0, 1fr); }
  .nota__foto { height: 420px; border-radius: 10px; }

  /* Turnos */
  .turnos { background-attachment: scroll; }
  .turnos__interior { padding: 80px 0; }
  .turnos__contenido { margin: 40px 30px 0; }
  .turnos__correo { padding-right: 20px; }

  /* Pie */
  .pie { padding: 40px 10px 20px; }
  .pie__columnas { flex-wrap: wrap; }
  .pie__columna--marca, .pie__columna--contacto, .pie__columna--secciones, .pie__columna--redes { flex-basis: 50%; }
  .pie__columna--marca { flex-basis: calc(50% - 30px); }
  .pie__columna--secciones, .pie__columna--redes { margin-left: 0; padding-top: 60px; }
  .redes--pie { margin-top: 20px; }

  /* Páginas interiores */
  .banner, .pagina-plan--lazio .banner, .pagina-plan--milano .banner { padding: 120px 10px; }
  .portada-nob { padding: 120px 10px; }
  .pagina-hir .banner, .pagina-contacto .banner { padding: 120px 10px; background-position: 0 0; }
  .contacto { padding: 80px 10px 60px; }
  .contacto__interior { flex-wrap: wrap; }
  .contacto__formulario { flex-basis: 100%; }
  .contacto__datos { flex-basis: 100%; margin: 40px 0 0; }
  .pagina-novedades .banner, .pagina-nota .banner { padding: 120px 10px; background-position: 0 0; }
  .listado { padding: 80px 10px; }
  .listado__interior { flex-wrap: wrap; }
  .listado__principal { flex-basis: 100%; }
  .listado__lateral, .listado--nota .listado__lateral { flex-basis: 100%; margin: 40px 0 0; }
  .emergencias__texto { padding: 0 10%; }
  .notas--listado .nota__foto { height: 420px; }
  .ultimas { padding: 0; }
  .hir-historia { padding: 80px 10px 40px; }
  .hir-historia__interior, .hir-profesionales__interior { flex-wrap: wrap; }
  .hir-historia__texto { flex-basis: 100%; padding: 10px; }
  .hir-historia__fotos { flex-basis: 100%; margin-top: 40px; padding: 10px 10px 40px; }
  .hir-historia__foto-chica img { margin-top: -252px; }
  .hir-profesionales { padding: 80px 10px 180px; }
  .hir-profesionales__texto { flex-basis: 100%; }
  .sedes { flex-basis: 100%; margin-top: 40px; }
  .sede { text-align: center; }
  .sede__icono { margin-inline: auto; }
  .hir-trayectoria { margin: -120px 0 -24px; padding: 0 20px; }
  .hir-trayectoria__tarjeta { padding: 50px; background-position: 0 0; }
  .hir-obras { margin-top: 0; padding: 80px 10px; }
  .hir-obras__texto { padding: 0 10%; }
  :is(.pagina-plan, .pagina-prestadores) .banner { background-position: 0 0; }
  .prestaciones__tablas { flex-wrap: wrap; }
  .prestaciones__columna { flex-basis: 100%; }
  .llamado { padding: 80px 0; }
  .llamado__titulo { margin-inline: 10px; }
  .llamado__texto { padding: 0 10%; }
}

/* ================= Teléfono (hasta 767 px) ================= */
@media (max-width: 767px) {
  .encabezado__logo { flex-basis: 100%; text-align: center; }
  .encabezado__logo img { width: 60%; }
  .encabezado__datos { display: none; }
  .menu { flex-basis: 20%; }
  .redes--encabezado { flex-basis: 80%; }

  .portada { padding: 80px 10px; background-position: center center; }
  .portada__interior { flex-direction: column; }
  .portada__recuadro { width: 100%; }
  .portada__hir { padding: 15px 0 0; }
  .portada__video { display: none; }

  .destacados { padding-top: 40px; }
  .destacado, .destacado--emergencias { flex-basis: 100%; }
  .destacado--planes, .destacado--credencial { margin-top: -10px; }
  .destacados .caja { padding: 30px; }
  .destacado--planes .caja, .destacado--emergencias .caja, .destacado--credencial .caja { border-radius: 0; }
  .caja__icono { margin-bottom: 0; }
  .caja__marca svg { margin-bottom: -2px; }
  .destacado--atencion .caja__marca svg { margin-bottom: -15px; }

  .nosotros { padding: 20px 10px 40px; }
  .nosotros__fotos { padding: 10px; }
  .nosotros__detalle { width: calc(52% - 10px); margin-top: -81px; border-width: 10px 10px 0 0; }
  .nosotros__texto { margin-top: 20px; }
  .valores { grid-template-columns: 1fr; }
  /* El icono va en una caja de 60 × 60 (con 5 px arriba): el título se corre 20 px y la fila mide 65 como mínimo. */
  .valor { min-height: 65px; }
  .valor svg { margin-right: 20px; }

  .credencial { flex-direction: column; justify-content: center; min-height: 290px; padding: 0 30px; }
  .credencial__franja { flex-direction: column-reverse; }
  .credencial__texto { flex-basis: auto; }
  .credencial__titulo { font-size: 24px; }
  .credencial__imagen { flex-basis: auto; margin: -60px 0 0; }

  .servicios { padding: 40px; }
  .bajada, .planes__interior > .bajada { padding: 0; }
  .servicios__lista { margin-top: 20px; }
  .servicio, .servicio:nth-child(1), .servicio:nth-child(2) { flex-basis: 100%; padding: 0; }
  .servicio:nth-child(2) { padding-top: 20px; }
  .servicio:nth-child(3) { padding: 20px 0; }
  .tarjeta { padding: 30px; }

  .planes { padding: 40px 0; }
  .plan__nombre { font-size: 24px; line-height: 1.8em; }
  /* En el original el lema (16 px) comparte renglón con la letra de 14 px de la cabecera, que lo estira 1 px. */
  .plan__lema { padding-bottom: 1px; }

  .nob { flex-direction: column; justify-content: center; min-height: 533px; padding: 0 30px; }
  .nob__franja { flex-direction: column-reverse; }
  .nob__oferta, .nob__lado { flex-basis: auto; }
  .nob__detalle { font-size: 14px; }
  .nob__boton-movil { margin: 20px 0; font-size: 12px; }
  .nob__lado { margin-top: -60px; }
  .nob__accion .boton { display: none; }

  .novedades { padding: 40px 10px 20px; }
  .novedades__bloque { margin-top: 40px; }
  .nota__foto { height: 210px; }

  .turnos { padding: 0 10px; }
  .turnos__interior { padding: 40px 0; }
  .turnos__contenido { margin: 40px 0 0; }
  .turnos__vias { flex-wrap: wrap; }
  .turnos__via--turnos, .turnos__via--autorizaciones { flex-basis: 100%; }
  /* El icono del correo pasa arriba del texto, centrados (en tableta ya lleva 20 px de relleno a la derecha). */
  .turnos__correo { flex-direction: column; align-items: stretch; text-align: center; }
  .turnos__correo-icono { align-self: center; }
  .turnos__correo-texto { flex: none; }
  .boton--turno, .boton--borde { font-size: 12px; }

  .pie__columna--contacto, .pie__columna--secciones, .pie__columna--redes { flex-basis: 100%; padding: 0; }
  .pie__columna--marca { flex-basis: calc(100% - 30px); }
  .pie__columna--contacto, .pie__columna--secciones, .pie__columna--redes { margin-top: 30px; }
  .pie__texto { margin-top: 0; }
  .redes--pie { margin-top: 0; }
  .pie__divisor { margin-top: 42px; }
  .pie__base { flex-direction: column; align-items: stretch; text-align: center; }
  .pie__derechos { text-align: center; }

  /* Páginas interiores */
  .banner, .pagina-plan--lazio .banner, .pagina-plan--milano .banner { padding: 60px 10px; }
  .portada-nob { padding: 60px 10px; }
  .pagina-hir .banner, .pagina-contacto .banner { padding: 80px 10px; }
  .contacto { padding: 40px 10px; }
  .contacto__formulario { padding: 40px 30px; }
  .formulario__envio { width: 100%; }
  .oficina { margin: 0; }
  .pagina-novedades .banner, .pagina-nota .banner { padding: 80px 10px; }
  .listado { padding: 40px 10px; }
  .listado__lateral, .listado--nota .listado__lateral { margin-top: 20px; }
  .emergencias { padding: 25px; }
  .emergencias__titulo { font-size: 18px; }
  .emergencias__texto { padding: 0; }
  .notas--listado .nota__foto { height: 210px; }
  .nota-datos { margin-bottom: 20px; padding: 10px 0; }
  /* + 1 px: en el original, la columna vacía junto a «Compartir» queda arriba con su alto mínimo. */
  .articulo__divisor { margin: 22px 0 63px; }
  .compartir { width: 100%; max-width: none; margin-right: 0; }
  .compartir__texto { text-align: center; }
  .ultimas__lista img { width: 100px; }
  .hir-historia { padding: 40px 10px; }
  .hir-historia__texto { padding: 0 10px; }
  .hir-historia__parrafos { font-size: 14px; }
  .hir-historia__fotos { padding: 10px; }
  /* En el original, el margen de −8 px ensancha el envoltorio de la foto, y la foto es el 52 % de ese ancho. */
  .hir-historia__foto-chica img { width: calc((100% + 8px) * .52); margin: -96px 0 0 -8px; border-width: 10px 10px 0 0; }
  .hir-profesionales { padding: 40px 10px 140px; }
  .hir-profesionales__texto { padding: 10px; }
  .sede { padding: 30px; }
  .sede__icono { width: 60px; height: 60px; margin-bottom: 10px; }
  .sede__icono svg { margin-inline: auto; }
  .sede__nombre { font-size: 16px; }
  .hir-trayectoria { margin: -86px 0 0; }
  .hir-trayectoria__tarjeta { padding: 30px; }
  .hir-trayectoria__titulo { font-size: 20px; line-height: 1.4em; }
  .hir-obras { padding: 40px 10px; }
  .hir-obras__texto { padding: 0; }
  .hir-galeria { padding: 40px 0 20px; }
  .hir-galeria__interior { padding: 0 0 20px; }
  .carrusel__flecha--anterior svg { height: 24px; }  /* renglón de 21 px: ver generar_sprite.py */
  /* Visor del video propio: el relleno y la cruz siguen la letra del cuerpo (14 px en teléfonos). */
  .visor.visor--archivo { padding: 8.75px; }
  .visor__cruz { font-size: 14px; line-height: 14px; }
  .prestadores { padding: 50px 0 70px; }
  .prestadores__interior { padding: 0; }
  .tabla-desplazable { padding: 7px 0; }
  .alianza { flex-wrap: wrap; }
  .alianza--portada { gap: 15px; }
  .portada-nob__texto { font-size: 14px; }
  .planes-nob__lista { flex-wrap: wrap; padding: 50px 0 70px; }
  .planes-nob__columna--lazio { padding: 0; }
  .planes-nob__columna--milano { padding: 50px 0 0; }
  .pagina-nob .plan__nombre { font-size: 32px; }
  .beneficios__listas { flex-direction: column; align-items: stretch; }
  .miga__flecha--elementskit svg { margin-top: 2px; }
  .prestaciones { padding: 50px 0 70px; }
  .prestaciones__columna { padding: 0; }
  .prestaciones__columna + .prestaciones__columna { padding-top: 30px; }
  .llamado { padding: 40px 10px; }
  .llamado__texto { padding: 0; }
}