/*
 * hero.css — Vanaheimr Digital landing page
 *
 * Bloque 1: estilos originales del hero (no modificar).
 * Bloque 2: componentes añadidos para i18n/contacto/legal.
 */

/* =====================================================
   BLOQUE 1 — HERO ORIGINAL (verbatim)
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600;1,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --ink: #1f1407;
  --ink-soft: #3a2710;
  --ink-mute: #4d3414;
  --parchment-1: #f1e3c2;
  --parchment-2: #e6d3a8;
  --parchment-3: #d4ba85;
  --parchment-4: #b59560;
  --parchment-5: #8a6a3a;
  --accent: #6b2a13;
  --accent-soft: #a04826;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --display: "Cinzel", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --inset: clamp(20px, 3.6vw, 80px);
  --fs-display: clamp(48px, 9.4vw, 132px);
  --fs-display-em: clamp(56px, 10.6vw, 152px);
  --fs-tagline: clamp(16px, 1.7vw, 30px);
  --fs-eyebrow: clamp(11px, 0.95vw, 18px);
  --fs-chrome: clamp(10px, 0.85vw, 14px);
  --fs-chrome-sub: clamp(9px, 0.75vw, 12px);
  --fs-ring-major: clamp(13px, 1.3vw, 22px);
  --fs-ring-glyph: clamp(15px, 1.6vw, 30px);
  --fs-ring-rune: clamp(14px, 1.4vw, 26px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #1a130a;
  font-family: var(--serif);
  color: var(--ink);
  overflow-x: hidden;
}

body {
  min-height: 100dvh;
  min-height: 100vh;
}

/* ============ STAGE ============ */
.stage {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 50% 55%,
      var(--parchment-1) 0%,
      var(--parchment-2) 35%,
      var(--parchment-3) 65%,
      var(--parchment-4) 92%,
      var(--parchment-5) 100%
    );
}

.stage::before {
  content: "";
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(circle at 18% 22%, rgba(80,50,18,.18) 0 2px,transparent 4px),
    radial-gradient(circle at 78% 14%, rgba(80,50,18,.14) 0 1.5px,transparent 3px),
    radial-gradient(circle at 62% 78%, rgba(60,35,10,.16) 0 2px,transparent 4px),
    radial-gradient(circle at 30% 86%, rgba(60,35,10,.12) 0 1.5px,transparent 3px),
    radial-gradient(circle at 92% 60%, rgba(60,35,10,.14) 0 1.8px,transparent 3px),
    radial-gradient(ellipse at 20% 18%, rgba(90,55,20,.18),transparent 28%),
    radial-gradient(ellipse at 85% 80%, rgba(90,55,20,.16),transparent 32%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(40,22,8,.35) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at center, rgba(60,35,10,.22) 0.7px,transparent 1.4px),
    linear-gradient(rgba(60,35,10,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(60,35,10,.06) 1px,transparent 1px);
  background-size: 28px 28px,112px 112px,112px 112px;
  mix-blend-mode: multiply;
  opacity: .55;
  pointer-events: none;
  z-index: 1;
}

/* ============ LAYOUT ============ */
.composition {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
}

/* ============ FRAME / CHROME ============ */
.frame-top, .frame-bot {
  position: relative;
  padding: var(--inset);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(12px,2vw,32px);
  z-index: 5;
}

.frame-baseline {
  position: absolute;
  left: var(--inset);
  right: var(--inset);
  top: calc(var(--inset) + clamp(18px,1.8vw,36px));
  height: 1px;
  background: linear-gradient(to right,transparent 0%,rgba(42,29,14,.6) 12%,rgba(42,29,14,.6) 88%,transparent 100%);
  animation: rule-in 1.4s .1s cubic-bezier(.16,1,.3,1) both;
  transform-origin: 50% 50%;
}
.frame-baseline.bottom {
  top: auto;
  bottom: calc(var(--inset) + clamp(18px,1.8vw,36px));
}

.frame-corner {
  font-family: var(--mono);
  font-size: var(--fs-chrome);
  letter-spacing: .35em;
  color: var(--ink-soft);
  text-transform: uppercase;
  line-height: 1.4;
  animation: chrome-in .9s .45s cubic-bezier(.16,1,.3,1) both;
}
.frame-corner:nth-child(2) { animation-delay: .55s; }
.frame-bot .frame-corner   { animation-delay: .65s; }
.frame-bot .frame-corner:nth-child(2) { animation-delay: .75s; }
.frame-corner.right { text-align: right; }
.frame-corner .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 10px 2px;
  vertical-align: middle;
}
.corner-sub {
  margin-top: 4px;
  font-size: var(--fs-chrome-sub);
  opacity: .78;
  letter-spacing: .28em;
}

