/*
Theme Name: NSUE2025
Theme URI: https://opencollective.com/blankslate
Author: Bryan Hadaway
Author URI: https://opencollective.com/blankslate#section-contributors
Description: Donate: https://opencollective.com/blankslate. Learn: https://blankslate.me/. BlankSlate is the definitive WordPress boilerplate starter theme. I've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability, with no intrusive visual CSS styles added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/bhadaway/blankslate/issues. Thank you.
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2024.2
Requires at least: 5.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: nsue2025

NSUE2025 WordPress Theme 2011-2024
NSUE2025 is distributed under the terms of the GNU GPL
*/

* {
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{appearance:none;-webkit-appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield;appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}
strong {font-weight: bold;}
p strong {font-weight: bold;}

/*Tipografías*/

.inter {
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/* ========================================
   ESTILOS ESPECÍFICOS PARA LANDING HOME (ID 44)
   ======================================== */
/* Landing principal */
body.page-id-44 .nsue-landing {
	position: relative;
	width: 100%;
	height: 90vh;
	overflow: visible;
}

/* Hero Video Section */
body.page-id-44 .hero-video-section {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

body.page-id-44 .video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

body.page-id-44 .hero-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.page-id-44 .video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Eliminamos la franja blanca artificial */

body.page-id-44 .hero-content-landing {
	position: relative;
	bottom: 240px;
	left: 0;
	right: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

body.page-id-44 .hero-text {
	flex: 1;
    background-color: #fff;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 1rem;
    max-width: calc(285px * 2 + 1rem); /* Ancho equivalente a 2 cajas + gap */
    margin: 0;
}

/* Modo oscuro para hero-text */
[data-theme="dark"] body.page-id-44 .hero-text {
    background-color: #161616;
}

body.page-id-44 .nsue-logo {
	flex-shrink: 0;
}

body.page-id-44 .nsue-logo .logo_grande {
	width: 80px;
	height: auto;
	filter: brightness(0); /* Negro en modo claro */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

/* Modo oscuro para logo */
[data-theme="dark"] body.page-id-44 .nsue-logo .logo_grande {
	filter: brightness(0) invert(1); /* Blanco en modo oscuro */
}

body.page-id-44 .hero-description {
	flex: 1;
	margin: 0;
	font-size: 18px;
	line-height: 1.4;
	color: var(--text-color);
	font-weight: bold;
	text-shadow: none;
}

body.page-id-44 .hero-cta {
	flex: 0 0 auto;
}

body.page-id-44 .reel-button {
	background: #000;
	color: #fff;
	border: none;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	line-height: 1.2;
	text-align: center;
	padding: 10px;
    margin-bottom:5px;
}

/* Modo oscuro para reel-button */
[data-theme="dark"] body.page-id-44 .reel-button {
	background: #fff;
	color: #000;
}

body.page-id-44 .button-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

body.page-id-44 .button-text .line1,
body.page-id-44 .button-text .line2,
body.page-id-44 .button-text .line3 {
	display: block;
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
}

body.page-id-44 .reel-button:hover {
	background: #333;
	color: #fff;
	transform: scale(1.05);
}

/* Modo oscuro hover para reel-button */
[data-theme="dark"] body.page-id-44 .reel-button:hover {
	background: #ccc;
	color: #000;
}

/* Categories Section - Solo para página home */
body.page-id-44 .categories-section {
	position: relative;
	margin-top: -250px;
	margin-bottom: 2rem;
	z-index: 1000;
}

body.page-id-44 .category-card {
	display: block;
	color: var(--text-color);
	text-decoration: none;
	background-color: #fff;
	border: 1px solid var(--border-color);
	border-radius: 18px;
	text-align: center;
	cursor: pointer;
	position: relative;

}

/* Modo oscuro para category-card */
[data-theme="dark"] body.page-id-44 .category-card {
	background-color: #161616;
	color: #fff;
}

.reel-button {display: none !important;}


body.page-id-44 .category-card:hover {
	background-color: var(--corpo-color);
	border-color: var(--corpo-color);
	color: var(--text-hover-color-green);

}

body.page-id-44 .category-card h3 {
	font-size: 38px;
	margin-bottom: 10px;
	text-align: left;
	font-family: "Funnel Display", serif;
	position: relative;
	z-index: 99;
	padding: 30px;
	margin: 0;
	font-weight: bold;
}

body.page-id-44 .motion-music-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
	font-size: 0.9rem;
	font-weight: bold;
}

body.page-id-44 .play-icon {
	font-size: 0.8rem;
}

/* Asegurar que el toggle esté por encima del vídeo - Solo para página home */
body.page-id-44 #switch {
	position: absolute !important;
	top: 20px !important;
	right: 40px !important;
	z-index: 9999 !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

body.page-id-44 .theme-toggle {
	position: relative !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Header transparente para la landing */
body.page-id-44 #header {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: auto !important;
	z-index: 9998 !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Asegurar que el cursor se vea correctamente */
body.page-id-44 .cursor {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 10000 !important;
	pointer-events: none !important;
}

/* Espaciador para permitir scroll */
body.page-id-44 .scroll-spacer {
	height: 150vh;
}

/* Sección de Clientes */
body.page-id-44 .clients-section {
	background: var(--bg-color);
	padding: 15rem 0 6rem 0;
}

/* Footer para página home */
body.page-id-44 #footer {
	background-color: var(--footer-color);
	color: #FFF;
	padding: 60px 0;
	padding-bottom: 20px;
	margin-top: 80px;
}

body.page-id-44 .clients-content {
	display: flex;
	flex-direction: column;
	gap: 4rem;
}

body.page-id-44 .clients-text {
	text-align: left;
}

body.page-id-44 .clients-text h2,
body.page-id-44 .home-case-studies.section h2 {
	font-size: 26px;
	font-family: "Inter", serif;
	line-height: 1;
	margin-bottom: 20px;
	color: var(--text-color);
	font-weight: bold;
}

body.page-id-44 .clients-text p,
body.page-id-44 .home-case-studies.section > p {
	font-size: 18px;
	line-height: 135%;
	max-width: 800px;
	color: var(--text-secondary-color);
}



body.page-id-44 .client-logo:hover img {
	filter: grayscale(0%);
}

body.page-id-44 .client-logo .light-logo {
	display: block;
}

body.page-id-44 .client-logo .dark-logo {
	display: none;
}

[data-theme="dark"] body.page-id-44 .client-logo .light-logo {
	display: none;
}

[data-theme="dark"] body.page-id-44 .client-logo .dark-logo {
	display: block;
}

/* Responsive para Landing Home */
@media (max-width: 1200px) {
	body.page-id-44 .clients-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5rem;
	}
}

@media (max-width: 768px) {
	body.page-id-44 .hero-content {
		flex-direction: column;
		text-align: center;
		gap: 2rem;
	}

    body.page-id-44 .section {padding-left:15px; padding-right:15px;}
	
	body.page-id-44 .nsue-logo h1 {
		font-size: 3rem;
	}
	
	body.page-id-44 .clients-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}
	
	body.page-id-44 .clients-text h2 {
		font-size: 2.5rem;
	}
	
	body.page-id-44 .clients-text p {
		font-size: 1.1rem;
	}
	
	body.page-id-44 .category-card h3 {
		font-size: 32px;
		padding: 25px;
	}
}

@media (max-width: 480px) {
	body.page-id-44 .clients-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
	
	body.page-id-44 .client-logo {
		height: 50px;
	}
	
	body.page-id-44 .client-logo img {
		max-height: 50px;
	}
	
	body.page-id-44 .clients-text h2 {
		font-size: 2rem;
	}
	
	body.page-id-44 .clients-text p {
		font-size: 1rem;
	}
}

@media (max-width: 600px) {
	body.page-id-44 .category-card h3 {
		font-size: 28px;
		padding: 20px;
	}
}

.inter-normal {
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.inter-bold {
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.funnel-display-normal {
  font-family: "Funnel Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.funnel-display-bold {
  font-family: "Funnel Display", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/* Desactiva las transiciones iniciales */
.no-transition .toggle-label,
.no-transition .toggle-circle {
    transition: none; /* Sin animaciones mientras la clase esté presente */
}

/* Modo claro (por defecto) */
:root {
    --background-color: #ffffff;
    --text-color: #000000;
    --text-hover-color: #FFF;
    --text-hover-color-green:#000;
    --p-hover-color: #70A000;
    --primary-color: #007bff;
    --box-color: #FFF;
    --border-color: #000;
    --border-hover-color: #FFF;
    --corpo-color: #C7FF56;
    --footer-color: #000; 
}

/* Modo oscuro */
[data-theme="dark"] {
    --background-color: #161616;
    --text-color: #ffffff;
    --text-hover-color: #000;
    --text-hover-color-green:#000;
    --p-hover-color: #81B518;
    --primary-color: #1e90ff;
    --box-color: #161616;
    --border-color: #FFF;
    --border-hover-color: #161616; 
    --corpo-color: #C7FF56; 
    --footer-color: #161616; 
}



/* Aplicación de colores */
body {
    background-color: var(--background-color);
    color: var(--text-color);
    cursor: none !important; /* Forzar que siempre se oculte el cursor nativo */
    font-display: swap;
    overflow-x: hidden;
    position: relative;
}

p a {color: var(--text-color); }
p a:hover {color: var(--p-hover-color); }

#wrapper {
    position: relative;
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
}

.wrapper-content {
    width: 75%;
    margin: 0 auto;
    opacity: 1 !important;
    visibility: visible !important;
}

h1,h2,h3 {font-family: "Funnel Display", serif; font-weight: bold;}
p {
    font-family: "Inter", serif;
    line-height: 135%;
    margin-bottom: 1.2em; /* Espacio entre párrafos */
    font-size: 18px;
}

/*HEADER*/
#header {padding-top: 20px; position: relative; min-height: 70px;}

/*Menu*/
.menu-container {display: flex; justify-content: flex-end; position: relative; min-height: 38px; padding-bottom: 10px;}
.menu-container ul {display: flex; gap:10px; min-height: 38px;}
.menu-container ul li {margin-right: 0; line-height: 38px;}
.menu-container ul li:last-of-type {margin-right: 70px;}
.menu-container ul li a {
    color: var(--text-color);
    text-decoration: none;
    background-color: var(--background-color);
    padding: 8px 15px 8px 15px;
    font-weight: bold;
    font-family: "Funnel Display", serif;
    font-size: 16px;
    text-transform: uppercase;
    border: 1px solid var(--border-color);
    border-radius: 60px;
}

/* Aplicar el mismo estilo tanto para hover como para el elemento activo */
.menu-container ul li a:hover,
.menu-container ul li.current-menu-item a,
.menu-container ul li.current_page_item a {
    color: var(--text-hover-color-green);
    border: 1px solid var(--border-hover-color);
    background-color: var(--corpo-color);
}

/* Ocultar el botón del menú mobile en pantallas grandes */
.menu-toggle {
    display: none;
}

/* Mantener el estilo también en el menú móvil */
@media (max-width: 1340px) {
    .menu-container ul li.current-menu-item a,
    .menu-container ul li.current_page_item a {
        color: var(--text-hover-color);
        border: 1px solid var(--border-hover-color);
        background-color: var(--text-color);
    }
}

.page .entry-content p {
    max-width: 65%;
}

.page .entry-content .category-description p {
    max-width: 90%;
}

/*Switch*/
/* Estilos mejorados para el toggle del tema */
.theme-toggle {
    position: absolute;
    display: inline-block;
    width: 60px;
    height: 38px;
    right: 0px;
}

/* Ocultar el checkbox */
.theme-toggle input {
    display: none;
}

/* Fondo del switch */
.toggle-label {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.toggle-label:after {
    content: "";
    position: absolute;
    left: 10px;
    top: 9px;
    width: 16px;
    height: 16px;
    background-image: url('img/moon.svg');
    background-size: 14px;
    background-repeat: no-repeat;
    transition: left 0.3s ease;
}

/* Círculo deslizante */
.toggle-circle {
    position: absolute;
    top: 4px;
    left: 3px;
    width: 28px;
    height: 28px;
    background: #000;
    border-radius: 50%;
    transition: transform 0.3s ease, background 0.3s ease;
}

/* Estado activado (modo oscuro) */
input:checked + .toggle-label {
    background: #FFF;
    border-color: #FFF;
}

input:checked + .toggle-label:after {
    content: "";
    left: 36px;
    color: #fff;
    top: 10px;
    width: 16px;
    height: 16px;
    background-image: url('img/sun.svg');
    background-size: 14px;
    background-repeat: no-repeat;
}

input:checked + .toggle-label .toggle-circle {
    transform: translateX(26px);
    background: #000;
}

/* Indicador visual adicional para modo oscuro */
[data-theme="dark"] .toggle-label {
    border-color: #FFF;
}

/* Desactivar transiciones iniciales */
.no-transition .toggle-label,
.no-transition .toggle-circle {
    transition: none !important;
}

/* Ajustes responsive para el toggle */
@media (max-width: 1024px) {
    .theme-toggle {
        position: absolute;
        display: block;
        width: 60px;
        height: 38px;
        left: 45%;
        bottom: 100px;
    }
}

/*GET IN TOUCH*/
.forminator-ui#forminator-module-95.forminator-design--default .forminator-input, .forminator-ui#forminator-module-95.forminator-design--default .forminator-input input, .forminator-ui#forminator-module-95.forminator-design--default .forminator-iti-input .iti__selected-dial-code, .forminator-ui#forminator-module-95.forminator-design--default .forminator-textarea, .forminator-ui#forminator-module-95.forminator-design--default .forminator-select2 + .forminator-select.select2-container--open .selection .select2-selection--single[role="combobox"] .select2-selection__rendered {border-radius:10px; background-color: var(--background-color); color: var(--text-color) !important; font-weight: bold !important; font-family: "Inter", serif !important; padding: 10px 15px !important;}
.forminator-ui#forminator-module-95.forminator-design--default .forminator-label {font-size: 14px !important; font-family: "Inter", serif !important; font-weight: normal !important; padding-bottom: 5px !important;}
.forminator-ui#forminator-module-95.forminator-design--default .forminator-radio {font-family: "Inter", serif !important;}
.forminator-ui#forminator-module-95.forminator-design--default .forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"] .select2-selection__rendered {color: var(--text-color) !important;}
.forminator-ui#forminator-module-95.forminator-design--default .forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"] {border-radius: 40px !important; background-color: var(--background-color) !important; color: var(--text-color) !important; border: 1px solid var(--border-color) !important; padding-left:10px; padding-right:10px;}
.forminator-select-dropdown-container--open .forminator-custom-form-95.forminator-dropdown--default {background-color: var(--background-color) !important; border: transparent !important;}

.forminator-select-dropdown-container--open .forminator-custom-form-95.forminator-dropdown--default .select2-results .select2-results__options .select2-results__option:not(.select2-results__option--selected).select2-results__option--highlighted {background-color: #000 !important; color: #FFF !important;}
.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-dropdown--default .select2-results .select2-results__options .select2-results__option {padding: 0px 8px !important;}
.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-dropdown--default {padding: 10px !important;}


.forminator-ui#forminator-module-95.forminator-design--default .forminator-button-submit {
display: inline-block;
    background-color: var(--text-color);
    color: var(--background-color);
    padding: 15px 30px;
    border-radius: 60px;
    text-decoration: none;
    font-weight: bold !important;
    font-family: "Inter", serif !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
}

.forminator-ui.forminator-custom-form[data-design=default] .forminator-button:hover {
background-color: var(--corpo-color) !important;
color: #000 !important;
box-shadow: none !important;
}

/* Estado activado (modo oscuro) */
input:checked + .toggle-label {
    background: #FFF; /* Fondo oscuro */
}

input:checked + .toggle-label:after {
    content: "";
    left: 36px;
    color: #fff;
    top: 10px;
    width: 16px;
    height: 16px;
    background-image: url('img/sun.svg');
    background-size:14px;
    background-repeat: no-repeat;
}

input:checked + .toggle-label .toggle-circle {
    transform: translateX(26px); /* Mueve el círculo a la derecha */
    background: #000;
}

	/* Branding */
	#branding {width: 170px; height: 140px; background-color: var(--box-color); position: absolute; left: -1px; top: 25px; z-index:99; padding-left: 25px; border-radius: 0px 0px 0px 0px;}

	.logo {width: 100px;}

	.light-logo {
    	display: block;
	}

	.dark-logo {
	    display: none;
	}

	[data-theme="dark"] .light-logo {
	    display: none;
	}
	[data-theme="dark"] .dark-logo {
	    display: block;
	}

	/* Optimización para pantallas no Retina */
	.logo img {
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}

	.tagline { font-size: 15px; line-height: 20px; font-weight: bold; font-family: "Inter", serif; padding-top: 15px;}


/*HOME*/
.hero-section {
    position: relative;
    height: calc(100vh - 170px);
    margin-bottom: 70px;
}

.home-info-mobile {display: none;}

.reel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.reel > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.reel iframe,
.reel video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 56.25vw; /* Altura para 16:9 */
    min-width: 100%;
    min-height: 100%;
    pointer-events: none;
    object-fit: cover; /* Asegurar que el vídeo cubra todo el espacio */
}

@media (max-aspect-ratio: 16/9) {
    .reel iframe,
    .reel video {
        width: 177.77vh; /* Ancho para 16:9 */
        height: 100vh;
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

/* Estilos base para home-info - eliminados duplicados */

.sections-header {
    padding-top: 100px;
}

.sections-header h1 {
    font-size: 80px;
    line-height: 80px;
    text-transform: uppercase;
    padding-bottom:20px;
}
.sections-header p {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 1.2em;
}


.section {padding-top: 50px; padding-bottom: 50px;}
.forminator-row h2 {font-size: 30px; line-height: 34px; padding-top: 30px;}

.section p, .forminator-row p {
    font-size: 18px;
    line-height: 135%;
    margin-bottom: 1.2em;
}

.home #projects-grid, .four-columns {
    margin-top:30px;
}

/*WORK*/
.work-header {
    padding-top: 70px; 
    padding-bottom: 0px; 
    position: relative;
}

.work-header h1 {
    font-size: 40px; 
    line-height: 60px; 
    text-transform: uppercase;
}

.work-header p {
    font-size: 18px;
    line-height: 1.3;
    margin-top:15px;
}

.project-header {
  display: flex;
    align-items: flex-start;
  padding: 20px 0;
}

.project-columns {
    display: flex;
    gap: 3rem;
    padding: 2rem 0;
    width: 100%;
}

.project-title-column {
    flex: 1;
}

.project-details-column {
    flex: 1;
}

.project-title-column h1 {
    font-size: 42px;
    padding-left: 35%;
    line-height: 1;
  margin: 0;
}

.categories {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.categories a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: bold;
}

.categories a:hover {
    color: var(--p-hover-color);
}

.description p {
    line-height: 135%;
}

@media (max-width: 768px) {
    .project-columns {
        flex-direction: column;
        gap: 1rem;
    }

    
    .project-title-column h1 {
        padding-left: 0;
    }
}

/* Four Columns Grid */
.four-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Breakpoint para tablets y pantallas medianas */
@media (max-width: 1390px) {
.four-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .box {
        min-height: 250px; /* Ajustar altura para mejor proporción */
    }
}

/* Breakpoint móvil existente */
@media (max-width: 1024px) {
.four-columns {
  display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 20px 0;
        margin: 0;
        /* Ocultar scrollbar pero mantener funcionalidad */
        scrollbar-width: none;
        -ms-overflow-style: none;
        user-select: none; /* Prevenir selección de texto */
    }

    .four-columns::-webkit-scrollbar {
        display: none;
    }

    .reel-button {display:none !important;}
    body.page-id-44 .hero-content-landing {bottom:250px;}

    .four-columns .column {
        flex: 0 0 300px;
        margin-right: 20px;
        min-width: 300px;
        scroll-snap-align: start;
    }

    .four-columns .column:first-child {
        margin-left: 20px;
    }

    .four-columns.active,
    .four-columns.active .box {
        cursor: grabbing !important;
    }

    /* Indicador de scroll */
    .scroll-indicator {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
        display:none !important;
    }


    .page .entry-content p {
        max-width: 100%;
    }


    .scroll-indicator .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--border-color);
        opacity: 0.5;
        transition: opacity 0.3s ease;
    }

    .scroll-indicator .dot.active {
        opacity: 1;
    }

    .box {
        min-height: 200px;
    }

    .nav-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: var(--background-color);
        border: 1px solid var(--border-color);
        color: var(--text-color);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .nav-arrow:hover {
        background: var(--corpo-color);
        border-color: var(--corpo-color);
        color: var(--text-hover-color);
    }

    .nav-arrow.prev {
        left: 10px;
        display:none !important;
    }

    .nav-arrow.next {
        right: 10px;
        display:none !important;
    }

    .home-services {
        position: relative;
    }
}

.column {
  flex: 1;  
}

.box {
  display:block;
  color:var(--text-color); text-decoration: none;
  background-color:var(--background-color);
  border:1px solid var(--border-color);
  /*padding: 35px;*/
  border-radius: 18px;
  text-align: center;
  /*transition: background-color 0.3s ease, transform 0.3s ease;*/
  cursor: pointer;
  aspect-ratio: 1 / 1;
  min-height: 255px;
}


/* Estilo del texto en las cajas */
.box h3 {
  font-size: 38px;
  margin-bottom: 10px;
  text-align: left;
  font-family: "Funnel Display", serif;
  position: relative;
  z-index: 99;
  padding: 30px;
}

.page-id-50 .box h3 {font-size: 32px;}

.box p {
  font-size: 14px;
  color: #666;
}

.box:hover {
  background-color: var(--corpo-color);
  border-color: var(--corpo-color);
  color: var(--text-hover-color-green);
}

/*Solutions*/
.solutions-list {padding-top: 20px;}
.solutions-list ul {list-style: none;}
.solutions-list ul li {width: 100%;}
.solutions-list ul li a {display:block; border-radius: 18px; font-weight: bold; line-height: 70px; color:var(--text-color); margin-bottom:8px; text-transform:uppercase; width: 100%; padding: 6px 35px 0px 35px; border:1px solid var(--border-color); text-decoration: none;}
.solutions-list ul li a:hover {background-color: var(--corpo-color); color: white; border-color: var(--corpo-color);}


/* CATEGORY */
.header-category {position:relative; width: 100%; min-height:350px; background:#D9D9D9; z-index: 8;}


@media (min-resolution: 2dppx) {
    button {
        border-width: 1.5px; /* Más delgado para alta resolución */
    }
}

.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; }
.font-bold { font-weight: bold; }
.d-flex { display: flex; }
.justify-end { justify-content: flex-end; }

/* Project Stills */
.project-stills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

.still-content {
    position: relative;
    width: 100%;
}

.still-content .video-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.still-content .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto; /* Respetar el ratio original del iframe */
}

.still-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Para el grid de 3 columnas */
.project-stills.three-columns {
    grid-template-columns: repeat(3, 1fr);
}

/* Asegurar que las imágenes y vídeos se ajusten al contenedor */
.project-stills .still-content img,
.project-stills .still-content video {
    width: 100%;
    height: auto;
    display: block;
}

/* Ajustar iframes/embeds para mantener ratio */
.project-stills .still-content iframe {
    width: 100%;
    height: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    .project-stills {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 20px 0;
    }
}

/* Project Meta */
.project-meta {
    padding-left: 35%;
    margin-top: 15px;
}

.client-terms, .artist-terms {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
}

.client-terms {font-weight: normal;}
.client-terms a {font-weight: normal; font-style: normal;}

.work-header p.artist-terms {text-transform: uppercase; font-size:22px; line-height: 28px;}

.client-terms a, .artist-terms a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
    font-family: "Inter", serif;
}

.artist-terms a {font-weight: bold;}


.region-terms {
    font-size: 1.2rem;
}

.region-terms a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
    font-family: "Inter", serif;
}

