/* =========================================================================
   TECNOEA - HOJA DE ESTILOS PRINCIPAL
   Sistema de diseño: tokens de color, tipografía y componentes reutilizables
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS DE DISEÑO (variables CSS)
   Centralizamos paleta, tipografía y medidas para mantener consistencia
   y facilitar el mantenimiento (cambiar un color acá afecta todo el sitio).
   ------------------------------------------------------------------------- */
:root {
    /* Paleta de color — alineada a la identidad de Estudios Ackbar */
    --color-primario: #1E4DB7;        /* Azul "rack": botones de acción, links */
    --color-primario-oscuro: #1A3E9A;
    --color-secundario: #11201D;      /* "Ink": header, footer */
    --color-fondo: #EEF1EF;           /* "Paper": fondo general */
    --color-superficie: #FFFFFF;      /* Tarjetas, modales */
    --color-acento: #E8A23A;          /* Ámbar: ofertas, descuentos y CTAs */
    --color-exito: #4C9A6B;           /* Verde: stock disponible, confirmaciones */
    --color-peligro: #DC2626;         /* Rojo: errores, stock agotado */
    --color-texto: #11201D;
    --color-texto-secundario: #4B5C57;
    --color-borde: #C7D2CC;

    /* Tipografía — misma familia que el sitio institucional de Ackbar */
    --fuente-display: 'Space Grotesk', -apple-system, sans-serif;
    --fuente-cuerpo: 'IBM Plex Sans', -apple-system, sans-serif;

    /* Sombras (elevación sutil tipo Material/Amazon) */
    --sombra-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --sombra-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --sombra-lg: 0 12px 28px rgba(15, 23, 42, 0.12);

    /* Radios de borde */
    --radio-sm: 8px;
    --radio-md: 12px;
    --radio-lg: 20px;

    /* Transiciones */
    --transicion-rapida: all 0.18s ease;
    --transicion-normal: all 0.3s ease;
}

/* -------------------------------------------------------------------------
   2. RESET Y BASE
   ------------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
    font-family: var(--fuente-cuerpo);
    color: var(--color-texto);
    background-color: var(--color-fondo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .fuente-display {
    font-family: var(--fuente-display);
    font-weight: 700;
    letter-spacing: -0.02em;
}

a { text-decoration: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--color-primario);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

.contenedor-angosto { max-width: 1320px; margin: 0 auto; }

/* -------------------------------------------------------------------------
   3. TOPBAR (franja superior: envíos, contacto, redes)
   ------------------------------------------------------------------------- */
.topbar {
    background-color: var(--color-secundario);
    color: #CBD5E1;
    font-size: 0.8rem;
    padding: 6px 0;
}
.topbar a { color: #CBD5E1; }
.topbar a:hover { color: #fff; }

/* -------------------------------------------------------------------------
   4. HEADER PRINCIPAL
   ------------------------------------------------------------------------- */
.header-principal {
    background-color: var(--color-superficie);
    box-shadow: var(--sombra-sm);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.logo-marca {
    font-family: var(--fuente-display);
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--color-secundario);
}
.logo-marca span { color: var(--color-primario); }

.buscador-productos {
    position: relative;
    width: 100%;
}
.buscador-productos input {
    border-radius: 999px;
    border: 1.5px solid var(--color-borde);
    padding: 0.6rem 1.2rem;
    padding-right: 3rem;
    width: 100%;
    transition: var(--transicion-rapida);
}
.buscador-productos input:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.buscador-productos button {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    border-radius: 999px;
    background: var(--color-primario);
    border: none;
    color: #fff;
    padding: 0 1.1rem;
    transition: var(--transicion-rapida);
}
.buscador-productos button:hover { background: var(--color-primario-oscuro); }

.resultados-busqueda {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--color-superficie);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-lg);
    max-height: 420px;
    overflow-y: auto;
    z-index: 1050;
    display: none;
}
.resultados-busqueda.activo { display: block; }
.resultado-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    transition: var(--transicion-rapida);
    color: var(--color-texto);
}
.resultado-item:hover { background-color: var(--color-fondo); }
.resultado-item img { width: 44px; height: 44px; object-fit: contain; }

