/* =============================================================================
   FOUR STRAIGHTS GUATEMALA — Hoja de estilos principal
   =============================================================================
   Se carga DESPUÉS de bootstrap.min.css, por eso puede sobrescribirlo.

   ÍNDICE
     01. Variables de color y medidas
     02. Reset y base tipográfica
     03. Utilidades (secciones, títulos, texturas, diagonales)
     04. Botones
     05. Barra superior y navegación
     06. Menú móvil (offcanvas)
     07. Hero principal
     08. Encabezado de páginas interiores
     09. Categorías
     10. Productos (filtros y tarjetas)
     11. Ficha de producto
     12. Uniformes personalizados
     13. Beneficios
     14. Nosotros
     15. Comunidad y pilotos
     16. Testimonios
     17. Instagram
     18. Preguntas frecuentes
     19. Contacto y formulario
     20. Footer
     21. Botón flotante de WhatsApp
     22. Animaciones de aparición
     23. Accesibilidad y preferencias del usuario
     24. Ajustes responsive finales
   ========================================================================== */


/* =============================================================================
   01. VARIABLES DE COLOR Y MEDIDAS
   ========================================================================== */
:root {
    /* Paleta de la marca (tomada del logotipo) */
    --color-primary: #064FA3;
    --color-primary-light: #087FC4;
    --color-electric: #039CCB;
    --color-accent: #20C5D2;
    --color-accent-light: #61D6D2;
    --color-orange: #FF5A24;
    --color-orange-dark: #E44A17;
    --color-red: #F3261B;
    --color-dark: #071525;
    --color-black: #05080D;
    --color-light: #F3F6F9;
    --color-white: #FFFFFF;
    --color-gray: #64748B;
    --color-ink: #0C1826;

    /* Degradados */
    --grad-brand: linear-gradient(135deg, #064FA3 0%, #087FC4 48%, #20C5D2 100%);
    --grad-brand-soft: linear-gradient(135deg, rgba(6, 79, 163, .92) 0%, rgba(8, 127, 196, .88) 48%, rgba(32, 197, 210, .82) 100%);
    --grad-cta: linear-gradient(135deg, #FF5A24 0%, #F3261B 100%);
    --grad-dark: linear-gradient(180deg, #071525 0%, #05080D 100%);

    /* Medidas del encabezado (se usan para separar el contenido) */
    --topbar-h: 36px;
    --nav-h: 70px;
    --header-total: calc(var(--topbar-h) + var(--nav-h));

    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(7, 21, 37, .08);
    --shadow-md: 0 12px 32px -12px rgba(7, 21, 37, .22);
    --shadow-lg: 0 28px 60px -24px rgba(7, 21, 37, .35);
    --shadow-glow: 0 18px 44px -18px rgba(8, 127, 196, .55);

    /* Bordes */
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;

    /* Ritmo de transiciones */
    --t: 250ms;
    --ease: cubic-bezier(.22, .61, .36, 1);

    /* Capas */
    --z-header: 1040;
    --z-float: 1035;
}

@media (min-width: 992px) {
    :root {
        --topbar-h: 40px;
        --nav-h: 92px;
    }
}


/* =============================================================================
   02. RESET Y BASE TIPOGRÁFICA
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Evita que el ancla quede escondida bajo el encabezado fijo */
    scroll-padding-top: calc(var(--header-total) + 12px);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-ink);
    background-color: var(--color-white);
    /* Ninguna página debe desplazarse horizontalmente */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.display-font {
    font-family: 'Bebas Neue', 'Montserrat', Impact, sans-serif;
    letter-spacing: .03em;
    line-height: .96;
    text-transform: uppercase;
    margin: 0 0 .5em;
    font-weight: 400;
}

h1 { font-size: clamp(3rem, 8vw, 7rem); }
h2 { font-size: clamp(2.2rem, 5vw, 4.5rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); }
h4 { font-size: clamp(1.15rem, 2vw, 1.5rem); }

p {
    margin: 0 0 1rem;
}

a {
    color: var(--color-primary-light);
    text-decoration: none;
    transition: color var(--t) var(--ease);
}

a:hover {
    color: var(--color-accent);
}

img {
    max-width: 100%;
    height: auto;
}

/* Tipografía secundaria: navegación, botones, etiquetas */
.navbar,
.btn,
.subtitle,
.eyebrow,
.nav-link,
.badge-fs,
.filter-btn {
    font-family: 'Montserrat', system-ui, sans-serif;
}

/* Contenedor máximo coherente en todo el sitio */
.container,
.container-fluid {
    padding-inline: 1.25rem;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1280px;
    }
}


/* =============================================================================
   03. UTILIDADES: SECCIONES, TÍTULOS, TEXTURAS, DIAGONALES
   ========================================================================== */

/* Ritmo vertical de todas las secciones */
.section {
    position: relative;
    padding-block: clamp(3.5rem, 8vw, 7rem);
}

.section-tight {
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.section-light {
    background-color: var(--color-white);
    color: var(--color-ink);
}

.section-muted {
    background-color: var(--color-light);
    color: var(--color-ink);
}

.section-dark {
    background: var(--grad-dark);
    color: rgba(255, 255, 255, .82);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: var(--color-white);
}

.section-brand {
    background: var(--grad-brand);
    color: var(--color-white);
}

/* Etiqueta pequeña sobre los títulos ------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-primary-light);
    margin-bottom: 1rem;
}

.eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--grad-cta);
    flex: none;
}

.section-dark .eyebrow,
.section-brand .eyebrow {
    color: var(--color-accent-light);
}

.section-brand .eyebrow::before {
    background: var(--color-white);
}

/* Texto de apoyo bajo los títulos ---------------------------------------- */
.lead-fs {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.7;
    color: var(--color-gray);
    /* Longitud de línea cómoda para leer */
    max-width: 62ch;
}

.section-dark .lead-fs,
.section-brand .lead-fs {
    color: rgba(255, 255, 255, .78);
}

/* Palabra resaltada dentro de un título ---------------------------------- */
.text-grad {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

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

/* Textura sutil de líneas de velocidad ----------------------------------- */
.tex-speed::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(115deg,
        rgba(255, 255, 255, .035) 0px,
        rgba(255, 255, 255, .035) 1px,
        transparent 1px,
        transparent 9px);
    z-index: 0;
}

.section-light.tex-speed::before,
.section-muted.tex-speed::before {
    background-image: repeating-linear-gradient(115deg,
        rgba(6, 79, 163, .04) 0px,
        rgba(6, 79, 163, .04) 1px,
        transparent 1px,
        transparent 9px);
}

/* Resplandor de color de fondo ------------------------------------------- */
/* overflow:hidden es OBLIGATORIO: el resplandor sobresale del borde derecho
   y sin esto provocaría desplazamiento horizontal en teléfonos. */
.glow-blue {
    overflow: hidden;
}

.glow-blue::after {
    content: "";
    position: absolute;
    width: min(680px, 90vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(8, 127, 196, .28) 0%, transparent 68%);
    top: -16%;
    right: -14%;
    pointer-events: none;
    z-index: 0;
}

/* El contenido siempre por encima de texturas y resplandores */
.section > .container,
.section > .container-fluid {
    position: relative;
    z-index: 1;
}

/* Bordes diagonales ------------------------------------------------------ */
.edge-top {
    clip-path: polygon(0 3.2vw, 100% 0, 100% 100%, 0 100%);
    margin-top: -3.2vw;
    padding-top: calc(clamp(3.5rem, 8vw, 7rem) + 3.2vw);
}

.edge-bottom {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.2vw), 0 100%);
    padding-bottom: calc(clamp(3.5rem, 8vw, 7rem) + 3.2vw);
}

