/* ==========================================================================
   LA PUTA AGENCIA — main.css
   Tokens: negro editorial + rojo de marca + tipografía bold sans.
   Busca "PLACEHOLDER" en front-page.php para saber qué imágenes cambiar.
   ========================================================================== */

:root{
	--c-bg:        #0a0a0a;
	--c-bg-alt:    #131313;
	--c-surface:   #1a1a1a;
	--c-fg:        #f5f5f2;
	--c-muted:     #8f8f8a;
	--c-accent:    #ff2b1a;
	--c-line:      #2a2a2a;

	--f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--f-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

	--container: 1400px;
	--gap: 24px;
	--radius: 2px;

	--ease: cubic-bezier(.22,1,.36,1);
}

/* ==========================================================================
   TIPOGRAFÍAS PROPIAS — subidas por el cliente, usadas en el bucle del logo
   (assets/fonts/). Si cambiáis alguna, sustituid el archivo manteniendo el
   mismo nombre, o actualizad la ruta "src" aquí.
   ========================================================================== */
@font-face{
	font-family:'GroovyDay';
	src:url('../fonts/GroovyDay.ttf') format('truetype');
	font-weight:normal; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Squanded';
	src:url('../fonts/SQUANDED-Black.otf') format('opentype');
	font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'Squanded';
	src:url('../fonts/Squanded-Light.otf') format('opentype');
	font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
	font-family:'StreetExplorer';
	src:url('../fonts/StreetExplorer.otf') format('opentype');
	font-weight:normal; font-style:normal; font-display:swap;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	background:var(--c-bg);
	color:var(--c-fg);
	font-family:var(--f-body);
	font-size:16px;
	line-height:1.5;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:800; text-transform:uppercase; letter-spacing:-0.01em; }
p{ margin:0; }

.screen-reader-text{ position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); }

@media (prefers-reduced-motion: reduce){
	*{ animation-duration:0.01ms!important; transition-duration:0.01ms!important; scroll-behavior:auto!important; }
}

:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex; align-items:center; justify-content:center;
	padding:14px 28px;
	font-family:var(--f-display);
	font-weight:700;
	font-size:13px;
	line-height:1; /* sin esto, la fuente añade espacio invisible debajo del texto y el área clicable no coincide con lo que se ve */
	letter-spacing:0.06em;
	text-transform:uppercase;
	border-radius:999px;
	border:1.5px solid var(--c-fg);
	transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--solid{ background:var(--c-fg); color:var(--c-bg); }
.btn--solid:hover{ background:var(--c-accent); border-color:var(--c-accent); color:#fff; }
.btn--outline{ background:transparent; color:var(--c-fg); }
.btn--outline:hover{ background:var(--c-fg); color:var(--c-bg); }
.btn--lg{ padding:20px 40px; font-size:15px; }

.link-arrow{
	font-family:var(--f-display); font-weight:700; font-size:13px; letter-spacing:.06em;
	line-height:1;
	text-transform:uppercase; color:var(--c-muted); transition:color .2s var(--ease);
}
.link-arrow:hover{ color:var(--c-fg); }

.eyebrow{
	font-family:var(--f-display); font-weight:700; font-size:12px; letter-spacing:.14em;
	text-transform:uppercase; color:var(--c-accent); margin-bottom:18px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
	position:sticky; top:0; z-index:100;
	background:rgba(10,10,10,.85);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--c-line);
}
.site-header__inner{
	max-width:var(--container); margin:0 auto; padding:0 32px;
	height:76px; /* altura fija: aunque "puta" cambie de tamaño de letra, el header nunca crece ni encoge */
	display:grid; grid-template-columns:1fr 300px 1fr; align-items:center; gap:24px;
}
.site-nav--left{ justify-self:start; }
.site-nav--right{ justify-self:end; }
.site-nav-mobile{ display:none; } /* solo se muestra en móvil (ver media query más abajo) */
.site-logo{
	height:100%; /* también fija en altura, para que el texto interno no desborde verticalmente */
	font-family:var(--f-display); font-weight:800; font-size:20px; text-transform:lowercase;
	/* Ancho y alto fijos (heredados de la columna/altura de la rejilla) + texto centrado
	   dentro: así, aunque "puta" cambie de tipografía/tamaño en el bucle, el bloque del
	   logo NUNCA cambia de anchura ni de altura, ni empuja al menú de al lado. */
	display:flex; justify-content:center; align-items:center; text-align:center;
	white-space:nowrap; overflow:hidden;
}
/* Solo la palabra "puta" parpadea entre tipografías en bucle (como en el vídeo de
   referencia LPA_INTRO_.mp4) — "la" y "agencia." se quedan siempre en la misma fuente. */
/* "puta" vive en un hueco de tamaño FIJO (basado en la tipografía base, no en la
   de "puta"), y se posiciona en absoluto dentro de ese hueco — así, aunque cambie
   de tipografía/tamaño/line-height en el bucle, "la" y "agencia." no se enteran:
   ni se mueven en horizontal ni en vertical, ni un solo píxel. */