.client-terms a:hover,
.region-terms a:hover {
    color: var(--p-hover-color);
}

@media (max-width: 768px) {
    .project-meta {
        padding-left: 0;
    }
}

/* Project Taxonomy Grid */
.project-taxonomy-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Por defecto 4 columnas */
    gap: 20px;
    padding-top:80px;
    padding-bottom:40px;
}

/* Grid cuando existe la columna de artistas */
.project-columns:has(.artists-column) .project-taxonomy-grid {
    grid-template-columns: repeat(5, 1fr);
}

.taxonomy-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.taxonomy-column h3 {
    font-size: 18px;
    color: var(--text-color);
    font-weight: normal;
    font-family: "Inter", serif;
    opacity: 0.7;
    margin: 0;
}

.taxonomy-column p {
    margin: 0;
}

.taxonomy-column a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 18px;
    line-height: 1.4;
    font-weight: bold;
    font-family: "Inter", serif;
    display: inline-block;
}

.taxonomy-column a:hover {
    color: var(--p-hover-color);
}

/* Entry Content */
.entry-content {
    width: 100%;
}

.entry-content img,
.entry-content video {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.single .entry-content iframe {
    width: 100%;
    aspect-ratio: 16/9;
    margin: 0 auto;
}

@media (max-width: 1450px) {
    .wrapper-content {
        max-width: 90%;
        width: 90%;
    }
}

@media (max-width: 1280px) {
    .project-taxonomy-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .project-columns:has(.artists-column) .project-taxonomy-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .project-title-column h1 {font-size: 40px; padding-left: 15px;}
    .project-meta {padding-left: 15px;}
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    
    .wrapper-content {
        width: 95%;
    }

    .description {margin-top:25px;}
    .client-terms, .artist-terms {margin-bottom:0px;}

    .project-meta, .project-title-column h1 {padding-left: 0px;}
    p.categories {display:none;}

    .forminator-ui#forminator-module-95.forminator-design--default .forminator-input, .forminator-ui#forminator-module-95.forminator-design--default .forminator-textarea {max-width: 100% !important;} 

    .project-taxonomy-grid,
    .project-columns:has(.artists-column) .project-taxonomy-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wrapper-content {padding: 0 5px !important;}
    #footer .wrapper-content {padding: 20px !important;}
    .project-taxonomy-grid {grid-template-columns: repeat(1, 1fr) !important;}


}

@media (max-width: 480px) {
    .project-taxonomy-grid,
    .project-columns:has(.artists-column) .project-taxonomy-grid {
        grid-template-columns: 1fr;
    }
    
    .project-full-video.inicio-substituto {
        margin-left: 0 !important; /* Eliminar margen negativo */
        width: 100% !important; /* Mantener dentro del contenedor */
    }
    
    #footer {
        margin-left: 0 !important; /* Eliminar margen negativo */
        width: 100% !important; /* Mantener dentro del contenedor */
        border-radius: 12px 12px 0 0;
    }
    
    /* Asegurar que el contenedor principal no cause scroll */
    #wrapper {
        width: 100%;
        overflow-x: hidden;
        position: relative;
    }

    #content {

        position: relative;
        z-index: 1;
    }

    .wrapper-content {

        position: relative;
        z-index: 1;
    }

    #footer {
        position: relative;
        z-index: 0;
    }
}

/* Case Studies */
.case-studies-block {
    margin-top: 70px;
}

.tax-artists .case-studies-block, .tax-clients .case-studies-block {margin-top:0px;}
.tax-artists .sections-header p {max-width: 50%;}

.page-id-11 .case-studies-block {margin-top:40px;}

.case-studies-block h2 {
    font-size: 25px;
    margin-bottom: 1rem;
}

/* Filtros */
.filter-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
    font-family: "Inter", serif;
}

.filter-button {
    padding: 8px 20px;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    background: var(--background-color);
    font-family: "Inter", serif;
    text-transform: uppercase;
}

.filter-button.active {
    background: var(--text-color);
    color: var(--background-color);
}

.filter-button:hover,
.filter-button.active {
    background: var(--border-color);
    border-color: var(--border-color);
    color: var(--text-hover-color);
}

.filter-dropdown {
    position: relative;
}

.filter-toggle {
    padding: 8px 20px;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    background: var(--background-color);
    color: var(--text-color);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
}

.filter-toggle .arrow {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.filter-toggle.active .arrow {
    transform: rotate(180deg);
}

.filter-toggle:hover {
    background: var(--border-color);
    border-color: var(--border-color);
    color: var(--text-hover-color);
}

.filter-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    margin-top: 0.5rem;
    padding: 0px;
    background: var(--background-color);
    border-radius: 0px;
    z-index: 100;
    padding-left:10px;
    padding-right:10px;
    padding-bottom: 10px;
}

.filter-menu.show {
    display: block;
}

.filter-option {
    display: block;
    padding: 8px 16px;
    color: var(--text-color);
    text-decoration: none;
    border: none;
    background: transparent;
    font-weight: bold;
    width: 100%;
    text-align: left;
    border-radius: 30px;
    font-size: 14px;

}

.filter-option:hover {
    background: var(--border-color);
    border-color: var(--border-color);
    color: var(--text-hover-color);
    width: 100%;
    text-align: left;
}

.filter-option.active {
    background: var(--text-color);
    color: var(--background-color);
    width: 100%;
}

/* Indentación para categorías de 2do y 3er nivel */
.filter-option.level-2 {
    padding-left: 24px;
    font-size: 0.9em;
}

.filter-option.level-3 {
    padding-left: 32px;
    font-size: 0.85em;
    opacity: 0.8;
    text-align: left;
}

/* Grid de proyectos */
#projects-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.project-card {
    position: relative;
    overflow: hidden;
    transition: opacity 0.4s ease-in-out;
}

/* Estilo para los nuevos elementos que se cargan */
.project-card.new-item {
    opacity: 0;
}

.project-card a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}



.project-card a:hover img {
    transform: scale(1.05);
}

/* Los dos primeros proyectos ocupan 3 columnas cada uno y son más panorámicos */
.project-card:nth-child(1),
.project-card:nth-child(2) {
    grid-column: span 3;
    aspect-ratio: 16/9; /* Aspecto panorámico 16:9 */
}

/* El resto de proyectos ocupan 2 columnas cada uno y mantienen aspecto cuadrado */
.project-card:nth-child(n+3) {
    grid-column: span 2;
    aspect-ratio: 1; /* Aspecto cuadrado 1:1 */
}

