/* ============================================================
   Constructora Andes — Landing Page
   Estilo editorial inspirado en Barrett Made (Portland, ME):
   - Tipografía condensada extrabold en mayúsculas (Oswald)
   - Fondo papel claro, texto casi negro
   - Acento coral #f0523d
   - Layout plano y minimalista, sin sombras
   Mobile-first.
   ============================================================ */

:root {
  --ink: #272727;        /* texto principal */
  --muted: #6b6b6b;      /* texto secundario */
  --paper: #f6f6f6;      /* fondo claro */
  --white: #ffffff;
  --accent: #f0523d;     /* coral Barrett Made */
  --accent-dark: #d93d28;
  --dark: #0e0e0e;       /* fondos oscuros */
  --line: #e4e4e4;       /* bordes finos */
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 17px; /* ≥16px: evita zoom automático en iOS */
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container { width: min(1160px, 92%); margin-inline: auto; }
.container-narrow { max-width: 760px; }

/* ---------- Tipografía display ---------- */
h1, h2, h3, h4, .logo, .btn, .nav-menu a, .stat-num, .step-num,
.gallery-item figcaption, .footer-grid h4, .hero-badge {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px; /* tap target ≥48px */
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-dark); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--white); }

.btn-lg { padding: 16px 34px; font-size: 16px; }
.btn-sm { min-height: 44px; padding: 10px 20px; font-size: 13px; }
.btn-block { width: 100%; }

/* ---------- Contacto en el header (entre logo y menú) ---------- */
.nav-left {
  display: flex;
  align-items: center;
  gap: 26px;
  min-width: 0;
}
.nav-contact {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-left: 26px;
  border-left: 1px solid var(--line);
}
.nav-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-contact-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  flex-shrink: 0;
}
.nav-contact-icon svg { width: 15px; height: 15px; }
.nav-contact-icon {
  transition: background 0.2s, color 0.2s;
}
.nav-contact-icon:hover { background: var(--accent); color: var(--white); }
/* En escritorio el ícono de WhatsApp no hace nada: solo abre la app en celular */
body:not(.is-mobile) a.nav-contact-icon[href*="wa.me"] {
  pointer-events: none;
}
.nav-contact-text { display: flex; flex-direction: column; line-height: 1.25; }
.nav-contact-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
}
.nav-contact-value { font-size: 13px; color: var(--muted); white-space: nowrap; }
.nav-contact-item:hover .nav-contact-value { color: var(--accent); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: 16px;
}

.logo { display: flex; align-items: center; }
.logo-img {
  height: 48px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  transition: transform 0.25s ease;
}
/* Efecto hover: el logo se agranda suavemente al pasar el mouse */
.logo:hover .logo-img { transform: scale(1.1); }
/* Logo en el footer oscuro: sobre tarjeta blanca para que el fondo
   blanco del JPEG no se vea como un rectángulo */
.logo-img-footer {
  height: auto;
  width: min(240px, 100%);
  background: var(--white);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  transition: transform 0.25s ease;
}
.logo-img-footer:hover { transform: scale(1.06); }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 8px 0 16px;
}
.nav-menu.open { display: flex; }
.nav-menu a {
  display: block;
  padding: 12px 8px;
  min-height: 48px;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--ink);
}
.nav-menu a:hover { color: var(--accent); }
.nav-menu .btn { font-size: 13px; }

/* ---------- Hero ---------- */
.hero {
  background: var(--paper);
  padding: 56px 0 72px;
}

.hero-mark {
  width: 1px;
  height: 56px;
  background: var(--accent);
  margin-bottom: 20px;
}

.hero-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(38px, 7vw, 72px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  max-width: 14em;
}

