/* Variables de color: ver bloque :root único más abajo,
   bajo "REDISEÑO CÍRCULO - ETAPA 1" (línea ~1417). */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--circulo-texto);
    background: var(--circulo-fondo);
    font-family: "Segoe UI", Arial, sans-serif;
}

body.sin-scroll {
    overflow: hidden;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

.encabezado {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 30px;
    min-height: 76px;
    padding: 0 6%;
    border-bottom: 1px solid var(--circulo-borde);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
}

.marca-tienda {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 900;
}

.icono-marca {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 11px;
    color: white;
    background: linear-gradient(135deg, #8d65ff, #572bd4);
    font-size: 20px;
}

.menu-principal {
    display: flex;
    gap: 24px;
    margin-right: auto;
    color: #4f5870;
    font-size: 14px;
    font-weight: 700;
}

.menu-principal a:hover {
    color: var(--circulo-morado);
}

.acciones-encabezado {
    display: flex;
    align-items: center;
    gap: 10px;
}

.buscador {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(260px, 26vw);
    padding: 9px 12px;
    border: 1px solid #dfe3ee;
    border-radius: 9px;
    color: var(--circulo-texto-suave);
    background: white;
}

.buscador input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--circulo-texto);
}

.btn-carrito {
    position: relative;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: #332364;
    background: #f1edff;
    font-size: 20px;
}

.contador-carrito {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    min-width: 19px;
    height: 19px;
    place-items: center;
    padding: 0 5px;
    border-radius: 20px;
    color: white;
    background: var(--circulo-morado);
    font-size: 11px;
    font-weight: 900;
}

.contenedor {
    width: min(1320px, 88%);
    margin: auto;
}

.hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 360px;
    gap: 30px;
    margin: 32px 0 48px;
    padding: 50px 9%;
    overflow: hidden;
    border-radius: 22px;
    color: white;
    background:
        radial-gradient(circle at 85% 10%, rgba(255, 255, 255, .25), transparent 24%),
        linear-gradient(115deg, #5227ca, #824ef0 58%, #b682ff);
}

.hero::after {
    position: absolute;
    right: -70px;
    bottom: -100px;
    width: 330px;
    height: 330px;
    border: 55px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    content: "";
}

.hero-contenido {
    position: relative;
    z-index: 1;
}

.hero-etiqueta {
    margin: 0 0 11px;
    font-size: 14px;
    font-weight: 700;
    opacity: .9;
}

.hero h1 {
    max-width: 510px;
    margin: 0;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.08;
}

.hero-descripcion {
    max-width: 440px;
    margin: 16px 0 25px;
    font-size: 16px;
    line-height: 1.6;
    opacity: .92;
}

.btn-hero,
.btn-agregar,
.btn-checkout,
.btn-whatsapp {
    border: 0;
    border-radius: 9px;
    font-weight: 900;
}

.btn-hero {
    display: inline-block;
    padding: 13px 23px;
    color: #312063;
    background: white;
}

.btn-hero:hover {
    transform: translateY(-2px);
}

.hero-productos {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: end;
    justify-content: center;
    min-height: 230px;
    gap: 14px;
}

.hero-producto {
    width: 135px;
    height: 175px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 18px;
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 18px 35px rgba(42, 16, 107, .25);
    backdrop-filter: blur(8px);
}

.hero-producto:nth-child(2) {
    width: 155px;
    height: 210px;
    transform: translateY(-18px);
}

.hero-producto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 11px;
}

.hero-vacio {
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 700;
    opacity: .9;
}

.beneficios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 48px;
}

.beneficio {
    padding: 16px;
    border: 1px solid var(--circulo-borde);
    border-radius: 13px;
    background: white;
}

.beneficio strong,
.beneficio span {
    display: block;
}

.beneficio span {
    margin-top: 5px;
    color: var(--circulo-texto-suave);
    font-size: 13px;
}

.catalogo {
    padding-bottom: 70px;
}

.cabecera-seccion {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.cabecera-seccion h2,
.cabecera-seccion p {
    margin: 0;
}

.cabecera-seccion h2 {
    font-size: 28px;
}

.cabecera-seccion p {
    margin-top: 7px;
    color: var(--circulo-texto-suave);
}

.estado-catalogo {
    color: var(--circulo-texto-suave);
    font-size: 14px;
}

.grid-productos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.tarjeta-producto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--circulo-borde);
    border-radius: 15px;
    background: white;
    box-shadow: 0 5px 18px rgba(31, 41, 55, .04);
    transition: transform .2s, box-shadow .2s;
}

.tarjeta-producto:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 30px rgba(31, 41, 55, .1);
}

.imagen-producto {
    position: relative;
    display: grid;
    aspect-ratio: 1 / .84;
    place-items: center;
    overflow: hidden;
    border-radius: 11px;
    background: #f5f3fa;
}

.imagen-producto img {
    width: 100%;
    height: 100%;
    /* Tratamiento consistente de imágenes de producto (2026-08-13): las
       fotos que sube cada comercio varían mucho — algunas son fotos de
       estilo/lifestyle a página completa, otras son fotos de catálogo con
       mucho margen blanco alrededor del producto. Con "cover" cada una se
       recortaba a su manera: las de fondo claro terminaban viéndose
       diminutas dentro de la tarjeta, y las de estilo perdían su encuadre
       original de forma impredecible. "contain" + el fondo neutro de
       .imagen-producto (ya existía, pero quedaba tapado por "cover")
       muestra el producto completo siempre, con el mismo trato para
       cualquier foto — así el catálogo se ve uniforme sin depender de que
       cada foto tenga la misma composición.
       Excepción a propósito: el carrusel del hero (.hero-productos img,
       más abajo) sí usa "cover" — ahí el efecto de mosaico/collage
       depende de que las fotos llenen su marco. */
    object-fit: contain;
    padding: 14px;
    box-sizing: border-box;
}

.etiqueta-producto {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    border-radius: 20px;
    color: white;
    background: var(--circulo-morado);
    font-size: 11px;
    font-weight: 800;
}

.info-producto {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 2px 2px;
}

.info-producto h3,
.info-producto p {
    margin: 0;
}

.info-producto h3 {
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.categoria-producto {
    min-height: 18px;
    margin-top: 5px !important;
    color: var(--circulo-texto-suave);
    font-size: 12px;
}

.precio-producto {
    margin-top: 11px !important;
    font-size: 18px;
    font-weight: 900;
}

.btn-agregar {
    width: 100%;
    margin-top: auto;
    padding: 11px;
    color: white;
    background: var(--circulo-morado);
}

.btn-agregar:hover {
    background: var(--circulo-morado-oscuro);
}

.sin-productos {
    grid-column: 1 / -1;
    padding: 35px;
    border: 1px dashed #d2d7e5;
    border-radius: 13px;
    color: var(--circulo-texto-suave);
    text-align: center;
}

.como-comprar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 62px;
    padding-top: 20px;
}