.edge-both {
    clip-path: polygon(0 3.2vw, 100% 0, 100% calc(100% - 3.2vw), 0 100%);
    margin-top: -3.2vw;
    padding-block: calc(clamp(3.5rem, 8vw, 7rem) + 3.2vw);
}

/* Barra de acento tipo "línea de meta" ----------------------------------- */
.accent-bar {
    height: 4px;
    background: var(--grad-cta);
    width: 64px;
    border-radius: 2px;
}


/* =============================================================================
   04. BOTONES
   ========================================================================== */
.btn {
    --bs-btn-focus-box-shadow: none;
    font-weight: 700;
    font-size: .875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 10px;
    /* Altura mínima táctil de 48px */
    min-height: 48px;
    padding: .75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 2px solid transparent;
    transition: transform var(--t) var(--ease),
                box-shadow var(--t) var(--ease),
                background-color var(--t) var(--ease),
                border-color var(--t) var(--ease),
                color var(--t) var(--ease);
    cursor: pointer;
}

.btn:active {
    transform: translateY(1px);
}

/* Principal: naranja de la marca */
.btn-fs {
    background: var(--grad-cta);
    color: var(--color-white);
    box-shadow: 0 12px 28px -14px rgba(255, 90, 36, .85);
}

.btn-fs:hover,
.btn-fs:focus-visible {
    color: var(--color-white);
    background: linear-gradient(135deg, #FF6B3A 0%, #F5372D 100%);
    box-shadow: 0 18px 36px -14px rgba(255, 90, 36, .95);
    transform: translateY(-2px);
}

/* Secundario: azul de la marca */
.btn-fs-blue {
    background: var(--grad-brand);
    color: var(--color-white);
    box-shadow: var(--shadow-glow);
}

.btn-fs-blue:hover,
.btn-fs-blue:focus-visible {
    color: var(--color-white);
    filter: brightness(1.08);
    transform: translateY(-2px);
}

/* Contorno claro (sobre fondos oscuros o fotos) */
.btn-fs-outline {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .55);
    color: var(--color-white);
    backdrop-filter: blur(6px);
}

.btn-fs-outline:hover,
.btn-fs-outline:focus-visible {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-dark);
    transform: translateY(-2px);
}

/* Contorno oscuro (sobre fondos claros) */
.btn-fs-ghost {
    background: transparent;
    border-color: rgba(6, 79, 163, .35);
    color: var(--color-primary);
}

.btn-fs-ghost:hover,
.btn-fs-ghost:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* Botón de WhatsApp (verde oficial) */
.btn-wa {
    background: #25D366;
    color: #062B14;
    border-color: #25D366;
}

.btn-wa:hover,
.btn-wa:focus-visible {
    background: #1FBA59;
    border-color: #1FBA59;
    color: #062B14;
    transform: translateY(-2px);
}

.btn-lg-fs {
    font-size: .95rem;
    padding: .95rem 2rem;
    min-height: 56px;
}


/* =============================================================================
   05. BARRA SUPERIOR Y NAVEGACIÓN
   ========================================================================== */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-header);
}

/* --- Barra superior de avisos --- */
.topbar {
    height: var(--topbar-h);
    background: var(--grad-brand);
    color: var(--color-white);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: height var(--t) var(--ease), opacity var(--t) var(--ease);
}

.topbar a {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 3px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    /* Área táctil cómoda sin romper la altura de la barra */
    padding-block: .5rem;
}

.topbar a:hover {
    color: #FFE2D6;
}

/* Texto corto en teléfonos, texto completo desde 576px */
.topbar-short { display: inline; }
.topbar-long  { display: none; }

@media (min-width: 576px) {
    .topbar-short { display: none; }
    .topbar-long  { display: inline; }
}

/* Al bajar, la barra de avisos se recoge y deja más espacio útil */
.site-header.is-scrolled .topbar {
    height: 0;
    opacity: 0;
}

/* --- Barra de navegación --- */
.navbar-fs {
    height: var(--nav-h);
    background: transparent;
    transition: background-color var(--t) var(--ease),
                box-shadow var(--t) var(--ease),
                backdrop-filter var(--t) var(--ease);
}

.site-header.is-scrolled .navbar-fs,
.site-header.header-solid .navbar-fs {
    background-color: rgba(7, 21, 37, .92);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px -12px rgba(5, 8, 13, .8);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* Logotipo — se respeta siempre la proporción original */
.site-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
    transition: width var(--t) var(--ease), height var(--t) var(--ease);
}

@media (min-width: 992px) {
    .site-logo {
        width: 76px;
        height: 76px;
    }
}

.navbar-brand-fs {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: 0;
    /* Nunca se comprime: el logotipo debe conservar su proporción */
    flex: none;
}

/* El nombre junto al logo solo aparece a partir de 1400px.
   Entre 1200 y 1399 el menú completo ya ocupa el ancho disponible y el
   texto se montaría encima de los enlaces. */
.brand-text {
    display: none;
    line-height: 1;
    white-space: nowrap;
}

@media (min-width: 1400px) {
    .brand-text { display: block; }
}

