/* layout.css — Estructura de la landing (hero, secciones, footer, flotantes) */

/* ── Accesibilidad: saltar al contenido ── */
.skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--negro); color: var(--crema); padding: var(--sp-2) var(--sp-3); border-radius: var(--radio); }
.skip-link:focus { left: var(--sp-3); top: var(--sp-3); }

/* ── Navegación ── */
.nav { display: flex; gap: var(--sp-4); }
.nav a { color: var(--crema); font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; opacity: .8; transition: var(--transicion); }
.nav a:hover { opacity: 1; color: var(--oro); }
a.brand { text-decoration: none; }

/* ── Hero ── */
.hero {
  background: radial-gradient(120% 120% at 70% 0%, #1c1c1c 0%, var(--negro) 60%);
  color: var(--crema);
  padding-block: var(--sp-6);
  border-bottom: 1px solid rgba(201,162,75,.2);
}
.hero-inner { max-width: 760px; }
.hero-eyebrow { color: var(--oro); font-size: var(--fs-xs); letter-spacing: .3em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.hero-titulo { font-family: var(--font-titulo); font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.05; font-weight: 500; }
.hero-sub { color: #cfc8bb; max-width: 520px; margin-top: var(--sp-3); }
.hero-cta { display: inline-block; margin-top: var(--sp-4); background: var(--oro); color: var(--negro); border-color: var(--oro); }
.hero-cta:hover { background: var(--oro-soft); border-color: var(--oro-soft); }

/* ── Secciones ── */
.seccion { padding-block: var(--sp-6); }
.seccion-head { text-align: center; margin-bottom: var(--sp-5); }
.seccion-head .seccion-eyebrow { margin-bottom: var(--sp-1); }
.contenedor-angosto { max-width: 760px; }

/* ── Colecciones ── */
.colecciones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); }
.coleccion-card { position: relative; aspect-ratio: 3/4; border: none; padding: 0; border-radius: var(--radio); overflow: hidden; cursor: pointer; background: var(--crema-2); }
.coleccion-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--transicion); }
.coleccion-card:hover img { transform: scale(1.06); }
.coleccion-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.6), transparent 55%); }
.coleccion-nombre { position: absolute; left: var(--sp-3); bottom: var(--sp-3); z-index: 2; color: var(--crema); font-family: var(--font-titulo); font-size: var(--fs-lg); }

/* ── Filas de productos destacados ── */
.fila-productos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-2); scroll-snap-type: x mandatory; }
.fila-productos .card-producto { scroll-snap-align: start; }
#sec-destacados, #sec-novedades, #sec-ofertas { padding-block: var(--sp-5); }

/* ── Banner promocional ── */
.banner-promo { background: var(--negro); color: var(--crema); padding-block: var(--sp-5); }
.banner-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.banner-titulo { font-family: var(--font-titulo); font-size: var(--fs-xl); font-weight: 500; }
.banner-sub { color: #cfc8bb; max-width: 560px; margin-top: var(--sp-1); }
.btn-oro { background: var(--oro); color: var(--negro); border-color: var(--oro); white-space: nowrap; }
.btn-oro:hover { background: var(--oro-soft); border-color: var(--oro-soft); }

/* ── FAQ ── */
.faq { display: flex; flex-direction: column; gap: var(--sp-2); }
.faq-item { background: var(--blanco); border: 1px solid var(--gris-linea); border-radius: var(--radio); padding: 0 var(--sp-3); }
.faq-item summary { cursor: pointer; padding: var(--sp-3) 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--oro); font-size: 1.2rem; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { padding-bottom: var(--sp-3); color: var(--carbon); font-size: var(--fs-sm); }

/* ── Sobre Bona ── */
.empresa { background: var(--crema-2); }
.empresa-inner { text-align: center; }
.empresa-texto { color: var(--carbon); margin-top: var(--sp-3); line-height: 1.7; }

/* ── Footer ── */
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-4); padding-block: var(--sp-5); text-align: left; }
.footer-nota { margin-top: var(--sp-2); }
.footer-col h3 { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--oro); margin-bottom: var(--sp-2); }
.footer-col a, .footer-col span { display: block; color: var(--gris); font-size: var(--fs-sm); padding: 3px 0; transition: var(--transicion); }
.footer-col a:hover { color: var(--crema); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.08); padding-block: var(--sp-3); font-size: var(--fs-xs); color: var(--gris); text-align: center; }

