/* =========================================================
   6PASOS — Demo visual
   Concepto: "tinta sobre noche" (sumi-e). Monocromático.
   Color sólo en las fotos, y sólo al interactuar.
   Tipos: Jost (display, geométrica como el logo) ·
          Manrope (texto) · Space Mono (data / ticket)
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --ink:       #0C0C0E;   /* negro tinta (fondo) */
  --ink-2:     #111113;   /* sección alterna */
  --surface:   #151517;   /* card / input */
  --surface-2: #1C1C20;   /* hover */
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.20);

  --paper:     #F4F1EA;   /* blanco papel (botones / marca) */
  --text:      #ECEAE3;   /* texto principal (tinta clara) */
  --heading:   #FBF9F3;   /* títulos */
  --muted:     #9A9790;   /* gris cálido */
  --muted-2:   #6C6A65;

  /* Acento opcional (sello hanko). Desactivado por defecto. */
  --seal:      #C24A3F;

  --radius:    18px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --ease: cubic-bezier(.22,.7,.2,1);
  --shadow: 0 26px 60px -30px rgba(0,0,0,.9);
  --shadow-soft: 0 16px 46px -26px rgba(255,255,255,.16);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ scroll-behavior:smooth; scroll-padding-top:74px; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:var(--ink);
  color:var(--text);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--paper); outline-offset:3px; border-radius:4px; }

/* ---------- Helpers ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

.eyebrow{
  font-family:"Space Mono", monospace;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin-bottom:16px;
}

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--paper); color:#111; padding:10px 16px; border-radius:10px;
  font-weight:700; transition:top .2s var(--ease);
}
.skip-link:focus{ top:16px; }

/* Reveal (sólo con JS, para no esconder contenido si falla) */
.reveal{ opacity:1; }
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   MARCA (六 + 6PASOS)
   ========================================================= */
.brand{ display:inline-flex; align-items:center; gap:13px; color:var(--heading); }
.brand__mark{ width:30px; height:30px; flex:none; color:currentColor; }
.brand__name{
  font-family:"Jost", sans-serif; font-weight:500;
  font-size:1.18rem; letter-spacing:.22em; line-height:1;
  padding-left:.05em;
}

/* =========================================================
   BOTONES
   ========================================================= */
.btn{
  --pad-y:14px; --pad-x:26px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:var(--pad-y) var(--pad-x);
  border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:.95rem; letter-spacing:.02em;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .2s var(--ease);
  white-space:nowrap;
}
.btn--primary{ background:var(--paper); color:#161616; box-shadow:var(--shadow-soft); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 22px 50px -20px rgba(255,255,255,.3); }
.btn--ghost{ border-color:var(--line-2); color:var(--text); background:rgba(255,255,255,.02); }
.btn--ghost:hover{ border-color:var(--paper); color:var(--heading); transform:translateY(-2px); background:rgba(255,255,255,.05); }
.btn--sm{ --pad-y:10px; --pad-x:18px; font-size:.85rem; }
.btn--block{ width:100%; }
.btn--mini{
  --pad-y:8px; --pad-x:16px; font-size:.8rem; font-weight:600;
  background:transparent; border-color:var(--line-2); color:var(--text);
}
.btn--mini:hover{ background:var(--paper); border-color:var(--paper); color:#161616; }
.btn--disabled{ opacity:.4; pointer-events:none; }

.link-arrow{ font-weight:600; font-size:.9rem; color:var(--text); transition:color .2s var(--ease), letter-spacing .2s var(--ease); }
.link-arrow:hover{ color:var(--heading); letter-spacing:.02em; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(12,12,14,.8);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--maxw); margin-inline:auto; padding:18px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:padding .3s var(--ease);
}
.nav.scrolled .nav__inner{ padding-block:13px; }

.nav__links{ display:none; gap:36px; }
.nav__links a{
  font-size:.92rem; font-weight:500; color:var(--muted); position:relative; padding:4px 0;
  letter-spacing:.02em; transition:color .2s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
  background:var(--paper); transition:width .28s var(--ease);
}
.nav__links a:hover{ color:var(--heading); }
.nav__links a:hover::after{ width:100%; }

.nav__actions{ display:flex; align-items:center; gap:12px; }
.nav__actions .btn--ghost{ display:none; }

.nav__toggle{
  width:44px; height:44px; display:grid; place-content:center; gap:5px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:12px;
}
.nav__toggle span{ display:block; width:20px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s var(--ease), opacity .2s var(--ease); }
.nav.open .nav__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.open .nav__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:flex; flex-direction:column; gap:4px;
  padding:8px var(--gutter) 22px;
  background:rgba(12,12,14,.97);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu a{ padding:14px 6px; font-weight:500; border-bottom:1px solid var(--line); color:var(--text); }
.mobile-menu a:last-child{ border-bottom:0; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:140px 0 0;
}
.hero__inner{
  position:relative; z-index:3;
  max-width:var(--maxw); width:100%; margin-inline:auto; padding-inline:var(--gutter);
  flex:1; display:flex; flex-direction:column; justify-content:center;
}

.hero__lights{ position:absolute; inset:0; z-index:1; overflow:hidden; }

/* Video de fondo del hero: monocromo, apenas difuso, se distingue el artista.
   (Para verlo a color, sacá grayscale(1) de la línea filter.) */
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 40%;
  filter:brightness(.95) contrast(1.08) blur(2px);
  transform:scale(1.03);
  opacity:0; transition:opacity 1.4s var(--ease);
  pointer-events:none;
}
.hero__video.is-ready{ opacity:.92; }

