/* Transportadora La Pampeana — estilos del sitio.
   Cortes: tableta ≤ 1024 px y móvil ≤ 767 px (los de Elementor en el original). Las medidas son
   las del original (tools/volcar-estilos.js); donde Elementor reparte un relleno en varias cajas,
   acá va sumado en una, anotado. */

:root {
  --verde: #00966B;
  --verde-claro: #00CC92;
  --verde-oscuro: #016E4F;
  --rojo: #EC1E24;
  --bordo: #921418;
  --gris-claro: #F9F9F9;
  --gris-menu: #474747;
  --gris-texto: #54595F;
  --roboto: "Roboto", sans-serif;
  --open-sans: "Open Sans", sans-serif;
  /* La regla a medida del original («p, span, li, div { font-family: open sans }»), sin familia de
     reserva: fuera de la portada (que carga Open Sans) usa la Open Sans instalada o la letra por
     defecto del navegador, como el original. */
  --open-sans-a-medida: "open sans";
  --montserrat: "Montserrat", sans-serif;
}

/* ---- Base (la del tema Hello Elementor del original) ---- */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; line-height: 1.2; }
p { margin: 0; }
/* Fondo gris de algunas páginas (ajuste de página de Elementor en el original: Portada, Servicios,
   Flota y COMEX). Se nota en el pie, que es negro al 79 %. */
.fondo-gris { background: #F3F3F3; }
img { max-width: 100%; height: auto; border: 0; }
/* Color de enlace del kit de Elementor del original. */
a { color: var(--verde); text-decoration: none; }
a:hover { color: var(--verde-claro); }
/* Enlaces sin destino (Instagram, sin dirección en el original): sin color de enlace, como en el tema. */
a:not([href]), a:not([href]):hover { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; }
iframe { border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icono { display: block; width: 1em; height: 1em; fill: currentColor; }
.oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Enlace «Ir al contenido»: oculto hasta recibir el foco, como en el tema del original. */
.salto {
  position: absolute !important;
  top: -10000em;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  word-wrap: normal !important;
}
.salto:focus {
  z-index: 100000;
  top: 5px;
  left: 5px;
  display: block;
  width: auto;
  height: auto;
  padding: 15px 23px 14px;
  clip: auto !important;
  clip-path: none;
  background: #eee;
  color: #333;
  font-size: 1rem;
  line-height: normal;
}

/* ---- Encabezado: fijo arriba (Elementor «sticky» desde el primer píxel) ---- */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2px solid var(--verde);
  background: var(--gris-claro);
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1);
}
.encabezado__interior {
  display: flex;
  align-items: center;
  max-width: 1200px;
  min-height: 110px;
  margin: 0 auto;
}
.encabezado__marca { width: 20%; padding: 10px; }
.encabezado__marca a { display: block; width: fit-content; }
.encabezado__marca img { display: block; width: 154px; }

/* Menú de escritorio (SmartMenus en el original: abre a los 250 ms, cierra a los 500 ms con un
   fundido de 200 ms; ver site.js). Subrayado verde que crece desde el centro al pasar el puntero. */
.menu { display: flex; align-items: center; width: 64.996%; padding-top: 16px; }
.menu__boton { display: none; }
.menu__lista { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; }
.menu__lista > li { position: relative; display: flex; }
.menu__lista a { display: flex; align-items: center; white-space: nowrap; }
.menu__lista > li > a {
  position: relative;
  padding: 10px 12px;
  color: var(--gris-menu);
  font: 400 15px/20px "Fira Sans Condensed", sans-serif;
  text-transform: uppercase;
  transition: .4s;
}
.menu__lista > li:not(:first-child) > a { margin-left: 5px; }
.menu__lista > li:not(:last-child) > a { margin-right: 5px; }
.menu__lista > li > a::after {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  display: block;
  width: 0;
  height: 0;
  background: rgba(0, 150, 107, .7);
  opacity: 0;
  transition: .3s cubic-bezier(.58, .3, .005, 1);
}
.menu__lista > li > a:hover,
.menu__lista > li > a:focus,
.menu__lista > li.is-abierto > a,
.menu__lista > li > a[aria-current="page"] { color: var(--verde); }
.menu__lista > li > a:hover::after,
.menu__lista > li > a:focus::after,
.menu__lista > li.is-abierto > a::after,
.menu__lista > li > a[aria-current="page"]::after { left: 0; width: 100%; height: 2px; opacity: 1; }
.menu__flecha { display: flex; align-items: center; margin: -10px 0; padding: 10px 0 10px 10px; line-height: 1; }
.menu__flecha .icono { width: .875em; font-size: .7em; }
.submenu {
  position: absolute;
  z-index: 3;
  top: 100%;
  left: 0;
  display: none;
  min-width: 10em;
  background: var(--gris-claro);
  font-size: 13px;
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
}
.con-submenu.is-abierto > .submenu { display: block; }
.con-submenu.is-cerrando > .submenu { display: block; animation: submenu-fundido .2s cubic-bezier(.37, 0, .63, 1) forwards; }
@keyframes submenu-fundido { from { opacity: 1; } to { opacity: 0; } }
.submenu li:not(:last-child) { border-bottom: 1px solid #efefef; }
.submenu a {
  padding: 15px 8px;
  border-left: 8px solid transparent;
  color: var(--gris-texto);
  font: 500 13px/20px var(--montserrat);
  transition: .4s;
}
.submenu a:hover,
.submenu a:focus,
.submenu a[aria-current="page"] { background: var(--gris-claro); color: var(--verde); }

/* Redes sociales (encabezado y pie): cuadrados de 32 px con el icono centrado en una caja de 1 em
   (YouTube, más ancho, desborda centrado, como el glifo en el original). */
.redes { display: flex; }
.redes a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 16px; cursor: pointer; }
.redes .icono { flex: none; }
.redes li:nth-child(4) .icono { width: 1.125em; }
/* Si no entran en la columna (cerca de 1025 px), los últimos bajan a otra línea, como en el original. */
.redes--encabezado { flex-wrap: wrap; justify-content: flex-end; gap: 0 12px; width: 15%; padding-top: 16px; }
.redes--encabezado .icono { color: var(--verde-oscuro); }
.redes--encabezado a:hover .icono { color: var(--bordo); }

