/* =========================================
   1. MODELICA
   ========================================= */
/* Modelica Regular */
@font-face {
    font-family: "bw_modelica_lgc_ss01_2regular";
    src:
        url("https://mkt.urbanitae.com/rs/178-PWS-136/images/bwmodelicalgcss01-regular-webfont.woff2") format("woff2"),
        url("https://mkt.urbanitae.com/rs/178-PWS-136/images/bwmodelicalgcss01-regular-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Modelica Bold */
@font-face {
    font-family: "bw_modelica_lgc_ss01_2bold";
    src:
        url("https://mkt.urbanitae.com/rs/178-PWS-136/images/bwmodelicalgcss01-bold-webfont.woff2") format("woff2"),
        url("https://mkt.urbanitae.com/rs/178-PWS-136/images/bwmodelicalgcss01-bold-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   2. VARIABLES GLOBALES (Urbanitae)
   ========================================= */
:root {
    /* Tipografías */
    --urb-font-primary: "Work Sans", sans-serif;
    --urb-font-secondary: "IBM Plex Serif", serif;
    --urb-font-corporate: "Bw Modelica LGC SS01", sans-serif;

    /* Sobreescritura de Bootstrap 5 para usar Work Sans por defecto */
    --bs-body-font-family: var(--urb-font-primary);

    /* --- Paleta Principal y Marca --- */
    --urb-color-primary: #30b767; /* Verde Urbanitae */
    --urb-color-accent: #5dfaae; /* Verde Acento */

    /* --- Paleta Secundaria (Design System) --- */
    --urb-color-dark-green: #1b4332; /* Verde Oscuro */
    --urb-color-blue: #002360; /* Azul */
    --urb-color-blue-secondary: #2196e0; /* Azul Secundario */
    --urb-color-yellow: #ffd580; /* Amarillo */

    /* --- Neutros y Fondos --- */
    --urb-bg-primary: #ffffff; /* Blanco puro */
    --urb-bg-secondary: #f8f8f8; /* Blanco roto */
    --urb-bg-tertiary: #eef1f6; /* Gris claro / Frío */
    --urb-bg-warm: #f6f4f1; /* Warm (Fondos cálidos) */
    --urb-bg-cold: #e7ebf1; /* Cold */
    --urb-bg-sand: #f3f1ef; /* Sand */
    --urb-bg-dark: #101010; /* Dark Mode / Fondos oscuros */

    /* --- Escala Verde Corporativo (Corporate Green) --- */
    --urb-green-100: #e6f7f0;
    --urb-green-200: #bcebdd;
    --urb-green-300: #7ed9b8;
    --urb-green-400: #30b767; /* Verde Urbanitae Base (*) */
    --urb-green-500: #279656;
    --urb-green-600: #1e7443;
    --urb-green-700: #155333;
    --urb-green-800: #0f3a26;
    --urb-green-900: #0a281a;
    --urb-green-1000: #05170f;

    /* --- Texto --- */
    --urb-text-main: #212121; /* Negro de lectura */
    --urb-text-muted: #666666; /* Texto secundario/deshabilitado */
    --urb-text-light: #ffffff; /* Texto sobre fondos oscuros */

    /* --- Sobreescritura de Bootstrap 5 --- */
    --bs-primary: var(--urb-color-primary);
    --bs-secondary: var(--urb-color-blue);
    --bs-body-font-family: var(--urb-font-primary);
    --bs-body-bg: var(--urb-bg-primary);
    --bs-body-color: var(--urb-text-main);
}

/* =========================================
   3. RESET BÁSICO Y ESTILOS BASE
   ========================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Navegación suave al hacer clic en botones con anclas tipo #registro */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--urb-font-primary);
    -webkit-font-smoothing: antialiased; /* Hace que las fuentes se vean más nítidas en Mac/iOS */
    -moz-osx-font-smoothing: grayscale;
}

/* Configuración base para encabezados */
h1,
h2,
h3,
h4,
h5,
h6 {
    /* Por defecto le pongo la principal, pero si queréis usar Modelica o IBM Plex para los títulos, 
       solo tienes que cambiar la variable aquí: */
    /* font-family: var(--urb-font-corporate); */
    font-family: var(--urb-font-primary);
    font-weight: 700;
}

section {
    padding: 5rem 0;
}

/* Evita que cualquier imagen se salga de su contenedor por error */
img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--urb-color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Clases de utilidad tipográfica (opcional, pero muy útil) */
.font-primary {
    font-family: var(--urb-font-primary) !important;
}
.font-secondary {
    font-family: var(--urb-font-secondary) !important;
}
.font-corporate {
    font-family: var(--urb-font-corporate) !important;
}

/* =========================================
4. CLASES DE UTILIDAD (Colores y Fondos)
========================================= */

/* --- Colores de Texto --- */
.text-urb-primary {
    color: var(--urb-color-primary) !important;
}
.text-urb-accent {
    color: var(--urb-color-accent) !important;
}
.text-urb-dark-green {
    color: var(--urb-color-dark-green) !important;
}
.text-urb-blue {
    color: var(--urb-color-blue) !important;
}
.text-urb-blue-secondary {
    color: var(--urb-color-blue-secondary) !important;
}
.text-urb-yellow {
    color: var(--urb-color-yellow) !important;
}
.text-urb-main {
    color: var(--urb-text-main) !important;
}
.text-urb-muted {
    color: var(--urb-text-muted) !important;
}
.text-urb-light {
    color: var(--urb-text-light) !important;
}

/* --- Colores de Fondo --- */
.bg-urb-primary {
    background-color: var(--urb-color-primary) !important;
}
.bg-urb-accent {
    background-color: var(--urb-color-accent) !important;
}
.bg-urb-dark-green {
    background-color: var(--urb-color-dark-green) !important;
}
.bg-urb-blue {
    background-color: var(--urb-color-blue) !important;
}
.bg-urb-blue-secondary {
    background-color: var(--urb-color-blue-secondary) !important;
}
.bg-urb-yellow {
    background-color: var(--urb-color-yellow) !important;
}

/* --- Utilidades Escala Verde Corporativo --- */
.bg-urb-green-100 {
    background-color: var(--urb-green-100) !important;
}
.bg-urb-green-200 {
    background-color: var(--urb-green-200) !important;
}
.bg-urb-green-300 {
    background-color: var(--urb-green-300) !important;
}
.bg-urb-green-400 {
    background-color: var(--urb-green-400) !important;
}
.bg-urb-green-500 {
    background-color: var(--urb-green-500) !important;
}
.bg-urb-green-600 {
    background-color: var(--urb-green-600) !important;
}
.bg-urb-green-700 {
    background-color: var(--urb-green-700) !important;
}
.bg-urb-green-800 {
    background-color: var(--urb-green-800) !important;
}
.bg-urb-green-900 {
    background-color: var(--urb-green-900) !important;
}
.bg-urb-green-1000 {
    background-color: var(--urb-green-1000) !important;
}

.text-urb-green-400 {
    color: var(--urb-green-400) !important;
}
.text-urb-green-600 {
    color: var(--urb-green-600) !important;
}
.text-urb-green-800 {
    color: var(--urb-green-800) !important;
}

/* Fondos Neutros (Design System) */
.bg-urb-secondary {
    background-color: var(--urb-bg-secondary) !important;
}
.bg-urb-tertiary {
    background-color: var(--urb-bg-tertiary) !important;
}
.bg-urb-warm {
    background-color: var(--urb-bg-warm) !important;
}
.bg-urb-cold {
    background-color: var(--urb-bg-cold) !important;
}
.bg-urb-sand {
    background-color: var(--urb-bg-sand) !important;
}
.bg-urb-dark {
    background-color: var(--urb-bg-dark) !important;
}

/* --- Bordes de Utilidad --- */
.border-urb-primary {
    border-color: var(--urb-color-primary) !important;
}
.border-urb-accent {
    border-color: var(--urb-color-accent) !important;
}
.border-urb-sand {
    border-color: var(--urb-bg-sand) !important;
}
.border-urb-tertiary {
    border-color: var(--urb-bg-tertiary) !important;
}

/* =========================================
   5. COMPONENTES: BOTONES
   ========================================= */

/* Estilos base comunes */
.btn-urb {
    font-family: var(--urb-font-primary);
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 50px;
    padding: 12px 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}

.btn-urb:focus-visible {
    outline: 2px solid var(--urb-color-primary);
    outline-offset: 3px;
}

/* --- Botón Primario --- */
.btn-urb-primary {
    background-color: var(--urb-color-primary);
    color: var(--urb-text-main);
    border: 2px solid var(--urb-color-primary);
}

.btn-urb-primary:hover {
    background-color: var(--urb-color-accent);
    border-color: var(--urb-color-accent);
    color: var(--urb-text-main);
    box-shadow: 0 4px 12px rgba(48, 183, 103, 0.25);
    transform: translateY(-1px);
}

/* --- Botón Secundario --- */
.btn-urb-secondary {
    background-color: transparent;
    color: var(--urb-text-main);
    border: 1.5px solid var(--urb-text-main);
}

.btn-urb-secondary:hover {
    background-color: var(--urb-text-main);
    color: var(--urb-text-light);
    border-color: var(--urb-text-main);
    transform: translateY(-1px);
}

/* --- Botón Terciario (Enlace) --- */
.btn-urb-tertiary {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--urb-text-main);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}

.btn-urb-tertiary:hover {
    color: var(--urb-color-primary);
    text-decoration: underline;
}

/* Animación sutil de desplazamiento en la flecha del botón terciario */
.btn-urb-tertiary i,
.btn-urb-tertiary svg {
    transition: transform 0.2s ease;
}

.btn-urb-tertiary:hover i,
.btn-urb-tertiary:hover svg {
    transform: translateX(4px);
}

/* =========================================
   MEDIA QUERYS
   ========================================= */
@media (max-width: 576px) {
    section {
        padding: 3rem 0rem;
    }
}

/* =========================================
   FOOTER DARK
   ========================================= */
.urb-footer-dark {
    background-color: var(--urb-bg-dark);
    color: var(--urb-text-light);
    padding-top: 4rem;
    padding-bottom: 3.5rem;
}

/* Titulares de columna */
.urb-footer-dark .urb-footer-title {
    color: var(--urb-text-light);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

/* Iconos de Redes Sociales */
.urb-footer-socials {
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

.urb-footer-socials a {
    color: var(--urb-text-light);
    font-size: 1.25rem;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
    text-decoration: none;
}

.urb-footer-socials a:hover {
    color: var(--urb-color-primary);
    transform: translateY(-2px);
}

/* Listas de enlaces (Ayuda y Legal) */
.urb-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.urb-footer-list li {
    margin-bottom: 0.65rem;
}

.urb-footer-list a {
    color: #cccccc;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.urb-footer-list a:hover {
    color: var(--urb-color-primary);
}

/* Marca / Logo Gigante */
.urb-footer-giant-logo {
    width: 100%;
    height: auto;
    display: block;
}

/* Texto legal al pie */
.urb-footer-disclaimer {
    color: #777777;
    font-size: 0.725rem;
    line-height: 1.6;
    margin: 0;
}

/* Ajustes Responsive (Mobile) */
@media (max-width: 767.98px) {
    .urb-footer-dark {
        padding-top: 2.5rem;
        padding-bottom: 2rem;
    }

    .urb-footer-dark .urb-footer-title {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .urb-footer-socials a {
        font-size: 1.1rem;
    }
}