@charset "UTF-8";

/* ==========================================================================
   1. VARIABLES & TOKENS DE DISEÑO (GIRLIE GRUNGE V4)
   ========================================================================== */
:root {
    /* Paleta de Colores Principal */
    --color-bg: #b4647c;         /* Rosa viejo oscuro / Magenta sucio */
    --color-bg-light: #d68b9f;   /* Rosa suave / Editorial */
    --color-pink: #ff6699;       /* Rosa fosfo / Highlight Textual */
    --color-paper: #f4f4f4;      /* Papel / Hueso / Fondo claro */
    --color-white: #ffffff;      /* Blanco puro */
    --color-dark: #1a1a1a;       /* Tinta de revista / Casi negro */
    --color-black: #000000;      /* Negro puro absoluto */
    
    /* Colores Transparentes (Para superposiciones, vidrio y cintas) */
    --color-tape: rgba(255, 255, 255, 0.6);
    --color-dark-trans: rgba(26, 26, 26, 0.85);
    --color-black-trans: rgba(0, 0, 0, 0.2);
    --color-white-trans: rgba(255, 255, 255, 0.1);
    
    /* Tipografías (Google Fonts) */
    --font-serif: 'Playfair Display', 'Times New Roman', serif; 
    --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    --font-hand: 'Caveat', 'Just Another Hand', cursive; 
    --font-mono: 'Courier New', Courier, monospace; 
    --font-grunge: 'Anton', 'Impact', sans-serif; 

    /* Layout, Espaciado & Geometría */
    --container-width: 1200px;
    --container-narrow: 800px;
    --padding-global: clamp(1.5rem, 5vw, 4rem);
    
    /* Sistema de Capas (Z-Index estricto para evitar overlaps fatales) */
    --z-deep: -50;
    --z-back: -10;
    --z-normal: 1;
    --z-elevated: 10;
    --z-float: 50;
    --z-overlay: 100;
    --z-nav: 900;
    --z-cursor: 9999;

    /* Curvas de Animación y Transiciones */
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    --transition-slow: 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Importación de Tipografías */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Caveat:wght@400;700&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ==========================================================================
   2. RESET Y NORMALIZACIÓN ABSOLUTA
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: initial; /* Lenis JS toma el control */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* EL SEGURO DE VIDA #1 */
}

body {
    background-color: var(--color-bg);
    color: var(--color-white);
    font-family: var(--font-sans);
    line-height: 1.6;
    overflow-x: hidden; /* EL SEGURO DE VIDA #2 */
    width: 100%;
    min-height: 100vh;
    cursor: none; /* Custom cursor magnético activo */
}

/* Estado de carga inicial para evitar destellos (FOUC) */
body.loading { visibility: hidden; }

/* Selección de texto estilo fanzine */
::selection { background-color: var(--color-dark); color: var(--color-pink); }
::-moz-selection { background-color: var(--color-dark); color: var(--color-pink); }

/* Normalización de multimedia */
img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Enlaces y botones base */
a { color: inherit; text-decoration: none; cursor: none; }
ul, ol { list-style: none; }
button { background: none; border: none; cursor: none; font-family: inherit; }

/* Ocultar elementos pero mantenerlos legibles para lectores de pantalla */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* ==========================================================================
   3. ESTRUCTURA MAESTRA (LAS CAJAS FUERTES)
   ========================================================================== */
/* La clase 'solid-block' previene el desbordamiento de las secciones */
.solid-block {
    position: relative;
    width: 100%;
    padding: 120px 0;
    overflow: hidden; /* Recorta cualquier imagen voladora que intente escapar */
    z-index: var(--z-normal);
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--padding-global);
    position: relative;
    z-index: var(--z-elevated);
}

/* Capa global de ruido granulado (Textura de papel viejo/fanzine) */
.global-noise-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: var(--z-overlay); opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Divisores de SVG (Bordes Rasgados) */
.torn-divider { position: absolute; left: 0; width: 100%; z-index: var(--z-elevated); pointer-events: none; }
.torn-top { top: -1px; }
.torn-bottom { bottom: -1px; transform: rotate(180deg); }

