/*
Theme Name: KBurbano Portfolio
Theme URI: https://kburbano.com
Author: @fjacobsen
Description: Modern portfolio theme with sidebar navigation
Version: 1.1
*/

* {
  box-sizing: border-box;
}

html:has(body.home) {
  overflow: hidden;
}

html, body {
  overflow-anchor: none !important;
  scroll-behavior: auto !important; /* Desactivar scroll suave durante el reset */
  overscroll-behavior-y: none !important;
  -webkit-overflow-scrolling: touch;
}

/* 1. Definir el contenedor de scroll único en HTML */
html.is-snapping {
  scroll-snap-type: y mandatory !important;
}

/* 2. Asignar el anclaje del imán a cada bloque de la página */
html.is-snapping .snap-section,
html.is-snapping .lovebook-split-container,
html.is-snapping .project-credits-container {
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

/* 3. Prevenir interferencias de contenedores intermedios */
.container.section,
#main-content {
  scroll-snap-type: none !important;
  padding-top: env(safe-area-inset-top);
}

button:focus {
    outline: none;
    box-shadow: none;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: din-2014, sans-serif;
  font-weight: 300;
  font-style: normal;
}

/* Desactiva hovers, clicks y mouseover cuando NO estamos en el Home */
body:not(.home) .menu-projects,
body:not(.home) .menu-item-custom {
  pointer-events: none !important;
  cursor: default !important;
}

html.home,
body.home {
    overflow: hidden !important;
    height: 100% !important;
    width: 100% !important;
}

/* ==========================================================================
   2. VARIABLES GLOBALES
   ========================================================================== */

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #151515;
  --bg-card: #1c1c1c;
  --text-primary: #000000;
  --text-secondary: #000000;
  --accent: #ff4d4d;

  /* Layout */
  --sidebar-width: 277px;
  --section-padding: 40px;

  /* Sobrescritura de fuentes de Gutenberg */
  --wp--preset--font-size--small: 0.9rem;  /* 13px */
  --wp--preset--font-size--medium: 1.25rem;   /* 20px */
  --wp--preset--font-size--large: 2.25rem;    /* 36px */
  --wp--preset--font-size--x-large: 2.625rem; /* 42px */
}


/* ==========================================================================
   TIPOGRAFÍAS PERSONALIZADAS
   ========================================================================== */

/* 1. Helvetica */
@font-face {
    font-family: 'Helvetica Rounded';
    src: url('/wp-content/uploads/fonts/helvetica-rounded-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* 2. DIN 2014 Light */
@font-face {
    font-family: 'din-2014';
    src: url('/wp-content/uploads/fonts/din-2014-light.woff2') format('woff2'); 
    font-weight: 300; 
    font-style: normal;
    font-display: swap;
}

/* 3. DIN 2014 Bold */
@font-face {
    font-family: 'din-2014';
    src: url('/wp-content/uploads/fonts/din-2014-bold.woff2') format('woff2'); 
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* 3. DIN 2014 Bold */
@font-face {
    font-family: 'gotham';
    src: url('/wp-content/uploads/fonts/Gotham-Ultra.woff2') format('woff2'); 
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

strong {
  font-weight: 700;
}
/* ==========================================================================
   3. LAYOUT GENERAL & ANIMACIONES
   ========================================================================== */

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

.home #main-content {
  pointer-events: none;
  background: transparent;
}

#main-content {
  position: relative;
  z-index: 10;
  margin-left: var(--sidebar-width);
  margin-top: -20px;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg-primary);
  /* will-change: transform, opacity; */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

/* body:not(.loaded) #main-content {
  transform: translate3d(800px, 0, 0) scale(0.96);
  opacity: 0;
}

body.loaded #main-content {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease-out;
}

body.leaving #main-content {
  transform: translate3d(800px, 0, 0) scale(1);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease-out;
  pointer-events: none;
} */

body:not(.loaded) #main-content {
  transform: translate3d(800px, 0, 0); /* <-- Eliminado el scale(0.96) */
  opacity: 0;
}

body.loaded #main-content {
  transform: translate3d(0, 0, 0); /* <-- Eliminado el scale(1) */
  opacity: 1;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease-out;
}

body.error404 #main-content {
  background-color: #fbea2f;
  transform: translate3d(0, 0, 0); /* <-- Eliminado el scale(1) */
  opacity: 1;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease-out;
  /* margin-left: 0 !important; */
}

.text-404 {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  
  /* Orientación vertical que lee de abajo hacia arriba */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.text-404 h1,
.text-404 p {
  margin: 0;
  color: #000000;
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1;
}

body.leaving #main-content {
  transform: translate3d(800px, 0, 0); /* <-- Eliminado el scale(1) */
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease-out;
  pointer-events: none;
}

/* ==========================================================================
   4. SIDEBAR & NAVEGACIÓN
   ========================================================================== */

.sidebar-composition {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  height: 100svh;
  z-index: 5;
  overflow: hidden;
}

#sidebar-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background: var(--bg-primary);
  padding: 90px 0 15% 30px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.05);
}

/* --- Top Links --- */
.top-links {
  display: flex;
  position: fixed;
  top: 5px;
  left: 0;
  width: 277px;
  padding: 0 0 0 23px;
  z-index: 15;
}