.acciones-header .accion-item {
    color: var(--color-texto);
    text-align: center;
    position: relative;
    transition: var(--transicion-rapida);
}
.acciones-header .accion-item:hover { color: var(--color-primario); }
.acciones-header .accion-item i { font-size: 1.35rem; }
.acciones-header .etiqueta-accion { font-size: 0.7rem; display: block; }

.badge-carrito {
    position: absolute;
    top: -6px;
    right: -10px;
    background: var(--color-acento);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* -------------------------------------------------------------------------
   5. NAVEGACIÓN PRINCIPAL (menú + barra de categorías tipo "chips")
   ------------------------------------------------------------------------- */
.nav-principal {
    background-color: var(--color-secundario);
}
.nav-principal .nav-link {
    color: #E2E8F0 !important;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.7rem 1rem !important;
    transition: var(--transicion-rapida);
    border-radius: var(--radio-sm);
}
.nav-principal .nav-link:hover,
.nav-principal .nav-link.active {
    color: #fff !important;
    background-color: rgba(255,255,255,0.08);
}

.barra-categorias {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px 0;
    scrollbar-width: thin;
}
.barra-categorias::-webkit-scrollbar { height: 4px; }
.barra-categorias::-webkit-scrollbar-thumb { background: var(--color-borde); border-radius: 4px; }

.chip-categoria {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-texto);
    transition: var(--transicion-rapida);
    flex-shrink: 0;
}
.chip-categoria:hover {
    border-color: var(--color-primario);
    color: var(--color-primario);
    transform: translateY(-2px);
    box-shadow: var(--sombra-sm);
}
.chip-categoria i { font-size: 1rem; color: var(--color-primario); }

/* -------------------------------------------------------------------------
   6. HERO PRINCIPAL
   ------------------------------------------------------------------------- */
.hero-principal {
    background: linear-gradient(135deg, #1E4DB7 0%, #0A2A7A 100%);
    color: #fff;
    border-radius: var(--radio-lg);
    overflow: hidden;
    position: relative;
}
.hero-principal::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 85% 30%, rgba(37,99,235,0.35), transparent 45%);
    pointer-events: none;
}
.hero-principal .eyebrow {
    color: var(--color-acento);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8rem;
}
.hero-principal h1 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.1;
}
.btn-hero {
    background: var(--color-acento);
    color: #fff;
    border: none;
    border-radius: var(--radio-sm);
    padding: 0.75rem 1.8rem;
    font-weight: 700;
    transition: var(--transicion-rapida);
}
.btn-hero:hover { background: #D8932E; transform: translateY(-2px); color: #fff; }

/* -------------------------------------------------------------------------
   7. BANNER PROMOCIONAL
   ------------------------------------------------------------------------- */
.banner-promo {
    border-radius: var(--radio-lg);
    overflow: hidden;
    position: relative;
    min-height: 180px;
    display: flex;
    align-items: center;
    color: #fff;
    box-shadow: var(--sombra-md);
    transition: var(--transicion-normal);
}
.banner-promo:hover { transform: scale(1.01); }

/* -------------------------------------------------------------------------
   8. TÍTULOS DE SECCIÓN
   ------------------------------------------------------------------------- */
.titulo-seccion {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.4rem;
}
.titulo-seccion h2 {
    font-size: 1.6rem;
    margin: 0;
    position: relative;
    padding-left: 16px;
    border-left: 5px solid var(--color-primario);
}
.titulo-seccion .ver-todo {
    color: var(--color-primario);
    font-weight: 600;
    font-size: 0.9rem;
}
.titulo-seccion .ver-todo:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   9. TARJETA DE PRODUCTO
   Componente central del catálogo: imagen, badges, precio, acciones.
   ------------------------------------------------------------------------- */
.tarjeta-producto {
    background: var(--color-superficie);
    border-radius: var(--radio-md);
    border: 1px solid var(--color-borde);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: var(--transicion-normal);
    position: relative;
}
.tarjeta-producto:hover {
    box-shadow: var(--sombra-lg);
    transform: translateY(-4px);
    border-color: transparent;
}

.tarjeta-producto .zona-imagen {
    position: relative;
    background: #F1F5F9;
    padding: 1.2rem;
    text-align: center;
}
.tarjeta-producto .zona-imagen img {
    max-height: 160px;
    width: 100%;
    object-fit: contain;
    transition: var(--transicion-normal);
}
.tarjeta-producto:hover .zona-imagen img { transform: scale(1.06); }

/* Badge de descuento con forma de "etiqueta de precio" - elemento de firma */
.badge-descuento {
    position: absolute;
    top: 10px;
    left: 0;
    background: var(--color-acento);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 10px 4px 12px;
    clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%);
}

