/* Tipografía y estilos base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: #f5f7fb; /* Fondo claro */
    color: #222;
    line-height: 1.5;
}

/* CABECERA / NAVBAR */
.site-header {
    position: absolute;      /* antes estaba sticky */
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    padding: 1rem 2.5rem;
    background: transparent; /* sin fondo sólido */
    border-bottom: none;
    z-index: 3;              /* por encima del carrusel */
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    height: 60px;
    width: auto;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
}

/* Menú principal */
.main-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.main-nav a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.95rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.main-nav a:hover {
    color: #ff3333;
    border-bottom-color: #ff3333;
}

.main-nav a.active {
    color: #ff3333;
    border-bottom-color: #ff3333;
}

/* Posicionar li para el dropdown */
.main-nav li {
    position: relative;
}

/* Caja del dropdown de "Negocios" */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.75rem;
    min-width: 220px;
    padding: 1rem 1.25rem;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    z-index: 999;
}

/* Mostrar al pasar el ratón por "Negocios" */
.has-dropdown:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Título del dropdown */
.nav-dropdown-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #111827;
}

/* Enlaces dentro del dropdown (override de .main-nav a) */
.nav-dropdown a {
    display: block;
    padding: 0.15rem 0;
    font-size: 0.9rem;
    font-weight: 400;
    color: #374151;
    text-decoration: none;
    border-bottom: none;
    text-shadow: none;
}

.nav-dropdown a:hover {
    color: #ff3333;    /* rojo oscuro para mantener la línea de diseño */
    border-bottom: none;
}

/* Dropdown específico para HARDWARE (en columnas) */
.nav-dropdown--hardware {
    display: flex;
    gap: 2rem;
    min-width: 520px;
    padding: 1.2rem 1.6rem;
}

.nav-dropdown-column {
    min-width: 0;
}

.nav-dropdown--hardware .nav-dropdown-title {
    margin-bottom: 0.5rem;
}

.nav-dropdown--hardware a {
    font-size: 0.9rem;
    padding: 0.15rem 0;
}

/* SECCIÓN HERO (CABECERA GRANDE) */
.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Contenedor del carrusel */
.hero-slider {
    position: relative;
    width: 100%;
    height: 480px;
    overflow: hidden;
}

/* Capa oscura encima de las imágenes */
.hero-slider::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45); /* ajusta el 0.45 si lo quieres más/menos oscuro */
    z-index: 1;
}

/* Cada imagen del carrusel */
.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* Imagen visible */
.hero-image.active {
    opacity: 1;
}

/* Texto encima de la imagen */
.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* centra en X e Y */
    max-width: 600px;
    width: 90%;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 2; /* por encima de las imágenes */
    text-align: center;                /* centra h1, p y botón */
}
 
.hero-text h1 {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}
 
.hero-text p {
    font-size: 1rem;
    margin-bottom: 1rem;
}
 
.hero-button {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    background-color: #ffffff;
    color: red; /* si quieres que combine con el menú */
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
 
.hero-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

/* RESPONSIVE: ajustamos la altura del carrusel en móviles */
@media (max-width: 700px) {
    .hero-slider {
        height: 300px;
    }

    .hero-text {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 90%;
    }

    .hero-text h1 {
        font-size: 1.5rem;
    }
}

/* CONTENIDO CENTRAL */
.main-content {
    min-height: 300px; /* Solo para que se vea espacio en blanco */
    padding: 3rem 2.5rem;
    background-color: #ffffff; /* Fondo claro */
}

/* SECCIÓN NUESTROS SERVICIOS */
.services-section {
    max-width: 1200px;
    margin: 0 auto;
}

.services-title {
    text-align: center;
    font-size: 2.2rem;
    color: #000000;
    margin-bottom: 2rem;
    letter-spacing: 0.08em;
    font-weight: 700;
}

/* Grid de 3x2 tarjetas */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

/* Tarjeta individual */
.service-card {
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 2rem 1.8rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
    border: 1px solid #e8eaef;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.10);
}

/* Icono de la tarjeta */
.service-icon {
    width: 60px;
    height: 60px;    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
}

.service-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* Título y texto de la tarjeta */
.service-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
    color: #ac0000;                  /* rojo oscuro */
}