.hero-sub {
  font-size: 18px;
  color: var(--muted);
  max-width: 44em;
  margin-bottom: 28px;
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.hero-proof {
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-image {
  margin-top: 36px;
  background: var(--line);
}
.hero-image img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

/* ---------- Stats ---------- */
.stats { border-bottom: 1px solid var(--line); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
.stat {
  padding: 28px 12px;
  border-bottom: 1px solid var(--line);
}
.stat:nth-child(odd) { border-right: 1px solid var(--line); }
.stat-num { display: block; font-size: 34px; font-weight: 700; color: var(--ink); }
.stat-label { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

/* ---------- Secciones generales ---------- */
.section { padding: 72px 0; }
.section-alt { background: var(--paper); }

.section-eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  margin-bottom: 10px;
}

.section-title {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.5px;
  line-height: 1.1;
  margin-bottom: 12px;
}

.section-sub { text-align: center; color: var(--muted); max-width: 44em; margin: 0 auto 44px; }

/* ---------- Cards de servicios ---------- */
.cards {
  display: grid;
  gap: 40px 28px;
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
}
.card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.card-body { padding: 18px 0 0; }
.card-body h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.card-body p { color: var(--muted); font-size: 16px; }

/* ---------- Pasos ---------- */
.steps { display: grid; gap: 40px 28px; }
.step {
  border-top: 2px solid var(--ink);
  padding-top: 18px;
}
.step-num {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.step h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.step p { color: var(--muted); }

/* ---------- Galería / Proyectos ---------- */
.gallery { display: grid; gap: 28px 20px; }
.gallery-item { background: var(--white); }
.gallery-media {
  position: relative;
  overflow: hidden;
}
.gallery-media img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, filter 0.35s ease;
}
body:not(.is-mobile) .gallery-item:hover .gallery-media img,
body:not(.is-mobile) .gallery-item:focus-within .gallery-media img {
  transform: scale(1.05);
  filter: brightness(0.7);
}
/* Capa oscura con reseña: aparece al pasar el mouse (hover) */
.gallery-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 22px;
  background: linear-gradient(to top, rgba(14, 14, 14, 0.94) 0%, rgba(14, 14, 14, 0.6) 55%, rgba(14, 14, 14, 0.1) 100%);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
body:not(.is-mobile) .gallery-item:hover .gallery-overlay,
body:not(.is-mobile) .gallery-item:focus-within .gallery-overlay {
  opacity: 1;
  transform: translateY(0);
}
.gallery-overlay-type {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
}
.gallery-overlay-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--white);
  line-height: 1.15;
}
.gallery-overlay-text { color: #d6d6d6; font-size: 14px; line-height: 1.5; }
.gallery-overlay-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
  transition: color 0.2s;
}
.gallery-overlay-link span { color: var(--accent); transition: transform 0.2s; }
body:not(.is-mobile) .gallery-item:hover .gallery-overlay-link span,
body:not(.is-mobile) .gallery-item:focus-within .gallery-overlay-link span { transform: translateX(4px); }
.gallery-overlay-link:hover { color: var(--accent); }

/* Móvil (táctil): tocar la foto muestra la reseña sin abrir el proyecto.
   El efecto "hover" no existe en táctil, así que se controla con una
   clase .revealed que agrega el JS al tocar la tarjeta. */
body.is-mobile .gallery-media { cursor: pointer; }
body.is-mobile .gallery-item.revealed .gallery-media img {
  transform: scale(1.05);
  filter: brightness(0.7);
}
body.is-mobile .gallery-item.revealed .gallery-overlay {
  opacity: 1;
  transform: translateY(0);
}
/* En móvil el enlace "Ver proyecto" no se muestra: solo la reseña */
body.is-mobile .gallery-overlay-link { display: none; }

.gallery-item figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--ink);
}
.gallery-item figcaption em { font-style: normal; color: var(--accent); }