.top-links-menu {
  display: flex;
  flex: 0 0 15.972vw;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.top-links li {
  margin: 0 15px 0px;
  flex: 1;
}

.top-links a {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: 1px;
  text-transform: lowercase;
  transition: 0.3s;
}

.top-links a:hover {
  color: #919191;
}

.top-links-menu li:nth-child(1) { text-align: left; }
.top-links-menu li:nth-child(2),
.top-links-menu li:nth-child(3) { text-align: center; }
.top-links-menu li:nth-child(4) { text-align: right; }

.submenu {
    display: none;
    position: absolute;
    top: 20px;
    left: 35px;
    list-style: none;
    padding: 0;
    z-index: 1000;
}

/* 2. Mostrar el submenú al hacer hover en el LI padre */
.menu-item-submenu:hover .submenu {
    display: block;
}

/* Estilos opcionales para los items del submenú */
.submenu li a {
    display: block;
    padding: 0px 15px;
    text-decoration: none;
    color: #333;
    line-height: 12px;
}

.submenu li a:hover {
    background-color: #f0f0f000;
}

/* --- Sidebar Menu --- */
.sidebar-nav {
  position: fixed;
  top: calc((100dvh - 530px) / 2);
  left: 260px;
  width: 260px;
  height: 530px;
  padding: 0 20px 0 0;
  z-index: 5;
  display: flex;
  align-items: center;
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
  transform: translateY(clamp(50px, 3vh, 60px));
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  position: relative; 
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 17px;
  letter-spacing: 1.25px;
  text-transform: lowercase;
  transition: 0.3s;
  height: 100%; 
  width: max-content;
}

.menu-squares {
  display: inline-flex;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.square {
  width: 35px;
  height: 35px;
  display: inline-block;
}

.menu-text {
  position: absolute;
  top: 50%;
  left: 0; /* 🔥 ANCLA EL TEXTO EXACTAMENTE A LA DERECHA DE LOS CUADROS */
  margin-left: 17px; /* 🔥 Separación de los cuadros */
  transform: translateY(-50%); 
  width: max-content;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; /* 🔥 VITAL: EL TEXTO YA NO ROBARÁ EL HOVER */
}

li.menu-item-custom {
  height: 50px;
}

.sidebar-menu li:hover .menu-squares { opacity: 0; }
.sidebar-menu li:hover .menu-text { 
  opacity: 1; 
  transform: translateY(-50%); /* Sobrescribe tu translateY previo para mantener el centro */
}

/* --- Bloque Amarillo & Branding --- */
.yellow-square {
  position: absolute;
  top: calc((100dvh - 530px) / 2);
  left: 30px;
  width: 231px;
  height: 530px;
  background-color: #FFED00; 
  z-index: 1;
  display: flex;
  align-items: center;
}

.yellow-square,
.yellow-square * {
  cursor: default;
}

.yellow-text {
  font-size: 13px;
  line-height: 1.55;
  max-width: 170px;
  letter-spacing: 1.5px;
  font-family: din-2014, sans-serif;
  font-weight: 300;
  margin-top: 10px;
  margin-left: 40px;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
/* 1. Estado base: Oculto y bloqueando interacciones */
.yellow-square .yellow-text {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.5s ease;
    transform: translateZ(0); /* Estabilidad gráfica para Safari / iPad */
}

/* 2. Desktop y Laptops: Hover normal */
@media (hover: hover) and (pointer: fine) {
    .yellow-square:hover .yellow-text {
        opacity: 1;
        pointer-events: auto;
    }
}

/* 3. iPad / Pantallas Táctiles: Activa la visibilidad suave desde JS */
.yellow-square .yellow-text.is-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.leaving .yellow-vertical,
body.preload .yellow-vertical,
body.loaded .yellow-vertical,
.yellow-vertical {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.yellow-vertical {
  position: absolute;
  top: calc((100dvh - 530px) / 2);
  left: 30px;
  height: 530px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 2px;
  text-transform: lowercase;
  margin-left: 3px;
  z-index: 2;
  isolation: isolate !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform-style: preserve-3d !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
}

.vertical-inner {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-name,
.site-tagline {
  font-size: 21px;
  letter-spacing: 1px;
  font-family: din-2014, sans-serif;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  contain: layout style paint !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}

.site-name { font-weight: 700; }
.site-tagline { font-weight: 300; }

/* --- FIX ANTI-PARPADEO Y GROSOR DE FUENTE EN TEXTO VERTICAL --- */
.yellow-vertical,
.yellow-vertical .site-name,
.yellow-vertical * {
    /* 1. Bloquea el ajuste automático de tamaño de texto en WebKit/iOS */
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;

    /* 2. Fuerza Grayscale Antialiasing permanente (evita la conmutación de grosor) */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;

    /* 3. Precisión geométrica estricta en el trazo de la fuente */
    text-rendering: geometricPrecision !important;

    /* 4. Congela la matriz 3D para evitar re-cálculos de subpíxel */
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

/* ==========================================================================
   5. COMPONENTES GLOBALES & UI
   ========================================================================== */
body.its-a-love-thing .section, body.the-nave .section, body.cbsw .section, body.handpicked .section, body.love-book .section, body.collectiv-food .section, body.collectiv-food .section { padding-top: 0 !important;}
.section { padding: 100px var(--section-padding); padding-bottom: 0 !important;}

.container { max-width: 1200px; margin: auto; }

.hero {
  height: calc(var(--vh) * 100);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('assets/images/hero.jpg') center/cover;
}

.hero h1 {
  font-size: 60px;
  margin-bottom: 20px;
}

.btn {
  padding: 12px 30px;
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
}

.cards { display: flex; gap: 30px; }
.card { background: var(--bg-card); padding: 30px; transition: 0.3s; }
.card:hover { transform: translateY(-10px); }

footer {
  display: none;
  background: #000;
  padding: 50px 0;
  text-align: center;
}

/* --- UI Controls (Overlay) --- */
/* ==========================================================================
   UI CONTROLS (OVERLAY) - ALINEADOS A LA IZQUIERDA
   ========================================================================== */

.global-ui {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
  transform: scale(1);
  opacity: 1;
  transform-origin: top left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

.ui-close {
  position: absolute;
  top: 3dvh;
  right: 3vw !important; /* 🔥 Anclado a la derecha con 10vw de espacio */
  left: auto !important;
  width: 28px; 
  height: 28px;
  text-decoration: none;
  pointer-events: auto;
  z-index: 1000;
  transform-origin: top right; /* 🔥 Origen ajustado a la derecha */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.ui-scroll {
  position: absolute;
  right: 3vw !important; /* 🔥 Anclado a la derecha con 10vw de espacio */
  left: auto !important;
  bottom: 50px;
  display: flex;
  flex-direction: column;
  gap: 10px; 
  pointer-events: auto;
  transform-origin: bottom right;
}

.ui-scroll button {
  background: none;
  border: none;
  padding: 0;
  width: 28px; /* Espacio exacto para tus flechas */
  height: 28px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

/* Efecto hover elegante para los tres botones */
.ui-close:hover, 
.ui-scroll button:hover {
  transform: scale(1.1);
}

/* Regla vital para que el SVG o Imagen (WEBP/PNG) que pongas encaje perfecto */
.ui-close img, .ui-close svg,
.ui-scroll button img, .ui-scroll button svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

body:not(.loaded) .global-ui { transform: scale(1.15); opacity: 0; }
body.leaving .global-ui { transform: scale(1); opacity: 0; }

.scroll-ui-1 {
        fill: #f1f1f100;
      }

      .scroll-ui-2 {
        fill: #333;
      }

@media (min-width: 1441px) { }

/* ==========================================================================
   6. SISTEMA DE LAYOUT (Utilidades Spectra/Gutenberg)
   ========================================================================== */

.container.section {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#main-content .uagb-is-root-container {
  max-width: calc(100vw - var(--sidebar-width)) !important;
  box-sizing: border-box !important;
}

/* Base compartida para expandir a los bordes */
.container.section .full-bleed,
.container.section .full-bleed--vh,
.container.section .full-bleed--half {
  margin-left: calc(-1 * var(--section-padding)) !important;
  margin-right: calc(-1 * var(--section-padding)) !important;
  width: calc(100% + (var(--section-padding) * 2)) !important;
  max-width: none !important;
  padding: 0 !important;
  /* margin-top: -2px !important;
  margin-bottom: 1px !important; */
}

/* Modificadores específicos de altura */
.container.section .full-bleed--vh {
  height: 100dvh;
  overflow: hidden;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  
}

.container.section .full-bleed--half {
  height: 50vh;
  overflow: hidden;
}

.full-bleed img, .full-bleed video,
.full-bleed--vh img, .full-bleed--vh video,
.full-bleed--half img, .full-bleed--half video {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover;
  display: block !important;
  margin: 0 !important;
  
}

.full-bleed figure,
.full-bleed--vh figure,
.full-bleed--half figure {
  margin: 0 !important;
  height: 100%;
  width: 100%;
}

.container.section .inset {
  padding-left: var(--section-padding) !important;
  padding-right: var(--section-padding) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.container.section .inset--narrow {
  max-width: 680px !important;
  padding-left: var(--section-padding) !important;
  padding-right: var(--section-padding) !important;
  box-sizing: border-box !important;
}

.kb-video-wrapper {
    width: 100%;
    margin: 0;
    overflow: hidden;
    transform: scale(1);
    transform-origin: center center;
}

.kb-video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
/* 1. EL CONTENEDOR PADRE: Gobierna el espacio en el viewport */
.collectiv-logovideo-block {
    width: 100%;
    height: 100vh;
    height: 100dvh; /* Altura exacta para iPadOS/móviles */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Corta cualquier desborde */
    position: relative;
}

/* 2. EL FIGURE: Limpia los márgenes nativos y llena al padre */
.collectiv-logovideo-block figure {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. EL VIDEO: Mantiene su proporción natural sin zoomearse */
.collectiv-logovideo-block video {
    display: block;
    width: 100%;
    height: auto;
}

.skip-link:focus {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: #000000;
    color: #ffffff;
    padding: 0.75rem 1.25rem;
    z-index: 999999;
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* ==========================================================================
   7. COLLECTIV FOOD - ESTILOS BASE
   ========================================================================== */

body.collectiv-food #main-content {
  background-color: #f1f1f1;
}

body.love-book #main-content {
  background-color: #f1f1f1;
}

body.handpicked #main-content {
  background-color: #f1f1f1;
}


body.its-a-love-thing #main-content {
  background-color: #f1f1f1;
}

/* --- Typografía y Centrado --- */
h1, h2 {
    font-size: 2.8em;
    line-height: .9;
}

.content-text {
  display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; 
    gap: 0 !important; 
    margin-top: 0 !important; 
    align-items: flex-start !important;
    min-height: 70vh !important; 
    padding: 0.694vw !important; 
    margin-bottom: 0 !important;
    height: 100dvh;
    height: 100vh;
}

.content-text h1 {
  margin: 0 !important;
  line-height: 1.1 !important;
}

/* Estado inicial mientras carga/alinea JS */
.content-text {
    opacity: 0;
    transition: opacity 0.8s ease-in-out 0.3s;
    will-change: opacity;
}

/* Estado una vez alineado por el script */
.content-text.is-aligned {
    opacity: 1;
}

.paragraph-collectiv-first {
  max-width: 30vw;
  line-height: 1;
  padding-left: 40px !important;
}

body.the-nave .paragraph-collectiv-first {
  max-width: 25vw;
  line-height: 1;
  padding-left: 40px !important;
}

body.its-a-love-thing .paragraph-collectiv-first {
    max-width: 25vw !important;
  }

.paragraph-cbsw-first {
  max-width: 35vw;
  line-height: 1;
  padding-left: 40px !important;	
}

.flow-text {
  position: absolute !important;
  left: 0;
  max-width: 220px;
  z-index: 2;
}

.flow-text-top {
  transform: translate(0px, 0px);
  max-width: 24vw !important;
  top: 100px;
}

.flow-text-bottom {
  transform: translate(0px, 0px);
  max-width: 5vw !important;
  top: 180px;
  left: 80%;
}

@media (min-width: 1441px) {
  .flow-text-top {
    top: 6.9vw;
  }
  .flow-text-bottom {
    max-width: 5vw !important;
    top: 12.5vw;
  }
}

/* ==========================================================================
   8. COLLECTIV FOOD - ANIMACIONES Y SVG
   ========================================================================== */

/* --- Dots & Paths --- */
.dot {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.dot.fade-out {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.dot.done {
  opacity: 1;
  transform: scale(1);
  animation: settleDot 0.3s ease forwards;
}

@keyframes settleDot {
  0%   { transform: scale(1); }
  100% { transform: scale(1); }
}

.dot.active {
  opacity: 1;
  animation: pulseDot 0.4s ease-in-out;
}

@keyframes pulseDot {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.2); opacity: 1; }
}

.icon-end {
  opacity: 0;
}

.icon-end.show {
  animation: iconReveal 0.8s ease forwards;
  transform: translate(-30px, 210px) scale(1.7) !important;
  transform-origin: 1148px 514px !important;
}

@keyframes iconReveal {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

.route, .cls-2 { fill: none; }

@keyframes drawSmall { to { stroke-dashoffset: 0; } }
@keyframes drawMain { to { stroke-dashoffset: 0; } }

#route-collectiv {
  width: 80% !important;
  margin: 150px 0 80px 20px;
}

/* --- The Wave --- */
.container-wave-collectiv {
  position: absolute !important;
  top: -5px;
  left: 0;
  width: 100%;
  height: 680px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important; /* Bloquea el desborde general */
  z-index: 5;
  pointer-events: none;
}

.wave-svg {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  overflow: hidden !important; /* 🔥 Refuerzo para que Safari respete la máscara */
  transform-origin: top left !important;
  will-change: transform;
  /* 🔥 Fuerza a Safari a dibujarlo al instante */
  -webkit-transform: translateZ(0); 
  transform: translateZ(0);
}

.container-wave-collectiv .wp-block-uagb-image__figure {
  max-width: none !important;
  width: auto !important;
  display: block !important;
  position: absolute !important;
  top: 0;
  left: 580px;
}

.wave-svg img {
  width: 314px !important;
  max-width: none !important;
  height: auto !important;
  display: block !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  transform: rotate(-35deg) !important; 
  transform-origin: center;
  offset-path: path("M 50 112 L 344 533");
  offset-distance: 0%;
  animation: waveMove 4s linear infinite, sideWave 4.5s ease-in-out infinite;
  will-change: offset-distance, transform;
  offset-rotate: 0deg;
}

@keyframes waveMove {
  100% { offset-distance: 100%; }
}

@keyframes sideWave {
  0%, 100% { transform: rotate(-95deg) translateX(0px); }
  50%        { transform: rotate(-95deg) translateX(12px); }
}

/* Corrección exclusiva para Safari en Mac sin afectar a Chrome/Brave */
@supports (-webkit-hyphens: none) {
  .wave-svg img {
    /* 🔥 Evita que el archivo crudo recupere sus 1530px originales si el motor falla */
    width: 314px !important; 
    max-width: 1530px !important;
    transform: rotate(-35deg) !important;
    transform-origin: center center !important;
  }
}


/* --- The Bowl --- */
body.collectiv-food .collectiv-bowl {
  position: absolute;
  top: 68dvh;
  top: 68vh;
  right: -12vw; /* O el valor que le hayas dejado */
  z-index: 20;
  pointer-events: none;
  width: auto;
  height: auto;
  /* 🔥 Fuerza a Safari a dibujarlo al instante */
  -webkit-transform: translateZ(0); 
  transform: translateZ(0);
}


body.collectiv-food .collectiv-bowl__image img {
  width: 680px;
  max-width: none;
  height: auto;
  display: block;
  animation: bowlFloatNatural 7.5s cubic-bezier(0.25, 0, 0.85, 1.5) infinite;
  will-change: transform;
}

@keyframes bowlFloatNatural {
  0%   { transform: rotate(-20deg) translate(0px, 0px); }
  18%  { transform: rotate(-17deg) translate(8px, -6px); }
  37%  { transform: rotate(-21deg) translate(-6px, -14px); }
  58%  { transform: rotate(-19deg) translate(10px, -4px); }
  73%  { transform: rotate(-22deg) translate(-8px, -10px); }
  100% { transform: rotate(-20deg) translate(0px, 0px); }
}

/* ==========================================================================
   9. COLLECTIV FOOD - MEDIA & SCROLL SCENES
   ========================================================================== */

/* --- Logo Video --- */
.collectiv-logovideo-block {
  max-width: none !important;
  margin-left: calc(-1 * var(--section-padding)) !important;
  margin-right: calc(-1 * var(--section-padding)) !important;
  width: calc(100% + (var(--section-padding) * 2)) !important;
  padding: 0 !important;
  line-height: 0 !important;
  overflow: hidden;
}

.collectiv-logovideo-block figure {
  margin: 0;
  aspect-ratio: 779 / 491; 
  overflow: hidden !important;
}

.collectiv-logovideo-block video {
  width: 100% !important;
  height: 100dvh !important;
  object-fit: cover !important;
  display: block;
  transform: translateZ(0);
  position: fixed;
}

video {
  transform: translateZ(0);
  will-change: transform;
}

/* --- Scroll Scene & Poster SVG --- */
.collectiv-scroll-scene {
  position: relative !important;
  height: 100vh !important;
  overflow: hidden;
}

.scene-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: center center;
  z-index: -1;
  pointer-events: none;
}

.collectiv-scroll-scene .scene-bg {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  z-index: 1;
  opacity: 0; /* Estado inicial oculta */
  will-change: opacity;
  
  /* 🔥 NUEVO: Tiempo fijo constante para el desvanecimiento del WebP */
  transition: opacity 3.8s ease-in-out !important; 
}

.collectiv-poster-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 10 !important;
  pointer-events: none;
  opacity: 1; /* Estado inicial visible */
  will-change: opacity; 
  
  /* 🔥 NUEVO: Tiempo fijo constante para el desvanecimiento del SVG */
  transition: opacity 3.2s ease-in-out !important; 
}

/* 🔥 NUEVAS CLASES DE ESTADO AUTOMÁTICO (Controladas por el nuevo JS) */
.collectiv-scroll-scene.is-active .scene-bg {
  opacity: 1 !important; /* El WebP aparece al entrar la sección */
}

.collectiv-scroll-scene.is-active .collectiv-poster-wrapper {
  opacity: 0 !important; /* El SVG desaparece al entrar la sección */
}

/* El resto de tu código de abajo se queda exactamente igual */
.collectiv-poster-wrapper figure,
.collectiv-poster-wrapper img,
.collectiv-poster-wrapper svg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  display: block !important;
}

.collectiv-flow-stage {
  position: relative !important;
  max-height: 100vh !important;
}

.collectiv-flow-group {
  position: relative !important;
  transform-origin: top left;
}

.collectiv-path-wrapper {
  position: relative !important;
  top: -135px;
  left: 0;
  width: 100%;
  height: 80vh;

}

.collectiv-flow-path-svg {
  width: 100%;
  height: auto !important;
  display: block !important;
}

.collectiv-h2-right-bottom {
  right:-75% !important;
  bottom:-10% !important;
}

.collectiv-h2-left-bottom {
  bottom:-20% !important;
  width: 30vw !important;
}

.first-text {
  line-height: 1.2 !important;
}
/* ==========================================================================
   10. RESPONSIVE MÓVIL (< 768px)
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --section-padding: 20px;
    --sidebar-width: 0px;
  }

  #sidebar-menu { width: 100vw; }

  
  /* 1. Ocultar el cuadro en todas las páginas internas (About, Work, etc.) */
body.page:not(.home):not(.front-page) .yellow-square {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Aquí sí es seguro poner transform: none !important si quieres ahorrar memoria, 
       ya que en páginas internas no habrá animación */
}

/* 2. Mostrar el cuadro exclusivamente en la página de inicio */
body.home .yellow-square,
body.front-page .yellow-square {
    opacity: 1;
    visibility: visible;
    pointer-events: none; /* Mantenemos tu instrucción */
}

/* 4. 🔥 EL TRUCO DE LOS 2 SEGUNDOS: Solo se aplica si viene de la transición de cierre */
body.home.from-close.loaded .yellow-square,
body.front-page.from-close.loaded .yellow-square {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    /* La sintaxis es: propiedad | duración | curva | RETRASO (2s) */
    transition: opacity 1.4s ease 2s, transform 0.1s linear;
}

  .yellow-vertical {
    position: fixed;
    top: 0;
    left: -10px;
    width: 40px;
    height: 100vh;
    /* background: #FFED00; */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
  }

  #main-content {
    margin-left: 0 !important;
    width: 100%;
    min-height: 150vh;
    left: 47px;
  }

  .top-links { display: none; }

  .sidebar-nav {
    position: fixed;
    top: 0;
    left: auto;
    width: 100%;
    height: 100vh;
    padding: 0 0 0 30px;
    z-index: 1;
    display: flex;
    align-items: center;
  }

  .sidebar-nav ul {
    height: fit-content;
    transform: translateY(clamp(0px, 1.5dvh, 20px));
  }

  .yellow-square {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 20;
    overflow: hidden;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
    transition: transform 0.1s linear;
  }

  .yellow-square.scrolled {
    transform: translateY(-100vh);
    top: -10vh;
  }

  body.leaving .yellow-square {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .yellow-text {
    opacity: 1;
    font-size: 6vw;
    line-height: 1.3;
    max-width: 90vw;
    letter-spacing: 1.25px;
    padding: 0 15px 0 10px;
    margin-right: 10px;
  }

  .sidebar-composition { width: 100vw; }
  .site-name, .site-tagline { font-size: 5vw; }

  .mobile-header {
    position: fixed;
    top: 20px;
    left: 6px;
    z-index: 30;
  }

  .hamburger { font-size: 22px; cursor: pointer; }

  .mobile-yellow-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 0;
    background: #FFED00;
    z-index: 50;
    opacity: 0;
    transform: translateY(-10px);
    transition: 0.4s ease;
  }

  .mobile-yellow-bar.visible {
    opacity: 0;
    transform: translateY(-5px);
  }

  body.hide-yellow .yellow-square {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.from-close.preload { opacity: 0; }
  body.from-close.preload .yellow-square {
    opacity: 0 !important;
    transform: translate3d(0, -120vh, 0) !important;
    transition: none !important;
  }

  body.leaving .sidebar-nav { pointer-events: none; }

  .container.section .full-bleed,
  .container.section .full-bleed--vh,
  .container.section .full-bleed--half {
    margin-left: calc(-1 * var(--section-padding)) !important;
    margin-right: calc(-1 * var(--section-padding)) !important;
    width: calc(100% + (var(--section-padding) * 2)) !important;
  }
}

/* ==========================================================================
   11. ESCALADO MATEMÁTICO PROPORCIONAL (> 1440px)
   ========================================================================== */

@media (min-width: 1441px) {

  :root {
    --sidebar-width: 19.236vw;
    --section-padding: 2.777vw;
  }

  html { font-size: 1.111vw !important; }

  #main-content { margin-top: -1.388vw; }

  /* body:not(.loaded) #main-content,
  body.leaving #main-content {
    transform: translate3d(55.555vw, 0, 0) scale(0.96);
  } */

  body:not(.loaded) #main-content,
  body.leaving #main-content {
    transform: translate3d(55.555vw, 0, 0); /* <-- Eliminados los scale */
  }
  
  body.leaving #main-content {
    transform: translate3d(55.555vw, 0, 0) scale(1);
  }

  .container { max-width: 83.333vw; }
  .section { padding: 6.944vw var(--section-padding); padding-bottom: 0 !important; }
  body.its-a-love-thing .section, body.the-nave .section, body.cbsw .section { padding-top: 0 !important;}
  .container.section .inset--narrow { max-width: 47.222vw !important; }

  .sidebar-composition, #sidebar-menu { width: 18.055vw !important; }
  #sidebar-menu { padding: 6.25vw 0 15% 2.083vw; }

  .top-links {
    width: 19.236vw;
    padding: 0 0 0 1.597vw;
    /* top: -0.694vw; */
  }
  
  .top-links li { margin: 0 0.694vw 0.694vw; }
  .top-links a { font-size: 0.902vw; letter-spacing: 0.069vw; }

  .sidebar-nav {
    width: 18.055vw; 
    height: 36.805vw;
    top: 50%;
    transform: translateY(-50%);
    left: 18.055vw;  
    padding: 0 1.388vw 0 0;
  }

  .sidebar-nav ul { transform: translateY(clamp(3.472vw, 3vh, 4.166vw)); }
  .sidebar-nav a { font-size: 1.18vw; letter-spacing: 0.086vw; }

  .square { width: 2.43vw; height: 2.43vw; }
  .menu-squares { margin-right: 0; }
  .menu-text { top: 50%; 
    left: 0; 
    margin-left: 1.18vw; }
  li.menu-item-custom { height: 3.472vw; }

  .yellow-square {
    width: 15.972vw; 
    height: 36.805vw;
    top: 50%;
    transform: translateY(-50%);
    left: 2.083vw;  
  }

  .yellow-text {
    font-size: 0.902vw; 
    max-width: 11.805vw;
    margin-top: 0.694vw;
    margin-left: 2.777vw;
    letter-spacing: 0.104vw;
  }

  .yellow-vertical {
    height: 36.805vw !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 2.083vw !important;
    margin-left: 0.208vw !important;
  }

  .site-name, .site-tagline { font-size: 1.458vw; letter-spacing: 0.069vw; }
  .vertical-inner { gap: 0.694vw; }

  .hero h1 { font-size: 4.166vw; margin-bottom: 1.388vw; }
  .btn { padding: 0.833vw 2.083vw; }
  .cards { gap: 2.083vw; }
  .card { padding: 2.083vw; }
  .card:hover { transform: translateY(-0.694vw); }

  .global-ui .ui-close { top: 2dvw; left: 16vw; width: 40px; height: 40px; }
  .global-ui .ui-scroll { left: 16vw; bottom: 3vw; gap: 0.694vw; }
  .global-ui .ui-scroll button { width: 40px; height: 40px; }

  footer { padding: 3.472vw 0; }

  /* Bloque unificado de .content-text */
  .content-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    min-height: 70vh !important; 
    margin-top: 0 !important; 
    gap: 15.833vw !important; 
    padding: 0.694vw !important; 
  }

  h1 { line-height: 2.43vw; }
  .paragraph-collectiv-first { max-width: 23vw !important; }
  .text-collectiv2 { width: 8vw !important; }
  .paragraph-cbsw-first { max-width: 35vw; }
  body.handpicked .paragraph-collectiv-first { max-width: 26vw !important; }
  #route-collectiv { margin: 10.416vw 0 5.555vw 1.388vw !important; }

  .container-wave-collectiv {
    top: -1.388vw;
    height: 47.222vw;
  }

  .wave-svg {
    transform-origin: top left !important;
    /* 🔥 1. FALLBACK SAFARI ANTIGUO: Escala fija segura si no entiende trigonometría */
    transform: scale(1.2) !important; 
    /* 🔥 2. REGLA MODERNA: Los navegadores nuevos leen esto y anulan la línea anterior */
    transform: scale(tan(atan2(100vw, 1440px))) !important;
    will-change: transform;
  }

  body.collectiv-food .collectiv-bowl {
    top: 31.25vw;
    right: -13.888vw;
  }

  body.collectiv-food .collectiv-bowl__image img { width: 47.222vw; }

  @keyframes sideWave {
    0%, 100% { transform: rotate(-35deg) translateX(0px); }
    50% { transform: rotate(-35deg) translateX(0.833vw); }
  }

  @keyframes bowlFloatNatural {
    0%   { transform: rotate(-20deg) translate(0px, 0px); }
    18%  { transform: rotate(-17deg) translate(0.555vw, -0.416vw); }
    37%  { transform: rotate(-21deg) translate(-0.416vw, -0.972vw); }
    58%  { transform: rotate(-19deg) translate(0.694vw, -0.277vw); }
    73%  { transform: rotate(-22deg) translate(-0.555vw, -0.694vw); }
    100% { transform: rotate(-20deg) translate(0px, 0px); }
  }
}

/* ==========================================================================
   TRANSICIÓN DE ALINEACIÓN (Opacidad + Zoom sutil) BLINDADA
   ========================================================================== */

@media (min-width: 769px) {
    /* 1. Estado inicial: Oculto a la fuerza. 
       Cambiamos el transition aquí para que no intente animarse al cargar la página */
    .collectiv-h1-wrapper,
    .first-text {
        opacity: 0 !important;
        visibility: hidden !important; /* Capa extra de invisibilidad inicial */
        transform: scale(0.96) !important;
        transition: none !important; 
    }

    /* 2. Estado final: Visible. 
       Al agregar .is-aligned, le devolvemos la visibilidad y ENCENDEMOS la transición */
    .content-text.is-aligned .collectiv-h1-wrapper,
    .content-text.is-aligned .first-text {
        visibility: visible !important;
        opacity: 1 !important;
        transform: scale(1) !important;
        transition: 
            opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), 
            transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
		padding-left: 40px !important;
    }
}

