@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');

:root {
    /* Tipografía: pedido del cliente, "tranqui y cómica" tipo Comic Sans
       pero con más peso. Comic Neue es la versión moderna de Comic Sans,
       con un peso bold real (700) en vez de solo el trazo fino original.
       Si el cliente pide probar otra, alcanza con cambiar estas 2 líneas. */
    --font-heading: 'Comic Neue', 'Comic Sans MS', sans-serif;
    --font-body: 'Comic Neue', 'Comic Sans MS', sans-serif;

    /* Paleta de Colores Divertida y Profesional */
    --color-orange: #ff740a;
    --color-orange-light: #ff8e38;
    --color-orange-dark: #cc5600;
    --color-yellow: #f1c40f;
    --color-yellow-light: #f5d75d;
    --color-green: #2ecc71;
    --color-green-light: #58d68d;
    --color-blue: #3498db;
    --color-blue-light: #5dade2;
    --color-purple: #9b59b6;
    --color-purple-light: #af7ac5;

    /* Neutros */
    --text-dark: #2c3e50;
    --text-muted: #7f8c8d;
    --text-light: #ffffff;
    --bg-light: #f4f7f6;
    --bg-white: #ffffff;

    /* Sombras y Efectos */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-circle: 50%;

    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.12);
    --shadow-hover: 0 25px 50px rgba(0, 0, 0, 0.16);
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    --glass-bg: rgba(255, 255, 255, 0.82);
    --glass-border: rgba(255, 255, 255, 0.6);
}

/* Reset de Estilos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background-color: var(--bg-light);
    background-image:
        radial-gradient(circle at 10% 20%, rgba(52, 152, 219, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(241, 196, 15, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(230, 126, 34, 0.03) 0%, transparent 50%);
    background-attachment: fixed;
    line-height: 1.6;
    overflow-x: hidden;
    /* clip (y no hidden) en html y body: recorta lo que se sale por los
       costados SIN convertir al body en una caja con scroll propio, que
       rompería el header pegajoso. Sin esto, el menú móvil escondido a la
       derecha ensanchaba la página y en el celular se veía todo achicado. */
    overflow-x: clip;
}

html {
    overflow-x: clip;
}

/* Nada se "pinta de azul": ni al arrastrar el mouse sobre textos y fotos
   (user-select) ni al tocar un botón o link en el celular (tap-highlight). */
body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

img {
    -webkit-user-drag: none;
}

/* Excepciones: lo que la gente necesita poder copiar o escribir (teléfonos,
   mail, dirección y los campos del formulario). */
input,
textarea,
.header-whatsapp__text strong,
.footer-contact-details {
    -webkit-user-select: text;
    user-select: text;
}

/* Tipografías y Títulos */
h1,
h2,
h3,
h4,
h5,
h6,
.brand-logo {
    font-family: var(--font-heading);
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

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

button {
    font-family: var(--font-body);
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
    transition: var(--transition-smooth);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Animaciones */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes bounceSoft {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}

@keyframes spinSlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Header */
header {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s ease;
}

header.scrolled {
    box-shadow: var(--shadow-md);
}

@media (min-width: 769px) {

    .header-top,
    .header-middle {
        transition: max-height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
            padding 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
            opacity 0.2s ease,
            border-bottom-color 0.3s ease;
        max-height: 150px;
        overflow: hidden;
    }

    header.scrolled .header-top {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        border-bottom-color: transparent;
        pointer-events: none;
    }

    header.scrolled .header-middle {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        pointer-events: none;
    }
}

/* Top Utility Bar */
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.85rem;
}

.location-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--color-orange);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.social-links {
    display: flex;
    gap: 12px;
    align-items: center;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    background-color: rgba(0, 0, 0, 0.04);
    font-size: 0.9rem;
}

/* Colores originales del logo de Instagram (degradado amarillo, naranja,
   rosa y violeta). Se usa en el ícono del encabezado y en el del pie. */
.social-link.instagram,
.ig-badge {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    color: #fff;
}

.social-link.instagram:hover {
    color: #fff;
    filter: brightness(1.08);
}

/* Bloque de Instagram en el pie: ícono grande + cuenta, todo clickeable */
.footer-instagram {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding: 8px 20px 8px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: var(--transition-smooth);
}

.footer-instagram:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.ig-badge {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    box-shadow: 0 6px 16px rgba(214, 36, 159, 0.35);
    flex-shrink: 0;
}

.footer-instagram__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.footer-instagram__text small {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.footer-instagram__text strong {
    font-size: 1.2rem;
    color: #fff;
}

.social-link.facebook:hover {
    background-color: #1877f2;
    color: #fff;
}

.social-link.youtube:hover {
    background-color: #ff0000;
    color: #fff;
}

.mercado-badge {
    height: 24px;
    opacity: 0.9;
    transition: var(--transition-smooth);
}

.mercado-badge:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Brand and Phone Block */
.header-middle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo-container {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--color-yellow), var(--color-orange));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    color: #fff;
    font-weight: bold;
    font-size: 1.8rem;
    box-shadow: var(--shadow-md);
    animation: bounceSoft 4s ease-in-out infinite;
}

.brand-text h2 {
    font-size: 1.6rem;
    color: var(--color-orange);
    line-height: 1.1;
    margin-bottom: 2px;
}

.brand-text p {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.phones-block {
    display: flex;
    gap: 20px;
    align-items: center;
}

.phone-item {
    text-align: right;
}

.phone-item .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    display: block;
}

.phone-item .number {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.whatsapp-button {
    background: linear-gradient(135deg, var(--color-green), var(--color-green-light));
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 16px rgba(46, 204, 113, 0.25);
}

.whatsapp-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(46, 204, 113, 0.35);
}

/* Logo completo (dibujo + nombre con los colores originales de la marca) */
.brand-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.brand-logo {
    display: block;
    height: 92px;
    width: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
}

.brand-tagline {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-left: 6px;
}

/* WhatsApp del encabezado: ícono grande y colorido + número, todo
   clickeable. Es independiente del globito flotante. */
