/* Glassy · estilos del tema. Look de la web anterior: fondo casi negro, Modern Gothic, barra de menú blanca a la derecha. */

@font-face {
	font-family: "Modern Gothic";
	src: url("../fonts/ModernGothic-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Modern Gothic";
	src: url("../fonts/ModernGothic-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}
/* Instrument Serif Italic (OFL, ver assets/fonts/LEEME-InstrumentSerif.md): solo para frases sueltas en cursiva.
   En dos partes, como la sirve Google: el latín extendido solo se baja si la página lo usa. */
@font-face {
	font-family: "Instrument Serif";
	src: url("../fonts/InstrumentSerif-Italic-latin.woff2") format("woff2");
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Instrument Serif";
	src: url("../fonts/InstrumentSerif-Italic-latin-ext.woff2") format("woff2");
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--bg: #070707;
	--fg: #ffffff;
	--muted: rgba(255, 255, 255, 0.72);
	--grey: #767676; /* 4,5:1 sobre el blanco del menú; la web anterior usaba #9c9c9c, que no llega */
	--bar: #ffffff;
	--bar-w: 72px;
	--gutter: clamp(20px, calc(8vw - 36px), 120px); /* 46 px a 1024, 118 px a 1920, como la web anterior */
	--marco: min(40px, var(--gutter));          /* logo, miga de pan y textos y botones de los heros: a los lados, lo mismo que el logo arriba (Rubén, 03/10). No cuadra con el contenido de abajo, y es a propósito */
	--gap: 10px;
	--font: "Modern Gothic", "Helvetica Neue", Arial, sans-serif;
	/* Cursiva para frases sueltas: Instrument Serif, alojada en el tema. Si no carga, la serifa cursiva del sistema. */
	--serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-menu: cubic-bezier(0.19, 1, 0.22, 1); /* la curva del menú de la web anterior */
	--dura-fundido: 1.6s;                       /* aparición de textos y fotos al hacer scroll */
	/* Todo lo que cambia al pasar el ratón (colores, fondos, bordes, opacidad, filtros, zoom de fotos y rayas de enlaces) usa
	   esta transición, la misma al encender y al apagar: así todo lo que se mueve en un mismo hover va a la vez y sin
	   retraso al empezar (Rubén, 07/10: el fondo de los estudios y los logos con ease-in-out parecían ir con lag). */
	--hover: 0.5s var(--ease);
	--dura-cifras: 3.5s;                        /* cuenta de las cifras y línea que crece */
	--display: clamp(52px, 6.6vw, 128px);       /* nombre del director */
	--borde-inferior: 40px;                     /* distancia al borde de abajo: botones del hero e info del menú */
	--radio: 10px;                              /* esquinas de fotos, tarjetas y vídeos: suaves, sin parecer una app */
	/* Study case, con las medidas de la web anterior a 1024 px: titulares 44 px (la escala del menú) y texto en columna de 620 px. */
	--titular: clamp(32px, calc(3.19vw + 11.8px), 72px);
	--espacio-bloque: 60px;                     /* un único espacio entre bloques */
	--columna: min(60.5vw, 820px);
}

*, *::before, *::after { box-sizing: border-box; }

/* Paso de una página a otra con un fundido suave, sin JavaScript (navegadores que lo admiten).
   La barra del menú no parpadea: tiene su propio nombre y se queda quieta. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
.menu-toggle { view-transition-name: barra-menu; }
html { -webkit-text-size-adjust: 100%; } /* el desplazamiento suave lo hace main.js, con ease-in-out */
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	font-size: 18px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
/* Todos los niveles: en la Home las tarjetas de los carruseles son H4 y se quedaban con el margen y la negrita del navegador. */
h1, h2, h3, h4, h5, h6 { font-weight: 400; margin: 0; line-height: 1.02; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
figure { margin: 0; }
/* Los botones no heredan la letra de la página por defecto: sin esto salen con otro tamaño que los enlaces. */
button, input, select, textarea { font: inherit; color: inherit; }

.screen-reader, .skip:not(:focus) {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}
.skip:focus { position: fixed; top: 12px; left: 12px; z-index: 100; background: var(--fg); color: var(--bg); padding: 8px 12px; }

/* ---------- Enlaces de texto ----------
   Sin subrayado en reposo, como la web anterior. Al pasar el ratón o con el teclado, una raya crece
   de izquierda a derecha para indicar que es clicable; al salir se recoge hacia la derecha. */
.breadcrumb a, .menu__list a, .menu__info a, .menu__idiomas a, .site-footer__info a {
	/* Siempre en línea (display: inline): así la caja del enlace es la de las letras y la raya
	   queda a la misma distancia de la línea base en todas partes, sea cual sea el interlineado. */
	display: inline;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: right 0 bottom var(--raya-y, 0.03em);
	background-size: 0% var(--raya, 1px);
	transition: background-size var(--hover), color var(--hover);
}
.breadcrumb a:hover, .menu__list a:hover, .menu__info a:hover, .menu__idiomas a:hover, .site-footer__info a:hover,
.breadcrumb a:focus-visible, .menu__list a:focus-visible, .menu__info a:focus-visible, .menu__idiomas a:focus-visible, .site-footer__info a:focus-visible {
	background-position: left 0 bottom var(--raya-y, 0.03em);
	background-size: 100% var(--raya, 1px);
}
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
/* Las secciones a las que se salta reciben el foco (para teclado y lectores), pero no se enmarcan. */
[tabindex="-1"]:focus { outline: none; }
/* Dentro de un texto largo (artículos) el enlace va subrayado siempre: si no, no se distingue del texto. */
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Etiqueta pequeña en mayúsculas: miga de pan, "Selected works"... */
.label, .breadcrumb {
	font-size: 12px; line-height: 1.2; letter-spacing: 2px; text-transform: uppercase; font-weight: 400;
}

/* ---------- Estructura ---------- */
.site-main { padding-right: var(--bar-w); }

/* Footer como el de la web anterior: datos en gris a la izquierda y las otras casas de Glassy a la derecha. */
.site-footer {
	display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
	padding: 48px calc(var(--gutter) + var(--bar-w)) 48px var(--gutter);
	color: #a8a8a8; font-size: 16px; line-height: 1.6;
}
.site-footer__info p { margin: 0; } /* texto en línea: la negrita se alinea sola por la línea base */
/* Cada dato entero en su línea: «Privacy policy» o el teléfono no se parten a 390 px (como .gl-pie del kit de las landings). */
.site-footer__info p > * { margin-right: 18px; white-space: nowrap; }
.site-footer__info p > *:last-child { margin-right: 0; }
.site-footer__info a:hover, .site-footer__info a:focus-visible { color: var(--fg); }
/* La raya va a 0,22 em por debajo de la línea base en toda la web. La negrita baja un poco más que la
   normal por debajo de la línea base, así que se compensa para que su raya quede a la misma distancia. */
.site-footer__contact, .menu__contact { --raya-y: 0.09em; font-weight: 700; }
/* Alineación óptica de los logos (medida sobre la tinta de cada SVG, 29/09/2026):
   los tres apoyan en la misma línea base y sus mayúsculas miden lo mismo.
   Mayúscula en fracción del alto del logo: Tasty 0,63 (la T), DotFive 0,98 (la D), Kontent 0,98.
   Línea base: Tasty 0,74, DotFive 0,98, Kontent 0,99. */
.site-footer__marcas {
	--mayus: 22px;                       /* altura común de las mayúsculas */
	--linea-base: 30px;                  /* línea base común, medida desde arriba del bloque */
	display: flex; align-items: flex-start; gap: 36px;
}
.marca { display: block; color: #474747; transition: color var(--hover);
	margin-top: calc(var(--linea-base) - var(--alto) * var(--base)); }
.marca svg { display: block; height: var(--alto); width: auto; }
.marca--tasty   { --alto: calc(var(--mayus) / 0.63); --base: 0.74; }
.marca--dotfive { --alto: calc(var(--mayus) / 0.98); --base: 0.98; }
.marca--kontent { --alto: calc(var(--mayus) / 0.98); --base: 0.99; }
.marca--idem    { --alto: var(--mayus); --base: 1; } /* IDEM no tiene logo: la palabra en Archivo 900 pasada a trazos (04/10/2026); el SVG mide justo la mayúscula */
.marca--propia { --alto: calc(var(--mayus) / 0.98); --base: 1; transform: translateY(var(--ajuste, 0px)); } /* logo subido desde la Home */
.marca:hover, .marca:focus-visible { color: var(--color-marca); }

/* Cabecera: logo a la izquierda y miga de pan a la derecha. Se va con el scroll. */
.site-header {
	position: absolute; top: 0; left: 0; right: var(--bar-w); z-index: 10;
	display: flex; align-items: center; justify-content: space-between;
	padding: 40px var(--marco) 0;
}
.logo { display: inline-block; color: var(--fg); }
.logo svg { width: 123px; height: auto; display: block; }


/* ---------- Menú lateral ---------- */
.menu-toggle {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 30;
	width: var(--bar-w); border: 0; padding: 0; background: var(--bar); cursor: pointer;
	display: grid; place-items: center;
}
.menu-toggle:focus { outline: none; }
.menu-toggle:focus-visible { outline: 2px solid var(--bg); outline-offset: -8px; }
.burger { position: relative; display: block; width: 26px; height: 8px; }
.burger span {
	position: absolute; left: 0; width: 100%; height: 2px; background: var(--bg);
	transition: transform 0.2s ease-in-out, top 0.2s ease-in-out;
}
.burger span:first-child { top: 0; }
.burger span:last-child { top: 6px; }
.menu-toggle[aria-expanded="true"] .burger span { top: 3px; }
.menu-toggle[aria-expanded="true"] .burger span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .burger span:last-child { transform: rotate(-45deg); }

.menu {
	position: fixed; top: 0; bottom: 0; right: var(--bar-w); z-index: 25;
	width: clamp(380px, 34vw, 560px); /* más estrecho que la web anterior: menos recorrido hasta las opciones */
	background: var(--bar); color: var(--bg);
	display: flex; flex-direction: column; justify-content: center;
	padding: 56px;
	transform: translateX(calc(100% + var(--bar-w)));
	transition: transform 2s var(--ease-menu);
}
.menu.is-open { transform: none; }
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li + li { margin-top: 10px; } /* aire para que la raya no toque la palabra de abajo */
.menu__list a {
	font-size: clamp(34px, calc(3.19vw + 11.8px), 80px); line-height: 1.05; /* 44 px a 1024, 51 px a 1231, como la anterior */
	--raya: 2px;
}
.menu__info { position: absolute; left: 56px; right: 56px; bottom: var(--borde-inferior); font-size: 16px; line-height: 1.5; } /* líneas de 24 px: zona de toque suficiente (T20) */
.menu__info p { margin: 0; }

.menu__cities { color: var(--grey); }
/* Selector de idioma, arriba del panel: la letra de los datos de contacto y a la misma distancia del borde (arriba).
   El idioma activo en negrita y negro; el otro en gris, que se oscurece al pasar el ratón. */
.menu__idiomas {
	position: absolute; left: 56px; top: var(--borde-inferior);
	display: flex; align-items: baseline; gap: 8px;
	font-size: 16px; line-height: 1.4; letter-spacing: 1px;
}
.menu__idioma { color: var(--grey); }
.menu__idioma:hover, .menu__idioma:focus-visible { color: var(--bg); }
.menu__idioma[aria-current="true"] { color: var(--bg); font-weight: 700; --raya-y: 0.09em; }
.menu__idiomas-barra { color: var(--grey); }

/* ---------- Cabeceras de página ---------- */
.page-head { padding: 200px var(--gutter) 56px; }
.page-head h1 { font-size: clamp(56px, 9vw, 150px); }
.page-head__intro, .page-head__sub { max-width: 760px; margin: 28px 0 0; font-size: 20px; line-height: 28px; color: var(--muted); }
.page-head__sub { color: var(--fg); font-size: 24px; line-height: 1.3; }
.page-head__intro p { margin: 0 0 16px; }
.page-head__intro p:last-child { margin-bottom: 0; }
.page-head > .label { margin: 0 0 20px; }
/* El nombre de la newsletter se escribe siempre «Make it Real» (Yago, 11/10, punto 28): su antetítulo, sin mayúsculas. */
.page-head--newsletter > .label { text-transform: none; letter-spacing: 0.08em; font-size: 14px; }
.grid-section--primera { padding-top: 24px; }
.buttons--centro { justify-content: center; margin-top: 56px; }

/* ---------- Botones ---------- */
.buttons { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 0; }
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 49px; padding: 0 30px;
	border: 1px solid var(--fg); border-radius: 50px; font-size: 14px; line-height: 1; text-decoration: none; cursor: pointer;
	background: transparent; color: var(--fg); /* los <button> traen fondo gris del navegador: fuera */
	transition: background-color var(--hover), color var(--hover);
}
/* El texto se recorta a mayúsculas y línea base: así queda centrado igual en cualquier navegador (Safari incluido). */
.btn__texto { display: block; line-height: 1; text-box: trim-both cap alphabetic; }
.btn__icono { display: block; flex: none; }
.btn--solid { background: var(--fg); color: var(--bg); }
/* Al pasar el ratón o llegar con el teclado se invierten: el de contorno se rellena y el sólido se vacía. */
@media (hover: hover) {
	.btn:hover { background: var(--fg); color: var(--bg); }
	.btn--solid:hover { background: transparent; color: var(--fg); }
}
.btn:focus-visible { background: var(--fg); color: var(--bg); }
.btn--solid:focus-visible { background: transparent; color: var(--fg); }
/* El contorno de foco de los enlaces es currentColor (a:focus-visible): se queda del color que tenía antes de invertir. */
a.btn:focus-visible { outline-color: var(--fg); }
a.btn--solid:focus-visible { outline-color: var(--fg); } /* se vacía al recibir el foco: el contorno, blanco (T46) */

/* ---------- Hero de director ----------
   El collage de fotos marca la altura. El texto está en una capa que ocupa todo el hero
   y es "sticky" abajo: se queda fijo mientras suben las fotos y sigue con la página al acabarse. */
.dir-hero { position: relative; min-height: 100svh; }
.dir-hero__fotos {
	--fw: min(29.2vw, 620px);           /* ancho de cada pieza: 299 px a 1024, como la web anterior */
	display: grid; grid-template-columns: repeat(2, var(--fw));
	column-gap: var(--gap); justify-content: end;
	padding: min(17vh, 160px) var(--marco) 0 0; /* margen a la derecha igual que el de la izquierda: el collage no toca la barra del menú */
}
.dir-hero__pieza { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #151515; border-radius: calc(var(--radio) + 10px); } /* las fotos del director, más redondeadas (20 px) */
.dir-hero__pieza img, .dir-hero__video {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* ocupa el hueco sea cual sea la proporción */
}
.dir-hero__pieza--1 { grid-column: 1; grid-row: 1 / span 2; margin-top: calc(var(--fw) * 0.625); }
.dir-hero__pieza--2 { grid-column: 2; grid-row: 1; }
.dir-hero__pieza--3 { grid-column: 2; grid-row: 2; margin-top: var(--gap); }

.dir-hero__capa {
	position: absolute; inset: 0; z-index: 2; pointer-events: none;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: 0 var(--marco) 30px; /* como la web anterior: el bloque acaba 30 px por encima de la última foto */
}
.dir-hero__text { text-shadow: 0 1px 24px rgba(0, 0, 0, 0.45); position: sticky; bottom: var(--borde-inferior); width: min(50vw, 1000px); pointer-events: auto; padding-top: 24px; }
.dir-hero__name { overflow-wrap: anywhere; font-size: var(--display); line-height: 1.1; margin-bottom: 10px; } /* un 15 % menor que la web anterior, a petición de Rubén (29/09) */
.dir-hero__desc { font-size: 20px; line-height: 28px; }
/* Halo oscuro pegado a las letras del nombre y la descripción: se leen sobre las fotos claras del collage y sobre negro no se
   nota (auditoría T02). Los botones no lo llevan. */
.dir-hero__name, .dir-hero__desc { text-shadow: 0 0 2px rgba(7, 7, 7, 0.9), 0 0 6px rgba(7, 7, 7, 0.85), 0 0 18px rgba(7, 7, 7, 0.7); }
.dir-hero__desc p:last-child { margin: 0; }

/* ---------- Grids y tarjetas ---------- */
.grid-section { padding: 120px var(--gutter) 96px; }
.grid-section > .label { margin: 0 0 24px; }
.grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 700px) {
	.grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #151515; isolation: isolate; border-radius: var(--radio); clip-path: inset(0 round var(--radio)); } /* clip-path: en Safari el zoom del hover no rompe las esquinas */
.card__media, .card__video { position: absolute; inset: 0; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--hover); }
.card__video { opacity: 0; transition: opacity var(--hover); pointer-events: none; overflow: hidden; }
.card__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* tarjeta e iframe son 16:9: sin ampliar */
.card.is-playing .card__video { opacity: 1; }
/* Con el teclado, el mismo zoom al llegar a su enlace (:focus-visible: un clic con el ratón no lo deja puesto). */
@media (hover: hover) { .card:hover .card__media img { transform: scale(1.03); } }
.card:has(.card__link:focus-visible) .card__media img { transform: scale(1.03); }
.card::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 50%);
	pointer-events: none;
}
.card__text { position: absolute; left: 30px; right: 30px; bottom: 26px; z-index: 2; }
.card__text--center { top: 50%; bottom: auto; transform: translateY(-50%); text-align: center; }
.card--director::after { background: rgba(0, 0, 0, 0.32); }
.card__title { font-size: clamp(24px, 3.55vw, 36px); line-height: 1.1; }
.card__label { margin: 2px 0 0; font-size: 20px; }
.card__credits { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
@media (min-width: 700px) and (max-width: 899px) {
	.card__title { font-size: 22px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.card__title[hidden] { display: none; } /* el título oculto que lee el reproductor salía repetido entre 700 y 899 px */
	.card__text { left: 20px; right: 20px; bottom: 16px; }
}
.card__link {
	position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%;
	background: transparent; border: 0; padding: 0; cursor: pointer;
}
.card__link:focus-visible { outline: 2px solid var(--fg); outline-offset: -4px; border-radius: var(--radio); }

/* ---------- Sello AI de la UE: trabajos y directores de IA. Fijo en la esquina, sin animación, también sobre el loop ---------- */
.sello-ia { position: absolute; top: 16px; right: 16px; z-index: 2; width: 32px; height: 32px; pointer-events: none; }
.sello-ia svg { display: block; width: 100%; height: 100%; }
.sello-ia--hero { top: 88px; right: var(--marco); width: 44px; height: 44px; } /* bajo la miga de pan, alineado con ella */
/* Ficha de un director de IA: justo después del nombre, centrado con las mayúsculas y a su escala */
.sello-ia.sello-ia--nombre { position: static; display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.2em; vertical-align: 0.14em; }
.sin-corte { white-space: nowrap; } /* el sello no se queda solo en una línea */
/* Hero de la Home: sin miga de pan, a la altura del logo. Cambia con el proyecto, al ritmo del fundido del vídeo. */
.sello-ia.home-hero__sello { top: 30px; opacity: 0; visibility: hidden; transition: opacity 1s var(--ease), visibility 0s linear 1s; }
.sello-ia.home-hero__sello.is-activa { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ---------- Reproductor emergente (como el anterior: MP4 con controles del navegador, título y créditos debajo) ---------- */
.player {
	width: min(57vw, calc(68vh * 16 / 9), 1400px); max-width: none; max-height: none;
	padding: 0; border: 0; background: transparent; color: var(--fg); overflow: visible;
}
.player::backdrop { background: rgba(7, 7, 7, 0.92); }
.player__frame { aspect-ratio: 16 / 9; background: #000; border-radius: var(--radio); overflow: hidden; }
.player__frame iframe, .player__frame video { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.player__info { margin-top: 20px; text-align: left; }
.player__title { font-size: clamp(24px, 3.55vw, 36px); line-height: 1.1; margin: 0 0 4px; }
.player__credits { color: #bcbcbc; font-size: 20px; margin: 0; }
.player__credits:empty { display: none; }
.player__close {
	position: absolute; top: -20px; right: -20px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
	background: var(--fg); color: var(--bg); border: 0; font-size: 24px; line-height: 40px; cursor: pointer;
	display: grid; place-items: center; transition: transform var(--hover);
}
.player__close:hover, .player__close:focus-visible { transform: scale(1.08); }

/* ---------- Study case ----------
   Medidas de la web anterior a 1024 px (variables en :root): titulares 44 px, texto 20/28 px en columna de 620 px,
   imágenes al ancho del contenido. */
/* Hero del study case en formato cine 2,35:1: deja ver que hay contenido debajo.
   Vídeo en bucle de fondo, degradado a negro abajo y, encima, título y acciones. */
.caso-hero {
	/* Altura 2,35:1 calculada sobre el ancho, con mínimo y máximo. Con aspect-ratio + min-height el navegador
	   ensanchaba el hero más que la pantalla en tablet (scroll horizontal). */
	position: relative; height: clamp(420px, calc((100vw - var(--bar-w)) / 2.35), 88svh);
	display: flex; align-items: flex-end; padding: 0 var(--marco) 40px; overflow: hidden; isolation: isolate;
}
.caso-hero__media { position: absolute; inset: 0; z-index: -2; }
.caso-hero__media img, .caso-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* El vídeo, 2 px más bajo que la foto (lo que sobra queda bajo el final opaco del degradado, no se ve): así, cuando entra,
   no cuenta como el elemento más grande de la página (LCP) y Google mide la foto, que es lo que se ve primero. Antes el
   LCP del móvil era el vídeo, que llega después de cargar la página (Digital Humans, 18 s en Lighthouse; 08/10/2026). */
.caso-hero__video { height: calc(100% - 2px); }
/* Vídeos de fondo de los heros (study case, About, Contact y collage del director): main.js los pide cuando la página ya ha
   cargado y entran con un fundido cuando empiezan a moverse, como los de la Home. Hasta entonces se ve la foto. */
.caso-hero__video, .about-hero__video, .contacto-hero__video, .dir-hero__video { opacity: 0; transition: opacity 0.6s var(--ease); }
video.con-video { opacity: 1; }
/* "Directed by": el nombre lleva a la ficha del director (T37). Subrayado fino, que se ilumina al pasar el ratón. */
.caso-hero__sub a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: rgba(255,255,255,0.45); transition: text-decoration-color var(--hover); }
.caso-hero__sub a:hover, .caso-hero__sub a:focus-visible { text-decoration-color: currentColor; }
.caso-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to bottom, rgba(7,7,7,0.35) 0%, rgba(7,7,7,0) 30%, rgba(7,7,7,0) 45%, rgba(7,7,7,0.75) 78%, var(--bg) 100%);
}
.caso-hero__text { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } /* el borde inferior de los botones = línea base de "Directed by" */
.caso-hero__titulo { font-size: var(--display); line-height: 1.05; overflow-wrap: anywhere; }
.caso-hero__sub { font-size: 20px; margin: 8px 0 0; text-box: trim-end cap alphabetic; } /* la caja acaba en la línea base, sin el rabo de la y */
.caso-hero__acciones { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
/* Triángulo de play dibujado con CSS. Girado 90° es la flecha hacia abajo de "View case". */
.btn__play { display: block; flex: none; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.btn__play--abajo { transform: rotate(90deg); }
/* En móvil y tablet "View case" no aporta: el artículo empieza justo debajo. */
@media (max-width: 1024px) { .btn--view-case { display: none; } }

.caso { padding: 0 var(--gutter); }
.bloque { padding-top: var(--espacio-bloque); }
.bloque__titular { font-size: var(--titular); line-height: 1.1; max-width: var(--columna); }
.bloque__subtitulo { font-size: 20px; color: var(--muted); margin: 8px 0 0; max-width: var(--columna); }
/* Espaciado: el mismo entre todos los bloques; un titular va pegado a lo que presenta,
   y el primer bloque arranca cerca del hero, que ya funde a negro. */
.bloque--titular + .bloque { padding-top: 20px; }
.caso > .bloque:first-child { padding-top: 60px; }

.prose { max-width: var(--columna); font-size: 20px; line-height: 28px; }
.prose p { margin: 0 0 32px; }
.prose > :last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 32px; padding-left: 1.2em; }
.prose li + li { margin-top: 8px; }
.prose strong { font-weight: 700; }
.bloque--completo .prose { max-width: none; }
.pagina { margin: 0 var(--gutter) 96px; }
/* Justificado opcional: con corte de palabras automático (según el idioma de la página) para evitar huecos grandes. */
.prose--justificado { text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; text-wrap: pretty; }
/* En móvil, alineado a la izquierda y sin partir palabras: en una columna estrecha el justificado deja ríos de espacio
   y muchos guiones (auditoría del 07/10, T65; Rubén, 08/10). */
@media (max-width: 699px) { .prose--justificado { text-align: left; hyphens: manual; -webkit-hyphens: manual; } }
.bloque--derecha .prose { margin-left: auto; }

.bloque--dos { display: grid; gap: 48px; }
@media (min-width: 900px) { .bloque--dos { grid-template-columns: 1fr 1fr; } .bloque--dos .prose { max-width: none; } }

.bloque--texto-imagen { display: grid; gap: 48px; align-items: center; }
.bloque__imagen img { width: 100%; border-radius: var(--radio); }
@media (min-width: 900px) {
	.bloque--texto-imagen { grid-template-columns: 1fr 1fr; }
	.bloque--texto-imagen .prose { max-width: none; }
	.bloque--imagen-izquierda .bloque__imagen { order: -1; }
}

.bloque__marco { border-radius: var(--radio); overflow: hidden; background: #111; }
.bloque__marco img, .bloque__marco video { width: 100%; }
.bloque__marco video { aspect-ratio: auto 16 / 9; } /* sin medidas conocidas; media.php pone la real en el atributo style (T26) */
/* Vídeo vertical o cuadrado (media.php lo marca con .bloque--vertical): como mucho, el alto que tendría el bloque con un
   vídeo horizontal (16:9 de su ancho). Se centra con su proporción y los lados quedan del color de la página.
   100cqi = el ancho del bloque; sin consultas de contenedor (antes de 2023), 16:9 del ancho de la pantalla. */
.bloque--vertical .bloque__marco { container-type: inline-size; background: transparent; border-radius: 0; }
.bloque--vertical .bloque__marco video {
	width: auto; max-width: 100%; margin: 0 auto; border-radius: var(--radio); background: #111;
	max-height: 56.25vw; max-height: calc(100cqi * 9 / 16);
}
.bloque--vertical.bloque--sangre .bloque__marco video { border-radius: 0; }
/* En el móvil, 16:9 del ancho dejaría el vertical diminuto (unos 110 px de ancho): ahí ocupa el ancho de la columna, con 80 % del alto de pantalla como máximo. */
@media (max-width: 699px) { .bloque--vertical .bloque__marco video { max-height: 80svh; } }
.bloque--sangre { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
.bloque--sangre .bloque__marco { border-radius: 0; }
.bloque__leyenda { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.bloque__leyenda-titulo { font-size: 20px; line-height: 1.3; }
.bloque__pie { font-size: 14px; color: var(--muted); }

/* Carrusel: diapositivas grandes con la siguiente asomando, flechas, contador y barra de progreso. */
.bloque--carrusel > .label { margin: 0 0 20px; }
.carrusel__pie { display: flex; align-items: center; gap: 24px; margin-top: 20px; }
.carrusel__controles { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.carrusel__contador { color: var(--muted); min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.carrusel__flecha {
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--fg); background: transparent; color: var(--fg);
	font-size: 18px; cursor: pointer; transition: background-color var(--hover), color var(--hover);
}
.carrusel__flecha:hover, .carrusel__flecha:focus-visible { background: var(--fg); color: var(--bg); }
.carrusel__pausa span { display: block; width: 8px; height: 10px; margin: auto; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.carrusel__pausa[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; margin-left: 17px; }
.carrusel__pista {
	/* Se recorta en los márgenes del contenido, igual a izquierda y derecha: la foto que viene no pasa bajo el menú. */
	display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; border-radius: var(--radio); /* sin scroll-behavior: el desplazamiento lo anima main.js */
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__foto { flex: 0 0 auto; scroll-snap-align: start; }
.carrusel__foto img { height: clamp(240px, 36vw, 620px); width: auto; max-width: none; border-radius: var(--radio); } /* más bajas que el ancho de pantalla: siempre asoma la siguiente foto e invita a seguir */
/* Fotos que llegan al acercarse (main.js, "fotos diferidas"): hasta entonces la caja está vacía y con su medida; al cargar
   entran con un fundido, nunca de golpe. Sin JavaScript se ve la copia de <noscript>. */
.js .carrusel__diferida { opacity: 0; transition: opacity 0.6s var(--ease); }
.js .carrusel__diferida.is-cargada { opacity: 1; }
html:not(.js) .carrusel__diferida { display: none; }
.carrusel__progreso { flex: 1; height: 1px; background: rgba(255,255,255,0.2); }
.carrusel__progreso span { display: block; height: 100%; width: 100%; background: var(--fg); transform-origin: left; transform: scaleX(var(--progreso, 0)); transition: transform 0.4s var(--ease); } /* escala, no ancho: sin maquetar en cada paso (T60) */

.galeria { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .galeria--3 { grid-template-columns: repeat(3, 1fr); } }
.galeria__foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio); }
.bloque--galeria > .label { margin: 0 0 20px; }

.cifras { display: grid; gap: 32px; margin: 0; grid-template-columns: repeat(2, 1fr); }
.bloque__titular + .cifras { margin-top: 32px; }
@media (min-width: 900px) { .cifras--3 { grid-template-columns: repeat(3, 1fr); } .cifras--4 { grid-template-columns: repeat(4, 1fr); } }
.cifras__item { position: relative; display: flex; flex-direction: column-reverse; padding-bottom: 20px; }
/* La línea va debajo y crece de izquierda a derecha cuando aparece la cifra. */
.cifras__item::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: rgba(255,255,255,0.35); transform-origin: left; }
.js .cifras__item.revela::after { transform: scaleX(0); transition: transform var(--dura-cifras) var(--ease-menu) calc(var(--retraso, 0s) + 0.2s); }
.js .cifras__item.revela.visible::after { transform: scaleX(1); }
.cifras__cifra { margin: 0; font-size: var(--titular); line-height: 1; font-variant-numeric: tabular-nums; }
.cifras__texto { margin-top: 10px; font-size: 16px; color: var(--muted); }

.bloque--cita { max-width: min(80vw, 1100px); }
.cita__texto { margin: 0; }
.cita__texto p { font-size: var(--titular); line-height: 1.15; margin: 0; }
.cita__texto p::before { content: "\201C"; }
.cita__texto p::after { content: "\201D"; }
.cita__autor { margin-top: 24px; font-size: 16px; }
.cita__autor span { display: block; color: var(--muted); }

.bloque--creditos > .label { margin: 0 0 20px; }
.creditos { margin: 0; display: grid; gap: 0 48px; max-width: 900px; }
@media (min-width: 700px) { .creditos { grid-template-columns: 1fr 1fr; } }
.creditos__fila { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.15); }
.creditos dt { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.creditos dd { margin: 0; font-size: 18px; }

.contacto { padding: var(--espacio-bloque) var(--gutter) 40px; }
.contacto__titular { font-size: var(--titular); line-height: 1.1; }

/* Carruseles de Projects: título y descripción encima, tarjetas de proyecto en fila y los mismos controles.
   Se ven dos tarjetas y asoma la tercera; en móvil, una y asoma la siguiente. */
.carrusel--proyectos { margin: 0 var(--gutter) 96px; }
.carrusel__cabecera { margin: 0 0 24px; max-width: 760px; }
.carrusel__titulo { font-size: clamp(28px, 3vw, 44px); line-height: 1.1; }
.carrusel__descripcion { margin: 10px 0 0; color: var(--muted); font-size: 16px; }
.carrusel__item { flex: 0 0 calc((100% - 2 * var(--gap)) / 2.35); scroll-snap-align: start; }
@media (max-width: 899px) { .carrusel__item { flex-basis: calc((100% - var(--gap)) / 1.6); } }
@media (max-width: 599px) { .carrusel__item { flex-basis: 86%; } .carrusel__titulo { font-size: 28px; } }
.carrusel--proyectos .card__title { font-size: clamp(22px, 2.2vw, 32px); }

/* Newsletter: publicaciones de Substack con su imagen, título y subtítulo. */
.publicacion { position: relative; }
.publicacion__imagen { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radio); background: #151515; }
.publicacion__imagen picture { display: block; height: 100%; } /* WebP de la CDN de Substack con su respaldo (inc/paginas.php) */
.publicacion__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--hover); }
@media (hover: hover) { .publicacion:hover .publicacion__imagen img { transform: scale(1.03); } }
.publicacion:has(.card__link:focus-visible) .publicacion__imagen img { transform: scale(1.03); }
.publicacion__titulo { margin: 18px 0 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; }
.publicacion__sub { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
.publicacion__fecha { display: block; margin-top: 10px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.publicacion .card__link:focus-visible { outline-offset: 4px; }
.publicaciones { row-gap: 56px; }
/* El texto no llega al borde de la columna: con dos líneas ya no se pega al de la publicación de al lado. */
.publicacion__titulo, .publicacion__sub, .publicacion__fecha { padding-right: clamp(16px, 3vw, 48px); }

/* ---------- Home ----------
   Hero a pantalla completa, con "Discover Glassy" para invitar a bajar. Clips uno encima de otro con fundido; solo se muestran
   el actual, el siguiente (para que cargue) y el que sale. Degradado a negro abajo, como el study case. */
.home-hero { position: relative; height: 100svh; min-height: 560px; display: flex; overflow: hidden; isolation: isolate; }
.home-hero__medios { position: absolute; inset: 0; z-index: -2; background: #0d0d0d; }
.home-hero__medio { position: absolute; inset: 0; display: none; opacity: 0; transition: opacity 1s var(--ease); }
.home-hero__medio.is-activa, .home-hero__medio.is-siguiente, .home-hero__medio.is-saliendo { display: block; }
.home-hero__medio.is-saliendo { opacity: 1; z-index: 0; }
.home-hero__medio.is-activa { opacity: 1; z-index: 1; }
.home-hero__medio img, .home-hero__medio video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero__medio video { opacity: 0; transition: opacity 0.6s var(--ease); }
.home-hero__medio.con-video video { opacity: 1; }
.home-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(to bottom, rgba(7,7,7,0.55) 0%, rgba(7,7,7,0.2) 28%, rgba(7,7,7,0) 45%, rgba(7,7,7,0.7) 76%, var(--bg) 100%);
}
.home-hero__capa { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 170px var(--marco) var(--borde-inferior); }
/* Con la barra de WordPress (sesión iniciada) la página baja 32 px: el hero se acorta para que la barra de proyectos no quede cortada. */
.admin-bar .home-hero { height: calc(100svh - 32px); }
@media (max-width: 782px) { .admin-bar .home-hero { height: calc(100svh - 46px); } }
.home-hero__fila { display: flex; align-items: stretch; gap: 48px; }
.home-hero__infos, .home-hero__acciones { display: grid; }
.home-hero__infos { position: relative; flex: 1; min-width: 0; }
.home-hero__acciones { align-items: end; }
.home-hero__info, .home-hero__accion {
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0.6s;
}
/* Solo el título activo ocupa sitio: así la fila (y "View more") mide lo que mide ese título, aunque otro tenga dos líneas. */
.home-hero__info { position: absolute; left: 0; right: 0; bottom: 0; }
.home-hero__info.is-activa { position: relative; }
.home-hero__accion { grid-area: 1 / 1; justify-self: end; } /* los botones, uno encima de otro */
.home-hero__info.is-activa, .home-hero__accion.is-activa { opacity: 1; visibility: visible; transform: none; transition-delay: 0.2s, 0.2s, 0s; }
/* Algo más pequeño que la web anterior: 83 px a 1440, 102 px a 1920, 40 px en móvil. Las cajas se recortan a la
   mayúscula y a la línea base: el borde de abajo de los botones coincide con la línea base de "Directed by". */
.home-hero__proyecto { margin: 0; font-size: max(40px, calc(3.9vw + 27px)); line-height: 1.1; text-box: trim-both cap alphabetic; overflow-wrap: anywhere; }
.home-hero__director { margin: clamp(16px, 1.7vw, 30px) 0 0; font-size: 20px; line-height: 1.2; text-box: trim-both cap alphabetic; }
.home-hero__barra { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.home-hero__segmentos { flex: 1; min-width: 0; }
.home-hero__segmentos ol { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.home-hero__segmentos li { flex: 1; min-width: 0; }
/* Zona de toque de 24 px con la raya de 2 px en medio. */
.home-hero__segmento { position: relative; display: block; width: 100%; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; } /* botones desde el 08/10 (T45) */
.home-hero__segmento::before, .home-hero__relleno { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; border-radius: 2px; }
.home-hero__segmento::before { background: rgba(255,255,255,0.45); transition: background-color var(--hover); } /* 3:1 sobre el degradado (T22) */
.home-hero__segmento:hover::before, .home-hero__segmento:focus-visible::before { background: rgba(255,255,255,0.7); }
.home-hero__relleno { background: var(--fg); transform-origin: left; transform: scaleX(var(--p, 0)); }
.home-hero__segmento:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: 2px; }
.home-hero__pausa {
	flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--fg); background: transparent; color: var(--fg);
	display: grid; place-items: center; cursor: pointer; transition: background-color var(--hover), color var(--hover);
}
.home-hero__pausa:hover, .home-hero__pausa:focus-visible { background: var(--fg); color: var(--bg); }
.home-hero__pausa span { display: block; width: 8px; height: 10px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.home-hero__pausa[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }

/* Botones del hero, como los del study case: "View project" (sólido, el del proyecto que se ve) y
   "Discover Glassy" con la flecha hacia abajo (contorno), que baja a lo que hay de Glassy debajo. */
.home-hero__botones { flex: none; display: flex; align-items: flex-end; gap: 12px; }

/* El H1 y el subtítulo abren el contenido justo debajo del hero: la frase de la casa, grande. */
.home-titular { padding-top: 96px; }
.home-titular__h1 { font-size: clamp(36px, 4.6vw, 88px); line-height: 1.04; max-width: 17em; text-wrap: balance; }
.home-titular__resto { display: block; color: rgba(255,255,255,0.5); } /* segunda parte del H1, en gris: menos peso, mismo texto */
.home-titular__sub { margin: 28px 0 0; max-width: 34em; font-size: clamp(18px, 1.5vw, 24px); line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.home-titular + .home-intro { padding-top: 96px; }
/* Las palancas cuelgan del subtítulo, que las nombra: van pegadas a él. */
.home-titular + .home-seccion--palancas { padding-top: 56px; }

/* Secciones bajo el hero: título grande y texto a una columna legible. */
.home-seccion { padding: 120px var(--gutter) 0; }
.home-seccion__titulo { font-size: clamp(34px, 4.2vw, 72px); line-height: 1.05; max-width: 16em; margin: 0 0 40px; text-wrap: balance; }
/* Estudios y marcas (Rubén, 06/10): un escalón por debajo, para no competir con la sección de arriba. Sigue siendo H2. */
.home-seccion__titulo--secundario { font-size: clamp(28px, 2.6vw, 44px); line-height: 1.1; }
/* Presentación en dos columnas: el H2 a la izquierda y el texto a la derecha, para que no sea un bloque de texto. */
.home-intro__texto { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; max-width: 820px; }
/* "Production house" y, debajo, "live action, hybrid or full AI" más pequeño y en el gris del titular (Rubén, 06/10). */
.home-intro__sub { display: block; margin-top: 0.3em; font-size: 0.55em; line-height: 1.15; color: rgba(255,255,255,0.5); }
.home-intro__sub::first-letter { text-transform: uppercase; }
@media (min-width: 1000px) {
	.home-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 120px); align-items: start; }
	.home-intro .home-seccion__titulo { margin: 0; }
}
.home-palancas { display: grid; gap: 48px; }
@media (min-width: 900px) { .home-palancas--3 { grid-template-columns: repeat(3, 1fr); } .home-palancas--2, .home-palancas--4 { grid-template-columns: repeat(2, 1fr); } }
.home-palanca { border-top: 1px solid rgba(255,255,255,0.2); padding-top: 24px; }
.home-palanca__titulo { font-size: clamp(24px, 2vw, 32px); line-height: 1.15; margin: 0 0 16px; }
.home-palanca__texto { color: var(--muted); font-size: 18px; line-height: 1.5; }
.home-palanca__texto p { margin: 0 0 12px; }
/* Palancas sin texto (Yago, 06/10): solo CONTROL, CRAFT y EFFICIENCY en grande, en fila y con su línea arriba.
   En el HTML van escritas normal y el CSS las pone en mayúsculas: escritas en mayúsculas, algunos lectores de pantalla las deletrean. */
.home-palancas--grandes { gap: 24px; }
.home-palancas--grandes .home-palanca { padding-top: 20px; }
.home-palancas--grandes .home-palanca__titulo {
	margin: 0; font-size: clamp(36px, 3.8vw, 72px); line-height: 1; text-transform: uppercase;
}
@media (max-width: 899px) { .home-palancas--grandes { gap: 0; } .home-palancas--grandes .home-palanca { padding: 16px 0 18px; } }
/* Palancas con frase (Rubén, 06/10): cada palabra en una tarjeta; al pasar el ratón (o llegar con el teclado)
   se ilumina y aparece su frase en cursiva. Sin ratón, la frase se ve siempre. */
.home-palancas--tarjetas { gap: var(--gap); }
.home-palancas--tarjetas .home-palanca {
	position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; isolation: isolate; overflow: hidden;
	min-height: clamp(160px, 13vw, 210px); padding: 24px 28px; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radio);
	transition: background-color var(--hover), border-color var(--hover);
}
/* Foto de fondo muy oscurecida y algo desaturada (Rubén, 06/10); al pasar el ratón se aclara y recupera el color. */
.home-palanca__fondo { position: absolute; inset: 0; z-index: -1; }
.home-palanca__fondo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.5); transition: filter var(--hover), transform var(--hover); }
/* Foto volteada en horizontal (casilla de la palanca; Yago, 08/10): el espejo va en la misma transformación que el zoom. */
.home-palanca__fondo--volteada img { transform: scale(-1, 1); }
.home-palanca__fondo::after { content: ""; position: absolute; inset: 0; background: rgba(7,7,7,0.8); transition: background-color var(--hover); }
.home-palancas--tarjetas .home-palanca__titulo { font-size: clamp(28px, 2.8vw, 48px); }
.home-palanca__frase {
	margin: 0; max-width: 16em; font-family: var(--serif); font-style: italic; font-weight: 400;
	font-size: clamp(25px, 2.3vw, 38px); line-height: 1.1; text-wrap: balance; /* Instrument Serif es estrecha: va algo más grande */
}
.home-palanca:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
	.home-palanca__frase { opacity: 0; transform: translateY(16px); transition: opacity var(--hover), transform var(--hover); }
	.home-palancas--tarjetas .home-palanca::after {
		content: "+"; content: "+" / ""; position: absolute; right: 26px; bottom: 20px; font-size: 30px; line-height: 1; color: var(--muted); /* decorativo: no se lee (T50) */
		transition: opacity var(--hover), transform var(--hover);
	}
	.home-palancas--tarjetas .home-palanca:hover, .home-palancas--tarjetas .home-palanca:focus-visible { background-color: #111; border-color: rgba(255,255,255,0.55); }
	.home-palanca:hover .home-palanca__fondo img, .home-palanca:focus-visible .home-palanca__fondo img { filter: saturate(1); transform: scale(1.04); }
	.home-palanca:hover .home-palanca__fondo--volteada img, .home-palanca:focus-visible .home-palanca__fondo--volteada img { transform: scale(-1.04, 1.04); }
	.home-palanca:hover .home-palanca__fondo::after, .home-palanca:focus-visible .home-palanca__fondo::after { background-color: rgba(7,7,7,0.55); }
	.home-palanca:hover .home-palanca__frase, .home-palanca:focus-visible .home-palanca__frase { opacity: 1; transform: none; }
	.home-palancas--tarjetas .home-palanca:hover::after, .home-palancas--tarjetas .home-palanca:focus-visible::after { opacity: 0; transform: rotate(45deg); }
}
@media (max-width: 899px) { .home-palancas--tarjetas .home-palanca { min-height: 0; padding: 24px; gap: 20px; } }
.home-seccion--filas .carrusel--proyectos { margin-left: 0; margin-right: 0; margin-bottom: 72px; }
.carrusel__enlace { margin-left: auto; }
/* Estudios, como en /makeitreal/ (Rubén, 06/10): una fila por estudio entre líneas finas, el logo en su color
   a la izquierda, la primera frase en su color y el resto en gris, y la web a la derecha. Toda la fila lleva a la web. */
/* Las filas van a todo el ancho y, al pasar el ratón, el fondo se tiñe un poco del color de la marca (como en
   /makeitreal/: 4 a 8 % según lo que luce cada color sobre negro). */
.estudios { margin-inline: calc(-1 * var(--gutter)); border-bottom: 1px solid rgba(255,255,255,0.2); }
.estudio {
	position: relative; display: grid; gap: 24px; align-items: center; padding: 40px var(--gutter);
	border-top: 1px solid rgba(255,255,255,0.2); transition: background-color var(--hover); --brillo: 6%;
}
/* Con el teclado, lo mismo al llegar a su enlace. :focus-within lo dejaba encendido tras un clic con el ratón (la web se
   abre en otra pestaña y el enlace se queda con el foco); :focus-visible solo salta con el teclado. Van en reglas separadas:
   un navegador sin :has() descartaría la lista entera y se perdería también el hover. */
.estudio:hover { background-color: color-mix(in srgb, var(--color-marca) var(--brillo), transparent); }
.estudio:has(:focus-visible) { background-color: color-mix(in srgb, var(--color-marca) var(--brillo), transparent); }
.estudio--tasty { --brillo: 7%; }
.estudio--kontent { --brillo: 8%; }
.estudio--dotfive { --brillo: 5%; }
@media (min-width: 900px) {
	.estudio { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr); gap: 48px; padding: 64px var(--gutter); }
}
.estudio__nombre { color: var(--color-marca); line-height: 0; }
.estudio__logo { display: block; width: clamp(170px, 17vw, 280px); }
.estudio__logo svg { display: block; width: 100%; height: auto; }
.estudio--tasty .estudio__logo { width: clamp(180px, 18.5vw, 300px); } /* letra de trazo fino: un poco más grande para que pese lo mismo */
.estudio__texto { margin: 0; max-width: 36em; color: var(--muted); font-size: 18px; line-height: 1.5; }
.estudio__titular { display: block; margin-bottom: 14px; color: var(--color-marca); font-size: clamp(22px, 2vw, 32px); line-height: 1.2; text-wrap: balance; }
/* Cuando el titular acaba en dos puntos, lo que sigue es una lista: en su línea, empieza en mayúscula (solo a la vista). */
.estudio__resto { display: block; }
.estudio__resto::first-letter { text-transform: uppercase; }
.estudio__url {
	justify-self: start; padding-bottom: 6px; border-bottom: 1px solid currentColor; white-space: nowrap;
	font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: color var(--hover);
}
@media (min-width: 900px) { .estudio__url { justify-self: end; } }
.estudio__url::after { content: ""; position: absolute; inset: 0; }
.estudio:hover .estudio__url, .estudio__url:focus-visible { color: var(--color-marca); }
/* Logos de agencias y marcas: como en el About de la web anterior, el logo al 60 % de una celda baja (3:1),
   5 por fila, en blanco y algo apagados. A ancho completo se veían el doble de grandes (Rubén, 06/10). */
.clientes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .clientes { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .clientes { grid-template-columns: repeat(5, 1fr); } }
.clientes__item { aspect-ratio: 2 / 1; display: grid; place-items: center; }
.clientes__item img { width: 90%; height: auto; opacity: 0.5; transition: opacity var(--hover); } /* apagados en reposo y encendidos del todo al pasar el ratón (Rubén, 07/10) */
@media (min-width: 700px) { .clientes__item { aspect-ratio: 3 / 1; } .clientes__item img { width: 62%; } }
.clientes__item:hover img { opacity: 1; }
.clientes__item--texto { font-size: clamp(16px, 1.3vw, 20px); color: var(--muted); text-align: center; }
.clientes[hidden], .clientes-panel[hidden] { display: none; } /* el panel de cada pestaña envuelve su lista (08/10) */
/* Selector Agencias / Marcas junto al título (reunión del 06/10): dos pastillas, la elegida en blanco. */
.clientes-seccion__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin: 0 0 40px; }
.clientes-seccion__cabecera .home-seccion__titulo { margin: 0; }
.clientes__pestanas { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50px; }
.clientes__pestana {
	padding: 9px 20px; border: 0; border-radius: 50px; background: transparent; color: var(--muted); font: inherit; font-size: 15px; cursor: pointer;
	transition: background-color var(--hover), color var(--hover);
}
.clientes__pestana:hover, .clientes__pestana:focus-visible { color: var(--fg); }
.clientes__pestana[aria-selected="true"] { background: var(--fg); color: var(--bg); }
.clientes__pestana:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

/* Estudios en un solo bloque (About, reunión del 06/10): cuatro tarjetas con logo, frase corta y web; al pasar el
   ratón, el brillo de color de la marca, como en las filas de la Home. Toda la tarjeta lleva a la web. */
.estudios-resumen { display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .estudios-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .estudios-resumen { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* a 1000-1099 px la web de KONTENT no cabía (T64) */
.estudio-resumen {
	position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 200px; padding: 28px;
	border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radio); --brillo: 6%;
	transition: background-color var(--hover), border-color var(--hover);
}
.estudio-resumen:hover {
	background-color: color-mix(in srgb, var(--color-marca) var(--brillo), transparent);
	border-color: color-mix(in srgb, var(--color-marca) 45%, transparent);
}
.estudio-resumen:has(:focus-visible) { /* aparte del :hover, como en .estudio */
	background-color: color-mix(in srgb, var(--color-marca) var(--brillo), transparent);
	border-color: color-mix(in srgb, var(--color-marca) 45%, transparent);
}
.estudio-resumen__nombre { color: var(--color-marca); line-height: 0; }
/* Caja con la proporción del logo más alto (190 x 51), así las frases empiezan a la misma altura aunque DotFive sea más bajo. */
.estudio-resumen__logo { display: flex; align-items: center; width: min(100%, 190px); aspect-ratio: 190 / 51; }
.estudio-resumen__logo svg { display: block; width: 100%; height: auto; }
.estudio-resumen__frase { margin: 0; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.3; }
.estudio-resumen__url {
	margin-top: auto; color: var(--muted); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
	transition: color var(--hover);
}
.estudio-resumen__url::after { content: ""; position: absolute; inset: 0; }
.estudio-resumen:hover .estudio-resumen__url, .estudio-resumen__url:focus-visible { color: var(--color-marca); }
.estudios-resumen__mas { margin: 32px 0 0; }
/* Equipo: los nombres uno debajo de otro, entre líneas finas (Yago, 08/10). */
.equipo { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(255,255,255,0.2); }
.equipo__persona { display: flex; flex-direction: column; gap: 6px; padding: 22px 0 24px; border-top: 1px solid rgba(255,255,255,0.2); }
.equipo__nombre { font-size: clamp(24px, 2.2vw, 36px); line-height: 1.15; }
.equipo__cargo { color: var(--muted); font-size: 16px; }
.equipo__nota { margin: 28px 0 0; max-width: 34em; color: var(--muted); }
.faq { max-width: 900px; border-bottom: 1px solid rgba(255,255,255,0.2); }
.faq__item { border-top: 1px solid rgba(255,255,255,0.2); }
.faq__pregunta { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; }
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; }
.faq__pregunta::after { content: "+"; content: "+" / ""; font-size: 24px; line-height: 1; transition: transform 0.55s var(--ease); }
.faq__item[open] .faq__pregunta::after { transform: rotate(45deg); }
.faq__respuesta { margin: 0; padding-bottom: 24px; max-width: 760px; color: var(--muted); font-size: 18px; line-height: 1.5; }

/* ---------- About ----------
   Hero a pantalla completa con el reel de /makeitreal/ de fondo, el H1 grande y la frase debajo, abajo a la izquierda.
   Debajo, filas de texto y foto que alternan de lado; en móvil, el texto y debajo su foto. */
.about-hero {
	position: relative; min-height: max(560px, 100svh); display: grid; grid-template-rows: 1fr auto; align-items: center;
	padding: 140px var(--marco) clamp(40px, 7svh, 88px); overflow: hidden; isolation: isolate;
}
.about-hero--sin-fondo { min-height: 0; padding-bottom: 0; }
.about-hero__media { position: absolute; inset: 0; z-index: -2; }
.about-hero__media img, .about-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	/* Velo en el centro para el titular y negro abajo para la frase y el paso al contenido. */
	background:
		radial-gradient(ellipse 60% 45% at 50% 48%, rgba(7,7,7,0.45), rgba(7,7,7,0) 100%),
		linear-gradient(to bottom, rgba(7,7,7,0.45) 0%, rgba(7,7,7,0.2) 30%, rgba(7,7,7,0.35) 60%, var(--bg) 100%);
}
.about-hero--sin-fondo::after { content: none; }
.about-hero__h1 {
	justify-self: center; max-width: 14em; text-align: center; text-wrap: balance;
	font-size: clamp(42px, 6.4vw, 124px); line-height: 1;
	text-shadow: 0 0 2px rgba(7, 7, 7, 0.9), 0 0 6px rgba(7, 7, 7, 0.85), 0 0 18px rgba(7, 7, 7, 0.7); /* el halo de la ficha de director: se lee sobre fotogramas claros del reel (T23) */
}
/* "Shooting since 2011, generating with AI since 2025.": debajo, más pequeño y algo más oscuro (Rubén, 06/10). */
.about-hero__resto { display: block; margin-top: 0.45em; font-size: max(18px, 0.3em); line-height: 1.3; letter-spacing: 0; color: rgba(255,255,255,0.62); }
.about-hero__frase { margin: 0; max-width: 40em; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.45; color: rgba(255,255,255,0.8); text-wrap: pretty; }
/* Abajo: la frase a la izquierda y, a la derecha, el aviso de IA del reel (Yago, 11/10, punto 41 A), pequeño y discreto.
   En el móvil, el aviso va debajo de la frase. */
.about-hero__pie { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 40px; }
.about-hero__ia { margin: 0; font-size: 12px; line-height: 1.3; letter-spacing: 0.06em; color: rgba(255,255,255,0.72); text-shadow: 0 0 6px rgba(7, 7, 7, 0.8); }
.js .about-hero__h1, .js .about-hero__frase, .js .about-hero__ia { animation: glassy-entra var(--dura-fundido) var(--ease) both; }
.js .about-hero__frase { animation-delay: 0.3s; }
.js .about-hero__ia { animation-delay: 0.5s; }

.about-fila { display: grid; gap: 40px; align-items: center; padding: 120px var(--gutter) 0; }
@media (min-width: 900px) {
	.about-fila { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 120px); }
	.about-fila--foto-izquierda { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
	.about-fila--foto-izquierda .about-fila__foto, .about-fila--foto-izquierda .about-historia__fotos { order: -1; }
	.about-fila--sin-foto { grid-template-columns: minmax(0, 1fr); }
}
/* Historia (Yago, 08/10): el texto de un tirón y, al lado, de una a tres fotos del campo "Historia: fotos".
   Con una, con su proporción; con dos, una al lado de otra en 4:5; con tres, la primera grande (3:2) y las otras dos
   debajo (4:3). En escritorio las fotos se quedan a la vista mientras se lee el texto; en el móvil van debajo. */
.about-historia__fila { align-items: start; }
.about-historia .prose > :last-child { margin-bottom: 0; }
.about-historia__fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.about-historia__foto { position: relative; overflow: hidden; border-radius: var(--radio); background: #151515; aspect-ratio: 4 / 3; }
.about-historia__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-historia__foto--principal { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.about-historia__fotos--1 .about-historia__foto { aspect-ratio: auto; }
.about-historia__fotos--1 .about-historia__foto img { position: static; height: auto; max-height: 85svh; }
.about-historia__fotos--2 .about-historia__foto { grid-column: auto; aspect-ratio: 4 / 5; }
/* Con cuatro (Yago, 11/10: «más junta y elegante»): rejilla de 2 x 2, todas en 3:2 y con poco aire entre ellas, para
   que se lean como una sola pieza al lado del texto. */
.about-historia__fotos--4 { gap: 6px; border-radius: var(--radio); overflow: hidden; }
.about-historia__fotos--4 .about-historia__foto { grid-column: auto; aspect-ratio: 3 / 2; border-radius: 0; }
@media (min-width: 900px) { .about-historia__fotos { position: sticky; top: 48px; } }
.about-fila--sin-foto .about-fila__texto { max-width: 900px; }
.about-fila__titulo { font-size: clamp(34px, 3.6vw, 64px); line-height: 1.05; margin: 0 0 32px; text-wrap: balance; }
.about-fila .prose { max-width: none; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; }
.about-fila .prose p { margin-bottom: 24px; }
.about-fila__foto { overflow: hidden; border-radius: var(--radio); }
.about-fila__foto img { width: 100%; } /* las horizontales, con su proporción */
.about-fila__foto--vertical { max-width: 560px; }
.about-fila__foto--vertical img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 900px) { .about-fila--foto-izquierda .about-fila__foto--vertical { justify-self: end; } }
/* Cómo trabajamos (Rubén, 06/10): filas numeradas a todo el ancho entre líneas finas, como las de los estudios.
   Número, título y texto; la primera frase en cursiva y el resto en gris. Al pasar el ratón, la fila se ilumina. */
.como { margin: 0 calc(-1 * var(--gutter)); padding: 0; list-style: none; border-bottom: 1px solid rgba(255,255,255,0.2); }
.como__fila {
	display: grid; gap: 12px 48px; padding: 36px var(--gutter); border-top: 1px solid rgba(255,255,255,0.2);
	transition: background-color var(--hover);
}
.como__fila:hover { background-color: rgba(255,255,255,0.03); }
@media (min-width: 900px) {
	.como__fila { grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 7fr); align-items: baseline; padding-block: 48px; }
}
.como__num { font-size: 14px; letter-spacing: 0.08em; color: var(--muted); font-variant-numeric: tabular-nums; }
.como__titulo { font-size: clamp(24px, 2.2vw, 36px); line-height: 1.15; text-wrap: balance; }
.como__texto { margin: 0; max-width: 38em; color: var(--muted); font-size: 17px; line-height: 1.55; }
.como__frase { display: block; margin-bottom: 10px; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.1vw, 34px); line-height: 1.15; color: var(--fg); text-wrap: balance; }
/* Equipo (Yago, 08/10, como antes de la reunión del 06/10): a la izquierda los nombres, con el fundador desplegable, y a
   la derecha el carrusel de fotos cuadradas, una cada vez, que pasa sola. En el móvil y la tableta, todo apilado. */
.about-equipo .about-fila__titulo { margin-bottom: 40px; }
@media (min-width: 900px) {
	.about-equipo--con-fotos { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 120px); align-items: start; }
}
/* El fundador se despliega con su texto y su web. Para que se vea que se abre (Yago, 08/10: antes era un "+" suelto que
   apenas se veía): "Leer más" y un botón redondo con el "+", como las flechas del carrusel; se rellena al pasar el ratón
   y el "+" gira hasta una X al abrir, con la animación de las preguntas frecuentes. */