/* Estilos base de la caja de información */
.project-info {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    background: var(--background-color);
    padding: 1.10rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.project-info h2 {margin-bottom: 10px !important;}

/* Estilos del hover */
.project-card a:hover .project-info {
    background: var(--corpo-color);
    border-color: var(--corpo-color);
}

.project-card a:hover .project-info h2,
.project-card a:hover .project-info p {
    color: var(--text-hover-color-green);
}

.project-info h2 {
    font-family: "Inter", serif;
    font-size: 1.04rem !important;
    font-weight: bold;
    color: var(--text-color);
    margin: 0 0 0.5rem 0;
    line-height: 1.3 !important;
}

.section .project-info h2 {padding-bottom:0px;}

.project-info p {
    color: var(--text-color);
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0;
    max-width: 100% !important;
}

/* Ajustes responsive */
@media (max-width: 1024px) {
    #projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .project-card:nth-child(1),
    .project-card:nth-child(2),
    .project-card:nth-child(n+3), .related-works .project-card {
        grid-column: span 1;
        aspect-ratio: 1/1 !important;
    }
}

/* Acordeón de servicios */
.services-accordion {
    margin: 3rem 0;
}

.accordion-item {
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

.accordion-item:first-of-type {border-top: 1px solid var(--border-color);}


.accordion-header {
    width: 100%;
    padding: 15px;
    background: var(--background-color);
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.accordion-header .category-name {
    text-transform: uppercase;
    font-family: "Funnel Display", serif;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-color);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.accordion-icon {
    font-size: 2.2rem;
    font-family: "Funnel Display", serif;
    font-weight: normal;
    transition: transform 0.3s ease;
    line-height: 1;
    margin-top: -0.2rem;
}

/* Restauramos los estilos del hover */
.accordion-item:not(.no-content):not(.active):hover .accordion-header {
    color: var(--corpo-color);
}

.accordion-item:not(.no-content):not(.active):hover .category-name,
.accordion-item:not(.no-content):not(.active):hover .accordion-icon::before {
    color: var(--p-hover-color);
}

/* Símbolo del acordeón */
.accordion-item .accordion-icon::before {
    content: "+";
    color: var(--text-color);
}

/* Cuando está activo, el símbolo desaparece */
.accordion-item.active .accordion-icon::before {
    content: "";
}

/* Ajustar el espacio para mantener el alineamiento */
.accordion-item.active .accordion-icon {
    width: 20px; /* O el ancho que necesites para mantener el espacio */
    display: inline-block;
}

/* Estado activo (desplegado) */
.accordion-item.active .accordion-header {
    background-color: var(--background-color);
    color: var(--text-color);
}

.accordion-item.active .accordion-icon::before {
    color: var(--text-color);
}

/* Eliminar los estilos de hover cuando está activo */
.accordion-item.active:hover .accordion-header {
    background-color: var(--background-color);
    color: var(--text-color);
}

.accordion-item.active:hover .accordion-icon::before {
    color: var(--text-color);
}

.accordion-content {
    padding: 0px 15px 30px 15px; /* Sin padding superior, solo lateral e inferior */
    display: none; /* Oculto por defecto */
    margin-top: 0;
    position: relative;
    z-index: 5;
    overflow: hidden;
}


.category-content-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    position: relative;
    z-index: 6;
}

.category-title {
    min-height: 1px;
}

/* .category-details - estilos obsoletos eliminados */

.category-info {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.category-description {
    margin: 0;
    margin-top:2px;
    margin-bottom: 0px;
    font-family: "Inter", serif;
    color: var(--text-color);
    position: relative;
    z-index: 8;
}

.category-description p {font-size: 16px; line-height: 1.6; max-width: 100%;}
.tax-project_category .category-description {max-width: 65%;}
.tax-project_category .category-description p {font-size: 18px; line-height: 1.6;}

.subcategory-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.subcategory-tag {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    color: var(--text-color);
    text-decoration: none;
    font-family: "Inter", serif;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.3s ease;
}

.subcategory-tag:hover {
    background-color: var(--corpo-color);
    border-color: var(--corpo-color);
    color: var(--text-hover-color-green);
}

/* Ajuste responsive */
@media (max-width: 1350px) {
    .category-details {
        padding-right: 50px;
    }
}
@media (max-width: 1024px) {

    
    .category-content-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .category-details {
        padding-right: 0;
    }
}

/* Mantenemos algunos ajustes específicos para móvil */
@media (max-width: 768px) {
    /* Otros ajustes específicos para móviles si los necesitamos */
}

.accordion-item.no-content .accordion-header {
    cursor: default;
}

.accordion-item.no-content:hover {
    background: var(--background-color);
}

/* Desactivar el hover y efectos en items sin contenido */
.accordion-item.no-content .accordion-header:hover {
    background: var(--background-color);
}

/* Eliminar el espacio donde iría el icono cuando no hay contenido */
.accordion-item.no-content .accordion-header {
    padding-right: 1.5rem;
}

/* Clase activa para la animación */
.accordion-item.active .category-details {
    transform: translateY(0);
}

/* Home Solutions Section */
.home-solutions {
    padding: 80px 0;
    position: relative;
    z-index: 1;
    transform: translateZ(0);
    overflow: visible !important;
}

.solutions-grid {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    /* Altura natural del contenido más espacio para sticky 
    min-height: calc(100vh + 200px);*/
}

.solutions-intro {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    position: sticky;
    top: 100px;
    align-self: flex-start;
    height: fit-content;
    z-index: 10;
}

.solutions-list {
    flex: 0 0 66.666%;
    max-width: 66.666%;
    /* Altura natural del contenido */
    height: auto;
}

/* Solución específica para el problema de overflow que rompe sticky */
/* Aumentar especificidad para asegurar que se aplique */
#wrapper .wrapper-content .home-solutions {
    overflow: visible !important;
}

#wrapper .home-solutions {
    overflow: visible !important;
}

body .home-solutions {
    overflow: visible !important;
}

#container {
    overflow: visible !important;
}

#content {
    overflow: visible !important;
}



.solutions-intro h2, .home h2, .home-services h2, .home-case-studies h2 {
    font-size: 26px;
    font-family: "Inter", serif;
    line-height: 1;
    margin-bottom: 16px;
}

.solutions-intro p {
    font-size: 18px;
    line-height: 135%;
    color: var(--text-color);
    font-family: "Inter", serif;
    margin-bottom: 1.2em;
}

.solutions-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.solutions-list li a {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 20px;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    text-decoration: none;
}

.solutions-list li a:hover {
    background: var(--corpo-color);
    border-color: var(--corpo-color);
}

.solution-name {
    font-size: 30px;
    font-family: "Funnel Display", serif;
    font-weight: bold;
    color: var(--text-color);
}

.solution-arrow {
    font-size: 30px;
    color: var(--border-color);
    transition: transform 0.3s ease;
    margin-left: 20px;
    float:right;
}

.solutions-list li a:hover .solution-name {
    color: var(--text-hover-color-green);
}

.solutions-list li a:hover .solution-arrow {
    color: var(--text-hover-color-green);
    transform: translateX(10px);
}

/* Responsive */
@media (max-width: 1024px) {
    .solutions-grid {
        flex-direction: column;
        gap: 40px;
    }

    .solutions-intro {
        flex: none;
        max-width: 100%;
        position: static !important;
    }

    .solutions-list {
        flex: none;
        max-width: 100% !important;
        width: 100%;
    }
}

/* Mantener sticky en desktop - solo aplicar static en móviles */
@media (min-width: 1025px) {
    .solutions-intro {
        position: sticky !important;
    }
}

@media (max-width: 768px) {

    .solution-name, .box h3 {
        font-size: 26px;
    }

}

/* Subcategory Buttons */
.subcategory-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 40px 0;
    margin-top:0px;
}

.subcategory-button {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    background: var(--background-color);
    color: var(--text-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    font-family: "Inter", serif;
    text-transform: uppercase;
}

.subcategory-button:hover {
    background: var(--corpo-color);
    border-color: var(--corpo-color);
    color: #000;
}

/* Retraso en las subcategorías para efecto escalonado */
.accordion-item.active .subcategory-tags {
    transform: translateY(0);
}

/* Asegurar que el contenido está oculto antes de la animación */
.accordion-item:not(.active) .category-details,
.accordion-item:not(.active) .subcategory-tags {
    transform: translateY(-20px);
}

/* Hero Section - Estilos principales */
.hero-content {
    position: absolute;
    bottom: -150px;
    width: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.home-info {
    padding: 45px;
    background: var(--background-color);

    padding-bottom: 45px;
    padding-top: 30px;
    position: relative;
    margin: 0 auto;
}

.home-info h1 {
    font-size: 80px;
    line-height: 1;
    padding-bottom: 30px;
    font-family: "Funnel Display", serif;
    margin: 0;
}

.home-info p {
    font-size: 18px;
    line-height: 135%;
    margin-bottom: 0;
    max-width: 800px;
}

.home-services.section {padding-top: 140px;}


/* Responsive - Pantallas grandes */
@media (max-width: 1400px) {
    .home-info {
        width: 85%;
        padding: 40px;
    }
    
    .home-info h1 {
        font-size: 70px;
    }
}

@media (max-width: 1200px) {
    .home-info {
        width: 90%;
        padding: 35px;
    }
    
    .home-info h1 {
        font-size: 65px;
    }
    
    .home-info p {
        font-size: 16px;
    }
}

/* Responsive - Tabletas */
@media (max-width: 1024px) {
    .home-info {
        width: 90%;
        padding: 30px;
    }
    
    .home-info h1 {
        font-size: 60px;
        padding-bottom: 20px;
    }
    
    .home-info p {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .hero-section {
        height: calc(100vh - 80px);
    }
    
    /* En móvil, el home-info va debajo del vídeo */
    .hero-content {
        position: static;
        bottom: auto;
        margin-top: 20px;
        padding: 0 20px;
    }
    
    .home-info {
        width: 100%;
        padding: 30px 20px;
        margin: 0;
        background: var(--background-color);
    }
    
    .home-info h1 {
        font-size: 48px;
        padding-bottom: 20px;
        margin-top: 0;
    }
    
    .home-info p {
        font-size: 16px;
        opacity: 1 !important;
    }
}



@media (max-width: 1280px) {
.home-services.section {padding-top: 120px;}
}


/* Estilos móviles */
@media (max-width: 1340px) {
    /* Header y menú */
    #header {
        padding-top: 15px;
        min-height: 60px;
    }

    #branding {
        width: 145px;
        height: 135px;
        padding-left: 15px;
        top: 20px;
    }

    .tagline {
        font-size: 13px;
        line-height: 18px;
    }

    .menu-toggle {
        display: block;
        position: fixed;
        top: 15px;
        right: 40px;
        z-index: 999999999;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex-direction: row;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
    }

    .menu-toggle span {
        display: block;
        width: 2px;
        background-color: var(--text-color);
        transition: all 0.3s ease;
    }

    /* Alturas diferentes para crear el efecto onda */
    .menu-toggle span:nth-child(1) {
        height: 15px;
    }

    .menu-toggle span:nth-child(2) {
        height: 20px;
    }

    .menu-toggle span:nth-child(3) {
        height: 15px;
    }

    /* Estados del menú abierto */
    .menu-open .menu-toggle span:nth-child(1) {
        transform: translateX(6px) rotate(45deg);
        height: 20px;
    }

    .menu-open .menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    .menu-open .menu-toggle span:nth-child(3) {
        transform: translateX(-6px) rotate(-45deg);
        height: 20px;
    }

    .menu-container {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 102vh;
        background: var(--background-color);
        padding: 80px 20px;
        transition: 0.3s;
        z-index: 99999999;

    }

    .menu-open .menu-container {
        right: 0;
    }

    .menu-open .menu-container .menu-menu-container {margin:0 auto;}
    
    /* Para la página home, mantener el switch en su posición correcta */
    body.page-id-44 .theme-toggle {
        position: absolute !important;
        top: 0px !important;
        right: -20px !important;
        left: auto !important;
        bottom: auto !important;
    }
    
    .theme-toggle {position: absolute;
        display: block;
        width: 60px;
        height: 38px;
        left: 45%;
        bottom: 100px;
    }

    .menu-container ul {
        flex-direction: column;
        gap: 20px;
    }

    .menu-container ul li {
        width: 100%;
        text-align: center;
    }

    .menu-container ul li a {
        display: block;
        width: 100%;
        padding: 15px;
    }

    /* Hero Section - Limpiado */
    .hero-section {
        height: calc(100vh - 100px);
    }

    .hero-content {
        bottom: -40px;
        left: 0;
    }

    .home-info-desktop {display: none;}
    .home-info-mobile {display: block; margin-bottom: 40px;}
    .home-services.section {padding-top:0px !important;}
    .hero-section {margin-bottom:20px !important;}

    .home-info-mobile h1 {font-size: 60px; font-family: "Funnel Display", serif; line-height: 1; padding-bottom: 20px;}

    .home-info {
        padding: 30px;
        min-width: calc(100% - 40px);
        margin: 0 20px;
    }

    .home-info h1 {
        font-size: 60px;
        padding-bottom: 20px;
    }

    .home-info p {
        font-size: 16px;
        opacity: 1 !important;
    }

    .four-columns {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding: 20px 0;
        margin: 0;
        /* Ocultar scrollbar pero mantener funcionalidad */
        scrollbar-width: none;
        -ms-overflow-style: none;
        user-select: none; /* Prevenir selección de texto */
    }

    .four-columns::-webkit-scrollbar {
        display: none;
    }

    .four-columns .column {
        flex: 0 0 300px;
        margin-right: 0px;
        min-width: 300px;
    }

    .four-columns .column:first-child {
        margin-left: 20px;
    }

    .four-columns.active,
    .four-columns.active .box {
        cursor: grabbing !important;
    }

    /* Solutions Section */
    .solutions-grid {
        flex-direction: column;
        gap: 30px;
    }

    .solutions-intro {
        flex: none;
        max-width: 100%;
        position: static !important;
    }

    .solutions-list {
        flex: none;
        max-width: 100%;
    }

    /* General */
    .wrapper-content {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
    }

    .section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .section h2, .forminator-row h2 {
        font-size: 24px;
        line-height: 28px;
    }

    .project-info h2 {font-size: 1.1rem !important; line-height: 1.3 !important;}
    #projects-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 1024px) {
    .reel, .hero-section {height: 600px;}
    .menu-menu-corporate-container {width: 100% !important;}
}

@media (max-width: 768px) {
    .project-taxonomy-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin: 1.5rem 0;
    }

    .menu-toggle {right:15px;}

    #wrapper {padding-left:15px; padding-right: 15px;}
    
    .reel {min-height: 300px; height: 300px;}
    .home-services.section {padding-top:250px;}
    .wrapper-content {padding: 0 10px;}
    .four-columns {gap: 20px;}
    .project-info {padding:15px;}
    .sections-header h1 {font-size:60px; line-height:60px;}
    .accordion-header .category-name {font-size:18px;}
    .accordion-icon {font-size:25px;}
}

@media (max-width: 768px) {
    .accordion-header .category-name {
        font-size: 16px;
    }
    .accordion-icon {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .accordion-header .category-name {
        font-size: 14px;
    }
    .accordion-icon {
        font-size: 20px;
    }
}

@media (max-width: 950px) {
  .hero-section {height: 300px;}
}

@media (max-width: 560px) {
    .project-taxonomy-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin: 1rem 0;
        margin-top:0px;
    }

    .home-info h1 {
        font-size: 40px;
    }

    .solution-name {
        font-size: 20px;
    }

    .four-columns {margin-left:0px;}
    .client-logo {flex: 0 0 calc(50% - 10px) !important;}
    
    .taxonomy-column {
        gap: 0.25rem;
        margin-bottom:20px;
    }

    /* Estilos móviles específicos - Limpiado */
    .solutions-list ul li a {padding: 1px 20px 0px 20px; line-height:70px;}

    .section h2, .forminator-row h2 {font-size:22px; line-height:26px;}
    .home-info-mobile h1 {font-size: 50px;}
    .project-info h2 {font-size:16px !important; line-height:20px !important;}
    .project-info p {font-size: 14px !important;}
    .project-info {padding:10px; bottom: 1rem; left: 1rem; right: 1rem;}
    .sections-header h1 {font-size:50px; line-height:50px;}
    .category-description, .sections-header p {font-size:16px; margin-top:20px;}
    #projects-grid, .project-stills {gap: 20px; margin: 20px 0;}
    .work-header, .project-header {padding-bottom:0px;}
    .taxonomy-column h3 {margin-bottom:5px;}
    .team-grid {grid-template-columns: repeat(auto-fill, minmax(160px, 2fr)) !important;}
    p.team-position {line-height: 1.2; font-size: 0.9rem !important;}
    

    

}

/* Pagination */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding: 20px 0;
}

.pagination .prev-page {
    margin-right: auto; /* Empuja el botón a la izquierda */
}

.pagination .next-page {
    margin-left: auto; /* Empuja el botón a la derecha */
}

.pagination a {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    color: var(--text-color);
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
}

.pagination a:hover {
    background-color: var(--corpo-color);
    border-color: var(--corpo-color);
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .pagination {
        margin-top: 30px;
        padding: 15px 0;
    }

    .pagination a {
        padding: 6px 15px;
        font-size: 14px;
    }
}

/* Cursor personalizado */
html,
body,
body * {
    cursor: none !important;
}

/* Excepciones específicas donde necesitamos mantener el cursor */
.theme-toggle *,
input,
textarea,
select,
button.menu-toggle {
    cursor: pointer !important;
}

.cursor {
    pointer-events: none;
    position: fixed;
    z-index: 999999999;
    mix-blend-mode: difference;
    top: 0;
    left: 0;
    will-change: transform;
    width: 100%;
    height: 100vh;
    background: transparent;
}

.cursor-circle {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    mix-blend-mode: difference;
    will-change: transform;
    z-index: 999999999;
    opacity: 0;
    visibility: hidden;
}

.cursor-circle.visible {
    opacity: 1;
    visibility: visible;
}

