/* ================= CRITERIO DE ITÁLICA (Fraunces) ================= */
/* La itálica significa VOZ, no decoración. Solo la llevan:
     - los h1 de entrada (hero, subhero, djhero, ficha de evento): la voz de la marca,
       una vez por página y en grande;
     - las citas y notas (.ecc-prensa__quote p, .ecc-contact__map p,
       .ecc-djstyle__schedule p): "esto lo dice otro".
   Los h2 de sección van SIEMPRE redondos: son rótulos de estructura, se escanean, y
   sobre la textura de hiedra con velo al 88 % los remates de la cursiva pierden
   definición a ese tamaño. Antes del 2026-08-03 estaban repartidos sin criterio
   (El Patio cursiva, Galería redonda...) y se leía como inconsistencia.
   Si añades una sección nueva: h2 redondo. */
/* ================= SIN SCROLL HORIZONTAL ================= */
/* El sitio no tiene ningun elemento pensado para desbordar la pantalla a lo ancho
   (medido con scrollWidth: 0px de overflow real en home a varios anchos de movil).
   Sin esto, el navegador movil igual deja "rebotar"/arrastrar un pelin en horizontal
   (efecto goma nativo de iOS/Android) aunque no haya overflow real que mostrar,
   sensacion de que "se descentra todo" al mover el dedo a los lados. overflow-x:hidden
   no afecta a carruseles internos con su propio scroll (p.ej. .ecc-muro__row, que ya
   usa overflow-x:auto) — solo bloquea el documento entero. */
/* overflow-x: clip, NO hidden (2026-08-05). Con `hidden` el body se convierte en
   contenedor de scroll y eso ROMPE `position: sticky` en sus descendientes: la cabecera
   y la barra de proximo concierto llevaban meses declaradas sticky sin anclarse nunca,
   ni en movil ni en escritorio. `clip` recorta igual pero no crea contenedor de scroll.
   Medido antes/despues: cabecera en top -2500 -> top 0 tras bajar 2500px, y el scroll
   horizontal sigue bloqueado (scrollWidth == clientWidth). */
html, body { overflow-x: clip; max-width: 100%; }

/* ================= CABECERA PROVISIONAL ================= */
/* Oculta el header por defecto de Hello Elementor: el real llega con Elementor Pro (Theme Builder). */
#site-header { display: none !important; }

