/**
 * ============================================================
 * 1) Variables globales
 * ============================================================
 */
:root {
    --site-font-sans: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --color-dark: #003049;
    --color-dark-2: #00263a;
    --color-soft: #fff8e8;
    --color-white: #ffffff;
    --color-black: #111111;

    --color-accent: #D62828;
    --color-accent-2: #F77F00;
    --color-accent-3: #FCBF49;

    --color-text: #003049;
    --color-text-soft: rgba(0, 48, 73, 0.76);
    --color-text-muted: rgba(0, 48, 73, 0.62);
    --color-text-faint: rgba(0, 48, 73, 0.52);

    --color-line: rgba(0, 48, 73, 0.14);
    --color-line-strong: rgba(0, 48, 73, 0.20);
    --color-line-gold: rgba(252, 191, 73, 0.28);

    --color-surface: #ffffff;
    --color-surface-soft: rgba(255, 248, 232, 0.72);
    --color-surface-accent: rgba(252, 191, 73, 0.12);
    --color-surface-accent-strong: rgba(252, 191, 73, 0.18);
    --color-surface-danger: rgba(214, 40, 40, 0.08);

    --header-bg: #003049;
    --header-link: #FCBF49;
    --header-link-hover: #fff8e8;
    --header-border: rgba(252, 191, 73, 0.22);

    --footer-bg: #003049;
    --footer-text: rgba(252, 191, 73, 0.86);
    --footer-text-soft: rgba(252, 191, 73, 0.74);
    --footer-link: rgba(252, 191, 73, 0.82);
    --footer-border: rgba(252, 191, 73, 0.18);

    --btn-primary-bg: #D62828;
    --btn-primary-border: #D62828;
    --btn-primary-text: #FCBF49;
    --btn-primary-bg-hover: #b81f1f;
    --btn-primary-border-hover: #b81f1f;
    --btn-primary-text-hover: #fff2cf;

    --btn-outline-bg: var(--color-dark-2);
    --btn-outline-border: rgba(0, 48, 73, 0.22);
    --btn-outline-text: #003049;
    --btn-outline-bg-hover: #003049;
    --btn-outline-border-hover: #003049;
    --btn-outline-text-hover: #ffffff;

    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.5rem;
    --space-10: 3rem;
    --space-11: 4rem;
    --space-12: 5rem;

    --section-y: 4rem;
    --container-max: 1320px;

    --shadow-none: none;
}

/**
 * ============================================================
 * 2) Reset y base global
 * ============================================================
 */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--site-font-sans);
    color: var(--color-text);
    background-color: var(--color-white);
    text-rendering: optimizeLegibility;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

textarea {
    resize: vertical;
}

::selection {
    background-color: rgba(252, 191, 73, 0.28);
    color: var(--color-dark);
}

/**
 * ============================================================
 * 3) Tipografía global
 * ============================================================
 */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-dark);
    letter-spacing: -0.03em;
}

p {
    color: var(--color-text-soft);
}

.lead,
.hero-lead,
.region-copy,
.muted-copy {
    color: var(--color-text-soft);
}

.small,
.small p {
    color: inherit;
}

.section-title {
    font-size: clamp(1.85rem, 3vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.hero-title {
    font-size: clamp(2.2rem, 4vw, 4.6rem);
    line-height: 1.03;
    letter-spacing: -0.045em;
}

.metric-value {
    font-size: clamp(1.5rem, 3vw, 1.85rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

/**
 * ============================================================
 * 4) Helpers y layout base
 * ============================================================
 */
.section-padding {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
}

.bg-soft {
    background-color: var(--color-soft);
}

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

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

.border-soft {
    border-color: var(--color-line) !important;
}

.rounded-soft {
    border-radius: var(--radius-lg);
}

.container-fluid,
.container {
    position: relative;
}

@media (min-width: 768px) {
    .section-padding {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

/**
 * ============================================================
 * 5) Superficies, cards y bloques
 * ============================================================
 */
.surface-card,
.card-elevated,
.stat-card,
.service-card,
.industry-card,
.process-card,
.contact-card,
.faq-card,
.region-card,
.region-option,
.form-panel,
.info-panel {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-none);
}

.region-card {
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.region-option.active-region {
    border-color: rgba(214, 40, 40, 0.34);
}

.surface-accent,
.region-suggestion,
.notice-panel {
    border: 1px solid rgba(252, 191, 73, 0.35);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-accent);
}

.surface-danger {
    border: 1px solid rgba(214, 40, 40, 0.20);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-danger);
}

/**
 * ============================================================
 * 6) Badges, icons y elementos pequeños
 * ============================================================
 */
.eyebrow,
.region-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(214, 40, 40, 0.18);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-accent-strong);
    color: var(--color-accent);
    font-size: 0.9rem;
    font-weight: 600;
}

.service-icon,
.process-icon,
.industry-icon,
.contact-icon,
.region-flag,
.icon-chip {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: rgba(252, 191, 73, 0.22);
    color: var(--color-accent);
    font-size: 1.2rem;
}

.region-flag {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.35rem;
}

.region-kicker {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-faint);
}

.region-text {
    color: var(--color-text-soft);
}

/**
 * ============================================================
 * 7) Listas, checks y accordions
 * ============================================================
 */
.check-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    color: rgba(0, 48, 73, 0.88);
}

