/* ---------- Design Tokens ---------- */
        :root {
            --brand-blue-700: #1f8ac6;
            /* header bar */
            --brand-blue-600: #6cb5df;
            /* nav bar */
            --brand-blue-500: #45b6e5;
            /* accents */
            --brand-blue-100: #e8f6ff;
            /* chip bg */
            --hero-blue: #6cb5df;
            /* hero background */
            --accent-orange: #ff7a45;
            /* CTA / highlights */
            --accent-yellow: #ffc107;
            /* emphasized word */
            --text-dark: #25323a;
            /* headings */
            --text-muted: #5b6b75;
            /* body */
            --surface: #ffffff;
            /* cards */
            --surface-2: #f6f9fc;
            /* page bg */
            --border: #e6eef4;
            /* strokes */
            --shadow: 0 10px 24px rgba(0, 0, 0, .08);
            --radius: 16px;
            --radius-lg: 20px;
        }

        /* ---------- Base / Reset ---------- */
        * {
            box-sizing: border-box
        }

        html,
        body {
            margin: 0
        }

        body {
            font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
            color: var(--text-dark);
            background: var(--surface-2);
            line-height: 1.5;
        }

        a {
            color: inherit;
            text-decoration: none
        }

        img {
            max-width: 100%;
            display: block
        }

        .container {
            max-width: 1200px;
            margin-inline: auto;
            padding: 0 20px
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            border-radius: 999px;
            padding: .75rem 1.25rem;
            font-weight: 600;
            border: 2px solid transparent;
            cursor: pointer
        }

        .btn:focus-visible {
            outline: 3px solid #0000;
            box-shadow: 0 0 0 4px rgba(0, 0, 0, .08)
        }

        .btn-primary {
            background: var(--accent-orange);
            color: #fff
        }

        .btn-outline {
            background: #fff;
            border-color: var(--border);
            color: var(--text-dark)
        }

        /* ---------- Top Social Bar ---------- */
        .topbar {
            background: var(--brand-blue-700);
            color: #fff;
            font-size: .85rem
        }

        .topbar .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: 38px
        }

        .social {
            display: flex;
            gap: .6rem;
            align-items: center
        }

        .social a {
            display: grid;
            place-items: center;
            width: 28px;
            height: 28px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .15)
        }

        /* ---------- Header / Nav ---------- */
        header {
            background: var(--brand-blue-600);
            color: #fff;
            position: sticky;
            top: 0;
            z-index: 50
        }

        .nav {
            display: flex;
            align-items: center;
            gap: 1rem;
            min-height: 64px
        }

        .brand {
            display: flex;
            align-items: center;
            gap: .6rem;
            font-weight: 800;
            font-size: 1.2rem;
            letter-spacing: .3px
        }

        .logo-bulb {
            width: 26px;
            height: 26px
        }

        .navlinks {
            margin-left: 2rem;
            display: flex;
            gap: 1.25rem
        }

        .navlinks a {
            opacity: .95
        }

        .nav-cta {
            margin-left: auto;
            display: flex;
            gap: .6rem;
            align-items: center
        }

        .pill {
            padding: .5rem .9rem;
            border-radius: 999px;
            border: 2px solid #fff3;
            color: #fff;
            background: transparent
        }

        .login {
            background: #fff;
            border-color: #fff;
            color: var(--accent-orange);
            font-weight: 700
        }

        /* Mobile nav */ 
        #menuToggle {
            display: none
        }

        .hamburger {
            display: none;
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: rgba(255, 255, 255, .15);
            align-items: center;
            justify-content: center
        }

        @media (max-width:960px) {
            .nav {
                flex-wrap: wrap
            }

            .navlinks {
                display: none;
                width: 100%;
                order: 3;
                padding: .5rem 0;
                border-top: 1px solid #ffffff22
            }

            .navlinks a {
                padding: .5rem 0;
                display: block
            }

            #menuToggle:checked+label+.navlinks {
                display: block
            }

            .hamburger {
                display: flex
            }

            .nav-cta {
                margin-left: 0;
                order: 2
            }
        }

        /* ---------- Hero ---------- */
        .hero {
            /* padding: 20px 50px 50px; */
            position: relative;
            isolation: isolate;
            background: linear-gradient(180deg, var(--hero-blue) 0%, #7fc0e5 60%, #8cc8ea 100%);
            color: #fff;
            overflow: hidden
        }

        .hero::before,
        .hero::after {
            content: "";
            position: absolute;
            inset: auto -20% 0 -20%;
            height: 160px;
            border-top-left-radius: 50% 100%;
            border-top-right-radius: 50% 100%;
            background: linear-gradient(180deg, #79bde4 0%, #6fb6df 100%);
            z-index: -1
        }

        .hero .container {
            /* padding: 70px 20px 50px; */
            padding: 10px 30px 15px;

            display: grid;
            gap: 18px;
            justify-items: center;
            text-align: center
        }

        .hero h1 {
            font-size: clamp(28px, 4.8vw, 56px);
            line-height: 1.05;
            margin: 0;
            font-weight: 800;
            letter-spacing: -.5px
        }

        .hero em {
            color: var(--accent-yellow);
            font-style: normal
        }

        .hero p {
            margin: 0;
            color: #eef7ff;
            opacity: .95;
            font-weight: 600
        }

        /* Search */
        .searchbar {
            margin-top: 14px;
            background: #fff;
            border-radius: 999px;
            padding: .4rem;
            display: flex;
            gap: .6rem;
            align-items: center;
            box-shadow: var(--shadow);
            width: min(760px, 92vw)
        }

        .searchbar input {
            flex: 1;
            border: 0;
            padding: 1rem 1.1rem;
            border-radius: 999px;
            font: 500 1rem Poppins, system-ui
        }

        .searchbar button {
            border: 0
        }

        /* ---------- Chips / Filters ---------- */
        .chips {
            margin-top: -70px
        }

        .chip-row {
            display: flex;
            gap: .6rem;
            overflow: auto;
            padding: 0 8px 2px;
            scroll-snap-type: x mandatory
        }

        .chip {
            scroll-snap-align: start;
            white-space: nowrap;
            background: var(--brand-blue-100);
            border: 2px solid #cfe9fa;
            color: #256182;
            padding: .55rem 1rem;
            border-radius: 999px;
            font-weight: 600
        }

        .chip.is-active {
            background: #fff;
            border-color: #7cc5ee;
            box-shadow: 0 6px 16px rgba(82, 167, 219, .25)
        }

        /* ---------- Cards Grid ---------- */
        .section {
            padding: 36px 0
        }

        .section h2 {
            font-size: clamp(24px, 3.5vw, 36px);
            margin: 0 0 .25rem
        }

        .section p.lead {
            color: var(--text-muted);
            margin: .25rem 0 1rem
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 18px
        }

        .span-12 {
            grid-column: span 12
        }

        .cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 18px
        }

        .card {
            background: var(--surface);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            overflow: hidden;
            border: 1px solid var(--border);
            display: flex;
            flex-direction: column
        }

        .card-media {
            aspect-ratio: 16/9;
            position: relative;
            background: #dfeef7
        }

        .deal {
            position: absolute;
            top: 10px;
            left: 10px;
            background: var(--accent-orange);
            color: #fff;
            font: 700 .8rem Poppins;
            padding: .35rem .5rem;
            border-radius: 999px
        }

        .rating {
            position: absolute;
            right: 10px;
            bottom: 10px;
            background: #fff;
            color: #222;
            padding: .35rem .5rem;
            border-radius: 999px;
            display: flex;
            align-items: center;
            gap: .25rem;
            font-weight: 700
        }

        .card-body {
            padding: 14px 16px 16px;
            display: grid;
            gap: 10px
        }

        .title {
            font-size: 1.05rem;
            font-weight: 700
        }

        .meta {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            color: var(--text-muted);
            font-weight: 500
        }

        .price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto
        }

        .price {
            font-weight: 800;
            color: #e23d2d
        }

        .btn-blue {
            background: var(--brand-blue-500);
            color: #fff;
            border: 0
        }

        /* ---------- Icons (utility) ---------- */
        .icon {
            width: 18px;
            height: 18px;
            display: inline-block
        }

        /* ---------- Footer ---------- */
        footer {
            padding: 56px 0;
            color: var(--text-muted)
        }



        /* ---------- Decorative doodles (optional) ---------- */
        .doodle {
            position: absolute;
            inset: auto auto -22px 10%;
            width: min(180px, 22vw);
            opacity: .95;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .12))
        }

        .doodle.right {
            left: auto;
            right: 6%
        }
        /* ---------- Footer (reworked to match screenshot) ---------- */
