/*
 * Sistema de diseño de la landing de Isabelle Junot.
 *
 * Todo este archivo solo se descarga en la página que use la plantilla
 * "Landing — Isabelle Junot (independiente)" (ver isabelle-junot-landing.php,
 * punto 4) — en ninguna otra página de tu sitio se carga ni se aplica.
 *
 * Las variables de la sección 1 son el equivalente, en CSS normal, al
 * sistema de colores/tipografías/espaciados que se definió para el mockup
 * aprobado. Las reglas de las secciones 2 a 5 son las que efectivamente
 * dibujan la cabecera, el contenido y el pie de la landing.
 */


/* ----------------------------------------------------------------------
 * 1. Variables de diseño (paleta, tipografías, espaciados).
 *
 * Las definimos dentro de #ij-landing (no en :root global) a propósito:
 * así quedan encapsuladas solo dentro de la landing y no pueden chocar
 * con variables que tu tema actual ya use en el resto del sitio.
 * ------------------------------------------------------------------- */
#ij-landing {
	--ij-marfil:          #FBFAF7; /* Fondo general */
	--ij-tinta:           #141413; /* Texto principal */
	--ij-bronce:          #8A7A68; /* Acento */
	--ij-gris-nav:        #4A453D; /* Texto de navegación */
	--ij-beige-claro:     #EDEAE2; /* Fondo de placeholders */
	--ij-beige-texto:     #A39A8A; /* Texto sobre placeholders */
	--ij-gris-etiqueta:   #8F887C; /* Etiquetas en mayúsculas */
	--ij-gris-caption:    #6B6457; /* Pies de foto */
	--ij-borde:           #E7E2D9; /* Líneas divisorias */

	--ij-font-cormorant:  'Cormorant Garamond', Georgia, serif;
	--ij-font-jost:       'Jost', system-ui, sans-serif;
}


/* ----------------------------------------------------------------------
 * 2. Reinicio defensivo.
 *
 * Tu tema actual puede tener sus propias reglas para body/enlaces/fuentes
 * que se aplican a TODA página (incluida esta). Estas líneas se asignan
 * explícitamente sobre la clase y el id exclusivos de esta plantilla, con
 * la especificidad suficiente para que manden aquí dentro sin necesidad
 * de !important ni de tocar nada del tema.
 * ------------------------------------------------------------------- */
body.ij-landing-body {
	margin: 0;
	background: #FBFAF7;
	color: #141413;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.6;
}
#ij-landing,
#ij-landing * {
	box-sizing: border-box;
}

/* El mockup se diseñó a un ancho fijo de 1280px. Sin este tope, en
 * cualquier pantalla más ancha (la mayoría de laptops y monitores)
 * TODO el diseño se estira para llenar ese espacio de más — las fotos,
 * los márgenes, todo crece proporcionalmente y se siente más grande de
 * lo que se veía en el mockup. Con este tope, la landing nunca crece
 * más allá de esos 1280px (se queda centrada, con el fondo marfil
 * rellenando los costados) y en pantallas más angostas sigue
 * encogiéndose con total normalidad. */
#ij-landing {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}
#ij-landing a {
	color: var(--ij-tinta);
	text-decoration: none;
}
#ij-landing a:hover {
	color: var(--ij-bronce);
}
#ij-landing h1,
#ij-landing h2,
#ij-landing h3,
#ij-landing p {
	margin: 0;
}


/* ----------------------------------------------------------------------
 * 3. Cabecera y navegación.
 * ------------------------------------------------------------------- */
.ij-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	padding: 28px 72px;
	border-bottom: 1px solid var(--ij-borde);
}
.ij-header__title {
	font-family: var(--ij-font-cormorant);
	font-style: italic;
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 0.02em;
	color: var(--ij-tinta);
}
.ij-header__nav {
	display: flex;
	gap: 36px;
}
.ij-header__nav a {
	font-family: var(--ij-font-jost);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ij-gris-nav);
}