.brand-text .brand-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    letter-spacing: .06em;
    color: var(--color-white);
    display: block;
}

.brand-text .brand-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-accent-light);
    display: block;
}

/* Enlaces del menú en escritorio */
.navbar-fs .nav-link {
    color: rgba(255, 255, 255, .86);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .5rem .6rem;
    position: relative;
    border-radius: 6px;
    white-space: nowrap;
    transition: color var(--t) var(--ease);
}

/* El botón principal del encabezado nunca debe partirse en dos líneas */
.navbar-fs .btn {
    white-space: nowrap;
    padding-inline: 1.15rem;
}

@media (min-width: 1400px) {
    .navbar-fs .nav-link {
        font-size: .8rem;
        letter-spacing: .08em;
        padding-inline: .75rem;
    }
}

.navbar-fs .nav-link::after {
    content: "";
    position: absolute;
    left: .6rem;
    right: .6rem;
    bottom: .1rem;
    height: 2px;
    background: var(--grad-cta);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t) var(--ease);
}

.navbar-fs .nav-link:hover,
.navbar-fs .nav-link:focus-visible {
    color: var(--color-white);
}

.navbar-fs .nav-link:hover::after,
.navbar-fs .nav-link:focus-visible::after,
.navbar-fs .nav-link.active::after {
    transform: scaleX(1);
}

.navbar-fs .nav-link.active {
    color: var(--color-white);
}

/* Icono social del encabezado */
.nav-icon-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 1.15rem;
    transition: all var(--t) var(--ease);
}

.nav-icon-btn:hover,
.nav-icon-btn:focus-visible {
    color: var(--color-white);
    background: var(--grad-brand);
    border-color: transparent;
    transform: translateY(-2px);
}

/* Botón hamburguesa */
.navbar-toggler-fs {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .06);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    padding: 0;
    transition: all var(--t) var(--ease);
}

.navbar-toggler-fs:hover {
    background: rgba(255, 255, 255, .14);
}


/* =============================================================================
   06. MENÚ MÓVIL (OFFCANVAS)
   ========================================================================== */
/* Bootstrap ya se encarga de bloquear el scroll del fondo, cerrar al tocar
   fuera y cerrar con la tecla Escape. En main.js se agrega el cierre al
   pulsar cualquier enlace. */
/* La doble clase gana a la regla de ancho de Bootstrap sin usar !important */
.offcanvas.offcanvas-fs {
    background: var(--grad-dark);
    color: var(--color-white);
    width: min(340px, 86vw);
    max-width: 100%;
    border-left: 1px solid rgba(255, 255, 255, .08);
}

.offcanvas-fs .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding: 1rem 1.25rem;
}

.offcanvas-fs .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .85;
    width: 1.25rem;
    height: 1.25rem;
    /* Área táctil suficiente */
    padding: 1rem;
    margin: -.5rem -.5rem -.5rem auto;
}

.offcanvas-fs .nav-link {
    color: rgba(255, 255, 255, .88);
    font-family: 'Montserrat', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    /* Altura táctil holgada */
    padding: .95rem .25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color var(--t) var(--ease), padding-left var(--t) var(--ease);
}

.offcanvas-fs .nav-link i {
    color: var(--color-accent);
    font-size: 1rem;
    opacity: .55;
    transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}

.offcanvas-fs .nav-link:hover,
.offcanvas-fs .nav-link:focus-visible {
    color: var(--color-accent-light);
    padding-left: .75rem;
}

.offcanvas-fs .nav-link:hover i {
    opacity: 1;
    transform: translateX(4px);
}

.offcanvas-fs .nav-link.active {
    color: var(--color-orange);
}

.offcanvas-footer {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}


/* =============================================================================
   07. HERO PRINCIPAL
   ========================================================================== */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    /* Alto cómodo en teléfonos, amplio en escritorio */
    min-height: 640px;
    padding-top: calc(var(--header-total) + 2rem);
    padding-bottom: clamp(3rem, 7vw, 5rem);
    overflow: hidden;
    background-color: var(--color-black);
    color: var(--color-white);
}

@media (min-width: 768px) {
    .hero {
        min-height: 700px;
        height: 88vh;
        max-height: 900px;
    }
}

@media (min-width: 1200px) {
    .hero {
        height: 92vh;
        max-height: 1000px;
    }
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% center;
}

/* Capas de oscurecimiento: oscurecen la izquierda (donde va el texto) y
   dejan respirar la derecha para que la fotografía siga viéndose.
   Si subes una foto muy oscura, baja estos valores; si es muy clara, súbelos. */
.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg,
            rgba(5, 8, 13, .93) 0%,
            rgba(7, 21, 37, .78) 38%,
            rgba(7, 21, 37, .22) 68%,
            rgba(7, 21, 37, .38) 100%),
        linear-gradient(180deg,
            rgba(5, 8, 13, .58) 0%,
            transparent 26%,
            transparent 58%,
            rgba(5, 8, 13, .72) 100%);
}

/* Tinte azul de marca sobre la foto */
.hero-tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(6, 79, 163, .38) 0%, transparent 55%, rgba(32, 197, 210, .16) 100%);
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Líneas de velocidad decorativas */
.hero-lines {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: repeating-linear-gradient(115deg,
        rgba(255, 255, 255, .05) 0px,
        rgba(255, 255, 255, .05) 1px,
        transparent 1px,
        transparent 11px);
    mask-image: linear-gradient(90deg, transparent, #000 40%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, transparent);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(8px);
    border-radius: 100px;
    padding: .45rem 1rem;
    font-family: 'Montserrat', sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    color: var(--color-white);
}

.hero-tag .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-orange);
    box-shadow: 0 0 0 4px rgba(255, 90, 36, .25);
}

.hero h1 {
    color: var(--color-white);
    margin-bottom: 1.25rem;
    text-shadow: 0 6px 34px rgba(0, 0, 0, .55);
}

.hero h1 .line-accent {
    display: block;
    background: linear-gradient(105deg, #FFFFFF 0%, #61D6D2 55%, #20C5D2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-text {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    color: rgba(255, 255, 255, .85);
    max-width: 56ch;
    margin-bottom: 2rem;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 2.25rem;
}

@media (min-width: 480px) {
    .hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
    }
}

/* Indicadores del hero */
.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.hero-points li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .82);
}

.hero-points i {
    color: var(--color-accent);
    font-size: 1rem;
    flex: none;
}

