/* Visita Vallarta — shared frame of the "Tabla de Lotería" world (2026-11-11)
   Loaded on EVERY page from includes/analytics.php: tokens, header strip, footer, the WhatsApp action.
   The home (home.css) and the inner pages (styles.css) both build on these tokens. */

:root {
  --anil: oklch(0.36 0.19 266);
  --anil-hondo: oklch(0.28 0.16 267);
  --anil-claro: oklch(0.47 0.19 266);
  --anil-tinte: oklch(0.9 0.05 266);
  --rosa: oklch(0.53 0.23 2);
  --rosa-hondo: oklch(0.44 0.2 2);
  --rosa-tinte: oklch(0.95 0.035 2);
  --cempa: oklch(0.86 0.17 88);
  --cempa-hondo: oklch(0.78 0.17 80);
  --cempa-tinta: oklch(0.3 0.07 80);
  --papel: oklch(0.985 0.006 95);
  --papel-sombra: oklch(0.93 0.012 95);
  --tinta: oklch(0.2 0.07 268);
  --tinta-suave: oklch(0.38 0.06 268);
  --regla: oklch(0.2 0.07 268 / 0.22);
  --wa: oklch(0.76 0.21 150);
  --wa-hondo: oklch(0.68 0.2 150);
  --wa-tinta: oklch(0.2 0.06 160);

  --display: "Ultra", "Rockwell Extra Bold", "Clarendon", serif;
  --texto: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;

  --borde: clamp(14px, 2.2vw, 32px);
  --hueco: clamp(8px, 0.85vw, 14px);
  --ancho: 1500px;
  --sale: cubic-bezier(0.16, 1, 0.3, 1);
  --tira-h: 60px;
  --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 3l11 11-11 11L3 14z' fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='1.2'/%3E%3Ccircle cx='14' cy='14' r='1.6' fill='%23ffffff' fill-opacity='.14'/%3E%3C/svg%3E");
}

html { scroll-padding-top: calc(var(--tira-h) + 12px); scrollbar-color: var(--rosa) var(--anil-hondo); }
::selection { background: var(--rosa); color: var(--papel); }
:focus-visible { outline: 3px solid var(--cempa); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 120; background: var(--cempa); color: var(--tinta); padding: 10px 14px; border-radius: 6px; font-weight: 800; text-decoration: none; }
.skip:focus { top: 8px; }

svg.ic-arrow, .tira-menu svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
svg.ic-wa { fill: currentColor; width: 1.25em; height: 1.25em; flex: none; }
svg.ic-arrow { width: 1.4em; height: 1.4em; flex: none; }

/* ---------- The WhatsApp action: the only green in the system ---------- */
.btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  background: var(--wa); color: var(--wa-tinta);
  font-family: var(--texto); font-weight: 800; font-size: 0.95rem; line-height: 1.1; text-decoration: none;
  padding: 0.78em 1.15em; border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 2px 0 var(--wa-hondo), 0 10px 18px -10px oklch(0.2 0.1 160 / 0.7);
  transition: transform 0.18s var(--sale), background-color 0.18s;
}
.btn-wa:hover { background: oklch(0.8 0.21 150); color: var(--wa-tinta); transform: translateY(-1px); }
.btn-wa:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--wa-hondo); }
.btn-wa--grande { font-size: 1.05rem; padding: 0.95em 1.4em; width: 100%; }
.cuenta { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 0.35em; border-radius: 999px; background: var(--cempa); color: var(--tinta); font-size: 0.78em; font-weight: 800; font-variant-numeric: tabular-nums; }
.cuenta--wa { background: var(--wa-tinta); color: var(--papel); }

/* ---------- Board header strip ---------- */
.mesa { position: sticky; top: 0; z-index: 100; background: var(--anil-hondo); font-family: var(--texto); }
.tira {
  max-width: var(--ancho); margin-inline: auto; min-height: var(--tira-h);
  padding: 8px var(--borde);
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  color: var(--papel);
}
.tira-logo { flex: none; }
.tira-logo img { display: block; width: clamp(150px, 13vw, 190px); height: auto; }
.tira-links { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 26px); margin: 0 0 0 auto; padding: 0; list-style: none; font-weight: 600; font-size: 0.94rem; }
.tira-links a { color: var(--papel); text-decoration: none; padding: 8px 2px; white-space: nowrap; border-bottom: 2px solid transparent; transition: border-color 0.18s; }
.tira-links a:hover { border-bottom-color: var(--cempa); }
.tira-links a[aria-current="page"] { border-bottom-color: var(--cempa); color: var(--cempa); }
.tira-trip a { display: inline-flex; align-items: center; gap: 0.4em; }
.tira-menu { display: none; }

/* ---------- Footer ---------- */
.pie {
  background: var(--tinta); color: var(--anil-tinte); font-family: var(--texto); line-height: 1.55;
  padding: clamp(44px, 6vw, 80px) max(var(--borde), calc((100% - var(--ancho)) / 2 + var(--borde) + 32px)) 28px;
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px clamp(20px, 4vw, 60px);
}
.pie-marca img { display: block; max-width: 190px; height: auto; }
.pie-marca p { margin: 14px 0 0; max-width: 34ch; font-size: 0.95rem; color: var(--anil-tinte); }
.pie-col h2 { margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.2; letter-spacing: 0; color: var(--cempa); }
.pie-col ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pie-col a { display: inline-block; padding: 5px 0; text-decoration: none; color: var(--papel); font-weight: 500; overflow-wrap: anywhere; }
.pie-col a:hover { text-decoration: underline; text-decoration-color: var(--cempa); text-underline-offset: 0.18em; }
.pie-legal { grid-column: 1 / -1; margin: 0; padding-top: 20px; border-top: 1px solid oklch(1 0 0 / 0.16); font-size: 0.86rem; color: var(--anil-tinte); }

@media (max-width: 1099px) {
  .tira { flex-wrap: wrap; }
  .tira-menu {
    display: inline-flex; align-items: center; gap: 6px; order: 3; margin-left: 0;
    background: none; border: 2px solid oklch(1 0 0 / 0.45); color: var(--papel); border-radius: 999px;
    padding: 7px 13px; font-family: var(--texto); font-weight: 800; font-size: 0.9rem; cursor: pointer; min-height: 44px;
  }
  .tira-menu svg { width: 18px; height: 18px; }
  .btn-wa--tira { order: 2; margin-left: auto; min-height: 44px; }
  .tira-links { order: 4; flex-basis: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 4px 0 8px; font-size: 1.05rem; }
  .tira-links.abierto { display: flex; }
  .tira-links a { display: flex; padding: 12px 4px; border-bottom: 1px solid oklch(1 0 0 / 0.16); }
  .pie { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .btn-wa--tira span:not(.cuenta) { display: none; }
  .btn-wa--tira { padding: 0; width: 44px; height: 44px; position: relative; }
  .btn-wa--tira .cuenta { position: absolute; top: -4px; right: -4px; }
  .btn-wa--tira svg { width: 22px; height: 22px; }
  .tira-menu span { display: none; }
  .tira-menu { padding: 0; width: 44px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 699px) { .pie-col:last-of-type { grid-column: 1 / -1; } }