.badge-nuevo {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--color-exito);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}

.btn-favorito {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-texto-secundario);
    transition: var(--transicion-rapida);
    backdrop-filter: blur(4px);
}
.btn-favorito:hover { color: var(--color-peligro); transform: scale(1.1); }
.btn-favorito.activo { color: var(--color-peligro); }

.tarjeta-producto .cuerpo {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.tarjeta-producto .categoria-mini {
    font-size: 0.72rem;
    color: var(--color-texto-secundario);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

.tarjeta-producto .nombre-producto {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-texto);
    margin: 4px 0 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.tarjeta-producto .descripcion-corta {
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.estrellas { color: #F59E0B; font-size: 0.85rem; }
.cantidad-resenas { font-size: 0.78rem; color: var(--color-texto-secundario); }

.zona-precio { margin-top: auto; padding-top: 8px; }
.precio-actual {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-secundario);
}
.precio-anterior {
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
    text-decoration: line-through;
    margin-left: 6px;
}

.estado-stock { font-size: 0.78rem; font-weight: 600; }
.estado-stock.disponible { color: var(--color-exito); }
.estado-stock.bajo { color: var(--color-acento); }
.estado-stock.agotado { color: var(--color-peligro); }

.acciones-producto { display: flex; gap: 6px; margin-top: 10px; }
.btn-agregar-carrito {
    flex: 1;
    background: var(--color-primario);
    color: #fff;
    border: none;
    border-radius: var(--radio-sm);
    padding: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--transicion-rapida);
}
.btn-agregar-carrito:hover { background: var(--color-primario-oscuro); }
.btn-comprar-ahora {
    flex: 1;
    background: var(--color-secundario);
    color: #fff;
    border: none;
    border-radius: var(--radio-sm);
    padding: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--transicion-rapida);
}
.btn-comprar-ahora:hover { background: #0A2A7A; }

@keyframes pulso-agregado {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.animar-agregado { animation: pulso-agregado 0.35s ease; }

/* -------------------------------------------------------------------------
   10. TARJETAS DE CATEGORÍA
   ------------------------------------------------------------------------- */
.tarjeta-categoria {
    background: var(--color-superficie);
    border-radius: var(--radio-md);
    border: 1px solid var(--color-borde);
    text-align: center;
    padding: 1.4rem 0.8rem;
    color: var(--color-texto);
    transition: var(--transicion-normal);
    display: block;
}
.tarjeta-categoria:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-md);
    border-color: var(--color-primario);
}
.tarjeta-categoria i {
    font-size: 2rem;
    color: var(--color-primario);
    display: block;
    margin-bottom: 8px;
}
.tarjeta-categoria span { font-size: 0.85rem; font-weight: 600; }

/* -------------------------------------------------------------------------
   11. SECCIÓN DE OFERTAS
   ------------------------------------------------------------------------- */
.seccion-ofertas {
    background: linear-gradient(135deg, #FCF3E3 0%, #F9E6C7 100%);
    border-radius: var(--radio-lg);
    padding: 2rem;
}
.contador-oferta { display: flex; gap: 8px; }
.contador-oferta .bloque-tiempo {
    background: var(--color-secundario);
    color: #fff;
    border-radius: var(--radio-sm);
    padding: 6px 10px;
    text-align: center;
    min-width: 52px;
}
.contador-oferta .bloque-tiempo strong { display: block; font-size: 1.1rem; }
.contador-oferta .bloque-tiempo small { font-size: 0.65rem; opacity: 0.8; }

/* -------------------------------------------------------------------------
   12. MARCAS
   ------------------------------------------------------------------------- */
.logo-marca-item {
    filter: grayscale(100%) opacity(0.6);
    transition: var(--transicion-normal);
    max-height: 42px;
    object-fit: contain;
}
.logo-marca-item:hover { filter: grayscale(0%) opacity(1); transform: scale(1.05); }

/* -------------------------------------------------------------------------
   13. NEWSLETTER
   ------------------------------------------------------------------------- */
.seccion-newsletter {
    background: var(--color-secundario);
    border-radius: var(--radio-lg);
    color: #fff;
    padding: 2.5rem;
}
.form-newsletter input { border-radius: 999px; border: none; padding: 0.75rem 1.4rem; }
.form-newsletter button {
    border-radius: 999px;
    background: var(--color-acento);
    color: #fff;
    border: none;
    padding: 0.75rem 1.6rem;
    font-weight: 700;
    transition: var(--transicion-rapida);
}
.form-newsletter button:hover { background: #D8932E; }

/* -------------------------------------------------------------------------
   14. FOOTER
   ------------------------------------------------------------------------- */
.footer-principal { background: var(--color-secundario); color: #94A3B8; }
.footer-principal h6 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.footer-principal a {
    color: #94A3B8;
    display: block;
    margin-bottom: 8px;
    font-size: 0.88rem;
    transition: var(--transicion-rapida);
}
.footer-principal a:hover { color: #fff; padding-left: 4px; }
.redes-sociales a {
    display: inline-flex;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}
.redes-sociales a:hover { background: var(--color-primario); }
.iconos-pago i { font-size: 1.8rem; margin-right: 10px; color: #94A3B8; }
.franja-copyright { border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.8rem; padding: 1rem 0; }

/* -------------------------------------------------------------------------
   15. BOTÓN FLOTANTE SCROLL-TOP
   ------------------------------------------------------------------------- */
.btn-scroll-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--color-primario);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sombra-md);
    opacity: 0;
    visibility: hidden;
    transition: var(--transicion-normal);
    z-index: 1040;
    border: none;
}
.btn-scroll-top.visible { opacity: 1; visibility: visible; }
.btn-scroll-top:hover { background: var(--color-primario-oscuro); transform: translateY(-3px); }

/* -------------------------------------------------------------------------
   16. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .hero-principal { text-align: center; padding: 2.5rem 1.2rem; }
    .titulo-seccion h2 { font-size: 1.25rem; }
    .acciones-header .etiqueta-accion { display: none; }
    .seccion-newsletter { padding: 1.6rem; text-align: center; }
}

@media (max-width: 576px) {
    .tarjeta-producto .zona-imagen img { max-height: 120px; }
    .acciones-producto { flex-wrap: wrap; }
}

/* =========================================================================
   17. CARRITO DE COMPRAS
   ========================================================================= */
.badge-carrito-vacio { opacity: 0.6; }

.titulo-carrito {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
}

.carrito-layout {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.columna-items { flex: 1 1 580px; min-width: 0; }
.columna-resumen { flex: 1 1 320px; max-width: 380px; }
@media (max-width: 900px) {
    .columna-resumen { max-width: 100%; }
}

.item-carrito {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: 1rem;
    margin-bottom: 0.9rem;
}
.item-carrito .img-item {
    width: 76px;
    height: 76px;
    min-height: 0;
    border-radius: var(--radio-sm);
    font-size: 1.8rem;
    flex-shrink: 0;
}
.item-carrito .info-item { flex: 1 1 auto; min-width: 0; }
.item-carrito .nombre-item {
    font-weight: 600;
    color: var(--color-texto);
    text-decoration: none;
    display: block;
    margin-bottom: 0.2rem;
}
.item-carrito .precio-unitario-item {
    color: var(--color-texto-secundario);
    font-size: 0.88rem;
}

.selector-cantidad {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio-sm);
    overflow: hidden;
}
.selector-cantidad button {
    background: var(--color-fondo);
    border: none;
    width: 30px;
    height: 30px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primario);
}
.selector-cantidad button:hover { background: var(--color-borde); }
.selector-cantidad input {
    width: 40px;
    text-align: center;
    border: none;
    font-weight: 600;
    -moz-appearance: textfield;
}

.subtotal-item {
    font-weight: 700;
    color: var(--color-secundario);
    min-width: 100px;
    text-align: right;
}

.btn-quitar-item {
    background: transparent;
    border: none;
    color: var(--color-peligro);
    font-size: 1.1rem;
    padding: 4px 6px;
}
.btn-quitar-item:hover { transform: scale(1.1); }

.carrito-vacio {
    text-align: center;
    padding: 4rem 1rem;
    background: var(--color-superficie);
    border-radius: var(--radio-md);
}
.carrito-vacio .icono-vacio { font-size: 3.5rem; margin-bottom: 1rem; }

.caja-resumen {
    background: var(--color-superficie);
    border-radius: var(--radio-md);
    padding: 1.4rem;
    position: sticky;
    top: 90px;
}
.caja-resumen h3 { font-size: 1.15rem; margin-bottom: 1.1rem; }
.fila-resumen {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    font-size: 0.92rem;
    color: var(--color-texto-secundario);
}
.fila-resumen.total {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-secundario);
    border-top: 1px solid var(--color-borde);
    padding-top: 0.8rem;
    margin-top: 0.6rem;
}
.fila-resumen .valor-envio-gratis { color: var(--color-exito); font-weight: 600; }
.fila-resumen .valor-descuento { color: var(--color-exito); }

.caja-cupon { margin: 1.1rem 0; }
.caja-cupon-form {
    display: flex;
    gap: 6px;
}
.caja-cupon-form input {
    flex: 1;
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio-sm);
    padding: 0.5rem 0.7rem;
    font-size: 0.88rem;
    text-transform: uppercase;
}
.caja-cupon-form button {
    background: var(--color-secundario);
    color: #fff;
    border: none;
    border-radius: var(--radio-sm);
    padding: 0 1rem;
    font-weight: 600;
    font-size: 0.85rem;
}
.cupon-aplicado-chip {
    margin-top: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(76,154,107,0.12);
    color: var(--color-exito);
    border-radius: var(--radio-sm);
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
}
.cupon-aplicado-chip button {
    background: transparent;
    border: none;
    color: var(--color-peligro);
    font-weight: 700;
}
.mensaje-cupon-error {
    color: var(--color-peligro);
    font-size: 0.82rem;
    margin-top: 0.4rem;
}

