/* ============================================================
   KOSS MODEL MANAGEMENT — main.css
   ============================================================
   Índice rápido (buscá estos comentarios con Ctrl+F):
   1. Variables y reset
   2. Tipografía base
   3. Header / navegación
   4. Hero (video home)
   5. About Koss
   6. Brands
   7. Models grid + tarjetas + tabs
   8. Model single (portfolio)
   9. Formularios
   10. Footer
   11. Páginas genéricas / 404
   12. Utilidades y responsive
   ============================================================ */

/* ---------- 1. VARIABLES Y RESET ---------- */
:root {
	--color-black: #000000;
	--color-cream: #FFFFFF;
	--color-gold: #C9A86A;
	--color-gray: #8A8784;
	--color-white: #FFFFFF;

	--font-display: 'Bodoni Moda', serif;
	--font-subtitle: 'Poppins', sans-serif;
	--font-body: 'Poppins', sans-serif;
	--font-accent: 'Poppins', sans-serif;

	--container-width: 1240px;
	--space-xs: 8px;
	--space-sm: 16px;
	--space-md: 32px;
	--space-lg: 64px;
	--space-xl: 120px;

	--transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--color-cream);
	color: var(--color-black);
	font-family: var(--font-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; background: none; border: none; }

/* Foco visible para accesibilidad de teclado */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
	html { scroll-behavior: auto; }
}

.koss-eyebrow {
	display: block;
	font-family: var(--font-accent);
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--color-gold);
	margin-bottom: var(--space-sm);
}

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 700;
	margin: 0 0 var(--space-sm);
	line-height: 1.15;
}

h1 { font-size: clamp(36px, 5vw, 64px); }
h2 { font-size: clamp(26px, 3vw, 36px); }
h3 { font-family: var(--font-subtitle); font-weight: 300; font-size: 22px; letter-spacing: 0.5px; }

p { margin: 0 0 var(--space-sm); color: var(--color-black); }

/* ---------- 3. HEADER / NAVEGACIÓN ---------- */
.koss-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	background: var(--color-cream);
	border-bottom: 1px solid rgba(0,0,0,0.1);
	transition: background var(--transition-base), padding var(--transition-base), border-color var(--transition-base);
	padding: 38px 0;
	padding-bottom: 10px;
}

.koss-photo-example{
    width: 100%;
    aspect-ratio: 1 / 2;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 15px;
}

.koss-header.header--transparent {
	background: transparent;
	padding: 42px 0;
	/* Mientras el header flota transparente sobre el video (arriba del
	   todo en Home), no queremos la línea divisoria — solo aparece
	   cuando es sólido (el JS saca esta clase al hacer scroll). */
	border-bottom-color: transparent;
}

.koss-header__inner {
	width: 100%;
	padding: 0 var(--space-sm);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.koss-logo-text {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(13px, 4.2vw, 27px);
	letter-spacing: 2px;
	color: var(--color-black);
	white-space: nowrap;
}

.header--transparent .koss-logo-text { color: var(--color-cream); }

/* Logo del header como imagen (2 versiones, blanca y negra).
   Por default (header sólido, es decir, TODAS las páginas menos el
   Home) mostramos la negra y ocultamos la blanca. */
.koss-logo-img {
	height: 60px;
	width: auto;
	display: block;
}

.koss-logo-img--light { display: none; }
.koss-logo-img--dark { display: block; }

/* Cuando el header está en su estado transparente (arriba del todo en
   Home, flotando sobre el video), invertimos: blanca sí, negra no.
   El JS de main.js ya se encarga de sacar/poner la clase
   .header--transparent al hacer scroll — este CSS no necesita saber
   nada de eso, solo reacciona a la clase presente o ausente. */
.header--transparent .koss-logo-img--light { display: block; }
.header--transparent .koss-logo-img--dark { display: none; }

.koss-menu {
	display: flex;
	gap: var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.koss-menu-item > a {
	font-family: var(--font-accent);
	font-size: 20px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-black) !important;
	display: flex;
	align-items: center;
	gap: 6px;
	position: relative;
	padding: 6px 0;
}

.header--transparent .koss-menu-item > a { color: var(--color-cream) !important; }

/* Signature: subrayado dorado que se expande de izquierda a derecha */
.koss-menu-item > a::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0;
	width: 0;
	height: 1px;
	background: var(--color-gold);
	transition: width var(--transition-base);
}

.koss-menu-item > a:hover::after,
.koss-menu-item.has-submenu:hover > a::after {
	width: 100%;
}

.koss-caret { margin-top: 2px; transition: transform var(--transition-base); }
.koss-menu-item.has-submenu:hover .koss-caret { transform: rotate(180deg); }

.koss-menu-item.has-submenu { position: relative; }

.koss-submenu {
	list-style: none;
	margin: 0;
	padding: var(--space-sm) 0;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	background: var(--color-black);
	min-width: 160px;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.koss-menu-item.has-submenu:hover .koss-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.koss-submenu .koss-menu-item > a {
	color: var(--color-cream) !important;
	padding: 8px var(--space-md);
	justify-content: center;
}

.koss-menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	width: 28px;
	position: relative; /* necesario para que z-index tenga efecto */
	z-index: 1001;      /* por encima del panel (.koss-nav, z-index:999) */
}

.koss-menu-toggle span {
	display: block;
	height: 2px;
	background: var(--color-black);
	transition: background var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
}

/* Animación hamburguesa -> X. Las 3 barritas son hijas directas del
   botón (span:nth-child), así que las agarramos por posición: la del
   medio desaparece, la de arriba y la de abajo rotan 45° y se corren
   al centro para formar la cruz. */
.koss-menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.koss-menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.koss-menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.header--transparent .koss-menu-toggle span { background: var(--color-cream); }

/* ---------- 4. HERO (VIDEO HOME) ---------- */
.koss-hero {
	position: relative;
	height: 100vh;
	min-height: 560px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--color-black);
}

.koss-hero__video {
	position: absolute;
	top: 50%; left: 50%;
	width: 100%; height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	/*filter: blur(2px) brightness(0.75);*/
}

.koss-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11,11,11,0.55) 0%, rgba(11,11,11,0.35) 40%, rgba(11,11,11,0.65) 100%);
}

.koss-hero__content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 0 var(--space-md);
}

.koss-hero__logo {
	width: 100%;
	max-width: 480px; /* en pantallas grandes no se agranda de más */
	height: auto;
}

.koss-hero__title {
	color: var(--color-cream);
	margin-bottom: var(--space-xs);
	letter-spacing: 1px;
}