/* ================= FOOTER PROVISIONAL ================= */
/* Oculta el footer por defecto de Hello Elementor (franja blanca "Todos los derechos reservados"): el real llega con Elementor Pro (Theme Builder). Mientras tanto se pinta uno propio via wp_footer en elcorral-estilos.php, igual en las 9 paginas. */
#site-footer { display: none !important; }
.ecc-provisional-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #1B1712;
	border-bottom: 1px solid rgba(185,169,140,.2);
	padding: 12.88px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
}
.ecc-provisional-header__logo { display: block; line-height: 0; }
.ecc-provisional-header__logo img { height: 50.784px !important; width: auto !important; display: block; }
.ecc-provisional-header__nav { display: flex; }
.ecc-provisional-header__list {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ecc-provisional-header__list > li { display: flex; align-items: center; }
.ecc-provisional-header__list a,
.ecc-nav-dropdown__toggle {
	font-family: 'Archivo', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #B9A98C;
	text-decoration: none;
	white-space: nowrap;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
/* El reset.css de Hello Elementor da a CUALQUIER <button> (no solo :hover/:focus)
   borde y texto rosa por defecto — .ecc-nav-dropdown__toggle y el botón hamburguesa
   son <button>, así que hace falta !important para que gane siempre, no solo al
   pasar el ratón por encima. */
.ecc-nav-dropdown__toggle,
.ecc-provisional-header__toggle {
	border: none !important;
	background-color: transparent !important;
	color: #B9A98C !important;
}
.ecc-nav-dropdown__toggle { display: inline-flex !important; text-align: left !important; }
.ecc-provisional-header__list a:hover,
.ecc-provisional-header__list a.is-active,
.ecc-nav-dropdown__toggle:hover,
.ecc-nav-dropdown__toggle.has-active-child { color: #E8A33D !important; }
/* El reset.css de Hello Elementor pone fondo rosa a cualquier <button>:hover/:focus
   (button:hover/:focus { background-color: rgb(204,51,102) }) — neutralizarlo aquí,
   afecta tanto al desplegable como al botón hamburguesa (ver más abajo). */
.ecc-nav-dropdown__toggle:hover,
.ecc-nav-dropdown__toggle:focus { background-color: transparent !important; }
.ecc-provisional-header__list a:focus-visible,
.ecc-nav-dropdown__toggle:focus-visible,
.ecc-provisional-header__cta:focus-visible {
	outline: 2px solid #E8A33D;
	outline-offset: 3px;
	border-radius: 1px;
}

/* Botón "Cómo llegar": mismos colores que .ecc-btn--primary (ámbar/noche) más abajo,
   pero a tamaño de cabecera — no el botón grande del hero. Vive dos veces en el DOM
   (una visible en escritorio fuera de la lista, otra dentro de la lista para el panel
   móvil) y cada breakpoint oculta la que no toca con display:none, que además la saca
   del árbol de accesibilidad — así nunca hay dos enlaces expuestos a la vez. */
.ecc-provisional-header__cta {
	font-family: 'Archivo', sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	background: var(--ecc-ambar);
	color: var(--ecc-noche);
	padding: 9px 18px;
	border-radius: 2px;
	white-space: nowrap;
	transition: transform .18s ease, background .18s ease;
}
.ecc-provisional-header__cta:hover,
.ecc-provisional-header__cta:focus-visible { background: #f0b158; color: var(--ecc-noche); transform: translateY(-2px); }
.ecc-provisional-header__list > li.ecc-provisional-header__cta-item { display: none; }

/* Desplegable "El Corral" */
.ecc-nav-dropdown { position: relative; }
.ecc-nav-dropdown__arrow { font-size: 10.5px; display: inline-block; transition: transform .18s ease; }
.ecc-nav-dropdown__toggle[aria-expanded="true"] .ecc-nav-dropdown__arrow { transform: rotate(180deg); }
.ecc-nav-dropdown__menu {
	list-style: none;
	margin: 0;
	padding: 8px;
	position: absolute;
	top: calc(100% + 18px);
	left: 0;
	min-width: 200px;
	background: rgba(27,23,18,.98);
	border: 1px solid rgba(185,169,140,.2);
	border-radius: 4px;
	box-shadow: 0 20px 45px rgba(0,0,0,.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
	z-index: 10;
}
.ecc-nav-dropdown__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.ecc-nav-dropdown__menu li + li { margin-top: 2px; }
.ecc-nav-dropdown__menu a { display: block; padding: 10px 14px; border-radius: 2px; font-size: 15px; }
.ecc-nav-dropdown__menu a:hover,
.ecc-nav-dropdown__menu a:focus-visible,
.ecc-nav-dropdown__menu a.is-active { background: rgba(232,163,61,.12); color: #E8A33D; }

.ecc-provisional-header__toggle { display: none !important; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 0; }
.ecc-provisional-header__toggle:hover,
.ecc-provisional-header__toggle:focus { background-color: transparent !important; }
.ecc-provisional-header__toggle span { display: block; width: 22px; height: 2px; background: #EFE6D8; transition: transform .2s ease, opacity .2s ease; }
.ecc-provisional-header__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ecc-provisional-header__toggle.is-active span:nth-child(2) { opacity: 0; }
.ecc-provisional-header__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Al subir la escala tipográfica (03-08-2026) la fila del menú pasó de 443 a 470 px y
   entre 781 y 900 px de ancho se partía en dos líneas. Con el gap más corto vuelve a caber
   en una sola sin renunciar al tamaño de letra. */
@media (min-width: 781px) and (max-width: 900px) {
	.ecc-provisional-header__list { gap: 14px; }
}

@media (max-width: 780px) {
	.ecc-provisional-header { justify-content: space-between; }
	.ecc-provisional-header__toggle { display: flex !important; }
	.ecc-provisional-header__cta--desktop { display: none; }
	.ecc-provisional-header__nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100svh - 78px); /* alto real de la cabecera, antes 62 */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: #1B1712;
		border-bottom: 1px solid rgba(185,169,140,.2);
		box-shadow: 0 20px 40px rgba(0,0,0,.35);
	}
	.ecc-provisional-header__nav.is-open { display: flex; }
	.ecc-provisional-header__list {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		box-sizing: border-box;
		padding: 10px 20px 24px;
		gap: 2px;
	}
	.ecc-provisional-header__list > li { width: 100%; }
	.ecc-provisional-header__list a,
	.ecc-nav-dropdown__toggle {
		width: 100%;
		min-height: 44px;
		box-sizing: border-box;
		padding: 12px 6px;
		justify-content: space-between;
	}
	.ecc-provisional-header__list > li.ecc-nav-dropdown { flex-direction: column; align-items: stretch; }
	.ecc-nav-dropdown { position: static; }
	/* `visibility: hidden` mientras está plegado (2026-08-05, bloque 5 de accesibilidad).
	   ANTES estaba forzado a `visible`, y como plegar es solo `max-height: 0` + `overflow:
	   hidden`, los CINCO enlaces de dentro seguían siendo tabulables aunque el bloque midiera
	   0px de alto: al tabular por el menú móvil el foco se metía cinco veces en contenido
	   invisible y parecía que Tab no hacía nada. Medido: `dentroDelRecorte: false` en los cinco.
	   `visibility: hidden` los saca del orden de tabulación, que es justo lo que ya hacía la
	   versión de escritorio de esta misma regla.

	   El retardo de 0,25s en la transición de `visibility` es lo que conserva la animación:
	   al plegar, el bloque sigue deslizándose hacia arriba y solo se oculta cuando ha
	   terminado; al desplegar (.is-open) el retardo es 0 y aparece al instante. */
	.ecc-nav-dropdown__menu {
		position: static;
		max-height: 0;
		overflow: hidden;
		opacity: 1;
		visibility: hidden;
		transform: none;
		box-shadow: none;
		border: none;
		min-width: 0;
		background: rgba(0,0,0,.18);
		border-radius: 2px;
		margin: 0;
		padding: 0 4px;
		transition: max-height .25s ease, padding .25s ease, visibility 0s linear .25s;
	}
	.ecc-nav-dropdown__menu.is-open { max-height: 400px; padding: 6px 4px; margin: 2px 0 6px; visibility: visible; transition: max-height .25s ease, padding .25s ease, visibility 0s linear 0s; }
	.ecc-nav-dropdown__menu a { min-height: 44px; padding: 11px 10px; }
	.ecc-provisional-header__list > li.ecc-provisional-header__cta-item { display: block; width: 100%; margin-top: 10px; }
	.ecc-provisional-header__cta-item .ecc-provisional-header__cta {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		min-height: 44px;
		padding: 13px 18px;
	}
}

/* El Corral de las Cigüeñas — variables de marca */
:root {
	--ecc-noche: #1B1712;
	--ecc-piedra: #B9A98C;
	--ecc-ambar: #E8A33D;
	--ecc-hiedra: #4C6344;
	--ecc-hueso: #EFE6D8;
	--ecc-frio: #7EB6D9;
	--ecc-calor: #E36B54;
}

/* ================= HERO: foto fija (sin parallax de scroll) ================= */
.ecc-hero-seq { position: relative; height: auto; }
.ecc-hero-seq__pin { position: relative; height: 100vh; height: 100svh; min-height: 92vh; min-height: 92svh; overflow: hidden; display: flex; align-items: flex-end; }
.ecc-hero-seq__img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 1; }
.ecc-hero-seq__overlay { position: absolute; inset: 0; background: rgba(27,23,18,.2); }
/* Foto de fondo distinta en móvil (recorte propio, no el mismo cover de escritorio). */
@media (max-width: 780px) {
	/* 2026-08-03: URL relativa al propio CSS — la absoluta http:// anterior daba
	   contenido mixto bajo HTTPS y se rompía al migrar de dominio. */
	.ecc-hero-seq__img { background-image: url('../img/hero-patio-final-movil.webp') !important; }
}

/* ================= HERO: contenido (compartido con .ecc-hero-seq) ================= */
.ecc-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 40px 32px 64px;
	color: var(--ecc-hueso);
	box-sizing: border-box;
}
.ecc-hero__logo {
	height: 52px !important;
	width: auto !important;
	max-width: none !important;
	margin-bottom: 28px;
	opacity: .96;
	display: block;
}
.ecc-hero__eyebrow {
	font-family: 'Space Mono', monospace;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: 14px;
	color: var(--ecc-piedra);
	margin: 0 0 18px;
}
.ecc-hero__eyebrow .dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ecc-ambar);
	margin-right: 8px;
	vertical-align: middle;
}
.ecc-hero__inner h1 {
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-style: italic;
	font-size: clamp(2.4rem, 5.6vw, 4.4rem);
	line-height: 1.04;
	margin: 0 0 20px;
	letter-spacing: -.01em;
}
.ecc-hero__inner h1 em {
	font-style: normal;
	color: var(--ecc-ambar);
}
.ecc-hero__inner p.lead {
	font-family: 'Archivo', sans-serif;
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	max-width: 540px;
	color: var(--ecc-hueso);
	opacity: .92;
	line-height: 1.55;
	margin: 0 0 34px;
}
.ecc-hero__ctas {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
/* Escritorio (inverso exacto del breakpoint móvil de abajo, que no se toca):
   sin logo, titular partido en dos líneas siempre (una por frase, no por
   ancho disponible) y más hueco bajo el bloque para que quepa entero en el
   alto de pantalla inicial sin hacer scroll. */
@media (min-width: 781px) {
	/* El ENLACE que envuelve el logo también (2026-08-05, bloque 5): ocultar solo la <img> dejaba
	   un <a> de 0x0 que seguía siendo tabulable, así que el teclado tenía una parada de foco sobre
	   nada. Medido: caja 0x0, `visible:false`, y aun así en el orden de tabulación (puesto 9 en la
	   portada de escritorio). Va en las dos reglas y no en una suelta para que, si algún día se
	   recupera el logo en un breakpoint, el enlace vuelva con él. */
	.ecc-hero__logo,
	.ecc-hero__logo-link { display: none; }
	.ecc-hero__inner h1 em { display: block; }
	.ecc-hero__inner { padding-bottom: calc(110px + 15vh); } /* 12vh + 3vh subido (2026-08-02) */
}
@media (max-width: 780px) {
	.ecc-hero__eyebrow,
	.ecc-hero__inner p.lead {
		display: none;
	}
	/* El logo dentro del hero solo se oculta en móvil (petición explícita) —
	   en escritorio sigue igual. Al quitarlo ya no hace falta el grid a dos
	   columnas que compartía fila con los botones; ahora "ctas" fluye normal
	   con el flex-wrap de la regla base, mostrando los dos botones. */
	.ecc-hero__logo,
	.ecc-hero__logo-link { display: none; }   /* el enlace también: ver la nota del bloque de 781px */
	.ecc-hero__inner { margin-bottom: 15vh; } /* 17vh - 2vh bajado (2026-08-02) */
	/* Próximos conciertos / Celebra un evento: misma fila siempre, mismo
	   ancho y alto (flex:1 reparte el hueco a partes iguales; el alto ya se
	   iguala solo porque el flex por defecto estira los hijos - "stretch" -
	   aunque el texto de uno ocupe dos líneas). */
	.ecc-hero__ctas { flex-wrap: nowrap; }
	.ecc-hero__ctas .ecc-btn {
		flex: 1 1 0;
		text-align: center;
		padding-left: 14px;
		padding-right: 14px;
		font-size: 15px;
	}
}
/* ---- Primitiva compartida de boton (2026-08-04) ----------------------------------
   El sitio tiene ocho familias de boton (.ecc-btn, .ecc-evento__btn, .ecc-priv__btn,
   .ecc-news__btn, .ecc-prensa__btn, .ecc-bar__btn, .ecc-patio__btn y .ecc-patio-btn).
   Medidas antes de tocar nada: seis de ellas ya eran identicas en tipografia y caja
   ('Archivo' 600, 15.5px, 14px 28px, radio 2px) — o sea, la misma declaracion copiada
   seis veces, no ocho disenos distintos. Las diferencias que quedaban no eran visibles:
   .ecc-patio__btn usa 13px 26px pero anade 1px de borde, asi que renderiza EXACTAMENTE
   la misma altura que las de 14px 28px (51 px, medido). Por eso aqui NO se tocan
   tamanos, colores ni paddings: no habia nada visualmente incoherente que arreglar y
   cambiarlo seria rediseno, no coherencia.
   Lo que si divergia de verdad son dos cosas medibles:
   1. Objetivo tactil. Solo .ecc-patio-btn declaraba min-height (48px). El resto dependia
      del texto: "Ver más momentos" de la galeria se quedaba en 42 px de alto a 360 px de
      ancho, por debajo del minimo recomendado de 44.
   2. Estado de foco. El menu tiene su anillo (2px ambar, offset 3), .ecc-prensa__btn el
      suyo (hueso), .ecc-form__submit el suyo (noche)... y las seis familias restantes no
      tenian ninguno: caian en el anillo por defecto del navegador. Ese anillo SE VE
      (comprobado con captura sobre fondo claro y sobre fondo oscuro), asi que no era un
      fallo de accesibilidad — pero si una incoherencia de estado. Se unifica con la
      misma geometria que ya usa el menu y color currentColor, que contrasta siempre:
      el texto del boton ya contrasta con su propio fondo por definicion. */
.ecc-btn,
.ecc-evento__btn,
.ecc-priv__btn,
.ecc-news__btn,
.ecc-prensa__btn,
.ecc-bar__btn,
.ecc-patio__btn {
	min-height: 44px;
}
.ecc-btn:focus-visible,
.ecc-evento__btn:focus-visible,
.ecc-priv__btn:focus-visible,
.ecc-news__btn:focus-visible,
.ecc-bar__btn:focus-visible,
.ecc-patio__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ecc-btn {
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	font-size: 16px;
	padding: 15px 30px;
	border-radius: 2px;
	text-decoration: none;
	display: inline-block;
	transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.ecc-btn--primary {
	background: var(--ecc-ambar);
	color: var(--ecc-noche);
}
.ecc-btn--primary:hover {
	transform: translateY(-2px);
	background: #f0b158;
	color: var(--ecc-noche);
}
.ecc-btn--secondary {
	border: 1px solid rgba(239,230,216,.5);
	color: var(--ecc-hueso);
}
.ecc-btn--secondary:hover {
	transform: translateY(-2px);
	border-color: var(--ecc-hueso);
	color: var(--ecc-hueso);
}
.ecc-btn--flama { color: var(--ecc-ambar); border-color: rgba(232,163,61,.5); }
.ecc-btn--flama:hover { color: var(--ecc-ambar); border-color: var(--ecc-ambar); }
/* Variante oscura de .ecc-btn--secondary, para botones outline sobre fondos claros
   (p.ej. "Enviar un correo" en el formulario de Eventos Privados). */
/* Borde a .6 y no a .35 (2026-08-04). Medido sobre el fondo crema del bloque ecc-news:
   a .35 el borde efectivo era rgb(165,158,147), 2,15:1 contra el fondo — por debajo del
   3:1 que pide WCAG 1.4.11 para el contorno de un control. El TEXTO sí contrastaba
   (14,42:1), así que el botón se leía pero no parecía un botón. A .6 sube a 4,33:1.
   El color del texto no se toca. */
.ecc-btn--outline-dark { border: 1px solid rgba(27,23,18,.6); color: var(--ecc-noche) !important; }
.ecc-btn--outline-dark:hover { border-color: var(--ecc-noche); color: var(--ecc-noche) !important; }
@media (max-width: 600px) {
	.ecc-hero__inner { padding: 28px 20px 48px; }
}

/* ================= HORARIO DEL BAR ================= */
.ecc-clima { background: var(--ecc-noche); padding: 14px 32px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ecc-clima__inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.ecc-clima__col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ecc-clima__label { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.ecc-clima__temp { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.5rem; color: var(--ecc-hueso); }
.ecc-clima__col--corral .ecc-clima__temp { color: var(--ecc-hueso); }
.ecc-clima__col--corral.is-cooling .ecc-clima__temp,
.ecc-clima__col--corral.is-cooling .ecc-clima__state { color: var(--ecc-frio); }
.ecc-clima__col--corral.is-heating .ecc-clima__temp,
.ecc-clima__col--corral.is-heating .ecc-clima__state { color: var(--ecc-calor); }
.ecc-clima__arrow { font-size: 1.1rem; color: var(--ecc-ambar); }
.ecc-clima__rain { flex-basis: 100%; text-align: center; font-family: 'Archivo', sans-serif; font-size: 13.5px; color: rgba(255,255,255,.65); }
/* Con 3 hijos sueltos (col-caceres, flecha, col-corral) y flex-wrap:wrap, por
   debajo de ~600px la flecha se queda huerfana junto a la primera columna en
   vez de partir limpio entre las dos (el ancho de "EN EL CORRAL,
   CLIMATIZACION ON" no cabe ya en esa linea y solo esa columna salta sola).
   Forzando columna, el orden del DOM (col / flecha / col) ya apila bien la
   flecha justo en medio — solo hay que girarla para que apunte hacia abajo. */
@media (max-width: 600px) {
	/* padding/gap iguales al ritmo de .ecc-pulse (bloque "Proximo concierto",
	   12px/24px) — apilada en columna, esta caja tenia el mismo gap:28px que
	   usaba de separacion horizontal en escritorio, sumado dos veces (entre
	   col-flecha y flecha-col), y quedaba mucho mas alta que las otras dos
	   franjas de esta misma tira informativa. */
	.ecc-clima { padding-top: 12px; padding-bottom: 12px; }
	.ecc-clima__inner { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
	.ecc-clima__arrow { transform: rotate(90deg); line-height: 1; }
}
@media (max-width: 480px) { .ecc-clima__inner { gap: 6px; } .ecc-clima__temp { font-size: 1.2rem; } }
.ecc-horario-bar { background: var(--ecc-hueso); padding: 16px 32px; }
.ecc-horario-bar__inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; text-align: center; }
.ecc-horario-bar__status { display: flex; align-items: center; gap: 10px; }
.ecc-horario-bar__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ecc-horario-bar__dot--open { background: var(--ecc-hiedra); box-shadow: 0 0 0 0 rgba(76,99,68,.5); animation: eccHorarioPulse 1.8s infinite; }
.ecc-horario-bar__dot--closed { background: #a13d2e; }
.ecc-horario-bar__dot--privada { background: var(--ecc-ambar); }
@keyframes eccHorarioPulse { 0% { box-shadow: 0 0 0 0 rgba(76,99,68,.5); } 70% { box-shadow: 0 0 0 8px rgba(76,99,68,0); } 100% { box-shadow: 0 0 0 0 rgba(76,99,68,0); } }
.ecc-horario-bar__label { font-family: 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; color: var(--ecc-noche); }
.ecc-horario-bar__label b { color: var(--ecc-hiedra); }
.ecc-horario-bar__label--closed b { color: #a13d2e; }
.ecc-horario-bar--privada .ecc-horario-bar__label b { color: var(--ecc-ambar); }
.ecc-horario-bar__today { font-family: 'Archivo', sans-serif; color: #5a5142; font-size: 15px; }
.ecc-horario-bar__toggle { background: none; border: 1px dashed rgba(27,23,18,.3); color: var(--ecc-noche); font-family: 'Archivo', sans-serif; font-size: 14px; padding: 5px 14px; border-radius: 20px; cursor: pointer; transition: border-color .2s, color .2s; }
.ecc-horario-bar__toggle:hover { border-color: var(--ecc-hiedra); color: var(--ecc-hiedra); }
.ecc-horario-bar__week { max-width: 420px; margin: 14px auto 0; display: none; grid-template-columns: 1fr auto; gap: 6px 20px; font-family: 'Archivo', sans-serif; font-size: 14.5px; color: var(--ecc-noche); }
.ecc-horario-bar__week.is-open { display: grid; }
.ecc-horario-bar__week span:nth-child(odd) { color: #5a5142; font-family: 'Space Mono', monospace; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.ecc-horario-bar__week .is-today-row { color: var(--ecc-hiedra); font-weight: 600; }

/* ================= BARRA DE PULSO ================= */
.ecc-pulse {
	position: sticky;
	top: 78px; /* alto real de la cabecera sticky: 12.88*2 + logo 50.784 + 1 de borde */
	z-index: 50;
	background: var(--ecc-noche);
	border-bottom: 1px solid rgba(185,169,140,.25);
	padding: 12px 24px;
}
.ecc-pulse__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.ecc-pulse__info {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: 'Space Mono', monospace;
	font-size: 14.5px;
	color: var(--ecc-hueso);
	letter-spacing: .02em;
}
.ecc-pulse__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.ecc-pulse__line2 {
	font-size: 13px;
	color: var(--ecc-piedra);
	letter-spacing: .04em;
}
.ecc-pulse__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ecc-ambar);
	animation: ecc-pulse-beat 1.8s ease-in-out infinite;
	flex-shrink: 0;
	margin-top: 4px;
}
@keyframes ecc-pulse-beat {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .4; transform: scale(.7); }
}
.ecc-pulse__cta {
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ecc-noche);
	background: var(--ecc-ambar);
	padding: 9px 18px;
	border-radius: 2px;
	text-decoration: none;
	white-space: nowrap;
}
.ecc-pulse__cta:hover { background: #f0b158; }

.ecc-pulse--live {
	background: var(--ecc-ambar);
	border-bottom-color: rgba(27,23,18,.2);
}
.ecc-pulse--live .ecc-pulse__info,
.ecc-pulse--live .ecc-pulse__line2 { color: var(--ecc-noche); }
.ecc-pulse--live .ecc-pulse__dot { background: var(--ecc-noche); }
.ecc-pulse--live .ecc-pulse__cta {
	background: var(--ecc-noche);
	color: var(--ecc-ambar);
}
.ecc-pulse--live .ecc-pulse__cta:hover { background: #2a251d; }

.ecc-pulse__countdown { display: none; }
.ecc-pulse--live .ecc-pulse__countdown {
	display: block;
	font-weight: 700;
	margin-top: 2px;
}

/* ================= MURO DE CARTELES ================= */
.ecc-muro { background: var(--ecc-noche); padding: 68px 0 81px; overflow: hidden; }
.ecc-muro__head { max-width: 1180px; margin: 0 auto 12px; padding: 28px 32px; }
.ecc-muro__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-hiedra); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 12px; }
.ecc-muro h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: var(--ecc-noche); margin: 0 0 14px; }
.ecc-muro p { font-family: 'Archivo', sans-serif; color: #4a4238; max-width: 560px; line-height: 1.6; margin: 0; }
.ecc-muro__row { display: flex; gap: 34px; overflow-x: auto; padding: 46px 32px 30px; max-width: 1180px; margin: 0 auto; scroll-snap-type: x proximity; position: relative; }
/* Papel de la tarjeta: NO usa --ecc-hueso a proposito (2026-08-08). El velo de la
   pared arranca de ese mismo color, asi que atarlos hacia que el cartel se fundiera
   con el fondo. Este #F3ECDF va medio escalon por encima del hueso. */
.ecc-muro__card { flex: 0 0 270px; scroll-snap-align: start; background: #F3ECDF; padding: 14px 14px 18px; box-shadow: 0 18px 30px rgba(0,0,0,.45); transition: transform .25s ease; text-decoration: none; display: block; position: relative; transform-origin: top center; animation: eccMuroSway 3.2s ease-in-out infinite; }
.ecc-muro__card::before {
	content: '';
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	width: 14px;
	height: 26px;
	z-index: 2;
	background:
		linear-gradient(#d8d8d8, #8a8a8a) center 45% / 100% 3px no-repeat,
		linear-gradient(180deg, #c8a06a, #a3763f 55%, #a3763f 55%, #8a6230);
	border-radius: 7px 7px 3px 3px;
	clip-path: polygon(0% 0%, 100% 0%, 100% 78%, 58% 78%, 58% 100%, 42% 100%, 42% 78%, 0% 78%);
	box-shadow: 0 2px 3px rgba(0,0,0,.5);
}
@keyframes eccMuroSway {
	0%, 100% { transform: rotate(-0.5deg); }
	50% { transform: rotate(0.5deg); }
}
.ecc-muro__card:nth-child(2) { animation-duration: 3.6s; animation-delay: .2s; }
.ecc-muro__card:nth-child(3) { animation-duration: 3.0s; animation-delay: .4s; }
.ecc-muro__card:nth-child(4) { animation-duration: 3.4s; animation-delay: .6s; }
.ecc-muro__card:nth-child(5) { animation-duration: 3.8s; animation-delay: .8s; }
.ecc-muro__card:hover { transform: rotate(0deg) scale(1.03); animation-play-state: paused; }
.ecc-muro__card img { width: 100%; display: block; aspect-ratio: 210/297; object-fit: contain; }
.ecc-muro__card .cap { font-family: 'Space Mono', monospace; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ecc-noche); margin-top: 12px; text-align: center; }
.ecc-muro__card--cta { display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; border: 1px dashed rgba(27,23,18,.3); box-shadow: none; color: var(--ecc-noche); animation: none !important; transform: rotate(0deg) !important; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 15.5px; text-align: center; padding: 20px; min-height: 280px; }
.ecc-muro__card--cta::before { content: none; }
.ecc-muro__card--cta:hover { border-color: var(--ecc-hiedra); color: var(--ecc-hiedra); }
@media (prefers-reduced-motion: reduce) {
	.ecc-muro__card { animation: none; }
	/* 2026-08-03: también los latidos en bucle infinito y las llamas del botón Flama. */
	.ecc-horario-bar__dot--open,
	.ecc-pulse__dot,
	.ecc-flama-particle { animation: none; }
	.ecc-flama-particle { opacity: 0; }
}

/* ================= DJ RESIDENTE ================= */
.ecc-dj { background: var(--ecc-hueso); padding: 64px 32px; }
.ecc-dj__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ecc-dj__video { max-width: 300px; margin: 0 auto; display: block; }
.ecc-dj__video img { width: 100%; display: block; transition: transform .2s ease; }
.ecc-dj__video:hover img { transform: scale(1.03); }
.ecc-dj__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-ambar); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 14px; }
.ecc-dj h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--ecc-hueso); margin: 0 0 20px; }
.ecc-dj p { font-family: 'Archivo', sans-serif; color: var(--ecc-piedra); line-height: 1.7; margin: 0 0 16px; }
.ecc-dj__flama-wrap { position: relative; display: inline-block; margin-top: 6px; }
.ecc-flama-particle {
	position: absolute;
	bottom: 100%;
	left: 50%;
	font-size: 20px;
	pointer-events: none;
	animation: eccFlamaRise .8s ease-out forwards;
}
@keyframes eccFlamaRise {
	0% { transform: translate(-50%, 0) scale(.6) rotate(0deg); opacity: 1; }
	100% { transform: translate(calc(-50% + var(--drift, 0px)), -70px) scale(1.2) rotate(var(--rot, 8deg)); opacity: 0; }
}
@media (max-width: 820px) {
	.ecc-dj__inner { grid-template-columns: 1fr; }
	.ecc-dj__inner > div:first-child { order: 2; }
	.ecc-dj__inner > div:last-child { order: 1; }
}

/* ================= CÓMO LLEGAR ================= */
.ecc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ecc-llegar { background: var(--ecc-noche); padding: 64px 32px 0; }
.ecc-llegar__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; }
.ecc-llegar__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-hiedra); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 12px; }
.ecc-llegar h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: var(--ecc-noche); margin: 0 0 18px; }
.ecc-llegar__intro { font-family: 'Archivo', sans-serif; color: #4a4238; line-height: 1.7; margin: 0 0 26px; }
.ecc-llegar dl { margin: 0 0 30px; }
.ecc-llegar dt { font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ecc-hiedra); margin: 16px 0 4px; }
.ecc-llegar dt:first-child { margin-top: 0; }
.ecc-llegar dd { font-family: 'Archivo', sans-serif; font-size: 16px; color: var(--ecc-noche); margin: 0; }
.ecc-llegar__lead { grid-column: 2; grid-row: 1; }
.ecc-llegar__visual { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 20px; }
.ecc-llegar__photo { margin: 0; }
.ecc-llegar__photo img { width: 100%; aspect-ratio: 8/5; object-fit: cover; border-radius: 2px; box-shadow: 0 24px 50px rgba(0,0,0,.35); display: block; }
.ecc-llegar__photo figcaption { font-family: 'Archivo', sans-serif; font-size: 14px; color: #4a4238; margin-top: 8px; }
.ecc-llegar__extra { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 44px; align-self: start; }
.ecc-llegar__maplabel { max-width: 1180px; margin: 40px auto 0; padding: 0 32px; font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ecc-hiedra); box-sizing: border-box; }
/* El widget nativo de Google Maps de Elementor (72f2a425) es hermano de este widget HTML
   dentro del mismo contenedor "b60ebf3d" — no se puede anidar un <iframe> real dentro del
   HTML de arriba porque el conector MCP lo elimina de cualquier valor de tipo string (incluida
   la vía de array/objeto). Se estiliza aquí por su ID estable para que seguido visualmente. */
