/* SPACE — SPORTS & LIVE EXPERIENCES
   components.css · v1
   Componentes reutilizables (SPEC §6). BEM plano: .blk, .blk__el, .blk--mod.
   Ningun hex: todo sale de tokens.css. */

/* 1. NAV — barra superior fija
   Logo izquierda en la muesca negra, enlaces al centro, idioma a la derecha.
   Al hacer scroll se compacta 96 -> 64px. La altura si transiciona: excepcion
   controlada, el nav es `position:fixed` y no remaqueta el documento. */

.nav{
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  background: transparent;
  border-bottom: var(--bw) solid transparent;
  transition:
    height var(--d-mid) var(--ease),
    background-color var(--d-mid) var(--ease),
    border-color var(--d-mid) var(--ease);
}

.nav__inner{
  display: flex;
  align-items: center;
  gap: var(--gap);
  height: 100%;
  width: 100%;
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding-inline-end: var(--gutter);
}

/* Muesca negra: la punta baja del alto del nav, con la tangente de 19 grados. */
.nav__brand{
  position: relative;
  z-index: var(--z-content);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--brand-w);
  height: calc(100% + var(--notch));
  padding-inline: var(--sp-4);
  padding-block-end: var(--notch);
  background: var(--ink-2);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--notch)),
    50% 100%,
    0 calc(100% - var(--notch))
  );
}

.nav__logo{
  width: auto;
  height: clamp(34px, 4.2vw, 58px);
  transition: height var(--d-mid) var(--ease);
}

.nav__list{
  display: none;
  align-items: center;
  gap: clamp(var(--sp-4), 2vw, var(--sp-7));
  margin-inline: auto;
  list-style: none;
}

.nav__item{ display: block; }

.nav__link{
  position: relative;
  display: inline-block;
  padding-block: var(--sp-2);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-med);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color var(--d-fast) var(--ease);
  white-space: nowrap;
}

/* Hairline inferior: crece por transform, no por width */
.nav__link::after{
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: var(--bw);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-mid) var(--ease);
}

.nav__link:hover{ color: var(--fg); }
.nav__link:hover::after{ transform: scaleX(1); }

.nav__link.is-active,
.nav__link[aria-current="page"]{ color: var(--accent); }
.nav__link.is-active::after,
.nav__link[aria-current="page"]::after{ transform: scaleX(1); }

/* Selector de idioma */
.nav__lang{
  display: none;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
}

.nav__lang-btn{
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-med);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-mute);
  border: var(--bw) solid transparent;
  border-radius: var(--r-1);
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.nav__lang-btn:hover{ color: var(--fg); }
.nav__lang-btn.is-active,
.nav__lang-btn[aria-current="true"]{ color: var(--accent); border-color: var(--accent); }

/* Hamburguesa: dos barras que giran a X. Solo transform. */
.nav__toggle{
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
  color: var(--fg);
}
.nav__toggle::before,
.nav__toggle::after{
  content: "";
  position: absolute;
  left: 50%;
  width: 24px;
  height: var(--bw-thick);
  background: currentColor;
  transform-origin: center;
  transition: transform var(--d-mid) var(--ease);
}
.nav__toggle::before{ top: calc(50% - 5px); transform: translateX(-50%); }
.nav__toggle::after{ top: calc(50% + 5px); transform: translateX(-50%); }
.nav__toggle[aria-expanded="true"]::before{ transform: translateX(-50%) translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"]::after{ transform: translateX(-50%) translateY(-5px) rotate(-45deg); }

/* Estado compacto (lo pone motion.js al pasar el umbral de scroll) */
.nav.is-stuck{
  height: var(--nav-h-stuck);
  background: var(--ink-2);
  border-bottom-color: var(--hairline);
}
.nav.is-stuck .nav__logo{ height: clamp(26px, 3vw, 40px); }
.nav.is-stuck .nav__brand{ background: var(--ink); }

/* Cajon a pantalla completa (< 900px). Cerrado por defecto a proposito: es un
   control, no contenido. Sin JS no abre, por eso el pie lleva toda la nav. */
.nav__drawer{
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  padding: calc(var(--nav-h) + var(--sp-8)) var(--gutter) var(--sp-8);
  background: var(--ink-2);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-1.5%);
  transition:
    opacity var(--d-mid) var(--ease),
    transform var(--d-mid) var(--ease),
    visibility 0s linear var(--d-mid);
}