.paso {
    padding: 20px;
    border-radius: 15px;
    background: #eee9ff;
}

.numero-paso {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: var(--circulo-morado);
    font-weight: 900;
}

.paso h3 {
    margin: 15px 0 8px;
}

.paso p {
    margin: 0;
    color: #59627a;
    line-height: 1.5;
}

.pie-pagina {
    padding: 46px 6% 22px;
    color: #cbd2e3;
    background: #121b2e;
    font-size: 14px;
}

/* Footer enriquecido (2026-08-13): antes era una sola línea de copyright,
   sin ningún enlace ni forma de contactar a la tienda desde ahí — un salto
   directo del catálogo al pie de página en blanco. Ahora tiene 3 columnas
   (marca + redes, enlaces de tienda, ayuda/contacto) igual que cualquier
   tienda real, y de paso conecta datos que ya existían en Supabase
   (descripcion/instagram/facebook) pero que la tienda pública nunca había
   llegado a mostrar (quedó documentado como pendiente en la Fase 2.6). */
.pie-contenido {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 32px;
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: 34px;
}

.pie-nombre {
    display: block;
    margin-bottom: 10px;
    color: white;
    font-size: 20px;
    font-weight: 800;
}

.pie-descripcion {
    margin: 0 0 16px;
    max-width: 340px;
    color: #98a2ba;
    line-height: 1.6;
}

.pie-redes {
    display: flex;
    gap: 10px;
}

.pie-redes:empty {
    display: none;
}

.pie-redes a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #2a3552;
    border-radius: 50%;
    color: #cbd2e3;
    text-decoration: none;
}

.pie-redes a:hover {
    border-color: var(--circulo-morado);
    color: white;
    background: var(--circulo-morado);
}

.pie-columna h3 {
    margin: 0 0 14px;
    color: white;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.pie-columna {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.pie-columna a,
.pie-columna button {
    padding: 0;
    border: 0;
    background: none;
    color: #cbd2e3;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.pie-columna a:hover,
.pie-columna button:hover {
    color: white;
    text-decoration: underline;
}

.pie-linea {
    max-width: 1180px;
    margin: 0 auto;
    padding-top: 22px;
    border-top: 1px solid #232d47;
    color: #7d879f;
}

@media (max-width: 760px) {
    .pie-contenido {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.fondo-carrito {
    position: fixed;
    inset: 0;
    /* Bug real (2026-08-13, detectado con Playwright al probar el panel de
       Seguimiento en mobile): con z-index:30 el encabezado fijo
       (.encabezado z-index:50, .barra-utilidad z-index:51) queda POR
       ENCIMA de este overlay y tapa el botón de cerrar / título del panel
       cuando el header mide más que unos ~60px — algo que en desktop casi
       no se notaba pero que la barra de utilidad apilada en mobile hizo
       evidente. Se sube por encima de ambos (ver también .aviso-tienda,
       que se subió a 60 para seguir por encima de todo, incluido esto). */
    z-index: 55;
    visibility: hidden;
    background: rgba(14, 22, 38, .42);
    opacity: 0;
    transition: opacity .2s, visibility .2s;
}

.fondo-carrito.abierto {
    visibility: visible;
    opacity: 1;
}

.panel-carrito {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(100%, 430px);
    height: 100%;
    padding: 22px;
    transform: translateX(100%);
    background: white;
    box-shadow: -12px 0 35px rgba(0, 0, 0, .16);
    transition: transform .25s ease;
}

.fondo-carrito.abierto .panel-carrito {
    transform: translateX(0);
}

.cabecera-carrito {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--circulo-borde);
}

.cabecera-carrito h2 {
    margin: 0;
    font-size: 21px;
}

.btn-cerrar {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #53607a;
    background: #f1f3f8;
    font-size: 24px;
}

.lista-carrito {
    display: grid;
    flex: 1;
    align-content: start;
    gap: 13px;
    padding: 18px 0;
    overflow-y: auto;
}

/* Seguimiento de pedido (panel-carrito reutilizado, ver .panel-carrito) */
.panel-seguimiento {
    overflow-y: auto;
}

.seguimiento-ayuda {
    margin: 16px 0 0;
    color: var(--circulo-texto-suave);
    font-size: 14px;
    line-height: 1.5;
}

.form-seguimiento {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 18px;
}

.form-seguimiento label {
    margin-top: 10px;
    color: var(--circulo-texto);
    font-size: 13px;
    font-weight: 700;
}

.form-seguimiento input {
    padding: 11px 12px;
    border: 1px solid var(--circulo-borde);
    border-radius: 8px;
    font: inherit;
    color: inherit;
}

.form-seguimiento input:focus {
    outline: 2px solid var(--circulo-morado);
    outline-offset: 1px;
}

.form-seguimiento button {
    margin-top: 18px;
    padding: 13px;
    border: 0;
    border-radius: 8px;
    background: var(--circulo-morado);
    color: white;
    font-weight: 800;
}

.form-seguimiento button:hover {
    background: var(--circulo-morado-oscuro);
}

.form-seguimiento button:disabled {
    cursor: wait;
    opacity: .7;
}

.resultado-seguimiento {
    margin-top: 20px;
}

.resultado-seguimiento:empty {
    display: none;
}

/* ">" a propósito: el <p> de error es hijo directo de #resultadoSeguimiento,
   pero el <p> de la tarjeta de éxito vive dentro de .tarjeta-pedido-seguimiento
   (nieto, no hijo). Sin el ">" este estilo de error se filtraba también a
   la tarjeta de éxito (bug real, detectado visualmente con Playwright). */
.resultado-seguimiento > p {
    margin: 0;
    padding: 14px;
    border-radius: 10px;
    background: #fff1f1;
    color: #b3261e;
    font-size: 14px;
    font-weight: 600;
}

.tarjeta-pedido-seguimiento {
    padding: 18px;
    border: 1px solid var(--circulo-borde);
    border-radius: 12px;
    background: var(--circulo-fondo);
}

.tarjeta-pedido-seguimiento h3 {
    margin: 0 0 4px;
    font-size: 18px;
}

.tarjeta-pedido-seguimiento p {
    margin: 0 0 10px;
    color: var(--circulo-texto-suave);
    font-size: 13px;
}

.estado-pedido-seguimiento {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: white;
    font-size: 13px;
    font-weight: 800;
    text-transform: capitalize;
}

.estado-pedido-seguimiento::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--circulo-morado);
    content: "";
}

.estado-pedido-seguimiento[data-estado="entregado"]::before,
.estado-pedido-seguimiento[data-estado="pagado"]::before {
    background: var(--circulo-verde);
}

.estado-pedido-seguimiento[data-estado="cancelado"]::before {
    background: var(--circulo-rojo);
}

.item-carrito {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    gap: 10px;
    align-items: center;
}

.item-carrito img {
    width: 58px;
    height: 58px;
    border-radius: 10px;
    object-fit: cover;
    background: #f1f3f8;
}

.item-carrito h3,
.item-carrito p {
    margin: 0;
}

.item-carrito h3 {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-carrito p {
    margin-top: 5px;
    color: var(--circulo-texto-suave);
    font-size: 13px;
}

.controles-cantidad {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
}

.controles-cantidad button {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 0;
    border-radius: 6px;
    color: var(--circulo-morado);
    background: #eee9ff;
    font-weight: 900;
}

.btn-eliminar-item {
    border: 0;
    color: var(--circulo-rojo);
    background: transparent;
    font-size: 19px;
}

.carrito-vacio {
    padding: 30px 12px;
    color: var(--circulo-texto-suave);
    text-align: center;
}

.resumen-carrito {
    padding-top: 18px;
    border-top: 1px solid var(--circulo-borde);
}

.linea-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 19px;
    font-weight: 900;
}

.btn-checkout,
.btn-whatsapp {
    width: 100%;
    padding: 13px;
    color: white;
}

.btn-checkout {
    background: var(--circulo-morado);
}

.btn-whatsapp {
    margin-top: 9px;
    background: var(--circulo-verde);
}

.btn-checkout:disabled,
.btn-whatsapp:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.aviso-tienda {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 60;
    padding: 13px 16px;
    border-radius: 10px;
    color: white;
    background: #172033;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .2);
}

@media (max-width: 1000px) {
    .grid-productos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero {
        padding: 42px 7%;
    }
}

@media (max-width: 760px) {
    .encabezado {
        gap: 12px;
        min-height: 65px;
        padding: 0 5%;
    }

    .menu-principal {
        display: none;
    }

    .buscador {
        width: 100%;
    }

    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        margin-top: 20px;
        padding: 36px 8%;
    }

    .hero-productos {
        min-height: 150px;
    }

    .hero-producto {
        width: 92px;
        height: 120px;
    }

    .hero-producto:nth-child(2) {
        width: 110px;
        height: 145px;
    }

    .beneficios,
    .como-comprar {
        grid-template-columns: 1fr;
    }

    .grid-productos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .cabecera-seccion {
        display: block;
    }

    .estado-catalogo {
        display: block;
        margin-top: 10px;
    }
}

@media (max-width: 420px) {
    .marca-tienda {
        font-size: 14px;
    }

    .icono-marca {
        width: 34px;
        height: 34px;
    }

    .buscador {
        padding: 7px;
    }

    .buscador span {
        display: none;
    }

    .grid-productos {
        grid-template-columns: 1fr;
    }
}
/* Carrusel automático de productos en la tarjeta principal */
.hero-productos {
    position: relative;
    z-index: 1;
    display: block;
    min-height: 250px;
    padding: 18px 0;
    overflow: hidden;
}

.hero-carrusel {
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    animation: moverProductosHero 26s linear infinite;
}

.hero-productos:hover .hero-carrusel {
    animation-play-state: paused;
}

.hero-producto {
    position: relative;
    flex: 0 0 145px;
    width: 145px;
    height: 195px;
    padding: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 18px;
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 18px 35px rgba(42, 16, 107, .25);
    transform: none;
}

.hero-carrusel .hero-producto:nth-child(3n + 2) {
    transform: translateY(-14px);
}

.hero-producto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 11px;
}

