/*
INDEX
==================================================
1. RESET & ROOT VARIABLES
    1.1. Global Reset
    1.2. Root Variables
2. FONT DEFINITIONS
3. GENERAL STYLES
    3.1. Body & HTML Base
    3.2. Scrollbar Hiding
    3.3. General Typography
4. LAYOUT & COMMON UI ELEMENTS (Sitewide)
    4.1. Fixed Position UI (Slogan, AboutUs, Directors, Tel, Hizkuntzak)
    4.2. Corner Logos
    4.3. Logos Kit (Bottom Left)
    4.4. Navigation Arrows (General Arrows)
    4.5. WebGL Canvas
    4.6. Pegatinas (Stickers Overlay)
    4.7. Tricks Stickers (Specific Feature)
5. SPECIFIC PAGE/SECTION STYLES
    5.1. Legal Page Styles
    5.2. Home Page / Main Gallery Styles
        5.2.1. Video Grid (.galeria-videos, .video)
        5.2.2. Video Captions (.captura)
        5.2.3. Video States (.inactive, .actvid, etc.)
    5.3. About Us Section Specifics (Erik, Aitor, Text)
6. SINGLE PROJECT PAGE (PROIEKT SINGLE)
    6.1. General Setup for Single Project Page
    6.2. Video Stack & Container
    6.3. UI Controls (Buttons: Info, Mute, Fullscreen, Next, Fotos)
        6.3.1. General Button Styling
        6.3.2. Specific Button Positioning & Icons
        6.3.3. Button States & Animations
    6.4. Info Panel
        6.4.1. Info Content Container
        6.4.2. Info Edukia (Inner Content)
        6.4.3. Info Header & Typography
        6.4.4. Project Details & Credits
        6.4.5. Scrollbar for Info Panel
    6.5. Video Player Controls
        6.5.1. Controls Container
        6.5.2. Play Toggle Button
        6.5.3. Progress Bar
    6.6. Centered Title & Play Button (Overlay on Video)
    6.7. Video Overlay & Effects (Blur for Info/Gallery)
    6.8. Swiper Gallery Slider
        6.8.1. Slider Wrapper & Main Element
        6.8.2. Slide Styling
        6.8.3. Navigation & Pagination
    6.9. UI Inactivity States
        6.9.1. Video Container UI Inactivity
        6.9.2. Global UI Inactivity (Body Class)
    6.10. Single Project Specific Element Overrides (Logos, Nav)
7. RESPONSIVE STYLES (max-width: 600px)
    7.1. General Site Adjustments (Mobile)
        7.1.1. Layout & Visibility (Logos, Gallery, Slogan, Canvas)
        7.1.2. Navigation (AboutUs, Directors)
        7.1.3. Mobile Video Grid
        7.1.4. About Us Section (Mobile)
        7.1.5. Legal Section (Mobile)
        7.1.6. Telephone Links (Mobile)
    7.2. Single Project Adjustments (Mobile)
        7.2.1. Centered Title & Info Panel
        7.2.2. Video Credits & Typography
        7.2.3. Button Positioning
        7.2.4. Element Visibility (WebGL, Slogan)
        7.2.5. Swiper Gallery Slider (Mobile)
==================================================
*/

/* ==================================================
   1. RESET & ROOT VARIABLES
   ================================================== */

/* 1.1. Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 1.2. Root Variables */
:root {
  --iluna: #111111;
  --argia: #ebebeb;
  --gorria: #e73c1f;
  --rad: 9px;
  --pad: 9px;
}

/* ==================================================
   2. FONT DEFINITIONS
   ================================================== */