.elementor-element-b60ebf3d { gap: 0 !important; }
.elementor-element-72f2a425 { padding: 14px 32px 90px; }
.elementor-element-72f2a425 .elementor-custom-embed { max-width: 1180px; margin: 0 auto; border-radius: 2px; overflow: hidden; border: 1px solid rgba(27,23,18,.15); line-height: 0; }
.ecc-llegar__block h3 { font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ecc-hiedra); margin: 0 0 14px; }
.ecc-llegar__block ul { list-style: none; margin: 0; padding: 0; }
.ecc-llegar__block li { padding: 12px 0; border-bottom: 1px solid rgba(27,23,18,.12); }
.ecc-llegar__block li:first-child { padding-top: 0; }
.ecc-llegar__block li:last-child { border-bottom: none; }
.ecc-llegar__block li strong { display: block; color: var(--ecc-noche); font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 15px; }
.ecc-llegar__block li .meta { display: block; font-family: 'Archivo', sans-serif; color: #4a4238; font-size: 14px; margin: 3px 0 6px; }
.ecc-llegar__block li a { display: inline-flex; align-items: center; min-height: 44px; font-family: 'Archivo', sans-serif; color: var(--ecc-hiedra); font-size: 14px; font-weight: 600; text-decoration: underline; }
.ecc-llegar__block p { font-family: 'Archivo', sans-serif; font-size: 15px; color: #4a4238; line-height: 1.6; margin: 0; }
.ecc-llegar__block p a { color: var(--ecc-hiedra); text-decoration: underline; }
@media (max-width: 820px) {
	.ecc-llegar__inner { grid-template-columns: 1fr; }
	.ecc-llegar__lead,
	.ecc-llegar__visual,
	.ecc-llegar__extra { grid-column: 1; grid-row: auto; }
	.ecc-llegar__visual { margin-top: 36px; }
	.ecc-llegar__extra { grid-template-columns: 1fr; margin-top: 36px; gap: 24px; }
}

/* ================= EL PATIO ================= */
.ecc-patio { background: var(--ecc-hueso); padding: 64px 32px; }
.ecc-patio__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.ecc-patio__img { width: 100%; border-radius: 2px; box-shadow: 0 30px 60px rgba(0,0,0,.5); display: block; }
.ecc-patio__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-ambar); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 14px; }
.ecc-patio h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--ecc-hueso); margin: 0 0 20px; }
.ecc-patio p { font-family: 'Archivo', sans-serif; color: var(--ecc-piedra); line-height: 1.7; margin: 0 0 16px; }
.ecc-patio__btn { display: inline-block; margin-top: 10px; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 15.5px; color: var(--ecc-hueso); border: 1px solid rgba(239,230,216,.4); padding: 13px 26px; text-decoration: none; border-radius: 2px; }
.ecc-patio__btn:hover { border-color: var(--ecc-hueso); }
@media (max-width: 820px) { .ecc-patio__inner { grid-template-columns: 1fr; } }

/* ================= EVENTOS PRIVADOS (teaser home) ================= */
.ecc-priv { background: var(--ecc-noche); padding: 64px 32px; }
.ecc-priv__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ecc-priv__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-hiedra); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 14px; }
.ecc-priv h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--ecc-noche); margin: 0 0 18px; }
.ecc-priv ul { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.ecc-priv li { font-family: 'Archivo', sans-serif; font-size: 15.5px; color: #4a4238; padding-left: 18px; position: relative; }
.ecc-priv li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--ecc-hiedra); }
.ecc-priv__btn-wrap { text-align: center; margin-top: 10px; }
.ecc-priv__btn { display: inline-block; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 15.5px; color: var(--ecc-noche); background: var(--ecc-ambar); padding: 14px 28px; text-decoration: none; border-radius: 2px; }
.ecc-priv__btn:hover { background: #f0b158; }
.ecc-priv__contact-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.3rem; color: var(--ecc-noche); margin: 0 0 16px; text-align: center; }
.ecc-priv__contact-icons { display: flex; justify-content: center; gap: 32px; }
.ecc-priv__contact-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; }
.ecc-priv__contact-item .label { font-family: 'Space Mono', monospace; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ecc-hiedra); }
.ecc-priv__icon { display: inline-block; width: 48px; height: 48px; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 22px 22px; transition: background-color .2s ease; }
.ecc-priv__email { background-color: var(--ecc-ambar); background-image: url('../img/email-icon.svg'); }
.ecc-priv__email:hover { background-color: #d99530; }
.ecc-priv__whatsapp { background-color: #25D366; background-image: url('../img/whatsapp-icon.svg'); }
.ecc-priv__whatsapp:hover { background-color: #1ebe5b; }
.ecc-priv__pdf { background-color: var(--ecc-hiedra); background-image: url('../img/pdf-icon.svg'); }
.ecc-priv__pdf:hover { background-color: #3c5036; }
.ecc-priv__intro { font-family: 'Archivo', sans-serif; font-size: 15.5px; line-height: 1.7; color: #4a4238; max-width: 640px; margin: 0 auto 36px; }
.ecc-priv__img { width: 100%; border-radius: 2px; box-shadow: 0 24px 50px rgba(0,0,0,.25); display: block; }
@media (max-width: 820px) { .ecc-priv__inner { grid-template-columns: 1fr; } .ecc-priv ul { grid-template-columns: 1fr; } }

/* ================= PRENSA ================= */
.ecc-prensa { background: var(--ecc-noche); padding: 48px 32px; text-align: center; }
.ecc-prensa__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-piedra); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 14px; }
.ecc-prensa h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.6rem, 2.8vw, 2.1rem); color: var(--ecc-hueso); margin: 0 0 12px; }
.ecc-prensa p { font-family: 'Archivo', sans-serif; color: var(--ecc-piedra); max-width: 520px; margin: 0 auto; line-height: 1.6; }
.ecc-prensa--light { background: var(--ecc-hueso); }
.ecc-prensa--light .ecc-prensa__eyebrow { color: var(--ecc-ambar); }
.ecc-prensa--light h2 { color: var(--ecc-hueso); }
.ecc-prensa--light p { color: var(--ecc-piedra); }
.ecc-prensa__rating { font-family: 'Space Mono', monospace; font-size: 15.5px; letter-spacing: .02em; margin: 18px 0 0; color: var(--ecc-hueso); }
.ecc-prensa__rating .stars { color: var(--ecc-ambar); letter-spacing: .05em; }
.ecc-prensa--light .ecc-prensa__rating { color: var(--ecc-hueso); }
.ecc-prensa__quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; max-width: 980px; margin: 40px auto 0; text-align: left; }
.ecc-prensa__quote { padding: 24px; border: 1px solid rgba(185,169,140,.2); margin: 0; }
.ecc-prensa__quote p { font-family: 'Fraunces', serif; font-style: italic; font-size: 16px; line-height: 1.55; margin: 0 0 14px; color: var(--ecc-hueso); max-width: none; }
.ecc-prensa__quote cite { font-family: 'Space Mono', monospace; font-style: normal; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ecc-ambar); }
.ecc-prensa--light .ecc-prensa__quote { border-color: rgba(185,169,140,.2); }
.ecc-prensa--light .ecc-prensa__quote p { color: var(--ecc-hueso); }
.ecc-prensa--light .ecc-prensa__quote cite { color: var(--ecc-ambar); }

/* ================= BAR (teaser home) ================= */
.ecc-bar { background: var(--ecc-noche); padding: 64px 32px; }
.ecc-bar__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.ecc-bar__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-hiedra); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 14px; }
.ecc-bar h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--ecc-noche); margin: 0 0 18px; }
.ecc-bar p { font-family: 'Archivo', sans-serif; color: #4a4238; line-height: 1.7; margin: 0 0 22px; }
.ecc-bar__btn { display: inline-block; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 15.5px; color: var(--ecc-noche); background: var(--ecc-ambar); padding: 14px 28px; text-decoration: none; border-radius: 2px; }
.ecc-bar__btn:hover { background: #f0b158; }
.ecc-bar__img { width: 100%; border-radius: 2px; box-shadow: 0 24px 50px rgba(0,0,0,.18); display: block; }
@media (max-width: 820px) { .ecc-bar__inner { grid-template-columns: 1fr; } }

/* ================= CLUB DE CIGÜEÑAS (newsletter) ================= */
.ecc-news { background: var(--ecc-noche); padding: 56px 32px; text-align: center; }
.ecc-news__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-ambar); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 14px; }
.ecc-news h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.8rem, 3.2vw, 2.4rem); color: var(--ecc-hueso); margin: 0 0 14px; }
.ecc-news p { font-family: 'Archivo', sans-serif; color: var(--ecc-piedra); max-width: 480px; margin: 0 auto 26px; line-height: 1.6; }
/* El kicker es un <p>, asi que le aplican las dos reglas de aqui arriba y ganaba
   `.ecc-news p` (0,1,1) sobre `.ecc-news__eyebrow` (0,1,0): el ambar del diseno no llegaba
   a pintarse en ninguna de las cuatro paginas que llevan este bloque (portada, agenda,
   eventos privados y festivales). Subir la especificidad, no meter !important. (2026-08-04)
   Se toca SOLO el color: esa misma regla tambien le pisa el `margin: 0 0 14px` por
   `margin: 0 auto 26px`, pero eso es espaciado en cuatro paginas y no se ha pedido. */
.ecc-news p.ecc-news__eyebrow { color: var(--ecc-ambar); }
.ecc-news__btn { display: inline-block; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 15.5px; color: var(--ecc-hueso); border: 1px solid rgba(239,230,216,.5); padding: 14px 28px; text-decoration: none; border-radius: 2px; }
.ecc-news__btn:hover { border-color: var(--ecc-hueso); }

/* Formulario de alta a la newsletter (MailPoet, shortcode [mailpoet_form]) dentro
   de "Club Cigoñino" — la sección usa el fondo oscuro con textura de hiedra
   (ver .ecc-news / .ecc-news--light más abajo, comparten imagen), así que el
   formulario necesita texto/bordes CLAROS, no oscuros, en ambas variantes.
   El editor de formularios de MailPoet mete estilos inline por campo (fondo
   blanco, botón negro, fuentes propias), así que hace falta !important para
   heredar la identidad visual de la web sin tocar su lógica de envío ni su
   estructura (target por clase, no por #mailpoet_form_N, para que funcione
   igual si el id del formulario cambia). Las columnas del layout de MailPoet
   se fuerzan a apilarse en bloque porque su flexbox con columnas vacías de
   relleno (10%/10%) comprime la columna del botón y corta el texto. */
.ecc-news__form { max-width: 420px; margin: 0 auto; text-align: center; }
/* Fila de botones del bloque ecc-news (2026-08-04). El componente ya centra su texto,
   pero no tenia contenedor para botones: metidos en .ecc-evento__actions se quedaban
   pegados a la izquierda porque ese flex no lleva justify-content. Mismo gap de 16px
   que el resto de filas de botones del sitio. */
.ecc-news__ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.ecc-news__form .mailpoet_form_popup_overlay { display: none !important; }
.ecc-news__form .mailpoet_form {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	color: var(--ecc-hueso) !important;
}
.ecc-news__form .mailpoet-heading {
	font-family: 'Fraunces', serif !important;
	font-weight: 600 !important;
	font-style: normal !important;
	font-size: 1.3rem !important;
	color: var(--ecc-hueso) !important;
	margin: 0 0 14px !important;
}
.ecc-news__form .mailpoet_form_columns_container,
.ecc-news__form .mailpoet_form_columns { display: block !important; }
.ecc-news__form .mailpoet_form_column {
	flex: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}
.ecc-news__form .mailpoet_form_column:empty { display: none !important; }
.ecc-news__form .mailpoet_paragraph { margin: 0 0 14px !important; }
.ecc-news__form input.mailpoet_text,
.ecc-news__form input.mailpoet_textarea {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 1px solid rgba(239,230,216,.5) !important;
	border-radius: 2px !important;
	padding: 12px 16px !important;
	font-family: 'Archivo', sans-serif !important;
	font-size: 15.5px !important;
	color: var(--ecc-hueso) !important;
	height: auto !important;
}
.ecc-news__form input.mailpoet_text::placeholder { color: var(--ecc-piedra) !important; opacity: 1 !important; }
.ecc-news__form label,
.ecc-news__form .mailpoet_segment_label { font-family: 'Archivo', sans-serif; font-size: 14px; color: var(--ecc-piedra); text-align: left; display: block; }
.ecc-news__form input[type="checkbox"] { margin-right: 8px; }
/* El navegador pone un borde por defecto a <fieldset> (el checkbox de la política de
   privacidad de MailPoet va envuelto en uno) — sin escopar a .ecc-news__form para que
   se quite en cualquier página donde se use este formulario, no solo en el home. */
.mailpoet_form fieldset { border: none !important; padding: 0 !important; margin: 0 0 14px !important; }
.ecc-news__form input.mailpoet_submit {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	font-family: 'Archivo', sans-serif !important;
	font-weight: 600 !important;
	font-size: 15.5px !important;
	color: var(--ecc-hueso) !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 1px solid rgba(239,230,216,.5) !important;
	border-radius: 2px !important;
	padding: 14px 28px !important;
	cursor: pointer;
	transition: border-color .18s ease;
}
.ecc-news__form input.mailpoet_submit:hover { border-color: var(--ecc-hueso) !important; }
.ecc-news__form p.mailpoet_form_paragraph { font-family: 'Archivo', sans-serif !important; color: var(--ecc-piedra) !important; font-size: 14px !important; }
.ecc-news__form p.mailpoet_form_paragraph a { color: var(--ecc-piedra) !important; text-decoration: underline; }
/* Enlace a la politica de privacidad dentro de la casilla de consentimiento (2026-08-04).
   Sin esto sale en el rosa por defecto (#CC3366, 3,6:1 sobre el fondo oscuro): fuera de
   paleta e ilegible. Mismo tratamiento que el enlace del parrafo de arriba. */
.ecc-news__form label.mailpoet_checkbox_label a { color: var(--ecc-piedra) !important; text-decoration: underline; }
.ecc-news__form .mailpoet_validate_success { color: var(--ecc-hiedra) !important; font-family: 'Archivo', sans-serif; font-size: 15px; }
.ecc-news__form .mailpoet_validate_error,
.ecc-news__form .mailpoet_error { color: var(--ecc-ambar) !important; font-family: 'Archivo', sans-serif; font-size: 15px; }
.ecc-news--light { background: var(--ecc-hueso); }
.ecc-news--light .ecc-news__eyebrow { color: var(--ecc-ambar); }
.ecc-news--light h2 { color: var(--ecc-hueso); }
.ecc-news--light p { color: var(--ecc-piedra); }

/* ================= FOOTER ================= */
.ecc-footer { background: #120f0b; padding: 60px 32px 30px; }
.ecc-footer__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 3fr; gap: 40px; border-bottom: 1px solid rgba(185,169,140,.15); padding-bottom: 40px; margin-bottom: 22px; }
.ecc-footer__links { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; }
.ecc-footer__logo { height: 44px !important; width: auto !important; margin: 0 auto 16px; display: block; }
/* Columna logo+texto: unica columna de .ecc-footer__inner sin centrar (las otras 4
   de .ecc-footer__links ya lo estaban) — logo (bloque, con margen auto) y texto
   (text-align) centrados igual, en escritorio y en movil (misma regla, sin media
   query, para que quede igual de centrado que el resto del bloque al apilarse). */
.ecc-footer__inner > div:first-child { text-align: center; }
.ecc-footer p, .ecc-footer a { font-family: 'Archivo', sans-serif; font-size: 15px; color: var(--ecc-piedra); line-height: 1.85; text-decoration: none; margin: 0; }
.ecc-footer a:hover { color: var(--ecc-hueso); }
/* h3 Y h4: los titulos de columna del pie pasaron de <h4> a <h3> (arreglo de orden de
   encabezados, 2026-08-03) y esta regla se quedo apuntando solo a h4, asi que salian con
   el estilo por defecto del navegador — gris #333 sobre fondo casi negro, ilegibles.
   Se cubren los dos niveles para que no vuelva a pasar si cambia la etiqueta. */
.ecc-footer h3, .ecc-footer h4 { font-family: 'Space Mono', monospace; color: var(--ecc-hueso); font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 14px; font-weight: 700; }
.ecc-footer__links > div { text-align: center; }
.ecc-footer__social { display: flex; gap: 16px; justify-content: center; }
.ecc-footer__social a { color: var(--ecc-piedra); display: inline-flex; }
.ecc-footer__social a:hover { color: var(--ecc-hueso); }
.ecc-footer__bottom { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-family: 'Space Mono', monospace; font-size: 13px; color: rgba(185,169,140,.6); }
@media (max-width: 760px) { .ecc-footer__inner { grid-template-columns: 1fr; } .ecc-footer__links { grid-template-columns: 1fr; } }

/* ================= SUBPÁGINAS: hero compacto ================= */
.ecc-subhero { position: relative; min-height: 46vh; display: flex; align-items: flex-end; background-size: cover; background-position: center; overflow: hidden; }
.ecc-subhero--compact { min-height: 28vh; }
.ecc-subhero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,23,18,.25) 0%, rgba(27,23,18,.88) 100%); }
.ecc-subhero__inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 48px 32px; width: 100%; box-sizing: border-box; }
.ecc-subhero__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-ambar); letter-spacing: .14em; text-transform: uppercase; font-size: 13.5px; margin: 0 0 12px; }
.ecc-subhero h1 { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.2rem); color: var(--ecc-hueso); margin: 0; }

.ecc-patio-map { position: relative; line-height: 0; }
.ecc-patio-map__img { width: 100%; display: block; }
.ecc-patio-map__point {
	position: absolute;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border-radius: 50%;
	background: var(--ecc-ambar);
	border: 2px solid var(--ecc-noche);
	box-shadow: 0 0 0 5px rgba(232,163,61,.3);
	cursor: pointer;
}
.ecc-patio-map__label {
	position: absolute;
	bottom: 130%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--ecc-noche);
	color: var(--ecc-hueso);
	padding: 5px 12px;
	border-radius: 2px;
	font-family: 'Archivo', sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}
.ecc-patio-map__point:hover .ecc-patio-map__label,
.ecc-patio-map__point:focus .ecc-patio-map__label { opacity: 1; }
.ecc-patio-map__point.is-active {
	background: var(--ecc-noche);
	box-shadow: 0 0 0 5px rgba(27,23,18,.4);
}
/* El nido de cigüeñas del plano: zona del acceso oculto al Trivial desde el 2026-08-03
   (antes llevaba al panel de horario). min-width/height de 48px porque en móvil el 14%×15%
   se queda en ~45×35 px y cinco pulsaciones seguidas ahí se fallan con el dedo. */