.btn-checkout {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: var(--color-acento);
    color: var(--color-secundario);
    border: none;
    border-radius: var(--radio-sm);
    padding: 0.85rem 1rem;
    font-weight: 700;
    font-size: 1rem;
    margin-top: 0.5rem;
    transition: var(--transicion-rapida);
}
.btn-checkout:hover { background: #D8932E; transform: translateY(-2px); }

.btn-vaciar-carrito {
    background: transparent;
    border: 1.5px solid var(--color-borde);
    color: var(--color-texto-secundario);
    border-radius: var(--radio-sm);
    padding: 0.55rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    margin-top: 1rem;
}
.btn-vaciar-carrito:hover { border-color: var(--color-peligro); color: var(--color-peligro); }

.medios-pago-mini {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 1rem;
    font-size: 1.3rem;
    color: var(--color-texto-secundario);
}

/* =========================================================================
   18. CHECKOUT (5 PASOS)
   ========================================================================= */
.stepper-checkout {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.paso-stepper {
    flex: 1;
    text-align: center;
    position: relative;
    padding-top: 2px;
}
.paso-stepper .circulo-paso {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-superficie);
    border: 2px solid var(--color-borde);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.4rem;
    font-weight: 700;
    color: var(--color-texto-secundario);
    transition: var(--transicion-rapida);
}
.paso-stepper .etiqueta-paso {
    font-size: 0.78rem;
    color: var(--color-texto-secundario);
    font-weight: 600;
}
.paso-stepper.activo .circulo-paso {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: #fff;
}
.paso-stepper.activo .etiqueta-paso { color: var(--color-primario); }
.paso-stepper.completado .circulo-paso {
    background: var(--color-exito);
    border-color: var(--color-exito);
    color: #fff;
}
.paso-stepper:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 60%;
    width: 80%;
    height: 2px;
    background: var(--color-borde);
    z-index: -1;
}