.crosshair {
  position: absolute;
  width: clamp(14px,1.4vw,26px);
  height: clamp(14px,1.4vw,26px);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  animation: fade-in .7s .3s cubic-bezier(.16,1,.3,1) both;
}
.crosshair::before, .crosshair::after {
  content: "";
  position: absolute;
  background: rgba(42,29,14,.7);
}
.crosshair::before { left:50%; top:0; width:1px; height:100%; transform:translateX(-.5px); }
.crosshair::after  { top:50%; left:0; height:1px; width:100%; transform:translateY(-.5px); }
.crosshair.tl { top:calc(var(--inset) - 4px); left:calc(var(--inset) - 14px); }
.crosshair.tr { top:calc(var(--inset) - 4px); right:calc(var(--inset) - 14px); }
.crosshair.bl { bottom:calc(var(--inset) - 4px); left:calc(var(--inset) - 14px); }
.crosshair.br { bottom:calc(var(--inset) - 4px); right:calc(var(--inset) - 14px); }

/* ============ CENTER CANVAS ============ */
.center {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  z-index: 3;
}

.arc-marks {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: .55;
  z-index: 1;
  animation: fade-in 1s 0s ease-out both;
}

/* ---- RINGS ---- */
.rings {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: min(95vmin,1320px);
  height: min(95vmin,1320px);
  pointer-events: none;
  z-index: 2;
  animation: rings-in 1.6s .2s cubic-bezier(.16,1,.3,1) both;
}
.ring-svg {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
.ring-outer { animation: spin-slow   60s linear infinite; }
.ring-mid   { animation: spin-mid-rev 75s linear infinite; }
.ring-inner { animation: spin-fast   45s linear infinite; }

.ring-svg text {
  font-family: var(--mono);
  font-size: var(--fs-ring-major);
  letter-spacing: .32em;
  fill: var(--ink);
  text-transform: uppercase;
  font-weight: 500;
}
.ring-svg.glyphs text {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-ring-glyph);
  letter-spacing: .18em;
}
.ring-svg.runes text {
  font-family: var(--display);
  font-size: var(--fs-ring-rune);
  letter-spacing: .4em;
}

/* ---- FOCAL ---- */
.focal {
  position: relative;
  width: min(46vmin,560px);
  aspect-ratio: 7/9;
  z-index: 3;
  animation: focal-in 1.4s .5s cubic-bezier(.16,1,.3,1) both;
}
.focal svg { width:100%; height:100%; overflow:visible; display:block; }
.gear-inner     { animation: spin-slow    18s linear infinite; transform-origin:280px 470px; transform-box:fill-box; }
.gear-secondary { animation: spin-mid-rev 14s linear infinite; transform-origin:180px 639px; transform-box:fill-box; }
.gear-tertiary  { animation: spin-fast    10s linear infinite; transform-origin:380px 639px; transform-box:fill-box; }

.focal-dot, .focal-dot-ring {
  position: absolute;
  left:50%; top:50%;
  z-index:4;
  pointer-events:none;
}
.focal-dot {
  width:12px; height:12px;
  margin:-6px 0 0 -6px;
  border-radius:50%;
  background:var(--accent);
  opacity:0;
  animation-delay:1.1s,1.4s;
  animation-name:dot-in,pulse-core;
  animation-duration:.7s,2.4s;
  animation-iteration-count:1,infinite;
  animation-fill-mode:both,both;
}
.focal-dot-ring {
  width:42px; height:42px;
  margin:-21px 0 0 -21px;
  border-radius:50%;
  border:1px solid var(--accent);
  opacity:0;
  animation:ring-in 1.0s 1.0s cubic-bezier(.16,1,.3,1) both,pulse-ring 2.4s 1.4s ease-out infinite;
}

/* ============ PARALLAX ============ */
.parallax-layer { position:absolute; inset:0; z-index:3; pointer-events:none; }
.px-a { animation: drift-a 10s ease-in-out infinite; }
.px-b { animation: drift-b 10s ease-in-out infinite; }

