/* ============================================================
   FLOR DE CERA · Web premium · Design Tokens
   Brand colors confirmed from live site (source of truth)
   Valle de Guadalupe · Hospedaje boutique
   ============================================================ */

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

:root {
  /* ===== BRAND · source of truth ===== */
  --uva:        #524382;   /* firma de marca · CTA primario */
  --uva-900:    #3D3260;   /* hover / estados activos */
  --uva-700:    #6455a0;   /* tint para gradientes */
  --lila:       #B683B9;   /* acento claro, detalles, badges (sobre fondo oscuro) */
  --lila-600:   #5b4382;   /* texto/etiquetas moradas sobre fondo claro · AA */
  --lila-wash:  #EFEAF3;   /* fondos suaves con tinte morado */
  --carbon:     #464646;   /* texto principal, header */
  --carbon-80:  #595959;
  --carbon-60:  #6E6E6E;   /* texto secundario / captions */
  --carbon-40:  #9a9a9a;
  --linea:      #E6E2EC;   /* bordes, separadores */
  --linea-2:    #F1EEF5;
  --blanco:     #FFFFFF;   /* fondo principal */
  --marfil:     #FAF9FB;   /* off-white con micro-tinte morado */

  /* ===== Photography-derived accents (vineyard / sunset) ===== */
  --sunset-1:   #f4d9b8;   /* horizonte cálido */
  --sunset-2:   #e7b486;
  --sunset-3:   #c98a73;
  --dusk-1:     #6a5790;
  --dusk-2:     #44375f;
  --vine-1:     #5c6b4e;   /* verde viñedo */
  --vine-2:     #3f4a37;

  /* ===== TYPE ===== */
  --f-display: "Cormorant Garamond", "Times New Roman", serif;
  --f-label:   "Oswald", "Arial Narrow", sans-serif;
  --f-body:    "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* modular scale 1.25 */
  --t-14: 14px;
  --t-16: 16px;
  --t-18: 18px;
  --t-20: 20px;
  --t-25: 25px;
  --t-31: 31px;
  --t-39: 39px;
  --t-49: 49px;
  --t-61: 61px;
  --t-76: 76px;
  --t-95: 95px;

  /* ===== SPACING · base 8 ===== */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* ===== RADII ===== */
  --r-card: 16px;
  --r-card-sm: 14px;
  --r-btn: 8px;
  --r-pill: 999px;

  /* ===== SHADOWS · suaves y cálidas, tinte morado ===== */
  --sh-sm: 0 1px 3px rgba(82, 67, 130, 0.06);
  --sh-md: 0 8px 24px rgba(82, 67, 130, 0.10);
  --sh-lg: 0 20px 50px rgba(61, 50, 96, 0.16);
  --sh-cta: 0 10px 28px rgba(82, 67, 130, 0.32);

  /* ===== LAYOUT ===== */
  --maxw: 1280px;
  --maxw-wide: 1440px;
  --header-h: 76px;
  --bar-h: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-16);
  line-height: 1.6;
  color: var(--carbon);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

::selection { background: var(--lila); color: #fff; }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--marfil); }
::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 6px; border: 3px solid var(--marfil); }
::-webkit-scrollbar-thumb:hover { background: var(--lila); }