/* ==========================================================================
   Base: variables, reset, tipografía, botones y utilidades
   ========================================================================== */

:root {
    --color-primary: #0066cc;
    --color-accent: #0078a9;
    --color-dark: #070614;
    --color-heading: #0f172a;
    --color-body: #364151;
    --color-white: #ffffff;
    --color-black: #000000;

    --font-body: 'Noto Sans', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
    --font-alt: 'Rubik', sans-serif;

    /* Redondeo único de todos los botones (navbar, slider y secciones) */
    --btn-radius: 8px;

    /* Sistema de fondos: blanco + #0066cc en transparencias muy bajas.
       Las "neblinas" son gradientes radiales (suaves por naturaleza, sin filter: blur)
       y se apagan antes de los bordes de cada sección para que no se noten cortes */
    --blue-rgb: 0, 102, 204;                       /* #0066cc */
    --mist: rgba(var(--blue-rgb), 0.08);
    --mist-strong: rgba(var(--blue-rgb), 0.12);
    --surface-tint: rgba(var(--blue-rgb), 0.05);

    /* "Aurora Tecnimet": manchas de azul vivo (blanco + #0066cc, con toques de #0078a9).
       Se ubican en zonas sin texto oscuro; donde el fondo es azul, el texto va en blanco */
    --deep-rgb: 0, 41, 92;        /* #0066cc oscurecido (profundidades) */
    --teal-rgb: 0, 120, 169;      /* #0078a9, uso puntual */
    --sky-rgb: 77, 148, 219;      /* #0066cc aclarado (brillos) */
    --bloom: rgba(var(--blue-rgb), 0.55);
    --bloom-soft: rgba(var(--blue-rgb), 0.3);
    --bloom-teal: rgba(var(--teal-rgb), 0.4);
    --card-glow: 0 30px 70px -28px rgba(var(--blue-rgb), 0.6);   /* resplandor azul bajo tarjetas */

    /* Tarjetas blancas que destacan sobre el difuminado */
    --card-radius: 18px;
    --card-shadow: 0 1px 2px rgba(0, 41, 92, 0.05), 0 22px 44px -26px rgba(0, 61, 122, 0.35);

    /* Margen lateral común de la página: alinea logo, slider y secciones */
    --page-gutter: calc(12% + 10px);

    --bp-tablet: 1024px;
    --bp-mobile: 767px;
}

@media (max-width: 1024px) {
    :root { --page-gutter: 30px; }
}

@media (max-width: 767px) {
    :root { --page-gutter: 22px; }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

/* Evita scroll horizontal. En body se usa "clip" (no "hidden") para no romper
   el header con position: sticky: "hidden" convierte al body en contenedor de scroll. */
html {
    overflow-x: hidden;
}

body {
    overflow-x: clip;
}

body {
    margin: 0;
    background-color: var(--color-white);
    color: var(--color-body);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    /* En "em" (no unitless) a propósito: los hijos heredan 27.2px fijos, como en el sitio original */
    line-height: 1.7em;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border: 0;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

p {
    margin: 0 0 1.75em;
}

h1, h2, h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-heading);
}

h1 { font-size: 64px; line-height: 1.4; }
h2 { font-size: 34px; line-height: 1.3; }
h3 { font-size: 24px; line-height: 1.3; }

button {
    font-family: inherit;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 8px 16px;
    background: var(--color-white);
    color: var(--color-accent);
}

.skip-link:focus {
    left: 8px;
}

/* Párrafos de bloques de texto destacados (Rubik 19px) */
.text-block {
    margin-bottom: 1.6em;
}

.text-highlight {
    color: var(--color-primary);
}

/* --- Botones ------------------------------------------------------------ */

.btn {
    display: inline-block;
    padding: 17px 40px;
    border: none;
    border-radius: var(--btn-radius);
    background-color: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
}

.btn:hover,
.btn:focus {
    color: var(--color-white);
}

.btn--primary { background-color: var(--color-primary); }
.btn--rubik { font-family: var(--font-alt); }

/* Botón transparente con borde (para fondos oscuros) */
.btn--ghost {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px var(--color-white);
}

/* Botón con flecha: solo la flecha, en el color del texto del botón (blanco), sin recuadro.
   Misma altura que .btn (48px). Es el estilo de todos los botones con flecha del sitio */
.btn--arrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 32px;
}

/* Ventana de la flecha: recorta la animación de salida/entrada */
.btn__arrow-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1em;
    color: currentColor;
    font-size: 13px;
    overflow: hidden;
}

.btn__arrow-box i {
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.btn--arrow:hover .btn__arrow-box i,
.btn--arrow:focus-visible .btn__arrow-box i {
    animation: btn-arrow-slide 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* La flecha sale por la derecha y vuelve a entrar por la izquierda */
@keyframes btn-arrow-slide {
    0% { transform: translateX(0); }
    45% { transform: translateX(140%); }
    46% { transform: translateX(-140%); }
    100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .btn--arrow:hover .btn__arrow-box i,
    .btn--arrow:focus-visible .btn__arrow-box i {
        animation: none;
    }
}

/* --- Efecto "grow" al pasar el mouse sobre imágenes ---------------------- */

.hover-grow {
    transition: transform 1s;
}

.hover-grow:hover {
    transform: scale(1.1);
}

/* --- Responsive tipografía --------------------------------------------- */

@media (max-width: 1024px) {
    h1 { font-size: 44px; }
    h2 { font-size: 32px; }
    h3 { font-size: 20px; }
    body { font-size: 15px; }
}

@media (max-width: 767px) {
    h1 { font-size: 30px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
}