/* ============================================================
   INDEPAN REFUGIO — MAIN CSS
   ============================================================ */

/* ---- VARIABLES ---- */
:root {
    --accent:          #EB881E;
    --accent-dark:     #C96F08;
    --dark-accent:     #8B5A2B;
    --brown-light:     #D4A574;
    --brown-medium:    #A67C52;
    --brown-dark:      #6B4423;
    --brown-very-dark: #4A2E1A;

    --light:           #FFFFFF;
    --bg:              #F5EFE7;
    --bg-card:         #FFFBF7;
    --sensitive:       #FFF4E6;

    --text:            #2A313B;
    --text-muted:      #666666;

    --shadow-sm:  0 2px 8px rgba(42,49,59,.10);
    --shadow-md:  0 4px 20px rgba(42,49,59,.14);
    --shadow-lg:  0 8px 40px rgba(42,49,59,.18);
    --shadow-acc: 0 6px 24px rgba(235,136,30,.30);

    --radius-sm:  0.4rem;
    --radius-md:  0.8rem;
    --radius-lg:  1.4rem;

    --transition: all 0.28s ease;
}

/* ---- RESET & BASE ---- */
@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Inter:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    overscroll-behavior: none;
    background-color: var(--bg);
    scrollbar-width: thin;
    scrollbar-color: var(--brown-light) transparent;
}

body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    color: var(--text);
    font-family: 'Inter', 'Concert One', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

img { max-width: 100%; display: block; }
a  { text-decoration: none; color: inherit; }

/* ============================================================
   HEADER
   ============================================================ */
.base-header {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    background-color: #EDD9BF;
    margin-bottom: -2.3rem;
}

.base-header section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 82%;
    /* Extra bottom padding creates clear space between logo and the straddling nav */
    padding: 1.2rem 0 2.6rem;
}

.header-logo-link img {
    height: 5.5rem;
    width: auto;
    mix-blend-mode: multiply;
    user-select: none;
    pointer-events: none;
    transition: var(--transition);
}
.header-logo-link:hover img { opacity: 0.85; }

.base-section-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
}

.base-section-info a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
    color: var(--accent);
    transition: var(--transition);
}
.base-section-info a:hover { filter: brightness(0.85); }

.base-section-info a i {
    padding: 0.45rem;
    font-size: 1.3rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.base-section-info a article {
    display: flex;
    flex-direction: column;
}

.base-section-info a article strong {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
}

.base-section-info a article small {
    font-size: 0.78rem;
    color: var(--dark-accent);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.base-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 4.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--accent);
    color: var(--light);
    margin: 0 auto;
    /* Default: pill shape */
    width: 88%;
    border-radius: var(--radius-md);
    box-shadow: 0 6px 20px rgba(0,0,0,.22);
    transition: width .3s ease, border-radius .3s ease, box-shadow .3s ease;
}

/* Expanded state applied via JS on scroll */
.base-nav.nav-scrolled {
    width: 100%;
    border-radius: 0;
    box-shadow: var(--shadow-md);
}

.base-nav-sections {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 1rem;
    gap: 0.2rem;
}

.base-nav-sections a {
    padding: 0 1rem;
    height: 100%;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.95rem;
    color: rgba(255,255,255,.92);
    border-bottom: 3px solid transparent;
    transition: var(--transition);
}
.base-nav-sections a:hover,
.base-nav-sections a.nav-active {
    color: var(--light);
    border-bottom-color: var(--light);
}

.base-nav-contact {
    height: 100%;
}

.base-nav-contact a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    height: 100%;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--light);
    background-color: rgba(0,0,0,.12);
    transition: var(--transition);
}
.base-nav-contact a:hover {
    background-color: var(--brown-dark);
}

.nav-hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--light);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0 1rem;
    height: 100%;
    align-items: center;
}

/* ── Mobile backdrop ── */
.mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 199;
}
.mobile-backdrop.active { display: block; }

/* Prevent body scroll when menu open */
body.mm-open { overflow: hidden; }

/* ── Mobile menu panel (slides in from right) ── */
.mobile-menu {
    position: fixed;
    top: 0; right: 0;
    width: min(82vw, 320px);
    height: 100%;
    background: linear-gradient(170deg, #2C1A0E 0%, #4A2E1A 55%, #6B3E20 100%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    box-shadow: -8px 0 32px rgba(0,0,0,.4);
}
.mobile-menu.active { transform: translateX(0); }

/* Header */
.mm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
    flex-shrink: 0;
}
.mm-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
}
.mm-brand img {
    width: 38px; height: 38px;
    object-fit: contain;
    filter: brightness(1.1);
}
.mm-brand strong {
    font-family: 'Concert One', sans-serif;
    font-size: .95rem;
    color: #fff;
    letter-spacing: .02em;
    line-height: 1.2;
}
.mm-close {
    width: 36px; height: 36px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
    flex-shrink: 0;
}
.mm-close:hover { background: rgba(255,255,255,.22); }

/* Nav links */
.mm-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: .8rem 0;
}
.mm-link {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .95rem 1.4rem;
    color: rgba(255,255,255,.75);
    font-family: 'Concert One', sans-serif;
    font-size: 1.1rem;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: color .2s, background .2s, border-color .2s, padding-left .2s;
    letter-spacing: .02em;
}
.mm-link i {
    font-size: 1.25rem;
    color: var(--accent);
    flex-shrink: 0;
    opacity: .85;
    transition: opacity .2s;
}
.mm-link:hover,
.mm-link-active {
    color: #fff;
    background: rgba(255,255,255,.07);
    border-left-color: var(--accent);
    padding-left: 1.7rem;
}
.mm-link:hover i,
.mm-link-active i { opacity: 1; }

/* Decorative separator */
.mm-nav::before {
    content: '';
    display: block;
    height: 1px;
    background: rgba(255,255,255,.07);
    margin: 0 1.2rem .4rem;
}

/* Footer */
.mm-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: 1rem 1.4rem;
    border-top: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}
.mm-footer span {
    font-size: .75rem;
    color: rgba(255,255,255,.32);
    font-style: italic;
}

/* ============================================================
   MAIN
   ============================================================ */
.base-main-content {
    flex: 1;
    margin-top: -2.3rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.base-footer {
    background-color: var(--brown-very-dark);
    color: rgba(255,255,255,.75);
    padding-top: 3.5rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.4fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 3rem;
}

.footer-logo {
    height: 5.5rem;
    width: auto;
    display: block;
    mix-blend-mode: multiply;
}

.footer-logo-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #EDD9BF;
    border-radius: var(--radius-md);
    padding: 0.5rem 0.9rem;
    margin-bottom: 1.4rem;
}

.footer-tagline {
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgba(255,255,255,.60);
    margin-bottom: 1.4rem;
}

.footer-social {
    display: flex;
    gap: 0.8rem;
}