/* ── Flotantes ── */
.fab-whatsapp {
  position: fixed; bottom: var(--sp-4); left: var(--sp-4); z-index: 90;
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--sp-2) var(--sp-3);
  background: #25D366; color: #fff; border-radius: 99px; font-size: var(--fs-sm); font-weight: 500;
  box-shadow: var(--sombra-hover); transition: var(--transicion);
}
.fab-whatsapp:hover { filter: brightness(.95); }
.btn-top {
  position: fixed; right: var(--sp-4); bottom: calc(var(--sp-4) + 3.75rem); z-index: 89;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--negro); color: var(--crema); border: 1px solid var(--oro);
  font-size: 1.1rem; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: var(--transicion);
}
.btn-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* ── Aparición al hacer scroll (mejora progresiva) ── */
.reveal-on .revelar { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--transicion), transform .6s var(--transicion); }
.reveal-on .revelar.revelado { opacity: 1; transform: none; }

/* ── Responsive ── */
@media (max-width: 800px) {
  .nav { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .banner-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on .revelar { opacity: 1; transform: none; }
}

/* ── Selector de canales ── */
.seccion-canales { padding-block: var(--sp-5); background: var(--crema-2); }
.seccion-canales .seccion-sub { color: var(--gris); margin-top: var(--sp-2); }
.canales-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); max-width: 900px; margin-inline: auto; }
.canal-card {
  display: flex; flex-direction: column; gap: var(--sp-1); text-align: left;
  padding: var(--sp-4); background: var(--blanco);
  border: 2px solid var(--gris-linea); border-radius: var(--radio);
  cursor: pointer; transition: var(--transicion); position: relative;
}
.canal-card:hover { border-color: var(--negro); transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.canal-card.is-active { border-color: var(--oro); background: var(--negro); color: var(--crema); }
.canal-check { position: absolute; top: var(--sp-3); right: var(--sp-3); color: var(--oro); }
.canal-nombre { font-family: var(--font-titulo); font-size: var(--fs-xl); font-weight: 500; }
.canal-desc { color: var(--oro); font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; }
.canal-card:not(.is-active) .canal-desc { color: #9a7c39; }
.canal-detalle { font-size: var(--fs-sm); color: var(--gris); margin-top: var(--sp-1); }
.canal-card.is-active .canal-detalle { color: #cfc8bb; }
.canal-cta { margin-top: var(--sp-3); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.canal-card:not(.is-active) .canal-cta { color: var(--negro); text-decoration: underline; text-underline-offset: 4px; }
.canal-card.is-active .canal-cta { color: var(--oro); }

/* ── Chip de canal (header) ── */
.chip-canal {
  background: transparent; border: 1px solid rgba(201,162,75,.5); color: var(--crema);
  border-radius: 99px; padding: 6px var(--sp-3); font-size: var(--fs-xs);
  letter-spacing: .05em; transition: var(--transicion); white-space: nowrap;
}
.chip-canal small { color: var(--oro-soft); }
.chip-canal:hover { border-color: var(--oro); color: var(--oro); }

/* ── Logo de marca (si hay logoUrl) ── */
.brand-logo { height: 34px; width: auto; display: block; }

/* ── Subtítulo del canal en el carrito ── */
.cart-canal { font-size: var(--fs-xs); color: var(--oro-soft); letter-spacing: .06em; }

/* ── Estado de exceso en la barra de progreso ── */
.nivel-exceso .pp-relleno { background: var(--alerta); }
.nivel-exceso .pp-mensaje { color: var(--alerta); }
.nivel-ok .pp-relleno { background: var(--exito); }
.nivel-ok .pp-mensaje { color: var(--exito); }
.pp-cambiar {
  display: inline-block; margin-top: var(--sp-1);
  border: 1px solid var(--negro); background: var(--negro); color: var(--crema);
  padding: 4px var(--sp-3); border-radius: var(--radio); font-size: var(--fs-xs);
  letter-spacing: .06em; text-transform: uppercase; transition: var(--transicion);
}
.pp-cambiar:hover { background: var(--oro); border-color: var(--oro); color: var(--negro); }

@media (max-width: 640px) {
  .chip-canal small { display: none; }
}