.header-whatsapp {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 22px 8px 8px;
    border-radius: 999px;
    background: #fff;
    border: 2px solid rgba(37, 211, 102, 0.35);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.2);
    transition: var(--transition-smooth);
}

.header-whatsapp:hover {
    transform: translateY(-2px);
    border-color: #25d366;
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.32);
}

.header-whatsapp__icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5fe08f 0%, #25d366 45%, #128c7e 100%);
    color: #fff;
    font-size: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(18, 140, 126, 0.35);
    flex-shrink: 0;
}

.header-whatsapp__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.header-whatsapp__text small {
    font-size: 0.78rem;
    font-weight: 700;
    color: #128c7e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.header-whatsapp__text strong {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--text-dark);
    letter-spacing: 0.01em;
}

/* Navigation Menu */
.main-nav {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.main-nav li a {
    display: block;
    padding: 12px 10px;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: var(--text-dark);
    border-radius: var(--radius-sm);
}

.main-nav li a:hover {
    color: var(--color-orange);
    background-color: rgba(255, 116, 10, 0.06);
}

.main-nav li.active a {
    color: var(--color-orange);
    background-color: rgba(255, 116, 10, 0.08);
}

.main-nav li.contacto-link a {
    background-color: var(--color-orange);
    color: #fff;
    padding: 8px 16px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(255, 116, 10, 0.2);
}

.main-nav li.contacto-link a:hover {
    background-color: var(--color-orange-dark);
    box-shadow: 0 6px 14px rgba(255, 116, 10, 0.3);
}

/* Mobile Nav Styles */
.mobile-nav-toggle {
    display: none;
    font-size: 1.5rem;
    color: var(--text-dark);
}

/* Toggles por División */
body.show-juegos .division-publicitarios {
    display: none !important;
}
body.show-publicitarios .division-juegos {
    display: none !important;
}

/* Selector de Divisiones */
.division-selector-section {
    margin-bottom: 40px;
}

/* El botón de la línea que NO está elegida pasa a blanco y negro, para que
   se vea de un vistazo en qué línea se está navegando. Al pasar el mouse
   recupera un poco de color, para invitar a tocarlo. */
.division-card.img-only:not(.active) {
    filter: grayscale(1);
    opacity: 0.7;
}

.division-card.img-only:not(.active):hover {
    filter: grayscale(0.3);
    opacity: 1;
}

/* Título de la línea elegida, justo debajo de los botones principales */
.division-title h2 {
    font-size: 2.8rem;
    text-transform: none;
}

.division-title h2.division-publicitarios {
    color: #1f9d3a;
}

.division-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 15px;
}

@media (max-width: 768px) {
    /* En celular los dos botones van lado a lado (no uno abajo del otro),
       así el título y las opciones de la línea elegida quedan cerca. */
    .division-cards {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Con los botones chicos, la etiqueta "Activo" tapaba el dibujo; el
       blanco y negro del otro botón ya alcanza para saber cuál está elegido. */
    .division-card .active-badge {
        display: none !important;
    }
}

.division-card {
    position: relative;
    border: 4px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    display: flex;
    align-items: center;
    gap: 28px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.division-card[data-division="juegos"] {
    background-color: rgba(255, 116, 10, 0.03);
    border-color: rgba(255, 116, 10, 0.18);
}

.division-card[data-division="publicitarios"] {
    background-color: rgba(52, 152, 219, 0.03);
    border-color: rgba(52, 152, 219, 0.18);
}

/* Modificadores para cuando el card es sólo imagen */
.division-card.img-only {
    padding: 0;
    border: none;
    background: transparent !important;
    box-shadow: none;
    align-items: stretch;
    overflow: visible;
}

.division-card.img-only:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: none;
}

/* Lleva [data-division] para ganarle en especificidad a las reglas
   ".division-card.active[data-division=...]" de más abajo, que le ponían un
   resplandor (box-shadow) rectangular alrededor del botón activo. */
.division-card.img-only.active,
.division-card.img-only.active[data-division] {
    box-shadow: none;
    border: none;
    transform: scale(1.05);
}

.division-full-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: var(--radius-xl);
    transition: transform var(--transition-smooth);
}

.division-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: var(--transition-smooth);
}

.division-card.img-only::before {
    display: none;
}

.division-card .card-icon-container {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.8rem;
    flex-shrink: 0;
    transition: var(--transition-smooth);
}

.division-card[data-division="juegos"] .card-icon-container {
    background: linear-gradient(135deg, var(--color-orange), var(--color-yellow));
    box-shadow: 0 8px 20px rgba(255, 116, 10, 0.25);
}

.division-card[data-division="publicitarios"] .card-icon-container {
    background: linear-gradient(135deg, var(--color-blue), var(--color-blue-light));
    box-shadow: 0 8px 20px rgba(52, 152, 187, 0.25);
}

.division-card .card-content {
    flex: 1;
    z-index: 2;
}

.division-card .card-content h3 {
    font-size: 1.7rem;
    margin-bottom: 8px;
    color: var(--text-dark);
    transition: var(--transition-smooth);
}

.division-card .card-content p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.4;
    transition: var(--transition-smooth);
}

.division-card .active-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--color-green);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(-5px);
    transition: var(--transition-smooth);
    z-index: 2;
}

/* Hover effects */
.division-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.division-card[data-division="juegos"]:hover {
    border-color: var(--color-orange);
    background-color: rgba(255, 116, 10, 0.06);
}

.division-card[data-division="publicitarios"]:hover {
    border-color: var(--color-blue);
    background-color: rgba(52, 152, 219, 0.06);
}

/* Selected states (Active) */
.division-card.active {
    box-shadow: var(--shadow-lg);
    border-color: #fff;
}

.division-card.active::before {
    opacity: 1;
}

/* Juegos Active Gradient */
.division-card.active[data-division="juegos"] {
    background: linear-gradient(135deg, var(--color-orange), var(--color-yellow));
    box-shadow: 0 15px 35px rgba(255, 116, 10, 0.3);
}