.service-card p {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.6;
}

/* Responsive: 2 columnas en tablets, 1 en móvil */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .services-grid {
        grid-template-columns: 1fr;
    }

    .services-title {
        font-size: 1.8rem;
    }
}

/* === ÁGORA: selector Hostelería / Retail === */
.page-agora .main-content {
    padding-top: 2rem;
}

/* Contenedor, centrado */
.agora-segment-switch {
    display: flex;
    justify-content: center;
    margin: 0 0 1.5rem;
}

/* Pista del switch */
.agora-segment-inner {
    position: relative;
    display: inline-flex;
    width: 320px;
    background-color: #f3f4f6;
    padding: 4px;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

/* “Pastilla” que se desliza */
.agora-segment-inner::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background-color: #8b0000;
    box-shadow: 0 10px 25px rgba(139, 0, 0, 0.35);
    transform: translateX(0%);
    transition: transform 0.2s ease;
    z-index: 0;
}

/* Cuando está seleccionado Retail, movemos la pastilla a la derecha */
.agora-segment-inner.is-retail::before {
    transform: translateX(100%);
}

/* Botones encima de la pista */
.agora-segment {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: 0.55rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    transition: color 0.15s ease, transform 0.1s ease;
}

.agora-segment:hover {
    transform: translateY(-1px);
}

.agora-segment-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agora-segment-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.15s ease, opacity 0.15s ease;
}

/* Activo: texto en blanco y icono a color */
.agora-segment.active {
    color: #ffffff;
}

.agora-segment.active .agora-segment-icon img {
    filter: brightness(0) invert(1);
    opacity: 1;
}

/* Vistas (Hostelería / Retail) */
.agora-view {
    display: none;
}

.agora-view.active {
    display: block;
}

/* === RESTAURANTE: Gestión en el establecimiento === */
.rest-manage-section {
    max-width: 1100px;
    margin: 1rem auto 0;
}

.rest-eyebrow {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    font-weight: 700;
    color: #8b0000; /* rojo oscuro */
    margin-bottom: 0.4rem;
}

.rest-title {
    text-align: center;
    font-size: 2.1rem;
    margin-bottom: 0.8rem;
}

.rest-subtitle {
    max-width: 780px;
    margin: 0 auto 1.8rem;
    text-align: center;
    color: #4b5563;
    font-size: 0.95rem;
}

/* Tabs */
.rest-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.rest-tabs {
    display: inline-flex;
    background-color: #e5e7eb;
    padding: 0.35rem;
    border-radius: 999px;
}

.rest-tab {
    border: none;
    background: transparent;
    padding: 0.6rem 1.6rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease,
                box-shadow 0.15s ease, transform 0.1s ease;
}

.rest-tab:hover {
    transform: translateY(-1px);
}

.rest-tab.active {
    background-color: #ffffff;
    color: #8b0000;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}

/* Paneles */
.rest-panels {
    margin-top: 0.5rem;
}

.rest-panel {
    display: none;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
    gap: 2.5rem;
    align-items: center;
    background-color: #ffffff;
    border-radius: 24px;
    padding: 2rem 2.3rem;
    box-shadow: 0 22px 45px rgba(15, 23, 42, 0.08);
}

.rest-panel.active {
    display: grid;
}

.rest-panel-media img {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
}

.rest-panel-content > p {
    color: #4b5563;
    font-size: 0.95rem;
    margin-bottom: 1.6rem;
}

/* Features con iconos */
.rest-panel-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3rem 2rem;
}

.rest-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.rest-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background-color: #fef2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rest-feature-icon img {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
}

.rest-feature h3 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
    color: #111827;
}

.rest-feature p {
    font-size: 0.85rem;
    color: #6b7280;
}

