/* =========================================================
   CASA CON ALMA — Berenice Cruz Brand Stylesheet
   Drop this <link> or <style> into the top of any HTML file:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500;1,6..96,700&family=Italiana&family=Manrope:wght@300;400;500;600;700&family=Caveat:wght@400;500;600;700&display=swap" rel="stylesheet">

   Then this CSS file (link or inline).
   ========================================================= */

:root {
  /* === COLOR === */
  --pink: #E0337F;          /* Fuchsia Reina — primary */
  --pink-deep: #B01E62;     /* Gradient depth */
  --pink-hot: #FF4593;      /* Italic accents, sparkles */
  --pink-soft: #F2A8C8;     /* Soft accent on dark */
  --blush: #F5D6E0;         /* Soft blush — pétalo */
  --blush-pale: #FCEEF3;    /* Lighter section background */
  --black: #0A0A0A;         /* Noche — anchor */
  --black-soft: #1A1414;    /* Slightly warmer black */
  --champagne: #D4B57E;     /* Glow — oro, jewelry */
  --champagne-light: #EBD9B4; /* Italic on pink */
  --cream: #FAF6F1;         /* Papel — body backgrounds */

  /* === TYPE === */
  --display: 'Bodoni Moda', 'Times New Roman', serif;
  --feature: 'Italiana', serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --hand: 'Caveat', cursive;

  /* === SHADOWS === */
  --shadow-house: 0 30px 60px -20px rgba(224, 51, 127, 0.4),
                  0 15px 30px -10px rgba(0, 0, 0, 0.5);
  --shadow-deep: 0 50px 80px -25px rgba(224, 51, 127, 0.5),
                 0 30px 50px -15px rgba(0, 0, 0, 0.6);
}

/* =========================================================
   GLITTER — adds champagne + white sparkles to dark backgrounds
   Apply to any element with position: relative
   ========================================================= */
.glitter {
  position: relative;
  isolation: isolate;
}
.glitter::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='%23D4B57E'%3E%3Cpath d='M40 60 L41 56 L42 60 L46 61 L42 62 L41 66 L40 62 L36 61 Z'/%3E%3Cpath d='M180 30 L181.5 24 L183 30 L189 31.5 L183 33 L181.5 39 L180 33 L174 31.5 Z' opacity='0.85'/%3E%3Cpath d='M310 90 L311 86 L312 90 L316 91 L312 92 L311 96 L310 92 L306 91 Z'/%3E%3Cpath d='M90 180 L91.5 174 L93 180 L99 181.5 L93 183 L91.5 189 L90 183 L84 181.5 Z' opacity='0.8'/%3E%3Cpath d='M260 210 L261 206 L262 210 L266 211 L262 212 L261 216 L260 212 L256 211 Z'/%3E%3Cpath d='M50 330 L51.5 324 L53 330 L59 331.5 L53 333 L51.5 339 L50 333 L44 331.5 Z' opacity='0.85'/%3E%3Cpath d='M220 350 L221 346 L222 350 L226 351 L222 352 L221 356 L220 352 L216 351 Z'/%3E%3Cpath d='M340 270 L341.5 264 L343 270 L349 271.5 L343 273 L341.5 279 L340 273 L334 271.5 Z' opacity='0.8'/%3E%3Cpath d='M150 110 L151 107 L152 110 L155 111 L152 112 L151 115 L150 112 L147 111 Z'/%3E%3C/g%3E%3Cg fill='%23FFFFFF' opacity='0.7'%3E%3Cpath d='M120 80 L120.7 78 L121.4 80 L123.4 80.7 L121.4 81.4 L120.7 83.4 L120 81.4 L118 80.7 Z'/%3E%3Cpath d='M280 160 L281 157 L282 160 L285 161 L282 162 L281 165 L280 162 L277 161 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 400px 400px;
  background-repeat: repeat;
  opacity: 0.7;
}

/* =========================================================
   TILE BORDER — Talavera-inspired horizontal divider
   Use as a thin element with class="tile-border"
   Default height ~14px; can scale by setting height
   ========================================================= */
