/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ground:#E7EDEC; --ground-2:#DBE4E3; --ink:#0A1D23; --ink-soft:#4B6069;
  --line:#9FBABD; --accent:#9E5327; --accent-ink:#FFFFFF;
  --rule:rgba(10,29,35,.14); --veil:rgba(231,237,236,.66);
  --field-embed:rgba(10,29,35,.055);
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#07171D; --ground-2:#0B242C; --ink:#E4EDEE; --ink-soft:#8AA4AC;
    --line:#17414C; --accent:#D08A56; --accent-ink:#07171D;
    --rule:rgba(228,237,238,.17); --veil:rgba(7,23,29,.60);
    --field-embed:rgba(255,255,255,.07);
  }
}
:root[data-theme="light"]{
  --ground:#E7EDEC; --ground-2:#DBE4E3; --ink:#0A1D23; --ink-soft:#4B6069;
  --line:#9FBABD; --accent:#9E5327; --accent-ink:#FFFFFF;
  --rule:rgba(10,29,35,.14); --veil:rgba(231,237,236,.66);
  --field-embed:rgba(10,29,35,.055);
}
:root[data-theme="dark"]{
  --ground:#07171D; --ground-2:#0B242C; --ink:#E4EDEE; --ink-soft:#8AA4AC;
  --line:#17414C; --accent:#D08A56; --accent-ink:#07171D;
  --rule:rgba(228,237,238,.17); --veil:rgba(7,23,29,.60);
  --field-embed:rgba(255,255,255,.07);
}
/* Con video el texto va siempre claro: el metraje no sigue el tema del visitante. */
:root.has-video{
  --ink:#F2F6F6; --ink-soft:#C6D4D7; --accent:#E8A06A; --accent-ink:#06151A;
  --rule:rgba(242,246,246,.30);
  --field-embed:rgba(255,255,255,.10);
}

/* Panel modal: superficie propia, sigue el tema del visitante
   aunque haya video detras. */
:root{
  --panel-bg:#FFFFFF; --panel-ink:#0A1D23; --panel-soft:#54696F;
  --panel-rule:rgba(10,29,35,.18); --panel-field:#F4F7F6;
}
@media (prefers-color-scheme: dark){
  :root{
    --panel-bg:#0C242C; --panel-ink:#E7EFF0; --panel-soft:#9AB2B8;
    --panel-rule:rgba(231,239,240,.22); --panel-field:#0F2D36;
  }
}
:root[data-theme="light"]{
  --panel-bg:#FFFFFF; --panel-ink:#0A1D23; --panel-soft:#54696F;
  --panel-rule:rgba(10,29,35,.18); --panel-field:#F4F7F6;
}
:root[data-theme="dark"]{
  --panel-bg:#0C242C; --panel-ink:#E7EFF0; --panel-soft:#9AB2B8;
  --panel-rule:rgba(231,239,240,.22); --panel-field:#0F2D36;
}

:root{
  --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100svh; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.55;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}

/* ============================================================
   ESCENARIO
   ============================================================ */
.stage{position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--ground)}
#field{position:absolute; inset:0; width:100%; height:100%; display:block}
#bg{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity 1.2s ease}
#bg.ready{opacity:1}

.veil{position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, var(--ground) 1%, var(--veil) 44%, transparent 86%),
    radial-gradient(120% 90% at 8% 92%, var(--veil) 0%, transparent 62%);
}
.has-video .veil{
  background:
    linear-gradient(to top, rgba(4,14,18,.95) 0%, rgba(4,14,18,.76) 32%, rgba(4,14,18,.42) 68%, rgba(4,14,18,.58) 100%),
    radial-gradient(115% 85% at 10% 95%, rgba(4,14,18,.74) 0%, transparent 60%);
}

.shell{
  position:relative; z-index:2; min-height:100svh;
  display:flex; flex-direction:column;
  padding:clamp(1.35rem,4vw,2.75rem);
  gap:clamp(1.8rem,5vh,3.2rem);
}

/* ============================================================
   MARCA + IDIOMA
   ============================================================ */