@font-face {
  font-family: 'Neue Haas Grotesk Display Pro';
  src: url('../fonts/NeueHaasDisplay-Roman.woff2') format('woff2'),
       url('../fonts/NeueHaasDisplay-Roman.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Haas Grotesk Display Pro';
  src: url('../fonts/NeueHaasDisplay-Mediu.woff2') format('woff2'),
       url('../fonts/NeueHaasDisplay-Mediu.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Druk';
  src: url('../fonts/DrukWide-Bold.woff2') format('woff2'),
       url('../fonts/DrukWide-Bold.woff') format('woff');
  font-weight: 500; /* Note: Often 'bold' is 700, but using what was provided */
  font-style: normal;
  font-display: swap;
}

/* ==================================================
   3. GENERAL STYLES
   ================================================== */

/* 3.1. Body & HTML Base */
html, body {
  height: 100%;
  background: var(--iluna); /* Merged from body,html */
  overflow: auto;
  font-family: 'Neue Haas Grotesk Display Pro'; /* Merged from body,p */
    overscroll-behavior-y: contain; /* AÑADIR ESTO */

}

/* 3.2. Scrollbar Hiding */
html, body {
  scrollbar-width: none;    /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent;
}

/* 3.3. General Typography */
p {
  font-family: 'Neue Haas Grotesk Display Pro'; /* Already on body, but can be explicit */
  font-size: 12px;
  line-height: 1.3;
}

/* ==================================================
   4. LAYOUT & COMMON UI ELEMENTS (Sitewide)
   ================================================== */

.recuadro-movil{
  display: none;
}
/* 4.1. Fixed Position UI (Slogan, AboutUs, Directors, Tel, Hizkuntzak) */
.slogan,
.aboutus,
.directors,
.tel1,
.tel2,
.hizkuntzak {
  position: fixed;
  z-index: 9999;
  font-family: 'Neue Haas Grotesk Display Pro';
}

a{
  color: var(--gorria);
}
.hizkuntzak{
    bottom: calc(33.333333333333333333% + 25px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin: auto;
        gap: 20px;
        opacity: 1;
        transition:opacity 0.3s ease-in-out;

  }

  .hizkuntzak li{
padding:0;
list-style-type: none;
  }
  .hizkuntzak li a{
    border-radius: 100px;
    color: var(--gorria);
    border: 1px solid;
    padding: 3px 7px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 12px;
    transition: 0.3s all ease;
      }
.slogan {
  color: var(--gorria);
  left: 50%;
  top: calc(54% + 30px);
  transform: translateX(-50%);
  text-transform: uppercase;
  font-size: 10px;
  text-align: center;
  font-family: 'Druk';
  max-width: 30%;
}

.pagina-legal-tlc .slogan{
  display: none;
}



.pagina-legal-tlc .hizkuntzak{
      top: 12px;
    bottom: unset;
    right: 100px;
    left: unset;
    transform: none;
}

.aboutus,
.directors {
  border-radius: 100px;
  color: var(--gorria);
  border:1px solid; 
  padding: 3px 7px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 12px;
  /* font-family: 'Neue Haas Grotesk Display Pro'; Already in common group */
  transition: 0.3s all ease;
}



.aboutus {
  top: calc(33.333333333333333333% + 25px);
  left: calc(33.333333333333333333% + 20px);
}

.directors {
  top: calc(33.333333333333333333% + 25px);
  right: calc(33.333333333333333333% + 20px);
}

.pagina-legal-tlc .directors,.pagina-legal-tlc .aboutus{
top:12px!important;
}



.aboutus:hover,
.directors:hover,.hizkuntzak li a:hover {
  background: var(--argia);
     color: var(--iluna); 
}

.tel1,
.tel2 {
  text-transform: uppercase;
  text-decoration: none;
  font-size: 12px;
  color: var(--gorria);
  bottom: calc(33.333333333333333333% + 25px);
}

.tel1 {
  left: calc(33.333333333333333333% + 20px);
}

.tel2 {
  right: calc(33.333333333333333333% + 20px);
}

.hizkuntzak {
  /* Styles for .hizkuntzak if any */
}

/* 4.2. Corner Logos */
.logo-ezk-gor {
  position: fixed;
  width: 40px;
  z-index: 99;
  left: 10px;
  top: 10px;
}

.logo-ezk-beh {
  position: fixed;
  width: 40px;
  z-index: 99;
  left: 10px;
  bottom: 10px;
}

.logo-esk-gor {
  position: fixed;
  width: 40px;
  z-index: 99;
  right: 10px;
  top: 10px;
}

.logo-esk-beh {
  position: fixed;
  width: 40px;
  z-index: 99;
  right: 10px;
  bottom: 10px;
}

/* 4.3. Logos Kit (Bottom Left) */
.logos-kit {
  z-index: 999;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 10px;
  transform: translateY(-40px);
  opacity: 0.7;
}

  .pagina-legal-tlc  .logos-kit {
        display: flex
;
        flex-wrap: wrap;
        flex-direction: column;
        position: unset;
        margin-top: 70px;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }


.logos-kit svg {
  width: 100px !important;
}

/* 4.4. Navigation Arrows (General Arrows) */
.arrow {
  border: none;
  color: var(--gorria, #D01414);
  background: transparent;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 4; /* Original: z-index: 200 for some, 4 for others. Using 200 as it was last value */
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 1;
  pointer-events: auto;
  transition: 0.3s all ease, opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Combined transitions */
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 100;
  user-select: none;
}

.arrow.left {
  left: 34%;
}

.arrow.right {
  right: 34%;
}

.arrow svg {
  width: 55%;
  height: 55%;
  fill: var(--gorria, #D01414);
}

.arrow.left svg {
  transform: rotate(90deg);
}

.arrow.right svg {
  transform: rotate(-90deg);
}

/* 4.5. WebGL Canvas */
canvas.webgl {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  max-width: 33vw;
  aspect-ratio: 1 / 1;
}

.pagina-legal-tlc canvas.webgl{
  display:none;
}

/* 4.6. Pegatinas (Stickers Overlay) */
.pegatinas {
  position: fixed;
  overflow: hidden;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* 4.7. Tricks Stickers (Specific Feature) */
.tricks-stickers {
  display: none !important;
}

.tricks-sticker {
  position: absolute !important;
  left: 0% !important;
  top: 0% !important;
  z-index: 9999999999999 !important;
  pointer-events: none !important; /* Added semicolon */
  transform: scale(0.8, 0.8);
  transition-property: transform;
  transition-duration: 200ms;
  transition-timing-function: ease;
}

.sticker-hide {
  transform: scale(0, 0) !important;
}


/* ==================================================
   5. SPECIFIC PAGE/SECTION STYLES
   ================================================== */


#legal{
    position: fixed;
    bottom:0;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 8px;
    border-bottom-right-radius:0px;
    background-color: var(--iluna);
    color: var(--gorria);
    padding: 10px 15px;
    white-space: nowrap;
    font-size: 10px;
    letter-spacing: 0.5px;
    cursor: default;
    z-index: 1000;
    box-shadow: none;
    left: 50%;
    transform: translateX(-50%);

}
        #chroma-pill {
position: fixed;
    top: 20%;
    right: 0;
    transform-origin: top right;
    transform: rotate(90deg) translateX(100%);
    background-color: var(--iluna);
    color: var(--gorria);
    padding: 10px 15px;
    white-space: nowrap;
    font-size: 10px;
    letter-spacing: 0.5px;
    cursor: default;
    z-index: 1000;
    box-shadow: none;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0px;
    border-bottom-right-radius:8px;
            }

        
          .legal-text a:not(:last-child)::after {
    content: " |";
    margin: 0 2px;
  }

        .designed-by a,.legal-text a{
            color: inherit;
            text-transform: none;
            text-decoration: none;
        }



/* 5.1. Legal Page Styles */
.legal-h1 {
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--gorria);
}

.legal-p,
.legal-li,
.legal-titulua {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--gorria);
}

.legal-p a,
.legal-li a,
.legal-titulua a {
  color: var(--gorria);
}

/* 5.2. Home Page / Main Gallery Styles */
/* 5.2.1. Video Grid (.galeria-videos, .video) */
.galeria-videos {
  top: 0; /* Position relative to viewport or positioned parent */
  left: 0;
  padding: 20px;
  display: flex;
  background: transparent;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

.galeria-videos {
    transition: opacity 0.3s ease-in-out;
}
.galeria-videos.fade-out {
    opacity: 0;
}



.video {
  border-radius: 10px; /* var(--rad) could be used if consistent */
  height: calc(33.33333333333333vh - 30px);
  width: calc(33.33333333333333vw - 30px);
  transition: transform 1s ease, filter 1s ease;
  position: fixed; /* This makes them overlap based on subsequent positioning rules */
  background-color: var(--iluna);
}



video::cue {
  font-size: 18px;
  color: var(--gorria);
  font-family: 'Neue Haas Grotesk Display Pro', sans-serif; /* Buena práctica: añadir una fuente de respaldo */
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.4);

  /* --- AQUÍ LAS SOLUCIONES --- */

  /* 1. Usa un valor sin unidad para el interlineado. Prueba a ajustarlo entre 1.1 y 1.25 */
  line-height: 1.15;

  /* 2. Elimina los bordes redondeados del fondo */
  border-radius: 0;

  /* 3. (Opcional pero recomendado) Añade un padding controlado */
  padding: 0.4em 0.7em;
}




.video video { /* Style for the actual video element inside .video */
  width: 100%;
  object-fit: cover;
  z-index: 60;
  height: 100%;
  border-radius: 10px; /* Match parent .video */
}

/* Positioning for specific videos in the grid */
.video-1, .video-2, .video-3 { top: 20px; }
.video-4, .video-6         { top: calc(33.333333333% + 20px); }
.video-7, .video-8, .video-9 { bottom: 20px; }

.video-1, .video-4, .video-7 { left: 20px; }
/* .video-2, .video-5, .video-8 are implicitly centered or need specific rules if not */
.video-3, .video-6, .video-9 { right: 20px; }

.video-5 { display: none; } /* Explicitly hidden */


/* 5.2.2. Video Captions (.captura) */
.precap { /* Container for caption or other overlay elements for a video */
  position: relative;
  height: 100%;
  width: 100%;
}

.captura {
  opacity: 0;
  display: flex;
  top: 50%;
  font-size: 12px;
  text-transform: uppercase;
  left: 0;
  /* padding: 0 20px; Overridden by more specific padding below */
  transition: visibility 0s, all 0.2s ease-in-out;
  transform: translate(0, -50%);
  position: absolute;
  width: 100%;
  color: var(--gorria);
  justify-content: space-between;
  align-items: center;
  height: 100%;
  flex-wrap: wrap;
  padding: 20px; /* More specific padding */
  text-align: center;
}

.captura p {
  font-size: 12px;
  font-family: 'Druk';
  max-width: 49%;
}

.captura p:first-of-type {
  text-align: left;
}

.captura p:last-of-type {
  text-align: right;
}

.video:hover .captura {
  opacity: 1;
}

/* 5.2.3. Video States (.inactive, .actvid, etc.) */
.video.inactive {
  filter: blur(4px);
  transform: scale(0.85);
}

.video.actvid { /* Likely "active video" */
  display: flex; /* May override other display properties if needed */
}

.video.inactive-hover {
  filter: blur(4px);
}

.video.inactive-page {
  filter: blur(4px);
  transform: scale(0.85);
}

/* Mobile specific video container - will be overridden by media query if needed */
.all-videos-mobile {
  display: none; /* Initially hidden for desktop */
}

/* 5.3. About Us Section Specifics (Erik, Aitor, Text) */
.about-us-aitor {
    position: fixed;
    top: 50%;
    text-align: left;
    left: 20px;
    transform: translateY(-50%);
    color: var(--gorria);
  }

.about-us-erik {
    position: fixed;
    text-align: right;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: var(--gorria);
  }

.about-us-erik p,
.about-us-aitor p {
  margin: 0;
  text-transform: uppercase;
  font-family: 'Druk'; /* Specific font for these paragraphs */
}

.about-us-text {
  position: fixed;
  top: 80%;
  left: 50%;
  width: 33%;
  color: white; /* Overrides --gorria for this specific text */
  transform: translateX(-50%) translateY(-50%); /* Corrected for vertical centering too */
  text-align: center;
  text-transform: uppercase;
  color: var(--gorria); /* Redundant if color: white is intended, keeping last one */
}

.tit { /* General title style, possibly used in About Us or elsewhere */
  font-size: 20px;
}


/* ==================================================
   6. SINGLE PROJECT PAGE (PROIEKT SINGLE)
   ================================================== */

/* 6.1. General Setup for Single Project Page */
.single-proiektua #legal {
  display: none;
}

.single-proiektua body { /* More specific than general body for this page */
  margin: 0; /* Already in reset, but can be explicit */
  background: var(--iluna);
  overflow: hidden; /* Prevents scrolling on the body itself */
}
/* Note: html, body scrollbar hiding rules are already global */

/* 6.2. Video Stack & Container */
.stack { /* Main scrolling container for videos */
  height: 100dvh; /* dvh para altura dinámica en móviles */
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  /* Nuevas reglas para ocultar la scrollbar en .stack */
  scrollbar-width: none;    /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}


.stack::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent; /* O display: none; */
}