/* ==========================================================================
   COLLECTIV TRUCKS ANIMATION - FLEET SYSTEM
   ========================================================================== */
.collectiv-trucks-stage {
    position: relative !important;
    height: 100vh !important;
    width: calc(100% + (var(--section-padding) * 2)) !important; /* Estira a los bordes */
    max-width: none !important;
    margin-left: calc(-1 * var(--section-padding)) !important; /* Rompe el padding izquierdo */
    margin-right: calc(-1 * var(--section-padding)) !important; /* Rompe el padding derecho */
    overflow: hidden !important; 
}

.truck1, .truck2, .truck3 { 
    left: 50% !important; 
    top: 60% !important; 
    position: absolute;
    width: 600px !important; 
    will-change: transform;
}

/* El 1 siempre debe estar por encima de los demás visualmente */
.truck1 { z-index: 30; }
.truck2 { z-index: 20; }
.truck3 { z-index: 10; }

.wheel {
    position: absolute;
    width: 30px;
    height: 30px;
    background: url("/wp-content/uploads/2026/04/truck-wheels-sprite.png") no-repeat 0 0;
    background-size: 120px 30px;
    image-rendering: pixelated;
    will-change: background-position;
}

.wheel1 { left: 131px; bottom: 10px; }
.wheel2 { left: 166px; bottom: 30px; }
.wheel3 { left: 372px; bottom: 143px; }
.wheel4 { left: 406px; bottom: 163px; }
.wheel5 { left: 546px; bottom: 243px; }

/* ==========================================
   ESTILOS PARA PROYECTOS "COMING SOON" (Vía Atributo href)
   ========================================== */

/* 1. Bloqueamos toda interacción en los enlaces que apuntan a "#" */
.sidebar-menu a[href="#"] {
    pointer-events: none !important; 
    cursor: default !important; 
    opacity: 0.75 !important; 
}

/* 2. LA MAGIA: Desaturamos los cuadros SOLO si el enlace padre es "#" */
.sidebar-menu a[href="#"] .menu-squares {
    filter: grayscale(100%) brightness(1.2) opacity(50%) !important; 
    /* El brightness(1.2) es un toque extra para que los grises no queden tan oscuros y sucios */
}

/* 3. Estilizamos el texto "coming soon" */
.sidebar-menu a[href="#"] .menu-text {
    color: #000000 !important;
    font-weight: 400 !important;
}

/* ==========================================================================
   SECCIÓN: IMAGEN OFFSET + TEXTO MITAD (Estructura Anidada)
   ========================================================================== */

/* 1. El Contenedor de la Sección (Flexbox para centrar) */
.collectiv-offset-section {
    position: relative;
    width: 100%;
    min-height: 100vh; 
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    /* AJUSTE: Mantenemos el padding global de tu tema */
    padding: 100px var(--section-padding) !important;
    box-sizing: border-box; /* Vital para que el padding no desborde el ancho */
    background: transparent; 
}

/* 2. El Figure (Imagen con tu ajuste manual de 330px) */
.collectiv-offset-image {
    margin: 0 !important;
    margin-bottom: -10px !important;
    position: relative;
    z-index: 2;
    height: 31vw !important; 
    width: auto !important;
    transform: translate(10%, 24%); 
    will-change: transform;
}

/* Aseguramos que la etiqueta img dentro del figure respete el tamaño */
.collectiv-offset-image img {
    height: 100% !important;
    width: auto !important;
    display: block;
}