/* ---------- Testimonios ---------- */
.testimonials { display: grid; gap: 20px; }
.testimonial {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  padding: 24px;
}
.testimonial p { font-size: 17px; margin-bottom: 14px; }
.testimonial footer {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- FAQ ---------- */
.faq { display: grid; }
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item:first-of-type { border-top: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 18px 0;
  min-height: 48px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; font-family: var(--font-body); color: var(--accent); }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { padding: 0 0 20px; color: var(--muted); max-width: 52em; }

/* ---------- CTA final + formulario ---------- */
.section-cta {
  background: var(--dark);
  color: var(--white);
  text-align: center;
}
.section-cta h2 { font-size: clamp(30px, 5vw, 48px); font-weight: 700; margin-bottom: 14px; }
.section-cta > .container > p { color: #9a9a9a; margin-bottom: 36px; }

.contact-form {
  text-align: left;
  background: var(--white);
  color: var(--ink);
  padding: 32px;
  display: grid;
  gap: 8px;
}
.contact-form label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 10px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 0;
  font-size: 17px;
  font-family: inherit;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
}
.contact-form textarea { min-height: 80px; resize: vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.contact-form .btn { margin-top: 24px; }
.form-note {
  background: #fdf3f2;
  color: #b33525;
  border: 1px solid #f3c5bf;
  padding: 14px;
  margin-top: 14px;
  font-weight: 600;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--dark);
  color: #9a9a9a;
  padding: 56px 0 28px;
}
.footer-grid {
  display: grid;
  gap: 32px;
  margin-bottom: 40px;
}

.footer-grid h4 {
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.footer-grid ul { display: grid; gap: 6px; }
.footer-grid a:hover { color: var(--accent); }
.footer-bottom {
  text-align: center;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6b6b6b;
  border-top: 1px solid #262626;
  padding-top: 22px;
}

/* ============================================================
   Móvil < 960px: contacto compacto (solo íconos, sin texto)
   ============================================================ */
@media (max-width: 959px) {
  /* El menú desplegable baja a su propia fila (ancho completo) en vez de
     apretarse al lado del logo y quedar descuadrado */
  .nav { flex-wrap: wrap; }
  .nav-left { flex: 1; min-width: 0; flex-wrap: wrap; }

  /* nav-contact pierde su caja: sus hijos (íconos de teléfono y la dirección)
     pasan a ser items directos de nav-left. Así los íconos quedan en la fila
     del logo y la dirección baja sola a su línea, a ancho completo */
  .nav-contact { display: contents; }
  /* Teléfono: solo los íconos circulares, sin texto */
  .nav-contact-text { display: none; }
  /* Dirección: visible en su propia línea, a ancho completo */
  .nav-contact-item:last-child {
    display: flex;
    flex-basis: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .nav-contact-item:last-child .nav-contact-text { display: flex; }
  .nav-contact-item:last-child .nav-contact-value {
    white-space: normal;
    line-height: 1.35;
  }
}

/* ---------- Modal de proyecto (reseña + galería) ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 14, 0.82);
  backdrop-filter: blur(2px);
}
.modal-panel {
  position: relative;
  width: min(704px, 100%); /* 20% más angosto: la foto principal cabe sin monitor grande */
  max-height: 92vh;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 36px;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--white);
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}
.modal-close:hover { background: var(--accent-dark); }
.modal-eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.modal-title {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink);
  margin-bottom: 12px;
}
.modal-resena {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 60em;
  margin-bottom: 24px;
}
.modal-main {
  background: var(--line);
  cursor: zoom-in;
  margin-bottom: 14px;
}
.modal-main img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.modal-thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.modal-thumbs button {
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s, opacity 0.2s;
}
.modal-thumbs button img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.modal-thumbs button:hover { opacity: 0.85; }
.modal-thumbs button.active { border-color: var(--accent); }
.modal-hint {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Lightbox (foto en pantalla completa) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.94);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--white);
  font-size: 26px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.lightbox-close:hover { background: var(--accent); border-color: var(--accent); }
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--white);
  font-size: 34px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-arrow:hover { background: var(--accent); border-color: var(--accent); }

@media (max-width: 640px) {
  .modal-panel { padding: 24px 16px; }
  .modal-thumbs { grid-template-columns: repeat(3, 1fr); }
  .lightbox-arrow { width: 44px; height: 44px; font-size: 26px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }

  /* Hero compacto en móvil: menos espacio muerto bajo el header
     (la barra naranja más corta y menos padding arriba) */
  .hero { padding-top: 28px; }
  .hero-mark { height: 28px; margin-bottom: 12px; }
  .hero-badge { margin-bottom: 10px; }
  .hero h1 { margin-bottom: 16px; }
  .hero-sub { margin-bottom: 22px; }
}

/* ============================================================
   ALTICORP — Páginas internas (empresa, servicios, proyectos, contacto)
   ============================================================ */

/* Enlace activo en la navegación */
.nav-menu a.active { color: var(--accent); }
.nav-menu .btn.active { color: var(--white); }

/* Hero de página interna */
.page-hero {
  background: var(--paper);
  padding: 64px 0 72px;
  text-align: center;
}
.page-hero h1 {
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}
.page-hero-sub {
  font-size: 17px;
  color: var(--muted);
  max-width: 46em;
  margin: 0 auto;
}

/* Sección dividida (texto + imagen) */
.split { display: grid; gap: 36px; align-items: center; }
.split-p { color: var(--muted); margin-bottom: 14px; max-width: 46em; }
.split-p strong { color: var(--ink); }
.split-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.split-image img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.section-eyebrow-left { text-align: left; }
.section-title-left { text-align: left; max-width: 18em; }