.tarjeta-checkout {
    background: var(--color-superficie);
    border-radius: var(--radio-md);
    padding: 1.6rem;
    max-width: 680px;
    margin: 0 auto;
}
.tarjeta-checkout h2 {
    font-size: 1.3rem;
    margin-bottom: 1.4rem;
}

.grupo-form { margin-bottom: 1.1rem; }
.grupo-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--color-texto);
}
.grupo-form input,
.grupo-form select,
.grupo-form textarea {
    width: 100%;
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio-sm);
    padding: 0.6rem 0.8rem;
    font-size: 0.92rem;
    font-family: inherit;
    transition: var(--transicion-rapida);
}
.grupo-form input:focus,
.grupo-form select:focus,
.grupo-form textarea:focus {
    outline: none;
    border-color: var(--color-primario);
}
.grupo-form .texto-error {
    color: var(--color-peligro);
    font-size: 0.78rem;
    margin-top: 0.3rem;
    display: none;
}
.grupo-form.con-error input,
.grupo-form.con-error select { border-color: var(--color-peligro); }
.grupo-form.con-error .texto-error { display: block; }

.fila-form {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.fila-form .grupo-form { flex: 1 1 200px; }

.opcion-tarjeta {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    border: 1.5px solid var(--color-borde);
    border-radius: var(--radio-md);
    padding: 1rem;
    margin-bottom: 0.8rem;
    cursor: pointer;
    transition: var(--transicion-rapida);
}
.opcion-tarjeta:hover { border-color: var(--color-primario); }
.opcion-tarjeta.seleccionada {
    border-color: var(--color-primario);
    background: rgba(30,77,183,0.05);
}
.opcion-tarjeta input[type="radio"] { margin-top: 4px; }
.opcion-tarjeta .icono-metodo { font-size: 1.6rem; }
.opcion-tarjeta .titulo-metodo { font-weight: 700; }
.opcion-tarjeta .descripcion-metodo {
    font-size: 0.82rem;
    color: var(--color-texto-secundario);
}
.detalle-metodo-pago {
    display: none;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px dashed var(--color-borde);
}
.detalle-metodo-pago.visible { display: block; }

.resumen-mini-checkout {
    background: var(--color-fondo);
    border-radius: var(--radio-md);
    padding: 1rem 1.2rem;
    margin-bottom: 1.4rem;
    font-size: 0.88rem;
}
.resumen-mini-checkout .fila-resumen { margin-bottom: 0.4rem; }

.acciones-checkout {
    display: flex;
    justify-content: space-between;
    margin-top: 1.6rem;
    gap: 1rem;
}
.btn-volver-paso {
    background: transparent;
    border: 1.5px solid var(--color-borde);
    color: var(--color-texto-secundario);
    border-radius: var(--radio-sm);
    padding: 0.7rem 1.4rem;
    font-weight: 600;
}
.btn-volver-paso:hover { border-color: var(--color-primario); color: var(--color-primario); }
.btn-siguiente-paso {
    background: var(--color-primario);
    color: #fff;
    border: none;
    border-radius: var(--radio-sm);
    padding: 0.7rem 1.6rem;
    font-weight: 700;
    flex: 1;
    max-width: 220px;
}
.btn-siguiente-paso:hover { background: var(--color-primario-oscuro); }

.pantalla-confirmacion {
    text-align: center;
    padding: 2rem 1rem;
}
.pantalla-confirmacion .icono-exito {
    font-size: 4rem;
    color: var(--color-exito);
    margin-bottom: 1rem;
}
.numero-pedido-confirmacion {
    display: inline-block;
    background: var(--color-fondo);
    border-radius: var(--radio-sm);
    padding: 0.5rem 1.2rem;
    font-weight: 700;
    color: var(--color-primario);
    margin: 0.8rem 0 1.4rem;
    letter-spacing: 0.5px;
}

@media (max-width: 576px) {
    .item-carrito { flex-wrap: wrap; }
    .subtotal-item { width: 100%; text-align: left; margin-top: 0.4rem; }
    .acciones-checkout { flex-direction: column-reverse; }
    .btn-siguiente-paso { max-width: 100%; }
}

/* =========================================================================
   19. PÁGINA DE DETALLE DE PRODUCTO
   ========================================================================= */
.migas-pan {
    font-size: 0.84rem;
    color: var(--color-texto-secundario);
    margin-bottom: 1.2rem;
}
.migas-pan a { color: var(--color-texto-secundario); text-decoration: none; }
.migas-pan a:hover { color: var(--color-primario); }

.detalle-producto-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}
@media (max-width: 860px) {
    .detalle-producto-layout { grid-template-columns: 1fr; gap: 1.6rem; }
}