/* ----------------------------------------------------------------------
 * 4. Títulos (h1/h2/h3) dentro del contenido de la página.
 *
 * Se usan automáticamente sobre cualquier título que crees en el editor
 * de bloques de la página — así todo lo que construyas en la Fase 3
 * respeta el mismo sistema tipográfico del mockup, sin tener que aplicar
 * estilos manualmente bloque por bloque.
 * ------------------------------------------------------------------- */
.ij-main h1 {
	font-family: var(--ij-font-cormorant);
	font-weight: 500;
	font-size: clamp(48px, 9vw, 96px);
	line-height: 0.95;
	letter-spacing: -0.01em;
}
.ij-main h2 {
	font-family: var(--ij-font-cormorant);
	font-weight: 500;
	font-style: italic;
	font-size: 32px;
}
.ij-main h3 {
	font-family: var(--ij-font-cormorant);
	font-weight: 500;
	font-size: 20px;
}


/* ----------------------------------------------------------------------
 * 5. Clases de utilidad reutilizadas del mockup.
 * ------------------------------------------------------------------- */

/* Etiqueta de sección en mayúsculas (ej. "PORTADAS", "FASHION"). */
.ij-label {
	font-family: var(--ij-font-jost);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ij-gris-etiqueta);
	font-weight: 600;
}

/* Texto pequeño bajo cada foto (pie de foto / caption). */
.ij-cap {
	font-family: var(--ij-font-jost);
	font-size: 12px;
	color: var(--ij-gris-caption);
	line-height: 1.6;
}

/* Recuadro "placeholder" para cuando una sección todavía no tiene foto real. */
.ij-placeholder {
	background: var(--ij-beige-claro);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ij-beige-texto);
	font-family: var(--ij-font-jost);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	padding: 16px;
	line-height: 1.5;
}

/* Pasarela de fotos horizontal (sección "Fashion"). */
.ij-pasarela {
	display: flex;
	flex-wrap: nowrap; /* sin esto, el bloque Galería de WordPress fuerza que las fotos bajen de línea en vez de quedarse en una sola fila deslizante */
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}
.ij-pasarela > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: auto !important; /* anula el ancho parejo que WordPress reparte por defecto entre las fotos de una Galería */
	height: 460px !important;
	max-width: 640px !important; /* tope: sin esto, una foto más panorámica que las demás (como la de la pradera) se estira muchísimo más ancha que el resto y descuadra toda la fila */
	overflow: hidden; /* junto con object-fit:cover en la foto de adentro, esto es lo que recorta (sin deformar) lo que sobre cuando una foto choca con el tope de arriba */
}
/* La foto en sí (dentro del marco de WordPress) tiene que ocupar TODO
 * ese marco (alto fijo de 460px, y ancho que se ajusta solo a la forma
 * de cada foto — hasta el tope de 640px de arriba). object-fit:cover
 * es lo que entra en juego solo cuando una foto es tan panorámica que
 * choca con ese tope: en vez de deformarla o encogerla, recorta los
 * costados y mantiene los 460px de alto, igual que el resto de la fila. */
.ij-pasarela img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* Le damos el margen izquierdo de 72px (el mismo "aire" que tienen el
 * resto de las secciones) a la PRIMERA foto, en vez de dárselo como
 * padding al contenedor completo (ver sección 9, donde a esta fila se le
 * quita el padding-left normal por este mismo motivo).
 *
 * Motivo (detectado probando en una pantalla grande): cuando un
 * contenedor con scroll horizontal tiene padding Y sus fotos usan
 * "scroll-snap-align" (el deslizamiento con "imán" para que encajen
 * bien), algunos navegadores corrigen la posición inicial del scroll
 * para pegar la primera foto al borde del recuadro — y en ese proceso se
 * "comen" ese padding, como si ya hubieras deslizado 72px sin tocar
 * nada. El resultado: la primera foto de Fashion aparecía recortada por
 * la izquierda nada más cargar la página. Usando margin en la propia
 * foto (en vez de padding en el contenedor) se evita ese efecto, y la
 * foto aparece completa, con el mismo aire que el resto de secciones. */
.ij-pasarela > *:first-child {
	margin-left: 72px;
}


/* ----------------------------------------------------------------------
 * 6. Pie de página / Contacto.
 * ------------------------------------------------------------------- */