/* Chips (disciplinas y especialidades) */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
}
.chips li {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 10px 18px;
}
.chips-note {
  max-width: 46em;
  margin: 32px auto 0;
  text-align: center;
  color: var(--muted);
}

/* Equipo multidisciplinario */
.team-grid { display: grid; gap: 32px 28px; max-width: 980px; margin: 0 auto; }
.team-card { border-top: 2px solid var(--ink); padding-top: 16px; }
.team-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.team-card p { color: var(--muted); font-size: 15px; }
.team-extra {
  max-width: 44em;
  margin: 44px auto 18px;
  text-align: center;
  color: var(--ink);
}

/* Cita central */
.quote-block {
  max-width: 680px;
  margin: 48px auto 0;
  text-align: center;
  border-top: 2px solid var(--accent);
  padding-top: 24px;
}
.quote-block-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.quote-block p:last-child { color: var(--muted); }

/* Principios */
.principles { display: grid; gap: 32px 28px; }
.principle { border-top: 2px solid var(--ink); padding-top: 16px; }
.principle-num {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 8px;
}
.principle h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.principle p { color: var(--muted); }

/* CTA centrado bajo secciones */
.section-cta-center { text-align: center; margin-top: 44px; }

/* Botones sobre fondo oscuro (banda CTA) */
.cta-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.btn-ghost-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.6);
}
.btn-ghost-light:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* Enlace dentro de las cards de servicios (home) */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
  transition: color 0.2s;
}
.card-link span { color: var(--accent); transition: transform 0.2s; }
.card-link:hover { color: var(--accent); }
.card-link:hover span { transform: translateX(4px); }

/* Filas de servicio (página servicios) */
.service-row {
  display: grid;
  gap: 24px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.service-row:first-of-type { border-top: none; }
.service-media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.service-num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 6px;
}
.service-body h2 {
  font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}
.service-body p { color: var(--muted); margin-bottom: 12px; max-width: 46em; }

/* Bloques de proyecto (página proyectos) */
.project-block {
  border-top: 2px solid var(--ink);
  padding-top: 26px;
}
.project-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.project-num {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.project-tags {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.project-head h2 {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.1;
}
.project-media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.project-text { max-width: 52em; margin-top: 20px; }
.project-text p { color: var(--muted); margin-bottom: 12px; }
.project-actions { margin-top: 20px; }

/* Proyectos relacionados (Vitel) */
.related {
  margin-top: 48px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.related-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.related-sub { color: var(--muted); margin: 6px 0 20px; }
.related-grid { display: grid; gap: 20px; }
.related-card { border: 1px solid var(--line); padding: 20px; }
.related-card h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.related-card p { color: var(--muted); font-size: 15px; margin-bottom: 8px; }
.related-caps {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent) !important;
}

/* Cards de contacto */
.contact-cards { display: grid; gap: 16px; }
.contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  padding: 18px 20px;
  transition: border-color 0.2s;
}
a.contact-card:hover { border-color: var(--accent); }
.contact-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  flex-shrink: 0;
}
.contact-card-icon svg { width: 20px; height: 20px; }
.contact-card-label {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 2px;
}
.contact-card-value { font-size: 15px; color: var(--muted); }

/* ============================================================
   Tablet ≥ 640px
   ============================================================ */
@media (min-width: 640px) {
  .hero { padding: 80px 0 96px; }
  .hero-ctas { flex-direction: row; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .stat { border-bottom: none; }
  .stat:nth-child(odd) { border-right: none; }
  .stat:not(:last-child) { border-right: 1px solid var(--line); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }

  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .principles { grid-template-columns: repeat(3, 1fr); }
  .cta-buttons { flex-direction: row; }
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Desktop ≥ 960px
   ============================================================ */
@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .nav-contact { display: flex; }
  .nav-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    width: auto;
    padding: 0;
    border-top: none;
  }
  .nav-menu a { border-bottom: none; padding: 8px 0; font-size: 13px; }

  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .hero-image { margin-top: 0; }

  .cards { grid-template-columns: repeat(3, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); } /* 3 proyectos emblemáticos */

  .split { grid-template-columns: 1.05fr 1fr; gap: 56px; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-cards { grid-template-columns: repeat(4, 1fr); }

  .service-row {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    padding: 56px 0;
  }
  .service-row:nth-child(even) .service-media { order: 2; }

  .project-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
  }
  .project-num { order: 2; }
}