.division-card.active[data-division="juegos"] .card-icon-container {
    background: #fff;
    color: var(--color-orange);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Publicitarios Active Gradient */
.division-card.active[data-division="publicitarios"] {
    background: linear-gradient(135deg, var(--color-blue), #1abc9c);
    box-shadow: 0 15px 35px rgba(52, 152, 219, 0.3);
}

.division-card.active[data-division="publicitarios"] .card-icon-container {
    background: #fff;
    color: var(--color-blue);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Common text coloring for active cards */
.division-card.active .card-content h3 {
    color: #fff;
}

.division-card.active .card-content p {
    color: rgba(255, 255, 255, 0.95);
}

.division-card.active .active-badge {
    opacity: 1;
    transform: translateY(0);
    background-color: #fff;
    color: var(--color-green);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Fallback colors for Publicitarios slider. Va background-image y no el
   atajo background: el atajo también pisa background-size y
   background-position, y la foto del slide dejaba de estirarse (cover) y
   se repetía en mosaico. */
#heroSliderPublicitarios .slide-item:nth-child(1) {
    background-image: linear-gradient(135deg, #2c3e50, #2980b9);
}

#heroSliderPublicitarios .slide-item:nth-child(2) {
    background-image: linear-gradient(135deg, #34495e, #1abc9c);
}

#heroSliderPublicitarios .slide-item:nth-child(3) {
    background-image: linear-gradient(135deg, #16a085, #2980b9);
}

/* Main Layout */
main {
    padding: 40px 0;
}

/* Sección Títulos */
.section-title {
    text-align: center;
    margin-bottom: 36px;
    position: relative;
}

.section-title h2 {
    font-size: 2.2rem;
    color: var(--color-orange);
    text-transform: capitalize;
    margin-bottom: 8px;
    display: inline-block;
}

.section-title .divider {
    height: 4px;
    width: 60px;
    background: linear-gradient(90deg, var(--color-yellow), var(--color-orange));
    margin: 0 auto 16px;
    border-radius: 2px;
}

.section-title p {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Hero Carousel */
.hero-slider {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    height: 420px;
    margin-bottom: 48px;
    box-shadow: var(--shadow-lg);
    border: 4px solid #fff;
}

.slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.slide-item {
    min-width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    /* Más padding a la izquierda que a la derecha: la flechita "prev"
       vive en ese borde y si no le dejamos aire tapa el texto. */
    padding: 0 60px 0 100px;
    background-size: cover;
    background-position: center;
    color: #fff;
}

/* Fallback colors for slides when images are missing */
.slide-item:nth-child(1) {
    background-image: linear-gradient(135deg, #2980b9, #2ecc71);
}

.slide-item:nth-child(2) {
    background-image: linear-gradient(135deg, #e67e22, #f1c40f);
}

.slide-item:nth-child(3) {
    background-image: linear-gradient(135deg, #c0392b, #8e44ad);
}

.slide-item:nth-child(4) {
    background-image: linear-gradient(135deg, #1abc9c, #3498db);
}

.slide-item:nth-child(5) {
    background-image: linear-gradient(135deg, #e74c3c, #f39c12);
}

.slide-item:nth-child(6) {
    background-image: linear-gradient(135deg, #2c3e50, #16a085);
}

.slide-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
    z-index: 1;
}

.slide-content {
    position: relative;
    z-index: 2;
    max-width: 550px;
}

/* Slides con foto real: la foto va ENTERA y derecha (sin recortar ni
   inclinar) a la derecha, que es lo que más tiene que destacar, y de fondo
   la misma foto agrandada y desenfocada para rellenar el banner. Así
   funciona igual con fotos verticales y apaisadas. */
.slide-item.has-photo {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 28px;
    /* Más aire abajo: ahí van los puntitos y no tienen que pisar la foto */
    padding: 18px 84px 44px 100px;
    background-image: none;
    background-color: #111;
    overflow: hidden;
}

.slide-blur {
    position: absolute;
    inset: -40px;
    background-size: cover;
    background-position: center;
    filter: blur(26px) brightness(0.8) saturate(1.2);
    z-index: 0;
}

.slide-item.has-photo::before {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 45%, transparent 70%);
}

.slide-item.has-photo .slide-content {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}

.slide-photo {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-photo img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--radius-lg);
    border: 4px solid #fff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}

.slide-badge {
    background-color: var(--color-orange);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: inline-block;
    margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.slide-content h3 {
    font-size: 2.8rem;
    line-height: 1.1;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.slide-content p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 24px;
    font-weight: 300;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.slide-btn {
    background-color: #fff;
    color: var(--color-orange);
    padding: 12px 28px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-block;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.slide-btn:hover {
    background-color: var(--color-orange);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 116, 10, 0.3);
}

/* Cinta infinita de fotos de trabajos: una foto pegada a la otra, como
   cinta transportadora. Ocupa todo el ancho de la pantalla. */
.cinta-section {
    padding: 20px 0 60px;
}

.cinta {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
}

.cinta-track {
    display: flex;
    width: max-content;
    height: 230px;
}

.cinta-track.andando {
    animation: cinta-correr 240s linear infinite;
}

/* Se frena al apoyar el mouse, para poder mirar o hacer clic */
.cinta:hover .cinta-track {
    animation-play-state: paused;
}

.cinta-item {
    height: 100%;
    flex-shrink: 0;
    display: block;
    overflow: hidden;
}

.cinta-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.cinta-item:hover img {
    transform: scale(1.06);
}

@keyframes cinta-correr {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .cinta-track { height: 160px; }
}

/* Banda "Hacemos tu idea realidad" */
.custom-idea-section {
    margin-top: 32px;
    margin-bottom: 48px;
}

.custom-idea-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 40px 48px;
    border-radius: var(--radius-xl);
    background: linear-gradient(120deg, var(--color-purple) 0%, var(--color-orange) 50%, var(--color-yellow) 100%);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.custom-idea-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.25), transparent 35%),
        radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.2), transparent 40%);
    pointer-events: none;
}

.custom-idea-emoji {
    font-size: 4.5rem;
    flex-shrink: 0;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2));
    animation: custom-idea-bounce 2.2s ease-in-out infinite;
}

@keyframes custom-idea-bounce {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-10px) rotate(4deg); }
}

.custom-idea-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.custom-idea-content .eyebrow {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 10px;
}

.custom-idea-content h2 {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.custom-idea-content p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 560px;
}

.custom-idea-btn {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #25d366;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 16px 28px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: var(--transition-smooth);
}

.custom-idea-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

@media (max-width: 900px) {
    .custom-idea-card {
        flex-direction: column;
        text-align: center;
        padding: 36px 28px;
    }

    .custom-idea-content p {
        max-width: none;
    }
}

/* Slider Controls */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: var(--radius-circle);
    background-color: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    backdrop-filter: blur(4px);
}

.slider-arrow:hover {
    background-color: #fff;
    color: var(--color-orange);
    transform: translateY(-50%) scale(1.05);
}

.slider-arrow.prev {
    left: 20px;
}

.slider-arrow.next {
    right: 20px;
}

.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-circle);
    background-color: rgba(255, 255, 255, 0.4);
    transition: var(--transition-smooth);
}