.galeria-detalle .imagen-principal {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radio-lg);
    overflow: hidden;
    background: var(--color-superficie);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    position: relative;
}
.galeria-detalle .imagen-principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.galeria-detalle .badge-descuento,
.galeria-detalle .badge-nuevo { position: absolute; top: 14px; left: 14px; z-index: 2; }
.galeria-detalle .badge-nuevo { left: auto; right: 14px; }

.info-detalle-producto .categoria-mini { display: block; margin-bottom: 6px; }
.info-detalle-producto h1 {
    font-size: 1.7rem;
    margin-bottom: 0.5rem;
    line-height: 1.25;
}
.info-detalle-producto .sku-mini { font-size: 0.8rem; color: var(--color-texto-secundario); margin-bottom: 0.8rem; }

.info-detalle-producto .estrellas { margin-bottom: 1.1rem; }
.info-detalle-producto .estrellas a { color: inherit; text-decoration: underline; font-size: 0.85rem; }

.zona-precio-detalle { margin-bottom: 1.2rem; }
.zona-precio-detalle .precio-actual { font-size: 2rem; }
.zona-precio-detalle .precio-anterior { font-size: 1.1rem; margin-left: 10px; }
.zona-precio-detalle .badge-descuento { position: static; display: inline-block; margin-left: 10px; vertical-align: middle; }