.nav.is-open .nav__drawer{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s, 0s, 0s;
}

.nav__drawer-list{ display: flex; flex-direction: column; gap: var(--sp-3); list-style: none; }

.nav__drawer-link{
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: var(--bw) solid var(--hairline);
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  color: var(--fg);
}
.nav__drawer-link::before{
  content: counter(drawer, decimal-leading-zero);
  counter-increment: drawer;
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-med);
  letter-spacing: var(--tr-label);
  color: var(--accent);
}
.nav__drawer-list{ counter-reset: drawer; }
.nav__drawer-link.is-active,
.nav__drawer-link[aria-current="page"]{ color: var(--accent); }

.nav__drawer-foot{
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

@media (min-width: 900px){
  .nav__list{ display: flex; }
  .nav__lang{ display: flex; }
  .nav__toggle{ display: none; }
  .nav__drawer{ display: none; }
}

/* 2. BTN — CTA pill. Borde 1.5px, fondo transparente, relleno por barrido.
   Sin glow, sin sombra de color (SPEC §5.1). */

.btn{
  --btn-fill: var(--paper);
  --btn-ink: var(--ink);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-3) clamp(var(--sp-5), 3vw, var(--sp-7));
  border: var(--bw-btn) solid currentColor;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-med);
  line-height: var(--lh-flat);
  letter-spacing: var(--tr-cta);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: color var(--d-fast) var(--ease);
}

/* El relleno entra por transform (barrido de izquierda a derecha) */
.btn::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-under);
  border-radius: inherit;
  background: var(--btn-fill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-mid) var(--ease);
}

.btn:hover,
.btn:focus-visible{ color: var(--btn-ink); }
.btn:hover::before,
.btn:focus-visible::before{ transform: scaleX(1); }

.btn:active{ transform: translateY(1px); }

/* Flecha opcional dibujada por CSS */
.btn--arrow::after{
  content: "";
  width: 1.1em;
  height: var(--bw-btn);
  background: currentColor;
  transition: transform var(--d-mid) var(--ease);
}
.btn--arrow:hover::after{ transform: translateX(4px); }

.btn--solid{
  --btn-fill: var(--paper);
  --btn-ink: var(--ink);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}
.btn--solid:hover,
.btn--solid:focus-visible{ color: var(--btn-ink); }

.btn--sm{
  min-height: 40px;
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-label);
}

.btn--lg{ min-height: 60px; padding-inline: clamp(var(--sp-6), 4vw, var(--sp-8)); }
.btn--block{ display: flex; width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"]{ opacity: 0.45; pointer-events: none; }

/* 3. EYEBROW — kicker con guion corto delante */

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-med);
  line-height: var(--lh-flat);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-soft);
}
.eyebrow::before{
  content: "—";
  color: var(--accent);
  font-weight: var(--fw-med);
  letter-spacing: 0;
}
.eyebrow--plain::before{ content: none; }

/* 4. CUT — el panel cortado a 19 grados (SPEC §4)
   El corte inclina siempre hacia la derecha subiendo. `.cut--left` es el
   espejo que encaja con el: los dos juntos forman la arista del hero. */

.cut{
  position: relative;
  isolation: isolate;
  --cut-edge: var(--hairline);
}

.cut--right{ clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut-x)) 100%, 0 100%); }

.cut--left{ clip-path: polygon(var(--cut-x) 0, 100% 0, 100% 100%, 0 100%); }