/* Velo oscuro: fuerte del lado del título, suave del lado de la imagen */
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(12,12,14,.95) 0%, rgba(12,12,14,.88) 26%, rgba(12,12,14,.55) 52%, rgba(12,12,14,.28) 100%),
    linear-gradient(180deg, rgba(12,12,14,.85) 0%, rgba(12,12,14,.10) 26%, rgba(12,12,14,.18) 62%, rgba(12,12,14,.92) 100%);
}
@media (max-width:860px){
  /* En celular el texto ocupa todo el ancho: oscurecemos parejo */
  .hero__scrim{
    background:linear-gradient(180deg, rgba(12,12,14,.92) 0%, rgba(12,12,14,.68) 34%, rgba(12,12,14,.72) 64%, rgba(12,12,14,.96) 100%);
  }
}
.hero__spot{
  position:absolute; left:50%; top:-26%; width:120vw; height:90%;
  transform:translateX(-50%);
  background:radial-gradient(60% 60% at 50% 0%, rgba(255,255,255,.10), transparent 70%);
}
.hero__glow{
  position:absolute; left:50%; top:42%; width:min(820px,92vw); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,255,255,.05), transparent 62%);
}
.hero__kanji{
  position:absolute; right:clamp(-40px,2vw,40px); top:50%; transform:translateY(-50%);
  width:min(58vw,560px); height:auto; color:#fff; opacity:.035; z-index:0;
  pointer-events:none;
}

/* Grano + viñeta */
.hero__grain{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.45;
  background:
    radial-gradient(125% 85% at 50% 0%, transparent 52%, rgba(12,12,14,.92) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:auto, 160px 160px;
  mix-blend-mode:soft-light;
}

.hero__title{
  font-family:"Jost", sans-serif; font-weight:600;
  font-size:clamp(2.4rem, 8.6vw, 7.6rem);
  line-height:1; letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--heading);
  margin:0 0 26px;
  text-wrap:balance;
  overflow-wrap:break-word;
}
.hero__lead{
  max-width:50ch; font-size:clamp(1.02rem,1.4vw,1.18rem);
  color:var(--muted); margin-bottom:34px;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }

