/* ============================================================
   Stragitech PR — Editorial Suizo
   Brand: naranja #fe5a13 · azul #0089f7 · tinta #161922
   Fonts: Bricolage Grotesque (display/body) · Spline Sans Mono (labels)
   ============================================================ */

:root {
  --naranja: #fe5a13;
  --naranja-claro: #fd804a;
  --naranja-oscuro: #c23c05;
  --azul: #0089f7;
  --tinta: #161922;
  --fondo: #f4f3ef;
  --blanco: #ffffff;
  --gris: #3a3d46;
  --gris-suave: #4c4f58;
  --gris-footer: #8d919c;
  --linea-footer: #2a2e3a;
  --sans: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Spline Sans Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tinta); }
a:hover { color: var(--naranja); }

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

.contenedor {
  max-width: 1240px;
  margin: 0 auto;
}

/* ---------- NAV ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 18px 32px;
  border-bottom: 1px solid var(--tinta);
  background: rgba(244, 243, 239, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nav-logo {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.nav-logo span { color: var(--naranja); }

.nav-logo img { height: 40px; width: auto; display: block; }

.nav-links {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  font-size: 14px;
  font-family: var(--mono);
}

.nav-links a { text-decoration: none; }

.btn-idioma {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  background: transparent;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
}

.btn-idioma:hover { color: var(--naranja); border-color: var(--naranja); }

.nav-tel {
  background: var(--tinta);
  color: var(--blanco);
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.nav-tel:hover { background: var(--naranja); color: var(--blanco); }

/* ---------- HERO ---------- */

.hero {
  padding: 72px 32px 56px;
  border-bottom: 1px solid var(--tinta);
}

.hero .contenedor {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.meta-linea {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gris-suave);
}

.meta-linea .punto { color: var(--naranja); }

.hero h1 {
  margin: 0;
  font-size: clamp(52px, 8.5vw, 124px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.hero h1 .acento {
  color: var(--naranja);
  font-style: italic;
  font-weight: 700;
}

.hero h1 .punto-azul { color: var(--azul); }

.hero-abajo {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-end;
}

.hero-sub {
  margin: 0;
  max-width: 520px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--gris);
}

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

.btn-primario {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--naranja);
  color: var(--blanco);
  padding: 18px 34px;
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

.btn-primario:hover { background: var(--tinta); color: var(--blanco); }

.btn-secundario {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--tinta);
  padding: 18px 34px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

/* ---------- MARQUEE ---------- */

.marquee {
  background: var(--naranja);
  color: var(--blanco);
  overflow: hidden;
  padding: 14px 0;
  border-bottom: 1px solid var(--tinta);
}

.marquee-pista {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: cinta 22s linear infinite;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
}

.marquee-pista span { padding-right: 48px; }

@keyframes cinta {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-pista { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- SECCIONES ---------- */

.seccion {
  padding: 80px 32px;
  border-bottom: 1px solid var(--tinta);
}

.seccion-blanca { background: var(--blanco); }

.seccion-cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.seccion h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.nota-mono {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gris-suave);
}

/* ---------- TRABAJOS ---------- */

.trabajos .contenedor { display: flex; flex-direction: column; gap: 44px; }

.trabajos-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 760px;
  gap: 24px;
}

.caso { margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.caso-marco {
  display: block;
  border: 1px solid var(--tinta);
  border-radius: 10px;
  overflow: hidden;
  background: var(--fondo);
}

a.caso-marco:hover { border-color: var(--naranja); }

.caso-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: top;
}

/* tarjeta con tour: la captura alta scrollea dentro de la ventana */

.caso-ventana { height: 400px; overflow: hidden; overflow: clip; }

.caso-img-scroll {
  width: 100%;
  height: auto;
  transform: translateY(0);
  transition: transform 1.4s ease;
}

a.caso-marco:hover .caso-img-scroll,
a.caso-marco:focus-visible .caso-img-scroll {
  transform: translateY(calc(-100% + 400px));
  transition: transform 8s linear;
}

@media (hover: none) {
  .caso-img-scroll { animation: tour-caso 18s ease-in-out infinite; }
}

@keyframes tour-caso {
  0%, 10% { transform: translateY(0); }
  45%, 58% { transform: translateY(calc(-100% + 400px)); }
  93%, 100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .caso-img-scroll { animation: none; transition: none; }
  a.caso-marco:hover .caso-img-scroll { transform: none; }
}

.caso-barra {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--tinta);
  background: var(--blanco);
}

.caso-barra span { width: 9px; height: 9px; border-radius: 999px; }
.caso-barra .p1 { background: var(--naranja); }
.caso-barra .p2 { background: var(--azul); }
.caso-barra .p3 { background: var(--tinta); }

.caso-lienzo {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 72px;
  letter-spacing: -0.04em;
}

.caso figcaption { display: flex; flex-direction: column; gap: 4px; }
.caso figcaption strong { font-size: 18px; }
.caso figcaption .tag { font-family: var(--mono); font-size: 12px; color: var(--gris-suave); }

/* ---------- SERVICIOS ---------- */

.servicios .contenedor { display: flex; flex-direction: column; }

.servicios .seccion-cabecera { padding-bottom: 28px; }

.servicio {
  border-top: 1px solid var(--tinta);
  padding: 28px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: baseline;
}

.servicio:last-of-type { border-bottom: 1px solid var(--tinta); }

.servicio .num {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--naranja);
  min-width: 56px;
}

.servicio h3 {
  margin: 0;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  flex: 1 1 300px;
  letter-spacing: -0.01em;
}

.servicio p {
  margin: 0;
  flex: 1 1 320px;
  max-width: 440px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--gris);
}

