/** Shopify CDN: Minification failed

Line 67:0 All "@import" rules must come first

**/
/* =========================================================================
   BUILES HOUSE — Theme CSS
   Sistema visual para Casa Builes + las 3 sub-marcas (Bakery, Gelato, Lab)
   Colores y tipografías extraídos de los brandbooks oficiales
   (00_Builes_Bakery_Identidad.pdf / 00_Builes_Gelato_Identidad_L.pdf /
    00_Builes_Lab_Identidad_L.pdf / Estrategia Builes_House of Cool Things.pdf)

   Instalación: sube este archivo a Assets/ y cárgalo en theme.liquid con:
   {{ 'builes-theme.css' | asset_url | stylesheet_tag }}
   ========================================================================= */

:root {
  /* ---------- CASA BUILES (marca madre / House of Cool Things) ---------- */
  --builes-green: #003C34;      /* verde bosque — fondo de portada de marca */
  --builes-lime: #E3FF0C;       /* verde neón — acento "secret formula" */
  --builes-cream: #FFF9F5;      /* fondo neutro claro */
  --builes-ink: #1A1A1A;

  /* ---------- BAKERY — "European Cool Atelier" ---------- */
  --bakery-bg: #FFF0ED;         /* Rosa Crudo */
  --bakery-pink: #FFB3B6;       /* Princess Pink */
  --bakery-wine: #701E20;       /* Vinotinto */
  --bakery-blue: #4246C8;       /* Azul */
  --bakery-yellow: #FFF5A2;     /* Acento */
  --bakery-ink: var(--bakery-wine);

  /* ---------- GELATO — "American Fun Factory" ---------- */
  --gelato-red: #C4230A;        /* Rojo Gelato */
  --gelato-fucsia: #F33FBA;     /* Fucsia Eléctrico */
  --gelato-brown: #501705;      /* Café Rojizo */
  --gelato-yellow: #FFF7AE;     /* Amarillito */
  --gelato-blue: #649BFF;       /* Azul Acento */
  --gelato-ink: var(--gelato-brown);

  /* ---------- LAB — "The Dream Lab" ---------- */
  --lab-grey: #BDBDBD;          /* Gris Espacial */
  --lab-pink: #FBD4E6;          /* Palo de Rosa */
  --lab-yellow: #FFF7AE;        /* Amarillito */
  --lab-dark: #515152;          /* Gris Base */
  --lab-ink: var(--lab-dark);

  /* ---------- TIPOGRAFÍA ----------
     Los brandbooks usan fuentes con licencia (KOBE, OZIK, Only Sans).
     Súbelas en Configuración > Tipografía del tema (Shopify permite fuentes
     personalizadas vía "Añadir fuente" > subir archivo .otf/.ttf) y reemplaza
     los nombres de --font-* aquí. Mientras tanto, se usan fuentes de Google
     Fonts visualmente cercanas para que el sitio ya sea funcional. */
    --font-kobe: 'Kobe', 'Helvetica Neue', sans-serif;           /* Bakery display — Kobe (licencia propia, self-hosted) */
  --font-bakery-body: 'Lora', Georgia, serif;                    /* Bakery texto */
  --font-ozik: 'Bungee', 'Arial Black', sans-serif;              /* Gelato display — reemplazar por OZIK */
  --font-sharp-grotesk: 'Archivo', Helvetica, sans-serif;        /* Gelato texto — reemplazar por Sharp Grotesk */
  --font-only-sans: 'Plus Jakarta Sans', Helvetica, sans-serif;  /* Lab display + texto — reemplazar por Only Sans */

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
}

/* =========================================================================
   Google Fonts fallback imports (bórralos cuando subas las fuentes reales)
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Bungee&family=Archivo:wght@100;400;500;700;900&family=Plus+Jakarta+Sans:wght@200;400;500;700;800&family=Lora:ital@0;1&display=swap');

/* =========================================================================
   Base / utilidades compartidas
   ========================================================================= */
.builes-section { padding: 64px 24px; }
.builes-section__inner { max-width: 1280px; margin: 0 auto; }
.builes-eyebrow {
  font-family: var(--font-only-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.7;
  margin: 0 0 8px;
}
.builes-heading {
  margin: 0 0 16px;
  line-height: 1.05;
}
.builes-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid currentColor;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
  cursor: pointer;
}
.builes-btn:hover { transform: translateY(-2px); }
.builes-btn--solid { border-color: transparent; }
.builes-heart { width: 1em; height: 1em; display: inline-block; vertical-align: -0.1em; }