.equipo__resumen { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; }
.equipo__resumen::-webkit-details-marker { display: none; }
.equipo__datos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.equipo__abrir {
	flex: none; display: inline-flex; align-items: center; gap: 14px; color: var(--muted);
	font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; transition: color var(--hover);
}
.equipo__abrir-icono {
	position: relative; flex: none; width: 44px; height: 44px; border: 1px solid var(--fg); border-radius: 50%; color: var(--fg);
	transition: background-color var(--hover), color var(--hover), transform 0.55s var(--ease);
}
.equipo__abrir-icono::before, .equipo__abrir-icono::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; margin: -0.5px 0 0 -7px; background: currentColor; }
.equipo__abrir-icono::after { transform: rotate(90deg); }
.equipo__detalle[open] .equipo__abrir-icono { transform: rotate(45deg); }
.equipo__resumen:hover .equipo__abrir, .equipo__resumen:focus-visible .equipo__abrir { color: var(--fg); }
.equipo__resumen:hover .equipo__abrir-icono, .equipo__resumen:focus-visible .equipo__abrir-icono { background: var(--fg); color: var(--bg); }
.equipo__abrir-texto--cerrar, .equipo__detalle[open] .equipo__abrir-texto--mas { display: none; }
.equipo__detalle[open] .equipo__abrir-texto--cerrar { display: inline; }
.equipo__resumen:focus-visible { outline: 1px solid var(--fg); outline-offset: 6px; }
@media (max-width: 479px) { .equipo__abrir-texto { display: none !important; } } /* en pantallas estrechas, solo el botón redondo */
.equipo__bio > .prose { padding-top: 20px; max-width: 34em; font-size: 17px; line-height: 1.55; color: var(--muted); }
.equipo__bio > .prose p { margin-bottom: 12px; }
.equipo__web { margin: 0; padding-bottom: 4px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.equipo__web a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
/* Una foto cada vez, cuadrada y del ancho de la columna. */
.carrusel--equipo .carrusel__foto { flex: 0 0 100%; }
.carrusel--equipo .carrusel__foto img { width: 100%; max-width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 899px) { .carrusel--equipo { max-width: 560px; margin-top: 48px; } }

/* Contacto: "Let's work together" y el formulario. */
.home-contacto { padding-bottom: 120px; }
.home-contacto__titulo { font-size: clamp(44px, 7vw, 128px); }
/* Con foto (Rubén, 06/10): el formulario a la izquierda y la foto a la derecha, a la altura de todo el bloque. En móvil, sin foto. */
.home-contacto__foto { display: none; }
@media (min-width: 1000px) {
	.home-contacto--con-foto { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 120px); align-items: stretch; }
	.home-contacto--con-foto .home-contacto__titulo { font-size: clamp(40px, 4.4vw, 80px); } /* un paso menos (reunión del 06/10) */
	.home-contacto__foto { display: block; position: relative; min-height: 480px; overflow: hidden; border-radius: var(--radio); }
	.home-contacto__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
.home-contacto__intro { margin: -16px 0 40px; font-size: 20px; color: var(--muted); max-width: 36em; }
.home-contacto__aviso { max-width: 760px; padding: 16px 20px; border-radius: var(--radio); border: 1px solid var(--fg); }
.home-contacto__aviso--ok { background: var(--fg); color: var(--bg); }
.formulario { display: grid; gap: 20px 24px; max-width: 900px; }
@media (min-width: 700px) { .formulario { grid-template-columns: 1fr 1fr; } .formulario__campo--ancho { grid-column: 1 / -1; } }
.formulario p { margin: 0; }
.formulario__campo label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--muted); }
.formulario input[type="text"], .formulario input[type="email"], .formulario textarea, .formulario select {
	width: 100%; padding: 14px 16px; border: 1px solid rgba(255,255,255,0.45); border-radius: var(--radio); /* 4,5:1 sobre el fondo: se ve dónde está el campo (T22) */
	background: transparent; font-size: 18px; transition: border-color var(--hover);
}
.formulario input:not([type="checkbox"]):focus-visible, .formulario textarea:focus-visible, .formulario select:focus-visible { outline: none; border-color: var(--fg); }
.formulario__acepta input:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; } /* la casilla no tiene borde que cambie: contorno (T15) */
.formulario textarea { resize: vertical; min-height: 140px; }
.formulario select { appearance: none; cursor: pointer; padding-right: 44px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff'/%3E%3C/svg%3E") no-repeat right 18px center; }
.formulario select option { background: var(--bg); }
/* Desplegable propio del tipo de proyecto (Rubén, 13/10): con JavaScript, main.js esconde el <select> (que sigue siendo lo
   que se envía) y pone un botón con su lista. Cerrado es igual que los demás campos; la flecha gira como el "+" de las
   preguntas frecuentes y la lista entra y sale con la curva de la web (la animación, en main.js). Fondo y borde, los del
   banner de cookies; la opción elegida en blanco, como la pestaña elegida de Agencias / Marcas. */
.desplegable { position: relative; }
.formulario .desplegable__boton {
	position: relative; display: block; width: 100%; padding: 14px 44px 14px 16px; border: 1px solid rgba(255,255,255,0.45); border-radius: var(--radio);
	background: transparent; font-size: 18px; text-align: left; cursor: pointer; transition: border-color var(--hover);
}
.formulario .desplegable__boton:focus { outline: none; }
.formulario .desplegable__boton:focus-visible, .formulario .desplegable__boton[aria-expanded="true"] { border-color: var(--fg); }
.desplegable__valor { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.desplegable__boton::after {
	content: ""; position: absolute; right: 18px; top: 50%; width: 12px; height: 8px; margin-top: -4px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff'/%3E%3C/svg%3E") no-repeat center;
	transition: transform 0.55s var(--ease);
}
.desplegable__boton[aria-expanded="true"]::after { transform: rotate(180deg); }
.desplegable__lista {
	position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 15;
	max-height: min(336px, 60vh); overflow-y: auto; overscroll-behavior: contain; padding: 6px;
	background: #121212; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radio);
}
.desplegable--arriba .desplegable__lista { top: auto; bottom: calc(100% + 6px); } /* sin sitio debajo, se abre hacia arriba */
.desplegable__lista[hidden] { display: none; }
.desplegable__opcion {
	display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: calc(var(--radio) - 4px); /* 44 px: zona de toque */
	color: var(--muted); font-size: 18px; line-height: 1.3; cursor: pointer;
	transition: background-color var(--hover), color var(--hover);
}
.desplegable__opcion.is-activa { background: rgba(255,255,255,0.12); color: var(--fg); }
.desplegable__opcion[aria-selected="true"] { background: var(--fg); color: var(--bg); }
.formulario__acepta { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--muted); }
.formulario__acepta input { margin-top: 3px; accent-color: var(--fg); width: 16px; height: 16px; flex: none; }
.formulario__acepta a { text-decoration: underline; text-underline-offset: 3px; }
.formulario__info { margin: 0; max-width: 46em; font-size: 13px; line-height: 1.5; color: var(--muted); }
.formulario__info a { text-decoration: underline; text-underline-offset: 3px; }
.formulario__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Aviso breve (por ejemplo, "Link copied"): aparece abajo en el centro y se va solo. */
.aviso {
	position: fixed; left: 50%; bottom: 32px; z-index: 60; transform: translate(-50%, 12px);
	background: var(--fg); color: var(--bg); padding: 12px 20px; border-radius: 50px; font-size: 14px; line-height: 1;
	opacity: 0; visibility: hidden; pointer-events: none;
	/* Al irse, la visibilidad cambia cuando ya se ha fundido (0,4 s); al llegar, al momento. */
	transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s;
}
.aviso.is-visible { opacity: 1; transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
.aviso:empty { display: none; }

/* Entrada del texto del hero del study case: solo CSS, desde el primer pintado. */
@keyframes glassy-entra { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.js .caso-hero__text > * { animation: glassy-entra var(--dura-fundido) var(--ease) both; }
.js .caso-hero__text > * + * { animation-delay: 0.15s; }

/* ---------- Aparición al hacer scroll ----------
   Solo con JavaScript (clase .js en <html>): sin él, todo se ve desde el principio.
   Fundido con un pequeño desplazamiento hacia arriba; cada elemento una sola vez. */
.js .revela {
	opacity: 0; transform: translateY(24px);
	transition: opacity var(--dura-fundido) var(--ease), transform var(--dura-fundido) var(--ease);
	transition-delay: var(--retraso, 0s);
}
.js .revela.visible { opacity: 1; transform: none; }
/* Las filas de estudios aparecen al bajar y además se tiñen al pasar el ratón. .revela cambiaba su transición por la
   de aparecer y el fondo se encendía y se apagaba de golpe: aquí van las dos juntas (Rubén, 06/10). */
.js .estudio.revela {
	transition: opacity var(--dura-fundido) var(--ease) var(--retraso, 0s), transform var(--dura-fundido) var(--ease) var(--retraso, 0s),
		background-color var(--hover);
}

/* ---------- Móvil: la barra del menú pasa a ser un botón arriba ---------- */
@media (max-width: 699px) {
	:root { --bar-w: 0px; --columna: 100%; --display: clamp(40px, 11vw, 64px); } /* en móvil el texto de los study cases ocupa todo el ancho (60,5vw dejaba 227 px) */
	.home-hero__capa { padding-top: 120px; }
	.home-titular { padding-top: 56px; }
	.home-titular + .home-intro { padding-top: 64px; }
	.home-hero__botones { flex-wrap: wrap; }
	.home-seccion { padding-top: 80px; }
	.home-seccion__titulo { margin-bottom: 28px; }
	.page-head { padding-top: 140px; }
	.page-head__intro, .page-head__sub { font-size: 18px; line-height: 26px; }
	.carrusel--proyectos { margin-bottom: 64px; }
	/* Sin wrap: con flex-wrap en columna, la columna medía lo que los logos y se salía 15 px por la derecha. */
	.site-footer { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
	.site-footer__info, .site-footer__marcas { max-width: 100%; }
	/* Un texto suelto más largo que la pantalla (ciudades, copyright) se parte en vez de desbordar; los 18 px de separación
	   van en un espacio, que al final de la línea no cuenta (igual que el pie del kit de las landings). */
	.site-footer__info p > span { white-space: normal; margin-right: 0; }
	.site-footer__info p > span::after { content: " "; word-spacing: 18px; }
	.site-footer__marcas { gap: 20px; flex-wrap: wrap; --mayus: 15px; --linea-base: 21px; } /* los cuatro logos en 336 px: caben desde 376 px de pantalla */
	.player { width: min(92vw, calc(70svh * 16 / 9)); }
	.caso-hero { height: auto; min-height: 70svh; }
	.sello-ia { top: 12px; right: 12px; width: 28px; height: 28px; }
	.sello-ia--hero, .sello-ia.home-hero__sello { top: 92px; right: 22px; width: 36px; height: 36px; } /* debajo del botón del menú y centrado con él */
	.player__close { right: 0; top: -52px; }
	.menu-toggle { top: 28px; right: 16px; bottom: auto; width: 48px; height: 48px; border-radius: 50%; }
	.menu { right: 0; width: 100%; padding: 96px 24px 32px; transform: translateX(100%); justify-content: flex-start; overflow-y: auto; }
	.menu__info { position: static; margin-top: auto; padding-top: 48px; }
	.menu__idiomas { position: static; margin-bottom: 40px; }
	.site-header { right: 72px; padding-top: 36px; }
	.dir-hero { min-height: 0; }
	.dir-hero__fotos { --fw: calc((100vw - 2 * var(--gutter) - var(--gap)) / 2); padding: 110px var(--gutter) 0; }
	.dir-hero__capa { position: static; padding: 32px var(--gutter) 0; }
	.dir-hero__text { position: static; width: auto; }
}
/* Hero de la Home hasta 899 px: los botones bajan debajo del título, como en el móvil. Entre 700 y 899 px el título quedaba
   en una columna de 171-228 px y se partía a mitad de palabra («Repso / l x / Dakar», auditoría T07). */
@media (max-width: 899px) {
	.home-hero__fila { flex-direction: column; align-items: flex-start; gap: 24px; }
	.home-hero__accion { justify-self: start; }
}
/* Ficha de director en una ventana de tableta baja (700-899 px de ancho y menos de 1000 de alto): el texto va debajo del
   collage, como en el móvil. Con descripciones largas el nombre se montaba sobre el logo (T25). */
@media (min-width: 700px) and (max-width: 899px) and (max-height: 1000px) {
	.dir-hero { min-height: 0; }
	.dir-hero__capa { position: static; padding: 32px var(--gutter) 0; }
	.dir-hero__text { position: static; width: auto; }
}
@media (max-width: 379px) {
	.site-footer__marcas { gap: 18px; --mayus: 14px; --linea-base: 20px; } /* 311 px: también en una fila a 360 */
}

/* ---------- Contact ----------
   Hero con un clip de la Home de fondo (degradado a negro como el study case), el contacto directo en grande
   a la izquierda y el formulario a la derecha; en escritorio el contacto directo se queda fijo al bajar. */
.contacto-hero {
	position: relative; min-height: clamp(520px, 72svh, 900px);
	display: flex; align-items: flex-end; padding: 0 var(--marco) 64px; overflow: hidden; isolation: isolate;
}
.contacto-hero__media { position: absolute; inset: 0; z-index: -2; }
.contacto-hero__media img, .contacto-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contacto-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to bottom, rgba(7,7,7,0.5) 0%, rgba(7,7,7,0.2) 35%, rgba(7,7,7,0.72) 72%, var(--bg) 100%);
}
.contacto-hero__text .label { margin: 0 0 20px; }
.contacto-hero__titulo { font-size: var(--display); line-height: 1.02; max-width: 11em; text-wrap: balance; }
.contacto-hero__intro { max-width: 34em; margin: 28px 0 0; font-size: 20px; line-height: 28px; color: var(--muted); }
.js .contacto-hero__text > * { animation: glassy-entra var(--dura-fundido) var(--ease) both; }
.js .contacto-hero__text > * + * { animation-delay: 0.15s; }
.js .contacto-hero__text > * + * + * { animation-delay: 0.3s; }

.contacto-cuerpo { display: grid; gap: 64px; padding: 88px var(--gutter) 24px; }
@media (min-width: 1000px) {
	.contacto-cuerpo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 120px); align-items: start; }
	.contacto-directo { position: sticky; top: 64px; }
}
.contacto-dato { border-top: 1px solid rgba(255,255,255,0.2); padding: 24px 0 36px; }
.contacto-dato .label { margin: 0 0 16px; color: var(--muted); }
.contacto-dato__valor {
	display: inline; margin: 0; font-size: clamp(26px, 2.6vw, 44px); line-height: 1.12; overflow-wrap: anywhere; text-decoration: none;
	/* La raya que crece al pasar el ratón, como en el resto de enlaces de texto. */
	background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
	background-position: right 0 bottom 0.04em; background-size: 0% 1px; transition: background-size var(--hover);
}
a.contacto-dato__valor:hover, a.contacto-dato__valor:focus-visible { background-position-x: left; background-size: 100% 1px; }
.contacto-dato__nota { margin: 12px 0 0; color: var(--muted); font-size: 16px; }
.contacto-formulario .formulario { max-width: none; }
.contacto-formulario .home-contacto__aviso { margin: 0 0 32px; }
.contacto-cuerpo + .home-seccion { padding-top: 96px; padding-bottom: 120px; }