/* ==========================================================================
   4. SISTEMA DE UTILIDADES (TIPO TAILWIND) PARA AGILIDAD
   ========================================================================== */
/* FONDOS */
.bg-dark { background-color: var(--color-dark); }
.bg-white { background-color: var(--color-white); }
.bg-pink { background-color: var(--color-pink); }
.bg-paper { background-color: var(--color-paper); }
.bg-bg-light { background-color: var(--color-bg-light); }
.bg-black { background-color: var(--color-black); }
.bg-dark-transparent { background-color: var(--color-dark-trans); color: var(--color-white); }
.bg-black-transparent { background-color: var(--color-black-trans); }

/* TEXTOS Y COLORES */
.text-white { color: var(--color-white); }
.text-dark { color: var(--color-dark); }
.text-pink { color: var(--color-pink); }
.text-paper { color: var(--color-paper); }
.text-light { color: rgba(255, 255, 255, 0.85); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

/* TAMAÑOS DE FUENTE */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }

/* ESTILOS DE FUENTE Y FORMATO */
.serif-font { font-family: var(--font-serif); }
.font-mono { font-family: var(--font-mono); }
.font-hand { font-family: var(--font-hand); }
.font-grunge { font-family: var(--font-grunge); }
.font-bold { font-weight: 700; }
.font-italic { font-style: italic; }
.uppercase { text-transform: uppercase; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-relaxed { line-height: 1.8; }
.leading-loose { line-height: 2; }
.list-styled { list-style-type: square; }

/* MARGINS */
.m-0 { margin: 0; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.ml-auto { margin-left: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* PADDINGS */
.p-0 { padding: 0; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-16 { padding-bottom: 4rem; }
.pt-12 { padding-top: 3rem; }
.pt-16 { padding-top: 4rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1.25rem; }
.inline-pad { padding: 5px 15px; display: inline-block; }

/* DIMENSIONES Y DISPLAY */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-48 { width: 12rem; }
.h-48 { height: 12rem; }
.min-h-300 { min-height: 300px; }
.max-w-sm { max-width: 24rem; }
.max-w-800 { max-width: var(--container-narrow); }
.block { display: block; }
.inline-block { display: inline-block; }
.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-4 { bottom: 1rem; }
.right-4 { right: 1rem; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.overflow-hidden { overflow: hidden; }

/* FLEXBOX & GRID UTILS */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.flex-row-reverse { display: flex; flex-direction: row-reverse; }
.flex-between { display: flex; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.grid-2-cols { display: grid; grid-template-columns: repeat(2, 1fr); }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }

/* BORDES Y SOMBRAS */
.border-none { border: none; }
.border-white { border-color: var(--color-white); }
.border-dark { border-color: var(--color-dark); border-style: solid; border-width: 1px; }
.border-white-pill { border: 1px solid var(--color-white); }
.border-white-thick { border: 4px solid var(--color-white); }
.border-2-dark { border: 2px solid var(--color-dark); }
.border-4-white { border: 4px solid var(--color-white); }
.border-dark-thick { border: 4px solid var(--color-dark); }
.border-dashed-white { border: 4px dashed rgba(255,255,255,0.4); }
.border-b-dark { border-bottom: 2px solid var(--color-dark); }
.border-b-white { border-bottom: 1px solid rgba(255,255,255,0.3); }
.border-t-white { border-top: 1px solid rgba(255,255,255,0.3); }
.border-l-pink { border-left: 4px solid var(--color-pink); }
.border-l-white { border-left: 4px solid var(--color-white); }
.border-l-dark { border-left: 4px solid var(--color-dark); }
.rounded-full { border-radius: 9999px; }
.rounded-sm { border-radius: 4px; }

.shadow-sm { box-shadow: 2px 2px 10px rgba(0,0,0,0.05); }
.shadow-md { box-shadow: 5px 5px 15px rgba(0,0,0,0.15); }
.shadow-lg { box-shadow: 10px 10px 25px rgba(0,0,0,0.2); }
.shadow-heavy { box-shadow: 15px 15px 30px rgba(0,0,0,0.3); }
.shadow-pink { box-shadow: -8px 8px 0px var(--color-pink); }
.shadow-offset-dark { box-shadow: -10px 10px 0px var(--color-dark); }
.shadow-solid-dark { box-shadow: 15px 15px 0px var(--color-dark); }

/* FILTROS, BLUR Y OPACIDAD */
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-80 { opacity: 0.8; }
.mix-blend-overlay { mix-blend-mode: overlay; }
.backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.filter-grayscale { filter: grayscale(100%); }
.object-cover { object-fit: cover; }

/* TRANSFORMACIONES GEOMÉTRICAS (Rotaciones Grunge) */
.transform-tilt { transform: rotate(-3deg); }
.transform-tilt-reverse { transform: rotate(3deg); }
.transform-rotate-1 { transform: rotate(1deg); }
.transform-rotate-2 { transform: rotate(2deg); }
.transform-rotate-3 { transform: rotate(3deg); }
.transform-rotate-4 { transform: rotate(4deg); }
.transform-rotate-neg-2 { transform: rotate(-2deg); }
.transform-rotate-neg-5 { transform: rotate(-5deg); }
.transform-rotate-180 { transform: rotate(180deg); }

/* HOVERS & TRANSICIONES */
.transition-colors { transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }
.transition-transform { transition: transform var(--transition-smooth); }
.transition-opacity { transition: opacity var(--transition-smooth); }
.hover-bg-white:hover { background-color: var(--color-white); color: var(--color-dark); }
.hover-text-dark:hover { color: var(--color-dark); }
.hover-opacity-80:hover { opacity: 0.8; }
.group-hover-scale { transform: scale(1); }
.group:hover .group-hover-scale { transform: scale(1.05); }
.group-hover-color { filter: grayscale(100%); }
.group:hover .group-hover-color { filter: grayscale(0%); }

/* UTILIDADES TEXTUALES AVANZADAS */
.title-huge { font-size: clamp(3.5rem, 12vw, 10rem); line-height: 1.1; margin: 0; letter-spacing: -2px; padding-bottom: 10px; }
.title-handwritten { font-family: var(--font-hand); font-size: clamp(3rem, 8vw, 6rem); transform: rotate(-3deg); line-height: 1.2; text-shadow: 2px 2px 0px rgba(0,0,0,0.3); }
.title-handwritten.large { font-size: clamp(4rem, 10vw, 8rem); }
.body-text { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.7; }
.highlight-dark { background-color: var(--color-dark); color: var(--color-white); padding: 5px 15px; display: inline-block; font-weight: bold; }
.vertical-text { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); }
.huge-serif { font-family: var(--font-serif); font-size: clamp(3rem, 12vw, 9rem); line-height: 1.1; color: rgba(255,255,255,0.4); mix-blend-mode: overlay; padding-bottom: 15px; }

/* ==========================================================================
   5. COMPONENTES GLOBALES E INTERACTIVOS
   ========================================================================== */

/* Cursor Magnético Nativo */
.cursor-dot, .cursor-outline {
    position: fixed; top: 0; left: 0; transform: translate(-50%, -50%);
    border-radius: 50%; z-index: var(--z-cursor); pointer-events: none; mix-blend-mode: difference;
}
.cursor-dot { width: 8px; height: 8px; background-color: var(--color-white); }
.cursor-outline { width: 40px; height: 40px; border: 1px solid var(--color-white); transition: width 0.2s, height 0.2s, background-color 0.2s; }
.cursor-outline.hover { width: 70px; height: 70px; background-color: rgba(255, 255, 255, 0.1); border-color: transparent; backdrop-filter: invert(1); }

/* Nav Overlay & Header */
.main-nav { position: fixed; top: 0; left: 0; width: 100%; padding: var(--padding-global); z-index: var(--z-nav); mix-blend-mode: difference; }
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.menu-toggle { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; position: relative; z-index: calc(var(--z-nav) + 1); }
.hamburger { width: 35px; height: 20px; position: relative; }
.hamburger .line { position: absolute; width: 100%; height: 2px; background-color: var(--color-white); transition: var(--transition-smooth); }
.hamburger .line-1 { top: 0; }
.hamburger .line-2 { bottom: 0; width: 60%; right: 0; }
.menu-toggle:hover .line-2 { width: 100%; }
.menu-toggle.active .line-1 { transform: translateY(9px) rotate(45deg); }
.menu-toggle.active .line-2 { width: 100%; transform: translateY(-9px) rotate(-45deg); }

.nav-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--color-dark);
    z-index: -1; transform: translateY(-100%); transition: transform var(--transition-slow);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.nav-overlay.is-active { transform: translateY(0); }
.nav-links { text-align: center; }
.nav-item { margin: 1.5vh 0; overflow: hidden; }
.nav-link {
    font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 4rem); font-style: italic; color: var(--color-white);
    position: relative; display: inline-block; transition: var(--transition-fast);
}
.nav-link:hover { transform: scale(1.05) skewX(-5deg); color: var(--color-pink); }

/* ==========================================================================
   6. ESTILOS ESPECÍFICOS DE SECCIONES (SCOPED)
   ========================================================================== */

/* --- HERO SECTION --- */
.section-hero { min-height: 100vh; display: flex; align-items: center; padding-top: 100px; }
.hero__top-bar { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); padding: 10px 0; margin-bottom: 4rem; opacity: 0.8; }
.hero__grid-center { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }

/* El Collage Gigante con el Nombre Silvia Flores */
.hero__name-collage {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%; z-index: var(--z-deep); pointer-events: none;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
}
.hero__name-collage .char {
    position: absolute; font-family: var(--font-serif); font-weight: 900;
    font-size: clamp(5rem, 20vw, 25rem); color: rgba(255,255,255,0.08); line-height: 0.8;
}
/* Posicionamiento caos/fanzine de las letras del nombre */
.c1 { top: -5%; left: 5%; transform: rotate(-15deg); }
.c2 { top: -2%; left: 25%; transform: rotate(10deg); }
.c3 { top: 5%; left: 45%; transform: rotate(-5deg); }
.c4 { top: -5%; right: 30%; transform: rotate(20deg); }
.c5 { top: 10%; right: 15%; transform: rotate(-10deg); }
.c6 { top: 0; right: 0; transform: rotate(5deg); }
.c7 { bottom: 5%; left: -5%; transform: rotate(12deg); }
.c8 { bottom: 0; left: 15%; transform: rotate(-8deg); }
.c9 { bottom: -10%; left: 35%; transform: rotate(15deg); }
.c10{ bottom: 5%; right: 40%; transform: rotate(-12deg); }
.c11{ bottom: -5%; right: 20%; transform: rotate(8deg); }
.c12{ bottom: 10%; right: -5%; transform: rotate(-20deg); }

.hero__image-wrapper { position: relative; z-index: var(--z-normal); }
.hero-figure { position: relative; }
.hero-img { width: 100%; max-width: 400px; margin: 0 auto; filter: drop-shadow(15px 15px 0px rgba(0,0,0,0.3)) url(#halftone); }
.hero-star { top: -20px; right: -20px; width: 100px; z-index: var(--z-float); }

/* --- SEMBLANZA (ABOUT) --- */
.title-grunge { display: flex; flex-wrap: wrap; gap: 5px; }
.letter-box {
    display: inline-flex; justify-content: center; align-items: center;
    width: clamp(40px, 6vw, 70px); height: clamp(50px, 8vw, 90px);
    font-family: var(--font-grunge); font-size: clamp(2rem, 4vw, 4rem);
    text-transform: uppercase; box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
}
.letter-box:nth-child(even) { transform: rotate(4deg); }
.letter-box:nth-child(odd) { transform: rotate(-3deg); }

/* Control de la foto principal */
.principal-img-wrapper { position: relative; max-width: 600px; margin: 2rem auto; }
.principal-img { width: 100%; height: auto; object-fit: cover; max-height: 500px; }
.tape-center { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 100px; height: 35px; z-index: 5; }

/* --- TORREÓN TV: PRODUCCIÓN DOCUMENTAL --- */
.produccion__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.subtitle-badge { font-family: var(--font-mono); border: 1px solid var(--color-white); display: inline-block; }

/* Slideshow estilo Netflix */
.produccion__slideshow-wrapper { width: 100%; overflow: hidden; position: relative; }
.netflix-carousel { overflow: hidden; position: relative; background: var(--color-black); padding: 5px; }
.carousel-track { display: flex; gap: 15px; transition: transform var(--transition-smooth); width: 100%; }
.carousel-slide { flex: 0 0 calc(50% - 7.5px); aspect-ratio: 16/9; position: relative; overflow: hidden; border: 2px solid var(--color-dark); }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.1) saturate(1.1); }

/* Controles del Slideshow */
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(0,0,0,0.6); color: white; display: flex; justify-content: center; align-items: center; border-radius: 50%; z-index: 10; cursor: pointer; border: 1px solid rgba(255,255,255,0.3); transition: background var(--transition-fast); }
.carousel-btn:hover { background: var(--color-pink); }
.prev-btn { left: 10px; }
.next-btn { right: 10px; }