.koss-hero__subtitle {
	font-family: var(--font-subtitle);
	font-weight: 300;
	letter-spacing: 3px;
	text-transform: uppercase;
	font-size: 14px;
	color: var(--color-gold);
	margin: 0;
}

.koss-hero__scroll-hint {
	position: absolute;
	bottom: var(--space-lg);
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: 1px;
	height: 50px;
	background: rgba(247,245,242,0.4);
	overflow: hidden;
}

.koss-hero__scroll-hint span {
	display: block;
	width: 100%;
	height: 20px;
	background: var(--color-gold);
	animation: koss-scroll-hint 2s infinite;
}

@keyframes koss-scroll-hint {
	0% { transform: translateY(-20px); }
	100% { transform: translateY(50px); }
}

/* ---------- 5. ABOUT KOSS ---------- */
.koss-about {
	padding: calc(var(--space-lg) + 40px) var(--space-md) var(--space-xl);
	padding-bottom: 40px;
}

/*.koss-about__inner {
	max-width: var(--container-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}*/
.koss-about__inner {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
}

/*.koss-about__media img { width: 100%; height: 600px; object-fit: cover; }*/

/*.koss-about__media img{
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}*/
.koss-about__media img{
	width: 100%;
	max-width: 800px;
	height: auto;
	object-fit: contain;
}

/* La imagen va PRIMERO en el HTML (page-about.php), pero acá la mandamos
   a la 2da columna visualmente con `order`, así queda texto-izquierda,
   imagen-derecha sin tocar el PHP. En mobile no importa: a los 1024px
   la grilla pasa a una sola columna y el order deja de tener efecto
   visual relevante (se apilan en el mismo orden que estaban). */
.koss-about__media {
	width: 100%;
	display: flex;
	justify-content: center;
}

.koss-about__text {
	width: 100%;
	max-width: 800px;
}

.koss-about__content {
	text-align: center;
	line-height: 1.9;
}

/* !important acá es a propósito (normalmente se evita, pero este es
   justo el caso donde tiene sentido usarlo): el editor de WordPress le
   agrega a veces su propia alineación a CADA párrafo cuando pegás texto
   desde Word/Google Docs — eso es un estilo puesto casi "directo en el
   elemento", que le gana a cualquier regla común de un archivo CSS,
   sin importar la especificidad. Con !important nos aseguramos de que
   el centrado se aplique SIEMPRE, pegues el texto de donde lo pegues,
   sin tener que acordarte de revisar la alineación de cada párrafo
   a mano cada vez que edites esta página. */
.koss-about__content p,
.koss-about__content h1,
.koss-about__content h2,
.koss-about__content h3,
.koss-about__content li {
	text-align: center !important;
}

.koss-about__content p {
	font-size: 16px;
}
@media (max-width: 768px) {
	.koss-about__content p {
		font-size: 13px;
	}
}

.koss-about__content a{
    color: var(--color-black);
    text-decoration: none;
    font-weight: 600;
    transition: color .3s ease;
}

.koss-about__content a:hover{
    color: var(--color-gold);
    text-decoration: underline;
}

/* ---------- 6. BRANDS ---------- */
.koss-brands-page { padding: calc(var(--space-xl) + 40px) var(--space-md) var(--space-xl); }

.koss-section-header {
	max-width: 640px;
	margin: 0 auto var(--space-lg);
	text-align: center;
}

.koss-brands-grid {
	max-width: var(--container-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--color-gray);
	border: 1px solid var(--color-gray);
}

.koss-brand-item {
	background: var(--color-cream);
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
	transition: background var(--transition-base);
}

.koss-brand-item:hover { background: var(--color-black); }

.koss-brand-wordmark {
	font-family: var(--font-subtitle);
	font-weight: 300;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 18px;
	text-align: center;
	transition: color var(--transition-base);
}

.koss-brand-item:hover .koss-brand-wordmark { color: var(--color-gold); }

.koss-brand-item img { max-height: 60px; width: auto; filter: grayscale(100%); opacity: 0.75; transition: var(--transition-base); }
.koss-brand-item:hover img { filter: grayscale(0%); opacity: 1; }

/* ---------- 7. MODELS GRID + TARJETAS + TABS ---------- */
.koss-page-header {
	padding: calc(var(--space-xl) + 0px) var(--space-md) var(--space-sm);
	text-align: center;
}

.koss-page-header p { max-width: 520px; margin: 0 auto; }

/* ---------- Mobile: respiro superior de títulos en páginas internas ----------
   Una sola regla cubre las 3 páginas: Be a Model y Contact comparten
   .koss-page-header (en Contact está vacía pero empuja el contenido),
   y About usa .koss-about. El número final ajustalo en vivo con DevTools. */
@media (max-width: 768px) {
	.koss-page-header,
	.koss-about {
		padding-top: calc(var(--space-lg) + 30px); /* 70px ≈ alto del header en mobile */
	}
}

/* Frase destacada con borde llamativo (ej: debajo de "Become a Model") */
.koss-tagline-badge {
	display: inline-block;
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp(18px, 2.4vw, 24px);
	line-height: 1.4;
	color: var(--color-black);
	border: 1.5px solid var(--color-gold);
	padding: var(--space-sm) var(--space-lg);
	margin-top: var(--space-sm);
	position: relative;
}

/* Esquinas doradas para que el marco se sienta más armado que un
   simple rectángulo — recurso típico de invitaciones/tarjetas editoriales. */
.koss-tagline-badge::before,
.koss-tagline-badge::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	border: 1.5px solid var(--color-gold);
}
.koss-tagline-badge::before { top: -5px; left: -5px; border-right: none; border-bottom: none; }
.koss-tagline-badge::after { bottom: -5px; right: -5px; border-left: none; border-top: none; }

.koss-models-grid-wrap { padding: 0 var(--space-xs) var(--space-sm); }

.koss-tabs {
	max-width: var(--container-width);
	margin: 0 auto var(--space-lg);
	display: flex;
	justify-content: center;
	gap: var(--space-md);
	border-bottom: 1px solid rgba(138,135,132,0.3);
}

.koss-tab {
	font-family: var(--font-accent);
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: var(--space-sm) var(--space-xs);
	color: var(--color-gray);
	position: relative;
	top: 1px;
	border-bottom: 2px solid transparent;
	transition: color var(--transition-base), border-color var(--transition-base);
}

.koss-tab.is-active, .koss-tab:hover { color: var(--color-black); border-color: var(--color-gold); }

