/*
 * responsive-fixes.css
 * Correcciones responsivas para pampeanas.com.co
 * Generado: 2026-07-01
 */

/* ============================================================
   P-00: Imágenes — altura proporcional global
   Evita que los atributos HTML width/height (añadidos para CLS)
   estiren las imágenes cuando el ancho está restringido por CSS.
   Sin !important para respetar height inline (object-fit cards).
   ============================================================ */
img {
    height: auto;
}

/* ============================================================
   P-01: Contraste — h3 sin color en secciones oscuras
   El CSS original define color solo para h2/h4/h5/h6 en estos
   wrappers, pero el HTML usa <h3>. Resultado: texto negro sobre
   fondo oscuro → ilegible.
   ============================================================ */

/* Cards de contacto (Contáctenos / Email / Punto de Fábrica) */
.lr_ct_box_wrapper h3 {
    font-size: 24px;
    font-weight: 600;
    color: #e38612;
    padding-top: 20px;
}

/* Label "Fabricadas en Bogotá" — fondo negro */
.lr_ff_price_lable_wrapper h3 {
    font-size: 20px;
    color: #ffffff;
    font-family: 'Lato', sans-serif;
    line-height: 60px;
}

/* ============================================================
   P-03: Logos duplicados — ocultar header desktop en móvil
   El header desktop (.header-bg) no se oculta por defecto,
   causando que ambos logos (logo.png y logo2.png) aparezcan
   simultáneamente en pantallas < 768px.
   ============================================================ */
@media only screen and (max-width: 767px) {
    header.header-bg {
        display: none !important;
    }
    /* Asegurar que el header móvil sea visible */
    .mobile-header {
        display: block !important;
    }
    /* Limitar tamaño de logo en header móvil */
    .mobile-logo-main img,
    .logo-main img {
        max-width: 140px;
        height: auto !important;
    }
}

/* ============================================================
   P-03: Logo — tamaño máximo en tablet para evitar desborde
   ============================================================ */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .logo-main img {
        max-width: 160px;
        height: auto !important;
    }
    /* En tablet el FixedLogoPane puede aparecer sobre el Logobox */
    .logo-main .Logobox img,
    .logo-main .FixedLogoPane img {
        max-width: 150px;
        height: auto !important;
    }
}

/* ============================================================
   P-05: Botones flotantes — separación y escala en móvil
   Los 3 botones del lado izquierdo (Pagos, Tel1, Tel2) más el
   widget de WhatsApp tapan contenido en pantallas pequeñas.
   ============================================================ */

/* Reducir tamaño de imágenes de botones flotantes en móvil */
@media only screen and (max-width: 767px) {
    .wcs_fixed_right-2,
    .wcs_fixed_right-5 {
        transform: scale(0.85);
        transform-origin: bottom left;
    }
    /* Reagrupar: aumentar separación entre botones izquierdos */
    .wcs_fixed_right-2 {
        bottom: 16px;
        left: 10px;
    }
    .wcs_fixed_right-5 {
        bottom: 80px;
        left: 10px;
    }
    /* WhatsApp widget: ajustar para no solaparse con botones */
    .wcs_fixed_right {
        bottom: 16px;
        right: 12px;
    }
    /* Padding inferior al body para que el contenido no quede
       oculto detrás de los botones flotantes */
    body {
        padding-bottom: 80px;
    }
}

/* ============================================================
   A-03: Contenido sin max-width en pantallas muy anchas (>1440px)
   ============================================================ */
@media only screen and (min-width: 1441px) {
    .container {
        max-width: 1320px;
    }
}

/* ============================================================
   MENÚ: Botón CTA "Pagos Online" — color naranja, estilo botón
   El <li> tiene clase .nav-cta-pagos (sin dropdown, sin flecha)
   ============================================================ */