.puta-slot{
	display:inline-block;
	position:relative;
	width:110px;
	height:1em; /* misma altura que el resto del texto, siempre constante */
	vertical-align:baseline;
}
.site-logo__text em{
	position:absolute;
	left:0; right:0; top:50%;
	transform:translateY(-50%);
	text-align:center;
	line-height:1;
	font-style:italic;
	color:var(--c-accent);
	animation:lpa-font-cycle-header 4.8s steps(1, end) infinite;
}
@keyframes lpa-font-cycle-header{
	0%      { font-family:var(--f-display); font-weight:800; letter-spacing:0; font-size:20px; font-style:italic; }
	8.33%   { font-family:'Bebas Neue', var(--f-display); font-weight:400; letter-spacing:.06em; font-size:24px; font-style:normal; }
	16.67%  { font-family:'Space Mono', monospace; font-weight:700; letter-spacing:-.02em; font-size:17px; font-style:normal; }
	25%     { font-family:'Playfair Display', serif; font-weight:700; letter-spacing:0; font-size:22px; font-style:italic; }
	33.33%  { font-family:'Anton', var(--f-display); font-weight:400; letter-spacing:.02em; font-size:21px; font-style:normal; }
	41.67%  { font-family:'Permanent Marker', var(--f-display); font-weight:400; letter-spacing:0; font-size:19px; font-style:normal; }
	50%     { font-family:'Bungee Outline', var(--f-display); font-weight:400; letter-spacing:.01em; font-size:19px; font-style:normal; }
	58.33%  { font-family:'Dancing Script', var(--f-display); font-weight:700; letter-spacing:0; font-size:24px; font-style:normal; }
	66.67%  { font-family:'GroovyDay', var(--f-display); font-weight:400; letter-spacing:0; font-size:20px; font-style:normal; }
	75%     { font-family:'Squanded', var(--f-display); font-weight:900; letter-spacing:0; font-size:20px; font-style:normal; }
	83.33%  { font-family:'Squanded', var(--f-display); font-weight:300; letter-spacing:.02em; font-size:20px; font-style:normal; }
	91.67%  { font-family:'StreetExplorer', var(--f-display); font-weight:400; letter-spacing:0; font-size:19px; font-style:normal; }
	100%    { font-family:var(--f-display); font-weight:800; letter-spacing:0; font-size:20px; font-style:italic; }
}
@media (prefers-reduced-motion: reduce){
	.site-logo__text em{ animation:none; }
}
.footer-logo em{
	font-style:italic; font-weight:800; color:var(--c-accent);
}
.site-logo .dot, .footer-logo .dot{ color:var(--c-accent); }

.site-nav__list{ display:flex; gap:36px; }
.site-nav__list a{
	font-family:var(--f-display); font-weight:700; font-size:13px; letter-spacing:.05em;
	line-height:1; /* misma corrección: evita que el área clicable quede por debajo del texto visible */
	text-transform:uppercase; color:var(--c-fg); position:relative; padding-bottom:4px;
}
.site-nav__list a::after{
	content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--c-accent);
	transition:width .25s var(--ease);
}
.site-nav__list a:hover::after{ width:100%; }

.nav-toggle{
	justify-self:end;
	display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px;
}
.nav-toggle span{ width:24px; height:2px; background:var(--c-fg); }

/* ==========================================================================
   DVD BALLOON — vuestra carita en 3D (render tipo globo/tubo inflado) rebotando
   por la pantalla tipo salvapantallas de DVD. El movimiento lo controla
   assets/js/main.js, que también alterna estas clases de color al chocar contra
   un borde. Usamos filter (hue-rotate/grayscale) en vez de recolorear la imagen,
   así el brillo y las sombras 3D del render original se mantienen intactos.
   ========================================================================== */
.dvd-balloon{
	position:absolute; /* antes fixed: ahora se posiciona dentro del hero (.hero es position:relative) */
	top:0; left:0;
	width:479px; height:auto;
	z-index:40;
	pointer-events:none;
	will-change:transform, filter;
	filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));
	perspective:1200px; /* para que el giro en Y del icono (main.js) se vea con profundidad 3D real */
}
.dvd-balloon img{ transform-style:preserve-3d; }
.dvd-balloon img{ width:100%; height:auto; display:block; }

.dvd-balloon--red{ }  /* color original del render, sin filtro */
.dvd-balloon--pink img{ filter:hue-rotate(-24deg) saturate(1.05); }
.dvd-balloon--black img{ filter:grayscale(1) brightness(.4); }
.dvd-balloon--white img{ filter:grayscale(1) brightness(1.7) contrast(.85); }

/* Si el usuario prefiere menos movimiento, lo ocultamos en vez de animarlo */
@media (prefers-reduced-motion: reduce){
	.dvd-balloon{ display:none; }
}
/* El globo rojo no pega con la identidad propia (blanco/negro) de Faena Studio */
body.page-template-page-faena-studio-php .dvd-balloon{ display:none; }
/* Tamaño relativo al ancho de pantalla en tablet y móvil, escalado a la misma
   proporción visual que en escritorio (1000px), pero sin llegar nunca al 100vw
   exacto para que le quede margen y pueda seguir rebotando hasta los bordes reales. */
