/* ============================================
   Vatya — sistema de marca aplicado a la web
   Tokens: paleta, tipografías y radios definidos
   en el Design System de Vatya (project/tokens.json)
   ============================================ */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2');
  font-weight: 800; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-latin-300-normal.woff2') format('woff2');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

:root {
  /* color — la web entera usa el tema oscuro de marca, como en las
     referencias: fondo vatya-deep continuo, secciones separadas por
     líneas finas en vez de cambios de color */
  --vatya-deep: #062B26;
  --vatya-teal: #00D1A7;
  --vatya-lime: #A7F432;
  --surface: #062B26;
  --surface-raised: #0C3B34;
  --ink: #F5F7F6;
  --ink-muted: #9FB0AB;
  --line: #17423A;

  /* tipografía */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Karla', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;

  /* radios */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 28px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

.wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--vatya-teal);
  color: #062B26;
  padding: var(--space-2) var(--space-3);
  z-index: 1000;
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 var(--space-3);
  color: var(--ink);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(44px, 6.4vw, 84px); }
h2 { font-size: clamp(30px, 4.2vw, 44px); }
h3 { font-size: 20px; font-weight: 700; }

p { margin: 0 0 var(--space-3); color: var(--ink); }

a { color: inherit; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vatya-teal);
  margin: 0 0 var(--space-3);
}

.section-lead {
  font-size: 18px;
  color: var(--ink-muted);
  max-width: 640px;
}

.link-arrow {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--vatya-teal);
  padding-bottom: 2px;
}
.link-arrow:hover { color: var(--vatya-teal); }

/* botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
}
.btn:hover { opacity: 0.9; }
.btn:active { transform: translateY(1px); }
.btn-teal { background: var(--vatya-teal); color: #062B26; }
.btn-lime { background: var(--vatya-lime); color: #062B26; }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-pill-outline {
  border-color: var(--vatya-teal);
  color: var(--vatya-teal);
  background: transparent;
  padding: 10px 22px;
}
.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 13px; }

/* ===== header: barra acristalada a todo el ancho, sin huecos ni lineas ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* escritorio/tablet ancho (>900px): la barra de referencia tal cual, de
   lado a lado, con "aspect-ratio" fijado a la proporción real de la
   imagen para que nunca se recorte ni se deforme, y enlaces reales
   invisibles encima de cada palabra ya grabada en la imagen. El resaltado
   de la sección activa al hacer scroll ya no se ve aquí (el texto va
   grabado en la imagen), sólo en la versión móvil de abajo. */