.social-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.80);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: var(--transition);
}
.social-icon:hover { background-color: var(--accent); color: var(--light); }
.social-icon.social-wa:hover { background-color: #25D366; }

.footer-links h4,
.footer-contact h4 {
    font-family: 'Concert One', sans-serif;
    font-size: 1.05rem;
    color: var(--light);
    margin-bottom: 1.2rem;
    letter-spacing: .02em;
}

.footer-links ul,
.footer-contact ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.footer-links ul a {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.88rem;
    color: rgba(255,255,255,.65);
    transition: color .2s;
}
.footer-links ul a:hover { color: var(--accent); }
.footer-links ul a i { font-size: 1rem; }

.footer-contact ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: rgba(255,255,255,.65);
}
.footer-contact ul li i { color: var(--accent); font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.footer-contact ul li a { color: inherit; transition: color .2s; }
.footer-contact ul li a:hover { color: var(--accent); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    text-align: center;
    padding: 1.4rem 2rem;
    font-size: 0.82rem;
    color: rgba(255,255,255,.35);
}

.footer-bottom-sub {
    margin-top: 0.2rem;
    font-size: 0.78rem;
}

/* ============================================================
   WHATSAPP BUTTON
   ============================================================ */
.whatsapp-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 999;
    width: 58px; height: 58px;
    border-radius: 50%;
    background-color: #25D366;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 4px 20px rgba(37,211,102,.45);
    transition: var(--transition);
    animation: float-up 0.6s ease;
}
.whatsapp-btn:hover {
    background-color: #1eaa55;
    transform: scale(1.1);
}

@keyframes float-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   REUSABLE COMPONENTS
   ============================================================ */

/* Section inner wrapper */
.section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Section title block */
.section-title-block {
    text-align: center;
    margin-bottom: 3rem;
}

.section-tag {
    display: inline-block;
    background-color: var(--sensitive);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 0.3rem 0.9rem;
    border-radius: 2rem;
    margin-bottom: 0.8rem;
}

.section-tag-light { background-color: rgba(255,255,255,.15); color: var(--light); }

.section-title-block h2 {
    font-family: 'Concert One', sans-serif;
    font-size: 2.2rem;
    color: var(--dark-accent);
    margin-bottom: 0.7rem;
    line-height: 1.2;
}

.section-title-light h2 { color: var(--light); }
.section-title-light p  { color: rgba(255,255,255,.75); }

.section-title-block p {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 560px;
    margin: 0 auto;
}

/* Buttons */
.btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--accent);
    color: var(--light);
    padding: 0.85rem 2rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.95rem;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}
.btn-accent:hover {
    background-color: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-acc);
}

.btn-outline-accent {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    color: var(--accent);
    border: 2px solid var(--accent);
    padding: 0.75rem 1.8rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.95rem;
    transition: var(--transition);
}
.btn-outline-accent:hover {
    background-color: var(--accent);
    color: var(--light);
    transform: translateY(-2px);
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #25D366;
    color: var(--light);
    padding: 0.85rem 2rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.95rem;
    transition: var(--transition);
}
.btn-whatsapp:hover {
    background-color: #1eaa55;
    transform: translateY(-2px);
}

/* ============================================================
   HERO CAROUSEL
   ============================================================ */
.hero-swiper {
    width: 100%;
    height: min(600px, 90vh);
}

.hero-slide {
    position: relative;
    background-size: cover;
    background-position: center;
}

.hero-slide-1 {
    background:
        linear-gradient(135deg, rgba(74,46,26,.72) 0%, rgba(139,90,43,.6) 50%, rgba(74,46,26,.78) 100%),
        url("../images/hero-tienda.1ff60d0b99a3.jpg") center / cover no-repeat;
}
.hero-slide-2 {
    background:
        linear-gradient(135deg, rgba(74,46,26,.65) 0%, rgba(139,90,43,.55) 50%, rgba(74,46,26,.72) 100%),
        url("../images/hero-tienda2.82ebd99a2b5c.jpg") center / cover no-repeat;
}
.hero-slide-3 {
    background:
        linear-gradient(135deg, rgba(74,46,26,.65) 0%, rgba(139,90,43,.55) 50%, rgba(74,46,26,.72) 100%),
        url("../images/hero-tienda3.681694b67132.jpg") center / cover no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.32);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.hero-text {
    text-align: center;
    color: var(--light);
    max-width: 760px;
    animation: hero-in .7s ease;
}

@keyframes hero-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.3);
    padding: 0.4rem 1.1rem;
    border-radius: 2rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: .05em;
    margin-bottom: 1.4rem;
}

.hero-text h1 {
    font-family: 'Concert One', sans-serif;
    font-size: clamp(1.8rem, 4.5vw, 3.2rem);
    line-height: 1.15;
    margin-bottom: 1rem;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
}

.hero-text p {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    opacity: 0.92;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-btn-primary {
    background-color: var(--light);
    color: var(--accent);
    padding: 0.9rem 2rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.95rem;
    transition: var(--transition);
}
.hero-btn-primary:hover {
    background-color: var(--sensitive);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-btn-secondary {
    background-color: rgba(255,255,255,.15);
    color: var(--light);
    border: 2px solid rgba(255,255,255,.6);
    padding: 0.85rem 1.8rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    backdrop-filter: blur(8px);
    transition: var(--transition);
}
.hero-btn-secondary:hover {
    background-color: rgba(255,255,255,.25);
    transform: translateY(-3px);
}

/* Swiper hero navigation */
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev {
    color: var(--light);
    background-color: rgba(0,0,0,.25);
    border-radius: 50%;
    width: 3rem; height: 3rem;
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
}
.hero-swiper .swiper-button-next::after,
.hero-swiper .swiper-button-prev::after {
    content: '' !important;
    display: none;
}
.hero-swiper .swiper-button-next i,
.hero-swiper .swiper-button-prev i {
    font-size: 1.6rem;
    line-height: 1;
}

.hero-pagination .swiper-pagination-bullet { background: rgba(255,255,255,.5); }
.hero-pagination .swiper-pagination-bullet-active { background: var(--light); transform: scale(1.3); }

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar {
    background-color: var(--brown-very-dark);
    padding: 2rem 2rem;
}

.stats-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
}

.stat-item {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 2rem;
    border-right: 1px solid rgba(255,255,255,.1);
    color: var(--light);
}
.stat-item:last-child { border-right: none; }

.stat-item i {
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.stat-number {
    font-family: 'Concert One', sans-serif;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--light);
}

.stat-label {
    font-size: 0.82rem;
    color: rgba(255,255,255,.55);
    margin-top: 0.3rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ============================================================
   PRODUCTS SECTION
   ============================================================ */
.section-products {
    padding: 5rem 0;
    background-color: var(--bg-card);
    position: relative;
    overflow: hidden;
}

/* Decorative background shapes */
.sp-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.section-products .section-inner {
    position: relative;
    z-index: 1;
}

/* Blurred blobs */
.sp-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
}
.sp-blob-1 {
    width: 480px; height: 480px;
    background: rgba(235,136,30,.22);
    top: -140px; right: -100px;
    animation: sp-float-a 9s ease-in-out infinite;
}
.sp-blob-2 {
    width: 380px; height: 380px;
    background: rgba(139,90,43,.18);
    bottom: -100px; left: -70px;
    animation: sp-float-b 11s ease-in-out infinite;
}
.sp-blob-3 {
    width: 280px; height: 280px;
    background: rgba(235,136,30,.14);
    top: 38%; left: 14%;
    filter: blur(40px);
    animation: sp-float-a 7s ease-in-out infinite reverse;
}

/* Outline rings */
.sp-ring {
    position: absolute;
    border-radius: 50%;
    border: 2.5px solid rgba(235,136,30,.28);
    animation: sp-spin 24s linear infinite;
}
.sp-ring-1 {
    width: 280px; height: 280px;
    top: 5%; right: 10%;
}
.sp-ring-2 {
    width: 180px; height: 180px;
    bottom: 7%; left: 20%;
    border-color: rgba(139,90,43,.22);
    animation-duration: 18s;
    animation-direction: reverse;
}

/* Dot grid */
.sp-dot-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(235,136,30,.18) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
}