/* Tarjeta flotante */
.hero-card {
    position: relative;
    z-index: 2;
    margin-top: 2.5rem;
    background: rgba(7, 21, 37, .72);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(16px);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    box-shadow: var(--shadow-lg);
    max-width: 100%;
}

@media (min-width: 992px) {
    .hero-card {
        position: absolute;
        right: 2.5rem;
        bottom: 3.5rem;
        margin-top: 0;
        max-width: 300px;
    }
}

.hero-card .hc-icon {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 12px;
    background: var(--grad-brand);
    display: grid;
    place-items: center;
    color: var(--color-white);
    font-size: 1.3rem;
}

.hero-card .hc-title {
    font-family: 'Montserrat', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-white);
    letter-spacing: .02em;
    line-height: 1.3;
    display: block;
}

.hero-card .hc-sub {
    font-size: .72rem;
    color: rgba(255, 255, 255, .62);
    line-height: 1.4;
    display: block;
}

/* Indicador de desplazamiento */
.hero-scroll {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255, 255, 255, .45);
    font-size: 1.4rem;
    display: none;
}

@media (min-width: 992px) {
    .hero-scroll { display: block; }
}

.hero-scroll i {
    display: block;
    animation: fs-bob 2.4s var(--ease) infinite;
}

@keyframes fs-bob {
    0%, 100% { transform: translateY(0); opacity: .45; }
    50%      { transform: translateY(7px); opacity: .9; }
}


/* =============================================================================
   08. ENCABEZADO DE PÁGINAS INTERIORES
   ========================================================================== */
.page-hero {
    position: relative;
    padding-top: calc(var(--header-total) + clamp(2.5rem, 6vw, 4.5rem));
    padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
    background: var(--grad-dark);
    color: var(--color-white);
    overflow: hidden;
}

.page-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .38;
}

.page-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(5, 8, 13, .95) 10%, rgba(7, 21, 37, .7) 60%, rgba(7, 21, 37, .9) 100%);
}

.page-hero > .container {
    position: relative;
    z-index: 2;
}

.page-hero h1 {
    font-size: clamp(2.6rem, 6vw, 5rem);
    margin-bottom: .5rem;
    color: var(--color-white);
}

/* Migas de pan */
.fs-breadcrumb {
    font-family: 'Montserrat', sans-serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.fs-breadcrumb a {
    color: rgba(255, 255, 255, .78);
}

.fs-breadcrumb a:hover {
    color: var(--color-accent);
}

.fs-breadcrumb .sep {
    opacity: .4;
}


/* =============================================================================
   09. CATEGORÍAS
   ========================================================================== */
/* Rejilla flexible: se adapta al número de categorías que haya (5, 6, 7…)
   y centra la última fila cuando queda incompleta. */
.cat-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}

.cat-grid > .cat-card {
    flex: 1 1 100%;
    max-width: 100%;
}

@media (min-width: 576px) {
    .cat-grid > .cat-card {
        flex: 1 1 calc(50% - 0.625rem);
        max-width: calc(50% - 0.625rem);
    }
}

@media (min-width: 992px) {
    .cat-grid > .cat-card {
        flex: 1 1 calc(33.333% - 0.834rem);
        max-width: calc(33.333% - 0.834rem);
    }
}

/* Con 6 categorías quedan 3 y 3, que es lo más equilibrado.
   Si algún día son 7 u 8, la última fila se centra sola. */
@media (min-width: 1400px) {
    .cat-grid { gap: 1.25rem; }
    .cat-grid > .cat-card {
        flex: 1 1 calc(33.333% - 0.834rem);
        max-width: calc(33.333% - 0.834rem);
    }
}

.cat-card {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-dark);
    /* Altura consistente entre tarjetas */
    aspect-ratio: 3 / 4;
    min-height: 320px;
    isolation: isolate;
    box-shadow: var(--shadow-md);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.cat-card:hover,
.cat-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.cat-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 600ms var(--ease);
}

.cat-card:hover img {
    transform: scale(1.07);
}

.cat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(7, 21, 37, .1) 0%, rgba(7, 21, 37, .55) 46%, rgba(5, 8, 13, .95) 100%);
    transition: background var(--t) var(--ease);
}

.cat-card:hover::after {
    background: linear-gradient(180deg, rgba(6, 79, 163, .3) 0%, rgba(7, 21, 37, .68) 46%, rgba(5, 8, 13, .96) 100%);
}

.cat-card-body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.25rem;
    color: var(--color-white);
}

.cat-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    color: var(--color-accent-light);
    margin-bottom: .75rem;
    transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.cat-card:hover .cat-card-icon {
    background: var(--grad-cta);
    color: var(--color-white);
    border-color: transparent;
}

.cat-card h3 {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    color: var(--color-white);
    margin-bottom: .35rem;
    /* Reserva el alto de dos líneas para que todas las tarjetas
       alineen su título aunque el nombre sea corto o largo */
    min-height: 2em;
    display: flex;
    align-items: flex-end;
}

.cat-card p {
    font-size: .82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
    margin-bottom: .75rem;
    /* Máximo dos líneas: mantiene parejas todas las tarjetas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
}

.cat-card .cat-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: 'Montserrat', sans-serif;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-accent-light);
}

.cat-card .cat-link i {
    transition: transform var(--t) var(--ease);
}

.cat-card:hover .cat-link {
    color: var(--color-orange);
}

.cat-card:hover .cat-link i {
    transform: translateX(5px);
}


/* =============================================================================
   10. PRODUCTOS: FILTROS Y TARJETAS
   ========================================================================== */

/* --- Filtros --- */
.filter-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    /* En móvil se desliza horizontalmente dentro de su propio contenedor:
       no genera scroll horizontal en la página */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;
    margin-bottom: 2rem;
}

.filter-bar::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
    .filter-bar {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
    }
}

.filter-btn {
    flex: none;
    background: var(--color-white);
    border: 1px solid rgba(6, 79, 163, .18);
    color: var(--color-primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .7rem 1.15rem;
    min-height: 44px;
    border-radius: 100px;
    cursor: pointer;
    transition: all var(--t) var(--ease);
    white-space: nowrap;
}

.filter-btn:hover {
    border-color: var(--color-primary-light);
    background: rgba(8, 127, 196, .07);
}

/* El estado activo va al final para que gane siempre, sin importar
   el color de fondo de la sección donde esté el filtro. */
.filter-btn[aria-pressed="true"],
.section-muted .filter-btn[aria-pressed="true"],
.section-light .filter-btn[aria-pressed="true"] {
    background: var(--grad-brand);
    border-color: transparent;
    color: var(--color-white);
    box-shadow: var(--shadow-glow);
}

/* Mensaje cuando un filtro no tiene resultados */
.filter-empty {
    display: none;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-gray);
}