.video-container { /* Individual video slide */
  height: 100dvh;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex-direction: column;
  cursor: default;
  overflow: hidden;
}

video.fullscreen-video { /* The actual video element */
  height: 100%;
  width: 100%;
  object-fit: contain; /* Ensures entire video is visible */
}

/* 6.3. UI Controls (Buttons: Info, Mute, Fullscreen, Next, Fotos) */
/* 6.3.1. General Button Styling */
.info-button,
.mute-toggle,
.fullscreen-toggle,
.next-button,
.fotos-button {
  position: absolute;
  right: calc(10px + env(safe-area-inset-right)); /* Safe area for notches */
  border: none;
  color: var(--gorria, #D01414);
  background: transparent;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 4; /* Base z-index, specific buttons might override */
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* 6.3.2. Specific Button Positioning & Icons */
.info-button {
  bottom: calc(50px + env(safe-area-inset-bottom));
  z-index: 99999; /* Highest z-index for info button */
}

.mute-toggle {
  bottom: calc(100px + env(safe-area-inset-bottom));
}
.mute-toggle svg {
  width: 60%;
  height: 60%;
  display: block;
}

.fullscreen-toggle {
  bottom: calc(150px + env(safe-area-inset-bottom));
}

.fotos-button {
  bottom: calc(200px + env(safe-area-inset-bottom));
  z-index: 12; /* Above slider overlay */
}

.next-button {
  bottom: calc(250px + env(safe-area-inset-bottom));
  /* right: calc(20px + env(safe-area-inset-right)); Already in general rule */
}

/* Button Icons */
.info-button svg.info-icon,
.next-button svg.next-icon,
.fullscreen-toggle svg.fullscreen-icon {
  width: 55%;
  height: 55%;
  fill: var(--gorria, #D01414);
  transition: transform 0.3s ease-in-out;
}

.fotos-button svg.fotos-icon {
  width: 65%;
  height: 65%;
  fill: var(--gorria, #D01414);
  transition: transform 0.3s ease-in-out;
}

/* Swiper navigation buttons (part of single project UI) */
.swiper-button-prev,
.swiper-button-next { /* These are classes from Swiper.js, styled to match project buttons */
    /* General styling might be inherited from .info-button etc. if they share a common class,
       otherwise, style them explicitly or ensure Swiper's default styles are overridden appropriately.
       The provided CSS has them separate. */
}
.swiper-button-prev {
  bottom: calc(350px + env(safe-area-inset-bottom));
  right: calc(20px + env(safe-area-inset-right)); /* Assuming this should be 10px like others for consistency */
  top: unset;
  left: unset;
  /* Ensure it inherits/has common button styles like width, height, color, etc. if not covered by Swiper's CSS */
}

.swiper-button-next {
  bottom: calc(300px + env(safe-area-inset-bottom));
  right: calc(20px + env(safe-area-inset-right)); /* Assuming this should be 10px like others for consistency */
  top: unset;
  left: unset;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after, /* Default Swiper arrow */
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after { /* Default Swiper arrow */
  content: none !important; /* Hide default Swiper arrows */
}

svg.next-arrow-icon { /* Custom SVG for Swiper next */
  width: 55% !important;
  height: 55% !important;
  transform: rotate(-90deg);
  fill: var(--gorria, #D01414);
}

svg.previous-arrow-icon { /* Custom SVG for Swiper prev */
  width: 55% !important;
  height: 55% !important;
  transform: rotate(90deg);
  fill: var(--gorria, #D01414);
}


/* 6.3.3. Button States & Animations */
.next-button:hover svg.next-icon {
  animation: BounceNext 0.8s ease-in-out infinite;
}

@keyframes BounceNext {
  0%, 100% { transform: translateY(0) rotate(0); } /* Keep existing rotate if any */
  50% { transform: translateY(-4px) rotate(0); }
}


/* Button states when info panel is shown */
.video-container.show-info .info-button svg.info-icon {
  transform: rotate(45deg); /* Turns '+' into 'x' */
}

.video-container.show-info .logos-kit,
.video-container.show-info .mute-toggle,
.video-container.show-info .fullscreen-toggle,
.video-container.show-info .video-controls,
.video-container.show-info .next-button { /* fotos-button also? Covered by .showing-gallery */
  opacity: 0.3 !important;
  /* pointer-events: none; Consider if needed, but allows closing info */
}

.video-container.show-info .center-title {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Button state for gallery (fotos-button becomes close button) */
.video-container.showing-gallery .fotos-button svg.fotos-icon {
  transform: rotate(45deg); /* Gira el icono '+' para que parezca una 'x' */
}

/* 6.4. Info Panel */
/* 6.4.1. Info Content Container */
.info-content {
  display: none; /* Shown by .video-container.show-info */
  position: absolute;
  background: transparent; /* Overlay provides visual background */
  color: var(--gorria);
  z-index: 5; /* Above video, below some buttons if not managed by opacity */
  left: 0;
  width: 100vw;
  top: 0;
  height: 100dvh;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.video-container.show-info .info-content {
  display: flex;
}

/* 6.4.2. Info Edukia (Inner Content) */
.info-edukia {
  position: relative;
  height: calc(100% - 140px); /* Space for padding and potential elements outside */
  box-sizing: border-box;
  overflow-y: auto;
  width: 100%;
  max-width: 90vw;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

/* 6.4.3. Info Header & Typography */
.eduki-header-wrapper {
  width: 100%;
}

.eduki-header {
  position: static; /* Default, can be removed */
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--gorria);
  margin-bottom: 25px;
}

.info-edukia .titulua {
  margin-top: 0;
  margin-bottom: 0;
  text-align: left;
  font-size: 2.2em;
  text-transform: uppercase;
  font-family: 'Druk';
  max-width: 40%;
}

.info-edukia .bezeroa { /* Client name */
  margin-top: 0;
  margin-bottom: 0;
  text-align: right;
  font-size: 2.2em;
  text-transform: uppercase;
  padding-left: 10px;
  font-family: 'Druk';
  max-width: 40%;
}

/* 6.4.4. Project Details & Credits */
.project-client { /* Possibly a sub-header or detail line for client */
  font-size: 1.1em;
  margin-bottom: 15px;
  color: #ccc;
  width: 100%;
  text-align: left;
}
.project-client strong {
  color: var(--gorria, #D01414);
}

.project-description {
  width: 100%;
  margin-bottom: 25px;
  line-height: 1.6;
  text-align: left;
  font-size: 1em;
}

.video-credits-list {
  margin-top: 0;
  text-align: left;
  width: 100%;
  column-count: 2;
  column-gap: 40px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.video-credits-list .credit-entry {
  padding-bottom: 12px;
  font-size: 0.95em;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  line-height: 1.5;
  display: flex;
}

.video-credits-list .task-title {
  display: block;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--gorria, #D01414);
  margin-bottom: 4px;
  flex-basis: 50%;
}

.video-credits-list .task-persons {
  color: var(--gorria); /* Default color, individual spans can override */
  padding-left: 10px;
  flex-basis: 50%;
  display: flex;
  text-transform: uppercase;
  flex-direction: column;
}
.video-credits-list .task-persons span {
  color: var(--gorria); /* Ensure person names are also this color */
}

/* 6.4.5. Scrollbar for Info Panel (Ahora Oculta) */
.info-edukia {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.info-edukia::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent; /* O display: none; */
}
/* Ya no son necesarias las reglas para ::-webkit-scrollbar-track y ::-webkit-scrollbar-thumb si está oculta */

/*
.info-edukia::-webkit-scrollbar {
  width: 8px;
}
.info-edukia::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}
.info-edukia::-webkit-scrollbar-thumb {
  background: var(--gorria, #D01414);
  border-radius: 4px;
}
.info-edukia::-webkit-scrollbar-thumb:hover {
  background: #E02020; 
}
*/
/* 6.5. Video Player Controls */
/* 6.5.1. Controls Container */
.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 8px calc(10px + env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-right));
  box-sizing: border-box;
  gap: 10px;
  z-index: 3;
  opacity: 0; /* Shown on hover or with .controls-visible */
  transition: opacity 0.3s;
  pointer-events: none;
}

.video-container:hover .video-controls,
.video-container.controls-visible .video-controls {
  opacity: 1;
  pointer-events: auto;
}

/* Desktop specific adjustments for video controls (overrides base for larger screens) */
@media (min-width: 601px) {
  .video-controls {
    left: 55px;
    width: calc(100% - 110px);
    bottom: 5px;
    padding: 8px 10px; /* Simpler padding for desktop */
    cursor: pointer; /* Why is cursor pointer on the container? */
  }
}

/* 6.5.2. Play Toggle Button */
.play-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
  line-height: 0; /* For inline-block or similar behavior */
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-toggle svg {
  width: 18px;
  height: 18px;
  fill: var(--gorria, #D01414);
  display: block;
}

/* 6.5.3. Progress Bar */
.progress-bar {
  flex: 1; /* Takes remaining space */
  height: 8px;
  background: rgba(255,255,255,0.3);
  border-radius: 0px; /* Explicitly no radius */
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.progress-fill { /* Actual progress */
  height: 100%;
  width: 0; /* Controlled by JS */
  background: var(--gorria);
  border-radius: 0px;
  position: relative;
  z-index: 2;
}

.progress-preview-fill { /* Buffered or hover preview */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0; /* Controlled by JS */
  background-color: var(--gorria);
  opacity: 0.6;
  border-radius: 0px;
  pointer-events: none;
  z-index: 1;
}

/* 6.6. Centered Title & Play Button (Overlay on Video) */
.center-play {
  position: absolute;
  color: var(--gorria);
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  pointer-events: auto; /* Initially clickable */
  display: none; /* Controlled by JS probably */
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s;
  width: 30px; /* Size of the play icon */
  height: 30px;
}
.center-play svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.center-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1; /* Below center-play if both are visible */
  display: flex;
  color: var(--gorria);
  flex-wrap: wrap; /* Can wrap if names are long */
  text-transform: uppercase;
  justify-content: space-between;
  width: 95%; /* Takes most of the width */
  opacity: 1;
  pointer-events: auto; /* Allow interaction if any */
  transition: opacity 0.3s ease-in-out;
}
.center-title p { /* Project title and client name in center */
  font-size: 2.2em;
  margin: 5px 0;
  max-width: 40%; /* Prevents collision */
  font-family: 'Druk';
}
.center-title .bezeroa { /* Client name specific alignment */
  text-align: right;
}

/* 6.7. Video Overlay & Effects (Blur for Info/Gallery) */
.video-overlay { /* General overlay, used by both info and gallery states */
  position: absolute;
  inset: 0; /* top, right, bottom, left = 0 */
  background: rgba(0,0,0,0.2); /* Default overlay */
  display: none; /* Activated by parent class */
  z-index: 3; /* Above video, below controls/info panel */
  pointer-events: none;
}

.video-container.show-info video.fullscreen-video {
  filter: blur(8px) brightness(0.7);
}
.video-container.show-info .video-overlay { /* When info is shown */
  display: block;
  /* background will be default rgba(0,0,0,0.2) unless overridden */
}

/* Gallery specific overlay and video effects */
.video-container.showing-gallery video.fullscreen-video {
  filter: blur(8px) brightness(0.7); /* Same as show-info */
  transition: filter 0.3s ease-in-out;
}
.video-container.showing-gallery .video-overlay {
  display: block;
  background: transparent; /* If blur is enough, or use a darker rgba */
  z-index: 9; /* Below slider (10), above video elements */
}

/* 6.8. Swiper Gallery Slider */
/* 6.8.1. Slider Wrapper & Main Element */
.chroma-project-slider-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10; /* Above gallery overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}
.video-container.showing-gallery .chroma-project-slider-wrapper {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.chroma-project-slider { /* The Swiper instance element */
  width: calc(100% - 120px); /* Leaves space for side nav if not fixed */
  max-width: 100%;
  height: auto;
  max-height: 90vh; /* Vertical constraint */
}

/* 6.8.2. Slide Styling */
.chroma-project-slider .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent; /* Background from video-overlay */
  text-align: center; /* For alt text */
}

.chroma-project-slider .swiper-slide img {
  max-width: 100%;
  max-height: 85vh; /* Slightly less than slider to see nav/pagination */
  height: auto;
  object-fit: contain;
 /* border-radius: 4px;  Optional */
  user-select: none; /* Prevent image selection */
}

.swiper-wrapper { /* Swiper's slide container */
  align-items: center; /* Vertical alignment for slides of different aspect ratios */
}

/* 6.8.3. Navigation & Pagination */
.chroma-project-slider .swiper-button-prev, /* Swiper's own nav buttons */
.chroma-project-slider .swiper-button-next {
  color: var(--gorria, #D01414);
  width: 40px; /* Match other UI buttons */
  height: 40px;
  transition: opacity 0.3s ease, color 0.3s ease;
  opacity: 1; /* Default opacity, can be less and increase on hover */
  position: fixed; /* If they are outside the slider bounds visually */
  /* top, left, right, bottom positioning if fixed, or rely on Swiper defaults if absolute */
}
/* The :after pseudo-elements for Swiper buttons are already handled to be content:none */

.chroma-project-slider:hover .swiper-button-prev,
.chroma-project-slider:hover .swiper-button-next {
  opacity: 1; /* More visible on slider hover if default is less */
}
.chroma-project-slider .swiper-button-prev:hover,
.chroma-project-slider .swiper-button-next:hover {
  color: #fff; /* Example hover color */
}

/* Pagination */
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 18px!important; /* Position from bottom of viewport */
  top: unset!important;
  left: 50%!important;
  width: calc(100% - 80px)!important; /* Centered pagination */
  position: fixed!important; /* Fixed to viewport */
  transform: translateX(-50%)!important;
}

.chroma-project-slider .swiper-pagination-bullet {
  background-color: rgba(255,255,255,0.4);
  opacity: 0.8;
}
.chroma-project-slider .swiper-pagination-bullet-active {
  background-color: var(--gorria, #D01414);
  opacity: 1;
}

/* Attenuate other UI elements when gallery is showing
.video-container.showing-gallery .info-button 
 */
.video-container.showing-gallery .next-button, /* Project next, not slider next */
.video-container.showing-gallery .mute-toggle,
.video-container.showing-gallery .fullscreen-toggle,
.video-container.showing-gallery .video-controls,
.video-container.showing-gallery .center-title,
.video-container.showing-gallery .center-play
{ /* Also hide info button when gallery is up */
  opacity: 0.15 !important;
  pointer-events: none !important;
}

/* Hide info content if gallery is open */
.video-container.showing-gallery .info-content {
  display: none !important;
}


/* 6.9. UI Inactivity States */
/* 6.9.1. Video Container UI Inactivity */
.video-container.ui-inactive .info-button,
.video-container.ui-inactive .next-button,
.video-container.ui-inactive .mute-toggle,
.video-container.ui-inactive .fullscreen-toggle,
.video-container.ui-inactive .fotos-button,
.video-container.ui-inactive .video-controls,
.video-container.ui-inactive .center-play,
.video-container.ui-inactive .center-title,
.video-container.ui-inactive #chroma-pill { /* Assuming #chroma-pill is another UI element */
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 6.9.2. Global UI Inactivity (Body Class) */
/* Default state for these elements */
.logo-ezk-beh, .slogan, .logo-ezk-gor, .logo-esk-gor, .logo-esk-beh,
.etxeko-menu-container, .webgl, #INDshadowRootWrap /*External component?*/ {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease-in-out;
}

/* When global UI is inactive */
body.global-ui-inactive .logos-kit, /* This was separate, ensure it's included */
body.global-ui-inactive .webgl,
body.global-ui-inactive .logo-ezk-beh,
body.global-ui-inactive .logo-ezk-gor,
body.global-ui-inactive .logo-esk-gor,
body.global-ui-inactive .logo-esk-beh,
body.global-ui-inactive .slogan,
body.global-ui-inactive .etxeko-menu-container, /* If .etxeko-menu-container is used */
body.global-ui-inactive #INDshadowRootWrap,
body.global-ui-inactive #chroma-pill {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 6.10. Single Project Specific Element Overrides (Logos, Nav) */
.single-proiektua .slogan {
  top: 12px;
  font-family: 'Druk'; /* Already set, but explicit override */
}


  .single-proiektua .hizkuntzak{
    display:none!important;
  }


.single-proiektua .tel1,
.single-proiektua .tel2,
.single-proiektua .aboutus, /* These general nav items are hidden */
.single-proiektua .directors {
  display: none;
}

/* However, .aboutus and .directors are then re-positioned if they were to be shown
   The display: none; above takes precedence. This might be for a different state.
   Keeping them as per original, assuming there's JS logic.
*/
.single-proiektua .directors { /* If JS changes display to block/flex */
  position: fixed;
  right: 140px;
  top: 9px;
}
.single-proiektua .aboutus { /* If JS changes display to block/flex */
  position: fixed;
  left: 140px;
  top: 9px;
}


/* ==================================================
   7. RESPONSIVE STYLES (max-width: 600px)
   ================================================== */
@media (max-width: 1100px) {


  .about-us-erik,
  .about-us-aitor { /* Individual bio blocks */
    width: 100%; /* Take full width */
    top: 20px; /* Reset fixed positioning */
    transform: none;
  }



}

@media (max-width: 820px) {

.hizkuntzak{
      top: 40px;
      bottom: unset;
    width: 100%;
    left: 0;
    transform: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin: auto;
    gap: 0;
    padding: 0 12px;
    z-index: 9999999999999;
    position: fixed;
}

html, body{
  overflow: scroll;
  height: auto;
}
  /* 7.1. General Site Adjustments (Mobile) */
  /* 7.1.1. Layout & Visibility (Logos, Gallery, Slogan, Canvas) */
  
  .logos-kit {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: unset;
    margin-top: 70px;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.single-proiektua .logos-kit {
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column; /* Stack logos if multiple */
  }

/*.webgl,  Hide main page WebGL */
  .galeria-videos, /* Main desktop video grid */
  .logo-esk-gor,
  .logo-ezk-beh,
  .logo-esk-beh,
  .arrow, /* General navigation arrows from main page */
  .slogan { /* Hide main page slogan, or adjust as needed */
    display: none !important;
  }
  /* Re-position main page slogan if it were to be shown, but it's display:none above */
  .slogan { /* This rule for .slogan will be overridden by display:none !important */
    top: calc(16vh + 80px);
    font-size: 12px;
  }

  canvas.webgl { /* Main page canvas adjustment, but hidden above */
    max-width: 100%;
    width: 100%;
    top: -60px; /* Adjusts position if it were visible */
    left: 50%;
    transform: translateX(-50%);
  }

  /* 7.1.2. Navigation (AboutUs, Directors) */
  .directors { /* Main page directors link */
    top: 10px;
    right: 10px;
    left: auto; /* Resetting calc from desktop */
    transform: none; /* Resetting calc from desktop */
        opacity: 1;
    transition: opacity 0.3s ease-in-out;
    z-index: 999999999999;

  }

  .recuadro-movil{
background: var(--iluna);
height: 75px;
width: 100%;
display: block;
position: fixed;
top: 0;
left: 0;
opacity: 1;
    transition: opacity 0.3s ease-in-out;
    z-index: 9999999999;

  }
.logo-ezk-gor{
      opacity: 1;
    transition: opacity 0.3s ease-in-out;
z-index: 999999999999;
}

  .aboutus { /* Main page aboutus link */
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    z-index: 999999999999; /* Ensure it's on top */
  }
  .hizkuntzak.hidden-on-scroll,.aboutus.hidden-on-scroll,.directors.hidden-on-scroll,.logo-ezk-gor.hidden-on-scroll,.recuadro-movil.hidden-on-scroll {
    opacity: 0;
  }




  /* .menu-mobil {} */ /* Placeholder for mobile menu if any */

  /* 7.1.3. Mobile Video Grid */
  .all-videos-mobile { /* Container for stacked videos on mobile */
    display: flex;
    flex-direction: column;
    padding: 20px; /* Or 0 if videos are full-width */
    width: 100%;
    gap: 20px;
    margin-top: 300px; /* Space from top, adjust as needed */
  }

  .all-videos-mobile .video { /* Individual video item in mobile list */
    display: flex; /* Ensure it's visible */
    position: relative; /* Not fixed like desktop grid */
    width: 100%;
    height: auto; /* Let aspect-ratio define height */
    aspect-ratio: 16/9;
    z-index: 999999999; /* High z-index */
    /* Reset fixed positioning from desktop grid */
    top: auto; left: auto; right: auto; bottom: auto;
    filter: none; transform: none; /* Reset inactive states from desktop */
  }

  /* 7.1.4. About Us Section (Mobile) */
  .about-us-text { /* Text block in about us section */
    position: static; /* Flow with document */
    transform: none;
    width: 100%;
    padding: 20px;
    /* color: var(--gorria); Already set */
    text-align: center;
    /* text-transform: uppercase; Already set */
    z-index: 99999; /* Still high if overlapping */
    display: flex; /* If it contains flex items */
    margin-top: 30vh; /* Significant top margin */
    bottom: auto; top: auto; left: auto; /* Reset fixed positioning */
  }

  .about-us-erik,
  .about-us-aitor { /* Individual bio blocks */
    position: static;
    transform: none;
    text-align: center;
    padding: 15px;
    width: 100%; /* Take full width */
    left: auto; top: auto; /* Reset fixed positioning */
  }

  /* 7.1.5. Legal Section (Mobile) */
  #legal { /* Assuming this is a container for legal text */
    position: inherit !important; /* Override any fixed/absolute */
    transform: translate(0) !important;
    text-align: center !important;
    padding: 20px; /* Add some padding */
  }

  /* 7.1.6. Telephone Links (Mobile) */
  .tel1, .tel2 {
    display: none; /* Hide telephone links on mobile, as per original */
  }


  /* 7.2. Single Project Adjustments (Mobile) */
  /* General Note: .single-proiektua specific overrides for mobile if needed */

  video.fullscreen-video { /* Video element within single project */
    object-fit: cover; /* Fill screen, may crop */
  }

  /* 7.2.1. Centered Title & Info Panel */
  .center-title { /* Title overlay on video */
    position: absolute;
    padding: 0px 10px 0px 10px; /* Specific mobile padding */
    top: 55px; /* Position from top */
    left: 0;
    transform: none; /* Reset desktop centering */
    /* z-index: 1; Already set */
    /* display: flex; Already set */
    /* color: var(--gorria); Already set */
    flex-wrap: nowrap; /* Prevent wrapping on mobile */
    /* justify-content: space-between; Already set */
    width: 100%;
    /* opacity: 1; Already set */
    /* pointer-events: auto; Already set */
    /* transition: opacity 0.3s ease-in-out; Already set */
  }
  .center-title p { /* Text within centered title */
    font-size: 0.8em; /* Smaller font */
  }
  .center-title .bezeroa, /* Client name in title */
  .center-title .titulua { /* Project name in title */
    max-width: 40%; /* Limit width */
  }

  .info-content { /* Main container for info panel */
    margin-top: 60px; /* Space from top */
    justify-content: flex-start; /* Align content to top */
    padding-left: 0; padding-right: 0; /* Use .info-edukia padding */
  }

  .info-edukia { /* Scrollable content within info panel */
    max-width: 100%;
    padding: 0px 10px; /* Edge padding */
    height: calc(100% - 60px - env(safe-area-inset-bottom) - env(safe-area-inset-top)); /* Adjust height considering margin-top */
  }

  .eduki-header .bezeroa, /* Client name in info header */
  .eduki-header .titulua { /* Project name in info header */
    max-width: 40%;
    font-size: 0.8em; /* Smaller font, matches .center-title p */
  }
  .info-edukia .titulua, /* Redundant with above if structure is .info-edukia .eduki-header .titulua */
  .info-edukia .bezeroa {
    font-size: 0.8em;
  }

  /* 7.2.2. Video Credits & Typography */
  .video-credits-list {
    column-count: 1; /* Single column for credits */
  }
  .video-credits-list .credit-entry {
    line-height: 1.1;
    padding-bottom: 30px; /* More space between entries */
    flex-wrap: wrap;
    flex-direction: column; /* Stack title and persons */
    text-align: center; /* Center credit text */
    align-items: center; /* Align items center for column flex */
  }
   .video-credits-list .task-title,
   .video-credits-list .task-persons {
      flex-basis: auto; /* Allow natural sizing */
      padding-left: 0; /* Reset padding */
      text-align: center; /* Ensure centered */
   }


  /* 7.2.3. Button Positioning */
  .info-button {
    bottom: calc(env(safe-area-inset-bottom) + 70px);
    right: calc(15px + env(safe-area-inset-right));
  }
  .mute-toggle {
    bottom: calc(env(safe-area-inset-bottom) + 70px + 50px);
    right: calc(15px + env(safe-area-inset-right));
  }
  .fullscreen-toggle {
    bottom: calc(env(safe-area-inset-bottom) + 70px + 100px);
    right: calc(15px + env(safe-area-inset-right));
  }
  .fotos-button {
    bottom: calc(env(safe-area-inset-bottom) + 70px + 150px);
    right: calc(15px + env(safe-area-inset-right));
  }

  .next-button { /* Main project next button, not slider */
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom) + 20px); /* Adjusted to be lower, original was 70px */
    right: auto; /* Override desktop positioning */
    opacity: 1 !important; /* Ensure visible if ui-inactive tries to hide */
    pointer-events: auto !important;
  }
  .next-button svg.next-icon { /* Ensure animation runs */
    animation: BounceNext 0.8s ease-in-out infinite;
  }
  /* This also affects .video-container.ui-inactive .next-button to keep it visible */
  .video-container.ui-inactive .next-button {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Swiper navigation button positioning for mobile if needed */
  .swiper-button-prev,
  .swiper-button-next {
    /* Adjust if the desktop fixed positioning is not ideal for mobile */
    /* Example: Place them closer to the slider edges */
    /* right: calc(5px + env(safe-area-inset-right));
       bottom: 50%; transform: translateY(50%); */
  }
  .swiper-button-prev {
    /* Example specific:
    bottom: 50%; transform: translateY(50%);
    left: calc(5px + env(safe-area-inset-left)); right: auto; */
  }


  /* 7.2.4. Element Visibility (WebGL, Slogan for Single Project) */
  .single-proiektua .webgl, /* WebGL for single project page */
  .single-proiektua .slogan,.single-proiektua .recuadro-movil { /* Slogan for single project page */
    display: none !important;
  }


  /* 7.2.5. Swiper Gallery Slider (Mobile) */
  .chroma-project-slider {
    width: 95%; /* More width for slider on mobile */
  }
  .chroma-project-slider .swiper-slide img {
    max-height: 80vh; /* Adjust image height */
  }
  .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 10px; /* Closer to bottom edge on mobile */
    width: calc(100% - 40px); /* Adjust width */
  }

} /* END @media (max-width: 600px) */

/* END PROIEKT SINGLE STYLES */
/* This comment seems misplaced if media query is last, but kept from original structure */