/* ==========================================================================
   BLUE LIZARD EFFECT — landing de autor (Pacifista Films)
   Línea gráfica PROPIA del documental (no la del archivo): base marina
   profunda, sistema de 4 elementos (agua/tierra/aire/fuego) con su color,
   líneas topográficas y recortes con contorno blanco (collage).
   Todo acotado a `.pf-lizard`.
   ========================================================================== */

.pf-lizard{
	--lz-tinta:   #EAF3F8;
	--lz-tinta-2: #9FB6C4;
	--lz-base:    #05121B;
	--lz-panel:   #0A2231;
	--lz-linea:   rgba(255,255,255,.14);

	/* Los 4 elementos (codificación de la propia serie) */
	--lz-water: #18A8E8;
	--lz-earth: #E4A62C;
	--lz-air:   #BcdCEC;
	--lz-fire:  #FF5A34;

	/* elemento activo (lo fija cada capítulo) */
	--lz-el: var(--lz-water);

	position: relative;
	background: var(--lz-base);
	color: var(--lz-tinta);
	font-family: var(--pf-body);
	overflow: clip;
}
.pf-lizard *{ box-sizing: border-box; }

/* Tipos display: reutilizamos Archivo Black del tema (mayúscula rotunda,
   igual que las bandas del documental). */
.pf-lizard h1,
.pf-lizard h2,
.pf-lizard h3,
.pf-lizard .lz-title,
.pf-lizard .lz-chapter__elem{ font-family: var(--pf-display); font-weight: 400; }

/* --- Textura topográfica reutilizable -------------------------------- */
.lz-topo{
	position: absolute;
	inset: -10% -10% -10% -10%;
	background: url("../img/blue-lizard/topo.svg") center / cover no-repeat;
	color: currentColor;         /* el SVG usa currentColor en el stroke */
	opacity: .18;
	pointer-events: none;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.lz-hero{
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: flex-end;
	padding: clamp(2rem, 6vw, 6rem);
	isolation: isolate;
	overflow: hidden;
}
.lz-hero__bg{
	position: absolute; inset: 0; z-index: -3;
	background: #000 center / cover no-repeat;
	transform: scale(1.05);
}
.lz-hero__veil{
	position: absolute; inset: 0; z-index: -2;
	background:
		radial-gradient(120% 90% at 20% 100%, rgba(5,18,27,.35), transparent 60%),
		linear-gradient(180deg, rgba(5,18,27,.55) 0%, rgba(5,18,27,.15) 35%, rgba(5,18,27,.85) 88%, var(--lz-base) 100%);
}
.lz-hero__topo{
	position: absolute; inset: 0; z-index: -1;
	color: var(--lz-fire);
	background: url("../img/blue-lizard/topo.svg") center / 130% no-repeat;
	opacity: .12;
	mix-blend-mode: screen;
	animation: lz-drift 40s ease-in-out infinite alternate;
}
@keyframes lz-drift{ from{ transform: translate3d(-2%, 1%, 0) scale(1.02); } to{ transform: translate3d(2%, -2%, 0) scale(1.08); } }

.lz-hero__inner{ position: relative; max-width: 60rem; }
.lz-kicker{
	font-family: var(--pf-mono);
	text-transform: uppercase;
	letter-spacing: .28em;
	font-size: var(--pf-t-sm);
	color: var(--lz-fire);
	margin: 0 0 var(--pf-s-4);
	display: flex; gap: .8ch; align-items: center;
}
.lz-kicker::before{ content: ""; width: 34px; height: 2px; background: var(--lz-fire); }

.lz-title{
	font-size: clamp(3rem, 2rem + 8vw, 8.5rem);
	line-height: .88;
	letter-spacing: -.02em;
	text-transform: uppercase;
	margin: 0;
	text-shadow: 0 6px 40px rgba(0,0,0,.5);
}
.lz-title span{
	display: block;
	color: transparent;
	-webkit-text-stroke: 2px var(--lz-tinta);
	text-stroke: 2px var(--lz-tinta);
}
.lz-hero__deck{
	font-size: var(--pf-t-lg);
	line-height: 1.5;
	max-width: 42rem;
	margin: var(--pf-s-5) 0 0;
	color: var(--lz-tinta);
}
.lz-hero__meta{
	display: flex; flex-wrap: wrap; gap: var(--pf-s-2) var(--pf-s-4);
	margin: var(--pf-s-5) 0 var(--pf-s-6);
	font-family: var(--pf-mono);
	font-size: var(--pf-t-sm);
	color: var(--lz-tinta-2);
}
.lz-hero__meta span{ display: inline-flex; align-items: center; gap: .6ch; }
.lz-hero__meta span + span::before{ content: "·"; margin-right: .6ch; color: var(--lz-fire); }

/* Botón de reproducción (tráiler y capítulos) */
.lz-play{
	appearance: none; cursor: pointer;
	font-family: var(--pf-mono); font-size: var(--pf-t-sm);
	text-transform: uppercase; letter-spacing: .14em;
	color: #06131c; background: var(--lz-fire);
	border: 0; padding: var(--pf-s-3) var(--pf-s-5);
	display: inline-flex; align-items: center; gap: var(--pf-s-3);
	transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, background .18s ease;
}
.lz-play svg{ width: 18px; height: 18px; }
.lz-play:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px color-mix(in srgb, var(--lz-fire) 45%, transparent); }
.lz-play:focus-visible{ outline: 3px solid #fff; outline-offset: 3px; }

.lz-hero__scroll{
	position: absolute; right: clamp(1rem,4vw,4rem); bottom: clamp(1rem,4vw,3rem);
	writing-mode: vertical-rl;
	font-family: var(--pf-mono); font-size: var(--pf-t-xs);
	letter-spacing: .3em; text-transform: uppercase; color: var(--lz-tinta-2);
	display: flex; align-items: center; gap: 1ch;
}
.lz-hero__scroll::after{ content: ""; width: 1px; height: 46px; background: linear-gradient(var(--lz-tinta-2), transparent); }

/* ==========================================================================
   INTRO / LOGLINE
   ========================================================================== */
.lz-wrap{ max-width: 74rem; margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 3rem); }