/* Logos de Distribución Nacional */
.distribucion-nacional { width: 100%; }
.logos-grid { display: flex; justify-content: center; align-items: center; gap: 3rem; flex-wrap: wrap; }
.dist-logo { object-fit: contain; filter: grayscale(100%); transition: filter var(--transition-fast); }
.dist-logo:hover { filter: grayscale(0%); }
.logo-lg { height: 80px; max-width: 180px; }
.logo-md { height: 60px; max-width: 140px; }

/* --- REPRODUCTOR GOOGLE DRIVE (IFRAME) --- */
.drive-player-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* --- TORREÓN TV: CONDUCCIÓN --- */
.conduccion__layout { display: grid; grid-template-columns: 80px 1fr; gap: 2rem; align-items: center; }
.conduccion__editorial-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(100px, auto); gap: 20px; position: relative; }
.ed-main { grid-column: 1 / 8; grid-row: 1 / 4; }
.ed-text-box { grid-column: 6 / 13; grid-row: 2 / 5; align-self: center; }
.ed-sub-1 { grid-column: 9 / 13; grid-row: 1 / 2; }
.ed-sub-2 { grid-column: 1 / 5; grid-row: 4 / 6; transform: translateY(-30px); }

/* Control de tamaños para fotos secundarias */
.compact-frame { max-height: 250px; overflow: hidden; }
.compact-frame img { object-position: top center; }

