/*
Theme Name: Centro Cultural
Theme URI: https://ccmch.cl
Author: Centro Cultural
Author URI: https://ccmch.cl
Description: Tema a medida para Centro Cultural.
Version: 1.14.4
Text Domain: centro-cultural
*/

/* ==========================================================================
   1. VARIABLES Y RESET BÁSICO
   ========================================================================== */
:root {
	--color-magenta: #e5007e;
	--color-celeste: #42b9f5;
	--color-dark: #1a1127;
	/* Fondo del menú móvil y submenús */
	--color-white: #ffffff;
	--font-main: 'Montserrat', sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-main);
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ==========================================================================
   TOPBAR ANUNCIO
   ========================================================================== */
#cc-topbar-slot {
    width: 100%;
}
.cc-topbar {
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(90deg, #4ec4ff, #f492ff);
}
.cc-topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 20px;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
}
a.cc-topbar-inner--link {
    cursor: pointer;
}
.cc-topbar-texto {
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #1a1127;
    line-height: 1.4;
}
.cc-topbar-link {
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-magenta);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
a.cc-topbar-inner--link:hover .cc-topbar-link {
    opacity: 0.7;
}

/* ==========================================================================
   2. HEADER - MOBILE FIRST (Vista para celulares)
   ========================================================================== */
.cc-site-header {
    background-color: var(--color-dark);
    position: relative;
    z-index: 9999;
    width: 100%; /* Corregido para evitar scroll horizontal */
}

.cc-header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
}

/* Logo */
.custom-logo {
	max-width: 180px;
	height: auto;
}

/* Botón Hamburguesa */
.cc-menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 22px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	margin-left: auto;
	/* Empuja el botón a la derecha */
}

.cc-menu-toggle .line {
	display: block;
	width: 100%;
	height: 3px;
	background-color: var(--color-white);
	transition: all 0.3s ease;
}

/* Animación del botón a "X" al hacer clic */
.cc-menu-toggle.is-active .line:nth-child(1) {
	transform: translateY(9.5px) rotate(45deg);
}

.cc-menu-toggle.is-active .line:nth-child(2) {
	opacity: 0;
}

.cc-menu-toggle.is-active .line:nth-child(3) {
	transform: translateY(-9.5px) rotate(-45deg);
}

/* Menú Móvil Oculto */
.cc-main-nav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100vw;       /* ancho completo de pantalla */
	background-color: var(--color-dark);
	padding: 24px 20px 100px 20px; /* padding-bottom generoso para la barra fija de redes */
	box-sizing: border-box;
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
}

.cc-main-nav.is-active {
	display: block;
	/* Se muestra al hacer clic en la hamburguesa */
}

.cc-menu {
	list-style: none;
	padding: 0 0 0 8vw; /* indenta el menú hacia el interior sin centrar */
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cc-menu a {
	color: var(--color-white);
	text-decoration: none;
	font-weight: 700;
	display: block;
	padding: 12px 0;
	text-transform: uppercase;
	font-size: 1.05rem;
}

/* Submenús en Móvil */
.cc-menu .sub-menu {
	list-style: none;
	padding-left: 20px;
	display: none;
	/* Elementor u otro JS debería abrir esto, o se muestran por defecto */
}

.cc-menu li:hover>.sub-menu {
	display: block;
}

/* ==========================================================================
   3. HEADER - DESKTOP (Transparente y Superpuesto)
   ========================================================================== */
@media (min-width: 992px) {

    .cc-site-header {
        position: absolute;
        top: 10px; /* Arreglado, le faltaba el 'px' en tu código */
        left: 0;
        width: 100%;
        background-color: transparent;
        box-sizing: border-box;
    }

    .cc-header-inner {
        display: flex;
        justify-content: space-between; /* Mejor que space-around para empujar logo a la izq y nav a la der */
        align-items: center;
        padding: 25px 20px 10px 20px;
        max-width: 1400px;
        margin: 0 auto;
        gap: 30px; /* Mantiene una distancia segura entre el logo y el menú */
    }

    .cc-main-nav {
        display: flex; /* Lo volvemos flex para alinearlo mejor */
        justify-content: flex-end;
        position: static;
        background-color: transparent;
        flex-grow: 1; /* Le permite tomar todo el espacio libre que deje el logo */
        max-width: 100%; /* Quitamos la restricción del 70% */
        padding: 0;
        box-shadow: none;
    }

    .cc-menu {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap; /* MAGIA 1: Prohíbe estrictamente que los enlaces salten de línea */
        
        /* MAGIA 2: El espacio entre enlaces (gap) será de 25px en pantallas grandes, pero se encogerá hasta 10px si la pantalla se achica */
        gap: clamp(10px, 2vw, 25px); 
        margin: 0;
        padding: 0;
    }

    .cc-menu-toggle {
        display: none;
    }

    /* Enlaces Principales */
    .cc-menu > li > a {
        position: relative;
        padding: 10px 5px;
        white-space: nowrap; /* MAGIA 3: Evita que el texto de un enlace largo (ej: "Quiénes Somos") se parta en dos líneas */
        
        /* MAGIA 4: La letra será de 16px, pero si la pantalla se achica, se encogerá suavemente hasta 13px para caber */
        font-size: clamp(13px, 1.2vw, 16px); 
    }

    .cc-menu > li > a::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0%;
        height: 3px;
        background-color: var(--color-celeste);
        transition: width 0.3s ease;
    }

    .cc-menu > li > a:hover::before {
        width: 100%;
    }

    /* Submenú Flotante (Hover Slide Down) */
    .cc-menu .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background-color: var(--color-dark);
        padding: 15px 0;
        min-width: 220px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-15px);
        transition: all 0.3s ease;
        display: block;
    }

    .cc-menu li {
        position: relative;
    }

    .cc-menu li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Hover en enlaces del submenú (Línea lateral celeste) */
    .cc-menu .sub-menu li a {
        padding: 10px 25px;
        border-left: 4px solid transparent;
        transition: all 0.2s ease;
        white-space: normal; /* El submenú sí puede tener varias líneas si es largo */
    }

    .cc-menu .sub-menu li a:hover {
        border-left-color: var(--color-celeste);
        background-color: rgba(255, 255, 255, 0.05);
    }

    /* Evita que el submenú del último item se corte por la derecha */
    .cc-menu > li:last-child > .sub-menu,
    .cc-menu > li:nth-last-child(2) > .sub-menu {
        left: auto;
        right: 0;
    }
}

/* ==========================================================================
   FOOTER PRINCIPAL
   ========================================================================== */
.cc-main-footer {
    background-color: #07030A; /* Tono negro profundo de tu imagen */
    color: #ffffff;
    padding-top: 60px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
}

.cc-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Grid principal del footer */
.cc-main-footer > .cc-footer-container {
    display: grid;
    gap: 50px;
    padding-bottom: 50px;
}

.cc-main-footer > .cc-footer-container.cc-footer-layout-three-cols {
    grid-template-columns: 1fr 1.2fr 1fr;
}