.header-showcase {
  position: relative;
  width: 100%;
  aspect-ratio: 2094 / 172;
  overflow: hidden;
  box-shadow: 0 16px 32px -20px rgba(0,0,0,0.5);
}
.header-showcase-img {
  display: block;
  width: 100%;
  height: 100%;
}
.header-hotspots { position: absolute; inset: 0; }
.header-hotspot {
  position: absolute;
  display: block;
  color: transparent;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  overflow: hidden;
}
.header-hotspot:focus-visible {
  outline: 2px solid var(--vatya-teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* móvil/tablet estrecho (≤900px): versión funcional en vivo con menú
   hamburguesa (la barra-imagen no cabe apilada a este ancho) */
.header-live { display: none; }
.header-inner {
  background-color: var(--vatya-deep);
  box-shadow: 0 16px 32px -20px rgba(0,0,0,0.5);
}
.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 18px var(--space-4);
}
.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.brand-logo { height: 32px; width: auto; }
.header-divider {
  width: 1px;
  height: 22px;
  background: rgba(245,247,246,0.22);
  flex: none;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.site-nav a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
}
.site-nav a:hover { color: var(--vatya-teal); }
.site-nav a.active {
  color: var(--vatya-teal);
  border-bottom-color: var(--vatya-teal);
}
.header-cta { margin-left: 2px; }
.header-cta svg,
.header-cta .arrow { margin-left: 6px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

/* ===== hero ===== */
.hero {
  position: relative;
  background: var(--vatya-deep);
  overflow: hidden;
}

/* showcase: imagen fija con el texto ya integrado (escritorio/tablet) */
.hero-showcase { position: relative; }
.hero-showcase-img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-showcase-actions {
  position: absolute;
  left: 9%;
  top: 87%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* live: hero con texto real sobre foto (móvil) */
.hero-live {
  display: none;
  position: relative;
  background: var(--vatya-deep);
  overflow: hidden;
  padding: 96px 0 56px;
}
.hero-motif {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85% 20%;
}
/* oscurece el lado del texto para que siga siendo legible sobre la
   fotografía, sea cual sea el ancho de pantalla */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(6,43,38,0.98) 0%, rgba(6,43,38,0.92) 48%, rgba(6,43,38,0.5) 70%, rgba(6,43,38,0.1) 88%, rgba(6,43,38,0) 96%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-copy { max-width: 620px; }
.hero-lead {
  font-size: 19px;
  color: var(--ink-muted);
  max-width: 340px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-muted);
  background: rgba(245, 247, 246, 0.06);
  border: 1px solid rgba(245, 247, 246, 0.16);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.trust-badge strong {
  color: var(--vatya-teal);
  font-family: var(--font-mono);
  font-weight: 700;
  margin-right: 5px;
}
.accent-teal { color: var(--vatya-teal); }

/* ===== franja "tu energía, una decisión de negocio" ===== */
.hero-strip {
  position: relative;
  background: var(--vatya-deep);
  overflow: hidden;
}
.hero-strip-showcase-img {
  display: block;
  width: 100%;
  height: auto;
}
.hero-strip-live {
  display: none;
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 160px 0;
  min-height: 480px;
  align-items: center;
  overflow: hidden;
}
.hero-strip-live::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/hero-strip-bg.jpg') center 38%/cover no-repeat;
}
.hero-strip-live::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,43,38,0.78) 0%, rgba(6,43,38,0.48) 30%, rgba(6,43,38,0.48) 68%, rgba(6,43,38,0.85) 100%);
}
.hero-strip-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.hero-strip-inner .eyebrow { justify-content: center; }
.hero-strip-quote {
  margin: 0 0 var(--space-4);
  font-size: clamp(30px, 4.4vw, 46px);
  text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.hero-strip-quote::before { content: "\201C"; }
.hero-strip-quote::after { content: "\201D"; }
.hero-strip-text {
  margin: 0 auto;
  max-width: 560px;
  color: var(--ink-muted);
  font-size: 17px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}

/* ===== secciones generales ===== */
.section { padding: 96px 0; border-bottom: 1px solid var(--line); }

/* ===== sobre nosotros (sección clara) ===== */
.about {
  padding: 96px 0;
  background: #F7F8F4;
  border-bottom: 1px solid rgba(38, 51, 45, 0.12);
}
.about-wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-5);
  align-items: center;
}
.about-copy .eyebrow-dark {
  position: relative;
  color: #2F8F46;
  padding-bottom: 16px;
}
.about-copy .eyebrow-dark::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: #A7D52B;
}
.about-title {
  font-weight: 600;
  color: #26332D;
  line-height: 1.16;
  margin: 0 0 var(--space-4);
}
.about-title .accent-green {
  font-weight: 700;
  color: #124D35;
}
.about-copy p {
  color: #718078;
  font-size: 16px;
  line-height: 1.75;
}
.about-copy p strong {
  color: #26332D;
  font-weight: 700;
}
.about-copy p:last-child { margin-bottom: 0; }
.about-photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
}
.about-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== por qué vatya ===== */
.porque-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}
.porque-copy .section-lead { max-width: 480px; }
.porque-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.porque-visual-glow {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(closest-side, rgba(0,209,167,0.22), transparent 70%),
    radial-gradient(closest-side at 70% 65%, rgba(167,244,50,0.16), transparent 65%);
  filter: blur(10px);
}
.porque-visual-img {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: block;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.stat {
  padding: var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: transform .18s ease, box-shadow .18s ease;
}
.stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.4);
}
.stat-icon {
  width: 26px;
  height: 26px;
  color: var(--vatya-teal);
  margin-bottom: var(--space-2);
}
.stat-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 38px;
  color: var(--ink);
  margin-bottom: var(--space-1);
}
.stat-label {
  font-size: 14px;
  color: var(--ink-muted);
}