@keyframes sp-float-a {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-28px) scale(1.06); }
}
@keyframes sp-float-b {
    0%, 100% { transform: translate(0, 0); }
    50%       { transform: translate(22px, -18px); }
}
@keyframes sp-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.products-swiper {
    padding: 0.5rem 2.8rem 2.5rem !important;
}
.prod-card-placeholder { opacity: 0.65; }

.prod-card {
    background: var(--light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(139,90,43,.08);
    border-top: 3px solid var(--accent);
}
.prod-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(235,136,30,.18);
}

.prod-card-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: var(--sensitive);
}

.prod-card-img img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 0.5rem;
    transition: transform .4s ease;
}
.prod-card:hover .prod-card-img img { transform: scale(1.05); }

.prod-card-no-img {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brown-light);
    font-size: 3rem;
}

.prod-card-body {
    padding: 1.4rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.prod-card-family {
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent);
    margin-bottom: 0.4rem;
}

.prod-card-name {
    font-family: 'Concert One', sans-serif;
    font-size: 1.05rem;
    color: var(--dark-accent);
    margin-bottom: 0.5rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    min-height: calc(1.3em * 2);
}

.prod-card-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    flex: 1;
    margin-bottom: 1rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
}

.prod-card-footer {
    display: flex;
    align-items: center;
    justify-content: stretch;
    border-top: 1px solid rgba(139,90,43,.1);
    padding-top: 0.9rem;
    margin-top: auto;
}

.prod-card-price {
    font-family: 'Concert One', sans-serif;
    font-size: 1.3rem;
    color: var(--accent);
}

.prod-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: var(--light);
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 700;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(235,136,30,.22);
}
.prod-card-btn:hover {
    background: linear-gradient(135deg, var(--accent-dark), var(--dark-accent));
    box-shadow: 0 4px 14px rgba(235,136,30,.38);
}
.prod-card-btn i { transition: transform .2s; }
.prod-card-btn:hover i { transform: translateX(3px); }

/* Products Swiper — equal-height slides */
.products-swiper .swiper-wrapper { align-items: stretch; }
.products-swiper .swiper-slide   { height: auto; }

/* Products Swiper navigation */
.products-swiper .swiper-button-next,
.products-swiper .swiper-button-prev {
    color: var(--accent);
    background-color: var(--light);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    width: 2.8rem; height: 2.8rem;
    top: 45%;
    display: flex; align-items: center; justify-content: center;
}
.products-swiper .swiper-button-next::after,
.products-swiper .swiper-button-prev::after {
    content: '' !important;
    display: none;
}
.products-swiper .swiper-button-next i,
.products-swiper .swiper-button-prev i {
    font-size: 1.4rem;
    line-height: 1;
}

.section-cta-row {
    text-align: center;
    margin-top: 2.5rem;
}

/* ============================================================
   EVENTS SECTION
   ============================================================ */
.section-events {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--dark-accent) 0%, var(--brown-very-dark) 100%);
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 380px));
    gap: 1.8rem;
    justify-content: center;
}

.event-card {
    background: var(--light);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}
.event-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.event-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    background-color: var(--sensitive);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.event-card-img img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform .3s ease;
}
.event-card-img:hover img {
    transform: scale(1.04);
}
.event-card-img::after {
    content: '\eb76';
    font-family: 'boxicons';
    position: absolute;
    bottom: 10px; right: 10px;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: 1.2rem;
    width: 2rem; height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s;
}
.event-card-img:hover::after {
    opacity: 1;
}

/* Event image modal */
.event-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.82);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.event-modal-backdrop.open {
    display: flex;
}
.event-modal-inner {
    position: relative;
    max-width: min(90vw, 680px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: modal-pop .2s ease;
}
@keyframes modal-pop {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.event-modal-inner img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.event-modal-title {
    color: #fff;
    margin-top: .8rem;
    font-family: 'Concert One', sans-serif;
    font-size: 1.1rem;
    text-align: center;
}
.event-modal-close {
    position: absolute;
    top: -1rem; right: -1rem;
    width: 2.2rem; height: 2.2rem;
    background: var(--accent);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .2s;
}
.event-modal-close:hover {
    background: var(--dark-accent);
}
.event-card-no-img {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.4);
    font-size: 3.5rem;
}

.event-badge-discount {
    position: absolute;
    top: 12px; right: 12px;
    background-color: var(--accent);
    color: white;
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
}

.event-card-body {
    padding: 1.4rem;
}
.event-card-body h3 {
    font-family: 'Concert One', sans-serif;
    font-size: 1.1rem;
    color: var(--dark-accent);
    margin-bottom: 0.5rem;
}
.event-card-body p {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.event-card-dates {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.event-card-dates span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 600;
}
.event-card-dates i { font-size: 0.95rem; }

/* ============================================================
   SUPPLIERS BAND
   ============================================================ */
.section-suppliers {
    padding: 5rem 0;
    background-color: var(--bg-card);
    overflow: hidden;
    position: relative;
}
.section-suppliers .section-inner,
.section-suppliers .suppliers-band {
    position: relative;
    z-index: 1;
}

/* Suppliers decorative background */
.ss-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.ss-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
}
.ss-blob-1 {
    width: 380px; height: 380px;
    background: rgba(139,90,43,.2);
    top: -100px; left: -80px;
    animation: sp-float-b 10s ease-in-out infinite;
}
.ss-blob-2 {
    width: 320px; height: 320px;
    background: rgba(235,136,30,.16);
    bottom: -80px; right: -60px;
    animation: sp-float-a 12s ease-in-out infinite;
}
.ss-blob-3 {
    width: 200px; height: 200px;
    background: rgba(74,46,26,.12);
    top: 30%; right: 22%;
    filter: blur(40px);
    animation: sp-float-b 8s ease-in-out infinite reverse;
}
.ss-ring {
    position: absolute;
    border-radius: 50%;
    border: 2.5px solid rgba(139,90,43,.22);
    animation: sp-spin 28s linear infinite;
}
.ss-ring-1 {
    width: 240px; height: 240px;
    bottom: 5%; right: 14%;
}
.ss-ring-2 {
    width: 150px; height: 150px;
    top: 8%; left: 18%;
    border-color: rgba(235,136,30,.2);
    animation-duration: 20s;
    animation-direction: reverse;
}
.ss-dot-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(139,90,43,.14) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
}