.brand{display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap}
.brand__mark{
  font-family:var(--mono); font-size:clamp(.68rem,1.6vw,.78rem);
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink); font-weight:600;
}
.brand__rule{flex:1 1 3rem; height:1px; background:var(--rule); min-width:2rem}
.brand__place{
  font-family:var(--mono); font-size:clamp(.62rem,1.4vw,.7rem);
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.lang{
  display:flex; align-items:baseline; gap:.55rem;
  font-family:var(--mono); font-size:clamp(.62rem,1.4vw,.7rem);
  letter-spacing:.18em; text-transform:uppercase;
}
.lang span[aria-current]{color:var(--ink); font-weight:600}
.lang a{color:var(--ink-soft); text-decoration:none; transition:color .2s ease}
.lang a:hover, .lang a:focus-visible{color:var(--accent)}
.lang a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.lang__sep{color:var(--ink-soft); opacity:.5}

/* ============================================================
   DOS COLUMNAS
   ============================================================ */
.split{
  /* Anclado abajo, pero elevado: deja aire bajo el bloque para que no
     quede pegado al pie y se reduce el vacio de la parte superior. */
  margin-top:auto;
  margin-bottom:clamp(1.5rem,6vh,4.5rem);
  display:grid; grid-template-columns:1fr;
  gap:clamp(1.8rem,4vw,3.5rem);
  align-items:end;
}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
}

main{display:flex; flex-direction:column; gap:clamp(1.1rem,2.6vh,1.8rem); max-width:38rem}

h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,5.4vw,3.65rem);
  line-height:1.07; letter-spacing:-.015em;
  text-wrap:balance; margin:0; max-width:19ch;
}
h1 em{font-style:italic; color:var(--accent)}

.lede{
  font-size:clamp(1rem,2.1vw,1.14rem); line-height:1.6;
  color:var(--ink-soft); max-width:44ch; margin:0; text-wrap:pretty;
}

/* ============================================================
   BOTONES DE CONTACTO
   ============================================================ */
.contact{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.35rem}
.contact a, .contact button{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.82rem 1.25rem; border:1px solid var(--rule);
  color:var(--ink); text-decoration:none; background:transparent;
  font-family:var(--mono); font-size:clamp(.78rem,1.9vw,.88rem);
  letter-spacing:.02em; cursor:pointer;
  transition:background .22s ease, border-color .22s ease, color .22s ease;
}
.contact button{border-color:var(--accent); background:var(--accent); color:var(--accent-ink); font-size:clamp(.78rem,1.9vw,.88rem)}
.contact a:hover, .contact a:focus-visible,
.contact button:hover, .contact button:focus-visible{
  border-color:var(--accent); color:var(--accent); background:transparent;
}
.contact a:focus-visible, .contact button:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.contact svg{width:1em; height:1em; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.contact button[hidden]{display:none}

/* ============================================================
   FORMULARIO — comun
   ============================================================ */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
.grid .full{grid-column:1 / -1}
.field{display:flex; flex-direction:column; gap:.32rem}
.field label{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase;
}
.field input, .field textarea{
  font:inherit; font-size:.95rem; padding:.66rem .75rem;
  border-radius:0; border:1px solid;
  transition:border-color .18s ease, background .18s ease;
}
.field textarea{resize:vertical; min-height:5.5rem}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--accent)}

.panel__send{
  font:inherit; cursor:pointer; padding:.8rem 1.4rem; align-self:flex-start;
  background:var(--accent); color:#FFF; border:1px solid var(--accent);
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  transition:opacity .2s ease;
}
.panel__send:hover{opacity:.88}
.panel__send:disabled{opacity:.5; cursor:default}
.panel__send:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.panel__status{font-size:.9rem; line-height:1.5; margin:0; padding:.65rem .8rem;
  border-left:2px solid var(--accent)}
.panel__status[hidden]{display:none}

form{display:flex; flex-direction:column; gap:.9rem}

/* ============================================================
   PANEL MODAL (celular) — estado por defecto
   ============================================================ */