/* ===== servicios ===== */
.servicios-showcase-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin-top: var(--space-5);
}
.services-live { display: none; }
.services-live-banner {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin: var(--space-5) 0 var(--space-4);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.service { position: relative; }
.service:nth-child(n+5) { padding-top: var(--space-5); border-top: 1px solid var(--line); }
.service:not(:nth-child(4n+1))::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--space-4) / 2);
  width: 1px;
  background: var(--line);
}
.service-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.service-num {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--vatya-teal);
  font-size: 14px;
  flex: none;
}
.service-rule { flex: 1; height: 1px; background: var(--line); }
.service h3 { margin-bottom: var(--space-1); font-size: 18px; }
.service p { color: var(--ink-muted); font-size: 14.5px; margin: 0; }

/* banda de mercado: imagen fija con el texto ya integrado (escritorio/tablet) */
.mercado-showcase {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 80px;
  overflow: hidden;
}
.mercado-showcase::before,
.mercado-showcase::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.mercado-showcase::before {
  top: 0;
  height: 64px;
  background: linear-gradient(to bottom, var(--vatya-deep) 0%, rgba(6, 43, 38, 0) 100%);
}
.mercado-showcase::after {
  bottom: 0;
  height: 56px;
  background: linear-gradient(to top, var(--vatya-deep) 0%, rgba(6, 43, 38, 0) 100%);
}
.mercado-showcase-img {
  display: block;
  width: 100%;
  height: auto;
}

/* banda de mercado + fotografía (live, móvil) */
.servicios-band {
  display: none;
  margin-top: 80px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
}
.servicios-band-photo {
  position: relative;
  min-height: 360px;
  border-radius: var(--radius-lg);
  background: url('../img/servicios-band.jpg') center/cover no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 86%);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.5);
}
.servicios-band-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,209,167,0.35) 0%, rgba(6,43,38,0.15) 45%, rgba(6,43,38,0.65) 100%);
}
.servicios-band-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0,209,167,0.35);
  clip-path: inherit;
}
.servicios-band-text { align-self: center; position: relative; }
.servicios-band-text h3 { font-size: clamp(24px, 3vw, 32px); }
.servicios-band-text p { color: var(--ink-muted); }
.market-badge {
  position: absolute;
  top: -46px;
  right: 8px;
  width: 108px;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.servicios-band-text > *:not(.market-badge) { position: relative; z-index: 1; }

/* ===== cómo trabajamos ===== */

/* imagen fija con el texto ya integrado (escritorio/tablet) */
.metodo-showcase {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
}
.metodo-showcase::before,
.metodo-showcase::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.metodo-showcase::before {
  top: 0;
  height: 64px;
  background: linear-gradient(to bottom, var(--vatya-deep) 0%, rgba(6, 43, 38, 0) 100%);
}
.metodo-showcase::after {
  bottom: 0;
  height: 64px;
  background: linear-gradient(to top, var(--vatya-deep) 0%, rgba(6, 43, 38, 0) 100%);
}
.metodo-showcase-img {
  display: block;
  width: 100%;
  height: auto;
}
.steps-live { display: none; }

/* fusiona visualmente el final de Servicios con el inicio de Método:
   mismo color de fondo en ambos, sin línea ni hueco entre las dos imágenes */
@media (min-width: 861px) {
  #servicios { padding-bottom: 0; border-bottom: none; }
  #como-trabajamos { padding-top: 0; }
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-5);
  margin-top: var(--space-5);
}
.step-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.step-num {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--vatya-lime);
  font-size: 14px;
  flex: none;
}
.step-rule { flex: 1; height: 1px; background: var(--line); }
.step p { color: var(--ink-muted); font-size: 14.5px; }

/* ===== sube tu factura / contacto ===== */
.section-contact { border-bottom: none; position: relative; overflow: hidden; }

/* imagen fija de lado a lado con el formulario real incrustado en el
   hueco acristalado de la imagen (pantallas anchas); en pantallas más
   estrechas no hay espacio vertical suficiente para el formulario dentro
   del hueco, así que se usa el bloque de respaldo (.contact-live) */