/* --- AL AIRE KIDS --- */
.kids__wrapper { position: relative; }
.scrapbook-circle { position: absolute; width: 40px; height: 40px; border-radius: 50%; }
.w-3-4 { width: 75%; }

/* --- TRAYECTORIA --- */
.trayectoria__stack { display: flex; flex-direction: column; }
/* Fotos pequeñas para la lista de trayectoria */
.img-sm { max-width: 350px; flex-shrink: 0; background: var(--color-black); padding: 10px 10px 30px 10px; transform: rotate(-2deg); box-shadow: 5px 5px 15px rgba(0,0,0,0.1); }
.flex-row-reverse .img-sm { transform: rotate(2deg); }

/* --- GALERÍA GRID --- */
.galeria-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 250px; gap: 15px; }
.gal-item { overflow: hidden; }
.gal-item.tall { grid-row: span 2; }
.gal-item.wide { grid-column: span 2; }

/* --- FOOTER --- */
.footer-photo-frame { background: var(--color-white); padding: 10px 10px 40px 10px; transform: rotate(4deg); box-shadow: 5px 5px 20px rgba(0,0,0,0.2); }
.footer-photo-frame img { aspect-ratio: 1/1; object-fit: cover; }

/* ==========================================================================
   17. MEDIA QUERIES (RESPONSIVIDAD PERFECTA Y SEGURA)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Ajustes para Tablets */
    .conduccion__layout { grid-template-columns: 1fr; }
    .conduccion__title-area { display: none; }
    .conduccion__editorial-grid { display: flex; flex-direction: column; gap: 30px; }
    .ed-text-box { transform: none; width: 100%; z-index: 1;}
    .ed-sub-2 { transform: none; }
    .title-huge { font-size: clamp(3rem, 10vw, 5rem); }
    .carousel-slide { flex: 0 0 calc(100% - 0px); } /* 1 frame en tablet */
}