.ecc-patio-map__secret { position: absolute; left: 30%; top: 1%; width: 14%; height: 15%; min-width: 48px; min-height: 48px; cursor: default; }
.ecc-patio-map__panel-inner {
	display: none;
	background: var(--ecc-noche);
	padding: 28px 32px;
}
.ecc-patio-map__panel-inner.is-open { display: block; }
.ecc-patio-map__panel-title {
	font-family: 'Fraunces', serif;
	font-weight: 600;
	color: var(--ecc-ambar);
	font-size: 1.3rem;
	margin: 0 0 8px;
}
.ecc-patio-map__panel-desc {
	font-family: 'Archivo', sans-serif;
	line-height: 1.6;
	margin: 0;
	color: var(--ecc-piedra);
}

/* ================= GALERÍA ================= */
.ecc-gallery { background: var(--ecc-hueso); padding: 56px 32px; }
.ecc-gallery__inner { max-width: 1180px; margin: 0 auto; }
.ecc-gallery__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-ambar); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 12px; }
.ecc-gallery h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.2rem); color: var(--ecc-hueso); margin: 0 0 30px; }
.ecc-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ecc-gallery__grid img { width: 100% !important; height: auto !important; aspect-ratio: 1; object-fit: cover; border-radius: 2px; display: block; transition: transform .3s ease; }
.ecc-gallery__grid img:hover { transform: scale(1.03); }
@media (max-width: 600px) { .ecc-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* ================= CONTACTO ================= */
.ecc-contact { background: var(--ecc-noche); padding: 64px 32px; }
.ecc-contact__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.ecc-contact__map { border: 1px solid rgba(185,169,140,.25); border-radius: 2px; padding: 36px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; }
.ecc-contact__map p { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.3rem; color: var(--ecc-noche); margin: 0; line-height: 1.4; }
@media (max-width: 820px) { .ecc-contact__inner { grid-template-columns: 1fr; } }
.ecc-contact__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-hiedra); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 14px; }
.ecc-contact h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.8rem, 3.2vw, 2.4rem); color: var(--ecc-noche); margin: 0 0 24px; }
.ecc-contact dl { margin: 0; }
.ecc-contact dt { font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ecc-hiedra); margin: 20px 0 4px; }
.ecc-contact dt:first-child { margin-top: 0; }
.ecc-contact dd { font-family: 'Archivo', sans-serif; font-size: 16px; color: var(--ecc-noche); margin: 0 0 4px; }
.ecc-contact dd a { color: var(--ecc-noche); text-decoration: none; border-bottom: 1px solid rgba(27,23,18,.25); }
.ecc-contact dd a:hover { color: var(--ecc-hiedra); border-color: var(--ecc-hiedra); }

/* ================= TARJETAS DE CATEGORÍA (bar / formatos eventos) ================= */
.ecc-cats { background: var(--ecc-noche); padding: 48px 32px; }
/* HERO DE /carta/ (2026-08-04) — pasa al mismo tratamiento que .ecc-subhero, que es el
   hero de foto del resto de la web. Antes era el unico hecho a mano y tenia tres cosas
   incoherentes entre si:
     - velo CREMA plano al .72, que dejaba la foto de la barra casi borrada;
     - el titulo es un <h1> pero todas las reglas apuntaban a h2, asi que no le aplicaba
       ninguna y caia al gris por defecto del tema (#333);
     - el subtitulo SI iba en hueso, con una sombra negra a lo bruto para poder leerse
       encima del velo claro.
   Es decir: el velo estaba tan alto para tapar la foto por culpa del titulo sin estilo.
   Con el degradado oscuro de .ecc-subhero (suave arriba, fuerte abajo donde va el texto)
   la foto se ve y el texto claro se lee sin trucos. */
.ecc-cats.ecc-cats--barfondo { position: relative; background-image: url('../img/bar-cats-fondo-3.jpg'); background-size: cover; background-position: left top; min-height: 30vh; display: flex; align-items: flex-end; }
.ecc-cats--barfondo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,23,18,.25) 0%, rgba(27,23,18,.88) 100%); }
.ecc-cats--barfondo .ecc-cats__inner { position: relative; z-index: 2; width: 100%; text-align: left; }
/* h1, no h2: es el nivel que trae el markup real de la pagina. */
.ecc-cats--barfondo h1 { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.2rem); color: var(--ecc-hueso); margin: 0; }
/* Sin text-shadow: sobre el degradado ya no hace falta. */
.ecc-cats--barfondo .ecc-cats__sub { font-family: 'Space Mono', monospace; font-weight: 700; color: var(--ecc-hueso); letter-spacing: .1em; text-transform: uppercase; font-size: 14.5px; margin: 12px 0 0; }
.ecc-cats__inner { max-width: 1180px; margin: 0 auto; }
.ecc-cats__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-hiedra); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 12px; }
.ecc-cats h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.2rem); color: var(--ecc-noche); margin: 0; }
.ecc-cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.ecc-cat-card { border: 1px solid rgba(185,169,140,.25); padding: 32px 24px; text-align: center; }
.ecc-cat-card .ico { font-family: 'Fraunces', serif; font-style: italic; font-size: 2rem; color: var(--ecc-ambar); margin-bottom: 14px; }
.ecc-cat-card h3 { font-family: 'Fraunces', serif; font-weight: 600; color: var(--ecc-noche); font-size: 1.2rem; margin: 0 0 10px; }
.ecc-cat-card p { font-family: 'Archivo', sans-serif; color: #4a4238; font-size: 15px; line-height: 1.6; margin: 0; }
@media (max-width: 760px) { .ecc-cats__grid { grid-template-columns: 1fr; } }
.ecc-cats--light { background: var(--ecc-hueso); }
.ecc-cats--light .ecc-cats__eyebrow { color: var(--ecc-ambar); }
.ecc-cats--light h2 { color: var(--ecc-hueso); }
.ecc-cats--light .ecc-cat-card { border-color: rgba(185,169,140,.2); }
.ecc-cats--light .ecc-cat-card h3 { color: var(--ecc-hueso); }
.ecc-cats--light .ecc-cat-card p { color: var(--ecc-piedra); }

/* ================= CARTA DE CAFÉS (Bar) ================= */
.ecc-menu { background: var(--ecc-hueso); padding: 48px 32px 90px; }
.ecc-menu__inner { max-width: 700px; margin: 0 auto; }
.ecc-menu__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-ambar); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 12px; }
.ecc-menu h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.2rem); color: var(--ecc-hueso); margin: 0 0 8px; }
.ecc-menu__intro { font-family: 'Archivo', sans-serif; color: var(--ecc-piedra); margin: 0 0 30px; }
.ecc-menu__list { border-top: 1px solid rgba(185,169,140,.15); }
.ecc-menu__item { padding: 20px 0; border-bottom: 1px solid rgba(185,169,140,.15); }
.ecc-menu__item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ecc-menu__item-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; color: var(--ecc-hueso); }
.ecc-menu__item-price { font-family: 'Space Mono', monospace; font-size: 15.5px; color: var(--ecc-ambar); white-space: nowrap; }
.ecc-menu__item-desc { font-family: 'Archivo', sans-serif; font-size: 15px; color: var(--ecc-piedra); margin: 6px 0 0; line-height: 1.5; }
.ecc-menu--dark { background: var(--ecc-noche); }
.ecc-menu--dark .ecc-menu__eyebrow { color: var(--ecc-hiedra); }
.ecc-menu--dark h2 { color: var(--ecc-noche); }
.ecc-menu--dark .ecc-menu__intro { color: #4a4238; }
.ecc-menu--dark .ecc-menu__col li .name { color: var(--ecc-noche); }
.ecc-menu--dark .ecc-menu__col li .desc { color: #4a4238; }
.ecc-menu--dark .ecc-menu__col h3 { color: var(--ecc-noche); border-bottom-color: rgba(27,23,18,.25); }
.ecc-menu--dark .ecc-menu__col h3 .price { color: var(--ecc-noche); opacity: .7; font-weight: 400; }
.ecc-menu__inner--wide { max-width: 1000px; }
.ecc-menu__beers { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-end; gap: 24px; }
.ecc-beer-card { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.ecc-beer-card img { height: 300px !important; width: auto !important; object-fit: contain; }
.ecc-beer-group { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.ecc-beer-group__bottles { display: flex; gap: 6px; }
.ecc-beer-group__bottles img { height: 300px !important; width: auto !important; object-fit: contain; }
.ecc-beer-card .name, .ecc-beer-group .name { font-family: 'Archivo', sans-serif; font-size: 14.5px; font-weight: 600; text-align: center; color: var(--ecc-hueso); white-space: nowrap; }
.ecc-beer-card .price, .ecc-beer-group .price { font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 700; color: var(--ecc-ambar); text-align: center; }
@media (max-width: 900px) {
	.ecc-menu__beers { flex-wrap: wrap; }
	.ecc-beer-card .name, .ecc-beer-group .name { white-space: normal; }
}
@media (max-width: 780px) {
	.ecc-beer-card img, .ecc-beer-group__bottles img { height: 200px !important; }
}
.ecc-menu__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 20px; }
.ecc-menu__col h3 { font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ecc-ambar); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(185,169,140,.25); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ecc-menu__col h3 .price { letter-spacing: normal; text-transform: none; font-weight: 700; }
.ecc-menu__col ul { list-style: none; margin: 0; padding: 0; }
.ecc-menu__col li { font-family: 'Archivo', sans-serif; padding: 10px 0; border-bottom: 1px solid rgba(185,169,140,.1); }
.ecc-menu__col li:last-child { border-bottom: none; }
.ecc-menu__col li .name { display: block; font-size: 15.5px; font-weight: 600; color: var(--ecc-hueso); margin-bottom: 3px; }
.ecc-menu__col li .desc { display: block; font-size: 13.5px; color: var(--ecc-piedra); line-height: 1.45; }
@media (max-width: 760px) { .ecc-menu__cols { grid-template-columns: 1fr; gap: 28px; } }

/* ================= FESTIVALES ESPECIALES — página detalle ================= */
.ecc-festdetail { padding: 64px 32px; }
.ecc-festdetail--dark { background: var(--ecc-noche); }
.ecc-festdetail--light { background: var(--ecc-hueso); }
.ecc-festdetail__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* Sin aspect-ratio ni object-fit a proposito (2026-08-04): los carteles reales son A4
   (~0,707) y forzarlos a 3/4 con cover les recortaba 28px, 14 por arriba y 14 por abajo.
   Cada cartel conserva ahora su proporcion; la reserva de espacio contra el CLS la dan los
   atributos width/height del <img> en el widget, que hay que poner al cambiar de cartel. */
.ecc-festdetail__poster { width: 100%; max-width: 320px; height: auto; border-radius: 2px; box-shadow: 0 30px 60px rgba(0,0,0,.4); display: block; margin: 0 auto; }
.ecc-festdetail__tag { display: inline-block; font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; margin-bottom: 16px; }
.ecc-festdetail--blues .ecc-festdetail__tag { background: #C1663B; color: #1B1712; }
.ecc-festdetail--fusion .ecc-festdetail__tag { background: #4C5F8A; color: #EFE6D8; }
.ecc-festdetail h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 0 0 20px; }
.ecc-festdetail--dark h2 { color: var(--ecc-noche); }
.ecc-festdetail--light h2 { color: var(--ecc-hueso); }
.ecc-festdetail p.desc { font-family: 'Archivo', sans-serif; line-height: 1.7; margin: 0 0 16px; }
.ecc-festdetail--dark p.desc { color: #4a4238; }
.ecc-festdetail--light p.desc { color: var(--ecc-piedra); }
.ecc-festdetail dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 26px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(185,169,140,.2); }
.ecc-festdetail dt { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 4px; }
.ecc-festdetail--dark dt { color: #8a7a5f; }
.ecc-festdetail--light dt { color: var(--ecc-piedra); }
.ecc-festdetail dd { font-family: 'Archivo', sans-serif; font-size: 15.5px; margin: 0; }
.ecc-festdetail--dark dd { color: var(--ecc-noche); }
.ecc-festdetail--light dd { color: var(--ecc-hueso); }
/* Enlace a la web oficial del festival (mismo patron que .ecc-contact dd a).
   color:inherit + borde currentColor para que funcione igual en las dos
   secciones, que tienen colores de texto opuestos. */
.ecc-festdetail dd a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.ecc-festdetail dd a:hover, .ecc-festdetail dd a:focus-visible { opacity: .75; }
@media (max-width: 820px) { .ecc-festdetail__inner { grid-template-columns: 1fr; } }

/* ================= AGENDA — archivo dinámico del CPT evento ================= */
.ecc-agenda { background: var(--ecc-noche); padding: 64px 32px; }
.ecc-agenda__inner { max-width: 1180px; margin: 0 auto; }
.ecc-agenda__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-hiedra); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 12px; }
.ecc-agenda h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: var(--ecc-noche); margin: 0 0 14px; }
.ecc-agenda > .ecc-agenda__inner > p { font-family: 'Archivo', sans-serif; color: #4a4238; max-width: 560px; line-height: 1.6; margin: 0; }
.ecc-agenda__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 34px; margin-top: 40px; }
.ecc-agenda__grid .ecc-muro__card img { aspect-ratio: 210/297; height: auto; object-fit: contain; }
@media (max-width: 780px) {
	.ecc-subhero--compact { min-height: 22.4vh; }
	.ecc-agenda { padding-top: 24px; }
	.ecc-agenda__grid { margin-top: 16px; }
}
.ecc-muro__card--flat, .ecc-muro__card--flat:hover { transform: none !important; }

/* ================= FICHA DE EVENTO (single evento) ================= */
.ecc-evento { background: var(--ecc-noche); padding: 48px 32px 100px; }
.ecc-evento__inner { max-width: 1100px; margin: 0 auto; }
/* Migas de pan de la ficha de concierto (2026-08-05). Van encima del botón "Volver a la
   agenda", que se mantiene: uno es la ruta, el otro el retroceso. Colores de sección crema
   (piedra #5F5340 sobre el velo de textura-piedra-suave), no los de sección oscura. */
.ecc-migas { margin-bottom: 14px; }
.ecc-migas ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: .04em; color: #5F5340; }
.ecc-migas li + li::before { content: '/'; margin-right: 6px; color: #8a7a5f; }
.ecc-migas a { color: #5F5340; text-decoration: none; }
.ecc-migas a:hover, .ecc-migas a:focus-visible { color: var(--ecc-hiedra); text-decoration: underline; }
.ecc-migas [aria-current="page"] { color: var(--ecc-noche); }
.ecc-evento__back { display: inline-block; font-family: 'Space Mono', monospace; font-size: 14px; letter-spacing: .06em; color: #4a4238; text-decoration: none; margin-bottom: 40px; }
.ecc-evento__back:hover { color: var(--ecc-hiedra); }
.ecc-evento__layout { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: start; }
.ecc-evento__poster img { width: 100%; height: auto; border-radius: 2px; box-shadow: 0 30px 60px rgba(0,0,0,.5); display: block; }
.ecc-evento__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-hiedra); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 14px; }
.ecc-evento__body h1 { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: clamp(2rem, 4vw, 3rem); color: var(--ecc-noche); margin: 0 0 28px; }
.ecc-evento__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px 24px; margin: 0 0 30px; padding: 24px 0; border-top: 1px solid rgba(27,23,18,.15); border-bottom: 1px solid rgba(27,23,18,.15); }
.ecc-evento__meta-item { display: block; }
.ecc-evento__meta dt { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8a7a5f; margin: 0 0 4px; }
.ecc-evento__meta dd { font-family: 'Archivo', sans-serif; font-size: 16px; color: var(--ecc-noche); margin: 0; }
.ecc-evento__desc { font-family: 'Archivo', sans-serif; color: #4a4238; line-height: 1.7; margin: 0 0 34px; }
.ecc-evento__desc p { margin: 0 0 16px; }
.ecc-evento__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.ecc-evento__btn { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 15.5px; padding: 14px 28px; border-radius: 2px; text-decoration: none; display: inline-block; background: var(--ecc-ambar); color: var(--ecc-noche); }
.ecc-evento__btn:hover { background: #f0b158; }
.ecc-evento__btn--ghost { background: transparent; border: 1px solid rgba(27,23,18,.3); color: var(--ecc-noche); }
.ecc-evento__btn--ghost:hover { border-color: var(--ecc-hiedra); color: var(--ecc-hiedra); background: transparent; }
@media (max-width: 760px) { .ecc-evento__layout { grid-template-columns: 1fr; } .ecc-evento__poster img { max-width: 320px; margin: 0 auto; } }
.ecc-evento__video { max-width: 760px; margin: 60px auto 0; }
.ecc-video-embed { position: relative; padding-top: 56.25%; height: 0; overflow: hidden; border-radius: 2px; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.ecc-video-embed iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }

/* Fachada de video (2026-08-04, rendimiento): ocupa el MISMO hueco que el iframe
   (la caja padre ya reserva 56,25% con padding-top), asi que sustituir el boton por el
   iframe al pulsar no mueve nada. Sin miniatura de YouTube a proposito: pedirla volveria
   a contactar con el tercero, que es justo lo que se quiere evitar. */
.ecc-video-fachada .ecc-video-fachada__btn {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 20px;
	border: 0;
	cursor: pointer;
	background: linear-gradient(160deg, #241f19 0%, #14110d 100%);
	color: var(--ecc-hueso);
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
	text-align: center;
}
.ecc-video-fachada__play {
	width: 62px;
	height: 62px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--ecc-ambar);
	position: relative;
	transition: transform .18s ease;
}
/* triangulo de "play" con bordes: sin archivo y sin peticion */
.ecc-video-fachada__play::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent var(--ecc-noche);
}
.ecc-video-fachada__btn:hover .ecc-video-fachada__play,
.ecc-video-fachada__btn:focus-visible .ecc-video-fachada__play { transform: scale(1.08); }
.ecc-video-fachada__btn:focus-visible { outline: 2px solid var(--ecc-ambar); outline-offset: -4px; }
.ecc-video-fachada__txt { max-width: 34ch; }
.ecc-video-fachada__aviso {
	font-family: 'Archivo', sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ecc-piedra);
	margin: 12px 0 0;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
@media (prefers-reduced-motion: reduce) {
	.ecc-video-fachada__play { transition: none; }
	.ecc-video-fachada__btn:hover .ecc-video-fachada__play,
	.ecc-video-fachada__btn:focus-visible .ecc-video-fachada__play { transform: none; }
}

/* ================= MÚSICA EN DIRECTO (Eventos Privados) ================= */
.ecc-sound { background: var(--ecc-hueso); padding: 64px 32px; }
.ecc-sound__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.ecc-sound__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-ambar); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 12px; }
.ecc-sound h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.2rem); color: var(--ecc-hueso); margin: 0 0 8px; }
.ecc-sound__intro { font-family: 'Archivo', sans-serif; color: var(--ecc-piedra); margin: 0 0 36px; }
.ecc-sound__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; text-align: center; }
.ecc-sound__card { border: 1px solid rgba(185,169,140,.2); padding: 30px 24px; }
.ecc-sound__card h3 { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 16px; color: var(--ecc-hueso); margin: 0 0 8px; }
.ecc-sound__card p { font-family: 'Archivo', sans-serif; font-size: 15px; color: var(--ecc-piedra); margin: 0; }
.ecc-sound__notas { margin: 30px 0 0; padding: 0; list-style: none; }
.ecc-sound__notas li { font-family: 'Archivo', sans-serif; font-size: 14.5px; color: rgba(185,169,140,.8); padding: 4px 0; }
@media (max-width: 600px) { .ecc-sound__grid { grid-template-columns: 1fr; } }

