/* =========================================================
   WAWAY · Ajustes móviles compactos
   Esta hoja se carga al final para conservar el diseño de
   escritorio y refinar únicamente las pantallas pequeñas.
========================================================= */

/* Acción de categorías y subcategorías: siempre abajo, sin tapar la imagen. */
.categoria:not(.categoria-ver-todas) .categoria-accion,
.tarjeta-subcategoria .tarjeta-subcategoria-capa {
    top: auto !important;
    right: auto !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.categoria:not(.categoria-ver-todas) .categoria-accion,
.tarjeta-subcategoria .tarjeta-subcategoria-capa > span {
    min-height: 34px !important;
    padding: 8px 14px !important;
    border: 1px solid rgba(157, 83, 60, .18) !important;
    border-radius: 999px !important;
    background: rgba(251, 244, 237, .94) !important;
    box-shadow: 0 8px 20px rgba(61, 42, 31, .13) !important;
    color: #9d533c !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    line-height: 1 !important;
    text-shadow: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    backdrop-filter: blur(6px) !important;
}

.tarjeta-subcategoria .tarjeta-subcategoria-capa {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

@media (max-width: 700px) {
    :root {
        --container: calc(100% - 16px);
        --radius-sm: 11px;
        --radius-md: 15px;
        --radius-lg: 20px;
    }

    /* Encabezado y buscador más livianos. */
    .anuncio-superior {
        min-height: 25px !important;
        padding: 4px 8px !important;
        font-size: 8px !important;
        letter-spacing: .025em !important;
    }

    header.site-header .container,
    body > header:not(.productos-admin-header):not(.dashboard-topbar) .container {
        min-height: 56px !important;
        gap: 10px !important;
    }

    .logo img {
        width: 92px !important;
        height: 39px !important;
    }

    .menu-toggle {
        width: 38px !important;
        height: 38px !important;
    }

    .site-nav,
    body > header .container > nav {
        top: calc(100% + 5px) !important;
        right: 8px !important;
        left: 8px !important;
        border-radius: 15px !important;
    }

    .site-nav ul,
    body > header .container > nav ul {
        padding: 8px !important;
    }

    .site-nav a,
    body > header .container > nav a,
    .site-nav .nav-categorias-toggle,
    body > header .container > nav .nav-categorias-toggle {
        min-height: 39px !important;
        padding: 8px 11px !important;
        font-size: 11px !important;
    }

    .busqueda-superior {
        width: calc(100% - 16px) !important;
        margin: 8px auto 4px !important;
    }

    .buscador-global-form {
        min-height: 42px !important;
        padding: 4px 4px 4px 12px !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
    }

    .buscador-global-icono,
    .buscador-global-icono svg {
        width: 18px !important;
        height: 18px !important;
    }

    .buscador-global-form input {
        padding: 7px 8px !important;
        font-size: 10px !important;
    }

    .buscador-global-form button {
        min-height: 34px !important;
        padding: 7px 12px !important;
        font-size: 9px !important;
    }

    /* Portada: composición horizontal y compacta para reducir el desplazamiento. */
    .hero.hero-v2 {
        display: grid !important;
        grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr) !important;
        gap: 10px !important;
        min-height: 0 !important;
        margin: 8px auto 24px !important;
        padding: 13px 0 8px !important;
        text-align: left !important;
    }

    .hero.hero-v2::before {
        inset: 0 43% 0 -10px !important;
        border-radius: 0 26px 26px 0 !important;
    }

    .hero-copy {
        min-width: 0 !important;
        align-self: center !important;
    }

    .hero .sobrelinea {
        gap: 5px !important;
        margin-bottom: 7px !important;
        font-size: 6.5px !important;
        letter-spacing: .11em !important;
    }

    .hero .sobrelinea::before {
        width: 15px !important;
    }

    .hero-texto h1 {
        margin-bottom: 8px !important;
        font-size: clamp(23px, 7vw, 31px) !important;
        letter-spacing: -.035em !important;
        line-height: .98 !important;
    }

    .hero-texto p {
        margin-bottom: 10px !important;
        font-size: 8.5px !important;
        line-height: 1.5 !important;
    }

    .hero-acciones {
        margin-bottom: 8px !important;
    }

    .hero-acciones .boton {
        width: auto !important;
        min-height: 31px !important;
        padding: 7px 10px !important;
        font-size: 8px !important;
    }

    .hero-confianza {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 3px 7px !important;
        font-size: 6.2px !important;
        line-height: 1.3 !important;
    }

    .hero-confianza span::before {
        width: 11px !important;
        height: 11px !important;
        margin-right: 3px !important;
        font-size: 7px !important;
    }

    .hero-imagen {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        align-self: center !important;
    }

    .hero-imagen-marco {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: .82 / 1 !important;
        border-radius: 42px 13px 13px 13px !important;
    }

    .hero-nota {
        top: 7px !important;
        left: -5px !important;
        max-width: 88px !important;
        padding: 6px 7px !important;
        border-radius: 8px !important;
        font-size: 6px !important;
        line-height: 1.25 !important;
    }

    .hero-nota strong {
        margin-bottom: 2px !important;
        font-size: 6.5px !important;
    }

    .hero-sello {
        right: -3px !important;
        bottom: -10px !important;
        width: 45px !important;
        height: 45px !important;
        border-width: 3px !important;
        font-size: 6.5px !important;
        line-height: 1.05 !important;
    }

    /* Beneficios en una sola franja de tres columnas. */
    .beneficios-rapidos {
        width: calc(100% - 16px) !important;
        margin: 0 auto 30px !important;
    }

    .beneficios-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        border-radius: 14px !important;
    }

    .beneficio-item {
        display: grid !important;
        grid-template-columns: 26px minmax(0, 1fr) !important;
        gap: 6px !important;
        min-height: 67px !important;
        padding: 8px 7px !important;
    }

    .beneficio-item + .beneficio-item {
        border-top: 0 !important;
        border-left: 1px solid var(--line) !important;
    }

    .beneficio-icono {
        width: 26px !important;
        height: 26px !important;
        flex-basis: 26px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
    }

    .beneficio-item strong {
        margin-bottom: 2px !important;
        font-size: 7.5px !important;
        line-height: 1.2 !important;
    }

    .beneficio-item p {
        font-size: 6.2px !important;
        line-height: 1.35 !important;
    }

    /* Espaciado general de secciones. */
    .categorias,
    .productos,
    #nosotros,
    #contacto,
    .proceso,
    .mas-vendidos {
        width: calc(100% - 16px) !important;
        margin-top: 32px !important;
        margin-bottom: 32px !important;
    }

    .seccion-cabecera,
    .mas-vendidos-cabecera {
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .titulo,
    .seccion-cabecera .titulo,
    .mas-vendidos-cabecera .titulo,
    .nosotros-contenido .titulo {
        margin-bottom: 14px !important;
    }

    .titulo .sobrelinea,
    .mas-vendidos .sobrelinea,
    .nosotros-v2 .sobrelinea {
        margin-bottom: 6px !important;
        font-size: 7px !important;
        letter-spacing: .11em !important;
    }

    .titulo h2,
    .mas-vendidos .titulo h2,
    .nosotros-v2 .titulo h2,
    .contacto-titulo h2 {
        margin-bottom: 6px !important;
        font-size: clamp(23px, 7.5vw, 30px) !important;
        line-height: 1.02 !important;
    }

    .titulo p,
    .seccion-cabecera .titulo p {
        font-size: 8.5px !important;
        line-height: 1.5 !important;
    }

    .mas-vendidos-estrella {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
        font-size: 17px !important;
    }

    /* Categorías y subcategorías: dos columnas. */
    .grid-categorias,
    #gridTodasCategorias,
    #gridResultados:not(.grid-resultados-productos) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #gridCategorias .categoria.categoria-compacta,
    #gridTodasCategorias .categoria.categoria-compacta,
    #gridResultados:not(.grid-resultados-productos) .tarjeta-subcategoria {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 14px !important;
    }

    #gridCategorias .categoria.categoria-compacta img,
    #gridTodasCategorias .categoria.categoria-compacta img,
    #gridResultados:not(.grid-resultados-productos) .tarjeta-subcategoria img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        object-fit: cover !important;
    }

    .categoria-ver-todas {
        min-height: 0 !important;
        padding: 13px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 14px !important;
    }

    .categoria-ver-todas h3 {
        margin: 8px 0 5px !important;
        font-size: 17px !important;
        line-height: 1.05 !important;
    }

    .categoria-ver-todas-enlace {
        font-size: 7px !important;
    }

    .categoria-ver-todas-icono {
        grid-template-columns: repeat(2, 8px) !important;
        gap: 3px !important;
    }

    .categoria-ver-todas-icono i {
        width: 8px !important;
        height: 8px !important;
        border-radius: 2px !important;
    }

    .categoria:not(.categoria-ver-todas) .categoria-accion,
    .tarjeta-subcategoria .tarjeta-subcategoria-capa > span {
        bottom: 9px !important;
        min-height: 27px !important;
        padding: 6px 10px !important;
        font-size: 7px !important;
        letter-spacing: .055em !important;
    }

    /* Productos: dos columnas y tarjetas más limpias. */
    .grid-resultados.grid-resultados-productos,
    .grid-mas-vendidos,
    .grid-productos {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .grid-resultados-productos .producto,
    .grid-mas-vendidos .producto,
    .grid-productos .producto {
        min-width: 0 !important;
        border-radius: 13px !important;
    }

    .grid-resultados-productos .producto-galeria-hover,
    .grid-mas-vendidos .producto-galeria-hover,
    .grid-productos .producto-galeria-hover {
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    .grid-resultados-productos .producto-info,
    .grid-mas-vendidos .producto-info,
    .grid-productos .producto-info {
        padding: 8px !important;
    }

    .grid-resultados-productos .producto-categoria,
    .grid-mas-vendidos .producto-categoria,
    .grid-productos .producto-categoria {
        margin-bottom: 4px !important;
        padding: 3px 5px !important;
        font-size: 6.5px !important;
    }

    .grid-resultados-productos .producto-info h3,
    .grid-mas-vendidos .producto-info h3,
    .grid-productos .producto-info h3 {
        min-height: 0 !important;
        margin: 0 0 2px !important;
        font-size: clamp(12px, 3.7vw, 15px) !important;
        line-height: 1.12 !important;
        -webkit-line-clamp: 2 !important;
    }

    .grid-resultados-productos .producto-precio,
    .grid-mas-vendidos .producto-precio,
    .grid-productos .producto-precio {
        margin: 0 0 5px !important;
        font-size: clamp(13px, 4vw, 16px) !important;
    }

    .grid-resultados-productos .producto-pedido-minimo,
    .grid-mas-vendidos .producto-pedido-minimo,
    .grid-productos .producto-pedido-minimo {
        margin: 0 0 5px !important;
        padding: 3px 5px !important;
        font-size: 6.5px !important;
    }

    .grid-resultados-productos .btn-producto,
    .grid-mas-vendidos .btn-producto,
    .grid-productos .btn-producto {
        min-height: 29px !important;
        padding: 6px !important;
    }

    .grid-resultados-productos .btn-producto::after,
    .grid-mas-vendidos .btn-producto::after,
    .grid-productos .btn-producto::after {
        font-size: 8px !important;
    }

    /* Nosotros compacto en dos columnas. */
    .nosotros-v2 {
        grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
        gap: 10px !important;
        align-items: center !important;
    }

    .nosotros-collage {
        min-height: 190px !important;
    }

    .nosotros-collage img:first-child {
        width: 78% !important;
        height: 83% !important;
        border-radius: 48px 13px 13px 13px !important;
    }

    .nosotros-collage img:last-child {
        width: 52% !important;
        height: 45% !important;
        border-width: 4px !important;
        border-radius: 10px !important;
    }

    .nosotros-contenido > p {
        margin-bottom: 8px !important;
        font-size: 7.5px !important;
        line-height: 1.45 !important;
    }

    .nosotros-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .nosotros-lista li {
        gap: 4px !important;
        padding: 6px !important;
        border-radius: 8px !important;
        font-size: 6.2px !important;
        line-height: 1.35 !important;
    }

    /* Contacto compacto. */
    .contacto-mejorado {
        padding-top: 0 !important;
        padding-bottom: 28px !important;
    }

    .contacto-titulo {
        margin-bottom: 12px !important;
    }

    .contacto-sobrelinea {
        margin-bottom: 4px !important;
        font-size: 7px !important;
    }

    .contacto-simple {
        align-items: center !important;
        flex-direction: row !important;
        gap: 10px !important;
        padding: 12px !important;
        border-radius: 14px !important;
    }

    .contacto-direccion {
        gap: 8px !important;
        flex: 1 1 auto !important;
    }

    .contacto-ubicacion-icono {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
        border-radius: 10px !important;
    }

    .contacto-ubicacion-icono svg {
        width: 17px !important;
        height: 17px !important;
    }

    .contacto-direccion-titulo {
        margin-bottom: 2px !important;
        font-size: 6px !important;
    }

    .contacto-direccion address {
        font-size: 7.5px !important;
        line-height: 1.35 !important;
    }

    .contacto-iconos {
        flex: 0 0 auto !important;
        justify-content: flex-end !important;
        gap: 4px !important;
    }

    .contacto-icono {
        width: 28px !important;
        height: 28px !important;
    }

    .contacto-icono svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* Footer en tres columnas para no ocupar toda la pantalla. */
    .footer-v2 {
        margin-top: 28px !important;
        padding: 24px 0 12px !important;
    }

    .footer-grid {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, .8fr) !important;
        gap: 10px !important;
        padding-bottom: 16px !important;
    }

    .footer-marca {
        grid-column: auto !important;
    }

    .footer-marca img {
        width: 82px !important;
        height: 34px !important;
        margin-bottom: 6px !important;
    }

    .footer-marca p,
    .footer-col a,
    .footer-final {
        font-size: 6.5px !important;
        line-height: 1.45 !important;
    }

    .footer-col h3 {
        margin-bottom: 6px !important;
        font-size: 10px !important;
    }

    .footer-col a {
        margin: 4px 0 !important;
    }

    .footer-final {
        align-items: center !important;
        flex-direction: row !important;
        gap: 8px !important;
        padding-top: 9px !important;
    }

    /* Páginas de categorías y resultados. */
    .resultados-encabezado {
        width: calc(100% - 16px) !important;
        margin: 20px auto 14px !important;
        gap: 8px !important;
    }

    .resultados-encabezado h1 {
        margin: 4px 0 5px !important;
        font-size: clamp(25px, 8vw, 34px) !important;
    }

    .resultados-encabezado p,
    .resultados-meta {
        font-size: 8px !important;
    }

    .volver-categorias {
        padding: 7px 10px !important;
        font-size: 8px !important;
    }

    .resultados-productos {
        width: calc(100% - 16px) !important;
        margin-bottom: 38px !important;
    }

    .resultados-meta {
        min-height: 32px !important;
        margin-bottom: 9px !important;
        padding-bottom: 7px !important;
    }

    /* Ficha de producto: imagen e información juntas, como la referencia. */
    main.producto-detalle {
        width: 100% !important;
        min-height: 0 !important;
        padding: 8px 0 35px !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .producto-detalle > .container {
        width: calc(100% - 10px) !important;
    }

    .migas-producto {
        display: none !important;
    }

    .producto-detalle-grid {
        grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr) !important;
        gap: 8px !important;
        align-items: start !important;
    }

    .producto-galeria-detalle,
    .producto-detalle-info {
        min-width: 0 !important;
    }

    .producto-imagen-principal {
        position: static !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 22px rgba(55, 42, 31, .11) !important;
    }

    .producto-imagen-principal img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: .94 / 1 !important;
        object-fit: cover !important;
    }

    .producto-detalle-info {
        padding: 1px 0 !important;
    }

    .producto-detalle-categoria {
        margin-bottom: 5px !important;
        padding: 4px 6px !important;
        font-size: 6.5px !important;
    }

    .producto-detalle-info h1 {
        margin-bottom: 5px !important;
        font-size: clamp(18px, 5.8vw, 23px) !important;
        line-height: 1.02 !important;
    }

    .producto-detalle-precio {
        margin-bottom: 7px !important;
        font-size: clamp(16px, 5vw, 20px) !important;
        line-height: 1 !important;
    }

    .producto-pedido-minimo {
        margin: -2px 0 6px !important;
        padding: 3px 5px !important;
        font-size: 6.5px !important;
    }

    .producto-detalle-descripcion {
        font-size: 7.8px !important;
        line-height: 1.45 !important;
    }

    .producto-beneficios {
        gap: 4px !important;
        margin: 8px 0 !important;
        padding: 7px !important;
        border-radius: 9px !important;
    }

    .producto-beneficios div {
        gap: 4px !important;
        font-size: 6.5px !important;
        line-height: 1.25 !important;
    }

    .producto-beneficios span {
        width: 13px !important;
        height: 13px !important;
        font-size: 7px !important;
    }

    .opciones-finales-producto {
        margin: 8px 0 2px !important;
        padding: 7px !important;
        border-radius: 9px !important;
    }

    .opciones-finales-producto-cabecera {
        gap: 5px !important;
    }

    .opciones-finales-producto-cabecera h2 {
        font-size: 8px !important;
        line-height: 1.2 !important;
    }

    .opciones-finales-producto-cabecera > span {
        padding: 3px 4px !important;
        font-size: 5px !important;
    }

    .opciones-finales-producto-ayuda {
        margin: 3px 0 6px !important;
        font-size: 5.8px !important;
        line-height: 1.35 !important;
    }

    .opciones-finales-producto-lista {
        gap: 4px !important;
    }

    .opcion-final-producto-card {
        grid-template-columns: 12px minmax(0, 1fr) auto !important;
        gap: 4px !important;
        min-height: 28px !important;
        padding: 5px !important;
        border-radius: 7px !important;
    }

    .opcion-final-producto-selector {
        width: 12px !important;
        height: 12px !important;
        border-width: 1px !important;
        box-shadow: inset 0 0 0 2px #fff !important;
    }

    .opcion-final-producto-nombre,
    .opcion-final-producto-card strong {
        font-size: 6px !important;
        line-height: 1.2 !important;
    }

    .selector-cantidad-producto {
        align-items: center !important;
        flex-direction: row !important;
        gap: 5px !important;
        padding: 8px 0 !important;
        font-size: 7px !important;
    }

    .aviso-cantidad-minima {
        margin-top: 2px !important;
        font-size: 5.8px !important;
        line-height: 1.2 !important;
    }

    .cantidad-producto-controles {
        width: auto !important;
        grid-template-columns: 22px 30px 22px !important;
        border-radius: 7px !important;
    }

    .cantidad-producto-controles button {
        font-size: 12px !important;
    }

    .cantidad-producto-controles input {
        height: 25px !important;
        font-size: 7px !important;
    }

    .subtotal-producto {
        margin-bottom: 2px !important;
        padding: 8px 0 !important;
        font-size: 8px !important;
    }

    .subtotal-producto strong {
        font-size: 13px !important;
    }

    .mensaje-producto {
        min-height: 12px !important;
        margin: 2px 0 5px !important;
        font-size: 6px !important;
    }

    .acciones-producto {
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
    }

    .acciones-producto .boton {
        min-height: 29px !important;
        padding: 6px 4px !important;
        font-size: 6.5px !important;
    }

    /* Finalizar pedido: resumen y formulario lado a lado. */
    main.checkout.checkout-pago {
        width: 100% !important;
        padding: 8px 0 35px !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .checkout-pago > .container {
        width: calc(100% - 10px) !important;
    }

    .checkout-pago > .container > .titulo {
        margin-bottom: 11px !important;
    }

    .checkout-pago > .container > .titulo h2 {
        margin-bottom: 3px !important;
        font-size: clamp(27px, 9vw, 36px) !important;
    }

    .checkout-pago > .container > .titulo p {
        font-size: 7.5px !important;
    }

    .checkout-pago-grid {
        grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr) !important;
        gap: 7px !important;
        align-items: start !important;
    }

    .resumen-checkout-pago,
    .form-checkout-pago {
        min-width: 0 !important;
        padding: 8px !important;
        border-radius: 11px !important;
        box-shadow: 0 5px 16px rgba(55, 42, 31, .07) !important;
    }

    .resumen-checkout-pago > h3 {
        margin-bottom: 8px !important;
        font-size: 9px !important;
    }

    .checkout-lista-pago {
        gap: 6px !important;
    }

    .checkout-item-pago {
        align-items: flex-start !important;
        gap: 5px !important;
        padding-bottom: 6px !important;
    }

    .checkout-item-pago img {
        width: 38px !important;
        height: 38px !important;
        border-radius: 7px !important;
    }

    .checkout-item-pago h4 {
        margin-bottom: 1px !important;
        font-size: 7px !important;
        line-height: 1.15 !important;
    }

    .checkout-item-pago p,
    .checkout-item-pago .detalle-opcion-final,
    .checkout-item-pago .detalle-pedido-minimo {
        margin: 1px 0 !important;
        font-size: 5.5px !important;
        line-height: 1.25 !important;
    }

    .checkout-item-pago strong {
        font-size: 7px !important;
    }

    .checkout-total-pago {
        margin-top: 8px !important;
        padding-top: 7px !important;
        font-size: 9px !important;
    }

    .checkout-total-pago strong {
        font-size: 12px !important;
    }

    .editar-carrito-pago {
        margin-top: 7px !important;
        font-size: 6.5px !important;
    }

    .form-checkout-pago {
        gap: 7px !important;
    }

    .campo-checkout-pago {
        gap: 3px !important;
    }

    .campo-checkout-pago label {
        font-size: 7px !important;
    }

    .campo-checkout-pago input,
    .campo-checkout-pago textarea {
        padding: 7px !important;
        border-radius: 7px !important;
        font-size: 7px !important;
    }

    .campo-checkout-pago input {
        min-height: 29px !important;
    }

    .campo-checkout-pago textarea {
        min-height: 58px !important;
    }

    .aviso-pago-qr {
        padding: 7px !important;
        border-radius: 7px !important;
    }

    .aviso-pago-qr strong {
        margin-bottom: 2px !important;
        font-size: 7px !important;
    }

    .aviso-pago-qr p {
        font-size: 5.8px !important;
        line-height: 1.35 !important;
    }

    .estado-formulario-pago {
        min-height: 10px !important;
        font-size: 5.8px !important;
    }

    .form-checkout-pago .boton,
    #btnCrearPedido {
        min-height: 30px !important;
        padding: 7px 5px !important;
        font-size: 7px !important;
    }
}