/* Restaurar cursor original sobre iframes */
iframe {
    cursor: auto !important;
}

/* Ocultar cursor personalizado sobre iframes */
iframe:hover ~ .cursor-circle {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Mantener cursor nativo en móviles */
@media (max-width: 1024px) {
    html,
    body,
    body * {
        cursor: auto !important;
    }
    .cursor,
    .cursor-circle {
        display: none !important;
    }
}

/* Artists List */
.artists-grid {
    text-align: center;
    padding: 60px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.artist-link {
    display: inline-block;
    color: var(--text-color);
    text-decoration: none;
    margin: 5px 10px;
    font-family: "Funnel Display", serif;
    transition: color 0.3s ease;
}

.artist-link.featured {
    font-size: 45px;
    font-weight: bold;
}

.artist-link.regular {
    font-size: 32px;
}

.artist-link:hover {
    color: var(--corpo-color);
}

/* Responsive */
@media (max-width: 768px) {
    .artist-link.featured {
        font-size: 35px;
    }

    .artist-link.regular {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .artist-link.featured {
        font-size: 24px;
    }

    .artist-link.regular {
        font-size: 18px;
    }
}

.project-description {
    margin: 4rem 0;
    font-size: 1.2rem;
    line-height: 1.6;
}

.project-description h2 {font-size: 2rem; line-height: 2.5rem;}

@media (max-width: 768px) {
    .project-description {
        margin: 2rem 0;
        font-size: 1.1rem;
    }
}

/* Bloques de proyecto */
.project-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 40px 0;
    align-items: center;
}

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

.block-image p {margin:0px; line-height: inherit;}

.project-block .block-text p {
    font-size: 18px;
    line-height: 135%;
}

.project-block .block-text h2 {font-size: 2rem; line-height: 2.5rem; padding-bottom: 15px;}

/* Alineación específica para el bloque 2 */
.project-block-right .block-text {
    text-align: right;
}

/* Texto descriptivo 3 centrado */
.project-description {
    margin: 4rem 0;
    font-size: 1.2rem;
    line-height: 1.6;
    text-align: center;
}

.project-description h2 {
    font-size: 2rem; 
    line-height: 2.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .project-block {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 2rem 0;
    }

    .project-block-right {
        display: flex;
        flex-direction: column-reverse;
    }

    .project-block .block-text,
    .project-block-right .block-text {
        font-size: 1.1rem;
        text-align: left; /* Reset alineación en móvil */
    }

    .project-block .block-text h2 {
        font-size: 1.8rem;
        line-height: 2.2rem;
    }

    .project-description {
        margin: 2rem 0;
        font-size: 1.1rem;
        text-align: left; /* Reset alineación en móvil */
    }
}

/* Related Works */
.related-works {
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
}

.related-works > h2 {  /* Aplicar solo al h2 directo de related-works */
    font-size: 26px;
    line-height: 30px;
    padding-bottom: 30px;
}

.related-works #projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0;
}

/* Anular los estilos por defecto de project-card para related works */
.related-works .project-card {
    grid-column: span 1 !important;
    aspect-ratio: 16/9;
    margin-bottom: 0;
}

.related-works .project-card a {
    height: 100%;
}

.related-works .project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-works .project-info {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    background: var(--background-color);
    padding: 1.25rem;
    border: 1px solid var(--border-color);
}


@media (max-width: 768px) {
    .related-works {
        margin-top: 40px;
        padding-top: 20px;
    }
    
    .related-works #projects-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .related-works > h2 {  /* Mantener la especificidad */
        font-size: 24px;
        line-height: 28px;
    }

    .related-works .project-info {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        padding: 1rem;
    }
}

/* Large screens */
@media (min-width: 1850px) {
    .project-title-column h1 {font-size: 50px; line-height: 55px;}
    .wrapper-content {
        width: 80%;
        max-width: 1750px; /* Por seguridad, para pantallas extremadamente grandes */
        margin: 0 auto;
    }
}

/* Footer */
#footer {
    background-color:var(--footer-color);
    color: #FFF;
    padding: 60px 0;
    padding-bottom:20px;
    margin-top: 80px;
    -webkit-border-radius: 12px 12px 0px 0px;
    border-radius: 12px 12px 0px 0px; 

}

.footer-copyright {text-align: center; font-size:12px; color: #fff; margin-top: 30px; font-family: "Inter", serif;}
.footer-copyright a {color: #fff; text-decoration: underline;}

/* Borde blanco en modo oscuro */
[data-theme="dark"] #footer {
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
    border-top: 1px solid #FFF;
}

.footer-main {
    text-align: left;
    margin-bottom: 80px;
}

.footer-cta h2 {
    font-size: 50px;
    line-height: 54px;
    margin-bottom: 30px;
}

.footer-cta p {
    font-size: 20px;
    line-height: 135%;
    margin-bottom: 40px;
    max-width: 600px;
}

.footer-cta .cta-button {
    display: inline-block;
    background-color: #fff;
    color: #000;
    padding: 15px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-family: "Inter", serif;
    font-size: 16px;
    text-transform: uppercase;
}

.footer-cta .cta-button:hover {
    background-color: var(--corpo-color);
    color: #000; /* Negro para contrastar con el verde */

}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    border-top: 1px solid #FFF; /* Siempre blanco */
}

/* Mostrar siempre el logo blanco, independientemente del modo */
.footer-logo .footer-light-logo {
    display: block !important;
}

.footer-logo .footer-dark-logo {
    display: none !important;
}

.footer-logo .logo img {
    width: 100px;
    height: auto;
    display: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.footer-nav ul {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav a {
    color: #FFF; /* Siempre blanco */
    text-decoration: none;
    font-size: 16px;
    font-family: "Inter", serif;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: var(--corpo-color);
}

@media (max-width: 768px) {
    #footer {
        padding: 40px 0;
        margin-top: 40px;
    }

    .footer-cta h2 {
        font-size: 32px;
        line-height: 36px;
    }

    .footer-cta p {
        font-size: 18px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer-nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-logo .logo img {
        width: 80px;
    }
}

/* Project card video styles */
.project-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 18px;
}

.project-thumbnail img,
.project-thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-thumbnail video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
}

/* Asegurar que el hover funciona igual con vídeo */
.project-card:hover .project-thumbnail video,
.project-card:hover .project-thumbnail img {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.project-hero-video {
    width: 100%;
    margin-bottom: 40px;
    position: relative;
    aspect-ratio: 16/9;
    background: var(--background-color);
    overflow: hidden;
}

.project-hero-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

@media (max-width: 768px) {
    .project-hero-video {
        margin-bottom: 20px;
    }
}

/* Project Square Block */
.project-square {
    display: flex;
    align-items: center;
    gap: 80px;
    margin: 150px auto;
    padding: 0 180px;
    width: 100%;
    box-sizing: border-box;
}

.square-media {
    flex: 0 0 65%;
    aspect-ratio: 1/1;
    position: relative;
    overflow: hidden;
}

.square-media img,
.square-media video,
.square-media iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.square-description {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.square-description h2 {
    font-size: 30px;
    line-height: 34px;
    margin-bottom: 25px;
}

.square-description p {
    font-size: 18px;
    line-height: 135%;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .project-square {
        flex-direction: column;
        gap: 40px;
        margin: 40px 0;
        padding: 0;
    }

    .square-media {
        flex: 0 0 100%;
        width: 100%;
    }

    .square-description {
        flex: 0 0 100%;
        text-align: left;
    }
}

/* Full width image block */
.project-full-image {
    margin: 20px auto;
    width: 100%;
}

.project-full-image img,
.project-full-image video {
    width: 100%;
    height: auto;
    display: block;
}

.project-full-image p {padding-bottom:20px !important;}
.project-full-image p:last-of-type {padding-bottom: 0px !important;}

.project-full-image iframe {
    width: 100%;
    aspect-ratio: 16/9;
}


@media (max-width: 768px) {
    .project-full-image {
        margin: 20px auto;
    }
}

/* Metrics Block */
.project-metrics {
    display: grid;
    gap: 40px;
    margin: 150px auto;
    text-align: center;
}

/* Grid según número de métricas */
.metrics-count-1 {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.metrics-count-2 {
    grid-template-columns: repeat(2, 1fr);
}

.metrics-count-3 {
    grid-template-columns: repeat(3, 1fr);
}

.metrics-count-4 {
    grid-template-columns: repeat(4, 1fr);
}

.metric-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.metric-number {
    font-size: 64px;
    line-height: 1;
    font-weight: bold;
    font-family: "Funnel Display", serif;
}

.metric-description {
    font-size: 18px;
    line-height: 1.4;
    color: var(--text-color);
    font-family: "Inter", serif;
}

@media (max-width: 1024px) {
    .project-metrics {
        padding: 0 40px;
    }
    
    .metrics-count-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .project-metrics {
        padding: 0 20px;
        gap: 30px;
        margin: 40px auto;
    }

    .metrics-count-2,
    .metrics-count-3 {
        grid-template-columns: 1fr;
    }

    .metric-number {
        font-size: 48px;
    }

    .metric-description {
        font-size: 16px;
    }
}

/* Modificaciones para el bloque de texto wide */
.project-square.text-only {
    padding: 0 180px;
}

.project-square .wide-text {
    flex: 0 0 65%;
    padding-right: 0;
}

.project-square .square-empty {
    flex: 0 0 35%;
}

/* Grid de 3 columnas */
.project-stills.three-columns {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
    .project-stills.three-columns {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .project-square.text-only {
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    .project-stills.three-columns {
        grid-template-columns: 1fr;
    }
    
    .project-square.text-only {
        padding: 0 20px;
    }

    .project-square .wide-text {
        flex: 0 0 100%;
    }

    .project-square .square-empty {
        display: none;
    }
}

/* Reset de estilos para contenedores de media */
.project-hero-video p,
.project-full-image p,
.project-stills .still-content p,
.project-square:not(.text-only) p,
.square-media p {
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
}

/* Mantener estilos de texto solo donde corresponde */
.project-square.text-only p,
.square-description:not(.wide-text) p {
    margin-bottom: 15px;
    line-height: 1.4;
    font-size: 18px;
}

/* Asegurar que los iframes y videos mantienen sus proporciones */
.project-hero-video p iframe,
.project-full-image p iframe,
.project-stills .still-content p iframe,
.project-square:not(.text-only) p iframe,
.square-media p iframe,
.project-hero-video p video,
.project-full-image p video,
.project-stills .still-content p video,
.project-square:not(.text-only) p video,
.square-media p video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Loader para iframes */
.iframe-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.iframe-loader.loaded {
    opacity: 0;
    pointer-events: none;
}

.iframe-loader::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid var(--text-color);
    border-top-color: transparent;
    border-radius: 50%;
    animation: loader-spin 0.8s linear infinite;
}

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Contenedor de vídeo y overlay */
.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--background-color);
}

.video-container iframe {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.wp-video {width:100% !important;}

.video-container[data-vimeo-initialized="true"] iframe {
    opacity: 1;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: transparent;
}

/* Loader mejorado */
.iframe-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.iframe-loader.loaded {
    opacity: 0;
    pointer-events: none;
}

.iframe-loader::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid var(--text-color);
    border-top-color: transparent;
    border-radius: 50%;
    animation: loader-spin 0.8s linear infinite;
}

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Optimizaciones para móvil */
@media (max-width: 767px) {
    .video-container {
        will-change: transform;
        transform: translateZ(0);
    }
    
    .video-container iframe {
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

/* Ajustes específicos para cada tipo de contenedor */
.still-content .video-container,
.square-media .video-container {
    padding-bottom: 100%;
}

.pagination.filtered {
    display: none;
}

.video-hover-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 18px;
}

.video-hover-container img,
.video-hover-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Eliminar transición de fade */
    transition: none;
}

.video-hover-container video {
    opacity: 0;
}

.video-hover-container.playing video {
    opacity: 1;
}

.video-hover-container img {
    opacity: 1;
}

.video-hover-container.playing img {
    opacity: 0;
}

/* Eliminar transición del borde */
.box {
    transition: none;
}

.box.playing {
    border-color: var(--corpo-color);
}

.video-hover-container .light-image,
.video-hover-container .light-video {
    display: block;
}

.video-hover-container .dark-image,
.video-hover-container .dark-video {
    display: none;
}

[data-theme="dark"] .video-hover-container .light-image,
[data-theme="dark"] .video-hover-container .light-video {
    display: none;
}

[data-theme="dark"] .video-hover-container .dark-image,
[data-theme="dark"] .video-hover-container .dark-video {
    display: block;
}

/* Layout para el contenido de la categoría */
.category-content {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    padding: 0px ;
    margin-top:-21px;
}

.category-text {
    flex: 0 0 60%;
}

.category-media {
    flex: 0 0 40%;
    aspect-ratio: 1/1;
    background-color: #EEEEEE; /* Temporal, para visualizar el espacio */
    border-radius: 18px;
    overflow: hidden;
    display: none; /*Temporal deshabilitado*/
}

/* Estilos para la descripción */
.category-description {
    margin-bottom: 30px;
    font-size: 18px;
    line-height: 1.6;
}

.category-description p {
    margin-bottom: 1em;
    margin-left:5px;
}

.category-description strong {
    font-weight: bold;
}

/* Ajustes para los tags debajo de la descripción */
.category-text .subcategory-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .category-content {
        flex-direction: column;
        gap: 30px;
        padding: 20px 0;
    }

    .category-text,
    .category-media {
        flex: 0 0 100%;
    }

    p, .work-header p, .project-square.text-only p, .square-description:not(.wide-text) p {font-size: 16px !important; line-height: 135%;}
    .category-content {gap:0px !important;}
    .metrics-count-4 {grid-template-columns: repeat(1, 1fr);}
}

/* Layout para el contenido del acordeón - CONSOLIDADO */

.category-content {
    display: grid;
    grid-template-columns: 25% 50% 20%;
    gap: 2.5%;
    align-items: start;
    padding-top: 15px; /* Mismo padding superior que el header */
}

/* Título en la columna vacía */
.empty-column .category-title {
    text-transform: uppercase;
    font-family: "Funnel Display", serif;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-color);
    margin: 0;
    line-height: 1.2;
    display: block !important;
}

/* Contenido central */
.category-text {
    width: 100%;
}

/* Título dentro del texto central - OCULTO */
.category-text .category-title {
    display: none;
}

.category-description {
    margin-bottom: 30px;
    font-size: 18px;
    line-height: 1.6;
}

.category-description p {
    margin-bottom: 1em;
}

.category-description strong {
    font-weight: bold;
}

/* Media a la derecha */
.category-media {
    aspect-ratio: 1/1;
    background-color: #EEEEEE;
    border-radius: 18px;
    overflow: hidden;
    /* Añadir estas propiedades para centrar verticalmente */
    align-self: center;
}

.media-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 1500px) {
    .category-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .accordion-content {padding: 0px 0; padding-top: 0px !important; padding-left: 20px !important;}

    .accordion-content {
        margin-top: 0;
        padding-top: 0px;
    }

    .category-media {display:none;}
}


@media (max-width: 1024px) {
    .category-title {
        font-size: 28px;
    }
}

/* Grid de logos de clientes */
.clients-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
    justify-content: center;
}

.client-logo {
    flex: 0 0 calc(16.666% - 17px); /* Para 6 logos por fila, considerando el gap */
    aspect-ratio: 3/2;
    background-color: var(--box-color);
    border-radius: 18px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
}

.client-logo img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-width: 85%;
    max-height: 75%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}


.client-logo.logo-latara img, .client-logo.logo-byp img, .client-logo.logo-bmg img, .client-logo.logo-berin-iglesias img, .client-logo.logo-lionfish img {
    max-width: 70%;
    max-height: 70%;
}

.client-logo.logo-imes img, .client-logo.logo-indiemono img, .client-logo.logo-lionfish img {max-width: 60%; max-height: 60%;}
.client-logo.logo-sala-fitz img {max-width: 50%; max-height: 50%;}

/* Solo aplicar hover a los logos que son enlaces */
a.client-logo:hover {
    transform: scale(1.05);
}

/* Eliminar el hover de los divs */
div.client-logo:hover {
    transform: none;
}