.check-list li:last-child {
    margin-bottom: 0;
}

.check-list i {
    color: var(--color-accent-2);
    margin-top: 0.15rem;
}

.accordion-item {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg) !important;
    background-color: var(--color-surface);
    overflow: hidden;
}

.accordion-button {
    color: var(--color-dark);
    background-color: var(--color-surface);
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    color: var(--color-dark);
    background-color: var(--color-surface-accent);
}

.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.accordion-body {
    color: var(--color-text-soft);
}

/**
 * ============================================================
 * 8) Formularios
 * ============================================================
 */
.form-label {
    color: var(--color-white);
    font-weight: 600;
    margin-bottom: 0.45rem;
}

.form-control,
.form-select {
    min-height: 3rem;
    border-color: var(--color-line-strong);
    border-radius: var(--radius-sm);
    color: var(--color-dark);
    background-color: var(--color-white);
    box-shadow: none;
}

.form-control::placeholder,
.form-select::placeholder,
textarea.form-control::placeholder {
    color: rgba(0, 48, 73, 0.42);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(214, 40, 40, 0.45);
    box-shadow: none;
}

.form-check-input {
    border-color: var(--color-line-strong);
    box-shadow: none !important;
}

.form-check-input:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.form-check-input:focus {
    box-shadow: none;
    border-color: var(--color-accent);
}

.form-check-label {
    color: var(--color-text-soft);
}

.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .form-select:invalid,
.form-select.is-invalid {
    box-shadow: none;
}

/**
 * ============================================================
 * 9) Botones globales
 * ============================================================
 */
.btn-brand-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
    color: var(--btn-primary-text);
    font-weight: 600;
    box-shadow: none;
}

.btn-brand-primary:hover,
.btn-brand-primary:focus,
.btn-brand-primary:active,
.btn-brand-primary.active,
.btn-brand-primary.show {
    background-color: var(--btn-primary-bg-hover) !important;
    border-color: var(--btn-primary-border-hover) !important;
    color: var(--btn-primary-text-hover) !important;
    box-shadow: none !important;
}

.btn-brand-outline {
    background-color: var(--btn-outline-bg);
    border-color: var(--color-white);
    color: var(--color-white);
    font-weight: 600;
    box-shadow: none;
}

.btn-brand-outline:hover,
.btn-brand-outline:focus,
.btn-brand-outline:active,
.btn-brand-outline.active,
.btn-brand-outline.show {
    background-color: var(--btn-outline-bg-hover) !important;
    border-color: var(--btn-outline-border-hover) !important;
    color: var(--btn-outline-text-hover) !important;
    box-shadow: none !important;
}

.btn:focus,
.btn:active,
.btn-close:focus {
    box-shadow: none !important;
}

/**
 * ============================================================
 * 10) Header global reutilizable
 * ============================================================
 */
.site-header {
    background-color: var(--header-bg);
    border-color: var(--header-border) !important;
}

.site-brand {
    color: var(--header-link);
}

.site-brand:hover,
.site-brand:focus {
    color: var(--header-link);
}

.site-brand-separator {
    color: var(--color-accent);
}

.site-nav-link {
    color: var(--header-link);
}

.site-nav-link:hover,
.site-nav-link:focus,
.site-nav-link.active {
    color: var(--header-link-hover);
}

.site-lang-select {
    min-width: 78px;
    background-color: var(--header-bg);
    color: var(--header-link);
    border-color: rgba(252, 191, 73, 0.45);
}

.site-lang-select:focus {
    color: var(--header-link);
    background-color: var(--header-bg);
    border-color: var(--header-link);
    box-shadow: none;
}

.site-lang-select option {
    color: var(--color-dark);
    background-color: var(--color-white);
}

.navbar-toggler {
    box-shadow: none !important;
}

.navbar-toggler:focus {
    box-shadow: none !important;
}