.lz-intro{ position: relative; padding: clamp(4rem, 10vw, 8rem) 0; }
.lz-intro__lead{
	font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem);
	line-height: 1.35; font-weight: 300; margin: 0; max-width: 40rem;
}
.lz-intro__lead b{ font-weight: 700; color: var(--lz-fire); }
.lz-intro__cols{
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--pf-s-6); margin-top: var(--pf-s-7);
}
.lz-intro__cols p{ margin: 0; color: var(--lz-tinta-2); line-height: 1.7; font-size: var(--pf-t-base); }
.lz-intro__cols h4{
	font-family: var(--pf-mono); text-transform: uppercase; letter-spacing: .18em;
	font-size: var(--pf-t-xs); color: var(--lz-fire); margin: 0 0 var(--pf-s-3);
}

/* ==========================================================================
   LOS CUATRO ELEMENTOS
   ========================================================================== */
.lz-elements{ padding-bottom: clamp(3rem, 8vw, 6rem); }
.lz-h2{
	font-size: clamp(1.6rem, 1rem + 3vw, 3.2rem);
	text-transform: uppercase; line-height: 1; margin: 0 0 var(--pf-s-3);
}
.lz-h2 em{ font-style: normal; color: var(--lz-fire); }
.lz-elements__intro{ color: var(--lz-tinta-2); max-width: 40rem; margin: 0 0 var(--pf-s-7); line-height: 1.6; }

.lz-chapters{ list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 5vw, 4rem); }

.lz-chapter{
	--lz-el: var(--lz-water);
	display: grid; grid-template-columns: 1.15fr .85fr; align-items: center;
	gap: clamp(1.4rem, 4vw, 3.5rem);
}
.lz-chapter[data-elem="water"]{ --lz-el: var(--lz-water); }
.lz-chapter[data-elem="earth"]{ --lz-el: var(--lz-earth); }
.lz-chapter[data-elem="air"]{   --lz-el: var(--lz-air); }
.lz-chapter[data-elem="fire"]{  --lz-el: var(--lz-fire); }
.lz-chapter:nth-child(even){ grid-template-columns: .85fr 1.15fr; }
.lz-chapter:nth-child(even) .lz-chapter__media{ order: 2; }