/* "Book this director": el director para el que se pide disponibilidad, encima de los campos. */
.formulario__director {
	display: flex; align-items: center; gap: 20px; padding: 12px; margin: 0 0 4px;
	border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radio);
}
.formulario__director img { width: 112px; height: 72px; object-fit: cover; border-radius: calc(var(--radio) - 4px); flex: none; }
.formulario__director p { margin: 0; }
.formulario__director .label { color: var(--muted); }
.formulario__director-nombre { display: block; margin-top: 8px; font-size: clamp(24px, 2vw, 32px); line-height: 1.1; }

/* ---------- Páginas de texto (legales) ---------- */
.pagina h2 { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.15; margin: 56px 0 18px; }
.pagina h3 { font-size: 22px; line-height: 1.25; margin: 36px 0 12px; }
.pagina h2:first-child, .pagina h3:first-child { margin-top: 0; }
.pagina .legal-fecha { color: var(--muted); font-size: 16px; }
.pagina .legal-credito { color: var(--muted); font-size: 16px; margin-top: 56px; }
.pagina .legal-tabla { overflow-x: auto; margin: 0 0 32px; }
.pagina .legal-tabla:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; } /* se desplaza con el teclado (T19) */
.pagina table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.4; }
.pagina th, .pagina td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid rgba(255,255,255,0.2); }
.pagina th { font-weight: 400; color: var(--muted); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }

