/*
  Danzclub — Rediseño del Home, migración por secciones (sección 12 del plan
  de mejoras). Este archivo agrupa SOLO los overrides de estilo de las
  secciones del home ya migradas a la nueva paleta/tipografía (definidas en
  style.css). No toca HTML ni JS de ninguna sección — decisión tomada con el
  usuario: en esta primera pasada del home se cambia estilo, no estructura.

  Se carga después de style2.css/style3.css/all.css para poder pisarlos sin
  necesitar !important en la mayoría de los casos.
*/

/* ------------------------------------------------------------------------
   Hero slider (.hero__slider--section)
   ------------------------------------------------------------------------
   Nada que cambiar acá: las flechas de navegación (.swiper__nav--btn) ya
   usan var(--secondary-color), que es el mismo valor hex que nuestro nuevo
   --dz-primary (#9594D2/#9594d2) -- coincidencia real, no hace falta tocar
   nada. El resto del slider son solo imágenes subidas desde el admin, sin
   texto ni botones propios que restylear.
------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------
   Hero video (#hero_video)
------------------------------------------------------------------------ */

/* Tipografía: título y subtítulo del video usan Poppins (headings), el
   texto de detalle usa Inter (cuerpo). El COLOR de estos 3 elementos sigue
   viniendo del admin (title_color/subtitle_color/details_color, configurado
   por video) -- no se toca, es contenido administrable, no un token fijo. */
#hero_video .title,
#hero_video .subtitle {
  font-family: var(--dz-font-heading);
}

#hero_video .layer-2 .text {
  font-family: var(--dz-font-body);
}

/* Botón CTA del video ("layer-3", clase .mybtn1). .mybtn1 es una clase
   global usada en varias páginas del sitio (checkout, seguimiento de
   pedido, 404, etc. -- ver all.css línea ~5292), así que NO se cambia ahí:
   se sobreescribe acotado solo dentro de #hero_video, para no afectar esas
   otras páginas todavía fuera de alcance de este rediseño.

   BUG encontrado a pedido del usuario (reportó el botón en blanco/sin texto
   al hacer hover): existe una regla vieja y más específica en style2.css
   -- `.header-video #hero_video .video-content .layer-3 a` / `:hover` --
   remanente de antes de que este botón usara la clase .mybtn1, con borde
   turquesa (#00f1c6) y, en hover, fondo blanco + texto turquesa. Por tener
   más clases en el selector, le ganaba en especificidad a las reglas de
   acá aunque estas se cargan después -- el fondo se iba a blanco, el color
   de texto turquesa perdía contra nuestro `!important`, pero el fondo NO
   tenía `!important` y quedaba blanco: texto blanco sobre fondo blanco,
   invisible. Se agrega `!important` a background y border-color acá para
   ganar la pelea de especificidad de una vez, sin tocar style2.css (esa
   regla vieja puede seguir afectando otros usos de layer-3 fuera de
   #hero_video que no se revisaron). */
#hero_video .mybtn1 {
  background: var(--dz-primary) !important;
  border-color: var(--dz-primary) !important;
  color: var(--dz-surface) !important;
  font-family: var(--dz-font-heading);
}
#hero_video .mybtn1:hover {
  background: var(--dz-primary-hover) !important;
  border-color: var(--dz-primary-hover) !important;
  color: var(--dz-surface) !important;
}

/* ------------------------------------------------------------------------
   Banner Central (`$ps->central`) e Información Central (`$ps->infocentral`)
   ------------------------------------------------------------------------
   Banner Central es solo una imagen subida desde el admin, sin texto ni
   botón propio -- igual que el hero slider, no hay nada que restylear ahí.

   Información Central sí tiene texto y botón propios (título, descripción y
   el botón "CONOCE MÁS"). La sección no tiene id, así que se usa
   `.section--nargin` como selector de scope -- verificado que es la ÚNICA
   sección del home con esa clase -- para no afectar otros usos de
   `.primary__btn` en el resto del sitio (ficha de producto, "VER TIENDAS"
   de extraindex.blade.php, etc.).
------------------------------------------------------------------------ */
.section--nargin .banner__content--style2__title {
  font-family: var(--dz-font-heading);
}

.section--nargin .banner__content--style2__desc {
  font-family: var(--dz-font-body);
}

