/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 26 2025 | 00:09:56 */
html {
	overflow-x: hidden !important;
}

.relative {
	position: relative;
}

/* 🛠️ CSS BÁSICO Y TRANSICIÓN: .masthead */
.masthead {
    /* Asegura que el header esté fijo y encima del contenido */
    position: fixed; 
    top: 0;
    width: 100%;
    z-index: 999;
    
    /* Estado inicial: Transparente */
    background-color: transparent; 
    
    /* Aplicar una transición suave para el cambio de fondo */
    transition: background-color 0.4s ease; /* 0.4 segundos de suavizado */
}

/* ⚪️ ESTADO DESPUÉS DEL SCROLL: Fondo blanco */
.masthead.header-scrolled {
    background-color: rgba(255, 255, 255, 0.8); 
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px); 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
}

/* 🎨 OPCIONAL: CAMBIO DEL COLOR DE LOS ENLACES/TEXTO */
/* Si el texto inicial es claro (para fondo transparente) */
.masthead a {
    color: #ffffff; /* Color inicial del texto (ej: blanco) */
    transition: color 0.4s ease;
}

/* Color del texto después del scroll (para fondo blanco) */
.masthead.header-scrolled a {
    color: #000000 !important; 
    font-size: 16px !important;
}

.masthead.header-scrolled a:hover {
    color: #40CB40 !important; 
    font-size: 16px !important;
}

/* ---------------------------------------------------- */
/* 📱 CSS ESPECÍFICO PARA MÓVIL (para la transición de ocultar/mostrar) */
@media (max-width: 768px) {
    .masthead {
        /* Asegura una transición suave al ocultarse/mostrarse */
        transition: background-color 0.4s ease, top 0.3s ease-out; 
    }
}

.flip-card {
  perspective: 1000px;
  cursor: pointer;
  box-sizing: border-box;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  -webkit-backface-visibility: hidden; /* Oculta la cara cuando está girada */
  backface-visibility: hidden;
  /* Estilos de fondo (puedes estilizarlos en Elementor si prefieres) */
  background-color: #fff;
  padding: 20px; 
}

.flip-card-back {
  transform: rotateY(180deg);
}

.flip-card:hover .flip-card-inner,
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

/* ================================================= */
/* 1. CONFIGURACIÓN GENERAL Y VARIABLES */
/* ================================================= */

:root {
    --item-margin: 15%;     /* Distancia base de los ítems al borde */
    --item-width: 180px;    /* Ancho máximo para el texto */
    --fade-duration: 0.5s;  /* Duración del efecto de transición (smooth fade) */
    --text-color: #333;     /* Color de texto por defecto */
}

/* Contenedor principal del modelo */
.sector-model {
    position: relative; 
    /* AJUSTA ESTOS VALORES si tu SVG es más grande/pequeño */
    width: 900px; 
    height: 600px; 
    margin: 50px auto;
    background-color: #f8f7f2; 
}

/* Contenedor de los textos para posicionamiento absoluto */
.model-items {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}


/* ================================================= */
/* 2. ESTILOS Y TRANSICIÓN DE LOS SVGS (FADE SUAVE) */
/* ================================================= */

.svg-visual {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrar el SVG */
    max-width: 100%;
    height: auto;
    opacity: 0; /* Oculto por defecto */
    
    /* 💥 CLAVE DEL FADE SUAVE: Transición de opacidad 💥 */
    transition: opacity var(--fade-duration) ease-in-out; 
    z-index: 1; /* Nivel base */
}

/* SVG Inicial: Visible por defecto */
#svg-initial {
    opacity: 1; 
    z-index: 2; 
}

/* SVG Activo: Mostrado al hacer hover */
.svg-visual.active-hover {
    opacity: 1; 
    z-index: 3; 
}


/* ================================================= */
/* 3. ESTILOS Y POSICIONAMIENTO DE LOS ÍTEMS DE TEXTO */
/* ================================================= */

.model-item {
    position: absolute;
    width: var(--item-width);
    cursor: pointer; 
    pointer-events: all;
    color: var(--text-color); 
    font-size: 1.2em;
    font-weight: normal;
    line-height: 1.2;
}

.model-item:hover {
    font-weight: bold; 
    color: #000;
}


/* --- POSICIONAMIENTO (3 ARRIBA / 3 ABAJO - Simetría de la imagen) --- */

/* Consumo Masivo (Arriba al centro) */
.top-center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 0px; 
    text-align: center;
}

/* Banca y finanzas (Arriba a la derecha, cerca del centro horizontal) */
.top-right {
    top: 25%;
    right: 5%; 
    transform: translateY(-50%);
    text-align: left;
}

/* ONGs internacionales en medio ambiente (Arriba a la izquierda, cerca del centro horizontal) */
.top-left {
    top: 25%;
    left: 5%; 
    transform: translateY(-50%);
    text-align: right;
}

/* Industrial (Abajo al centro) */
.bottom-center {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 0px; 
    text-align: center;
}

/* Minería y energía (Abajo a la derecha, cerca del centro horizontal) */
.bottom-right {
    bottom: 25%; 
    right: 5%; 
    transform: translateY(50%);
    text-align: left;
}

/* Educación (Abajo a la izquierda, cerca del centro horizontal) */
.bottom-left {
    bottom: 25%; 
    left: 5%; 
    transform: translateY(50%);
    text-align: right;
}

/* Opcional: Si quieres desactivar el clic en escritorio (para que solo funcione el hover) */
@media (min-width: 768px) {
    /* Esto es crucial para que el hover funcione sin el jQuery en desktop */
    .flip-card {
        pointer-events: auto !important;
    }
}