/* Tokens de la guía de marca Quinton (vacaciones-quinton/styles). */
@font-face { font-family:'Rubik'; src:url('brand/fonts/Rubik-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Rubik'; src:url('brand/fonts/Rubik-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Rubik'; src:url('brand/fonts/Rubik-SemiBold.ttf') format('truetype'); font-weight:500 600; font-display:swap; }
@font-face { font-family:'Rubik'; src:url('brand/fonts/Rubik-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }

:root {
  --navy:#012169; --ocean:#0056B4; --cyan:#00B5E2; --white:#FFFFFF;
  --off-white:#F4F7FB; --gray-100:#E8EDF5; --gray-300:#B0BCCE; --gray-500:#6B7A90; --gray-700:#3A4455;
  --cyan-soft:#E8F4FB;
  /* Estados operativos (no están en la guía; elegidos para leerse de lejos sobre navy) */
  --amber:#FFC845; --amber-soft:#FFF6DC; --amber-ink:#7A5200;
  --green:#34C26B; --green-soft:#E7F7EE;
  --red:#D93A3A; --red-soft:#FDECEC;

  --shadow-sm:0 1px 3px rgba(1,33,105,.08);
  --shadow-md:0 4px 16px rgba(1,33,105,.12);
  --shadow-lg:0 12px 40px rgba(1,33,105,.16);
  --r-sm:3px; --r-md:6px; --r-lg:12px; --r-pill:999px;
  --font:'Rubik', system-ui, sans-serif;
}

* { box-sizing:border-box; }
html, body { margin:0; }
body { font-family:var(--font); font-weight:300; color:var(--gray-700); background:var(--off-white);
       -webkit-font-smoothing:antialiased; }
button, input { font-family:inherit; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }

/* Botones (guía: mayúsculas, tracking .06em, radio 3px) */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer;
       font-weight:500; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
       padding:12px 28px; border-radius:var(--r-sm); transition:background-color 150ms ease, color 150ms ease;
       background:var(--navy); color:var(--white); white-space:nowrap; text-decoration:none; }
.btn:hover { background:var(--ocean); }
.btn:disabled { opacity:.5; cursor:default; }
.btn-secondary { background:transparent; color:var(--navy); border:1.5px solid var(--navy); padding:10.5px 26.5px; }
.btn-secondary:hover { background:var(--navy); color:var(--white); }
.btn-ghost { background:transparent; color:var(--ocean); padding:10px 14px; }
.btn-ghost:hover { background:var(--cyan-soft); }
.btn-inverse { background:var(--white); color:var(--navy); }
.btn-inverse:hover { background:var(--cyan); color:var(--navy); }
.btn-sm { font-size:10px; padding:8px 14px; }
.btn-lg { font-size:14px; padding:16px 36px; }

/* Campos (guía: borde 1.5px gray-100, foco ocean) */
.input { width:100%; font-weight:300; font-size:15px; color:var(--gray-700); background:var(--white);
         border:1.5px solid var(--gray-100); border-radius:var(--r-sm); padding:12px 14px; outline:none;
         transition:border-color 150ms ease; }
.input:focus { border-color:var(--ocean); }
.input::placeholder { color:var(--gray-300); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}