/* ──────────────────────────────────────────────
   SAVA · Personality system
   Variant-aware tokens, eyebrows, cards, motion.
   Set [data-variant="..."] on a page wrapper to
   re-skin its accents, motion grammar, and
   decoration grammar.

   Variantes (mapeo por página · ver app.jsx PAGE_VARIANT):
     home            → anillado
     nosotros        → cuaderno
     niveles         → cuadriculado
     sedes           → banderines
     admisiones      → pegatinas
     vida-estudiantil→ banderines
     contacto        → cuaderno
     login           → cuaderno
     404             → pegatinas
   ────────────────────────────────────────────── */

/* ── Defaults (when no variant is set) ── */
:root {
  --page-accent: var(--color-brand-red);
  --page-accent-soft: rgba(160,57,46,0.10);
  --page-rule: rgba(31,64,54,0.09);
  --page-card-bg: var(--bg-surface);
  --page-card-rotate: 0deg;
  --page-card-radius: 8px;

  --reveal-duration: 720ms;
  --reveal-easing: cubic-bezier(.2,.7,.2,1);
  --reveal-y-from: 28px;
  --reveal-x-from: 0px;
  --reveal-r-from: 0deg;
  --reveal-s-from: 1;
  --reveal-origin: center bottom;
}

/* ── Variant token overrides ────────────────── */
[data-variant="cuaderno"] {
  --page-accent: var(--color-brand-red);
  --page-accent-soft: rgba(160,57,46,0.10);
  --page-rule: rgba(160,57,46,0.18);
  --reveal-duration: 900ms;
  --reveal-easing: cubic-bezier(.65,0,.35,1);
  --reveal-x-from: -36px;
  --reveal-y-from: 8px;
  --reveal-origin: left center;
}
[data-variant="cuadriculado"] {
  --page-accent: var(--color-brand-blue);
  --page-accent-soft: rgba(31,58,122,0.08);
  --page-rule: rgba(31,58,122,0.14);
  --reveal-duration: 480ms;
  --reveal-easing: cubic-bezier(.16,1,.3,1);
  --reveal-y-from: 16px;
  --reveal-origin: center bottom;
}
[data-variant="anillado"] {
  --page-accent: var(--color-brand-red);
  --page-accent-soft: rgba(217,164,65,0.16);
  --page-rule: rgba(193,52,46,0.20);
  --page-card-rotate: 0.3deg;
  --reveal-duration: 820ms;
  --reveal-easing: cubic-bezier(.42,0,.13,1.15);
  --reveal-x-from: -28px;
  --reveal-r-from: -1.4deg;
  --reveal-origin: left top;
}
[data-variant="banderines"] {
  --page-accent: var(--color-brand-red);
  --page-accent-soft: rgba(217,164,65,0.20);
  --page-rule: rgba(217,164,65,0.32);
  --reveal-duration: 1100ms;
  --reveal-easing: cubic-bezier(.34,1.46,.64,1);
  --reveal-y-from: -22px;
  --reveal-r-from: -2.5deg;
  --reveal-origin: center top;
}
[data-variant="pegatinas"] {
  --page-accent: var(--color-brand-gold);
  --page-accent-soft: rgba(217,164,65,0.22);
  --page-rule: rgba(193,52,46,0.22);
  --page-card-rotate: -0.8deg;
  --reveal-duration: 720ms;
  --reveal-easing: cubic-bezier(.34,1.56,.64,1);
  --reveal-s-from: 0.84;
  --reveal-r-from: -3deg;
  --reveal-origin: 30% 30%;
}

/* ── SectionEyebrow · variant-aware decoration ── */
.section-eyebrow {
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
  position: relative;
}
.section-eyebrow__bar {
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--page-accent);
  transition: width 600ms cubic-bezier(.2,.7,.2,1);
}
.section-eyebrow--gold .section-eyebrow__bar { background: var(--color-brand-gold); }
.section-eyebrow__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--page-accent);
  display: inline-flex; align-items: baseline; gap: 8px;
}
.section-eyebrow--gold .section-eyebrow__label { color: var(--color-brand-gold); }
.section-eyebrow__num {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.7;
  font-weight: 500;
}