/* ================= BLOQUE DE TEXTO GENÉRICO ================= */
.ecc-storytelling { background: var(--ecc-noche); padding: 64px 32px; }
.ecc-storytelling__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ecc-storytelling__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-hiedra); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 14px; }
.ecc-storytelling h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--ecc-noche); margin: 0 0 20px; }
.ecc-storytelling p { font-family: 'Archivo', sans-serif; color: #4a4238; line-height: 1.7; margin: 0 0 16px; }
.ecc-storytelling img { width: 100% !important; height: 480px !important; object-fit: cover; border-radius: 2px; box-shadow: 0 30px 60px rgba(0,0,0,.5); display: block; }
@media (max-width: 820px) { .ecc-storytelling img { height: 320px !important; } }
.ecc-storytelling dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 26px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(185,169,140,.2); }
.ecc-storytelling dt { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ecc-hiedra); margin: 0 0 4px; }
.ecc-storytelling dd { font-family: 'Archivo', sans-serif; font-size: 15.5px; color: var(--ecc-noche); margin: 0; }
@media (max-width: 820px) { .ecc-storytelling__inner { grid-template-columns: 1fr; } .ecc-storytelling dl { grid-template-columns: 1fr 1fr; } }

/* ================= TEXTURA FÍSICA REAL (fotos reales de la hiedra y la piedra del patio, de fondo en toda la web: piedra en secciones oscuras, hiedra en secciones claras) ================= */
.ecc-llegar,
.elementor-element-72f2a425,
.ecc-festdetail--dark,
.ecc-bar,
.ecc-priv,
.ecc-prensa,
.ecc-contact,
.ecc-cats,
.ecc-evento,
.ecc-storytelling,
.ecc-djstyle,
.ecc-djsocial,
.ecc-custom,
.ecc-steps,
.ecc-faq {
	background-image: linear-gradient(rgba(239,230,216,.94), rgba(239,230,216,.94)), url('../img/textura-piedra-suave.jpg');
	background-size: cover;
	background-position: center;
}
/* La piedra de las secciones de arriba va SUAVIZADA (2026-08-03). Lo que estorbaba a la
   lectura era el GRANO —la foto original tenia detalle justo a la escala del trazo de la
   letra— y no el contraste medio, asi que la receta separa las dos escalas:
     desenfoque 4 px  -> se lleva el grano (ruido medido 25.1 -> 1.6, un 94% menos)
     contraste x1.8   -> DEVUELVE el manchon de los sillares (lo que hace que parezca piedra)
     velo .94         -> compensa ese contraste extra para que el texto no pierda
   Primero se probo con contraste .6 y velo .92: el texto quedaba perfecto pero el usuario
   dijo "ahora no se nota que sea piedra" (manchon 5.0). Con esta receta el manchon vuelve a
   10.2 —el original tenia 16.8— sin recuperar nada de grano.
   El original se conserva en assets/img/textura-piedra-blues.jpg. */
.ecc-muro,
.ecc-agenda,
.ecc-horario-bar {
	/* 2026-08-08: el velo era #EFE6D8, el MISMO color que --ecc-hueso de las
	   tarjetas: los carteles se fundian con la pared. Se oscurece a #E8DDCB
	   manteniendo el .85 (el grano sigue tapado). Contraste sobre este fondo:
	   ambar 4.90:1, piedra 5.59:1, noche 13.3:1 — todos siguen pasando AA. */
	background-image: linear-gradient(rgba(232,221,203,.85), rgba(232,221,203,.85)), url('../img/textura-muro-pared.jpg');
	background-size: cover;
	background-position: center;
}
.ecc-clima,
.ecc-pulse,
.ecc-dj,
.ecc-patio,
.ecc-prensa--light,
.ecc-news,
.ecc-news--light,
.ecc-gallery,
.ecc-cats--light,
.ecc-festdetail--light,
.ecc-sound,
.ecc-menu,
.ecc-djbio,
.ecc-djsets,
.ecc-help,
.ecc-form-section {
	background-image: linear-gradient(rgba(27,23,18,.88), rgba(27,23,18,.88)), url('../img/textura-hiedra.jpg');
	background-size: cover;
	background-position: center;
}
.ecc-menu--dark {
	background-image: linear-gradient(rgba(239,230,216,.94), rgba(239,230,216,.94)), url('../img/textura-piedra-suave.jpg');
	background-size: cover;
	background-position: center;
}
/* La barra de pulso comparte la textura de hiedra del bloque de clima (petición
   2026-08-02), pero su modo "en directo" (fondo ámbar) debe ir limpio — este
   reset va DESPUÉS del grupo de arriba para ganarle por orden de aparición. */
.ecc-pulse--live { background-image: none; }

/* ================= DJ RESIDENTE — página dedicada (Black Caramel) ================= */
.ecc-djhero { position: relative; height: 92vh; min-height: 560px; overflow: hidden; display: flex; align-items: flex-end; }
.ecc-djhero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.ecc-djhero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,23,18,.15) 0%, rgba(27,23,18,.6) 55%, rgba(27,23,18,.96) 100%); }
.ecc-djhero__inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 32px 64px; width: 100%; box-sizing: border-box; color: var(--ecc-hueso); }
.ecc-djhero__eyebrow { font-family: 'Space Mono', monospace; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; color: var(--ecc-ambar); margin: 0 0 14px; }
.ecc-djhero h1 { font-family: 'Fraunces', serif; font-weight: 600; font-style: italic; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.05; margin: 0 0 18px; }
.ecc-djhero h1 em { font-style: normal; color: var(--ecc-ambar); }
.ecc-djhero p.lead { font-family: 'Archivo', sans-serif; font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 520px; opacity: .92; line-height: 1.55; margin: 0; }
@media (max-width: 600px) { .ecc-djhero { height: 78vh; } }

.ecc-djbio { padding: 64px 32px; }
.ecc-djbio__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.ecc-djbio__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-ambar); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 14px; }
.ecc-djbio h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--ecc-hueso); margin: 0 0 22px; }
.ecc-djbio p { font-family: 'Archivo', sans-serif; color: var(--ecc-piedra); line-height: 1.75; margin: 0 0 18px; }
.ecc-djbio p:last-child { margin-bottom: 0; }

.ecc-djstyle { padding: 64px 32px; }
.ecc-djstyle__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.ecc-djstyle__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-hiedra); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 14px; }
.ecc-djstyle h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--ecc-noche); margin: 0 0 20px; }
.ecc-djstyle__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.ecc-djstyle__tags span { font-family: 'Space Mono', monospace; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; color: #4a4238; border: 1px solid rgba(27,23,18,.25); padding: 7px 14px; border-radius: 20px; }
.ecc-djstyle__schedule { border-left: 1px solid rgba(27,23,18,.15); padding-left: 40px; }
.ecc-djstyle__schedule h3 { font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ecc-hiedra); margin: 0 0 10px; }
.ecc-djstyle__schedule p { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.4rem; color: var(--ecc-noche); margin: 0 0 24px; }
.ecc-djstyle__btn { display: inline-block; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 15.5px; color: var(--ecc-noche); background: var(--ecc-ambar); padding: 14px 28px; text-decoration: none; border-radius: 2px; }
.ecc-djstyle__btn:hover { background: #f0b158; }
@media (max-width: 820px) { .ecc-djstyle__inner { grid-template-columns: 1fr; } .ecc-djstyle__schedule { border-left: none; padding-left: 0; border-top: 1px solid rgba(27,23,18,.15); padding-top: 30px; } }

.ecc-djsets { padding: 64px 32px; }
.ecc-djsets__inner { max-width: 1180px; margin: 0 auto; }
.ecc-djsets__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-ambar); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 12px; }
.ecc-djsets h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--ecc-hueso); margin: 0 0 36px; }
.ecc-djsets__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ecc-djset-card { display: block; text-decoration: none; border: 1px solid rgba(185,169,140,.2); padding: 26px 20px; transition: border-color .2s ease, transform .2s ease; }
.ecc-djset-card:hover { border-color: var(--ecc-ambar); transform: translateY(-3px); }
.ecc-djset-card .tag { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ecc-ambar); display: block; margin-bottom: 10px; }
.ecc-djset-card h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; color: var(--ecc-hueso); margin: 0 0 8px; }
.ecc-djset-card span.link { font-family: 'Archivo', sans-serif; font-size: 14px; color: var(--ecc-piedra); }
@media (max-width: 900px) { .ecc-djsets__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ecc-djsets__grid { grid-template-columns: 1fr; } }

.ecc-djsocial { padding: 60px 32px; text-align: center; }
.ecc-djsocial__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-hiedra); letter-spacing: .14em; text-transform: uppercase; font-size: 13.5px; margin: 0 0 18px; }
.ecc-djsocial__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 28px; }
.ecc-djsocial__links a { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 15.5px; color: var(--ecc-noche); text-decoration: none; border-bottom: 1px solid rgba(27,23,18,.25); padding-bottom: 3px; }
.ecc-djsocial__links a:hover { color: var(--ecc-hiedra); border-color: var(--ecc-hiedra); }

/* ================= OPINIONES: tarjetas con foto, tema, estrellas y fecha ================= */
.ecc-prensa__updated { font-family: 'Space Mono', monospace; font-size: 12.5px; letter-spacing: .04em; color: var(--ecc-piedra); opacity: .8; margin: 8px 0 0; }
.ecc-prensa__quote-photo { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 2px; display: block; margin: 0 0 4px; }
.ecc-prensa__quote-tag { display: block; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ecc-ambar); margin: 14px 0 10px; }
.ecc-prensa__quote-stars { margin: 0 2px 0 6px; letter-spacing: .05em; }
.ecc-prensa__quote-date { opacity: .75; }
.ecc-prensa__btn { display: inline-block; margin-top: 40px; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 15.5px; color: var(--ecc-noche); background: var(--ecc-ambar); padding: 14px 28px; text-decoration: none; border-radius: 2px; }
.ecc-prensa__btn:hover { background: #f0b158; }
.ecc-prensa__btn:focus-visible { outline: 2px solid var(--ecc-hueso); outline-offset: 3px; }

/* ================= EVENTOS PRIVADOS: REDISEÑO 2026-08 (secciones nuevas) ================= */

/* Franja de datos principales (tira breve tras el hero, como .ecc-horario-bar) */
.ecc-facts { background: var(--ecc-hueso); padding: 26px 32px; }
.ecc-facts__inner { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; }
.ecc-facts__item { font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 600; color: var(--ecc-noche); padding: 4px 24px; border-left: 1px solid rgba(27,23,18,.15); }
.ecc-facts__item:first-child { border-left: none; }
@media (max-width: 700px) {
	.ecc-facts__item { border-left: none; padding: 4px 0; flex: 1 1 100%; text-align: center; }
}

/* Tipos de celebración: tarjeta con foto real (extiende .ecc-cat-card/.ecc-cats__grid ya existentes) */
.ecc-cat-card__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 2px; display: block; margin: 0 0 16px; }
.ecc-cats__grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .ecc-cats__grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ecc-cats__grid--4 { grid-template-columns: 1fr; } }

/* Tu evento, a tu manera. NOTA: background-color (no el atajo "background") a propósito —
   este selector está en el grupo de textura "piedra" (ver bloque de textura más abajo), y
   el atajo "background" resetea background-image a "none", anulando esa textura. */
.ecc-custom { background-color: var(--ecc-noche); padding: 64px 32px; }
.ecc-custom__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.ecc-custom__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-hiedra); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 14px; }
.ecc-custom h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--ecc-noche); margin: 0 0 18px; }
.ecc-custom__intro { font-family: 'Archivo', sans-serif; color: #4a4238; line-height: 1.7; margin: 0 0 34px; }
.ecc-custom__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; text-align: left; }
.ecc-custom__list li { font-family: 'Archivo', sans-serif; font-size: 15.5px; color: #4a4238; padding-left: 18px; position: relative; }
.ecc-custom__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--ecc-hiedra); }
@media (max-width: 600px) { .ecc-custom__list { grid-template-columns: 1fr; } }

/* Música en directo: foto real opcional encima del texto */
.ecc-sound__photo { width: 100%; max-width: 640px; height: 280px; object-fit: cover; border-radius: 2px; box-shadow: 0 24px 50px rgba(0,0,0,.18); display: block; margin: 0 auto 30px; }

/* Cómo funciona la reserva: pasos numerados (background-color, ver nota en .ecc-custom) */
.ecc-steps { background-color: var(--ecc-noche); padding: 64px 32px; }
.ecc-steps__inner { max-width: 1180px; margin: 0 auto; }
.ecc-steps__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-hiedra); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 12px; }
.ecc-steps h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: var(--ecc-noche); margin: 0 0 40px; }
.ecc-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: ecc-paso; }
.ecc-step { border: 1px solid rgba(185,169,140,.2); padding: 28px 22px; }
/* 2026-08-09: el numero de cada paso lo pintaba un <p class="ecc-step__num"> escrito a mano DENTRO
   de un <ol>, asi que el documento llevaba el numero dos veces: el que genera el <ol> y el del <p>.
   En pantalla solo se veia uno (la lista va con list-style: none), pero un lector de pantalla podia
   anunciar «elemento 1 de 4» y leer «1» justo despues. Ahora lo pinta un contador CSS: un solo
   numero, el <ol> conserva su semantica de orden y se ve exactamente igual que antes (los valores
   de esta regla son los mismos que tenia .ecc-step__num). Los <p> se quitaron del widget HTML de
   /eventos-privados/ (pagina 12, widget a2180002); la clase no se usa en ninguna otra pagina. */