@media (max-width: 360px) {
    .hero.hero-v2 {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
        gap: 7px !important;
    }

    .hero-texto h1 {
        font-size: 21px !important;
    }

    .producto-detalle-grid,
    .checkout-pago-grid {
        gap: 5px !important;
    }

    .categoria:not(.categoria-ver-todas) .categoria-accion,
    .tarjeta-subcategoria .tarjeta-subcategoria-capa > span {
        padding-inline: 8px !important;
        font-size: 6.2px !important;
    }
}

/* =========================================================
   WAWAY · Corrección final de jerarquía visual móvil
   Evita que reglas antiguas apilen el encabezado y corrige
   tamaños heredados en la portada para pantallas pequeñas.
========================================================= */
@media (max-width: 700px) {
    html,
    body {
        overflow-x: hidden !important;
    }

    /* El logo y el botón del menú deben compartir la misma fila. */
    html body > header.site-header .container,
    html body > header:not(.productos-admin-header):not(.dashboard-topbar) .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: calc(100% - 24px) !important;
        min-height: 54px !important;
        height: 54px !important;
        margin: 0 auto !important;
        padding: 4px 0 !important;
        gap: 12px !important;
    }

    html body > header.site-header .logo,
    html body > header:not(.productos-admin-header):not(.dashboard-topbar) .logo {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    html body > header.site-header .logo img,
    html body > header:not(.productos-admin-header):not(.dashboard-topbar) .logo img {
        width: 88px !important;
        height: 38px !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    html body > header.site-header .menu-toggle,
    html body > header:not(.productos-admin-header):not(.dashboard-topbar) .menu-toggle {
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
    }

    /* Buscador más proporcionado y próximo al encabezado. */
    .busqueda-superior {
        width: calc(100% - 20px) !important;
        margin: 7px auto 5px !important;
    }

    .buscador-global-form {
        min-height: 39px !important;
        padding: 3px 3px 3px 10px !important;
        border-radius: 22px !important;
    }

    .buscador-global-form input {
        min-width: 0 !important;
        padding: 6px !important;
        font-size: 9px !important;
    }

    .buscador-global-form button {
        min-height: 31px !important;
        padding: 6px 11px !important;
        font-size: 8px !important;
    }

    /* Portada: textos con jerarquía clara y sin superposiciones. */
    .hero.hero-v2 {
        gap: 8px !important;
        margin: 6px auto 18px !important;
        padding: 10px 0 7px !important;
    }

    .hero .sobrelinea {
        max-width: 100% !important;
        margin-bottom: 6px !important;
        font-size: 5.8px !important;
        line-height: 1.35 !important;
        letter-spacing: .095em !important;
    }

    .hero-texto h1 {
        max-width: 100% !important;
        margin-bottom: 6px !important;
        font-size: clamp(21px, 6.5vw, 25px) !important;
        line-height: 1.01 !important;
        letter-spacing: -.032em !important;
        overflow-wrap: anywhere !important;
    }

    .hero-texto p {
        max-width: 100% !important;
        margin-bottom: 7px !important;
        font-size: 7.4px !important;
        line-height: 1.42 !important;
    }

    .hero-acciones {
        margin-bottom: 7px !important;
    }

    .hero-acciones .boton {
        min-height: 29px !important;
        padding: 6px 9px !important;
        font-size: 7px !important;
    }

    /* Estas reglas deben apuntar a los hijos porque tienen tamaño propio. */
    .hero-confianza {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 3px !important;
    }

    .hero-confianza span {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        font-size: 6.4px !important;
        line-height: 1.25 !important;
    }

    .hero-confianza span::before {
        flex: 0 0 10px !important;
        width: 10px !important;
        height: 10px !important;
        margin-right: 0 !important;
        font-size: 6px !important;
    }

    .hero-imagen-marco {
        border-radius: 34px 11px 11px 11px !important;
    }

    .hero-nota {
        top: 7px !important;
        left: -4px !important;
        width: min(76px, 58%) !important;
        max-width: 76px !important;
        padding: 5px 6px !important;
        border-radius: 7px !important;
        line-height: 1.2 !important;
    }

    .hero-nota strong {
        margin-bottom: 1px !important;
        font-size: 5.7px !important;
        line-height: 1.2 !important;
    }

    .hero-nota span {
        display: block !important;
        font-size: 5.4px !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }

    .hero-sello {
        right: -2px !important;
        bottom: -7px !important;
        width: 40px !important;
        height: 40px !important;
        border-width: 3px !important;
        font-size: 5.8px !important;
        line-height: 1.05 !important;
    }

    /* Beneficios alineados y compactos. */
    .beneficios-rapidos {
        margin-bottom: 25px !important;
    }

    .beneficio-item {
        grid-template-columns: 23px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 5px !important;
        min-height: 58px !important;
        padding: 7px 6px !important;
    }

    .beneficio-icono {
        align-self: center !important;
        width: 23px !important;
        height: 23px !important;
        flex-basis: 23px !important;
        font-size: 10px !important;
    }

    .beneficio-item strong {
        margin: 0 0 1px !important;
        font-size: 6.8px !important;
        line-height: 1.14 !important;
        overflow-wrap: anywhere !important;
    }

    .beneficio-item p {
        margin: 0 !important;
        font-size: 5.4px !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }

    /* Encabezados de las secciones principales. */
    .categorias,
    .productos,
    #nosotros,
    #contacto,
    .proceso,
    .mas-vendidos {
        margin-top: 25px !important;
        margin-bottom: 25px !important;
    }

    .seccion-cabecera,
    .mas-vendidos-cabecera {
        margin-bottom: 11px !important;
    }

    .titulo,
    .seccion-cabecera .titulo,
    .mas-vendidos-cabecera .titulo,
    .nosotros-contenido .titulo {
        margin-bottom: 10px !important;
    }

    .titulo .sobrelinea,
    .mas-vendidos .sobrelinea,
    .nosotros-v2 .sobrelinea,
    .contacto-sobrelinea {
        margin-bottom: 5px !important;
        font-size: 6.2px !important;
        line-height: 1.3 !important;
        letter-spacing: .1em !important;
    }

    .titulo h2,
    .mas-vendidos .titulo h2,
    .nosotros-v2 .titulo h2,
    .contacto-titulo h2 {
        max-width: 100% !important;
        margin-bottom: 5px !important;
        font-size: clamp(20px, 6.7vw, 25px) !important;
        line-height: 1.03 !important;
        letter-spacing: -.025em !important;
        overflow-wrap: anywhere !important;
    }

    .titulo p,
    .seccion-cabecera .titulo p,
    .contacto-titulo p {
        max-width: 100% !important;
        font-size: 7.3px !important;
        line-height: 1.4 !important;
    }

    /* Evita que textos dinámicos desplacen o deformen las tarjetas. */
    .categoria:not(.categoria-ver-todas) .categoria-accion,
    .tarjeta-subcategoria .tarjeta-subcategoria-capa {
        right: auto !important;
        bottom: 8px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .categoria:not(.categoria-ver-todas) .categoria-accion,
    .tarjeta-subcategoria .tarjeta-subcategoria-capa > span {
        max-width: calc(100% - 16px) !important;
        min-height: 25px !important;
        padding: 5px 9px !important;
        font-size: 6.5px !important;
        line-height: 1 !important;
        text-align: center !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* La sección Nosotros conserva dos columnas, pero con textos legibles. */
    .nosotros-contenido > p {
        font-size: 6.8px !important;
        line-height: 1.38 !important;
    }

    .nosotros-lista li {
        font-size: 5.8px !important;
        line-height: 1.28 !important;
    }
}

/* Teléfonos particularmente angostos. */
@media (max-width: 380px) {
    .hero-texto h1,
    .titulo h2,
    .mas-vendidos .titulo h2,
    .nosotros-v2 .titulo h2,
    .contacto-titulo h2 {
        font-size: 21px !important;
    }

    .beneficio-item {
        grid-template-columns: 20px minmax(0, 1fr) !important;
        gap: 4px !important;
        padding: 6px 5px !important;
    }

    .beneficio-icono {
        width: 20px !important;
        height: 20px !important;
        flex-basis: 20px !important;
    }
}

/* =========================================================
   WAWAY · Mi carrito optimizado para celular
   Tarjetas horizontales, controles compactos y resumen claro.
========================================================= */
@media (max-width: 700px) {
    main.carrito {
        width: 100% !important;
        min-height: calc(100vh - 90px) !important;
        margin: 0 !important;
        padding: 14px 0 30px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    main.carrito > .container {
        width: calc(100% - 20px) !important;
        max-width: none !important;
    }

    main.carrito .titulo {
        margin: 0 0 12px !important;
        text-align: left !important;
    }

    main.carrito .titulo h2 {
        margin: 0 0 3px !important;
        font-size: clamp(25px, 7.5vw, 31px) !important;
        line-height: 1.05 !important;
        letter-spacing: -.025em !important;
    }

    main.carrito .titulo p {
        margin: 0 !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    #listaCarrito {
        display: grid !important;
        gap: 8px !important;
    }

    .item-carrito {
        display: grid !important;
        grid-template-columns: 76px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 9px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid var(--line, #e6ddd5) !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: 0 5px 15px rgba(55, 42, 31, .06) !important;
    }

    .item-carrito img {
        align-self: stretch !important;
        width: 76px !important;
        height: 100% !important;
        min-height: 76px !important;
        max-height: 102px !important;
        border-radius: 9px !important;
        object-fit: cover !important;
    }

    .item-carrito .detalle {
        min-width: 0 !important;
    }

    .item-carrito .detalle h3 {
        display: -webkit-box !important;
        margin: 0 0 2px !important;
        overflow: hidden !important;
        color: #251f1b !important;
        font-family: "Playfair Display", serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.16 !important;
        overflow-wrap: anywhere !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }

    .item-carrito .detalle > p {
        margin: 1px 0 !important;
        color: #75685e !important;
        font-size: 8px !important;
        line-height: 1.3 !important;
    }

    .item-carrito .detalle .detalle-opcion-final {
        margin: 1px 0 !important;
        font-size: 7px !important;
        line-height: 1.3 !important;
    }

    .item-carrito .detalle .detalle-pedido-minimo {
        display: inline-flex !important;
        width: auto !important;
        margin: 3px 0 0 !important;
        padding: 3px 5px !important;
        border-radius: 999px !important;
        background: #fff1eb !important;
        color: #9d533c !important;
        font-size: 6.5px !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
    }

    .item-carrito .controles {
        display: grid !important;
        grid-template-columns: 26px 30px 26px 26px !important;
        align-items: center !important;
        justify-content: start !important;
        gap: 4px !important;
        width: max-content !important;
        max-width: 100% !important;
        margin: 6px 0 0 !important;
    }

    .item-carrito .controles button {
        display: inline-grid !important;
        place-items: center !important;
        width: 26px !important;
        height: 26px !important;
        padding: 0 !important;
        border-radius: 7px !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }

    .item-carrito .controles span {
        min-width: 0 !important;
        font-size: 9px !important;
        line-height: 1 !important;
    }

    .item-carrito .controles .eliminar {
        margin-left: 0 !important;
        font-size: 11px !important;
    }

    .resumen-carrito {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 12px 0 0 !important;
        padding: 10px !important;
        border: 1px solid var(--line, #e6ddd5) !important;
        border-radius: 12px !important;
        background: #fff !important;
        text-align: left !important;
        box-shadow: 0 7px 20px rgba(55, 42, 31, .07) !important;
    }

    .resumen-carrito h3 {
        display: flex !important;
        align-items: baseline !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-family: "Poppins", sans-serif !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    .resumen-carrito h3 span {
        color: var(--accent, #bd6549) !important;
        font-family: "Playfair Display", serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    .resumen-carrito .boton {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 108px !important;
        min-height: 34px !important;
        padding: 8px 11px !important;
        border-radius: 999px !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .carrito-vacio {
        padding: 28px 15px !important;
        border: 1px solid var(--line, #e6ddd5) !important;
        border-radius: 13px !important;
        background: #fff !important;
        text-align: center !important;
    }

    .carrito-vacio h3 {
        margin-bottom: 10px !important;
        font-size: 18px !important;
        line-height: 1.2 !important;
    }

    .carrito-vacio .boton {
        min-height: 34px !important;
        padding: 8px 14px !important;
        font-size: 9px !important;
    }

    main.carrito + footer {
        margin-top: 0 !important;
        padding: 18px 10px !important;
        font-size: 8px !important;
    }
}

@media (max-width: 370px) {
    .item-carrito {
        grid-template-columns: 68px minmax(0, 1fr) !important;
        gap: 7px !important;
        padding: 7px !important;
    }

    .item-carrito img {
        width: 68px !important;
        min-height: 68px !important;
        max-height: 92px !important;
    }

    .item-carrito .detalle h3 {
        font-size: 12px !important;
    }

    .resumen-carrito {
        gap: 7px !important;
        padding: 8px !important;
    }

    .resumen-carrito .boton {
        min-width: 98px !important;
        padding-inline: 9px !important;
        font-size: 7.3px !important;
    }
}


@media (max-width: 700px) {
  .producto-beneficios.producto-beneficios-descuentos { gap: 5px !important; }
  .producto-descuentos-cabecera b { font-size: 7px !important; }
  .producto-descuentos-cabecera small { font-size: 5.8px !important; }
  .producto-descuentos-niveles { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 4px !important; }
  .producto-beneficios .producto-nivel-precio { grid-template-columns: 13px 1fr !important; gap: 1px 4px !important; padding: 5px !important; border-radius: 7px !important; }
  .producto-beneficios .producto-nivel-precio b { font-size: 5.8px !important; }
  .producto-beneficios .producto-nivel-precio strong { font-size: 7px !important; }
  .producto-beneficios .producto-nivel-precio small { font-size: 5.2px !important; }
}


/* WAWAY — tarjetas de ocasiones cuadradas (desktop + móvil) */
.occasion-card,
.occasion-card-link,
.home-occasion-card,
.home-occasion-link,
.what-card,
.what-card-link,
.home-choice-card,
.home-choice-link {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
}

.occasion-card img,
.home-occasion-card img,
.what-card img,
.home-choice-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* En móvil conservan exactamente la proporción 1:1. */
@media (max-width: 768px) {
  .occasion-card,
  .occasion-card-link,
  .home-occasion-card,
  .home-occasion-link,
  .what-card,
  .what-card-link,
  .home-choice-card,
  .home-choice-link {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
  }
}