/* Ticker */
.ticker{
  position:relative; z-index:3; margin-top:auto;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:16px 0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track{
  display:flex; align-items:center; gap:26px; width:max-content;
  animation:marquee 36s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{
  font-family:"Space Mono", monospace; font-size:.84rem; letter-spacing:.06em;
  color:var(--text); white-space:nowrap; text-transform:uppercase;
}
.ticker__sep{ color:var(--muted-2); font-size:.7rem; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none; } }

/* =========================================================
   SECCIONES
   ========================================================= */
.section{ padding-top:clamp(28px, 4vw, 48px); padding-bottom:clamp(64px, 9vw, 112px); }
.section--alt{ background:var(--ink-2); border-block:1px solid var(--line); }

.section__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:48px;
}
.section__title{
  font-family:"Jost", sans-serif; font-weight:600;
  font-size:clamp(1.8rem, 4.4vw, 3rem); line-height:1.08; letter-spacing:-.015em;
  color:var(--heading); text-wrap:balance;
}
.section__link{ font-family:"Space Mono", monospace; font-size:.8rem; color:var(--muted); white-space:nowrap; transition:color .2s var(--ease); }
.section__link:hover{ color:var(--heading); }

.meta{
  font-family:"Space Mono", monospace; font-size:.78rem; letter-spacing:.05em;
  color:var(--muted); text-transform:uppercase; margin-bottom:12px;
}

/* ---------- Ticket stub (fecha) ---------- */
.stub{
  position:absolute; top:14px; left:14px; z-index:2;
  display:inline-grid; justify-items:center; line-height:1;
  background:rgba(12,12,14,.66); backdrop-filter:blur(6px);
  border:1px solid var(--line-2); border-radius:12px;
  padding:9px 12px;
}
.stub::before, .stub::after{
  content:""; position:absolute; width:9px; height:9px; border-radius:50%;
  background:var(--ink); top:50%; transform:translateY(-50%);
}
.stub::before{ left:-5px; } .stub::after{ right:-5px; }
.stub__day{ font-family:"Jost",sans-serif; font-weight:600; font-size:1.35rem; color:var(--heading); }
.stub__mon{ font-family:"Space Mono",monospace; font-size:.62rem; letter-spacing:.16em; color:var(--text); margin-top:3px; }
.stub__yr{ font-family:"Space Mono",monospace; font-size:.58rem; color:var(--muted); margin-top:2px; }
.stub--lg{ padding:13px 17px; }
.stub--lg .stub__day{ font-size:1.9rem; }

/* ---------- Badges ---------- */
.badge{
  position:absolute; z-index:2; top:14px; right:14px;
  font-family:"Space Mono",monospace; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 11px; border-radius:999px; font-weight:700;
}
.badge--featured{ background:var(--paper); color:#161616; }
.badge--sold{ background:rgba(12,12,14,.7); color:var(--muted); border:1px solid var(--line-2); backdrop-filter:blur(6px); }

/* =========================================================
   EVENTO DESTACADO
   ========================================================= */
.feature{
  display:grid; grid-template-columns:1fr;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; margin-bottom:30px;
  box-shadow:var(--shadow);
}
.feature__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.feature__media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transition:transform .7s var(--ease), filter .6s var(--ease);
}
.feature:hover .feature__media img{ transform:scale(1.04); filter:grayscale(0) contrast(1); }
.feature__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 35%, rgba(12,12,14,.55) 100%);
}
.feature__body{ padding:clamp(24px,4vw,44px); display:flex; flex-direction:column; justify-content:center; }
.feature__title{
  font-family:"Jost",sans-serif; font-weight:600;
  font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.08; letter-spacing:-.01em;
  color:var(--heading); margin-bottom:14px;
}
.feature__desc{ color:var(--muted); max-width:52ch; margin-bottom:26px; }
.feature__actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* =========================================================
   GRILLA DE CARDS
   ========================================================= */
.grid{ display:grid; gap:24px; }
.grid--3{ grid-template-columns:1fr; }

.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:var(--shadow); }
.card__media{ position:relative; aspect-ratio:5/4; overflow:hidden; }
.card__media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transition:transform .7s var(--ease), filter .6s var(--ease);
}
.card:hover .card__media img{ transform:scale(1.06); filter:grayscale(0) contrast(1); }
.card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(12,12,14,.5) 100%);
}
.card__body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.card__title{
  font-family:"Jost",sans-serif; font-weight:600; font-size:1.1rem; line-height:1.22;
  letter-spacing:.02em; color:var(--heading); margin-bottom:9px; text-transform:uppercase;
}
.card__desc{ color:var(--muted); font-size:.94rem; margin-bottom:20px; flex:1; }
/* margin-top:auto empuja el "Ver más" al fondo de la card, así queda
   alineado entre todas aunque el título ocupe 1 o 2 renglones */