.tile-border {
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 14'%3E%3Cg stroke='%23E0337F' stroke-width='1' fill='none'%3E%3Cline x1='0' y1='7' x2='280' y2='7' opacity='0.35'/%3E%3C/g%3E%3Cg fill='%23E0337F'%3E%3Ccircle cx='14' cy='7' r='2.5'/%3E%3Ccircle cx='98' cy='7' r='2.2'/%3E%3Ccircle cx='154' cy='7' r='2.2'/%3E%3Ccircle cx='210' cy='7' r='2.2'/%3E%3Ccircle cx='266' cy='7' r='2.2'/%3E%3C/g%3E%3Cg fill='%23D4B57E'%3E%3Ccircle cx='42' cy='7' r='2.2'/%3E%3Ccircle cx='126' cy='7' r='2.5'/%3E%3Ccircle cx='238' cy='7' r='2.5'/%3E%3C/g%3E%3Cg fill='%230A0A0A'%3E%3Ccircle cx='70' cy='7' r='2.5'/%3E%3Ccircle cx='182' cy='7' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* =========================================================
   HOUSE MARK — reusable component
   Use as: <span class="house-mark"></span> with width/height set
   For color variants, use class modifiers below
   ========================================================= */
.house-mark {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* Default: pink stroke, champagne doorway — for dark backgrounds */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 16 50 L 50 18 L 84 50' stroke='%23FF4593' stroke-width='3.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M 26 46 L 26 82 L 74 82 L 74 46' stroke='%23FF4593' stroke-width='3.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M 42 82 L 42 64 Q 50 57 58 64 L 58 82' stroke='%23D4B57E' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.house-mark.cream-stroke {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 16 50 L 50 18 L 84 50' stroke='%23FAF6F1' stroke-width='3.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M 26 46 L 26 82 L 74 82 L 74 46' stroke='%23FAF6F1' stroke-width='3.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M 42 82 L 42 64 Q 50 57 58 64 L 58 82' stroke='%23D4B57E' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.house-mark.black-stroke {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 16 50 L 50 18 L 84 50' stroke='%230A0A0A' stroke-width='3.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M 26 46 L 26 82 L 74 82 L 74 46' stroke='%230A0A0A' stroke-width='3.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M 42 82 L 42 64 Q 50 57 58 64 L 58 82' stroke='%23E0337F' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.house-mark.solid {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 16 50 L 50 18 L 84 50 L 84 84 L 16 84 Z' fill='%230A0A0A'/%3E%3Cpath d='M 42 84 L 42 64 Q 50 57 58 64 L 58 84 Z' fill='%23E0337F'/%3E%3C/svg%3E");
}

/* =========================================================
   TYPOGRAPHY UTILITIES — drop-in classes for the brand voice
   ========================================================= */

/* Bodoni headlines — the workhorse */
.brand-headline {
  font-family: var(--display);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 96;
}
.brand-italic {
  font-style: italic;
  font-weight: 400;
  color: var(--pink);
}
.brand-italic-on-dark {
  font-style: italic;
  font-weight: 400;
  color: var(--pink-hot);
}
.brand-italic-on-pink {
  font-style: italic;
  font-weight: 400;
  color: var(--champagne-light);
}

/* Italiana feature word — heavily letter-spaced caps */
.brand-feature {
  font-family: var(--feature);
  font-size: clamp(28px, 5vw, 48px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--pink);
}

/* Caveat handwritten — must be tilted */
.brand-hand {
  font-family: var(--hand);
  font-weight: 500;
  transform: rotate(-1.5deg);
  display: inline-block;
  line-height: 1.1;
}
.brand-hand.tilt-2 { transform: rotate(-2deg); }
.brand-hand.bold   { font-weight: 600; }

/* Manrope tracked caps — eyebrows and metadata */
.brand-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.brand-eyebrow.tight   { font-size: 9px; letter-spacing: 0.28em; }
.brand-eyebrow.spacious { font-size: 12px; letter-spacing: 0.36em; }

/* Sparkle accent — pair with eyebrows */
.sparkle { color: var(--pink-hot); }
.sparkle.gold { color: var(--champagne); }

/* =========================================================
   GRADIENT BACKGROUNDS — ready-made surface treatments
   ========================================================= */
.bg-black-pink {
  background: var(--black);
  background-image: linear-gradient(160deg, var(--black) 0%, var(--black) 40%, var(--pink-deep) 100%);
}
.bg-pink-deep {
  background: var(--pink);
  background-image: linear-gradient(160deg, var(--pink) 0%, var(--pink-deep) 100%);
}
.bg-story-vertical {
  background: var(--pink);
  background-image: linear-gradient(180deg, var(--pink-deep) 0%, var(--pink) 50%, var(--black-soft) 100%);
}
.bg-radial-pink {
  background: var(--black);
  background-image: radial-gradient(ellipse at 75% 30%, rgba(224, 51, 127, 0.32), transparent 55%),
                    radial-gradient(ellipse at 15% 85%, rgba(212, 181, 126, 0.16), transparent 50%);
}

/* =========================================================
   CARD SURFACES — common card backgrounds w/ paper grain
   ========================================================= */
.card-cream {
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
.card-cream::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(212, 181, 126, 0.45) 0.6px, transparent 1.2px),
    radial-gradient(circle at 75% 85%, rgba(224, 51, 127, 0.30) 0.5px, transparent 1px),
    radial-gradient(circle at 85% 30%, rgba(212, 181, 126, 0.40) 0.5px, transparent 1px),
    radial-gradient(circle at 50% 60%, rgba(212, 181, 126, 0.30) 0.5px, transparent 1px);
  pointer-events: none;
}

/* =========================================================
   COMMON SHADOWS
   ========================================================= */
.shadow-house { box-shadow: var(--shadow-house); }
.shadow-deep  { box-shadow: var(--shadow-deep); }

/* =========================================================
   SPARKLE TEXT TAG — the "Scan ✦" / "Just Listed" sticker tag
   ========================================================= */
.brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pink-hot);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* =========================================================
   RESET-LITE — only what's needed for clean rendering
   Don't apply globally if integrating into existing pages
   ========================================================= */
.brand-reset *, .brand-reset *::before, .brand-reset *::after {
  box-sizing: border-box;
}
.brand-reset {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  font-family: var(--sans);
  color: var(--black);
  line-height: 1.5;
}