.descripcion-detalle { color: var(--color-texto-secundario); line-height: 1.6; margin-bottom: 1.4rem; }

.selector-cantidad-detalle {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.selector-cantidad-detalle .selector-cantidad button { width: 38px; height: 38px; font-size: 1.2rem; }
.selector-cantidad-detalle .selector-cantidad input { width: 50px; font-size: 1rem; }

.acciones-detalle-producto { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 1.4rem; }
.acciones-detalle-producto .btn-agregar-carrito-detalle,
.acciones-detalle-producto .btn-comprar-ahora-detalle {
    flex: 1 1 160px;
    min-width: 0;
    border: none;
    border-radius: var(--radio-sm);
    padding: 0.85rem 1rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    transition: var(--transicion-rapida);
}
.acciones-detalle-producto .btn-agregar-carrito-detalle { background: var(--color-primario); }
.acciones-detalle-producto .btn-agregar-carrito-detalle:hover { background: var(--color-primario-oscuro); }
.acciones-detalle-producto .btn-agregar-carrito-detalle:disabled,
.acciones-detalle-producto .btn-comprar-ahora-detalle:disabled { opacity: 0.5; cursor: not-allowed; }
.acciones-detalle-producto .btn-comprar-ahora-detalle { background: var(--color-secundario); }
.acciones-detalle-producto .btn-comprar-ahora-detalle:hover { background: #0A2A7A; }
.acciones-detalle-producto .btn-favorito-detalle {
    width: 50px; height: 50px;
    border-radius: var(--radio-sm);
    border: 1.5px solid var(--color-borde);
    background: var(--color-superficie);
    font-size: 1.3rem;
    color: var(--color-texto-secundario);
    flex-shrink: 0;
}
.acciones-detalle-producto .btn-favorito-detalle.activo { color: var(--color-peligro); border-color: var(--color-peligro); }

.beneficios-detalle {
    border-top: 1px solid var(--color-borde);
    padding-top: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--color-texto-secundario);
}
.beneficios-detalle span i { color: var(--color-primario); margin-right: 6px; }

/* --- Tabs (especificaciones / reseñas) --- */
.tabs-detalle { margin-bottom: 3rem; }
.tabs-detalle .botones-tab {
    display: flex;
    gap: 6px;
    border-bottom: 2px solid var(--color-borde);
    margin-bottom: 1.4rem;
}
.tabs-detalle .boton-tab {
    background: transparent;
    border: none;
    padding: 0.8rem 1.2rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--color-texto-secundario);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.tabs-detalle .boton-tab.activo { color: var(--color-primario); border-color: var(--color-primario); }

.tabla-especificaciones { width: 100%; border-collapse: collapse; max-width: 620px; }
.tabla-especificaciones tr:nth-child(odd) { background: var(--color-superficie); }
.tabla-especificaciones td { padding: 0.7rem 1rem; font-size: 0.9rem; }
.tabla-especificaciones td:first-child { font-weight: 600; width: 40%; color: var(--color-texto-secundario); }

.lista-resenas { max-width: 680px; }
.resena-item {
    border-bottom: 1px solid var(--color-borde);
    padding: 1.1rem 0;
}
.resena-item .cabecera-resena {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.resena-item .autor-resena { font-weight: 600; font-size: 0.9rem; }
.resena-item .fecha-resena { font-size: 0.78rem; color: var(--color-texto-secundario); }
.resena-item .comentario-resena { font-size: 0.9rem; color: var(--color-texto-secundario); margin-top: 4px; }

.sin-resenas { color: var(--color-texto-secundario); font-size: 0.9rem; }

.seccion-relacionados h2 { font-size: 1.3rem; margin-bottom: 1.2rem; }

.skeleton-detalle { opacity: 0.5; }
@keyframes pulso-skeleton { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } }
.skeleton-detalle .imagen-principal,
.skeleton-detalle .info-detalle-producto > * {
    animation: pulso-skeleton 1.4s ease-in-out infinite;
    background: var(--color-superficie);
    border-radius: var(--radio-sm);
}

@media (max-width: 576px) {
    .acciones-detalle-producto { flex-direction: column; }
    .acciones-detalle-producto .btn-favorito-detalle { width: 100%; }
}