.px-label {
  position: absolute;
  font-family: var(--mono);
  font-size: var(--fs-chrome-sub);
  letter-spacing: .38em;
  color: var(--ink-mute);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  animation: label-in .9s 1.4s ease-out both;
}
.px-label.r { animation-delay:1.55s; }
.px-label .num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px,1.7vw,30px);
  letter-spacing: .08em;
  color: var(--accent);
  margin-top: 4px;
  text-transform: none;
}
.px-label::before {
  content: "";
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--ink-mute);
  vertical-align: middle;
  margin-right: 12px;
  opacity: .7;
}

.annotation {
  position: absolute;
  font-family: var(--mono);
  font-size: var(--fs-chrome-sub);
  letter-spacing: .32em;
  color: var(--ink-mute);
  text-transform: uppercase;
  opacity: 0;
  animation: label-in .9s 1.6s ease-out both;
}
.annotation.r { animation-delay:1.75s; }
.annotation .ann-line {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(13px,1.3vw,22px);
  letter-spacing: .06em;
  color: var(--ink-soft);
  margin-top: 4px;
  text-transform: none;
}

/* ============ CHRONOMETER ============ */
.chrono-wrap {
  position: absolute;
  right: calc(var(--inset) + clamp(8px,1vw,24px));
  bottom: calc(var(--inset) + clamp(80px,8vw,130px));
  width: clamp(140px,13vw,260px);
  z-index: 4;
  animation: chrono-in 1.0s .9s cubic-bezier(.16,1,.3,1) both;
}
.chrono-wrap svg { width:100%; height:auto; overflow:visible; display:block; }
.chrono-hand    { transform-origin:130px 130px; transform-box:fill-box; animation:spin-slow 10s linear infinite; }
.chrono-subhand { transform-origin:130px 90px;  transform-box:fill-box; animation:spin-fast 5s linear infinite; }

.chrono-label {
  margin-top: 8px;
  text-align: center;
  font-family: var(--mono);
  font-size: var(--fs-chrome-sub);
  letter-spacing: .45em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

/* ============ HEADLINE ============ */
.headline {
  position: absolute;
  left: var(--inset);
  bottom: calc(var(--inset) + clamp(28px,3vw,56px));
  right: var(--inset);
  color: var(--ink);
  z-index: 4;
  text-align: center;
}
.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .6em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: clamp(12px,1.6vw,28px);
  opacity: 0;
  animation: eyebrow-in .9s .7s cubic-bezier(.16,1,.3,1) both;
}
.headline h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: .92;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.headline h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-display-em);
  letter-spacing: -.02em;
  color: var(--accent);
}
.tagline {
  margin-top: clamp(10px,1.5vw,28px);
  margin-left: auto;
  margin-right: auto;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-tagline);
  color: var(--ink-soft);
  max-width: 720px;
  line-height: 1.3;
  text-wrap: pretty;
}
.reveal-mask { display:inline-block; overflow:hidden; vertical-align:top; }
.reveal-line { display:inline-block; transform:translateY(110%); opacity:0; animation:line-in .9s cubic-bezier(.16,1,.3,1) forwards; }
#hl1  { animation-delay:.95s; }
#hl2  { animation-delay:1.15s; }
#hl3  { animation-delay:1.35s; }
#tag1 { animation-delay:1.7s;  animation-duration:.8s; }
#tag2 { animation-delay:1.85s; animation-duration:.8s; }