.nombre-hero-producto {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    padding: 7px;
    overflow: hidden;
    border-radius: 8px;
    color: white;
    background: rgba(18, 12, 47, .68);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes moverProductosHero {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 760px) {
    .hero-productos {
        min-height: 165px;
    }

    .hero-producto {
        flex-basis: 105px;
        width: 105px;
        height: 140px;
    }

    .hero-carrusel .hero-producto:nth-child(3n + 2) {
        transform: translateY(-8px);
    }
}
/* Desvanecido elegante en los bordes del carrusel */
.hero-productos {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );
}

/* Mejora el aspecto de cada tarjeta al pasar por el carrusel */
.hero-producto {
    box-shadow:
        0 18px 35px rgba(42, 16, 107, .28),
        inset 0 1px 0 rgba(255, 255, 255, .28);
    /* Antes era puramente decorativo; ahora un click lleva a esa tarjeta
       en el catálogo (ver irATarjetaProducto en js/tienda.js). */
    cursor: pointer;
    transition: transform .25s ease;
}

.hero-producto.principal:hover {
    transform: translateY(-4px);
}

/* Resalta brevemente la tarjeta del catálogo a la que saltó el carrusel,
   para que quede claro cuál es sin necesidad de buscarla con la vista. */
.tarjeta-resaltada {
    animation: parpadeoResaltado 1.6s ease;
}

@keyframes parpadeoResaltado {
    0%, 100% { box-shadow: 0 6px 18px rgba(31, 41, 55, .08); }
    20%, 60% { box-shadow: 0 0 0 3px var(--circulo-morado); }
}

.nombre-hero-producto {
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
}
/* Ventana del carrusel: el desvanecido queda solo en las imágenes */
.hero-productos {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 10px;
    min-height: 270px;
    padding: 18px 0 8px;
    overflow: visible;

    -webkit-mask-image: none;
    mask-image: none;
}

.hero-ventana {
    width: 100%;
    overflow: hidden;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );
}

.hero-carrusel {
    padding: 15px 0;
}

/* Puntos debajo de las imágenes */
.indicadores-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    min-height: 20px;
}

.indicador-hero {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    box-shadow: 0 2px 8px rgba(41, 15, 105, .2);
    /* Ahora es un <button> (antes <span> puramente decorativo, ver
       js/tienda.js) para poder saltar a un producto con un click. */
    cursor: pointer;
    transition: width .3s, height .3s, background .3s, transform .3s;
}

.indicador-hero.activo {
    width: 15px;
    height: 15px;
    border-color: white;
    background: white;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .16);
    transform: scale(1.05);
}

@media (max-width: 760px) {
    .hero-productos {
        min-height: 185px;
    }

    .indicador-hero {
        width: 7px;
        height: 7px;
    }

    .indicador-hero.activo {
        width: 13px;
        height: 13px;
    }
}
/* Galería ordenada: producto principal al centro */
.hero-productos {
    min-height: 270px;
    padding: 8px 0;

    -webkit-mask-image: none;
    mask-image: none;
}