.filter-empty.is-visible { display: block; }

/* --- Cuadrícula de productos --- */
.prod-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 520px) {
    .prod-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .prod-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
    .prod-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- Tarjeta de producto --- */
.prod-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid rgba(7, 21, 37, .08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* Todas las tarjetas del mismo alto */
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t) var(--ease),
                box-shadow var(--t) var(--ease),
                border-color var(--t) var(--ease);
}

.prod-card:hover {
    transform: translateY(-6px);
    border-color: rgba(8, 127, 196, .3);
    box-shadow: var(--shadow-lg);
}

.prod-media {
    position: relative;
    display: block;
    /* Proporción estable: nada se mueve mientras carga la imagen */
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--color-light);
}

.prod-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease);
}

.prod-card:hover .prod-media img {
    transform: scale(1.06);
}

/* Etiquetas Nuevo / Popular / Oferta */
.badge-fs {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 2;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .35rem .7rem;
    border-radius: 6px;
    color: var(--color-white);
    background: var(--color-primary);
    box-shadow: 0 4px 12px -4px rgba(7, 21, 37, .4);
}

.badge-nuevo         { background: var(--grad-brand); }
.badge-popular       { background: linear-gradient(135deg, #087FC4, #039CCB); }
.badge-oferta        { background: var(--grad-cta); }
.badge-personalizable{ background: linear-gradient(135deg, #20C5D2, #61D6D2); color: #06323A; }

/* Porcentaje de descuento */
.badge-desc {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    background: var(--color-red);
    color: var(--color-white);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: .04em;
    line-height: 1;
    padding: .45rem .55rem;
    border-radius: 6px;
}

.prod-body {
    padding: 1.1rem 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.prod-cat {
    font-family: 'Montserrat', sans-serif;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-primary-light);
    margin-bottom: .4rem;
}

.prod-name {
    font-family: 'Montserrat', sans-serif;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-ink);
    margin-bottom: .5rem;
    /* Dos líneas máximo para que las tarjetas queden parejas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

/* El enlace del título necesita al menos 24px de alto para poder tocarse
   con comodidad (WCAG 2.5.8) */
.prod-name a {
    color: inherit;
    display: inline-block;
    padding-block: .15rem;
}

.prod-name a:hover { color: var(--color-primary-light); }

.prod-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}

.prod-price .price-now {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--color-orange);
    /* Cifras de ancho fijo: los precios quedan alineados */
    font-variant-numeric: tabular-nums;
}

.prod-price .price-old {
    font-size: .85rem;
    color: var(--color-gray);
    text-decoration: line-through;
}

.prod-price .price-from {
    font-family: 'Montserrat', sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-gray);
    align-self: center;
}

/* Tallas: son botones reales, así que necesitan área táctil de 44px.
   Se envuelven en dos filas si no caben; es preferible a un objetivo
   demasiado pequeño para el dedo. */
.prod-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: 1rem;
}

.size-chip {
    font-family: 'Montserrat', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-gray);
    background: var(--color-light);
    border: 1px solid rgba(7, 21, 37, .08);
    border-radius: 7px;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    padding-inline: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--t) var(--ease);
}

.size-chip:hover {
    border-color: var(--color-primary-light);
    background: rgba(8, 127, 196, .07);
    color: var(--color-primary);
}

.size-chip[aria-pressed="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.prod-actions {
    margin-top: auto;
    display: grid;
    gap: .5rem;
}

.prod-actions .btn {
    min-height: 44px;
    font-size: .75rem;
    padding: .6rem 1rem;
    width: 100%;
}

/* Estado del inventario */
.prod-stock {
    font-size: .72rem;
    color: var(--color-gray);
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .85rem;
}

.prod-stock .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
    flex: none;
}

.prod-stock.is-order .dot { background: var(--color-orange); }
.prod-stock.is-out .dot   { background: var(--color-gray); }

/* Elemento oculto por el filtro */
.is-filtered-out {
    display: none !important;
}


/* =============================================================================
   11. FICHA DE PRODUCTO
   ========================================================================== */
.pd-gallery-main {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-light);
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow-md);
}

.pd-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .625rem;
    margin-top: .625rem;
}

.pd-thumb {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 1;
    border: 2px solid transparent;
    background: var(--color-light);
    padding: 0;
    cursor: pointer;
    transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.pd-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-thumb:hover {
    transform: translateY(-2px);
}

.pd-thumb[aria-current="true"] {
    border-color: var(--color-orange);
}

.pd-info h1 {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    margin-bottom: .75rem;
}

.pd-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.pd-price .price-now {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    line-height: 1;
    color: var(--color-orange);
    font-variant-numeric: tabular-nums;
}

.pd-price .price-old {
    font-size: 1.1rem;
    color: var(--color-gray);
    text-decoration: line-through;
}

/* Selector de talla */
.size-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.size-option {
    min-width: 52px;
    min-height: 48px;
    padding: .5rem .85rem;
    border-radius: 10px;
    border: 1.5px solid rgba(7, 21, 37, .16);
    background: var(--color-white);
    font-family: 'Montserrat', sans-serif;
    font-size: .85rem;
    font-weight: 700;
    color: var(--color-ink);
    cursor: pointer;
    transition: all var(--t) var(--ease);
}

.size-option:hover {
    border-color: var(--color-primary-light);
    background: rgba(8, 127, 196, .06);
}

.size-option[aria-pressed="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-glow);
}

/* Selector de cantidad */
.qty-picker {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid rgba(7, 21, 37, .16);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-white);
}

.qty-picker button {
    width: 46px;
    height: 48px;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-size: 1.1rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--t) var(--ease);
}

.qty-picker button:hover { background: rgba(8, 127, 196, .08); }
.qty-picker button:disabled { opacity: .4; cursor: not-allowed; }

.qty-picker input {
    width: 52px;
    height: 48px;
    border: 0;
    border-inline: 1.5px solid rgba(7, 21, 37, .1);
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    color: var(--color-ink);
    /* Sin flechas nativas */
    -moz-appearance: textfield;
    appearance: textfield;
}