/* ============ KEYFRAMES ============ */
@keyframes spin-slow    { from { rotate:0deg; }   to { rotate:360deg; } }
@keyframes spin-mid-rev { from { rotate:0deg; }   to { rotate:-360deg; } }
@keyframes spin-fast    { from { rotate:0deg; }   to { rotate:360deg; } }
@keyframes fade-in      { from { opacity:0; }     to { opacity:1; } }
@keyframes rule-in      { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes chrome-in    { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes rings-in     { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }
@keyframes focal-in     { from { opacity:0; transform:translateY(16px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes dot-in       { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:scale(1); } }
@keyframes ring-in      { from { opacity:0; transform:scale(.4); } to { opacity:.7; transform:scale(1); } }
@keyframes pulse-core   { 0%,60%,100% { transform:scale(1); opacity:1; } 30% { transform:scale(1.25); opacity:.85; } }
@keyframes pulse-ring   { 0% { transform:scale(1); opacity:.7; } 70%,100% { transform:scale(1.8); opacity:0; } }
@keyframes chrono-in    { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes eyebrow-in   { from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:translateX(0); } }
@keyframes line-in      { to { transform:translateY(0); opacity:1; } }
@keyframes label-in     { from { opacity:0; transform:translateY(8px); } to { opacity:.95; transform:translateY(0); } }
@keyframes drift-a      { 0%,100% { transform:translateX(0); } 50% { transform:translateX(-18px); } }
@keyframes drift-b      { 0%,100% { transform:translateX(0); } 50% { transform:translateX(14px); } }

/* ============ TABLET ============ */
@media (max-width:1023px) {
  :root {
    --fs-display:    clamp(44px,9vw,86px);
    --fs-display-em: clamp(52px,10.4vw,100px);
    --fs-tagline:    clamp(15px,2.2vw,22px);
    --fs-eyebrow:    clamp(10px,1.3vw,14px);
  }
  .focal { width:min(55vmin,480px); }
  .chrono-wrap { width:clamp(120px,16vw,180px); }
  .px-label { font-size:10px; letter-spacing:.32em; }
  .px-label .num { font-size:18px; }
}

/* ============ MOBILE ============ */
@media (max-width:720px) {
  :root {
    --inset:         clamp(16px,5vw,28px);
    --fs-display:    clamp(40px,11vw,64px);
    --fs-display-em: clamp(46px,13vw,76px);
    --fs-tagline:    clamp(14px,4.2vw,18px);
    --fs-eyebrow:    10px;
    --fs-chrome:     10px;
    --fs-chrome-sub: 9px;
  }
  .stage { min-height:100dvh; }
  .composition { grid-template-rows: auto 1fr auto; }
  .frame-baseline { top:calc(var(--inset) + 28px); }
  .frame-baseline.bottom { bottom:calc(var(--inset) + 28px); }
  .frame-corner .corner-sub { display:none; }
  .center {
    padding-top:    clamp(40px,8vh,60px);
    padding-bottom: clamp(220px,28vh,320px);
    align-content:  start;
  }
  .focal { width:min(68vmin,360px); margin-top:clamp(20px,4vh,40px); }
  .rings { width:min(96vmin,520px); height:min(96vmin,520px); top:36%; }
  .arc-marks { opacity:.35; }
  .parallax-layer { display:none; }
  .chrono-wrap { right:var(--inset); bottom:calc(var(--inset) + clamp(200px,32vh,320px)); width:88px; }
  .chrono-label { font-size:8px; letter-spacing:.35em; }
  .headline { left:var(--inset); right:var(--inset); bottom:calc(var(--inset) + 36px); }
  .headline h1 { line-height:.96; }
  .tagline { font-size:var(--fs-tagline); max-width:none; }
  .frame-top, .frame-bot { padding:var(--inset); }
  .crosshair { width:12px; height:12px; }
  .crosshair.tl { top:calc(var(--inset) - 4px);    left:calc(var(--inset) - 8px); }
  .crosshair.tr { top:calc(var(--inset) - 4px);    right:calc(var(--inset) - 8px); }
  .crosshair.bl { bottom:calc(var(--inset) - 4px); left:calc(var(--inset) - 8px); }
  .crosshair.br { bottom:calc(var(--inset) - 4px); right:calc(var(--inset) - 8px); }
}

/* ============ EXTRA NARROW ============ */
@media (max-width:380px) {
  :root {
    --fs-display:    clamp(34px,11.5vw,48px);
    --fs-display-em: clamp(40px,13.5vw,58px);
  }
  .focal { width:min(74vmin,280px); }
  .chrono-wrap { display:none; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
  }
  .ring-outer,.ring-mid,.ring-inner,
  .gear-inner,.gear-secondary,.gear-tertiary,
  .chrono-hand,.chrono-subhand,
  .focal-dot,.focal-dot-ring { animation:none !important; }
}

/* =====================================================
   BLOQUE 2 — COMPONENTES AÑADIDOS
   ===================================================== */

/* ---- Grupo CTA central (botón Contacto + toggle idioma) ---- */
.chrome-cta-group {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  flex-shrink:     0;
  animation:       chrome-in .9s .7s cubic-bezier(.16,1,.3,1) both;
}

.btn-contact {
  font-family:    var(--mono);
  font-size:      var(--fs-chrome);
  letter-spacing: .35em;
  text-transform: uppercase;
  color:          var(--parchment-1);
  background:     var(--ink);
  border:         1px solid var(--ink);
  padding:        .45em 1.4em;
  cursor:         pointer;
  transition:     background 200ms ease, border-color 200ms ease;
  white-space:    nowrap;
}
.btn-contact:hover,
.btn-contact:focus-visible {
  background:   var(--accent);
  border-color: var(--accent);
  outline:      none;
}

/* ---- Toggle de idioma ---- */
.lang-toggle {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-family: var(--mono);
  font-size:   var(--fs-chrome-sub);
  letter-spacing: .28em;
}
.lang-opt {
  color:           var(--ink-mute);
  text-decoration: none;
  text-transform:  uppercase;
  transition:      color 150ms ease;
}
.lang-opt:hover         { color: var(--ink-soft); }
.lang-opt.active,
.lang-opt[aria-current] { color: var(--accent); }
.lang-sep { color:var(--ink-mute); opacity:.5; }

/* ---- Fila de enlaces legales (dentro del frame-corner izquierdo) ---- */
.corner-legal {
  margin-top: 6px;
  display:    flex;
  flex-wrap:  wrap;
  gap:        0 6px;
  font-size:  var(--fs-chrome-sub);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.corner-legal a {
  color:           var(--ink-mute);
  text-decoration: none;
  opacity:         .8;
  transition:      color 150ms ease, opacity 150ms ease;
}
.corner-legal a:hover { color:var(--accent); opacity:1; }
.corner-legal .sep    { color:var(--ink-mute); opacity:.5; }

/* ---- Banner de cookies (placeholder; estilo completo en UJ-03) ---- */
.cookie-banner {
  position:    fixed;
  bottom:      0;
  left:        0;
  right:       0;
  z-index:     500;
  background:  var(--parchment-1);
  border-top:  1px solid rgba(42,29,14,.4);
  padding:     .75rem var(--inset);
  display:     flex;
  align-items: center;
  gap:         1rem;
  font-family: var(--mono);
  font-size:   var(--fs-chrome-sub);
  letter-spacing: .18em;
  color:       var(--ink-mute);
  text-transform: uppercase;
  flex-wrap:   wrap;
  animation:   chrome-in .5s .2s cubic-bezier(.16,1,.3,1) both;
}
.cookie-banner[hidden] { display:none; }
.cookie-banner p  { flex:1; min-width:200px; }
.cookie-banner .cookie-btns { display:flex; gap:.5rem; flex-shrink:0; }
.cookie-btn {
  font-family:    var(--mono);
  font-size:      var(--fs-chrome-sub);
  letter-spacing: .22em;
  text-transform: uppercase;
  padding:        .35em .9em;
  border:         1px solid var(--ink-mute);
  background:     transparent;
  color:          var(--ink-soft);
  cursor:         pointer;
  transition:     background 150ms ease, color 150ms ease;
}
.cookie-btn:hover { background:var(--ink); color:var(--parchment-1); border-color:var(--ink); }
.cookie-btn.primary { background:var(--ink); color:var(--parchment-1); border-color:var(--ink); }
.cookie-btn.primary:hover { background:var(--accent); border-color:var(--accent); }

/* ---- Modal de contacto (placeholder; estilo completo en UJ-02) ---- */
.modal-overlay {
  position:    fixed;
  inset:       0;
  z-index:     300;
  background:  rgba(26,19,10,.7);
  display:     flex;
  align-items: center;
  justify-content: center;
  padding:     var(--inset);
  backdrop-filter: blur(2px);
}
.modal-overlay[hidden] { display:none; }
.modal-panel {
  background: var(--parchment-1);
  border:     1px solid rgba(42,29,14,.5);
  width:      100%;
  max-width:  520px;
  max-height: 90dvh;
  overflow-y: auto;
  padding:    2rem;
  position:   relative;
}
.modal-close {
  position:   absolute;
  top:        .75rem;
  right:      .75rem;
  font-family: var(--mono);
  font-size:  var(--fs-chrome-sub);
  letter-spacing: .2em;
  color:      var(--ink-mute);
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    .25rem;
}
.modal-close:hover { color:var(--accent); }

/* ---- Formulario de contacto (dentro del modal) ---- */

.contact-title {
  font-family:   var(--display);
  font-size:     clamp(18px, 2vw, 26px);
  font-weight:   600;
  color:         var(--ink);
  margin-bottom: .5rem;
}
.contact-intro {
  font-family:   var(--serif);
  font-style:    italic;
  font-size:     clamp(13px, 1.3vw, 16px);
  color:         var(--ink-soft);
  margin-bottom: 1.25rem;
  line-height:   1.4;
}

/* Honeypot — fuera del flujo visual pero NO display:none */
.cf-hp {
  position:   absolute;
  left:       -9999px;
  top:        -9999px;
  width:      1px;
  height:     1px;
  overflow:   hidden;
  opacity:    0;
  tabindex:   -1;
}

.cf-field {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  margin-bottom:  1rem;
}
.cf-field label {
  font-family:    var(--mono);
  font-size:      clamp(9px, .75vw, 11px);
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--ink-mute);
}
.cf-field input,
.cf-field textarea {
  font-family:  var(--serif);
  font-size:    clamp(14px, 1.2vw, 16px);
  color:        var(--ink);
  background:   var(--parchment-1);
  border:       1px solid rgba(42,29,14,.5);
  padding:      .5rem .65rem;
  width:        100%;
  resize:       vertical;
  transition:   border-color 150ms ease;
}
.cf-field input:focus,
.cf-field textarea:focus {
  outline:      none;
  border-color: var(--accent);
}
.cf-field input[aria-invalid="true"],
.cf-field textarea[aria-invalid="true"] {
  border-color: var(--accent);
}
.cf-field textarea { min-height: 100px; }

/* Checkbox consent */
.cf-field-check { gap: 6px; }
.cf-check-label {
  display:     flex;
  gap:         .6rem;
  align-items: flex-start;
  cursor:      pointer;
  font-family: var(--serif);
  font-size:   clamp(11px, 1vw, 13px);
  color:       var(--ink-soft);
  line-height: 1.45;
}
.cf-check-label input[type="checkbox"] {
  width:      14px;
  height:     14px;
  flex-shrink: 0;
  margin-top:  2px;
  accent-color: var(--accent);
  cursor:      pointer;
}
.cf-check-label a { color:var(--accent); }

/* Mensajes de error por campo */
.cf-error {
  font-family: var(--mono);
  font-size:   clamp(8px, .7vw, 10px);
  letter-spacing: .08em;
  color:       var(--accent);
  min-height:  1em;
}

/* Botón submit */
.cf-submit {
  width:          100%;
  margin-top:     .5rem;
  font-family:    var(--mono);
  font-size:      clamp(10px, .85vw, 13px);
  letter-spacing: .35em;
  text-transform: uppercase;
  color:          var(--parchment-1);
  background:     var(--ink);
  border:         1px solid var(--ink);
  padding:        .7em 1.4em;
  cursor:         pointer;
  transition:     background 180ms ease, border-color 180ms ease;
}
.cf-submit:hover:not(:disabled) { background:var(--accent); border-color:var(--accent); }
.cf-submit:disabled { opacity:.55; cursor:not-allowed; }

/* Estados del modal */
#cf-state-sending[hidden],
#cf-state-success[hidden],
#cf-state-error[hidden],
#cf-state-idle[hidden]   { display: none !important; }

#cf-state-sending,
#cf-state-success,
#cf-state-error {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  min-height:      200px;
  gap:             .75rem;
  padding:         1rem 0;
}
.cf-spinner {
  width:  36px; height: 36px;
  border: 2px solid rgba(31,20,7,.15);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin-fast 1s linear infinite;
}
.cf-state-icon {
  font-size: 2rem;
  line-height: 1;
}
.cf-ok      { color: #3d5a2e; }
.cf-err-icon{ color: var(--accent); }
.cf-state-title {
  font-family: var(--display);
  font-size:   clamp(16px, 1.6vw, 22px);
  font-weight: 600;
  color:       var(--ink);
}
.cf-state-msg {
  font-family: var(--serif);
  font-style:  italic;
  font-size:   clamp(13px, 1.2vw, 15px);
  color:       var(--ink-soft);
  max-width:   360px;
  line-height: 1.5;
}
.cf-retry {
  font-family:    var(--mono);
  font-size:      clamp(9px, .8vw, 11px);
  letter-spacing: .28em;
  text-transform: uppercase;
  color:          var(--ink);
  background:     transparent;
  border:         1px solid rgba(42,29,14,.5);
  padding:        .45em 1.2em;
  cursor:         pointer;
  margin-top:     .5rem;
  transition:     border-color 150ms ease, color 150ms ease;
}
.cf-retry:hover { border-color:var(--accent); color:var(--accent); }

/* ---- Mobile overrides para los componentes nuevos ---- */
@media (max-width:720px) {
  .frame-bot { flex-wrap:wrap; gap:8px; }
  .chrome-cta-group { flex-direction:row; gap:12px; order:3; width:100%; justify-content:center; }
  .frame-bot .frame-corner.right { display:none; }
  .corner-legal { display:none; } /* simplificar en mobile */
}

@media (max-width:380px) {
  .btn-contact { padding:.4em 1em; }
}