@media (max-width: 1200px){
	.dvd-balloon{ width:min(29vw, 479px); }
}
@media (max-width: 780px){
	.dvd-balloon{ width:min(27vw, 369px); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; min-height:92vh; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; opacity:.55; }
.hero__media::after{
	content:''; position:absolute; inset:0;
	background:linear-gradient(0deg, var(--c-bg) 0%, rgba(10,10,10,.2) 55%, rgba(10,10,10,.55) 100%);
}
/* hero__content ya no usa flex para anclarse abajo (eso obligaba al wordmark a
   compartir fila con él) — ahora se posiciona en absoluto, así el wordmark
   queda libre para ocupar el 100% del ancho real sin ningún cálculo de vw. */
.hero__content{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 32px 90px; max-width:900px; }

/* ==========================================================================
   HERO WORDMARK — imagen grande sustituyendo el titular, a ANCHO COMPLETO
   (rompe el padding/max-width del contenedor, borde a borde de la pantalla),
   con un toque muy leve de tele retro de los 90: líneas de escaneo y un
   parpadeo casi imperceptible de opacidad/contraste.
   ========================================================================== */
.hero__wordmark-wrap{
	position:relative;
	z-index:1;
	width:100%;
	overflow:hidden;
	margin-top:-242px; /* subido 250px más respecto al ajuste anterior (8px) */
}
/* Capa de resplandor: copia desenfocada y teñida de rojo, apilada DETRÁS de la
   imagen nítida — el mismo halo rojo alrededor del texto que se ve en el vídeo
   de referencia de Frend Studio (no es parpadeo, es un resplandor que respira). */
.hero__wordmark-glow{
	position:absolute; inset:0;
	width:100%; height:auto;
	z-index:0;
	filter:blur(14px) sepia(1) saturate(8) hue-rotate(-45deg) brightness(1.15);
	opacity:.6;
	animation:lpa-glow-breathe 3.4s ease-in-out infinite;
}
.hero__wordmark{
	position:relative;
	z-index:1;
	width:100%; height:auto; display:block;
}
/* Líneas de escaneo horizontales muy tenues sobre la imagen */
.hero__wordmark-wrap::after{
	content:'';
	position:absolute; inset:0;
	pointer-events:none;
	background:repeating-linear-gradient(
		0deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px,
		transparent 1px, transparent 3px
	);
	mix-blend-mode:overlay;
	z-index:2;
}
/* El halo "respira": crece y decrece de intensidad muy suavemente, en bucle infinito */
@keyframes lpa-glow-breathe{
	0%, 100%{ opacity:.5; filter:blur(14px) sepia(1) saturate(8) hue-rotate(-45deg) brightness(1.15); }
	50%{ opacity:.75; filter:blur(18px) sepia(1) saturate(9) hue-rotate(-45deg) brightness(1.25); }
}
@media (prefers-reduced-motion: reduce){
	.hero__wordmark-glow{ animation:none; opacity:.6; }
}

/* Garabato a bolígrafo junto a "WE" y subrayados a mano bajo "DYNAMIC"/"CREATIVE",
   colocados en % sobre la imagen (se adaptan si la imagen escala) y dibujándose
   solos al cargar, como si alguien los trazara con un boli. */
.wordmark-doodle{ position:absolute; z-index:3; overflow:visible; pointer-events:none; opacity:.88; }
.wordmark-doodle--we{
	width:6%; height:auto;
	left:37%; top:18%;
	color:#f2f2ee;
}
.wordmark-doodle--dynamic{
	width:17%; height:auto;
	left:67%; top:20%;
	color:#f7f7f4;
}
.wordmark-doodle--creative{
	width:17%; height:auto;
	left:38.5%; top:40%;
	color:#f7f7f4;
}
/* Rayas del garabato de WE: se dibujan una detrás de otra, con duraciones y
   curvas de aceleración ligeramente distintas entre sí (una mano real nunca
   traza dos rayas exactamente igual de rápido) */
.doodle-path{ stroke-dasharray:60; stroke-dashoffset:60; }
.doodle-path--1{ animation:lpa-draw-doodle .38s cubic-bezier(.35,.6,.65,1) .15s forwards; }
.doodle-path--2{ animation:lpa-draw-doodle .3s cubic-bezier(.3,.7,.6,1) .34s forwards; }
.doodle-path--3{ animation:lpa-draw-doodle .42s cubic-bezier(.4,.5,.7,1) .48s forwards; }
.doodle-path--4{ animation:lpa-draw-doodle .33s cubic-bezier(.32,.65,.62,1) .66s forwards; }
/* Cada círculo empieza cuando el anterior ya ha terminado del todo, para que
   nunca se vean dos animaciones a la vez */
.underline-path{ stroke-dasharray:460; stroke-dashoffset:460; }
.underline-path--dynamic{ animation:lpa-draw-underline 1.1s cubic-bezier(.25,.4,.3,1) 1.15s forwards; }
.underline-path--creative{ animation:lpa-draw-underline 1.1s cubic-bezier(.25,.4,.3,1) 2.45s forwards; }
@keyframes lpa-draw-doodle{ to{ stroke-dashoffset:0; } }
@keyframes lpa-draw-underline{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){
	.doodle-path, .underline-path{ animation:none; stroke-dashoffset:0; }
}
@media (max-width: 780px){
	.wordmark-doodle{ display:none; } /* en móvil la imagen se ve pequeña, mejor sin overlays que se descuadren */
	/* El margen negativo de -242px estaba pensado para el escritorio, donde la imagen
	   es muy ancha y por tanto muy alta también. En móvil la imagen es más estrecha
	   (y por tanto mucho más baja), así que ese mismo margen la empujaba casi entera
	   fuera de la pantalla. Aquí la dejamos pegada justo debajo del header. */
	.hero__wordmark-wrap{ margin-top:0; }
	/* El hero ya no necesita forzar el 92% de la altura de pantalla (eso era para
	   cuando había texto dentro) — ahora solo contiene la imagen, así que dejamos
	   que la sección mida lo que ocupe la imagen, sin hueco negro vacío debajo */
	.hero{ min-height:0; }
}
.hero__title{
	font-size:clamp(48px, 8vw, 108px); line-height:.92; margin-bottom:24px;
}
.hero__subtitle{
	font-family:var(--f-display); font-weight:500; font-style:italic; font-size:clamp(18px,2.2vw,26px);
	color:var(--c-muted); margin-bottom:36px; max-width:560px;
}

/* ==========================================================================
   SERVICE SPLIT (dos paneles grandes, cada uno con un carrusel de fotos que
   cambia solo y rápido en bucle, tipo Frend Studio)
   ========================================================================== */
.service-split{ display:grid; grid-template-columns:1fr 1fr; }
.service-split__panel{ position:relative; aspect-ratio:1/1.15; overflow:hidden; }

.service-split__slideshow{ position:absolute; inset:0; z-index:0; }
.service-split__slide{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
	filter:grayscale(55%) brightness(.6);
	opacity:0;
}
.service-split__slide.is-active{ opacity:1; }
.service-split__panel:hover .service-split__slide.is-active{ filter:grayscale(0%) brightness(.7); }

.service-split__text{
	position:relative; z-index:1; height:100%;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	text-align:center;
	padding:48px; gap:16px; pointer-events:none; /* el texto no bloquea el hover del carrusel */
}
.service-split__text h2{ font-size:clamp(28px,3.4vw,44px); line-height:1.02; }
.service-split__text p{ color:#d7d7d2; max-width:420px; font-size:15px; }
.service-split__text .btn{ align-self:center; margin-top:8px; pointer-events:auto; background:var(--c-accent); color:#fff; border-color:var(--c-accent); } /* el botón sí es clicable */
.service-split__text .btn:hover{ background:#fff; color:var(--c-accent); border-color:#fff; }

/* ==========================================================================
   WORK SECTIONS (grid de proyectos)
   ========================================================================== */
.work-section{ padding:120px 32px 40px; max-width:var(--container); margin:0 auto; }
.work-section__head{
	display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px;
	margin-bottom:48px; border-bottom:1px solid var(--c-line); padding-bottom:32px;
}
.work-section__head h2{ font-size:clamp(30px,4vw,52px); line-height:1; }
.work-section__head p{ font-family:var(--f-display); font-style:italic; color:var(--c-muted); font-size:18px; margin-top:8px; }

.work-carousel{ overflow:hidden; }
.work-carousel__track{
	display:flex; gap:var(--gap);
	transition:transform .7s var(--ease);
}
.work-carousel__track .work-card{
	flex:0 0 calc((100% - 3 * var(--gap)) / 4); /* 4 tarjetas visibles en escritorio */
}
.work-card{
	display:block; overflow:hidden;
	/* Estado inicial para la animación de entrada al hacer scroll (ver .work-card.is-visible
	   y el IntersectionObserver en main.js) — empieza invisible y desplazada hacia abajo */
	opacity:0; transform:translateY(36px);
	transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.work-card.is-visible{ opacity:1; transform:translateY(0); }
.work-card img{
	width:100%; aspect-ratio:1/1; object-fit:cover;
	filter:grayscale(40%); transition:transform .6s var(--ease), filter .4s var(--ease);
}
.work-card:hover img{ transform:scale(1.08); filter:grayscale(0%); }
.work-card h3{
	font-size:15px; margin-top:14px; letter-spacing:.02em;
	transform:translateY(0); transition:transform .4s var(--ease), color .4s var(--ease);
}
.work-card:hover h3{ transform:translateY(-4px); color:var(--c-accent); }
@media (prefers-reduced-motion: reduce){
	.work-card{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   SIGNATURE QUOTE (elemento distintivo: palabra grande sobre foto)
   ========================================================================== */
.signature-quote{ position:relative; height:56vh; min-height:380px; overflow:hidden; margin-top:80px; }
.signature-quote__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:grayscale(100%) brightness(.5); }
.signature-quote__text{
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	font-family:var(--f-display); font-weight:900; text-transform:uppercase;
	font-size:clamp(60px, 14vw, 220px); line-height:1; color:var(--c-fg); letter-spacing:-.02em;
}
.signature-quote__text span{ color:var(--c-accent); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials{ padding:120px 32px; max-width:var(--container); margin:0 auto; }
.testimonials__title{ font-size:clamp(30px,4vw,52px); line-height:1; margin-bottom:56px; }
.testimonials__track{
	display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--gap);
}
.testimonial-card{
	margin:0; background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius);
	padding:32px; display:flex; flex-direction:column; justify-content:space-between; min-height:280px;
}
.testimonial-card p{ font-size:16px; line-height:1.55; color:#e2e2dd; }
.testimonial-card footer{ margin-top:24px; display:flex; flex-direction:column; gap:2px; }
.testimonial-card__name{ font-family:var(--f-display); font-weight:700; font-size:13px; text-transform:uppercase; }
.testimonial-card__client{ color:var(--c-accent); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }

/* ==========================================================================
   PRESS STRIP (marquee)
   ========================================================================== */
.press-strip{ border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); padding:40px 0; overflow:hidden; }
.press-strip__label{
	text-align:center; font-family:var(--f-display); font-weight:700; font-size:12px;
	letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted); margin-bottom:28px;
}
.press-strip__marquee{ overflow:hidden; }
.press-strip__track{
	display:flex; gap:64px; width:max-content;
	animation:lpa-marquee 32s linear infinite;
}
.press-strip__item{
	font-family:var(--f-display); font-weight:800; font-size:22px; text-transform:uppercase;
	color:var(--c-fg); opacity:.55; white-space:nowrap;
}
@keyframes lpa-marquee{
	from{ transform:translateX(0); }
	to{ transform:translateX(-50%); }
}

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.final-cta{
	padding:160px 32px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:40px;
}
.final-cta h2{ font-size:clamp(38px,6vw,84px); line-height:.95; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ border-top:1px solid var(--c-line); background:var(--c-bg-alt); padding:100px 32px 40px; }
.site-footer__top{
	max-width:var(--container); margin:0 auto 80px;
	display:grid; grid-template-columns:1.3fr 1fr; gap:60px;
}
.footer-newsletter__title{ font-size:clamp(32px,4vw,56px); line-height:.98; margin-bottom:32px; }
.footer-newsletter__form{ display:flex; gap:12px; max-width:480px; flex-wrap:wrap; }
.footer-newsletter__form input{
	flex:1; min-width:200px; background:transparent; border:none; border-bottom:1.5px solid var(--c-line);
	color:var(--c-fg); font-family:var(--f-display); font-size:14px; letter-spacing:.05em; padding:12px 4px;
	text-transform:uppercase;
}
.footer-newsletter__form input::placeholder{ color:var(--c-muted); }
.footer-newsletter__form input:focus{ outline:none; border-color:var(--c-accent); }
.footer-newsletter__legal{ margin-top:16px; font-size:12px; color:var(--c-muted); }

.footer-contact__title{ font-size:22px; margin-bottom:20px; }
.footer-contact__list{ display:flex; flex-direction:column; gap:10px; }
.footer-contact__list a:hover{ color:var(--c-accent); }
.footer-contact__list li{ color:#c9c9c4; font-size:14px; }

.site-footer__bottom{
	max-width:var(--container); margin:0 auto; padding-top:40px; border-top:1px solid var(--c-line);
	display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; align-items:center;
}
/* ==========================================================================
   FOOTER LOGO CYCLE — el logo se queda fijo en el mismo sitio y la tipografía
   va cambiando de golpe cada pocos segundos, como un GIF en bucle (igual que
   el vídeo de referencia LPA_INTRO_.mp4). Usamos @keyframes con paradas fijas:
   aunque font-family no es una propiedad "animable" de verdad, el navegador
   la cambia de golpe en cada parada, que es exactamente el efecto que buscamos.
   ========================================================================== */
.footer-logo-cycle-wrap{
	width:100%;
	order:-1;
	border-top:1px solid var(--c-line);
	border-bottom:1px solid var(--c-line);
	padding:32px 0;
	margin-bottom:40px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.footer-logo-cycle{
	display:inline-block;
	text-transform:lowercase;
	color:var(--c-fg);
	font-family:var(--f-display);
	font-weight:800;
	font-size:40px;
	animation:lpa-font-cycle 10s steps(1, end) infinite;
}
.footer-logo-cycle em{ font-style:italic; color:var(--c-accent); }
.footer-logo-cycle .dot{ color:var(--c-accent); }

@keyframes lpa-font-cycle{
	0%   { font-family:var(--f-display); font-weight:800; letter-spacing:0; }
	20%  { font-family:'Bebas Neue', var(--f-display); font-weight:400; letter-spacing:.02em; font-size:46px; }
	40%  { font-family:'Space Mono', monospace; font-weight:700; letter-spacing:0; font-size:32px; }
	60%  { font-family:'Playfair Display', serif; font-style:italic; font-weight:700; font-size:40px; }
	80%  { font-family:'Anton', var(--f-display); font-weight:400; font-size:40px; }
	100% { font-family:var(--f-display); font-weight:800; font-size:40px; }
}
@media (prefers-reduced-motion: reduce){
	.footer-logo-cycle{ animation:none; }
}
.footer-links{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.footer-links__list{ display:flex; gap:24px; }
.footer-links__list a{ font-size:13px; line-height:1; color:var(--c-muted); }
.footer-links__list a:hover{ color:var(--c-fg); }
.footer-blurb{ font-size:13px; color:var(--c-muted); max-width:520px; }
.footer-copy{ font-size:12px; color:var(--c-muted); width:100%; margin-top:24px; }

/* ==========================================================================
   GENERIC PAGES (page.php / index.php / single.php)
   ========================================================================== */
.generic-content{ padding:160px 0 120px; min-height:50vh; }
.page-title{ font-size:clamp(36px,5vw,64px); margin-bottom:40px; }
.entry-content{ max-width:760px; font-size:17px; line-height:1.7; color:#d7d7d2; }
.entry-content p{ margin-bottom:20px; }
.single-thumb{ margin-bottom:48px; }
.single-thumb img{ width:100%; border-radius:var(--radius); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
	.work-carousel__track .work-card{ flex:0 0 calc((100% - 1 * var(--gap)) / 2); } /* 2 tarjetas visibles en tablet */
	.testimonials__track{ grid-template-columns:1fr 1fr; }
	.site-footer__top{ grid-template-columns:1fr; }
}

@media (max-width: 780px){
	.site-header__inner{ grid-template-columns:1fr auto 1fr; }

	/* En móvil, los dos menús de escritorio (izquierda/derecha del logo) se
	   ocultan del todo — se sustituyen por el panel único de abajo */
	.site-nav--left, .site-nav--right{ display:none; }

	.site-nav-mobile{
		display:block;
		position:fixed; inset:0 0 0 auto; width:78%; max-width:340px;
		background:var(--c-bg); border-left:1px solid var(--c-line);
		transform:translateX(100%); transition:transform .35s var(--ease);
		padding:116px 32px 40px; z-index:95; /* z:95 < header(100): la hamburguesa queda encima para cerrar */
	}
	.site-nav-mobile.is-open{ transform:translateX(0); }
	.site-nav-mobile__list{ display:flex; flex-direction:column; gap:28px; list-style:none; padding:0; margin:0; }
	.site-nav-mobile__list a{
		font-family:var(--f-display); font-weight:700; font-size:15px; letter-spacing:.05em;
		line-height:1; text-transform:uppercase; color:var(--c-fg);
	}
	.nav-toggle{ display:flex; }

	/* Móvil: logo SIEMPRE centrado y el menú (hamburguesa) a la derecha.
	   La columna 1 (1fr) queda vacía y hace de contrapeso a la 3, así el
	   logo (columna central 'auto') queda perfectamente centrado. */
	.site-logo{ grid-column:2; justify-self:center; }
	.nav-toggle{ grid-column:3; justify-self:end; }

	.service-split{ grid-template-columns:1fr; }
	.work-carousel__track .work-card{ flex:0 0 calc((100% - 1 * var(--gap)) / 2); } /* 2 tarjetas visibles */
	.testimonials__track{ grid-template-columns:1fr; }
	.work-section{ padding:80px 20px 20px; }
	.testimonials{ padding:80px 20px; }
	.final-cta{ padding:100px 20px; }
	.hero__content{ padding:0 20px 60px; }
	.site-header__inner{ padding:16px 20px; }
}

@media (max-width: 480px){
	.work-carousel__track .work-card{ flex:0 0 100%; } /* 1 tarjeta visible en móvil pequeño */
}

/* ==========================================================================
   RESERVA (páginas de formulario: page-reserva-contenido.php / page-reserva-marca.php)
   Fondo rojo de marca a pantalla completa, con los campos del formulario en
   blanco para que destaquen, igual que el ejemplo de referencia.
   ========================================================================== */
.reserva-page{
	background:var(--c-accent);
	min-height:100vh;
	padding:160px 32px 100px;
}
.reserva-page__inner{ max-width:640px; margin:0 auto; }
.reserva-page__title{
	font-family:var(--f-display); font-weight:800; text-transform:uppercase;
	font-size:clamp(30px,4vw,48px); line-height:1.05; color:#0a0a0a;
	text-align:center; margin-bottom:16px;
}
.reserva-page__subtitle{
	text-align:center; color:#1a1a1a; font-size:16px; max-width:480px;
	margin:0 auto 48px;
}

.reserva-form{ display:flex; flex-direction:column; gap:16px; }
.reserva-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.reserva-form__field input[type="text"],
.reserva-form__field input[type="email"],
.reserva-form__field select,
.reserva-form__field textarea{
	width:100%;
	background:#fff; color:#111;
	border:none; border-radius:2px;
	padding:16px 18px;
	font-family:var(--f-body); font-size:15px;
	resize:vertical;
}
.reserva-form__field input::placeholder,
.reserva-form__field textarea::placeholder{ color:#8a8a85; }
.reserva-form__field select{ appearance:auto; cursor:pointer; }
.reserva-form__field label:not(.screen-reader-text){
	display:block; margin-bottom:8px; font-weight:700; color:#0a0a0a; font-size:14px;
}

.reserva-form__fieldset{ border:none; padding:0; margin:8px 0; }
.reserva-form__fieldset legend{
	font-family:var(--f-display); font-weight:700; color:#0a0a0a; font-size:15px;
	margin-bottom:10px; padding:0;
}
.reserva-form__checkbox{
	display:flex; align-items:center; gap:10px;
	color:#1a1a1a; font-size:15px; margin-bottom:8px; cursor:pointer;
}
.reserva-form__checkbox input{ width:18px; height:18px; accent-color:#0a0a0a; cursor:pointer; }

.reserva-form__submit{
	background:#0a0a0a; color:#fff; border-color:#0a0a0a;
	margin-top:12px; width:100%;
}
.reserva-form__submit:hover{ background:#fff; color:#0a0a0a; border-color:#0a0a0a; }

.reserva-form__legal{
	text-align:center; font-size:13px; color:#1a1a1a; margin-top:8px;
}
.reserva-form__legal a{ text-decoration:underline; }

@media (max-width: 600px){
	.reserva-page{ padding:130px 20px 70px; }
	.reserva-form__row{ grid-template-columns:1fr; }
}

/* ==========================================================================
   FAENA STUDIO (page-faena-studio.php) — identidad visual propia: blanco/negro,
   números grandes de fondo, tal como en el dosier original de la submarca.
   Todo va bajo el prefijo .faena para no chocar con el resto de la web.
   ========================================================================== */
.faena{ background:#fff; color:#111; font-family:var(--f-body); }

.faena-hero{
	background:#0a0a0a; padding:140px 32px 80px; text-align:center;
}
.faena-hero__logo{ max-width:420px; width:100%; height:auto; margin:0 auto 24px; }
.faena-hero__tagline{ color:#f0f0ec; font-size:18px; font-style:italic; margin-bottom:10px; }
.faena-hero__address{ color:#8a8a85; font-size:13px; }

.faena-section{ padding:100px 32px; position:relative; max-width:1200px; margin:0 auto; }
.faena-section--white{ background:#fff; color:#111; }
.faena-section--dark{ background:#0a0a0a; color:#fff; max-width:none; }
.faena-section__num{
	position:absolute; top:20px; left:20px;
	font-family:var(--f-display); font-weight:900; font-size:clamp(90px,14vw,180px);
	color:#eee; line-height:1; z-index:0; user-select:none;
}
.faena-section__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.faena-section__title{
	position:relative; z-index:1; font-family:var(--f-display); font-weight:800;
	text-transform:uppercase; font-size:clamp(32px,4.5vw,52px); line-height:1.02; margin-bottom:8px;
}
.faena-section__title--white{ color:#fff; text-align:center; margin-bottom:48px; }
.faena-section__subtitle{ color:#666; font-size:16px; margin-bottom:32px; position:relative; z-index:1; }
.faena-section__body p{ font-size:16px; line-height:1.7; margin-bottom:18px; color:#333; }
.faena-section--white .faena-section__subtitle{ text-align:center; }
.faena-section--white > .faena-section__title{ text-align:center; }

/* Bloque foto + texto (El Espacio) */
.faena-split{ display:grid; grid-template-columns:1fr 1fr; }
.faena-split__media img{ width:100%; height:100%; object-fit:cover; display:block; min-height:340px; }
.faena-split__text{ background:#0a0a0a; color:#fff; padding:60px; display:flex; flex-direction:column; justify-content:center; }
.faena-split__text h3{ font-family:var(--f-display); font-weight:800; font-size:22px; text-transform:uppercase; margin-bottom:20px; }
.faena-split__text p{ color:#ccc; font-size:15px; line-height:1.7; margin-bottom:16px; }

/* Equipamiento (dos tarjetas) */
.faena-equip{ display:grid; grid-template-columns:1fr 1fr; }
.faena-equip__card{ padding:60px; }
.faena-equip__card--light{ background:#f2f2ef; color:#111; }
.faena-equip__card--dark{ background:#0a0a0a; color:#fff; display:flex; flex-direction:column; justify-content:center; }
.faena-equip__card h3{ font-family:var(--f-display); font-weight:800; font-size:30px; text-transform:uppercase; margin-bottom:20px; }
.faena-equip__card h4{ font-family:var(--f-display); font-weight:700; font-size:16px; text-transform:uppercase; margin-bottom:14px; }
.faena-equip__card ul{ list-style:none; padding:0; margin:0 0 12px; }
.faena-equip__card li{ padding:6px 0; font-size:15px; border-bottom:1px solid rgba(0,0,0,.08); }
.faena-equip__card--dark li{ border-bottom-color:rgba(255,255,255,.12); color:#ddd; }
.faena-equip__closing{ margin-top:24px; font-family:var(--f-display); font-style:italic; color:#999; font-size:15px; }

/* Packs / Servicios */
.faena-packs__item, .faena-services__item{ margin-bottom:28px; }
.faena-packs__item h4, .faena-services__item h4{
	font-family:var(--f-display); font-weight:700; font-size:17px; margin-bottom:6px;
	display:flex; flex-wrap:wrap; gap:10px; align-items:baseline;
}
.faena-packs__item h4 span{ font-style:italic; font-weight:400; color:var(--c-accent); font-size:15px; }
.faena-services__item h4 span{ font-style:italic; font-weight:400; color:#ff6a55; font-size:15px; }
.faena-packs__item p{ color:#555; font-size:14px; line-height:1.6; }
.faena-services__item p{ color:#ccc; font-size:14px; line-height:1.6; }
.faena-services{ max-width:700px; margin:0 auto; position:relative; z-index:1; }

/* Proyectos (vídeos) */
.faena-projects{
	display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
	position:relative; z-index:1; margin-top:20px;
}
.faena-project{ position:relative; aspect-ratio:3/4; overflow:hidden; background:#111; border-radius:2px; }
.faena-project__video{ width:100%; height:100%; object-fit:cover; display:block; }

/* Contacto */
.faena-contact{
	background:#0a0a0a; color:#fff; text-align:center; padding:120px 32px;
}
.faena-contact h2{ font-family:var(--f-display); font-weight:800; font-size:clamp(32px,5vw,60px); line-height:1.02; margin-bottom:32px; }
.faena-contact__email{
	display:inline-block; font-family:var(--f-display); font-weight:700; font-size:clamp(20px,3vw,30px);
	color:var(--c-accent); border-bottom:2px solid var(--c-accent); padding-bottom:6px; margin-bottom:24px;
}
.faena-contact__address{ color:#999; font-size:14px; }

@media (max-width: 900px){
	.faena-section__grid{ grid-template-columns:1fr; gap:24px; }
	.faena-split{ grid-template-columns:1fr; }
	.faena-equip{ grid-template-columns:1fr; }
	.faena-projects{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px){
	.faena-hero{ padding:120px 20px 60px; }
	.faena-section{ padding:70px 20px; }
	.faena-split__text, .faena-equip__card{ padding:40px 24px; }
	.faena-projects{ grid-template-columns:1fr 1fr; gap:12px; }
	.faena-contact{ padding:80px 20px; }
}

/* ==========================================================================
   SOBRE NOSOTROS (page-sobre-nosotros.php) — misma identidad negro/rojo del
   resto de la web, estructura inspirada en frendstudio.com/pages/about-us.
   ========================================================================== */
.about{ background:var(--c-bg); padding-top:100px; }

/* Dos huecos de vídeo lado a lado */
.about-hero-videos{
	display:grid; grid-template-columns:1fr 1fr; gap:var(--gap);
	max-width:var(--container); margin:0 auto; padding:0 32px 60px;
}
.about-hero-videos__slot{ aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius); }
.about-hero-videos__slot img,
.about-hero-videos__slot video{ width:100%; height:100%; object-fit:cover; display:block; }

/* Foto grande de equipo, a ancho completo */
.about-team-photo{ width:100%; margin-bottom:100px; }
.about-team-photo img{ width:100%; height:auto; display:block; max-height:70vh; object-fit:cover; }

/* Perfiles del equipo, alternando foto/texto */
.about-team{ max-width:var(--container); margin:0 auto; padding:0 32px; }
.about-team__member{
	display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
	margin-bottom:120px;
}
.about-team__member--reverse{ direction:rtl; }
.about-team__member--reverse > *{ direction:ltr; }
.about-team__photo{ aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius); background:var(--c-bg-alt); }
.about-team__photo img{ width:100%; height:100%; object-fit:contain; filter:grayscale(30%); }
.about-team__text h2{
	font-size:clamp(26px,3vw,38px); line-height:1.1; margin-bottom:20px;
}
.about-team__text h2 span{
	display:block; font-family:var(--f-display); font-weight:500; font-style:italic;
	font-size:0.55em; color:var(--c-accent); text-transform:none; margin-top:8px;
}
.about-team__text p{ color:#d7d7d2; font-size:16px; line-height:1.7; max-width:480px; }

/* Servicios */
.about-services{ max-width:var(--container); margin:0 auto; padding:60px 32px 120px; }
.about-services__title{
	font-size:clamp(28px,3.6vw,44px); text-align:center; margin-bottom:56px;
}
.about-services__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--gap); }
.about-services__card{ display:block; }
.about-services__card img{
	width:100%; aspect-ratio:6/5; object-fit:cover; margin-bottom:20px;
	filter:grayscale(40%); transition:filter .4s var(--ease), transform .5s var(--ease);
}
.about-services__card:hover img{ filter:grayscale(0%); transform:scale(1.03); }
.about-services__card h3{ font-size:19px; margin-bottom:10px; }
.about-services__card p{ color:var(--c-muted); font-size:14px; line-height:1.6; margin-bottom:12px; }

/* CTA final */
.about-cta{
	text-align:center; padding:140px 32px; display:flex; flex-direction:column;
	align-items:center; gap:32px;
}
.about-cta h2{ font-size:clamp(36px,6vw,72px); }

@media (max-width: 900px){
	.about-team__member{ grid-template-columns:1fr; gap:28px; }
	.about-team__member--reverse{ direction:ltr; } /* en móvil no hace falta invertir el orden */
	.about-services__grid{ grid-template-columns:1fr; }
}
@media (max-width: 780px){
	.about{ padding-top:80px; }
	.about-hero-videos{ grid-template-columns:1fr; padding:0 20px 40px; }
	.about-team{ padding:0 20px; }
	.about-team__member{ margin-bottom:70px; }
	.about-team-photo{ margin-bottom:60px; }
	.about-services{ padding:40px 20px 80px; }
	.about-cta{ padding:100px 20px; }
}

/* ------------------------------------------------------------------ */
/* LIGHTBOX DE PROYECTOS (ver footer.php + main.js)                    */
/* ------------------------------------------------------------------ */
.project-lightbox{
	position:fixed; inset:0; z-index:900;
	display:flex; align-items:center; justify-content:center;
	opacity:0; visibility:hidden;
	transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.project-lightbox.is-open{
	opacity:1; visibility:visible;
	transition:opacity .3s var(--ease), visibility 0s linear 0s;
}
.project-lightbox__backdrop{
	position:absolute; inset:0;
	background:rgba(10,10,10,.92);
	backdrop-filter:blur(6px);
}
.project-lightbox__inner{
	position:relative; z-index:1;
	width:min(1100px, 92vw);
	max-height:88vh;
	display:flex; align-items:center; justify-content:center;
}
.project-lightbox__stage{
	display:flex; flex-direction:column; align-items:center;
	max-height:88vh;
}
.project-lightbox__img{
	max-width:100%; max-height:66vh;
	object-fit:contain;
	border:1px solid var(--c-line);
	opacity:0; transform:scale(.98);
	transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.project-lightbox__img.is-loaded{ opacity:1; transform:scale(1); }
.project-lightbox__caption{ text-align:center; margin-top:20px; max-width:640px; }
.project-lightbox__caption h3{
	font-size:clamp(20px,3vw,30px); color:var(--c-fg); margin-bottom:6px;
}
.project-lightbox__caption p{
	color:var(--c-muted); font-size:15px; line-height:1.5;
}
.project-lightbox__caption p:empty{ display:none; }
.project-lightbox__counter{
	display:block; margin-top:10px;
	font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-accent);
}
.project-lightbox__close{
	position:absolute; top:-8px; right:-8px;
	width:44px; height:44px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:var(--c-surface); color:var(--c-fg); border:1px solid var(--c-line);
	font-size:18px; line-height:1; transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
	z-index:2;
}
.project-lightbox__close:hover{ background:var(--c-accent); color:#fff; transform:rotate(90deg); }
.project-lightbox__nav{
	position:absolute; top:50%; translate:0 -50%;
	width:52px; height:52px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:var(--c-surface); color:var(--c-fg); border:1px solid var(--c-line);
	font-size:26px; line-height:1;
	transition:background .2s var(--ease), color .2s var(--ease), scale .2s var(--ease);
}
.project-lightbox__nav:hover{ background:var(--c-accent); color:#fff; scale:1.06; }
.project-lightbox__nav--prev{ left:-8px; }
.project-lightbox__nav--next{ right:-8px; }
.project-lightbox__nav[hidden]{ display:none; }

@media (max-width: 780px){
	.project-lightbox__inner{ width:100%; padding:0 56px; }
	.project-lightbox__img{ max-height:52vh; }
	.project-lightbox__nav{ width:42px; height:42px; font-size:20px; }
	.project-lightbox__nav--prev{ left:4px; }
	.project-lightbox__nav--next{ right:4px; }
	.project-lightbox__close{ top:4px; right:4px; }
}

/* ------------------------------------------------------------------ */
/* FORMULARIOS: honeypot anti-spam + avisos de éxito/error             */
/* (ver inc/formularios.php)                                           */
/* ------------------------------------------------------------------ */
.lpa-honeypot{
	position:absolute !important;
	left:-9999px !important;
	width:1px; height:1px; overflow:hidden;
}
.reserva-form__aviso{
	padding:16px 20px; margin-bottom:24px;
	border:1px solid var(--c-line); font-size:15px;
}
.reserva-form__aviso--ok{ border-color:var(--c-accent); color:var(--c-fg); }
.reserva-form__aviso--error{ border-color:#8a2a20; color:#ff8a7a; }
.footer-newsletter__aviso{
	margin:-8px 0 16px; font-size:14px; color:var(--c-accent);
}
.footer-newsletter__aviso--error{ color:#ff8a7a; }

/* ==========================================================================
   PÁGINAS INDIVIDUALES DE PROYECTO  (/proyectos/{slug}/)
   Dos maquetaciones: fotografía (rejilla feed) y branding (ancho completo).
   ========================================================================== */
.proyecto-single{ padding-top:110px; }               /* hueco bajo el header fijo */
.proyecto-head{ max-width:1200px; margin:0 auto; padding:40px 32px 8px; }
.proyecto-head__back{ display:inline-block; margin-bottom:22px; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; opacity:.55; text-decoration:none; color:inherit; }
.proyecto-head__back:hover{ opacity:1; }
.proyecto-head__title{ font-size:clamp(2.6rem, 9vw, 6.5rem); line-height:.92; margin:0; }
.proyecto-head__desc{ max-width:640px; margin:22px 0 0; font-size:1.05rem; line-height:1.55; opacity:.85; }
.proyecto-head__servicios{ margin:16px 0 0; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-accent); }

/* FOTOGRAFÍA — rejilla tipo feed */
.proyecto-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; max-width:1200px; margin:34px auto 0; padding:0 32px; }
.proyecto-grid__item{ margin:0; overflow:hidden; background:#111; }
.proyecto-grid__item img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.proyecto-grid__item:hover img{ transform:scale(1.05); }

/* BRANDING — imágenes a ancho completo, apiladas */
.proyecto-stack{ margin:34px 0 0; }
.proyecto-stack__img{ width:100%; height:auto; display:block; }

/* Navegación entre proyectos */
.proyecto-nav{ display:flex; justify-content:space-between; gap:24px; max-width:1200px; margin:90px auto 0; padding:36px 32px 110px; border-top:1px solid rgba(255,255,255,.12); }
.proyecto-nav__link{ text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:6px; max-width:48%; }
.proyecto-nav__link--next{ margin-left:auto; text-align:right; align-items:flex-end; }
.proyecto-nav__link span{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; opacity:.55; }
.proyecto-nav__link strong{ font-size:1.5rem; line-height:1; }
.proyecto-nav__link:hover strong{ color:var(--c-accent); }

@media (max-width:900px){
	.proyecto-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
	.proyecto-grid{ grid-template-columns:1fr; }
	.proyecto-nav__link strong{ font-size:1.15rem; }
}

/* ==========================================================================
   ARCHIVO DE PROYECTOS  (/proyectos/  con filtro ?filtro=branding|fotografia)
   ========================================================================== */
.archivo-filtros{ display:flex; gap:20px; margin:24px 0 0; flex-wrap:wrap; }
.archivo-filtros a{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:inherit; opacity:.5; padding-bottom:5px; border-bottom:1px solid transparent; }
.archivo-filtros a:hover{ opacity:.9; }
.archivo-filtros a.is-active{ opacity:1; border-bottom-color:var(--c-accent); }

.archivo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1200px; margin:36px auto 0; padding:0 32px 110px; }
.archivo-card{ text-decoration:none; color:inherit; display:block; }
.archivo-card__img{ overflow:hidden; background:#111; aspect-ratio:4/5; }
.archivo-card__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.archivo-card:hover .archivo-card__img img{ transform:scale(1.05); }
.archivo-card__title{ margin:12px 0 0; font-size:1.05rem; letter-spacing:.02em; }
@media (max-width:900px){ .archivo-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .archivo-grid{ grid-template-columns:1fr; } }