/* ========================================
   CD-BASE MODULE CSS
   Estilos base del sistema CD-System
   ======================================== */

/* ==========================================
   TIPOGRAFÍA BASE - Manual de Marca MTN
   ========================================== */

/* HEADINGS - Dynamic Font System */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.section-heading,
.hero-title,
.card-title,
.btn,
.navbar-brand,
.page-header h1 {
	font-family: var(--font-family-primary) !important;
	font-weight: 600; /* Medium-Bold según manual */
}

/* BODY TEXT - Dynamic Font System */
body,
p, .p,
.card-text,
.lead,
.contact-form label,
.contact-form input,
.contact-form textarea,
.form-control,
.breadcrumb,
.navbar-nav .nav-link {
	font-family: var(--font-family-tertiary) !important;
	font-weight: 400; /* Variable según manual */
}

/* SLOGAN MTN - Dynamic Font System */
.slogan-mtn,
.hero-subtitle,
.tagline {
	font-family: var(--font-family-secondary) !important;
	font-weight: 300; /* Light según manual */
	font-style: italic; /* Como en el manual */
}

/* ==========================================
   COMPONENTES BASE DEL SISTEMA
   ========================================== */

/* Botón WhatsApp Flotante */
.float-wsp{
	position:fixed;
	width:60px;
	height:60px;
	bottom:30px;
	right:30px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: var(--shadow-modern);
  z-index:9999;
  transition: var(--transition-default);
}

.float-wsp:hover {
	transform: scale(1.1);
	box-shadow: var(--shadow-modern-hover);
	color: #FFF;
	text-decoration: none;
}

.my-float-wsp{
	margin-top:16px;
}

/* ==========================================
   NAVEGACIÓN Y HEADER
   ========================================== */

/* Modificando el color del texto en hover en el menú de navegación */
#header .header-nav-main nav > ul > li.open > a,
#header .header-nav-main nav > ul > li.accessibility-open > a,
#header .header-nav-main nav > ul > li:hover > a {
    color: var(--secondary) !important; /* Cambiando el color del texto a secondary */
}

/* Estilos específicos para header transparente */
.header-transparent .header-nav-main nav > ul > li > a {
    color: #fff !important;
}

.header-transparent .header-nav-main nav > ul > li > a:hover,
.header-transparent .header-nav-main nav > ul > li.open > a,
.header-transparent .header-nav-main nav > ul > li.active > a {
    color: var(--primary) !important;
}

.header-transparent .header-nav-top .nav > li > a {
    color: #fff !important;
}

.header-transparent .header-nav-top .nav > li > a:hover {
    color: var(--primary) !important;
}

.header-transparent .header-social-icons .social-icons a {
    color: #fff !important;
}

.header-transparent .header-social-icons .social-icons a:hover {
    color: var(--primary) !important;
}

/* Asegurar que el logo sea visible en header transparente */
.header-transparent .header-logo img {
    filter: brightness(0) invert(1);
}

/* Cuando el header se vuelve sticky, restaurar colores normales */
html.sticky-header-active .header-transparent .header-nav-main nav > ul > li > a {
    color: inherit !important;
}

html.sticky-header-active .header-transparent .header-nav-top .nav > li > a {
    color: inherit !important;
}

html.sticky-header-active .header-transparent .header-social-icons .social-icons a {
    color: inherit !important;
}

html.sticky-header-active .header-transparent .header-logo img {
    filter: none;
}

/* ==========================================
   BOTONES MODERNOS - SISTEMA BASE
   ========================================== */

/* Botón Ver Propiedades en Header */
.btn-modern.btn-primary.btn-outline {
    font-family: var(--font-family-primary) !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 2px solid var(--mtn-primary);
    color: var(--mtn-primary);
    background: transparent;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius2x);
    transition: var(--transition-default);
    box-shadow: var(--shadow-modern);
}

.btn-modern.btn-primary.btn-outline:hover {
    background: var(--mtn-primary);
    color: white;
    border-color: var(--mtn-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-modern-hover);
}