/* ---- Portada: diapositivas de fondo con fundido cruzado y efecto Ken Burns (site.js) ---- */
.portada { position: relative; padding: 210px 10px; text-align: center; }
.portada::before { content: ""; position: absolute; z-index: 1; inset: 0; background: #000; opacity: .5; }
.portada__diapositivas { position: absolute; z-index: 0; inset: 0; overflow: hidden; }
.portada__diapositiva {
  position: absolute;
  inset: 0;
  background-position: 50%;
  background-size: cover;
  opacity: 0;
  transition: opacity .5s, transform 10s linear;
}
.portada__diapositiva.is-activa { z-index: 1; opacity: 1; }
.portada__diapositiva.is-acercando { transform: scale(1.3); transition: opacity .5s, transform 20s linear; }
.portada__diapositiva--cisternas { background-image: url("../images/inicio-portada-camiones-cisterna-1920x1440.jpg"); }
.portada__diapositiva--ruta { background-image: url("../images/inicio-portada-cisterna-en-ruta-1920x1080.jpg"); }
.portada__diapositiva--flota { background-image: url("../images/inicio-portada-flota-1920x1440.jpg"); }
/* En columna: los márgenes de la línea y del texto no se funden (en Elementor son widgets separados). */
.portada__contenido { position: relative; z-index: 2; display: flex; flex-direction: column; }
.portada__titulo { color: rgba(255, 255, 255, .92); font: 600 82px/1 var(--roboto); }
.portada__linea { height: 0; margin: 15px 0; border: 0; border-top: 1.8px solid rgba(236, 30, 36, .6); }
.portada__texto { margin-top: 10px; padding: 0 180px; color: #fff; font: 600 1.3em/1.6em var(--open-sans); }

/* ---- Accesos (Elementor «Call to Action»): al pasar el puntero, la foto se acerca, el velo verde
   pasa a negro y el texto crece ---- */
.accesos {
  position: relative;
  padding: 160px 0;
  background: url("../images/fondo-mapa-rutas-1023x828.jpg");
}
.accesos::before { content: ""; position: absolute; inset: 0; background: #fff; opacity: .77; }
.accesos__lista { position: relative; display: flex; align-items: flex-start; max-width: 1170px; margin: 0 auto; }
.acceso { position: relative; width: calc(33.333% - 60px); margin: 30px; overflow: hidden; }
.acceso__fondo {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-position: 50%;
  background-size: cover;
  transition: all 1.5s;
}
.acceso__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 150, 107, .71);
  transition: all 1.5s;
}
.acceso:hover .acceso__fondo { transform: scale(1.2); }
.acceso:hover .acceso__fondo::after { background: rgba(0, 0, 0, .3); }
.acceso--empresa .acceso__fondo { background-image: url("../images/inicio-acceso-oficinas-rosario-768x576.jpg"); }
.acceso--cobertura .acceso__fondo { background-image: url("../images/inicio-acceso-ruta-768x507.jpg"); }
.acceso--servicio .acceso__fondo { background-image: url("../images/inicio-acceso-camion-ypf-768x576.jpg"); }
.acceso__contenido {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  min-height: 380px;
  padding: 35px;
  color: #fff;
  text-align: center;
}
.acceso__titulo, .acceso__texto, .acceso__boton { width: 100%; transition: 1s; }
.acceso__titulo { margin-bottom: 10px; font: 600 32px/1.2 var(--roboto); }
.acceso__texto { margin-bottom: 30px; font: 400 16px/1.5 var(--roboto); }
.acceso__boton {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 12px 24px;
  border: 2px solid #fff;
  border-radius: 3px;
  color: #fff;
  font: 500 15px/1 var(--roboto);
}
.acceso__boton:hover { color: #fff; }
.acceso:hover .acceso__titulo, .acceso:hover .acceso__texto, .acceso:hover .acceso__boton { transform: scale(1.1); }

/* ---- Sedes: mapas de Google sobre la foto del edificio (fija al desplazar en escritorio) ---- */
.sedes {
  position: relative;
  padding: 160px 0;
  background: url("../images/inicio-sedes-edificio-1600x900.jpg") 0 0 / cover;
}
.sedes::before { content: ""; position: absolute; inset: 0; background: #000; opacity: .5; }
.sedes__lista { position: relative; display: flex; max-width: 1170px; margin: 0 auto; }
.sede { width: calc(33.333% - 30px); margin: 0 15px; padding: 10px; }
.sede__titulo { margin-bottom: 30px; color: #fff; font: 600 1.8rem/1 var(--roboto); text-align: center; }
.sede__mapa { display: block; width: 100%; height: 300px; margin-bottom: 20px; }

/* Listas con icono (Elementor «Icon List»): sedes de la portada y pie. El icono ocupa una caja de
   1,25 em con el glifo a la izquierda, como en el original. */
.lista li, .lista a { display: flex; align-items: center; }
.lista__icono { display: flex; flex: none; }
.lista__icono .icono { width: 1.25em; }
.lista__icono + .lista__texto { padding-left: 5px; }
.sede .lista { font: 400 14px/2.5em var(--open-sans); }
.sede .lista__icono { padding-right: 5px; color: var(--verde); font-size: 16px; }
.sede .lista__texto { color: #fff; }

/* ---- Videos (YouTube, sin controles, en bucle y sin sonido, como el original) ---- */
.video { position: relative; padding: 150px 0; }
.video::before { content: ""; position: absolute; inset: 0; opacity: .5; }
.video--calles { background: url("../images/fondo-calles-1920x744.jpg"); }
.video--calles::before { background: #711619; }
.video--asfalto { background: #3F3F3F; }
.video--asfalto::before { background: #fff url("../images/fondo-asfalto-932x698.png"); }
.video__marco { position: relative; max-width: 1170px; margin: 0 auto; aspect-ratio: 1.77777; }
.video__reproductor { display: block; width: 100%; height: 100%; background: #000; }

/* ---- Cabecera de las páginas interiores: foto con velo verde (fundido «oscurecer») y título ---- */
.cabecera { position: relative; padding: 110px 0; background-position: 0 0; background-repeat: no-repeat; background-size: cover; }
.cabecera::before { content: ""; position: absolute; inset: 0; background: var(--verde); opacity: .74; mix-blend-mode: darken; }
.cabecera--oficina { background-image: url("../images/quienes-somos-cabecera-oficina-940x535.jpg"); }
/* Servicios: foto de los utilitarios centrada, texto en 700 px y 130 px de relleno abajo. */
.cabecera--servicios { padding-bottom: 130px; background-image: url("../images/servicios-cabecera-utilitarios-1024x768.jpg"); background-position: 50%; }
.cabecera--servicios .cabecera__interior { max-width: 780px; }
.cabecera--comex { padding-bottom: 130px; background-image: url("../images/comex-cabecera-puerto-1920x1080.jpg"); background-position: 50%; }
.cabecera--comex .cabecera__interior { max-width: 780px; }
.cabecera--contacto { background-image: url("../images/contacto-cabecera-oficinas-1600x900.jpg"); }
.cabecera--contacto .cabecera__interior { max-width: 780px; }
/* Flota: foto de la flota corrida 180 px hacia arriba en escritorio (0 0 en tableta, centrada en móvil). */
.cabecera--flota { padding-bottom: 130px; background-image: url("../images/flota-cabecera-camiones-1600x900.jpg"); background-position: 0 -180px; }
.cabecera--flota .cabecera__interior { max-width: 780px; }
.cabecera__interior {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 1170px;
  margin: 0 auto;
  padding: 40px;
  text-align: center;
}
.cabecera__titulo { margin-bottom: 40px; color: #fff; font: 600 3rem/1.17em "Fira Sans Condensed", sans-serif; }
.cabecera__texto {
  padding: 10px;
  border-radius: 10px;
  background: rgba(2, 1, 1, .34);
  color: #fff;
  font: 300 1.25rem/1.5em var(--roboto);
}

/* ---- Quiénes Somos: Propósito, Misión y Valores sobre la foto de la ruta (fija en escritorio) ---- */
.identidad {
  position: relative;
  padding: 60px 0;
  border-top: 2px solid #7D0F12;
  border-bottom: 2px solid #7D0F12;
  background: url("../images/quienes-somos-fondo-ruta-1920x1148.jpg") 50% / cover no-repeat;
}
.identidad::before { content: ""; position: absolute; inset: 0; background: #fff; opacity: .86; }
.identidad__columnas { position: relative; display: flex; max-width: 1020px; margin: 0 auto; padding: 10px; }
/* En columna: los márgenes de los párrafos quedan dentro de cada bloque, como en los widgets. */
.identidad__columna { display: flex; flex-direction: column; width: 50%; padding: 30px; }
/* «Muli» no se carga en el original: cae en la sans serif del sistema (Arial en Windows). */
.identidad__titulo { margin-bottom: 20px; color: var(--verde); font: 600 3rem/1.176em "Muli", sans-serif; letter-spacing: -.5px; }
.identidad__foto { display: block; align-self: flex-start; }
/* Los espaciadores de 20 px del original (más su margen) entre un texto y lo que sigue. */
.texto + .identidad__titulo, .texto + .identidad__foto { margin-top: 40px; }
.texto { margin-bottom: 20px; color: #7A7A7A; font: 400 1rem/1.6em var(--roboto); }
.texto p { margin-bottom: .9rem; font-family: var(--open-sans-a-medida); }
.texto--proposito { font-size: inherit; line-height: 1.5; }
.texto--valores { margin-bottom: 40px; }

/* ---- Servicios: bloques de foto y texto alternados (blanco y gris) ----
   Como las columnas de Elementor: la de la foto arriba; la del texto, centrada en alto. */
.servicio { padding: 60px 0; background: #fff; }
.servicio--gris { background: #f5f6f7; }
.servicio__interior { display: flex; max-width: 1020px; margin: 0 auto; padding: 10px; }
.servicio--foto-derecha .servicio__interior { flex-direction: row-reverse; }
.servicio__foto, .servicio__texto { display: flex; flex-wrap: wrap; width: 50%; padding: 30px; }
.servicio__foto { align-content: flex-start; align-items: flex-start; }
.servicio__foto img { display: block; }
.servicio__texto { align-content: center; align-items: center; }
.servicio__texto > * { width: 100%; }
/* «Muli» no se carga en el original: cae en la sans serif del sistema (Arial en Windows). */
.servicio__titulo { margin-bottom: 50px; color: #444648; font: 600 3rem/1.17em "Muli", sans-serif; letter-spacing: -.5px; }

/* Rubros (Elementor «Icon Box»): flecha de La Pampeana y texto, de a dos por fila. */
.rubros { display: flex; flex-wrap: wrap; align-items: flex-start; }
.rubro { display: flex; align-items: flex-start; gap: 16px; width: calc(50% - 8px); margin: 0 0 20px 8px; }
.rubro__icono { flex: none; width: 1em; height: 1em; font-size: 24px; }
.rubro__contenido { flex: 1; }
/* El título, en el original, va en un <span> que el CSS a medida pasa a «open sans». */
.rubro__titulo { margin: 8px 0 4px; color: #444648; font: 600 1rem/1.33em var(--open-sans-a-medida); }
.rubro__descripcion { color: #999A9C; font: 400 .8125rem/1.42em var(--roboto); }

/* Lista con tildes (Elementor «Icon List» en línea). */
.servicio__texto > .tildes { display: flex; flex-wrap: wrap; width: calc(100% + 16px); margin: 0 -8px 20px; }
.servicio__texto > .tildes:last-child { margin-bottom: 0; }
.tildes li { display: flex; align-items: center; margin: 0 8px; color: var(--gris-texto); font: 400 16px/2.2em var(--roboto); }
.tildes .icono { width: 1.25em; margin-right: 5px; color: var(--verde); font-size: 14px; }
/* La misma lista, un renglón por elemento (Elementor «Icon List» tradicional). */
.servicio__texto > .tildes--columna { display: block; width: 100%; margin: 0 0 20px; }
.tildes--columna li { margin: 0; }

/* Botones con borde rojo y esquinas redondas: se rellenan de rojo al pasar el puntero. */
.boton-borde {
  display: inline-block;
  padding: 11px 23px;
  border: 1px solid var(--rojo);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0);
  color: var(--rojo);
  /* En el original el texto va en un <span>, que el CSS a medida pasa a «open sans». */
  font: 600 1rem/1.42em var(--open-sans-a-medida);
  text-align: center;
  transition: all .3s;
}
.boton-borde:hover, .boton-borde:focus { border-color: var(--rojo); background: var(--rojo); color: #fff; }
.servicio__accion { margin-top: 20px; padding-left: 10px; }
.enlaces-ruta { display: flex; flex-wrap: wrap; }
.enlaces-ruta li { margin: 20px 0 0 10px; }

/* ---- Flota: galería (Elementor «Gallery», grilla 16:9) ----
   Al pasar el puntero, la foto crece al 110 % desde arriba y se tiñe de verde (0,8 s). */
.galeria { padding: 130px 0; }
.galeria__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 1170px; margin: 0 auto; padding: 0 10px; }
.galeria__foto { position: relative; display: block; overflow: hidden; transition: all .35s; }
.galeria__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transform-origin: center top;
  transition: filter .8s, transform .8s;
}
.galeria__foto::after { content: ""; position: absolute; inset: 0; transition: background-color .8s; }
.galeria__foto:hover img, .galeria__foto:focus img { transform: scale(1.1); }
.galeria__foto:hover::after, .galeria__foto:focus::after { background-color: rgba(0, 150, 107, .278); }

/* ---- Contacto: formulario de consulta ----
   El original no tiene formulario (muestra el texto suelto «[bws_google_captcha]» entre dos
   espaciadores de 100 px). Este toma el diseño del formulario de «Trabajá en La Pampeana», el mismo
   widget de Elementor en el mismo sitio, en el lugar de ese texto. */
.consulta { padding: 130px 10px; }
.consulta__formulario { display: flex; flex-wrap: wrap; max-width: 560px; margin: 0 auto; }
.consulta__campo, .consulta__accion { width: 100%; padding: 0 5px; }
.consulta__campo { margin-bottom: 30px; }
.consulta input, .consulta textarea {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(0, 150, 107, .37);
  border-radius: 3px;
  background: #fff;
  color: #7a7a7a;
  font: 400 15px/1.4 var(--roboto);
  transition: all .3s;
}
.consulta textarea { overflow: auto; resize: vertical; }
.consulta ::placeholder { color: inherit; opacity: .6; }
.consulta input:focus, .consulta textarea:focus { outline: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.consulta button {
  min-height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: 3px;
  background: var(--verde);
  color: #fff;
  /* Como en el original, el texto del botón va en la letra del CSS a medida. */
  font: 500 15px/1 var(--open-sans-a-medida);
  cursor: pointer;
  transition: all .3s;
}
.consulta button:hover { background: #006246; color: #00FFB6; }
.consulta button:focus-visible { outline: 2px solid #000; outline-offset: 2px; box-shadow: 0 0 0 4px #fff; }
.consulta__aviso { width: 100%; margin-top: 20px; padding: 0 5px; color: var(--gris-texto); font: 400 15px/1.4 var(--roboto); }
.consulta__aviso a { color: var(--verde); }

/* ---- Visor de fotos (el «lightbox» de Elementor): lo arma site.js al tocar una foto ----
   Fondo negro al 80 %, entra con «zoomIn» (0,3 s), pasa de foto con un deslizamiento de 0,3 s y
   oculta los controles a los 3,5 s sin movimiento. */
.visor {
  --visor-ui: hsla(0, 0%, 93%, .9);
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0, 0, 0, .8);
  color: #333;
  font: 400 16px/1.5 var(--open-sans-a-medida);
  user-select: none;
}
.visor button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.visor .icono { flex: none; }
.visor .visor__cerrar, .visor .visor__cabecera, .visor .visor__flecha { color: var(--visor-ui); }
.visor__cerrar { position: absolute; z-index: 2; top: 0; right: .75em; display: flex; margin-top: 13px; padding: .25em !important; font-size: 20px !important; line-height: 1 !important; transition: all .3s; }
.visor .visor__cerrar:hover, .visor .visor__flecha:hover, .visor .visor__boton:hover { color: #fff; }
.visor__marco { position: relative; height: 100%; overflow: hidden; animation: zoomIn .3s; }
@keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }
.visor__cabecera {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  width: 100%;
  padding: 15px 2.6em 15px 1em;
  font-size: 20px;
  transition: .3s;
}
.visor__boton { display: flex; margin: 0 .35em; padding: .25em !important; transition: all .3s; }
.visor__contador { margin-right: auto; font-size: .75em; }
.visor__pista { display: flex; height: 100%; transition-property: transform; transition-timing-function: ease; }
.visor__diapositiva { display: flex; flex: none; align-items: center; justify-content: center; width: 100%; height: 100%; margin-right: 100px; padding: 70px; cursor: grab; }
.visor__ampliable { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; transition: transform .3s; }
.visor__diapositiva img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 0 30px rgba(0, 0, 0, .3), 0 0 8px -5px rgba(0, 0, 0, .3);
  transition: transform .3s;
  -webkit-user-drag: none;
}
.visor__flecha {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  height: 100%;
  font-size: 25px !important;
  transform: translateY(-50%);
  transition: all .3s;
}
.visor__flecha--anterior { left: 0; }
.visor__flecha--siguiente { right: 0; }
.visor__flecha .icono { box-sizing: content-box; }
/* Compartir: menú blanco que se despliega bajo el botón, sobre un velo negro. */
.visor__compartir { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; background-color: transparent; transition: background-color .4s; }
.visor__enlaces {
  position: absolute;
  top: 3em;
  right: 2.8em;
  min-width: 200px;
  padding: 14px 20px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .3);
  opacity: 0;
  transform: scale(0);
  transform-origin: 90% 10%;
  transition: all .25s .1s;
}
.visor__enlaces::before {
  content: "";
  position: absolute;
  top: 1px;
  right: .5em;
  display: block;
  border: .45em solid transparent;
  border-bottom-color: #fff;
  transform: translateY(-100%) scaleX(.7);
}
.visor__enlaces a { display: flex; align-items: center; color: #0C0D0E; font-size: 12px; line-height: 2.5; opacity: 0; text-align: start; transition: opacity .5s .1s; }
.visor__enlaces a:hover { color: #000; }
.visor__enlaces .icono { margin-right: .75em; font-size: 1.25em; }
.visor__enlaces .icono--facebook { color: #3B5998; }
.visor__enlaces .icono--x { color: #000; }
.visor__enlaces .icono--pinterest { color: #BD081C; }
.visor__enlaces .icono--descargar { color: #9DA5AE; }
.visor--compartiendo .visor__compartir { z-index: 1; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, .5); cursor: default; }
.visor--compartiendo .visor__enlaces, .visor--compartiendo .visor__enlaces a { opacity: 1; }
.visor--compartiendo .visor__enlaces { transform: scale(1); }
.visor--compartiendo .visor__boton--compartir { position: relative; z-index: 2; }
/* Sin movimiento durante 3,5 s se ocultan la cabecera y las flechas; con zoom, las flechas se van y
   la cabecera toma un fondo. */
.visor--sin-controles .visor__cabecera { opacity: 0; pointer-events: none; }
.visor--sin-controles .visor__flecha { opacity: 0; }
.visor--zoom .visor__cabecera { background-color: rgba(0, 0, 0, .5); }
.visor--zoom .visor__flecha { opacity: 0; pointer-events: none; }
.visor--zoom .visor__diapositiva { cursor: move; }

/* ---- Entradas animadas (Elementor «fadeIn», 1,25 s, con la demora de cada bloque) ----
   Sólo con JS: site.js pone .con-animaciones en <html> y .animado a cada bloque cuando entra en
   pantalla, después de su data-demora. */
.con-animaciones [data-animacion]:not(.animado) { visibility: hidden; }
.animado { animation-duration: 1.25s; }
.animado[data-animacion="fadeIn"] { animation-name: fadeIn; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .animado { animation: none !important; } }

/* ---- Pie ---- */
.pie { padding: 50px 0 15px; background: rgba(0, 0, 0, .79); }
.pie__interior { max-width: 1170px; margin: 0 auto; padding: 10px; }
.pie__fila { display: flex; }
.pie__bloque { padding: 10px; }
.pie__secciones { width: 15.042%; }
.pie__seguinos { width: 14.001%; }
.pie__sede--lagos { width: 23.738%; }
.pie__sede--timbues { width: 23.651%; }
.pie__sede--central { width: 23.568%; }
/* Interlineado fijo: el CSS a medida del pie del original fuerza `h4 { line-height: 125% !important }`. */
.pie__titulo { margin-bottom: 20px; color: #fff; font: 400 18px/22.5px var(--roboto); }
.pie .lista { font: 300 14px/1.5 var(--roboto); }
.pie .lista li:not(:last-child) { padding-bottom: 5px; }
.pie .lista li:not(:first-child) { margin-top: 5px; }
.pie .lista a .lista__texto { font-family: var(--open-sans-a-medida); }
.pie .lista__texto { color: #fff; }
.pie .lista--iconos { font-size: .8rem; }
.pie .lista--iconos .lista__icono { color: var(--verde); font-size: 15px; }
.pie .lista--iconos .lista__texto { color: rgba(255, 255, 255, .5); }
.redes--pie { margin-left: -11px; }
.redes--pie .icono { color: rgba(0, 255, 182, .84); }
.redes--pie a:hover .icono { color: var(--rojo); }
.pie__fila--base { margin: 40px 0 20px; padding-top: 20px; border-top: 1px solid #8D1317; }
.pie__atcr { width: 17.652%; }
.pie__iram { width: 53.391%; }
.pie__atcr img, .pie__iram img { display: block; }
.boletin { width: 28.623%; }
.boletin__formulario { display: flex; flex-wrap: wrap; margin: 0 -5px 10px; }
.boletin__campo, .boletin__accion { display: flex; width: 50%; margin-bottom: 10px; padding: 0 5px; }
.boletin__campo { align-items: center; }
.boletin__accion { align-items: flex-end; }
.boletin input {
  width: 100%;
  min-height: 33px;
  padding: 4px 12px;
  border: 1px solid #69727d;
  border-radius: 5px;
  background: #fff;
  color: #7a7a7a;
  font: 400 15px/1.4 var(--roboto);
}
/* Base del 100 % (no ancho): si el texto no entra, el botón crece, como en el original. */
.boletin input::placeholder { color: inherit; opacity: .6; }
.boletin button {
  flex-basis: 100%;
  min-height: 33px;
  padding: 10px 20px;
  border: 0;
  border-radius: 5px;
  background: var(--verde);
  color: #fff;
  /* En el original el texto va en un <span>, que el CSS a medida pasa a «open sans». */
  font: 500 15px/1 var(--open-sans-a-medida);
  cursor: pointer;
  transition: all .3s;
}
.boletin button:hover, .boletin button:focus { background: var(--rojo); }
.boletin__aviso { width: 100%; margin: 0 5px 10px; color: #fff; font: 400 14px/1.4 var(--roboto); }

/* Mensaje de los formularios (enviando, gracias o error) y spinner mientras se envía. */
.formulario__estado:empty { display: none; }
.consulta__aviso.formulario__estado--error { color: #b3261e; }
.boletin__aviso.formulario__estado--error { color: #ffcfc7; }
.formulario__estado--cargando::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 2px solid rgba(127, 127, 127, .35);
  border-top-color: var(--verde);
  border-radius: 50%;
  vertical-align: -3px;
  animation: girar .8s linear infinite;
}
.boletin__aviso.formulario__estado--cargando::before { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
.consulta__formulario button:disabled, .boletin__formulario button:disabled { opacity: .6; cursor: wait; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Botón de WhatsApp (plugin Click to Chat en el original), fijo abajo a la derecha. */
.whatsapp {
  position: fixed;
  z-index: 99999999;
  right: 15px;
  bottom: 15px;
  padding: 14px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 11px rgba(0, 0, 0, .5);
}
.whatsapp svg { display: block; width: 40px; height: 40px; }

/* ==== Escritorio (≥ 1025 px) ==== */
@media (min-width: 1025px) {
  .sedes, .cabecera, .identidad { background-attachment: fixed; }
}

/* ==== Tableta (≤ 1024 px) ==== */
@media (max-width: 1024px) {
  .encabezado__interior { flex-wrap: wrap; max-width: 1024px; }
  /* Rellenos en % de la columna en el original (5 %): acá, en % de la fila. */
  .encabezado__marca { width: 50%; padding: 0 0 0 2.5%; }
  .encabezado__marca img { width: 145px; }
  .menu { width: 25%; padding: 0 10px 0 1.25%; }
  .redes--encabezado { display: none; }
  .menu__boton {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: .25em;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--verde);
    font-size: 25px;
    cursor: pointer;
  }
  .menu__boton:hover, .menu__boton:focus { color: var(--rojo); }
  .menu__boton .menu__cerrar, .menu__boton[aria-expanded="true"] .menu__abrir { display: none; }
  .menu__boton[aria-expanded="true"] .menu__cerrar { display: block; }
  /* Desplegable a todo el ancho, 25 px por debajo del botón (Elementor «stretch»). */
  .menu__lista {
    position: absolute;
    z-index: 9997;
    top: calc(50% + 43.75px);
    right: 0;
    left: 0;
    display: block;
    overflow: hidden;
    max-height: 0;
    margin: 0;
    background: var(--gris-claro);
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
    font-size: 13px;
    visibility: hidden;
    transform: scaleY(0);
    transform-origin: top;
    transition: max-height .3s, transform .3s, visibility 0s .3s;
  }
  .menu.is-abierto .menu__lista { max-height: 100vh; visibility: visible; transform: scaleY(1); transition: max-height .3s, transform .3s; }
  .menu__lista > li { display: block; }
  .menu__lista > li:not(:last-child) { border-bottom: 1px solid #efefef; }
  .menu__lista a { justify-content: center; }
  .menu__lista > li > a,
  .menu__lista > li:not(:first-child) > a,
  .menu__lista > li:not(:last-child) > a {
    margin: 0;
    padding: 25px 8px;
    color: var(--gris-texto);
    font: 400 16px/20px var(--montserrat);
    transition: none;
  }
  .menu__lista > li > a::after { display: none; }
  .menu__lista > li > a:hover,
  .menu__lista > li > a:focus,
  .menu__lista > li.is-abierto > a,
  .menu__lista > li > a[aria-current="page"] { background: var(--gris-claro); color: var(--verde); }
  .submenu { position: static; display: none; overflow: hidden; min-width: 0; box-shadow: none; }
  .con-submenu.is-cerrando > .submenu { animation: none; }
  .submenu a { padding: 25px 8px; font-size: 16px; transition: none; }

  .accesos { padding: 100px 25px; }
  .acceso { width: calc(33.333% - 12px); margin: 0 12px 0 0; cursor: pointer; }
  .acceso:last-child { margin: 0 0 0 12px; }

  .sedes__lista { flex-wrap: wrap; }
  .sede { width: calc(100% - 30px); margin: 0 15px 30px; }

  .video { padding: 60px 25px 50px; }

  .cabecera { padding: 20px 0 30px; }
  .cabecera__titulo { font-size: 2.125rem; }
  .cabecera__texto { font-size: 1rem; }

  .identidad { padding: 20px 0 30px; }
  .identidad__titulo { font-size: 2.125rem; letter-spacing: 0; }
  .texto:not(.texto--proposito) { font-size: .875rem; }

  .servicio { padding: 20px 0 30px; }
  .servicio__titulo { font-size: 2.125rem; letter-spacing: 0; }
  .rubro { gap: 20px; width: 100%; margin: 0 0 10px; }
  .rubro__icono { font-size: 32px; }
  .tildes li { font-size: .9em; }
  .boton-borde { font-size: .875rem; }

  .cabecera--flota { background-position: 0 0; }

  .pie { padding: 15px 20px 0; }
  .pie__fila { flex-wrap: wrap; }
  .pie__secciones, .pie__seguinos { width: 25%; }
  .pie__sede--lagos { width: 33.33%; }
  .pie__sede--timbues, .pie__sede--central { width: 50%; }
  .pie .lista { font-size: 13px; }
  .pie .lista--iconos { font-size: 13px; }
  .redes--pie { gap: 5px; }
  .pie__atcr, .pie__iram { width: 50%; }
  .boletin { width: 30%; }
}

/* ==== Móvil (≤ 767 px) ==== */
/* La galería de Elementor calcula su propio corte con «ancho < 767»: en 767 px sigue en dos columnas. */
@media (max-width: 766px) {
  .galeria__lista { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .encabezado__marca { padding: 0 0 0 20px; }
  .encabezado__marca img { width: 110px; }
  .menu { width: 50%; padding: 0 20px 0 0; }

  .portada { padding: 61.2px 10px; }
  .portada__titulo { font-size: 2.8em; line-height: 1.2em; }
  .portada__texto { padding: 0 16px; }

  .accesos { padding: 50px 20px; }
  .accesos__lista { display: block; padding-top: 20px; }
  .acceso { width: auto; }
  .acceso:first-child { margin-bottom: 25px; }
  .acceso:last-child { margin: 25px 0 0; }

  .sedes { padding: 0; }
  .sede:not(:last-child) .sede__titulo { margin-top: 40px; margin-bottom: 20px; line-height: 1.2em; }
  .sede .lista { padding-bottom: 50px; }

  .video { padding: 4em 0; }
  .video--asfalto { padding: 3em 0; }

  .cabecera { padding: 0 0 20px; }
  .cabecera__titulo { font-size: 2rem; }
  .cabecera__texto { font-size: 1.1rem; line-height: 1.6em; }

  .identidad { padding: 0; }
  .identidad__columnas { display: block; }
  .identidad__columna { width: auto; }
  .identidad__columna + .identidad__columna { padding: 20px 20px 0; }
  .identidad__titulo { font-size: 1.5rem; line-height: 1.33em; text-align: center; }
  .texto { text-align: center; }
  .texto:not(.texto--proposito) { font-size: 1rem; }
  .texto--valores { margin-top: 20px; }

  /* Móvil: la foto siempre arriba (Elementor «invertir columnas»). */
  .servicio { padding: 0; }
  .servicio--gris { padding: 0 0 20px; }
  .servicio__interior, .servicio--foto-derecha .servicio__interior { flex-direction: column; }
  .servicio__foto, .servicio__texto { width: auto; }
  .servicio__foto { padding: 20px 20px 0; }
  .servicio__titulo { font-size: 1.8rem; line-height: 1.33em; text-align: center; }
  /* En columna, el texto a todo el ancho (centrado); el icono, al medio. */
  .rubro { flex-direction: column; align-items: stretch; gap: 6px; padding: 16px; text-align: center; }
  .rubro__contenido { flex: none; }
  .rubro__icono { align-self: center; }
  .rubro__titulo { margin-bottom: 6px; font-size: 1.3rem; }
  .rubro__descripcion { font-size: 1rem; }
  .boton-borde { font-size: 1.2rem; }
  .servicio__accion { margin-top: 30px; padding-left: 0; }
  .servicio__accion .boton-borde, .enlaces-ruta .boton-borde { display: block; }
  .enlaces-ruta li { margin: 30px 0 0; }

  .cabecera--flota { background-position: 50%; }
  .visor__diapositiva { padding: 70px 0; cursor: auto; }
  .visor__flecha { width: 20%; }
  .visor__flecha--anterior { justify-content: flex-start; }
  .visor__flecha--siguiente { justify-content: flex-end; }
  .visor__flecha .icono { padding: 10px; background-color: rgba(0, 0, 0, .5); }

  .pie { padding: 20px 20px 30px; }
  .pie__interior { padding: 0; }
  .pie__secciones, .pie__seguinos { width: 50%; }
  .pie__sede--lagos, .pie__sede--timbues, .pie__sede--central { width: 100%; margin-top: 20px; }
  .redes--pie { gap: 2px; }
  .pie__fila--base { margin: 30px 0 0; }
  .pie__atcr, .pie__iram, .boletin { width: 100%; }
}