.koss-models-grid {
	max-width: var(--container-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md) var(--space-sm);
	padding-bottom: 30px;
}

/* Sección "Currently Scouting" mientras no hay modelos cargados */
.koss-scouting {
	max-width: 640px;
	margin: 0 auto var(--space-xl);
	padding: 0 var(--space-md);
	text-align: center;
	margin-bottom: 40px;
}

/* h2 ya usa var(--font-display) = Bodoni Moda por defecto (ver el
   bloque :root al principio del archivo), no hace falta repetirlo acá. */
.koss-scouting h2 { margin-top: 0; }

.koss-scouting p {
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

/*.koss-scouting__images {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	margin: var(--space-lg) 0;
}*/
.koss-scouting__images {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
	margin: var(--space-md) 0;
	align-items: start;
}

.koss-scouting__image-slot {
	/*width: 260px;*/
	min-width: 0; /* clave: sin esto, la imagen de adentro agranda la columna de la grilla a su tamaño natural en píxeles */
	aspect-ratio: 1 / 2;
	overflow: hidden;
	background: var(--color-black);
}

.koss-scouting__image-slot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.koss-model-card { display: block; }

.koss-model-card__image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 2 / 3;
	/*background: var(--color-black);*/
}

.koss-model-card__image img {
	width: 100%; height: 100%;
	object-fit: cover;
	/*filter: grayscale(100%);*/
	transition: filter var(--transition-base), transform var(--transition-base);
}

.koss-model-card:hover .koss-model-card__image img {
	/*filter: grayscale(0%);*/
	transform: scale(1.04);
}

/* Overlay con nombre + ficha técnica al hacer hover, igual que la
   referencia que pasaste. Arranca invisible (opacity:0) y aparece con
   una transición suave — nunca se saca del DOM, solo se atenúa, así
   no hay ningún parpadeo raro al pasar el mouse. */
/*.koss-model-card__overlay {
	position: absolute;
	inset: 0;
	background: rgba(11, 11, 11, 0.50);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: var(--space-md);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-base), visibility var(--transition-base);
	text-align: center;
}*/
.koss-model-card__overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to bottom,
        rgba(11, 11, 11, 0) 0%,
        rgba(11, 11, 11, 0) 45%,
        rgba(11, 11, 11, 0.25) 55%,
        rgba(11, 11, 11, 0.75) 75%,
        rgba(11, 11, 11, 0.85) 100%
    );

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    gap: var(--space-sm);
    padding: var(--space-md);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity var(--transition-base),
        visibility var(--transition-base);

    text-align: center;
}

.koss-model-card:hover .koss-model-card__overlay {
	opacity: 1;
	visibility: visible;
}

.koss-model-card__overlay-name {
	display: flex;
	flex-direction: column;
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--color-cream);
}

.koss-model-card__overlay-name span:first-child { font-size: 20px; letter-spacing: 1px; }
.koss-model-card__overlay-name span:last-child { font-size: 15px; font-weight: 400; letter-spacing: 2px; opacity: 0.85; }

.koss-model-card__mobile-summary {
    display: none;
}

/* En dispositivos móviles, mostrar la información directamente */
@media (max-width: 768px) {

    .koss-model-card__overlay {
        inset: 0;

        background: transparent;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        opacity: 1;
        visibility: visible;

        justify-content: flex-end;

        padding: 18px 12px 12px;
    }

	.koss-model-card__stats {
    	display: none;
	}

	.koss-model-card__mobile-summary {
		display: flex;
		flex-direction: column;
		gap: 4px;
		width: 100%;
	}

}
.koss-model-card__mobile-row {
    display: flex;
    justify-content: center;
    align-items: center;
    /*flex-wrap: wrap;*/
    gap: 7px;
    
    color: #ffffff;

    font-family: var(--font-accent);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;

    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.koss-model-card__mobile-row strong {
    font-weight: 700;
}

.koss-model-card__stats {
	width: 100%;
	max-width: 220px;
	margin: 0;
	padding-top: var(--space-sm);
	border-top: 1px solid rgba(247,245,242,0.25);
}

.koss-model-card__stat-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	/*padding: 3px 0;*/
}

.koss-model-card__stat-row dt {
	font-family: var(--font-accent);
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-gold);
	margin: 0;
}

.koss-model-card__stat-row dd {
	font-family: var(--font-accent);
	font-size: 11px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-cream);
	margin: 0;
}

.koss-model-card__name {
	padding-top: var(--space-xs);
	text-align: center;
}

.koss-model-card__name span {
	font-family: var(--font-subtitle);
	font-weight: 300;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-size: 14px;
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition-base), color var(--transition-base);
}

.koss-model-card:hover .koss-model-card__name span {
	border-color: var(--color-gold);
	color: var(--color-gold);
}


/* ---------- 8. MODEL SINGLE (PORTFOLIO) ---------- */
.koss-model-single { max-width: var(--container-width); margin: 0 auto; padding: calc(var(--space-lg) + 30px) var(--space-md) var(--space-lg); }
@media (max-width: 768px) {
	.koss-model-single { padding: calc(var(--space-sm) + 20px) var(--space-sm) var(--space-sm); }
}

/* NUEVO: grilla de 2 columnas — datos a la izquierda, foto a la derecha */
.koss-model-single__layout {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: var(--space-lg);
	align-items: center;
	margin-bottom: var(--space-lg);
}

/* Columna izquierda: nombre + ficha, todo alineado a la derecha
(como en la referencia, el texto "apoya" contra la foto). */
.koss-model-single__info {
	max-width: 640px;
	margin: 0;
	text-align: right;
}

/* Nombre en 2 líneas: nombre negro/bold, apellido gris/light */
.koss-model-single__name { margin: 0 0 var(--space-md); }
.koss-model-single__name span {
	display: block;
	font-family: var(--font-subtitle);
	text-transform: uppercase;
	line-height: 1.1;
	letter-spacing: 2px;
	/* Red de seguridad: si algún nombre/apellido es larguísimo,
	   corta la palabra y la sigue en la línea siguiente en vez de
	   desbordar la pantalla en horizontal. */
	overflow-wrap: break-word;
}
.koss-model-single__first {
	font-weight: 600;
	font-size: clamp(44px, 4.5vw, 80px);
	color: var(--color-black);
}
.koss-model-single__last {
	font-weight: 300;
	font-size: clamp(44px, 4.5vw, 80px);
	color: var(--color-gray);
}
/* Mobile: nombre más chico para que nunca se pase de la pantalla */
@media (max-width: 768px) {
	.koss-model-single__first { font-size: clamp(26px, 8.5vw, 50px); }
	.koss-model-single__last  { font-size: clamp(26px, 8.5vw, 50px); }

	.koss-pair {
	--pair-left-top: 0px;
	--pair-right-top: 0px;
	}
}