#dng-megamenu .primary-structure > li.nav-cta-pagos {
    padding-top: 24px;
    padding-bottom: 24px;
}
#dng-megamenu .primary-structure > li.nav-cta-pagos > a {
    background-color: #e85d04 !important;
    color: #ffffff !important;
    border-radius: 5px;
    padding: 9px 16px !important;
    line-height: 1.4 !important;
    font-weight: 700;
    margin-left: 8px;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 6px rgba(232, 93, 4, 0.40);
}
#dng-megamenu .primary-structure > li.nav-cta-pagos > a:hover {
    background-color: #bf4a00 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(232, 93, 4, 0.55);
}
/* Ocultar flechita de dropdown */
#dng-megamenu .primary-structure > li.nav-cta-pagos > a > span::after {
    display: none !important;
}

/* ============================================================
   MENÚ: Reducir padding en desktop para evitar que
   "Pagos Online" salte a segunda línea (container = 1170px)
   ============================================================ */
@media only screen and (min-width: 992px) and (max-width: 1500px) {
    #dng-megamenu .primary-structure > li > a {
        padding-left: 13px;
        padding-right: 13px;
    }
    #dng-megamenu .primary-structure > li.nav-cta-pagos > a {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* ============================================================
   HERO CTA: Botones "Ver Precios" y "Hacer un Pedido"
   Insertados en .lr_banner_content_inner_wrapper del slider
   ============================================================ */
.hero-cta-wrapper {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

/* Botón primario — naranja sólido */
.hero-btn-primary {
    display: inline-block;
    background-color: #e85d04;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 700;
    padding: 13px 30px;
    border-radius: 5px;
    text-decoration: none !important;
    letter-spacing: 0.3px;
    box-shadow: 0 3px 10px rgba(232, 93, 4, 0.45);
    transition: background-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}
.hero-btn-primary:hover,
.hero-btn-primary:focus {
    background-color: #bf4a00;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(232, 93, 4, 0.55);
    text-decoration: none !important;
}

/* Botón secundario — ghost blanco */
.hero-btn-secondary {
    display: inline-block;
    background-color: transparent;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    text-decoration: none !important;
    letter-spacing: 0.3px;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}
.hero-btn-secondary:hover,
.hero-btn-secondary:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #ffffff;
    color: #ffffff !important;
    transform: translateY(-2px);
    text-decoration: none !important;
}

/* Responsivo: en móvil, botones en columna y tamaño reducido */
@media only screen and (max-width: 767px) {
    .hero-cta-wrapper {
        margin-top: 20px;
        gap: 10px;
    }
    .hero-btn-primary,
    .hero-btn-secondary {
        font-size: 14px;
        padding: 10px 22px;
    }
}

/* ============================================================
   COTIZACIÓN EVENTO — Página rediseñada
   ============================================================ */

/* Intro */
.cot-intro-section {
    background: #1a1a1a;
    padding: 52px 0 40px;
    text-align: center;
}
.cot-title {
    color: #f0c020;
    font-size: 2.1em;
    margin-bottom: 12px;
    font-weight: 700;
}
.cot-subtitle {
    color: #cccccc;
    font-size: 1.05em;
    line-height: 1.7;
    margin-bottom: 22px;
}
.cot-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.cot-badge {
    background: rgba(240,192,32,0.12);
    border: 1px solid rgba(240,192,32,0.35);
    color: #f0c020;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.88em;
    font-weight: 600;
}
.cot-badge i { margin-right: 5px; }

