/* Vive Storage — webfonts (rediseño 2026)
   Display: Barlow Condensed 900 (uppercase). Body: Inter. Mono: IBM Plex Mono (countdowns/códigos). */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@500;600&display=swap');
/* Vive Storage — color tokens (rediseño 2026, fuente: landing-redesign.css) */
:root {
  /* Base brand */
  --vs-red: #d63a26;         /* rojo primario: CTAs, kickers, acentos, em en headlines */
  --vs-red-dark: #b83222;    /* hover del rojo */
  --vs-blue: #1f4479;        /* azul profundo: bandas de stats, plan destacado, links tel */
  --vs-ink: #111827;         /* texto principal / headings */
  --vs-dark: #101827;        /* fondos oscuros: hero, footer */
  --vs-muted: #6b7280;       /* texto secundario */
  --vs-sand: #f5f0e8;        /* fondo de secciones cálidas */
  --vs-line: #eef0f4;        /* bordes de cards */
  --vs-green-wa: #25d366;    /* WhatsApp (botones/flotante) */
  --vs-green-check: #22c55e; /* checks ✓ de listas */

  /* Neutrals de apoyo */
  --vs-white: #ffffff;
  --vs-gray-border: #e5e7eb; /* borde inputs */
  --vs-gray-placeholder: #b5bdc9;
  --vs-gray-soft: #9aa4b2;   /* small prints */

  /* Semantic aliases */
  --surface-page: var(--vs-white);
  --surface-section-alt: var(--vs-sand);
  --surface-band: var(--vs-blue);
  --surface-dark: var(--vs-dark);
  --surface-card: var(--vs-white);
  --text-heading: var(--vs-ink);
  --text-body: var(--vs-muted);
  --text-on-dark: var(--vs-white);
  --accent-cta: var(--vs-red);
  --accent-cta-hover: var(--vs-red-dark);
  --accent-kicker: var(--vs-red);
  --accent-whatsapp: var(--vs-green-wa);
  --focus-ring: rgba(214, 58, 38, .12);

  /* LEGACY (sitio viejo, pre-rediseño — solo para referencias históricas) */
  --vs-legacy-teal: #005670;
  --vs-legacy-red: #da291c;
}
/* Vive Storage — typography tokens (rediseño 2026) */
:root {
  --font-display: 'Barlow Condensed', Arial, sans-serif; /* SIEMPRE uppercase, weight 900 */
  --font-body: 'Inter', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;               /* countdowns, códigos */

  /* Display (Barlow Condensed 900, uppercase, line-height ≤ 1) */
  --text-hero: 900 82px/0.9 var(--font-display);      /* h1 hero; em interno en rojo itálico */
  --text-h2: 900 46px/0.94 var(--font-display);       /* títulos de sección */
  --text-h2-lg: 900 62px/1.18 var(--font-display);    /* CTA final */
  --text-price: 900 29px/1 var(--font-display);       /* precios */
  --text-plan-size: 900 52px/0.88 var(--font-display);/* "9 m²" en plan cards */
  --text-stat: 900 42px/0.9 var(--font-display);      /* stats band */

  /* Body (Inter) */
  --text-kicker: 900 12px/1.2 var(--font-body);       /* uppercase, letter-spacing .08em, rojo */
  --text-h3: 700 19px/1.1 var(--font-body);           /* títulos de card */
  --text-body-md: 400 15px/1.55 var(--font-body);
  --text-body-sm: 600 14px/1.55 var(--font-body);
  --text-label: 700 13px/1.2 var(--font-body);
  --text-button: 900 15px/1 var(--font-body);         /* uppercase */
  --text-caption: 700 12px/1.4 var(--font-body);
  --text-small: 600 11px/1.4 var(--font-body);
}
/* Vive Storage — spacing, radius, shadows (rediseño 2026) */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-section: 58px;      /* padding vertical típico de secciones (58-78px) */

  --radius-card: 13px;        /* cards de plan/beneficio: 13-14px */
  --radius-card-lg: 16px;     /* quote card / modales */
  --radius-field: 12px;       /* inputs y botones de formulario */
  --radius-button: 8px;       /* botones de nav/CTA pequeños: 8-9px */
  --radius-pill: 999px;       /* pills: location, popular, labels de galería */

  --shadow-card: 0 8px 24px rgba(15, 23, 42, .03);
  --shadow-card-float: 0 26px 60px rgba(0, 0, 0, .32);   /* quote card sobre hero */
  --shadow-featured: 0 24px 42px rgba(31, 68, 121, .24); /* plan destacado azul */
  --shadow-button: 0 12px 25px rgba(214, 58, 38, .25);   /* botón rojo grande */
  --shadow-wa: 0 18px 34px rgba(32, 213, 99, .34);

  --container-max: 1020px;    /* shell del rediseño */
}