/* Ficha técnica: label gris + valor negro en la misma línea,
pegados a la derecha, sin bordes (como en la captura). */
.koss-model-stats {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	text-align: right;
}
.koss-model-stats__row {
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	gap: 10px;
	border-bottom: none;
	padding-bottom: 0;
}
.koss-model-stats__row dt {
	font-family: var(--font-accent);
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-gray);
	margin: 0;
}
.koss-model-stats__row dd {
	margin: 0;
	font-family: var(--font-accent);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-black);
}

/* Link "Download Portfolio" (PDF del modelo) */
.koss-download-portfolio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--space-md);
	font-family: var(--font-accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--color-black);
	border-bottom: 1px solid var(--color-gold);
	padding-bottom: 3px;
	transition: color var(--transition-base), border-color var(--transition-base);
}
.koss-download-portfolio:hover { color: var(--color-gold); }
.koss-download-portfolio svg { width: 16px; height: 16px; flex-shrink: 0; }



/* Columna derecha: foto principal vertical, recortada prolija */
/*.koss-model-single__hero { margin-bottom: 0; }
.koss-model-single__hero img {
	width: 100%;
	aspect-ratio: 2 / 3;
	max-height: 780px;
	object-fit: cover;
}*/
/* Columna derecha: foto principal completa, sin recorte */
.koss-model-single__hero { margin-bottom: 0; }
.koss-model-single__hero img {
	width: 100%;
	height: auto; /* el container toma la proporción de la foto */
}

/* La galería sigue igual, debajo de las 2 columnas */
/*.koss-model-single__gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
}
.koss-model-single__gallery img { width: 100%; height: 640px; object-fit: cover; }*/



/* ---------- GALERÍA: pares estilo Premium Models ----------
   Separación UNIFORME y chica: el mismo gap (20px) rige tanto
   entre las 2 fotos de un par (horizontal) como entre un par
   y el siguiente (vertical). Sin offsets: todo queda parejo. */
.koss-model-single__gallery {
	display: flex;
	flex-direction: column;
	gap: 20px; /* separación vertical entre pares */
}

/* Par = grilla de 2 columnas (3fr / 2fr por defecto) */
/* .koss-pair {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2.5fr);
	gap: 15px; /* separación horizontal entre las 2 fotos del par */
	/* align-items: start;
} */

/* Variante B: proporción invertida para variar visualmente */
/* .koss-pair--b {
	grid-template-columns: minmax(0, 2.5fr) minmax(0, 3fr);
} */

/* Par = grilla de 2 columnas con variables editables (estilo Premium Models):
   --pair-left / --pair-right  = ancho de cada columna
   --pair-left-top             = cuánto BAJA la foto izquierda
   --pair-right-top            = cuánto BAJA la foto derecha
   (con la derecha bajada 20px, la izquierda queda "más arriba") */
.koss-pair {
	--pair-left: 3fr;
	--pair-right: 2.5fr;
	--pair-left-top: 0px;
	--pair-right-top: 70px;
	display: grid;
	grid-template-columns: minmax(0, var(--pair-left)) minmax(0, var(--pair-right));
	gap: 20px;
	align-items: start;
}

/* Foto izquierda y foto derecha del par */
.koss-pair img:nth-child(1) { margin-top: var(--pair-left-top); }
.koss-pair img:nth-child(2) { margin-top: var(--pair-right-top); }

/* Variante B: proporciones invertidas, mismo desfase sutil */
.koss-pair--b {
	--pair-left: 2.5fr;
	--pair-right: 3fr;
	--pair-left-top: 15px;   /* nuevo */
	--pair-right-top: 0px;   /* nuevo */
}

/* Par "full": una sola foto horizontal, a todo lo ancho */
.koss-pair--full {
	grid-template-columns: 1fr;
}

/* Par "single": una sola foto vertical suelta */
.koss-pair--single {
	grid-template-columns: 1fr;
	justify-items: center;
}
.koss-pair--single img {
	max-width: 60%;
}

/* Las fotos: respetan su proporción y nunca más altas que la pantalla */
.koss-pair img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 90vh;
	display: block;
}




/* Tablet/mobile: se apila — foto primero, datos centrados debajo */
@media (max-width: 1024px) {
	.koss-model-single__layout {
		grid-template-columns: 1fr;
		gap: var(--space-xs);
	}
	.koss-model-single__hero { order: -1; }
	.koss-model-single__info {
		margin: 0 auto;
		text-align: center;
	}
	.koss-model-stats__row { justify-content: center; }
	.koss-model-single__hero img { 
		/*max-height: 670px;*/
		height: auto;
	}

	.koss-pair {
	--pair-left-top: 0px;
	--pair-right-top: 0px;
	}
}

/* Mobile: reordenamos a NOMBRE → FOTO → DATOS.
   Truco: display:contents hace que .koss-model-single__info no genere
   caja, y su h1 (nombre) y su dl (datos) pasan a ser items directos
   de la grilla del layout — así podemos reordenarlos con order.
   (En desktop no se toca nada: info sigue siendo la columna izquierda.) */
@media (max-width: 768px) {
	.koss-model-single__info {
		display: contents;
		text-align: center;
	}
	.koss-model-single__name { order: 1; margin-bottom: 0; }
	.koss-model-single__first { margin-top: 40px; } /* NUEVO: separa el nombre del header fijo */
	.koss-model-single__hero { order: 2; }
	.koss-model-stats { order: 3; margin-top: var(--space-sm); }
	.koss-download-portfolio { order: 4; justify-self: center; }
}

.koss-contact__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
}

.koss-contact__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(0,0,0,0.15);
	border-radius: 50%;
	color: var(--color-black);
	transition: border-color var(--transition-base), color var(--transition-base);
}

.koss-contact__social a:hover { border-color: var(--color-gold); color: var(--color-gold); }
.koss-contact__social svg { width: 30px; height: 30px; }

/* Ícono de Instagram en la tabla de medidas */
.koss-ig-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-black);
	transition: color var(--transition-base), transform var(--transition-base);
}
.koss-ig-link:hover { color: var(--color-gold); transform: scale(1.15); }
.koss-ig-link svg { width: 30px; height: 30px; }

