/* "La Cigüeña del Corral" — guía editorial anclada al bloque de horario/clima.
   Paleta y tipografías reutilizadas de :root y del resto de site.css (Fraunces/
   Archivo/Space Mono, --ecc-*). Namespace propio ecc-ciguena-* para no chocar con
   ninguna otra clase del sitio. Sin animaciones infinitas, sin position:fixed. */

/* El ancla real es el PADRE de #ecc-horario-bar-mount (fuera del contenedor que
   horario-bar.js reemplaza por AJAX en cada carga) — no tiene una clase CSS
   estable propia, asi que ciguena.js le pone position:relative directamente por
   JS en vez de aqui. Ver la nota larga en ciguena.js. */

.ecc-ciguena-mascota {
	position: absolute;
	top: 0;
	/* Medido en vivo (2026-08-01) contra el boton real ".ecc-horario-bar__toggle":
	   a 1264px de viewport quedan 279px libres, a 884px quedan 99px libres — hueco
	   real de sobra incluso para la postura mas ancha (mirando, apaisada). */
	right: clamp(10px, 2.5vw, 28px);
	/* -42%: posicionamiento permanente ("asomandose" del borde), no forma parte
	   de ninguna animacion — solo la opacidad anima en la revelacion inicial. */
	transform: translateY(-42%);
	/* Las 4 posturas tienen proporciones muy distintas (posada: retrato alto y
	   estrecho; mirando: apaisada ancha; dormida/asomada: casi cuadradas). Fijar
	   un ANCHO uniforme forzaba object-fit:contain a dejar huecos vacios grandes
	   en posada y mirando. Se fija la ALTURA en su lugar y el ancho sale solo de
	   las dimensiones reales de cada imagen (width/height en el <img>, leidas de
	   verdad con getimagesize() en PHP) — cada postura ocupa su silueta real. */
	height: clamp(95px, 7.5vw, 145px);
	/* .ecc-pulse (el bloque "Proximo concierto" de justo debajo) es
	   position:sticky con z-index:50 — como .ecc-ciguena-mascota es quien crea
	   el contexto de apilamiento (position:absolute + z-index propio), es SU
	   z-index el que cuenta frente a .ecc-pulse, no el de la tarjeta hija por
	   separado. Con z-index:4 la tarjeta quedaba tapada e ilegible en cuanto
	   invadia esa zona (comprobado en vivo). 60 la deja siempre por encima. */
	z-index: 60;
	opacity: 0;
	transition: opacity .6s ease;
}
.ecc-ciguena-mascota.is-listo {
	opacity: 1;
}

.ecc-ciguena-mascota__boton {
	/* inline-block se encoge de forma nativa a su contenido (a diferencia de
	   "display:block; width:fit-content", que con una imagen al 100% de la
	   altura crea una dependencia circular ancho<->alto y el navegador acababa
	   ignorando el alto del contenedor, usando el tamaño natural de la imagen). */
	display: inline-block;
	vertical-align: top;
	height: 100%;
	padding: 0;
	margin: 0;
	background: none;
	/* !important + appearance:none: el reset de Hello Elementor pone borde rojo
	   (rgb(204,51,102)) en el ESTADO BASE de cualquier <button> (no solo en
	   :hover/:focus como decia el comentario original mas abajo, comprobado en
	   vivo con el boton sin foco ni hover) via "appearance:button" (apariencia
	   nativa del navegador) + su propio border-color. Sin appearance:none, el
	   navegador sigue pintando el borde nativo aunque border:0 gane en teoria. */
	appearance: none;
	-webkit-appearance: none;
	border: 0 !important;
	outline: none;
	cursor: pointer;
	line-height: 0;
}
/* El reset.css de Hello Elementor TAMBIEN cambia fondo/borde en :hover/:focus
   (ya cubierto arriba por el border:0 !important permanente, pero el fondo rosa
   en :hover/:focus necesita su propio !important aparte) — mismo problema ya
   resuelto para .ecc-nav-dropdown__toggle/.ecc-provisional-header__toggle en
   site.css. */