/* 3. El Texto Inferior */
.collectiv-half-text {
    width: 20vw;
    margin: -45px 0px 50px 50px !important;
    text-align: left !important;
    align-self: flex-start !important;
    z-index: 2;
    transform: translate(0, -2vw);
}

/* ==========================================
   ESCALADO MATEMÁTICO (> 1440px)
   ========================================== */
@media (min-width: 1441px) {
    .collectiv-offset-section {
        /* Escalamos el padding vertical igual que tu clase .section global */
        padding: 6.944vw var(--section-padding) !important;
    }

    .collectiv-offset-image {
        height: 31vw !important;
        transform: translate(15%, 35%) !important; 
    }
    
    .box-animation img {
      width: 50dvw;
    }
}

/* ==========================================
   RESPONSIVE MÓVIL (< 768px)
   ========================================== */
@media (max-width: 768px) {
    .collectiv-offset-section {
        justify-content: flex-start; 
        padding-top: 80px !important; /* En móvil le damos un respiro diferente */
        padding-bottom: 80px !important;
    }

    .collectiv-offset-image {
        transform: translate(0px, 0px) !important; 
        height: auto !important; 
        width: 80vw !important; 
        max-height: 300px !important;
    }

    .collectiv-half-text {
        width: 100% !important; 
        margin: 30px 0 0 0 !important; 
        padding: 0 15px !important; 
    }
}

/* ==========================================================================
   SECCIÓN: 2 COLUMNAS (USANDO NATIVO DE SPECTRA)
   ========================================================================== */

/* 1. Ajustes base para asegurar centrado vertical y altura de pantalla */
.collectiv-spectra-split {
    min-height: 100vh !important; /* <--- LA CLAVE: Forzamos la altura de la resolución del usuario */
    display: flex !important; /* Refuerzo por seguridad con Spectra */
    align-items: center !important; /* Centra el contenido verticalmente en ese 100vh */
    max-height: 100vh;
    /* El mismo "Safe Area" que la sección anterior */
    padding: 100px var(--section-padding) !important; 
    box-sizing: border-box !important;
}

.collectiv-spectra-left1 {
  position: relative;
    max-width: 60% !important;
    /* margin-top: 5vh !important; */
    left: 0% !important;
    transform: translate(0, 0);
    scale: 1;
    top: 0;
}

.collectiv-spectra-right1 {
  position: relative !important; /* 🔥 El ancla que Safari viejo necesita */
  max-width: 20% !important;
  margin-top: 50vh !important;
  right: 10%;
}

.trucks-h2-right {
  transform: translate(0px, 0px);
  position: absolute;
  top: 10px;
  left: 58vw;
}

.trucks-h2-left {
  position: absolute;
  transform: translate(0px, 0px);
  top: -30px;
  width: 800px;
  left: auto; /* Nos aseguramos de quitar el 25vw que rompía todo */
}

/* ==========================================
   ESCALADO MATEMÁTICO (> 1440px)
   ========================================== */
@media (min-width: 1441px) {
    .collectiv-spectra-split {
        column-gap: 0vw !important; 
        /* Escalamos el padding vertical */
        padding: 6.944vw var(--section-padding) !important;
    }
    
    .trucks-h2-right {
        top: 95px;
    }
}

/* ==========================================
   RESPONSIVE MÓVIL (< 768px)
   ========================================== */
@media (max-width: 768px) {
    .collectiv-spectra-split {
        /* En móvil, a veces 100vh es poco si hay mucho texto, así que min-height lo protege */
        min-height: 100vh !important; 
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }
}

/* ==========================================================================
   SECCIÓN: IMÁGENES SUPERPUESTAS (OVERLAP CON CSS GRID)
   ========================================================================== */

/* 1. El Contenedor Padre (Magia con Grid) */
.collectiv-overlap-section {
    position: relative;
    width: 100%;
    /* TRUCO 1: dvh para que se adapte dinámicamente a las barras del navegador */
    max-height: 100vh !important; 
    max-height: 100dvh !important; 
    /* LA MAGIA: Usamos Grid para apilar los elementos en el mismo punto cero */
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center; /* Centra todo en el medio de la pantalla */
    
    padding: 100px var(--section-padding) !important;
    box-sizing: border-box;
}

/* 2. Regla Compartida para que compartan la misma "celda" */
.collectiv-overlap-left,
.collectiv-overlap-right {
    grid-area: 1 / 1; /* Obliga a ambos a iniciar en el centro exacto */
    position: relative;
    will-change: transform;
}

/* Forzamos a que las imágenes de Spectra respeten su contenedor */
.collectiv-overlap-left img,
.collectiv-overlap-right img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* 3. La Imagen de la Izquierda (Va por debajo) */
.collectiv-overlap-left {
    z-index: 2; 
    width: 90vw !important; 
    
    /* TRUCO 2: Mover con % respecto a su propio tamaño. 
       -50% a la izq y -5% hacia arriba. (Ajusta estos números a tu gusto) */
    transform: translate(-20vw, -5vw) !important
}

/* 4. La Imagen de la Derecha (Va por encima) */
.collectiv-overlap-right {
    z-index: 3; 
    width: 20vw !important; 
    
    /* TRUCO 2: Mover con %. 
       35% a la derecha y 10% hacia abajo. (Ajusta estos números a tu gusto) */
    transform: translate(18vw, -5vw) !important
}

/* ==========================================
   ESCALADO MATEMÁTICO (> 1440px)
   ========================================== */
@media (min-width: 1441px) {
    .collectiv-overlap-section {
        padding: 6.944vw var(--section-padding) !important;
    }
    
    .collectiv-overlap-left {
        /* ACTUALIZADO con tus nuevas coordenadas */
        transform: translate(-18vw, -5vw) !important;
        width: 95vw !important;
    }
    
    .collectiv-overlap-right {
        /* ACTUALIZADO con tus nuevas coordenadas */
        transform: translate(21vw, -5vw) !important;
    }
}

/* ==========================================
   RESPONSIVE MÓVIL (< 768px)
   ========================================== */
@media (max-width: 768px) {
    .collectiv-overlap-section {
        /* En móvil quitamos la cuadrícula y dejamos que se apilen naturalmente */
        display: flex !important;
        flex-direction: column !important;
        gap: 30px;
        padding-top: 80px !important;
        padding-bottom: 80px !important;
        min-height: auto !important; /* Dejamos fluir el alto */
    }

    .collectiv-overlap-left,
    .collectiv-overlap-right {
        width: 80vw !important; /* En celular ambas toman casi toda la pantalla */
        transform: translate(0, 0) !important; /* Matamos el offset para evitar desbordes */
        z-index: auto;
    }
}

/* ==========================================================================
   SECCIÓN: POSTER INTERACTIVO COLLECTIV
   ========================================================================== */

/* Contenedor nativo de Spectra */
.collectiv-interactive-poster {
    width: 100%;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f1f1f1;
    overflow: hidden;
}

/* Envoltorio del SVG */
.poster-canvas {
    width: 100%;
    max-width: 95vw;
}

/* Texto que serpentea */
.salad-snake-text {
    font-family: 'Helvetica Rounded', sans-serif;
    font-size: 118px;
    font-weight: 700;
    fill: #ff8a47;
    text-transform: lowercase;
}

/* Animación de flotado suave para los platos */
.floating-item {
    animation: floatEffect 5s ease-in-out infinite;
}

@keyframes floatEffect {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ==========================================
   COLORES DEL LOGO INFERIOR
   ========================================== */
.collectiv-orange-paths, .salad-orange { fill: #ff955d; }
.collectiv-blue-paths { fill: #017efd; }
.collectiv-darkorange-paths, .salad-darkorange  { fill: #ff702a; }
.collectiv-yellow-paths, .salad-yellow { fill: #ffc200; }

/* Asegura que las imágenes no interfieran con clicks y roten bien */
.floating-item {
    pointer-events: none;
    will-change: transform; /* Ayuda al navegador a optimizar la animación */
}

/* Opcional: Que aparezcan suavemente cuando la página esté lista */
.poster-canvas {
    opacity: 0;
    transition: opacity 0.8s ease;
}

body.loaded .poster-canvas {
    opacity: 1;
}

.element-lettuce, .element-bowl {
    transition: none !important;
    transform-box: fill-box;
    transform-origin: center;
}

/* Este contenedor es el que tus botones de scroll buscarán después */
.double-height {
    height: 200vh !important; /* El doble del alto de pantalla */
    position: relative;
    overflow: hidden;
}

.mega-svg-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start; /* O center, dependiendo de cómo quieras que se vea al entrar */
    justify-content: center;
}

.mega-svg-wrapper svg {
    width: 100%;
    height: 100%; /* Obligamos al SVG a llenar los 200vh */
    display: block;
}

/* --- ORGANIZACIÓN DE COLORES (Basado en tus clases originales) --- */
/* Blancos */
.cls-2, .cls-3, .cls-4, .cls-5, .cls-7, .cls-8, .cls-9, .cls-10 {
  fill: #fff;
}

/* Naranjas */
.cls-6, .cls-11, .cls-13 {
  fill: #ff6f2a;
}

/* Azules */
.cls-12, .cls-14, .cls-18 {
  fill: #007fff;
}

/* Otros colores de marca */
.cls-1 { fill: #989898; }  /* Gris */
.cls-15 { fill: #ff955d; } /* Naranja suave */
.cls-30 { fill: #ffc200; } /* Amarillo */

/* Bordes (Stroke) */
.cls-8 {
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: .97px;
}

/* Helvetica Rounded - Títulos y destacados */
.cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6 {
  font-family: 'Helvetica Rounded', HelveticaRounded-Bold, sans-serif;
  font-weight: 700;
}

/* DIN 2014 - Cuerpo de texto y datos */
.cls-7, .cls-10, .cls-11, .cls-12 {
  font-family: din-2014, sans-serif;
  font-weight: 300;
}

.cls-6 { font-size: 179.09px; } /* Súper Título */
.cls-5 { font-size: 53.32px; }  /* Títulos de sección */
.cls-1, .cls-3, .cls-4 { font-size: 29.09px; } /* Subtítulos */
.cls-2, .cls-7, .cls-10, .cls-11, .cls-12 { font-size: 19px; } /* Textos legales/cuerpo */

/* Kerning positivo (más aire) */
.cls-10, .cls-20, .cls-31, .cls-32, .cls-33, .cls-34, .cls-35, .cls-37, .cls-38 {
  letter-spacing: .02em;
}

/* Kerning negativo (más apretado) */
.cls-21, .cls-22, .cls-23, .cls-27, .cls-28 {
  letter-spacing: -.02em;
}

/* Kerning Neutro (0em) - Puedes borrar estos si quieres limpiar más */
.cls-16, .cls-17, .cls-19, .cls-24, .cls-25, .cls-26, .cls-29, .cls-39, .cls-40, .cls-43, .cls-44, .cls-45, .cls-46 {
  letter-spacing: 0em;
}

/* --- 1. CONFIGURACIÓN BASE Y MOVIMIENTO --- */
g[id^="collectiv-brandguidelines_"] {
    cursor: pointer;
    pointer-events: all;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- 2. ESTADO REPOSO (Gris por defecto) --- */
#Art g[id^="collectiv-brandguidelines_"] path,
#Art g[id^="collectiv-brandguidelines_"] rect,
#Art g[id^="collectiv-brandguidelines_"] circle,
#Art g[id^="collectiv-brandguidelines_"] polygon {
    fill: #e5e5e5 !important;
    transition: fill 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#Art g[id^="collectiv-brandguidelines_"] text,
#Art g[id^="collectiv-brandguidelines_"] tspan {
    opacity: 0;
    transition: opacity 0.8s ease;
}

#Art g[id^="collectiv-brandguidelines_"] path.cls-8 {
    stroke-width: 2.97px !important;
    transition: stroke-width 0.6s ease, fill 0.8s ease;
}

/* --- 3. ESTADOS DE LEVANTE (Alturas) --- */
/* Solo se levanta si NO está en gris forzado */
g[id^="collectiv-brandguidelines_"]:not(.force-grey):hover { transform: translateY(-12px); z-index: 100; }
g[id^="collectiv-brandguidelines_"].is-active { transform: translateY(-8px); }
g[id^="collectiv-brandguidelines_"].is-active:hover { transform: translateY(-12px); }
g[id^="collectiv-brandguidelines_"]:active { transform: translateY(-4px) scale(0.97); transition: transform 0.1s ease; }

/* --- 4. REVELADO DE COLOR (Hover y Activo) --- */
/* El texto solo aparece si NO está bloqueado en gris */
#Art g[id^="collectiv-brandguidelines_"]:not(.force-grey):hover text,
#Art g[id^="collectiv-brandguidelines_"]:not(.force-grey).is-active text,
#Art g[id^="collectiv-brandguidelines_"]:not(.force-grey):hover tspan,
#Art g[id^="collectiv-brandguidelines_"]:not(.force-grey).is-active tspan {
    opacity: 1;
    transition: opacity 0.6s ease;
}

/* Aplicación de colores originales condicionados al estado manual de apagado */

/* AZULES */
#Art g[id^="collectiv-brandguidelines_"]:not(.force-grey):hover .cls-14, #Art g[id^="collectiv-brandguidelines_"]:not(.force-grey).is-active .cls-14,
#Art g[id^="collectiv-brandguidelines_"]:not(.force-grey):hover .cls-12, #Art g[id^="collectiv-brandguidelines_"]:not(.force-grey).is-active .cls-12,
#Art g[id^="collectiv-brandguidelines_"]:not(.force-grey):hover .cls-18, #Art g[id^="collectiv-brandguidelines_"]:not(.force-grey).is-active .cls-18 { fill: #007fff !important; }

/* NARANJAS */
#Art g[id^="collectiv-brandguidelines_"]:not(.force-grey):hover .cls-6, #Art g[id^="collectiv-brandguidelines_"]:not(.force-grey).is-active .cls-6,
#Art g[id^="collectiv-brandguidelines_"]:not(.force-grey):hover .cls-11, #Art g[id^="collectiv-brandguidelines_"]:not(.force-grey).is-active .cls-11,
#Art g[id^="collectiv-brandguidelines_"]:not(.force-grey):hover .cls-13, #Art g[id^="collectiv-brandguidelines_"]:not(.force-grey).is-active .cls-13 { fill: #ff6f2a !important; }

/* AMARILLOS */
#Art g[id^="collectiv-brandguidelines_"]:not(.force-grey):hover .cls-30, #Art g[id^="collectiv-brandguidelines_"]:not(.force-grey).is-active .cls-30 { fill: #ffc200 !important; }

/* PEACH */
#Art g[id^="collectiv-brandguidelines_"]:not(.force-grey):hover .cls-15, #Art g[id^="collectiv-brandguidelines_"]:not(.force-grey).is-active .cls-15 { fill: #ff955d !important; }

/* BLANCOS */
#Art g[id^="collectiv-brandguidelines_"]:not(.force-grey):hover .cls-9, #Art g[id^="collectiv-brandguidelines_"]:not(.force-grey).is-active .cls-9,
#Art g[id^="collectiv-brandguidelines_"]:not(.force-grey):hover .cls-2, #Art g[id^="collectiv-brandguidelines_"]:not(.force-grey).is-active .cls-2,
#Art g[id^="collectiv-brandguidelines_"]:not(.force-grey):hover .cls-8, #Art g[id^="collectiv-brandguidelines_"]:not(.force-grey).is-active .cls-8 { 
    fill: #ffffff !important;
    stroke-width: 0.97px !important;
}

/* --- 5. BLOQUEADOR DE HOVER (Desactivación Manual) --- */
#Art g[id^="collectiv-brandguidelines_"].force-grey * {
    fill: #e5e5e5 !important;
    opacity: 0 !important; 
    transition: all 0.3s ease;
}

#Art g[id^="collectiv-brandguidelines_"].force-grey path,
#Art g[id^="collectiv-brandguidelines_"].force-grey rect {
    opacity: 1 !important; 
    fill: #e5e5e5 !important;
}

#Art g[id^="collectiv-brandguidelines_"].force-grey {
    transform: translateY(0) !important;
}

/* ==========================================================================
   PROYECTO: LOVE BOOK (ENTRADA ZOOM + SLIDE SIMULTÁNEO)
   ========================================================================== */

.lovebook-split-container, .cbsw-split-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important; /* Cambiamos de center a flex-start para respetar los márgenes superiores */
    justify-content: space-between !important;
    min-height: 100dvh !important; 
    height: 100dvh !important;
    min-height: 100vh !important; 
    height: 100vh !important;
    padding-top: 0 !important; 
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important; /* Cambiamos a visible para que el contenido flote sin romper el contenedor */
    position: relaative;
}