.ecc-step::before { counter-increment: ecc-paso; content: counter(ecc-paso); display: block; font-family: 'Fraunces', serif; font-weight: 600; font-size: 2rem; color: var(--ecc-ambar); margin: 0 0 12px; }
.ecc-step h3 { font-family: 'Archivo', sans-serif; font-weight: 600; color: var(--ecc-noche); font-size: 16px; margin: 0 0 8px; }
.ecc-step p { font-family: 'Archivo', sans-serif; color: #4a4238; font-size: 15px; line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .ecc-steps__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ecc-steps__list { grid-template-columns: 1fr; } }

/* Formulario de disponibilidad + contacto alternativo debajo (background-color, ver nota
   en .ecc-custom — este selector vive en el grupo de textura "piedra", texto oscuro) */
.ecc-form-section { background-color: var(--ecc-noche); padding: 64px 32px; }
.ecc-form-section__inner { max-width: 720px; margin: 0 auto; }
.ecc-form-section__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-hiedra); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 12px; text-align: center; }
.ecc-form-section h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--ecc-noche); margin: 0 0 14px; text-align: center; }
.ecc-form-section__intro { font-family: 'Archivo', sans-serif; color: #4a4238; text-align: center; max-width: 520px; margin: 0 auto 40px; line-height: 1.6; }

.ecc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.ecc-form__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.ecc-form__field label { font-family: 'Archivo', sans-serif; font-size: 14.5px; font-weight: 600; color: var(--ecc-noche); }
.ecc-form__field .req { color: var(--ecc-ambar); }
.ecc-form__field input[type=text],
.ecc-form__field input[type=email],
.ecc-form__field input[type=tel],
.ecc-form__field input[type=date],
.ecc-form__field input[type=number],
.ecc-form__field select,
.ecc-form__field textarea {
	font-family: 'Archivo', sans-serif; font-size: 16px; color: var(--ecc-noche);
	background: rgba(239,230,216,.94); border: 1px solid rgba(27,23,18,.2); border-radius: 2px;
	padding: 12px 14px; min-height: 44px; box-sizing: border-box; width: 100%;
}
.ecc-form__field textarea { min-height: 110px; resize: vertical; }
.ecc-form__field input:focus-visible,
.ecc-form__field select:focus-visible,
.ecc-form__field textarea:focus-visible { outline: 2px solid var(--ecc-hiedra); outline-offset: 1px; }
.ecc-form__radios { display: flex; gap: 20px; flex-wrap: wrap; }
/* El alto ya eran 44px; el ancho no: la etiqueta «Sí» medía 33 (medido a 390px). Se ensancha el
   área con padding y se devuelve con margen negativo, así que la fila se ve exactamente igual.
   El radio en sí mide 13x13, pero pulsar la etiqueta lo activa: el objetivo real es la etiqueta. */
.ecc-form__radios label { display: flex; align-items: center; gap: 7px; font-weight: 400; min-height: 44px; min-width: 44px; padding-inline: 6px; margin-inline: -6px; }
.ecc-form__error { color: #a13d2e; font-size: 14px; font-family: 'Archivo', sans-serif; margin-top: 2px; }
.ecc-form__field.has-error input,
.ecc-form__field.has-error select,
.ecc-form__field.has-error textarea { border-color: #a13d2e; border-width: 2px; }
/* La casilla de privacidad no vive en un .ecc-form__field, asi que no le llegaba ninguna
   marca visual cuando quedaba sin aceptar: solo el mensaje de texto. Un borde no se ve en
   una casilla nativa, por eso va con outline. (2026-08-05) */
.ecc-form__privacy.has-error input { outline: 2px solid #a13d2e; outline-offset: 2px; }
/* Y el mismo outline para el resto de campos. El borde rojo de la regla de arriba se
   pierde en la seccion oscura de Eventos privados (medido en navegador real el
   2026-08-05: el campo lleva .has-error y el borde sigue saliendo hueso), asi que la
   marca visible no puede depender solo de el. El outline si llega, no mueve el
   layout, y al enfocar lo tine de ambar la regla de :focus-visible. */
.ecc-form__field.has-error input,
.ecc-form__field.has-error select,
.ecc-form__field.has-error textarea { outline: 2px solid #a13d2e; outline-offset: 1px; }
.ecc-form__privacy { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 26px; font-family: 'Archivo', sans-serif; font-size: 14.5px; color: #4a4238; }
.ecc-form__privacy input { margin-top: 4px; flex-shrink: 0; width: 18px; height: 18px; }
/* Objetivo táctil de la etiqueta (2026-08-05, bloque 5). La etiqueta es el objetivo real de la
   casilla —pulsarla la marca— y medía 15px de alto en una fila de 22. Se estira a 44 y se absorbe
   con margen negativo: la fila sigue midiendo 22 y el texto no se mueve de sitio. */
.ecc-form__privacy label {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-block: -11px;
}
/* !important: mismo gotcha de enlaces/botones de Hello Elementor que en la cabecera. */
.ecc-form__privacy a { color: var(--ecc-noche) !important; text-decoration: underline; }
/* !important: el reset.css de Hello Elementor da a CUALQUIER <button> borde/texto rosa por
   defecto (mismo gotcha que .ecc-provisional-header__toggle en la cabecera, ver más arriba) —
   sin !important este botón de envío sale rosa en vez de ámbar. */
.ecc-form__submit,
.ecc-form__submit:hover,
.ecc-form__submit:focus {
	display: block !important; width: 100% !important; box-sizing: border-box !important;
	text-align: center !important; border: none !important; cursor: pointer;
	font-family: 'Archivo', sans-serif !important; font-size: 16px !important; font-weight: 600 !important;
	padding: 15px 30px !important; min-height: 44px !important;
	background: var(--ecc-ambar) !important; color: var(--ecc-noche) !important;
}
.ecc-form__submit:hover { background: #f0b158 !important; }
.ecc-form__submit:focus-visible { outline: 2px solid var(--ecc-noche); outline-offset: 2px; }
.ecc-form__submit:disabled { opacity: .6; cursor: default; }
.ecc-form__note { font-family: 'Archivo', sans-serif; font-size: 14px; color: #4a4238; text-align: center; margin: 16px 0 0; }
.ecc-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ecc-form__status { display: none; text-align: center; font-family: 'Archivo', sans-serif; font-size: 15.5px; padding: 16px; border-radius: 2px; margin-bottom: 24px; }
.ecc-form__status.is-visible { display: block; }
.ecc-form__status--ok { background: rgba(76,99,68,.18); color: var(--ecc-noche); border: 1px solid rgba(76,99,68,.4); }
.ecc-form__status--fail { background: rgba(161,61,46,.12); color: var(--ecc-noche); border: 1px solid rgba(161,61,46,.4); }
.ecc-form.is-hidden { display: none; }

.ecc-form-section__alt { margin-top: 50px; padding-top: 40px; border-top: 1px solid rgba(27,23,18,.15); text-align: center; }
.ecc-form-section__alt h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.3rem; color: var(--ecc-noche); margin: 0 0 20px; }
.ecc-form-section__alt-btns { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 600px) { .ecc-form__row { grid-template-columns: 1fr; } }

/* Información importante: acordeón nativo <details>/<summary> — semántica y teclado
   gratis del navegador; el estado abierto/cerrado se comunica de forma nativa a
   lectores de pantalla sin necesitar aria-expanded a mano. */
/* background-color (ver nota en .ecc-custom) — grupo de textura "piedra", texto oscuro */
.ecc-faq { background-color: var(--ecc-noche); padding: 64px 32px; }
.ecc-faq__inner { max-width: 780px; margin: 0 auto; }
.ecc-faq__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-hiedra); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 12px; text-align: center; }
.ecc-faq h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--ecc-noche); margin: 0 0 40px; text-align: center; }
.ecc-faq__item { border-bottom: 1px solid rgba(185,169,140,.35); }
.ecc-faq__item:first-child { border-top: 1px solid rgba(185,169,140,.35); }
.ecc-faq__item summary {
	font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 16.5px; color: var(--ecc-noche);
	list-style: none; cursor: pointer; padding: 22px 34px 22px 0; position: relative;
}
.ecc-faq__item summary::-webkit-details-marker { display: none; }
.ecc-faq__item summary::after {
	content: "+"; position: absolute; right: 4px; top: 22px; line-height: 1;
	font-size: 22px; color: var(--ecc-ambar); transition: transform .25s ease;
}
.ecc-faq__item[open] summary::after { transform: rotate(45deg); }
.ecc-faq__item summary:hover,
.ecc-faq__item summary:focus-visible { color: var(--ecc-ambar); }
.ecc-faq__item summary:focus-visible { outline: 2px solid var(--ecc-ambar); outline-offset: 4px; }
.ecc-faq__content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.ecc-faq__item[open] .ecc-faq__content { grid-template-rows: 1fr; }
.ecc-faq__content-inner { overflow: hidden; }
.ecc-faq__content p { font-family: 'Archivo', sans-serif; color: #4a4238; font-size: 15.5px; line-height: 1.65; margin: 0; padding: 0 34px 24px 0; }
@media (prefers-reduced-motion: reduce) {
	.ecc-faq__content { transition: none; }
	.ecc-faq__item summary::after { transition: none; }
}

/* Cierre final: variante con foto de fondo de .ecc-news (igual receta que .ecc-subhero) */
.ecc-news--photo { position: relative; background-size: cover; background-position: center; }
.ecc-news--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,23,18,.55) 0%, rgba(27,23,18,.85) 100%); }
.ecc-news--photo > * { position: relative; z-index: 1; }

@media (max-width: 780px) {
	.ecc-custom__inner,
	.ecc-steps__inner,
	.ecc-form-section__inner,
	.ecc-faq__inner { padding-left: 0; padding-right: 0; }
}

/* Hero de Eventos Privados: variante alta de .ecc-subhero, con texto lead y CTAs propios
   (no reutiliza .ecc-hero__inner/.ecc-hero__ctas del hero del home a propósito: esas clases
   tienen una regla móvil que oculta eyebrow/lead pensada solo para ese hero animado). */
.ecc-subhero--tall { min-height: 78vh; align-items: center; }
.ecc-subhero__inner p.lead { font-family: 'Archivo', sans-serif; font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--ecc-hueso); opacity: .92; max-width: 560px; margin: 18px 0 30px; line-height: 1.55; }
.ecc-subhero__ctas { display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 600px) {
	.ecc-subhero--tall { min-height: 86vh; }
	.ecc-subhero__ctas .ecc-btn { flex: 1 1 auto; text-align: center; }
}

/* El header propio es sticky (~75px) — sin esto, saltar a estas secciones por ancla
   deja su título tapado justo debajo de la cabecera. */
#consulta-disponibilidad,
#un-espacio-diferente { scroll-margin-top: 90px; }

/* Encabezado semántico dentro del <summary> del acordeón (mejor navegación por
   encabezados en lectores de pantalla) sin alterar su aspecto visual. */
.ecc-faq__item summary h3 { font: inherit; margin: 0; color: inherit; display: inline; }

/* ================= CONTACTO: REDISEÑO 2026-08 ================= */

/* "¿En qué podemos ayudarte?" — tarjetas por tipo de consulta (grupo de textura
   "hiedra" = visualmente oscura, ver lista más arriba donde se añadió .ecc-help) */
.ecc-help { padding: 56px 32px; }
.ecc-help__inner { max-width: 1180px; margin: 0 auto; text-align: center; }
.ecc-help__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-ambar); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 12px; }
.ecc-help h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.8rem, 3.2vw, 2.4rem); color: var(--ecc-hueso); margin: 0 0 44px; }
/* Rejilla intrinseca (2026-08-04). Antes: repeat(3, 1fr) fijo, con un unico salto a
   1 columna en max-width:760px. Entre 761 y ~1000 px las tres columnas no caben, y la
   tercera tarjeta quedaba RECORTADA contra el borde derecho — con overflow-x:hidden en
   html/body no hay scroll que la rescate, el contenido simplemente no se alcanza.
   Medido: desbordaba 25 px a 768 y 13 px a 780; a 820 no desbordaba pero todos los
   botones partian en dos lineas; a 1024 iba bien.
   Con auto-fit + minmax(280px,1fr) el numero de columnas lo decide el ancho disponible
   (1 col hasta ~620, 2 hasta ~950, 3 a partir de ahi) y la media query de 760 sobra:
   se elimina. Un breakpoint menos y el corte deja de estar en un numero inventado. */