.hero-ventana {
    overflow: visible;

    -webkit-mask-image: none;
    mask-image: none;
}

.hero-escenario {
    position: relative;
    width: 100%;
    height: 235px;
    animation: deslizarProductoHero .75s cubic-bezier(.22, .8, .25, 1);
}

.hero-escenario .hero-producto {
    position: absolute;
    top: 28px;
    width: 132px;
    height: 174px;
    padding: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 18px;
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 12px 28px rgba(42, 16, 107, .22);
    transition: transform .55s ease, opacity .55s ease, filter .55s ease;
}

.hero-escenario .hero-producto.izquierda {
    left: 2%;
    z-index: 1;
    opacity: .58;
    filter: saturate(.72) brightness(.82);
    transform: scale(.78) rotate(-8deg);
}

.hero-escenario .hero-producto.principal {
    top: 0;
    left: 50%;
    z-index: 3;
    width: 170px;
    height: 220px;
    opacity: 1;
    border-color: rgba(255, 255, 255, .72);
    box-shadow:
        0 24px 42px rgba(42, 16, 107, .4),
        0 0 0 5px rgba(255, 255, 255, .1);
    filter: none;
    transform: translateX(-50%) scale(1);
}

.hero-escenario .hero-producto.derecha {
    right: 2%;
    z-index: 1;
    opacity: .58;
    filter: saturate(.72) brightness(.82);
    transform: scale(.78) rotate(8deg);
}

.hero-escenario .hero-producto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 11px;
}

.hero-escenario .principal .nombre-hero-producto {
    background: rgba(27, 18, 62, .78);
    font-size: 13px;
}