.lovebook-text-column , .cbsw-text-column {
    width: 50% !important;
    margin: 0 !important;
    z-index: 999;
}

.fullimage-cover-section {
  position: absolute !important;
    top: 0;
    width: 100%;
    height: 100dvh !important;
    z-index: 1; /* Se queda en el fondo */
    overflow: hidden;
}

/* ==========================================================================
   LOVE BOOK: VIDEO - ENTRADA PAUSADA POR DIFERENCIA DE TIEMPOS
   ========================================================================== */

/* 1. Estado Inicial: Oculto y empujado a la derecha */
.lovebook-covervideo-section,  .cbsw-covervideo-section {
  position: absolute !important;
  top: 0 !important;
  
  /* --- Ajuste de encuadre base (Pantallas normales) --- */
  
  /* --- Estado visual oculto --- */
  opacity: 1 !important;
  
}

.lovebook-covervideo-section .wp-block-video,  .cbsw-covervideo-section .wp-block-video {
  opacity: 0 !important;
}
/* 2. El Estado Activo: Cuando el JS inyecta '.lovebook-run' */
.lovebook-run .wp-block-video {
  opacity: 1 !important;
  transform: translate3d(-2.5vh, 0, 0) scale(1.05) !important;

  /* 🔥 LA SOLUCIÓN DEFINITIVA PARA LA OPACIDAD:
     Metemos ambas propiedades en la misma línea del estado activo separadas por una COMA ( , ).
     - El transform tardará 4.5s en deslizarse con su curva suave.
     - La opacidad tardará 5.5s en completarse (¡aquí modificas la velocidad!).
     
     * Si quieres que la opacidad aparezca MÁS LENTO: Sube el 5.5s a 7s o 8s.
     * Si quieres que aparezca MÁS RÁPIDO: Baja el 5.5s a 2s o 1.5s. */
  transition: transform 4.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s ease-in-out !important;
}
.cbsw-run .wp-block-video {
  opacity: 1 !important;
  transition: transform 4.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s ease-in-out !important;
}

/* ==========================================================================
   PROYECTO: LOVE BOOK (IMAGEN FULL HEIGHT + TEXTO SUPERPUESTO)
   ========================================================================== */

/* 1. El contenedor principal */
.lovebook-internal-section {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important; /* Volvemos al alto exacto de pantalla, sin scroll extra */
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important; /* 🔥 VITAL: Ancla el texto absoluto a este contenedor */
}

/* 2. El bloque de la imagen (ahora actúa como fondo de la sección) */
.lovebook-internal-section .wp-block-image {
    width: 85% !important;
    height: 100vh !important; 
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 1 !important; /* Nivel base */
    top: -20px !important;
}

.lovebook-internal-section .wp-block-image img {
    width: auto !important;
    height: 90vh !important; 
    max-width: 100% !important;
    object-fit: contain !important;
}

.lovebook-internal-section .third img {
    width: auto !important;
    height: 90vh !important; 
    max-width: 100% !important;
    object-fit: contain !important;
    scale: 1.2 !important;
    transform: translate(0px, 10px);
}

.lovebook-internal-section .final  {
    scale: 1.15 !important;
    transform: translate(0px, 50px) !important;
}

@media (max-width: 1366px) {
  .lovebook-internal-section .final  {
    scale: 1.15 !important;
    transform: translate(-50px, 50px) !important;
}
.kb-video-wrapper {
  transform: scale(1);
}
}

/* 3. El texto (Flotando encima de la imagen) */
.lovebook-internal-text {
    position: absolute !important; 
    bottom: 5% !important; 
    left: 50px !important; 
    z-index: 2 !important; 
    font-size: 1.02rem !important;
    text-align: left !important;
    margin: 0 !important; 
    line-height: 1.4 !important;
    padding-left: var(--section-padding) !important; 
    padding-right: var(--section-padding) !important; 
    
    /* 🔥 CORRECCIÓN: Eliminamos font-size y line-height. 
       Ahora usará el tamaño oficial de tu tema automáticamente. */
}
.large-text {
    max-width: 470px !important;
}
.short-text {
    max-width: 390px !important;
}


/* --- ESCALADO PROPORCIONAL (> 1440px) --- */
@media (min-width: 1441px) {
    .short-text {
        max-width: 27vw !important;
        bottom: 10% !important; 
        /* 🔥 CORRECCIÓN: Eliminamos el font-size forzado en vw también */
    }
    .lovebook-internal-section .wp-block-image {
        top: -30px !important;
    }
    
    .large-text {
        max-width: 33vw !important;
        bottom: 10% !important; 
        /* 🔥 CORRECCIÓN: Eliminamos el font-size forzado en vw también */
    }
	.collectiv-trucks-stage.full-bleed--vh1 {
    	width: calc(100% + (var(--section-padding) * 14)) !important;
    	max-width: none !important;
    	margin-left: calc(-1 * var(--section-padding)) !important;
    	margin-right: calc(-1 * var(--section-padding)) !important;
  }
}

/* --- RESPONSIVE MÓVIL (< 768px) --- */
@media (max-width: 768px) {
    .lovebook-internal-section .wp-block-image {
        padding-top: 80px !important;
    }
    .lovebook-internal-section .wp-block-image img {
        height: 60vh !important;
    }
    .lovebook-internal-text {
        bottom: 5% !important; /* En móvil lo bajamos un poco más */
    }
}
/* ==========================================================================
   CLASES GLOBALES: TEXTOS SUPERPUESTOS EN IMÁGENES
   ========================================================================== */

/* 1. CLASE BASE: Estructura, anchos y superposición (No define arriba o abajo) */
.over-full-image {
    position: absolute !important; 
    z-index: 2 !important; 
    text-align: left !important;
    margin: 0 !important; 
    line-height: 1.4 !important;
    font-size: 1.02rem !important;
    
    /* Inyectamos tu padding maestro para alineación perfecta */
    padding-left: var(--section-padding) !important; 
    padding-right: var(--section-padding) !important;
    
    max-width: 415px !important; 
}

/* 2. CLASE MODIFICADORA: Posición Superior Izquierda */
.over-full-image.top {
    top: 10% !important; /* Distancia desde el techo de la sección */
    left: 50px !important; /* Mantenemos tus 50px de ajuste fino a la izquierda */
}

.over-full-image.bottom-text {
    bottom: 20vh !important;
    right: 10vh !important;
    width: 375px !important;
}

/* --- ESCALADO PROPORCIONAL (> 1440px) --- */
@media (min-width: 1441px) {
    .over-full-image {
        max-width: 27vw !important;
    }
    .over-full-image.top {
        top: 10% !important; /* Un poco más de aire arriba en monitores gigantes */
    }
}

/* --- RESPONSIVE MÓVIL (< 768px) --- */
@media (max-width: 768px) {
    .over-full-image.top {
        top: 12% !important; /* Más pegado arriba en celulares */
        /* Reseteamos el left manual, el padding maestro se encarga de los márgenes en móvil */
        left: 0 !important; 
    }
}

/* ==========================================================================
   CLASE MAESTRA: IMÁN PARA SCROLL (CONTROL MANUAL)
   ========================================================================== */
.snap-section {
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    
    /* Evita que los márgenes de Spectra rompan el imán */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   SCROLLBAR PERSONALIZADA (ESTILO EDITORIAL)
   ========================================================================== */

/* Oculta la barra pero mantiene la funcionalidad */
::-webkit-scrollbar {
    width: 0px; 
    background: transparent; 
}

/* ==========================================================================
   COLLECTIV: PURE GRID DE PLATOS (FONDO #f1f1f1)
   ========================================================================== */

.collectiv-catalog-stage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f1f1f1 !important; /* El fondo gris claro de la sección */
  padding: 0 var(--section-padding) !important;
}

/* --- Malla de Galería --- */
.collectiv-catalog-gallery {
  width: 100% !important;
  height: 100vh !important;
  display: grid !important;
  
  /* Dividimos en 2 columnas (40% platos chicos, 60% plato grande) y 2 filas simétricas */
  grid-template-columns: 40% 60% !important;
  grid-template-rows: 50% 50% !important;
  grid-template-areas: 
    "catalog-top catalog-featured"
    "catalog-bottom catalog-featured" !important;
      
  align-items: center !important;
  justify-items: center !important;
}

/* Contenedor base para cada plato */
.collectiv-item {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.collectiv-item img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important; /* Mantiene la redondez del plato intacta */
  display: block !important;
}

/* --- Distribución y Espaciados de las Áreas en el Grid --- */
.collectiv-item.item-top { 
  grid-area: catalog-top !important; 
  padding-bottom: 20px !important; /* Espacio sutil entre los platos izquierdos */
  left: 5vh !important;
  width: 45vh !important;
  top: 5vh !important;
}

