/* =====================================================================
   Veo Veo Regalos — pages/home.css
   Solo inicio: hero, cómo cotizar, banda CTA.
   Estándar WEB AranduCAD: main.css (tokens, base, layout) · components.css (componentes) · pages/*.css (por página).
   ===================================================================== */

/* ---------- HERO (inicio) ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--nav-h) + 3rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; isolation: isolate; }
.hero--noimg { background:
  radial-gradient(ellipse 70% 60% at 85% 15%, rgba(232, 97, 26, .35), transparent 60%),
  radial-gradient(ellipse 60% 50% at 10% 90%, rgba(208, 32, 32, .3), transparent 60%),
  var(--ink); }
.hero__content { display: grid; gap: 1.5rem; max-width: 760px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__ctas .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .hero__ctas .btn { flex: 0 0 auto; } }
.hero__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); max-width: 640px; }
@media (min-width: 700px) { .hero__facts { grid-template-columns: repeat(4, auto); justify-content: start; } }
.fact { display: grid; gap: .15rem; }
.fact__value { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; font-variation-settings: 'opsz' 48; }
.fact__label { font-size: .78rem; color: var(--muted); letter-spacing: .04em; }

/* ---------- CÓMO COTIZAR ---------- */
.steps { display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding: 1.6rem 1.5rem 1.7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); display: grid; gap: .6rem; align-content: start; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-size: 2.6rem; font-weight: 500; line-height: 1; color: var(--brass-2); opacity: .85; }
.step h3 { font-size: 1.25rem; }
.step p { color: var(--muted); font-size: .95rem; }

/* ---------- CONTACTO ---------- */
.location { display: grid; gap: 2rem; }
@media (min-width: 960px) { .location { grid-template-columns: .9fr 1.1fr; align-items: stretch; } }
.location__info { display: grid; gap: 1.5rem; align-content: start; }
.location__info .lead strong { color: var(--bone); font-weight: 700; }
.address { display: grid; gap: .3rem; font-size: 1.05rem; }
.address strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--bone); }
.location__map { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 320px; background: var(--ink-3); border: 1px solid var(--line); }
.location__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.2) contrast(1.05); }
.location__map-link { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; }

/* ---------- CTA BAND ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius); padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem); background: var(--ink-2); border: 1px solid var(--line); display: grid; gap: 1.5rem; }
.cta-band::after { content: ''; position: absolute; right: -10%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(232, 97, 26, .22), transparent 65%); pointer-events: none; }
@media (min-width: 900px) { .cta-band { grid-template-columns: 1fr auto; align-items: center; } }

/* ---------- S00182 · juguetería: banner con la fachada, categorías, novedades, envíos, líneas y redes ---------- */
.hero--foto { background: var(--ink); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; z-index: -2; }
.hero--foto::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(22, 26, 44, .92) 0%, rgba(22, 26, 44, .7) 45%, rgba(22, 26, 44, .15) 100%), linear-gradient(0deg, rgba(22, 26, 44, .85) 0%, transparent 45%); }
@media (max-width: 700px) { .hero--foto::before { background: linear-gradient(0deg, rgba(22, 26, 44, .95) 25%, rgba(22, 26, 44, .55) 100%); } .hero--foto { align-items: end; } }

.cta-inline { display: flex; justify-content: center; margin-top: clamp(1.75rem, 4vw, 2.5rem); }

.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
@media (min-width: 700px) { .cat-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.cat-card { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--ink-3); isolation: isolate; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5); }
.cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); z-index: -2; }
.cat-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(22, 26, 44, .9) 0%, rgba(22, 26, 44, 0) 55%); }
.cat-card:hover img { transform: scale(1.06); }
.cat-card--color { background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 55%), var(--cat, var(--brass)); }
.cat-card--color::after { background: linear-gradient(0deg, rgba(22, 26, 44, .55) 0%, transparent 60%); }
.cat-card__sin-foto { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: clamp(5rem, 16vw, 9rem); color: rgba(255, 255, 255, .35); z-index: -1; }
.cat-card__nombre { position: absolute; left: 1rem; right: 1rem; bottom: 2.4rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 3.2vw, 1.5rem); line-height: 1.1; color: #fff; }
.cat-card__cta { position: absolute; left: 1rem; bottom: .9rem; font-size: .85rem; font-weight: 700; color: var(--brass-2); }