/* Cursor "zoom" para indicar que las fotos se pueden agrandar */
.koss-model-single__hero img,
.koss-model-single__gallery img {
	cursor: zoom-in;
	transition: opacity var(--transition-base);
}
/* @media (max-width: 768px){
	.koss-model-single__hero img,
	.koss-model-single__gallery img {
		margin-top: 40px;
	}
} */

.koss-model-single__hero img:hover,
.koss-model-single__gallery img:hover { opacity: 0.92; }


/* ---------- LIGHTBOX (modal con navegación prev/next) ---------- */
.koss-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.koss-lightbox.is-open { opacity: 1; visibility: visible; }

.koss-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.koss-lightbox__img {
	position: relative;
	z-index: 1;
	max-width: 92vw;
	max-height: 92vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 20px 60px rgba(0,0,0,0.5);
	user-select: none;
	-webkit-user-drag: none; /* evita que se pueda arrastrar la imagen */
}

/* Botón cerrar (X) arriba a la derecha */
.koss-lightbox__close {
	position: absolute;
	top: 24px;
	right: 28px;
	z-index: 2;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 50%;
	background: rgba(0,0,0,0.5);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}
.koss-lightbox__close:hover {
	border-color: var(--color-gold);
	background: var(--color-gold);
	color: var(--color-black);
}

/* Flechas de navegación a los costados */
.koss-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 56px;
	height: 56px;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 50%;
	background: rgba(0,0,0,0.45);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}
.koss-lightbox__nav:hover {
	border-color: var(--color-gold);
	background: var(--color-gold);
	color: var(--color-black);
}
.koss-lightbox__nav--prev { left: 28px; }
.koss-lightbox__nav--next { right: 28px; }

/* Si hay una sola foto, oculto las flechas (no tienen sentido) */
.koss-lightbox.is-single .koss-lightbox__nav { display: none; }

/* Contador "1 / 12" abajo centrado */
.koss-lightbox__counter {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	font-family: var(--font-accent);
	font-size: 15px;
	letter-spacing: 3px;
	color: rgba(255,255,255,0.7);
}

/* En mobile: botones más chicos y más cerca de los bordes */
@media (max-width: 768px) {
	.koss-lightbox__close { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 24px; }
	.koss-lightbox__nav { width: 44px; height: 44px; font-size: 20px; }
	.koss-lightbox__nav--prev { left: 12px; }
	.koss-lightbox__nav--next { right: 12px; }
	.koss-lightbox__counter { bottom: 16px; font-size: 11px; }
}

/* ---------- 9. FORMULARIOS ---------- */
.koss-scout, .koss-contact { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--space-md) var(--space-xl); display: grid; grid-template-columns: 1fr; padding-bottom: 50px; }

/*.koss-scout__inner, .koss-contact__inner {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: var(--space-xl);
}*/
.koss-scout__inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:40px;
    max-width:900px;
    margin:0 auto;
}

/* Punto 1: texto centrado y contenido "en el medio". El bloque ya
   estaba centrado por el flex de arriba (align-items:center), pero
   le faltaba: a) un ancho más angosto que 900px para que los párrafos
   no se estiren de punta a punta (más difícil de leer cuanto más
   ancha la línea), y b) text-align:center, que se hereda solita a
   los h2/h3/p/li de adentro, así no hay que repetirlo en cada uno. */
.koss-scout__intro {
	width: 100%;
	text-align: center;
	max-width: 900px;
	font-size: 19px;
}

.koss-scout__important-notice {
	text-align: center;
	max-width: 900px;
	font-size: 12px;
}

.koss-contact__inner {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: var(--space-lg);
}

.koss-contact__media img {
	width: 100%;
	height: 100%;
	min-height: 500px;
	object-fit: cover;
}

/* Columna derecha: Contact Details arriba, formulario abajo, uno
   debajo del otro (antes estaban lado a lado en 2 columnas). */
.koss-contact__right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-sm);
}

/* Las listas (Photo Guidelines, tips) ya quedan centradas por herencia,
   pero con viñeta (•) el resultado se ve desprolijo: cada línea centrada
   tiene un ancho distinto, entonces las viñetas quedan mal alineadas
   entre sí. Se lo saco y lo dejo como líneas centradas simples. */
.koss-tips-list {
	list-style: inside;
	padding-left: 0;
	color: var(--color-black);
	max-width: 480px;
	margin: var(--space-sm) auto 0;
}
.koss-tips-list li { 
	margin-bottom: 8px;
	text-wrap: nowrap;
	font-style: italic;
}

@media (max-width: 768px) {

    .koss-tips-list li {
        text-wrap: wrap;
    }

}

/* El formulario en sí usa un poco más de ancho que el texto (800px),
   para que las filas de 4 columnas del punto 3 no queden apretadas. */
.koss-scout__form { width: 100%; max-width: 900px; }

/* Mismo max-width que .koss-scout__form (900px) a propósito, para que
   la imagen quede exactamente del mismo ancho que el formulario de abajo. */
.koss-scout__mockup {
	width: 100%;
	max-width: 900px;
	/*margin-bottom: var(--space-lg);*/
}

.koss-scout__mockup img {
	width: 100%;
	height: auto;
	display: block;
}

.koss-scout__mockup2 {
	grid-column: 1 / -1;
	min-width: 0;
}

.koss-scout__mockup2 img {
	width: 100%;
	height: auto;
	display: block;
}

.koss-form-message {
	padding: var(--space-sm);
	margin-bottom: var(--space-md);
	font-size: 14px;
	border-left: 3px solid var(--color-gold);
	background: rgba(201,168,106,0.1);
}

.koss-form-message--error { border-color: #B3452C; background: rgba(179,69,44,0.08); }

.koss-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }

/* Punto 3: variante para las 3 filas que ahora llevan 4 campos parejos
   (Name/Last/Age/City — Email/Phone/Instagram/TikTok — Height/Bust/Waist/Hips).
   Se agrega esta clase EXTRA en el HTML, sin sacar "koss-form__row"
   (así hereda el gap y demás, solo pisa grid-template-columns). */
.koss-form__row--4up { grid-template-columns: repeat(4, 1fr); }

.koss-form__field { margin-bottom: var(--space-sm); }

.koss-form__group { border: none; padding: 0; margin: 0 0 var(--space-sm); }
.koss-form__group legend {
	font-family: var(--font-accent);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-gray);
	margin-bottom: 6px;
	padding: 0;
	text-align: center;
}