@media (max-width: 699px) {
	.contacto-hero { min-height: 64svh; padding-bottom: 40px; }
	.contacto-hero__intro { font-size: 18px; line-height: 26px; }
	.contacto-cuerpo { padding-top: 48px; gap: 48px; }
	.formulario__director img { width: 88px; height: 60px; }
	/* Desde "Book this director", en móvil el formulario va primero: es a lo que se viene. */
	.contacto-cuerpo:has(.formulario__director) .contacto-formulario { order: -1; }
}

/* ---------- Movimiento reducido ----------
   Con "reducir movimiento" no hay transiciones (los hovers cambian al momento), ni fundido entre páginas, ni entradas
   ni apariciones: todo se ve desde el principio. Un solo bloque, después de todo lo que anula. */
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	*, *::before, *::after { transition: none !important; }
	.js .revela { opacity: 1; transform: none; }
	.js .caso-hero__text > *, .js .contacto-hero__text > *, .js .about-hero__h1, .js .about-hero__frase { animation: none; }
	.js .cifras__item.revela::after { transform: none; }
}

/* ---------- Alto contraste (Windows) ----------
   Las rayas de la hamburguesa son fondos y los triángulos, bordes transparentes: en colores forzados desaparecían o salían
   cuadrados (auditoría T24). Aquí conservan su dibujo con el color del sistema. */