/* Responsive */
@media (max-width: 1200px) {
    .clients-grid {
        gap: 15px;
    }
    .client-logo {
        flex: 0 0 calc(25% - 12px); /* Para 4 logos por fila */
    }
}

@media (max-width: 768px) {
    .client-logo {
        flex: 0 0 calc(33.333% - 10px); /* Para 3 logos por fila */
        padding: 20px;
    }
}
 

/* Ajustes específicos por cliente */
.logo-sony img {
    max-width: 90%;
}

.logo-universal img {
    max-width: 90%;
}

/* Manejo de logos según el tema */
.client-logo {
    position: relative;
}

.client-logo img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    max-width: 85%;
    max-height: 75%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.client-logo .light-logo {
    opacity: 1;
}

.client-logo .dark-logo {
    opacity: 0;
}

/* Tema oscuro */
[data-theme="dark"] .client-logo .light-logo {
    opacity: 0;
}

[data-theme="dark"] .client-logo .dark-logo {
    opacity: 1;
}

/* Ajustes específicos para logos más pequeños */
.client-logo.logo-imes img, 
.client-logo.logo-latara img, 
.client-logo.logo-byp img, 
.client-logo.logo-bmg img, 
.client-logo.logo-berin-iglesias img {
    max-width: 70%;
    max-height: 70%;
}

/* Equilibrado de peso visual para logos más pesados */
.client-logo.logo-altafonte img {
    max-width: 60%;
    max-height: 60%;
}

.client-logo.logo-fundacion-fad img {
    max-width: 65%;
    max-height: 65%;
}

.client-logo.logo-drogopedia img {
    max-width: 55%;
    max-height: 55%;
}

/* Equilibrado específico para logos Social Impact más pesados */
.client-logo.logo-maldita img {
    max-width: 60%;
    max-height: 60%;
}

.client-logo.logo-ministerio-transportes img {
    max-width: 90%;
    max-height: 90%;
}

.client-logo.logo-fundacion-la-caixa img {
    max-width: 65%;
    max-height: 65%;
}

.client-logo.logo-universidad-almeria img {
    max-width: 70%;
    max-height: 70%;
}

.client-logo.logo-lanzadera img {
    max-width: 75%;
    max-height: 75%;
}

.client-logo.logo-centac img {
    max-width: 80%;
    max-height: 80%;
}

.client-logo.logo-ineco img {
    max-width: 75%;
    max-height: 75%;
}

.client-logo.logo-fundacion-porcausa img {
    max-width: 80%;
    max-height: 80%;
}

/* Balanceado adicional para logos promedio */
.client-logo.logo-mendesaltaren img {
    max-width: 80%;
    max-height: 80%;
}

.client-logo.logo-gts img {
    max-width: 75%;
    max-height: 75%;
}

/* Ajustes específicos para los nuevos clientes de la home */
.client-logo.logo-repsol img {
    max-width: 80%;
    max-height: 80%;
}

.client-logo.logo-warner-media img {
    max-width: 70%;
    max-height: 70%;
}

.client-logo.logo-lindt img {
    max-width: 75%;
    max-height: 75%;
}

/* Ajustes específicos para logos de streaming-content - equilibrio visual */
.client-logo.logo-warner-bros img {
    max-width: 75%;
    max-height: 75%;
}

.client-logo.logo-netflix img {
    max-width: 70%;
    max-height: 70%;
}

.client-logo.logo-sony-music img {
    max-width: 75%;
    max-height: 75%;
}

.client-logo.logo-fundacion-fad-juventud img {
    max-width: 60%;
    max-height: 60%;
}

.client-logo.logo-riviera img {
    max-width: 65%;
    max-height: 65%;
}

.client-logo.logo-drogopedia img {
    max-width: 70%;
    max-height: 70%;
}

.client-logo.logo-broadcaster img {
    max-width: 75%;
    max-height: 75%;
}

.client-logo.logo-sala-fitz img {
    max-width: 60%;
    max-height: 60%;
}

.client-logo.logo-filmarkethub img {
    max-width: 85%;
    max-height: 85%;
}

.client-logo.logo-cuatro img {
    max-width: 70%;
    max-height: 70%;
}

.client-logo.logo-mediaset-espana img {
    max-width: 65%;
    max-height: 65%;
}

.client-logo.logo-motionographer img {
    max-width: 75%;
    max-height: 75%;
}

/* Ajustes específicos para logos de corporate - equilibrio visual para 3 filas de 6 */
.client-logo.logo-inditex img {
    max-width: 60%;
    max-height: 60%;
}

.client-logo.logo-santander img {
    max-width: 70%;
    max-height: 70%;
}

.client-logo.logo-repsol img {
    max-width: 80%;
    max-height: 80%;
}

.client-logo.logo-telefonica img {
    max-width: 70%;
    max-height: 70%;
}

.client-logo.logo-accor img {
    max-width: 75%;
    max-height: 75%;
}

.client-logo.logo-lindt img {
    max-width: 70%;
    max-height: 70%;
}

.client-logo.logo-breitling img {
    max-width: 65%;
    max-height: 65%;
}

.client-logo.logo-universal-geneve img {
    max-width: 60%;
    max-height: 60%;
}

.client-logo.logo-dormakaba img {
    max-width: 85%;
    max-height: 85%;
}

.client-logo.logo-job-talent img {
    max-width: 60%;
    max-height: 60%;
}

.client-logo.logo-unicaja img {
    max-width: 75%;
    max-height: 75%;
}

.client-logo.logo-ministerio-transportes-mobilidad img {
    max-width: 75%;
    max-height: 75%;
}

.client-logo.logo-ineco img {
    max-width: 65%;
    max-height: 65%;
}

.client-logo.logo-redeia img {
    max-width: 65%;
    max-height: 65%;
}

.client-logo.logo-ied img {
    max-width: 70%;
    max-height: 70%;
}

.client-logo.logo-mendesaltaren img {
    max-width: 85%;
    max-height: 85%;
}

.client-logo.logo-padel-nuestro img {
    max-width: 75%;
    max-height: 75%;
}

.client-logo.logo-tiny-bird img {
    max-width: 80%;
    max-height: 80%;
}

/* Job & Talent - logo muy pesado visualmente, lo reducimos significativamente */
.client-logo.logo-job-talent img {
    max-width: 60%;
    max-height: 60%;
}

.client-logo.logo-accor img {
    max-width: 65%;
    max-height: 65%;
}

.client-logo.logo-santander img {
    max-width: 75%;
    max-height: 75%;
}

/* PorCausa - también pesado visualmente */
.client-logo.logo-fundacion-porcausa img {
    max-width: 65%;
    max-height: 65%;
}

/* Estilos para inputs de Forminator en focus */
.forminator-ui#forminator-module-95.forminator-design--default .forminator-input:focus,
.forminator-ui#forminator-module-95.forminator-design--default .forminator-textarea:focus {
    border-color: var(--corpo-color) !important;
}

/* También para el select cuando está abierto */
.forminator-ui#forminator-module-95.forminator-design--default .forminator-select2 + .forminator-select.select2-container--open .selection .select2-selection--single[role="combobox"] {
    border-color: var(--corpo-color) !important;
}

/* Para mantener consistencia en el hover */
.forminator-ui#forminator-module-95.forminator-design--default .forminator-input:hover,
.forminator-ui#forminator-module-95.forminator-design--default .forminator-textarea:hover,
.forminator-ui#forminator-module-95.forminator-design--default .forminator-select2:hover {
    border-color: var(--corpo-color) !important;
}

/* Estilos para el select de Forminator */
.forminator-select-dropdown-container--open .forminator-custom-form-95.forminator-dropdown--default {
    background-color: var(--background-color) !important;
    margin-top: 5px !important;
    padding: 10px 0 !important;
}

/* Estilos para las opciones del select */
.forminator-select-dropdown-container--open .forminator-custom-form-95.forminator-dropdown--default .forminator-dropdown-list li {
    color: var(--text-color) !important;
    padding: 8px 20px !important;
    transition: all 0.2s ease !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    border: none !important;
}

.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-dropdown--default .select2-results .select2-results__options .select2-results__option {border-radius: 12px !important; padding-left:30px !important;}
.forminator-ui.forminator-custom-form[data-design=default] select.forminator-select2+.forminator-select {max-width: 300px !important; min-width: 300px !important;}


/* Hover en las opciones */
.forminator-select-dropdown-container--open .forminator-custom-form-95.forminator-dropdown--default .forminator-dropdown-list li:hover {
    background-color: white !important;
    color: black !important;
}

/* Opción seleccionada */
.forminator-select-dropdown-container--open .forminator-custom-form-95.forminator-dropdown--default .forminator-dropdown-list li.forminator-dropdown-item-active {
    background-color: white !important;
    color: black !important;
}

/* Ajuste del select cerrado */
.forminator-ui#forminator-module-95.forminator-design--default .forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"] {
    border-radius: 12px !important;
    background-color: #FFF;
    color: #000;
    border: 1px solid var(--border-color) !important;
    padding: 0px 20px !important;
    height: auto !important;
    font-size: 14px !important;
}

.forminator-select-dropdown-container--open .forminator-custom-form-95.forminator-dropdown--default .select2-results .select2-results__options .select2-results__option.select2-results__option--selected, .forminator-select-dropdown-container--open .forminator-custom-form-95.forminator-dropdown--default .select2-results .select2-results__options .select2-results__option.select2-results__option--selected span:not(.forminator-checkbox-box) {background-color: #000 !important;}

/* Ajuste de la flecha del select */
.forminator-ui#forminator-module-95.forminator-design--default .forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"] .select2-selection__arrow {
    height: 100% !important;
}

.forminator-select.forminator-select-dropdown-container--open .forminator-select-dropdown.forminator-dropdown--default .select2-results .select2-results__options .select2-results__option, .forminator-ui#forminator-module-95.forminator-design--default .forminator-select2 + .forminator-select.select2-container--open .selection .select2-selection--single[role="combobox"], .forminator-ui#forminator-module-95.forminator-design--default select.forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"] .select2-selection__rendered {font-family: "Inter", serif !important;}

.forminator-ui#forminator-module-95.forminator-design--default .forminator-input, .forminator-ui#forminator-module-95.forminator-design--default .forminator-textarea {max-width: 80%;}

/* Estilos para la lista de artistas */
.artists-list {
    margin-top: 40px;
}

.artists-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: flex-start;
    justify-content: flex-start;
}

.artists-list li {
    font-family: "Funnel Display", serif;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
}

.artists-list a {
    color: var(--text-color);
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid var(--border-color);
    border-radius: 100px;
    color: var(--text-color);
    text-decoration: none;
    font-family: "Inter", serif;
    font-weight: 700;
    font-size: 16px;;
}

.artists-list a:hover {
    color: var(--text-hover-color-green);
    border: 1px solid var(--border-hover-color);
    background-color: var(--corpo-color);
}

/* Responsive */
@media (max-width: 1024px) {
    .artists-list li {
        font-size: 28px;
    }

    .tax-artists .sections-header p {max-width: 100%;}

}

@media (max-width: 768px) {
    .artists-list li {
        font-size: 24px;
    }
    
    .artists-list ul {
        gap: 10px 10px;
    }
}

@media (max-width: 480px) {
    .artists-list li {
        font-size: 20px;
    }
    
    .artists-list ul {
        gap: 10px 10px;
    }
}

/* Estilos para el botón de cargar más */
.load-more-container {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.load-more-button {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 12px 30px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.load-more-button:hover {
    background-color: var(--corpo-color);
    border-color: var(--corpo-color);
    color: var(--text-color);
}

.load-more-button.loading {
    opacity: 0.5;
    cursor: wait;
    position: relative;
    padding-right: 40px;
}

.load-more-button.loading::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    border: 2px solid var(--text-color);
    border-top-color: transparent;
    border-radius: 50%;
    animation: button-loading 0.6s linear infinite;
}

@keyframes button-loading {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}



.project-full-video {
    width: 100%;
    margin: 2rem auto;
    position: relative;
    overflow: hidden;
    max-width: 1920px; /* o el ancho máximo que desees */
}

.project-full-video.inicio-substituto {margin:0px;}
.project-full-video.inicio-substituto p {margin:0px;}

.project-full-video iframe {
    aspect-ratio: 16/9;
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Corregir el wrapper de Vimeo */
.project-full-video .fluid-width-video-wrapper {
    padding: 0 !important;
    position: relative;
    height: 0;
    padding-bottom: 56.25% !important; /* ratio 16:9 */
}

.project-full-video .fluid-width-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Para videos nativos */
.project-full-video video {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16/9;
}

/* Font display strategies */
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap; /* Mostrar texto con fuente de respaldo mientras se carga */
  src: url(https://fonts.gstatic.com/s/funneldisplay/v1/1Ptsg8LOU_aOmQvTsF44TYFv2Q1z.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Opcional: añadir una fuente de respaldo similar para evitar cambios bruscos de layout */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Funnel Display', Georgia, serif;
}

/* Animación de transición de página */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Aplicar la animación al contenido principal */
#content {
  animation: fadeIn 0.6s ease-out forwards;
}

/* Evitar animación en dispositivos que prefieren reducir el movimiento */
@media (prefers-reduced-motion: reduce) {
  #content {
    animation: none;
  }
}

/* Estilos para el loading state */
#projects-grid.loading {
    opacity: 0.6;
    transition: opacity 0.3s;
    position: relative;
}

#projects-grid.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    border-top-color: #000;
    animation: spin 1s ease-in-out infinite;
}