.cc-main-footer > .cc-footer-container.cc-footer-layout-two-cols {
    width: min(980px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    justify-items: center;
    align-items: start;
    column-gap: 72px;
}

.cc-main-footer > .cc-footer-container.cc-footer-layout-two-cols .cc-footer-col {
    width: 100%;
}

.cc-main-footer > .cc-footer-container.cc-footer-layout-two-cols .cc-footer-info {
    max-width: 420px;
    justify-self: center;
}

.cc-main-footer > .cc-footer-container.cc-footer-layout-two-cols .cc-footer-logos {
    width: auto;
    max-width: 340px;
    align-items: center;
    justify-self: center;
}

/* Columna 1: Info */
.cc-footer-brand img {
    max-width: 200px;
    margin-bottom: 30px;
    display: block;
}
.cc-f-desc { margin-bottom: 20px; line-height: 1.6; color: #e0e0e0; }
.cc-f-data { margin-bottom: 5px; color: #e0e0e0; }

.cc-f-link-blue {
    display: block;
    color: var(--color-celeste, #42b9f5);
    text-decoration: none;
    margin-top: 25px;
    font-weight: 600;
}

/* El enlace de Google Maps con la línea blanca */
.cc-f-link-maps {
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
    margin-top: 30px;
    padding-left: 12px;
    border-left: 3px solid #ffffff; /* Efecto vertical de la imagen */
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    line-height: 1.4;
    transition: color 0.3s;
}
.cc-f-link-maps:hover { color: var(--color-celeste, #42b9f5); }

/* Columna 2: Explora */
.cc-footer-heading {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.cc-footer-explore-list,
.cc-footer-explore-list .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cc-footer-explore-list li {
    margin-bottom: 20px;
}

.cc-footer-explore-list a {
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    line-height: 1.5;
    transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

.cc-footer-explore-list a:hover {
    color: var(--color-celeste, #42b9f5);
    text-decoration: underline;
}

.cc-footer-explore-list .sub-menu {
    margin-top: 10px;
    padding-left: 14px;
}

.cc-footer-explore-list .sub-menu li {
    margin-bottom: 10px;
}

/* Columna 3: Logos */
.cc-footer-logos {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}
.cc-f-banner-link img {
    max-height: 100px;
    width: auto;
    max-width: 100%;
    display: block;
}
.cc-footer-logos .cc-f-banner-link:first-child img {
    max-height: 160px;
}
@media (max-width: 768px) {
    .cc-footer-logos .cc-f-banner-link:first-child img { max-height: 150px; }
}

/* Barra Inferior */
.cc-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px 0;
}

.cc-bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.cc-f-copy {
    color: #e0e0e0;
    font-size: 12px;
}

/* Iconos Sociales en Círculos Outline */
.cc-f-socials {
    display: flex;
    gap: 10px;
    align-items: center;
}
.cc-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.55);
    background-color: transparent;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.cc-social-icon svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.cc-social-icon:hover {
    background-color: var(--color-celeste, #42b9f5);
    border-color: var(--color-celeste, #42b9f5);
    transform: scale(1.1);
}

/* Responsivo para Tablets y Móviles */
@media (max-width: 992px) {
    .cc-main-footer > .cc-footer-container.cc-footer-layout-three-cols { grid-template-columns: 1fr 1fr; }
    .cc-main-footer > .cc-footer-container.cc-footer-layout-two-cols {
        width: min(900px, calc(100% - 40px));
        column-gap: 48px;
    }
}
@media (max-width: 768px) {
    .cc-main-footer > .cc-footer-container { grid-template-columns: 1fr; }
    .cc-bottom-flex { flex-direction: column; text-align: center; }
    .cc-f-banner-link img { max-height: 90px; }
}

/* ==========================================================================
   FOOTER SPONSORS — Grupos de patrocinadores
   ========================================================================== */
.cc-footer-sponsors-wrapper {
    width: 100%;
    background-color: #07030A;
}
.cc-footer-sponsors-group {
    padding: 2.2rem 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.cc-footer-sponsors-title {
    text-align: center;
    color: #cccccc;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    margin: 0 0 1.4rem;
}
.cc-footer-sponsors-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.8rem 2.8rem;
    max-width: 1100px;
    margin: 0 auto;
}
.cc-footer-sponsor-logo {
    display: block;
    max-height: 130px;
    width: auto;
    max-width: 160px;
    filter: grayscale(100%) brightness(1.6);
    opacity: 0.75;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
a:hover .cc-footer-sponsor-logo,
.cc-footer-sponsor-logo:hover {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}
@media (max-width: 768px) {
    .cc-footer-sponsors-group { padding: 1.6rem 20px; }
    .cc-footer-sponsors-grid  { gap: 1.2rem 1.8rem; }
    .cc-footer-sponsor-logo   { max-height: 90px; }
}

/* ==========================================================================
   WIDGET POSTS LOOP
   ========================================================================== */

/* ── Tarjeta base ────────────────────────────────────────────────────────── */
.cc-noticia-card {
	display: flex;
	position: relative;
	flex-direction: column;
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cc-loop-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Hover tarjeta — mantiene el translateY original */
.cc-noticia-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
}

/* ── Imagen con zoom en hover ────────────────────────────────────────────── */
.cc-loop-img-wrap {
	display: block;
	overflow: hidden;
}

.cc-loop-img {
	width: 100%;
	height: 250px;
	/* fallback; Elementor lo sobreescribe */
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.cc-noticia-card:hover .cc-loop-img {
	transform: scale(1.05);
}

/* ── Cuerpo ──────────────────────────────────────────────────────────────── */
.cc-loop-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 20px 20px;
	gap: 8px;
}

.cc-loop-fecha {
	font-size: 0.78rem;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cc-loop-titulo {
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
}

.cc-loop-titulo a {
	color: inherit;
	text-decoration: none;
}

.cc-noticia-card:hover .cc-loop-titulo a {
	color: var(--color-celeste, #42b9f5);
}

.cc-loop-extracto {
	margin: 0;
	font-size: 0.88rem;
	color: #555;
	line-height: 1.6;
	flex: 1;
}

/* ── Leer más — efecto de relleno ───────────────────────────────────────── */
.cc-leer-mas {
	position: relative;
	display: inline-block;
	align-self: flex-start;
	margin-top: 4px;
	padding: 6px 14px;
	color: var(--color-celeste, #42b9f5);
	font-weight: 700;
	font-size: 0.88rem;
	text-decoration: none;
	border-left: 3px solid var(--color-celeste, #42b9f5);
	background: linear-gradient(to right,
			var(--color-celeste, #42b9f5) 50%,
			transparent 50%);
	background-size: 200% 100%;
	background-position: right center;
	transition:
		background-position 0.3s ease,
		color 0.3s ease;
}

.cc-noticia-card:hover .cc-leer-mas {
	background-position: left center;
	color: #fff;
}

/* ── Grilla ──────────────────────────────────────────────────────────────── */
.cc-loop-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* fallback; Elementor lo sobreescribe */
	gap: 30px;
	transition: opacity 0.2s ease;
}

.cc-loop-wrapper.cc-loading .cc-loop-grid {
	opacity: 0.4;
	pointer-events: none;
}

/* Spinner de carga */
.cc-loop-wrapper {
	position: relative;
}

.cc-loop-wrapper.cc-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.55);
	z-index: 10;
}

.cc-loop-wrapper.cc-loading::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	border: 3px solid #ddd;
	border-top-color: var(--color-magenta, #c0006a);
	border-radius: 50%;
	animation: cc-spin 0.7s linear infinite;
	z-index: 11;
	transform: translate(-50%, -50%);
}

@keyframes cc-spin {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* ── Botón "Ver más" ─────────────────────────────────────────────────────── */
.cc-loop-nav {
	margin-top: 32px;
	text-align: center;
}

.cc-ver-mas-btn {
	display: inline-block;
	padding: 12px 32px;
	background: var(--color-magenta, #c0006a);
	color: #fff;
	border-radius: 4px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}

.cc-ver-mas-btn:hover {
	background: color-mix(in srgb, var(--color-magenta, #c0006a) 80%, #000);
	transform: translateY(-2px);
}

/* ── Paginación ──────────────────────────────────────────────────────────── */
.cc-loop-paginacion {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 32px;
}

.cc-pag-btn {
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 2px solid #ddd;
	background: #fff;
	border-radius: 4px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #444;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.cc-pag-btn:hover:not(:disabled) {
	border-color: var(--color-magenta, #c0006a);
	color: var(--color-magenta, #c0006a);
}

.cc-pag-btn.cc-pag-activa {
	background: var(--color-magenta, #c0006a);
	border-color: var(--color-magenta, #c0006a);
	color: #fff;
	cursor: default;
}

.cc-pag-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.cc-pag-ellipsis {
	padding: 0 4px;
	color: #aaa;
	user-select: none;
}

/* ── Sin resultados ──────────────────────────────────────────────────────── */
.cc-loop-sin-resultados {
	grid-column: 1 / -1;
	text-align: center;
	color: #888;
	padding: 40px 0;
}

/* Botón Cargar Más (Hover Diagonal) */
.cc-btn-cargar-mas {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 15px 40px;
	color: var(--color-white);
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	background: linear-gradient(135deg, var(--color-magenta) 0%, var(--color-celeste) 100%);
	background-size: 200% 200%;
	background-position: 0% 0%;
	transition: background-position 0.5s ease, transform 0.2s ease;
	border-radius: 4px;
}

.cc-btn-cargar-mas:hover {
	background-position: 100% 100%;
}

/* Galería Cultura (Aparición progresiva) */
.cc-galeria-img {
	opacity: 0.8;
	transition: all 0.4s ease;
	transform: scale(1);
}

.cc-galeria-item {
	overflow: hidden;
	/* Evita que la imagen se salga al hacer zoom */
}

.cc-galeria-item:hover .cc-galeria-img {
	opacity: 1;
	transform: scale(1.05);
}

/* ==========================================================================
   FORZAR ANCHO COMPLETO AL HERO BANNER (Sin conflictos de transform)
   ========================================================================== */
.elementor-widget-cc_hero_banner {
    width: 100vw !important;
    position: relative !important;
    
    /* El cálculo mágico: Retrocede la mitad de la pantalla exacta, compensando el ancho del contenedor. 
       Logra el ancho completo sin usar "transform", respetando el video. */
    left: calc(-50vw + 50%) !important; 
    right: auto !important;
    
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 70px !important;
}

.elementor-widget-cc_hero_banner .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
}

/* ==========================================================================
   WIDGET LISTA DE IMAGENES EN ENLACES
   ========================================================================== */

/* ── Contenedor del enlace ──────────────────────────────────────────────── */
.cc-ill-link {
	cursor: pointer;
	display: block;
	overflow: hidden;
	/* recorta la imagen cuando se agranda */
}

/* ── Imagen con transición ──────────────────────────────────────────────── */
.cc-ill-img {
	/* Valores por defecto; Elementor los sobreescribe vía --cc-ill-* */
	--cc-ill-scale: 1.07;
	--cc-ill-duration: 350ms;

	display: block;
	object-fit: cover;
	width: 100%;

	transform: scale(1);
	transition: transform var(--cc-ill-duration) ease-in-out;
	will-change: transform;
}

/* ── Efecto hover ───────────────────────────────────────────────────────── */
.cc-ill-link:hover .cc-ill-img,
.cc-ill-link:focus-visible .cc-ill-img {
	/* accesibilidad con teclado */
	transform: scale(var(--cc-ill-scale));
}

/* ==========================================================================
   ANIMACIONES AL HACER SCROLL
   ========================================================================= */

/* 1. Efecto Fade Up para todo el bloque del Widget (Título y Subtítulo) */
.cc-anim-fade-up {
	opacity: 0;
	transform: translateY(30px);
	/* Un poco menos de desplazamiento para que sea más sutil */
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	will-change: opacity, transform;
	/* Optimización para el navegador */
}

/* Estado visible disparado por JavaScript */
.cc-anim-fade-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* 2. Efecto Barrido Izquierda -> Derecha exclusivo para el Cuadrado */
.cc-cuadrado-decorativo {
	/* Estado inicial: Invisible y comprimido totalmente a la izquierda */
	transform: scaleX(0);
	transform-origin: left center;
	/* Punto de anclaje a la izquierda vital para el efecto */
	opacity: 0;

	/* Configuración de la animación: Un poco más rápida que el fade up */
	transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease-out;

	/* Pequeño retraso para que empiece justo después de que el título empieza a subir */
	transition-delay: 0.3s;
	will-change: transform, opacity;
}

/* Estado visible del cuadrado cuando el padre entra en pantalla */
.cc-anim-fade-up.is-visible .cc-cuadrado-decorativo {
	transform: scaleX(1);
	/* Se expande a su ancho original (60px definidos en PHP) */
	opacity: 1;
}

/* ==========================================================================
   WIDGET: GRID DE SERVICIOS COMPLEJO
   ========================================================================== */

/* 1. Grid Principal Responsivo */
.cc-services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 3 columnas en escritorio */
	gap: 30px;
	padding: 20px 0;
}

/* Responsivo para móviles y tablets */
@media (max-width: 991px) {
	.cc-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 2 columnas en tablets */
}

@media (max-width: 767px) {
	.cc-services-grid {
		grid-template-columns: 1fr;
	}

	/* 1 columna en celulares */
}

/* 2. Tarjeta Cliqueable (cc-service-card-wrapper) */
.cc-service-card-wrapper {
	text-decoration: none;
	color: inherit;
	display: block;
	/* Cubre todo el área */
	position: relative;
	cursor: pointer;
	overflow: hidden;
	/* Evita que la imagen se salga al hacer zoom */
	border-radius: 4px;
	/* Bordes suaves */
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	/* Sombra suave */
	transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
	/* Preparación para hover */
}

/* Efecto Hover TARJETA: Se agranda (Zoom effect) */
.cc-service-card-wrapper:hover {
	transform: scale(1.03);
	/* Ligero zoom */
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	/* Sombra más pronunciada */
}

/* Contenedor interno */
.cc-service-card {
	padding: 0;
}

/* Contenedor Imagen (fuerza aspect ratio) */
.cc-service-img-wrapper {
	width: 100%;
	position: relative;
	padding-bottom: 66.6%;
	/* Aspect ratio 3:2 (ejemplo) */
	overflow: hidden;
}

/* Imagen con zoom suave */
.cc-service-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease-out;
}

/* Efecto Hover IMAGEN: Zoom suave interno */
.cc-service-card-wrapper:hover .cc-service-img {
	transform: scale(1.08);
	/* Zoom interno de la imagen */
}

/* Título de la tarjeta */
.cc-service-title {
	font-size: 20px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 20px;
	line-height: 1.3;
}

/* 3. Botón de Enlace (cc-service-cta) - El efecto mágico */
.cc-service-cta {
	position: relative;
	display: inline-block;
	padding: 5px 15px 5px 20px;
	/* Ajuste padding: para línea y para hover expansion */
	margin: 0 20px 20px 20px;
	transition: background-position 0.5s ease;
}

/* El Fondo Diagonal / Barra de Barrido */
.cc-service-cta-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	/* initial thin line at left of text */
	height: 100%;
	/* background-color: handled by inline styles per card color in PHP */
	transition: width 0.4s ease-out;
	z-index: 1;
	/* detrás del texto siempre */
}

/* El Texto (INGRESA AQUÍ) */
.cc-service-cta-text {
	font-size: 14px;
	font-weight: 300;
	text-transform: uppercase;
	color: #333;
	/* default dark color */
	position: relative;
	z-index: 2;
	/* Texto por encima */
	transition: color 0.3s ease;
}

/* Efecto Hover ENLACE: La barra se expande de IZQUIERDA A DERECHA */
.cc-service-card-wrapper:hover .cc-service-cta-bar {
	width: calc(100% + 15px);
	/* Se expande a su ancho original incluyendo padding */
}

/* Cambio de color del texto para legibilidad */
.cc-service-card-wrapper:hover .cc-service-cta-text {
	color: #fff;
	/* Texto blanco sobre el fondo de barrido completo */
}

/* ==========================================================================
   CORRECCIÓN: VISIBILIDAD DENTRO DEL EDITOR DE ELEMENTOR
   ========================================================================== */
/* Cuando Elementor está activo, forzamos a que los elementos animados sean visibles */
body.elementor-editor-active .cc-anim-fade-up {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

body.elementor-editor-active .cc-cuadrado-decorativo {
	transform: scaleX(1) !important;
	opacity: 1 !important;
}

/* ==========================================================================
   WIDGET: SECCIÓN QUIÉNES SOMOS
   ========================================================================== */

/* Contenedor Principal: Flexbox para alinear las dos columnas */
.cc-nosotros-section {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 40px 0;
}

/* Columna Izquierda (Textos) y Columna Derecha (Imagen) */
.cc-nosotros-left,
.cc-nosotros-right {
	flex: 1 1 calc(50% - 10px);
	/* Ocupan 50% en escritorio menos la mitad del gap */
	min-width: 300px;
	/* Evita que se encojan demasiado en pantallas medianas */
	display: flex;
	flex-direction: column;
}

/* Bloque Gris Principal */
.cc-nosotros-main-box {
	background-color: #f4f4f4;
	padding: 50px 40px;
	flex-grow: 1;
	/* Hace que el bloque ocupe el espacio disponible */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

/* Título */
.cc-nosotros-title {
	position: relative;
	display: inline-block;
	font-size: 40px;
	font-weight: 900;
	color: #000;
	margin: 0 0 20px 0;
	z-index: 1;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Ajuste del cuadrado específicamente para este título */
.cc-nosotros-title .cc-cuadrado-decorativo {
	position: absolute;
	top: -5px;
	left: -15px;
	width: 50px;
	height: 50px;
	z-index: -1;
}

/* Texto de descripción */
.cc-nosotros-desc {
	font-size: 16px;
	color: #666;
	line-height: 1.6;
	margin-bottom: 40px;
	font-weight: 300;
}

/* Ajuste del botón para que no tenga margin bottom extra de la clase heredada */
.cc-nosotros-btn-wrapper {
	box-shadow: none !important;
	background: transparent;
}

.cc-nosotros-btn-wrapper:hover {
	transform: none;
	/* Quitamos el zoom de tarjeta porque aquí solo queremos el hover del texto */
	box-shadow: none !important;
}

/* Bloques Grises Inferiores (Grid de 2 columnas) */
.cc-nosotros-bottom-boxes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 20px;
}

/* Cada bloque gris pequeño */
.cc-nosotros-sub-box {
	background-color: #f4f4f4;
	min-height: 80px;
	/* Altura mínima para que se vean como en la imagen */
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	font-size: 14px;
	font-weight: bold;
}

/* Imagen de la derecha */
.cc-nosotros-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Asegura que la imagen llene la columna sin deformarse */
	display: block;
}

/* Responsivo para Móviles (Apilar columnas) */
@media (max-width: 768px) {

	.cc-nosotros-left,
	.cc-nosotros-right {
		flex: 1 1 100%;
	}

	.cc-nosotros-main-box {
		padding: 30px 20px;
	}
}

/* ==========================================================================
   WIDGET: GALERÍA LOOP CON LIGHTBOX Y HOVER DINÁMICO
   ========================================================================== */

/* 1. Estructura del Widget (Full Width breakout opcional) */
.cc-galeria-loop-widget {
    width: 100%;
}
.cc-galeria-loop-widget.cc-is-full-width {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    position: relative;
}

/* 2. Estructura Grid (Columnas controladas desde Elementor) */
.cc-gallery-loop-grid {
    display: grid;
    /* Elementor inyecta aquí el 'grid-template-columns' y el 'gap' */
    width: 100%;
    padding: 20px 0;
}

/* Responsivo para móviles (forzamos un gap menor si es muy pequeño) */
@media (max-width: 480px) {
    .cc-gallery-loop-grid {
        gap: 10px !important;
    }
}

/* 3. Wrapper de cada Imagen (El enlace del lightbox) */
.cc-gallery-item-wrap {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1; /* Default cuadrado; Elementor lo sobreescribe con el control de proporción */
    overflow: hidden;
    cursor: pointer;
    
    /* Variables inyectadas desde Elementor (con fallbacks) */
    --hover-bg: rgba(0, 0, 0, 0.6);
    --hover-line: #42b9f5;
    --line-w: 10%; /* Grosor de cada línea diagonal; Elementor lo sobreescribe */
}

.cc-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* 3. Capa Oscura + Líneas Diagonales (Esquina inferior derecha) */
.cc-gallery-item-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease-out;
    transform: translateX(20px);
}

/* Modificadores de Líneas (grosor controlado por --line-w) */
.cc-gallery-item-wrap.cc-lines-0::before {
    background: var(--hover-bg);
}
/* 1 línea */
.cc-gallery-item-wrap.cc-lines-1::before {
    background: linear-gradient(110deg,
        var(--hover-bg)   0%,
        var(--hover-bg)   calc(100% - var(--line-w)),
        var(--hover-line) calc(100% - var(--line-w)),
        var(--hover-line) 100%
    );
}
/* 2 líneas: separadas por un gap de --line-w/2 */
.cc-gallery-item-wrap.cc-lines-2::before {
    background: linear-gradient(110deg,
        var(--hover-bg)   0%,
        var(--hover-bg)   calc(100% - 2.5 * var(--line-w)),
        var(--hover-line) calc(100% - 2.5 * var(--line-w)),
        var(--hover-line) calc(100% - 1.5 * var(--line-w)),
        var(--hover-bg)   calc(100% - 1.5 * var(--line-w)),
        var(--hover-bg)   calc(100% - var(--line-w)),
        var(--hover-line) calc(100% - var(--line-w)),
        var(--hover-line) 100%
    );
}
/* 3 líneas: separadas por gaps de --line-w/2 */
.cc-gallery-item-wrap.cc-lines-3::before {
    background: linear-gradient(110deg,
        var(--hover-bg)   0%,
        var(--hover-bg)   calc(100% - 4 * var(--line-w)),
        var(--hover-line) calc(100% - 4 * var(--line-w)),
        var(--hover-line) calc(100% - 3 * var(--line-w)),
        var(--hover-bg)   calc(100% - 3 * var(--line-w)),
        var(--hover-bg)   calc(100% - 2.5 * var(--line-w)),
        var(--hover-line) calc(100% - 2.5 * var(--line-w)),
        var(--hover-line) calc(100% - 1.5 * var(--line-w)),
        var(--hover-bg)   calc(100% - 1.5 * var(--line-w)),
        var(--hover-bg)   calc(100% - var(--line-w)),
        var(--hover-line) calc(100% - var(--line-w)),
        var(--hover-line) 100%
    );
}

/* 4. Contenedor de Textos Flotantes (Título y Subtítulo) */
.cc-gallery-hover-texts {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 40px; /* Evita que el texto choque con las líneas */
    z-index: 3;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease-out;
    pointer-events: none;
}

/* Estilos base Subtítulo */
.cc-gallery-subtitle {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

/* Estilos base Título */
.cc-gallery-title {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    color: #ffffff;
}

/* 5. Activación al hacer Hover */
.cc-gallery-item-wrap:hover::before {
    opacity: 1;
    transform: translateX(0);
}
.cc-gallery-item-wrap:hover .cc-gallery-hover-texts {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s; /* Entra un poquitito después del fondo para mayor elegancia */
}
.cc-gallery-item-wrap:hover img {
    transform: scale(1.05); /* Zoom suave a la imagen */
}

/* ==========================================================================
   VISOR A MEDIDA (PANTALLA COMPLETA) - SE MANTIENE INTACTO
   ========================================================================== */
.cc-lightbox-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    
    /* Usamos RGBA (el mismo tono morado oscuro, pero al 85% de opacidad) */
    background-color: rgba(49, 41, 56, 0.85); 
    
    /* EFECTO PREMIUM: Desenfoca ligeramente la página de fondo */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cc-lightbox-overlay.is-active {
    opacity: 1;
    pointer-events: all;
}

.cc-lightbox-content {
    position: relative;
    max-width: 85vw;
    /* Deja margen a los lados */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* El ícono [ ] en la esquina superior derecha */
.cc-lightbox-close {
    position: absolute;
    top: -45px;
    right: 0;
    width: 24px;
    height: 24px;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 2px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.cc-lightbox-close:hover {
    transform: scale(1.1);
}

/* La Imagen */
.cc-lightbox-content img {
    max-width: 100%;
    max-height: calc(90vh - 100px); /* Dejamos espacio para caption + barra */
    object-fit: contain;
    display: block;
}

/* Caption del lightbox (WYSIWYG) */
.cc-lightbox-caption {
    display: none; /* visible via JS solo si hay contenido */
    margin: 0;
    padding: 14px 24px;
    background-color: rgba(0, 0, 0, 0.82);
    color: #e0e0e0;
    font-size: 0.875rem;
    line-height: 1.55;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}
.cc-lightbox-caption p {
    margin: 0 0 6px;
    color: inherit;
}
.cc-lightbox-caption p:last-child {
    margin-bottom: 0;
}
.cc-lightbox-caption strong,
.cc-lightbox-caption b {
    color: #42b9f5;
    font-weight: 700;
}
.cc-lightbox-caption em,
.cc-lightbox-caption i {
    font-style: italic;
    color: #c0c0c0;
}
.cc-lightbox-caption a {
    color: #42b9f5;
    text-decoration: underline;
}

/* La Barra Blanca */
.cc-lightbox-bottom-bar {
    background-color: #ffffff;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centra el contador */
    position: relative;
    width: 100%;
}

/* El Contador */
.cc-lightbox-counter {
    font-weight: bold;
    color: #000;
    letter-spacing: 3px;
    font-size: 14px;
}

/* Las Flechas */
.cc-lightbox-nav {
    position: absolute;
    left: 20px;
    /* Pegadas a la izquierda */
    display: flex;
    gap: 20px;
}

.cc-lightbox-nav button {
    background: transparent;
    border: none;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    cursor: pointer;
    padding: 0;
}

.cc-lightbox-nav button:hover {
    color: var(--color-celeste, #42b9f5);
}

/* ==========================================================================
   WIDGET: TÍTULO / CITA GENÉRICA
   ========================================================================== */
.cc-titulo-generico-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 20px; /* Espaciado superior e inferior para que respire */
}

.cc-titulo-generico-texto {
    max-width: 1000px; /* Evita que el texto se estire demasiado en pantallas gigantes */
    text-align: center;
    color: #000000; /* Negro profundo */
    
    /* Tipografía igual a la de tu imagen */
    font-family: 'Montserrat', sans-serif;
    font-weight: 800; /* Extra bold */
    font-style: italic; /* Cursiva */
    
    /* Tamaño dinámico: mínimo 20px, ideal 2.5vw, máximo 32px */
    font-size: clamp(20px, 2.5vw, 32px);
    line-height: 1.4;
    margin: 0;
}

/* ==========================================================================
   WIDGET: PÁRRAFO ESTILO EDITOR (WYSIWYG)
   ========================================================================== */
.cc-parrafo-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px; /* Margen de seguridad para móviles */
}

.cc-parrafo-editor {
    width: 100%;
    max-width: 1000px; /* Mantiene la lectura cómoda en PC */
    font-family: 'Montserrat', sans-serif;
    color: #666666; /* Gris suave para el texto normal */
}

/* Párrafos */
.cc-parrafo-editor p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Negritas (Strong / B) - Para que destaquen como en la imagen */
.cc-parrafo-editor strong, 
.cc-parrafo-editor b {
    color: #333333; /* Gris muy oscuro, casi negro */
    font-weight: 700;
}

/* Listas Numeradas (ol) y Viñetas (ul) */
.cc-parrafo-editor ol, 
.cc-parrafo-editor ul {
    padding-left: 20px;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.8;
    color: #666666;
}

.cc-parrafo-editor li {
    margin-bottom: 10px;
}

/* ==========================================================================
   AJUSTES RESPONSIVOS (Para el Título y el Párrafo)
   ========================================================================== */
@media (max-width: 768px) {
    /* El título genérico ya usa clamp() que es responsivo por naturaleza, 
       pero ajustamos el padding para que no ocupe tanto espacio vertical en móvil */
    .cc-titulo-generico-wrapper {
        padding: 30px 15px; 
    }
    
    .cc-parrafo-wrapper {
        padding: 15px;
    }
    
    .cc-parrafo-editor p,
    .cc-parrafo-editor ol, 
    .cc-parrafo-editor ul {
        font-size: 15px; /* Un pelín más pequeño en móviles para que quepan más palabras por línea */
        line-height: 1.6;
    }
}

/* ── CC Hero Title — estilos base (preconfiguracion visual) ─────────────── */
.cc-hero-title-wrap {
    width: 100%;
    box-sizing: border-box;
    background-position: center center;
    background-repeat: no-repeat;
}

.cc-hero-etiqueta {
    margin: 0 0 4px;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    line-height: 1.3;
}

.cc-hero-titulo {
    margin: 0 0 16px;
    font-size: clamp(60px, 12vw, 140px);
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    line-height: 0.9;
}

.cc-hero-sub1 {
    margin: 0 0 8px;
    font-size: clamp(16px, 2vw, 26px);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.4;
}

.cc-hero-sub2 {
    margin: 0;
    font-size: clamp(14px, 1.6vw, 22px);
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.4;
}

/* ==========================================================================
   WIDGET: SECCIÓN DE VIDEOS (Estructura y Animaciones Avanzadas)
   ========================================================================== */
.cc-video-section-wrapper { display: flex; flex-wrap: wrap; width: 100%; margin: 40px 0; }

/* Columna Izquierda (Video Principal) */
.cc-video-main-col { flex: 1 1 60%; min-height: 400px; position: relative; background-color: #000; overflow: hidden; }
.cc-video-main-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: transform 0.5s ease; }
.cc-video-main-col:hover .cc-video-main-bg { transform: scale(1.05); }

/* Botones Play */
.cc-video-play-btn, .cc-video-list-icon {
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.4s ease;
}
.cc-video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; cursor: pointer; z-index: 2; }
.cc-video-play-btn svg, .cc-video-list-icon svg { transition: stroke 0.4s ease; }

/* Columna Derecha */
.cc-video-sidebar-col { flex: 1 1 40%; background-color: #f4f4f4; padding: 50px 40px; display: flex; flex-direction: column; }
.cc-video-sidebar-title { font-size: 32px; font-weight: 900; margin: 0 0 30px 0; color: #000; }
.cc-video-list { display: flex; flex-direction: column; margin-bottom: 40px; }

/* Elementos de la Lista */
.cc-video-list-item { display: flex; align-items: center; text-decoration: none; margin-bottom: 2px; }
.cc-video-list-icon { width: 70px; height: 70px; flex-shrink: 0; }
.cc-video-list-texts { padding-left: 20px; display: flex; flex-direction: column; }
.cc-vl-sub { color: var(--color-celeste, #42b9f5); font-weight: 800; font-size: 13px; margin-bottom: 5px; text-transform: uppercase; }
.cc-vl-title { color: #444; font-size: 15px; font-weight: 500; }

/* ==========================================================================
   BOTÓN VER MÁS: EFECTOS DE BARRIDO MULTIDIRECCIONAL
   ========================================================================== */
.cc-video-btn-more {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    font-weight: 800;
    text-decoration: none;
    align-self: flex-start;
    overflow: hidden; /* Corta el color para que no se salga del botón */
    z-index: 1;
    /* La variable --btn-hover-bg la inyecta Elementor dinámicamente */
}

/* El pseudo-elemento que hace el barrido */
.cc-video-btn-more::before {
    content: '';
    position: absolute;
    background-color: var(--btn-hover-bg, #000);
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Animación super suave */
}

/* 1. Barrido de Izquierda a Derecha */
.cc-sweep-left::before { top: 0; bottom: 0; left: 0; width: 0; }
.cc-sweep-left:hover::before { width: 100%; }

/* 2. Barrido de Derecha a Izquierda */
.cc-sweep-right::before { top: 0; bottom: 0; right: 0; width: 0; }
.cc-sweep-right:hover::before { width: 100%; }

/* 3. Barrido de Arriba a Abajo */
.cc-sweep-top::before { left: 0; right: 0; top: 0; height: 0; }
.cc-sweep-top:hover::before { height: 100%; }

/* 4. Barrido de Abajo a Arriba */
.cc-sweep-bottom::before { left: 0; right: 0; bottom: 0; height: 0; }
.cc-sweep-bottom:hover::before { height: 100%; }

/* Responsivo */
@media (max-width: 992px) { .cc-video-main-col, .cc-video-sidebar-col { flex: 1 1 100%; } .cc-video-main-col { min-height: 300px; } }

/* ==========================================================================
   WIDGET: SECCIÓN DIVIDIDA GENÉRICA
   ========================================================================== */
.cc-sg-wrapper {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin: 40px 0;
    --img-width: 50%;
}

.cc-sg-text-col {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.cc-sg-img-col {
    width: var(--img-width);
    flex-shrink: 0; 
    display: flex;
}
.cc-sg-img-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Contenedor del título para que no se corte el cuadrado */
.cc-sg-title-container {
    overflow: visible !important;
}

/* El H2 idéntico al otro widget */
.cc-sg-title {
    position: relative;
    display: inline-block;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
    z-index: 1;
    overflow: visible !important;
}

/* El cuadrado de 60x60 idéntico */
.cc-sg-cuadrado {
    position: absolute;
    top: -5px;
    left: -15px;
    width: 60px;
    height: 60px;
    z-index: -1;
    /* El color se inyecta desde Elementor */
}

.cc-sg-content p { margin-bottom: 15px; line-height: 1.6; }
.cc-sg-content p:last-child { margin-bottom: 0; }

/* Responsivo */
@media (max-width: 992px) {
    .cc-sg-wrapper { flex-wrap: wrap !important; }
    .cc-sg-text-col, .cc-sg-img-col { width: 100% !important; }
    .cc-sg-img-col img { height: auto; max-height: 400px; }
}

/* ==========================================================================
   WIDGET: SECCIÓN FONDO + TEXTO (Estilo "EL EDIFICIO")
   ========================================================================== */
.cc-sft-wrapper {
    /* El padding se controla desde Elementor, pero damos un resguardo */
    box-sizing: border-box;
    overflow: hidden; 
}

/* Contenedor del título para que no se corte el cuadrado */
.cc-sft-title-container {
    overflow: visible !important;
}

/* Título y Cuadrado (Idéntico al widget de Sección Dividida) */
.cc-sft-title {
    position: relative;
    display: inline-block;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
    z-index: 1;
    overflow: visible !important;
}

.cc-sft-cuadrado {
    position: absolute;
    top: -5px;
    left: -15px;
    width: 60px;
    height: 60px;
    z-index: -1;
    /* El background-color se inyecta desde Elementor */
}

/* Textos WYSIWYG */
.cc-sft-content-text p {
    margin-bottom: 15px;
    line-height: 1.6;
}
.cc-sft-content-text p:last-child {
    margin-bottom: 0;
}

/* Ajustes Móviles */
@media (max-width: 768px) {
    .cc-sft-title {
        font-size: 32px !important; /* Ajuste de seguridad para móviles */
    }
}

/* ==========================================================================
   WIDGET: SECCIÓN INFO DOBLE
   ========================================================================== */
.cc-sid-wrapper {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    /* Variables inyectadas desde Elementor para la línea */
    --separator-color: #ff7b54;
    --separator-width: 3px;
}

/* Las columnas ocupan partes iguales */
.cc-sid-col {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

/* La línea separadora del medio */
.cc-sid-separator {
    width: var(--separator-width);
    background-color: var(--separator-color);
    flex-shrink: 0;
}

/* Textos */
.cc-sid-title {
    font-weight: 900;
    text-transform: uppercase;
    margin-top: 0;
    line-height: 1.2;
}

.cc-sid-desc p {
    margin-bottom: 15px;
    line-height: 1.6;
}
.cc-sid-desc p:last-child {
    margin-bottom: 0;
}

.cc-sid-pre-btn {
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 15px;
}

/* ==========================================================================
   BOTONES Y EFECTOS HOVER (Reutiliza la lógica Sweep)
   ========================================================================== */
.cc-sid-btn {
    position: relative;
    display: inline-block;
    font-weight: 800;
    text-decoration: none;
    overflow: hidden;
    z-index: 1;
    /* La variable --btn-hover-bg se inyecta desde Elementor */
}

/* Pseudo-elemento para el barrido */
.cc-sid-btn::before {
    content: '';
    position: absolute;
    background-color: var(--btn-hover-bg, #000);
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Las direcciones del barrido */
.cc-sid-btn.cc-sweep-left::before { top: 0; bottom: 0; left: 0; width: 0; }
.cc-sid-btn.cc-sweep-left:hover::before { width: 100%; }

.cc-sid-btn.cc-sweep-right::before { top: 0; bottom: 0; right: 0; width: 0; }
.cc-sid-btn.cc-sweep-right:hover::before { width: 100%; }

.cc-sid-btn.cc-sweep-top::before { left: 0; right: 0; top: 0; height: 0; }
.cc-sid-btn.cc-sweep-top:hover::before { height: 100%; }

.cc-sid-btn.cc-sweep-bottom::before { left: 0; right: 0; bottom: 0; height: 0; }
.cc-sid-btn.cc-sweep-bottom:hover::before { height: 100%; }

/* ==========================================================================
   RESPONSIVO MÓVILES
   ========================================================================== */
@media (max-width: 768px) {
    .cc-sid-wrapper {
        flex-wrap: wrap; /* Permite que las columnas caigan una debajo de la otra */
    }
    
    .cc-sid-col {
        flex: 1 1 100%;
        padding: 40px 20px !important; /* Fuerza padding amigable en móvil */
    }
    
    /* La línea vertical pasa a ser horizontal en celulares */
    .cc-sid-separator {
        width: 100%;
        height: var(--separator-width);
    }
}

/* ==========================================================================
   WIDGET: CC - TÍTULO DE SECCIÓN (cc_titulo_seccion)
   ========================================================================== */
.cc-ts-wrapper {
    text-align: center;  /* default — Elementor sobreescribe */
    padding: 40px 0;     /* default — Elementor sobreescribe */
}

.cc-ts-titulo {
    position: relative;
    display: inline-block;
    font-size: 46px;
    font-weight: 900;
    color: #000;          /* default — Elementor sobreescribe */
    margin: 0 0 15px 0;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
    overflow: visible;
}

.cc-cuadrado-decorativo {
    position: absolute;
    top: -5px;
    left: -15px;
    width: 60px;
    height: 60px;
    z-index: -1;
    /* background-color inyectado desde Elementor */
}

.cc-ts-subtitulo {
    font-size: 18px;
    color: #888888;       /* default — Elementor sobreescribe */
    font-weight: 300;
    margin: 0 auto;       /* auto para centrar con max-width */
    max-width: 70%;       /* default — Elementor sobreescribe */
    text-align: center;   /* default — Elementor sobreescribe */
    line-height: 1.6;
}
.cc-ts-subtitulo p,
.cc-ts-subtitulo ul,
.cc-ts-subtitulo ol {
    margin-bottom: 10px;
    line-height: 1.6;
}
.cc-ts-subtitulo p:last-child,
.cc-ts-subtitulo ul:last-child,
.cc-ts-subtitulo ol:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .cc-ts-titulo { font-size: 32px; }
    .cc-ts-subtitulo { max-width: 100% !important; font-size: 16px; }
}

/* ==========================================================================
   WIDGET: CC - SECCIÓN CON FORMULARIO (cc_reserva_sala)
   ========================================================================== */

/* ── Wrapper principal ─────────────────────────────────────────────────── */
.cc-rs-outer {
    width: 100%;
}

.cc-rs-wrapper {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row; /* default: imagen a la derecha */
    align-items: stretch;
    width: 100%;
}

/* ── Columna de texto ──────────────────────────────────────────────────── */
.cc-rs-text-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

/* ── Columna de imagen ─────────────────────────────────────────────────── */
.cc-rs-img-col {
    flex-shrink: 0;
    width: var(--cc-rs-img-width, 48%); /* Elementor sobreescribe con --cc-rs-img-width */
}

.cc-rs-img-col img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Título con cuadrado decorativo ───────────────────────────────────── */
.cc-rs-title-container {
    overflow: visible !important;
}

.cc-rs-title {
    position: relative;
    display: inline-block;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
    z-index: 1;
    overflow: visible !important;
}

.cc-rs-cuadrado {
    position: absolute;
    top: -5px;
    left: -15px;
    width: 60px;
    height: 60px;
    z-index: -1;
    /* background-color inyectado desde Elementor */
}

/* ── Contenido (párrafo) ───────────────────────────────────────────────── */
.cc-rs-content p { margin-bottom: 15px; line-height: 1.6; }
.cc-rs-content p:last-child { margin-bottom: 0; }

/* ── Botón toggle ──────────────────────────────────────────────────────── */
.cc-rs-toggle-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    border: none;
    outline: none;
    text-align: left;
    text-decoration: none;
    z-index: 1;
    transition: color 0.4s;
    box-sizing: border-box;
}

.cc-rs-btn-icon {
    position: relative;
    z-index: 2;
    font-size: 1.2em;
    font-weight: 900;
    line-height: 1;
    flex-shrink: 0;
}

.cc-rs-btn-label {
    position: relative;
    z-index: 2;
}

/* Pseudo-elemento base para el efecto de barrido */
.cc-rs-toggle-btn::before {
    content: '';
    position: absolute;
    background-color: var(--cc-rs-btn-hover-bg, #e040fb);
    z-index: 1;
}

/* ─ Dirección: Izquierda → Derecha ─ */
.cc-rs-toggle-btn.cc-sweep-left::before {
    top: 0; bottom: 0; left: 0;
    width: 0;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.cc-rs-toggle-btn.cc-sweep-left:hover::before,
.cc-rs-toggle-btn.cc-sweep-left.is-open::before { width: 100%; }

/* ─ Dirección: Derecha → Izquierda ─ */
.cc-rs-toggle-btn.cc-sweep-right::before {
    top: 0; bottom: 0; right: 0;
    width: 0;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.cc-rs-toggle-btn.cc-sweep-right:hover::before,
.cc-rs-toggle-btn.cc-sweep-right.is-open::before { width: 100%; }

/* ─ Dirección: Arriba → Abajo ─ */
.cc-rs-toggle-btn.cc-sweep-top::before {
    left: 0; right: 0; top: 0;
    height: 0;
    transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.cc-rs-toggle-btn.cc-sweep-top:hover::before,
.cc-rs-toggle-btn.cc-sweep-top.is-open::before { height: 100%; }

/* ─ Dirección: Abajo → Arriba ─ */
.cc-rs-toggle-btn.cc-sweep-bottom::before {
    left: 0; right: 0; bottom: 0;
    height: 0;
    transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.cc-rs-toggle-btn.cc-sweep-bottom:hover::before,
.cc-rs-toggle-btn.cc-sweep-bottom.is-open::before { height: 100%; }

/* ─ Dirección: Diagonal (↘ esquina superior-izq → inferior-der) ─ */
.cc-rs-toggle-btn.cc-sweep-diagonal::before {
    top: 0; left: 0;
    width: 200%;
    height: 200%;
    transform: translateX(-100%) translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.cc-rs-toggle-btn.cc-sweep-diagonal:hover::before,
.cc-rs-toggle-btn.cc-sweep-diagonal.is-open::before {
    transform: translateX(0) translateY(0);
}

/* ── Columna de video (portada + botón play) ──────────────────────────── */
.cc-rs-video-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background-color: #000;
    overflow: hidden;
    cursor: pointer;
}

.cc-rs-video-poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: transform 0.5s ease, opacity 0.4s ease;
}

.cc-rs-video-wrap:hover .cc-rs-video-poster {
    transform: scale(1.05);
    opacity: 0.65;
}

.cc-rs-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    background-color: #42b9f5; /* default — Elementor sobreescribe */
    transition: background-color 0.3s ease;
}

.cc-rs-play-btn svg {
    stroke: #000000; /* default — Elementor sobreescribe */
    transition: stroke 0.3s ease;
}

/* ── Cajón del formulario (animación de apertura) ─────────────────────── */
/* Por defecto: oculto. El JS también aplica display:none como respaldo. */
.cc-rs-form-drawer {
    overflow: hidden !important;
    max-height: 0 !important;
    background-color: #f0f9ff; /* default — Elementor sobreescribe */
    transition: max-height 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}

.cc-rs-form-drawer.is-open {
    max-height: 2000px !important;
}

.cc-rs-form-inner {
    padding: 30px 40px 40px; /* default — Elementor sobreescribe */
}

/* ── Campos de texto del formulario (CF7) ─────────────────────────────── */
.cc-rs-form-inner .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.cc-rs-form-inner input[type="text"],
.cc-rs-form-inner input[type="email"],
.cc-rs-form-inner input[type="tel"],
.cc-rs-form-inner input[type="url"],
.cc-rs-form-inner input[type="number"],
.cc-rs-form-inner textarea {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #cccccc !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 10px 4px !important;
    color: #333333;
    font-size: 14px;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.cc-rs-form-inner .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.cc-rs-form-inner input[type="text"]:focus,
.cc-rs-form-inner input[type="email"]:focus,
.cc-rs-form-inner input[type="tel"]:focus,
.cc-rs-form-inner input[type="url"]:focus,
.cc-rs-form-inner textarea:focus {
    border-bottom-color: #42b9f5 !important;
}

.cc-rs-form-inner .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 15px;
}

/* ── Botón de envío del formulario (CF7, WPForms, etc.) ───────────────── */
/* Reset completo: elimina appearance nativo del navegador que bloquea estilos */
.cc-rs-form-inner input[type="submit"],
.cc-rs-form-inner button[type="submit"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-block !important;
    cursor: pointer !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    /* Padding por defecto — Elementor lo sobreescribe si el usuario lo cambia */
    padding: 15px 30px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    /* Variables con defaults — Elementor las sobreescribe */
    --cc-rs-fbtn-bg: #42b9f5;
    --cc-rs-fbtn-hover-bg: #000000;
    /* Color de fondo normal */
    background-color: var(--cc-rs-fbtn-bg) !important;
    transition: background-position 0.45s cubic-bezier(0.25, 1, 0.5, 1), color 0.4s !important;
}

/* ─ Diagonal ↘ (por defecto) ─ */
.cc-rs-form-inner.cc-rs-fsweep-diagonal input[type="submit"],
.cc-rs-form-inner.cc-rs-fsweep-diagonal button[type="submit"] {
    background-image: linear-gradient(
        135deg,
        var(--cc-rs-fbtn-hover-bg) 50%,
        var(--cc-rs-fbtn-bg) 50%
    ) !important;
    background-size: 250% 250% !important;
    background-position: bottom right !important;
}
.cc-rs-form-inner.cc-rs-fsweep-diagonal input[type="submit"]:hover,
.cc-rs-form-inner.cc-rs-fsweep-diagonal button[type="submit"]:hover {
    background-position: top left !important;
}

/* ─ Izquierda → Derecha ─ */
.cc-rs-form-inner.cc-rs-fsweep-left input[type="submit"],
.cc-rs-form-inner.cc-rs-fsweep-left button[type="submit"] {
    background-image: linear-gradient(
        to right,
        var(--cc-rs-fbtn-hover-bg) 50%,
        var(--cc-rs-fbtn-bg) 50%
    ) !important;
    background-size: 200% 100% !important;
    background-position: right center !important;
}
.cc-rs-form-inner.cc-rs-fsweep-left input[type="submit"]:hover,
.cc-rs-form-inner.cc-rs-fsweep-left button[type="submit"]:hover {
    background-position: left center !important;
}

/* ─ Derecha → Izquierda ─ */
.cc-rs-form-inner.cc-rs-fsweep-right input[type="submit"],
.cc-rs-form-inner.cc-rs-fsweep-right button[type="submit"] {
    background-image: linear-gradient(
        to left,
        var(--cc-rs-fbtn-hover-bg) 50%,
        var(--cc-rs-fbtn-bg) 50%
    ) !important;
    background-size: 200% 100% !important;
    background-position: left center !important;
}
.cc-rs-form-inner.cc-rs-fsweep-right input[type="submit"]:hover,
.cc-rs-form-inner.cc-rs-fsweep-right button[type="submit"]:hover {
    background-position: right center !important;
}

/* ─ Arriba → Abajo ─ */
.cc-rs-form-inner.cc-rs-fsweep-top input[type="submit"],
.cc-rs-form-inner.cc-rs-fsweep-top button[type="submit"] {
    background-image: linear-gradient(
        to bottom,
        var(--cc-rs-fbtn-hover-bg) 50%,
        var(--cc-rs-fbtn-bg) 50%
    ) !important;
    background-size: 100% 200% !important;
    background-position: center bottom !important;
}
.cc-rs-form-inner.cc-rs-fsweep-top input[type="submit"]:hover,
.cc-rs-form-inner.cc-rs-fsweep-top button[type="submit"]:hover {
    background-position: center top !important;
}

/* ─ Abajo → Arriba ─ */
.cc-rs-form-inner.cc-rs-fsweep-bottom input[type="submit"],
.cc-rs-form-inner.cc-rs-fsweep-bottom button[type="submit"] {
    background-image: linear-gradient(
        to top,
        var(--cc-rs-fbtn-hover-bg) 50%,
        var(--cc-rs-fbtn-bg) 50%
    ) !important;
    background-size: 100% 200% !important;
    background-position: center top !important;
}
.cc-rs-form-inner.cc-rs-fsweep-bottom input[type="submit"]:hover,
.cc-rs-form-inner.cc-rs-fsweep-bottom button[type="submit"]:hover {
    background-position: center bottom !important;
}

/* ── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cc-rs-wrapper {
        flex-wrap: wrap !important;
    }
    .cc-rs-img-col {
        width: 100% !important;
        order: -1; /* Imagen siempre arriba en móvil */
    }
    .cc-rs-img-col img {
        height: auto;
        max-height: 350px;
    }
    .cc-rs-text-col {
        width: 100%;
    }
}

/* ==========================================================================
   CONTACT FORM 7 — ESTILOS GLOBALES
   Aplica a todos los formularios CF7 del sitio.
   Personaliza los colores editando las variables en :root (arriba del archivo)
   o sobreescribiéndolas en un selector más específico.
   ========================================================================== */

/* ── Variables del formulario (heredan del tema, sobreescribibles) ─────── */
.wpcf7 {
    --cf7-border:        #cccccc;
    --cf7-focus:         var(--color-celeste, #42b9f5);
    --cf7-placeholder:   #aaaaaa;
    --cf7-text:          #555555;
    --cf7-label:         #888888;
    --cf7-btn-bg:        var(--color-celeste, #42b9f5);
    --cf7-btn-text:      #ffffff;
    --cf7-btn-hover-bg:  #e040fb;
    --cf7-btn-hover-text:#ffffff;
}

/* ── Layout: espaciado entre filas del form ────────────────────────────── */
.wpcf7-form p {
    margin-bottom: 22px;
}
.wpcf7-form p:last-of-type {
    margin-bottom: 0;
}

/* ── Labels ────────────────────────────────────────────────────────────── */
.wpcf7-form label {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--cf7-label);
    margin-bottom: 2px;
    letter-spacing: 0.2px;
}

/* ── Span wrapper que CF7 genera alrededor de cada campo ──────────────── */
.wpcf7-form span.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* ── Campos de texto: solo borde inferior (underline) ─────────────────── */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="search"],
.wpcf7-form textarea {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1.5px solid var(--cf7-border) !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 10px 4px !important;
    color: var(--cf7-text) !important;
    font-size: 15px !important;
    font-family: inherit !important;
    transition: border-color 0.3s ease !important;
    box-sizing: border-box !important;
    resize: vertical;
}

/* ── Focus: borde inferior cambia al color de acento ─────────────────── */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form input[type="date"]:focus,
.wpcf7-form input[type="search"]:focus,
.wpcf7-form textarea:focus {
    border-bottom-color: var(--cf7-focus) !important;
}

/* ── Placeholder ───────────────────────────────────────────────────────── */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: var(--cf7-placeholder);
    font-size: 14px;
    font-weight: 300;
}

/* ── Textarea: altura mínima cómoda ────────────────────────────────────── */
.wpcf7-form textarea {
    min-height: 100px !important;
}

/* ── Checkbox / Acceptance ─────────────────────────────────────────────── */
.wpcf7-form .wpcf7-list-item {
    margin: 0 0 8px 0 !important;
}
.wpcf7-form .wpcf7-list-item label {
    display: inline-flex !important;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--cf7-text);
    font-weight: 400;
}
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--cf7-focus);
    cursor: pointer;
}

/* ── Campo de archivo ──────────────────────────────────────────────────── */
.wpcf7-form input[type="file"] {
    font-size: 14px;
    color: var(--cf7-text);
    padding: 8px 0;
    cursor: pointer;
}

/* ── Validación: campo inválido ────────────────────────────────────────── */
.wpcf7-form .wpcf7-not-valid {
    border-bottom-color: #e53935 !important;
}
.wpcf7-not-valid-tip {
    font-size: 12px !important;
    color: #e53935 !important;
    margin-top: 5px !important;
    display: block !important;
    font-weight: 400 !important;
}

/* ── Respuesta del formulario (éxito / error) ─────────────────────────── */
.wpcf7-response-output {
    margin: 20px 0 0 !important;
    padding: 12px 18px !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}
.wpcf7-mail-sent-ok {
    background-color: #e8f5e9 !important;
    color: #2e7d32 !important;
    border-left: 3px solid #2e7d32 !important;
}
.wpcf7-mail-sent-ng,
.wpcf7-aborted,
.wpcf7-spam-blocked,
.wpcf7-validation-errors,
.wpcf7-acceptance-missing {
    background-color: #fce4ec !important;
    color: #c62828 !important;
    border-left: 3px solid #c62828 !important;
}

/* ── Botón Submit: diagonal ↘ (esquina sup-izq → inf-der) ────────────── */
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-block !important;
    cursor: pointer !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 18px 40px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-family: inherit !important;
    color: var(--cf7-btn-text) !important;
    /* Gradiente diagonal para el efecto hover ↘ */
    background-image: linear-gradient(
        135deg,
        var(--cf7-btn-hover-bg) 50%,
        var(--cf7-btn-bg)       50%
    ) !important;
    background-size: 250% 250% !important;
    background-position: bottom right !important; /* estado normal: muestra btn-bg */
    transition: background-position 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                color 0.4s !important;
}

/* ── Hover: el color de hover entra desde la esquina superior-izquierda ── */
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover {
    background-position: top left !important;  /* muestra btn-hover-bg */
    color: var(--cf7-btn-hover-text) !important;
}

/* ── Spinner de CF7 (cargando al enviar) ───────────────────────────────── */
.wpcf7-submit + .wpcf7-spinner {
    margin-left: 12px;
    vertical-align: middle;
}

/* ── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .wpcf7-form input[type="submit"],
    .wpcf7-form button[type="submit"] {
        width: 100% !important;
        padding: 16px 20px !important;
    }
}

/* ==========================================================================
   CC FORMULARIO DINÁMICO — Estilos base del template
   ========================================================================== */

/* ── Layout: modo con panel de información ─────────────────────────────── */
/* ── Layout ────────────────────────────────────────────────────────────── */

.cc-fd-wrapper {
    width: 100%;
}

.cc-fd-layout-wrap {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.cc-fd-solo-wrap {
    display: flex;
}

.cc-fd-form-col,
.cc-fd-form-inner {
    flex: 1;
    min-width: 0;
}

/* ── Grid de campos ────────────────────────────────────────────────────── */
.cc-fd-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}

.cc-fd-grid:last-of-type {
    margin-bottom: 0;
}

/* ── Campo individual ──────────────────────────────────────────────────── */
.cc-fd-campo {
    display: flex;
    flex-direction: column;
}

/* ── Etiquetas ─────────────────────────────────────────────────────────── */
.cc-fd-label {
    display: block;
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: 6px;
    transition: color 0.2s ease;
}

.cc-fd-campo:focus-within .cc-fd-label {
    color: var(--color-celeste);
}

/* ── Inputs y Textarea ─────────────────────────────────────────────────── */
.cc-fd-input,
.cc-fd-textarea {
    width: 100%;
    box-sizing: border-box !important;
    display: block !important;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 400;
    color: #1a1127;
    background: transparent !important;
    border: none !important;
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    outline: none;
    transition: border-color 0.25s ease;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
}

.cc-fd-input:focus,
.cc-fd-textarea:focus {
    border-bottom-color: var(--color-celeste) !important;
    border-bottom-width: 2px !important;
    outline: none;
}

.cc-fd-input.cc-fd-error,
.cc-fd-textarea.cc-fd-error {
    border-bottom: 2px solid #e74c3c !important;
}

select.cc-fd-select.cc-fd-error {
    border: 2px solid #e74c3c !important;
}

.cc-fd-input[data-required="1"]:invalid:not(:placeholder-shown),
.cc-fd-textarea[data-required="1"]:invalid:not(:placeholder-shown) {
    border-bottom-color: #e74c3c !important;
}

.cc-fd-input::placeholder,
.cc-fd-textarea::placeholder {
    color: rgba(0, 0, 0, 0.25);
}

.cc-fd-textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.6;
}

/* Selects */
.cc-fd-input[type="date"],
.cc-fd-input[type="time"],
select.cc-fd-input {
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
}

/* ── Select personalizado ──────────────────────────────────────────────────── */
.cc-fd-select-wrap {
    position: relative;
    display: block;
    width: 100%;
}
.cc-fd-select-wrap::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #42b9f5;
    pointer-events: none;
    transition: transform 0.2s ease;
}
.cc-fd-select-wrap:focus-within::after {
    border-top-color: #42b9f5;
}
select.cc-fd-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding-right: 42px !important;
    cursor: pointer;
    background-color: #ffffff !important;
    color: #1a1127 !important;
    border: 1px solid rgba(26, 17, 39, 0.18) !important;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
select.cc-fd-select:focus {
    outline: none;
    border-color: #42b9f5 !important;
    background-color: #ffffff !important;
}
select.cc-fd-select:hover {
    border-color: rgba(66, 185, 245, 0.7) !important;
    background-color: #ffffff !important;
}

select.cc-fd-input option,
select.cc-fd-select option {
    background: #ffffff;
    color: #1a1127;
}
select.cc-fd-select optgroup {
    background: #f4f4f6;
    color: #6b6b80;
    font-style: normal;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Título de sección (dentro del formulario) ─────────────────────────── */
.cc-fd-section-title {
    font-family: var(--font-main);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #1a1127 !important;
    margin: 28px 0 4px;
    padding-left: 10px;
    border-left: 3px solid var(--color-celeste);
}
.cc-fd-section-subtitulo {
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 400;
    color: rgba(26, 17, 39, 0.55);
    margin: 0 0 14px;
    padding-left: 10px;
}

.cc-fd-separator {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin: 0 0 16px;
}

/* ── Opciones Radio (pill style) ───────────────────────────────────────── */
.cc-fd-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.cc-fd-radio-label {
    display: inline-block;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 7px 18px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.65);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cc-fd-radio-label:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #1a1127;
}

input[type="radio"]:checked + .cc-fd-radio-label {
    background: var(--color-celeste);
    border-color: var(--color-celeste);
    color: #000000;
    font-weight: 700;
}

/* ── Checkboxes ────────────────────────────────────────────────────────── */
.cc-fd-check-label {
    font-family: var(--font-main);
    font-size: 0.87rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.55;
    cursor: pointer;
}

.cc-fd-check-label a {
    color: var(--color-celeste);
    text-underline-offset: 2px;
}

/* ── Botón Enviar ──────────────────────────────────────────────────────── */
.cc-fd-submit {
    position: relative;
    display: inline-block;
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #ffffff;
    background: linear-gradient(
        135deg,
        var(--cc-fd-btn-c1, var(--color-magenta, #e5007e)) 0%,
        var(--cc-fd-btn-c2, var(--color-celeste, #42b9f5)) 100%
    ) !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 16px 40px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    box-shadow: 0 4px 20px rgba(229, 0, 126, 0.25);
}

.cc-fd-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(229, 0, 126, 0.35);
}

.cc-fd-submit:active {
    transform: translateY(0);
}

.cc-fd-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.cc-fd-submit-wrap {
    margin-top: 24px;
}

/* ── Mensajes ──────────────────────────────────────────────────────────── */
.cc-fd-msg-ok,
.cc-fd-msg-error {
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 14px 18px;
    margin-top: 16px;
    border-radius: 6px;
    display: none;
    animation: cc-fd-fadein 0.3s ease;
}

@keyframes cc-fd-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cc-fd-msg-ok {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.1);
    border-left: 3px solid #2ecc71;
}

.cc-fd-msg-error {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
    border-left: 3px solid #e74c3c;
}

/* ── Panel de Información ──────────────────────────────────────────────── */
.cc-fd-pi-titulo {
    font-family: var(--font-main);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 900;
    color: #1a1127;
    margin: 0 0 16px;
    line-height: 1.15;
}
.cc-fd-pi-desc,
.cc-fd-pi-desc p {
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.55);
    margin: 0 0 4px;
}

/* ── Cards grid ─────────────────────────────────────────────────────────── */
.cc-fd-pi-cards {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
    margin-top: 24px;
}

/* ── Card individual (estilo VG intro) ───────────────────────────────────── */
.cc-fd-pi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f4f4f4;
    border-radius: 8px;
    padding: 14px 18px;
    text-decoration: none;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.cc-fd-pi-card--link {
    cursor: pointer;
}
.cc-fd-pi-card--link:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.11);
    transform: translateY(-2px);
}
.cc-fd-pi-card--link:hover .cc-fd-pi-card-icon,
.cc-fd-pi-card--link:hover .cc-fd-pi-valor {
    color: var(--color-celeste);
}

/* ── Card: ícono ─────────────────────────────────────────────────────────── */
.cc-fd-pi-card-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--color-celeste);
    font-size: 1.1rem;
    transition: color 0.25s ease;
}

/* ── Card: cuerpo ────────────────────────────────────────────────────────── */
.cc-fd-pi-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cc-fd-pi-etiqueta {
    display: block;
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.85;
    color: inherit;
}
.cc-fd-pi-valor {
    display: block;
    font-family: var(--font-main);
    font-size: 0.93rem;
    font-weight: 700;
    line-height: 1.4;
    transition: color 0.25s ease;
}

/* ── Texto libre y separador ─────────────────────────────────────────────── */
.cc-fd-pi-item--texto {
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.7;
    opacity: 0.75;
}
.cc-fd-pi-sep {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 4px 0;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cc-fd-layout-wrap {
        flex-direction: column !important;
        gap: 40px !important;
    }
    .cc-fd-panel-info {
        flex: none !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .cc-fd-solo-wrap {
        justify-content: flex-start !important;
    }
    .cc-fd-form-inner {
        max-width: 100% !important;
    }
    .cc-fd-grid {
        grid-template-columns: 1fr !important;
    }
    .cc-fd-submit {
        width: 100%;
        text-align: center;
    }
}


/* ==========================================================================
   WIDGET GALERÍA DE SALAS
   ========================================================================== */

.cc-salas-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.cc-sala-card {
    display: flex;
    flex-direction: row;
    background: #efefef;
    border-radius: 12px;
    overflow: hidden;
    min-height: 420px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* ── Columna imagen ──────────────────────────────────────────────────────── */
.cc-sala-img-col {
    position: relative;
    flex: 0 0 48%;
    max-width: 48%;
    overflow: hidden;
    display: flex;
}
.cc-sala-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    transition: transform 0.4s ease;
}
.cc-sala-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    background: #2ecc71;
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 5px 12px;
    border-radius: 4px;
    line-height: 1;
}

/* ── Columna cuerpo ──────────────────────────────────────────────────────── */
.cc-sala-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 32px 40px;
    min-width: 0;
}
.cc-sala-titulo {
    font-family: var(--font-main);
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    font-weight: 800;
    color: #1a1127;
    margin: 0 0 14px;
    line-height: 1.15;
}
.cc-sala-desc {
    font-family: var(--font-main);
    font-size: 0.93rem;
    line-height: 1.7;
    color: rgba(0, 0, 0, 0.55);
    margin: 0 0 24px;
}

/* ── Stats ───────────────────────────────────────────────────────────────── */
.cc-sala-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-bottom: 24px;
}
.cc-sala-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cc-sala-stat-num {
    font-family: var(--font-main);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 900;
    color: #42b9f5;
    line-height: 1;
}
.cc-sala-stat-label {
    font-family: var(--font-main);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
}

/* ── Mini galería ────────────────────────────────────────────────────────── */
.cc-sala-galeria {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    margin-bottom: 24px;
    width: 100%;
    height: 90px;
    box-sizing: border-box;
}

.cc-sala-gal-thumb {
    border-radius: 6px;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.cc-sala-gal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.cc-sala-gal-thumb:hover img {
    transform: scale(1.06);
}

/* ── Advertencia ─────────────────────────────────────────────────────────── */
.cc-sala-advertencia {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.45;
}
.cc-sala-adv-icon {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.45;
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.cc-sala-cta {
    display: inline-block;
    margin-top: auto;
    font-family: var(--font-main);
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--color-celeste);
    text-decoration: none;
    transition: color 0.2s ease, letter-spacing 0.2s ease;
}
.cc-sala-cta:hover {
    color: #1a1127;
    letter-spacing: 0.02em;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cc-sala-card {
        flex-direction: column;
        min-height: 0;
    }
    .cc-sala-img-col {
        flex: none;
        max-width: 100%;
        min-height: 240px;
        position: relative;
    }
    .cc-sala-img {
        position: absolute;
    }
    .cc-sala-body {
        padding: 24px 20px;
    }
    .cc-sala-galeria--3,
    .cc-sala-galeria--4 { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================================
   WIDGET: CC TABS CONTENIDO
   ========================================================================== */

/* ── Barra de tabs — efecto archivador ───────────────────────────────────── */
.cc-tc-barra {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    margin: 0;
    margin-bottom: 0 !important;
    padding: 0 0 0 6px;
}
.cc-tc-tab-btn {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    border: none;
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 22px 10px;
    margin: 0 0 -1px 0;
    min-width: 90px;
    text-align: center;
    background: #c4bace;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    position: relative;
    z-index: 1;
    transform: translateY(4px);
    transition: transform 0.18s ease, background 0.18s ease;
    /* Forma de etiqueta de archivador */
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 100%, 0% 100%);
}
.cc-tc-tab-btn.is-active {
    background: #efefef;
    color: #1a1127;
    transform: translateY(0);
    z-index: 3;
}
.cc-tc-tab-btn:not(.is-active):hover {
    background: #b0a8bc;
    transform: translateY(2px);
}

/* ── Contenedor del panel ────────────────────────────────────────────────── */
.cc-tc-inner {
    background: #efefef;
    border-radius: 0 8px 8px 8px;
    overflow: hidden;
    position: relative;
    top: -2px;
    z-index: 2;
}
.cc-tc-panel {
    padding: 20px;
}
.cc-tc-panel-body {
    padding-top: 0;
}

.cc-tc-salas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.cc-tc-sala-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    padding: 20px 22px 18px;
    border: 1px solid rgba(26,17,39,0.08);
    box-shadow: 0 2px 12px rgba(26,17,39,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cc-tc-sala-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 32px rgba(26,17,39,0.14);
}

/* ── Bloque de imágenes del tab ─────────────────────────────────────────── */
.cc-tc-imgs {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 20px;
}
.cc-tc-img-main {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    height: 340px;
}
.cc-tc-img-hero {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.cc-tc-img-main:hover .cc-tc-img-hero {
    transform: scale(1.03);
}
.cc-tc-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px 32px;
    z-index: 1;
}
.cc-tc-img-titulo {
    margin: 0 0 8px;
    font-family: var(--font-main);
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
}
.cc-tc-img-subtitulo {
    margin: 0;
    font-family: var(--font-main);
    font-size: 0.9rem;
    color: rgba(255,255,255,0.82);
    line-height: 1.6;
    max-width: 560px;
}
.cc-tc-img-row {
    display: flex;
    height: 180px;
    gap: 3px;
    flex-shrink: 0;
    margin-top: 3px;
}
.cc-tc-img-thumb {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.cc-tc-img-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.cc-tc-img-thumb:hover img {
    transform: scale(1.05);
}

/* ── Bloque de imágenes de sala card ────────────────────────────────────── */
.cc-tc-sala-imgs {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.cc-tc-sala-img-main {
    overflow: hidden;
    flex-shrink: 0;
}
.cc-tc-sala-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.cc-tc-sala-img-main:hover .cc-tc-sala-img {
    transform: scale(1.04);
}
.cc-tc-sala-img-row {
    display: flex;
    height: 120px;
    gap: 2px;
    flex-shrink: 0;
}
.cc-tc-sala-img-thumb {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.cc-tc-sala-img-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.cc-tc-sala-img-thumb:hover img {
    transform: scale(1.06);
}

/* Cuerpo */
/* Cabecera badge + piso */
.cc-tc-sala-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.cc-tc-sala-cat {
    display: inline-block;
    font-family: var(--font-main);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #1a1127;
    background: rgba(66,185,245,0.12);
    border: 1px solid rgba(66,185,245,0.35);
    padding: 4px 10px;
    border-radius: 4px;
}
.cc-tc-sala-piso {
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(26,17,39,0.35);
}

/* Título */
.cc-tc-sala-titulo {
    margin: 0 0 10px;
    font-family: var(--font-main);
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a1127;
    line-height: 1.15;
}

/* Descripción */
.cc-tc-sala-desc {
    margin: 0 0 16px;
    font-family: var(--font-main);
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(26,17,39,0.6);
}

/* Stats grid */
.cc-tc-sala-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(26,17,39,0.08);
}
.cc-tc-sala-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cc-tc-sala-stat-icon {
    color: rgba(26,17,39,0.3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.cc-tc-sala-stat-lbl {
    font-family: var(--font-main);
    font-size: 0.78rem;
    color: rgba(26,17,39,0.45);
}
.cc-tc-sala-stat-val {
    font-family: var(--font-main);
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a1127;
}

/* Footer / CTA */
.cc-tc-sala-footer {
    margin-top: auto;
    padding-top: 4px;
}
.cc-tc-sala-link {
    display: inline-block;
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #42b9f5;
    text-decoration: none;
    transition: color 0.2s, letter-spacing 0.2s;
}
.cc-tc-sala-link:hover {
    color: #1a1127;
    letter-spacing: 0.12em;
}

/* ==========================================================================
   WIDGETS VG (VISITA GUIADA)
   ========================================================================== */

/* ── VG Introducción ───────────────────────────────────────────────────── */
.cc-vg-intro {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 24px;
}

.cc-vg-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.cc-vg-intro-titulo {
    margin: 0 0 20px;
    font-family: var(--font-main);
    font-weight: 800;
    line-height: 1.2;
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
}

.cc-vg-intro-texto {
    font-family: var(--font-main);
    font-weight: 400;
    line-height: 1.75;
    margin: 0 0 14px;
}

.cc-vg-intro-texto:last-of-type {
    margin-bottom: 28px;
}

.cc-vg-intro-feats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cc-vg-intro-feat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 8px;
    background-color: #f4f4f4;
}

.cc-vg-intro-feat-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.cc-vg-intro-feat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cc-vg-intro-feat-label {
    font-family: var(--font-main);
    font-size: 0.8em;
    opacity: 0.65;
}

.cc-vg-intro-feat-valor {
    font-family: var(--font-main);
    font-weight: 700;
}

/* Cuadrado decorativo exclusivo VG — no hereda el tamaño del global */
.cc-vg-cuadrado {
    position: absolute;
    top: -4px;
    left: -12px;
    width: 46px;
    height: 46px;
    z-index: 0;
    background-color: #42b9f5;
}

.cc-vg-intro-media {
    position: relative;
}

.cc-vg-intro-media img,
.cc-vg-intro-media video {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

@media (max-width: 991px) {
    .cc-vg-intro-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

@media (max-width: 767px) {
    .cc-vg-intro {
        padding: 40px 20px;
    }
}

/* ── VG Tipos de Visita ────────────────────────────────────────────────── */
.cc-vg-tipos {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 24px;
}

.cc-vg-tipos-header {
    text-align: center;
    margin-bottom: 48px;
}

.cc-vg-tipos-titulo {
    font-family: var(--font-main);
    font-weight: 800;
    line-height: 1.2;
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    margin: 0 0 12px;
}

.cc-vg-tipos-subtitulo {
    font-family: var(--font-main);
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.65;
    max-width: 620px;
    margin: 0 auto;
}

.cc-vg-tipos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cc-vg-tipo-card {
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: #ffffff;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.cc-vg-tipo-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
    transform: translateY(-3px);
}

.cc-vg-tipo-card--dest {
    background-color: #1a1127;
    border-color: #1a1127;
    color: #ffffff;
}

.cc-vg-tipo-icono {
    font-size: 1.8rem;
    line-height: 1;
    color: var(--color-celeste);
}

.cc-vg-tipo-nombre {
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.3;
}

.cc-vg-tipo-desc {
    font-family: var(--font-main);
    font-size: 0.93rem;
    line-height: 1.65;
    opacity: 0.8;
    margin: 0;
    flex: 1;
}

.cc-vg-tipo-meta {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cc-vg-tipo-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-main);
    font-size: 0.83rem;
    opacity: 0.75;
}

.cc-vg-tipo-meta-item svg {
    flex-shrink: 0;
    opacity: 0.6;
}

@media (max-width: 991px) {
    .cc-vg-tipos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .cc-vg-tipos-grid {
        grid-template-columns: 1fr;
    }
    .cc-vg-tipos {
        padding: 40px 20px;
    }
}

/* ── VG Recorrido ──────────────────────────────────────────────────────── */
.cc-vg-recorrido {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 24px;
}

.cc-vg-rec-header {
    text-align: center;
    margin-bottom: 52px;
}

.cc-vg-rec-titulo {
    font-family: var(--font-main);
    font-weight: 800;
    line-height: 1.2;
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    margin: 0 0 12px;
}

.cc-vg-rec-subtitulo {
    font-family: var(--font-main);
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.65;
    max-width: 600px;
    margin: 0 auto;
}

/* Lista de paradas */
.cc-vg-rec-lista {
    display: flex;
    flex-direction: column;
}

.cc-vg-rec-fila {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
}

/* Eje: número + línea vertical */
.cc-vg-rec-eje {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cc-vg-rec-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-main);
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.cc-vg-rec-linea {
    width: 2px;
    flex: 1;
    min-height: 20px;
    margin: 8px 0;
    border-radius: 2px;
}

/* Tarjeta de parada */
.cc-vg-rec-card {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 0;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    margin-bottom: 20px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.cc-vg-rec-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.11);
    transform: translateY(-2px);
}

.cc-vg-rec-card-body {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cc-vg-rec-card-titulo {
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 8px;
    line-height: 1.3;
}

.cc-vg-rec-card-desc {
    font-family: var(--font-main);
    font-size: 0.93rem;
    line-height: 1.65;
    opacity: 0.75;
    margin: 0;
}

.cc-vg-rec-card-img-wrap {
    overflow: hidden;
}

.cc-vg-rec-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.cc-vg-rec-card:hover .cc-vg-rec-card-img {
    transform: scale(1.05);
}

/* ── VG Horarios ───────────────────────────────────────────────────────── */
.cc-vg-horarios {
    max-width: 680px;
    margin: 0 auto;
    padding: 60px 24px;
}

.cc-vg-hor-header {
    text-align: center;
    margin-bottom: 36px;
}

.cc-vg-hor-titulo {
    font-family: var(--font-main);
    font-weight: 800;
    line-height: 1.2;
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    margin: 0;
}

.cc-vg-hor-card {
    border-radius: 12px;
    overflow: hidden;
    background-color: #f8f8f8;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.cc-vg-hor-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
}

.cc-vg-hor-fila--sep {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.cc-vg-hor-dias {
    font-family: var(--font-main);
    font-weight: 600;
}

.cc-vg-hor-disp,
.cc-vg-hor-nodisp {
    font-family: var(--font-main);
    font-weight: 700;
}

.cc-vg-hor-disp   { color: #2ecc71; }
.cc-vg-hor-nodisp { color: #e74c3c; }

.cc-vg-hor-nota {
    margin: 16px 0 0;
    text-align: center;
    font-family: var(--font-main);
    font-size: 0.87rem;
    font-style: italic;
    opacity: 0.6;
}

.cc-vg-hor-contacto {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.cc-vg-hor-contacto-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 0.95rem;
    color: inherit;
    transition: color 0.2s ease;
}

.cc-vg-hor-contacto-item:hover {
    color: var(--color-celeste);
}

@media (max-width: 767px) {
    .cc-vg-horarios { padding: 40px 20px; }
}

/* ── VG FAQ ────────────────────────────────────────────────────────────── */
.cc-vg-faq {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 24px;
}

.cc-vg-faq-header {
    text-align: center;
    margin-bottom: 40px;
}

.cc-vg-faq-titulo {
    font-family: var(--font-main);
    font-weight: 800;
    line-height: 1.2;
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    margin: 0;
}

.cc-vg-faq-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cc-vg-faq-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f8f8f8;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.cc-vg-faq-item.cc-abierto {
    background-color: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

.cc-vg-faq-pregunta {
    width: 100%;
    text-align: left;
    padding: 18px 22px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: inherit;
}

.cc-vg-faq-ico {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    transition: transform 0.25s ease;
    opacity: 0.5;
}

.cc-vg-faq-ico::before {
    content: '+';
    font-size: 1rem;
    line-height: 1;
}

.cc-vg-faq-item.cc-abierto .cc-vg-faq-ico {
    transform: rotate(45deg);
    opacity: 1;
}

.cc-vg-faq-respuesta {
    padding: 0 22px 18px;
    font-family: var(--font-main);
    font-size: 0.95rem;
    line-height: 1.7;
    opacity: 0.8;
}

@media (max-width: 767px) {
    .cc-vg-faq { padding: 40px 20px; }
}

/* ── VG CTA ────────────────────────────────────────────────────────────── */
.cc-vg-cta {
    padding: 80px 24px;
    text-align: center;
}

.cc-vg-cta-titulo {
    font-family: var(--font-main);
    font-weight: 800;
    line-height: 1.2;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    margin: 0 0 18px;
    color: #ffffff;
}

.cc-vg-cta-sub {
    font-family: var(--font-main);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto 40px;
    color: rgba(255, 255, 255, 0.75);
}

.cc-vg-cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.cc-vg-cta-btn,
.cc-vg-cta-btn2 {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 6px;
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cc-vg-cta-btn {
    background-color: #ffffff;
    color: #1a1127;
}

.cc-vg-cta-btn2 {
    background-color: transparent;
    border: 2px solid #ffffff;
    color: #ffffff;
}

.cc-vg-cta-btn:hover,
.cc-vg-cta-btn2:hover {
    opacity: 0.82;
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    .cc-vg-cta { padding: 60px 20px; }
    .cc-vg-cta-btn,
    .cc-vg-cta-btn2 { width: 100%; text-align: center; }
}

/* ── VG Recorrido ──────────────────────────────────────────────────────── */
    .cc-vg-rec-fila {
        grid-template-columns: 44px 1fr;
        gap: 14px;
    }
    .cc-vg-rec-card {
        grid-template-columns: 1fr !important;
    }
    .cc-vg-rec-card-img-wrap {
        height: 180px;
    }