.btn-arrow-effect-1 i {
    transition: transform 0.3s ease;
}

.btn-arrow-effect-1:hover i {
    transform: translateX(3px);
}

/* Animación específica para el botón */
.anim-hover-translate-right-5px {
    transition: transform 0.2s ease;
}

.anim-hover-translate-right-5px:hover {
    transform: translateX(5px);
}

.transition-2ms {
    transition-duration: 200ms;
}

/* ==========================================
   FORMULARIOS BASE
   ========================================== */

/* Form Controls Modern */
.form-control-modern {
    border-radius: var(--border-radius2x);
    border: 2px solid var(--light-200);
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-control-modern:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem var(--primary-rgba-20);
    background-color: var(--quaternary);
}

/* ==========================================
   UTILIDADES BASE
   ========================================== */

/* Font Loading Optimization */
.font-loading body {
    visibility: hidden;
}

.font-loaded body {
    visibility: visible;
}

/* Manual de Marca - Dynamic Font System */
.satoshi-light { font-family: var(--font-family-primary) !important; font-weight: 300; }
.satoshi-regular { font-family: var(--font-family-primary) !important; font-weight: 400; }
.satoshi-medium { font-family: var(--font-family-primary) !important; font-weight: 500; }
.satoshi-bold { font-family: var(--font-family-primary) !important; font-weight: 700; }
.satoshi-black { font-family: var(--font-family-primary) !important; font-weight: 900; }

.myriad-light { font-family: var(--font-family-tertiary) !important; font-weight: 300; }

/* Override para clases específicas encontradas en vistas */
.dm-sans-font {
    font-family: var(--font-family-primary) !important;
}

.word-rotator {
    font-family: var(--font-family-primary) !important;
}

/* ==========================================
   RESPONSIVE BASE
   ========================================== */

/* Responsive para el botón */
@media (max-width: 767px) {
    .btn-modern.btn-primary.btn-outline {
        width: 100%;
        margin-top: 1rem;
        text-align: center;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .btn-modern.btn-primary.btn-outline {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
}

/* Asegurar que el botón no se corte en pantallas medianas */
@media (min-width: 992px) and (max-width: 1199px) {
    .header-nav .btn-modern {
        margin-left: 1rem;
        margin-right: 0.5rem;
    }
}

/* Font Display Optimization */
@media (max-width: 480px) {
    * {
        font-size: 14px;
    }

    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.3rem; }
    h4 { font-size: 1.1rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.9rem; }

    /* Asegurar que el texto destacado en el hero mantenga el tamaño correcto */
    .hero-section h1 .text-primary {
        font-size: inherit !important;
    }
}

/* ==========================================
   RECAPTCHA - OCULTAR BADGE
   ========================================== */

/* Ocultar el badge de reCAPTCHA que aparece en la esquina inferior derecha */
.grecaptcha-badge {
    visibility: hidden !important;
    display: none !important;
}

/* Alternativa más específica para diferentes versiones de reCAPTCHA */
iframe[src*="recaptcha"] {
    display: none !important;
}

/* Para reCAPTCHA v3 */
.grecaptcha-badge {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Asegurarse de que no interfiera con el layout */
body {
    overflow-x: hidden;
}

/* ==========================================
   SHADOWS Y EFECTOS BASE
   ========================================== */

/* Shadows consistentes */
.shadow-modern {
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08) !important;
}

.shadow-modern:hover {
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.12) !important;
}

/* Efecto de scroll suave */
html {
    scroll-behavior: smooth;
}

/* ==========================================
   OVERRIDES FINALES PARA ASEGURAR APLICACIÓN COMPLETA
   ========================================== */

body, html {
    font-family: var(--font-family-tertiary) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-primary) !important;
}

/* Asegurar que los títulos de mayor jerarquía usen Primary */
.text-8, .text-7, .text-6 {
    font-family: var(--font-family-primary) !important;
}

/* Badge y Tags base */
.badge {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.text-color-default {
    color: var(--default) !important;
}