.ecc-ciguena-mascota__boton:hover,
.ecc-ciguena-mascota__boton:focus {
	background-color: transparent !important;
	border: 0 !important;
}
.ecc-ciguena-mascota__boton:focus-visible {
	outline: 2px solid var(--ecc-ambar);
	outline-offset: 4px;
	border-radius: 8px;
}
/* Pose "mirando": SIN rotacion (2026-08-03). El WebP anterior miraba de frente y
   se giraba -40deg aqui, en el <boton>, para que el pico apuntase a la tarjeta de
   debajo. El dibujo nuevo ya viene agachado y mirando hacia abajo-izquierda, asi
   que el giro solo lo hacia parecer que se cae de lado (comprobado en vivo). Si
   algun dia se vuelve a necesitar una rotacion de reposo para alguna postura, va
   en el <boton> y NUNCA en el <img>: el <img> ya tiene sus propios transform de
   hover/foco y de la animacion "is-atrayendo", y se pisarian entre ellos; en el
   padre se componen solos. */
/* Pose "asomada": a diferencia de las otras 3 (pensadas para asomar por ARRIBA,
   de ahi el translateY(-42%) de la regla base), esta viene dibujada con un borde
   recto en su lateral derecho (la linea vertical del WebP) pensado para coincidir
   con el borde real de un bloque, no para flotar por encima de el. La regla base
   la dejaba con hueco a la derecha (el "right" pensado para las otras posturas) y
   descolgada hacia arriba (fuera del bloque de horario) en vez de centrada contra
   el. Aqui: pegada del todo (right:0) y centrada en vertical contra el propio
   bloque de horario (top:50%/translateY(-50%) en vez de top:0/-42%). El
   translateX(23.25%) compensa el margen transparente que trae el propio WebP a la
   derecha de la linea dibujada (medido en el PNG fuente: la linea solida cae al
   76.75% del ancho de la imagen) — es un % del ancho del propio elemento (no del
   contenedor), asi que escala igual de bien en cualquier tamano sin recalcular.
   Solo de 601px de viewport para arriba: en movil la mascota usa una esquina fija
   simple (ver @media max-width:600px mas abajo) y esto no debe pisarla. */
@media (min-width: 601px) {
	.ecc-ciguena-mascota[data-pose="asomada"] {
		top: 50%;
		right: 0;
		transform: translate(23.25%, -50%);
	}
}
.ecc-ciguena-mascota__img {
	display: block;
	/* !important: Hello Elementor (u otro reset del tema) fuerza "height:auto"
	   en cualquier <img> con mas prioridad que la especificidad normal — sin
	   esto, el navegador ignoraba la altura del contenedor y usaba el tamaño
	   natural de cada imagen (comprobado en vivo: 314x311 en vez de ~95px alto). */
	height: 100% !important;
	width: auto !important;
	max-width: none !important;
	transition: transform .25s ease;
}
.ecc-ciguena-mascota__boton:hover .ecc-ciguena-mascota__img,
.ecc-ciguena-mascota__boton:focus-visible .ecc-ciguena-mascota__img {
	transform: scale(1.035) rotate(-1deg);
}

/* Animacion discreta de "atraer la atencion" justo antes de abrir la tarjeta
   automatica — un solo disparo (la clase se retira sola despues), nunca infinita. */
.ecc-ciguena-mascota.is-atrayendo .ecc-ciguena-mascota__img {
	animation: eccCiguenaAtraer .8s ease;
}
@keyframes eccCiguenaAtraer {
	0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
	35% { transform: translateY(-4px) rotate(-1deg) scale(1.03); }
	65% { transform: translateY(1px) rotate(1deg) scale(0.99); }
}