/* Paquetes */
.cot-paquetes-section {
    background: #f5f5f5;
    padding: 48px 0 40px;
    text-align: center;
}
.cot-section-title {
    font-size: 1.6em;
    color: #222;
    margin-bottom: 8px;
    font-weight: 700;
}
.cot-section-sub {
    color: #666;
    font-size: 0.95em;
    margin-bottom: 30px;
}
.cot-paquetes-row { margin-top: 10px; }
.cot-pkg-card {
    background: #fff;
    border-radius: 8px;
    padding: 18px 10px 16px;
    margin-bottom: 16px;
    border: 2px solid #e0e0e0;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    position: relative;
    min-height: 120px;
}
.cot-pkg-card:hover {
    border-color: #e85d04;
    box-shadow: 0 4px 14px rgba(232,93,4,0.18);
    transform: translateY(-3px);
}
.cot-pkg-selected {
    border-color: #e85d04 !important;
    background: #fff7f3 !important;
    box-shadow: 0 4px 16px rgba(232,93,4,0.28) !important;
}
.cot-pkg-popular {
    border-color: #e85d04;
}
.cot-pkg-badge-pop {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: #e85d04;
    color: #fff;
    font-size: 0.72em;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    white-space: nowrap;
}
.cot-pkg-qty {
    font-size: 2em;
    font-weight: 800;
    color: #e85d04;
    line-height: 1;
}
.cot-pkg-label {
    font-size: 0.85em;
    font-weight: 700;
    color: #333;
    margin: 4px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cot-pkg-desc {
    font-size: 0.78em;
    color: #888;
    line-height: 1.4;
}
.cot-pkg-custom .cot-pkg-qty { color: #555; }

/* Formulario */
.cot-form-section {
    background: #fff;
    padding: 52px 0 60px;
}
.cot-form-card {
    background: #f8f8f8;
    border-radius: 10px;
    padding: 36px 32px 32px;
    border: 1px solid #e8e8e8;
}
.cot-form-title {
    font-size: 1.4em;
    color: #222;
    margin-bottom: 8px;
    font-weight: 700;
}
.cot-wa-icon {
    color: #25d366;
    font-size: 1.2em;
    margin-right: 6px;
}
.cot-form-note {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 24px;
    line-height: 1.5;
    border-left: 3px solid #25d366;
    padding-left: 10px;
}
.cot-fieldset-title {
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 6px;
    margin-bottom: 16px;
}
.cot-form-row { margin-bottom: 14px; }
.cot-label {
    display: block;
    font-size: 0.88em;
    font-weight: 600;
    color: #444;
    margin-bottom: 5px;
}
.cot-req { color: #e85d04; }
.cot-input {
    width: 100%;
    padding: 9px 13px;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    font-size: 0.95em;
    color: #333;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.cot-input:focus {
    border-color: #e85d04;
    outline: none;
    box-shadow: 0 0 0 3px rgba(232,93,4,0.12);
}
.cot-select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' fill='none' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.cot-textarea { resize: vertical; min-height: 80px; }

/* Product blocks */
.cot-product-block {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 7px;
    padding: 14px 16px 6px;
    margin-bottom: 14px;
}
.cot-product-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.cot-product-icon { font-size: 1.3em; }
.cot-product-name { font-weight: 700; color: #333; font-size: 0.95em; }
.cot-product-min {
    color: #e85d04;
    font-size: 0.78em;
    font-weight: 600;
    background: rgba(232,93,4,0.08);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
}

/* Error & Submit */
.cot-error-msg {
    background: #fff3f3;
    border: 1px solid #ffcdd2;
    color: #c62828;
    border-radius: 5px;
    padding: 10px 14px;
    font-size: 0.9em;
    margin-bottom: 14px;
}
.cot-error-msg i { margin-right: 6px; }
.cot-submit-btn {
    width: 100%;
    background: #25d366;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 15px 24px;
    font-size: 1.05em;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 3px 10px rgba(37,211,102,0.35);
    letter-spacing: 0.2px;
}
.cot-submit-btn:hover {
    background: #1ebe5d;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37,211,102,0.45);
}
.cot-submit-btn i { font-size: 1.15em; }

/* Sidebar info */
.cot-info-card {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 20px 20px 16px;
    margin-bottom: 18px;
    border: 1px solid #e8e8e8;
}
.cot-info-title {
    font-size: 1em;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e85d04;
}
.cot-info-title i { margin-right: 6px; color: #e85d04; }
.cot-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cot-info-list li {
    font-size: 0.88em;
    color: #555;
    padding: 4px 0;
    border-bottom: 1px solid #eee;
    line-height: 1.4;
}
.cot-info-list li:last-child { border-bottom: none; }
.cot-info-list span { font-weight: 600; color: #333; }
.cot-info-contact { background: #1a1a1a; border-color: #333; }
.cot-info-contact .cot-info-title { color: #f0c020; border-color: #f0c020; }
.cot-tel-link, .cot-email-link {
    display: block;
    color: #fff;
    font-size: 0.9em;
    padding: 4px 0;
    text-decoration: none;
}
.cot-tel-link { font-size: 1.1em; font-weight: 700; color: #25d366; }
.cot-tel-link:hover, .cot-email-link:hover { color: #f0c020; text-decoration: none; }

/* Responsive */
@media (max-width: 767px) {
    .cot-form-card { padding: 24px 16px 20px; }
    .cot-title { font-size: 1.6em; }
    .cot-pkg-card { min-height: 100px; padding: 14px 6px 12px; }
    .cot-pkg-qty { font-size: 1.6em; }
    .cot-pkg-desc { display: none; }
    .cot-submit-btn { font-size: 0.97em; padding: 14px 16px; }
}

/* ============================================================
   MENÚ sticky (roll-activated): centrar botón Pagos Online
   En modo scroll el template colapsa el padding de todos los
   <li> a 0, pero nuestra regla de mayor especificidad lo
   mantenía en 24px, bajando el botón visualmente.
   ============================================================ */
.roll-activated #dng-megamenu .primary-structure > li.nav-cta-pagos {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================================
   MINI CONTACT FORM — reemplaza lr_contact_gt_main_wrapper
   Columna izq: horarios (naranja) · Columna der: mini-form WA
   ============================================================ */
.lr_contact_gt_main_wrapper.mini-contact-wrap {
    padding-top: 0;
    padding-bottom: 0;
    background: #fff;
}

/* ── Columna izquierda ─────────────────────────────────────── */
.mini-left-panel.lr_gt_left_wrapper {
    width: 38%;
    padding: 50px 40px !important;
    text-align: left !important;
    box-sizing: border-box;
}
.mini-panel-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: rgba(0,0,0,0.28) !important;
    padding: 13px 20px !important;
    margin: 0 -40px 28px !important;
    border-radius: 0 !important;
}
.mini-hours { margin-bottom: 28px; }
.mini-hour-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.35);
    gap: 10px;
}
.mini-hour-row:last-child { border-bottom: none; }
.mini-day  { font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; }
.mini-time { font-size: 13px; color: rgba(255,255,255,0.9); text-align: right; }

.mini-contact-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}
.mini-link-tel {
    display: block;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}
.mini-link-email {
    display: block;
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    text-decoration: none;
    word-break: break-all;
}
.mini-link-wa {
    display: inline-block;
    background: #25d366;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 20px !important;
    border-radius: 6px;
    text-decoration: none !important;
    margin-top: 6px;
    transition: background 0.2s;
}
.mini-link-tel i,
.mini-link-email i { margin-right: 7px; }
.mini-link-tel:hover   { color: #ffe; text-decoration: none; }
.mini-link-email:hover { color: #fff; text-decoration: none; }
.mini-link-wa:hover    { background: #1aad54 !important; }

/* ── Columna derecha ───────────────────────────────────────── */
.mini-right-panel.lr_gt_right_wrapper {
    width: 62%;
    padding: 50px 50px !important;
    box-sizing: border-box;
    position: relative;
}
/* override chef/bur images — hide them in mini version */
.mini-right-panel .lr_gt_chef_img,
.mini-right-panel .lr_gt_bur_img { display: none !important; }

.mini-right-panel .lr_gt_right_heading h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #111 !important;
    background: none !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
}
.mini-right-panel .lr_gt_right_heading p {
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 24px !important;
}
.mini-form-inner { margin-top: 0; }
.mini-input {
    border-radius: 5px !important;
    border: 1.5px solid #ddd !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    height: auto !important;
    color: #333 !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: border-color 0.2s;
}
.mini-input:focus {
    border-color: #e85d04 !important;
    box-shadow: 0 0 0 3px rgba(232,93,4,0.12) !important;
    outline: none;
}
.mini-form-actions {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.mini-wa-btn {
    display: inline-block;
    background: #25d366;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
    line-height: 1.4;
}
.mini-wa-btn:hover { background: #1aad54; }
.mini-wa-btn i { margin-right: 7px; }
.mini-full-link {
    color: #e85d04 !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
}
.mini-full-link:hover { text-decoration: underline !important; }
.mcf-error-msg {
    color: #c0392b;
    font-size: 13px;
    margin-top: 12px;
    padding: 8px 12px;
    background: #fef0ed;
    border-radius: 4px;
    border-left: 3px solid #c0392b;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 767px) {
    .mini-left-panel.lr_gt_left_wrapper,
    .mini-right-panel.lr_gt_right_wrapper {
        width: 100% !important;
        float: none !important;
    }
    .mini-left-panel.lr_gt_left_wrapper  { padding: 36px 24px !important; }
    .mini-panel-title                     { margin: 0 -24px 22px !important; }
    .mini-right-panel.lr_gt_right_wrapper { padding: 36px 24px !important; }
    .mini-form-actions { flex-direction: column; align-items: flex-start; }
    .mini-wa-btn { width: 100%; text-align: center; }
}

/* ============================================================
   SLIDER 1 — Tipografía rediseñada al estilo del Slider 2
   Eyebrow (s1-eyebrow): pequeño uppercase amarillo
   Main (s1-main):       80px blanco bold — igual que h3 del slider 2
   ============================================================ */
.lr_banner_content_inner_wrapper h2.s1-eyebrow {
    font-family: 'Raleway', 'Trebuchet MS', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #ffe100 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    text-shadow: none !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.4 !important;
}
.lr_banner_content_inner_wrapper h1.s1-main {
    font-family: 'Trebuchet MS', sans-serif !important;
    font-size: 80px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    line-height: 1.0 !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.55) !important;
    margin: 0 0 20px 0 !important;
    text-transform: none !important;
}
@media (max-width: 991px) {
    .lr_banner_content_inner_wrapper h1.s1-main { font-size: 56px !important; }
}
@media (max-width: 767px) {
    .lr_banner_content_inner_wrapper h1.s1-main {
        font-size: 38px !important;
        line-height: 1.15 !important;
    }
    .lr_banner_content_inner_wrapper h2.s1-eyebrow { font-size: 13px !important; }
}

/* ═══════════════════════════════════════════════════
   SOCIAL PROOF CARDS — index.html (Google Maps + IG)
   ═══════════════════════════════════════════════════ */
.sp-cards-wrapper {
    display: flex;
    gap: 14px;
    margin-top: 22px;
    flex-wrap: wrap;
}
.sp-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
    min-width: 180px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.10);
    transition: transform .18s ease, box-shadow .18s ease;
    position: relative;
}
.sp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,.16);
    text-decoration: none !important;
}
/* Google card — top accent bar */
.sp-card-google::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #4285F4 25%, #34A853 50%, #FBBC05 75%, #EA4335 100%);
}
/* Instagram card — top accent bar */
.sp-card-instagram::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.sp-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 6px;
}
.sp-card-handle {
    font-size: 12px;
    font-weight: 700;
    color: #444;
    line-height: 1.3;
}
.sp-card-body {
    padding: 0 14px 10px;
    flex: 1;
}
.sp-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #222;
    margin-bottom: 5px;
    line-height: 1.35;
}
.sp-card-stars {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 5px;
}
.sp-stars   { color: #f5a623; font-size: 13px; letter-spacing: 1px; }
.sp-rating  { font-size: 13px; font-weight: 700; color: #333; }
.sp-count   { font-size: 11px; color: #777; }
.sp-card-desc {
    font-size: 11.5px;
    color: #666;
    line-height: 1.4;
}
.sp-card-cta {
    margin: 0 14px 14px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    letter-spacing: .3px;
}
.sp-cta-google {
    background: #e8f0fe;
    color: #1a73e8;
}
.sp-card-google:hover .sp-cta-google {
    background: #1a73e8;
    color: #fff;
}
.sp-cta-instagram {
    background: #fce4ec;
    color: #c2185b;
}
.sp-card-instagram:hover .sp-cta-instagram {
    background: linear-gradient(135deg,#f09433,#dc2743,#bc1888);
    color: #fff;
}
@media (max-width: 480px) {
    .sp-cards-wrapper { flex-direction: column; gap: 10px; }
    .sp-card { flex: 1 1 100%; min-width: 0; }
}
/* ═══════════════════════════════════════════════════ */

/* ============================================================
   P-41: Menú hamburguesa — sticky bar y visibilidad en tablet
   ============================================================ */

/* Tablet (768–991px): ocultar header desktop (contenido ya oculto
   por .hidden-sm, pero el <header> raíz aún existe en el DOM) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    header.header-bg {
        display: none !important;
    }
    .mobile-header {
        display: block !important;
    }
}

/* Teléfono + Tablet (≤991px): fijar la barra del hamburguesa */
@media only screen and (max-width: 991px) {
    .mobile-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 999 !important;
        background: #fff !important;
        box-shadow: 0 2px 6px rgba(0,0,0,.13) !important;
        height: 46px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Bajar el primer bloque de contenido para no quedar detrás
       del header fijo (46px de altura del mobile-header) */
    .example {
        margin-top: 46px !important;
    }
    /* El menú desplegable ya tiene top:46px en header.css; asegurar
       que cubra toda la pantalla y tenga z-index correcto */
    #dng-megamenu-mobile {
        z-index: 998 !important;
    }
    /* Fondo blanco para el panel del menú desplegado */
    #dng-megamenu-mobile .primary-structure {
        background: #fff !important;
    }
}

/* sitemap.html: primer contenido es .smap-hero (no .example) */
@media only screen and (max-width: 991px) {
    .smap-hero {
        margin-top: 46px !important;
    }
}

/* ============================================================
   P-42: lr_inner_header_bottom_title_wrapper — offset header fijo
   En páginas sin .example (ej: productos.html), este bloque es
   el primer contenido y queda cubierto por el header fijo 46px.
   CSS :has() soportado en Chrome 105+, Safari 15.4+, Firefox 121+
   ============================================================ */
@media only screen and (max-width: 991px) {
    /* Solo afecta páginas donde NO existe .example en el DOM */
    body:not(:has(.example)) .lr_inner_header_bottom_title_wrapper {
        margin-top: 46px !important;
    }
    /* Para anchor links en todas las páginas */
    .lr_inner_header_bottom_title_wrapper {
        scroll-margin-top: 46px;
    }
    /* Héroe de páginas internas: padding-top de 200px es excesivo
       en móvil — el H1 queda muy lejos del tope del hero.
       padding-bottom debe ser mayor que la altura de inner_shap1.png
       (~80px) para que la ola no solape el contenido. */
    .lr_testi_main_section_wrapper1,
    .lr_testi_main_section_wrapper2,
    .lr_testi_main_section_wrapper3,
    .lr_testi_main_section_wrapper4,
    .lr_testi_main_section_wrapper5,
    .lr_testi_main_section_wrapper6 {
        padding-top: 100px !important;
        padding-bottom: 130px !important;
    }
    /* La ola (inner_shap1.png) es position:absolute bottom:0.
       En móvil reducir su escala para que no invada el texto. */
    .lr_ff_bottom_shape_wrapper img {
        max-height: 60px !important;
        width: 100% !important;
        object-fit: fill !important;
    }
}

/* ============================================================
   P-41b: Menú móvil — corregir submenús y columnas
   El JS clona el desktop menu que usa <ul> anidados (no .menuslide)
   ============================================================ */
@media only screen and (max-width: 991px) {
    /* Ocultar todos los <ul> anidados por defecto */
    #dng-megamenu-mobile li > ul {
        display: none;
    }
    /* Forzar layout vertical (el desktop usa inline-block/float) */
    #dng-megamenu-mobile li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        position: relative;
    }
    #dng-megamenu-mobile .primary-structure,
    #dng-megamenu-mobile ul {
        display: block !important;
    }
    /* Ocultar elementos del desktop que no deben aparecer en móvil
       (botón "Pagos Online" y otros elementos del header-right) */
    #dng-megamenu-mobile .menuRightBox,
    #dng-megamenu-mobile .wcs_fixed_right,
    #dng-megamenu-mobile .header-right,
    #dng-megamenu-mobile .topbar-call,
    #dng-megamenu-mobile [class*="pago"],
    #dng-megamenu-mobile .btn-pagos {
        display: none !important;
    }
}