.slider-dot.active {
    width: 28px;
    border-radius: 5px;
    background-color: #fff;
}

/* Products Section */
.products-section {
    padding-bottom: 60px;
}

/* Signo "+" en cada botón de categoría: indica que adentro hay más opciones */
.arcade-button-wrapper::after {
    content: '+';
    position: absolute;
    right: 2%;
    bottom: 4%;
    width: 24%;
    height: 24%;
    min-width: 34px;
    min-height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-orange-light), var(--color-orange));
    border: 3px solid #fff;
    color: #fff;
    font-family: Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(1.4rem, 2.6vw, 2.2rem);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    z-index: 4;
    pointer-events: none;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.product-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.product-image-container {
    height: 180px;
    background-color: #f1f2f6;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Colorful gradient placeholders for product image containers */
.product-card:nth-child(1) .product-image-container {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(46, 204, 113, 0.15));
}

.product-card:nth-child(2) .product-image-container {
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.1), rgba(241, 196, 15, 0.15));
}

.product-card:nth-child(3) .product-image-container {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(231, 76, 60, 0.15));
}

.product-card:nth-child(4) .product-image-container {
    background: linear-gradient(135deg, rgba(52, 73, 94, 0.1), rgba(26, 188, 156, 0.15));
}

.product-card:nth-child(5) .product-image-container {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(231, 76, 60, 0.15));
}

.product-card:nth-child(6) .product-image-container {
    background: linear-gradient(135deg, rgba(26, 188, 156, 0.1), rgba(52, 152, 219, 0.15));
}

.product-card:nth-child(7) .product-image-container {
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.1), rgba(41, 128, 185, 0.15));
}

.product-card:nth-child(8) .product-image-container {
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.1), rgba(52, 73, 94, 0.15));
}

.product-card:nth-child(9) .product-image-container {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(241, 196, 15, 0.15));
}

.product-image-container::before {
    content: 'CI';
    font-family: var(--font-heading);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.05);
    font-size: 5rem;
    position: absolute;
}

.product-icon {
    font-size: 2.8rem;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    animation: float 3s ease-in-out infinite alternate;
}

.product-card:nth-child(even) .product-icon {
    animation-delay: 1.5s;
}

.product-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-card-body h3 {
    font-size: 1.25rem;
    margin-bottom: 8px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-card-body h3::after {
    content: '';
    height: 4px;
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 2px;
}

/* Custom coloring for category titles */
.product-card.castillos h3 {
    color: var(--color-orange);
}

.product-card.tematicos h3 {
    color: var(--color-blue);
}

.product-card.personajes h3 {
    color: var(--color-purple);
}

.product-card.toboganes h3 {
    color: var(--color-orange-dark);
}

.product-card.deportivos h3 {
    color: var(--color-green);
}

.product-card.acuaticos h3 {
    color: var(--color-blue-light);
}

.product-card.publicitarios h3 {
    color: var(--color-yellow-light);
}

.product-card.juegos-salon h3 {
    color: var(--color-purple-light);
}

.product-card.plaza-blanda h3 {
    color: var(--color-green-light);
}

.product-card-body p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 18px;
    flex-grow: 1;
}

.product-card-btn {
    background-color: var(--bg-light);
    color: var(--text-dark);
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.product-card:hover .product-card-btn {
    background-color: var(--color-orange);
    color: #fff;
    border-color: var(--color-orange);
    box-shadow: 0 4px 12px rgba(255, 116, 10, 0.2);
}

/* Offers Section */
.offers-section {
    padding: 40px 0;
    position: relative;
}

/* Fila deslizable: se ven hasta 3 ofertas a la vez. Si hay menos, se
   estiran para ocupar todo el ancho; si hay más, la fila se desliza hacia
   el costado (con el dedo, la rueda o las flechas de .offers-nav) en vez
   de apilar filas y filas hacia abajo. */
.offers-grid {
    --ofertas-visibles: 3;
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* aire para que no se corte la sombra ni el salto del hover */
    padding: 10px 6px 26px;
    margin: -10px -6px -26px;
    /* para que el "imán" del deslizado respete ese aire lateral */
    scroll-padding-inline: 6px;
}

.offers-grid::-webkit-scrollbar {
    display: none;
}

.offers-grid .offer-card {
    flex: 1 0 calc((100% - (var(--ofertas-visibles) - 1) * 28px) / var(--ofertas-visibles));
    min-width: 0;
    height: auto;
    scroll-snap-align: start;
}

/* Flechas para deslizar las ofertas; app.js las muestra solo cuando hay
   más ofertas de las que entran en pantalla. */
.offers-nav {
    display: none;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

.offers-nav.visible {
    display: flex;
}

.offers-nav button {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-circle);
    background-color: var(--color-orange);
    color: #fff;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 0 var(--color-orange-dark), 0 8px 14px rgba(255, 116, 10, 0.3);
    transition: var(--transition-smooth);
}

.offers-nav button:hover:not(:disabled) {
    transform: translateY(-2px);
}

.offers-nav button:disabled {
    opacity: 0.35;
    cursor: default;
}

.offer-card {
    background: var(--bg-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0, 0, 0, 0.03);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

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

/* Mini Carousel inside offer card */
.offer-slider {
    /* Recuadro grande y proporcional al ancho de la tarjeta */
    aspect-ratio: 4 / 3;
    position: relative;
    background-color: #e5e9f0;
    overflow: hidden;
}

.offer-slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.offer-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offer-slide::before {
    content: 'PREVIEW FOTO';
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    position: relative;
    z-index: 1;
}

/* Cuando el slide ya tiene una foto real (aunque sea de relleno
   provisorio), no hace falta el texto "PREVIEW FOTO" encima. */
.offer-slide.has-photo {
    /* La foto se muestra ENTERA, sin recortar, sobre un fondo liso claro:
       lo que sobra del recuadro queda como un margen limpio. */
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #fff;
}

.offer-slide.has-photo::before {
    display: none;
}

.offer-slider-nav {
    position: absolute;
    bottom: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}

.offer-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-circle);
    background-color: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.offer-dot.active {
    background-color: var(--color-orange);
    width: 16px;
    border-radius: 4px;
}

.offer-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: var(--radius-circle);
    background-color: rgba(255, 255, 255, 0.6);
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    z-index: 2;
    box-shadow: var(--shadow-sm);
}