.qty-picker input::-webkit-outer-spin-button,
.qty-picker input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Lista de características */
.pd-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .625rem;
}

.pd-features li {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    font-size: .92rem;
    color: #33465C;
}

.pd-features i {
    color: var(--color-accent);
    font-size: 1.05rem;
    line-height: 1.5;
    flex: none;
}

/* Datos de confianza bajo el botón */
.pd-trust {
    display: grid;
    gap: .75rem;
    padding: 1.1rem;
    background: var(--color-light);
    border-radius: var(--radius);
    border: 1px solid rgba(7, 21, 37, .06);
}

.pd-trust div {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .82rem;
    color: #33465C;
}

.pd-trust i {
    color: var(--color-primary-light);
    font-size: 1.1rem;
    flex: none;
}

/* Página 404 */
.err-code {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(6rem, 22vw, 14rem);
    line-height: .82;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: .5rem;
}


/* =============================================================================
   12. UNIFORMES PERSONALIZADOS
   ========================================================================== */
.custom-section {
    position: relative;
    overflow: hidden;
    background-color: var(--color-black);
    color: var(--color-white);
}

.custom-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.custom-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .3;
}

.custom-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(5, 8, 13, .96) 0%, rgba(6, 79, 163, .72) 55%, rgba(32, 197, 210, .4) 100%);
}

/* Los cuatro pasos del proceso */
.steps {
    display: grid;
    gap: 1rem;
    counter-reset: paso;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (min-width: 576px) {
    .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
    .steps { grid-template-columns: repeat(4, 1fr); }
}

.steps li {
    counter-increment: paso;
    position: relative;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
    border-radius: var(--radius);
    padding: 1.5rem 1.25rem 1.25rem;
    transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}

.steps li:hover {
    background: rgba(255, 255, 255, .12);
    transform: translateY(-4px);
}

.steps li::before {
    content: "0" counter(paso);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: .04em;
    background: var(--grad-cta);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: block;
    margin-bottom: .5rem;
}

.steps h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
    color: var(--color-white);
    margin-bottom: .35rem;
}

.steps p {
    font-size: .84rem;
    color: rgba(255, 255, 255, .7);
    margin: 0;
}


/* =============================================================================
   13. BENEFICIOS
   ========================================================================== */
.benefit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .benefit-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .benefit-grid { grid-template-columns: repeat(3, 1fr); }
}

.benefit-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid rgba(7, 21, 37, .07);
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem;
    height: 100%;
    overflow: hidden;
    transition: transform var(--t) var(--ease),
                box-shadow var(--t) var(--ease),
                border-color var(--t) var(--ease);
}

/* Línea de acento que aparece al pasar el cursor */
.benefit-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--grad-cta);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--t) var(--ease);
}

.benefit-card:hover {
    transform: translateY(-4px);
    border-color: rgba(8, 127, 196, .25);
    box-shadow: var(--shadow-md);
}

.benefit-card:hover::before {
    transform: scaleY(1);
}

.benefit-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(6, 79, 163, .1), rgba(32, 197, 210, .16));
    color: var(--color-primary);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.benefit-card:hover .benefit-icon {
    background: var(--grad-brand);
    color: var(--color-white);
}

.benefit-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.35;
    margin-bottom: .4rem;
    color: var(--color-ink);
}

.benefit-card p {
    font-size: .88rem;
    color: var(--color-gray);
    margin: 0;
}


/* =============================================================================
   14. NOSOTROS
   ========================================================================== */
.about-media {
    position: relative;
}

.about-img-main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: var(--shadow-lg);
}

.about-img-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-img-sub {
    position: relative;
    width: 52%;
    margin: -18% 0 0 auto;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 1;
    border: 6px solid var(--color-white);
    box-shadow: var(--shadow-lg);
}

.section-dark .about-img-sub {
    border-color: var(--color-dark);
}

.about-img-sub img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cifras destacadas */
.stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(7, 21, 37, .1);
}

.section-dark .stat-row {
    border-top-color: rgba(255, 255, 255, .12);
}

.stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1;
    letter-spacing: .02em;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: block;
}

.section-dark .stat-num {
    background: linear-gradient(135deg, #61D6D2, #20C5D2);
    -webkit-background-clip: text;
    background-clip: text;
}

.stat-label {
    font-family: 'Montserrat', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-gray);
    line-height: 1.4;
    display: block;
    margin-top: .25rem;
}

.section-dark .stat-label {
    color: rgba(255, 255, 255, .6);
}

/* Cita destacada */
.pull-quote {
    border-left: 3px solid var(--color-orange);
    padding-left: 1.25rem;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.6;
    color: var(--color-ink);
    font-weight: 500;
}

.section-dark .pull-quote {
    color: rgba(255, 255, 255, .9);
}


/* =============================================================================
   15. COMUNIDAD Y PILOTOS
   ========================================================================== */
.riders-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .riders-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .riders-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 220px;
    }
    /* Las tarjetas marcadas como destacadas ocupan dos filas */
    .rider-card.is-tall { grid-row: span 2; }
}

.rider-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-dark);
    aspect-ratio: 4 / 5;
    isolation: isolate;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

@media (min-width: 992px) {
    .rider-card { aspect-ratio: auto; height: 100%; }
}

.rider-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.rider-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 600ms var(--ease);
}

.rider-card:hover img { transform: scale(1.06); }

.rider-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent 32%, rgba(5, 8, 13, .9) 100%);
}

.rider-body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1rem;
    color: var(--color-white);
}

.rider-disc {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-white);
    background: rgba(255, 90, 36, .9);
    padding: .22rem .5rem;
    border-radius: 4px;
    margin-bottom: .5rem;
}

.rider-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: .04em;
    line-height: 1.1;
    color: var(--color-white);
    display: block;
}

.rider-city {
    font-size: .74rem;
    color: rgba(255, 255, 255, .68);
    display: flex;
    align-items: center;
    gap: .3rem;
}


/* =============================================================================
   16. TESTIMONIOS
   ========================================================================== */
.testi-card {
    background: var(--color-white);
    border: 1px solid rgba(7, 21, 37, .07);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.testi-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.testi-stars {
    color: #FFB020;
    font-size: .95rem;
    letter-spacing: .12em;
    margin-bottom: .85rem;
}

.testi-text {
    font-size: .95rem;
    line-height: 1.7;
    color: #33465C;
    flex: 1 1 auto;
    margin-bottom: 1.25rem;
}

.testi-person {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(7, 21, 37, .07);
}

.testi-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: var(--color-light);
}

