/* Iconos vectoriales: el teléfono no puede convertirlos en emojis. */
.icon-arrow { width: 20px; height: 20px; flex: 0 0 20px; display: block; }

@media (max-width: 700px) {
  .wrap { width: calc(100% - 40px); }
  .header { height: auto; min-height: 112px; padding: 14px 20px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; }
  .header .brand { width: 140px; height: 58px; margin: 0; transform: none; }
  .header .brand img { width: 208px; height: 208px; left: -35px; top: -77px; }
  .header .button.small { justify-self: end; min-height: 44px; padding: 10px 0; }
  .header nav { grid-column: 1 / -1; grid-row: 2; gap: 26px; font-size: 14px; }
  .header nav a { padding: 6px 0; }
  .header nav a:last-child { display: block; }
  .hero, .services, .about { background-image: none; padding-bottom: 0; }
  .hero { display: flow-root; }
  .hero-layout { background: none; padding: 32px 0 26px; }
  .hero h1 { font-size: clamp(38px, 10vw, 58px); line-height: 1.08; }
  .hero-copy, .about-copy, .service-list, .services .section-heading { width: 100%; min-width: 0; }
  .hero .intro { font-size: 18px; }
  .actions { align-items: flex-start; gap: 14px; }
  .actions .button { max-width: 100%; padding: 16px 18px; gap: 14px; }
  h2, .about h2 { font-size: clamp(32px, 8.5vw, 41px); line-height: 1.13; overflow-wrap: break-word; }
  .section { padding-top: 48px; }
  .services, .about { padding-bottom: 0; }
  /* Imágenes decorativas en su propio bloque, fuera del área del texto. */
  .hero::after, .services::after, .about::after { content: ''; display: block; width: 100%; background-repeat: no-repeat; background-position: right bottom; margin-top: 10px; }
  .hero::after { height: 255px; background-image: url('../assets/portada-geometria-cairo.png'); background-size: auto 310px; }
  .services::after { height: 220px; background-image: url('../assets/servicios-geometria-cairo.png'); background-size: auto 290px; margin-top: 26px; }
  .about::after { height: 270px; background-image: url('../assets/05-estudio.png'); background-size: auto 310px; margin-top: 26px; }
  .service-list { gap: 26px; margin-top: 30px; }
  .service-list article, .steps article { min-width: 0; }
  .service-list p, .steps p { font-size: 16px; line-height: 1.65; }
  .vision { padding-bottom: 42px; }
  .portfolio-image { margin: 28px 0 0; }
  .portfolio-image img { margin: 0; }
  .portfolio-labels { gap: 12px; margin-top: 12px; }
  .portfolio-labels > span { min-width: 0; font-size: 13px; overflow-wrap: break-word; }
  .portfolio-labels small { font-size: 12px; line-height: 1.5; }
  .concept-note { margin-top: 24px; }
  .process { padding-bottom: 48px; }
  .steps { margin-top: 28px; gap: 26px; }
  .about-copy > p:not(.eyebrow) { font-size: 17px; }
  .contact { padding: 48px 0 26px; background: #c66a3d; }
  .contact h2 { font-size: clamp(32px, 8.5vw, 44px); line-height: 1.15; }
  .contact .button { max-width: 100%; }
  .email { max-width: 100%; font-size: 15px; }
  .contact footer { display: grid; grid-template-columns: 1fr; gap: 22px; margin: 26px 0 0; padding: 0; align-items: start; }
  .contact footer::before { content: ''; display: block; height: 210px; background: url('../assets/06-contacto.png') right bottom / auto 290px no-repeat; }
  .contact footer p { max-width: none; font-size: 13px; }
  .contact footer > a:last-child { justify-self: start; text-align: left; }
  .footer-logo { width: 172px; height: 69px; margin: 0; transform: none; }
}