.suppliers-band {
    overflow: hidden;
    position: relative;
    padding: 1.5rem 0;
    margin-top: 1rem;
}

.suppliers-band::before,
.suppliers-band::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 5rem;
    z-index: 2;
    pointer-events: none;
}
.suppliers-band::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-card), transparent);
}
.suppliers-band::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-card), transparent);
}

.suppliers-track {
    display: flex;
    gap: 1.2rem;
    width: max-content;
    animation: scroll-suppliers 30s linear infinite;
}
.suppliers-track:hover { animation-play-state: paused; }

@keyframes scroll-suppliers {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.supplier-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--light);
    border: 2px solid var(--brown-light);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.6rem;
    min-width: 190px;
    height: 148px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    flex-shrink: 0;
    gap: 0.6rem;
}

.supplier-chip:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-acc);
    transform: translateY(-3px);
}

.supplier-img-wrap {
    width: 160px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.supplier-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.supplier-name {
    font-family: 'Concert One', sans-serif;
    font-size: 0.9rem;
    color: var(--dark-accent);
    letter-spacing: .02em;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
}

/* Chip sin logo: nombre más grande */
.supplier-chip .supplier-name {
    font-size: 1.15rem;
}

/* ============================================================
   ABOUT / NOSOTROS
   ============================================================ */
.section-about {
    padding: 0;
    background: linear-gradient(135deg, #2C1A0E 0%, #5C3318 35%, #8B5A2B 70%, #4A2E1A 100%);
    position: relative;
    overflow: hidden;
}

/* Waves */
.about-wave-top,
.about-wave-bottom {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    display: block;
}
.about-wave-top svg,
.about-wave-bottom svg {
    display: block;
    width: 100%;
    height: 80px;
}

/* Decorative blobs on dark bg */
.about-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.ab-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}
.ab-blob-1 {
    width: 350px; height: 350px;
    background: rgba(235,136,30,.18);
    top: 10%; right: -80px;
    animation: sp-float-a 10s ease-in-out infinite;
}
.ab-blob-2 {
    width: 250px; height: 250px;
    background: rgba(255,255,255,.06);
    bottom: 15%; left: -50px;
    animation: sp-float-b 13s ease-in-out infinite;
}
.ab-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(235,136,30,.2);
    animation: sp-spin 30s linear infinite;
}
.ab-ring-1 {
    width: 220px; height: 220px;
    bottom: 12%; right: 18%;
}

.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
    padding: 4rem 2rem;
}

.about-text .section-tag {
    margin-bottom: 0.6rem;
    background: rgba(255,255,255,.15);
    color: #fff;
    border-color: rgba(255,255,255,.25);
}

.about-text h2 {
    font-family: 'Concert One', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: #fff;
    margin-bottom: 1.2rem;
    line-height: 1.15;
}

.about-text p {
    font-size: 0.97rem;
    color: rgba(255,255,255,.82);
    line-height: 1.75;
    margin-bottom: 1rem;
}

.about-features {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin: 2rem 0;
}

.about-feature-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.about-feature-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.25);
}

.about-feature-item strong {
    display: block;
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 0.2rem;
}
.about-feature-item p {
    font-size: 0.85rem;
    color: rgba(255,255,255,.7);
    margin: 0;
}

/* About Visual */
.about-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-card-stack {
    position: relative;
    width: 320px;
    height: 320px;
}

.about-card {
    position: absolute;
    background: rgba(255,255,255,.97);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--dark-accent);
    transition: var(--transition);
}
.about-card:hover {
    transform: translateY(-6px) rotate(0deg) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    z-index: 3;
}
.about-card i { font-size: 2.5rem; color: var(--accent); }

.about-card-1 {
    width: 140px; height: 140px;
    top: 0; left: 0;
    transform: rotate(-5deg);
}
.about-card-2 {
    width: 140px; height: 140px;
    top: 0; right: 0;
    transform: rotate(4deg);
}
.about-card-3 {
    width: 140px; height: 140px;
    bottom: 0; left: 50%;
    transform: translateX(-50%) rotate(-2deg);
}