.nov-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(62%, 1fr); gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .75rem; -webkit-overflow-scrolling: touch; }
@media (min-width: 700px) { .nov-strip { grid-auto-columns: minmax(28%, 1fr); } }
@media (min-width: 1100px) { .nov-strip { grid-auto-columns: minmax(22%, 1fr); } }
.nov-card { scroll-snap-align: start; display: grid; gap: .6rem; align-content: start; background: #fff; border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; padding-bottom: .9rem; }
.nov-card h3 { font-size: 1rem; line-height: 1.25; padding-inline: .9rem; color: var(--ink); }
.nov-card .btn { margin-inline: .9rem; width: auto; }

.promo { display: grid; gap: 1.5rem; align-items: center; border-radius: var(--radius); overflow: hidden; background: var(--brass); color: #fff; }
@media (min-width: 800px) { .promo { grid-template-columns: .8fr 1.2fr; } }
.promo__foto { aspect-ratio: 4 / 5; max-height: 520px; overflow: hidden; }
.promo__foto img { width: 100%; height: 100%; object-fit: cover; }
.promo__texto { display: grid; gap: 1rem; padding: 0 clamp(1.5rem, 5vw, 3.5rem) clamp(2rem, 5vw, 3rem); }
@media (min-width: 800px) { .promo__texto { padding-block: 2.5rem; } }
.promo .eyebrow { color: #fff; opacity: .85; }
.promo .lead { color: rgba(255, 255, 255, .9); }
.promo .btn { justify-self: start; }

.marcas-chips { display: flex; flex-wrap: wrap; gap: .75rem; }
.marca-chip { padding: .8rem 1.3rem; border-radius: var(--radius-pill); border: 2px solid var(--brass-2); font-family: var(--font-display); font-weight: 700; font-size: clamp(.95rem, 2.4vw, 1.15rem); color: var(--bone); }

.redes { display: grid; gap: 1rem; }
@media (min-width: 640px) { .redes { grid-template-columns: repeat(2, minmax(0, 360px)); } }
.red { display: grid; gap: .2rem; padding: 1.3rem 1.5rem; border-radius: var(--radius); color: #fff; box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .5); transition: transform .3s var(--ease); }
.red:hover { transform: translateY(-3px); }
.red strong { font-family: var(--font-display); font-size: 1.3rem; }
.red span { opacity: .9; font-size: .95rem; }
.red--whatsapp { background: #1fa855; }
.red--instagram { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888); }

/* ---------- S00182 · estructura tipo tienda (referencia del agente, nota 96451) ---------- */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 51; height: 34px; display: flex; align-items: center; background: var(--brass); color: #fff; font-size: .8rem; font-weight: 600; }
.topbar__inner { display: flex; justify-content: center; gap: 1.5rem; white-space: nowrap; overflow: hidden; }
.topbar a { color: #fff; }
@media (max-width: 640px) { .topbar__inner { justify-content: space-between; gap: .75rem; font-size: .74rem; } .topbar__extra { display: none; } }
.topbar + .header { top: 34px; }
.topbar ~ main .hero { padding-top: calc(var(--nav-h) + 34px + 3rem); }

.beneficios { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line-dark); }
.beneficios__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding-block: 1.4rem; }
@media (min-width: 900px) { .beneficios__grid { grid-template-columns: repeat(4, 1fr); } }
.beneficio { display: flex; gap: .75rem; align-items: center; }
.beneficio__ico { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: rgba(140, 198, 63, .18); font-size: 1.3rem; }
.beneficio strong { display: block; font-size: .92rem; line-height: 1.2; }
.beneficio span { font-size: .8rem; color: var(--muted-2); }

.section--bloque { padding-block: clamp(2.5rem, 6vw, 4rem); }
.bloque-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 3px solid var(--brass); }
.bloque-head h2 { font-size: clamp(1.4rem, 4vw, 2rem); }

.confianza { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .confianza { grid-template-columns: 1.1fr .9fr; } }
.confianza__texto { display: grid; gap: 1.1rem; justify-items: start; }
.confianza__lista { display: grid; gap: .8rem; color: var(--muted); }
.confianza__lista strong { color: var(--bone); }
.confianza__foto { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; max-height: 560px; }
.confianza__foto img { width: 100%; height: 100%; object-fit: cover; }

.ig-feed { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 800px) { .ig-feed { grid-template-columns: repeat(4, 1fr); } }
.ig-foto { display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; }
.ig-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ig-foto:hover img { transform: scale(1.05); }

.location .redes { grid-template-columns: 1fr 1fr; }

/* ---------- S00182 · tienda CLARA y alegre (nota 96490: como la referencia, colores comerciales) ---------- */
.tienda { background: #fff; }
.tienda .theme-light { background: #fff; color: var(--ink); }
.tienda .bg-crema { background: #fbf4ea; }
.tienda .theme-light .eyebrow { color: var(--brass); }
/* cabecera blanca */
.tienda .header, .tienda .header.is-solid { background: #fff; box-shadow: 0 2px 14px rgba(22, 26, 44, .08); backdrop-filter: none; }
.tienda .nav__link { color: var(--ink); }
.tienda .nav__link:hover, .tienda .nav__link[aria-current] { background: rgba(214, 40, 40, .08); color: var(--brass); }
.tienda .burger { border-color: rgba(22, 26, 44, .2); }
.tienda .burger span { background: var(--ink); }
/* beneficios con acento amarillo */
.tienda .beneficio__ico { background: #ffe9a8; }
/* categorías: foto arriba y nombre abajo en blanco (como la referencia) */
.tienda .cat-card { aspect-ratio: auto; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(22, 26, 44, .08); box-shadow: 0 8px 24px -16px rgba(22, 26, 44, .35); transition: transform .3s var(--ease), box-shadow .3s; }
.tienda .cat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -18px rgba(22, 26, 44, .45); }
.tienda .cat-card img { position: static; width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; }
.tienda .cat-card::after { display: none; }
.tienda .cat-card--color { background: #fff; }
.tienda .cat-card--color .cat-card__sin-foto { position: static; aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .45), transparent 55%), var(--cat); color: rgba(255, 255, 255, .7); z-index: auto; }
.tienda .cat-card__nombre { position: static; padding: .85rem 1rem .15rem; text-align: center; color: var(--ink); font-size: clamp(.9rem, 2.6vw, 1.05rem); letter-spacing: .05em; text-transform: uppercase; }
.tienda .cat-card__cta { position: static; padding: 0 1rem .95rem; text-align: center; color: var(--brass); }
/* tarjetas de producto blancas */
.tienda .theme-light .card { background: #fff; border: 1px solid rgba(22, 26, 44, .08); box-shadow: 0 6px 20px -14px rgba(22, 26, 44, .35); }
.tienda .equip__cat { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }
.tienda .equip h3 { color: var(--ink); }
.tienda .bloque-head { border-bottom-color: #ffc93c; }
.tienda .bloque-head h2 { color: var(--ink); }
.tienda .theme-light .link-arrow { color: var(--brass); }
.tienda .cta-inline { gap: .75rem; flex-wrap: wrap; }
.tienda .theme-light .btn--secondary { --btn-fg: var(--ink); --btn-bd: rgba(22, 26, 44, .25); }
/* confianza, marcas y contacto en claro */
.tienda .confianza__lista { color: var(--muted-2); }
.tienda .confianza__lista strong { color: var(--ink); }
.tienda .marca-chip { color: var(--ink); border-color: #8cc63f; background: #f4faeb; }
.tienda .theme-light .address strong { color: var(--ink); }
.tienda .theme-light .location__map { background: #f1ede6; border-color: rgba(22, 26, 44, .08); }
/* corrección 96689: banner compacto por encima de la regla de pantalla completa; en el menú solo se marca la página actual */
.hero.hero--compacto { min-height: 0; padding: calc(var(--nav-h) + 34px + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(2.5rem, 6vw, 4.5rem); }
.tienda .nav__link[aria-current], .tienda .nav__link[href*="#"][aria-current] { background: none; color: var(--ink); }
.tienda .nav__link[aria-current]:not([href*="#"]) { color: var(--brass); }