@keyframes deslizarProductoHero {
    from {
        opacity: 0;
        transform: translateX(110px) scale(.92);
    }

    70% {
        opacity: 1;
        transform: translateX(-7px) scale(1.01);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@media (max-width: 760px) {
    .hero-escenario {
        height: 160px;
    }

    .hero-escenario .hero-producto {
        top: 27px;
        width: 80px;
        height: 110px;
    }

    .hero-escenario .hero-producto.principal {
        top: 0;
        width: 118px;
        height: 152px;
    }
}
/* Corrección: mostrar siempre las tres imágenes de la galería */
.hero-escenario {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 235px;
}

.hero-escenario .hero-producto {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    flex: 0 0 120px;
    width: 120px;
    height: 165px;
}

.hero-escenario .hero-producto.izquierda,
.hero-escenario .hero-producto.derecha {
    z-index: 1;
    opacity: .65;
    filter: saturate(.72) brightness(.82);
}

.hero-escenario .hero-producto.izquierda {
    transform: scale(.78) rotate(-8deg);
}

.hero-escenario .hero-producto.derecha {
    transform: scale(.78) rotate(8deg);
}

.hero-escenario .hero-producto.principal {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    z-index: 3;
    flex-basis: 170px;
    width: 170px;
    height: 220px;
    opacity: 1;
    filter: none;
    transform: scale(1);
}

@media (max-width: 760px) {
    .hero-escenario {
        height: 160px;
        gap: 2px;
    }

    .hero-escenario .hero-producto {
        flex-basis: 75px;
        width: 75px;
        height: 105px;
    }

    .hero-escenario .hero-producto.principal {
        flex-basis: 118px;
        width: 118px;
        height: 150px;
    }
}
/* Contenedor elegante para todo el catálogo */
.catalogo {
    position: relative;
    margin: 10px 0 70px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid #ded7ff;
    border-radius: 24px;
    background:
        radial-gradient(circle at 92% 8%, rgba(167, 125, 255, .2), transparent 24%),
        radial-gradient(circle at 8% 95%, rgba(109, 63, 231, .1), transparent 28%),
        linear-gradient(135deg, #f7f5ff, #eeebff);
    box-shadow: 0 16px 38px rgba(72, 45, 149, .09);
}

.catalogo > * {
    position: relative;
    z-index: 1;
}

/* Productos más pequeños y ordenados */
.grid-productos {
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    gap: 16px;
}

.tarjeta-producto {
    padding: 10px;
    border-radius: 14px;
}

.imagen-producto {
    height: 165px;
    aspect-ratio: auto;
    border-radius: 10px;
}

.info-producto {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 12px 2px 2px;
}

.info-producto h3 {
    font-size: 15px;
}

.categoria-producto {
    margin-top: 4px !important;
    font-size: 11px;
}

.precio-producto {
    margin-top: 8px !important;
    font-size: 17px;
}

.btn-agregar {
    margin-top: auto;
    padding: 10px;
    font-size: 14px;
}

/* Ajustes para pantallas más pequeñas */
@media (max-width: 1000px) {
    .catalogo {
        padding: 22px;
    }

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

@media (max-width: 760px) {
    .catalogo {
        padding: 16px;
        border-radius: 18px;
    }

    .grid-productos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .imagen-producto {
        height: 135px;
    }
}

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

    .imagen-producto {
        height: 180px;
    }
}
.filtros-categorias {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #e6e1fa;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(82, 45, 180, 0.08);
}

.filtro-titulo {
    color: #253452;
    font-weight: 800;
    margin-right: 4px;
}

.filtro-categoria {
    background: #f2efff;
    border: 1px solid #ddd4ff;
    border-radius: 999px;
    color: #6040cc;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 8px 13px;
    transition: 0.2s ease;
}

.filtro-categoria:hover {
    background: #e5deff;
    transform: translateY(-1px);
}

.filtro-categoria.activo {
    background: linear-gradient(135deg, #5429d8, #8148f5);
    border-color: transparent;
    box-shadow: 0 7px 16px rgba(92, 49, 211, 0.24);
    color: white;
}

@media (max-width: 650px) {
    .filtros-categorias {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* Versión compacta y funcional de la tienda */
@media (max-width: 760px) {
    .encabezado {
        flex-wrap: wrap;
        gap: 12px;
        min-height: auto;
        padding: 14px 5%;
    }

    .menu-principal {
        display: flex;
        order: 3;
        width: 100%;
        gap: 8px;
        overflow-x: auto;
        padding: 4px 0 2px;
        scrollbar-width: none;
    }

    .menu-principal::-webkit-scrollbar {
        display: none;
    }

    .menu-principal a {
        flex: 0 0 auto;
        padding: 9px 12px;
        border-radius: 10px;
        background: #f3efff;
        color: #5c35d2;
        font-size: 0.9rem;
        font-weight: 800;
        text-decoration: none;
    }

    .hero {
        padding: 24px 5%;
    }

    .hero-contenido {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .hero-escenario {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 275px;
    }

    .hero-escenario .hero-producto.izquierda,
    .hero-escenario .hero-producto.derecha {
        display: none;
    }

    .hero-escenario .hero-producto.principal {
        position: relative;
        width: min(220px, 76vw);
        transform: none;
    }

    .indicadores-hero {
        margin-top: 12px;
    }
}
/* Evita que el contenido del carrusel quede debajo del encabezado móvil */
@media (max-width: 760px) {
    .encabezado {
        height: auto !important;
    }

    .hero {
        margin-top: 0 !important;
        min-height: auto;
    }

    .hero-contenido {
        padding-top: 34px;
    }

    .hero h1 {
        margin-top: 0;
    }
}
.etiqueta-producto.etiqueta-promocion {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: #ffffff;
}

.bloque-precio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.precio-original {
    margin: 0;
    color: #8791a8;
    font-size: 12px;
    text-decoration: line-through;
}

.descuento-producto {
    padding: 4px 7px;
    border-radius: 999px;
    background: #dcfce7;
    color: #16803b;
    font-size: 11px;
    font-weight: 800;
}

.condiciones-producto {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.condicion-producto {
    padding: 5px 8px;
    border-radius: 999px;
    background: #f1edff;
    color: #6341d8;
    font-size: 11px;
    font-weight: 700;
}

.condicion-envio-gratis {
    background: #dcfce7;
    color: #16803b;
}

.condicion-contraentrega {
    background: #fff4d6;
    color: #9a6500;
}

.condicion-digital {
    background: #e0f2fe;
    color: #0369a1;
}

.condicion-agotado {
    background: #fee2e2;
    color: #b91c1c;
}

.btn-agregar:disabled {
    background: #9ca7ba;
    cursor: not-allowed;
    opacity: 0.75;
}
/* ==================================================
   REDISEÑO CÍRCULO - ETAPA 1: CABECERA
   ================================================== */

:root {
    --circulo-morado: #6d36f2;
    --circulo-morado-oscuro: #5129c8;
    --circulo-violeta: #8c45ff;
    --circulo-lila: #b56bff;
    --circulo-oscuro: #0b0926;
    --circulo-texto: #11142d;
    --circulo-texto-suave: #68708b;
    --circulo-borde: #ece9f6;
    --circulo-fondo: #fbfaff;
    --circulo-verde: #16a65a;
    --circulo-rojo: #e5484d;
}

body {
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(181, 107, 255, 0.07),
            transparent 30%
        ),
        var(--circulo-fondo);
    color: var(--circulo-texto);
}

.barra-utilidad {
    position: relative;
    z-index: 51;
    color: #fff;
    background:
        linear-gradient(
            90deg,
            #5a20e6 0%,
            #7b2ff7 48%,
            #a04cf6 100%
        );
    box-shadow: 0 4px 18px rgba(102, 44, 230, 0.18);
}

.barra-utilidad-contenido {
    width: min(1420px, calc(100% - 48px));
    min-height: 36px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-size: 12px;
    font-weight: 700;
}

.barra-utilidad p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.barra-utilidad nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

.barra-utilidad a,
.barra-utilidad span,
.barra-utilidad button {
    color: inherit;
}

.barra-utilidad a {
    text-decoration: none;
}

.barra-utilidad a:hover {
    text-decoration: underline;
}

/* "Seguimiento" es un <button> (abre el panel de consulta), no un <a>: se
   despoja del estilo nativo de botón para verse igual que "Ayuda"/"Mi
   cuenta" en la barra. */
.barra-utilidad button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.barra-utilidad button:hover {
    text-decoration: underline;
}

.encabezado {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    min-height: 88px;
    padding: 0 max(4%, calc((100vw - 1420px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(231, 227, 243, 0.9);
    box-shadow: 0 12px 35px rgba(22, 14, 65, 0.05);
    backdrop-filter: blur(18px);
}

.marca-tienda {
    width: clamp(155px, 17vw, 230px);
    flex: 0 0 auto;
    display: block;
}

.marca-tienda img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 58px;
    object-fit: contain;
    object-position: left center;
}

/* Fase 2.3: nombre de la tienda como texto cuando no tiene logo_url
   propio (ej. ALL-THA) — mismo peso/tamaño que ocuparía el logo, para
   que no se vea como texto plano perdido en el header. */
.texto-logo-respaldo {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 58px;
    color: var(--circulo-morado-oscuro);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-principal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2vw, 34px);
}

.menu-principal a {
    position: relative;
    padding: 12px 2px;
    color: #17142c;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color 180ms ease,
        transform 180ms ease;
}

.menu-principal a::after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: 4px;
    left: 50%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--circulo-morado),
        var(--circulo-lila)
    );
    transition:
        right 180ms ease,
        left 180ms ease;
}

.menu-principal a:hover {
    color: var(--circulo-morado);
    transform: translateY(-1px);
}

.menu-principal a:hover::after {
    right: 0;
    left: 0;
}

.acciones-encabezado {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.buscador {
    width: clamp(190px, 19vw, 300px);
    height: 46px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e5e1ef;
    border-radius: 14px;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.buscador:focus-within {
    border-color: rgba(109, 54, 242, 0.6);
    box-shadow:
        0 0 0 4px rgba(109, 54, 242, 0.1),
        0 10px 25px rgba(80, 35, 180, 0.08);
}

.buscador input {
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--circulo-texto);
    font: inherit;
}

.buscador input::placeholder {
    color: #9296a9;
}

.icono-svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-icono-header,
.btn-carrito {
    position: relative;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #e5e1ef;
    border-radius: 14px;
    color: #17142c;
    background: #fff;
    cursor: pointer;
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.btn-icono-header:hover,
.btn-carrito:hover {
    color: #fff;
    border-color: transparent;
    background:
        linear-gradient(
            135deg,
            var(--circulo-morado),
            var(--circulo-violeta)
        );
    box-shadow: 0 12px 28px rgba(109, 54, 242, 0.24);
    transform: translateY(-2px);
}

#contadorCarrito {
    position: absolute;
    top: -8px;
    right: -7px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(
        135deg,
        #6d36f2,
        #a148fa
    );
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.menu-principal a:focus-visible,
.btn-icono-header:focus-visible,
.btn-carrito:focus-visible {
    outline: 3px solid rgba(109, 54, 242, 0.3);
    outline-offset: 3px;
}

/* Tablet */
@media (max-width: 1100px) {
    .encabezado {
        display: grid;
        grid-template-columns: minmax(150px, 210px) 1fr;
        gap: 12px 22px;
        padding: 14px 5%;
    }

    .marca-tienda {
        grid-column: 1;
        grid-row: 1;
    }

    .acciones-encabezado {
        grid-column: 2;
        grid-row: 1;
    }

    .menu-principal {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        /* Affordance de scroll horizontal (pendiente real, 2026-08-13): sin
           esto no había ninguna pista visual de que el menú siguiera más
           allá del borde — con la barra nativa oculta (scrollbar-width:none
           arriba), el último ítem simplemente se cortaba en seco contra el
           borde de la pantalla. El degradado en los bordes sugiere "hay más
           contenido" sin necesitar JS para rastrear la posición del scroll. */
        -webkit-mask-image: linear-gradient(
            to right,
            transparent,
            black 24px,
            black calc(100% - 24px),
            transparent
        );
        mask-image: linear-gradient(
            to right,
            transparent,
            black 24px,
            black calc(100% - 24px),
            transparent
        );
    }

    .menu-principal::-webkit-scrollbar {
        display: none;
    }
}

/* Celular */
@media (max-width: 700px) {
    .barra-utilidad-contenido {
        flex-direction: column;
        gap: 4px;
        width: calc(100% - 28px);
        min-height: 32px;
        padding: 7px 0;
        justify-content: center;
        text-align: center;
        font-size: 10px;
    }

    /* Bug real (2026-08-13): "display:none" dejaba "Ayuda" (el único enlace
       con funcionalidad real, junto con "Seguimiento" que ahora también la
       tiene) completamente inalcanzable en mobile — no había ninguna otra
       forma de llegar a esas opciones. En vez de ocultarlas, se apilan
       debajo del mensaje de envíos con una tipografía más chica. */
    .barra-utilidad nav {
        gap: 14px;
        font-size: 10px;
    }

    .encabezado {
        grid-template-columns: 1fr;
        padding: 12px 16px;
        gap: 12px;
    }

    .marca-tienda {
        grid-column: 1;
        grid-row: 1;
        width: 158px;
    }

    .acciones-encabezado {
        grid-column: 1;
        grid-row: 2;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px 44px;
        width: 100%;
    }

    .buscador {
        width: 100%;
        height: 44px;
    }

    .btn-icono-header,
    .btn-carrito {
        width: 44px;
        height: 44px;
    }

    .menu-principal {
        grid-column: 1;
        grid-row: 3;
        gap: 8px;
        padding-bottom: 2px;
    }

    .menu-principal a {
        padding: 10px 14px;
        border-radius: 12px;
        color: #5e35c9;
        background: #f3efff;
        font-size: 13px;
    }

    .menu-principal a::after {
        display: none;
    }
}
/* =====================================================
   CÍRCULO - HERO DE MARCA Y CARRUSEL INDEPENDIENTE
   ===================================================== */

.hero-circulo {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    min-height: 500px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(177, 132, 255, 0.22);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(119, 43, 255, 0.28),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #07051f 0%,
            #0c072c 54%,
            #170651 100%
        );
    box-shadow:
        0 30px 70px rgba(33, 12, 94, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero-circulo::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 520px;
    height: 520px;
    right: -140px;
    top: -165px;
    border: 1px solid rgba(171, 115, 255, 0.12);
    border-radius: 50%;
    box-shadow:
        0 0 0 75px rgba(127, 64, 255, 0.035),
        0 0 0 150px rgba(127, 64, 255, 0.025);
    pointer-events: none;
}

.hero-circulo::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 420px;
    height: 420px;
    left: 32%;
    bottom: -350px;
    border-radius: 50%;
    background: rgba(145, 62, 255, 0.22);
    filter: blur(65px);
    pointer-events: none;
}

.hero-circulo .hero-contenido {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(46px, 6vw, 86px);
    text-align: left;
}

.hero-circulo .hero-etiqueta {
    margin: 0 0 18px;
    color: #d9caff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-circulo h1 {
    max-width: 650px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(45px, 4.5vw, 73px);
    font-weight: 850;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.hero-circulo h1 strong {
    display: inline;
    color: #a864ff;
    font-weight: inherit;
    text-shadow:
        0 0 24px rgba(168, 100, 255, 0.28),
        0 0 50px rgba(120, 48, 255, 0.16);
}

.hero-circulo .hero-descripcion {
    max-width: 520px;
    margin: 26px 0 30px;
    color: rgba(246, 241, 255, 0.78);
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.65;
}

.hero-circulo .btn-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: auto;
    min-height: 54px;
    padding: 0 25px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 13px;
    color: #ffffff;
    background:
        linear-gradient(135deg, #7138f4 0%, #ad50ff 100%);
    box-shadow:
        0 13px 30px rgba(116, 44, 245, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    font-weight: 800;
    text-decoration: none;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;
}

.hero-circulo .btn-hero span {
    font-size: 22px;
    transition: transform 180ms ease;
}

.hero-circulo .btn-hero:hover {
    transform: translateY(-3px);
    filter: brightness(1.07);
    box-shadow:
        0 18px 38px rgba(116, 44, 245, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.hero-circulo .btn-hero:hover span {
    transform: translateX(4px);
}

.hero-marca-visual {
    position: relative;
    z-index: 2;
    align-self: stretch;
    min-height: 500px;
    overflow: hidden;
}

.hero-marca-visual::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0 auto 0 0;
    width: 155px;
    background:
        linear-gradient(
            90deg,
            #0b0629 0%,
            rgba(11, 6, 41, 0.78) 28%,
            transparent 100%
        );
    pointer-events: none;
}

.hero-marca-visual::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 280px;
    height: 90px;
    left: 50%;
    bottom: 35px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(121, 37, 255, 0.2);
    filter: blur(35px);
    pointer-events: none;
}

.hero-marca-visual img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    object-position: center 48%;
    filter: saturate(1.08) contrast(1.03);
    transform: scale(1.035);
    animation: respiracionMarca 6s ease-in-out infinite;
}

@keyframes respiracionMarca {
    0%,
    100% {
        transform: scale(1.035);
        filter: saturate(1.08) brightness(1);
    }

    50% {
        transform: scale(1.055);
        filter: saturate(1.13) brightness(1.04);
    }
}

/* Nueva tarjeta para el carrusel de productos */

.vitrina-carrusel {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(235px, 0.7fr) minmax(500px, 1.3fr);
    align-items: center;
    gap: clamp(25px, 4vw, 65px);
    margin-top: 28px;
    padding: clamp(28px, 4vw, 48px);
    overflow: hidden;
    border: 1px solid rgba(116, 61, 225, 0.13);
    border-radius: 25px;
    background:
        radial-gradient(
            circle at 82% 30%,
            rgba(144, 74, 255, 0.15),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(246, 241, 255, 0.98)
        );
    box-shadow:
        0 22px 55px rgba(62, 28, 132, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.vitrina-carrusel::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 330px;
    height: 330px;
    right: -120px;
    bottom: -190px;
    border: 1px solid rgba(112, 48, 234, 0.1);
    border-radius: 50%;
    box-shadow:
        0 0 0 55px rgba(113, 56, 244, 0.025),
        0 0 0 110px rgba(113, 56, 244, 0.018);
    pointer-events: none;
}

.vitrina-cabecera {
    position: relative;
    z-index: 2;
}

.vitrina-etiqueta {
    margin: 0 0 10px;
    color: #7138f4;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.vitrina-cabecera h2 {
    margin: 0;
    color: #17102f;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.vitrina-cabecera > p:not(.vitrina-etiqueta) {
    max-width: 410px;
    margin: 17px 0 22px;
    color: #756b8f;
    font-size: 16px;
    line-height: 1.65;
}

.vitrina-enlace {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #6831e7;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.vitrina-enlace span {
    transition: transform 180ms ease;
}

.vitrina-enlace:hover span {
    transform: translateX(4px);
}

.vitrina-carrusel .hero-productos {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 275px;
    margin: 0;
    padding: 8px 0;
}

.vitrina-carrusel .hero-ventana {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.vitrina-carrusel .hero-escenario {
    width: 100%;
    min-height: 235px;
    margin: 0 auto;
}

.vitrina-carrusel .indicadores-hero {
    margin-top: 10px;
}

.vitrina-carrusel .indicador-hero {
    border-color: rgba(105, 52, 227, 0.2);
    background: #cdbdf5;
}

.vitrina-carrusel .indicador-hero.activo {
    background: #7138f4;
    box-shadow:
        0 0 0 6px rgba(113, 56, 244, 0.12),
        0 0 18px rgba(113, 56, 244, 0.35);
}

.vitrina-carrusel .hero-vacio {
    color: #756b8f;
}

/* Adaptación para tablet */

@media (max-width: 1050px) {
    .hero-circulo {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    }

    .hero-circulo .hero-contenido {
        padding: 46px;
    }

    .vitrina-carrusel {
        grid-template-columns: 1fr;
    }

    .vitrina-cabecera {
        max-width: 680px;
        text-align: center;
        margin: 0 auto;
    }

    .vitrina-cabecera > p:not(.vitrina-etiqueta) {
        margin-right: auto;
        margin-left: auto;
    }
}

/* Adaptación para celular */

@media (max-width: 760px) {
    .hero-circulo {
        grid-template-columns: 1fr;
        min-height: auto;
        border-radius: 22px;
    }

    .hero-circulo .hero-contenido {
        padding: 38px 25px 30px;
    }

    .hero-circulo h1 {
        font-size: clamp(38px, 11vw, 53px);
        line-height: 1.02;
    }

    .hero-circulo .hero-descripcion {
        margin: 20px 0 25px;
        font-size: 16px;
    }

    .hero-marca-visual {
        min-height: 345px;
    }

    .hero-marca-visual::before {
        inset: 0 0 auto;
        width: 100%;
        height: 85px;
        background:
            linear-gradient(
                180deg,
                #0b0629 0%,
                rgba(11, 6, 41, 0.7) 35%,
                transparent 100%
            );
    }

    .hero-marca-visual img {
        min-height: 345px;
        object-position: center 48%;
    }

    .vitrina-carrusel {
        gap: 16px;
        margin-top: 20px;
        padding: 25px 18px;
        border-radius: 21px;
    }

    .vitrina-cabecera h2 {
        font-size: 30px;
    }

    .vitrina-cabecera > p:not(.vitrina-etiqueta) {
        font-size: 15px;
    }

    .vitrina-carrusel .hero-productos {
        min-height: 285px;
    }
}

@media (max-width: 480px) {
    .hero-circulo .hero-contenido {
        padding: 33px 20px 25px;
    }

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

    .hero-marca-visual,
    .hero-marca-visual img {
        min-height: 315px;
    }

    .vitrina-carrusel {
        padding: 23px 14px;
    }
}

/* Respeta a usuarios que desactivan las animaciones */

@media (prefers-reduced-motion: reduce) {
    .hero-marca-visual img {
        animation: none;
    }

    .hero-circulo .btn-hero,
    .hero-circulo .btn-hero span,
    .vitrina-enlace span {
        transition: none;
    }

    .hero-producto {
        transition: none;
    }

    .tarjeta-resaltada {
        animation: none;
        box-shadow: 0 0 0 3px var(--circulo-morado);
    }
}
/* =====================================================
   CORRECCIÓN FINAL DEL HERO DE CÍRCULO EN COMPUTADOR
   ===================================================== */

@media (min-width: 761px) {
    .hero.hero-circulo {
        grid-template-columns: minmax(0, 1fr) minmax(400px, 1fr);
        width: 100%;
        min-height: 440px;
        height: 440px;
        /* Bug real (2026-08-13): "max-height: 440px" quedaba activo aquí sin
           que el bloque "VERSIÓN FINAL" (más abajo, height:auto !important)
           lo sobreescribiera — esa regla nunca toca max-height. Resultado:
           en tablets angostas (~761-800px) donde el título envuelve a 5
           líneas y el contenido necesita más de 440px, el botón "Explorar
           productos" quedaba recortado por overflow:hidden. Se quita el
           tope para que el hero crezca con su contenido, como ya intentaba
           hacer el rediseño final. */
        padding: 0;
        box-sizing: border-box;
    }

    .hero.hero-circulo .hero-contenido {
        padding: 40px 42px 40px 58px;
    }

    .hero.hero-circulo .hero-etiqueta {
        margin-bottom: 12px;
        font-size: 12px;
    }

    .hero.hero-circulo h1 {
        max-width: 590px;
        font-size: clamp(44px, 3.4vw, 56px);
        line-height: 1.02;
    }

    .hero.hero-circulo .hero-descripcion {
        max-width: 500px;
        margin: 18px 0 24px;
        font-size: 18px;
        line-height: 1.5;
    }

    .hero.hero-circulo .btn-hero {
        min-height: 50px;
        padding: 0 24px;
    }

    .hero.hero-circulo .hero-marca-visual {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 440px;
        min-height: 440px;
        padding: 14px 26px;
        box-sizing: border-box;
    }

    .hero.hero-circulo .hero-marca-visual img {
        width: 100%;
        height: 100%;
        min-height: 0;
        max-width: 440px;
        object-fit: contain;
        object-position: center;
        transform: none !important;
    }

    .hero.hero-circulo .hero-marca-visual::before {
        width: 90px;
    }

    .hero.hero-circulo .hero-marca-visual::after {
        bottom: 22px;
    }
}
/* ==================================================
   AJUSTE FINAL: HERO UNIFICADO Y LOGO CONTENIDO
   ================================================== */

.hero.hero-circulo {
    overflow: hidden;
    border: 0;

    background:
        radial-gradient(
            circle at 78% 50%,
            rgba(150, 70, 255, 0.2) 0%,
            transparent 40%
        ),
        linear-gradient(
            110deg,
            #05031b 0%,
            #080322 52%,
            #12063c 100%
        );

    box-shadow:
        0 24px 60px rgba(30, 12, 76, 0.2),
        0 8px 24px rgba(8, 3, 32, 0.12);
}

/* Las dos partes utilizan exactamente el mismo fondo */
.hero.hero-circulo .hero-contenido,
.hero.hero-circulo .hero-marca-visual {
    background: transparent !important;
}

.hero.hero-circulo .hero-contenido {
    position: relative;
    z-index: 2;
}

/* Contenedor derecho */
.hero.hero-circulo .hero-marca-visual {
    position: relative;
    display: grid;
    place-items: center;

    height: 440px;
    min-height: 440px;
    padding: 24px 38px;

    overflow: hidden;
    box-sizing: border-box;
}

/* Imagen completa, más pequeña y sin recortarse */
.hero.hero-circulo .hero-marca-visual img {
    position: relative;
    inset: auto;

    display: block;
    width: min(82%, 390px);
    height: auto;

    max-width: 390px;
    max-height: 390px;
    min-height: 0;

    object-fit: contain;
    object-position: center;

    border: 0;
    border-radius: 0;

    opacity: 0.96;
    mix-blend-mode: screen;

    transform: none;

    /* Difumina los bordes cuadrados de la imagen */
    -webkit-mask-image: radial-gradient(
        ellipse 72% 76% at 50% 52%,
        #000 48%,
        rgba(0, 0, 0, 0.94) 64%,
        rgba(0, 0, 0, 0.38) 82%,
        transparent 100%
    );

    mask-image: radial-gradient(
        ellipse 72% 76% at 50% 52%,
        #000 48%,
        rgba(0, 0, 0, 0.94) 64%,
        rgba(0, 0, 0, 0.38) 82%,
        transparent 100%
    );
}

/* Elimina adornos que podrían formar líneas */
.hero.hero-circulo .hero-marca-visual::before,
.hero.hero-circulo .hero-marca-visual::after {
    content: none !important;
    display: none !important;
}

/* Adaptación para celular */
@media (max-width: 760px) {
    .hero.hero-circulo .hero-marca-visual {
        height: 300px;
        min-height: 300px;
        padding: 12px 24px 24px;
    }

    .hero.hero-circulo .hero-marca-visual img {
        width: min(78%, 280px);
        max-width: 280px;
        max-height: 280px;
    }
}

/* ==================================================
   CORRECCIÓN DEFINITIVA DEL LOGO DEL HERO
   Integra la imagen opaca sin mostrar su rectángulo
   ================================================== */

@media (min-width: 761px) {
    .hero.hero-circulo {
        position: relative;
        isolation: isolate;
        overflow: hidden;
    }

    .hero.hero-circulo .hero-contenido {
        position: relative;
        z-index: 3;
    }

    .hero.hero-circulo .hero-marca-visual {
        position: absolute !important;
        inset: 0 0 0 auto !important;
        z-index: 1;

        width: 58% !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        background: transparent !important;
        pointer-events: none;
    }

    .hero.hero-circulo .hero-marca-visual img {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        display: block !important;
        width: auto !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;

        object-fit: contain !important;
        object-position: right center !important;

        border: 0 !important;
        border-radius: 0 !important;
        opacity: 1 !important;
        mix-blend-mode: normal !important;
        transform: none !important;

        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .hero.hero-circulo .hero-marca-visual::before {
        content: "" !important;
        display: block !important;

        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;

        background: linear-gradient(
            90deg,
            #080322 0%,
            rgba(8, 3, 34, 0.98) 12%,
            rgba(8, 3, 34, 0.78) 24%,
            rgba(8, 3, 34, 0.22) 42%,
            transparent 60%
        );
    }

    .hero.hero-circulo .hero-marca-visual::after {
        content: none !important;
        display: none !important;
    }
}
/* ==================================================
   HERO CÍRCULO — VERSIÓN FINAL
   ================================================== */

.hero.hero-circulo {
    position: relative !important;
    isolation: isolate;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr) !important;
    width: 100%;
    min-height: 410px !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 28px !important;
    background:
        radial-gradient(
            circle at 78% 48%,
            rgba(167, 82, 255, 0.20) 0%,
            rgba(116, 40, 220, 0.10) 28%,
            transparent 52%
        ),
        linear-gradient(
            110deg,
            #05021d 0%,
            #0a0328 52%,
            #160747 100%
        ) !important;
    box-shadow: 0 28px 70px rgba(44, 18, 99, 0.22);
}

.hero.hero-circulo::before,
.hero.hero-circulo::after {
    content: none !important;
    display: none !important;
}

.hero.hero-circulo .hero-contenido {
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: auto !important;
    max-width: none !important;
    min-height: 410px !important;
    padding: 36px 20px 36px 58px !important;
    background: transparent !important;
}

.hero.hero-circulo .hero-marca-visual {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    display: grid !important;
    place-items: center;
    width: auto !important;
    height: auto !important;
    min-height: 410px !important;
    padding: 8px 24px 8px 0 !important;
    overflow: visible !important;
    background: transparent !important;
    pointer-events: none;
}

.hero.hero-circulo .hero-marca-visual::before,
.hero.hero-circulo .hero-marca-visual::after {
    content: none !important;
    display: none !important;
}

.hero.hero-circulo .hero-marca-visual img {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: min(100%, 500px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 500px !important;
    max-height: 410px !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    transform: scale(1.18) !important;
    mix-blend-mode: normal !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 22px 34px rgba(121, 44, 255, 0.38));
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

@media (max-width: 760px) {
    .hero.hero-circulo {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        border-radius: 22px !important;
    }

    .hero.hero-circulo .hero-contenido {
        min-height: auto !important;
        padding: 36px 24px 12px !important;
        align-items: center;
        text-align: center;
    }

    .hero.hero-circulo .hero-marca-visual {
        min-height: 270px !important;
        height: 270px !important;
        padding: 0 20px 24px !important;
    }

    .hero.hero-circulo .hero-marca-visual img {
        width: min(78vw, 300px) !important;
        max-width: 300px !important;
        max-height: 250px !important;
    }
}