/* Hairline de 1px sobre la arista del corte */
.cut--right::after,
.cut--left::after{
  content: "";
  position: absolute;
  top: 0;
  z-index: var(--z-content);
  width: var(--bw);
  height: calc(100% * var(--cut-sec));
  background: var(--cut-edge);
  transform-origin: 50% 0;
  pointer-events: none;
}
.cut--right::after{ right: 0; transform: rotate(var(--cut-deg)); }
.cut--left::after{
  left: var(--cut-x);
  transform: rotate(calc(-1 * var(--cut-deg)));
}

.cut--teal{ --cut-edge: var(--accent-deep); }
.cut--noedge::after{ content: none; }

/* Imagen o video que llena el panel cortado */
.cut__media{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Velo sobre la fotografia: opacidad, no colores nuevos */
.cut__scrim{
  position: absolute;
  inset: 0;
  z-index: var(--z-media);
  background: var(--ink);
  opacity: var(--scrim-op-soft);
  pointer-events: none;
}

/* Corte exacto de 19 grados por unidades de contenedor. SOLO en elementos con
   alto propio (aspect-ratio, height, inset); nunca en un bloque medido por su
   contenido: `container-type: size` lo dejaria a cero. */
@supports (container-type: size){
  .cut--auto{
    container-type: size;
    --cut-x: calc(var(--cut-tan) * 100cqh);
  }
}

/* < 768px el corte pasa a horizontal: en vertical un corte de 19 grados
   deja triangulos ilegibles (SPEC §4). */
@media (max-width: 767.98px){
  .cut--right{
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-y)), 0 100%);
  }
  .cut--left{
    clip-path: polygon(0 var(--cut-y), 100% 0, 100% 100%, 0 100%);
  }
  .cut--right::after,
  .cut--left::after{
    width: calc(100% * 1.003);
    height: var(--bw);
    left: 0;
    right: auto;
    transform-origin: 0 50%;
  }
  .cut--right::after{
    top: auto;
    bottom: var(--cut-y);
    transform: rotate(var(--cut-deg-m));
  }
  .cut--left::after{
    top: 0;
    transform: rotate(var(--cut-deg-m));
  }
  @supports (container-type: size){
    .cut--auto{ --cut-x: 0px; }
  }
}

/* 5. PILLARS — los 4 bullets de cada vertical, numerados 01-04
   El numero lo genera un contador CSS; si el HTML trae `.pillars__num`,
   el contador se apaga y manda el marcado. */

.pillars{
  counter-reset: pillar;
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  padding: 0;
}

@media (min-width: 768px){
  .pillars{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap) var(--gap-lg); }
  .pillars--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pillars--1{ grid-template-columns: minmax(0, 1fr); }
}

.pillars__item{
  position: relative;
  display: grid;
  gap: var(--sp-3);
  padding-block: var(--sp-5) var(--sp-6);
  border-top: var(--bw) solid var(--hairline);
}

/* La hairline superior se tine de teal al pasar por encima */
.pillars__item::after{
  content: "";
  position: absolute;
  inset-block-start: calc(-1 * var(--bw));
  inset-inline: 0;
  height: var(--bw);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-slow) var(--ease);
}
.pillars__item:hover::after{ transform: scaleX(1); }

.pillars__item::before{
  counter-increment: pillar;
  content: counter(pillar, decimal-leading-zero);
  font-family: var(--ff-display);
  font-size: var(--fs-index);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-label);
  line-height: var(--lh-flat);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pillars__item:has(.pillars__num)::before{ content: none; }

.pillars__num{
  font-family: var(--ff-display);
  font-size: var(--fs-index);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-label);
  line-height: var(--lh-flat);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.pillars__title{
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  color: var(--fg);
}

.pillars__text{
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-dim);
  max-width: var(--measure-sm);
}

/* 6. STAT — la cifra grande que sustituye al parrafo */

.stats{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap) var(--gap-lg);
}

.stat{
  display: grid;
  gap: var(--sp-2);
  padding-inline-start: var(--sp-5);
  border-inline-start: var(--bw) solid var(--accent);
}