.load-more-button.loading {
    opacity: 0.7;
    cursor: wait;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Estilo para los resultados vacíos */
.no-results {
    text-align: center;
    padding: 2rem;
    font-size: 1.2rem;
    color: #666;
}

/* Estilos para el botón Load More */
.load-more-container {
    display: block;
    width: 100%;
    text-align: center;
    margin: 2rem 0;
    clear: both;
}

html[data-theme="dark"] .load-more-button {
    background-color: #fff;
    color: #000;
}

html[data-theme="dark"] .load-more-button:hover {
    background-color: var(--corpo-color);
}

/* Estilos unificados para el botón Load More en toda la web */
.load-more-container {
    width: 100%;
    text-align: center;
    margin: 3rem 0;
    clear: both;
}


html[data-theme="dark"] .load-more-button {
    background-color: #fff;
    color: #000;
}

html[data-theme="dark"] .load-more-button:hover {
    background-color: var(--corpo-color);
}

/* Animación para hero-content */
@keyframes heroContentSlideUp {
    0% {
        bottom: -230px;
        opacity: 1;
        transform: scaleY(0.1);
        transform-origin: bottom;
    }
    100% {
        bottom: -146px;
        opacity: 1;
        transform: scaleY(1);
        transform-origin: bottom;
    }
}

/* Animación para las letras */
@keyframes typeIn {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Animación para el párrafo */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Estado inicial antes de la animación */
.home .hero-content {
    opacity: 1;
    will-change: transform;
    pointer-events: none;
    z-index: 9999;
    transform-origin: bottom;
}

/* Clase que se añadirá cuando el vídeo esté listo */
.home .hero-content.animate {
    animation: heroContentSlideUp 0.6s ease-out forwards !important;
    pointer-events: auto;
}


/* Estilos para el texto animado */
.hero-title span {
    display: inline-block;
    position: relative;
    overflow: hidden;
    color: transparent;
    line-height: 85%;
}

.hero-title span::before {
    content: attr(data-letter);
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(100%);
    color: #000;
}

html[data-theme="dark"] .hero-title span::before {
    color: #fff;
}

.hero-content.animate .hero-title span::before {
    animation: typeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


/* Ocultar el párrafo inicialmente */
.home-info p {
    opacity: 0;
}

/* Animar el párrafo después de que termine la animación de las letras */
.hero-content.animate .home-info p {
    animation: fadeIn 0.8s ease-out forwards;
    animation-delay: 0.8s; /* Reducido de 1s a 0.8s para coincidir con el nuevo tiempo */
}

/* Retrasar cada letra secuencialmente 
.hero-content.animate .hero-title span:nth-child(1)::before { animation-delay: 0.40s; }
.hero-content.animate .hero-title span:nth-child(2)::before { animation-delay: 0.44s; }
.hero-content.animate .hero-title span:nth-child(3)::before { animation-delay: 0.48s; }
.hero-content.animate .hero-title span:nth-child(4)::before { animation-delay: 0.52s; }
.hero-content.animate .hero-title span:nth-child(5)::before { animation-delay: 0.56s; }
.hero-content.animate .hero-title span:nth-child(6)::before { animation-delay: 0.60s; }
.hero-content.animate .hero-title span:nth-child(7)::before { animation-delay: 0.64s; }
.hero-content.animate .hero-title span:nth-child(8)::before { animation-delay: 0.68s; }
.hero-content.animate .hero-title span:nth-child(9)::before { animation-delay: 0.72s; }
.hero-content.animate .hero-title span:nth-child(10)::before { animation-delay: 0.76s; }
.hero-content.animate .hero-title span:nth-child(11)::before { animation-delay: 0.80s; }
.hero-content.animate .hero-title span:nth-child(12)::before { animation-delay: 0.84s; }
.hero-content.animate .hero-title span:nth-child(13)::before { animation-delay: 0.88s; }
.hero-content.animate .hero-title span:nth-child(14)::before { animation-delay: 0.92s; }
.hero-content.animate .hero-title span:nth-child(15)::before { animation-delay: 0.96s; }
.hero-content.animate .hero-title span:nth-child(16)::before { animation-delay: 1.00s; }
.hero-content.animate .hero-title span:nth-child(17)::before { animation-delay: 1.04s; }
.hero-content.animate .hero-title span:nth-child(18)::before { animation-delay: 1.08s; }
.hero-content.animate .hero-title span:nth-child(19)::before { animation-delay: 1.12s; }
.hero-content.animate .hero-title span:nth-child(20)::before { animation-delay: 1.16s; }
.hero-content.animate .hero-title span:nth-child(21)::before { animation-delay: 1.20s; }
.hero-content.animate .hero-title span:nth-child(22)::before { animation-delay: 1.24s; }
.hero-content.animate .hero-title span:nth-child(23)::before { animation-delay: 1.28s; }
.hero-content.animate .hero-title span:nth-child(24)::before { animation-delay: 1.20s; }
.hero-content.animate .hero-title span:nth-child(25)::before { animation-delay: 1.24s; }
.hero-content.animate .hero-title span:nth-child(26)::before { animation-delay: 1.28s; }
*/

.hero-content.animate .hero-title span:nth-child(1)::before { animation-delay: 0.40s; }
.hero-content.animate .hero-title span:nth-child(2)::before { animation-delay: 0.40s; }
.hero-content.animate .hero-title span:nth-child(3)::before { animation-delay: 0.40s; }
.hero-content.animate .hero-title span:nth-child(4)::before { animation-delay: 0.40s; }
.hero-content.animate .hero-title span:nth-child(5)::before { animation-delay: 0.40s; }
.hero-content.animate .hero-title span:nth-child(6)::before { animation-delay: 0.40s; }
.hero-content.animate .hero-title span:nth-child(7)::before { animation-delay: 0.40s; }
.hero-content.animate .hero-title span:nth-child(8)::before { animation-delay: 0.40s; }
.hero-content.animate .hero-title span:nth-child(9)::before { animation-delay: 0.40s; }
.hero-content.animate .hero-title span:nth-child(10)::before { animation-delay: 0.40s; }
.hero-content.animate .hero-title span:nth-child(11)::before { animation-delay: 0.50s; }
.hero-content.animate .hero-title span:nth-child(12)::before { animation-delay: 0.50s; }
.hero-content.animate .hero-title span:nth-child(13)::before { animation-delay: 0.50s; }
.hero-content.animate .hero-title span:nth-child(14)::before { animation-delay: 0.50s; }
.hero-content.animate .hero-title span:nth-child(15)::before { animation-delay: 0.50s; }
.hero-content.animate .hero-title span:nth-child(16)::before { animation-delay: 0.50s; }
.hero-content.animate .hero-title span:nth-child(17)::before { animation-delay: 0.50s; }
.hero-content.animate .hero-title span:nth-child(18)::before { animation-delay: 0.50s; }
.hero-content.animate .hero-title span:nth-child(19)::before { animation-delay: 0.50s; }
.hero-content.animate .hero-title span:nth-child(20)::before { animation-delay: 0.50s; }
.hero-content.animate .hero-title span:nth-child(21)::before { animation-delay: 0.50s; }
.hero-content.animate .hero-title span:nth-child(22)::before { animation-delay: 0.50s; }
.hero-content.animate .hero-title span:nth-child(23)::before { animation-delay: 0.50s; }
.hero-content.animate .hero-title span:nth-child(24)::before { animation-delay: 0.50s; }
.hero-content.animate .hero-title span:nth-child(25)::before { animation-delay: 0.50s; }
.hero-content.animate .hero-title span:nth-child(26)::before { animation-delay: 0.50s; }



/* Optimizaciones para rendimiento en móviles */
@media (max-width: 767px) {
    .reel {
        will-change: transform; /* Optimizar compositing */
        transform: translateZ(0); /* Forzar GPU rendering */
    }
    
    .hero-content {
        will-change: transform;
        transform: translateZ(0);
    }
    
    /* Prevenir reflows durante animaciones */
    .hero-title span {
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

/* Animación de entrada para páginas (excepto home) */
@keyframes pageEnter {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* En móvil, mostrar hero-content sin animación */
@media (max-width: 768px) {
    body .wrapper-content .hero-content,
    body:not(.home) .wrapper-content .hero-content,
    body .hero-content,
    body:not(.home) .hero-content {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        bottom: -300px !important;
        pointer-events: auto !important;
        position: absolute !important;
    }
}

html body .wrapper-content .hero-content.animate,
html body:not(.home) .wrapper-content .hero-content.animate {
    animation: heroContentSlideUp 0.6s ease-out forwards !important;
    pointer-events: auto !important;
}


/* REGLAS SIMPLES PARA HERO-CONTENT - SOLO PARA QUE SE MUESTRE */
/* Primero aseguremos que el contenido se vea */
.hero-content {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    position: absolute !important;
    bottom: -150px !important;
    width: 100% !important;
    z-index: 9999 !important;
    justify-content: center !important;
    align-items: flex-end !important;
}

body:not(.home) .wrapper-content {
    animation: pageEnter 0.6s ease-out;
    opacity: 1;
    transform: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Optimización de fuentes */
@font-face {
    font-family: 'Funnel Display';
    font-display: swap; /* Esto evita el FOIT (Flash of Invisible Text) */
    src: local('Funnel Display');
}

/* Fallback mientras se carga la fuente */
.funnel-display-normal,
.funnel-display-bold,
h1 {
    font-family: 'Funnel Display', Georgia, serif;
}

h2, h3 {font-family: "Inter", serif;}

/* Prevenir cambios de layout durante la carga */
.hero-title h1,
.project-title,
.section-title {
    font-display: swap;
}

/* Fix para el problema de navegación en Safari */
/* 1. Eliminar la duplicación de animación */
/* 2. Agregar reglas específicas para Safari */

/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        body:not(.home) .wrapper-content {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
        }
        
        body:not(.home) #content {
            opacity: 1 !important;
            visibility: visible !important;
        }
        
    }
}

/* Deshabilitar animaciones en móvil para evitar problemas con la navegación hacia atrás */
@media (max-width: 768px) {
    body:not(.home) .wrapper-content {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    /* Asegurar que el contenido es siempre visible */
    #content, 
    .wrapper-content {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Fix para Safari en móvil */
    html.safari body:not(.home) #content,
    html.safari body:not(.home) .wrapper-content {
        will-change: auto;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    
}

/* Detectar cuando la página viene de historial para evitar animaciones */
@media (prefers-reduced-motion: no-preference) {
    .wf-navigation-back .wrapper-content {
        animation: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
}

/* Asegurar que el contenido siempre tenga altura suficiente */
#content {
    min-height: 50vh;
}

/* SOLUCIÓN CRÍTICA PARA SAFARI - aplicar al inicio del archivo para máxima prioridad */

/* Forzar visibilidad permanente de todos los elementos clave */
body, #wrapper, #content, .wrapper-content, .entry-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 1px !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    -webkit-transition: none !important;
    -webkit-animation: none !important;
    position: static !important;
}

/* Fix específico para Safari y dispositivos móviles */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        /* Safari específicamente */
        #content {
            min-height: 50vh !important;
            height: auto !important;
            position: relative !important;
            z-index: 10 !important;
        }
        
        .wrapper-content {
            position: relative !important;
            z-index: 10 !important;
            display: block !important;
            min-height: 50vh !important;
            height: auto !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        .project-columns, .project-stills, .project-meta, .project-description {
            visibility: visible !important;
            opacity: 1 !important;
            position: relative !important;
            z-index: 20 !important;
        }
    }
}

/* Regla específica para Safari iOS */
@supports (-webkit-touch-callout: none) {
    #content {
        height: auto !important;
        min-height: 50vh !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    .wrapper-content {
        position: relative !important;
        z-index: 10 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Estilos aplicados solo cuando se navega hacia atrás (usando clase especial) */
.navigating-back #content,
.navigating-back .wrapper-content,
.navigating-back .project-columns,
.navigating-back .project-stills,
.navigating-back .project-meta,
.navigating-back .project-description {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* En vista móvil */
@media (max-width: 768px) {
    #content {
        min-height: 50vh !important;
        height: auto !important;
        position: relative !important;
        z-index: 10 !important;
        display: block !important;
    }
    
    .wrapper-content {
        position: relative !important;
        z-index: 20 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Los contenedores de proyectos deben ser visibles */
    .project-columns, 
    .project-stills, 
    .project-meta, 
    .project-description, 
    .project-taxonomy-grid,
    .taxonomy-column {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 30 !important;
    }
}

/* Reemplazar con una solución más balanceada */
/* Fix para Safari Mobile - Solución balanceada */
@media (max-width: 768px) {
    /* Desactivar animaciones solo en Safari y solo para navegación */
    body:not(.home) .wrapper-content {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
    }
    
    /* Asegurar que los contenedores principales son visibles */
    #content, 
    .entry-content, 
    .wrapper-content {
        min-height: 50vh;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Fix específico para Safari en iOS */
    @supports (-webkit-touch-callout: none) {
        /* Solo para páginas de trabajo individual */
        .single-work #content {
            min-height: 50vh;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* Forzar visualización del contenido principal en páginas de trabajo */
        .single-work .project-columns,
        .single-work .project-description,
        .single-work .project-stills,
        .single-work .project-taxonomy-grid {
            visibility: visible !important;
            opacity: 1 !important;
            display: block !important;
        }
        
        /* Conservar posicionamiento original */
        .project-columns, 
        .project-stills, 
        .project-meta, 
        .project-description {
            visibility: visible !important;
            opacity: 1 !important;
        }
    }
}

/* Detección específica para Safari */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        @media (max-width: 768px) {
            /* Safari específicamente */
            .single-work #content {
                min-height: 50vh;
                visibility: visible !important;
                opacity: 1 !important;
            }
            
            /* Tratar solo el problema de navegación hacia atrás sin afectar los estilos */
            .single-work.history-navigation .wrapper-content,
            .single-work.history-navigation .project-columns,
            .single-work.history-navigation .project-stills {
                visibility: visible !important;
                opacity: 1 !important;
            }
        }
    }
}

/* Estilos para transiciones de página */
#container {
    will-change: opacity, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateY(0);
    opacity: 1;
}

/* Desactivar transiciones para usuarios que prefieren reducir el movimiento */
@media (prefers-reduced-motion: reduce) {
    #container, .js-transitions-enabled #container {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Asegurar que el contenido siempre sea visible en Safari */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        #container {
            opacity: 1 !important;
            transform: none !important;
        }
    }
}

/* Restaurar transiciones cuando se usa JavaScript */
.js-transitions-enabled #container {
    transition: opacity 0.8s ease, transform 0.8s ease !important;
}

/* Estilos específicos para Safari */
html.safari.js-transitions-enabled #container {
    transition: opacity 1s ease, transform 1s ease !important;
}

/* Fallback para Safari cuando hay problemas */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        .js-transitions-disabled #container {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
        }
    }
}

/* Asegurar que el contenido siempre sea visible en caso de error */
html.no-js #container {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Estilos específicos para la transición de entrada */
.js-transitions-enabled.page-entering #container {
        opacity: 0;
    transform: translateY(30px);
}

/* Estilos específicos para la transición de salida */
.js-transitions-enabled.page-exiting #container {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.5s ease, transform 0.5s ease !important;
}

/* Clase para ocultar el contenido durante la carga inicial */
.loading-transition #container {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: none !important;
}

/* Desactivar transiciones para usuarios que prefieren reducir el movimiento */
@media (prefers-reduced-motion: reduce) {
    #container, .js-transitions-enabled #container {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Asegurar que el contenido siempre sea visible en Safari */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        #container {
            opacity: 1 !important;
            transform: none !important;
        }
        
        /* Permitir transiciones en Safari cuando se usa JavaScript */
        .js-transitions-enabled:not(.loading-transition) #container {
            opacity: 1;
            transform: translateY(0);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
    }
}

/* Restaurar transiciones cuando se usa JavaScript */
.js-transitions-enabled #container {
    transition: opacity 0.8s ease, transform 0.8s ease !important;
}

/* Estilos específicos para Safari */
html.safari.js-transitions-enabled #container {
    transition: opacity 1s ease, transform 1s ease !important;
}

/* Fallback para Safari cuando hay problemas */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        .js-transitions-disabled #container {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
        }
    }
}

/* Asegurar que el contenido siempre sea visible en caso de error */
html.no-js #container {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Estilos específicos para la transición de entrada */
.js-transitions-enabled.page-entering #container {
    opacity: 0;
    transform: translateY(50px);
}

/* Estilos específicos para la transición de salida */
.js-transitions-enabled.page-exiting #container {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 0.5s ease, transform 0.5s ease !important;
}

/* Estilos para vídeos nativos */
.native-video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* Ratio 16:9 por defecto */
    overflow: hidden;
    background-color: var(--background-color);
}

.native-video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Asegurar que los vídeos nativos tengan el mismo aspecto que los de Vimeo */
.project-stills .still-content .native-video-container,
.project-full-video .native-video-container {
    padding-bottom: 56.25%; /* Ratio 16:9 */
}

.project-stills.three-columns .still-content .native-video-container {
    padding-bottom: 100%; /* Ratio 1:1 para grid de 3 columnas */
}

/* Asegurar que los vídeos nativos se muestren correctamente en móviles */
@media (max-width: 767px) {
    .native-video-container {
        will-change: transform;
        transform: translateZ(0);
    }
    
    .native-video-container video {
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

/* Estilos para vídeos nativos en tarjetas de proyectos */
.project-thumbnail.video-thumbnail .native-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 0; /* Anular el padding-bottom predeterminado */
}

.project-thumbnail.video-thumbnail {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    aspect-ratio: 16/9;
}

/* Estilos para vídeos nativos en la página de servicios */
.category-media .native-video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    overflow: hidden;
}

.category-media .native-video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Asegurar que los vídeos en project-stills sean cuadrados */
.project-stills .still-content .native-video-container,
.project-stills .still-content .video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100% !important; /* Forzar ratio 1:1 (cuadrado) */
    overflow: hidden;
}

.project-stills .still-content video,
.project-stills .still-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Estilos específicos para contenedores de vídeo nativo en project-stills */

/* Animación para hero-content */
@keyframes heroContentFade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Animación para las letras */
@keyframes typeIn {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Desactivar transiciones para usuarios que prefieren reducir el movimiento */
@media (prefers-reduced-motion: reduce) {
    #container, .js-transitions-enabled #container {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Deshabilitar animación de #container solo en la página de inicio */
.home #container, 
.home.js-transitions-enabled #container,
.home.js-transitions-enabled.page-entering #container,
.home.js-transitions-enabled.page-exiting #container {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Asegurar que el contenido siempre sea visible en Safari */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        #container {
            opacity: 1 !important;
            transform: none !important;
        }
        
        /* Permitir transiciones en Safari cuando se usa JavaScript */
        .js-transitions-enabled:not(.loading-transition) #container {
        opacity: 1;
        transform: translateY(0);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
    }
}