/* Responsive */
@media (max-width: 960px) {
    .rest-panel {
        grid-template-columns: 1fr;
        padding: 1.7rem 1.5rem;
    }

    .rest-panel-media {
        order: -1; /* imagen arriba en móviles */
    }

    .rest-panel-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .rest-title {
        font-size: 1.8rem;
    }

    .rest-tabs {
        flex-wrap: wrap;
        row-gap: 0.4rem;
        justify-content: center;
    }

    .rest-tab {
        padding: 0.5rem 1.1rem;
    }
}

/* === RESTAURANTE: Tipos de establecimiento === */
.rest-types-section {
    background-color: #ff3333; /* rojo fuerte */
    margin-top: 2.5rem;

    /* truco para que el rojo ocupe TODO el ancho,
       “saltándose” el padding horizontal de .main-content */
    width: calc(100% + 5rem);      /* 2.5rem + 2.5rem */
    margin-left: -2.5rem;
    margin-right: -2.5rem;
}

.rest-types-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.rest-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.95rem;
}

/* Icono en cuadrado con borde redondeado */
.rest-type-icon {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rest-type-icon img {
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
}

/* Responsive */
@media (max-width: 900px) {
    .rest-types-inner {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 1.5rem;
    }

    .rest-type {
        flex: 0 1 120px;
    }
}

@media (max-width: 640px) {
    .rest-types-section {
        margin-top: 2rem;
        width: calc(100% + 2.5rem);
        margin-left: -1.25rem;
        margin-right: -1.25rem;
    }

    .rest-types-inner {
        padding: 2rem 1rem 2.5rem;
    }
}

/* SECCIÓN ALGUNOS DE NUESTROS CLIENTES (INFINITE SCROLL) */
.clients-section {
    max-width: 1200px;
    margin: 4rem auto 0;
}

.clients-title {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    letter-spacing: 0.08em;
    font-weight: 700;
}

/* Contenedor del marquee */
.clients-marquee {
    position: relative;
    overflow: hidden;
    padding: 1.2rem 0;
}

/* Cinta de logos que se mueve */
.clients-marquee-inner {
    display: flex;
    align-items: center;
    gap: 3rem;
    width: max-content;                 /* ancho según contenido */
    animation: clients-scroll 30s linear infinite;
}

/* Cada logo */
.client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-logo img {
    max-height: 60px;
    width: auto;
    display: block;
    transition: opacity 0.15s ease, filter 0.15s ease, transform 0.15s ease;
}

.client-logo img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-1px);
}

/* Animación infinito: desplazamos media cinta (está duplicada) */
@keyframes clients-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Degradados laterales */
.clients-marquee-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    pointer-events: none;
    z-index: 2;
}

/* Color base igual que el fondo del main (ajusta si cambiaste) */
.clients-marquee-fade--left {
    left: 0;
    background: linear-gradient(
        to right,
        #ffffff 0%,
        rgba(245, 247, 251, 0) 100%
    );
}

.clients-marquee-fade--right {
    right: 0;
    background: linear-gradient(
        to left,
        #ffffff 0%,
        rgba(245, 247, 251, 0) 100%
    );
}

/* === ACERCA DE NOSOTROS === */
.about-section {
    background-color: #f5f5f7;
    margin-top: 3rem;

    /* ocupar todo el ancho como una franja */
    width: calc(100% + 5rem);   /* 2.5rem + 2.5rem del padding horizontal del main */
    margin-left: -2.5rem;
    margin-right: -2.5rem;
    padding: 3rem 2.5rem 3.5rem;
}

.about-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 2.5rem;
}

/* Texto izquierda */
.about-title {
    font-size: 2.4rem;
    margin-bottom: 1.2rem;
}

