/* =====================================================================
   KALOS — Cine: estilos globales del hijo (cargan en TODO el sitio).
   1) Footer unificado: card flotante + redes sociales + botón Juguemos.
   2) "Mi panel / Área clientes" como botón CTA en todos lados.
   3) Galerías e imágenes de los casos de proyecto (multi-imagen).
   ===================================================================== */

/* ---------------------------------------------------------------------
   FIX del "titileo negro" en el borde derecho de toda la web.
   El grano (.noise) es del tamaño exacto del viewport (inset:0) y su
   animación lo traslada translate(-4%,3%) con steps(2): al moverse deja
   destapada una franja en el borde derecho/inferior que pierde el
   mix-blend:screen y titila oscura. Lo agrandamos para que, aun trasladado,
   siga cubriendo todo el viewport.
   ------------------------------------------------------------------- */
.noise { inset: -8% !important; }

/* ---------------------------------------------------------------------
   1) Footer unificado (card flotante en todas las páginas)
   ------------------------------------------------------------------- */
@media (min-width: 561px) {
	.site-footer {
		margin: clamp(.9rem, 2vw, 1.6rem);
		border-radius: 26px;
		border: 1px solid var(--line);
		overflow: clip;
	}
}
.footer-social { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-social a { text-decoration: none; }
.footer-social a:hover { color: var(--acid); }

/* Mobile: footer en UNA sola columna (el padre lo deja en 2 a ≤820px).
   Selector .site-footer .footer-top (2 clases) para ganarle al padre. */
@media (max-width: 700px) {
	.site-footer .footer-top { grid-template-columns: 1fr; gap: 1.8rem; padding-bottom: 2.6rem; }
	.site-footer .footer-intro p { max-width: none; }
}

/* Botón Juguemos (debajo del logo + texto del footer) */
.footer-play {
	display: inline-flex; align-items: center; gap: .5rem;
	margin-top: 1.2rem;
	padding: .7rem 1.3rem; border-radius: 100px;
	border: 1px solid var(--acid); color: var(--acid);
	font-family: var(--font-mono); font-size: .78rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .08em;
	text-decoration: none;
	transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.footer-play:hover { background: var(--acid); color: #101013; transform: translateY(-2px); }

/* ---------------------------------------------------------------------
   2) "Mi panel" / "Área clientes" como CTA destacado en todos lados
   ------------------------------------------------------------------- */
/* Header (páginas fuera de la home cine) */
.header-right .btn,
.header-right button[data-login] {
	background: var(--acid) !important;
	border-color: var(--acid) !important;
	color: #101013 !important;
	font-weight: 700;
}
.header-right .btn:hover,
.header-right button[data-login]:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* Footer (columna Legal) */
.site-footer a[data-login],
.site-footer a[href*="mi-panel"] {
	display: inline-block;
	padding: .35rem .9rem; border-radius: 100px;
	background: var(--acid); color: #101013 !important;
	font-weight: 700;
}
.site-footer a[data-login]:hover,
.site-footer a[href*="mi-panel"]:hover { filter: brightness(1.08); }
/* Overlay del menú (bloque de contacto).
   OJO: scroll.css trae `body.kalos-cine .cine-mm-meta a { padding:0 }`, que por
   especificidad le ganaba al CTA y dejaba "Mi panel →" (logueado) sin padding.
   Prefijamos con body.kalos-cine para ganar la especificidad y restaurar el pill. */
body.kalos-cine .cine-mm-meta button[data-login],
body.kalos-cine .cine-mm-meta a[data-login],
body.kalos-cine .cine-mm-meta a[href*="mi-panel"] {
	display: inline-block;
	border: none; cursor: pointer;
	padding: .55rem 1.1rem; border-radius: 100px;
	background: var(--acid); color: #101013 !important;
	font-family: var(--font-mono); font-size: .8rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em; line-height: 1.2;
}
body.kalos-cine .cine-mm-meta button[data-login]:hover,
body.kalos-cine .cine-mm-meta a[data-login]:hover,
body.kalos-cine .cine-mm-meta a[href*="mi-panel"]:hover { filter: brightness(1.08); color: #101013 !important; padding-left: 1.1rem; }
.cine-mm-meta button[data-login]::after { content: none; }

/* ---------------------------------------------------------------------
   3) Casos de proyecto: imágenes y galerías de bloques (multi-imagen)
   ------------------------------------------------------------------- */
.article-body img { border-radius: 12px; height: auto; }
.article-body .wp-block-image { margin: 2rem 0; }
.article-body .wp-block-gallery { gap: 1rem; margin: 2rem 0; }
.article-body .wp-block-columns { gap: 1.4rem; margin: 2rem 0; }
.article-body figcaption {
	font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em;
	color: var(--muted); margin-top: .5rem;
}

/* ---------------------------------------------------------------------
   4) HEADER + OVERLAY UNIFICADOS (site-wide).
   El mismo menú en TODAS las páginas: solo hamburguesa "Menú" que abre el
   overlay fullscreen del padre, con links con sufijo "_" y un bloque de
   contacto (email, WhatsApp, redes con logo). Antes vivía en scroll.css
   (solo home); ahora en global.css para que sea idéntico en todo el sitio.
   Requiere la clase body.kalos-cine, que ahora se agrega en todas las páginas.
   ------------------------------------------------------------------- */
/* Ocultar el nav superior: el menú es el overlay */
body.kalos-cine .main-nav,
body.kalos-cine .header-right { display: none; }
/* Header transparente, se funde con la web */
body.kalos-cine .site-header,
body.kalos-cine .site-header.scrolled {
	background: transparent !important;
	border-bottom: none !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
}
/* Hamburguesa CON etiqueta "Menú" (el JS del padre pisa el textContent
   "Menú"/"Cerrar"; lo mostramos + dos líneas a la izquierda que hacen X). */
body.kalos-cine .menu-toggle {
	display: inline-flex; align-items: center; gap: .55rem;
	position: relative; width: auto; height: 42px;
	padding: 0 0 0 34px;
	background: none; border: none; cursor: pointer; z-index: 901;
	font-family: var(--font-mono); font-size: .78rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .12em; color: var(--fg); line-height: 1;
}
body.kalos-cine .menu-toggle::before,
body.kalos-cine .menu-toggle::after {
	content: ''; position: absolute; left: 2px; top: 50%;
	width: 24px; height: 2px; border-radius: 1px; background: var(--fg);
	transition: transform .35s var(--ease);
}
body.kalos-cine .menu-toggle::before { transform: translateY(calc(-50% - 4px)); }
body.kalos-cine .menu-toggle::after  { transform: translateY(calc(-50% + 4px)); }
body.kalos-cine.no-scroll .menu-toggle::before { transform: translateY(-50%) rotate(45deg); }
body.kalos-cine.no-scroll .menu-toggle::after  { transform: translateY(-50%) rotate(-45deg); }
/* Overlay: sin viñetas, sufijo "_" en los links grandes */
body.kalos-cine .mobile-menu li,
body.kalos-cine .mobile-menu ul { list-style: none; margin: 0; padding: 0; }
body.kalos-cine .mobile-menu a::after { content: '_'; color: var(--acid); }
/* Bloque de contacto al pie del overlay (inyectado por footer.php site-wide) */
body.kalos-cine .cine-mm-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem;
	margin-top: 2.2rem;
	font-family: var(--font-mono); font-size: .85rem; letter-spacing: .04em; color: var(--muted);
}
body.kalos-cine .cine-mm-meta a {
	font-family: var(--font-mono); font-size: .85rem; font-weight: 400;
	text-transform: none; letter-spacing: .04em; line-height: 1.4;
	border-bottom: none; padding: 0; color: var(--fg);
}
body.kalos-cine .cine-mm-meta a::after { content: none; }
body.kalos-cine .cine-mm-meta a:hover { color: var(--acid); padding-left: 0; }

/* Redes con LOGO (footer + overlay): íconos monocromáticos */
.footer-social, .cine-mm-social { display: inline-flex; align-items: center; gap: 1rem; }
.footer-social a, .cine-mm-social a { display: inline-flex; color: inherit; }
.footer-social a svg, .cine-mm-social a svg { display: block; width: 20px; height: 20px; }
.footer-social a::after, .cine-mm-social a::after { content: none !important; }
.footer-social a:hover, .cine-mm-social a:hover { color: var(--acid); }

/* ---------------------------------------------------------------------
   5) Botones flotantes (site-wide): WhatsApp a la DERECHA, accesibilidad a
   la IZQUIERDA; se funden al llegar al footer (body.cine-footer-vis).
   ------------------------------------------------------------------- */
body.kalos-cine .wa-float { left: auto; right: 1.4rem; }
body.kalos-cine .kalos-a11y-btn,
body.kalos-cine .kalos-a11y-panel { right: auto; left: clamp(1rem, 2.5vw, 1.8rem); }
body.kalos-cine .wa-float,
body.kalos-cine .kalos-a11y-btn {
	transition: transform .4s var(--ease), opacity .4s var(--ease), box-shadow .3s;
}
body.kalos-cine.cine-footer-vis .wa-float,
body.kalos-cine.cine-footer-vis .kalos-a11y-btn {
	opacity: 0; transform: translateY(16px); pointer-events: none;
}