/* ============================================================
   NA — Caja del logotipo del header
   CMP · Agosto 2026 · sesion 23
   ============================================================

   POR QUE EXISTE ESTE FICHERO.

   El logo anterior (`logo-solo-texto.png`) era una tira de texto apaisada que se
   servia a 140x32 px, ratio ~4,4:1. El logo nuevo (`na-logo-2026.png`, 370x240)
   es casi cuadrado, ratio 1,54:1. En la misma caja apaisada el navegador lo
   pintaba a 130x84 px en escritorio: se comia la barra del header entera.

   LA REGLA ES DE CAJA, NO DE IMAGEN. Se fija la ALTURA y se deja el ancho libre
   (`width:auto`), que es lo unico que respeta el ratio sea cual sea el fichero.
   NO pongas aqui un `width` en px: si algun dia se cambia el logo por otro con
   otra proporcion, este fichero no deberia hacer falta tocarlo.

   POR QUE `!important` (MEDIDO, no por costumbre).
   El widget `theme-site-logo` recibe su ancho de una regla del propio Elementor
   generada desde los ajustes del widget en el kit; esa regla vive en el CSS del
   post y llega DESPUES de las hojas del plugin, asi que gana por orden pese a
   tener la misma especificidad. En la primera pasada de esta sesion la altura de
   movil SI se aplico (42 px) pero el ancho se quedo clavado en 110 px: el logo
   salio a 110x42, ratio 2,6, o sea deformado. Con `!important` en las dos
   dimensiones el ancho pasa a derivarse de la altura y el ratio se conserva.
   Si algun dia se retira el `!important`, hay que volver a MEDIR el ratio del
   <img> en los dos viewports; que «se vea bien» en la captura no basta, porque
   `object-fit: contain` disimula la deformacion dejando aire a los lados.

   ALTURAS (medidas contra la barra real del header de dev):
     - escritorio  60 px   (header ~184 px de alto)
     - movil       42 px   (<= 1024 px de ancho)

   La altura del logo VIEJO (32 px) no sirve de referencia: era texto puro y sin
   margenes internos. El nuevo lleva el circulo dentado y las siluetas de los
   animales, asi que necesita mas alto util para el mismo tamano percibido del
   texto.
   ============================================================ */

/* Elementor pinta el logo del sitio con el widget `theme-site-logo`. El header de
   dev instancia DOS (elementor-element-17a1f855 y -30731481: la cabecera normal y
   la variante que se muestra en movil); se atacan por la clase del widget, no por
   el id del elemento, para no depender de esos ids. Se cubren ademas la clase de
   WordPress (`.custom-logo`) y la del tema por si alguna plantilla —el header de
   checkout, por ejemplo— no pasa por el widget. */
.elementor-widget-theme-site-logo img,
.vamtam-logo img,
header img.custom-logo,
.site-header img.custom-logo,
[data-elementor-type="header"] img.custom-logo {
	height: 60px !important;
	width: auto !important;
	max-width: 100% !important;
	max-height: 65px !important;
	/* Cinturon de seguridad: si algun dia otra regla vuelve a imponer un ancho,
	   la imagen se vera ENTERA y mas pequena, nunca estirada. */
	object-fit: contain;
	object-position: left center;
}

/* Sin esto el <a> del widget se comporta como caja de bloque a lo ancho de su
   columna y deja una banda clicable enorme a la derecha del logo. */
.elementor-widget-theme-site-logo .elementor-widget-container,
.elementor-widget-theme-site-logo .elementor-widget-container > a {
	display: inline-block;
	line-height: 0;
}

@media (max-width: 1024px) {
	.elementor-widget-theme-site-logo img,
	.vamtam-logo img,
	header img.custom-logo,
	.site-header img.custom-logo,
	[data-elementor-type="header"] img.custom-logo {
		height: 45px !important;
		max-height: 45px !important;
	}
}