/* ==========================================================================
   Estilos Base (Derivados de style.css funcional) + Estilos Aislados para Casos
   ========================================================================== */

:root {
  color-scheme: light dark;
}

/* ------------------------------------------------------------------------------
	Tipografía (Base)
-------------------------------------------------------------------------------*/
body {
    font-family: "Ubuntu", "Open Sans", "Arial", sans-serif; /* Fuente principal */
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    padding-top: 62px; /* Espacio navbar */
}
p { font-size: 14px; line-height: 1.6; color: #333; margin-bottom: 1em; } /* Color base párrafo */
h1 { font-size: 65px; color: #2d3033; }
h2 { font-size: 40px; color: #2d3033; font-weight: 300; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 15px; }
h3 { font-size: 30px; color: #2d3033; font-weight: 700; padding-left: 10px; justify-content: center; }
h4 { font-size: 40px; color: #2d3033; font-weight: 300; }
h5 { font-size: 14px; color: #2d3033; text-transform: uppercase; font-weight: 300; }
h6 { font-size: 12px; color: #333; text-transform: uppercase; font-weight: 300; }
h7 { font-size: 12px; color: #2d3033; text-transform: uppercase; font-weight: 300; }
h8 { font-size: 12px; color: #fff; font-weight: 300; } /* Usado en overlays */
h1, h2, h3, h4, h5, h6, h7, h8 { font-family: "Ubuntu", "Open Sans", "Arial", sans-serif; }
a { color: #ffd500; text-decoration: none; transition: color 0.3s; }
a:hover, a:focus { text-decoration: none; color: #e6bf00; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }

/* Estilos Globales (Base) */
.section { padding: 60px 0; margin-bottom: 50px; } /* Restaurado margin-bottom */
.section-header{ text-align: center; padding-bottom: 30px; margin-top: 60px; } /* Restaurado margin-top */
.section-header h2{ font-size: 48px; }
.section-header p { color: #777; max-width: 650px; margin: 0 auto; padding: 0 15px; }
.icogrande img { 
	width: 50px; 
	height: 50px; 
	border-radius: 50%; 
	vertical-align: middle; 
	margin-bottom: 0; } /* Ajustado */
	/*object-fit: cover;*/












/* ---------------------------------------------------- */
/* Slider Principal (Estilos funcionales) */
/* ---------------------------------------------------- */
.slider-wrapper { font-size: 0; line-height: 0; position: relative; }
.slider-principal { display: block; width: 100%; }
.slider-principal img { width: 100%; height: auto; object-fit: cover; display: block; }
.slider-movil { display: none; width: 100%; }
.slider-movil img { width: 100%; height: auto; display: block; }
.slick-dots { position: absolute; bottom: 15px; width: 100%; margin: 0; padding: 0; list-style: none; text-align: center; z-index: 100; }
.slick-dots li { background-color: #bdbdbd; border-radius: 50%; width: 8px; height: 8px; display: inline-block; margin: 0 4px; cursor: pointer; transition: background-color 0.3s ease; }
.slick-dots li button, .slick-dots li button:before { display: none; }
.slick-dots li.slick-active { background-color: #ffd500; }


/* ---------------------------------------------------- */
/* ESTILOS DE GALERÍA GLOBALES (COMO EN style.css funcional) */
/* ---------------------------------------------------- */
.galeria-container {
    display: grid;
    gap: 20px;
    padding: 20px;
    grid-template-columns: repeat(1, 1fr); /* Móvil por defecto */
}
.proyecto-galeria { /* Estilo base para CUALQUIER item de galería */
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff; /* Asegurar fondo blanco */
}
.imagen-con-zoom { /* Contenedor para imagen con hover */
    position: relative;
    width: 100%;
    border-radius: 8px; /* Redondear solo la imagen si no hay header/footer */
    overflow: hidden; /* Mantener bordes redondeados en hover */
}
.imagen-con-zoom img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease-in-out;
}
.imagen-con-zoom:hover img {
    transform: scale(1.1);
}
.marca-de-agua {
    position: absolute; bottom: 10px; left: 10px; width: 20px; /* Tamaño fijo */ height: auto; opacity: 0.7; z-index: 10;
}
.descripcion-imagen-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; z-index: 1; padding: 10px; box-sizing: border-box; /* Incluir padding en tamaño */
}
.descripcion-imagen-overlay p { margin: 0; font-size: 1rem; /* Tamaño ajustado */ line-height: 1.4; color: #fff; }
.descripcion-imagen-overlay h8 { font-size: 1rem; font-weight: 400; color: #fff; } /* Asegurar que h8 se vea bien */
.imagen-con-zoom:hover .descripcion-imagen-overlay { opacity: 1; }

/* --- Fancybox (Sin cambios - Global) --- */
.fancybox-container { overflow: hidden !important; }
.fancybox-content { background-color: transparent !important; padding: 0 !important; border-radius: 10px !important; }
.fancybox-image { position: relative !important; border: 5px solid #ffffff !important; border-radius: 10px !important; transform: none !important; box-sizing: content-box !important; }
.fancybox-image-wrap { overflow: hidden !important; border-radius: 10px !important; }
.fancybox-image::after { content: ''; position: absolute; bottom: 20px; left: 20px; width: 60px; height: 60px; background-image: url('../images/favicon.png'); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.7; z-index: 10; }

/* --- Nota al pie de Galerías (Global) --- */
.gallery-disclaimer { text-align: center; font-size: 12px; color: #6c757d; padding: 20px 20px 40px 20px; max-width: 800px; margin: 0 auto; }


/* ---------------------------------------------------- */
/* RESPONSIVE PARA GALERÍA GLOBAL (COMO EN style.css funcional) */
/* ---------------------------------------------------- */
@media (min-width: 768px) {
    .galeria-container { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .galeria-container { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1400px) {
    .galeria-container { grid-template-columns: repeat(6, 1fr); }
}

/* ========================================================================== */
/* ESTILOS ESPECÍFICOS PARA EL CONTENIDO DE LAS PÁGINAS DE CASOS (.case-content) */
/* ========================================================================== */

/* Aplicar padding reducido a secciones DENTRO del caso */
.case-content .section { padding: 40px 0; }
.case-content .section-header { margin-top: 10px; padding-bottom: 20px; }




/* --- Cabecera del Caso --- */
/* ... (regla .case-header-section sin cambios) ... */

.case-content .case-header-section h2 { 
    font-size: 40px; /* Tamaño igual al de galería */
    color: #2d3033; 
    font-weight: 300; /* Grosor igual al de galería (cambiado desde 700) */
    line-height: 1.3; 
    margin: 0 auto; 
    padding: 0; 
    display: flex; 
    flex-direction: column !important; /* Siempre columna */
    align-items: center; 
    justify-content: center; 
    gap: 15px; 
    max-width: 800px; 
}
/* ... (reglas para .icogrande y span sin cambios) ... */
.case-content .case-header-section h2 .icogrande { 
    margin: 0 0 15px 0; 
    display: block; 
    line-height: 0; 
}
.case-content .case-header-section h2 .icogrande img { 
    width: 50px; /* Tamaño icono */
    height: 50px; 
    border-radius: 50%; 
    display: block; 
    margin: 0 auto; 
	
}




.case-content .case-header-section h2 span { 
    display: block; 
    text-align: center; 
}
.case-content .case-header-section .subtitle {
    font-size: 16px;
    color: #777;
    margin-top: 15px; /* Más espacio sobre el subtítulo */
    padding: 0 20px;
    line-height: 1.6;
    text-align: center; /* <<< AÑADIR ESTA LÍNEA */
}










/* --- Sección Intro del Caso (2 Columnas - Centrada) --- */
.case-content .case-intro-section { background-color: #ffffff; padding: 20px 0; }
.case-content .case-intro-container { display: flex; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
.case-content .case-intro-column { padding: 30px; box-sizing: border-box; flex-basis: 50%; flex-grow: 1; min-width: 300px; }
.case-content .case-intro-column.info { background-color: #f9f9f9; }
.case-content .case-intro-column.presentation img { border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.case-content .case-intro-column .disclaimer { font-size: 11px; margin-top: 10px; text-align: center; color: #777; }
/* Lista detalles */
.case-content .project-details-list { max-width: 100%; font-family: "Ubuntu", sans-serif; }
.case-content .project-details-list li { display: flex; padding: 10px 0; border-bottom: 1px solid #e9e9e9; font-size: 14px; line-height: 1.6; flex-wrap: wrap; }
.case-content .project-details-list li strong { flex-basis: 140px; flex-shrink: 0; color: #2d3033; font-weight: 700; padding-right: 10px; font-size: 14px; }
.case-content .project-details-list li span { color: #555; font-weight: 400; flex-grow: 1; font-size: 14px; }
.case-content .project-details-list li span p { color: #555; margin: 0 0 5px 0; padding: 0; font-size: 14px; line-height: 1.5; }
/* Imágenes referentes */
.case-content .reference-images { margin-bottom: 10px; }
.case-content .reference-images img { width: 35px; height: 35px; border-radius: 50%; display: inline-block; margin-right: 8px; border: 1px solid #eee; }
/* Título Presentación */
.case-content .presentation-title { font-size: 20px; font-weight: 700; color: #2d3033; margin-bottom: 15px; text-align: left; }

/* --- Sección Detalles del Caso (Texto) --- */
.case-content .case-details-section { padding: 40px 0 20px 0; background-color: #f4f4f4; }
.case-content .case-details-container { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.case-content .case-details-container h4 { font-size: 24px; font-weight: 700; color: #2d3033; margin-top: 25px; margin-bottom: 10px; }
.case-content .case-details-container p { font-size: 16px; line-height: 1.7; color: #333; margin-bottom: 20px; }

/* --- GALERÍA DENTRO DEL CASO (.case-content) --- */
/* Usaremos el wrapper pero dejaremos que herede los estilos globales de .galeria-container */
/* Wrapper para centrar galería y limitar ancho */
.case-content .gallery-wrapper { 
    max-width: 1400px; /* Aumentado desde 1200px */
    margin: 0 auto; 
    padding: 0 15px; 
    box-sizing: border-box; 
    width: 100%; 
}
/* Forzar que la galería DENTRO del caso use las reglas globales (1->3->4->6) */
/* ¡IMPORTANTE! Esto asume que el HTML DENTRO del caso usa la estructura simplificada */
/* Si usa la estructura con .imagen-con-zoom, etc., no necesita estas reglas específicas */
.case-content .gallery-wrapper .galeria-container { 
   /* No añadir display: grid ni grid-template-columns aquí */
   /* Heredará de las reglas globales .galeria-container */
   padding: 0; /* Padding ya está en wrapper */
   gap: 15px; /* Mantener gap reducido */
}
/* Estilo simplificado para item de galería DENTRO del caso */
.case-content .gallery-wrapper .proyecto-galeria { 
    overflow: hidden; 
    border-radius: 6px; 
    background-color: #ffffff; 
    box-shadow: none; /* Quitar sombra extra si hereda */
} 
.case-content .gallery-wrapper .proyecto-galeria a { display: block; }
.case-content .gallery-wrapper .proyecto-galeria img { 
    width: 100%; height: auto; display: block; border-radius: 6px; 
    transition: transform 0.2s ease-in-out; 
}
.case-content .gallery-wrapper .proyecto-galeria a:hover img { 
    transform: scale(1.05); 
}

/* --- Nota al pie de Galerías (SCOPED) --- */
.case-content .gallery-disclaimer { padding: 15px 20px 30px 20px; font-size: 11px; text-align: center; color: #6c757d; max-width: 800px; margin: 0 auto; }


/* ---------------------------------------------------- */
/* Footer (Global - Sin cambios) */
/* ---------------------------------------------------- */
.footer-background { background: linear-gradient(to right, #ff5d00 0%, #ffd500 70%); padding: 30px 0 60px 0; font-family: "Ubuntu", sans-serif; }
.map-container { position: relative; width: 100%; height: 450px; }
.map-container iframe { vertical-align: top; width: 100%; height: 100%; border: 0; }
.contact-overlay { position: absolute; top: 50%; right: 5%; transform: translateY(-50%); width: 300px; padding: 25px; background-color: rgba(0, 0, 0, 0.75); border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); color: #fff; }
.contact-overlay h4 { margin-top: 0; color: #ffd500; font-size: 2rem; font-weight: 400; border-bottom: 1px solid #555; padding-bottom: 10px; margin-bottom: 20px; }
.contact-overlay address { font-style: normal; }
.contact-email { display: flex; align-items: center; text-decoration: none; color: #fff; margin-bottom: 5px; transition: color 0.3s; }
.contact-email:hover { color: #ccc; }
.contact-email img { width: 20px; margin-right: 35px; }
.contact-email span { font-size: 1.2rem; font-weight: bold; }
.contact-overlay small { display: block; margin-left: 55px; color: #bbb; margin-bottom: 25px; }
.social-icons { margin-bottom: 25px; padding-top: 15px; border-top: 1px solid #555; }
.social-icons a { margin-right: 15px; display: inline-block; }
.social-icons img { width: 35px; opacity: 0.8; transition: opacity 0.3s; vertical-align: middle; }
.social-icons img:hover { opacity: 1; }
.copyright { margin: 0; font-size: 0.9rem; color: #aaa; line-height: 1.4; }
.location-subtitle { text-align: center; padding-bottom: 30px; }
.location-subtitle h3 { margin: 0; font-size: 0.8rem; color: #FFFFFF; font-weight: 400; letter-spacing: 1px; }

/* ==========================================================================
   MEDIA QUERIES (Combinados y Ajustados)
   ========================================================================== */

/* --- Móvil (<= 768px) --- */
@media (max-width: 768px) {
   

    /* --- Footer Móvil --- */
    .contact-overlay { position: relative; width: 100%; right: auto; top: auto; transform: none; border-radius: 0; box-sizing: border-box; }
    .map-container { height: 300px; }
    .location-subtitle h3 { font-size: 1.2rem; padding: 0 15px; }

    /* --- Cabecera Caso Móvil --- */
    .case-content .case-header-section h2 { font-size: 32px; flex-direction: column !important; text-align: center; }
    .case-content .case-header-section h2 { 
		margin-right: 0; 
		margin-bottom: 0px; 
		
	}
	
    /* --- Galería Caso Móvil (1 columna por defecto global) --- */
	
	/* --- Cabecera Caso Móvil --- */
	/* ... (tus reglas existentes para .case-header-section h2, etc.) ... */
	.icogrande { 
		margin-right: 0; 
		margin-bottom: 0px; 
	}

	/* --- AÑADE ESTA REGLA --- */
	.section-header h2 {
		flex-direction: column;
		gap: 15px; /* Para dar espacio entre el icono y el texto */
	}
	/* -------------------------- */


	/* --- Galería Caso Móvil (1 columna por defecto global) --- */
	

	

	
	
	
	
	
    /* --- Slider Móvil --- */
    .slider-principal { display: none; }
    .slider-movil { display: block; }

    /* --- Fancybox Móvil --- */
    .fancybox-slide { padding: 15px !important; }
    .fancybox-slide--image .fancybox-content { max-width: 90%; }
}

/* --- Ajuste detalles proyecto < 480px --- */
@media (max-width: 480px) {
    .case-content .project-details-list li strong { flex-basis: 100%; margin-bottom: 5px; }
    .case-content .project-details-list li span { flex-basis: 100%; }
}

/* --- Tablet (768px - 1023px) --- */
@media (min-width: 768px) {
    /* Galería GLOBAL y DENTRO DEL CASO: 3 Columnas */
    /* La regla global aplica también dentro de .case-content al no haber una más específica */
    .galeria-container { grid-template-columns: repeat(3, 1fr); }

    /* Cabecera Caso Tablet+ */
    .case-content .case-header-section h2 { flex-direction: row !important; font-size: 40px; }
    .case-content .case-header-section h2 .icogrande { margin-bottom: 0; margin-right: 15px; } /* Ajuste margen icono */
}

/* --- Desktop (1024px - 1399px) --- */
@media (min-width: 1024px) {
    /* Galería GLOBAL y DENTRO DEL CASO: 4 Columnas */
    .galeria-container { grid-template-columns: repeat(4, 1fr); }
    /* Navbar Desktop Bold */
	
}

/* --- Large Desktop (1400px+) --- */
@media (min-width: 1400px) {
    /* Galería GLOBAL y DENTRO DEL CASO: 6 Columnas */
    .galeria-container { grid-template-columns: repeat(6, 1fr); }
}

/* --- Ajustes Fancybox Globales --- */
.fancybox-slide { padding-top: 60px; } /* Espacio para navbar */





/* --- Estilos para Video Responsive en Casos --- */

/* Añade un espacio entre la imagen de presentación y el video */
.case-intro-column.presentation img {
  margin-bottom: 20px; /* Ajusta este valor si quieres más o menos espacio */
}

.presentation-video {
  width: 100%; /* Ocupa el 100% del ancho de la columna */
  height: auto;  /* La altura se calcula automáticamente */
  aspect-ratio: 16 / 9; /* Mantiene la proporción 16:9 (video estándar) */
  border: 0;     /* Quita cualquier borde */
}