/* =====================================================================
   El Patio (/el-patio/) — «Recorre el Patio»
   Se carga SOLO en esta pagina, y despues de site.css (depende de
   'elcorral-estilos'), de donde salen la paleta y las @font-face.

   OJO con el bloque del plano: en site.css siguen vivas las reglas
   .ecc-patio-map* de la version anterior (puntos de 18px con margin
   negativo, panel oculto hasta .is-open). No se han borrado de alli para
   no tocar un archivo compartido en caliente; se PISAN aqui abajo, en la
   seccion 5. Cuando se limpien de site.css, esos reseteos sobran.
   ===================================================================== */

/* ================= 1. BASE ================= */
/* Fondos: el mismo sistema de textura + velo que el resto del sitio, no colores
   planos. Claras -> piedra suavizada con velo crema al .94; oscuras -> hiedra con
   velo noche al .88. Los valores salen tal cual de site.css: si alli se retocan,
   hay que retocarlos aqui tambien. */
.ecc-patio-sec {
	padding: clamp(3.5rem, 9vw, 7.5rem) clamp(1.25rem, 5vw, 4rem);
	background-color: var(--ecc-hueso);   /* respaldo si la textura no carga */
	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;
	/* Sobre crema, el ambar y la piedra de marca no llegan a AA: se usan los
	   valores quemados de las secciones claras (correccion del 2026-08-03). */
	--ecc-ambar: #7B5620;
	--ecc-piedra: #5F5340;
}
.ecc-patio-sec--dark {
	color: var(--ecc-hueso);
	background-color: var(--ecc-noche);
	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;
	/* Sobre hiedra vuelven los tonos de marca. */
	--ecc-ambar: #E8A33D;
	--ecc-piedra: #B9A98C;
}
/* El sitio no define fuente global: site.css declara Archivo componente a componente
   y el body cae en -apple-system. Aqui faltaba en 16 elementos (nota del hero, textos
   editoriales, parrafos de intro, flechas del plano y los <dd> de 'Antes de venir'),
   que se veian en la fuente del sistema. Los titulares (Fraunces), los antetitulos
   (Space Mono) y los botones declaran la suya y no se ven afectados. 2026-08-04. */
.ecc-patio-hero,
.ecc-patio-sec,
.ecc-patio-cierre {
	font-family: 'Archivo', system-ui, sans-serif;
}
.ecc-patio-wrap {
	max-width: 1180px;
	margin: 0 auto;
}
.ecc-patio-sec h2,
.ecc-patio-cierre h2 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-style: normal;            /* la cursiva se reserva al h1 del hero */
	line-height: 1.1;
	letter-spacing: -.01em;
	margin: 0;
	font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
}
.ecc-patio-eyebrow {
	font-family: 'Space Mono', monospace;
	font-size: .75rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin: 0 0 1rem;
	color: var(--ecc-ambar);
}
.ecc-patio-intro {
	max-width: 38rem;
}
.ecc-patio-intro p {
	margin: 1.25rem 0 0;
}
/* :not() a proposito: el eyebrow tambien es un <p> dentro de .ecc-patio-intro, y sin
   esto esta regla (mas especifica) le robaba el ambar y lo dejaba en piedra. */
.ecc-patio-sec--dark .ecc-patio-intro p:not(.ecc-patio-eyebrow) {
	color: #cfc4b3;
}

/* Botones: mismo aire que los del resto del sitio, con area tactil de 48px. */
.ecc-patio-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .85rem 1.6rem;
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	border: 1.5px solid transparent;
	border-radius: 2px;
	transition: transform .15s ease, background-color .15s ease;
}
/* Mismo lenguaje que el resto del sitio: primario ambar de marca sobre texto noche,
   secundario con borde crema al 50%. Antes el primario era crema y el borde opaco,
   y desentonaba con .ecc-btn--primary / .ecc-bar__btn / .ecc-priv__btn. 2026-08-04. */
/* El hex va a pelo Y NO `var(--ecc-ambar)` a proposito (2026-08-05). En las secciones claras
   `.ecc-patio-sec` esa variable esta redefinida a #7B5620, un marron oscuro, para que el TEXTO
   ambar se lea sobre el fondo crema. Como relleno de boton con texto `--ecc-noche` daba 2,71:1,
   por debajo del 4,5 exigible, y se veia como un boton apagado. Con el ambar real: 8,27:1. */