.card__actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:16px; }

/* Grilla de próximos shows (mantiene el tamaño de card del archivo) */
.proximos-grid{ margin-top:12px; }
/* Menos aire entre Próximos shows y el archivo de shows */
#proximos{ padding-bottom:clamp(14px, 2vw, 22px); }

/* =========================================================
   QUIÉNES SOMOS
   ========================================================= */
.about{ display:grid; grid-template-columns:1fr; gap:42px; align-items:center; }
.about__lead{ font-size:1.16rem; color:var(--text); margin:8px 0 20px; max-width:56ch; }
.about__lead strong{ color:var(--heading); font-weight:600; }
.about__body{ color:var(--muted); margin-bottom:28px; max-width:54ch; }

/* Lista de servicios (Quiénes somos) */
.about__services{ list-style:none; margin:8px 0 30px; padding:0; display:flex; flex-direction:column; gap:14px; max-width:56ch; }
.about__services li{ position:relative; padding-left:24px; color:var(--muted); font-size:1rem; line-height:1.5; }
.about__services li::before{ content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:2px; background:var(--paper); transform:rotate(45deg); }
.about__services strong{ color:var(--heading); font-weight:600; }

/* Texto de artistas/marcas dentro del panel */
.about__artistas{ position:relative; color:var(--text); font-size:1rem; line-height:1.8; margin:0; }
.about__artistas + .about__artistas{ margin-top:16px; }

.about__panel{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 120% at 85% 10%, rgba(255,255,255,.05), transparent 55%),
    var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:clamp(26px,4vw,40px);
  box-shadow:var(--shadow);
}
.about__panel .brand__mark{
  position:absolute; right:-30px; bottom:-30px; width:190px; height:190px;
  color:#fff; opacity:.05; pointer-events:none;
}
.stats{ position:relative; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:30px 24px; }
.stats li{ display:flex; flex-direction:column; gap:6px; }
.stats__num{ font-family:"Jost",sans-serif; font-weight:600; font-size:clamp(2.2rem,6vw,3.1rem); line-height:1; color:var(--heading); }
.stats__lab{ font-family:"Space Mono",monospace; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

/* =========================================================
   EVENTOS PASADOS (rail horizontal)
   ========================================================= */
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:78%;
  gap:18px; overflow-x:auto; padding-bottom:14px;
  scroll-snap-type:x mandatory; scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent;
}
.rail::-webkit-scrollbar{ height:8px; }
.rail::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; }
.past{ scroll-snap-align:start; }
.past__media{ position:relative; aspect-ratio:4/5; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line); margin-bottom:14px; }
.past__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.8) contrast(1.05); transition:filter .5s var(--ease), transform .7s var(--ease); }
.past:hover .past__media img{ filter:grayscale(0) brightness(1) contrast(1); transform:scale(1.05); }
.past__date{ font-family:"Space Mono",monospace; font-size:.74rem; letter-spacing:.1em; color:var(--muted); margin-bottom:6px; }
.past__title{ font-family:"Jost",sans-serif; font-weight:600; font-size:1.2rem; line-height:1.14; color:var(--heading); margin-bottom:4px; }
.past__venue{ font-size:.9rem; color:var(--muted); }

/* =========================================================
   CONTACTO
   ========================================================= */
.contact{ display:grid; grid-template-columns:1fr; gap:42px; align-items:start; }

/* Contacto sin formulario: en celular apila, en desktop va a dos columnas.
   La separación la da el gap de la grilla, por eso el título no lleva margen. */
