/* =========================================================
   ABC Software — main.css
   Tokens del sistema de diseño (Figma):
   Primario #03157B · Accent #155DFC · Texto #000 · Fondo #F2F7FE · Poppins
   ========================================================= */

:root {
    --color-primary: #03157B;
    --color-primary-dark: #020e52;
    --color-accent: #155DFC;
    --color-text: #000000;
    --color-text-soft: #4a4f5c;
    --color-muted: #8F99A3;
    --color-bg: #FFFFFF;
    --color-bg-light: #F2F7FE;
    --color-border: #e2e8f5;

    --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    --sidebar-w: 269px;
    --container: 1160px;

    --space-xs: .5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;

    --radius: 14px;
    --radius-pill: 999px;
    --shadow: 0 12px 40px rgba(3, 21, 123, .10);
    --shadow-sm: 0 6px 20px rgba(3, 21, 123, .08);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    font-weight: 300; /* Poppins Light — el sistema de diseño usa Medium + Light */
    font-size: 16px;  /* Cuerpo a 16px (fiel al Figma) */
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.2; margin: 0 0 .6em; color: var(--color-primary); }
p { margin: 0 0 1em; line-height: 1.875; } /* 30px sobre 16px — fiel al Figma */
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- A11y ---------- */
.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0; overflow: hidden;
    word-wrap: normal !important;
}
.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 1000;
    background: var(--color-primary); color: #fff; padding: .75rem 1.25rem;
    border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* ---------- Layout shell ----------
   El menú es una columna blanca de altura completa (en el flujo) que baja hasta
   el footer. El contenido queda a su derecha. El footer va a todo el ancho por
   debajo de la columna. */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-md); }

.site-shell { display: flex; align-items: stretch; }