.ecc-help__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.ecc-help-card { border: 1px solid rgba(185,169,140,.25); padding: 36px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ecc-help-card__icon { display: inline-block; width: 52px; height: 52px; border-radius: 50%; background-color: var(--ecc-ambar); background-repeat: no-repeat; background-position: center; background-size: 24px 24px; margin-bottom: 20px; flex-shrink: 0; }
.ecc-help-card__icon--mail { background-image: url('../img/email-icon.svg'); }
.ecc-help-card__icon--party { background-image: url('../img/party-icon.svg'); }
.ecc-help-card__icon--mic { background-image: url('../img/mic-icon.svg'); }
.ecc-help-card h3 { font-family: 'Fraunces', serif; font-weight: 600; color: var(--ecc-hueso); font-size: 1.2rem; margin: 0 0 10px; }
.ecc-help-card p { font-family: 'Archivo', sans-serif; color: var(--ecc-piedra); font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.ecc-help-card__email { font-size: 15px; margin: 0 0 18px; }
.ecc-help-card__email a { font-family: 'Archivo', sans-serif; color: var(--ecc-ambar); text-decoration: none; border-bottom: 1px solid rgba(232,163,61,.4); }
.ecc-help-card__email a:hover { border-color: var(--ecc-ambar); }
.ecc-help-card__btns { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: auto; padding-top: 6px; }
.ecc-help-card__btns .ecc-btn { text-align: center; }
.ecc-help-card__note { font-family: 'Archivo', sans-serif; font-size: 13.5px; color: rgba(185,169,140,.8); margin: 16px 0 0; line-height: 1.5; }
/* (La media query de 760px que forzaba 1 columna se elimino el 2026-08-04: ahora el
   propio auto-fit de .ecc-help__grid decide, y a 360-600 px ya da una sola columna.) */

/* Ubicación — dirección + mapa nativo de Elementor (widget google_maps, hermano del
   widget HTML, mismo patrón que .ecc-llegar en Inicio — ver notas en el conector sobre
   por qué no se puede meter un <iframe> real dentro del HTML). El fondo/padding vive en
   el contenedor (por ID estable), no en un <section> interno, porque tiene que cubrir
   los dos widgets hermanos a la vez, no solo el de texto. */
/* Elementor da a .e-con-full y a los widgets sus propios display/gap/padding vía
   reglas ".elementor-element:where(...)" — :where() no suma especificidad, así que
   pesan exactamente igual que una sola clase como esta y, al cargarse su CSS después
   del nuestro, ganan el empate por orden de aparición. Sin !important en cada
   propiedad, el gap/padding de aquí se queda en el valor por defecto de Elementor
   (20px/10px) por mucho que el archivo tenga escrito otra cosa — verificado con
   getComputedStyle en vivo. La dirección real es "column" (default de Elementor
   para .e-con.e-flex, no hace falta media query aparte para móvil). */
.elementor-element-a5001005 {
	background-image: linear-gradient(rgba(239,230,216,.94), rgba(239,230,216,.94)), url('../img/textura-piedra-suave.jpg');
	background-size: cover;
	background-position: center;
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
	padding: 64px 32px !important;
	box-sizing: border-box;
}
.ecc-ubicacion__text h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.2rem); color: var(--ecc-noche); margin: 0 0 14px; }
.ecc-ubicacion__addr { font-family: 'Archivo', sans-serif; font-size: 16px; color: #4a4238; margin: 0 0 28px; line-height: 1.6; }
.elementor-element-a5001007 .elementor-custom-embed { border-radius: 2px; overflow: hidden; border: 1px solid rgba(27,23,18,.15); line-height: 0; }
@media (max-width: 700px) {
	.elementor-element-a5001005 { padding: 60px 24px !important; }
}

/* ================= LOGO CULTURAL EN CABECERA =================
   El Corral tiene dos logotipos oficiales: el del bar (cabecera y pie del
   sitio) y este, caligráfico, para todo lo relacionado con cultura. Se usa
   en el subhero de "Música y cultura" y sustituye ahí a cualquier otro logo. */
.ecc-subhero .ecc-subhero__logo {
	display: block;
	width: 100%;
	max-width: 340px;
	height: auto;
	margin: 0 0 22px;
}
@media (max-width: 600px) {
	.ecc-subhero .ecc-subhero__logo { max-width: 230px; margin-bottom: 16px; }
}

/* Música y cultura (page-id-354): cabecera propia. La foto de fondo se recortó a
   2.5:1 para que a esta altura se vea casi entera. El logo va arriba a la derecha
   y el texto abajo: el inner pasa a columna y el eyebrow empuja con margin-top:auto
   (sin position:absolute, que el inner necesita seguir relative para quedar sobre
   el degradado). Mismo layout en escritorio y en movil. */
.page-id-354 .ecc-subhero { min-height: 62vh; background-position: 50% 50%; align-items: stretch; }
.page-id-354 .ecc-subhero__inner { display: flex; flex-direction: column; padding-top: 20px; }
.page-id-354 .ecc-subhero .ecc-subhero__logo { align-self: flex-end; margin: 0 8% 8px 0; }
.page-id-354 .ecc-subhero__eyebrow { margin-top: auto; }
/* En pantallas estrechas el contenedor es casi cuadrado y el 'cover' recorta por los
   lados: se ancla el encuadre al guitarrista de la gorra roja (a la izquierda de la
   foto) y se baja la altura para que el recorte lateral sea menor. */
@media (max-width: 900px) {
	.page-id-354 .ecc-subhero { min-height: 38vh; background-position: 0% 50%; }
	.page-id-354 .ecc-subhero__inner { padding-bottom: 24px; }
	.page-id-354 .ecc-subhero .ecc-subhero__logo { max-width: 150px; }
}

/* Variante de .ecc-custom con foto a la derecha (Musica y cultura, bloque de la sala
   interior). Modificador propio para no alterar los demas .ecc-custom del sitio. */
.ecc-custom--foto .ecc-custom__inner { max-width: 1180px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; text-align: left; }
.ecc-custom--foto .ecc-custom__foto { width: 100%; height: 420px; object-fit: cover; border-radius: 2px; box-shadow: 0 30px 60px rgba(0,0,0,.35); display: block; }
@media (max-width: 820px) {
	.ecc-custom--foto .ecc-custom__inner { grid-template-columns: 1fr; gap: 32px; }
	.ecc-custom--foto .ecc-custom__foto { height: 260px; }
}

/* Retrato bajo el texto de la bio del DJ (pagina DJ residente). El archivo original
   es pequeno (408x614), asi que se limita el ancho para que no se vea pixelado. */
.ecc-djbio .ecc-djbio__foto { display: block; width: 100%; max-width: 238px; margin: 34px auto 0; border-radius: 2px; box-shadow: 0 24px 48px rgba(0,0,0,.45); }


/* ================= LEGIBILIDAD SOBRE LAS TEXTURAS CREMA (2026-08-03) =======
   Medido pixel a pixel sobre las texturas reales ya mezcladas con su velo, en
   el percentil 99 de luminancia del fondo (la veta mas clara, no el promedio).
   Fallaban dos colores de acento:
     --ecc-ambar  #E8A33D  ->  1.7:1 / 1.6:1   (naranja claro sobre beige claro)
     --ecc-piedra #B9A98C  ->  1.9:1
   El cuerpo (#4a4238, 7:1) y los titulares (--ecc-noche, 13:1) ya estaban bien.

   Se redefinen las VARIABLES dentro de las secciones crema, no cada regla: asi
   cualquier descendiente que use var(--ecc-ambar) o var(--ecc-piedra) hereda la
   version legible sin tener que enumerar selectores (y sin que se escape uno
   nuevo el dia de manana). #835C22 conserva el tono (35.8 grados) y la
   saturacion (.74) exactos del ambar de marca: es el mismo color, quemado.
   El velo de textura-muro-pared sube de .72 a .85 arriba, en su propia regla:
   a .72 el fondo oscilaba 65 niveles de luminancia bajo el texto y las letras
   vibraban aunque el contraste medido diera por bueno. */
.ecc-llegar,
.elementor-element-72f2a425,
.ecc-bar,
.ecc-priv,
.ecc-contact,
.ecc-cats,
.ecc-evento,
.ecc-storytelling,
.ecc-djstyle,
.ecc-djsocial,
.ecc-custom,
.ecc-steps,
.ecc-faq,
.ecc-menu--dark,
.ecc-muro,
.ecc-agenda,
.ecc-horario-bar,
.ecc-festdetail,
.ecc-colab,
.ecc-djs,
.elementor-element-a5001005 {
	--ecc-ambar: #7B5620;   /* 4.67:1 sobre la veta MAS OSCURA de piedra-suave */
	--ecc-piedra: #5F5340;  /* 5.33:1 */
}

/* Variante de PIEDRA para el bloque ecc-news (2026-08-04).

   OJO CON LOS NOMBRES, que están invertidos en este CSS desde que se pusieron las
   texturas (ya avisa el comentario de .ecc-festdetail más arriba): .ecc-news--light es
   la variante OSCURA, hiedra bajo velo .88 con el texto en crema. No existía ninguna
   variante crema de este componente, así que el cierre de /carta/ salía oscuro.

   Aquí va: misma piedra suavizada y mismo velo .94 que el resto de secciones crema,
   las dos variables de acento con sus valores legibles sobre crema, y los colores de
   titular y cuerpo que ya usan esas secciones (--ecc-noche y #4a4238). Va al final del
   archivo a propósito: tiene que ganar por orden a la hiedra de .ecc-news. */
.ecc-news--piedra {
	background-image: linear-gradient(rgba(239,230,216,.94), rgba(239,230,216,.94)), url('../img/textura-piedra-suave.jpg');
	background-size: cover;
	background-position: center;
	--ecc-ambar: #7B5620;
	--ecc-piedra: #5F5340;
}
.ecc-news--piedra h2 { color: var(--ecc-noche); }
.ecc-news--piedra p { color: #4a4238; }

/* El formulario de MailPoet dentro de la variante de piedra (2026-08-05, agenda).
   El original esta pintado para fondo oscuro (texto y bordes en hueso) con !important en
   cada propiedad, asi que aqui hace falta mas especificidad Y !important para ganarle.
   Colores: los mismos que ya usan las secciones crema (noche para el texto fuerte,
   #4a4238 para el cuerpo, #5F5340 para el marcador de posicion). */
.ecc-news--piedra .ecc-news__form .mailpoet_form,
.ecc-news--piedra .ecc-news__form .mailpoet-heading {
	color: var(--ecc-noche) !important;
}
.ecc-news--piedra .ecc-news__form input.mailpoet_text,
.ecc-news--piedra .ecc-news__form input.mailpoet_textarea {
	background: rgba(255,255,255,.45) !important;
	background-color: rgba(255,255,255,.45) !important;
	border-color: rgba(27,23,18,.3) !important;
	color: var(--ecc-noche) !important;
}
.ecc-news--piedra .ecc-news__form input.mailpoet_text::placeholder { color: #5F5340 !important; }
.ecc-news--piedra .ecc-news__form label,
.ecc-news--piedra .ecc-news__form .mailpoet_segment_label { color: #4a4238; }
.ecc-news--piedra .ecc-news__form input.mailpoet_submit {
	color: var(--ecc-noche) !important;
	border-color: rgba(27,23,18,.35) !important;
}
.ecc-news--piedra .ecc-news__form input.mailpoet_submit:hover {
	background: rgba(27,23,18,.06) !important;
	background-color: rgba(27,23,18,.06) !important;
}

/* /carta/ mete sus secciones 10px por dentro (padding del contenedor de Elementor de esa
   pagina; en el resto del sitio las secciones van a sangre). El cierre se cuelga por
   the_content como hermano de ese contenedor, asi que salia 20px mas ancho que las bandas
   de arriba. Medido: .ecc-menu 1405px desde x=10, el cierre 1425px desde x=0.
   Se iguala solo aqui, por id: es una rareza de esta pagina, no del componente. */
#carta-cierre { margin-left: 10px; margin-right: 10px; }
/* Y el pie, SOLO en esa pagina, para que la columna quede alineada de arriba abajo
   (decision del usuario, 2026-08-04). En el resto del sitio el pie sigue a sangre porque
   ahi sus secciones tambien lo van. */
.page-id-13 .ecc-footer { margin-left: 10px; margin-right: 10px; }

/* EXCEPCION (2026-08-04): .ecc-festdetail entra entero en la lista de arriba, pero solo
   una de sus dos variantes es crema. Ojo con los nombres, que estan invertidos desde que
   se pusieron las texturas: --dark es la seccion CREMA (textura piedra) y --light es la
   OSCURA (hiedra bajo velo .88). Asi que la variante --light se estaba pintando el cuerpo
   y las etiquetas en #5F5340, marron oscuro sobre casi negro: medido 2.3:1, por debajo de
   AA. Con los tonos de marca vuelve a 7.6:1.
   Mismo idioma que .page-id-12 .ecc-priv, mas abajo.
   TIENE que ir despues del bloque de arriba: misma especificidad (0,1,0), gana el orden. */
.ecc-festdetail--light {
	--ecc-ambar: #E8A33D;
	--ecc-piedra: #B9A98C;
}

/* CORRECCION DEL 2026-08-03 (noche): la medida de arriba se habia tomado contra el
   percentil 99 del fondo —la veta mas CLARA—, que para un texto oscuro es el mejor
   caso, no el peor. Contra el percentil 1 (la veta mas oscura) el ambar daba 3.76:1,
   por debajo de AA. Con la textura suavizada + velo .92 el fondo casi no varia
   (0.695 a 0.724 de luminancia) y basta con quemar el ambar un punto mas: #835C22 ->
   #7B5620, mismo tono (35.9 grados) y misma saturacion (.74) que el ambar de marca.
   Hiedra (#4C6344, 4.69:1), piedra (#5F5340, 5.33:1) y cuerpo (#4A4238, 7.00:1) pasan
   AA sobre ese fondo sin tocarlos. */

/* El ambar como FONDO no se toca: ahi el problema no existe (texto --ecc-noche
   encima) y el naranja de marca es justo lo que da el acento a la pagina. Estas
   reglas devuelven el valor original a los elementos que lo usan como relleno y
   que pueden caer dentro de una seccion crema. */
.ecc-btn--primary,
.ecc-evento__btn,
.ecc-djstyle__btn,
.ecc-priv__btn,
.ecc-bar__btn,
.ecc-prensa__btn,
.ecc-pulse__cta,
.ecc-pulse__dot,
.ecc-pulse--live,
.ecc-horario-bar__dot--privada,
.ecc-help-card__icon,
.ecc-priv__email,
.ecc-patio-map__point,
.ecc-provisional-header__cta,
.ecc-hero__eyebrow .dot {
	background-color: #E8A33D;
}

/* Compartir por WhatsApp: verde de marca. Va DESPUES del bloque de arriba a proposito:
   aquel fija el ambar de fondo para .ecc-evento__btn y, a igualdad de especificidad, gana
   el ultimo. Texto en --ecc-noche, no blanco: sobre #25D366 el blanco se queda en 2,1:1 y
   el noche da 9:1. */
.ecc-evento__btn--wasap {
	background-color: #25D366;
	color: var(--ecc-noche);
	border-color: transparent;
}
.ecc-evento__btn--wasap:hover,
.ecc-evento__btn--wasap:focus {
	background-color: #1EBE5D;
	color: var(--ecc-noche);
}
.ecc-form__submit,
.ecc-form__submit:hover,
.ecc-form__submit:focus {
	background-color: #E8A33D !important;
}

/* Este va escrito a pelo en su regla (no usa la variable), asi que hay que
   corregirlo aparte: las etiquetas FECHA / HORA / ENTRADA de la ficha de
   evento estaban a #8a7a5f = 3.0:1. */
.ecc-evento__meta dt { color: #5F5340; }
.ecc-festdetail--dark dt { color: #5F5340; }  /* mismo caso, ficha de festival */

/* ================= FORMULARIO DE EVENTOS PRIVADOS SOBRE HIEDRA ==============
   Peticion del cliente 2026-08-03: esta seccion pasa del grupo de textura crema
   (piedra-blues) al de hiedra, como .ecc-patio / .ecc-menu / .ecc-help. Cambia el
   fondo arriba, en los grupos de textura; aqui van los colores de texto, que
   estaban escritos para fondo claro y sobre hiedra quedarian ilegibles.
   Los campos siguen el mismo idioma que el formulario de newsletter
   (.ecc-news__form): transparentes, borde hueso al 50%, texto hueso. */
.ecc-form-section__eyebrow { color: var(--ecc-ambar); }
.ecc-form-section h2 { color: var(--ecc-hueso); }
.ecc-form-section__intro { color: var(--ecc-piedra); }
.ecc-form-section .ecc-form__field label { color: var(--ecc-hueso); }
.ecc-form-section .ecc-form__privacy { color: var(--ecc-piedra); }
.ecc-form-section .ecc-form__privacy a { color: var(--ecc-hueso) !important; }
.ecc-form-section .ecc-form__note { color: var(--ecc-piedra); }

/* Campos: pozos transparentes sobre la hiedra, no bloques crema recortados.
   color-scheme: dark hace que el navegador pinte en claro sus propios controles
   (icono del datepicker, flecha y desplegable del select); sin esto salen en
   oscuro sobre oscuro y desaparecen. */
.ecc-form-section .ecc-form__field input[type=text],
.ecc-form-section .ecc-form__field input[type=email],
.ecc-form-section .ecc-form__field input[type=tel],
.ecc-form-section .ecc-form__field input[type=date],
.ecc-form-section .ecc-form__field input[type=number],
.ecc-form-section .ecc-form__field select,
.ecc-form-section .ecc-form__field textarea {
	background: transparent;
	border: 1px solid rgba(239,230,216,.5);
	color: var(--ecc-hueso);
	color-scheme: dark;
}
/* La lista desplegada del select la pinta el navegador/SO: color-scheme no
   basta en todos, y con las option en transparente puede salir fondo claro
   con el texto hueso encima (ilegible). Colores fijos, sin heredar. */
.ecc-form-section .ecc-form__field select option {
	background-color: var(--ecc-noche);
	color: var(--ecc-hueso);
}
.ecc-form-section .ecc-form__field ::placeholder { color: var(--ecc-piedra); opacity: 1; }
.ecc-form-section .ecc-form__field input:focus-visible,
.ecc-form-section .ecc-form__field select:focus-visible,
.ecc-form-section .ecc-form__field textarea:focus-visible { outline-color: var(--ecc-ambar); }

/* Rojo de error: #a13d2e da 2.8:1 sobre la hiedra. Este aclarado, 6.7:1. */
.ecc-form-section .ecc-form__error { color: #E8836B; }
.ecc-form-section .ecc-form__field.has-error input,
.ecc-form-section .ecc-form__field.has-error select,
.ecc-form-section .ecc-form__field.has-error textarea { border-color: #E8836B; }
.ecc-form-section .ecc-form__privacy.has-error input { outline-color: #E8836B; }
.ecc-form-section .ecc-form__field.has-error input,
.ecc-form-section .ecc-form__field.has-error select,
.ecc-form-section .ecc-form__field.has-error textarea { outline-color: #E8836B; }
.ecc-form-section .ecc-form__status--ok,
.ecc-form-section .ecc-form__status--fail { color: var(--ecc-hueso); }

.ecc-form-section .ecc-form-section__alt { border-top-color: rgba(185,169,140,.25); }
.ecc-form-section .ecc-form-section__alt h3 { color: var(--ecc-hueso); }
/* "Enviar un correo" usaba la variante outline oscura, pensada para el fondo
   claro anterior. Sobre hiedra vuelve al outline claro de .ecc-btn--secondary
   (la clase sigue en el HTML del widget; se reescribe aqui y no en Elementor). */
.ecc-form-section .ecc-btn--outline-dark {
	border-color: rgba(239,230,216,.5);
	color: var(--ecc-hueso) !important;
}
.ecc-form-section .ecc-btn--outline-dark:hover {
	border-color: var(--ecc-hueso);
	color: var(--ecc-hueso) !important;
}

/* ================= "POR QUE EL CORRAL" SOBRE HIEDRA ========================
   Peticion del cliente 2026-08-03, mismo tratamiento que el formulario de aqui
   abajo. Va acotado a la pagina de Eventos Privados (page-id-12) A PROPOSITO:
   .ecc-priv se usa tambien en la portada, en el teaser #eventos-privados-teaser,
   y alli sigue en crema alternando con los bloques vecinos. Si algun dia se
   quiere el mismo look en la portada, basta con mover .ecc-priv al grupo de
   textura hiedra de mas arriba y borrar este bloque entero. */
.page-id-12 .ecc-priv {
	background-image: linear-gradient(rgba(27,23,18,.88), rgba(27,23,18,.88)), url('../img/textura-hiedra.jpg');
	background-size: cover;
	background-position: center;
	/* Deshace el override de seccion crema: sobre hiedra vuelven los tonos de marca. */
	--ecc-ambar: #E8A33D;
	--ecc-piedra: #B9A98C;
}
.page-id-12 .ecc-priv__eyebrow { color: var(--ecc-ambar); }
.page-id-12 .ecc-priv h2 { color: var(--ecc-hueso); }
.page-id-12 .ecc-priv li { color: var(--ecc-piedra); }
/* El cuadradito de la vineta en verde hiedra queda en 2.6:1 sobre el fondo
   oscuro: casi invisible a 6px. En ambar se ve. */
.page-id-12 .ecc-priv li::before { background: var(--ecc-ambar); }
/* El parrafo real del HTML es __desc, no __intro (el CSS tiene regla para
   __intro, que en esta pagina no la usa nadie): sin regla propia heredaba el
   #333 de Hello Elementor, que sobre hiedra da 1.4:1. */
.page-id-12 .ecc-priv__desc,
.page-id-12 .ecc-priv__intro { color: var(--ecc-piedra); }
.page-id-12 .ecc-priv__contact-title { color: var(--ecc-hueso); }
.page-id-12 .ecc-priv__contact-item .label { color: var(--ecc-piedra); }


/* ================= MENU SECRETO DEL FOOTER =================
   Desplegable de accesos privados: 5 pulsaciones en el logo del footer
   (assets/js/menu-secreto.js). Cada funcion sigue pidiendo su propia clave en
   el servidor; el gesto es solo el descubrimiento del acceso. */
.ecc-secreto { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(27,23,18,.72); }
.ecc-secreto__caja { width: 100%; max-width: 360px; background: #1B1712; border: 1px solid rgba(185,169,140,.28); border-radius: 4px; padding: 22px; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.ecc-secreto__titulo { font-family: 'Space Mono', monospace; color: var(--ecc-ambar); letter-spacing: .14em; text-transform: uppercase; font-size: 13px; margin: 0 0 16px; }
.ecc-secreto__item { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid rgba(185,169,140,.22); border-radius: 3px; padding: 12px 14px; margin: 0 0 10px; cursor: pointer; color: var(--ecc-hueso); font-family: 'Archivo', sans-serif; }
.ecc-secreto__item:hover, .ecc-secreto__item:focus-visible { border-color: var(--ecc-ambar); background: rgba(232,163,61,.08); }
.ecc-secreto__item-et { display: block; font-size: 16px; }
.ecc-secreto__item-desc { display: block; font-size: 14px; color: var(--ecc-piedra); margin-top: 3px; }
.ecc-secreto__cerrar { display: block; width: 100%; margin-top: 6px; padding: 10px; background: transparent; border: none; color: var(--ecc-piedra); font-family: 'Space Mono', monospace; font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.ecc-secreto__cerrar:hover { color: var(--ecc-hueso); }
/* Fuentes locales WOFF2 (2026-08-03): sustituyen a los TTF de elcorral-fuentes.
   Origen: Google Fonts (licencia OFL), subconjunto latin. Con italicas reales. */
@font-face {font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fonts/fraunces-italic-100-900.woff2') format('woff2'); }
@font-face {font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/fraunces-normal-100-900.woff2') format('woff2'); }
@font-face {font-family: 'Archivo'; font-style: italic; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url('../fonts/archivo-italic-100-900.woff2') format('woff2'); }
@font-face {font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url('../fonts/archivo-normal-100-900.woff2') format('woff2'); }
@font-face {font-family: 'Space Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/spacemono-italic-400.woff2') format('woff2'); }
@font-face {font-family: 'Space Mono'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/spacemono-italic-700.woff2') format('woff2'); }
@font-face {font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/spacemono-normal-400.woff2') format('woff2'); }
@font-face {font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/spacemono-normal-700.woff2') format('woff2'); }

/* ================= Accesibilidad: contraste (2026-08-03, auditoría) =================
   Cuatro correcciones medidas con ratio WCAG AA (4,5:1 en texto pequeño):
   - Pie de © : rgba .6 daba 3,65 sobre el fondo; a .78 queda ~5,3.
   - Botón "Ver horario semanal": el CSS base de Elementor 4 (desbloqueado hoy al
     corregir su URL http) pinta los <button> de rosa #cc3366 (4,01 sobre crema);
     se reafirma el color propio.
   - Coletilla del Corralómetro: #827661 daba 4,0 justo; se aclara un punto.
   - Eyebrow de la sección patio en portada: piedra clara sobre hueso daba 1,86;
     se aplica el mismo tono piedra-crema (#5F5340) que el resto de secciones crema. */
.ecc-footer__bottom { color: rgba(185,169,140,.78); }
button.ecc-horario-bar__toggle { color: var(--ecc-noche) !important; }
#corralometro .ecc-corralometro__foot { color: #8f836c; }
.ecc-patio__eyebrow { color: #5F5340; }

/* Contenedor huerfano del antiguo bloque de clima (c6000cl1): su widget [ecc_clima] devuelve
   vacio desde el 2026-08-03 (la temperatura vive en la franja de horario), pero el contenedor
   sigue en el _elementor_data con 10px de padding arriba y abajo, y desigualaba el hueco
   hero-horario (40px) frente a horario-pulso (20px).
   ponytail: parche CSS a proposito — el contenedor se borra de verdad en la sesion de
   Elementor del bloque B, y entonces esta regla sobra. */
.elementor-element.elementor-element-c6000cl1 { display: none !important; } /* especificidad: gana a .e-con.e-flex */

/* Pagina 404 con voz de la casa (templates/404.php, C3 2026-08-03). Fondo noche
   solido, centrada, botones reutilizados de .ecc-btn. */
.ecc-404 { background: var(--ecc-noche); padding: 120px 32px 140px; text-align: center; }
.ecc-404__inner { max-width: 640px; margin: 0 auto; }
.ecc-404__eyebrow { font-family: 'Space Mono', monospace; color: var(--ecc-ambar); letter-spacing: .14em; text-transform: uppercase; font-size: 14px; margin: 0 0 14px; }
.ecc-404 h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(2rem, 4.5vw, 3rem); color: var(--ecc-hueso); margin: 0 0 16px; }
.ecc-404__texto { font-family: 'Archivo', sans-serif; color: var(--ecc-piedra); line-height: 1.7; margin: 0 0 34px; }
.ecc-404__ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ===== Accesibilidad (D2 del encargo, 2026-08-03): areas tactiles ===== */
.ecc-provisional-header__toggle { min-height: 44px; }
.ecc-pulse__cta { padding-top: 12px; padding-bottom: 12px; }
/* Enlaces del pie: de ~15px de alto efectivo a >=25px, sin cambio visual */
.ecc-footer__links a, .ecc-footer__bottom a { display: inline-block; padding: 5px 0; }
/* Iconos sociales: de 20x20 a area de 40x40 (padding), sin crecer la fila */
.ecc-footer__social { gap: 8px; }
.ecc-footer__social a { padding: 10px; margin: -10px 0; }
/* Casilla de consentimiento de MailPoet: 13px era hostil al pulgar.
   !important porque el formulario trae estilos inline. */
.mailpoet_checkbox { width: 18px !important; height: 18px !important; }
.mailpoet_checkbox_label { font-size: 14px !important; line-height: 1.4 !important; }

/* ===== Bloque 4 de la segunda auditoría (2026-08-05) ===== */

/* iOS hace ZOOM automático al enfocar cualquier campo cuya letra mida menos de 16px, y al
   volver el usuario se queda con la página ampliada. El campo de correo y el botón del Club
   estaban los dos en 15,5px (medido en las 6 anchuras). Se suben a 16 solo en pantallas
   táctiles o estrechas: en escritorio el formulario se queda exactamente como estaba.
   `!important` porque las reglas de arriba (líneas ~811 y ~834) ya lo son. */
@media (pointer: coarse), (max-width: 780px) {
	.ecc-news__form input.mailpoet_text,
	.ecc-news__form input.mailpoet_textarea,
	.ecc-news__form input.mailpoet_submit {
		font-size: 16px !important;
	}
}

/* Iconos sociales del pie: el área era 40x50 (20px de icono + 10 de padding). Faltaban 4px de
   ancho para los 44 recomendados. El margen negativo sigue absorbiendo el crecimiento vertical,
   así que la fila no se mueve. */
.ecc-footer__social a { padding: 12px !important; margin: -12px 0 !important; }

/* Migas de pan de la ficha: 51x20. Se estira el área de pulsación con padding y se devuelve con
   margen negativo — la ruta se ve exactamente igual, pero el dedo tiene 44px de alto. */
.ecc-migas a {
	display: inline-block;
	padding: 12px 0;
	margin: -12px 0;
}

/* Bloqueo del fondo con el panel móvil abierto (assets/js/header-menu.js). `position: fixed` en
   vez de `overflow: hidden` a secas: en iOS Safari el overflow del body NO frena el scroll de la
   página. El JS guarda la posición en `top` y la restaura al cerrar, así que no se pierde el
   sitio. La clase la pone y la quita SOLO el JS. */
body.ecc-sin-scroll {
	position: fixed;
	width: 100%;
	overflow: hidden;
}

/* Con el fondo bloqueado el body es `position: fixed` y el JS lo desplaza -scrollY, asi que
   la cabecera `sticky` se iba con el fuera de pantalla: al abrir la hamburguesa con la pagina
   bajada DESAPARECIA el menu entero (medido: top -1751). Mientras dura el bloqueo se fija al
   viewport. El panel movil cuelga de ella (position:absolute; top:100%), asi que la sigue. */
body.ecc-sin-scroll .ecc-provisional-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

/* ===== Fade de entrada (assets/js/fade.js, D2 2026-08-03) =====
   La clase la anade el JS solo a bloques bajo el pliegue; sin JS no se
   oculta nada. Con "reducir movimiento", todo fijo. */
.ecc-fade { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.ecc-fade.is-vista { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.ecc-fade { opacity: 1; transform: none; transition: none; }
}

/* ================= ENLACE "SALTAR AL CONTENIDO" =================
   Ver el comentario largo en elcorral-estilos.php (punto 28, 2026-08-04). En corto: el
   skip link de Hello Elementor sale DESPUES de esta cabecera y quedaba en la 8.ª posicion
   de tabulacion, asi que no servia para nada. Se imprime uno propio lo primero de todo y
   se oculta el del tema.

   Oculto hasta recibir el foco, y entonces visible de verdad (no basta con .ecc-sr-only:
   un skip link que no se ve al enfocarlo tampoco sirve). Se usa :focus y NO :focus-visible
   a proposito — a este enlace solo se llega con teclado. */
.ecc-skip-link {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 100000;
	padding: 14px 22px;
	background: var(--ecc-noche);
	color: var(--ecc-hueso);
	border: 2px solid var(--ecc-ambar);
	border-radius: 0 0 2px 0;
	font-family: 'Archivo', sans-serif;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
}
.ecc-skip-link:focus {
	left: 0;
	color: var(--ecc-hueso);
}
/* El del tema, justo detras de nuestra cabecera: sobra, ya no hace falta. */
.ecc-provisional-header + .skip-link { display: none; }

/* ================= CONVERSIÓN (2026-08-04) ================= */

/* CTA por tarjeta en la agenda. La tarjeta entera ya era un enlace, pero nada decía qué se
   puede hacer con cada concierto: los seis salían idénticos. El texto lo decide
   ecc_evento_estado_venta() en includes/evento-acciones.php, el mismo estado que usa la ficha,
   para que las dos no puedan contradecirse. */
.ecc-agenda__grid .ecc-muro__cta {
	display: block;
	margin-top: 8px;
	font-family: 'Archivo', sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	text-align: center;
	color: var(--ecc-hiedra);
}
.ecc-agenda__grid .ecc-muro__card:hover .ecc-muro__cta { text-decoration: underline; }

/* Aviso de "venta anticipada próximamente" en la ficha. Va ANTES de .ecc-evento__actions y no
   es un botón a propósito: todavía no hay nada que pulsar, y un botón muerto es peor que una
   frase. Cuando se rellene enlace_entradas, este aviso desaparece solo y sale el botón. */
.ecc-evento__aviso-venta {
	font-family: 'Archivo', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #4a4238;
	border-left: 3px solid var(--ecc-ambar);
	padding: 8px 0 8px 16px;
	margin: 0 0 26px;
}

/* Contrapunto del asterisco de obligatorio, para los campos que dejan de serlo. */
.ecc-form__field .ecc-form__opcional { font-weight: 400; color: #8a7a5f; }

/* ================= BOTONES DE WHATSAPP ====================================
   Peticion del usuario 2026-08-05: los botones "Escribir por WhatsApp" en el
   verde de la marca. Se enganchan al href (wa.me) y no a una clase nueva, para
   no tocar el HTML de los widgets de Elementor: cualquier boton que enlace a
   WhatsApp queda igual, aqui y en el resto del sitio.
   Verde #25D366 con texto noche (~9:1). El verde oscuro de WhatsApp (#128C7E)
   con texto blanco se queda en 4,8:1 y desentona con el ambar de la pagina. */
a.ecc-btn[href*="wa.me"],
a.ecc-btn[href*="whatsapp.com"] {
	background-color: #25D366;
	border-color: #25D366;
	color: var(--ecc-noche) !important;
}
a.ecc-btn[href*="wa.me"]:hover,
a.ecc-btn[href*="whatsapp.com"]:hover {
	transform: translateY(-2px);
	background-color: #1FBF5A;
	border-color: #1FBF5A;
	color: var(--ecc-noche) !important;
}

/* ================= /musica-y-cultura/ — se rehace la alternancia (2026-08-05) =================

   Al quitar el bloque "El concierto se muda dentro" (que era de PIEDRA) quedaron dos
   secciones de HIEDRA seguidas —.ecc-djbio y .ecc-sound— y la página perdió el ritmo
   crema/oscuro. Se invierten las DOS últimas secciones para recuperarlo:

     subhero · storytelling PIEDRA · djbio HIEDRA · sound PIEDRA · custom HIEDRA

   Va acotado a `.page-id-354` porque .ecc-sound y .ecc-custom se usan en más páginas, y al
   final del archivo para ganar por orden de aparición a los grupos de textura de arriba.
   Recuerda que los nombres de las variables están invertidos en este CSS: --ecc-hueso es el
   crema del texto sobre fondo oscuro, --ecc-noche el marrón del texto sobre fondo claro. */

/* .ecc-sound pasa a PIEDRA: misma receta suavizada y mismo velo .94 que el resto de
   secciones crema, con las dos variables de acento en sus valores legibles sobre crema. */
.page-id-354 .ecc-sound {
	background-image: linear-gradient(rgba(239,230,216,.94), rgba(239,230,216,.94)), url('../img/textura-piedra-suave.jpg');
	background-size: cover;
	background-position: center;
	--ecc-ambar: #7B5620;
	--ecc-piedra: #5F5340;
}
.page-id-354 .ecc-sound h2,
.page-id-354 .ecc-sound__card h3 { color: var(--ecc-noche); }
.page-id-354 .ecc-sound__intro,
.page-id-354 .ecc-sound__card p { color: #4a4238; }
/* El borde de las tarjetas era piedra clara sobre oscuro: sobre crema no se veía. */
.page-id-354 .ecc-sound__card { border-color: rgba(95,83,64,.28); }
.page-id-354 .ecc-sound__notas li { color: #5F5340; }

/* .ecc-custom pasa a HIEDRA. El `background-color: var(--ecc-noche)` que ya trae se queda:
   queda debajo y es del mismo tono, así que no hay destello si la textura tarda. Las dos
   variables vuelven a sus valores base, que son los legibles sobre oscuro. */
.page-id-354 .ecc-custom {
	background-image: linear-gradient(rgba(27,23,18,.88), rgba(27,23,18,.88)), url('../img/textura-hiedra.jpg');
	background-size: cover;
	background-position: center;
	--ecc-ambar: #E8A33D;
	--ecc-piedra: #B9A98C;
}
.page-id-354 .ecc-custom__eyebrow { color: var(--ecc-ambar); }
.page-id-354 .ecc-custom h2 { color: var(--ecc-hueso); }
.page-id-354 .ecc-custom__intro { color: var(--ecc-piedra); }
/* "Descargar el dossier técnico" es un botón de contorno pintado para fondo claro
   (borde y texto en noche): sobre la hiedra hay que darle la vuelta. Lleva !important
   en el original, así que aquí también hace falta. */
.page-id-354 .ecc-custom .ecc-btn--outline-dark {
	border-color: rgba(239,230,216,.6);
	color: var(--ecc-hueso) !important;
}
.page-id-354 .ecc-custom .ecc-btn--outline-dark:hover {
	border-color: var(--ecc-hueso);
	color: var(--ecc-hueso) !important;
}

/* ================= RELIEVE DE LOS CARTELES (2026-08-06) =================
   Los carteles del Muro (portada) y de la agenda eran una imagen plana pegada sobre el
   papel crema de la tarjeta. Una sombra propia les da grosor: la lámina queda POR ENCIMA
   de la tarjeta, no encajada dentro (variante "levantada" de la simulación).

   Una sola regla cubre los dos sitios: la agenda reutiliza .ecc-muro__card.

   Ojo: el <img> lleva aspect-ratio 210/297 + object-fit:contain (linea 622). Si algún
   cartel no es A4, la sombra traza la CAJA, no la imagen visible, y queda un margen entre
   el borde de la foto y la sombra. Con carteles A4 —que es lo que hay— no se nota. */
.ecc-muro__card img {
	box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 5px 12px rgba(0,0,0,.2);
}

/* Velo del hero de /contacto/ (pagina 15) — 2026-08-06.
   La receta comun de .ecc-subhero (linea 919) va de .25 arriba a .88 abajo. Aqui se pide
   un 20% menos de velo para que se vea mas la foto de la ciguena sobre el casco antiguo:
   .25 -> .20 y .88 -> .70. Solo esta pagina; las demas cabeceras no se tocan. */
.page-id-15 .ecc-subhero::before {
	background: linear-gradient(180deg, rgba(27,23,18,.20) 0%, rgba(27,23,18,.70) 100%);
}

/* ===== SELLO DE CONCIERTO CANCELADO O APLAZADO (2026-08-09) =====
   .ecc-muro__card la comparten el muro de la portada y /agenda/: una sola definicion sirve para
   las dos. La tarjeta NO es solo el cartel, es una cartulina crema con el pie de texto debajo,
   asi que el velo va sobre la IMAGEN (filter) y no sobre la tarjeta entera: un velo en ::after
   con inset:0 tambien oscureceria el pie y lo dejaria ilegible. Ademas ::before ya lo usa el
   muro para la chincheta. */
.ecc-muro__card.es-cancelado img { filter: brightness(.5) grayscale(.35); }
.ecc-muro__card.es-aplazado img  { filter: brightness(.6); }

.ecc-sello {
	position: absolute;
	top: 38%;
	left: 14px;
	right: 14px;
	z-index: 2;
	padding: 7px 8px;
	font-family: 'Space Mono', monospace;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: .16em;
	text-align: center;
	pointer-events: none;
}
.ecc-sello small {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: none;
}
.ecc-sello--cancelado {
	left: -6px;
	right: -6px;
	background: #A32D2D;
	color: #FCEBEB;
	transform: rotate(-11deg);
}
.ecc-sello--aplazado {
	background: #854F0B;
	color: #FAEEDA;
}
.ecc-sello--aplazado small { color: #FAC775; }

/* Aviso de la ficha: aqui SI es texto de verdad, no decoracion. */
.ecc-evento__aviso-estado {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: 6px;
	font-weight: 700;
}
.ecc-evento__aviso-estado--cancelado { background: #A32D2D; color: #FCEBEB; }
.ecc-evento__aviso-estado--aplazado { background: #854F0B; color: #FAEEDA; }