/* Estilos específicos para Safari en iOS */
html.ios .reel video,
html.safari.ios .reel video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}

/* Estilos para el contenedor de video en Safari */
html.ios .reel.safari-video-container,
html.safari .reel.safari-video-container {
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

/* Fallback para cuando el video no se puede reproducir */
.reel.video-fallback {
    background-color: #000;
    background-size: cover;
    background-position: center;
}

/* Asegurar que el contenido siempre sea visible en iOS */
html.ios #container,
html.ios.js-transitions-enabled #container,
html.ios.js-transitions-enabled.page-entering #container,
html.ios.js-transitions-enabled.page-exiting #container {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Estilos específicos para la home en iOS */
html.ios .home .hero-section,
html.safari.ios .home .hero-section {
    position: relative !important;
}

/* Evitar problemas con el scroll en iOS */
html.ios .home,
html.safari.ios .home {
    height: auto !important;
    overflow-x: hidden !important;
}

/* Asegurar que el contenido de la home sea visible en iOS - LIMPIADO */

/* Evitar que el video cause problemas en iOS */
@media (max-width: 767px) {
    html.ios .reel,
    html.safari.ios .reel {
        max-height: 100vh !important;
        overflow: hidden !important;
    }
    
    html.ios .reel video,
    html.safari.ios .reel video {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }
    
    /* iOS específico - LIMPIADO */
}

/* Asegurar que el contenido siempre sea visible después de un tiempo */
@keyframes forceVisible {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.loading-transition #container {
    animation: forceVisible 0s 2s forwards;
}

/* Estilos específicos para la native-video-container */

/* Estilos específicos para videos nativos en project-stills */
.project-stills .still-content video,
.project-stills .still-content .native-video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Estilos específicos para Safari en iOS */
html.safari .project-stills .still-content video,
html.ios .project-stills .still-content video,
html.safari .project-stills .still-content .native-video-container video,
html.ios .project-stills .still-content .native-video-container video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 1 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: transform !important;
}

/* Fallback para cuando el video no se puede reproducir */
.project-stills .still-content.video-fallback,
.project-stills .still-content .native-video-container.video-fallback {
    background-color: #000;
    background-size: cover;
    background-position: center;
}

/* Asegurar que los videos nativos en project-stills tengan el tamaño correcto */
.project-stills.three-columns .still-content video,
.project-stills.three-columns .still-content .native-video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Estilos para dispositivos con preferencia de reducción de movimiento */
html.reduced-motion,
html.ios,
html.mobile {
    /* Desactivar todas las animaciones y transiciones */
    --transition-speed: 0s !important;
}

html.reduced-motion *,
html.ios *,
html.mobile * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}

/* Desactivar transiciones en dispositivos móviles */
@media (max-width: 768px) {

    #container, .js-transitions-enabled #container {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .project-stills .still-content:first-of-type {margin-bottom:15px;}
    
    /* Asegurar que el contenido siempre sea visible */
    #content, 
    .entry-content, 
    .wrapper-content {
        min-height: 50vh;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Asegurar que las letras sean visibles */
    .hero-title span::before {
        transform: none !important;
        opacity: 1 !important;
    }
    
    /* Asegurar que el párrafo sea visible */
    .hero-content p {
        opacity: 1 !important;
    }
}

/* Estilos específicos para iOS */
html.ios .reel video,
html.safari .reel video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
    -webkit-transform: none !important;
}