/* El fondo del botón "CONOCE MÁS" ya sale lavanda por coincidencia (usa
   var(--secondary-color), que en el :root de style3.css vale #9594d2 -- el
   mismo hex que nuestro --dz-primary). Solo se ajusta el HOVER: por defecto
   pasa a negro (var(--primary-color)), acá se lleva al tono de hover de la
   marca para quedar consistente con los demás botones ya migrados (mismo
   patrón que el CTA del hero video). */
.section--nargin .primary__btn:hover {
  background: var(--dz-primary-hover);
}

/* Bug preexistente encontrado por el usuario (capturas: el título/texto/botón
   quedaban pegados arriba del banner, con un hueco vacío grande abajo, en vez
   de centrados verticalmente en los 33rem de alto de la sección). Causa: el
   <a class="banner__items--thumbnail text-center"> es "display:block" (así
   está definido en style3.css desde siempre, sin relación con la migración
   de Suruchi) y su altura real es la de su contenido (~212px), no la del
   contenedor de 330px -- nunca hubo centrado vertical real, el <div
   style="margin:auto"> solo intentaba centrar horizontalmente. Se corrige
   acá en vez de en index.blade.php (que solo trae contenido de la bd) dándole
   flex al anchor para que ocupe el 100% del alto del contenedor y centre su
   contenido en ambos ejes. !important porque suruchi-base.css define
   ".dz-scope .banner__items--thumbnail { display:block }" y carga después de
   este archivo -- sin !important, esa regla ganaría por orden de carga a
   igual especificidad. */
.section--nargin a.banner__items--thumbnail {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* ------------------------------------------------------------------------
   Resto del home aplicado de una vez, a pedido del usuario (antes se venía
   migrando sección por sección con confirmación). Mismo criterio que arriba:
   SOLO tipografía y algún ajuste de color puntual, nunca ancho/layout --
   la regresión de hoy (tope de ancho en .container-fluid, revertida) deja
   clara la lección de no tocar nada que afecte dimensiones.

   La mayoría de los colores (flechas de swiper, hover de títulos de
   producto) YA usan var(--secondary-color) = #9594d2 = nuestro --dz-primary
   por la misma coincidencia de siempre con el theme original -- no se
   repite la explicación en cada bloque.
------------------------------------------------------------------------ */

/* Carrusel de categorías / "Nuestras Colecciones" (`$ps->car_cat`) */
.product__collection--content__title,
.new__product--content__title {
  font-family: var(--dz-font-heading);
}

/* Secciones "Te Puede Gustar" (product__section, ×2) */
.section__heading--maintitle {
  font-family: var(--dz-font-heading);
}

/* so-spotlight2 (`$ps->small_banner`): solo imágenes subidas desde el admin,
   sin texto propio -- nada que restylear, igual que Banner Central. */

/* ------------------------------------------------------------------------
   Secciones cargadas por AJAX en el home (`extraindex.blade.php`: best,
   flash_deal, large_banner, top_rated, bottom_small, big, hot_sale,
   review_blog, partners, ubicaciones, car_ins, sec_social, service,
   sec_subs). Se agrupan acá porque solo se cargan/ven en el home, aunque
   técnicamente sea un archivo/ruta aparte (`/extras`).
------------------------------------------------------------------------ */
.section__heading,
.section-title,
.blog-title,
.deals__content--style3__maintitle,
.product__grid--heading__maintitle,
.banner__items--content__title,
.banner__items--content__style3--title,
.shipping__items2--content__title,
.testimonial__items--title {
  font-family: var(--dz-font-heading);
}

.banner__items--content__subtitle,
.banner__items--content__style3--subtitle {
  font-family: var(--dz-font-body);
}

/* Nota: hubo overrides acá para el carrusel de Instagram (`$ps->car_ins`) y
   para el megamenú del header, agregados durante un intento de migración
   estructural a la plantilla Suruchi (clase ".dz-scope" + suruchi-base.css).
   Se quitaron a pedido del usuario ("regresemos a usar los archivos de
   estilos anteriores, olvida suruchi") junto con esa clase en las vistas --
   sin ".dz-scope" en ningún lado, esas reglas ya no tenían ningún efecto,
   así que se limpian para no dejar código muerto. */