.ij-footer {
	text-align: center;
	padding: 96px 72px;
	border-top: 1px solid var(--ij-borde);
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}
.ij-footer__email {
	font-family: var(--ij-font-jost);
	font-size: 32px;
}
.ij-footer__copy {
	font-family: var(--ij-font-jost);
	font-size: 12px;
	color: var(--ij-beige-texto);
}


/* ----------------------------------------------------------------------
 * 7. Tamaños de foto estandarizados (Portadas, Editoriales, Campañas).
 *
 * Cada foto subida tiene su propia proporción original (una es más
 * alargada, otra más cuadrada...). Sin esto, el bloque Imagen de
 * WordPress respeta la proporción de cada archivo tal cual, y las fotos
 * de una misma fila quedan de alturas distintas. Estas clases fuerzan a
 * todas las fotos de una misma sección a la misma proporción, recortando
 * (nunca deformando) lo que sobre — exactamente como en el mockup.
 * Se aplican en el bloque Imagen, en Avanzado → Clases CSS adicionales.
 *
 * Nota técnica (corregido en v1.0.4): cuando pones una clase en
 * "Clases CSS adicionales" de un bloque Imagen, WordPress la coloca en
 * el MARCO que envuelve la foto (<figure>), no en la foto en sí
 * (<img>). La propiedad que recorta la imagen (object-fit) solo
 * funciona puesta directamente sobre la <img> — por eso dividimos cada
 * clase en dos reglas: una para el marco (le da la proporción y le
 * "oculta" lo que sobresalga) y otra para la foto de adentro (la hace
 * ocupar todo el marco y es ahí donde se recorta de verdad).
 */
.ij-img-portada {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	width: 100%;
	display: block;
}
.ij-img-portada img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ij-img-editorial {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	width: 100%;
	display: block;
}
.ij-img-editorial img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ij-img-campana {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	width: 100%;
	display: block;
}
.ij-img-campana img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* ----------------------------------------------------------------------
 * 8. Logos de prensa ("As seen in").
 *
 * Importante: a diferencia de las fotos de la sección 7, aquí NO usamos
 * object-fit:cover (recortar). Recortar un logo lo desfigura — le corta
 * letras o lo deja irreconocible. En vez de eso, cada logo se coloca en
 * una caja de tamaño idéntico y la imagen se ajusta ENTERA dentro de esa
 * caja (object-fit:contain), sin recortarse ni deformarse.
 *
 * Esto es lo que corrige el problema: antes cada logo ocupaba el ancho
 * que la Galería de WordPress repartía automáticamente, y en la última
 * fila (al tener menos logos que columnas) WordPress los estiraba para
 * rellenar el espacio — por eso, por ejemplo, el logo de Telva se veía
 * varias veces más grande que el de Elle, aunque el archivo original no
 * tenía nada raro. Al fijar una caja de tamaño igual para todos, el
 * problema desaparece pase lo que pase con la cantidad de logos.
 *
 * Esta clase se aplica UNA sola vez, en el propio bloque Galería (no en
 * cada foto individual): bloque Galería → Avanzado → Clases CSS
 * adicionales → "ij-prensa".
 *
 * Los !important son necesarios aquí porque el bloque Galería de
 * WordPress aplica sus propias reglas de tamaño a cada foto con más
 * peso del que tendría normalmente nuestra clase — sin !important,
 * WordPress seguiría mandando y el problema no se corregiría.
 */