.offer-arrow:hover {
    background-color: var(--color-orange);
    color: #fff;
}

.offer-arrow.prev {
    left: 10px;
}

.offer-arrow.next {
    right: 10px;
}

.offer-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.offer-body h2 {
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 12px;
    line-height: 1.2;
}

.offer-body p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    flex-grow: 1;
}

.offer-price-tag {
    background: linear-gradient(135deg, rgba(255, 116, 10, 0.05), rgba(241, 196, 15, 0.05));
    border: 1px dashed var(--color-orange);
    padding: 10px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.offer-price-tag span:first-child {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-orange-dark);
}

.offer-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-orange);
}

.offer-price sup {
    font-size: 0.9rem;
    top: -0.2em;
}

.offer-actions {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 10px;
}

.btn-offer {
    text-align: center;
    padding: 12px 10px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-offer.primary {
    background-color: var(--color-orange);
    color: #fff;
    box-shadow: 0 4px 10px rgba(255, 116, 10, 0.2);
}

.btn-offer.primary:hover {
    background-color: var(--color-orange-dark);
    box-shadow: 0 6px 14px rgba(255, 116, 10, 0.3);
}

.btn-offer.secondary {
    background-color: #fff;
    color: var(--text-dark);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.btn-offer.secondary:hover {
    background-color: var(--bg-white);
    color: var(--color-orange);
    border-color: var(--color-orange);
}

.btn-offer.whatsapp {
    background-color: #25d366;
    color: #fff;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.25);
}

.btn-offer.whatsapp:hover {
    background-color: #1ebc59;
    box-shadow: 0 6px 14px rgba(37, 211, 102, 0.35);
}

/* Videos Section */
.videos-section {
    padding: 60px 0;
}

.videos-slider-container {
    position: relative;
    margin-top: 20px;
}

.videos-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 10px 0 30px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--color-orange) rgba(0, 0, 0, 0.05);
}

.videos-slider::-webkit-scrollbar {
    height: 8px;
}

.videos-slider::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.videos-slider::-webkit-scrollbar-thumb {
    background: var(--color-orange);
    border-radius: 4px;
}

.video-slide {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.video-slide:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.video-thumbnail {
    height: 160px;
    background-color: #2c3e50;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-thumbnail::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
}

.video-play-btn {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-circle);
    background-color: var(--color-orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    position: relative;
    z-index: 2;
    box-shadow: 0 6px 14px rgba(255, 116, 10, 0.35);
}

.video-slide:hover .video-play-btn {
    transform: scale(1.1);
    background-color: var(--color-yellow);
    box-shadow: 0 6px 14px rgba(241, 196, 15, 0.4);
}

.video-title {
    padding: 16px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-dark);
    text-align: center;
}

/* Footer Section */
footer {
    background-color: #1a1a1e;
    color: #a0a0a5;
    padding: 70px 0 30px;
    font-size: 0.9rem;
    border-top: 4px solid var(--color-orange);
}

footer a {
    color: #a0a0a5;
}

footer a:hover {
    color: var(--color-orange);
}

footer .footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.8fr 1.1fr;
    gap: 40px;
    margin-bottom: 50px;
}

/* Footer Company Column */
.footer-company .logo-block {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    margin-bottom: 20px;
}

/* El logo va sobre una plaquita blanca: el recorte del PNG tiene un borde
   claro que sobre el fondo oscuro del footer se notaría. */
.footer-company .logo-container {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    background: #fff;
    padding: 5px;
}

.footer-company .logo-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-company h3 {
    font-size: 1.3rem;
    color: #fff;
}

.footer-company p {
    margin-bottom: 24px;
    font-size: 0.85rem;
}

.footer-contact-details {
    list-style: none;
}