/* Punto 2: Female y Male en la misma línea, uno pegado a cada punta.
   OJO: esto NO va en el <fieldset> directamente, porque el <legend>
   ("Gender *") también es un hijo del fieldset y quedaría desparramado
   junto con los radios en vez de arriba como título. Por eso en el HTML
   envolvemos los dos <label> de radio en un <div class="koss-radio-row">
   aparte, y el space-between va acá. */
.koss-radio-row {
	display: flex;
	justify-content: left;
	align-items: center;
	gap: 40px;
	width: 100%;
}

.koss-radio { font-size: 14px; margin-right: 0; }
.koss-radio input { margin-right: 6px; }

.koss-form label {
	display: block;
	font-family: var(--font-accent);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-gray);
	margin-bottom: 6px;
}

/* Arreglo de fondo (no solo el label de Phone): en una fila de 4, si
   UN SOLO label es más largo y salta a 2 líneas, ese input queda más
   abajo que los otros 3 — se pierde la simetría de la fila entera.
   Reservamos altura fija para 2 líneas en TODOS los labels de estas
   filas, así el input siempre arranca en el mismo punto, tenga el
   label 1 línea o 2. */
.koss-form__row--4up label {
	min-height: 28px;
	display: flex;
	align-items: flex-end;
}

/* Punto 1: "Phone Number * (WhatsApp, Telegram)" es un label más largo
   que el resto ("Email", "Age", etc.) y en la columna angosta de una
   fila de 4 se envolvía a 2 líneas — eso empujaba el <input> más abajo
   que sus vecinos, rompiendo la simetría de la fila. Con letra más
   chica entra en 1 sola línea, igual que los demás.
   (Especificidad ".koss-form label.koss-label--tight" a propósito, para
   ganarle a ".koss-form label" de arriba — con solo ".koss-label--tight"
   sola no alcanzaría, tienen el mismo "peso" y gana la que esté después,
   pero así no dependemos del orden.) */
.koss-form label.koss-label--tight {
	font-size: 8.5px;
	letter-spacing: 0.5px;
}

.koss-form input[type="text"],
.koss-form input[type="email"],
.koss-form input[type="tel"],
.koss-form input[type="date"],
.koss-form textarea {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--color-gray);
	background: transparent;
	padding: 10px 2px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-black);
	transition: border-color var(--transition-base);
}

.koss-form input:focus, .koss-form textarea:focus { border-color: var(--color-gold); }

.koss-form input[type="file"] {
	width: 100%;
	font-size: 13px;
	padding: var(--space-sm);
	border: 1px dashed var(--color-gray);
	background: rgba(138,135,132,0.05);
}

/* Botón "Add File" personalizado, en vez del input nativo del navegador
   (ese es el que dice "Examinar"/"Browse"/"Choose File" según el idioma
   del navegador de cada visitante — no lo podemos controlar desde acá).
   El input de verdad sigue existiendo y funcionando: solo lo escondemos
   VISUALMENTE (no con display:none, que lo sacaría del todo del teclado
   y los lectores de pantalla) y el <label> de abajo, al estar asociado
   por el atributo for="", lo dispara igual que si lo tocaras directo. */
.koss-file-upload { position: relative; }

.koss-file-upload__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.koss-file-upload__button {
	display: block;
	width: 100%;
	text-align: center;
	font-family: var(--font-accent);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-black);
	padding: var(--space-sm);
	border: 1px dashed var(--color-gray);
	background: rgba(138,135,132,0.05);
	cursor: pointer;
	transition: border-color var(--transition-base), color var(--transition-base);
}

.koss-file-upload__button:hover,
.koss-file-upload__input:focus-visible + .koss-file-upload__button {
	border-color: var(--color-gold);
	color: var(--color-gold);
}

.koss-form__photos-title {
	margin-top: var(--space-md);
	text-align: center;
	font-weight: bold;
}

.koss-form__photos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
	text-align: center;
}

/* Esto es lo que faltaba: .koss-photo-field NO tenía ninguna regla
   propia. Sin esto, cada foto de ejemplo (con height:100%) intentaba
   estirarse al 100% de la altura de un contenedor cuya altura, a su
   vez, dependía de su propio contenido — un círculo imposible de
   resolver que el navegador "resuelve" agrandando la imagen de más,
   pisando el label/input de abajo y, en cadena, el checkbox y el
   botón que venían después en la página. */
.koss-photo-field {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Checkbox de Privacy Policy */
.koss-form__privacy { margin-bottom: var(--space-md); }

/* Especificidad a propósito más alta que ".koss-form label" (que pone
   todos los labels en mayúscula/gris/chiquito) — sin esto, el texto de
   al lado del checkbox heredaría ese estilo en vez de verse como texto
   normal de formulario. */
.koss-form label.koss-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	font-family: var(--font-body);
	color: var(--color-black);
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	margin-bottom: 0;
}

.koss-checkbox input[type="checkbox"] {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: var(--color-gold);
}

.koss-checkbox a { text-decoration: underline; text-underline-offset: 2px; }
.koss-checkbox a:hover { color: var(--color-gold); }

#privacy-error { margin-top: var(--space-sm); margin-bottom: 0; }

.koss-btn {
	display: inline-block;
	font-family: var(--font-accent);
	font-size: 16px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 20px 60px;
	border: 1px solid var(--color-black);
	transition: background var(--transition-base), color var(--transition-base);
}

.koss-btn--primary { background: var(--color-black); color: var(--color-cream); display: block; margin: 5px auto 0; }
.koss-btn--primary:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-black); }

/* ---------- 10. FOOTER ---------- */
.koss-footer {
	background: var(--color-cream);
	color: var(--color-black);
	/*padding: var(--space-xl) var(--space-md) var(--space-lg);*/
}

/* Divisoria decorativa arriba de "Koss Model Management". Angosta y
   centrada (no de punta a punta), con el dorado de acento del sitio —
   un detalle chico, pero es el mismo recurso que ya usamos en la frase
   destacada de "Be a Model" (líneas finas doradas). */
.koss-footer__divider {
	width: 450px;
	height: 1px;
	background: var(--color-gold);
	margin: 0 auto;
}

/* Solo en Home: la divisoria dorada del footer tiene un margen superior */
body.home .koss-footer__divider {
    margin-top: 20px;
}

@media (max-width: 768px) {
    .koss-footer__divider {
        width: min(300px, 80%);
    }
}

/* Menú de footer (About Koss | Models | Be a Model | Contact | Privacy Policy) */
.koss-footer__nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 8px;
}

.koss-footer__nav a {
	font-family: var(--font-accent);
	font-size: 13px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-black) !important;
}