/* ---------- PROCESO ---------- */

.proceso .contenedor { display: flex; flex-direction: column; gap: 48px; }

.proceso-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--tinta);
  border: 1px solid var(--tinta);
}

.paso {
  background: var(--blanco);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.paso .num {
  font-family: var(--mono);
  font-size: 48px;
  font-weight: 600;
  color: var(--naranja);
}

.paso h3 { margin: 0; font-size: 24px; font-weight: 700; }

.paso p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--gris); }

/* ---------- NOSOTROS ---------- */

.nosotros { padding: 88px 32px; }

.nosotros .contenedor {
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.etiqueta-mono {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--naranja);
}

.nosotros-texto {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.nosotros-texto .resalte { color: var(--naranja); font-weight: 700; }

.chips { display: flex; flex-wrap: wrap; gap: 12px; font-family: var(--mono); font-size: 13px; }

.chip {
  border: 1px solid var(--tinta);
  border-radius: 999px;
  padding: 8px 18px;
}

.chip-naranja {
  border-color: var(--naranja);
  color: var(--naranja-oscuro);
}

.testimonio {
  margin: 0;
  border-left: 3px solid var(--naranja);
  padding: 8px 0 8px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.testimonio blockquote {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  font-style: italic;
  color: var(--gris);
}

.testimonio figcaption { font-family: var(--mono); font-size: 13px; color: var(--gris-suave); }

/* ---------- FAQ ---------- */

.faq .contenedor { max-width: 900px; display: flex; flex-direction: column; gap: 32px; }

.faq-lista { display: flex; flex-direction: column; }

.faq-item { border-top: 1px solid var(--tinta); }
.faq-item:last-of-type { border-bottom: 1px solid var(--tinta); }

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 4px;
  min-height: 44px;
  font-size: 20px;
  font-weight: 700;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-family: var(--mono);
  font-size: 24px;
  color: var(--naranja);
  flex-shrink: 0;
}

.faq-item[open] summary::after { content: '−'; }

.faq-item p {
  margin: 0;
  padding: 0 4px 28px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gris);
  max-width: 720px;
}

/* ---------- CONTACTO ---------- */

.contacto {
  padding: 96px 32px;
  background: var(--tinta);
  color: var(--blanco);
  border-bottom: none;
}

.contacto .contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
}

.contacto-info {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.contacto-info .etiqueta-mono { color: var(--naranja-claro); }

.contacto h2 {
  margin: 0;
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.contacto h2 .punto { color: var(--naranja); }

.contacto-datos { display: flex; flex-direction: column; gap: 14px; }

.tel-grande {
  color: var(--blanco);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  text-decoration: none;
  font-family: var(--mono);
}

.tel-grande:hover { color: var(--naranja-claro); }

.dato-suave {
  color: #aeb2bd;
  font-size: 17px;
  font-family: var(--mono);
  text-decoration: none;
}

.dato-suave:hover { color: var(--naranja-claro); }

.correo { text-decoration: underline; font-family: var(--sans); }

.contacto-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris-footer);
  max-width: 380px;
}

/* formulario */

.formulario {
  flex: 1 1 420px;
  min-width: 0;
  background: var(--blanco);
  color: var(--tinta);
  border-radius: 14px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.formulario h3 { margin: 0; font-size: 24px; font-weight: 800; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.campo label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gris-suave);
}

.campo input,
.campo textarea {
  border: 1px solid var(--tinta);
  border-radius: 8px;
  padding: 13px 14px;
  font-size: 15px;
  font-family: var(--sans);
  background: var(--fondo);
  min-width: 0;
  color: var(--tinta);
}

.campo textarea { resize: vertical; }

.campo input:focus,
.campo textarea:focus { outline: 2px solid var(--naranja); }

.form-nota {
  font-family: var(--mono);
  font-size: 11px;
  color: #7e828d;
}

.form-exito {
  display: none;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--naranja-oscuro);
}

.form-exito.visible { display: block; }

/* ---------- FOOTER ---------- */

.footer {
  background: var(--tinta);
  color: var(--gris-footer);
  border-top: 1px solid var(--linea-footer);
  padding: 48px 32px 32px;
}

.footer .contenedor { display: flex; flex-direction: column; gap: 36px; }

.footer-columnas {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}

.footer-marca { display: flex; flex-direction: column; gap: 12px; max-width: 300px; }

.footer-marca .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blanco);
  font-weight: 800;
  font-size: 20px;
}

.logo-icon { height: 28px; width: auto; }

.footer-marca .logo span { color: var(--naranja); }

.footer-marca p { margin: 0; font-size: 14px; line-height: 1.6; }

.redes { display: flex; gap: 16px; }

.redes a { color: var(--gris-footer); display: inline-flex; padding: 2px; }
.redes a:hover { color: var(--naranja-claro); }
.redes svg { width: 20px; height: 20px; }

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
}

.footer-col .titulo { color: var(--blanco); font-weight: 600; }

.footer-col a { color: var(--gris-footer); text-decoration: none; }
.footer-col a:hover { color: var(--naranja-claro); }

.footer-legal {
  border-top: 1px solid var(--linea-footer);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 760px) {
  .nav { padding: 14px 16px; gap: 10px; }
  .nav-logo img { height: 32px; }
  .nav-links { order: 3; flex-basis: 100%; justify-content: flex-start; gap: 16px; }
  .hero, .seccion, .nosotros, .contacto { padding-left: 16px; padding-right: 16px; }
  .trabajos-grid { grid-template-columns: 1fr; }
  .proceso-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .formulario { padding: 24px; }
}