.stat__num{
  font-family: var(--ff-display);
  font-size: var(--fs-stat);
  font-weight: var(--fw-black);
  line-height: var(--lh-flat);
  letter-spacing: var(--tr-mega);
  color: var(--fg);
  /* el ancho no baila mientras el contador sube */
  font-variant-numeric: tabular-nums;
}

.stat__label{
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-med);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-mute);
}

.stat--accent .stat__num{ color: var(--accent); }
.stat--plain{ border-inline-start: 0; padding-inline-start: 0; }

/* 7. MARQUEE — cinta de texto en movimiento continuo
   El track lleva el listado DOS veces (la 2a copia `aria-hidden="true"`) y la
   animacion recorre el 50%: el bucle es invisible. Es transform: compositor,
   no hilo principal. */

.marquee{
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--sp-3), 1.4vw, var(--sp-5));
  border-block: var(--bw) solid var(--hairline);
  background: var(--bg);
}

.marquee__track{
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll var(--marquee-dur) linear infinite;
}

.marquee__item{
  display: inline-flex;
  align-items: center;
  gap: clamp(var(--sp-4), 2vw, var(--sp-6));
  padding-inline-end: clamp(var(--sp-4), 2vw, var(--sp-6));
  font-family: var(--ff-display);
  font-size: clamp(1rem, 2vw, 1.75rem);
  font-weight: var(--fw-semi);
  line-height: var(--lh-flat);
  letter-spacing: var(--tr-cta);
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}

/* Separador: la SILUETA del isotipo hexagonal de SPACE. Antes era un rombo
   girado, que podia ser el separador de cualquier marca. */
.marquee__item::after{
  content: "";
  inline-size: clamp(14px, 1.5vw, 20px);
  block-size: clamp(14px, 1.5vw, 20px);
  flex: 0 0 auto;
  background: var(--accent);
  -webkit-mask: url("../logo/mark-teal-64.png") center / contain no-repeat;
  mask: url("../logo/mark-teal-64.png") center / contain no-repeat;
}
/* Si el navegador no soporta mask, el separador se cae con elegancia a una
   barra fina en vez de dejar un cuadrado teal. */
@supports not ((mask: url("")) or (-webkit-mask: url(""))){
  .marquee__item::after{
    inline-size: 2px;
    block-size: 1em;
    background: var(--accent);
  }
}

.marquee--dim .marquee__item{ color: var(--fg-mute); }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-paused .marquee__track{ animation-play-state: paused; }

@keyframes marquee-scroll{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce){
  .marquee{ overflow-x: auto; }
  .marquee__track{ animation: none !important; transform: none !important; }
}

/* 8. GRID-GALLERY — rejilla de imagenes */

.grid-gallery{
  display: grid;
  gap: var(--bw);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  background: var(--hairline);
  border-block: var(--bw) solid var(--hairline);
  list-style: none;
  padding: 0;
}

.grid-gallery__item{
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 11;
  background: var(--surface);
}

.grid-gallery__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--ease);
}

.grid-gallery__item:hover .grid-gallery__img,
.grid-gallery__item:focus-within .grid-gallery__img{ transform: scale(1.04); }

.grid-gallery__label{
  position: absolute;
  inset-inline-start: var(--sp-4);
  inset-block-end: var(--sp-4);
  z-index: var(--z-content);
  padding: var(--sp-2) var(--sp-3);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-med);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* Ritmo: las pares bajan medio paso. Con margin, nunca con transform. */
@media (min-width: 1024px){
  .grid-gallery--offset{ align-items: start; }
  .grid-gallery--offset .grid-gallery__item:nth-child(even){ margin-block-start: var(--sp-8); }
}


/* 10. FOOTER */

.footer{
  position: relative;
  background: var(--ink-2);
  border-top: var(--bw) solid var(--hairline);
  padding-block: var(--section-y-tight);
  color: var(--fg-dim);
}