.about-badge {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: var(--light);
    border-radius: 50%;
    width: 90px; height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(235,136,30,.5);
    z-index: 2;
    text-align: center;
}
.about-badge-number {
    font-family: 'Concert One', sans-serif;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: .02em;
}
.about-badge-text {
    font-size: 0.75rem;
    font-weight: 700;
    opacity: .9;
    letter-spacing: .04em;
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.section-cta-final {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    padding: 5rem 0;
}

.cta-final-inner {
    text-align: center;
}

.cta-final-inner h2 {
    font-family: 'Concert One', sans-serif;
    font-size: 2.4rem;
    color: var(--light);
    margin-bottom: 1rem;
}

.cta-final-inner p {
    font-size: 1.05rem;
    color: rgba(255,255,255,.88);
    margin-bottom: 2.2rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.cta-final-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cta-final-btns .btn-accent {
    background-color: var(--light);
    color: var(--accent);
}
.cta-final-btns .btn-accent:hover {
    background-color: var(--sensitive);
}

/* ============================================================
   PRODUCTS LISTING PAGE
   ============================================================ */

/* Hero banner */
.prod-page-hero {
    background: linear-gradient(135deg, var(--accent) 0%, var(--dark-accent) 100%);
    color: var(--light);
    padding: 5.5rem 2rem 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.prod-page-hero::before {
    content: '';
    position: absolute;
    top: -70px; right: -70px;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    pointer-events: none;
}
.prod-page-hero::after {
    content: '';
    position: absolute;
    bottom: -90px; left: -50px;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: rgba(0,0,0,.07);
    pointer-events: none;
}
.prod-page-hero-inner {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.prod-page-hero .section-tag {
    background: rgba(255,255,255,.2);
    color: var(--light);
    margin-bottom: 1.2rem;
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(4px);
}
.prod-page-hero h1 {
    font-family: 'Concert One', sans-serif;
    font-size: clamp(2.4rem, 5.5vw, 3.6rem);
    margin-bottom: 0.8rem;
    line-height: 1.1;
    text-shadow: 0 2px 16px rgba(0,0,0,.18);
}
.prod-page-hero p {
    font-size: 1.1rem;
    opacity: .9;
    max-width: 560px;
    margin: 0 auto;
}

/* Filter bar (sticky below nav) */
.prod-filter-bar {
    background: var(--light);
    border-bottom: 1px solid rgba(139,90,43,.1);
    padding: 1rem 2rem 0.9rem;
    position: sticky;
    top: 4.6rem;
    z-index: 50;
    box-shadow: 0 4px 16px rgba(42,49,59,.08);
}
.prod-filter-form {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto 0.6rem;
}
.pff-search {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg);
    border: 2px solid transparent;
    border-radius: 2rem;
    padding: 0.55rem 1.1rem;
    transition: border-color .2s, box-shadow .2s;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
}
.pff-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(235,136,30,.12);
}
.pff-search i { color: var(--text-muted); font-size: 1.1rem; flex-shrink: 0; }
.pff-search input {
    background: none;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 0.9rem;
    width: 100%;
    color: var(--text);
}
/* Family — custom dropdown (replaces native <select>) */
.pff-custom-dropdown {
    position: relative;
    min-width: 200px;
    flex-shrink: 0;
}
.pff-cd-trigger {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--bg);
    border: 2px solid transparent;
    border-radius: 2rem;
    padding: 0.55rem 1rem 0.55rem 0.85rem;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
    user-select: none;
}
.pff-cd-trigger:hover,
.pff-custom-dropdown.open .pff-cd-trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(235,136,30,.12);
}
.pff-family-icon {
    color: var(--accent);
    font-size: 1rem;
    flex-shrink: 0;
}
.pff-cd-label {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.pff-family-arrow {
    color: var(--text-muted);
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform .2s;
}
.pff-custom-dropdown.open .pff-family-arrow { transform: rotate(180deg); }
.pff-cd-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    max-height: 280px;
    overflow-y: auto;
    background: var(--light);
    border: 1.5px solid rgba(139,90,43,.15);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(42,49,59,.14);
    z-index: 200;
    padding: 0.35rem 0;
    scrollbar-width: thin;
    scrollbar-color: var(--brown-light) transparent;
}
.pff-custom-dropdown.open .pff-cd-panel {
    display: block;
    animation: pff-drop-in .18s ease;
}
@keyframes pff-drop-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pff-cd-list { display: flex; flex-direction: column; }
.pff-cd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.52rem 1.1rem;
    font-size: 0.87rem;
    color: var(--text);
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.pff-cd-item:hover { background: var(--sensitive); color: var(--accent); }
.pff-cd-item.pff-cd-selected {
    background: rgba(235,136,30,.08);
    color: var(--accent);
    font-weight: 600;
}
.pff-cd-item.pff-cd-selected::after {
    content: '\eb7a';
    font-family: 'boxicons';
    font-size: 1rem;
    margin-left: 0.8rem;
}
.pff-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: var(--light);
    border: none;
    border-radius: 2rem;
    padding: 0.58rem 1.5rem;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(235,136,30,.3);
}
.pff-btn:hover {
    background: linear-gradient(135deg, var(--accent-dark), var(--dark-accent));
    box-shadow: 0 4px 14px rgba(235,136,30,.4);
    transform: translateY(-1px);
}
.pff-clear {
    color: var(--text-muted);
    font-size: 0.82rem;
    border-bottom: 1px dotted currentColor;
    transition: color .2s;
    white-space: nowrap;
}
.pff-clear:hover { color: var(--accent); }
.pff-count {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Grid section */
.prod-page-grid-section {
    padding: 3rem 0 6rem;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}
.prod-page-grid-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

/* Products grid section — decorative background */
.pgs-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.pgs-dot-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(235,136,30,.10) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
}
.pgs-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}
.pgs-blob-1 {
    width: 460px; height: 460px;
    background: rgba(235,136,30,.10);
    top: -80px; right: -110px;
    animation: sp-float-a 13s ease-in-out infinite;
}
.pgs-blob-2 {
    width: 360px; height: 360px;
    background: rgba(139,90,43,.09);
    bottom: -60px; left: -80px;
    animation: sp-float-b 16s ease-in-out infinite;
}
.pgs-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(235,136,30,.14);
    animation: sp-spin 32s linear infinite;
}
.pgs-ring-1 {
    width: 260px; height: 260px;
    top: 6%; right: 7%;
}
.pgs-ring-2 {
    width: 170px; height: 170px;
    bottom: 8%; left: 14%;
    border-color: rgba(139,90,43,.11);
    animation-duration: 22s;
    animation-direction: reverse;
}
.prod-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

/* Product card */
.plc {
    background: var(--light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    border: 1px solid rgba(139,90,43,.08);
    border-top: 3px solid var(--accent);
}
.plc:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(235,136,30,.18), var(--shadow-md);
}
.plc-img-wrap { position: relative; overflow: hidden; }
.plc-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(139,90,43,.5) 0%, transparent 55%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 1;
}
.plc:hover .plc-img-wrap::after { opacity: 1; }
.plc-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    padding: 0.75rem;
    display: block;
    transition: transform .45s ease;
}
.plc:hover .plc-img { transform: scale(1.07); }
.plc-no-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--sensitive), var(--bg));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--brown-light);
}
.plc-badge-agotado {
    position: absolute;
    top: 12px; right: 12px;
    background: linear-gradient(135deg, #c0392b, #96281b);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    border-radius: 2rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    box-shadow: 0 2px 8px rgba(192,57,43,.35);
    z-index: 2;
}
.plc-body {
    padding: 1.3rem 1.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
}
.plc-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.plc-family {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--accent);
}
.plc-sku {
    font-size: 0.68rem;
    color: var(--text-muted);
    background: var(--bg);
    padding: 0.12rem 0.55rem;
    border-radius: 2rem;
    border: 1px solid rgba(0,0,0,.06);
}
.plc-name {
    font-family: 'Concert One', sans-serif;
    font-size: 1.15rem;
    color: var(--dark-accent);
    line-height: 1.25;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    min-height: calc(1.25em * 2);
}
.plc-desc {
    font-size: 0.83rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
}
.plc-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.plc-cat {
    font-size: 0.68rem;
    background: var(--sensitive);
    color: var(--dark-accent);
    padding: 0.2rem 0.6rem;
    border-radius: 2rem;
    border: 1px solid rgba(139,90,43,.15);
    font-weight: 500;
}
.plc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    border-top: 1px solid rgba(139,90,43,.1);
    padding-top: 0.9rem;
    margin-top: auto;
}
.plc-size {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.76rem;
    color: var(--text-muted);
    background: var(--bg);
    padding: 0.2rem 0.65rem;
    border-radius: 2rem;
}
.plc-size i { color: var(--accent); font-size: 0.9rem; }
.plc-status {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 2rem;
}
.plc-status--disponible {
    color: #2e7d32;
    background: #e8f5e9;
}
.plc-status--disponible i { font-size: 0.55rem; color: #2e7d32; }
.plc-status--agotado {
    color: #c62828;
    background: #ffebee;
}
.plc-status--agotado i { font-size: 0.55rem; color: #c62828; }
.plc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: var(--light);
    padding: 0.68rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    font-weight: 700;
    transition: var(--transition);
    text-align: center;
    box-shadow: 0 2px 8px rgba(235,136,30,.25);
}
.plc-btn:hover {
    background: linear-gradient(135deg, var(--accent-dark), var(--dark-accent));
    box-shadow: 0 4px 16px rgba(235,136,30,.4);
    transform: translateY(-1px);
}
.plc-btn i { font-size: 1.1rem; transition: transform .2s; }
.plc-btn:hover i { transform: translateX(4px); }

/* Empty state */
.prod-page-empty {
    text-align: center;
    padding: 6rem 2rem;
    color: var(--text-muted);
}
.prod-page-empty i {
    font-size: 4.5rem;
    color: var(--brown-light);
    margin-bottom: 1.2rem;
    display: block;
}
.prod-page-empty h3 {
    font-family: 'Concert One', sans-serif;
    font-size: 1.5rem;
    color: var(--dark-accent);
    margin-bottom: 0.5rem;
}
.prod-page-empty a { color: var(--accent); border-bottom: 1px solid; }

/* Page header (legacy — kept for compatibility) */
.page-header {
    background: linear-gradient(135deg, var(--accent) 0%, var(--dark-accent) 100%);
    color: var(--light);
    padding: 4rem 2rem;
    text-align: center;
}
.page-header h1 {
    font-family: 'Concert One', sans-serif;
    font-size: 2.5rem;
    margin: 0 0 0.5rem;
}
.page-header p {
    font-size: 1.05rem;
    opacity: .88;
}

/* Filters */
.filters-section {
    background-color: var(--sensitive);
    border-bottom: 2px solid var(--accent);
    padding: 1.4rem 2rem;
    position: sticky;
    top: 4.6rem;
    z-index: 50;
}

.filters-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.filters-container h3 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--dark-accent);
    font-weight: 700;
}

