/* DataSP — estilos del sitio */

:root {
  --verde: #0B6B3A;
  --verde-hover: #08502B;
  --lima: #C8F04B;
  --tinta: #0E1A13;
  --texto: #33433A;
  --gris: #4A5A50;
  --linea: #DDE2DA;
  --papel: #F4F5F0;
  --marco: #E9ECE5;
  --blanco: #FFFFFF;

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --ancho: 1200px;
  --gutter: 24px;
  --radio: 16px;
  --sombra: 0 18px 40px rgba(14, 26, 19, 0.12);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 16px; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--verde); }
a:hover { color: var(--verde-hover); }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 4px; }

.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  padding: 10px 16px; border-radius: 8px;
  background: var(--tinta); color: var(--blanco); text-decoration: none;
}
.saltar:focus { top: 16px; }

.contenedor {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Tipografía compartida */

.etiqueta {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}
.etiqueta--lima { color: var(--lima); }

h2 {
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
}

/* Iconos y botones */

.icono {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

.botones { display: flex; flex-wrap: wrap; gap: 12px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px;
  font-weight: 700; font-size: 17px;
  text-decoration: none;
  transition: background-color 150ms, color 150ms, transform 150ms;
}
.boton:active { transform: translateY(1px); }
.boton--verde { background: var(--verde); color: var(--blanco); }
.boton--verde:hover { background: var(--verde-hover); color: var(--blanco); }
.boton--oscuro { background: var(--tinta); color: var(--blanco); }
.boton--oscuro:hover { background: #22332A; color: var(--blanco); }
.boton--borde { border: 1.5px solid var(--tinta); color: var(--tinta); font-weight: 600; }
.boton--borde:hover { background: var(--tinta); color: var(--blanco); }
.boton--chico { min-height: 44px; padding: 0 18px; font-size: 16px; font-weight: 600; gap: 8px; }
.boton--grande { min-height: 56px; padding: 0 28px; font-size: 18px; }

/* Logo */

.pieza-data { fill: var(--verde); }
.pieza-sp path, .pieza-oscura { fill: var(--tinta); }
.logo-txt { font-family: var(--display); font-weight: 800; font-size: 26px; }
.logo-txt--data { fill: var(--blanco); letter-spacing: -1px; }
.logo-txt--sp { fill: var(--lima); letter-spacing: -0.5px; }

@keyframes encaje {
  0%   { transform: translate(12px, -6px) rotate(8deg); }
  70%  { transform: translate(-0.6px, 0.3px) rotate(-0.6deg); }
  100% { transform: none; }
}
.pieza-sp {
  transform-box: fill-box;
  transform-origin: center;
  animation: encaje 700ms cubic-bezier(.2, .8, .2, 1) 250ms both;
}

/* Nav */

.nav { border-bottom: 1px solid var(--linea); }
.nav__fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 18px;
}
.nav__logo { display: flex; align-items: center; min-height: 44px; }
.nav__links {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 28px; font-size: 16px; font-weight: 500;
}
.nav__links a:not(.boton) { color: var(--tinta); text-decoration: none; }
.nav__links a:not(.boton):hover { color: var(--verde); }

/* Hero */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 56px;
  align-items: center;
  padding-block: 72px 88px;
}
.hero__texto { display: flex; flex-direction: column; gap: 28px; }
.hero h1 {
  font-size: clamp(42px, 6.4vw, 84px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.hero mark {
  background: var(--lima); color: inherit;
  padding: 0 0.12em; border-radius: 0.12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero__bajada { max-width: 34ch; font-size: 21px; color: var(--texto); }

.hero__collage { position: relative; aspect-ratio: 10 / 8.4; }
.hero__shot {
  position: absolute;
  border-radius: 12px;
  border: 1px solid var(--linea);
  background: var(--blanco);
  box-shadow: var(--sombra);
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.hero__shot--1 { left: 0; top: 0; width: 78%; }
.hero__shot--2 { right: 0; top: 25%; width: 66%; }
.hero__shot--3 { left: 8%; bottom: 0; width: 56%; }

/* Franja de servicios */

.franja { background: var(--tinta); color: var(--blanco); }
.franja__lista {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 12px 32px; padding-block: 22px;
  font-family: var(--mono); font-size: 15px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.franja__lista li + li::before { content: "/"; color: var(--lima); margin-right: 32px; }

/* Secciones */

.seccion { display: flex; flex-direction: column; gap: 40px; padding-block: 88px 24px; }
.seccion--abajo { padding-bottom: 96px; }
.seccion__titulo { display: flex; flex-direction: column; gap: 12px; }
.seccion__titulo--fila {
  flex-direction: row; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-end; gap: 16px;
}
.seccion__titulo--fila > div { display: flex; flex-direction: column; gap: 12px; }
.seccion__nota { max-width: 36ch; color: var(--gris); }

.grilla { display: grid; gap: 16px; }
.grilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

/* Qué resuelvo */

.problema { display: flex; flex-direction: column; gap: 18px; padding: 28px; }
.problema__tipo, .proyecto__tipo {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--verde);
}
.problema__queja { font-size: 17px; color: var(--gris); padding-bottom: 18px; border-bottom: 1px solid var(--linea); }
.problema__solucion { font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }

/* Proyectos */

.proyecto { overflow: hidden; display: flex; flex-direction: column; border-radius: 20px; }
.proyecto--destacado { flex-direction: row; flex-wrap: wrap; }
.proyecto__marco { background: var(--marco); padding: 28px; display: flex; align-items: center; }
.proyecto--destacado .proyecto__marco { flex: 999 1 520px; min-width: 0; }
.proyecto__marco--arriba { padding: 24px 24px 0; }

.proyecto__texto { display: flex; flex-direction: column; gap: 14px; padding: 32px; }
.proyecto--destacado .proyecto__texto { flex: 1 1 320px; min-width: 0; justify-content: center; gap: 18px; padding: 40px; }
.proyecto h3 { font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; }
.proyecto--destacado h3 { font-size: 34px; line-height: 1.05; letter-spacing: -0.03em; }
.proyecto__texto > p:not(.proyecto__tipo) { color: var(--texto); }

.navegador {
  width: 100%;
  border-radius: 10px; overflow: hidden;
  border: 1px solid #D3D9D0; background: var(--blanco);
  box-shadow: 0 12px 30px rgba(14, 26, 19, 0.10);
}
.navegador--cortado { border-bottom: 0; border-radius: 10px 10px 0 0; box-shadow: none; }
.navegador--cortado img { aspect-ratio: 16 / 9.2; object-fit: cover; object-position: top; }
.navegador__barra {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; border-bottom: 1px solid #E3E7E0;
}
.navegador__barra > span:not(.navegador__url) { width: 9px; height: 9px; border-radius: 50%; background: #D3D9D0; }
.navegador__url {
  margin-left: 10px; font-family: var(--mono); font-size: 12px; color: var(--gris);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.chips li { padding: 6px 10px; border-radius: 999px; background: var(--papel); }

.enlace { font-weight: 600; align-self: flex-start; min-height: 32px; display: inline-flex; align-items: center; }

/* Cómo trabajo */

.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  border-top: 2px solid var(--tinta);
}
.pasos li { display: flex; flex-direction: column; gap: 10px; padding: 28px 28px 0 0; }
.pasos__num { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--verde); }
.pasos h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.pasos p { color: var(--gris); }

/* Desde 2013 */

.historia { background: var(--tinta); color: var(--blanco); }
.historia__fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 40px; padding-block: 80px;
}
.historia__texto { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.historia__frase { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; font-weight: 500; letter-spacing: -0.015em; }
.historia__coords {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.1em;
  text-transform: uppercase; line-height: 1.8; color: #B8C4BC;
}

/* Contacto */

.contacto { background: var(--lima); }
.contacto__fila {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  align-items: start; gap: 48px 64px; padding-block: 88px;
}
.contacto__texto { display: flex; flex-direction: column; gap: 22px; }
.contacto h2 { max-width: 14ch; font-size: clamp(40px, 6vw, 76px); line-height: 0.98; letter-spacing: -0.04em; }
.contacto__bajada { max-width: 34ch; font-size: 20px; color: var(--tinta); }
.contacto__mail { font-size: 17px; }
.contacto__mail a { color: var(--tinta); font-weight: 700; }
.contacto__mail a:hover { color: var(--verde); }

/* Formulario */

.formulario {
  display: flex; flex-direction: column; gap: 18px;
  padding: 32px; border-radius: var(--radio);
  background: var(--blanco); box-shadow: var(--sombra);
}
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 16px; font-weight: 700; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1.5px solid var(--linea); border-radius: 10px;
  background: var(--papel); color: var(--tinta);
  font: inherit; font-size: 17px; line-height: 1.4;
  transition: border-color 150ms, background-color 150ms;
}
.campo textarea { min-height: 128px; resize: vertical; }
.campo select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230E1A13' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.campo input::placeholder, .campo textarea::placeholder { color: #7A877F; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #B9C2B6; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--verde); background: var(--blanco);
  box-shadow: 0 0 0 3px rgba(11, 107, 58, 0.18);
}
.campo [aria-invalid="true"] { border-color: #B3261E; }
.campo__ayuda { font-size: 14px; color: var(--gris); }
.campo__error { font-size: 14px; font-weight: 600; color: #B3261E; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario__enviar { width: 100%; margin-top: 4px; border: 0; cursor: pointer; font-family: inherit; }
.formulario__enviar[disabled] { opacity: 0.6; cursor: wait; }
.formulario__estado:empty { display: none; }
.formulario__estado { padding: 14px 16px; border-radius: 10px; font-size: 16px; font-weight: 600; }
.formulario__estado--ok { background: #E3F4D2; color: var(--verde-hover); }
.formulario__estado--error { background: #FBE4E2; color: #8C1D18; }

/* Página de gracias (sin JavaScript) */

.gracias {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 20px; padding-block: 64px;
}
.gracias h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; }
.gracias p:not(.etiqueta) { color: var(--texto); font-size: 20px; max-width: 40ch; }

/* Pie */

.pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding-block: 28px; font-size: 15px; color: var(--gris);
}

/* 404 */

.error404 {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 20px; padding-block: 64px;
}
.error404 h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; }
.error404 p:not(.etiqueta) { color: var(--texto); font-size: 20px; }

/* Celular */

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  body { font-size: 17px; }
  .nav__fila { flex-wrap: nowrap; padding-block: 12px; }
  .nav__links a:not(.boton) { display: none; }
  .hero { padding-block: 48px 64px; gap: 40px; }
  .hero__bajada { font-size: 19px; }
  .botones .boton { flex: 1 1 100%; }
  .franja__lista { justify-content: flex-start; gap: 8px 16px; font-size: 13px; }
  .franja__lista li + li::before { margin-right: 16px; }
  .seccion { padding-top: 64px; gap: 28px; }
  .proyecto__marco { padding: 16px; }
  .proyecto__marco--arriba { padding: 16px 16px 0; }
  .proyecto__texto, .proyecto--destacado .proyecto__texto { padding: 24px; }
  .historia__fila, .contacto__fila { padding-block: 64px; }
  .formulario { padding: 22px 18px; }
}

@media (max-width: 900px) {
  .contacto__fila { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pieza-sp { animation: none; }
  .boton { transition: none; }
}