/* Avatar de respaldo cuando el testimonio no lleva fotografía */
.testi-inicial {
    background: var(--grad-brand);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.35rem;
    letter-spacing: .04em;
    padding-top: 3px;
}

.testi-name {
    font-family: 'Montserrat', sans-serif;
    font-size: .88rem;
    font-weight: 700;
    color: var(--color-ink);
    display: block;
    line-height: 1.3;
}

.testi-meta {
    font-size: .74rem;
    color: var(--color-gray);
    display: block;
}

/* Aviso de contenido de demostración */
.demo-note {
    font-size: .74rem;
    color: var(--color-gray);
    text-align: center;
    margin-top: 1.5rem;
    font-style: italic;
}


/* =============================================================================
   17. INSTAGRAM
   ========================================================================== */
.ig-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
}

@media (min-width: 576px) {
    .ig-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 992px) {
    .ig-grid { grid-template-columns: repeat(6, 1fr); }
}

.ig-item {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-dark);
}

.ig-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms var(--ease);
}

.ig-item::after {
    content: "\F437"; /* icono de Instagram de Bootstrap Icons */
    font-family: 'bootstrap-icons';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    color: var(--color-white);
    background: linear-gradient(135deg, rgba(6, 79, 163, .82), rgba(32, 197, 210, .72));
    opacity: 0;
    transition: opacity var(--t) var(--ease);
}

.ig-item:hover img,
.ig-item:focus-visible img {
    transform: scale(1.08);
}

.ig-item:hover::after,
.ig-item:focus-visible::after {
    opacity: 1;
}


/* =============================================================================
   18. PREGUNTAS FRECUENTES
   ========================================================================== */
.faq-accordion .accordion-item {
    background: var(--color-white);
    border: 1px solid rgba(7, 21, 37, .08);
    border-radius: var(--radius) !important;
    margin-bottom: .75rem;
    overflow: hidden;
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: rgba(8, 127, 196, .32);
    box-shadow: var(--shadow-md);
}

.faq-accordion .accordion-button {
    font-family: 'Montserrat', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-ink);
    background: transparent;
    padding: 1.1rem 1.25rem;
    /* Altura táctil cómoda */
    min-height: 56px;
    box-shadow: none;
    line-height: 1.45;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--color-primary);
    background: rgba(8, 127, 196, .05);
}

.faq-accordion .accordion-button:focus {
    box-shadow: none;
}

.faq-accordion .accordion-button::after {
    background-image: none;
    content: "\f282"; /* bi-chevron-down */
    font-family: 'bootstrap-icons';
    font-size: 1.1rem;
    line-height: 1;
    color: var(--color-primary-light);
    width: auto;
    height: auto;
    transition: transform var(--t) var(--ease);
}

/* Al abrir cambia el icono (flecha abajo → flecha arriba) y también el color.
   Se cambia el icono en lugar de rotarlo porque así el estado se distingue
   aunque el usuario tenga desactivadas las animaciones. */
.faq-accordion .accordion-item .accordion-button:not(.collapsed)::after {
    content: "\f286"; /* bi-chevron-up */
    color: var(--color-orange);
}

.faq-accordion .accordion-body {
    padding: 0 1.25rem 1.25rem;
    font-size: .92rem;
    line-height: 1.75;
    color: #45586E;
}


/* =============================================================================
   19. CONTACTO Y FORMULARIO
   ========================================================================== */
.contact-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-white);
    border: 1px solid rgba(7, 21, 37, .08);
    border-radius: var(--radius);
    transition: transform var(--t) var(--ease),
                box-shadow var(--t) var(--ease),
                border-color var(--t) var(--ease);
    height: 100%;
}

a.contact-card:hover {
    transform: translateY(-3px);
    border-color: rgba(8, 127, 196, .3);
    box-shadow: var(--shadow-md);
}

.contact-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex: none;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: var(--color-white);
    background: var(--grad-brand);
}

.contact-icon.is-wa { background: linear-gradient(135deg, #25D366, #128C7E); }
.contact-icon.is-ig { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); }

.contact-label {
    font-family: 'Montserrat', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-gray);
    display: block;
    margin-bottom: .15rem;
}

.contact-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ink);
    display: block;
    line-height: 1.35;
    word-break: break-word;
}

a.contact-card:hover .contact-value {
    color: var(--color-primary-light);
}

/* --- Formulario --- */
.form-fs {
    background: var(--color-white);
    border: 1px solid rgba(7, 21, 37, .08);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 3vw, 2.25rem);
    box-shadow: var(--shadow-md);
}

.form-fs .form-label {
    font-family: 'Montserrat', sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-ink);
    margin-bottom: .4rem;
}

.form-fs .form-label .req {
    color: var(--color-red);
    margin-left: .15rem;
}

.form-fs .form-control,
.form-fs .form-select {
    /* 16px evita el zoom automático de iOS al enfocar el campo */
    font-size: 1rem;
    min-height: 48px;
    border-radius: 10px;
    border: 1.5px solid rgba(7, 21, 37, .14);
    background-color: var(--color-white);
    color: var(--color-ink);
    padding: .7rem .9rem;
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.form-fs textarea.form-control {
    min-height: 128px;
    resize: vertical;
}

.form-fs .form-control:focus,
.form-fs .form-select:focus {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 4px rgba(8, 127, 196, .15);
    outline: none;
}

.form-fs .form-control::placeholder {
    color: #9AA8B8;
}

/* Texto de ayuda permanente */
.form-fs .form-text {
    font-size: .76rem;
    color: var(--color-gray);
    margin-top: .3rem;
}

/* Estados de error */
.form-fs .form-control.is-invalid,
.form-fs .form-select.is-invalid {
    border-color: var(--color-red);
    background-image: none;
}

.form-fs .form-control.is-invalid:focus,
.form-fs .form-select.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(243, 38, 27, .14);
}

.field-error {
    display: none;
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-red);
    margin-top: .35rem;
    align-items: center;
    gap: .3rem;
}

.field-error.is-visible {
    display: flex;
}

/* Resumen de errores al inicio del formulario */
.form-summary {
    display: none;
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
    font-size: .88rem;
    border: 1px solid transparent;
}

.form-summary.is-visible { display: block; }