.koss-footer__nav a:hover { color: var(--color-gold) !important; }

/* El separador "|" entre ítems, con CSS puro (no hace falta escribirlo
   a mano en cada link del menú, ni en el admin de WordPress). Al último
   ítem de la lista no le ponemos separador — por eso :not(:last-child). */
.koss-footer__nav li { display: flex; align-items: center; }
.koss-footer__nav li:not(:last-child)::after {
	content: '|';
	margin-left: 1px;
	color: var(--color-gray);
}

/* Columna única, todo centrado (antes eran 3 columnas lado a lado) */
.koss-footer__inner {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-sm);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

.koss-footer .koss-logo-text { color: var(--color-black); }
.koss-footer__brand p { color: var(--color-gray); margin-top: 4px; }

.koss-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

/* El <a> es flex para poner ícono + texto en la misma línea, con el
   ícono siempre a la izquierda (orden natural del HTML: primero el
   ícono, después el <span> con el texto). */
.koss-footer__contact a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.koss-footer__contact svg { width: 16px; height: 16px; flex-shrink: 0; }

.koss-footer__social {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-sm);
}

.koss-footer a { font-family: var(--font-accent); font-size: 13px; color: var(--color-black) !important; }
.koss-footer a:hover { color: var(--color-gold) !important; }

/* Iconos de redes sociales (punto 3): el <svg> hereda el color por
   currentColor, así que con controlar el color del <a> alcanza para
   pintar el ícono entero, incluyendo el hover dorado de la línea de arriba. */
.koss-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(0,0,0,0.15);
	border-radius: 50%;
	transition: border-color var(--transition-base), color var(--transition-base);
}

.koss-footer__social a:hover { border-color: var(--color-gold); }

/* El badge de Agencies & Co es una imagen externa prediseñada (no un
   ícono SVG nuestro con currentColor) — le sacamos el círculo/borde
   que tienen los demás, se vería recortado. Solo lo alineamos
   verticalmente con el resto de la fila. */
.koss-footer__badge {
	width: auto !important;
	height: auto !important;
	border: none !important;
	border-radius: 0 !important;
	/*padding: 0 2px 0 0;*/
	margin-right: 4px;
	border-right: 1px solid rgba(0,0,0,0.15) !important;
}

.koss-footer__badge img { display: block; padding-right: 10px; }

.koss-footer__social svg { width: 30px; height: 30px; }

.koss-footer__bottom {
	max-width: var(--container-width);
	margin: var(--space-md) auto 0;
	text-align: center;
	margin-top: 0px;
}

.koss-footer__bottom p { color: var(--color-gray); font-size: 12px; margin: 0; }

/* ---------- 11. PÁGINAS GENÉRICAS / 404 ---------- */
.koss-generic-page, .koss-404 {
	max-width: 760px;
	margin: 0 auto;
	padding: calc(var(--space-xl) + 40px) var(--space-md) var(--space-xl);
	text-align: center;
}

.koss-404 .koss-btn { margin-top: var(--space-md); }

/* Privacy Policy: el BLOQUE va centrado en la página... */
.koss-privacy {
	padding: calc(var(--space-xl) + 40px) var(--space-md) var(--space-xl);
}

.koss-privacy__inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center; /* esto centra el eyebrow y el <h1> de arriba */
}

/* ...pero el TEXTO adentro va justificado (parejo a los 2 márgenes),
   no centrado línea por línea — mucho más cómodo de leer en párrafos
   largos como los de una política de privacidad. */
.koss-privacy__content {
	text-align: justify;
	margin-top: var(--space-lg);
}

.koss-privacy__content h2 {
	text-align: left; /* los títulos de cada sección sí quedan a la izquierda */
	font-size: 20px;
	margin-top: var(--space-lg);
}

.koss-privacy__content ul {
	text-align: left; /* las listas con viñetas, igual que los títulos */
	padding-left: 20px;
}

.koss-privacy__content li { margin-bottom: 6px; }

/* ---------- 12. UTILIDADES / PLACEHOLDERS ---------- */
.koss-placeholder-box {
	width: 100%; height: 100%;
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--color-black) 0%, #262422 100%);
	border: 1px solid var(--color-gold);
	color: var(--color-gold);
	font-family: var(--font-display);
	font-size: 20px;
	text-align: center;
	padding: var(--space-md);
}

.koss-placeholder-box--card { min-height: 0; aspect-ratio: 3/4; font-size: 16px; }
.koss-placeholder-box--hero { height: 400px; }

/* ---------- RESPONSIVE ---------- */

/* ---------- Laptops / pantallas medianas (notebooks ~13"-15") ----------
   El menú en desktop usa 20px + 2px de letter-spacing, que en notebooks
   queda enorme y aprieta los ítems. Acá lo achicamos un escalón sin
   llegar al menú hamburguesa de mobile (ese queda en 768px). */
@media (max-width: 1280px) {
	.koss-header {
		padding: 28px 0;
		padding-bottom: 8px;
	}
	.koss-header.header--transparent {
		padding: 32px 0;
	}
	/* .koss-logo-img {
		height: 48px;
	} */
	.koss-menu-item > a {
		font-size: 15px;   /* de 20px → 15px */
		letter-spacing: 1px; /* de 2px → 1px */
		gap: 4px;
	}
	/* El gap del menú también se achica un toque para que quepa todo */
	.koss-menu {
		gap: 20px; /* de var(--space-md)=32px → 20px */
	}
}