.contact-showcase {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
}
.contact-showcase::before,
.contact-showcase::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.contact-showcase::before {
  top: 0;
  height: 64px;
  background: linear-gradient(to bottom, var(--vatya-deep) 0%, rgba(6, 43, 38, 0) 100%);
}
.contact-showcase::after {
  bottom: 0;
  height: 64px;
  background: linear-gradient(to top, var(--vatya-deep) 0%, rgba(6, 43, 38, 0) 100%);
}
.contact-showcase-img {
  display: block;
  width: 100%;
  height: auto;
}
.contact-showcase-form {
  position: absolute;
  z-index: 2;
  left: 60%;
  right: 5.5%;
  top: 7.7%;
  bottom: 10.9%;
  display: flex;
  align-items: center;
}
.contact-showcase-form .upload-form {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  background: transparent;
  border: none;
  padding: 2.5% 6%;
}
.contact-showcase-form .form-row { margin-bottom: 10px; }
.contact-showcase-form .form-row label { margin-bottom: 3px; font-size: 12.5px; }
.contact-showcase-form .form-row input,
.contact-showcase-form .form-row select,
.contact-showcase-form .form-row textarea {
  padding: 7px 11px;
  font-size: 13.5px;
}
.contact-showcase-form .form-row textarea { min-height: 46px; }
.contact-showcase-form .form-check { margin: 8px 0 10px; font-size: 12.5px; }
.contact-showcase-form .btn { padding: 10px 24px; font-size: 14px; }
.contact-showcase-form .form-status { min-height: 0; margin-top: 4px; font-size: 12.5px; }
.contact-wrap.contact-live { display: none; }

@media (min-width: 1201px) {
  #como-trabajamos { padding-bottom: 0; border-bottom: none; }
  .section-contact { padding-top: 0; }
}
@media (max-width: 1200px) {
  .contact-showcase { display: none; }
  .contact-wrap.contact-live { display: grid; }
}

.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--space-5);
  align-items: stretch;
  position: relative;
}
.contact-intro {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 480px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.5);
}
.contact-photo {
  position: absolute;
  inset: 0;
  background: url('../img/contact-motif.jpg') center/cover no-repeat;
  z-index: 0;
}
.contact-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(200deg, rgba(6,43,38,0.35) 0%, rgba(6,43,38,0.55) 40%, rgba(6,43,38,0.94) 88%);
}
.contact-intro-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
}
.contact-email {
  display: inline-block;
  margin-top: var(--space-2);
  font-weight: 700;
  color: var(--vatya-teal);
  text-decoration: none;
  font-size: 17px;
}

.upload-form {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
.form-row { margin-bottom: var(--space-3); }
.form-row-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.form-row label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: var(--space-1);
  color: var(--ink-muted);
}
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--vatya-deep);
  color: var(--ink);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: 2px solid var(--vatya-teal);
  outline-offset: 1px;
}
.form-row input[type="file"] { padding: 10px; }
.hp-field { position: absolute; left: -9999px; }
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-muted);
  margin: var(--space-3) 0 var(--space-4);
  cursor: pointer;
}
.form-check input { margin-top: 3px; accent-color: var(--vatya-teal); }
.form-check a { color: var(--ink); text-decoration: underline; }
.form-status { min-height: 20px; font-size: 14px; margin-top: var(--space-2); margin-bottom: 0; }
.form-status.ok { color: var(--vatya-teal); }
.form-status.error { color: #FF8A6B; }

/* ===== footer ===== */
.site-footer {
  position: relative;
  background-color: var(--vatya-deep);
}

/* escritorio/tablet ancho (>960px): el faldón de referencia tal cual,
   con "aspect-ratio" fijado a la proporción real de la imagen (2172:724)
   para que nunca se recorte ni se deforme, y enlaces reales invisibles
   colocados encima de cada palabra ya grabada en la imagen */
.footer-showcase {
  position: relative;
  width: 100%;
  aspect-ratio: 2172 / 724;
  overflow: hidden;
}
.footer-showcase-img {
  display: block;
  width: 100%;
  height: 100%;
}
.footer-hotspots {
  position: absolute;
  inset: 0;
}
.footer-hotspot {
  position: absolute;
  display: block;
  color: transparent;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  overflow: hidden;
}
a.footer-hotspot { cursor: pointer; }
.footer-hotspot:focus-visible {
  outline: 2px solid var(--vatya-teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* móvil/tablet estrecho (≤960px): versión funcional en vivo, texto
   legible normal — ver el bloque "footer-live" en la media query de abajo.
   Selector de dos clases a propósito para ganar siempre a las reglas de
   abajo (display:grid / display:flex) sin depender del orden en la hoja. */
.footer-inner.footer-live,
.footer-legal.footer-live { display: none; }
.footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.15fr 1.2fr;
  gap: var(--space-5);
  padding: 72px 0 var(--space-5);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-col-heading {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vatya-teal);
}
.footer-brand-col { gap: var(--space-3); }
.footer-brand-logo { display: inline-flex; }
.footer-logo { height: 38px; width: auto; }
.footer-tagline { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.5; }
.footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--vatya-teal);
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: background .15s ease, color .15s ease;
}
.footer-social-icon:hover { background: var(--vatya-teal); color: #062B26; }
.footer-social-icon svg { width: 17px; height: 17px; }
.footer-nav-col a,
.footer-legal-col a,
.footer-legal-col span {
  text-decoration: none;
  color: var(--ink);
  font-size: 15px;
}
.footer-nav-col a:hover,
.footer-legal-col a:hover { color: var(--vatya-teal); }
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink);
  font-size: 15px;
}
.footer-contact-item svg { width: 18px; height: 18px; color: var(--vatya-teal); flex: none; }
.footer-legal {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}
.footer-legal p { color: var(--ink-muted); font-size: 13px; margin: 0; }
.footer-tag { letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; }

