/* Visit Fageca — Design tokens
   "Aldea editorial" · Blanco + Bricolage + Grafito + Gris en secciones.
   El acento cálido (ember) solo existe para rating + chip Campus. */

:root {
  /* Canvas & surfaces (Blanco) */
  --vf-canvas: #FFFFFF;          /* fondo dominante */
  --vf-canvas-2: #FAFAF9;        /* surface elevado, cards */
  --vf-canvas-deep: #F1F1EF;     /* tono secciones "Gris" */
  --vf-canvas-ink: #14171A;      /* hero dark / footer */

  /* Ink */
  --vf-ink: #14171A;
  --vf-ink-2: #3A3D3F;
  --vf-ink-3: #6E6E6A;
  --vf-ink-inv: #F5F1E8;

  /* Lines */
  --vf-line: #ECEAE5;
  --vf-line-2: #DDDBD4;

  /* Structural accents */
  --vf-moss: #2E3A2B;            /* verde bosque oscuro — estructural */
  --vf-moss-deep: #1E271C;
  --vf-stone: #9AA08C;

  /* CTAs — grafito conversor */
  --vf-cta: #14171A;
  --vf-cta-hover: #2E3A2B;
  --vf-cta-ink: #F5F1E8;

  /* Accent cálido — USO RESTRINGIDO: rating + chip Campus + tag "última" */
  --vf-ember: #B5572C;
  --vf-ember-soft: #F2E2D4;

  /* State */
  --vf-ok: #1F7A4B;
  --vf-ok-soft: #E4F0E8;
  --vf-warn: #A86A1C;
  --vf-warn-soft: #F4EADA;
  --vf-err: #9A2A2A;
  --vf-err-soft: #F5DFDF;

  /* Radii */
  --vf-r-sm: 10px;
  --vf-r-md: 14px;
  --vf-r-lg: 20px;
  --vf-r-xl: 28px;
  --vf-r-full: 9999px;

  /* Shadows */
  --vf-shadow-card: 0 1px 2px rgba(20,23,26,.04), 0 8px 24px rgba(20,23,26,.06);
  --vf-shadow-float: 0 4px 10px rgba(20,23,26,.06), 0 24px 48px rgba(20,23,26,.10);
  --vf-shadow-inset: inset 0 0 0 1px var(--vf-line);

  /* Type — Bricolage Grotesque display */
  --vf-font-display: "Bricolage Grotesque", "Fraunces", "Cormorant Garamond", Georgia, serif;
  --vf-font-body: "General Sans", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --vf-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Spacing scale (4px base) */
  --vf-s-1: 4px;
  --vf-s-2: 8px;
  --vf-s-3: 12px;
  --vf-s-4: 16px;
  --vf-s-5: 24px;
  --vf-s-6: 32px;
  --vf-s-7: 48px;
  --vf-s-8: 64px;
  --vf-s-9: 96px;

  /* Container */
  --vf-container: 1320px;
  --vf-gutter: clamp(1.25rem, 3vw, 3rem);

  /* Sección bakeada = Gris (aplica a nav, summary, bento deep, etc.) */
  --vf-section-bg: #F1F1EF;
  --vf-section-ink: var(--vf-ink);
  --vf-section-muted: var(--vf-ink-3);
}

/* === Aplicación del "tono secciones Gris" a los banners === */
.vf-nav { background: var(--vf-section-bg) !important; }
.vf-summary { background: var(--vf-section-bg) !important; border-top-color: transparent; border-bottom-color: transparent; }
.vf-pkg { background: var(--vf-section-bg); }
.vf-packages__filters { background: var(--vf-section-bg); }
.vf-section--deep { background: var(--vf-section-bg); color: var(--vf-section-ink); }
.vf-section--deep p,
.vf-section--deep .vf-section__head p,
.vf-section--deep .vf-eyebrow { color: var(--vf-section-muted); }
.vf-week__day--accent { background: var(--vf-section-bg); }
.vf-checkout__trustBox { background: var(--vf-section-bg); }
.vf-checkout__help { background: var(--vf-section-bg); }
.vf-prop__localItem { background: var(--vf-section-bg); }
.vf-pillar__icon { background: var(--vf-section-bg); color: var(--vf-moss); }
.vf-campus { background: color-mix(in oklab, var(--vf-section-bg) 30%, var(--vf-canvas)); }
.vf-trust { background: color-mix(in oklab, var(--vf-section-bg) 50%, var(--vf-canvas)); }