@media (max-width: 1024px) {
	.koss-models-grid { grid-template-columns: repeat(3, 1fr); }
	.koss-about__inner, .koss-scout__inner, .koss-contact__inner { grid-template-columns: 1fr; }

	/* Contact en mobile/tablet: primero texto + formulario, la imagen
	   al final del todo. En desktop (fuera de este @media) el order no
	   existe, así que ahí sigue el layout de 2 columnas de siempre. */
	.koss-contact__right { order: 1; }
	.koss-contact__media { order: 2; }
	/*.koss-about__media img { height: 380px; }*/
	.koss-about__media img{
        max-width:350px;
        height:auto;
    }
	.koss-footer__inner { grid-template-columns: 1fr 1fr; }
	/* Punto 3: en tablet, las filas de 4 pasan a 2x2 antes de saltar
	   directo a 1 sola columna en mobile (ver el breakpoint de 768px) —
	   así no quedan 4 inputs angostísimos en una pantalla mediana. */
	.koss-form__row--4up { grid-template-columns: repeat(2, 1fr); }
	.koss-form__photos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.koss-menu-toggle { display: flex; }
	.koss-scout__intro { 
		font-size: 15px; 
		text-wrap: normal;
	}

	.koss-nav {
		position: fixed;
		top: 0; right: 0;
		height: 100vh;
		width: min(320px, 85vw);
		background: var(--color-cream);
		box-shadow: -4px 0 24px rgba(0,0,0,0.12);
		transform: translateX(100%);
		transition: transform var(--transition-base);
		padding: 100px var(--space-md) var(--space-md);
		z-index: 999;
	}

	.koss-nav.is-open { transform: translateX(0); }

	.koss-menu { flex-direction: column; gap: var(--space-md); }

	/* Especificidad reforzada (.koss-nav + .koss-menu-item + a) a propósito:
	   esto necesita ganarle a ".header--transparent .koss-menu-item > a"
	   (letras crema, para el header flotando sobre el video en Home) —
	   el panel del mobile es SIEMPRE un fondo blanco sólido, sin importar
	   si el header de atrás está transparente o no en ese momento. */
	.koss-nav .koss-menu-item > a,
	.koss-nav .koss-submenu .koss-menu-item > a {
		color: var(--color-black) !important;
		font-size: 15px;
	}

	/* Mismo criterio para el botón: una vez abierto el menú, se queda
	   negro siempre — aunque el header de atrás sea transparente. */
	.koss-menu-toggle.is-active span {
		background: var(--color-black) !important;
	}

	.koss-submenu {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		display: none;
		background: transparent;
		padding-left: var(--space-sm);
		min-width: 0;
	}
	.koss-menu-item.has-submenu.is-open .koss-submenu { display: block; }
	.koss-submenu .koss-menu-item > a { padding: 6px 0; justify-content: flex-start; }

	.koss-models-grid { grid-template-columns: repeat(2, 1fr); }
	.koss-brands-grid { grid-template-columns: repeat(2, 1fr); }
	.koss-form__row { grid-template-columns: 1fr; }

	/* Punto 2: en mobile, las 4 fotos pasan a 2x2, más chicas y con
	   menos aire entre ellas — en desktop (fuera de este @media) siguen
	   las 4 en una sola fila, sin ningún cambio. */
	.koss-form__photos {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.koss-photo-example {
		border-radius: 12px;
		margin-bottom: 8px;
	}
	.koss-file-upload__button {
		padding: 8px;
		font-size: 11px;
	}
	.koss-model-stats { grid-template-columns: 1fr; }
	/*.koss-model-single__gallery { grid-template-columns: 1fr; }
	.koss-model-single__gallery img { height: 420px; }*/
	/* .koss-model-single__gallery { grid-template-columns: 1fr; gap: var(--space-sm); } */
	/* .koss-model-single__gallery img:nth-child(n) {
		grid-column: 1 / -1; */
		/*aspect-ratio: 3 / 4;*/
		/* margin-top: 0; */
	/* } */

	/* Mobile: pares colapsan a 1 columna, mismo gap uniforme */
	.koss-model-single__gallery { gap: 20px; }
	.koss-pair,
	.koss-pair--a,
	.koss-pair--b,
	.koss-pair--full,
	.koss-pair--single {
		grid-template-columns: 1fr;
		gap: 20px;
		justify-items: stretch;
	}
	.koss-pair img,
	.koss-pair--single img {
		margin-top: 0;
		max-width: 100%;
		max-height: 80vh;
	}

	.koss-scouting__images { flex-direction: column; align-items: center; }
	.koss-scouting__image-slot { width: 100%; max-width: 320px; }
	.koss-footer__inner { grid-template-columns: 1fr; text-align: center; }
	.koss-footer__social, .koss-footer__contact { align-items: center; }
}

@media (max-width: 480px) {
	.koss-models-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
	:root { --space-xl: 72px; --space-lg: 40px; }
	.koss-logo-text { letter-spacing: 4px; }
	.koss-footer__nav ul { gap: 4px; }
	.koss-footer__nav a { font-size: 9px; }
	.koss-footer__nav li:not(:last-child)::after { margin-left: 1px; }
}

/* ---------- BANNER DE COOKIES ---------- */
.koss-cookie-banner {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 2000;
	background: var(--color-black);
	color: var(--color-cream);
	padding: var(--space-sm) var(--space-md);
	transform: translateY(100%);
	transition: transform var(--transition-base);
}

/* El JS le agrega esta clase con un pequeño delay al cargar la página
   (y se la saca cuando el usuario elige Accept/Decline) — controlar
   la aparición con una clase + transición es más prolijo que mostrar/
   ocultar de golpe con display:none. */
.koss-cookie-banner.is-visible {
	transform: translateY(0);
}

.koss-cookie-banner__inner {
	max-width: var(--container-width);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.koss-cookie-banner p {
	margin: 0;
	color: var(--color-cream);
	font-size: 13px;
	max-width: 640px;
}

.koss-cookie-banner a {
	color: var(--color-gold);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.koss-cookie-banner__actions {
	display: flex;
	gap: var(--space-sm);
	flex-shrink: 0;
}

.koss-cookie-banner__btn {
	font-family: var(--font-accent);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 10px 24px;
	border: 1px solid var(--color-cream);
	transition: background var(--transition-base), color var(--transition-base);
}

.koss-cookie-banner__btn--accept {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: var(--color-black);
}

.koss-cookie-banner__btn--accept:hover { opacity: 0.85; }

.koss-cookie-banner__btn--decline {
	background: transparent;
	color: var(--color-cream);
}

.koss-cookie-banner__btn--decline:hover {
	background: var(--color-cream);
	color: var(--color-black);
}

@media (max-width: 600px) {
	.koss-cookie-banner__inner { flex-direction: column; align-items: flex-start; }
	.koss-cookie-banner__actions { width: 100%; }
	.koss-cookie-banner__btn { flex: 1; text-align: center; }
}


/* ---------- FIX: Color de enlaces en formularios y contacto ----------
   Evita que el navegador aplique el color azul por defecto a los enlaces
   que no tenían un color explícito definido (ej: Privacy Policy, emails). */
.koss-checkbox a {
    color: var(--color-black) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.koss-checkbox a:hover {
    color: var(--color-gold) !important;
}

/* Por si hay enlaces de texto (emails, direcciones) en la columna de contacto */
.koss-contact__right a {
    color: var(--color-black) !important;
    text-decoration: none;
    transition: color var(--transition-base);
}
.koss-contact__right a:hover {
    color: var(--color-gold) !important;
}