/* Página de Inicio — hero + categorías reales + propuesta de valor.
   Paleta y tipografía: ver tokens abajo. La curva "sonrisa" del hero
   es una extensión del propio isotipo de DeliGO, no un blob genérico. */

.inicio-page{
  --ink:#181439;
  --ink-70:rgba(255,255,255,.7);
  --ink-50:rgba(255,255,255,.5);
  --brand:#f68634;
  --brand-deep:#dd6f1f;
  --paper:#fffbf7;
  --mist:#f2effa;
  --positive:#04aa60;
  --display:'Baloo 2',system-ui,sans-serif;
  --body:'Poppins',system-ui,sans-serif;
  background:var(--paper);
  font-family:var(--body);
}

.inicio-page .container{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---------- Hero ---------- */

.hero{position:relative;background:var(--ink);overflow:hidden;padding:72px 0 120px}

.hero-blob{position:absolute;top:-120px;right:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(246,134,52,.35),rgba(246,134,52,0) 70%);pointer-events:none}

/* Marca ilustrada propia: una bolsa con la sonrisa del isotipo DeliGO,
   acompañada de dos íconos flotantes (etiqueta / canasta) representando
   el catálogo multi-tienda. Todo dibujado a mano en SVG, sin assets
   externos. */
.hero-mark{position:absolute;pointer-events:none;opacity:0}
.hero-mark-bag{width:200px;height:200px;right:6%;top:58px;animation:markInBag .6s ease .1s forwards}
.hero-mark-bag .mark-body{fill:var(--brand)}
.hero-mark-bag .mark-handle{stroke:var(--brand-deep);stroke-width:10;stroke-linecap:round}
.hero-mark-bag .mark-smile{stroke:var(--paper);stroke-width:9;stroke-linecap:round}