.ecc-patio-btn--pri { background: #E8A33D; color: var(--ecc-noche); }
.ecc-patio-btn--sec { border-color: rgba(239,230,216,.5); color: inherit; }
/* El tema pone `.page-content a { text-decoration: underline }` y esta pagina se
   sirve dentro de .page-content: subrayaba los botones y duplicaba el subrayado de
   los enlaces de tarjeta, que ya llevan su propio border-bottom. Se gana por
   especificidad (0,2,0 > 0,1,1), no con !important. Medido el 2026-08-04. */
.page-content .ecc-patio-btn,
.page-content .ecc-patio-forma a,
.page-content .ecc-patio-cierre__sec { text-decoration: none; }
.ecc-patio-btn:hover { transform: translateY(-2px); }
.ecc-patio-btn:focus-visible,
.ecc-patio-map button:focus-visible,
.ecc-patio-map__list button:focus-visible,
.ecc-patio-forma a:focus-visible {
	outline: 3px solid var(--ecc-ambar);
	outline-offset: 3px;
}

/* ================= 2. HERO ================= */
.ecc-patio-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(92vh, 820px);
	padding: clamp(1.25rem, 5vw, 4rem);
	padding-bottom: clamp(3rem, 7vw, 5.5rem);
	color: var(--ecc-hueso);
	isolation: isolate;
	overflow: hidden;
}
.ecc-patio-hero__media,
.ecc-patio-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
/* Velo discreto y solo por abajo: el texto se lee, el porton no se tapa. */
.ecc-patio-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top,
		rgba(27,23,18,.88) 0%,
		rgba(27,23,18,.55) 42%,
		rgba(27,23,18,.15) 100%);
}
.ecc-patio-hero__in { max-width: 44rem; }
.ecc-patio-hero__h1 {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;            /* unica cursiva de la pagina */
	font-weight: 400;
	font-size: clamp(3rem, 1.5rem + 8vw, 6.5rem);
	line-height: 1;
	margin: 0 0 .15em;
}
.ecc-patio-hero__lead {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(1.35rem, 1rem + 1.4vw, 2.15rem);
	line-height: 1.25;
	margin: 0 0 .7em;
}
.ecc-patio-hero__nota {
	max-width: 34rem;
	color: #e6dccc;
	margin: 0;
}
.ecc-patio-hero__cta {
	display: flex;
	gap: .9rem;
	flex-wrap: wrap;
	margin: 2rem 0 0;
}

/* ================= 3. PIEDRA, HIEDRA Y DOS PALMERAS ================= */
.ecc-patio-edit {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
@media (min-width: 900px) {
	.ecc-patio-edit { grid-template-columns: 1fr 1fr; }
}
.ecc-patio-edit__txt { margin: 1.5rem 0 0; max-width: 32rem; }
.ecc-patio-edit__fig { margin: 0; }
.ecc-patio-edit__fig img { width: 100%; height: auto; }

/* El aforo, en tipografia y con un filete. Nada de tarjeta con icono. */
.ecc-patio-dato {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin: 2.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(74,66,56,.25);
}
.ecc-patio-dato b {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: clamp(2.6rem, 2rem + 3vw, 4.2rem);
	line-height: .9;
	color: var(--ecc-hiedra);
}
.ecc-patio-dato span {
	font-family: 'Space Mono', monospace;
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	max-width: 11rem;
}

/* ================= 4. EL PATIO CAMBIA CON LAS HORAS ================= */
.ecc-patio-horas {
	display: grid;
	gap: 1px;
	background: rgba(239,230,216,.18);   /* el hueco entre fotos hace de filete */
	margin-top: 3rem;
}
@media (min-width: 820px) {
	/* En escritorio las tres fotos van ligeramente separadas (peticion del
	   usuario 2026-08-05): 5 px de hueco y sin filete, para que se vea el fondo
	   entre ellas. En movil se apilan y se queda el filete de 1 px de arriba. */
	.ecc-patio-horas { grid-template-columns: repeat(3, 1fr); gap: 5px; background: transparent; }
}
.ecc-patio-hora {
	position: relative;
	margin: 0;
	background: var(--ecc-noche);
}
.ecc-patio-hora img { width: 100%; height: auto; display: block; }
.ecc-patio-hora__t {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 1.5rem;
	/* Paradas calibradas: el rotulo de la hora cae al 82% de alto de la caja. Con fotos
	   claras (patio-hora-1) el degradado original ya era transparente ahi y el texto se
	   perdia. Ver informe 2026-08-04. */
	background: linear-gradient(to top,
		rgba(27,23,18,.95) 0%,
		rgba(27,23,18,.90) 55%,
		rgba(27,23,18,.72) 85%,
		rgba(27,23,18,0) 100%);
}
.ecc-patio-hora__h,
.ecc-patio-hora__n { display: block; }
.ecc-patio-hora__h {
	font-family: 'Space Mono', monospace;
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ecc-ambar);
	margin-bottom: .4rem;
}
.ecc-patio-hora__n {
	font-family: 'Fraunces', Georgia, serif;
	/* En redonda: la cursiva de la pagina esta reservada al h1 del hero.
	   site.css pone en italica los textos sobre foto, de ahi el reseteo. */
	font-style: normal;
	font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem);
	line-height: 1.15;
	color: var(--ecc-hueso);
}