.site-sidebar {
    flex: 0 0 var(--sidebar-w); width: var(--sidebar-w);
    /* Columna fija: se mantiene visible al hacer scroll y se detiene en el footer */
    position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
    background: var(--color-bg); border-right: 1px solid var(--color-border);
    display: flex; flex-direction: column; align-items: flex-start;
    /* Columna 269px con el contenido centrado en 116px (padding = (269-116)/2) */
    padding: 1.75rem 76.5px; z-index: 100;
}
.site-sidebar__brand { margin-bottom: 2.25rem; }
.site-sidebar__logo { display: block; }
.site-sidebar__brand img,
.custom-logo { display: block; width: 116px; max-width: 100%; height: auto; max-height: none; }
.site-sidebar__logo-text { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
.site-sidebar__logo-abc { font-size: 1.9rem; font-weight: 700; color: var(--color-primary); letter-spacing: .5px; }
.site-sidebar__logo-sw { font-size: 1rem; font-weight: 600; color: var(--color-primary); }

.site-nav__menu { display: flex; flex-direction: column; gap: 2.7rem; }
.site-nav__menu a {
    color: var(--color-primary); font-size: 1rem; font-weight: 500;
    letter-spacing: normal; text-transform: uppercase; text-decoration: none; line-height: 1.2;
}
.site-nav__menu a:hover { color: var(--color-accent); }
/* Ítem activo: Bold + Accent (fiel al Figma) */
.site-nav__menu .current-menu-item > a,
.site-nav__menu .current-menu-item > a:hover { color: var(--color-accent); font-weight: 700; }

.site-sidebar__social { display: flex; gap: .5rem; margin-top: 2.75rem; }
.abc-social__link {
    width: 30px; height: 30px; border-radius: 7px; background: var(--color-primary);
    display: inline-flex; align-items: center; justify-content: center;
}
.abc-social__link:hover { background: var(--color-accent); }
.abc-social__icon { width: 15px; height: 15px; background: #fff;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain; }
.abc-social__link--facebook .abc-social__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 22v-8h3l1-4h-4V7c0-1 .3-2 2-2h2V1.5C18.7 1.4 17.4 1 15.9 1 12.8 1 11 2.9 11 6v4H7v4h4v8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 22v-8h3l1-4h-4V7c0-1 .3-2 2-2h2V1.5C18.7 1.4 17.4 1 15.9 1 12.8 1 11 2.9 11 6v4H7v4h4v8z'/%3E%3C/svg%3E"); }
.abc-social__link--linkedin .abc-social__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5A2.5 2.5 0 1 0 5 8.5a2.5 2.5 0 0 0 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-1 1.8-2.05 3.7-2.05 4 0 4.7 2.6 4.7 6V21h-4v-5.3c0-1.3 0-3-1.8-3s-2.1 1.4-2.1 2.9V21H9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5A2.5 2.5 0 1 0 5 8.5a2.5 2.5 0 0 0 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-1 1.8-2.05 3.7-2.05 4 0 4.7 2.6 4.7 6V21h-4v-5.3c0-1.3 0-3-1.8-3s-2.1 1.4-2.1 2.9V21H9z'/%3E%3C/svg%3E"); }
.abc-social__link--instagram .abc-social__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c2.7 0 3 0 4.1.1 1 0 1.7.2 2.3.5.6.2 1.1.5 1.6 1s.8 1 1 1.6c.3.6.4 1.3.5 2.3C21.5 8.7 21.5 9 21.5 12s0 3.3-.1 4.4c0 1-.2 1.7-.5 2.3-.2.6-.5 1.1-1 1.6s-1 .8-1.6 1c-.6.3-1.3.4-2.3.5-1.1.1-1.4.1-4.1.1s-3 0-4.1-.1c-1 0-1.7-.2-2.3-.5-.6-.2-1.1-.5-1.6-1s-.8-1-1-1.6c-.3-.6-.4-1.3-.5-2.3C2.5 15.3 2.5 15 2.5 12s0-3.3.1-4.4c0-1 .2-1.7.5-2.3.2-.6.5-1.1 1-1.6s1-.8 1.6-1c.6-.3 1.3-.4 2.3-.5C9 2 9.3 2 12 2zm0 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 8.2A3.2 3.2 0 1 1 12 8.8a3.2 3.2 0 0 1 0 6.4zM17.8 7a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c2.7 0 3 0 4.1.1 1 0 1.7.2 2.3.5.6.2 1.1.5 1.6 1s.8 1 1 1.6c.3.6.4 1.3.5 2.3C21.5 8.7 21.5 9 21.5 12s0 3.3-.1 4.4c0 1-.2 1.7-.5 2.3-.2.6-.5 1.1-1 1.6s-1 .8-1.6 1c-.6.3-1.3.4-2.3.5-1.1.1-1.4.1-4.1.1s-3 0-4.1-.1c-1 0-1.7-.2-2.3-.5-.6-.2-1.1-.5-1.6-1s-.8-1-1-1.6c-.3-.6-.4-1.3-.5-2.3C2.5 15.3 2.5 15 2.5 12s0-3.3.1-4.4c0-1 .2-1.7.5-2.3.2-.6.5-1.1 1-1.6s1-.8 1.6-1c.6-.3 1.3-.4 2.3-.5C9 2 9.3 2 12 2zm0 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 8.2A3.2 3.2 0 1 1 12 8.8a3.2 3.2 0 0 1 0 6.4zM17.8 7a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4z'/%3E%3C/svg%3E"); }

.site-content { flex: 1; min-width: 0; }

/* ---------- Topbar ---------- */
.site-topbar {
    position: absolute; top: 0; right: 0; z-index: 90;
    display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.75rem;
}
.lang-switcher__toggle {
    display: inline-flex; align-items: center; gap: .35rem;
    background: none; border: 0; cursor: pointer; color: #fff;
    font-family: var(--font); font-size: .85rem; font-weight: 500;
}
.lang-switcher__caret { font-size: .7rem; }
body:not(.abc-dark-topbar) .lang-switcher__toggle { color: #fff; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font); font-weight: 500; font-size: 20px;
    padding: 18px 40px; border-radius: var(--radius-pill);
    border: 2px solid transparent; cursor: pointer; text-decoration: none;
    transition: transform .15s ease, background .2s ease, color .2s ease;
    line-height: 1.2;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn__icon { font-size: 1.05em; }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); color: #fff; }
.btn--accent { background: var(--color-accent); color: #fff; }
.btn--white { background: #fff; color: var(--color-primary); }
.btn--white:hover { color: var(--color-primary); }
.btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--outline-white:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn--login { background: var(--color-accent); color: #fff; padding: .55rem 1.15rem; font-size: .85rem; }
.btn--login:hover { color: #fff; }

/* ---------- Sections ---------- */
.section { padding: var(--space-2xl) 0; }
.section--alt { background: var(--color-bg-light); }
.section--dark { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 130%); color: #fff; }
.section__title { font-size: 3rem; line-height: 1.29; margin-bottom: 1rem; }
.section__title--accent { color: var(--color-accent); }
.section__title--light { color: #fff; }
.section__title--center { text-align: center; }
.section__lead { color: var(--color-text-soft); max-width: 60ch; margin-bottom: 2.5rem; }
.section--dark .section__lead { color: rgba(255,255,255,.85); }
.section--watermark { position: relative; overflow: hidden; }
.section--watermark::after {
    content: ""; position: absolute; right: -80px; top: 50%; transform: translateY(-50%);
    width: 380px; height: 380px; opacity: .05;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2303157B'%3E%3Cpath d='M12 1a11 11 0 0 0-11 11 1 1 0 0 0 2 0 9 9 0 0 1 18 0 1 1 0 0 0 2 0A11 11 0 0 0 12 1zm0 4a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0v4a1 1 0 0 0 2 0v-4a7 7 0 0 0-7-7z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Hero (Portada) ---------- */
.hero {
    position: relative; color: #fff; overflow: hidden;
    background-color: #030a2d;
    background-image:
        linear-gradient(90deg, rgba(3,10,45,.88) 0%, rgba(3,10,45,.45) 52%, rgba(3,10,45,.05) 100%),
        url('../img/hero-bg.png');
    background-size: cover; background-position: center; background-repeat: no-repeat;
    /* Altura del hero fiel al Figma (905px), contenido centrado verticalmente */
    min-height: 905px;
    display: flex; flex-direction: column; justify-content: center;
    padding: 4rem 0;
}
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.hero__title { color: #fff; font-size: 2.9rem; font-weight: 500; margin-bottom: 1rem; }
.hero__accent {
    /* Degradado de texto fiel al Figma: cian → azul claro */
    background-image: linear-gradient(90deg, #53EAFD 0%, #BEDBFF 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.hero__subtitle { color: rgba(255,255,255,.82); font-size: 1.05rem; max-width: 38ch; margin-bottom: 2rem; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__media { position: relative; }
.hero__media::before {
    content: ""; position: absolute; z-index: 0;
    top: -18px; left: -6px; right: 42px; bottom: 34px;
    border: 1.5px solid rgba(255,255,255,.16); border-radius: 20px;
}
.hero__img { position: relative; z-index: 1; border: 4px solid rgba(255,255,255,.92); border-radius: 16px; box-shadow: 0 26px 60px rgba(0,0,0,.45); margin-left: auto; }
.hero__badge {
    /* Sobresale ~60px a la izquierda del borde de la imagen (fiel al Figma) */
    position: absolute; z-index: 2; left: -60px; bottom: -24px; display: flex; align-items: center; gap: .75rem;
    background: #fff; color: var(--color-primary); padding: .9rem 1.15rem; border-radius: 12px; box-shadow: var(--shadow);
}
.hero__badge-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--color-accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; }
.hero__badge-body { display: flex; flex-direction: column; line-height: 1.1; }
.hero__badge-title { font-size: 1.05rem; font-weight: 600; }
.hero__badge-sub { font-size: .72rem; color: var(--color-text-soft); }

/* ---------- Home: Sobre nosotros / sistema ---------- */
.home-about__inner,
.home-system__inner { position: relative; z-index: 1; }
.home-about__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
/* Mayor separación entre el texto y el botón (fiel al Figma, ~118px) */
.home-about__body .btn { margin-top: 6.25rem; }
.home-about__media img { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.home-system { position: relative; overflow: hidden; }
.home-system__inner { max-width: 880px; }
/* El título va en una sola línea (fiel al Figma); los párrafos mantienen su ancho */
.home-system .section__title { white-space: nowrap; }
.home-system__inner p { max-width: 716px; }
/* Mayor separación entre el texto y el botón (fiel al Figma, ~66px) */
.home-system__inner .btn { margin-top: 3.25rem; }
/* Watermark de huella (imagen huella.png provista) a la derecha de la sección */
.home-system__watermark {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 460px; max-width: 42%; height: auto; z-index: 0;
    pointer-events: none; user-select: none;
}

/* ---------- Feature list (3 iconos) ---------- */
.feature-list { display: flex; flex-direction: column; gap: 1.15rem; margin: 1.5rem 0 2rem; }
.feature-list__item { display: flex; gap: .9rem; align-items: flex-start; }
.feature-list__icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
    background: var(--color-bg-light); border: 1px solid var(--color-border); position: relative; }
.feature-list__icon::after { content: ""; position: absolute; inset: 8px;
    background: var(--color-accent); -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.feature-list__icon--globe::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7.9 9h-3a15 15 0 0 0-1.2-5.2A8 8 0 0 1 19.9 11zM12 4c.9 1.3 1.6 3.2 1.8 5H10.2C10.4 7.2 11.1 5.3 12 4zM4.1 13h3c.2 1.9.6 3.7 1.2 5.2A8 8 0 0 1 4.1 13zm3-2h-3a8 8 0 0 1 4.2-5.2A15 15 0 0 0 7.1 11zM12 20c-.9-1.3-1.6-3.2-1.8-5h3.6c-.2 1.8-.9 3.7-1.8 5zm2.7-.8c.6-1.5 1-3.3 1.2-5.2h3a8 8 0 0 1-4.2 5.2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7.9 9h-3a15 15 0 0 0-1.2-5.2A8 8 0 0 1 19.9 11zM12 4c.9 1.3 1.6 3.2 1.8 5H10.2C10.4 7.2 11.1 5.3 12 4zM4.1 13h3c.2 1.9.6 3.7 1.2 5.2A8 8 0 0 1 4.1 13zm3-2h-3a8 8 0 0 1 4.2-5.2A15 15 0 0 0 7.1 11zM12 20c-.9-1.3-1.6-3.2-1.8-5h3.6c-.2 1.8-.9 3.7-1.8 5zm2.7-.8c.6-1.5 1-3.3 1.2-5.2h3a8 8 0 0 1-4.2 5.2z'/%3E%3C/svg%3E"); }
.feature-list__icon--microsoft::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 3h8.5v8.5H3zM12.5 3H21v8.5h-8.5zM3 12.5h8.5V21H3zM12.5 12.5H21V21h-8.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 3h8.5v8.5H3zM12.5 3H21v8.5h-8.5zM3 12.5h8.5V21H3zM12.5 12.5H21V21h-8.5z'/%3E%3C/svg%3E"); }
.feature-list__icon--shield::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 1 3 5v6c0 5 3.8 9.7 9 11 5.2-1.3 9-6 9-11V5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 1 3 5v6c0 5 3.8 9.7 9 11 5.2-1.3 9-6 9-11V5z'/%3E%3C/svg%3E"); }
.feature-list__title { display: block; font-weight: 600; color: var(--color-primary); }
.feature-list__text { display: block; color: var(--color-text-soft); font-size: .92rem; }
.section--dark .feature-list__title { color: #fff; }
.section--dark .feature-list__text { color: rgba(255,255,255,.8); }

/* ---------- Distributor CTA ---------- */
/* Degradado exacto del Figma (126.57°, #03157B 38% → #0526E1 89%) */
.distributor-cta { background: linear-gradient(126.57deg, #03157B 37.95%, #0526E1 89.09%); color: #fff; }
.distributor-cta__inner { padding: 5rem var(--space-md); }
.distributor-cta__media { margin-bottom: 2.25rem; }
.distributor-cta__media img {
    width: 910px; max-width: 100%; aspect-ratio: 910 / 403; object-fit: cover;
    border-radius: 16px; display: block; box-shadow: 0 20px 50px rgba(0,0,0,.28);
}
.distributor-cta__title { color: #fff; font-size: 3rem; font-weight: 500; line-height: 1.29; max-width: 990px; margin: 0 0 1.5rem; }
.distributor-cta__text { color: #fff; font-size: 16px; line-height: 1.875; max-width: 738px; margin: 0 0 1.9rem; }

/* ---------- Cards de contacto ---------- */
.contact-card { background: var(--color-bg-light); border: 1px solid #dee3fb; border-radius: 20px; padding: 30px; margin-bottom: 1.1rem; }
.contact-card__title { display: flex; align-items: center; gap: .7rem; font-size: 24px; font-weight: 500; color: var(--color-primary); margin-bottom: .75rem; }
.contact-card p { color: #364153; margin: 0 0 .35rem; }
.contact-card p a { color: #364153; }
.contact-card p a:hover { color: var(--color-accent); }
.contact-card__icon { width: 20px; height: 20px; background: var(--color-accent);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.contact-card__icon--phone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.6 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .6 3.6 1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.6 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .6 3.6 1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); }
.contact-card__icon--pin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.contact-card__icon--mail { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm8 7 8-5H4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm8 7 8-5H4z'/%3E%3C/svg%3E"); }

/* ---------- Home contact grid ---------- */
.home-contact__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: start; }

/* ---------- Forms ---------- */
.abc-form__honeypot { position: absolute; left: -9999px; }
.abc-form__field { margin-bottom: 1.1rem; }
.abc-form__field label { display: block; font-size: .85rem; font-weight: 500; color: var(--color-text-soft); margin-bottom: .35rem; }
.abc-form__field input,
.abc-form__field select,
.abc-form__field textarea {
    width: 100%; font-family: var(--font); font-size: .95rem;
    padding: .8rem 1rem; border: 1px solid var(--color-border); border-radius: 10px;
    background: #fff; color: var(--color-text);
}
.abc-form__field input:focus,
.abc-form__field select:focus,
.abc-form__field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(21,93,252,.15); }
.abc-form__row { display: flex; gap: 1rem; }
.abc-form__field--grow { flex: 1; }
.abc-form__actions { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; }
.req { color: #e03030; }
.form-flash { padding: .85rem 1.1rem; border-radius: 10px; margin-bottom: 1.25rem; font-size: .9rem; }
.form-flash--success { background: #e6f7ec; color: #1c7a3e; border: 1px solid #b6e6c6; }
.form-flash--error { background: #fdecec; color: #b02525; border: 1px solid #f5c2c2; }

/* Campos "outline" con label flotante sobre el borde (formulario de contacto) */
.abc-field { position: relative; margin-bottom: 1.5rem; }
.abc-field input,
.abc-field textarea {
    width: 100%; font-family: var(--font); font-size: 16px; color: var(--color-text);
    padding: 1rem 1.1rem; border: 1.5px solid var(--color-primary); border-radius: 10px;
    background: #fff;
}
.abc-field textarea { display: block; min-height: 190px; resize: vertical; }
.abc-field input:focus,
.abc-field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(21,93,252,.15); }
.abc-field label {
    position: absolute; left: .9rem; top: 1rem; padding: 0 .35rem;
    color: var(--color-primary); font-size: 16px; pointer-events: none;
    transition: top .15s ease, font-size .15s ease, transform .15s ease; background: transparent;
}
.abc-field:not(.abc-field--area) label { top: 50%; transform: translateY(-50%); }
.abc-field input:focus + label,
.abc-field input:not(:placeholder-shown) + label,
.abc-field textarea:focus + label,
.abc-field textarea:not(:placeholder-shown) + label {
    top: 0; transform: translateY(-50%); font-size: .78rem; font-weight: 600;
    color: var(--color-primary); background: var(--color-bg-light);
}
.abc-form__center { text-align: center; margin-top: .5rem; }

/* La caja del formulario de contacto es una tarjeta clara (fiel al Figma) */
.home-contact__form { background: var(--color-bg-light); border-radius: 22px; padding: 2.5rem; }

/* ---------- Page banner ---------- */
.page-banner {
    position: relative; color: #fff; padding: 5.5rem 0 3rem; overflow: hidden;
    background-color: #030a2d;
    background-image:
        linear-gradient(90deg, rgba(3,10,45,.6) 0%, rgba(3,10,45,.15) 60%, rgba(3,10,45,0) 100%),
        url('../img/banner-bg.png');
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.page-banner__title {
    font-size: 2.6rem; font-weight: 500; margin: 0; display: inline-block;
    /* Degradado de texto fiel al Figma: blanco → azul claro → cian (94°) */
    background-image: linear-gradient(94deg, #FFFFFF 12.58%, #BEDBFF 23.07%, #53EAFD 56.82%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Sobre nosotros ---------- */
.about-leaders__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }

/* Ilustración de reconocimiento facial: foto circular + anillos + chips */
.about-illus { position: relative; width: 520px; max-width: 100%; aspect-ratio: 1 / 1; margin-left: auto; }
.about-illus__img {
    position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 56%; height: 56%; object-fit: cover; border-radius: 50%;
    box-shadow: 0 22px 55px rgba(3,21,123,.28);
}
.about-illus__ring {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    border-radius: 50%; border: 1.5px solid rgba(3,21,123,.12);
}
.about-illus__ring--1 { width: 66%; height: 66%; border-color: rgba(3,21,123,.16); }
.about-illus__ring--2 { width: 84%; height: 84%; border-color: rgba(3,21,123,.10); }
.about-illus__ring--3 { width: 100%; height: 100%; border-color: rgba(3,21,123,.07); }
.about-illus__chip {
    position: absolute; z-index: 2; width: 56px; height: 56px; border-radius: 14px;
    background: var(--color-primary); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 26px rgba(3,21,123,.32);
}
.about-illus__chip--tl { top: 15%; left: 3%; }
.about-illus__chip--tr { top: 6%; right: 5%; }
.about-illus__chip--br { bottom: 12%; right: 7%; }
.about-illus__ico {
    width: 24px; height: 24px; background: #fff;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
.about-illus__ico--cpu { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 1h2v2h2V1h2v2h1a3 3 0 0 1 3 3v1h2v2h-2v2h2v2h-2v2h2v2h-2v1a3 3 0 0 1-3 3h-1v2h-2v-2h-2v2H9v-2H8a3 3 0 0 1-3-3v-1H3v-2h2v-2H3v-2h2V9H3V7h2V6a3 3 0 0 1 3-3h1V1zm-1 6v10h8V7H8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 1h2v2h2V1h2v2h1a3 3 0 0 1 3 3v1h2v2h-2v2h2v2h-2v2h2v2h-2v1a3 3 0 0 1-3 3h-1v2h-2v-2h-2v2H9v-2H8a3 3 0 0 1-3-3v-1H3v-2h2v-2H3v-2h2V9H3V7h2V6a3 3 0 0 1 3-3h1V1zm-1 6v10h8V7H8z'/%3E%3C/svg%3E"); }
.about-illus__ico--code { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6zM14.6 7.4 19.2 12l-4.6 4.6L16 18l6-6-6-6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6zM14.6 7.4 19.2 12l-4.6 4.6L16 18l6-6-6-6z'/%3E%3C/svg%3E"); }
.about-illus__ico--db { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2c4.4 0 8 1.1 8 2.5S16.4 7 12 7 4 5.9 4 4.5 7.6 2 12 2zM4 7c0 1.4 3.6 2.5 8 2.5S20 8.4 20 7v4c0 1.4-3.6 2.5-8 2.5S4 12.4 4 11V7zm0 6.5c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5v4c0 1.4-3.6 2.5-8 2.5s-8-1.1-8-2.5v-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2c4.4 0 8 1.1 8 2.5S16.4 7 12 7 4 5.9 4 4.5 7.6 2 12 2zM4 7c0 1.4 3.6 2.5 8 2.5S20 8.4 20 7v4c0 1.4-3.6 2.5-8 2.5S4 12.4 4 11V7zm0 6.5c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5v4c0 1.4-3.6 2.5-8 2.5s-8-1.1-8-2.5v-4z'/%3E%3C/svg%3E"); }
/* Más separación entre el encabezado y las tarjetas (fiel al Figma, ~75px) */
.about-philosophy .section__title { margin-bottom: 4.5rem; }
.about-philosophy__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.philo-card, .value-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); }
.philo-card__icon, .value-card__icon { display: inline-flex; width: 44px; height: 44px; border-radius: 10px; background: var(--color-accent); margin-bottom: 1rem; }
/* Tarjeta Misión/Visión fiel al Figma: sin borde, radio 20, padding 30, sombra, gap 16 */
.philo-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; border: 0; border-radius: 20px; padding: 30px; box-shadow: 0 20px 12.5px rgba(0,0,0,.1), 0 8px 5px rgba(0,0,0,.1); }
.philo-card__title { margin: 0; font-size: 32px; font-weight: 500; color: var(--color-primary); }
.philo-card p { margin: 0; }
/* Valores fiel al Figma: título 32px + 48px hasta las tarjetas */
.about-values .section__title { font-size: 32px; line-height: 40px; margin-bottom: 48px; }
.about-values__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
/* Tarjeta de valor: sin borde, padding 20, gap 10, sombra suave */
.value-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; border: 0; border-radius: 14px; padding: 20px; box-shadow: 0 10px 7.5px rgba(0,0,0,.1), 0 4px 3px rgba(0,0,0,.1); }
.value-card__icon { width: 56px; height: 56px; background: var(--color-bg-light); border: 1px solid var(--color-border); }
.value-card__title { color: var(--color-primary); font-size: 20px; font-weight: 500; margin: 0; }
.value-card__text { color: #000; font-size: 16px; line-height: 22px; margin: 0; }

/* ---------- Productos ----------
   Título arriba (full width) · texto angosto (izq) + captura (der) ·
   párrafo ancho · features en fila (fiel al Figma) */
.product-hero__title { color: var(--color-primary); margin-bottom: 2.5rem; }
.product-hero__top { display: grid; grid-template-columns: minmax(300px, 340px) 1fr; gap: 3rem; align-items: start; margin-bottom: 2rem; }
.product-hero__text p { margin: 0 0 30px; }
.product-hero__text p:last-child { margin-bottom: 0; }
.product-hero__media img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.product-hero__note { max-width: 920px; margin: 0 0 3rem; }
.product-hero .feature-list { flex-direction: row; gap: 2rem; margin: 0; }
.product-hero .feature-list__item { flex: 1; }

/* ---------- Carrusel ---------- */
.carousel { position: relative; display: flex; align-items: center; gap: .5rem; margin-top: 2rem; }
.carousel__track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .5rem; flex: 1; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 300px; scroll-snap-align: start; }
.carousel__nav { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
    background: #fff; color: var(--color-primary); font-size: 1.4rem; box-shadow: var(--shadow-sm); }
.carousel__nav:hover { background: var(--color-accent); color: #fff; }
.section--dark .carousel__empty { color: rgba(255,255,255,.85); }

.module-card, .software-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); height: 100%; display: flex; flex-direction: column; }
.module-card__media img, .software-card__media img { width: 100%; height: 150px; object-fit: cover; }
.module-card__body, .software-card__body { padding: 1.3rem; display: flex; flex-direction: column; flex: 1; }
.module-card__code, .software-card__code { color: var(--color-primary); font-size: 1.15rem; margin-bottom: .25rem; }
.module-card__subtitle, .software-card__subtitle { font-weight: 600; font-size: .9rem; color: var(--color-text); margin-bottom: .5rem; }
.module-card__text, .software-card__body { font-size: .88rem; color: var(--color-text-soft); }
.software-card__features { list-style: disc; padding-left: 1.1rem; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .3rem; }
.software-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Support CTA ---------- */
.support-cta { background: linear-gradient(120deg, var(--color-primary), var(--color-accent)); color: #fff; }
.support-cta__inner { padding: var(--space-xl) var(--space-md); text-align: left; max-width: 900px; }
.support-cta__title { color: #fff; font-size: 1.9rem; }
.support-cta__text { color: rgba(255,255,255,.85); margin-bottom: 1.75rem; max-width: 70ch; }

/* ---------- Support form ---------- */
.abc-form--support { max-width: 820px; }

/* ---------- FAQ ---------- */
.faq__tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; background: #fff; border-radius: var(--radius-pill); padding: .4rem; max-width: 720px; margin: 0 auto 2.5rem; }
.faq__tab { border: 0; background: transparent; cursor: pointer; font-family: var(--font); font-size: .85rem; font-weight: 500; color: var(--color-primary); padding: .6rem 1.1rem; border-radius: var(--radius-pill); }
.faq__tab.is-active { background: var(--color-primary); color: #fff; }
.faq__panel { max-width: 820px; margin: 0 auto; display: none; }
.faq__panel.is-active { display: block; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,.25); }
.faq-item__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: transparent; border: 0; cursor: pointer; color: #fff; font-family: var(--font); font-size: .98rem;
    text-align: left; padding: 1.2rem .5rem; }
.faq-item__toggle { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.faq-item__a { padding: 0 .5rem 1.2rem; color: rgba(255,255,255,.85); }
.faq__empty { color: rgba(255,255,255,.85); text-align: center; }

/* ---------- Contacto ---------- */
.contact-intro__card { background: var(--color-bg-light); border-radius: var(--radius); padding: 2rem; max-width: 620px; margin-top: 2rem; }
.contact-directory__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.contact-emails { display: flex; flex-direction: column; gap: .5rem; font-size: .9rem; }
.distributors__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2rem; margin-top: 1.5rem; }
.distributors__list { background: var(--color-bg-light); border-radius: var(--radius); padding: 1.5rem; }
.distributors__search input { width: 100%; padding: .75rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-family: var(--font); margin-bottom: 1.25rem; }
.distributors__list-title { color: var(--color-accent); font-size: 1rem; }
.distributor-item { padding: 1rem 0; border-bottom: 1px solid var(--color-border); }
.distributor-item__name { font-size: 1rem; margin-bottom: .25rem; }
.distributor-item__loc { color: var(--color-text-soft); font-size: .88rem; margin: 0; }
.distributors__map { border-radius: var(--radius); overflow: hidden; min-height: 480px; box-shadow: var(--shadow-sm); }
.distributors__map-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 480px; background: var(--color-bg-light); color: var(--color-text-soft); text-align: center; padding: 2rem; }

/* ---------- Footer ---------- */
.site-footer { background: linear-gradient(120deg, #030d3d, var(--color-primary)); color: #fff; }
/* Tagline a la izquierda; las 3 columnas agrupadas a la derecha (gap 60px) */
.site-footer__inner { display: flex; align-items: flex-start; gap: 60px; flex-wrap: wrap; padding: 3.25rem var(--space-md) 2.25rem; }
.site-footer__brand { margin-right: auto; max-width: 350px; }
.site-footer__tagline { color: #fff; font-weight: 300; font-size: 18px; line-height: 1.4; max-width: 350px; }
.site-footer__title { color: #fff; font-size: 18px; font-weight: 500; margin-bottom: 24px; }
.site-footer__menu a { color: #fff; font-weight: 300; font-size: 16px; display: block; padding: 0 0 12px; }
.site-footer__menu a:hover { color: #fff; opacity: .75; text-decoration: none; }
.site-footer__bar-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 2rem var(--space-md) 2.25rem; border-top: 1px solid rgba(255,255,255,.4); }
.site-footer__copy { font-size: 14px; font-weight: 500; color: #fff; margin: 0; }
.site-footer__credit { font-size: 14px; color: #fff; margin: 0; line-height: 0; }
.site-footer__credit a { display: inline-block; line-height: 0; }
.site-footer__credit img { height: 29px; width: auto; display: block; }

/* ---------- Prose ---------- */
.prose { max-width: 75ch; }

/* ---------- Menu toggle (móvil) ---------- */
.menu-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: .4rem; }
.menu-toggle__bar { width: 24px; height: 2px; background: var(--color-primary); transition: .2s; }

/* ============================================================
   Iconos reales del proyecto (SVG exportados del Figma)
   Sobrescriben los iconos genéricos anteriores.
   ============================================================ */

/* Redes sociales — el SVG ya incluye el chip azul */
.abc-social__link { width: 32px; height: 32px; border-radius: 0; background: none; }
.abc-social__link:hover { background: none; transform: translateY(-2px); }
.abc-social__img { width: 100%; height: 100%; display: block; }

/* Features: Sistema multiidiomas / Tecnología Microsoft / Máxima Seguridad */
.feature-list__icon { width: 40px; height: 40px; flex: 0 0 auto; background: none; border: 0; border-radius: 0; }

/* Tarjetas de contacto (teléfono / dirección / correo) */
.contact-card__icon { width: 22px; height: 22px; background: none; -webkit-mask: none; mask: none; }
.contact-card__icon--phone { background: url('../img/icons/contact-phone.svg') center/contain no-repeat; }
.contact-card__icon--pin   { background: url('../img/icons/contact-pin.svg') center/contain no-repeat; }
.contact-card__icon--mail  { background: url('../img/icons/contact-mail.svg') center/contain no-repeat; }

/* Badge del hero ("Más de 30 años") */
.hero__badge-icon { width: 42px; height: 42px; border-radius: 0; background: none; }

/* Filosofía (Misión / Visión) — chip completo en el SVG */
.philo-card__icon { width: 64px; height: 64px; margin: 0; background: none; border-radius: 0; }

/* Valores — cuadro y glifo en el SVG */
.value-card__icon { width: 56px; height: 56px; margin: 0; background: none; border: 0; border-radius: 0; }

/* Chips de la ilustración de "Líderes": fondo azul + glifo blanco */
.about-illus__chip img { width: 24px; height: 24px; display: block; }
.about-illus__chip--bl { bottom: 30%; left: -1%; }