/* ==========================================================================
   Escuderos Publisher — Frontend
   Mobile-first. Tipografía fluida. Fotos full-bleed en móvil.
   ========================================================================== */

.ep-entrada {
	--ep-oro: #b89a5e;
	--ep-tinta: #2a2724;
	--ep-suave: #6b645c;
	--ep-fondo: #ffffff;
	--ep-crema: #faf8f5;
	--ep-ancho-texto: 680px;

	font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--ep-tinta);
	font-size: clamp(17px, 4.4vw, 19px);
	line-height: 1.75;
	overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   v1.7.2 — Animación al hacer scroll. La clase .ep-reveal solo la añade
   frontend.js (nunca sale del servidor), así que sin JS el contenido se ve
   normal desde el principio — nunca depende de la animación para ser visible.
   -------------------------------------------------------------------------- */

.ep-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.ep-reveal.ep-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.ep-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Tipografía
   -------------------------------------------------------------------------- */

.ep-entrada p {
	margin: 0 0 1.35em;
	text-align: left;          /* nunca justificado */
	hyphens: none;
	max-width: var(--ep-ancho-texto);
}

.ep-entrada h1,
.ep-h1-preview {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 400;
	font-size: clamp(28px, 7.2vw, 52px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 0.6em;
	padding: 0 20px;
	max-width: var(--ep-ancho-texto);
}

.ep-entrada h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 400;
	font-size: clamp(22px, 5.6vw, 34px);
	line-height: 1.25;
	margin: 2.6em 0 0.7em;
	color: var(--ep-tinta);
	max-width: var(--ep-ancho-texto);
}

.ep-entrada h3 {
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: clamp(19px, 4.8vw, 24px);
	line-height: 1.35;
	margin: 2em 0 0.5em;
	max-width: var(--ep-ancho-texto);
}

.ep-entrada a {
	color: var(--ep-oro);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Estructura: el texto lleva márgenes, las fotos no
   -------------------------------------------------------------------------- */

.ep-bloque {
	margin: 0 0 2.5rem;
}

.ep-bloque > h2,
.ep-bloque > h3,
.ep-texto {
	padding-left: 20px;
	padding-right: 20px;
}

.ep-texto > *:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Figuras
   -------------------------------------------------------------------------- */

.ep-figura {
	margin: 0 0 12px;
	line-height: 0;
	cursor: zoom-in;
	background: var(--ep-crema);
}

.ep-figura img {
	display: block;
	width: 100%;
	height: auto;
}

/* Nunca recortamos: la foto se ve entera, siempre */
.ep-figura img {
	object-fit: contain;
}

.ep-figura figcaption {
	font-size: 0.78em;
	line-height: 1.5;
	color: var(--ep-suave);
	padding: 8px 20px 0;
	font-style: italic;
}

.ep-fotos {
	margin-top: 1.5rem;
}

/* Pareja de horizontales apiladas (plantilla B) */
.ep-par {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Hero (plantilla D)
   -------------------------------------------------------------------------- */

.ep-hero {
	position: relative;
	margin-bottom: 2.5rem;
}

.ep-hero .ep-figura img {
	width: 100%;
	height: auto;
}

.ep-hero-titulo {
	position: absolute;
	inset: auto 0 0 0;
	padding: 24px 20px;
	background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
}

.ep-hero-titulo span {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(24px, 6.5vw, 44px);
	line-height: 1.2;
	color: #fff;
	max-width: 900px;
}

/* --------------------------------------------------------------------------
   Fotos sobrantes al final — v1.7.1: a ancho completo, ya no en rejilla de
   miniaturas (ver EP_Builder::galeria_final()).
   -------------------------------------------------------------------------- */

.ep-galeria-final {
	margin: 1.5rem 0 2rem;
}

/* --------------------------------------------------------------------------
   CTA WhatsApp
   -------------------------------------------------------------------------- */

.ep-cta {
	background: var(--ep-crema);
	border-top: 2px solid var(--ep-oro);
	padding: 28px 20px 32px;
	margin: 2.5rem 0;
	text-align: center;
}

.ep-cta p {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(19px, 5vw, 26px);
	line-height: 1.35;
	margin: 0 0 18px;
	max-width: 100%;
	text-align: center;
}

.ep-cta-btn {
	display: block;
	width: 100%;
	min-height: 52px;
	line-height: 52px;
	background: var(--ep-oro);
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: 15px;
	border-radius: 2px;
	transition: background .2s ease;
}

.ep-cta-btn:hover {
	background: #a3874f;
}

.ep-enlace-interno {
	padding: 0 20px;
	margin: 2rem 0;
	font-size: 0.95em;
}

.ep-enlace-interno a {
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.ep-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(12, 11, 10, .96);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: pan-y;
}

.ep-lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.ep-lightbox-cerrar,
.ep-lightbox-nav {
	position: absolute;
	background: rgba(0,0,0,.35);
	border: 0;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	width: 48px;
	height: 48px;
	cursor: pointer;
	border-radius: 50%;
}

.ep-lightbox-cerrar { top: 16px; right: 16px; }
.ep-lightbox-prev   { left: 12px;  top: 50%; transform: translateY(-50%); }
.ep-lightbox-next   { right: 12px; top: 50%; transform: translateY(-50%); }

.ep-lightbox-contador {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	text-align: center;
	color: rgba(255,255,255,.75);
	font-size: 14px;
}

/* ==========================================================================
   TABLET — 700px
   ========================================================================== */

@media (min-width: 700px) {

	.ep-entrada h1,
	.ep-h1-preview,
	.ep-bloque > h2,
	.ep-bloque > h3,
	.ep-texto,
	.ep-enlace-interno {
		padding-left: 40px;
		padding-right: 40px;
	}

	.ep-figura { margin-bottom: 20px; }

	.ep-par {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		padding: 0 40px;
	}

	.ep-cta {
		padding: 40px;
	}

	.ep-cta-btn {
		display: inline-block;
		width: auto;
		padding: 0 44px;
	}
}

/* ==========================================================================
   ESCRITORIO — 1000px
   ========================================================================== */

@media (min-width: 1000px) {

	.ep-entrada {
		--ep-ancho-texto: 720px;
	}

	.ep-entrada h1,
	.ep-h1-preview,
	.ep-bloque > h2,
	.ep-bloque > h3,
	.ep-texto,
	.ep-enlace-interno {
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 24px;
		padding-right: 24px;
	}

	.ep-figura:not(.ep-full):not(.ep-grid-item):not(.ep-hero-img) {
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
	}

	.ep-figura.ep-full img {
		width: 100%;
		height: auto;
	}

	/* A — Editorial: dos columnas alternas */
	.ep-editorial {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		align-items: center;
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5rem;
	}

	.ep-editorial .ep-texto {
		padding: 0 24px;
	}

	.ep-editorial.ep-der .ep-texto { order: 2; }
	.ep-editorial.ep-der .ep-fotos { order: 1; }

	.ep-editorial .ep-fotos { margin-top: 0; }

	.ep-cta {
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Respeta la preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	.ep-entrada * {
		animation: none !important;
		transition: none !important;
	}
}