@media (max-width: 768px) {
    /* AJUSTES MÓVILES ESTRICTOS */
    .solid-block { padding: 80px 0; }
    .container { padding: 0 1.5rem; }
    .hide-mobile { display: none; }
    .hide-desktop { display: inline; }
    
    /* Layouts a columna */
    .md-w-1-2 { width: 100%; }
    .md-flex-row { flex-direction: column; }
    .md-text-8xl { font-size: 4rem; }
    .md-p-16 { padding: 2rem; }
    .md-mt-0 { margin-top: 1rem; }

    /* HERO */
    .hero__grid-center { gap: 3rem;}
    .hero__text-wrapper { text-align: center; }
    .hero-star { top: -20px; right: 0; width: 80px; }
    /* Letras del collage más controladas en móvil */
    .hero__name-collage .char { font-size: 6rem; line-height: 1; }

    /* ABOUT */
    .principal-img { max-height: 350px; }
    .filmstrip-box { padding: 10px; }
    .film-frames { flex-direction: row; overflow-x: auto; gap: 15px; padding-bottom: 10px; scroll-snap-type: x mandatory;}
    .frame-item { width: 85%; flex-shrink: 0; scroll-snap-align: center; }
    .film-holes { display: none; }

    /* PRODUCCION */
    .produccion__grid { grid-template-columns: 1fr; gap: 3rem; }
    .carousel-slide { flex: 0 0 100%; } /* 1 frame en celular */
    .logos-grid { gap: 1.5rem; }
    .logo-lg { height: 50px; }
    .logo-md { height: 40px; }
    
    /* KIDS */
    .grid-2-cols { grid-template-columns: 1fr; gap: 3rem; }
    .kids__gallery { min-height: 400px; }
    .w-3-4 { width: 85%; }

    /* TRAYECTORIA */
    .trayectoria-row { flex-direction: column !important; text-align: center; gap: 2rem; padding: 2rem 1.5rem;}
    .trayectoria-text { text-align: center !important; }
    .trayectoria-text .flex { justify-content: center !important; }
    .img-sm { max-width: 100%; transform: none !important; margin: 0 auto; }

    /* GALERIA */
    .galeria-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
    .gal-item.tall { grid-row: span 1; }
    .gal-item.wide { grid-column: span 1; }

    /* FOOTER */
    .footer__content { grid-template-columns: 1fr; text-align: center; gap: 3rem; }
    .footer__image { justify-content: center; }
    .social-links { justify-content: center; flex-wrap: wrap; }
    .footer-photo-frame { transform: none; margin: 0 auto; }

    /* APAGAR CURSOR EN MÓVIL */
    body { cursor: auto; }
    .cursor-dot, .cursor-outline { display: none !important; }
}

@media (min-width: 769px) {
    .hide-desktop { display: none; }
}

/* ==========================================================================
   18. ANIMACIONES KEYFRAMES
   ========================================================================== */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes pulse-soft {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

@media (prefers-reduced-motion: no-preference) {
    .deco-star { animation: float 6s ease-in-out infinite; }
    .hero-badge span { animation: pulse-soft 3s infinite; }
}

/* ==========================================================================
   19. IMPRESIÓN (PRINT STYLES - ACCESIBILIDAD)
   ========================================================================== */
@media print {
    body { background: white; color: black; }
    .global-noise-overlay, .cursor-dot, .cursor-outline, .main-nav, .deco-tape-wrapper, .deco-clip-wrapper, .deco-star, .carousel-btn { display: none !important; }
    .solid-block { padding: 20px 0; page-break-inside: avoid; }
    .bg-dark, .bg-pink, .bg-paper, .bg-bg-light, .bg-dark-transparent { background: transparent !important; color: black !important; border: 1px solid #ccc; }
    .text-white, .text-pink, .text-light { color: black !important; }
    img { max-width: 100% !important; filter: grayscale(100%) !important; }
    * { box-shadow: none !important; text-shadow: none !important; transform: none !important; }
}