.site-footer{background:#3a3a3a;color:#cfd6db;margin-top:36px}
.foot-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:28px;padding:48px 0}
.foot-col{min-width:0}
.brand-col .brand{color:#fff}
.foot-text{margin:.75rem 0 1rem;max-width:520px}
.store-badges{display:flex;gap:.75rem;flex-wrap:wrap}
.store-badges .badge{display:inline-block;background:#fff;border-radius:10px;padding:6px 10px}
.store-badges img{height:36px}


.foot-title{color:#fff;font-weight:700;margin-bottom:.5rem}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.foot-links a{color:#cfd6db;opacity:.95}
.foot-links a:hover{color:#fff}


.subfooter{border-top:1px solid #ffffff22;background:#333;color:#b9c2c8}
.subflex{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:16px 0;flex-wrap:wrap}
.policies{display:flex;gap:1rem}
.subfooter a{color:#9bd2ff}


.fab-whatsapp{position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:999px;display:grid;place-items:center;background:#25D366;color:#fff;font-size:24px;box-shadow:0 10px 20px rgba(0,0,0,.25);z-index:60}


@media (max-width:960px){
.foot-grid{grid-template-columns:1fr 1fr;gap:22px}
}
@media (max-width:640px){
.foot-grid{grid-template-columns:1fr}
.store-badges img{height:32px}
.subflex{gap:.5rem}
}



/* Pequeño respiro arriba/abajo */
.section .pillbar{ margin-top:.5rem; margin-bottom:.75rem; }

.pillbar{display:flex;gap:.75rem;overflow-x:auto;padding:.75rem 0;scrollbar-width:none;}
.pillbar::-webkit-scrollbar{display:none;}
.pill{border:2px solid #0ea5e9;color:#0ea5e9;background:#fff;padding:.5rem 1rem;border-radius:999px;font-weight:600;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s;}
.pill:hover{box-shadow:0 2px 8px rgba(14,165,233,.25);}
.pill.active{background:#0ea5e9;color:#fff;}
.section .pillbar{margin-top:.5rem;margin-bottom:.75rem;}
/* grid más denso */
.span-12.cards{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
/* tarjeta compacta */
/* GRID más denso (más cards por fila) */
.span-12.cards{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* antes ~280px */
  gap:.9rem; /* menos separación */
}

/* Card compacto */
.card{
  border-radius:12px;               /* antes 16px */
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.05); /* sombra más ligera */
}
.card-body{ padding:.75rem; }       /* agrega padding compacto */

/* Media/imagen */
.card-media{ position:relative; aspect-ratio:16/9; } /* mantiene 16:9 (baja altura) */
.card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-media .deal{
  position:absolute; top:.4rem; left:.4rem;
  background:#ff7a45; color:#fff; font-weight:700;
  font-size:.7rem; padding:.18rem .4rem; border-radius:6px;
}

/* Textos compactos */
.card-body .title{ font-weight:700; font-size:.95rem; margin-top:.35rem; line-height:1.2; }
.card-body .meta{ display:flex; gap:.6rem; color:#6b7280; font-size:.8rem; margin:.3rem 0 .45rem; }
.card-body .meta .icon{ width:16px; height:16px; vertical-align:-3px; margin-right:.2rem; }

/* Fila inferior */
.price-row{ display:flex; justify-content:space-between; align-items:center; margin-top:.2rem; }
.price{ font-weight:700; color:#ef4444; font-size:.95rem; }
.btn.btn-blue{
  background:#0ea5e9; color:#fff; border:none;
  padding:.4rem .7rem; border-radius:999px; font-weight:600; font-size:.85rem;
}
.btn.btn-blue:hover{ filter:brightness(0.95); }

/* Opcional: aún más pequeños en pantallas grandes */
@media (min-width: 1280px){
  .span-12.cards{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
 /* HERO base como en el ejemplo */
/* .hero {
  position: relative;
  overflow: hidden;
  padding: 6rem 1rem 20rem; 
} */


/* Contenido del hero centrado y por encima de la ilustración */
.hero .container {
  position: relative;
  z-index: 2;
}

/* Buscador por encima de la ilustración */
.searchbar.searchbar--filters {
  position: relative;
  z-index: 3;
  margin: 1.25rem auto 0;
}

/* ILUSTRACIÓN: ancho completo, pegada al borde inferior */
.hero-graphic {
  position: absolute;
  left: 50%;
  bottom: -290px;   /* <--- estaba -2px, cámbialo a -80px o prueba -100px */
  transform: translateX(-50%);
  width: 120vw;
  max-width: none;
  height: auto;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}

/* Ajustes responsivos */
@media (min-width: 768px) {
 
  .hero-graphic { width: 110vw; }
}
@media (min-width: 1200px) {
  .hero { padding-bottom: 18rem; }
  .hero-graphic { width: 100vw; }
}

/* Si la siguiente sección se monta demasiado arriba, separa un poco */
.section,
.chips,
.page,
main { position: relative; z-index: 0; }