.collectiv-item.item-bottom { 
  grid-area: catalog-bottom !important; 
  bottom: 3vh !important;
  left: 6vh !important;
}

.collectiv-item.item-featured { 
  grid-area: catalog-featured !important;
  justify-content: center !important;
  right: -30vh !important;
  width: 120vh !important;
}

/* Efecto de escala editorial para el plato grande destacado */
.collectiv-item.item-featured img {
  max-height: 85vh !important;
  transform: scale(1.1) !important; 
}


@media (min-width: 1441px) {
  .collectiv-item.item-top { 
  left: 10vh !important;
}

    .collectiv-item.item-bottom { 
  bottom: 3vh !important;
  left: 10vh !important;
}

.collectiv-item.item-featured { 
  right: -30vh !important;
}

}

/* ==========================================
   RESPONSIVE MÓVIL (< 768px)
   ========================================= */
@media (max-width: 768px) {
  .collectiv-catalog-stage {
    height: auto !important;
    padding: 40px var(--section-padding) !important;
  }

  .collectiv-catalog-gallery {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    gap: 40px !important; /* Separación vertical limpia en celulares */
  }

  .collectiv-item.item-featured img {
    transform: none !important;
    max-height: 50vh !important;
  }
}

/* ==========================================================================
   TEXTO FLOTANTE EN EL ESCENARIO DE CAMIONES
   ========================================================================== */

/* Aseguramos que el contenedor de los camiones actúe como base absoluta */
.collectiv-trucks-stage {
  position: relative !important;
}

/* Estilos específicos para el texto en esta sección oscura */
.collectiv-trucks-stage .truck-scenario-text {
  position: absolute !important;
  top: 20vh !important;
  left: 10vh !important; 
  width: 450px !important;
  max-width: 715px !important;
  z-index: 50 !important; /* Por encima de las imágenes de los camiones */
  pointer-events: none; /* No interrumpe los gestos del mouse o scroll */
}


/* --- ESCALADO PANTALLAS GRANDES (> 1440px) --- */
@media (max-width: 1366px) and (hover: none) {
  .collectiv-trucks-stage .truck-scenario-text {
    top: 120px !important;
    left: 10vh !important;
    padding: 0 !important;
  }
}

/* --- RESPONSIVE MÓVIL (< 768px) --- */
@media (max-width: 768px) {
  .collectiv-trucks-stage .truck-scenario-text {
    position: absolute !important;
    top: 150px !important;
    left: var(--section-padding) !important;
    width: calc(100% - (var(--section-padding) * 2)) !important;
    max-width: 100% !important;
  }
  
}

.lovething-covervideo-section {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    padding: 0 !important;
}

/* 1. El envoltorio maestro (Tu código exacto que sí funcionaba) */
.zona-sticky-wrapper {
    display: flex; 
    align-items: flex-start; /* CRÍTICO para que funcione el sticky en flexbox */
    position: relative;
    padding: 0 !important;
}

/* 2. La columna de los videos (El Fondo) */
.columna-multimedia {
    /* Sube al 100% para que los videos ocupen todo el ancho de la pantalla */
    gap: 0 !important;
    padding: 0 !important;
    width: 100%;
}
.columna-multimedia .full-bleed--vh-internal {
    margin-left: calc(-1 * var(--section-padding)) !important;
    margin-right: calc(-1 * var(--section-padding)) !important;
    width: calc(100% + (var(--section-padding) * 3)) !important;
    max-width: none !important;
    padding: 0 !important;
    min-height: 100vh !important;
    height: 100vh !important;
}

/* 3. 🔥 LA JAULA STICKY (La capa de cristal superior) */
.carril-sticky {
    width: 100%; 
    
    /* 🔥 EL TRUCO DE SUPERPOSICIÓN: 
       Obliga a la jaula a retroceder hacia la izquierda y montarse 
       exactamente sobre la columna multimedia. */
    margin-left: -100%; 
    
    /* Lo anclamos al tope de la pantalla */
    position: -webkit-sticky;
    position: sticky !important;
    top: 0 !important; 
    
    /* Al medir exactamente el alto visual de la pantalla (100vh), 
       los cálculos matemáticos de tu JS serán 100% exactos con el sidebar */
    height: 100vh !important; 
    
    /* Evita que el margin-top que inyecta el JS se "desborde" y empuje al padre */
    overflow: hidden !important; 
    
    /* La mandamos al frente de los videos */
    z-index: 10 !important;
    
    /* TRUCO PRO: Permite que los clics atraviesen esta jaula transparente 
       para no bloquear la interacción con la página */
    pointer-events: none; 
}

/* 4. Tu texto principal (El JS actúa aquí) */
.texto-principal {
    /* Se deja mover por el script dentro de su carril */
    position: relative;
    width: 100%;
    
    /* Reactiva los clics en tu texto por si tienes botones o enlaces */
    pointer-events: auto; 
    z-index: 99 !important;
}

/* Obliga a la animación AOS a devolver el 100% de opacidad al terminar */
.texto-principal [data-aos].aos-animate {
    opacity: 1 !important;
}

/* ==========================================================================
   LOVEBOOK: PIN & SLIDE (CORRECCIÓN SPECTRA)
   ========================================================================== */
