@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/*
 * Theme Name:  Bricks Child — SacredYoni
 * Theme URI:   https://sacredyoni.es
 * Description: Child theme de Bricks Builder para sacredyoni.es
 * Author:      Sivana
 * Author URI:  https://sacredyoni.es
 * Template:    bricks
 * Version:     1.0.0
 * License:     GPL-2.0-or-later
 * Text Domain: bricks-child-sacredyoni
 */

/* ============================================================
   DESIGN TOKENS — Variables CSS globales
   Basadas en el diseño Figma (VjdLvSet5s30DDGhkNFTNl)
   ============================================================ */

:root {

  /* ── Colores ─────────────────────────────────────────────── */
  --sy-cream:      #FAF8F1;   /* Fondo general de la página   */
  --sy-dark:       #1B1B1B;   /* Texto principal              */
  --sy-taupe:      #5E574D;   /* Botón primario, footer       */
  --sy-blue-gray:  #839EB6;   /* Botón secundario             */
  --sy-white:      #FFFFFF;   /* Fondo tarjetas producto      */
  --sy-border:     #E7E2D8;   /* Bordes y separadores sutiles */
  --sy-tan:        #9D9979;   /* Elementos terciarios / pills */
  --sy-card-tint:  rgba(131, 158, 182, 0.10); /* Fondo tarjetas "Tres caminos" */

  /* Opacidades de texto recurrentes */
  --sy-text-muted:   0.80;
  --sy-text-subtle:  0.70;

  /* ── Tipografías ─────────────────────────────────────────── */
  --sy-font-display: 'Cormorant Garamond', Georgia, serif;
  --sy-font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Escala tipográfica */
  --sy-text-h1:    56px;   /* Hero headline (spec cliente)     */
  --sy-text-h2:    36px;   /* Section titles                  */
  --sy-text-h3:    28px;   /* Card headings                   */
  --sy-text-h4:    22px;   /* Footer section headings         */
  --sy-text-price: 24px;   /* Precio de producto              */
  --sy-text-xl:    20px;   /* Hero subtitle                   */
  --sy-text-lg:    18px;   /* Section descriptions            */
  --sy-text-md:    16px;   /* Cuerpo estándar, botones        */
  --sy-text-sm:    14px;   /* Footer, badges, labels          */

  /* Line heights */
  --sy-lh-display: 1.167;  /* H1 */
  --sy-lh-heading: 1.222;  /* H2 */
  --sy-lh-card:    1.286;  /* H3 */
  --sy-lh-footer:  1.364;  /* H4 */
  --sy-lh-body:    1.625;  /* Párrafos body */
  --sy-lh-ui:      1.5;    /* Botones, UI */

  /* Letter spacing */
  --sy-ls-tight:   -0.0244em;  /* Párrafo M (-2.44%) */
  --sy-ls-normal:  -0.0225em;  /* Párrafo L (-2.25%) */
  --sy-ls-body:    -0.0195em;  /* Párrafo S / botones (-1.95%) */
  --sy-ls-small:   -0.0107em;  /* Small (-1.07%) */
  --sy-ls-price:    0.0029em;  /* Precio (+0.29%) */

  /* ── Espaciados ──────────────────────────────────────────── */
  --sy-space-xs:   8px;    /* Gap ítems lista, botones        */
  --sy-space-sm:   16px;   /* Separación interna pequeña      */
  --sy-space-md:   32px;   /* Padding interno tarjetas        */
  --sy-space-lg:   48px;   /* Gap entre tarjetas / secciones  */
  --sy-space-xl:   64px;   /* Padding top secciones medias    */
  --sy-space-2xl:  80px;   /* Padding horizontal del contenido*/

  /* ── Border radius ───────────────────────────────────────── */
  --sy-radius-pill: 999px;  /* Botones pill/redondeados        */
  --sy-radius-card:  16px;  /* Tarjetas y contenedores         */
  --sy-radius-sm:    10px;  /* Elementos pequeños              */

  /* ── Contenedor ──────────────────────────────────────────── */
  --sy-container-max:     1200px;
  --sy-container-padding: var(--sy-space-2xl);  /* 80px */

}