/* =========================================================================
   HERO — Casa Builes
   ========================================================================= */
.builes-hero {
  background: var(--builes-green);
  color: var(--builes-cream);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.builes-hero__inner {
  padding: 96px 40px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.builes-hero__eyebrow { color: var(--builes-lime); }
.builes-hero h1 {
  font-family: var(--font-kobe);
  font-size: clamp(40px, 7vw, 84px);
  color: var(--builes-cream);
}
.builes-hero p {
  font-family: var(--font-only-sans);
  font-size: 18px;
  opacity: 0.85;
  margin-bottom: 32px;
}
.builes-hero .builes-btn {
  background: var(--builes-lime);
  color: var(--builes-green);
  border-color: var(--builes-lime);
}
.builes-hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(227,255,12,0.25), transparent 60%);
  z-index: 1;
}

/* =========================================================================
   SHOP BY HOUSE — 3 cards (Bakery / Gelato / Lab)
   ========================================================================= */
.house-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .house-grid { grid-template-columns: 1fr; } }

.house-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 40px 28px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
}
.house-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .5s ease;
}
.house-card:hover img { transform: scale(1.06); }
.house-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
}
.house-card__label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
.house-card__title {
  font-size: 34px;
  margin: 0 0 8px;
  color: #fff;
}
.house-card__desc { color: rgba(255,255,255,0.85); font-size: 14px; margin-bottom: 16px; }
.house-card__cta {
  align-self: flex-start;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--builes-ink);
}

/* Variantes por casa (fondo sólido si no hay imagen) */
.house-card--bakery { background: var(--bakery-wine); }
.house-card--bakery .house-card__title { font-family: var(--font-kobe); }
.house-card--bakery .house-card__label { color: var(--bakery-pink); }
.house-card--bakery .house-card__cta { background: var(--bakery-pink); color: var(--bakery-wine); }

.house-card--gelato { background: var(--gelato-red); }
.house-card--gelato .house-card__title { font-family: var(--font-ozik); text-transform: uppercase; }
.house-card--gelato .house-card__label { color: var(--gelato-yellow); }
.house-card--gelato .house-card__cta { background: var(--gelato-yellow); color: var(--gelato-brown); }

.house-card--lab { background: var(--lab-dark); }
.house-card--lab .house-card__title { font-family: var(--font-only-sans); font-weight: 700; }
.house-card--lab .house-card__label { color: var(--lab-pink); }
.house-card--lab .house-card__cta { background: var(--lab-pink); color: var(--lab-dark); }

/* =========================================================================
   TABS de producto por casa (best sellers estilo Brooki)
   ========================================================================= */
.house-tabs__nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.house-tabs__btn {
  padding: 10px 22px;
  border-radius: 999px;
  border: 2px solid var(--builes-ink);
  background: transparent;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
  cursor: pointer;
  transition: all .15s ease;
}
.house-tabs__btn[aria-selected="true"][data-house="bakery"] { background: var(--bakery-pink); border-color: var(--bakery-pink); color: var(--bakery-wine); }
.house-tabs__btn[aria-selected="true"][data-house="gelato"] { background: var(--gelato-red); border-color: var(--gelato-red); color: #fff; }
.house-tabs__btn[aria-selected="true"][data-house="lab"] { background: var(--lab-dark); border-color: var(--lab-dark); color: #fff; }

.house-tabs__panel { display: none; }
.house-tabs__panel[data-active="true"] { display: block; }

.house-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 990px) { .house-products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .house-products-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* =========================================================================
   PRODUCT CARD
   ========================================================================= */
.builes-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.builes-card__media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #f2f2f2;
}
.builes-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.builes-card:hover .builes-card__media img { transform: scale(1.05); }
.builes-card__badge {
  position: absolute; top: 10px; left: 10px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 5px 10px; border-radius: 999px; background: var(--builes-lime); color: var(--builes-green);
}
.builes-card__title { font-size: 15px; font-weight: 600; margin: 0; }
.builes-card__price { font-size: 14px; opacity: .75; }

/* Theming del card según casa activa (se aplica vía data-house en el wrapper) */
[data-house-theme="bakery"] { font-family: var(--font-bakery-body); }
[data-house-theme="bakery"] .builes-card__badge { background: var(--bakery-pink); color: var(--bakery-wine); }
[data-house-theme="gelato"] { font-family: var(--font-sharp-grotesk); }
[data-house-theme="gelato"] .builes-card__badge { background: var(--gelato-yellow); color: var(--gelato-brown); }
[data-house-theme="lab"] { font-family: var(--font-only-sans); }
[data-house-theme="lab"] .builes-card__badge { background: var(--lab-pink); color: var(--lab-dark); }

/* =========================================================================
   OUR STORY
   ========================================================================= */
.our-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) { .our-story { grid-template-columns: 1fr; } }
.our-story__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; }
.our-story__media img { width: 100%; height: 100%; object-fit: cover; }
.our-story__content h2 { font-family: var(--font-kobe); font-size: clamp(30px,4vw,48px); }
.our-story__content p { font-family: var(--font-only-sans); font-size: 16px; line-height: 1.6; opacity: .8; }

