/* CSS ORIGINAL EXTRACTADO */
:root {
--primary-color: #ff6b35;
--secondary-color: #2ec4b6;
--dark-color: #1a1a2e;
--light-color: #f8f9fa;
}
body {
font-family: 'Urbanist', sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: white;
min-height: 100vh;
}
/* ========================================= */
/* NAVBAR LAYOUT FIX (PC Y MOVIL) */
/* ========================================= */
.navbar {
background: rgba(26, 26, 46, 0.95) !important;
backdrop-filter: blur(10px);
border-bottom: 2px solid var(--primary-color);
padding: 0.5rem 1rem; /* Padding reducido para mejor control */
}
.navbar-container {
width: 100%;
display: flex;
flex-wrap: wrap; /* Permite que en móvil baje si es necesario, pero controlaremos el contenido */
align-items: center;
justify-content: space-between; /* Clave: Empuja extremos */
}
/* --- BRANDINGS --- */
#auto-branding {
display: flex;
align-items: center;
flex-shrink: 0; /* Evita que se aplaste */
margin-right: 20px; /* Espacio fijo solo en PC, lo quitamos en móvil */
}
.efdmb-branding {
display: flex;
align-items: center;
gap: 10px;
}
.efdmb-branding img {
height: 50px;
width: auto;
}
.brand-divider {
width: 2px;
height: 35px;
background: linear-gradient(to bottom, transparent, #D4AF37, transparent);
display: block;
}
.brand-text-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
}
.main-title {
font-family: 'Urbanist', sans-serif;
font-weight: 900;
font-size: 1.2rem;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1;
margin: 0;
}
.country-highlight { color: #D4AF37; }
.sub-title-slogan {
font-family: 'Urbanist', sans-serif;
font-size: 0.6rem;
color: #aaa;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 2px;
}
/* --- MENU Y BOTONES (Desktop) --- */
.navbar-collapse {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: flex-end; /* Alinea menú y botones a la derecha */
}
.navbar-nav {
display: flex;
align-items: center;
margin-right: auto; /* Empuja botones a la derecha extrema */
}
.nav-link {
color: white !important;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
padding: 0.5rem 1rem !important;
}
.nav-link:hover {
color: var(--primary-color) !important;
}
.d-flex.align-items-center {
gap: 10px; /* Espacio entre los botones de Registrar Comercio/Usuario */
}
.btn-flow {
background: linear-gradient(135deg, var(--primary-color), #e55a2b);
color: white;
border: none;
border-radius: 25px;
padding: 8px 20px;
font-weight: 700;
transition: all 0.3s ease;
font-size: 0.85rem;
white-space: nowrap;
}
.btn-flow:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
color: white;
}
/* ========================================= */
/* RESPONSIVE MOVIL (MAX-WIDTH: 991px) */
/* ========================================= */
@media (max-width: 991px) {
/* Ocultamos texto decorativo en móvil para ahorrar espacio */
.brand-text-wrapper, .brand-divider {
display: none !important;
}
/* Ajuste del branding en móvil */
#auto-branding {
    margin-right: auto; /* Empuja el toggler a la derecha */
}

/* El contenedor del menú colapsado */
.navbar-collapse {
    display: flex;
    flex-direction: column; /* Apila elementos verticalmente */
    align-items: flex-start; /* Alinea a la izquierda dentro del dropdown */
    justify-content: flex-start;
    width: 100%;
    margin-top: 1rem;
    padding-left: 0;
}

/* Los enlaces del menú ocupan todo el ancho */
.navbar-nav {
    flex-direction: column;
    width: 100%;
    margin-right: 0;
    gap: 0;
}

.nav-item {
    width: 100%;
}

.nav-link {
    padding: 0.8rem 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Contenedor de botones en móvil: Vertical y limpio */
.d-flex.align-items-center {
    flex-direction: column; /* Botones uno debajo del otro como pediste */
    align-items: stretch; /* Ocupan todo el ancho */
    width: 100%;
    gap: 10px;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid rgba(255,255,255,0.1);
}

.btn-flow {
    width: 100%; /* Botones full width en menú móvil */
    text-align: center;
}
}
/* ========================================= */
/* RESTO DE ESTILOS ORIGINALES */
/* ========================================= */
.hero-section {
background: url('https://images.unsplash.com/photo-1514525253161-7a46d19cd819?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
padding: 150px 0;
text-align: center;
position: relative;
}
.hero-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(26, 26, 46, 0.8);
}
.hero-section .container { position: relative; z-index: 2; }
.display-1 {
font-weight: 900;
text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
background: linear-gradient(135deg, #ff6b35, #2ec4b6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.card-flow {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
transition: all 0.3s ease;
color: white;
}
.card-flow:hover {
transform: translateY(-10px);
border-color: var(--primary-color);
box-shadow: 0 15px 30px rgba(255, 107, 53, 0.2);
}
.card-flow img { border-radius: 15px 15px 0 0; height: 200px; object-fit: cover; }
.section-title {
font-weight: 900;
margin-bottom: 50px;
background: linear-gradient(135deg, #ff6b35, #2ec4b6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
footer {
background: var(--dark-color);
padding: 50px 0 20px;
margin-top: 50px;
}
.admin-panel {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 1000;
}
.admin-btn {
background: var(--primary-color);
color: white;
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
font-size: 1.5rem;
box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);
transition: all 0.3s ease;
}
.admin-btn:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(255, 107, 53, 0.6);
}
.user-info-container { position: relative; }
.user-display {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 8px 15px;
border-radius: 25px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid #ff6b35;
transition: all 0.3s ease;
}
.user-display:hover { background: rgba(255, 255, 255, 0.2); }
.user-avatar {
width: 35px;
height: 35px;
border-radius: 50%;
background: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: white;
object-fit: cover;
}
.user-dropdown {
display: none;
position: absolute;
top: 100%;
right: 0;
background: #1a1a2e;
border: 1px solid #ff6b35;
border-radius: 8px;
min-width: 200px;
z-index: 1000;
overflow: hidden;
margin-top: 5px;
}
.user-dropdown.show { display: block; }
.user-dropdown a {
display: block;
padding: 12px 20px;
color: white;
text-decoration: none;
transition: all 0.3s ease;
border-bottom: 1px solid rgba(255, 107, 53, 0.2);
}
.user-dropdown a:hover {
background: rgba(255, 107, 53, 0.2);
color: #ff6b35;
}
.user-dropdown a:last-child { border-bottom: none; }
.fade-in { animation: fadeIn 1s ease-in; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.modal-content {
background: var(--dark-color);
color: white;
border: 1px solid var(--primary-color);
border-radius: 15px;
}
.modal-header { border-bottom: 1px solid rgba(255, 107, 53, 0.3); }
.btn-close { filter: invert(1); }
.form-control {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
border-radius: 10px;
}
.form-control:focus {
background: rgba(255, 255, 255, 0.15);
border-color: var(--primary-color);
color: white;
box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25);
}
.form-control::placeholder { color: rgba(255, 255, 255, 0.6); }
.login-success {
background: rgba(46, 196, 182, 0.2) !important;
border: 1px solid #2ec4b6 !important;
color: white !important;
}
.project-table {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
overflow: hidden;
}
.project-table th {
background: rgba(255, 107, 53, 0.2);
color: var(--primary-color);
font-weight: 700;
padding: 15px;
border-bottom: 2px solid var(--primary-color);
}
.project-table td {
padding: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
vertical-align: top;
}
.project-table tr:hover { background: rgba(255, 107, 53, 0.05); }
.highlight-box {
background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(46, 196, 182, 0.1));
border-left: 4px solid var(--primary-color);
padding: 20px;
border-radius: 0 10px 10px 0;
margin: 20px 0;
}
.vision-icon {
font-size: 2.5rem;
color: var(--secondary-color);
margin-bottom: 15px;
}
.collaborate-card {
background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(46, 196, 182, 0.15));
border: 1px solid rgba(255, 107, 53, 0.3);
color: #f8f9fa;
}
#collaborate h3, #collaborate h4, #collaborate h5, #collaborate h6 {
color: var(--primary-color);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
#collaborate p, #collaborate li { color: #e0e0e0; }
#collaborate strong {
color: #ffffff;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.donation-option {
border: 2px solid transparent;
transition: all 0.3s ease;
background: rgba(0,0,0,0.2);
}
.donation-option:hover {
border-color: var(--primary-color);
transform: translateY(-5px);
background: rgba(255, 107, 53, 0.05);
}
.testimonial-card {
background: rgba(255, 255, 255, 0.05);
border-left: 3px solid var(--secondary-color);
}
.testimonial-card p { font-style: italic; color: #dcdcdc; }
.testimonial-card strong { color: var(--primary-color); }
#fsRegistroMaxiModal .modal-body, #commerceModal .modal-body { overflow: hidden !important; }
.bg-dark-custom { background-color: rgba(0, 0, 0, 0.3); }
.code-img {
min-height: 130px;
background: rgba(0, 0, 0, 0.3);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.carnet-card {
width: 300px;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
.text-white-50 { color: rgba(255, 255, 255, 0.7) !important; }
.border-secondary { border-color: rgba(255, 255, 255, 0.2) !important; }
#pardon_carnetTarget div, #pardon_carnetTarget img, #pardon_carnet_qr img { border-radius: 0 !important; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; }
#pardon_carnetTarget > div { border-radius: 8px !important; }
.carrusel-container {
width: 100%;
overflow: hidden;
position: relative;
padding: 15px 0;
}
.carrusel-track {
display: flex;
animation: scroll 40s linear infinite;
gap: 30px;
}
.carrusel-container:hover .carrusel-track { animation-play-state: paused; }
.carrusel-item {
flex: 0 0 auto;
width: 150px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.95);
border-radius: 10px;
padding: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transition: all 0.3s ease;
border: 1px solid rgba(255,107,53,0.2);
}
.carrusel-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
border-color: var(--primary-color);
background: white;
}
.carrusel-item img {
max-width: 100%;
max-height: 70px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(40%);
opacity: 0.9;
transition: all 0.3s ease;
}
.carrusel-item:hover img { filter: grayscale(0%); opacity: 1; }
.carrusel-item a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-180px * 8)); }
}
@media (max-width: 768px) {
/* Ajustes específicos para pantallas muy pequeñas si es necesario */
.carrusel-item {
width: 120px;
height: 80px;
padding: 8px;
}
.carrusel-item img { max-height: 55px; }
@keyframes scroll {
100% { transform: translateX(calc(-150px * 8)); }
}
}
/* =============================================
SECCIÓN CAPTADORES
============================================= */
.captadores-section {
padding: 5rem 0;
}
.captador-icon {
font-size: 3rem;
margin-bottom: 1rem;
color: var(--primary-color);
}
.captador-card {
background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(46, 196, 182, 0.15));
border: 1px solid rgba(255, 107, 53, 0.3);
color: #f8f9fa;
border-radius: 15px;
transition: all 0.3s ease;
height: 100%;
}
.captador-card:hover {
transform: translateY(-5px);
border-color: var(--primary-color);
box-shadow: 0 10px 25px rgba(255, 107, 53, 0.15);
}
.captador-card .card-body {
display: flex;
flex-direction: column;
}
.captador-card h4 {
color: var(--primary-color);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1rem;
}
.captador-card p,
.captador-card li {
color: #e0e0e0;
}
.captador-card strong {
color: #ffffff;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}