.footer__inner{
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px){
  .footer__inner{ grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
}

.footer__brand{ display: grid; gap: var(--sp-5); justify-items: start; }

.footer__logo{ width: auto; height: clamp(28px, 3vw, 40px); }

.footer__legal,
.footer__addr{
  font-size: var(--fs-label);
  font-weight: var(--fw-med);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.9;
  max-width: none;
  font-style: normal;
}

.footer__title{
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-med);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: var(--sp-4);
}

/* La nav completa vive tambien aqui: sin JS se llega a las 6 paginas. */
.footer__nav{ display: grid; gap: var(--sp-3); list-style: none; padding: 0; }

.footer__link{
  display: inline-block;
  font-size: var(--fs-small);
  color: var(--fg-dim);
  transition: color var(--d-fast) var(--ease);
}
.footer__link:hover{ color: var(--accent); }
.footer__link.is-active,
.footer__link[aria-current="page"]{ color: var(--accent); }

.footer__social{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
}

.footer__social-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--bw) solid var(--hairline);
  color: var(--fg-dim);
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.footer__social-link svg{ width: 18px; height: 18px; }
.footer__social-link:hover{ color: var(--accent); border-color: var(--accent); }

.footer__bottom{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-5);
  border-top: var(--bw) solid var(--hairline);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* 11. CONTACT — formulario
   Ganchos de forms.js: .contact__field.is-invalid / .is-valid,
   .contact__error[hidden], .contact__status.is-ok / .is-error.
   La marca no tiene rojo y no se inventa: el error va en blanco puro
   (--alert), trazo 2px; el exito, en teal. Ver DESIGN.md. */

.contact{ display: grid; gap: var(--gap-lg); }

.contact__form{ display: grid; gap: var(--sp-6); }

.contact__row{
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px){
  .contact__row--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.contact__field{
  --field-line: var(--hairline);
  display: grid;
  gap: var(--sp-2);
}
.contact__field--full{ grid-column: 1 / -1; }

.contact__label{
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-med);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.contact__label .contact__req{ color: var(--accent); margin-inline-start: var(--sp-1); }

.contact__input,
.contact__select,
.contact__textarea{
  width: 100%;
  padding: var(--sp-3) 0;
  background: transparent;
  border: 0;
  border-bottom: var(--bw) solid var(--field-line);
  border-radius: 0;
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  transition: border-color var(--d-fast) var(--ease);
}

.contact__textarea{ min-height: 8rem; }

.contact__select{
  appearance: none;
  padding-inline-end: var(--sp-6);
  cursor: pointer;
}

.contact__input::placeholder,
.contact__textarea::placeholder{ color: var(--fg-mute); opacity: 1; }

.contact__input:hover,
.contact__select:hover,
.contact__textarea:hover{ border-bottom-color: var(--fg-mute); }

.contact__input:focus,
.contact__select:focus,
.contact__textarea:focus{ outline: none; border-bottom-color: var(--accent); }
.contact__input:focus-visible,
.contact__select:focus-visible,
.contact__textarea:focus-visible{
  outline: var(--bw-thick) solid var(--focus);
  outline-offset: 4px;
}

.contact__hint{
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: var(--fg-mute);
}

.contact__error{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-label);
  font-weight: var(--fw-med);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--alert);
}
.contact__error::before{
  content: "";
  width: 8px;
  height: 8px;
  background: var(--alert);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.contact__field.is-invalid{ --field-line: var(--alert); }
.contact__field.is-invalid .contact__input,
.contact__field.is-invalid .contact__select,
.contact__field.is-invalid .contact__textarea{ border-bottom-width: var(--bw-thick); }

.contact__field.is-valid{ --field-line: var(--ok); }

.contact__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
}

.contact__status{
  font-size: var(--fs-small);
  font-weight: var(--fw-med);
  color: var(--fg-dim);
}
.contact__status.is-ok{ color: var(--ok); }
.contact__status.is-error{ color: var(--alert); }