/* ============================================================
   BASE — Resets y estilos globales
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--sy-cream);
  color: var(--sy-dark);
  font-family: var(--sy-font-body);
  font-size: var(--sy-text-md);
  line-height: var(--sy-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ── Encabezados globales ────────────────────────────────── */

body h1, body .sy-h1,
#bricks-content h1 {
  font-family: var(--sy-font-display) !important;
  font-weight: 500 !important;
  font-size: var(--sy-text-h1) !important;
  line-height: var(--sy-lh-display) !important;
  color: var(--sy-dark) !important;
  margin: 0;
}

body h2, body .sy-h2,
#bricks-content h2 {
  font-family: var(--sy-font-display) !important;
  font-weight: 500 !important;
  font-size: var(--sy-text-h2) !important;
  line-height: var(--sy-lh-heading) !important;
  color: var(--sy-dark) !important;
  margin: 0;
}

body h3, body .sy-h3,
#bricks-content h3 {
  font-family: var(--sy-font-display) !important;
  font-weight: 500 !important;
  font-size: var(--sy-text-h3) !important;
  line-height: var(--sy-lh-card) !important;
  color: var(--sy-dark) !important;
  margin: 0;
}

body h4, body .sy-h4,
#bricks-content h4 {
  font-family: var(--sy-font-display) !important;
  font-weight: 500 !important;
  font-size: var(--sy-text-h4) !important;
  line-height: var(--sy-lh-footer) !important;
  color: var(--sy-dark) !important;
  margin: 0;
}

p {
  font-family: var(--sy-font-body);
  font-weight: 400;
  font-size: var(--sy-text-md);
  line-height: var(--sy-lh-body);
  letter-spacing: var(--sy-ls-body);
  color: var(--sy-dark);
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ── Contenedor base ─────────────────────────────────────── */

.sy-container {
  width: 100%;
  max-width: var(--sy-container-max);
  margin-inline: auto;
  padding-inline: var(--sy-container-padding);
}


/* ── Botones globales ────────────────────────────────────── */

.sy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sy-font-body);
  font-weight: 500;
  font-size: var(--sy-text-md);
  line-height: var(--sy-lh-ui);
  letter-spacing: var(--sy-ls-body);
  border-radius: var(--sy-radius-pill);
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.sy-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.sy-btn:active {
  transform: translateY(0);
}

/* Variante primaria — taupe */
.sy-btn--primary {
  background-color: var(--sy-taupe);
  color: var(--sy-white);
}

/* Variante secundaria — blue-gray */
.sy-btn--secondary {
  background-color: var(--sy-blue-gray);
  color: var(--sy-white);
}

/* Variante ghost / outline */
.sy-btn--ghost {
  background-color: transparent;
  color: var(--sy-taupe);
  border: 1.67px solid var(--sy-border);
}

.sy-btn--ghost:hover {
  background-color: rgba(94, 87, 77, 0.06);
}

/* Variante detail — blanco con borde */
.sy-btn--detail {
  background-color: var(--sy-white);
  color: var(--sy-dark);
  border: 1.67px solid var(--sy-border);
  font-size: var(--sy-text-sm);
  padding: 8px 18px;
}

/* Botones sobre fondo oscuro (taupe/footer) */
.sy-btn--on-dark {
  background-color: var(--sy-taupe);
  color: var(--sy-cream);
}

.sy-btn--on-dark-blue {
  background-color: var(--sy-blue-gray);
  color: var(--sy-white);
}

.sy-btn--on-dark-ghost {
  background-color: transparent;
  color: var(--sy-cream);
  border: 1.67px solid rgba(250, 248, 241, 0.4);
}

.sy-btn--on-dark-ghost:hover {
  background-color: rgba(250, 248, 241, 0.08);
}


/* ── Grupo de botones ────────────────────────────────────── */

.sy-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sy-space-xs);
  align-items: center;
}


/* ── Texto muted / subtle ────────────────────────────────── */

.sy-text-muted  { opacity: var(--sy-text-muted);  }
.sy-text-subtle { opacity: var(--sy-text-subtle); }

/* Texto en crema (para fondos oscuros) */
.sy-text-cream { color: var(--sy-cream); }