/* Asegurar que los videos en iOS se muestren correctamente */
html.ios .native-video-container video,
html.safari .native-video-container video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Fallback para videos que no se pueden reproducir */
.video-fallback {
    background-color: #000 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Estilos para manejar vídeos en dispositivos móviles */
.mobile-video video {
    display: block !important; /* Mostrar video en móviles */
}

.mobile-video::before {
    content: none; /* Eliminar el fondo negro */
}

/* Estilos adicionales para .reel en dispositivos móviles */
html.mobile .reel,
html.ios .reel {
    background-color: transparent;
    position: relative;
    overflow: hidden;
}

/* Optimizar rendimiento en dispositivos móviles pero mantener animaciones esenciales */
html.mobile *,
html.ios * {
    will-change: auto !important;
}

/* Asegurar que el hero-content sea visible en móviles */
@media (max-width: 768px) {
    /* Asegurar que el contenido siempre sea visible */
    #content, 
    .entry-content, 
    .wrapper-content {
        min-height: 50vh;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Asegurar que las letras sean visibles */
    .hero-title span::before {
        transform: none !important;
        opacity: 1 !important;
    }
    
    /* Asegurar que el párrafo sea visible */
    .hero-content p {
        opacity: 1 !important;
    }
}

/* Media query para pantallas muy pequeñas */
@media (max-width: 480px) {
    @keyframes heroContentSlideUp {
        0% {
            bottom: -370px;
            opacity: 1;
        }
        100% {
            bottom: -370px; /* Alineado con el CSS existente para móviles */
            opacity: 1;
        }
    }
}

/* Optimizar rendimiento en dispositivos móviles pero permitir animaciones esenciales */
html.mobile *,
html.ios * {
    will-change: auto !important;
    /* Ya no desactivar todas las animaciones */
}

/* Asegurar que el hero-content sea visible y animado en móviles */
@media (max-width: 768px) {
    /* Configuraciones base para contenido visible */
    #content, 
    .entry-content, 
    .wrapper-content {
        min-height: 50vh;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Permitir la animación de hero-content en móviles */
    .home .hero-content {
        display: block !important;
        visibility: visible !important;
        z-index: 9999 !important;
        /* Eliminar bottom fixed y animation: none para permitir la animación */
        pointer-events: auto !important;
    }
    
    /* Asegurar que las letras sean visibles pero permitir animación */
    .hero-title span::before {
        opacity: 1 !important;
    }
    
    /* Asegurar que el párrafo sea visible */
    .hero-content p {
        opacity: 1 !important;
    }
}

/* Optimizar rendimiento en dispositivos móviles pero permitir animaciones */
html.reduced-motion * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}

/* html.ios y html.mobile ya no desactivan todas las animaciones */

/* Modificar la sección original que desactiva las animaciones en móviles */
@media (max-width: 768px) {
    #container, .js-transitions-enabled #container {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    
    /* Ya no desactivar animaciones para hero-content */
    
    /* Restricciones para transiciones de página */
body:not(.home) .wrapper-content {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
}

/* Estilos para manejar vídeos en dispositivos móviles */
.mobile-video video {
    display: block !important; /* Mostrar video en móviles */
}

.mobile-video::before {
    content: none; /* Eliminar el fondo negro */
}

/* Estilos adicionales para .reel en dispositivos móviles */
html.mobile .reel,
html.ios .reel {
    background-color: transparent;
    position: relative;
    overflow: hidden;
}

html.reduced-motion {
    /* Solo aplicar a reduced-motion, no a iOS o mobile */
    --transition-speed: 0s !important;
}

/* Solo aplicar a reduced-motion, no a todos los dispositivos móviles o iOS */
html.reduced-motion * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}

/* Desactivar solo transiciones de página en dispositivos móviles, pero permitir animaciones de contenido */
@media (max-width: 768px) {
    #container, .js-transitions-enabled #container {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    
    /* Asegurar que el contenido siempre sea visible */
    #content, 
    .entry-content, 
    .wrapper-content {
        min-height: 50vh;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Permitir animaciones en la página de inicio */
    /* NO desactivar animación de hero-content en móviles */
}

/* Estilos para dispositivos con preferencia de reducción de movimiento - SOLO reduced-motion */
html.reduced-motion {
    /* Desactivar animaciones y transiciones */
    --transition-speed: 0s !important;
}

html.reduced-motion * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}

/* Desactivar ciertas transiciones en dispositivos móviles pero permitir animaciones de contenido */
@media (max-width: 768px) {
    #container, .js-transitions-enabled #container {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    
    /* Asegurar que el contenido siempre sea visible */
    #content, 
    .entry-content, 
    .wrapper-content {
        min-height: 50vh;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* PERMITIR animaciones en la página de inicio - solo mantener las propiedades necesarias */
    .home .hero-content {
        opacity: 1 !important;
        pointer-events: auto !important;
        display: block !important;
        visibility: visible !important;
        z-index: 9999 !important;
    }
    
    /* PERMITIR animación de letras */
    
    /* Asegurar que el párrafo sea visible */
    .hero-content p {
        opacity: 1 !important;
    }
}

/* Optimizaciones para Safari móvil - Fix videos desapareciendo en scroll */
html.safari.ios .video-container,
html.safari.ios .project-full-video,
html.safari.ios .still-content {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    will-change: transform !important;
    z-index: 1 !important;
    position: relative !important;
}

html.safari.ios .video-container iframe,
html.safari.ios .project-full-video iframe,
html.safari.ios .video-container video,
html.safari.ios .project-full-video video,
html.safari.ios .still-content video {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    z-index: 2 !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
}

/* Mantener videos visibles durante scroll en iOS */
@media (max-width: 767px) {
    html.safari.ios * {
        /* Permitir animaciones en Safari iOS móvil */
        will-change: auto !important;
        transition: opacity 0.3s ease !important;
        animation: none !important;
    }
    
    html.safari.ios .video-container,
    html.safari.ios .project-full-video,
    html.safari.ios .still-content {
        transform: translateZ(0) !important; 
        -webkit-transform: translateZ(0) !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Fix especial para videoloop_inicio en móvil */
    html.safari.ios video[src*="videoloop_inicio"],
    html.safari.ios video[src*="reel"],
    html.safari.ios .inicio-substituto video,
    html.safari.ios .project-full-video.inicio-substituto video,
    html.safari.ios .main-video-safari-fix {
        position: relative !important;
        z-index: 1000 !important;
    }
}

/* Fix específico para el videoloop_inicio en Safari móvil */
html.safari.ios video[src*="videoloop_inicio"],
html.safari.ios video[src*="reel"],
html.safari.ios .inicio-substituto video,
html.safari.ios .project-full-video.inicio-substituto video,
html.safari.ios .main-video-safari-fix {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1000 !important;
    transform: none !important;
    -webkit-transform: none !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    will-change: auto !important;
}

/* Contenedor del video principal */
html.safari.ios .video-container:has(video[src*="videoloop_inicio"]),
html.safari.ios .video-container:has(video[src*="reel"]),
html.safari.ios .inicio-substituto,
html.safari.ios .project-full-video.inicio-substituto,
html.safari.ios .main-video-container-safari-fix {
    z-index: 999 !important;
    position: relative !important;
    overflow: visible !important;
    background-color: transparent !important;
}

/* Optimizaciones para Safari móvil - SIMPLIFICADO */
html.safari-mobile-video-fix video,
html.safari-mobile-video-fix iframe {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
    display: block !important;
    position: relative !important;
}

html.safari-mobile-video-fix .video-container,
html.safari-mobile-video-fix .project-full-video {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5 !important;
    position: relative !important;
}

/* Reemplaza las reglas redundantes y complejas anteriores */
/* Regla Safari iOS eliminada - ya no es necesaria */

/* Optimizaciones para Safari móvil - SIMPLIFICADO */
html.safari-mobile-video-fix video.safari-video-ready {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5 !important;
    display: block !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

/* Contenedor del video - mantener visible pero sin interferir con las políticas de WebKit */
html.safari-mobile-video-fix .video-container,
html.safari-mobile-video-fix .project-full-video {
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Video principal - permitir que Safari gestione su visibilidad según las políticas de WebKit */
html.safari-mobile-video-fix video[src*="videoloop_inicio"] {
    /* Mantener los estilos mínimos necesarios sin forzar visibilidad permanente */
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Reemplazar estilos conflictivos anteriores */
html.safari.ios .video-container,
html.safari.ios .project-full-video,
html.safari.ios .still-content,
html.safari.ios video[src*="videoloop_inicio"],
html.safari.ios video[src*="reel"],
html.safari.ios .inicio-substituto video,
html.safari.ios .project-full-video.inicio-substituto video,
html.safari.ios .main-video-safari-fix,
html.safari.ios .video-container:has(video[src*="videoloop_inicio"]),
html.safari.ios .video-container:has(video[src*="reel"]),
html.safari.ios .inicio-substituto,
html.safari.ios .project-full-video.inicio-substituto,
html.safari.ios .main-video-container-safari-fix {
    /* Remover reglas conflictivas sin eliminar el selector por compatibilidad */
    transform: none;
    -webkit-transform: none;
}

/* Optimizaciones Safari móvil - Versión 2.0 basada en WebKit */
html.safari-mobile-video-fix video {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: auto; /* Evitar abuso de aceleración GPU */
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Contenedor de video principal - garantizar visibilidad según políticas de WebKit */
html.safari-mobile-video-fix video[data-priority="high"] {
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 1;
    visibility: visible;
    z-index: 5;
}

/* Prevenir la acumulación de recursos: videos no visibles tendrán menor prioridad */
html.safari-mobile-video-fix video:not(:is-visible):not([data-priority="high"]) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
}

/* Evitar transformaciones y filtros costosos en Safari */
html.safari.ios .video-container,
html.safari.ios .project-full-video {
    -webkit-transform: none !important;
    transform: none !important;
    filter: none !important;
}

/* Optimizaciones Safari móvil - Versión ultra simplificada */
html.safari-mobile-video-fix video.safari-video-ready {
    /* Estilos básicos sin transformaciones complejas */
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Contenedor de video - mantener simple */
html.safari-mobile-video-fix .video-container,
html.safari-mobile-video-fix .project-full-video {
    /* Propiedades mínimas necesarias */
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Video principal - prioritario */
html.safari-mobile-video-fix video[data-main-video="true"] {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Desactivar estilos problemáticos que puedan existir */
html.safari-mobile-video-fix video:not([data-main-video="true"]):not(:is-visible) {
    z-index: 0;
}

/* Anular estilos antiguos que puedan interferir */
html.safari.ios .video-container,
html.safari.ios .project-full-video,
html.safari.ios video[src*="videoloop_inicio"],
html.safari.ios video[src*="reel"],
html.safari.ios .inicio-substituto video {
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    will-change: auto !important;
}

/* Optimizaciones Safari móvil - Versión mínima */
html.safari-mobile-video-fix video.safari-video-ready {
    /* Propiedades básicas para todos los videos */
    opacity: 1;
    visibility: visible;
}

/* Video principal - asegurar visibilidad */
html.safari-mobile-video-fix video[data-main-video="true"] {
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: 10;
}

/* Contenedor básico */
html.safari-mobile-video-fix .video-container,
html.safari-mobile-video-fix .project-full-video {
    position: relative;
    overflow: hidden;
}

/* Eliminar transformaciones en Safari */
html.safari.ios video,
html.safari.ios .video-container,
html.safari.ios .project-full-video,
html.safari.ios .inicio-substituto,
html.safari.ios .reel {
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    will-change: auto !important;
}

/* SAFARI MÓVIL - REGLAS SIMPLIFICADAS */

/* Clase principal para videos en Safari móvil */
html.safari-mobile-video-fix video.safari-video-ready {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    object-fit: cover;
}

/* Video principal con mayor prioridad */
html.safari-mobile-video-fix video[data-main-video="true"] {
    width: 100%;
    height: 100%;
    z-index: 10;
}

/* Contenedor básico */
html.safari-mobile-video-fix .video-container,
html.safari-mobile-video-fix .project-full-video {
    position: relative;
    overflow: hidden;
}

/* Eliminar transformaciones y efectos complejos */
html.safari.ios video,
html.safari.ios .video-container,
html.safari.ios .project-full-video,
html.safari.ios .inicio-substituto,
html.safari.ios .reel {
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    will-change: auto !important;
}

/* FIN SAFARI MÓVIL */

/* Corrección para grid de videos en Safari */
.project-stills .still-content,
.grid-video-container {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* Forzar relación de aspecto 1:1 */
    overflow: hidden;
}

.project-stills .still-content {padding-bottom: inherit !important;}


.project-stills .still-content iframe,
.grid-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Asegurar que los videos de Vimeo en Safari respetan su contenedor */
html.safari .project-stills .still-content iframe[src*="vimeo"],
html.safari .grid-video-container iframe[src*="vimeo"] {
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
}

/* Fuerza el aspect ratio en mosaicos específicamente en Safari */
@supports (-webkit-touch-callout: none) {
    .project-stills.three-columns .still-content {
        aspect-ratio: 1/1;
        height: 0;
        width: 100%;
    }
    
    .project-stills.three-columns .still-content iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
}

/* CORRECCIÓN ESPECÍFICA PARA VÍDEOS DE VIMEO EN SAFARI - VERSIÓN MEJORADA */

/* Ajuste para videos en grid en Safari - sin modificar espaciado */
html.safari .project-stills .still-content iframe[src*="vimeo"],
html.safari .project-stills .still-content iframe[src*="player.vimeo"] {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
}

/* Asegurar que el contenedor mantiene su proporción */
html.safari .project-stills .still-content {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 1/1 !important;
}

/* Regla específica para dispositivos móviles de Apple */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    html.safari .project-stills .still-content iframe[src*="vimeo"],
    html.safari .project-stills .still-content iframe[src*="player.vimeo"] {
        transform: scale(1.01) !important; /* Ligero aumento para evitar bordes */
        transform-origin: center center !important;
    }
}

/* FIN CORRECCIÓN VIMEO */

/* OPTIMIZACIÓN DE GRID DE VIDEOS */

/* Video container estándar */
.project-stills .still-content {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
}

/* Ajuste para los iframes */
.project-stills .still-content iframe,
.project-stills .still-content video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Garantizar proporción en Safari */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        /* Hack específico para Safari */
        html.safari .project-stills .still-content {
            height: 0;
            padding-bottom: 100%;
        }
        
        html.safari .project-stills .still-content iframe[src*="vimeo"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 100% !important;
            transform: scale(1.01);
        }
    }
}

/* FIN OPTIMIZACIÓN DE GRID DE VIDEOS */

/* Estilos para el grid de equipo */
.team-grid-section {
    margin: 2rem 0;
    margin-bottom:100px;
    margin-top:100px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.team-member {
    text-align: center;
}

.team-member-img-container {
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
    aspect-ratio: 1/1;
}

.team-member-img-container .normal-img,
.team-member-img-container .hover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.team-member-img-container .normal-img {
    opacity: 1;
}

.team-member-img-container .hover-img {
    opacity: 0;
}

.team-member:hover .team-member-img-container .normal-img {
    opacity: 0;
}

.team-member:hover .team-member-img-container .hover-img {
    opacity: 1;
}

.team-info {
    margin-top: 0.5rem;
    text-align: left;
}

.team-name {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.team-position {
    margin: 0.3rem 0 0;
    font-size: 0.9rem;
    color: #777;
}



/* Mantener el color del texto durante la animación en tema oscuro */
.box.keep-hover-color {
    color: var(--text-hover-color-green);
    background-color: var(--corpo-color);
    border-color: var(--corpo-color);
}

/* Reglas específicas para tabletas */
@media (max-width: 950px) and (min-width: 769px) {
    .hero-content,
    .hero-content.animate,
    .home .hero-content,
    .home .hero-content.animate {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        position: absolute !important;
        bottom: 150px !important;
        margin-top: 0;
        padding: 0;
        pointer-events: auto !important;
        will-change: auto !important;
        position: absolute !important;
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 2 !important;
        transform: scaleY(1) !important;
    }
}

/* Reglas específicas para móviles */
@media (max-width: 768px) {
    .hero-content,
    .hero-content.animate,
    .home .hero-content,
    .home .hero-content.animate {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        position: absolute !important;
        bottom: auto !important;
        margin-top: 20px;
        padding: 0 20px;
        pointer-events: auto !important;
        will-change: auto !important;
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 2 !important;
        transform: scaleY(1) !important;
    }
}

    .home-services.section {padding-top: 140px;}

    .hero-content.animate .home-info p {margin-top:20px;}

    /* Asegurar que el párrafo es visible */
    .home-info p {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }

    /* Restaurar estilos de texto normales */
    .hero-title span {
        color: inherit !important;
        overflow: visible !important;
    }

    .hero-title span::before {
        content: none !important;
    }


/* Optimizaciones para videos en Safari móvil */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        html.ios .project-full-video video,
        html.ios .still-content video,
        html.ios .square-media video {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-perspective: 1000;
            perspective: 1000;
            will-change: transform;
        }

        html.ios .project-full-video,
        html.ios .still-content,
        html.ios .square-media {
            transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            perspective: 1000;
            -webkit-perspective: 1000;
        }
    }
}

/* Fix específico para el videoloop_inicio en Safari móvil */
html.safari.ios .project-full-video.inicio-substituto {
    position: relative !important;
    z-index: 1;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

html.safari.ios .project-full-video.inicio-substituto video {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 2;
}

html.safari-mobile-video-fix video {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
    will-change: transform;
}

html.safari-mobile-video-fix video[data-priority="high"] {
    z-index: 2;
    position: relative;
}

html.safari-mobile-video-fix video:not(:is-visible):not([data-priority="high"]) {
    visibility: hidden;
    position: absolute;
    opacity: 0;
}

html.safari.ios .video-container,
html.safari-mobile-video-fix .video-container {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

html.safari-mobile-video-fix video.safari-video-ready {
    opacity: 1;
    transition: opacity 0.3s ease;
}

html.safari-mobile-video-fix video[data-main-video="true"] {
    z-index: 3;
    position: relative;
}

html.safari-mobile-video-fix video:not([data-main-video="true"]):not(:is-visible) {
    opacity: 0;
    pointer-events: none;
}

/* Optimizaciones para videos durante scroll */
.video-container {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.video-container video {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
}

/* Prevenir parpadeo durante scroll */
.video-container.scrolling {
    transition: opacity 0.2s ease-out;
}

/* Optimizaciones específicas para Safari móvil */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        html.safari.ios .video-container {
            transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            perspective: 1000;
            -webkit-perspective: 1000;
        }
        
        html.safari.ios video {
            transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
    }
}

/* Estado de carga y transición suave */
.video-container[data-state="loading"] {
    opacity: 0.1;
    transition: opacity 0.3s ease-in;
}

.video-container[data-state="ready"] {
    opacity: 1;
}

/* Prevenir saltos durante la carga */
.video-container[data-state="loading"] video {
    visibility: hidden;
}

.video-container[data-state="ready"] video {
    visibility: visible;
    transition: visibility 0s linear 0.3s;
}

/* Optimizaciones para videos */
.video-container,
.project-full-video,
.still-content {
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: opacity 0.3s ease-out;
}

/* Estado de scroll */
html.is-scrolling .video-container,
html.is-scrolling .project-full-video,
html.is-scrolling .still-content {
    transition: none;
}

/* Optimizaciones específicas para Safari móvil */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        html.safari.ios .video-container,
        html.safari.ios .project-full-video,
        html.safari.ios .still-content {
            transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            perspective: 1000;
            -webkit-perspective: 1000;
        }
        
        html.safari.ios video {
            transform: translate3d(0,0,0);
            -webkit-transform: translate3d(0,0,0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            will-change: transform;
        }
    }
}

/* Prevenir parpadeos durante la carga */
.video-container[data-state="loading"],
.project-full-video[data-state="loading"],
.still-content[data-state="loading"] {
    opacity: 0.1;
    transition: opacity 0.3s ease-in;
}

.video-container[data-state="ready"],
.project-full-video[data-state="ready"],
.still-content[data-state="ready"] {
    opacity: 1;
}

/* Optimizaciones para el proyecto de Silvia Pérez Cruz */
.project-full-video.inicio-substituto {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    position: relative;
    z-index: 1;
}

.project-full-video.inicio-substituto video {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

/* Asegurar que los videos permanezcan visibles durante el scroll */
.project-stills .still-content {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    position: relative;
    z-index: 1;
}

.project-stills .still-content video {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

/* Prevenir problemas de z-index */
.project-stills {
    position: relative;
    z-index: 1;
}

@media (max-width: 912px) {
.home .hero-content {
    position: static !important;
    bottom: auto !important;
    margin-top: 20px;
    padding: 0 20px;
}
.reel, .hero-section {height: 300px;}
}


/* Optimizaciones para dispositivos móviles */
@media (max-width: 768px) {
    .project-full-video,
    .still-content,
    .video-container {
        transform: none !important;
        -webkit-transform: none !important;
        will-change: auto;
    }

    .home-services.section {padding-top:180px;}
    .hero-content, .hero-content.animate, .home .hero-content, .home .hero-content.animate {
        position: static !important;
        bottom: auto !important;
        margin-top: 20px;
        padding: 0 20px;
    }
    
    video {
        transform: none !important;
        -webkit-transform: none !important;
        will-change: auto;
    }
}

@media (max-width: 540px) {
    .reel iframe, .reel video {position: relative; top: auto; left: auto;}
    .hero-content, .hero-content.animate, .home .hero-content, .home .hero-content.animate {
        position: static !important;
        bottom: auto !important;
        margin-top: 20px;
        padding: 0 20px;
    }
}


/* Responsive para el grid de equipo */
/* CONDICIONALES MOBILE IPHONE */
@media (max-width: 480px) {
    .client-logo {
        flex: 0 0 calc(50% - 5px); /* Para 2 logos por fila */
    }

    .solution-name {
        font-size: 19px;
    }


    .accordion-content {padding-left: 12px !important;}
    .category-content {padding-top:10px;}

    .section .project-info h2  {margin-bottom:10px;}

    .solution-arrow {display:none;}

    .home .hero-content {
        transform: scaleY(1) !important;
    }

    .home .hero-content {
        position: static !important;
        bottom: auto !important;
        margin-top: 20px;
        padding: 0 20px;
    }

    #branding {width: 130px; height: 125px; padding-left: 6px; left:-1px;}
    .tagline {font-size:12px; line-height:16px; padding-top:10px;}
    .menu-toggle {right:10px;}
    /* Estilos móviles muy pequeños - Limpiado */
    .home-services.section {padding-top:210px;}
    .home-solutions, .solutions-list {padding-top: 0px !important;}
    .solutions-intro p {margin-bottom:0px !important;}
    .section {padding-top:30px; padding-bottom: 30px;}
    .four-columns {margin-bottom:15px; margin-top:-20px;}
    .project-header {padding:0px;}
    .work-header {padding-top:80px;}
    .project-title-column h1 {font-size:45px;}
    .project-columns {padding-top:0px; padding-bottom: 0px;}
    .project-meta {margin-top:5px;}
    p.region-terms {display:none;}
    .project-details-column {padding-top:20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
    .categories {display:none;}
    p.artist-terms {text-transform: uppercase; font-size: 22px !important; font-family: 'Funnel Display', Georgia, serif;}
    .video-principal-noloop {margin-left:-15px !important; width: calc(100% + 30px) !important; padding-top:20px;}
    .wrapper-content {padding: 0 0px !important;}
    #projects-grid, .project-stills {gap: 15px; margin: 15px 0;}
    .project-full-image {margin: 15px auto; margin-bottom: 0px;}
    .project-taxonomy-grid {padding-top: 30px; padding-bottom: 0px;}
    #footer {margin-left: -15px !important; width: calc(100% + 30px) !important; margin-top:20px;}
    .taxonomy-column a, .taxonomy-column p {font-size: 14px; line-height: 1.4;}
    .taxonomy-column {margin-bottom: 15px;}
    .box:hover {border-color: inherit !important;}
    .category-description p {margin-left:3px;} 
}  



@media (max-width: 415px) {
.hero-content, .hero-content.animate, .home .hero-content, .home .hero-content.animate {bottom: -50px !important;}

.solutions-list ul li a {line-height: 60px;}
.solution-name {font-size:16px;}

}

/* Estilos base para reducción de movimiento */
html.reduced-motion {
    --transition-speed: 0s !important;
}

html.reduced-motion * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}

/* Estilos específicos para hero-content con reducción de movimiento - ELIMINADO */

/* Media queries para diferentes tamaños de pantalla - LIMPIADO */

@media (max-width: 360px) {
    .solutions-list ul li a  { line-height: 50px;}
    }


@media (max-width: 950px) {
.reel iframe, .reel video {position: relative;}
.reel, .hero-section {height: 300px;}
}



@media (max-width: 768px) {
    .reel iframe, .reel video {top: auto; left: auto;}
}

@media (max-width: 480px) {
    /* Reglas específicas para móviles muy pequeños - LIMPIADO */
}

/* Espaciado para sección de categorías relacionadas en taxonomy */
.taxonomy-categories-spacing {
    margin-top: 60px;
}

/* Estilos para el H2 de categorías relacionadas */
.taxonomy-project-category .subcategory-buttons {
    margin-top: 20px;
}

.taxonomy-project-category h2 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Excepción específica para solutions-intro - mantener sticky */
/* Esta regla se movió arriba para mejor organización */

/* ============================================
   HOW WE WORK SECTION STYLES
   ============================================ */

/* Estilos para el bloque How We Work */
.how-we-work-section {
    padding: 80px 0;
    background-color: transparent;
}

.how-we-work-section .container {
    margin: 0 auto;
}

/* Header Styles */
.how-we-work-header {
    margin-bottom: 40px;
}

.section-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.section-title {
    font-size: 48px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 24px;
    line-height: 1.2;
    text-align: left;
}

.section-description {
    font-size: 18px;
    color: var(--text-color);
    max-width: 600px;
    line-height: 1.6;
    text-align: left;
}

/* Process Steps Styles */
.process-steps-wrapper {
    position: relative;
    margin: 60px 0;
}

.process-steps-wrapper::before,
.process-steps-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #333333;
}

.process-steps-wrapper::before {
    top: 0;
}

.process-steps-wrapper::after {
    bottom: 0;
}

.process-steps-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    padding: 30px 0;
}

.process-step {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0px;
    min-height: 100px;
}

.step-content {
    flex: 1;
    text-align: right;
}

.step-title {
    font-size: 40px;
    font-family: "Funnel Display", serif;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 16px;
}

.step-description {
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.6;
    max-width: 100% !important;
    text-align: right;
    margin-bottom: 0px !important;
}

.step-icon-container {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: 100px;
}

.step-icon-container img {
    width: 100px;
    height: 100%;
    min-height: 100px;
    object-fit: fill;
    object-position: center;
}

/* Manejo de temas claro/oscuro para iconos */
.step-icon-container .light-icon {
    display: block;
}

.step-icon-container .dark-icon {
    display: none;
}

/* Para tema oscuro, mostrar iconos oscuros */
[data-theme="dark"] .step-icon-container .light-icon {
    display: none;
}

[data-theme="dark"] .step-icon-container .dark-icon {
    display: block;
}

/* CTA Section Styles */
.how-we-work-cta {
    margin-top: 80px;
    padding: 0px 0;
}

.cta-content {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.cta-text {
    flex: 1;
    text-align: right;
}

.cta-question {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 16px;
}

.cta-description {
    font-size: 18px;
    color: var(--text-color);
    line-height: 1.6;
    min-width: 100% !important;
    text-align: right;
}

.cta-icon-container {
    flex-shrink: 0;
}

.cta-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cta-icon img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

/* Manejo de temas claro/oscuro para icono CTA */
.cta-icon .light-icon {
    display: block;
}

.cta-icon .dark-icon {
    display: none;
}

/* Para tema oscuro, mostrar icono oscuro */
[data-theme="dark"] .cta-icon .light-icon {
    display: none;
}

[data-theme="dark"] .cta-icon .dark-icon {
    display: block;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .section-title {
        font-size: 36px;
    }
    
    .process-steps-container {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0px 0;
    }

    .process-step:last-of-type { padding-bottom:20px;}

    .process-step {padding-top: 20px;
        border-top: 1px solid;}

    .how-we-work-cta {margin-top:40px;}
    .cta-content {gap:0px;}
    .cta-description {text-align: center;}
    
    .cta-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cta-text {
        text-align: center;
    }
    
    .how-we-work-section {
        padding: 60px 0;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 28px;
    }
    
    .section-description {
        font-size: 16px;
    }
    
    .process-steps-container {
        gap: 20px;
        padding: 0px 0;
    }

    .step-title {font-size:30px;}
}