.about-lead {
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.about-body {
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Grid de tarjetas derecha */
.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3rem;
}

.about-stat {
    background-color: #ffffff;
    border-radius: 14px;
    padding: 1.4rem 1.5rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

/* Números grandes */
.about-stat-number {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
    line-height: 1.1;
}

/* Gradiente tipo +100 / +500 */
.about-stat-number--gradient {
    background: linear-gradient(135deg, #4f46e5, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Azul sólido para 37 y <24 */
.about-stat-number--blue {
    background: linear-gradient(135deg, #ec4848, #4f46e5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  /*  color: #2563eb; */ 
}

.about-stat-label {
    font-size: 1.0rem;
    color: #4b5563;
}

/* Responsive */
@media (max-width: 960px) {
    .about-inner {
        grid-template-columns: 1fr;
    }

    .about-stats-grid {
        max-width: 480px;
    }
}

@media (max-width: 640px) {
    .about-section {
        padding: 2.5rem 1.5rem 3rem;
        width: calc(100% + 3rem);
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }

    .about-title {
        font-size: 2rem;
    }
}

/* FOOTER */
.site-footer {
    background-color: #111827;
    color: #e5e7eb;
    padding: 2.5rem 2.5rem 1.5rem;
    margin-top: 2rem;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.footer-column h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.footer-column p {
    font-size: 0.9rem;
    color: #cbd5f5;
}

.footer-column ul {
    list-style: none;
}

.footer-column li {
    margin-bottom: 0.35rem;
}

.footer-column a {
    color: #e5e7eb;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-column a:hover {
    text-decoration: underline;
}

/* Parte inferior del footer */
.footer-bottom {
    border-top: 1px solid #374151;
    padding-top: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: #9ca3af;
}

/* Iconos redes sociales en el footer */
.social-icons {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.social-icons img {
    width: 22px;   /* tamaño pequeño */
    height: 22px;
    display: block;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.social-icons a:hover img {
    transform: translateY(-1px) scale(1.05);
    opacity: 0.85;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .site-header {
        flex-direction: column;        /* logo arriba, menú debajo */
        align-items: center;           /* centrado horizontal */
        justify-content: center;       /* centrado vertical dentro de la barra */
        gap: 1rem;                     /* separación entre logo y menú */
        padding: 0.75rem 1.25rem;
    }
 
    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center;       /* enlaces centrados */
        align-items: center;
        gap: 0.9rem;                   /* separación entre enlaces */
    }

    .hero-text {
        position: absolute;
        top: 50%;                    /* centrado vertical */
        left: 10%;
        transform: translateY(-50%); /* ajusta al centro real */
        max-width: 450px;
        color: #ffffff;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
        z-index: 2;
    }

    .hero-text h1 {
        font-size: 1.5rem;
    }
}

@media (max-width: 700px) {
    .hero-image {
        height: 220px;
    }

    .main-content {
        padding: 2rem 1.25rem;
    }

    .footer-columns {
        grid-template-columns: 1fr;
    }

    .site-header {
        padding: 0.75rem 1.25rem;
    }

    .site-footer {
        padding: 2rem 1.25rem 1.25rem;
    }
}

/* ====== AUTOMATIZACIÓN INTELIGENTE ====== */

/* Fondo blanco en esta página */
body.page-automatizacion {
    background-color: #ffffff;
}

.page-automatizacion .main-content {
    background-color: #ffffff;
}

/* HERO */
/* HERO AUTOMATIZACIÓN: degradado + carrusel de fondo */
.auto-hero {
    position: relative;
    padding: 6rem 2.5rem 2.5rem;
    color: #ffffff;
    overflow: hidden;
    background-color: #033b74; /* por si no carga la imagen */
}

/* Capa con las imágenes del carrusel */
.auto-hero-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.auto-hero-slide {
    position: absolute;
    inset: 0;
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.auto-hero-slide.active {
    opacity: 1;
}

/* Degradado por encima de las imágenes (siempre visible) */
.auto-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 0% 0%, rgba(18, 126, 105, 0.55) 0, transparent 55%),
        linear-gradient(
            to right,
            #033b74 0%,
            rgba(3, 59, 116, 0.97) 28%,
            rgba(3, 59, 116, 0.6) 45%,
            rgba(7, 172, 117, 0.2) 65%,
            rgba(7, 253, 138, 0) 85%
        );
    z-index: 1;
}

/* Contenido por encima de todo lo anterior */
.auto-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.auto-hero-text {
    max-width: 520px;
}
 
.auto-hero-text {
    max-width: 520px;
}

.auto-pill {
    display: inline-block;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}

.auto-hero-text h1 {
    font-size: 2.4rem;
    margin-bottom: 0.8rem;
}

.auto-hero-lead {
    font-size: 0.98rem;
    max-width: 520px;
    margin-bottom: 1.4rem;
}

.auto-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.6rem;
}

.auto-badge {
    font-size: 0.78rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.auto-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.auto-primary-btn {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    background-color: #ffffff;
    color: #033b74;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.auto-primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.3);
}

.auto-ghost-btn {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: transparent;
    color: #ffffff;
    padding: 0.55rem 1.2rem;
    font-size: 0.9rem;
    cursor: pointer;
}
 
/* Responsive: ya tenías esto, sigue valiendo */
@media (max-width: 1024px) {
    .auto-hero-inner {
        grid-template-columns: 1fr;
    }
 
    .auto-hero-visual {
        justify-content: flex-start;
        margin-top: 1.5rem;
    }
}

/* Secciones debajo del hero */
.auto-logo-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.1rem 2.5rem 0.5rem;
}

.auto-logo-strip img {
    max-height: 150px;
    width: auto;
}

/* === AUTOMATIZACIÓN: cards de características rápidas === */
.auto-specs {
    background-color: #ffffff;
    margin-top: 0.5rem;
    padding: 1.8rem 2.5rem 2.2rem;
}

.auto-specs-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1rem;
}

/* Card individual */
.auto-spec-card {
    background-color: #ffffff;
    border-radius: 18px;
    border: 1px solid #127e69;   /* borde fino verde */
    padding: 1.4rem 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
}

.auto-spec-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auto-spec-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.auto-spec-card h3 {
    font-size: 0.9rem;
    font-weight: 700;           /* negrita */
    text-align: center;
    color: #111827;
}

/* Responsive */
@media (max-width: 1200px) {
    .auto-specs-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .auto-specs {
        padding: 1.6rem 1.5rem 2rem;
    }

    .auto-specs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .auto-specs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.auto-benefits,
.auto-flow {
    max-width: 1100px;
    margin: 1rem auto 0;
}

.auto-benefits h2,
.auto-flow h2 {
    font-size: 1.8rem;
    text-align: left;
    margin-bottom: 0.5rem;
}

.auto-section-subtitle {
    color: #4b5563;
    font-size: 0.95rem;
    max-width: 620px;
    margin-bottom: 1.8rem;
}

/* Tarjetas de beneficios */
.auto-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.6rem;
}

.auto-benefit-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.4rem 1.3rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
}

.auto-benefit-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: #e0f2f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
}

.auto-benefit-icon img {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
}

.auto-benefit-card h3 {
    font-size: 1rem;
    margin-bottom: 0.4rem;
    color: #033b74;
}

.auto-benefit-card p {
    font-size: 0.9rem;
    color: #4b5563;
}

/* Flujo / pasos */
.auto-flow-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.4rem;
    margin-top: 1.4rem;
}

.auto-step {
    background: #f9fafb;
    border-radius: 14px;
    padding: 1.2rem 1.1rem 1.1rem;
    border: 1px solid #e5e7eb;
}

.auto-step-badge {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, #033b74, #127e69);
    color: #ffffff;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.6rem;
}

.auto-step h3 {
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
    color: #111827;
}

.auto-step p {
    font-size: 0.85rem;
    color: #6b7280;
}

/* Responsive */
@media (max-width: 1024px) {
    .auto-hero-inner {
        grid-template-columns: 1fr;
    }

    .auto-hero-visual {
        justify-content: flex-start;
    }

    .auto-benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .auto-flow-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .auto-hero {
        padding: 5rem 1.5rem 3.3rem;
    }

    .auto-hero-text h1 {
        font-size: 2rem;
    }

    .auto-benefits,
    .auto-flow {
        margin-top: 2.5rem;
    }

    .auto-benefits-grid,
    .auto-flow-steps {
        grid-template-columns: 1fr;
    }
}

/* === AUTOMATIZACIÓN: Casos de uso (Retail / Restaurante / ...) === */
.auto-usecases {
    max-width: 1100px;
    margin: 3rem auto 0;
}

/* Tira de pestañas */
.auto-use-tabs-wrapper {
    max-width: 1100px;          /* mismo ancho que los paneles */
    margin: 0 auto 1.75rem;
    padding: 0 0.25rem;
}
 
.auto-use-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background-color: #f5f7fb;  /* banda gris clara como en el ejemplo */
    border-radius: 24px;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}
 