.footer-contact-details li {
    margin-bottom: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.footer-contact-details li .icon {
    color: var(--color-orange);
    font-size: 1.1rem;
    margin-top: 2px;
}

.footer-contact-details li strong {
    color: #fff;
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* Footer Nav Column */
.footer-nav h4,
.footer-contact h4 {
    font-size: 1.1rem;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-nav h4::after,
.footer-contact h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--color-orange);
}

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

.footer-nav li {
    margin-bottom: 10px;
}

.footer-nav a {
    display: block;
    padding: 4px 0;
    font-weight: 500;
}

.footer-nav a::before {
    content: '➔';
    font-size: 0.7rem;
    margin-right: 8px;
    color: var(--color-orange);
    transition: var(--transition-smooth);
}

.footer-nav a:hover::before {
    margin-right: 12px;
}

/* Footer Contact Form Column */
.footer-contact {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 24px;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
}

.contact-form-title {
    margin-bottom: 18px;
}

.contact-form-title h4 {
    margin-bottom: 4px;
}

.contact-form-title p {
    font-size: 0.8rem;
}

.form-group {
    margin-bottom: 14px;
    position: relative;
}

.form-control {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.85rem;
    transition: var(--transition-smooth);
}

.form-control:focus {
    border-color: var(--color-orange);
    background-color: rgba(0, 0, 0, 0.4);
    outline: none;
    box-shadow: 0 0 8px rgba(255, 116, 10, 0.2);
}

textarea.form-control {
    height: 100px;
    resize: none;
}

.input-hint {
    font-size: 0.72rem;
    color: #7f8c8d;
    display: block;
    margin-top: 4px;
}

.btn-submit {
    width: 100%;
    background: linear-gradient(135deg, var(--color-orange), var(--color-orange-dark));
    color: #fff;
    padding: 12px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 10px rgba(255, 116, 10, 0.25);
}

.btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(255, 116, 10, 0.35);
}

.btn-submit:active {
    transform: translateY(0);
}

.form-result {
    padding: 10px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin-top: 10px;
    display: none;
    text-align: center;
}

.form-result.success {
    background-color: rgba(46, 204, 113, 0.15);
    color: var(--color-green-light);
    border: 1px solid rgba(46, 204, 113, 0.3);
}

.form-result.error {
    background-color: rgba(231, 76, 60, 0.15);
    color: #f1948a;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

/* Footer Bottom Bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 24px;
    text-align: center;
    font-size: 0.8rem;
}

/* Globito de WhatsApp flotante, presente en las 7 páginas del sitio. */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-circle);
    background-color: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    z-index: 900;
    animation: whatsapp-float-pulse 2.4s ease-in-out infinite;
    transition: var(--transition-smooth);
}

.whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

@keyframes whatsapp-float-pulse {
    0%, 100% { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(37, 211, 102, 0.5); }
    50% { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 0 0 10px rgba(37, 211, 102, 0); }
}

@media (max-width: 640px) {
    .whatsapp-float {
        width: 66px;
        height: 66px;
        font-size: 2.3rem;
        bottom: 16px;
        right: 16px;
    }
}

/* Lightbox Modal Styles */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 24px;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal-container {
    background-color: #fff;
    border-radius: var(--radius-lg);
    max-width: 800px;
    width: 100%;
    position: relative;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-container {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 10;
}

.modal-close:hover {
    background-color: var(--color-orange);
}

.modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-image-wrapper {
    width: 100%;
    max-height: 500px;
    background-color: #f1f2f6;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-image-wrapper img {
    max-height: 500px;
    object-fit: contain;
}

.modal-caption {
    padding-top: 16px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    text-align: center;
}

/* ==========================================================================
   CABECERA BURBUJA Y LOGO CASTILLO (ESTILO PREMIUM ARCADE/KIDS)
   ========================================================================== */
.brand-text h2 {
    font-size: 1.8rem !important;
    color: #2ecc71 !important; /* Verde brillante */
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2px;
    -webkit-text-stroke: 1.5px #ffffff;
    text-stroke: 1.5px #ffffff;
    text-shadow: 
        2px 2px 0px #1e7e43,
        -1.5px -1.5px 0px #1e7e43,
        1.5px -1.5px 0px #1e7e43,
        -1.5px 1.5px 0px #1e7e43,
        0px 4px 6px rgba(0,0,0,0.25);
    letter-spacing: 0.02em;
    display: inline-block;
}

.logo-svg-container {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
    animation: bounceSoft 4s ease-in-out infinite;
    flex-shrink: 0;
}

.logo-svg-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   SECCIÓN DE CATEGORÍAS ARCADE
   ========================================================================== */
.arcade-categories-section {
    padding: 60px 0;
    position: relative;
}

.arcade-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 600px;
    margin: 0 auto;
}

.arcade-item {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 8px;
    cursor: pointer;
}

.arcade-item:hover .arcade-button-wrapper {
    transform: translateY(-4px) scale(1.04);
}

/* Contenedor del botón 3D y su sombra del suelo */
.arcade-button-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Cuerpo del botón 3D */
.arcade-button {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: #fff;
    border: 3px solid rgba(0,0,0,0.18);
}

/* Brillo superior tipo cristal */
.arcade-glare {
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    height: 38%;
    border-radius: 50% 50% 40% 40% / 60% 60% 35% 35%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 3;
}