/* · Cuaderno: hand-drawn underline with red ink dot · */
[data-variant="cuaderno"] .section-eyebrow__bar {
  height: 2px;
  background: var(--page-accent);
  border-radius: 1px;
  position: relative;
}
[data-variant="cuaderno"] .section-eyebrow__bar::after {
  content: ""; position: absolute;
  right: -3px; top: -2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--page-accent);
}

/* · Cuadriculado: number in coordinate-bracket · */
[data-variant="cuadriculado"] .section-eyebrow__num {
  background: var(--page-accent-soft);
  padding: 2px 6px;
  border-radius: 2px;
  opacity: 1;
}
[data-variant="cuadriculado"] .section-eyebrow__num::before { content: "("; opacity: 0.55; }
[data-variant="cuadriculado"] .section-eyebrow__num::after  { content: ")"; opacity: 0.55; }
[data-variant="cuadriculado"] .section-eyebrow__bar {
  background-image: linear-gradient(to right, var(--page-accent) 50%, transparent 50%);
  background-size: 4px 1px; background-repeat: repeat-x;
  background-color: transparent;
}

/* · Anillado: spiral ring at the start of the bar · */
[data-variant="anillado"] .section-eyebrow__bar {
  width: 38px; height: 10px;
  background: transparent;
  border: 1.5px solid var(--page-accent);
  border-radius: 50%;
  margin-left: 6px;
}

/* · Banderines: a single pennant in the bar's place · */
[data-variant="banderines"] .section-eyebrow__bar {
  width: 0; height: 0;
  background: transparent;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 16px solid var(--page-accent);
  margin-bottom: 0;
  animation: eyebrowSway 2.6s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes eyebrowSway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* · Pegatinas: gold star sticker prefix · */
[data-variant="pegatinas"] .section-eyebrow {
  padding-left: 4px;
}
[data-variant="pegatinas"] .section-eyebrow__bar {
  width: 16px; height: 16px;
  background: var(--color-brand-gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  transform: rotate(-12deg);
}

/* ── Page-wide decorative spine (descubrimiento) ── */
/* Each variant gets one quiet, persistent flourish that lives
   on the page edge — visible only on closer inspection. */
.page-spine {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 0;
  pointer-events: none;
  z-index: 5;
  transform: scale(var(--dc-inv-zoom, 1));
  transform-origin: top left;
}
[data-variant="cuaderno"] .page-spine {
  left: 24px; width: 1px;
  background: linear-gradient(to bottom, transparent 0%, var(--page-rule) 12%, var(--page-rule) 88%, transparent 100%);
}
[data-variant="anillado"] .page-spine {
  left: 0; width: 28px;
  background:
    radial-gradient(circle 6px at 14px 5%,  var(--page-accent-soft) 0 6px, transparent 7px),
    radial-gradient(circle 6px at 14px 15%, var(--page-accent-soft) 0 6px, transparent 7px),
    radial-gradient(circle 6px at 14px 25%, var(--page-accent-soft) 0 6px, transparent 7px),
    radial-gradient(circle 6px at 14px 35%, var(--page-accent-soft) 0 6px, transparent 7px),
    radial-gradient(circle 6px at 14px 45%, var(--page-accent-soft) 0 6px, transparent 7px),
    radial-gradient(circle 6px at 14px 55%, var(--page-accent-soft) 0 6px, transparent 7px),
    radial-gradient(circle 6px at 14px 65%, var(--page-accent-soft) 0 6px, transparent 7px),
    radial-gradient(circle 6px at 14px 75%, var(--page-accent-soft) 0 6px, transparent 7px),
    radial-gradient(circle 6px at 14px 85%, var(--page-accent-soft) 0 6px, transparent 7px),
    radial-gradient(circle 6px at 14px 95%, var(--page-accent-soft) 0 6px, transparent 7px),
    linear-gradient(to right, transparent 12px, var(--page-rule) 12px, var(--page-rule) 13px, transparent 13px);
}
[data-variant="cuadriculado"] .page-spine {
  display: none; /* cuadriculado expresses itself in grids on metric blocks */
}
[data-variant="banderines"] .page-spine { display: none; }
[data-variant="pegatinas"] .page-spine { display: none; }

/* ── Cards: variant rotation + hover signature ── */
[data-variant="pegatinas"] .lift-on-hover {
  transition: transform 240ms cubic-bezier(.34,1.56,.64,1), box-shadow 240ms ease;
}
[data-variant="pegatinas"] .lift-on-hover:hover {
  transform: rotate(1.2deg) translateY(-4px);
}
[data-variant="anillado"] .lift-on-hover:hover {
  transform: translateX(3px) rotate(-0.3deg);
}
[data-variant="cuaderno"] .lift-on-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(28,25,23,0.08), 0 4px 8px rgba(28,25,23,0.04), 4px 6px 0 -1px var(--page-rule);
}
[data-variant="banderines"] .lift-on-hover:hover {
  transform: translateY(-3px) rotate(-0.8deg);
}

/* ── Scattered guest decorations ─────────────── */
/* Small floating accents that hint at the variant
   between sections. Sparse — must not crowd content. */
.page-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.page-deco.right { right: 0; }
.page-deco.left  { left: 0; }

/* Pegatinas-style sticker (reusable as a guest accent) */
.deco-sticker {
  display: inline-block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.10));
}
.deco-sticker--star {
  width: 36px; height: 36px;
  background: var(--color-brand-gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  transform: rotate(-14deg);
}
.deco-sticker--dot {
  width: 28px; height: 28px;
  background: var(--color-brand-blue);
  border-radius: 50%;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,0.10);
  transform: rotate(-6deg);
}
.deco-sticker--check {
  width: 36px; height: 36px;
  background: rgba(31,138,91,0.22);
  border-radius: 10px;
  transform: rotate(-8deg);
  position: relative;
}
.deco-sticker--check::before {
  content: ""; position: absolute;
  left: 8px; top: 14px; width: 8px; height: 3px;
  background: var(--color-brand-green);
  transform: rotate(45deg);
  border-radius: 2px;
}
.deco-sticker--check::after {
  content: ""; position: absolute;
  left: 13px; top: 11px; width: 16px; height: 3px;
  background: var(--color-brand-green);
  transform: rotate(-45deg);
  border-radius: 2px;
}