/**
 * ============================================================
 * 11) Footer global reutilizable
 * ============================================================
 */
.site-footer {
    background-color: var(--footer-bg);
    border-color: var(--header-border) !important;
}

.site-footer-row-divider {
    border-color: var(--footer-border) !important;
}

.site-footer-brand {
    color: var(--color-accent-3);
}

.site-footer-brand-separator {
    color: var(--color-accent);
}

.site-footer-copy {
    color: var(--footer-text);
}

.site-footer-copy-small,
.site-footer-bottom,
.site-footer-credits {
    color: var(--footer-text-soft);
}

.site-footer-heading {
    color: var(--color-accent-3);
}

.site-footer-item {
    color: var(--footer-text);
}

.site-footer-link,
.site-footer-bottom-link,
.site-footer-credit-link {
    color: var(--footer-link);
    text-decoration: none;
}

.site-footer-link:hover,
.site-footer-link:focus,
.site-footer-bottom-link:hover,
.site-footer-bottom-link:focus,
.site-footer-credit-link:hover,
.site-footer-credit-link:focus {
    color: var(--color-white);
}

/**
 * ============================================================
 * 12) Gateway raíz
 * ============================================================
 */
.region-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    background:
        radial-gradient(circle at top left, rgba(214, 40, 40, 0.10), transparent 32%),
        radial-gradient(circle at bottom right, rgba(247, 127, 0, 0.12), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fff8e8 100%);
}

.region-card-head {
    background-color: var(--header-bg);
    color: var(--color-white);
}

.region-brand {
    color: var(--color-accent-3);
    letter-spacing: -0.03em;
}

.region-brand-accent {
    color: var(--color-accent);
}

.region-meta {
    color: rgba(255, 255, 255, 0.82);
}

.region-title {
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.region-footer-note {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.region-inline-link {
    color: var(--color-accent);
    text-decoration: none;
}

.region-inline-link:hover,
.region-inline-link:focus {
    color: var(--color-accent);
}

/**
 * ============================================================
 * 13) Landings US y MX
 * ============================================================
 */
.hero-gradient {
    background:
        radial-gradient(circle at top left, rgba(214, 40, 40, 0.10), transparent 35%),
        radial-gradient(circle at bottom right, rgba(247, 127, 0, 0.10), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fff8e8 100%);
}

.form-panel {
    position: relative;
    overflow: hidden;
}

.form-panel::after {
    content: "";
    position: absolute;
    inset: auto -3rem -3rem auto;
    width: 10rem;
    height: 10rem;
    background: radial-gradient(circle, rgba(214, 40, 40, 0.12), transparent 70%);
    pointer-events: none;
}

.sticky-summary {
    top: 6rem;
}

.hero-stat-label,
.meta-label {
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
}

/**
 * ============================================================
 * 14) Estados sin efectos extraños
 * ============================================================
 */
.card-elevated:hover,
.stat-card:hover,
.service-card:hover,
.industry-card:hover,
.process-card:hover,
.contact-card:hover,
.faq-card:hover,
.region-card:hover,
.region-option:hover {
    box-shadow: none;
}

a,
button,
.btn,
.form-control,
.form-select,
.accordion-button,
.nav-link,
.navbar-brand,
.site-footer-link,
.site-footer-bottom-link,
.site-footer-credit-link {
    transition: none !important;
}

.region-option:hover,
.region-option:focus-within {
    transform: none;
}

/**
 * ============================================================
 * 15) Utilidades responsive finales
 * ============================================================
 */
@media (max-width: 991.98px) {
    .sticky-summary {
        position: static !important;
        top: auto;
    }

    .site-lang-select {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .region-shell {
        align-items: flex-start;
    }

    .hero-title,
    .section-title,
    .region-title {
        text-wrap: balance;
    }
}























/* ============================================================
   Hero con video de fondo
   ============================================================ */
.hero-video-section {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.hero-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(25, 25, 25, 0.22);
    z-index: 2;
}

.hero-video-content {
    position: relative;
    z-index: 3;
}

.hero-video-section .hero-title,
.hero-video-section .hero-lead,
.hero-video-section .eyebrow,
.hero-video-section .small,
.hero-video-section .fw-semibold,
.hero-video-section h1,
.hero-video-section h2,
.hero-video-section p,
.hero-video-section span,
.hero-video-section div {
    color: #ffffff;
}

.hero-video-section .text-muted {
    color: rgba(255, 255, 255, 0.78) !important;
}

.hero-video-section .stat-card,
.hero-video-section .form-panel {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 991.98px) {
    .hero-video-section {
        min-height: auto;
    }
}