/* ===== responsive ===== */
@media (max-width: 960px) {
  .hero-strip-live { padding: 110px 0; min-height: 0; }
  .about-wrap { grid-template-columns: 1fr; }
  .about-photo { order: -1; min-height: 280px; }
  .porque-grid { grid-template-columns: 1fr; }
  .porque-visual { order: -1; min-height: 240px; }
  .porque-visual-img { max-width: 360px; }
  .servicios-band { grid-template-columns: 1fr; }
  .servicios-band-photo { min-height: 260px; clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); }
  .market-badge { display: none; }
  /* el faldón-imagen está calibrado para las 4 columnas de escritorio;
     por debajo de ese ancho se apila y ya no encaja, así que se oculta y
     se muestra en su lugar la versión funcional en vivo (texto real) */
  .footer-showcase { display: none; }
  .footer-inner.footer-live,
  .footer-legal.footer-live { display: block; }
  .footer-inner.footer-live { display: grid; grid-template-columns: 1fr 1fr; row-gap: var(--space-5); }
  .footer-legal.footer-live { display: flex; }
  .footer-brand-col { grid-column: 1 / 3; }
}

@media (max-width: 860px) {
  .servicios-showcase-img { display: none; }
  .services-live { display: block; }
  .hero-showcase { display: none; }
  .hero-live { display: block; }
  .mercado-showcase { display: none; }
  .servicios-band { display: grid; }
  .metodo-showcase { display: none; }
  .steps-live { display: block; }
  .hero-strip-showcase { display: none; }
  .hero-strip-live { display: flex; }
  .stats-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service:nth-child(n+3) { padding-top: var(--space-5); border-top: 1px solid var(--line); }
  .service:nth-child(4n+1)::before { display: none; }
  .service:not(:nth-child(2n+1))::before { display: block; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .contact-wrap { grid-template-columns: 1fr; }
  .form-row-half { grid-template-columns: 1fr; }
  .contact-intro { min-height: 320px; }
}

/* la barra a todo el ancho necesita más hueco que el header anterior,
   así que el menú hamburguesa entra antes, a 900px, para evitar que los
   enlaces se partan en varias líneas en anchos intermedios */
@media (max-width: 900px) {
  .header-showcase { display: none; }
  .header-live { display: block; }
  .header-divider { display: none; }
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--vatya-deep);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 var(--space-3) var(--space-3);
    display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav .header-cta { margin-left: 0; }
}

@media (max-width: 640px) {
  .header-content { padding: 14px var(--space-3); }
  .services-grid { grid-template-columns: 1fr; }
  .service::before { display: none !important; }
  .service:nth-child(n+2) { padding-top: var(--space-4); border-top: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; }
  .footer-inner.footer-live { grid-template-columns: 1fr; row-gap: var(--space-4); }
  .footer-brand-col { grid-column: 1; }
  .footer-legal.footer-live { flex-direction: column; align-items: flex-start; }
  .section { padding: 64px 0; }
  .hero-strip-live { padding: var(--space-4) 0; }
}