@media (forced-colors: active) {
	.menu-toggle { border: 1px solid CanvasText; }
	.burger span { forced-color-adjust: none; background: CanvasText; }
	.btn__play, .carrusel__pausa span, .home-hero__pausa span { forced-color-adjust: none; }
	/* Desplegable del formulario: la opción elegida con el color de selección del sistema y la señalada, con un marco. */
	.desplegable__opcion[aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
	.desplegable__opcion.is-activa { outline: 2px solid CanvasText; outline-offset: -2px; }
}

/* ---------- Banner de cookies ----------
   Pequeño, abajo a la izquierda y sin tapar la navegación. Aceptar (relleno) y Rechazar (borde) del mismo tamaño. */
.cookies {
	position: fixed; left: 24px; bottom: 24px; z-index: 20; width: min(360px, calc(100vw - 48px));
	padding: 18px; background: #121212; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radio);
	opacity: 0; transform: translateY(12px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.cookies.is-visible { opacity: 1; transform: none; }
.cookies__texto { display: flex; gap: 12px; align-items: flex-start; }
.cookies__icono { flex: none; margin-top: 1px; }
.cookies__texto p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.cookies__botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.cookies__botones .btn { width: 100%; min-height: 40px; padding: 0 16px; font-size: 13px; }
.cookies__mas { color: var(--fg); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 699px) { .cookies { left: 16px; right: 16px; bottom: 16px; width: auto; } }