/* 1. El Wrapper y el div intermedio de Spectra */
.horizontal-wrapper,
.horizontal-wrapper > .uagb-container-inner-blocks-wrap {
    
    width: 100% !important;
    height: 100vh !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* 2. La Pista: ¡Bloqueamos la caída con nowrap! */
.lovething-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* 🔥 ESTA ES LA CLAVE PARA ACTIVAR EL SCROLL HORIZONTAL */
    width: 100% !important;
    height: 100vh !important;
    
    /* Habilitamos el scroll nativo */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    
    /* Limpieza visual */
    scrollbar-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ocultar scrollbar en Safari/Chrome */
.lovething-track::-webkit-scrollbar {
    display: none !important;
}

/* 3. Tus Elementos Internos */
.lovething-item{
    width: 100% !important; /* Ancho perfecto sin desborde */
    height: 100vh !important;
    flex: 0 0 100% !important; /* Ancho perfecto sin desborde */
    scroll-snap-align: start !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lovething-track {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
}

.lovething-track::-webkit-scrollbar {
    display: none !important;
}

.lovething-item {
    scroll-snap-align: start !important;
}

/* ==========================================================================
   PROYECTO: HANDPICKED (IMAGEN FULL HEIGHT + TEXTO SUPERPUESTO)
   ========================================================================== */

/* 1. EL CONTENEDOR PADRE (Copiado exacto de tu clase exitosa .full-bleed--vh) */
.handpicked-internal-section {
    height: 100vh !important;  
    height: 100dvh !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: block !important;
    position: relative !important;
    padding: 0 !important;
}

/* 2. EL WRAPPER <figure> (Copiado exacto de tu <picture> exitoso) */

.handpicked-internal-section .wp-block-image {
    display: block !important;
    width: 100% !important;
    height: 75% !important; 
    margin: 0 !important;
    padding: 0 7.5% !important; 
    box-sizing: border-box !important;
    position: absolute !important;
    top: auto !important;
    bottom: 10% !important; /* La caja de la foto inicia justo por encima de tu texto */
    left: 0 !important;
    z-index: 1 !important;
}

@media (max-width: 1366px) and (hover: none) {
    .handpicked-internal-section .wp-block-image {
        bottom: 20% !important; 
    }
}

/* 3. LA IMAGEN <img> */
.handpicked-internal-section .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    object-position: center bottom !important; 
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. El texto (Flotando encima de la imagen) */
.handpicked-internal-text {
    position: absolute !important; 
    bottom: 10% !important; 
    left: 90px !important; 
    z-index: 2 !important; 
    text-align: left !important;
    margin: 0 !important; 
    padding-left: var(--section-padding) !important; 
    padding-right: var(--section-padding) !important; 
  
}

.handpicked-large-text {
    max-width: 390px !important;
    font-size: 1.02rem !important;
    line-height: 1.4 !important;
}
.short-text {
    max-width: 390px !important;
}
.short-text1 {
	max-width: 40vw !important;
    left: 28% !important;
    bottom: 10vh !important;
}
.short-text2 {
	max-width: 50vw !important;
  left: 25% !important;
  bottom: 10vh !important;
}

/* --- ESCALADO PROPORCIONAL (> 1440px) --- */
@media (min-width: 1441px) {
    .short-text {
        max-width: 40vw !important;
        bottom: 10% !important; 
        /* 🔥 CORRECCIÓN: Eliminamos el font-size forzado en vw también */
    }
    .handpicked-internal-section .wp-block-image {
        top: 60px !important;
    }
    .handpicked-covervideo-section  {
        left: calc(-1.2 * var(--section-padding)) !important;
    }
    .handpicked-large-text {
        max-width: 28vw !important;
        bottom: 10% !important; 
        /* 🔥 CORRECCIÓN: Eliminamos el font-size forzado en vw también */
    }
	.collectiv-trucks-stage.full-bleed--vh1 {
    	width: calc(100% + (var(--section-padding) * 14)) !important;
    	max-width: none !important;
    	margin-left: calc(-1 * var(--section-padding)) !important;
    	margin-right: calc(-1 * var(--section-padding)) !important;
  }
}

/* --- RESPONSIVE MÓVIL (< 768px) --- */
@media (max-width: 768px) {
    .handpicked-internal-section .wp-block-image {
        padding-top: 80px !important;
    }
    .handpicked-internal-section .wp-block-image img {
        height: 60vh !important;
    }
    .handpicked-internal-text {
        bottom: 5% !important; /* En móvil lo bajamos un poco más */
    }
}

.handpicked-internal-section2 .wp-block-image img {
    width: auto !important;
    height: 100vh !important; 
    max-width: 100% !important;
}

.handpicked-internal-section2 .wp-block-image {
    width: 100% !important;
    bottom: 0 !important;
    top: 0 !important;
    position: absolute;
    padding: 0 !important;
    margin: 0 !important;
}

.handpicked-internal-text2 {
    position: absolute !important;
    top: 8% !important;
    z-index: 2 !important;
    text-align: left !important;
    margin: 0 !important;
    padding-left: var(--section-padding) !important;
    padding-right: var(--section-padding) !important;
    width: 95vh !important;
    font-size: 1.02rem !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   DISEÑO DE COLUMNAS INTERNAS (LOVEBOOK)
   ========================================================================== */

/* 1. Nos aseguramos de que el lovething-item alinee todo en fila horizontal */
.lovething-item {
    display: flex !important;
    flex-direction: row !important;
    padding: 5% !important;
    margin: 0 !important;
}

/* Puente antibombas por si Spectra inyecta su div interno */
.lovething-item > .uagb-container-inner-blocks-wrap {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Reglas generales para las columnas */
.col-text, .col-image {
    height: auto !important;
    margin: 3% !important;
    /* Cero gaps, cero márgenes externos */
}

/* 3. Layout 50% - 50% (Items 1, 2 y 3) */
.layout-half .col-text,
.layout-half .col-image {
    width: 50% !important;
}

/* 4. Layout 25% - 75% (Item 4) */
.layout-quarter .col-text {
    width: 35% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}
.layout-quarter .col-image {
    width: 65% !important;
    margin-left: 0 !important;
}

/* 5. Comportamiento de la imagen (Pantalla completa en su columna) */
.col-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Clave: Evita que la foto se deforme, llenando todo el cuadro */
    display: block;
}

/* ==========================================================================
   UTILIDADES PARA MOVER EL TEXTO
   ========================================================================== */

/* Preparamos la columna de texto para mover su contenido */
.col-text {
    display: flex !important;
    flex-direction: column !important;
    
    /* Un pequeño margen interno para que el texto no pegue contra los bordes de la pantalla. 
       Ajusta este 5% o ponlo en px (ej. 40px) según tu diseño */
    padding: 5% !important; 
}

/* Simplemente cambia la clase en Spectra para mover el párrafo */
.text-top    { justify-content: flex-start !important; }
.text-center { justify-content: center !important; }
.text-bottom { top: 20vh; position: relative; }

.columna-multimedia {
    opacity: 0;
    transform: translateX(150px);
    
    /* Ejecuta el motor: 1.2 segundos de duración con frenado suave */
    animation: slideInFromRight 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    
    /* Un ligero retraso para que la página respire antes de mostrar la imagen */
    animation-delay: 1.2s;
}
/* El motor del movimiento */
@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(150px);
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* Aterriza en su posición original de la cuadrícula */
    }
}

.project-credits-container {
  position: absolute !important;
  bottom: 0 !important;
  background-color: #ffffff;
  min-width: 100% !important;
  left: 0 !important;
  text-align: center !important;
  z-index: 999 !important;
}

.project-credits-container .project-credits-inner .credits-text p {
  margin: 10px 0 !important;
  color: #b3b3b3 !important;
  font-size: 0.7rem !important;
}

.project-credits-container .project-credits-inner .credits-text p strong{
  color: #4d4d4d !important;
  font-weight: 300 !important;
}


@keyframes scale-up-bottom {
			
		0% {
			transform:scale(.2);
			transform-origin:50% 100%;
		}
		100% {
			transform:scale(1);
			transform-origin:50% 100%;
		}
	}

  /* ========================================== */
/* 1. LA VENTANA DE LA PANTALLA (Viewport Blindado) */
/* ========================================== */
.book-viewport {
    /* 🔥 ROMPE EL CONTENEDOR HORIZONTALMENTE 🔥 */
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    /* 🔥 ANULA EL PADDING SUPERIOR DEL PADRE (.section) 🔥 */
     
    
    height: 100vh !important; 
    overflow: hidden !important; 
    padding: 0 !important;
    
    /* Centra el escenario matemáticamente */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================== */
/* 2. EL ESCENARIO (El Canvas Proporcional) */
/* ========================================== */
.book-stage {
    position: relative !important;
    
    /* Mantiene la proporción de tu foto */
    aspect-ratio: 1774 / 1093 !important; 
    
    /* 🔥 EL NUEVO CONTROL DE TAMAÑO 🔥 */
    width: 81vw !important; 
    max-width: 1400px !important; /* Tope de seguridad para pantallas de 27 pulgadas o más */
    
    /* ⚠️ ELIMINAMOS min-width: 100% y min-height: 100vh ⚠️
       Ahora la altura se calculará sola en base al 81vw y al aspect-ratio */
    max-height: calc(100vh - var(--internal-footer-height)) !important; 
    
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    margin-bottom: var(--internal-footer-height) !important;
    perspective: 3000px !important;
    margin-top: 0;
    padding: 0 !important;
    height: calc(100vh - var(--internal-footer-height)) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: auto !important;
}
/* ========================================== */
/* 3. LA SECCIÓN DEL LIBRO */
/* ========================================== */
.book-section {
    position: absolute !important; 
    top: 0 !important; 
    left: 0 !important;
    width: 100% !important; 
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    perspective: 3000px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   AJUSTE EXCLUSIVO TABLET / IPAD (CON GUÍAS Y ESCALA TIPOGRÁFICA)
   ========================================================================== */
@media (max-width: 1366px) and (hover: none) {
    
    /* 1. Cambiamos la imagen de fondo al libro del iPad */
    .book-stage {
        background-image: url('https://www.kburbano.com/wp-content/uploads/2026/09/handpicked-openbook-animation2.webp') !important;
    }

    /* 2. Contenedor Maestro (GUÍA ROJA) */
    .book-spread {
        transform: translateY(1.5%) translateX(0.6%) rotateX(15deg) scale(0.95) !important;
        width: 85% !important;
        height: 68% !important;

    }

    /* 7. RESTRICCIÓN DE LA IMAGEN EN IPAD (GUÍA AMARILLA) */
    .image-placeholder {
        max-height: 240px !important;       
        object-fit: contain !important;    

    }

    /* 8. 🔥 ESCALA TIPOGRÁFICA PROPORCIONAL PARA IPAD */
    .book-spread p, 
    .text-content p, 
    .right-text-column p {
        font-size: 0.38rem !important;     /* Bajamos ligeramente el tamaño del cuerpo de texto */
        line-height: 1.4 !important;
    }

    .vertical-title {
        font-size: 1.6rem !important;      /* Ajustamos también el título vertical izquierdo */
    }

    .site-copyright-fixed {
    position: fixed !important;
    bottom: 15px !important;
    left: 20px !important;
    z-index: 9999 !important;
    transform: none !important;
  }
}

@media (min-width: 1441px) {
    
    /* 1. Cambiamos la imagen de fondo al libro del iPad */
    .book-stage {
        background-image: url('https://www.kburbano.com/wp-content/uploads/2026/09/handpicked-openbook-animation2.webp') !important;
    }

    /* 2. Contenedor Maestro (GUÍA ROJA) */
    .book-spread {
        transform: translateY(5.5%) translateX(0.6%) rotateX(10deg) scale(0.78) !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* 7. RESTRICCIÓN DE LA IMAGEN EN IPAD (GUÍA AMARILLA) */
    .image-placeholder {
        max-height: 240px !important;       
        object-fit: contain !important; 
    }

    .right-text-column {
      transform: translateX(-20px)
    }

    /* 8. 🔥 ESCALA TIPOGRÁFICA PROPORCIONAL PARA IPAD */
    .book-spread p, 
    .text-content p, 
    .right-text-column p {
        font-size: 0.6rem !important;
        line-height: 1.4 !important;
    }

    .vertical-title {
        font-size: 2.4rem !important;      /* Ajustamos también el título vertical izquierdo */
    }
}

/* ========================================== */
/* 4. TU SPREAD ANIMADO */
/* ========================================== */
.book-spread {
display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 81%; /* Tu porcentaje final aquí */
    height: 75%; /* Tu porcentaje final aquí */
    gap: 0 !important;
    
    /* 🔥 Agregamos scale(1) al final de la cadena base 🔥 */
    transform: translateY(-12%) translateX(2.5%) rotateX(15deg) scale(0.93);
    
    /* Le decimos que cualquier cambio de tamaño se haga desde el centro absoluto */
    transform-origin: center center !important; 
    
    position: relative !important;
    margin: 0 !important;
    padding: 2% !important; /* Usa % para el padding interno también, evita vw/vh */
}

/* ========================================== */
/* 5. LAS PÁGINAS INDIVIDUALES */
/* ========================================== */
.page-left-content {
    display: block !important;
    width: 30.5% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 18px 4.5% 0 5% !important;
}

.page-right-content {
    width: 66% !important; 
    position: relative !important;
    display: flex !important;
    gap: 20px !important;
    margin: 0 !important;
}

/* ========================================== */
/* 6. TIPOGRAFÍA (Izquierda) */
/* ========================================== */
.vertical-title {
    float: left !important;
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    margin: 0 5px 0 0 !important;
color: #8b3a3a;
    font-size: 1.9rem;
    line-height: 0.7;
    shape-outside: margin-box !important;
    font-family: mrs-eaves, serif !important;
/* ========================================== */
/* 6. TIPOGRAFÍA (Izquierda) */
/* ========================================== */

    font-weight: 400;
    font-style: italic;
}

.title-dates {
    font-size: 0.57em;
    font-weight: 400;
    opacity: 0.85; 
}

.text-content {
    padding-top: 38px !important;
}

.text-content p {
    font-size: 0.45rem;
    line-height: 1.5;
    margin-bottom: 0 !important;
    text-align: left !important;
    color: inherit !important;
}

/* ========================================== */
/* 7. NAVEGACIÓN Y BOTONES RADAR */
/* ========================================== */
.author-nav {
    position: absolute !important; 
    left: -40px !important;      
    top: 0 !important;           
    height: 100% !important;     
    z-index: 99 !important;
    margin: 0 !important;
}

.btn-autor {
    position: absolute !important; 
    width: 14px !important;      
    height: 14px !important;     
    border-radius: 50% !important;
    cursor: pointer !important;
    padding: 0 !important;
    opacity: 0.2; /* GSAP necesita controlar la opacidad, si ponemos !important aquí se rompe la animación */
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.top { top: 80px !important; }
.middle { top: 215px !important; }
.bottom { top: 345px !important; }

.btn-autor:hover {
    opacity: 0.8; 
    transform: scale(1.2) !important;
}

.btn-autor.active {
    opacity: 1;
    transform: scale(1.3) !important;
    border: 0px solid #000000 !important;
}

.btn-autor.active::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    background-color: inherit !important; 
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: -1 !important;
    animation: radarRipple 1.5s infinite ease-out !important; 
}

@keyframes radarRipple {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* ========================================== */
/* 8. PÁGINA DERECHA (Texto e Imagen) */
/* ========================================== */
.right-text-column {
    width: 25% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 15px 0 0 !important;
}

.right-text-column p {
    font-size: 0.45rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    color: #8b3a3a; 
    text-align: right !important;
    font-family: mrs-eaves, serif !important;
}

.right-image-column {
    flex: 1 !important; 
    padding: 57px 0 0 !important; 
    margin: 0 !important;
}

.image-placeholder {
width: 95% !important; /* Mantiene el tamaño que definiste */
    height: auto !important; 
    max-height: none !important;
    display: block !important; 
    object-fit: cover !important; 
   
    /* 🔥 EL AJUSTE CLAVE 🔥 */
    margin: 0 auto !important; /* El 'auto' a los lados centra la imagen matemáticamente */
    
    border-radius: 0 !important;
}



/* =========================================
   ESTILOS AISLADOS POP-UP DE CV (CLASES NUEVAS)
   ========================================= */

/* Fondo oscuro y centrado */
.kb-popup-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.kb-popup-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Tarjeta central con Grid de Dos Filas */
.kb-popup-card {
    position: relative;
    background-color: #ffea00; /* Amarillo exacto de referencia */
    padding: 95px 25px 45px 25px;
    max-width: 270px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "title text"
        "form  form";
    gap: 35px 25px;
    align-items: start;
}

@media(min-width: 1441px) {
  .kb-desc-block p {
    margin: 0px 42px 5px 0;
  }
}


/* Botón de cierre (X) */
#cv-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: 1px solid #000;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 22px;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
    transition: all 0.2s ease;
}

#cv-close-btn:hover {
    background-color: #000;
    color: #ffea00;
}

/* 1. Título H1 (Orientación vertical exacta) */
.kb-popup-title {
    grid-area: title;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-family: inherit;
    font-size: 1.65rem;
    font-weight: 500;
    line-height: 1;
    text-transform: lowercase;
    margin: 0;
    white-space: nowrap;
    letter-spacing: -0.3px;
    color: #000;
}

/* 2. Bloque de párrafos descriptivos */
.kb-popup-text {
    font-family: inherit;
}

.kb-desc-block {
    grid-area: text;
    margin: 0;
}

.kb-desc-block p {
    margin: 0px 21px 5px 0;
    font-size: 1.15rem;
    line-height: 1.25;
    color: #000;
}

/* 3. Formulario (Abarca toda la fila inferior) */
.kb-popup-form {
    grid-area: form;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin-top: 5px;
}

.kb-input-container {
    background-color: #ffffff; /* Caja blanca para contraste del input */
    width: 100%;
    border: 0px solid #fff;
    padding: 0px 16px;
    box-sizing: border-box;
    margin-bottom: 15px;
}

.kb-input-field {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    font-size: 1rem;
    font-weight: normal;
    color: #000000;
    font-family: inherit;
    padding: 16px 0;
    box-sizing: border-box;
}

.kb-input-field::placeholder {
    color: #111111;
    opacity: 0.85;
}

/* 4. Botón inferior */
.kb-submit-btn {
    background-color: #ffffff00 !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
    padding: 5px 20px !important;
    font-size: 0.9rem;
    font-weight: normal !important;
    cursor: pointer !important;
    align-self: flex-end;
    transition: all 0.2s ease !important;
}

.kb-submit-btn:hover {
    background-color: #000000 !important;
    color: #ffea00 !important;
}

/* Bloque para mensajes de estado */
.kb-estado-block {
    grid-area: form;
    margin-top: 60px !important;
    font-size: 14px;
    color: #000;
}

/* Copyright fijo en la parte inferior izquierda */
.site-copyright-fixed {
  position: absolute;
  bottom: 10px !important;
  left: 30px !important;
  font-size: 0.65rem !important;
  color: #888888 !important;
  margin: 0 !important;
  font-family: inherit !important;
  letter-spacing: 0rem !important;
  line-height: 1.25 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  
  /* Se eliminan propiedades de aceleración GPU separada */
  transform: none !important;
  will-change: auto !important;
  z-index: 999;
}

a.copyright:link,
a.copyright:visited,
a.copyright:hover,
a.copyright:active {
  text-decoration: none;
  color: inherit;
}

@media(min-width: 1441px) {
  .site-copyright-fixed {
    left: 2.083vw;
  }
  .kb-popup-card {
    max-width: 350px !important;
  }
  .kb-desc-block p {
    font-size: 0.8rem;
  }
  .kb-popup-title {
    font-size: 1.15rem;
  }
  .kb-input-field {
    font-size: 0.7rem;
  }
  .kb-submit-btn {
    font-size: 0.6rem;
    align-self: flex-start;
  }
}

@media(min-width:1366px) {
  .site-copyright-fixed {
    line-height: 1.25;
  }
}

/* ==========================================================================
   RESET DE SCROLL MAGNÉTICO (SCROLL-SNAP) SOLO PARA LA PÁGINA DE PROYECTOS
   ========================================================================== */

body.post-type-archive-project .ui-scroll {
      display: none;
}

/* 1. Desactivar el scroll-snap globalmente solo cuando estemos en el archive de proyectos */
html.is-snapping:has(body.post-type-archive-project),
body.post-type-archive-project.is-snapping {
    scroll-snap-type: none !important;
}

/* 2. Forzar el scroll libre (auto) y deshabilitar restricciones en los contenedores de la página */
body.post-type-archive-project,
body.post-type-archive-project #page,
body.post-type-archive-project .site,
body.post-type-archive-project #main-content {
    scroll-snap-type: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* 3. Asegurar que las tarjetas o contenedores internos de proyectos no tengan puntos de anclaje forzados */
body.post-type-archive-project .archive-projects-wrapper,
body.post-type-archive-project .archive-projects-container,
body.post-type-archive-project .project-column,
body.post-type-archive-project .project-card {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}


/* ==========================================================================
   ESTILOS PARA LA PÁGINA DE ARCHIVO DE PROYECTOS (POST TYPE: PROJECT)
   ========================================================================== */

/* 1. Ajuste del contenedor principal: 
   Mantiene el espacio del menú lateral (var(--sidebar-width)) y respeta 
   el desplazamiento superior sin romper los top-links */
body.post-type-archive-project #main-content {
    margin-left: 65px !important;
    min-height: 100vh;
    min-height: 100svh;
    width: auto !important;
    max-width: none !important;
    background: var(--bg-primary);
    position: relative;
    z-index: 10;
    box-sizing: border-box;
}

@media (min-width: 1441px) {
  body.post-type-archive-project #main-content {
    margin-left: 4.366vw !important;
  }
}

/* 2. Contenedor general que envuelve y centra la grilla de proyectos */
body.post-type-archive-project .archive-projects-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 20% 40px;
    box-sizing: border-box;
    overflow: hidden;
    overscroll-behavior: contain;
}

