/* ============================================================
   PESO TIPOGRÁFICO — calibrado contra el CSS del ORIGINAL, no a ojo.

   Se carga AL FINAL del <head> porque varios títulos vienen con
   `font-weight: 400/500/600 !important` desde el diseño del cliente.

   REGLA DE ORO: este archivo NO es un barrido. El original declara
   26 selectores de título con peso < 700 y todos son intencionales:

     · serif 400            → lookbook, inspiración, clientes, /productos
     · Georgia/Playfair 500 → #categorias, footer, contacto
     · 600                  → h1..h6 de Astra (Montserrat) y eyebrows/kickers
     · 700                  → subtítulo del lookbook

   Un `800 !important` global rompía los tres grupos: el diseñador lo
   detectó como "footer distinto", "títulos muy gruesos" y "cosas
   cambiadas de tamaño" en Nosotros.

   Estructura:
     1. Base: h1..h6 a 800  ← lo único que se pidió subir (Astra los deja en 600)
     2. Excepciones: devuelven su peso original a los títulos finos

   Las excepciones van DESPUÉS y con más clases en el selector, así ganan
   por orden y por especificidad.
   ============================================================ */

/* ============================================================
   0. PARIDAD DE LA FAMILIA SERIF — el `font-serif` del original
      NO es Cormorant Garamond.

      El config inline del cliente declara serif=Cormorant, pero en su
      WordPress ese config nunca aplica al elemento: el H1 del hero y todo
      `.font-serif` resuelven a la pila serif POR DEFECTO de Tailwind.
      Verificado con el inspector del navegador en el original:
      familia resuelta **Cambria**, fallbacks Georgia / Times New Roman,
      y `Cambria` aparece **0 veces** en todo su HTML → no viene de su CSS,
      viene de la pila por defecto (ui-serif).

      Nosotros compilamos `.font-serif{font-family:Cormorant Garamond,…}`,
      así que el titular salía más fino y ~18% más estrecho que el original.
      Se replica la pila real: en Windows = Cambria, en macOS = Georgia,
      igual que el sitio viejo en cada plataforma.
   ============================================================ */
html body .font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
}

/* El H1 del hero NO tiene peso propio en el original: Astra deja 600. */
html body #blossom-hero h1 {
  font-weight: 600 !important;
}

/* Titular del hero en móvil: el markup del cliente trae `text-5xl` (48 px) y a esa
   medida "extraordinarias" mide ~396 px dentro de una columna de 312 px, así que
   se salía por la derecha y `#blossom-hero` (overflow:hidden) le comía la última
   letra. En móvil pasa a tamaño fluido; de 768 px para arriba siguen mandando los
   peldaños del propio cliente (`md:text-6xl` = 60 px, `xl:text-[4.5rem]` = 72 px).
   `overflow-wrap` es la red de seguridad para pantallas muy angostas. */
@media (max-width: 767px) {
  html body #blossom-hero h1 {
    font-size: clamp(28px, 8vw, 42px) !important;
    letter-spacing: -0.01em !important;
  }
}
html body #blossom-hero h1 {
  overflow-wrap: break-word;
}

/* ============================================================
   0b. ENLACES — el Kit de Elementor del original pone TODOS los `<a>`
       en Montserrat: `.elementor-kit-60 a { font-family:"Montserrat" }`.
       Por eso los botones del hero (que están dentro de
       `#blossom-hero-module`, declarado en Outfit) salen en Montserrat
       aunque su contenedor sea Outfit. Sin esta regla heredaban Outfit.
   ============================================================ */
#blossom-hero-module a {
  font-family: 'Montserrat', 'Outfit', sans-serif;
}

/* ============================================================
   0d. IMÁGENES QUE LLENAN SU RECUADRO — paridad con el original.

       El markup del cliente usa `class="w-full h-full object-contain"`
       dentro de un recuadro `aspect-[4/5] bg-[#FAFAFA]`. Si el `h-full`
       se respeta, `object-contain` centra la foto 2:3 y deja franjas
       grises a los lados.

       En el WordPress eso NO pasa: el CSS de Elementor trae
       `.elementor img{height:auto;max-width:100%}` — especificidad
       (0,1,1) — y GANA sobre el `.h-full` de Tailwind (0,1,0). Así la
       imagen se dibuja a su alto natural, llena el ancho y el recuadro
       4:5 la recorta con `overflow:hidden`. Eso es lo que se ve en el
       original. Se replica aquí con un selector de especificidad mayor.
   ============================================================ */
#blossom-home #colecciones img {
  height: auto;
}

/* ============================================================
   0c. FICHA DE PRODUCTO — en el original esa página NO carga el Kit de
       Elementor (es plantilla WooCommerce), así que las reglas
       `.elementor-kit-60 a` no llegan: los enlaces del navbar heredan
       **Outfit** en vez de Montserrat. El tamaño y el peso del CSS del
       cliente (10.5px / 650 y 10px / 800) se conservan: verificado con el
       inspector en la ficha del original.
   ============================================================ */
body:has(.blossom-sp-container) #bce-blossom-navbar .blossom-menu a,
body:has(.blossom-sp-container) #bce-blossom-navbar .blossom-action-btn {
  font-family: 'Outfit', sans-serif !important;
}

/* ============================================================
   1. BASE — Astra declara h1..h6 en Montserrat 600.
      Sube a 800 salvo donde el diseño original pide fino (sección 2).
   ============================================================ */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-weight: 800 !important;
}

/* ============================================================
   2. EXCEPCIONES — peso exacto del CSS original
   ============================================================ */