/* Cita banner — modo claro (Gris) con texto oscuro */
.vf-cita { background: var(--vf-section-bg); color: var(--vf-ink); }
.vf-cita h2 { color: var(--vf-ink); }
.vf-cita p { color: var(--vf-ink-3); }
.vf-cita__eyebrow { color: var(--vf-ink-3) !important; }
.vf-cita__visual { background: rgba(255,255,255,.6); color: var(--vf-ink); }
.vf-cita__slot { color: var(--vf-ink); border-color: var(--vf-line-2); }

/* === Reset + base === */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--vf-font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--vf-ink);
  background: var(--vf-canvas);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }

/* Type utilities */
.vf-display {
  font-family: var(--vf-font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-variation-settings: "opsz" 96, "SOFT" 50;
}
.vf-eyebrow {
  font-family: var(--vf-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
}
.vf-mono {
  font-family: var(--vf-font-mono);
  font-feature-settings: "tnum", "zero";
  letter-spacing: -0.01em;
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--vf-moss);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Scrollbar (subtle) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--vf-line-2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--vf-ink-3); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Container helper */
.vf-container {
  width: 100%;
  max-width: var(--vf-container);
  margin-inline: auto;
  padding-inline: var(--vf-gutter);
}

/* Buttons */
.vf-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: var(--vf-r-full);
  font-weight: 500; font-size: 15px;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.vf-btn:hover { transform: translateY(-1px); }
.vf-btn--primary {
  background: var(--vf-cta); color: var(--vf-cta-ink);
}
.vf-btn--primary:hover { background: var(--vf-cta-hover); }
.vf-btn--ghost {
  background: transparent; color: var(--vf-ink);
  box-shadow: inset 0 0 0 1px var(--vf-ink);
}
.vf-btn--ghost:hover { background: var(--vf-ink); color: var(--vf-cta-ink); }
.vf-btn--soft {
  background: var(--vf-canvas-2); color: var(--vf-ink);
  box-shadow: var(--vf-shadow-inset);
}
.vf-btn--soft:hover { box-shadow: inset 0 0 0 1px var(--vf-ink-2); }
.vf-btn--lg { padding: 18px 28px; font-size: 16px; }
.vf-btn--sm { padding: 10px 16px; font-size: 14px; }
.vf-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* Chip */
.vf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--vf-r-full);
  font-size: 13px; font-weight: 500;
  background: var(--vf-canvas-2);
  box-shadow: var(--vf-shadow-inset);
  color: var(--vf-ink-2);
}
.vf-chip--campus {
  background: var(--vf-ember-soft);
  color: var(--vf-ember);
  box-shadow: none;
}
.vf-chip--free {
  background: var(--vf-ok-soft);
  color: var(--vf-ok);
  box-shadow: none;
}
.vf-chip--busy {
  background: var(--vf-err-soft);
  color: var(--vf-err);
  box-shadow: none;
}
.vf-chip--dark {
  background: var(--vf-moss);
  color: var(--vf-ink-inv);
  box-shadow: none;
}

/* Card */
.vf-card {
  background: var(--vf-canvas-2);
  border-radius: var(--vf-r-lg);
  box-shadow: var(--vf-shadow-card);
}

/* Photo placeholder — stripes + label (fallback si no hay imagen) */
.vf-ph {
  position: relative;
  background:
    repeating-linear-gradient(
      45deg,
      #E4E2DD 0 10px,
      #EDEBE5 10px 20px
    );
  color: var(--vf-ink-3);
  font-family: var(--vf-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  display: flex; align-items: flex-end; justify-content: flex-start;
  overflow: hidden;
}
.vf-ph[data-label]::after {
  content: attr(data-label);
  padding: 10px 12px;
  background: rgba(20,23,26,.7);
  color: var(--vf-canvas);
  border-radius: 999px;
  margin: 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.vf-ph img, .vf-ph picture {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.vf-ph--photo[data-label]::after { display: none; }

/* Divider */
.vf-hr {
  height: 1px;
  background: var(--vf-line);
  border: 0;
  margin: 0;
}