/* ============================================================
   P-41c: Menú móvil — estilo visual limpio con jerarquía
   ============================================================ */
@media only screen and (max-width: 991px) {

    /* Contenedor principal del panel */
    #dng-megamenu-mobile {
        background: #fff !important;
        padding-bottom: 20px !important;
    }

    /* li como bloque — anula float/inline del desktop */
    #dng-megamenu-mobile li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    /* ul: NO display:block !important — jQuery necesita controlar su visibilidad */
    #dng-megamenu-mobile ul {
        float: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    /* ul raíz siempre visible */
    #dng-megamenu-mobile .primary-structure {
        display: block !important;
    }
    /* Submenús ocultos por defecto — sin !important para que jQuery los pueda abrir */
    #dng-megamenu-mobile li > ul {
        display: none;
    }

    /* ── Nivel 1: ítems principales ── */
    #dng-megamenu-mobile .primary-structure > li > a {
        display: block !important;
        padding: 13px 40px 13px 20px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #222 !important;
        border-bottom: 1px solid #ebebeb !important;
        text-decoration: none !important;
        line-height: 1.4 !important;
    }
    #dng-megamenu-mobile .primary-structure > li > a:hover,
    #dng-megamenu-mobile .primary-structure > li > a:active {
        color: #f0c020 !important;
        background: #fafafa !important;
    }

    /* ── Nivel 2: sub-ítems ── */
    #dng-megamenu-mobile li li > a {
        display: block !important;
        padding: 10px 40px 10px 36px !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #444 !important;
        border-bottom: 1px solid #f5f5f5 !important;
        text-decoration: none !important;
        line-height: 1.4 !important;
    }
    #dng-megamenu-mobile li li > a:hover {
        color: #f0c020 !important;
        background: #fafafa !important;
    }

    /* ── Nivel 3: sub-sub-ítems ── */
    #dng-megamenu-mobile li li li > a {
        padding-left: 52px !important;
        font-size: 13px !important;
        color: #666 !important;
    }

    /* ── Flecha del dropdown-submenu ── */
    #dng-megamenu-mobile .dropdown-submenu {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 44px !important;
        height: 44px !important;
        cursor: pointer !important;
        z-index: 2 !important;
    }

    /* Fondo amarillo del área del header móvil */
    .mobile-navbox {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 4px 12px !important;
        height: 46px !important;
    }

    /* Ocultar botones del desktop que se cuelan al clonar */
    #dng-megamenu-mobile .menuRightBox,
    #dng-megamenu-mobile .btn-pagos,
    #dng-megamenu-mobile [class*="wcs_"] {
        display: none !important;
    }
}