.contact--simple{ grid-template-columns:1fr; gap:30px; }
.contact--simple .contact__intro .section__title{ margin-bottom:0; }
.contact__lead{ color:var(--muted); margin:8px 0 26px; max-width:46ch; }
/* Ritmo vertical de la sección: título → datos → redes */
.contact__intro .section__title{ margin-bottom:32px; }
.contact__list{ list-style:none; display:flex; flex-direction:column; gap:18px; margin-bottom:32px; }
.contact__list li{ display:flex; align-items:center; gap:14px; }
.contact__list a:hover{ color:var(--heading); }
.contact__ico{
  width:38px; height:38px; flex:none; display:grid; place-content:center; border-radius:11px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-2); color:var(--text);
}
.socials{ display:flex; flex-wrap:wrap; gap:10px; }
.socials a{
  font-family:"Space Mono",monospace; font-size:.84rem; font-weight:700; letter-spacing:.05em;
  padding:9px 16px; border:1px solid var(--line-2); border-radius:999px; color:var(--text);
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.socials a:hover{ color:#161616; border-color:var(--paper); background:var(--paper); }

/* Formulario */
.form{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(24px,4vw,38px); box-shadow:var(--shadow);
}
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field-row{ display:grid; grid-template-columns:1fr; gap:0 18px; }
.field label{ font-size:.82rem; font-weight:600; letter-spacing:.02em; color:var(--muted); }
.field .opt{ color:var(--muted-2); font-weight:400; }
.field input, .field textarea{
  width:100%; background:var(--ink); color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--radius-xs);
  padding:13px 15px; font-size:.96rem; font-family:inherit;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--paper); box-shadow:0 0 0 3px rgba(244,241,234,.14);
}
.field textarea{ resize:vertical; min-height:110px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__note{ margin-top:14px; font-size:.9rem; min-height:1.2em; }
.form__note.ok{ color:#A9C2A4; }
.form__note.err{ color:#D98B86; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--ink); border-top:1px solid var(--line); padding-top:64px; }
.footer__inner{
  display:grid; grid-template-columns:1fr; gap:36px; padding-bottom:44px;
  border-bottom:1px solid var(--line);
}
.footer__tag{ color:var(--muted); margin-top:16px; font-size:.94rem; }
.footer__nav{ display:flex; flex-direction:column; gap:12px; }
.footer__nav a, .footer__social a{ color:var(--muted); font-size:.94rem; transition:color .2s var(--ease); width:fit-content; }
.footer__nav a:hover, .footer__social a:hover{ color:var(--heading); }
.footer__col-title, .footer__social{ display:flex; flex-direction:column; gap:12px; }
.footer__col-title{ font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:2px; }
.footer__bottom{
  display:flex; flex-direction:column; gap:12px; padding-block:26px 32px;
  font-size:.84rem; color:var(--muted-2);
}
.footer__top{ color:var(--muted); transition:color .2s var(--ease); width:fit-content; }
.footer__top:hover{ color:var(--heading); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width:600px){
  .field-row{ grid-template-columns:1fr 1fr; }
  .rail{ grid-auto-columns:46%; }
}
@media (min-width:860px){
  .nav__links{ display:flex; }
  .nav__actions .btn--ghost{ display:inline-flex; }
  .nav__toggle{ display:none; }
  .mobile-menu{ display:none !important; }
  .grid--3{ grid-template-columns:repeat(3,1fr); }
  .proximos-grid{ grid-template-columns:repeat(2,1fr); max-width:772px; }
  .feature{ grid-template-columns:1.15fr 1fr; }
  .feature__media{ aspect-ratio:auto; height:100%; min-height:380px; }
  .about{ grid-template-columns:1.1fr .9fr; gap:60px; }
  .contact{ grid-template-columns:1fr 1.05fr; gap:60px; }
  /* Contacto sin formulario: título a la izquierda, datos a la derecha */
  .contact--simple{ grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start; }
  .contact--simple .contact__intro .section__title{ margin-bottom:0; }
  .rail{ grid-auto-columns:30%; }
  .footer__inner{ grid-template-columns:1.4fr 1fr 1fr; }
  .footer__bottom{ flex-direction:row; align-items:center; justify-content:space-between; }
}
@media (min-width:1100px){
  .rail{ grid-auto-columns:23.5%; }
}