/* ================= 5. EL PLANO ================= */
.ecc-patio-map {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin-top: 2.5rem;
}
@media (min-width: 980px) {
	.ecc-patio-map { grid-template-columns: 1.55fr 1fr; align-items: start; }
}
/* Los puntos no van sobre el crema de la seccion: van sobre la acuarela. Ahi el
   ambar quemado de las secciones claras los apaga y cuesta verlos, asi que se
   devuelve el de marca dentro del dibujo. */
.ecc-patio-map__stage {
	position: relative;
	line-height: 0;
	--ecc-ambar: #E8A33D;
}
.ecc-patio-map__stage .ecc-patio-map__img { width: 100%; height: auto; display: block; }

/* Reseteo de la version anterior: el punto era un div de 18px con margin
   negativo y color de fondo propio. Ahora es un <button> de 44px (area
   tactil) con el circulo pintado en ::before, para que el objetivo sea
   grande sin que el punto se vea gordo. */
.ecc-patio-map__stage .ecc-patio-map__point {
	position: absolute;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}
.ecc-patio-map__stage .ecc-patio-map__point::before {
	content: "";
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ecc-ambar);
	border: 2.5px solid #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.45);
	transition: transform .18s ease, background-color .18s ease;
}
.ecc-patio-map__stage .ecc-patio-map__point[aria-pressed="true"]::before {
	transform: scale(1.45);
	background: var(--ecc-hiedra);
}
@media (prefers-reduced-motion: reduce) {
	.ecc-patio-map__stage .ecc-patio-map__point::before { transition: none; }
}

/* El panel es una isla oscura DENTRO de una seccion crema, asi que heredaria el
   ambar y la piedra quemados de la seccion clara. Se restauran los de marca y se
   le pone la misma hiedra que a las secciones oscuras — mismo apano que usa
   .page-id-12 .ecc-priv en site.css. */
.ecc-patio-map__panel {
	color: var(--ecc-hueso);
	background-color: var(--ecc-noche);
	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;
	padding: clamp(1.5rem, 3vw, 2rem);
	align-self: start;
}
@media (min-width: 980px) {
	.ecc-patio-map__panel { position: sticky; top: 1.5rem; }
}
/* En la version anterior el panel estaba display:none hasta .is-open. Ahora
   arranca con una zona ya elegida, asi que se ve desde el principio. */