/* Media con "recorte" de contorno claro + banda topográfica */
.lz-chapter__media{ position: relative; }
.lz-play--still{
	display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
	position: relative; aspect-ratio: 16/9; overflow: hidden; background: #000;
	border: 3px solid var(--lz-tinta);
	box-shadow: 10px 10px 0 -1px color-mix(in srgb, var(--lz-el) 85%, transparent),
	            0 20px 50px rgba(0,0,0,.5);
	transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;
}
.lz-chapter__still{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, filter .3s ease; }
.lz-play--still:hover{ transform: translate(-2px,-2px); box-shadow: 14px 14px 0 -1px var(--lz-el), 0 26px 60px rgba(0,0,0,.6); }
.lz-play--still:hover .lz-chapter__still{ transform: scale(1.04); }
.lz-play--still:focus-visible{ outline: 3px solid #fff; outline-offset: 4px; }

.lz-play__glyph{
	position: absolute; inset: 0; margin: auto; width: 72px; height: 72px;
	display: grid; place-items: center; border-radius: 50%;
	background: color-mix(in srgb, var(--lz-el) 90%, transparent); color: #06131c;
	transition: transform .2s cubic-bezier(.68,-.35,.27,1.35);
}
.lz-play__glyph svg{ width: 26px; height: 26px; margin-left: 3px; }
.lz-play--still:hover .lz-play__glyph{ transform: scale(1.12); }

/* Texto del capítulo */
.lz-chapter__num{
	font-family: var(--pf-mono); font-size: var(--pf-t-sm); color: var(--lz-el);
	letter-spacing: .2em;
}
.lz-chapter__elem{
	display: inline-block; position: relative;
	font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); line-height: 1;
	text-transform: uppercase; margin: var(--pf-s-2) 0 var(--pf-s-3);
	color: var(--lz-tinta); padding: .06em .28em;
	background: color-mix(in srgb, var(--lz-el) 88%, #000);
	color: #06131c;
	isolation: isolate;
}
.lz-chapter__elem::before{  /* la textura topográfica dentro de la banda */
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: url("../img/blue-lizard/topo.svg") center / 200% no-repeat;
	color: #fff; opacity: .35; mix-blend-mode: overlay;
}
.lz-chapter__title{ font-size: var(--pf-t-lg); line-height: 1.15; margin: 0 0 var(--pf-s-3); }
.lz-chapter__desc{ color: var(--lz-tinta-2); line-height: 1.7; margin: 0 0 var(--pf-s-4); max-width: 34rem; }
.lz-chapter__dur{
	font-family: var(--pf-mono); font-size: var(--pf-t-xs); text-transform: uppercase;
	letter-spacing: .16em; color: var(--lz-tinta-2);
	display: inline-flex; align-items: center; gap: .7ch;
}
.lz-chapter__dur::before{ content: ""; width: 10px; height: 10px; background: var(--lz-el); border-radius: 50%; }

/* ==========================================================================
   FICHA TÉCNICA / DÓNDE VER
   ========================================================================== */
.lz-ficha{
	position: relative;
	margin-top: clamp(3rem, 8vw, 6rem);
	padding: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 10vw, 8rem);
	border-top: 1px solid var(--lz-linea);
	background: var(--lz-panel);
}
.lz-ficha__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--pf-s-6); }
.lz-ficha dt{ font-family: var(--pf-mono); text-transform: uppercase; letter-spacing: .16em; font-size: var(--pf-t-xs); color: var(--lz-fire); }
.lz-ficha dd{ margin: var(--pf-s-2) 0 var(--pf-s-5); font-size: var(--pf-t-md); line-height: 1.5; }
.lz-ficha__watch{ display: flex; flex-wrap: wrap; gap: var(--pf-s-4); margin-top: var(--pf-s-6); }
.lz-badge{
	font-family: var(--pf-mono); font-size: var(--pf-t-sm); letter-spacing: .12em; text-transform: uppercase;
	border: 1px solid var(--lz-linea); padding: var(--pf-s-3) var(--pf-s-5); color: var(--lz-tinta);
	text-decoration: none; transition: border-color .2s ease, color .2s ease;
}
.lz-badge:hover{ border-color: var(--lz-fire); color: var(--lz-fire); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 820px){
	.lz-chapter,
	.lz-chapter:nth-child(even){ grid-template-columns: 1fr; }
	.lz-chapter:nth-child(even) .lz-chapter__media{ order: 0; }
}

@media (prefers-reduced-motion: reduce){
	.lz-hero__topo{ animation: none; }
	.lz-play, .lz-play--still, .lz-chapter__still, .lz-play__glyph{ transition: none; }
	.lz-play--still:hover{ transform: none; }
	.lz-play--still:hover .lz-chapter__still{ transform: none; }
}