.filter-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.filter-group label {
    font-size: 0.85rem;
    color: var(--dark-accent);
    font-weight: 600;
}
.filter-group select,
.filter-group input[type="text"] {
    padding: 0.45rem 0.8rem;
    border: 1.5px solid var(--brown-light);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.88rem;
    background-color: var(--light);
    transition: border-color .2s;
}
.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: var(--accent);
}

.filter-submit {
    padding: 0.45rem 1.2rem;
    background-color: var(--accent);
    color: var(--light);
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.filter-submit:hover { background-color: var(--accent-dark); }

/* Products listing */
.products-listing {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem 3rem;
}

.products-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.product-card-listing {
    background: var(--light);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}
.product-card-listing:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.product-image {
    width: 100%;
    height: 230px;
    overflow: hidden;
    background-color: var(--sensitive);
}
.product-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.product-card-listing:hover .product-image img { transform: scale(1.04); }

.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--brown-light);
    font-size: 0.9rem;
}

.product-info-listing {
    padding: 1.4rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.product-info-listing h3 {
    font-family: 'Concert One', sans-serif;
    font-size: 1.15rem;
    color: var(--dark-accent);
    margin-bottom: 0.4rem;
}

.product-sku { color: var(--text-muted); font-size: 0.82rem; margin-bottom: 0.3rem; }
.product-description { color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; margin: 0.6rem 0; flex: 1; }

.product-specs { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.8rem 0; font-size: 0.85rem; }
.spec { color: var(--text-muted); }
.stock-available   { color: #28a745; font-weight: 600; }
.stock-unavailable { color: #dc3545; font-weight: 600; }

.product-categories { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0; }
.category-badge {
    background-color: var(--sensitive);
    color: var(--dark-accent);
    padding: 0.2rem 0.6rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    border: 1px solid var(--brown-light);
}

.product-footer-listing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    margin-top: auto;
    border-top: 1px solid #f0e8df;
}

.price {
    font-family: 'Concert One', sans-serif;
    font-size: 1.4rem;
    color: var(--accent);
}

.detail-btn {
    background-color: var(--accent);
    color: var(--light);
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--transition);
}
.detail-btn:hover { background-color: var(--accent-dark); }

.no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.products-info {
    background-color: var(--sensitive);
    padding: 2.5rem 2rem;
    text-align: center;
    margin-top: 2rem;
}
.info-container h2 { color: var(--dark-accent); font-family: 'Concert One', sans-serif; margin-bottom: 0.5rem; }
.info-container p { color: var(--text-muted); font-size: 0.95rem; }

/* ============================================================
   CONTACT PAGE — kept from original but cleaned
   ============================================================ */
.contact-header {
    background: linear-gradient(135deg, var(--accent) 0%, var(--dark-accent) 100%);
    color: var(--light);
    padding: 4rem 2rem;
    text-align: center;
}
.contact-header-content h1 {
    font-family: 'Concert One', sans-serif;
    font-size: 2.5rem;
    margin: 0 0 0.8rem;
}
.contact-header-content p { font-size: 1.05rem; opacity: .9; }

.contact-main { max-width: 1200px; margin: 3rem auto; padding: 0 2rem; }
.contact-container { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.contact-info-section { display: flex; flex-direction: column; gap: 1.8rem; }

.contact-card {
    background-color: #EDD9BF;
    border: 2px solid var(--brown-light);
    border-radius: var(--radius-md);
    padding: 1.8rem;
    display: flex;
    gap: 1.2rem;
    transition: var(--transition);
}
.contact-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(235,136,30,.18);
}
.card-icon { font-size: 2rem; color: var(--accent); min-width: 50px; display: flex; align-items: center; }
.card-content h3 { color: var(--dark-accent); margin: 0 0 0.4rem; font-size: 1rem; }
.card-content p { color: var(--text-muted); margin: 0 0 0.8rem; font-size: 0.9rem; }

.view-map-btn, .call-btn, .email-btn {
    display: inline-block;
    background-color: var(--accent);
    color: var(--light);
    padding: 0.6rem 1.3rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--transition);
}
.view-map-btn:hover, .call-btn:hover, .email-btn:hover {
    background-color: var(--accent-dark);
    transform: translateX(4px);
}

.social-section {
    background-color: #EDD9BF;
    border: 2px solid var(--brown-light);
    border-radius: var(--radius-md);
    padding: 1.8rem;
}
.social-section h3 { color: var(--dark-accent); margin: 0 0 1.2rem; }
.social-links { display: flex; gap: 0.8rem; flex-wrap: wrap; }

.social-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1.3rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition);
    border: 2px solid transparent;
    background-color: var(--accent);
    color: var(--light);
}
.social-btn:hover { filter: brightness(.9); transform: translateY(-2px); }
.social-btn.facebook { background-color: #1877F2; }
.social-btn i { font-size: 1.3rem; }

.contact-map-section { display: flex; flex-direction: column; gap: 2rem; }

.map-container {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    height: 400px;
}

.contact-form-section {
    background-color: #EDD9BF;
    border: 2px solid var(--brown-light);
    border-radius: var(--radius-md);
    padding: 2rem;
}
.contact-form-section h2 { color: var(--dark-accent); margin: 0 0 1.4rem; font-family: 'Concert One', sans-serif; }
.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-group { display: flex; flex-direction: column; }
.form-group label { color: var(--dark-accent); font-weight: 600; margin-bottom: 0.4rem; font-size: 0.9rem; }
.form-group input, .form-group textarea {
    padding: 0.75rem;
    border: 1.5px solid #ddd;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.92rem;
    transition: border-color .2s;
}
.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(235,136,30,.1);
}

.submit-btn {
    background-color: var(--accent);
    color: var(--light);
    padding: 0.9rem;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
}
.submit-btn:hover { background-color: var(--accent-dark); transform: translateY(-2px); }
.form-note { color: var(--text-muted); font-size: 0.82rem; text-align: center; margin: 0; }