/* 3. La grilla de las 3 columnas de proyectos */
body.post-type-archive-project .archive-projects-container {
    max-width: 1400px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    margin: 0 auto;
    display: flex;
    gap: 24px;
    height: calc(100vh - 0px);
    overflow: hidden;
    box-sizing: border-box;
}

/* --- Estructura de columnas y tarjetas internas --- */
.project-column {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
    flex: 1;
    background: #ffffff;
    padding: 80px 20px 0;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

.project-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.project-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Tipografías de los proyectos */
.project-title-1 {
    font-size: 0.7rem;
    font-weight: normal;
    color: #000000;
    margin: 5px 0 0 0;
    text-transform: lowercase;
}

.project-title-2 {
    font-size: 0.7rem;
    font-weight: normal;
    font-style: italic;
    color: #777777;
    margin: 0;
    text-transform: lowercase;
}

/* --- Responsive --- */
@media screen and (max-width: 1024px) {
    .archive-projects-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    body.post-type-archive-project #main-content {
        margin-left: 0 !important; /* En móviles suele ocultarse o apilarse el sidebar */
    }
    
    .archive-projects-container {
        grid-template-columns: 1fr;
    }
}

/* Fondo oscuro */
.project-zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    height: 100dvh; /* Alto dinámico exacto */
    background: rgba(255, 255, 255, 0.85); /* Mantenemos tu fondo blanco traslúcido */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* OCULTO POR DEFECTO */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    
    /* Manejo inteligente de la barra inferior y superior del iPad */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-sizing: border-box;
}

.project-zoom-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Contenedor adaptativo para la imagen */
.project-zoom-card {
    background: transparent;
    max-width: 85dvw;
    max-height: 85dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto; /* Fuerza el centrado geométrico estricto en Safari / iPadOS */
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-sizing: border-box;
}

.project-zoom-overlay.is-active .project-zoom-card {
    transform: scale(1);
}

/* Reglas inteligentes para la imagen dentro del zoom */
.project-zoom-card img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 85dvh; /* Sincronizado exactamente a 85dvh igual que el contenedor */
    object-fit: contain;
    display: block;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}


/* Layout general de la página de archivo */
.archive-projects-wrapper {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.archive-projects-container {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Columna individual con scroll oculto pero funcional */
.project-column {
  flex: 1;
  height: 100%;
  overflow-y: scroll;
  position: relative;
  
  /* Ocultar barra de scroll estándar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.project-column::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Asegurar espacio consistente entre tarjetas dentro de la columna */
.project-card {
  margin-bottom: 30px; /* Ajusta la distancia vertical entre tarjetas */
  will-change: transform;
}

.project-card img {
  display: block;
  width: 100%;
  height: auto;
}

.project-column {
  /* 1. Permitir scroll en la columna pero sin barras visibles */
    overflow-y: scroll !important;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    scroll-behavior: auto !important; 
    min-height: 0 !important;
    overscroll-behavior-y: none;
}

.section-on-top {
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  top: 0 !important;
}

/* Forzar que la primera sección NUNCA mida 0px durante la carga */
.section-on-top,
.collectiv-covervideo,
.lovebook-covervideo-section,
.cbsw-covervideo-section,
.fullimage-cover-section  {
    min-height: 100vh;
    min-height: 100dvh; /* Para Safari en iPadOS */
    width: 100%;
    position: relative;
}
.wp-timer-section {
    position: relative;
    width: 100%;
    height: 110vh;
    background-color: #d4d2d3;
    color: #e6e7e8;
    overflow: visible; 
}

.wp-timer-section .image-fade-container {
    position: absolute;
    inset: 0; /* Cubre todo el contenedor perfectamente */
    z-index: 1; 
    pointer-events: none;
}

.wp-timer-section .bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fade-img-1 {
    opacity: 1;
    z-index: 2; 
}

.fade-img-2 {
    opacity: 1;
    z-index: 1; 
}

.stopwatch-wrapper {
 	width: 100%;
 	text-align: center;
 	padding-top: 0px;
 	z-index: 2;
 	position: absolute;
  top: -22px;
  transform: scale(1.15);
}

.stopwatch {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	gap: 15px;
}

.time-block {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
}

.number {
    font-family: 'din-2014' !important;
    font-size: 11.5rem;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: #bfbebf;
    opacity: 0.8;
    letter-spacing: -0.5rem;
}

.separator {
    font-family: 'din-2014' !important;
    font-size: 11.5rem;
    font-weight: bold;
    line-height: 1;
    transform: translateY(-15px);
    color: #bfbebf;
    opacity: 0.8;
    top: 15px;
    position: relative;
}

.label {
    font-size: 1rem;
    font-weight: normal;
    color: #a9aaab;
    margin-top: 0px;
    padding: 6px 25px;
    border: 1px solid #a9aaab;
    position: absolute;
    top: 170px;
}

.label-1 {
     width: 180px;
}
.label-2 {
     width: 180px;
    margin-left: 32px;
}
.label-3 {
     width: 360px;
    margin-left: 10px;
}

.info-col {
    flex: 1;
    font-size: 1rem;
    letter-spacing: 0em;
}
.info-two .break-text {
  display: inline; 
}
@media(max-width: 1366px) {
  .info-two .break-text {
    display: block; 
  }
}

.info-bold {
    font-size: 2.5rem;
    font-weight: bold;
    letter-spacing: 0rem;
    margin-top: -35px;
    line-height: 0.8;
}

.timer-info-columns {
    position: absolute;
    top: 20vw;
    left: 4.5vw;
    right: 0;
    display: flex;
    justify-content: space-between;
    gap: 40vw;
    /* max-width: 75vw; */
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    box-sizing: border-box;
    color: #000;
    font-family: din-2014, sans-serif;
    z-index: 3;
    width: 78vw;
}

@media (min-width: 1441px) {
  
  .timer-info-columns {
    gap: 36vw;
  }

  .label {
    top: 11vw;
    font-size: 0.75rem;
  }

  .label-1 {
    width: 12vw;
    left: 11vw;
  }
  
  .label-2 {
    width: 12vw;
    margin-left: 32px;
  }
  
  .label-3 {
    width: 25vw;
    margin-left: 10px;
  }
  .timer-info-columns {
    top: 20vw;
    left: 4.5vw;
  }
  .info-bold {
    margin-top: -1.5vw;
    margin-left: 2.5vw;
  }
  body.love-book .over-full-image.bottom-text {
    bottom: 20vh !important;
    right: 10vh !important;
    width: 26vw !important;
}
}


@media(max-width: 1366px) {
  .handpicked-internal-text2 {
    top: 15% !important;
  }
  .timer-info-columns {
       left: 80px;
  }

  .timer-info-columns {
    gap: 25vw;
  }

  .wp-timer-section .image-fade-container {
    scale: 0.9;
    left: -100px;
  }

  .stopwatch-wrapper {
    top: -38px;
    transform: scale(0.85);
  }
  body.love-book .lovebook-covervideo-section figure {
    left: 80px;
  }

  .short-text1 {
    max-width: 55vw !important;
    left: 15% !important;
    bottom: 14vh !important;
  }

  .lovebook-internal-section .wp-block-image {
    width: 100% !important;
  }

  .short-text2 {
    max-width: 60vw !important;
    left: 15% !important;
    bottom: 15vh !important;
  }
  .wp-block-uagb-image__figure {
    left: 150px;
    bottom: 5vw;
  }
  .container-wave-collectiv {
    top:0;
  }
  .container-wave-collectiv .wp-block-uagb-image__figure {
    top: 0;
    left: 500px;
  }
  .collectiv-path-wrapper {
    top: -55px;
  }
  .collectiv-h2-right-bottom {
    right: -60% !important;
    bottom: -15% !important;
  }
  .collectiv-spectra-left1 {
    left: 5% !important;
    position: absolute !important;
    top: 15%;
  }

  .collectiv-h2-left-bottom {
    bottom: -25% !important;
    width: 30vw !important;
  }

  .collectiv-spectra-right1 {
    left: 100px;
    top: -50px;
  }
  .collectiv-overlap-left {
    width: 80vw !important;
    transform: translate(-20vw, 0vw) !important;
  }
  .collectiv-overlap-right {
    width: 20vw !important;
    transform: translate(18vw, 0vw) !important;
  }
  .double-height {
    height: 160dvh !important;
  }
  .collectiv-offset-image {
    height: 28vw !important;
    transform: translate(0%, 25%);
  }
  .trucks-h2-right {
    left: 50vw;
  }
  body.the-nave .paragraph-collectiv-first {
    max-width: 30vw !important;
  }
  body.its-a-love-thing .paragraph-collectiv-first {
    max-width: 30vw !important;
  }
   
}

@media(min-width: 1441px) {
  body.love-book .lovebook-covervideo-section figure {
    left: 130px;
  }
}

body.love-book .lovebook-covervideo-section figure {
    left: 130px;
}
/* --- AJUSTES EXCLUSIVOS PARA LA PÁGINA CBSW --- */

/* 1. Limitar el contenedor principal al alto visible real de la pantalla en CBSW */
body.cbsw .container.section {
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-top: 0 !important;
    overflow: hidden !important;
}

/* 2. Corregir el ancho del video en CBSW (sobrescribe el width: 100vw en línea del HTML) */
body.cbsw #custom-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 3. Asegurar que los créditos se alineen al borde inferior de los 100dvh en CBSW */
body.cbsw .project-credits-container {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    z-index: 999 !important;
}

/* Restablece el scroll táctil interno para las columnas del archive en iPad/iOS */
body.post-type-archive-project .archive-projects-container,
body.post-type-archive-project .project-column {
    -webkit-overflow-scrolling: touch !important; /* Habilita el desplazamiento nativo con inercia */
    touch-action: pan-y !important;               /* Fuerza a Safari a reconocer el gesto vertical del dedo */
    pointer-events: auto !important;
}

/* Evita que el contenedor desactive la captura del gesto táctil */
body.post-type-archive-project .archive-projects-wrapper {
    touch-action: pan-y !important;
}


/* ==========================================================
   ARCHIVE PROJECTS — COPYRIGHT FIJO SOBRE TODAS LAS COLUMNAS
   ========================================================== */

.site-copyright-fixed {
    position: fixed !important;

    left: 30px !important;
    bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;

    z-index: 2147483647 !important;

    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;

    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* El copyright debe estar fuera de las capas que se desplazan */
.site-copyright-fixed {
    position: fixed !important;
    z-index: 2147483647 !important;
}