/* ---------- Home: Explora por estilo (serif 400) ---------- */
html body .bce-lookbook-section.bce-lookbook-1-cd212db4 .bce-lb-heading,
html body .bce-lookbook-section.bce-lookbook-1-cd212db4 .bce-lb-title {
  font-weight: 400 !important;
}
/* subtítulo del lookbook: 700 en el original */
html body .bce-lookbook-section.bce-lookbook-1-cd212db4 .bce-lb-subtitle {
  font-weight: 700 !important;
}

/* ---------- Home: El arte del diseño (serif 400) ---------- */
html body #inspiracion-blossom.br-inspo-section .br-inspo-title {
  font-weight: 400 !important;
}

/* ---------- Home: Nuestros clientes (Georgia 400) ---------- */
html body #clientes-blossom.br-clients-section .br-clients-title {
  font-weight: 400 !important;
}

/* ---------- Home: Nuestros productos (Georgia 500) ---------- */
html body #categorias.blossom-categorias .blossom-title {
  font-weight: 500 !important;
}
html body #categorias.blossom-categorias .blossom-cat-name {
  font-weight: 500 !important;
}

/* ---------- /productos: landing (serif 400) ---------- */
html body .bce-products-1-c0b3329 .bce-p-heading,
html body .bce-products-1-c0b3329 .bce-p-sidebar-title,
html body .bce-products-1-c0b3329 .bce-p-card-title {
  font-weight: 400 !important;
}

/* ---------- Páginas de documento del cliente: /nosotros y /contacto ----------
   Los dos son documentos HTML completos dentro de un widget de Elementor que cargan
   el CDN de Tailwind. Su preflight (`h1..h6{font-weight:inherit}`) aplana el 600 de
   Astra y los títulos acaban en el 400 del body. NINGÚN h1–h6 de esos documentos
   declara clase de peso (verificado en el markup: solo `font-serif` y tamaños), así
   que en el original se ven finos y el 800 global los engordaba.
   El 800 sigue vigente en el resto del sitio; esto solo devuelve el peso al documento. */
html body .bsl-page-nosotros h1,
html body .bsl-page-nosotros h2,
html body .bsl-page-nosotros h3,
html body .bsl-page-nosotros h4,
html body .bsl-page-nosotros h5,
html body .bsl-page-nosotros h6,
html body .bsl-page-contacto h1,
html body .bsl-page-contacto h2,
html body .bsl-page-contacto h3,
html body .bsl-page-contacto h4,
html body .bsl-page-contacto h5,
html body .bsl-page-contacto h6 {
  font-weight: 400 !important;
}

/* ---------- Footer (Georgia 500, 26px) ---------- */
html body #blossom-official-footer .blossom-brand-title,
html body #blossom-official-footer .blossom-footer-title {
  font-weight: 500 !important;
}

/* ---------- /contacto (Playfair Display 500) ---------- */
html body #blossom-contacto-v2 .blossom-title {
  font-weight: 500 !important;
}

/* ---------- Ficha de producto: kicker en 600 ---------- */
html body .blossom-sp-kicker {
  font-weight: 600 !important;
}

/* ============================================================
   3. EYEBROWS Y KICKERS — 600 en el original, nunca 800.
      Son etiquetas de 12–13px: en 800 se ven como un borrón.
   ============================================================ */
html body .bce-lookbook-section.bce-lookbook-1-cd212db4 .bce-lb-eyebrow,
html body #categorias.blossom-categorias .blossom-kicker,
html body #clientes-blossom.br-clients-section .br-clients-kicker {
  font-weight: 600 !important;
}

/* ============================================================
   4. CON PESO PROPIO EN EL CSS DEL CLIENTE — se respeta al pie de la letra.
      OJO: antes este bloque los forzaba a 800 dando por hecho que "heredaban".
      No es cierto: el CSS del cliente los declara, y el 800 los engordaba
      (el H1 del archivo salía en 800 cuando es 500, y el eyebrow en 800 cuando es 900).
      Los valores de abajo son los del plugin `blossom-woocommerce` y de la ficha.
   ============================================================ */
/* Archivo / categoría: H1 serif 500 y eyebrow dorado 900 (catalog.css) */
html body .blossom-wc-title {
  font-weight: 500 !important;
}
html body .blossom-wc-eyebrow {
  font-weight: 900 !important;
}

/* Ficha de producto: H1 serif 500 (parts.css ya lo pide en !important; aquí solo
   se evita que la base de 800 lo pise) */
html body .blossom-sp-title {
  font-weight: 500 !important;
}

/* Landing /productos: eyebrow 700 (productos.css) */
html body .bce-products-1-c0b3329 .bce-p-eyebrow {
  font-weight: 700 !important;
}

/* Landing /menaje y /mobiliario: el plugin del cliente titula con
   `.bcp-catalog-header h2 { font-weight: 600; font-size: clamp(32px,5vw,54px) }`
   y `font-family: inherit` (Montserrat). La base de 800 lo engordaba. */
html body .bsl-landing-title {
  font-weight: 600 !important;
}

/* ============================================================
   NOTA — lo que el original YA declara en 800/900 y no se toca:
     navbar .blossom-action-btn 800 · .blossom-wc-product-title 800
     .blossom-wc-badge 900 · .blossom-wc-field 900 · .blossom-wc-submit 900
     .blossom-wc-count 800 · .blossom-wc-price 900 · labels de filtro 900
     .blossom-submit 900 · .form-badge 800 · .blossom-lb-cta 700
   Si algo de eso sale fino, el problema NO es este archivo.
   ============================================================ */