/*
Theme Name:   Suarpe Creaciones (Kadence Child)
Theme URI:    https://suarpecreaciones.com
Description:  Tema hijo de Kadence para Suarpe Creaciones. Contiene
              únicamente la estructura de carga de estilos (design
              tokens + componentes) — el diseño en sí vive en
              assets/css/design-tokens.css y assets/css/components.css,
              no en este archivo.
Author:       Suarpe Creaciones
Template:     kadence
Version:      1.107.0
Text Domain:  suarpe-child

FASE 1 de la integración (ver conversación de referencia):
  ✅ Tema hijo creado
  ✅ functions.php configurado
  ✅ style.css configurado
  ✅ Carga de design-tokens.css y components.css
  ✅ Carga de fuentes (DM Serif Display + Nunito Sans) con preconnect
  ⏳ Integración de componentes de la Home — SIGUIENTE FASE, no aquí todavía
*/

/* Este archivo se deja intencionadamente vacío de reglas CSS.
   Las variables y los componentes viven en archivos separados
   (ver functions.php) para poder versionarlos y mantenerlos con
   claridad — no mezclamos "config del tema" con "sistema de diseño".

   Única excepción: overrides puntuales contra el propio Kadence que
   no pertenecen al sistema de diseño sp-* (por eso van aquí y no en
   components.css). Se carga el último a propósito, para tener
   siempre la última palabra frente al tema padre. */

/* Kadence envuelve el contenido en .entry-content-wrap /
   .entry-content.single-content con su propio max-width y padding
   ("Content Style: Boxed"). Nuestro sistema ya gestiona su propio
   ancho sección a sección vía .sp-container, así que este contenedor
   de Kadence debe ir siempre a ancho completo y sin relleno, en toda
   la web (no solo en Inicio) — de lo contrario, cualquier sección de
   fondo completo (Hero, CTA Final) queda enmarcada en un margen
   blanco no deseado. */
/* Kadence trae un color de fondo de sitio por defecto (un gris
   azulado clarito) que gana a nuestra regla body{} por especificidad.
   Forzamos el crema de marca por encima. */
body{
  background-color: var(--color-background) !important; /* override inevitable: fondo de sitio por defecto de Kadence */
}

.entry-content-wrap,
.entry-content.single-content{
  max-width: none !important; /* override inevitable: Kadence fija su propio max-width con alta especificidad */
  padding: 0 !important;
  margin: 0 !important;
  background-color: transparent !important; /* override inevitable: Kadence fija fondo blanco propio; debe verse el crema del body */
}
/* El editor de bloques envuelve cada shortcode en su propio <p>, con
   el margen por defecto del navegador — con fondo transparente, ese
   margen deja ver el crema normal por debajo, aunque las secciones de
   alrededor sean del mismo tono (crema-profundo), dejando una rayita
   fina y rara justo en la unión entre dos secciones.
   IMPORTANTE: solo en la Home (body.home) — esta página es la única
   que se monta a base de shortcodes seguidos uno detrás de otro; en
   cualquier página de texto normal (Aviso legal, Política de
   privacidad...) esta misma regla aplastaba todos los párrafos del
   contenido real, dejándolo todo sin espacio entre líneas. */
body.home .entry-content-wrap > *,
body.home .entry-content.single-content > *{
  margin: 0 !important;
  background-color: transparent !important;
}

/* Páginas "normales" (no la Home) anidan contenedores adicionales que
   la Home no atraviesa: #primary, .content-container.site-container,
   #main, .content-wrap — cualquiera de ellos puede traer su propio
   fondo blanco de Kadence. Los neutralizamos todos, en todo el sitio,
   para que el crema de marca se vea consistente en cualquier página. */
#primary.content-area,
.content-container.site-container,
#main.site-main,
.content-wrap,
.content-bg,
.site{
  background-color: transparent !important; /* override inevitable: mismo motivo que arriba — Kadence pinta ".site" en blanco directamente cuando el estilo de contenido es "unboxed" */
}

/* Cabecera de archivo/página — Kadence la pinta con su propio fondo
   (".entry-hero", un componente distinto del que ya vestimos en
   components.css). Usa el MISMO crema que el resto del contenido
   (no el crema-profundo) para que nunca haya salto de color, sea cual
   sea la página (categoría, Aviso legal, Política de privacidad...) */
.entry-hero,
.entry-hero-container-inner{
  background-color: var(--color-background) !important; /* antes color-surface-alt — igualado al resto del contenido para no dejar ningún salto */
}
.entry-hero{
  padding-top: var(--header-clearance); /* .entry-hero vive FUERA de #main (que ya compensa el header fijo), así que necesita su propio hueco, igual que el Hero de la Home */
}
.entry-hero .entry-header{
  min-height: auto !important; /* override inevitable: Kadence fuerza 200px mínimo aunque el contenido real ocupe menos, dejando aire de sobra */
}
.entry-hero .archive-title{
  margin: 0 0 var(--space-sm); /* el navegador aplica un margen por defecto a cualquier <h1> que no hayamos resetado nunca; lo sustituimos por nuestro propio espaciado */
}
.entry-hero .archive-description p{
  margin: 0; /* mismo motivo, para el párrafo de descripción */
}
.hero-section-overlay{
  background-color: transparent !important; /* capa vacía de overlay que Kadence prepara para fotos de fondo; sin foto, no debe pintar nada */
}

/* Kadence añade un margen automático de 80px arriba y abajo a
   ".content-area" en todas las páginas — no se notaba en la Home
   porque el Hero lo tapaba, pero en páginas de contenido normal
   (categoría, producto...) deja un hueco de sobra antes de empezar. */
#primary.content-area{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* El Header es fijo (position: fixed) en TODA la web, no solo en la
   Home. En el Hero ya se compensaba con su propio padding-top, pero
   cualquier otra página (como "Nuestra Historia") no tenía ningún
   hueco reservado para él, y el Header (sólido casi blanco en su
   estado is-scrolled) quedaba solapado sobre el principio del
   contenido — el "salto a blanco" que se veía ahí. Se soluciona una
   sola vez aquí, para todas las páginas presentes y futuras. */
#main.site-main{
  padding-top: var(--header-clearance);
}
/* Excepción: en la Home, el propio Hero ya se compensa a sí mismo
   (necesita que su fondo llegue hasta arriba del todo de la ventana,
   no solo su contenido) — si además el wrapper le sumara su propio
   padding-top, la foto del Hero dejaría un hueco crema por encima y
   se perdería el efecto de pantalla completa. Requiere que "Inicio"
   esté marcada como página de portada en Ajustes → Lectura (lo
   habitual): WordPress añade la clase body.home automáticamente. */
body.home #main.site-main{
  padding-top: 0;
}
/* Excepción: cualquier página con .entry-hero delante (categorías,
   archivos...) ya se compensa a sí misma con su propio padding-top —
   si #main SUMA otra vez el mismo hueco, se duplica y deja un salto
   enorme entre la cabecera de la categoría y el listado de productos. */
.entry-hero + #primary #main.site-main{
  padding-top: 0;
}

/* La primera sección de cualquier página no debe sumar su propio
   padding superior al hueco que ya reserva #main para el header fijo
   — si no, se ve un espacio excesivo antes del primer bloque. */
.entry-content.single-content > .sp-section:first-child{
  padding-top: 0;
}