.bitcount-single {
    font-family: "Bitcount Single", system-ui;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "CRSV" 0.5,
        "ELSH" 0,
        "ELXP" 0;
}

.imagen1 {
    width: 100%;
    min-height: 250px; /* ajusta según tu diseño */
}

/* Pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .imagen1 {
        background-image: url("../images/MerchRopa.webp");
        background-size: cover;      /* ocupa todo el recuadro */
        background-repeat: no-repeat;
        background-position: center;
    }
}

.imagen2 {
    width: 100%;
    min-height: 250px; /* ajusta según tu diseño */
}

/* Pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .imagen2 {
        background-image: url("../images/PublicidadFisica.webp");
        background-size: cover;      /* ocupa todo el recuadro */
        background-repeat: no-repeat;
        background-position: center;
    }
}

.imagen3 {
    width: 100%;
    min-height: 250px; /* ajusta según tu diseño */
}

/* Pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .imagen3 {
        background-image: url("../images/MerchOfi.webp");
        background-size: cover;      /* ocupa todo el recuadro */
        background-repeat: no-repeat;
        background-position: center;
    }
}

.imagen4 {
    width: 100%;
    min-height: 100px; /* ajusta según tu diseño */
}

.MrCow {
    width: 100%;
    max-height: 200px;            /* altura mínima */
    background-image: url("../IMAGES/MrCow.webp");
    background-size: cover;       /* ocupa todo el contenedor */
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 12px;          /* opcional, se ve pro */
}

/* Ajustes solo para pantallas pequeñas */
@media (max-width: 768px) {
    .MrCow {
        min-height: 120px;        /* un poco más bajo en móvil */
    }
}



.titulo-loco {
    font-family: "Bitcount Single", system-ui;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;

    font-size: clamp(2.2rem, 6vw, 4.5rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;

    background: linear-gradient(
        90deg,
        #ffffff,
        #e6cfff,
        #ffcfe9,
        #c2fdff
    );
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow:
        0 0 6px rgba(215, 242, 243, 0.6),
        0 0 14px rgba(124, 0, 255, 0.6),
        0 0 30px rgba(255, 0, 140, 0.5);

    animation: gradiente-move 6s linear infinite;
}

.titulo-loco:hover {
    animation:
        gradiente-move 6s linear infinite,
        glitch 0.25s steps(2) infinite;
}

@keyframes gradiente-move {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

@keyframes glitch {
    0%   { transform: translate(0); }
    25%  { transform: translate(-2px, 1px); }
    50%  { transform: translate(2px, -1px); }
    75%  { transform: translate(-1px, -2px); }
    100% { transform: translate(0); }
}

.botones-locos {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-loco {
    position: relative;
    padding: 14px 34px;
    border-radius: 14px;
    cursor: pointer;
    overflow: hidden;

    background: linear-gradient(
        135deg,
        #00f5ff,
        #7c00ff,
        #ff008c
    );
    background-size: 300%;

    animation: gradiente-move 6s linear infinite;

    box-shadow:
        0 0 10px rgba(124, 0, 255, 0.5),
        0 0 25px rgba(255, 0, 140, 0.4);

    transition: transform 0.25s ease;
}

.btn-loco a {
    position: relative;
    z-index: 2;
    text-decoration: none;

    font-family: "Bitcount Single", system-ui;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.95rem;

    color: #fff;
}

.btn-loco:hover {
    transform: translateY(-3px) scale(1.04);
    animation:
        gradiente-move 6s linear infinite,
        glitch 0.25s steps(2) infinite;
}

.info-animada {
    position: relative;
    overflow: hidden;
    border-radius: 18px;

    background: linear-gradient(
        120deg,
        #f7f7f7,
        #f1f1f1,
        #eaeaea
    );

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);
}

.info-animada::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        120deg,
        rgba(0, 245, 255, 0.15),
        rgba(124, 0, 255, 0.12),
        rgba(255, 0, 140, 0.12),
        rgba(0, 245, 255, 0.15)
    );

    background-size: 300%;
    animation: fondo-mov 14s linear infinite;

    z-index: 0;
}

.info-animada > * {
    position: relative;
    z-index: 1;
}
@keyframes fondo-mov {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}
.info-animada::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(
        circle,
        rgba(124, 0, 255, 0.12),
        transparent 70%
    );
    animation: pulso 8s ease-in-out infinite;
}

@keyframes pulso {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}

.info-pintura::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 160px;

    background-image: url("../IMAGES/pintura-top.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;

    opacity: 0.85;
    z-index: 2;

    animation: pintura-goteo 10s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pintura-goteo {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(12px);
    }
}

@keyframes pintura-goteo {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(8px); }
    60%  { transform: translateY(14px); }
    100% { transform: translateY(0); }
}


.info-box {
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
    border-radius: 14px;
    padding-top: 90px; /* espacio para la pintura */
}

/* pintura decorativa */
.info-box.pintura::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-image: url("../images/pintura.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    z-index: 2;
    pointer-events: none;
}

/* contenido */
.texto-box,
.info-box h1 {
    position: relative;
    z-index: 3;
}

.texto-box ul,
.texto-box p {
    color: #2b2b2b;
}
/* Ajustes solo para pantallas pequeñas */
@media (max-width: 768px) {
    .info-box.pintura::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-image: url("../images/pintura2.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    z-index: 2;
    pointer-events: none;
}
}

.info-box {
    position: relative;
    overflow: hidden;
}

/* decoración */
.decoracion-esquina {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 560px;
    height: 560px;
    background-image: url("../images/pintura3.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
    opacity: 0.95;
}

/* SOLO el contenido */
.info-box h1,
.info-box .texto-box {
    position: relative;
    z-index: 2;
}
.info-box h1 {
    margin-top: 0;
}


@media (max-width: 768px) {
    .decoracion-esquina {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 360px;
    height: 360px;
    background-image: url("../images/pintura3.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
    opacity: 0.95;
}
}