/* ==========================================================================
   TECHY V3 — Sistema global
   Archivo : assets/css/v3/global-v3.css
   Extiende los tokens de app.css (--ink, --gold, --font, --sp-*, --shadow-*)
   en lugar de duplicarlos. Solo define lo que V3 necesita y no existe aún.
   ========================================================================== */

:root {
  --v3-bg:        #FAFAF8;
  --v3-surface:   #FFFFFF;
  --v3-text:      #111111;
  --v3-muted:     var(--smoke);
  --v3-line:      var(--line);

  --v3-accent-a:  #E4007D; /* magenta Lash */
  --v3-accent-b:  #009DDA; /* azul Lash */
  --v3-accent-gradient: linear-gradient(135deg, var(--v3-accent-a) 0%, var(--v3-accent-b) 100%);

  --v3-font-serif: 'Playfair Display', Georgia, serif;
  --v3-font-sans:  var(--font);

  --v3-radius-sm: var(--r-md);
  --v3-radius:    var(--r-lg);
  --v3-radius-lg: var(--r-xl);
  --v3-shadow:    var(--shadow-3);
  --v3-shadow-lg: var(--shadow-5);

  --v3-ease: var(--ease);
  --v3-d1: var(--t1);
  --v3-d2: var(--t2);
  --v3-d3: var(--t3);

  --v3-container: 1360px;
  --v3-section-y: clamp(56px, 9vw, 140px);
  --v3-section-y-tight: clamp(48px, 6vw, 96px);
  --v3-gap: clamp(16px, 2vw, 32px);
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.v3-section {
  padding-block: var(--v3-section-y);
  background: var(--v3-bg);
}

.v3-section--tight { padding-block: var(--v3-section-y-tight); }
.v3-section--surface { background: var(--v3-surface); }
.v3-section--ink { background: var(--ink); color: var(--white); }

.v3-container {
  width: 100%;
  max-width: var(--v3-container);
  margin-inline: auto;
  padding-inline: var(--pad-x-sm);
}

@media (min-width: 640px) {
  .v3-container { padding-inline: var(--pad-x-md); }
}

@media (min-width: 1280px) {
  .v3-container { padding-inline: var(--pad-x); }
}

.v3-bleed {
  width: 100%;
  max-width: none;
}

.v3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--v3-font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.v3-heading {
  font-family: var(--v3-font-serif);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--v3-text);
}

.v3-lede {
  font-family: var(--v3-font-sans);
  color: var(--v3-muted);
  font-size: var(--fs-md);
  line-height: 1.6;
  max-width: 56ch;
}

.v3-lede--on-dark { color: rgba(255,255,255,.78); max-width: 48ch; margin-inline: auto; }

.v3-section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: clamp(28px, 4vw, 56px);
}

.v3-section-head--row {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--v3-gap);
}

@media (max-width: 720px) {
  .v3-section-head--row { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Botones V3
   -------------------------------------------------------------------------- */
.v3-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  font-family: var(--v3-font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--v3-d2) var(--v3-ease), box-shadow var(--v3-d2) var(--v3-ease), background var(--v3-d2) var(--v3-ease), color var(--v3-d2) var(--v3-ease), border-color var(--v3-d2) var(--v3-ease);
}

.v3-btn__arrow {
  display: inline-flex;
  transition: transform var(--v3-d2) var(--v3-ease);
}

.v3-btn:hover .v3-btn__arrow { transform: translateX(4px); }

.v3-btn--primary {
  background: var(--ink);
  color: var(--white);
}
.v3-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--v3-shadow); }

.v3-btn--ghost {
  background: transparent;
  color: var(--v3-text);
  border-color: var(--v3-line);
}
.v3-btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }

.v3-btn--on-dark {
  background: var(--white);
  color: var(--ink);
}
.v3-btn--on-dark:hover { transform: translateY(-2px); box-shadow: var(--v3-shadow-lg); }

.v3-btn--outline-on-dark {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.4);
}
.v3-btn--outline-on-dark:hover { border-color: var(--white); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Motion primitives
   -------------------------------------------------------------------------- */
[data-v3-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--v3-d3) var(--v3-ease), transform var(--v3-d3) var(--v3-ease), filter var(--v3-d3) var(--v3-ease);
  will-change: opacity, transform;
}
[data-v3-reveal].is-in {
  opacity: 1;
  transform: none;
}

.v3-blur-text {
  display: inline-block;
}
.v3-blur-text .v3-blur-word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(14px);
  transition: opacity var(--v3-d3) var(--v3-ease), filter var(--v3-d3) var(--v3-ease), transform var(--v3-d3) var(--v3-ease);
}
.v3-blur-text.is-in .v3-blur-word {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.v3-textloop {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 10.5ch;
  min-height: 1.45em;
  padding-block: .1em;
  line-height: 1.1;
  overflow: visible;
  box-sizing: content-box;
  vertical-align: middle;
}
.v3-textloop__item {
  position: absolute;
  left: 0;
  top: 50%;
  white-space: nowrap;
  line-height: 1.1;
  opacity: 0;
  visibility: hidden;
  filter: blur(6px);
  transform: translateY(calc(-50% + 8px));
  transition: opacity var(--v3-d2) var(--v3-ease), filter var(--v3-d2) var(--v3-ease), transform var(--v3-d2) var(--v3-ease), visibility 0s linear var(--v3-d2);
  pointer-events: none;
}
.v3-textloop__item.is-active {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transform: translateY(-50%);
  transition-delay: 0s;
  pointer-events: auto;
}
.v3-textloop__item.is-leaving {
  opacity: 0;
  visibility: visible;
  filter: blur(8px);
  transform: translateY(calc(-50% - 6px));
  transition-delay: 0s;
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion — obligatorio (sección 32)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-v3-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .v3-blur-text .v3-blur-word {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  .v3-textloop__item {
    transition: none !important;
    filter: none !important;
    transform: translateY(-50%) !important;
  }
  [data-v3-scroll-expand] .v3-scroll-expand__media {
    transition: none !important;
  }
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (pointer: coarse) {
  [data-v3-chroma] .v3-chroma-card::after { display: none !important; }
}