/* Sombras y Profundidad del Botón 3D (Estilo Plástico Arcade) */
.arcade-button.blue {
    background: radial-gradient(circle at 35% 35%, #00bcff 0%, #0070c0 70%, #005090 100%);
    box-shadow: 
        inset 0 4px 6px rgba(255, 255, 255, 0.6),
        inset 0 -4px 6px rgba(0, 0, 0, 0.4),
        0 6px 0 #004273,
        0 10px 15px rgba(0, 0, 0, 0.35);
}
.arcade-button.blue:hover {
    background: radial-gradient(circle at 35% 35%, #33c9ff 0%, #0080e0 70%, #0060b0 100%);
}

.arcade-button.green {
    background: radial-gradient(circle at 35% 35%, #58d68d 0%, #2ecc71 70%, #1e8449 100%);
    box-shadow: 
        inset 0 4px 6px rgba(255, 255, 255, 0.6),
        inset 0 -4px 6px rgba(0, 0, 0, 0.4),
        0 6px 0 #115f33,
        0 10px 15px rgba(0, 0, 0, 0.35);
}
.arcade-button.green:hover {
    background: radial-gradient(circle at 35% 35%, #72e2a1 0%, #2ecc71 70%, #229954 100%);
}

.arcade-button.dark-blue {
    background: radial-gradient(circle at 35% 35%, #3498db 0%, #2980b9 70%, #1a5276 100%);
    box-shadow: 
        inset 0 4px 6px rgba(255, 255, 255, 0.6),
        inset 0 -4px 6px rgba(0, 0, 0, 0.4),
        0 6px 0 #0e3d5c,
        0 10px 15px rgba(0, 0, 0, 0.35);
}
.arcade-button.dark-blue:hover {
    background: radial-gradient(circle at 35% 35%, #54a9eb 0%, #2980b9 70%, #1f618d 100%);
}

.arcade-button.yellow {
    background: radial-gradient(circle at 35% 35%, #f5d75d 0%, #f1c40f 70%, #d4ac0d 100%);
    box-shadow: 
        inset 0 4px 6px rgba(255, 255, 255, 0.8),
        inset 0 -4px 6px rgba(0, 0, 0, 0.4),
        0 6px 0 #856d08,
        0 10px 15px rgba(0, 0, 0, 0.35);
}
.arcade-button.yellow:hover {
    background: radial-gradient(circle at 35% 35%, #f7dc6f 0%, #f39c12 70%, #d68910 100%);
}

.arcade-button.purple {
    background: radial-gradient(circle at 35% 35%, #af7ac5 0%, #9b59b6 70%, #7d3c98 100%);
    box-shadow: 
        inset 0 4px 6px rgba(255, 255, 255, 0.6),
        inset 0 -4px 6px rgba(0, 0, 0, 0.4),
        0 6px 0 #4f2261,
        0 10px 15px rgba(0, 0, 0, 0.35);
}
.arcade-button.purple:hover {
    background: radial-gradient(circle at 35% 35%, #c39bd3 0%, #9b59b6 70%, #884ea0 100%);
}

/* Efecto de presionado del botón al hacer click */
.arcade-item:active .arcade-button {
    transform: translateY(4px);
}
.arcade-item:active .arcade-button.blue {
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.4),
        inset 0 -2px 3px rgba(0, 0, 0, 0.4),
        0 2px 0 #004273,
        0 4px 8px rgba(0, 0, 0, 0.4);
}
.arcade-item:active .arcade-button.green {
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.4),
        inset 0 -2px 3px rgba(0, 0, 0, 0.4),
        0 2px 0 #115f33,
        0 4px 8px rgba(0, 0, 0, 0.4);
}
.arcade-item:active .arcade-button.dark-blue {
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.4),
        inset 0 -2px 3px rgba(0, 0, 0, 0.4),
        0 2px 0 #0e3d5c,
        0 4px 8px rgba(0, 0, 0, 0.4);
}
.arcade-item:active .arcade-button.yellow {
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.4),
        inset 0 -2px 3px rgba(0, 0, 0, 0.4),
        0 2px 0 #856d08,
        0 4px 8px rgba(0, 0, 0, 0.4);
}
.arcade-item:active .arcade-button.purple {
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.4),
        inset 0 -2px 3px rgba(0, 0, 0, 0.4),
        0 2px 0 #4f2261,
        0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Sombra proyectada en el suelo debajo del botón */
.arcade-shadow {
    position: absolute;
    bottom: -6px;
    left: 10%;
    width: 80%;
    height: 8px;
    background: rgba(0, 0, 0, 0.16);
    filter: blur(4px);
    border-radius: 50%;
    z-index: -1;
    transition: transform 0.1s ease, opacity 0.1s ease;
}

.arcade-item:active .arcade-shadow {
    transform: scale(0.85);
    opacity: 0.6;
}

/* Iconos de las categorías */
.arcade-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
    color: #fff;
    pointer-events: none;
}

.arcade-icon svg {
    width: 100%;
    height: 100%;
}

/* Botones con imagen PNG real */
.arcade-button.img-btn {
    background: transparent;
    border: none;
    box-shadow: 
        0 6px 0 rgba(0,0,0,0.35),
        0 10px 20px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    padding: 0;
}

.arcade-button.img-btn:hover {
    filter: brightness(1.1) saturate(1.1);
}

.arcade-item:active .arcade-button.img-btn {
    box-shadow: 
        0 2px 0 rgba(0,0,0,0.35),
        0 4px 8px rgba(0, 0, 0, 0.4);
}

/* El arcade-icon dentro de img-btn ocupa todo el botón */
.arcade-button.img-btn .arcade-icon {
    width: 100%;
    height: 100%;
    padding: 0;
    filter: none;
}

.arcade-icon.img-btn-icon {
    width: 100%;
    height: 100%;
    padding: 0;
    filter: none;
}

.arcade-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

/* Botones sin foto propia todavía: círculo con degradado de color + emoji
   grande (mismo icono que usa esa categoría en el catálogo), en vez de
   pedir prestada la foto de otra categoría. */
.arcade-button.emoji-btn {
    border: 3px solid rgba(0, 0, 0, 0.12);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.35),
        inset 0 -3px 6px rgba(0, 0, 0, 0.15),
        0 6px 0 rgba(0, 0, 0, 0.2),
        0 10px 20px rgba(0, 0, 0, 0.25);
    font-size: 3.4rem;
    line-height: 1;
}

.arcade-item:active .arcade-button.emoji-btn {
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.35),
        inset 0 -3px 6px rgba(0, 0, 0, 0.15),
        0 2px 0 rgba(0, 0, 0, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.25);
}

.arcade-button.emoji-btn.purple { background: linear-gradient(135deg, var(--color-purple-light), var(--color-purple)); }
.arcade-button.emoji-btn.blue { background: linear-gradient(135deg, var(--color-blue-light), var(--color-blue)); }
.arcade-button.emoji-btn.green-light { background: linear-gradient(135deg, #a9e4c4, var(--color-green-light)); }
.arcade-button.emoji-btn.orange-dark { background: linear-gradient(135deg, var(--color-orange), var(--color-orange-dark)); }
.arcade-button.emoji-btn.blue-light { background: linear-gradient(135deg, #a9d8f0, var(--color-blue-light)); }
.arcade-button.emoji-btn.green { background: linear-gradient(135deg, var(--color-green), #1e8449); }
.arcade-button.emoji-btn.purple-light { background: linear-gradient(135deg, #d6bce0, var(--color-purple-light)); }

/* Botones con ícono ilustrado propio: el PNG ya trae dibujado el círculo,
   el relieve y la sombra, así que el botón no agrega fondo, borde ni
   sombra y la imagen se muestra entera (contain), sin recortarla. */
.arcade-button.icon-btn {
    background: transparent;
    border: none;
    border-radius: 0;
}

.arcade-button.icon-btn:hover {
    filter: brightness(1.08) saturate(1.1);
}

.arcade-button.icon-btn picture {
    display: block;
    width: 100%;
    height: 100%;
}

.arcade-button.icon-btn .arcade-img {
    object-fit: contain;
    border-radius: 0;
}

/* Textos informativos de cada botón */
.arcade-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.arcade-text h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-orange);
    line-height: 1.2;
    letter-spacing: 0.01em;
    margin: 0;
    text-transform: uppercase;
    /* Comic Neue no tiene un peso más allá de 700: el trazo extra le suma
       el "grosor" que pide, ahora que el título quedó flotando sin la
       tarjeta blanca de fondo que le daba contraste. */
    -webkit-text-stroke: 0.6px var(--color-orange);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.arcade-text p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #4a5568;
    margin: 0;
    font-weight: 500;
}

/* Adaptabilidad Responsiva para Pantallas Grandes (Escritorio) */
@media (min-width: 769px) {
    .arcade-buttons-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 36px 30px;
        max-width: 1200px;
    }

    /* 4 por fila (antes 5), para que cada botón entre bien grande */
    .arcade-item {
        flex-direction: column;
        width: calc(25% - 23px);
        min-width: 230px;
        padding: 8px;
        text-align: center;
    }

    .arcade-button-wrapper {
        width: 210px;
        height: 210px;
        margin-bottom: 6px;
    }

    .arcade-button.emoji-btn {
        font-size: 4.8rem;
    }

    .arcade-icon {
        width: 68px;
        height: 68px;
    }

    .arcade-text {
        align-items: center;
        gap: 2px;
    }

    .arcade-text h3 {
        font-size: 1.7rem;
        /* Suficiente para 3 líneas (algunos títulos, como "Juegos de Salón
           y Mecánicos", no entran en 2): antes el texto se desbordaba por
           debajo de la caja y quedaba pegado a la descripción. Alineado
           abajo (no al centro) para que los títulos cortos, que son la
           mayoría, queden pegados al texto de abajo en vez de flotar
           en el medio de esta caja. */
        min-height: 4.2rem;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .arcade-text p {
        font-size: 1.05rem;
        line-height: 1.4;
        height: 2.94rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

/* Video Modal Specific */
.video-iframe-wrapper {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.video-iframe-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

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

    .offers-grid {
        --ofertas-visibles: 2;
    }

    /* Carrusel con foto en pantallas medianas: el texto tiene menos ancho,
       así que se achica para que el botón no quede cortado abajo. */
    .slide-item.has-photo {
        padding-left: 76px;
        padding-right: 64px;
        gap: 20px;
    }

    .slide-item.has-photo .slide-content h3 {
        font-size: 2rem;
    }

    .slide-item.has-photo .slide-content p {
        font-size: 1rem;
        margin-bottom: 16px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

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

    footer .footer-contact {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    header {
        position: relative;
    }

    .header-top {
        padding: 8px 0;
    }

    .header-middle {
        padding: 12px 0;
    }

    /* Celular: logo y menú arriba; el WhatsApp abajo a lo ancho, siempre visible */
    .header-middle {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .brand-logo {
        height: 60px;
    }

    .brand-tagline {
        font-size: 0.68rem;
    }

    .header-whatsapp {
        order: 3;
        width: 100%;
        justify-content: center;
        padding: 6px 16px 6px 6px;
    }

    .header-whatsapp__icon {
        width: 46px;
        height: 46px;
        font-size: 1.7rem;
    }

    .header-whatsapp__text strong {
        font-size: 1.35rem;
    }

    .mobile-nav-toggle {
        display: block;
    }

    /* Mobile Nav Drawer */
    .main-nav {
        position: fixed;
        top: 0;
        right: -300px;
        width: 280px;
        height: 100vh;
        background-color: #fff;
        z-index: 200;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
        transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        border: none;
        padding: 60px 20px 20px;
    }

    .main-nav.active {
        right: 0;
    }

    .main-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .main-nav li a {
        padding: 14px 16px;
        font-size: 1rem;
    }

    .main-nav .main-nav-close {
        position: absolute;
        top: 12px;
        right: 14px;
        width: 44px;
        height: 44px;
        font-size: 1.8rem;
        color: var(--text-dark);
        display: block;
    }

    /* Hero Slider Mobile height */
    .hero-slider {
        height: 300px;
        border-radius: var(--radius-lg);
    }

    .slide-item {
        padding: 0 30px 0 70px;
    }

    /* En celular la foto va arriba y el texto abajo */
    .hero-slider:has(.slide-item.has-photo) {
        height: 520px;
    }

    .slide-item.has-photo {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 12px;
        padding: 14px 52px 44px;
    }

    .slide-item.has-photo::before {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.2) 55%, transparent 100%);
    }

    .slide-photo {
        grid-column: 1;
        grid-row: 1;
    }

    .slide-item.has-photo .slide-content {
        grid-column: 1;
        grid-row: 2;
    }

    .slide-item.has-photo .slide-content p {
        display: none;
    }

    .slide-content h3 {
        font-size: 1.8rem;
    }

    .slide-content p {
        font-size: 1rem;
        margin-bottom: 16px;
    }

    .slider-arrow {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    /* General sections mobile */
    main {
        padding: 24px 0;
    }

    .section-title h2 {
        font-size: 1.75rem;
    }

    .offers-grid {
        /* una entera y se asoma la siguiente, para que se note que sigue */
        --ofertas-visibles: 1.15;
    }

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

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

    footer .footer-contact {
        grid-column: span 1;
    }
}