#contacto{
  border:none; padding:0; max-width:min(34rem,calc(100vw - 2rem)); width:100%;
  background:var(--panel-bg); color:var(--panel-ink);
  box-shadow:0 24px 70px rgba(0,0,0,.42);
}
#contacto::backdrop{background:rgba(4,14,18,.72)}
.panel{padding:clamp(1.4rem,5vw,1.9rem); display:flex; flex-direction:column; gap:1rem}
.panel__head{display:flex; justify-content:flex-end; margin-bottom:-.6rem}
.panel__close{
  font:inherit; cursor:pointer; background:none; border:none;
  color:var(--panel-soft); font-size:1.5rem; line-height:1; padding:.15rem .4rem;
}
.panel__close:hover, .panel__close:focus-visible{color:var(--accent)}
.panel .field label{color:var(--panel-soft)}
.panel .field input, .panel .field textarea{
  background:var(--panel-field); border-color:var(--panel-rule); color:var(--panel-ink);
}
.panel .panel__status{background:var(--panel-field); color:var(--panel-ink)}
.panel__note{font-size:.82rem; line-height:1.5; color:var(--panel-soft); margin:0}
.panel__note a{color:var(--panel-ink)}
.form-title{display:none}

/* ============================================================
   MISMO PANEL, EMBEBIDO EN LA COLUMNA (escritorio)
   El formulario no se mueve nunca: solo cambia como se muestra.
   Si el JavaScript fallara, queda el panel modal y todo sigue usable.
   ============================================================ */
@media (min-width:900px){
  #contacto[open]{
    position:static; display:block;
    width:auto; max-width:none; margin:0; padding:0;
    background:transparent; color:var(--ink);
    box-shadow:none; border:none;
  }
  #contacto::backdrop{background:transparent}

  .panel{padding:0; gap:.9rem}
  .panel__head{display:none}
  .panel__note{display:none}
  #abrir-contacto{display:none}

  .form-title{
    display:flex; align-items:center; gap:.7rem; margin:0 0 .2rem;
    font-family:var(--mono); font-size:.62rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--accent);
  }
  .form-title::before{
    content:""; width:1.9rem; height:1px; background:var(--accent); flex:none;
  }

  .panel .field label{color:var(--ink-soft)}
  .panel .field input,
  .panel .field textarea{
    background:var(--field-embed); border-color:var(--rule); color:var(--ink);
  }
  .panel .field input::placeholder,
  .panel .field textarea::placeholder{color:var(--ink-soft); opacity:.65}
  .panel .panel__status{background:var(--field-embed); color:var(--ink)}
}

/* ============================================================
   PIE
   ============================================================ */
footer{
  border-top:1px solid var(--rule); padding-top:1.05rem;
  display:flex; flex-direction:column;
}
.areas{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem 1.4rem}
.copyright{
  /* Linea de registro: centrada, discreta y al pie de todo.
     Cierra la pagina sin competir con las materias. */
  margin:clamp(.9rem,2vh,1.3rem) 0 0;
  padding-top:clamp(.7rem,1.5vh,.95rem);
  border-top:1px solid var(--rule);
  text-align:center;
  /* Se conserva la monoespaciada del resto de las etiquetas, pero sin aire
     entre letras: en una frase larga ese espaciado estiraba la linea. */
  font-family:var(--mono); font-size:clamp(.56rem,1.15vw,.63rem);
  letter-spacing:-.02em; color:var(--ink-soft); opacity:.72;
}
.areas li{
  font-family:var(--mono); font-size:clamp(.72rem,1.7vw,.84rem);
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink); font-weight:600;
  display:flex; align-items:center; gap:.6rem;
}
.areas li + li::before{
  content:""; width:3px; height:3px; border-radius:50%;
  background:var(--accent); flex:none; margin-left:-.9rem;
}

@media (max-width:640px){
  .contact a, .contact button{width:100%; justify-content:flex-start}
  .areas{gap:.3rem 1.1rem}
  .brand{gap:.6rem}
  .brand__rule{flex-basis:1rem}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}