.ij-prensa.wp-block-gallery {
	justify-content: center;
	align-items: center;
	gap: 32px 48px !important;
}
.ij-prensa .wp-block-image {
	flex: 0 0 auto !important;
	width: 130px !important;
	height: 44px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
.ij-prensa .wp-block-image img {
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}


/* ----------------------------------------------------------------------
 * 9. Márgenes laterales y ritmo vertical entre secciones.
 *
 * Esto estaba pendiente desde el mockup original y nunca llegó a este
 * CSS: cada bloque de contenido que creas en el editor (Portadas,
 * Editoriales, Fashion...) es, de por sí, un elemento independiente que
 * WordPress estira a todo el ancho de la pantalla, sin ningún margen.
 * En el mockup, en cambio, CADA sección llevaba 72px de aire a los
 * lados. Por eso las fotos tocaban el borde del navegador en vez de
 * quedar con el mismo respiro que el resto del diseño.
 *
 * La solución: en vez de pedirte que añadas una clase a cada bloque (son
 * decenas), le damos ese margen de 72px a TODOS los bloques de
 * contenido de una vez, con un solo selector.
 */
.ij-main > * {
	padding-left: 72px;
	padding-right: 72px;
}

/* La fila de Fashion es la única excepción a propósito: en el mockup no
 * lleva margen a la derecha, para que la fila se salga del borde al
 * deslizarla — ese detalle es lo que hace que se sienta como una
 * "pasarela" real en vez de una fila encajonada. */
.ij-main > .ij-pasarela {
	padding-right: 0;
	/* Aquí también le quitamos el padding-left (que sí tienen todas las
	 * demás secciones): el motivo está explicado junto a
	 * ".ij-pasarela > *:first-child" en la sección 5, que es donde ese
	 * mismo aire de 72px se vuelve a añadir, pero de otra forma. */
	padding-left: 0;
}

/* El título (Hero) necesita además aire arriba, ya que es lo primero
 * que se ve después de la cabecera. */
.ij-main > *:first-child {
	padding-top: 72px;
}

/* La frase descriptiva y el correo, debajo del título: en el mockup
 * llevan un gris más suave (en vez del negro del texto normal) y más
 * espacio entre líneas — así se leen como un dato secundario, no como
 * el contenido principal de la página. */
.ij-main > p.has-text-align-right {
	color: var(--ij-gris-nav);
	line-height: 1.9;
}

/* Línea divisoria + espacio generoso ANTES de cada etiqueta de sección
 * (As seen in, Portadas, Editoriales, Fashion, Campañas, Video) — es lo
 * que en el mockup separa visualmente una sección de la siguiente.
 * Cubrimos los dos casos que existen en tu página: la etiqueta como
 * párrafo suelto, y el caso de "Editoriales / Reportajes", que quedó
 * dentro de su propio bloque Columnas de una sola columna. */
.ij-main > p.ij-label,
.ij-main > .wp-block-columns:has(> .wp-block-column > p.ij-label) {
	border-top: 1px solid var(--ij-borde);
	padding-top: 88px;
}

/* "As seen in" es la única sección con menos espacio arriba en el
 * mockup (48px en vez de 88px) — tiene su propio id porque es la
 * primera línea divisoria de la página. */
#prensa {
	padding-top: 48px;
}


/* ----------------------------------------------------------------------
 * 10. Portadas: que la 2ª fila (3 fotos) use el mismo ancho de columna
 * que la 1ª fila (4 fotos).
 *
 * En el mockup, las 7 portadas viven en UNA sola cuadrícula de 4
 * columnas — la 2ª fila simplemente ocupa 3 de esas 4 columnas y deja
 * la 4ª vacía. Pero como bloques de WordPress, construiste la 2ª fila
 * como un bloque de Columnas de 3 columnas INDEPENDIENTE — y WordPress
 * reparte esas 3 columnas a lo ancho de TODA la fila, haciéndolas más
 * grandes que las 4 columnas de arriba.
 *
 * La solución: en vez de que repartas el ancho a tu criterio, forzamos
 * aquí que las dos filas de Portadas (identificadas porque son las que
 * vienen justo después de la etiqueta "Portadas", con id="portfolio")
 * usen la misma cuadrícula de 4 columnas, tengan 4 o 3 fotos — así la
 * 2ª fila queda del mismo tamaño que la 1ª automáticamente, sin que
 * tengas que tocar nada en el editor.
 */
#portfolio + .wp-block-columns,
#portfolio + .wp-block-columns + .wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
}
#portfolio + .wp-block-columns > .wp-block-column,
#portfolio + .wp-block-columns + .wp-block-columns > .wp-block-column {
	width: auto !important;
}