.hero-mark-tag{width:64px;height:64px;right:26%;top:36px;animation:markInTag .6s ease .25s forwards}
.hero-mark-tag .mark-tag{fill:#fff;opacity:.95}
.hero-mark-tag .mark-tag-hole{fill:var(--ink)}

.hero-mark-basket{width:56px;height:56px;right:4%;top:270px;animation:markInBasket .6s ease .4s forwards}
.hero-mark-basket .mark-basket{fill:var(--paper)}
.hero-mark-basket .mark-basket-handle{stroke:var(--paper);stroke-width:6}

@keyframes markInBag{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes markInTag{from{opacity:0;transform:rotate(-12deg) translateY(10px) scale(.96)}to{opacity:1;transform:rotate(-12deg)}}
@keyframes markInBasket{from{opacity:0;transform:rotate(8deg) translateY(10px) scale(.96)}to{opacity:1;transform:rotate(8deg)}}

@media(max-width:991px){
  .hero-mark{display:none}
}

.hero-inner{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}

.hero-eyebrow{display:inline-block;color:var(--brand);font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}

.hero-title{font-family:var(--display);font-weight:800;color:#fff;font-size:52px;line-height:1.08;letter-spacing:.2px;margin:0 0 18px}

.hero-subtitle{color:var(--ink-70);font-size:17px;line-height:1.55;max-width:520px;margin:0 0 36px}

.ciudad-selector{background:#fff;border-radius:20px;box-shadow:0 24px 48px rgba(9,7,32,.35);padding:22px;width:100%;max-width:560px;display:flex;flex-direction:column;gap:12px}

.ciudad-selector .fake-select{position:relative}
.ciudad-selector .fake-select i{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:#999}
.ciudad-selector select{width:100%;appearance:none;-webkit-appearance:none;border:1px solid #e5e2ec;border-radius:12px;padding:15px 40px 15px 16px;font-family:var(--body);font-size:15px;background:#faf9fc;color:var(--ink)}
.ciudad-selector select:focus{outline:none;border-color:var(--brand)}

.ciudad-selector button#btn-ver-tiendas{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:#fff;border:none;border-radius:12px;padding:15px;font-family:var(--body);font-size:16px;font-weight:600;cursor:pointer;transition:background-color .15s ease,transform .15s ease}
.ciudad-selector button#btn-ver-tiendas:hover{background:var(--brand-deep)}
.ciudad-selector button#btn-ver-tiendas:active{transform:scale(.98)}

.hero-help{margin:20px 0 0;font-size:14px;color:var(--ink-50)}
.hero-help a{color:var(--brand);font-weight:600;text-decoration:none}
.hero-help a:hover{text-decoration:underline}

.hero-stats{margin-top:14px;display:flex;align-items:center;gap:10px;color:var(--ink-70);font-size:14px}
.hero-stats strong{color:#fff;font-weight:700}
.hero-stats-dot{color:var(--ink-50)}

.hero-smile{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:90px;fill:var(--paper)}

/* ---------- Categorías ---------- */

.section-categorias{padding:64px 0 8px}

.section-title{text-align:center;margin-bottom:32px}
.section-title h2{font-family:var(--display);font-weight:700;color:var(--ink);font-size:28px;margin:0 0 8px}
.section-title p{color:#7a7791;font-size:14px;margin:0}

.categorias-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;padding-bottom:56px}

.categoria-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff;border:1px solid #eee6f5;border-radius:16px;padding:24px 12px;text-align:center;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;opacity:0;animation:fadeUp .35s ease forwards;font-family:var(--body)}
.categoria-chip-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--mist)}
.categoria-chip-icon i{font-size:24px;color:var(--brand)}
.categoria-chip-label{font-size:14px;font-weight:600;color:var(--ink);line-height:1.2}
.categoria-chip-total{font-size:12px;color:#999}
.categoria-chip:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(24,20,57,.1)}
.categoria-chip.active{border-color:var(--brand);box-shadow:0 0 0 2px rgba(246,134,52,.25)}
.categoria-chip.active .categoria-chip-icon{background:var(--brand)}
.categoria-chip.active .categoria-chip-icon i{color:#fff}
.categoria-chip:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

.categorias-grid .categoria-chip:nth-child(1){animation-delay:.02s}
.categorias-grid .categoria-chip:nth-child(2){animation-delay:.04s}
.categorias-grid .categoria-chip:nth-child(3){animation-delay:.06s}
.categorias-grid .categoria-chip:nth-child(4){animation-delay:.08s}
.categorias-grid .categoria-chip:nth-child(5){animation-delay:.1s}
.categorias-grid .categoria-chip:nth-child(6){animation-delay:.12s}
.categorias-grid .categoria-chip:nth-child(7){animation-delay:.14s}
.categorias-grid .categoria-chip:nth-child(8){animation-delay:.16s}
.categorias-grid .categoria-chip:nth-child(9){animation-delay:.18s}
.categorias-grid .categoria-chip:nth-child(10){animation-delay:.2s}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Propuesta de valor ---------- */

.section-props{background:var(--mist);padding:56px 0}

.props-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

.prop-card{text-align:center}
.prop-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:#fff;box-shadow:0 8px 20px rgba(24,20,57,.08);margin-bottom:16px}
.prop-icon i{font-size:24px;color:var(--brand)}
.prop-card h3{font-family:var(--display);font-weight:700;color:var(--ink);font-size:17px;margin:0 0 8px}
.prop-card p{color:#645f7d;font-size:14px;line-height:1.55;margin:0}

/* ---------- CTA negocios ---------- */

.section-cta{padding:64px 0}

.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--ink);border-radius:24px;padding:40px 44px;flex-wrap:wrap}
.cta-inner h2{font-family:var(--display);font-weight:700;color:#fff;font-size:24px;margin:0 0 6px}
.cta-inner p{color:var(--ink-70);font-size:14px;margin:0}

.cta-button{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;text-decoration:none;font-family:var(--body);font-weight:600;font-size:15px;padding:14px 24px;border-radius:12px;white-space:nowrap;transition:background-color .15s ease}
.cta-button:hover{background:var(--brand-deep);color:#fff}

/* ---------- Responsividad ---------- */

@media(max-width:767px){
  .hero{padding:52px 0 96px}
  .hero-title{font-size:36px}
  .hero-subtitle{font-size:15px}
  .categorias-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .props-grid{grid-template-columns:1fr;gap:32px}
  .cta-inner{flex-direction:column;text-align:center;padding:32px 24px}
}