/* Cada botón */
.auto-use-tab {
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;     /* icono arriba, texto debajo */
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.7rem 0.4rem;
    border-radius: 18px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #111827;
    font-weight: 500;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease;
}
 
.auto-use-tab:hover {
    transform: translateY(-1px);
}
 
/* Icono dentro del botón */
.auto-use-tab-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.auto-use-tab-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: filter 0.15s ease, opacity 0.15s ease;
}
 
/* Inactivas: icono grisecito */
.auto-use-tab:not(.active) .auto-use-tab-icon img {
    filter: grayscale(100%);
    opacity: 0.55;
}
 
/* Activa: “pastilla” blanca, icono y texto en verde */
.auto-use-tab.active {
    background-color: #ffffff;
    color: #127e69;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}
 
/* Responsive: que respiren mejor en pantallas pequeñas */
@media (max-width: 900px) {
    .auto-use-tabs {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        row-gap: 0.5rem;
    }
}

/* (El icono será de su color original; si tus SVG ya son verdes, queda perfecto) */

/* Paneles con imagen y card */
.auto-use-panels {
    margin-top: 0.5rem;
}

.auto-use-panel {
    position: relative;
    display: none;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 22px 45px rgba(15, 23, 42, 0.16);
}

.auto-use-panel.active {
    display: block;
}

.auto-use-panel-image img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* Card blanca encima de la imagen */
.auto-use-card {
    position: absolute;
    top: 10%;
    left: 6%;
    max-width: 460px;
    background-color: #ffffff;
    border-radius: 24px;
    padding: 1.8rem 2rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
    color: #111827;
}

/* Para los paneles en los que el card va a la derecha */
.auto-use-panel--right .auto-use-card {
    right: 6%;
    left: auto;
}

.auto-use-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
}

