/* ============================================================
    se juntaron ambos archivos de estilos exclusivos en uno solo para optimizar la carga:
        ofertas.css — Estilos exclusivos de la página de ofertas
        politicas.css — Estilos exclusivos de la página de políticas
   ============================================================ */

    /* Banner animado con efecto de destello */
    .banner-ofertas {
        background: linear-gradient(135deg, #b71c1c 0%, #c62828 40%, #e53935 100%);
        color: var(--color-blanco);
        text-align: center;
        padding: 70px 20px;
        position: relative;
        overflow: hidden;
    }

    /* Destellos decorativos detrás del banner */
    .banner-ofertas::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07) 0%, transparent 60%);
        animation: pulso 4s ease-in-out infinite;
    }

    @keyframes pulso {

        0%,
        100% {
            transform: scale(1);
            opacity: 0.5;
        }

        50% {
            transform: scale(1.1);
            opacity: 1;
        }
    }

    .banner-ofertas h1 {
        font-size: clamp(1.8rem, 4vw, 2.8rem);
        margin-bottom: 0.5rem;
        position: relative;
        z-index: 1;
    }

    .banner-ofertas p {
        font-size: 1.05rem;
        opacity: 0.92;
        max-width: 580px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }

    /* Etiqueta de badge de descuento */
    .badge-descuento {
        display: inline-block;
        background: var(--color-blanco);
        color: #b71c1c;
        font-weight: 700;
        font-size: 0.75rem;
        padding: 0.2rem 0.65rem;
        border-radius: 20px;
        margin-bottom: 1rem;
        position: relative;
        z-index: 1;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    /* Contador de oferta (visual) */
    .contador-oferta {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-top: 1.5rem;
        position: relative;
        z-index: 1;
    }

    .contador-bloque {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        padding: 0.6rem 1rem;
        min-width: 64px;
        backdrop-filter: blur(4px);
    }

    .contador-numero {
        display: block;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1;
    }

    .contador-label {
        display: block;
        font-size: 0.7rem;
        opacity: 0.8;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-top: 2px;
    }

    /* Grid de ofertas destacadas */
    .ofertas-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.5rem;
        max-width: 1100px;
        margin: 0 auto;
        padding: 2.5rem 1.25rem;
    }

    /* Tarjeta de oferta individual */
    .oferta-card {
        background: var(--color-blanco);
        border-radius: 16px;
        box-shadow: var(--sombra-carta);
        overflow: hidden;
        position: relative;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        display: flex;
        flex-direction: column;
    }

    .oferta-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 40px rgba(183, 28, 28, 0.18);
    }

    /* Etiqueta de porcentaje de descuento */
    .oferta-tag {
        position: absolute;
        top: 12px;
        left: 12px;
        background: #e53935;
        color: var(--color-blanco);
        font-weight: 700;
        font-size: 0.85rem;
        padding: 0.3rem 0.7rem;
        border-radius: 6px;
        z-index: 2;
    }

    /* Imagen representativa con emoji grande */
    .oferta-imagen {
        background: linear-gradient(135deg, var(--color-crema) 0%, #fce4ec 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4rem;
        height: 130px;
    }

    .oferta-body {
        padding: 1.25rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .oferta-categoria {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--color-texto-suave);
        font-weight: 600;
    }

    .oferta-nombre {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--color-texto);
        margin: 0;
    }

    .oferta-descripcion {
        font-size: 0.87rem;
        color: var(--color-texto-suave);
        margin: 0;
        line-height: 1.45;
    }

    .oferta-precios {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-top: auto;
        padding-top: 0.75rem;
    }

    .precio-antes {
        text-decoration: line-through;
        color: var(--color-texto-suave);
        font-size: 0.9rem;
    }

    .precio-ahora {
        color: #b71c1c;
        font-size: 1.3rem;
        font-weight: 700;
    }

    /* Botón de WhatsApp dentro de la tarjeta */
    .btn-oferta {
        display: block;
        background: var(--color-primario);
        color: var(--color-blanco);
        text-align: center;
        text-decoration: none;
        font-weight: 700;
        font-family: 'Nunito', sans-serif;
        font-size: 0.9rem;
        padding: 0.75rem;
        transition: background-color 0.2s ease;
    }

    .btn-oferta:hover {
        background: var(--color-primario-oscuro);
    }

    /* Sección de categorías en oferta */
    .categorias-oferta {
        background: var(--color-crema);
        padding: 3rem 1.25rem;
        text-align: center;
    }

    .categorias-oferta h2 {
        color: var(--color-primario);
        margin-bottom: 0.4rem;
    }

    .categorias-oferta>p {
        color: var(--color-texto-suave);
        margin-bottom: 2rem;
    }

    .cats-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        max-width: 800px;
        margin: 0 auto;
    }

    .cat-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: var(--color-blanco);
        border: 2px solid var(--color-borde);
        border-radius: var(--radio-boton);
        padding: 0.6rem 1.25rem;
        text-decoration: none;
        color: var(--color-texto);
        font-weight: 600;
        font-size: 0.95rem;
        transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    }

    .cat-pill:hover {
        border-color: var(--color-primario);
        color: var(--color-primario);
        background: #fff5ee;
    }

    .cat-pill.destacada {
        border-color: #e53935;
        color: #b71c1c;
        background: #fff5f5;
    }

    /* Sección informativa de la promoción */
    .info-hotsale {
        max-width: 800px;
        margin: 3rem auto;
        padding: 0 1.25rem;
    }

    .info-hotsale h2 {
        color: var(--color-texto);
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.25rem;
    }

    .info-card {
        background: var(--color-blanco);
        border-radius: 12px;
        padding: 1.5rem 1.25rem;
        text-align: center;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
        border-bottom: 3px solid var(--color-primario-claro);
    }

    .info-icono {
        font-size: 2.2rem;
        display: block;
        margin-bottom: 0.75rem;
    }

    .info-card h4 {
        color: var(--color-texto);
        margin: 0 0 0.4rem;
        font-size: 1rem;
    }

    .info-card p {
        color: var(--color-texto-suave);
        font-size: 0.87rem;
        margin: 0;
        line-height: 1.5;
    }

    /* CTA final */
    .cta-ofertas {
        background: linear-gradient(135deg, var(--color-primario) 0%, #e65100 100%);
        color: var(--color-blanco);
        text-align: center;
        padding: 3.5rem 1.25rem;
        margin-top: 2rem;
    }

    .cta-ofertas h2 {
        color: var(--color-blanco);
        margin-bottom: 0.75rem;
        font-size: clamp(1.4rem, 3vw, 2rem);
    }

    .cta-ofertas p {
        opacity: 0.9;
        margin-bottom: 2rem;
    }

    .btn-cta-wsp {
        display: inline-block;
        background: var(--color-blanco);
        color: var(--color-primario);
        font-weight: 700;
        font-family: 'Nunito', sans-serif;
        font-size: 1.05rem;
        padding: 0.85rem 2rem;
        border-radius: var(--radio-boton);
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    }

    .btn-cta-wsp:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }

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

        .contador-oferta {
            gap: 0.5rem;
        }

        .contador-bloque {
            min-width: 52px;
            padding: 0.5rem 0.6rem;
        }
    }





    /* ============================================================
           politicas.css — Estilos exclusivos de la página de políticas
           ============================================================ */

    /* Banner de la página */
    .banner-politicas {
        background: linear-gradient(135deg, var(--color-primario-oscuro) 0%, var(--color-primario) 100%);
        color: var(--color-blanco);
        text-align: center;
        padding: 60px 20px;
    }

    .banner-politicas h1 {
        font-size: clamp(1.6rem, 4vw, 2.5rem);
        margin-bottom: 0.5rem;
    }

    .banner-politicas p {
        opacity: 0.9;
        max-width: 560px;
        margin: 0 auto;
        font-size: 1rem;
    }

    /* Contenedor principal de las políticas */
    .politicas-contenido {
        max-width: 860px;
        margin: 0 auto;
        padding: 3rem 1.25rem 4rem;
    }

    /* Índice de navegación rápida */
    .indice-politicas {
        background: var(--color-crema);
        border-left: 4px solid var(--color-primario);
        border-radius: 0 12px 12px 0;
        padding: 1.5rem 1.75rem;
        margin-bottom: 3rem;
    }

    .indice-politicas h2 {
        color: var(--color-primario);
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 0 1rem;
    }

    .indice-politicas ol {
        margin: 0;
        padding-left: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .indice-politicas a {
        color: var(--color-primario);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.95rem;
        transition: opacity 0.2s ease;
    }

    .indice-politicas a:hover {
        opacity: 0.75;
        text-decoration: underline;
    }

    /* Cada sección de política */
    .politica-seccion {
        margin-bottom: 3rem;
        scroll-margin-top: 80px;
        /* Para que el ancla quede bien posicionada */
    }

    .politica-seccion h2 {
        color: var(--color-primario);
        font-size: 1.4rem;
        padding-bottom: 0.6rem;
        border-bottom: 2px solid var(--color-crema);
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .politica-seccion h2 .icono-seccion {
        font-size: 1.5rem;
    }

    .politica-seccion p {
        color: var(--color-texto-suave);
        line-height: 1.8;
        margin-bottom: 1rem;
    }

    .politica-seccion p:last-child {
        margin-bottom: 0;
    }

    /* Lista de puntos dentro de las secciones */
    .lista-politica {
        list-style: none;
        padding: 0;
        margin: 0 0 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .lista-politica li {
        display: flex;
        align-items: flex-start;
        gap: 0.6rem;
        color: var(--color-texto-suave);
        line-height: 1.6;
        font-size: 0.97rem;
    }

    .lista-politica li::before {
        content: '✓';
        color: var(--color-verde);
        font-weight: 700;
        flex-shrink: 0;
        margin-top: 2px;
    }

    /* Lista con "x" para lo que NO aplica */
    .lista-politica.negativa li::before {
        content: '✗';
        color: #c62828;
    }

    /* Tarjetas de métodos de pago */
    .metodos-pago {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
        margin: 1rem 0;
    }

    .metodo-card {
        background: var(--color-blanco);
        border: 2px solid var(--color-borde);
        border-radius: 10px;
        padding: 1.1rem 0.75rem;
        text-align: center;
        transition: border-color 0.2s ease;
    }

    .metodo-card:hover {
        border-color: var(--color-primario);
    }

    .metodo-icono {
        font-size: 2rem;
        display: block;
        margin-bottom: 0.4rem;
    }

    .metodo-card span {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--color-texto);
        display: block;
    }

    /* Cuadro de aviso importante */
    .aviso-importante {
        background: #fff8e1;
        border: 2px solid #ffc107;
        border-radius: 10px;
        padding: 1.25rem 1.5rem;
        margin: 1.5rem 0;
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .aviso-icono {
        font-size: 1.4rem;
        flex-shrink: 0;
    }

    .aviso-importante p {
        margin: 0;
        color: #5d4037;
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* Cuadro de información positiva */
    .aviso-exito {
        background: var(--color-verde-suave);
        border: 2px solid #4caf50;
        border-radius: 10px;
        padding: 1.25rem 1.5rem;
        margin: 1.5rem 0;
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .aviso-exito p {
        margin: 0;
        color: #1b5e20;
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* Tabla de zonas de entrega */
    .tabla-zonas {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
        font-size: 0.95rem;
    }

    .tabla-zonas th {
        background: var(--color-primario);
        color: var(--color-blanco);
        padding: 0.75rem 1rem;
        text-align: left;
        font-weight: 700;
    }

    .tabla-zonas th:first-child {
        border-radius: 8px 0 0 0;
    }

    .tabla-zonas th:last-child {
        border-radius: 0 8px 0 0;
    }

    .tabla-zonas td {
        padding: 0.7rem 1rem;
        border-bottom: 1px solid var(--color-borde);
        color: var(--color-texto-suave);
    }

    .tabla-zonas tr:last-child td {
        border-bottom: none;
    }

    .tabla-zonas tr:nth-child(even) td {
        background: var(--color-crema);
    }

    /* CTA de contacto al final */
    .cta-politicas {
        background: linear-gradient(135deg, var(--color-primario) 0%, #e65100 100%);
        border-radius: 16px;
        color: var(--color-blanco);
        text-align: center;
        padding: 2.5rem 1.5rem;
        margin-top: 3rem;
    }

    .cta-politicas h2 {
        color: var(--color-blanco);
        margin-bottom: 0.5rem;
    }

    .cta-politicas p {
        opacity: 0.9;
        margin-bottom: 1.5rem;
    }

    .btn-contacto-politicas {
        display: inline-block;
        background: var(--color-blanco);
        color: var(--color-primario);
        font-weight: 700;
        font-family: 'Nunito', sans-serif;
        font-size: 1rem;
        padding: 0.8rem 1.75rem;
        border-radius: var(--radio-boton);
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .btn-contacto-politicas:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    /* Fecha de actualización */
    .fecha-actualizacion {
        text-align: center;
        font-size: 0.82rem;
        color: var(--color-texto-suave);
        margin-top: 2rem;
        font-style: italic;
    }

    @media (max-width: 599px) {
        .metodos-pago {
            grid-template-columns: repeat(2, 1fr);
        }

        .tabla-zonas th,
        .tabla-zonas td {
            padding: 0.6rem 0.6rem;
            font-size: 0.88rem;
        }
    }