.ecc-patio-map__panel .ecc-patio-map__panel-inner { display: block; padding: 0; background: none; }
.ecc-patio-map__panel-img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin-bottom: 1.25rem;
}
.ecc-patio-map__panel .ecc-patio-map__panel-title {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 1.6rem;
	color: var(--ecc-hueso);
	margin: 0 0 .6rem;
}
.ecc-patio-map__panel .ecc-patio-map__panel-desc { color: #ded3c2; margin: 0; }

.ecc-patio-map__nav {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(239,230,216,.2);
}
.ecc-patio-map__nav button {
	width: 48px;
	height: 48px;
	border: 1.5px solid rgba(239,230,216,.45);
	background: none;
	color: var(--ecc-hueso);
	font-size: 1.1rem;
	border-radius: 2px;
	cursor: pointer;
}
.ecc-patio-map__nav button:hover { background: rgba(239,230,216,.12); }
.ecc-patio-map__count {
	font-family: 'Space Mono', monospace;
	font-size: .8rem;
	letter-spacing: .1em;
	margin-left: auto;
	opacity: .8;
}

/* Lista de zonas: la via de entrada cuando los puntos del dibujo son
   pequenos (movil) o no se distinguen bien. No es decoracion. */
.ecc-patio-map__list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}
.ecc-patio-map__list button {
	font-family: 'Space Mono', monospace;
	font-size: .7rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	min-height: 44px;
	padding: .6rem .9rem;
	border: 1px solid rgba(74,66,56,.3);
	background: none;
	color: inherit;
	cursor: pointer;
}
.ecc-patio-map__list button[aria-pressed="true"] {
	background: var(--ecc-noche);
	color: var(--ecc-hueso);
	border-color: var(--ecc-noche);
}

/* ================= 6. FORMAS DE VIVIRLO ================= */
.ecc-patio-formas {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2rem);
	margin-top: 3rem;
}
@media (min-width: 640px)  { .ecc-patio-formas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .ecc-patio-formas { grid-template-columns: repeat(4, 1fr); } }
/* Proporcion fija: tres de las cuatro fotos se recortaron a 4:5, pero la de
   celebraciones es fiestas-privadas.webp, que viene de otra pagina con su propia
   proporcion. Sin esto, esa tarjeta queda mas corta y descuadra la fila. */
.ecc-patio-forma img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	margin-bottom: 1.1rem;
}
.ecc-patio-forma h3 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	font-size: 1.35rem;
	margin: 0 0 .45rem;
}
.ecc-patio-forma p { font-size: .95rem; color: #cfc4b3; margin: 0 0 .8rem; }
.ecc-patio-forma a {
	font-family: 'Space Mono', monospace;
	font-size: .72rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ecc-ambar);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

/* 7. DETALLES: seccion retirada el 2026-08-05 (bloque «De cerca»). */

/* ================= 8. ANTES DE VENIR ================= */
/* Seccion CLARA desde el 2026-08-05: antes era --dark, pero al quitar el bloque de
   detalles quedaba pegada a «muchas formas de vivirlo», que ya es hiedra. */
.ecc-patio-antes {
	display: grid;
	gap: 2rem;
	margin-top: 2.5rem;
}
@media (min-width: 900px) {
	.ecc-patio-antes { grid-template-columns: 1.4fr 1fr; align-items: start; }
}
.ecc-patio-antes dl { margin: 0; }
.ecc-patio-antes dt {
	font-family: 'Space Mono', monospace;
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ecc-ambar);
	padding-top: 1.1rem;
	border-top: 1px solid rgba(27,23,18,.18);
}
.ecc-patio-antes dd {
	margin: .35rem 0 1.1rem;
	font-size: 1.05rem;
	color: var(--ecc-piedra);
	max-width: 34rem;
}
.ecc-patio-antes__cta { margin: 0; }

/* ================= 9. CIERRE ================= */
.ecc-patio-cierre {
	position: relative;
	display: grid;
	align-items: center;
	min-height: min(75vh, 640px);
	padding: clamp(1.25rem, 5vw, 4rem);
	color: var(--ecc-hueso);
	isolation: isolate;
	overflow: hidden;
}
.ecc-patio-cierre > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
.ecc-patio-cierre::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(27,23,18,.72);
}
.ecc-patio-cierre__in {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
}
.ecc-patio-cierre__in p { margin: 1.25rem 0 0; color: #e2d8c8; }
.ecc-patio-cierre__cta {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 2rem 0 0;
}
.ecc-patio-cierre__sec {
	font-family: 'Space Mono', monospace;
	font-size: .72rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ecc-ambar);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

/* ================= 10. MOVIMIENTO ================= */
@media (prefers-reduced-motion: reduce) {
	.ecc-patio-btn:hover { transform: none; }
}