.auto-use-card > p {
    font-size: 0.95rem;
    color: #4b5563;
    margin-bottom: 1rem;
}

/* Lista en dos columnas con “flechas” verdes */
.auto-use-list ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1.2rem;
    font-size: 0.9rem;
    color: #4b5563;
    padding: 0;
    margin: 0;
}

.auto-use-list li {
    position: relative;
    padding-left: 1.1rem;
}

.auto-use-list li::before {
    content: "➤";
    position: absolute;
    left: 0;
    top: 0.06rem;
    font-size: 0.75rem;
    color: #127e69;
}

/* Responsive */
@media (max-width: 1024px) {
    .auto-use-card {
        top: 8%;
        left: 6%;
        right: auto;
        max-width: 420px;
    }

    .auto-use-panel--right .auto-use-card {
        right: 6%;
    }
}

@media (max-width: 800px) {
    .auto-usecases {
        margin-top: 2.5rem;
    }

    .auto-use-card {
        top: 7%;
        left: 6%;
        right: 6%;
        max-width: none;
    }

    .auto-use-list ul {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .auto-use-card {
        top: 6%;
        padding: 1.4rem 1.3rem;
    }
}

/* ===== HERO HIOPOS 156 (HARDWARE) ===== */
.hero-hardware {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
}

.hero-hardware-image {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(0.6);
    z-index: 0;
}

/* Texto centrado por encima de la imagen */
.hero-hardware-text {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1.5rem;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.hero-hardware-tag {
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: #ef4444; /* rojo para la palabra HARDWARE */
    margin-bottom: 0.4rem;
}

.hero-hardware h1 {
    font-size: 2.4rem;
    margin-bottom: 0.4rem;
}

.hero-hardware-subtitle {
    font-size: 1rem;
    color: #e5e7eb;
}

/* Responsive */
@media (max-width: 700px) {
    .hero-hardware {
        height: 300px;
    }

    .hero-hardware h1 {
        font-size: 2rem;
    }

    .hero-hardware-subtitle {
        font-size: 0.95rem;
    }
}

/* ===== HIOPOS 156: Altas prestaciones ===== */
.page-hiopos156 .main-content {
    padding-top: 2.5rem;
}

/* Banda gris de fondo que ocupa todo el ancho */
.hw-specs {
    background-color: #f5f7fb;
    padding: 3rem 2.5rem 3.3rem;

    /* nos “saltamos” el padding horizontal de main */
    width: calc(100% + 5rem);       /* 2.5rem izquierda + 2.5rem derecha */
    margin-left: -2.5rem;
    margin-right: -2.5rem;
}

.hw-specs-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.hw-specs-title {
    font-size: 2.4rem;
    margin-bottom: 0.3rem;
}

.hw-specs-subtitle {
    font-size: 1.05rem;
    color: #4b5563;
    margin-bottom: 2.1rem;
}

/* Grid de 4 tarjetas */
.hw-specs-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

/* Card */
.hw-spec-card {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 2.2rem 1.7rem 2rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.hw-spec-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.4rem;
}

.hw-spec-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.hw-spec-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.hw-spec-card p {
    font-size: 0.95rem;
    color: #4b5563;
}

/* Responsive */
@media (max-width: 1024px) {
    .hw-specs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .hw-specs {
        padding: 2.5rem 1.5rem 3rem;
        width: calc(100% + 3rem);
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }

    .hw-specs-grid {
        grid-template-columns: 1fr;
    }

    .hw-specs-title {
        font-size: 2rem;
    }
}

/* ===== HIOPOS 156: Pantallas trabajador / cliente ===== */
.hw-screens {
    max-width: 1100px;
    margin: 3.5rem auto 4rem;
}

/* Cada fila */
.hw-screen-row {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 2.5rem;
    margin-bottom: 4rem;
}

/* Texto */
.hw-screen-text {
    max-width: 520px;
}

.hw-screen-tag {
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: #f97373; /* rojo suave tipo etiqueta */
    margin-bottom: 0.5rem;
}

.hw-screen-title {
    font-size: 2rem;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 0.2rem;
}

.hw-screen-subtitle {
    font-size: 1.4rem;
    color: #4b5563;
    margin-bottom: 0.7rem;
}

.hw-screen-body {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.7;
}

/* Imagen */
.hw-screen-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Hace que imágenes y vídeos con esta clase sean responsivos */
.img-fluid {
    max-width: 100%;
    height: auto;
    display: block;
}

/* La segunda fila invierte texto/imagen en escritorio */
.hw-screen-row--text-right {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.05fr);
}

/* Responsive */
@media (max-width: 960px) {
    .hw-screen-row,
    .hw-screen-row--text-right {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* En móvil ponemos siempre imagen arriba y texto debajo para ambas filas */
    .hw-screen-row.hw-screen-row--text-left .hw-screen-text,
    .hw-screen-row.hw-screen-row--text-right .hw-screen-text {
        order: 2;
    }

    .hw-screen-row.hw-screen-row--text-left .hw-screen-image,
    .hw-screen-row.hw-screen-row--text-right .hw-screen-image {
        order: 1;
    }

    .hw-screen-title {
        font-size: 1.7rem;
    }

    .hw-screen-subtitle {
        font-size: 1.2rem;
    }
}

/* ===== HIOPOS 156: Inclinación / Anclaje estándar ===== */
.hw-ergonomics {
    max-width: 1100px;
    margin: 1rem auto 4rem;
}

/* Cada fila */
.hw-erg-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: 2.5rem;
    margin-bottom: 4rem;
}

/* Texto */
.hw-erg-text {
    max-width: 520px;
}

.hw-erg-tag {
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: #f97373;   /* rojo suave tipo etiqueta */
    margin-bottom: 0.5rem;
}

.hw-erg-title {
    font-size: 2rem;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 0.2rem;
}

.hw-erg-subtitle {
    font-size: 1.4rem;
    color: #4b5563;
    margin-bottom: 0.7rem;
}

.hw-erg-body {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.7;
}

/* Media (vídeo / imagen) */
.hw-erg-media .img-fluid,
.hw-erg-media video.img-fluid {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Segunda fila: ponemos el texto a la derecha (imagen primero) */
.hw-erg-row--text-right {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
}

/* Responsive */
@media (max-width: 960px) {
    .hw-erg-row,
    .hw-erg-row--text-right {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* En móvil: media arriba, texto abajo en ambas filas */
    .hw-erg-row .hw-erg-media {
        order: 1;
    }

    .hw-erg-row .hw-erg-text {
        order: 2;
    }

    .hw-erg-title {
        font-size: 1.7rem;
    }

    .hw-erg-subtitle {
        font-size: 1.2rem;
    }
}

/* ===== HIOPOS 156: Características hardware ===== */
.hw-features {
    padding: 0 2.5rem 4rem;

    /* que respete el fondo blanco del body */
}

.hw-features-inner {
    max-width: 1150px;
    margin: 0 auto;
    background-color: #f9fafb;
    border-radius: 24px;
    padding: 2.4rem 2.6rem 2.6rem;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
    gap: 2.4rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.hw-features-col--intro {
    align-self: flex-start;
}

.hw-features-tag {
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: #f97373;
    margin-bottom: 0.5rem;
}

.hw-features-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 0.2rem;
}

.hw-features-subtitle {
    font-size: 1.4rem;
    color: #4b5563;
}

/* Items de características */
.hw-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.hw-feature-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hw-feature-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.hw-feature-text h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.25rem;
}

.hw-feature-text p {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px) {
    .hw-features-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        row-gap: 2rem;
    }

    .hw-features-col--intro {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .hw-feature-icon {
        width: 48px;
        height: 48px;
    }

    .hw-feature-text h4 {
        font-size: 1rem;
    }

    .hw-feature-text p {
        font-size: 0.9rem;
    }

    .hw-features {
        padding: 0 1.5rem 3rem;
    }

    .hw-features-inner {
        padding: 2.1rem 1.7rem 2.2rem;
        grid-template-columns: 1fr;
    }

    .hw-features-title {
        font-size: 2rem;
    }

    .hw-features-subtitle {
        font-size: 1.25rem;
    }
}

/* ===== HIOPOS M278: carrusel "Diseñado por HIOPOS" ===== */
.page-hioposm278 .main-content {
    padding-top: 2.5rem;
}

/* Título centrado */
.hw-gallery {
    padding: 3rem 2.5rem 4rem;
    width: calc(100% + 5rem);
    margin-left: -2.5rem;
    margin-right: -2.5rem;
    background-color: #ffffff;
}

.hw-gallery-title {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 1.8rem;
}

/* Tarjeta grande con las imágenes y las flechas */
.hw-gallery-card {
    max-width: 1150px;
    margin: 0 auto;
    background-color: #f9fafb;
    border-radius: 24px;
    padding: 1.5rem 1.8rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

/* Flechas */
.hw-gallery-arrow {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: none;
    background-color: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.3rem;
    color: #4b5563;
    transition: transform 0.1s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.hw-gallery-arrow:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2);
}

/* Ventana del carrusel */
.hw-gallery-viewport {
    overflow: hidden;
    flex: 1 1 auto;
}

/* Cinta deslizante */
.hw-gallery-track {
    display: flex;
    transition: transform 0.4s ease;
}

/* Cada imagen ocupa 1/3 del ancho visible */
.hw-gallery-item {
    flex: 0 0 calc(100% / 3);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hw-gallery-item img {
    width: 100%;
    max-width: 256px;
    object-fit: contain;
    display: block;
    border-radius: 18px;
}

/* Dots inferiores */
.hw-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.2rem;
}

.hw-gallery-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: none;
    background-color: #d1d5db;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.hw-gallery-dot.active {
    background-color: #6b7280;
    transform: scale(1.1);
}