/* =========================================================================
   EBOOK FEATURE
   ========================================================================= */
.ebook-banner {
  background: var(--lab-dark);
  color: #fff;
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  overflow: hidden;
}
@media (max-width: 900px) { .ebook-banner { grid-template-columns: 1fr; } }
.ebook-banner__media { position: relative; }
.ebook-banner__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 4/5;
}
.ebook-banner__content { padding: 48px; }
.ebook-banner__content .builes-eyebrow { color: var(--lab-pink); }
.ebook-banner__content h2 {
  font-family: var(--font-only-sans);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 16px;
}
.ebook-banner__content p { font-family: var(--font-only-sans); opacity: .8; margin-bottom: 24px; line-height: 1.6; }
.ebook-banner .builes-btn { background: var(--lab-pink); color: var(--lab-dark); border-color: var(--lab-pink); }
.ebook-banner__price { font-size: 22px; font-weight: 700; margin-bottom: 20px; display: block; }

/* =========================================================================
   BB GANG — prueba social / testimonios
   ========================================================================= */
.bb-gang { background: var(--bakery-bg); border-radius: var(--radius-lg); text-align: center; }
.bb-gang h2 { font-family: var(--font-kobe); color: var(--bakery-wine); font-size: clamp(28px,4vw,40px); }
.bb-gang__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
  text-align: left;
}
@media (max-width: 900px) { .bb-gang__grid { grid-template-columns: 1fr; } }
.bb-gang__card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 24px;
  font-family: var(--font-only-sans);
}
.bb-gang__stars { color: var(--gelato-red); font-size: 14px; margin-bottom: 10px; letter-spacing: 2px; }
.bb-gang__quote { font-size: 14px; line-height: 1.6; color: var(--builes-ink); margin-bottom: 14px; }
.bb-gang__name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bakery-wine); }

/* =========================================================================
   NEWSLETTER
   ========================================================================= */
.builes-newsletter {
  background: var(--builes-green);
  color: var(--builes-cream);
  border-radius: var(--radius-lg);
  text-align: center;
}
.builes-newsletter h2 { font-family: var(--font-kobe); color: var(--builes-lime); font-size: clamp(26px,4vw,40px); }
.builes-newsletter p { font-family: var(--font-only-sans); opacity: .85; margin-bottom: 24px; }
.builes-newsletter form {
  display: flex;
  max-width: 420px;
  margin: 0 auto;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.builes-newsletter input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 14px 18px;
  border-radius: 999px;
  border: none;
  font-family: var(--font-only-sans);
}
.builes-newsletter button {
  background: var(--builes-lime);
  color: var(--builes-green);
  border: none;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  cursor: pointer;
}

/* =========================================================================
   Banner opcional para páginas de colección (Bakery / Gelato / Lab)
   ========================================================================= */
.house-collection-banner {
  padding: 72px 24px;
  text-align: center;
  color: #fff;
}
.house-collection-banner--bakery { background: var(--bakery-wine); }
.house-collection-banner--bakery h1 { font-family: var(--font-kobe); }
.house-collection-banner--gelato { background: var(--gelato-red); }
.house-collection-banner--gelato h1 { font-family: var(--font-ozik); text-transform: uppercase; }
.house-collection-banner--lab { background: var(--lab-dark); }
.house-collection-banner--lab h1 { font-family: var(--font-only-sans); font-weight: 800; }
.house-collection-banner h1 { font-size: clamp(32px, 5vw, 56px); margin: 0 0 12px; }
.house-collection-banner p { font-family: var(--font-only-sans); opacity: .85; max-width: 560px; margin: 0 auto; }