/* ----------------------------------------------------------------------
 * 11. Carrusel "Social": las fotos se deslizan en una fila y la que
 * queda en el centro se ve un poco más grande que el resto.
 *
 * Se aplica en el mismo bloque de Columnas donde pusiste las fotos de
 * Social — exactamente igual que con "ij-pasarela" en Fashion: bloque
 * Columnas → Avanzado → Clases CSS adicionales → escribe
 * "ij-social-carousel".
 *
 * El "cuál foto es la más grande en cada momento" no lo decide este
 * CSS — lo decide un script muy pequeño (social-carousel.js) que vigila
 * cuál foto está cruzando el centro del carrusel mientras deslizas, y le
 * pone la clase "is-active". Aquí solo definimos cómo se ve una tarjeta
 * normal y cómo se ve la que tiene esa clase.
 */
.ij-main > .ij-social-carousel {
	display: flex !important; /* anula el "flex-wrap" por defecto de WordPress, que bajaría las fotos de línea en pantallas angostas en vez de dejarlas deslizar en una sola fila */
	flex-wrap: nowrap !important;
	align-items: flex-start; /* cada tarjeta mide distinto de alto (según cuánto ocupe el pie de foto), así que alineamos arriba en vez de centrar verticalmente — si no, "bailarían" al cambiar la foto activa */
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory; /* "mandatory" (a diferencia de Fashion, que usa "proximity"): aquí SIEMPRE queremos que una foto quede perfectamente centrada al soltar el dedo/el scroll, nunca a medias */
	-webkit-overflow-scrolling: touch;
	padding-top: 40px;
	padding-bottom: 40px;
	/* Este "relleno" invisible a los lados es necesario para que la
	 * PRIMERA y la ÚLTIMA foto también puedan llegar hasta el centro al
	 * deslizar — sin él, el carrusel se quedaría corto en los extremos y
	 * esas dos fotos nunca se agrandarían. El número (140px) es la mitad
	 * del ancho de cada tarjeta (280px, definido más abajo): así, con el
	 * carrusel quieto en su posición inicial, la primera foto ya queda
	 * perfectamente centrada. */
	padding-left: calc(50% - 140px) !important;
	padding-right: calc(50% - 140px) !important;
}
.ij-social-carousel > .wp-block-column {
	flex: 0 0 auto !important; /* anula el reparto de ancho igualitario que WordPress aplica por defecto a las columnas */
	width: 280px !important;
	scroll-snap-align: center;
	opacity: 0.55; /* las fotos que no están en el centro se ven un poco apagadas, para que la del centro destaque más todavía */
	transform: scale(0.9);
	transform-origin: top center; /* la tarjeta crece desde arriba hacia abajo, no desde el medio — así la foto no "flota" hacia arriba al agrandarse */
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.ij-social-carousel > .wp-block-column.is-active {
	opacity: 1;
	transform: scale(1.12);
	z-index: 1; /* para que, al agrandarse, se superponga ligeramente a las fotos vecinas en vez de quedar tapada por ellas */
}
.ij-social-carousel > .wp-block-column figure {
	margin: 0;
}
/* Importante: el recorte fijo (280 × 400px, con object-fit:cover) se le
 * pone a la FOTO, no a la tarjeta completa como en el primer intento —
 * así el pie de foto (el nombre de la marca, "Giorgio Armani", etc.)
 * queda LIBRE debajo de la foto en vez de quedar recortado/escondido
 * por el "overflow:hidden" que antes tenía la tarjeta. */
.ij-social-carousel > .wp-block-column img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	display: block;
	border-radius: 2px;
}
.ij-social-carousel > .wp-block-column figcaption {
	margin-top: 12px;
	text-align: center;
	font-family: var(--ij-font-jost);
	font-size: 12px;
	color: var(--ij-gris-caption);
}
/* Dos de tus fotos de Social todavía tienen la clase "ij-img-campana"
 * (la del recorte cuadrado de la sección Campañas) puesta por costumbre
 * — no hace falta que se la quites, estas dos líneas anulan, SOLO dentro
 * de este carrusel, el recorte cuadrado y el "overflow:hidden" que esa
 * clase le pone al marco de la foto (si no, ese "overflow:hidden" se
 * comería el pie de foto de esas dos tarjetas en particular). */
.ij-social-carousel .ij-img-campana {
	aspect-ratio: auto !important;
	overflow: visible !important;
}