.business-hours { background-color: #EDD9BF; padding: 3rem 2rem; margin-top: 3rem; }
.hours-container { max-width: 1200px; margin: 0 auto; text-align: center; }
.hours-container h2 { font-family: 'Concert One', sans-serif; color: var(--dark-accent); margin-bottom: 1.8rem; }
.hours-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.hour-item {
    background: var(--light);
    padding: 1.4rem;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--accent);
    text-align: left;
}
.hour-item strong { display: block; color: var(--dark-accent); margin-bottom: 0.3rem; }
.hour-item span { color: var(--text-muted); font-size: 0.9rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */

[data-animate] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .65s ease, transform .65s ease;
}
[data-animate="from-left"]  { transform: translateX(-36px); }
[data-animate="from-right"] { transform: translateX(36px); }
[data-animate="scale"]      { transform: scale(0.93); opacity: 0; }

[data-animate].visible {
    opacity: 1;
    transform: none;
}

[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .18s; }
[data-delay="3"] { transition-delay: .29s; }
[data-delay="4"] { transition-delay: .40s; }
[data-delay="5"] { transition-delay: .50s; }

/* ============================================================
   RECIPES — PUBLIC PAGES
   ============================================================ */

/* Hero */
.rec-hero {
    background: linear-gradient(135deg, var(--brown-very-dark) 0%, var(--dark-accent) 60%, #C96F08 100%);
    padding: 5rem 2rem 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.rec-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.06) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
}
.rec-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
}
.rec-hero .section-tag {
    background: rgba(255,255,255,.18);
    color: #fff;
    border-color: rgba(255,255,255,.25);
    margin-bottom: .8rem;
}
.rec-hero h1 {
    font-family: 'Concert One', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: #fff;
    margin-bottom: .8rem;
    line-height: 1.15;
}
.rec-hero p { color: rgba(255,255,255,.85); font-size: 1rem; }
.rec-hero strong { color: var(--accent); }