.form-summary.is-error {
    background: rgba(243, 38, 27, .07);
    border-color: rgba(243, 38, 27, .3);
    color: #A3160F;
}

.form-summary.is-ok {
    background: rgba(32, 197, 210, .1);
    border-color: rgba(32, 197, 210, .38);
    color: #0A6570;
}

.form-summary ul {
    margin: .5rem 0 0;
    padding-left: 1.2rem;
}

.form-summary a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}


/* =============================================================================
   20. FOOTER
   ========================================================================== */
.site-footer {
    position: relative;
    background: var(--color-black);
    color: rgba(255, 255, 255, .68);
    padding-top: clamp(3rem, 6vw, 4.5rem);
    overflow: hidden;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--grad-brand);
}

.footer-logo {
    width: 84px;
    height: 84px;
    object-fit: contain;
    margin-bottom: 1rem;
}

.footer-title {
    font-family: 'Montserrat', sans-serif;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: 1.15rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .1rem;
}

.footer-links a {
    color: rgba(255, 255, 255, .66);
    font-size: .88rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    /* 44px de alto mínimo para que se puedan tocar sin fallar */
    min-height: 44px;
    padding-block: .5rem;
    transition: color var(--t) var(--ease), transform var(--t) var(--ease);
}

.footer-links a:hover {
    color: var(--color-accent-light);
    transform: translateX(3px);
}

.footer-social {
    display: flex;
    gap: .625rem;
    margin-top: 1.15rem;
}

.footer-social a {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, .82);
    border: 1px solid rgba(255, 255, 255, .16);
    transition: all var(--t) var(--ease);
}

.footer-social a:hover {
    background: var(--grad-brand);
    border-color: transparent;
    color: var(--color-white);
    transform: translateY(-3px);
}

.footer-bottom {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-block: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: .8rem;
    color: rgba(255, 255, 255, .5);
}

.footer-bottom a {
    color: rgba(255, 255, 255, .66);
    /* Área táctil cómoda también en los enlaces legales */
    display: inline-block;
    padding-block: .65rem;
}

.footer-bottom a:hover {
    color: var(--color-accent-light);
}

.footer-note {
    font-size: .76rem;
    color: rgba(255, 255, 255, .42);
    line-height: 1.6;
    margin-top: .5rem;
}


/* =============================================================================
   21. BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */
.wa-float {
    position: fixed;
    z-index: var(--z-float);
    right: 1rem;
    /* Respeta el área segura de los iPhone con barra de gestos */
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    background: #25D366;
    color: #05240F;
    border-radius: 100px;
    padding: .875rem;
    min-height: 56px;
    min-width: 56px;
    box-shadow: 0 14px 34px -10px rgba(37, 211, 102, .7);
    font-family: 'Montserrat', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}

.wa-float i {
    font-size: 1.6rem;
    line-height: 1;
    flex: none;
}

/* El texto solo aparece cuando hay espacio */
.wa-float span {
    display: none;
    padding-right: .35rem;
}

@media (min-width: 992px) {
    .wa-float {
        right: 1.5rem;
        bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
        padding: .875rem 1.35rem .875rem 1.1rem;
    }
    .wa-float span { display: inline; }
}

.wa-float:hover,
.wa-float:focus-visible {
    background: #1FBA59;
    color: #05240F;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 20px 42px -10px rgba(37, 211, 102, .85);
}

/* Pulso discreto para llamar la atención sin molestar */
.wa-float::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #25D366;
    z-index: -1;
    animation: fs-pulse 2.8s var(--ease) infinite;
}

@keyframes fs-pulse {
    0%   { transform: scale(1);    opacity: .55; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}


/* =============================================================================
   22. ANIMACIONES DE APARICIÓN
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);
    /* Evita repintados costosos durante el desplazamiento */
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Aparición escalonada dentro de una cuadrícula */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

.reveal-stagger.is-visible > * {
    opacity: 1;
    transform: none;
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 300ms; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 420ms; }


/* =============================================================================
   23. ACCESIBILIDAD Y PREFERENCIAS DEL USUARIO
   ========================================================================== */

/* Foco visible y consistente en todo el sitio */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.section-dark :where(a, button):focus-visible,
.hero :where(a, button):focus-visible,
.site-header :where(a, button):focus-visible {
    outline-color: var(--color-accent-light);
}

/* Enlace "saltar al contenido" para navegación con teclado */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 2000;
    background: var(--color-orange);
    color: var(--color-white);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .85rem;
    padding: .75rem 1.25rem;
    border-radius: 0 0 10px 10px;
    transition: top 150ms var(--ease);
}

.skip-link:focus {
    top: 0;
    color: var(--color-white);
}

/* Texto visible solo para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Si el usuario pidió reducir el movimiento, se desactiva todo */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal,
    .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }

    .wa-float::before {
        display: none;
    }
}

/* Modo de alto contraste del sistema */
@media (forced-colors: active) {
    .btn,
    .filter-btn,
    .size-option {
        border: 1px solid ButtonText;
    }
}


/* =============================================================================
   24. AJUSTES RESPONSIVE FINALES
   ========================================================================== */

/* Teléfonos muy pequeños (320px – 380px) */
@media (max-width: 380px) {
    .container,
    .container-fluid {
        padding-inline: 1rem;
    }

    .hero h1 {
        font-size: 2.65rem;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .btn {
        font-size: .8rem;
        padding: .7rem 1.1rem;
    }

    .hero-card {
        padding: .9rem 1rem;
        gap: .7rem;
    }

    .hero-card .hc-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .prod-body {
        padding: .9rem .9rem 1rem;
    }

    .site-logo {
        width: 48px;
        height: 48px;
    }
}

/* Los bordes diagonales se suavizan en pantallas pequeñas */
@media (max-width: 767.98px) {
    .edge-top,
    .edge-bottom,
    .edge-both {
        clip-path: none;
        margin-top: 0;
        padding-block: clamp(3.5rem, 8vw, 7rem);
    }
}

/* Ninguna imagen debe deformarse nunca */
img,
video {
    max-width: 100%;
}

/* Tablas anchas: se deslizan dentro de su contenedor, no en la página */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Orientación horizontal en teléfonos: el hero no debe quedar cortado */
@media (max-height: 520px) and (orientation: landscape) {
    .hero {
        height: auto;
        min-height: 0;
        padding-top: calc(var(--header-total) + 1.5rem);
        padding-bottom: 3rem;
    }

    .hero-scroll { display: none; }
}