/* ---- Tarjeta editorial ---- */
.ecc-ciguena-mascota__tarjeta {
	position: absolute;
	/* Medido en vivo: con "+12px" la tarjeta invadia ~24px del bloque de "proximo
	   concierto" de debajo en anchos de tablet (~780px). Subida para dejar de
	   invadirlo — la mascota ya esta desplazada hacia arriba (-42%) del propio
	   bloque de horario, asi que un valor negativo aqui la acerca a la mascota
	   sin salirse por arriba de la seccion de clima. */
	top: calc(100% - 12px);
	right: 0;
	width: clamp(240px, 24vw, 320px);
	max-width: calc(100vw - 24px);
	box-sizing: border-box;
	background: #FBF7F0;
	border: 1px solid rgba(27, 23, 18, .12);
	border-top: 2px solid var(--ecc-ambar);
	border-radius: 4px 4px 10px 10px;
	box-shadow: 0 12px 26px rgba(27, 23, 18, .16);
	padding: 16px 18px 14px;
	z-index: 5;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.ecc-ciguena-mascota__tarjeta.is-abierta {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition: opacity .3s ease, transform .3s ease;
}
.ecc-ciguena-mascota__cerrar {
	position: absolute;
	top: 8px;
	right: 8px;
	/* !important en width/padding/color: mismo reset de Hello Elementor de
	   siempre en cualquier <button> — width:auto lo encogia a los 12px del svg
	   (el "auto" ganaba y un boton flex se ajusta a su contenido), pintaba el
	   icono de rosa/rojo (rgb(204,51,102)) en vez del gris apagado, y sin
	   padding:0 se quedaba con el padding nativo, ensanchando la caja (44px
	   antes de fijar esto) e invadiendo el texto de al lado. height si se
	   respetaba bien sin !important — el reset solo tocaba estas tres. */
	width: 26px !important;
	height: 26px;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	border: 0 !important;
	outline: none;
	border-radius: 50%;
	color: #6b6153 !important;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
/* Igual que en el boton principal: gana al fondo rosa/borde que Hello Elementor
   pone por defecto en :hover/:focus de cualquier <button>. */
.ecc-ciguena-mascota__cerrar:hover,
.ecc-ciguena-mascota__cerrar:focus {
	background: rgba(27, 23, 18, .08) !important;
	border: 0 !important;
	color: var(--ecc-noche);
}
.ecc-ciguena-mascota__cerrar:focus-visible { outline: 2px solid var(--ecc-ambar); outline-offset: 1px; }
.ecc-ciguena-mascota__texto {
	font-family: 'Archivo', sans-serif;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--ecc-noche);
	margin: 0 22px 0 0;
}
.ecc-ciguena-mascota__cta {
	display: inline-block;
	margin-top: 10px;
	font-family: 'Space Mono', monospace;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ecc-hiedra);
	text-decoration: none;
	border-bottom: 1px solid rgba(76, 99, 68, .4);
	padding-bottom: 1px;
	transition: color .2s ease, border-color .2s ease;
}
.ecc-ciguena-mascota__cta:hover,
.ecc-ciguena-mascota__cta:focus-visible {
	color: var(--ecc-noche);
	border-color: var(--ecc-noche);
}
.ecc-ciguena-mascota__cta:focus-visible { outline: 2px solid var(--ecc-ambar); outline-offset: 2px; }

/* ---- Tableta: reduce progresivamente (por debajo del tamano de escritorio,
   que ya es conservador — ver nota en la regla base de arriba) ---- */
@media (max-width: 780px) {
	.ecc-ciguena-mascota {
		height: clamp(78px, 11vw, 105px);
		right: clamp(8px, 2.5vw, 18px);
		transform: translateY(-32%);
	}
	.ecc-ciguena-mascota__tarjeta { width: clamp(230px, 60vw, 300px); }
}