/* Brand filter bar */
.rec-filters-bar {
    background: var(--bg-card);
    padding: 1.2rem 2rem;
    border-bottom: 1px solid rgba(139,90,43,.1);
    position: sticky;
    top: 0;
    z-index: 100;
}
.rec-filters-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: .7rem;
    flex-wrap: wrap;
    align-items: center;
}
.rec-brand-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1.1rem;
    border-radius: 2rem;
    font-size: .88rem;
    font-weight: 600;
    border: 2px solid rgba(139,90,43,.2);
    color: var(--dark-accent);
    background: var(--light);
    transition: var(--transition);
    text-decoration: none;
}
.rec-brand-btn:hover,
.rec-brand-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.rec-brand-btn.rec-brand-pillsbury:hover,
.rec-brand-btn.rec-brand-pillsbury.active  { background: #1565c0; border-color: #1565c0; color: #fff; }
.rec-brand-btn.rec-brand-westco:hover,
.rec-brand-btn.rec-brand-westco.active     { background: #c62828; border-color: #c62828; color: #fff; }
.rec-brand-btn.rec-brand-santa_cruz:hover,
.rec-brand-btn.rec-brand-santa_cruz.active { background: #f9a825; border-color: #f9a825; color: #3e2000; }

/* Grid */
.rec-grid-section {
    padding: 3.5rem 2rem 5rem;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}
.rec-grid-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.rec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.8rem;
}
.rec-grid-sm {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.4rem;
}

/* Recipe card */
.rec-card {
    background: var(--light);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(139,90,43,.08);
    border-top: 3px solid var(--accent);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.rec-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(235,136,30,.18);
}
.rec-card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sensitive);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rec-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.rec-card:hover .rec-card-img img { transform: scale(1.05); }
.rec-card-no-img {
    font-size: 3rem;
    color: var(--brown-light);
}
.rec-card-body {
    padding: 1rem 1.1rem 1.2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.rec-card-body h3 {
    font-family: 'Concert One', sans-serif;
    font-size: 1rem;
    color: var(--dark-accent);
    margin: 0;
    line-height: 1.3;
}
.rec-card-body p {
    font-size: .83rem;
    color: var(--text-muted);
    margin: 0;
    flex: 1;
}
.rec-card-meta {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .4rem;
}
.rec-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .78rem;
    color: var(--text-secondary);
}
.rec-card-meta i { color: var(--accent); }

/* Brand chips */
.rec-brand-chip {
    display: inline-block;
    padding: .25rem .7rem;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    position: absolute;
    top: 10px; left: 10px;
}
.rec-brand-chip.rec-brand-pillsbury  { background: #1565c0; color: #fff; }
.rec-brand-chip.rec-brand-westco     { background: #c62828; color: #fff; }
.rec-brand-chip.rec-brand-santa_cruz { background: #f9a825; color: #3e2000; }

/* Difficulty badges */
.rec-diff { font-size: .78rem; font-weight: 700; padding: .15rem .55rem; border-radius: 2rem; }
.rec-diff-facil      { background: rgba(39,174,96,.12); color: #1e8449; }
.rec-diff-intermedio { background: rgba(235,136,30,.15); color: var(--dark-accent); }
.rec-diff-avanzado   { background: rgba(192,57,43,.12); color: #c0392b; }

/* Empty state */
.rec-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}
.rec-empty i { font-size: 4rem; color: var(--brown-light); display: block; margin-bottom: 1rem; }

/* ---- RECIPE DETAIL ---- */
.rdet-wrap {
    background: var(--bg);
    padding: 4rem 2rem 3rem;
}
.rdet-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 3rem;
    align-items: start;
}
.rdet-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 2px solid rgba(235,136,30,.2);
    box-shadow: var(--shadow-md);
    background: var(--sensitive);
    display: flex; align-items: center; justify-content: center;
}
.rdet-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.rdet-no-img { font-size: 4rem; color: var(--brown-light); }

.rdet-meta-card {
    background: var(--light);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(139,90,43,.1);
    padding: 1.2rem;
    margin-top: 1.2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
}
.rdet-meta-item {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.rdet-meta-item > i {
    font-size: 1.5rem;
    color: var(--accent);
    flex-shrink: 0;
}
.rdet-meta-item strong {
    display: block;
    font-size: .75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.rdet-meta-item span { font-size: .9rem; color: var(--dark-accent); font-weight: 600; }

.rdet-back-btn {
    display: block;
    text-align: center;
    margin-top: 1.2rem;
}

.rdet-content h1 {
    font-family: 'Concert One', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--dark-accent);
    margin-bottom: .6rem;
    line-height: 1.15;
}
.rdet-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
}
.rdet-section { margin-bottom: 2.4rem; }
.rdet-section h2 {
    font-family: 'Concert One', sans-serif;
    font-size: 1.3rem;
    color: var(--dark-accent);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 2px solid rgba(235,136,30,.2);
    padding-bottom: .5rem;
}
.rdet-section h2 i { color: var(--accent); }

.rdet-ingredients {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.rdet-ingredients li {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .9rem;
    background: var(--sensitive);
    border-radius: .5rem;
    font-size: .92rem;
    color: var(--text-secondary);
}
.rdet-ingredients li::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--accent);
    border-radius: 50%;
    flex-shrink: 0;
}

.rdet-steps {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    counter-reset: steps;
}
.rdet-steps li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    font-size: .93rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.step-num {
    width: 2rem; height: 2rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    flex-shrink: 0;
    margin-top: .05rem;
}

.rdet-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, var(--sensitive), #FFF0DC);
    border: 1px solid rgba(235,136,30,.2);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.6rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.rdet-cta > i { font-size: 2rem; color: var(--accent); flex-shrink: 0; }
.rdet-cta > div { flex: 1; min-width: 160px; }
.rdet-cta strong { display: block; color: var(--dark-accent); font-size: .95rem; }
.rdet-cta p { margin: 0; font-size: .85rem; color: var(--text-muted); }

/* More recipes section */
.rdet-more {
    background: var(--bg-card);
    padding: 3rem 2rem 4rem;
    border-top: 1px solid rgba(139,90,43,.1);
}
.rdet-more-inner { max-width: 1100px; margin: 0 auto; }
.rdet-more h2 {
    font-family: 'Concert One', sans-serif;
    color: var(--dark-accent);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .base-header section { width: 95%; }
    .footer-content { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .about-grid { grid-template-columns: 1fr; padding: 3rem 1.5rem; }
    .about-visual { order: -1; }
    .contact-container { grid-template-columns: 1fr; }
    .stats-container .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
    .stats-container .stat-item:last-child { border-bottom: none; }
}

@media (max-width: 768px) {
    .base-section-info { display: none; }
    .base-nav-sections { display: none; }
    .base-nav-contact  { display: none; }
    .nav-hamburger { display: flex; }
    .base-nav { justify-content: space-between; }

    .hero-swiper { height: min(480px, 85vh); }
    .hero-text h1 { font-size: 1.7rem; }

    .footer-content { grid-template-columns: 1fr; gap: 2rem; }
    .section-title-block h2 { font-size: 1.8rem; }

    .products-container { grid-template-columns: 1fr; }
    .filters-container { flex-direction: column; align-items: flex-start; gap: 0.8rem; }

    .about-card-stack { width: 260px; height: 260px; }
    .about-card { width: 110px; height: 110px; }
    .about-card i { font-size: 2rem; }
    .about-card-3 { bottom: 0; }

    /* Products listing page */
    .prod-page-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .prod-filter-form { flex-direction: column; align-items: stretch; }
    .pff-search { flex: 1 1 auto; }
    .pff-selects { flex-direction: column; }
    .pff-selects select { width: 100%; min-width: unset; }
    .pff-btn { width: 100%; justify-content: center; display: flex; align-items: center; gap: 0.4rem; }
    .pff-clear { text-align: center; }
}

@media (max-width: 768px) {
    .rdet-inner { grid-template-columns: 1fr; }
    .rdet-aside { order: -1; }
    .rdet-meta-card { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .hero-btns { flex-direction: column; }
    .hero-btn-primary, .hero-btn-secondary { width: 100%; text-align: center; }
    .stat-item { padding: 1rem; }
    .cta-final-btns { flex-direction: column; align-items: stretch; }
    .whatsapp-btn { bottom: 1.2rem; right: 1.2rem; width: 52px; height: 52px; font-size: 1.7rem; }
    .prod-page-grid { grid-template-columns: 1fr; }
    .prod-filter-bar { top: 4.6rem; }
}


/* ======================================================================== */
/* COUPON ORB                                                                */
/* ======================================================================== */

/* ---- Orbe flotante ---- */
.coupon-orb {
    position: fixed;
    bottom: 6.5rem;
    left: 1.5rem;
    z-index: 150;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe066, #ff8c00 55%, #c85000 100%);
    border: 3px solid rgba(255,255,255,.45);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 22px rgba(255,140,0,.55);
    animation: orb-pulse 2.8s ease-in-out infinite;
    line-height: 1;
    padding: 0;
    gap: 0;
}
.coupon-orb-pct {
    font-size: 1.15rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.35);
    line-height: 1;
}
.coupon-orb-label {
    font-size: .6rem;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    letter-spacing: .04em;
    line-height: 1;
}

@keyframes orb-pulse {
    0%, 100% {
        box-shadow: 0 4px 22px rgba(255,140,0,.55), 0 0 0 0 rgba(255,140,0,.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 6px 32px rgba(255,140,0,.75), 0 0 0 14px rgba(255,140,0,0);
        transform: scale(1.06);
    }
}

/* ---- Overlay ---- */
.coupon-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(5px);
}
.coupon-overlay.coupon-overlay-open {
    display: flex;
    animation: coupon-fade .22s ease;
}

/* ---- Modal card ---- */
.coupon-modal {
    background: #fff;
    border-radius: 1.6rem;
    max-width: 400px;
    width: 100%;
    padding: 2.4rem 2rem 2rem;
    text-align: center;
    position: relative;
    animation: coupon-slide .28s ease;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.coupon-modal-close {
    position: absolute;
    top: .9rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: #aaa;
    line-height: 1;
    padding: .2rem .4rem;
    border-radius: .4rem;
    transition: color .15s;
}
.coupon-modal-close:hover { color: #333; }

.coupon-emoji  { font-size: 3rem; line-height: 1; margin-bottom: .4rem; }
.coupon-title  { font-size: 1.45rem; font-weight: 800; color: #2a1810; margin: .3rem 0; }
.coupon-pct    { font-size: 4rem; font-weight: 900; color: #c85000; line-height: 1; margin: .4rem 0; }
.coupon-subtitle { color: #666; font-size: .92rem; margin-bottom: 1.2rem; line-height: 1.5; }

.coupon-expiry {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: .75rem;
    padding: .55rem 1rem;
    font-size: .84rem;
    color: #7a5c00;
    margin-bottom: 1.4rem;
}
.coupon-expiry i { font-size: 1rem; flex-shrink: 0; }

/* ---- Form ---- */
.coupon-form { display: flex; flex-direction: column; gap: .7rem; }
.coupon-form input {
    padding: .75rem 1rem;
    border: 1.5px solid #e0e0e0;
    border-radius: .75rem;
    font-size: .95rem;
    outline: none;
    transition: border-color .18s;
    font-family: inherit;
}
.coupon-form input:focus { border-color: #c85000; }

.coupon-submit {
    padding: .85rem 1rem;
    background: linear-gradient(135deg, #c85000 0%, #e07a00 100%);
    color: #fff;
    border: none;
    border-radius: .75rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .18s, transform .12s;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
.coupon-submit:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
.coupon-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ---- Success section ---- */
#couponSuccessSection {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
}

@keyframes coupon-fade  { from { opacity: 0; }              to { opacity: 1; } }
@keyframes coupon-slide { from { transform: translateY(36px) scale(.96); opacity: 0; }
                          to   { transform: translateY(0)    scale(1);    opacity: 1; } }

@media (max-width: 480px) {
    .coupon-orb { width: 58px; height: 58px; bottom: 5.5rem; left: 1rem; }
    .coupon-modal { padding: 2rem 1.4rem 1.6rem; }
}