/* ============================================
   QORIMIA - Inicio estilo e-commerce grande
   Se carga DESPUÉS de index.css (no lo reemplaza).
   ============================================ */

/* ---------- Barra de beneficios ---------- */
.beneficios-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 22px;
}
.beneficio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(217, 178, 111, 0.2);
}
.beneficio > i { font-size: 22px; color: var(--qori-oro, #d9b26f); flex-shrink: 0; }
.beneficio strong { display: block; font-size: 14px; line-height: 1.25; }
.beneficio small { display: block; font-size: 12px; opacity: 0.7; line-height: 1.3; margin-top: 2px; }

/* ---------- Hero a pantalla completa (carrusel de borde a borde) ---------- */
.hero-full {
    --hero-ms: 5500ms;
    position: relative;
    width: 100%;
    aspect-ratio: 2000 / 601;      /* misma proporción de los banners: no se recorta */
    max-height: 640px;             /* tope en monitores muy anchos */
    overflow: hidden;
    background: #1d0a18;
    color: #fff;
}
.hero-track {
    position: absolute;
    inset: 0;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    transition: opacity 0.23s ease;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: block;
    color: #fff;
    text-decoration: none;
}
.hero-slide picture, .hero-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.hero-slide.con-texto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(42, 15, 34, 0.78) 0%, rgba(42, 15, 34, 0.3) 42%, transparent 70%);
}
.hero-texto {
    position: absolute;
    z-index: 2;
    /* el texto se alinea con el contenido de la página, no con el borde de la pantalla */
    left: max(5%, calc((100% - 1400px) / 2 + 24px));
    top: 50%;
    transform: translateY(-50%);
    max-width: min(48%, 520px);
}
.hero-texto h2 {
    font-family: var(--qori-serif, Georgia, serif);
    font-size: clamp(22px, 3.2vw, 44px);
    line-height: 1.12;
    margin: 0 0 10px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.hero-texto p { font-size: clamp(13px, 1.4vw, 18px); margin: 0 0 18px; opacity: 0.92; }
.hero-btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    color: #2a0f22;
    background: linear-gradient(135deg, var(--qori-oro-claro, #f3dca4), var(--qori-oro-oscuro, #b8863b));
}

/* Flechas: aparecen al pasar el mouse (como en Falabella / Probela) */
.hero-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    color: #fff;
    background: rgba(42, 15, 34, 0.55);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.25s, background 0.2s;
}
.hero-full:hover .hero-flecha,
.hero-full:focus-within .hero-flecha { opacity: 1; }
.hero-flecha:hover { background: rgba(236, 72, 153, 0.85); }
.hero-prev { left: clamp(10px, 2vw, 32px); }
.hero-next { right: clamp(10px, 2vw, 32px); }

/* Indicadores en barra con progreso del autoplay + botón pausa */
.hero-ctrl {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    pointer-events: none;
}
.hero-ctrl > * { pointer-events: auto; }
.hero-dots { display: flex; gap: 6px; }
.hero-dots button {
    position: relative;
    width: 44px;
    height: 18px;
    padding: 0;
    border: none;
    cursor: pointer;
    background: transparent;
}
.hero-dots button::before,
.hero-dots button span {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 4px;
}
.hero-dots button::before { right: 0; background: rgba(255, 255, 255, 0.45); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.hero-dots button span { width: 0; background: var(--qori-oro, #d9b26f); }
.hero-dots button.activo span { animation: heroProgreso var(--hero-ms) linear forwards; }
.hero-full.pausado .hero-dots button.activo span { animation-play-state: paused; }
.hero-full.sin-auto .hero-dots button.activo span { animation: none; width: 100%; }
@keyframes heroProgreso { from { width: 0; } to { width: 100%; } }
.hero-pausa {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 11px;
    color: #fff;
    background: rgba(42, 15, 34, 0.6);
    backdrop-filter: blur(4px);
    transition: background 0.2s;
}
.hero-pausa:hover { background: rgba(236, 72, 153, 0.85); }
.hero-pausa[hidden] { display: none; }

/* Tarjetas promocionales bajo el carrusel (antes "laterales") */
.promo-tiles {
    display: grid;
    gap: 14px;
    margin: 4px 0 30px;
}
.promo-tiles.n1 { grid-template-columns: minmax(0, 1fr); max-width: 600px; margin-left: auto; margin-right: auto; }
.promo-tiles.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.promo-tiles.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.promo-tiles.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.promo-tile {
    position: relative;
    display: block;
    aspect-ratio: 600 / 270;
    border-radius: 16px;
    overflow: hidden;
    background: #1d0a18;
    color: #fff;
    text-decoration: none;
}
.promo-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
a.promo-tile:hover img { transform: scale(1.05); }
.promo-tile.con-texto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(42, 15, 34, 0.8), transparent 65%);
}
.promo-tile .lat-texto { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; }
.promo-tile .lat-texto strong { display: block; font-size: 17px; font-family: var(--qori-serif, Georgia, serif); }
.promo-tile .lat-texto span { font-size: 13px; opacity: 0.9; }

/* Celular: si hay versión móvil se usa un formato cuadrado; si no, el banner completo sin recortar */
@media (max-width: 800px) {
    .hero-full.hero-movil-ok { aspect-ratio: 1 / 1; max-height: 520px; }
    .hero-texto { max-width: 78%; left: 6%; top: auto; bottom: 40px; transform: none; }
    .hero-slide.con-texto::after { background: linear-gradient(0deg, rgba(42, 15, 34, 0.85) 0%, transparent 70%); }
    .hero-flecha { display: none; }
    .hero-ctrl { bottom: 6px; gap: 10px; }
    .hero-dots button { width: 30px; }
    .hero-pausa { width: 26px; height: 26px; font-size: 10px; }
    .promo-tiles.n2, .promo-tiles.n3, .promo-tiles.n4 { grid-template-columns: minmax(0, 1fr); }
}
@media (hover: none) {
    .hero-flecha { display: none; }
}

/* ---------- Secciones ---------- */
.home-sec { margin-bottom: 38px; }

/* ---------- Categorías en círculos ---------- */
.cat-circulos {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 6px 4px 14px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
.cat-circulo {
    flex: 0 0 104px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
}
.cat-circulo .cc-img {
    width: 92px;
    height: 92px;
    margin: 0 auto 8px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--qori-oro, #d9b26f);
    background: var(--qori-ciruela, #3a1631);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--qori-oro, #d9b26f);
    transition: transform 0.25s, box-shadow 0.25s;
}
.cat-circulo .cc-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-circulo:hover .cc-img { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(217, 178, 111, 0.28); }
.cat-circulo span { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; }

/* ---------- Carruseles de productos ---------- */
.car { position: relative; }
.car-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 4px 2px 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.car-track::-webkit-scrollbar { display: none; }
.car-track > .producto-card {
    flex: 0 0 clamp(172px, 21vw, 242px);
    scroll-snap-align: start;
}
.car-btn {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 4;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(217, 178, 111, 0.5);
    background: rgba(42, 15, 34, 0.92);
    color: var(--qori-oro-claro, #f3dca4);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: background 0.2s, color 0.2s;
}
.car-btn:hover { background: var(--qori-oro, #d9b26f); color: #2a0f22; }
.car-prev { left: -14px; }
.car-next { right: -14px; }
.car.car-sin-scroll .car-btn { display: none; }

/* Etiquetas extra en tarjetas */
.producto-card .badge-descuento { background: #e11d48; color: #fff; font-weight: 800; }
.producto-card .badge-vendido { background: linear-gradient(135deg, #f3dca4, #b8863b); color: #2a0f22; font-weight: 700; }

/* ---------- Ofertas relámpago ---------- */
.sec-relampago {
    padding: 22px 20px 8px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.18), rgba(217, 178, 111, 0.1));
    border: 1px solid rgba(236, 72, 153, 0.35);
}
.chip-max {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    background: #e11d48;
    vertical-align: middle;
}

/* ---------- Banda intermedia / Vende con nosotros ---------- */
.banda-intermedia {
    position: relative;
    display: block;
    min-height: 110px;
    border-radius: 0;
    overflow: hidden;
    margin: 6px 0 24px;
    background: #1d0a18;
    color: #fff;
    text-decoration: none;
}
.banda-intermedia img { width: 100%; height: auto; max-height: 380px; display: block; min-height: 110px; object-fit: cover; }
.banda-intermedia .banda-texto {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 max(6%, calc((100% - 1400px) / 2 + 24px));
    background: linear-gradient(90deg, rgba(42, 15, 34, 0.85), transparent 70%);
}
.banda-intermedia h2 { font-family: var(--qori-serif, Georgia, serif); font-size: clamp(20px, 2.8vw, 32px); margin: 0 0 6px; }
.banda-intermedia p { margin: 0; font-size: clamp(13px, 1.4vw, 16px); opacity: 0.92; }

.banda-vende {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 26px 30px;
    border-radius: 18px;
    margin-bottom: 38px;
    background: linear-gradient(135deg, var(--qori-ciruela, #3a1631), #5a1f45);
    border: 1px solid rgba(217, 178, 111, 0.35);
}
.banda-vende h2 { font-family: var(--qori-serif, Georgia, serif); font-size: clamp(20px, 2.6vw, 28px); margin: 0 0 4px; }
.banda-vende p { margin: 0; opacity: 0.85; }

/* ---------- Tiendas destacadas ---------- */
.tiendas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}
.tienda-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 14px;
    border-radius: 16px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(217, 178, 111, 0.2);
    transition: transform 0.25s, border-color 0.25s;
}
.tienda-card:hover { transform: translateY(-4px); border-color: var(--qori-oro, #d9b26f); }
.tienda-logo {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--qori-ciruela, #3a1631);
    border: 2px solid var(--qori-oro, #d9b26f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    color: var(--qori-oro, #d9b26f);
}
.tienda-logo img { width: 100%; height: 100%; object-fit: cover; }
.tienda-card strong { font-size: 15px; }
.tienda-card small { opacity: 0.7; font-size: 12px; }
.tienda-card .tienda-ir { font-size: 12px; font-weight: 700; color: var(--qori-oro-claro, #f3dca4); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
    .beneficios-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .car-prev { left: -6px; }
    .car-next { right: -6px; }
}
@media (max-width: 800px) {
    .car-btn { display: none; }
    .sec-relampago { padding: 16px 12px 4px; }
}
@media (max-width: 520px) {
    .beneficio { padding: 10px 12px; gap: 9px; }
    .beneficio > i { font-size: 18px; }
    .beneficio small { display: none; }
    .cat-circulo { flex-basis: 88px; }
    .cat-circulo .cc-img { width: 76px; height: 76px; }
    .banda-vende { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .promo-tile img, .cat-circulo .cc-img, .tienda-card { transition: none; }
    .hero-track { transition: none; }
}

/* ---------- Auxiliares ---------- */
.home-h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   ANIMACIONES DE BANNERS
   (se activan solo si el usuario no pidió "reducir movimiento";
    el JS agrega .anim al carrusel y .reveal a las tarjetas)
   ============================================================ */

/* --- Carrusel principal: zoom lento (efecto Ken Burns) en la diapositiva activa --- */
.hero-slide picture { overflow: hidden; }          /* el zoom no invade la diapositiva vecina */
.hero-full.anim .hero-slide img {
    transform: scale(1);
    transition: transform 0.9s ease-out;           /* al salir vuelve suave a su tamaño */
    will-change: transform;
}
.hero-full.anim .hero-slide.activa img {
    transform: scale(1.08);
    transition: transform calc(var(--hero-ms) + 2000ms) linear;   /* dura lo que dura la diapositiva */
}

/* --- Texto: entra escalonado (título → subtítulo → botón) --- */
.hero-full.anim .hero-texto h2,
.hero-full.anim .hero-texto p,
.hero-full.anim .hero-btn {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.hero-full.anim .hero-slide.activa .hero-texto h2 { opacity: 1; transform: none; transition: opacity 0.8s ease 0.30s, transform 0.8s ease 0.30s; }
.hero-full.anim .hero-slide.activa .hero-texto p  { opacity: 1; transform: none; transition: opacity 0.8s ease 0.50s, transform 0.8s ease 0.50s; }
.hero-full.anim .hero-slide.activa .hero-btn      { opacity: 1; transform: none; transition: opacity 0.8s ease 0.70s, transform 0.8s ease 0.70s; }

/* --- Botón del banner: destello que lo cruza cada pocos segundos --- */
.hero-btn { position: relative; overflow: hidden; }
.hero-btn::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    transform: skewX(-20deg);
    opacity: 0;
}
.hero-full.anim .hero-slide.activa .hero-btn::after { animation: heroBrillo 3.2s ease-in-out 1.6s infinite; }
@keyframes heroBrillo {
    0%   { left: -60%;  opacity: 0; }
    10%  { opacity: 1; }
    40%  { left: 130%;  opacity: 1; }
    41%, 100% { left: 130%; opacity: 0; }
}
.hero-slide:hover .hero-btn { filter: brightness(1.08); }

/* --- Tarjetas promocionales: aparecen al hacer scroll (una tras otra) --- */
.promo-tile.reveal {
    opacity: 0;
    transform: translateY(26px) scale(0.97);
    transition: opacity 0.7s ease var(--d, 0ms), transform 0.7s ease var(--d, 0ms);
}
.promo-tile.reveal.visible { opacity: 1; transform: none; }

/* --- Tarjetas promocionales: destello al pasar el mouse --- */
.promo-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
    transform: translateX(-120%);
    pointer-events: none;
}
a.promo-tile:hover::before { transform: translateX(120%); transition: transform 0.8s ease; }

@media (prefers-reduced-motion: reduce) {
    .hero-full.anim .hero-slide img,
    .hero-full.anim .hero-texto h2,
    .hero-full.anim .hero-texto p,
    .hero-full.anim .hero-btn { transition: none; transform: none; opacity: 1; }
    .hero-btn::after, .promo-tile::before { display: none; }
    .promo-tile.reveal { opacity: 1; transform: none; transition: none; }
}