/* Trampa antispam: fuera de pantalla, nunca `display:none` */
.contact__hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==================================================================
   13. CHAT — asistente del sitio
   Mismo lenguaje que el resto: negro, teal escaso, corte de 19 grados,
   cero glass y cero glow. El panel es una lamina cortada, no una tarjeta
   redondeada de plantilla.
   ================================================================== */

.chat{
  position: fixed;
  inset-block-end: clamp(1rem, 3vw, 2rem);
  inset-inline-end: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-top);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
}

/* --- boton flotante --- */
.chat__fab{
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--r-round);
  background: var(--accent);
  color: var(--ink);
  border: none;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.chat__fab:hover{ background: var(--accent-hi); }
.chat__fab:active{ transform: scale(0.96); }
.chat.is-open .chat__fab{ background: var(--surface); color: var(--fg); }

/* --- panel --- */
.chat__panel{
  display: flex;
  flex-direction: column;
  inline-size: min(92vw, 380px);
  block-size: min(72vh, 560px);
  background: var(--ink-2);
  border: var(--bw) solid var(--line-2);
  /* La esquina superior izquierda va cortada al angulo de la marca. */
  clip-path: polygon(0 22px, 22px 0, 100% 0, 100% 100%, 0 100%);
}
.chat__panel[hidden]{ display: none; }

.chat__head{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  border-bottom: var(--bw) solid var(--hairline);
  background: var(--ink-3);
}
.chat__dot{
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--r-round);
  background: var(--accent);
  flex: 0 0 auto;
}
.chat__who{
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  color: var(--fg);
  line-height: 1.2;
}
.chat__sub{
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.chat__close{
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  background: none;
  border: none;
  color: var(--fg-mute);
  cursor: pointer;
  transition: color var(--d-fast) var(--ease);
}
.chat__close:hover{ color: var(--fg); }

/* --- hilo --- */
.chat__thread{
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  scrollbar-width: thin;
}

.chat__msg{
  max-inline-size: 84%;
  padding: var(--sp-3) var(--sp-4);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.chat__msg--bot{
  align-self: flex-start;
  background: var(--surface);
  color: var(--fg-dim);
  border-inline-start: var(--bw-thick) solid var(--accent);
}
.chat__msg--user{
  align-self: flex-end;
  background: var(--accent);
  color: var(--ink);
  font-weight: var(--fw-med);
}

.chat__typing{
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
}
.chat__typing span{
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--r-round);
  background: var(--fg-mute);
  animation: chat-blink 1.2s var(--ease) infinite;
}
.chat__typing span:nth-child(2){ animation-delay: 0.18s; }
.chat__typing span:nth-child(3){ animation-delay: 0.36s; }
@keyframes chat-blink{
  0%, 60%, 100%{ opacity: 0.28; }
  30%{ opacity: 1; }
}

/* --- entrada --- */
.chat__form{
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  border-top: var(--bw) solid var(--hairline);
}
.chat__in{
  flex: 1;
  min-inline-size: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-4);
  border: var(--bw) solid var(--field-border);
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: 0.9375rem;
}
.chat__in::placeholder{ color: var(--fg-mute); }
.chat__in:focus{
  outline: var(--bw-thick) solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.chat__send{
  display: grid;
  place-items: center;
  inline-size: 46px;
  flex: 0 0 auto;
  background: var(--accent);
  color: var(--ink);
  border: none;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--ease);
}
.chat__send:hover{ background: var(--accent-hi); }

/* En movil el panel ocupa casi toda la pantalla: escribir en un cuadro
   diminuto sobre el pulgar es incomodo. */
@media (max-width: 599.98px){
  .chat{ inset-inline: var(--sp-4); align-items: stretch; }
  .chat__fab{ margin-inline-start: auto; }
  .chat__panel{ inline-size: 100%; block-size: min(76vh, 540px); }
}

@media (prefers-reduced-motion: reduce){
  .chat__typing span{ animation: none; opacity: 0.6; }
  .chat__fab{ transition: none; }
}