/* Cuaderno-style margin annotation */
.deco-margin-note {
  position: absolute;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--page-accent);
  font-size: 14px;
  opacity: 0.65;
  letter-spacing: 0;
  transform: rotate(-2.5deg);
  max-width: 180px;
  line-height: 1.3;
}
.deco-margin-note::before {
  content: "→ ";
  font-style: normal;
  opacity: 0.6;
}

/* Banderines-mini · single small pennant decoration */
.deco-pennant {
  display: inline-block;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 14px solid var(--color-brand-red);
  position: absolute;
  animation: eyebrowSway 2.6s ease-in-out infinite;
  transform-origin: top center;
}
.deco-pennant.gold  { border-top-color: var(--color-brand-gold); }
.deco-pennant.blue  { border-top-color: var(--color-brand-blue); }
.deco-pennant.green { border-top-color: var(--color-brand-green); }

/* Cuadriculado-style dot grid watermark */
.deco-dotgrid {
  position: absolute;
  background-image: radial-gradient(circle 1.5px at 50% 50%, var(--page-rule) 0 1.5px, transparent 2px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, black 50%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, black 50%, transparent 100%);
}

/* Anillado-style spiral chip */
.deco-coil {
  width: 28px; height: 16px;
  border: 2px solid var(--page-rule);
  border-radius: 50%;
  position: absolute;
  transform: rotate(-14deg);
  box-shadow: inset 0 -2px 0 var(--page-accent);
}

/* ── Respect reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  .section-eyebrow__bar,
  [data-variant="banderines"] .section-eyebrow__bar,
  .deco-pennant {
    animation: none !important;
  }
}

/* ── Surface-aware fixes for banderines on dark sedes hero ── */
.hero-bd.surface-dark .pennant.p4 { color: var(--color-brand-green-soft); }
.hero-bd.surface-dark .pennant-string::before {
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.40) 12%, rgba(255,255,255,0.40) 88%, transparent);
}