/* ---- Movil ---- */
@media (max-width: 600px) {
	/* Esquina de ABAJO a la derecha (antes arriba): en movil el bloque de horario
	   pone su texto en la mitad superior ("Hoy: 19:00 – 02:00" llega hasta ~14px
	   del borde derecho y "30° FUERA · 28° EN EL PATIO" justo debajo), asi que la
	   esquina de arriba SIEMPRE pisaba texto. La banda de abajo solo tiene el boton
	   "Ver horario semanal", centrado, que deja libre el hueco de la derecha. */
	.ecc-ciguena-mascota {
		height: clamp(64px, 18vw, 90px);
		top: auto;
		bottom: 0;
		right: 8px;
		transform: none;
	}
	/* Las dos posturas apaisadas ("mirando" 656x451 y "dormida" 445x395) no caben
	   en ese hueco al tamano de las otras dos: medido en vivo a 375px de ancho util
	   se montaban sobre el boton del horario. Se les recorta la altura y se les
	   quita el relleno fantasma que el reset de Hello Elementor mete en cualquier
	   <button> (8px/16px — el "padding:0" de la regla base no lleva !important y
	   pierde): son 32px de aire lateral que no dibujan nada pero empujan la silueta
	   contra el boton. Con esto quedan 15-23px de holgura real (medidos). */
	.ecc-ciguena-mascota[data-pose="mirando"],
	.ecc-ciguena-mascota[data-pose="dormida"] {
		height: clamp(40px, 11.5vw, 52px);
		bottom: 8px;
	}
	.ecc-ciguena-mascota[data-pose="mirando"] .ecc-ciguena-mascota__boton,
	.ecc-ciguena-mascota[data-pose="dormida"] .ecc-ciguena-mascota__boton {
		padding: 0 !important;
	}
	.ecc-ciguena-mascota.is-atrayendo .ecc-ciguena-mascota__img { animation-name: eccCiguenaAtraerMovil; }
	@keyframes eccCiguenaAtraerMovil {
		0%, 100% { transform: scale(1); }
		50% { transform: scale(1.05); }
	}
	/* "asomada" en movil: mismo margen transparente del WebP que en escritorio (ver
	   la regla [data-pose="asomada"] de mas arriba). Ademas de pegarla al borde
	   (right:0 + translateX), se centra en vertical contra el bloque igual que en
	   escritorio (top:50%/-50%) — con el top:8px de la base quedaba descolgada por
	   arriba (pedido 2026-08-03). Se mantiene centrada (no baja a la esquina como
	   las otras tres): es la unica postura dibujada para encajar contra el borde
	   derecho del bloque, y ahi ya no pisa ningun texto (medido: su silueta empieza
	   a la derecha de las dos lineas). El "bottom:auto" anula el de la regla base. */
	.ecc-ciguena-mascota[data-pose="asomada"] {
		top: 50%;
		bottom: auto;
		right: 0;
		transform: translate(23.25%, -50%);
	}
	/* BUG real corregido (2026-08-01): con "left:8px; right:8px; width:auto", el
	   ancho se resolvia contra el CONTENEDOR DE POSICIONAMIENTO real de la tarjeta
	   (.ecc-ciguena-mascota, ~64-90px de ancho — el propio icono), no contra el
	   viewport. Resultado medido en vivo: la tarjeta quedaba en ~48px de ancho y
	   el texto caia en una columna casi vertical, ilegible. Fix: ancho explicito
	   en vw (independiente del contenedor) en vez de left+right derivados. */
	.ecc-ciguena-mascota__tarjeta {
		right: 0;
		left: auto;
		width: calc(100vw - 28px);
		max-width: none;
	}
	.ecc-ciguena-mascota__texto { font-size: 15px; margin-right: 20px; }
}

/* ---- Motion reducido ----
   OJO: NO se incluye aqui .ecc-ciguena-mascota (el contenedor) — su transform
   (translateY(-42%)/-32%) es posicionamiento estructural permanente ("asomandose
   del borde"), no una animacion; anularlo la desplazaria fuera de sitio. Solo se
   anulan los transform/animation que SI son movimiento (hover/foco de la imagen,
   el wiggle de "atraer", y la entrada deslizante de la tarjeta al abrirse).
   Las transiciones de "opacity"/"visibility" ya definidas arriba se dejan intactas
   — son la unica transicion que el criterio pide conservar, y tocarlas aqui
   rompería la sincronizacion (el cierre de la tarjeta dejaria de verse). */
@media (prefers-reduced-motion: reduce) {
	.ecc-ciguena-mascota__img,
	.ecc-ciguena-mascota__tarjeta,
	.ecc-ciguena-mascota__tarjeta.is-abierta,
	.ecc-ciguena-mascota__boton:hover .ecc-ciguena-mascota__img,
	.ecc-ciguena-mascota__boton:focus-visible .ecc-ciguena-mascota__img {
		transform: none !important;
		animation: none !important;
	}
}

/* ===== Accesibilidad (D2 del encargo, 2026-08-03) ===== */
/* El boton de cerrar mide 26x26; el ::after extiende su area tactil a 44x44
   sin cambiar nada visual (los clics sobre el ::after cuentan como el boton). */
.ecc-ciguena-mascota__cerrar { position: relative; }
.ecc-ciguena-mascota__cerrar::after { content: ""; position: absolute; inset: -9px; }
/* Los dos botones llevan outline:none (necesario contra el reset de Hello
   Elementor); esto devuelve el foco de TECLADO sin despertar el borde rosa
   del reset: :focus-visible gana en especificidad al outline:none de la base. */
.ecc-ciguena-mascota__boton:focus-visible,
.ecc-ciguena-mascota__cerrar:focus-visible { outline: 2px solid var(--ecc-ambar, #E8A33D); outline-offset: 2px; }