/* ============================================================================
   ZiZu® — styles.css
   Sistema "Modernist": tipografía Archivo, fondo #f3f2f2, acento #ec3013,
   esquinas rectas. Este archivo es la fuente de verdad del aspecto del sitio.

   Índice
   ------
   01. Fuentes (@font-face)
   02. Tokens de diseño (:root)
   03. Base / reset
   04. Componentes (botones, navegación)
   05. Utilidades
   06. Layout general
   07. Navegación (enlaces con volteo)
   08. Hero
   09. Trabajo seleccionado
   10. Sobre nosotros
   11. Servicios (filas con volteo)
   12. Clientes (marquesina)
   13. Contacto
   14. Pie de página
   15. Placeholders de imagen
   16. Animaciones y movimiento reducido
   17. Modal de contacto
   18. Mobile (max-width: 720px)
   19. Botón flotante de WhatsApp
   ========================================================================= */


/* ═══ 01. Fuentes ══════════════════════════════════════════════════════════
   Archivo (variable, pesos 400–800) en tres subconjuntos. Los .woff2 viven
   en /fonts; el navegador descarga solo el subconjunto que necesita. */

/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ═══ 02. Tokens de diseño ═════════════════════════════════════════════════
   Cambiar el aspecto del sitio empieza aquí. Las rampas tonales están
   generadas en OKLCH sobre una misma escala de luminosidad. */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --wrap-pad: clamp(20px, 5vw, 56px);

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}


/* ═══ 03. Base / reset ════════════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }


/* ═══ 04. Componentes ═════════════════════════════════════════════════════ */

/* — botones — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

/* — navegación — */
header.zz-wrap { border-bottom: 2px solid var(--color-divider); }
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.nav-brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
/* el PNG trae ~25% de aire transparente, por eso va más alto de lo habitual */
.nav-logo { height: 44px; width: auto; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }


/* ═══ 05. Utilidades ══════════════════════════════════════════════════════ */

.grayscale { filter: grayscale(1) contrast(1.08); transition: filter .5s ease; }

/* etiqueta de sección: "Trabajo seleccionado", "Servicios", "Clientes"… */
.zz-kicker {
  display: block;
  font-size: 13px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-accent-700);
}


/* ═══ 06. Layout general ══════════════════════════════════════════════════ */

.zz-wrap { padding: 0 var(--wrap-pad); }


/* ═══ 07. Navegación ══════════════════════════════════════════════════════
   Enlaces con volteo 3D al pasar el cursor (cara trasera en acento). */

.zz-nav { padding-left: 0; padding-right: 0; }

.zz-navlinks { display: flex; align-items: center; gap: var(--space-4); }

/* botón hamburguesa: oculto en desktop, se muestra en mobile (sección 18) */
.zz-burger {
  display: none; position: relative; z-index: 2;
  width: 40px; height: 40px; padding: 8px;
  flex-direction: column; justify-content: center; gap: 5px;
  background: transparent; border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); cursor: pointer;
}
.zz-burger-bar {
  display: block; width: 100%; height: 2px; background: var(--color-text);
  transition: transform .25s cubic-bezier(.65, 0, .2, 1), opacity .2s ease;
}
.zz-burger[aria-expanded="true"] .zz-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.zz-burger[aria-expanded="true"] .zz-burger-bar:nth-child(2) { opacity: 0; }
.zz-burger[aria-expanded="true"] .zz-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.zz-navf { display: inline-block; perspective: 400px; text-decoration: none; }
.zz-navf-in {
  display: inline-block; position: relative; transform-style: preserve-3d;
  transition: transform .2s cubic-bezier(.65, 0, .2, 1);
}
.zz-navf:hover .zz-navf-in { transform: rotateX(180deg); }
.zz-navf-face {
  display: block; padding: 4px 10px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.zz-navf-back {
  position: absolute; inset: 0; transform: rotateX(180deg);
  background: var(--color-accent); color: var(--color-bg);
}


/* ═══ 08. Hero ════════════════════════════════════════════════════════════ */

.zz-hero {
  display: grid; grid-template-columns: 1fr 1.12fr;
  border-bottom: 2px solid var(--color-divider);
}
.zz-hero-txt {
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  padding: clamp(32px, 5vw, 64px) clamp(28px, 3.5vw, 52px) clamp(32px, 5vw, 64px) var(--wrap-pad);
  border-right: 2px solid var(--color-divider);
}
.zz-hero-k { margin-bottom: 20px; }
.zz-hero-title {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(40px, 5.4vw, 72px); line-height: .94; letter-spacing: -.025em;
  text-transform: uppercase; margin: 0; margin-left: -.03em;
}
/* cada línea del titular entra por su propia "máscara" (overflow hidden) */
.zz-hline-mask { display: block; overflow: hidden; padding-bottom: .06em; }
.zz-hline { display: block; }
.zz-hero-lede {
  font-size: 16px; line-height: 1.55; margin: 0 0 24px;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}
.zz-hero-c { max-width: 38ch; }
.zz-btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.zz-hero-fig { min-height: clamp(360px, 52vw, 560px); overflow: hidden; }
.zz-hero-fig .zz-media { width: 100%; height: 100%; }


/* ═══ 09. Trabajo seleccionado ════════════════════════════════════════════
   Dos columnas escalonadas; cada pieza tiene su ancho y proporción propios
   (por posición, ver los nth-child de abajo). */

.zz-work { padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 6vw, 72px); }
.zz-work-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.zz-count { color: var(--color-neutral-600); }

.zz-work-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 clamp(28px, 4vw, 56px); align-items: start;
}
.zz-work-col { display: flex; flex-direction: column; gap: clamp(36px, 5vw, 64px); }
.zz-work-col--offset { padding-top: clamp(72px, 10vw, 144px); }

.zz-work-item { width: 100%; }
.zz-work-fig { overflow: hidden; }
.zz-work-fig img.zz-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.zz-work-fig.grayscale:hover { filter: none; }
.zz-work-item .zz-title { transition: color .3s; }
.zz-work-item:hover .zz-title { color: var(--color-accent); }

/* anchos y proporciones por pieza — columna izquierda (01, 03, 05) */
.zz-work-col:not(.zz-work-col--offset) .zz-work-item:nth-child(1) .zz-media { aspect-ratio: 4/3; }
.zz-work-col:not(.zz-work-col--offset) .zz-work-item:nth-child(2) { width: 86%; align-self: flex-end; }
.zz-work-col:not(.zz-work-col--offset) .zz-work-item:nth-child(2) .zz-media { aspect-ratio: 16/10; }
.zz-work-col:not(.zz-work-col--offset) .zz-work-item:nth-child(3) { width: 94%; }
.zz-work-col:not(.zz-work-col--offset) .zz-work-item:nth-child(3) .zz-media { aspect-ratio: 3/2; }

/* — columna derecha, desplazada (02, 04, 06) */
.zz-work-col--offset .zz-work-item:nth-child(1) { width: 88%; }
.zz-work-col--offset .zz-work-item:nth-child(1) .zz-media { aspect-ratio: 3/2; }
.zz-work-col--offset .zz-work-item:nth-child(2) .zz-media { aspect-ratio: 4/3; }
.zz-work-col--offset .zz-work-item:nth-child(3) { width: 82%; align-self: flex-end; }
.zz-work-col--offset .zz-work-item:nth-child(3) .zz-media { aspect-ratio: 16/9; }

/* pie de cada pieza: título + año */
.zz-cap {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 2px solid var(--color-accent);
  margin-top: 14px; padding-top: 10px;
}
.zz-title {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(17px, 1.8vw, 22px); letter-spacing: -.01em;
}
.zz-year { font-size: 13px; letter-spacing: .06em; color: var(--color-neutral-600); }


/* ═══ 10. Sobre nosotros ══════════════════════════════════════════════════ */

.zz-about {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px);
  border-top: 2px solid var(--color-divider);
  padding: clamp(48px, 6vw, 80px) 0;
}
.zz-about-title {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(32px, 4vw, 52px); line-height: .96; letter-spacing: -.02em;
  text-transform: uppercase; margin: 0; margin-left: -.03em;
}
.zz-about-body { max-width: 46ch; }
.zz-about-lede {
  font-size: 17px; line-height: 1.6; margin: 0 0 20px;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.zz-about .btn-ghost { padding-left: 0; }


/* ═══ 11. Servicios ═══════════════════════════════════════════════════════
   Filas que voltean en 3D al pasar el cursor: la cara trasera es un panel
   rojo con enlace a los proyectos. */

.zz-services { border-top: 2px solid var(--color-divider); padding: clamp(48px, 6vw, 80px) 0; }
.zz-services .zz-kicker { margin-bottom: clamp(28px, 4vw, 48px); }

.zz-serv { perspective: 1100px; border-top: 1px solid var(--color-divider); }
.zz-serv:last-child { border-bottom: 1px solid var(--color-divider); }
.zz-serv-in {
  position: relative; transform-style: preserve-3d;
  transition: transform .2s cubic-bezier(.65, 0, .2, 1);
}
.zz-serv:hover .zz-serv-in { transform: rotateX(180deg); }
.zz-serv-front {
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px; align-items: center; padding: 22px 0;
}
.zz-serv-back {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: rotateX(180deg);
  background: var(--color-accent); color: var(--color-bg);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 24px 0 0;
}
.zz-serv-num { font-family: var(--font-heading); font-weight: 800; font-size: 14px; color: var(--color-accent); }
.zz-serv-name {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.01em;
}
.zz-serv-back .zz-serv-name { padding-left: 24px; }
.zz-serv-desc { font-size: 15px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.zz-serv-link {
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
  color: var(--color-bg); text-decoration: none;
}


/* ═══ 12. Clientes ════════════════════════════════════════════════════════
   Marquesina infinita: dos pistas idénticas, la animación desplaza el
   conjunto un -50% y el bucle es invisible. Se pausa al pasar el cursor. */

.zz-clients { border-top: 2px solid var(--color-divider); padding: clamp(48px, 6vw, 72px) 0; }
.zz-clients .zz-kicker { margin-bottom: clamp(24px, 3.5vw, 40px); }
.zz-marquee-mask {
  overflow: hidden;
  border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider);
  padding: 28px 0;
}
.zz-marquee { display: flex; width: max-content; animation: zz-marquee 28s linear infinite; }
.zz-marquee:hover { animation-play-state: paused; }
.zz-marquee-track {
  display: flex;
  gap: clamp(72px, 9vw, 140px); padding-right: clamp(72px, 9vw, 140px);
}
.zz-logo {
  width: 170px; height: 72px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.zz-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }


/* ═══ 13. Contacto ════════════════════════════════════════════════════════ */

.zz-contact { background: var(--color-accent); color: var(--color-bg); }
.zz-contact-in {
  padding: clamp(36px, 5vw, 64px) clamp(20px, 5vw, 56px);
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 32px;
}
.zz-contact-title {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(40px, 6vw, 76px); line-height: .9; letter-spacing: -.03em;
  text-transform: uppercase; margin: 0; margin-left: -.04em;
  color: var(--color-bg);
}
.zz-contact-links { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.zz-contact-mail {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--color-bg); text-decoration: none;
}
.zz-contact-icon { width: 18px; height: 18px; flex: none; }
.zz-contact .btn-ghost {
  color: var(--color-bg); border: 1px solid var(--color-bg);
  padding: 10px 16px;
}


/* ═══ 14. Pie de página ═══════════════════════════════════════════════════ */

.zz-footer {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 5vw, 56px);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: var(--color-neutral-600);
}
/* espacio de cortesía para que el © no quede debajo del botón flotante de WhatsApp */
.zz-footer span:last-child { margin-right: 84px; }


/* ═══ 15. Placeholders de imagen ══════════════════════════════════════════
   Cajas provisionales hasta tener fotografía real. Para reemplazar una:
   sustituir el <div class="zz-media zz-slot">…</div> por
   <img class="zz-media" src="images/….jpg" alt="…"> (ver readme.md).
   El JS anima el elemento .zz-media (parallax/escala), sea placeholder o img. */

.zz-defs { display: none; }

.zz-slot {
  position: relative;
  width: 100%; height: 100%; aspect-ratio: 3/2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 12px;
  background: rgba(0, 0, 0, .04);
  font: 13px/1.3 system-ui, -apple-system, sans-serif;
  color: rgba(0, 0, 0, .55);
  user-select: none;
}
.zz-slot::after {  /* anillo discontinuo del estado vacío */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1.5px dashed rgba(0, 0, 0, .25);
}
.zz-slot svg { opacity: .45; }
.zz-slot-cap { max-width: 90%; font-weight: 500; letter-spacing: .01em; }


/* ═══ 16. Animaciones y movimiento reducido ═══════════════════════════════
   Entrada del hero — declarativa (CSS puro) para que no dependa del orden
   de carga del JS. El parallax y las revelaciones por scroll viven en
   js/main.js. */

@keyframes zz-marquee { to { transform: translateX(-50%); } }
@keyframes zz-up { from { transform: translateY(112%); } to { transform: none; } }
@keyframes zz-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes zz-risein { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes zz-curtain { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes zz-slotin { from { transform: scale(1.18); } to { transform: scale(1); } }

.zz-hline { animation: zz-up .9s cubic-bezier(.65, 0, .2, 1) both; }
.zz-hero-title .zz-hline-mask:nth-child(1) .zz-hline { animation-delay: .12s; }
.zz-hero-title .zz-hline-mask:nth-child(2) .zz-hline { animation-delay: .23s; }
.zz-hero-title .zz-hline-mask:nth-child(3) .zz-hline { animation-delay: .34s; }
.zz-hero-k { animation: zz-fadein .6s cubic-bezier(.65, 0, .2, 1) .05s both; }
.zz-hero-c { animation: zz-risein .8s cubic-bezier(.65, 0, .2, 1) .55s both; }
.zz-hero-fig { animation: zz-curtain 1.1s cubic-bezier(.65, 0, .2, 1) .2s both; }
.zz-hero-fig .zz-media { animation: zz-slotin 1.6s cubic-bezier(.65, 0, .2, 1) .2s both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zz-hline, .zz-hero-k, .zz-hero-c, .zz-hero-fig,
  .zz-hero-fig .zz-media, .zz-marquee { animation: none; }
}


/* ═══ 17. Modal de contacto ═══════════════════════════════════════════════ */

.zz-modal {
  position: fixed; inset: 0; margin: auto;
  width: min(480px, calc(100vw - 40px));
  max-height: min(88vh, 640px);
  padding: 0; border: 2px solid var(--color-text); border-radius: var(--radius-lg);
  background: var(--color-bg); color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.zz-modal::backdrop { background: color-mix(in srgb, var(--color-text) 55%, transparent); }
.zz-modal[open] { animation: zz-risein .35s cubic-bezier(.65, 0, .2, 1) both; }

.zz-modal-in { padding: clamp(28px, 5vw, 44px); max-height: inherit; overflow-y: auto; }
.zz-modal-title { margin: 4px 0 24px; font-size: clamp(28px, 4vw, 36px); text-transform: uppercase; }

.zz-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  font-size: 20px; line-height: 1; color: var(--color-text); cursor: pointer;
}
.zz-modal-close:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.zz-modal-form { display: flex; flex-direction: column; gap: 18px; }
.zz-field { display: flex; flex-direction: column; gap: 6px; }
.zz-field label {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-neutral-700);
}
.zz-field input, .zz-field textarea {
  font: inherit; color: var(--color-text); background: transparent;
  border: none; border-bottom: 1.5px solid var(--color-divider);
  padding: 8px 2px; border-radius: 0; resize: vertical;
}
.zz-field input:focus-visible, .zz-field textarea:focus-visible {
  outline: none; border-color: var(--color-accent);
}
.zz-modal-note {
  font-size: 13px; line-height: 1.5; margin: 0;
  padding: 12px; border: 1px dashed var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}
.zz-modal-submit { align-self: flex-start; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .zz-modal[open] { animation: none; }
}


/* ═══ 18. Mobile ══════════════════════════════════════════════════════════
   Un solo breakpoint: las grillas de dos columnas pasan a una, y el nav
   se achica para entrar en una fila (con wrap como red de seguridad). */

@media (max-width: 720px) {

  /* — navegación: hamburguesa + menú a pantalla completa —
     El header queda sticky para que el botón esté siempre a mano; el panel
     de links se monta por debajo (z-index 90 contra 100 del header). */
  header.zz-wrap { position: sticky; top: 0; z-index: 100; background: var(--color-bg); }
  .nav { gap: var(--space-2); }
  /* marca y botón por encima del panel (z-index 90) para poder cerrarlo */
  .nav-brand { position: relative; z-index: 95; }
  .nav-logo { height: 34px; }
  .zz-burger { display: flex; z-index: 95; }

  .zz-navlinks {
    position: fixed; inset: 0; z-index: 90;
    background: var(--color-bg);
    flex-direction: column; align-items: stretch; justify-content: center;
    gap: var(--space-2); padding: var(--wrap-pad);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .zz-navlinks[data-open] { opacity: 1; visibility: visible; transform: none; }

  /* dentro del panel no hay hover: se anula el volteo 3D y mandan los links grandes */
  .zz-navlinks .zz-navf { perspective: none; width: 100%; }
  .zz-navlinks .zz-navf-in { display: block; transform: none; }
  .zz-navlinks .zz-navf-back { display: none; }
  .zz-navlinks .zz-navf-face {
    padding: 12px 0;
    font-family: var(--font-heading); font-weight: var(--font-heading-weight);
    font-size: clamp(28px, 8vw, 40px); line-height: 1.1; letter-spacing: -.02em;
    border-bottom: 1px solid var(--color-divider);
  }
  .zz-navlinks .zz-navf:active .zz-navf-face { color: var(--color-accent); }

  /* — hero: apilado, imagen abajo — */
  .zz-hero { grid-template-columns: 1fr; }
  .zz-hero-txt {
    border-right: none; border-bottom: 2px solid var(--color-divider);
    gap: 28px;
  }
  .zz-hero-fig { min-height: 62vw; }

  /* — trabajo seleccionado: una columna, sin desplazamientos — */
  .zz-work-grid { grid-template-columns: 1fr; gap: clamp(36px, 9vw, 56px); }
  .zz-work-col { gap: clamp(36px, 9vw, 56px); }
  .zz-work-col--offset { padding-top: 0; }
  .zz-work-col .zz-work-item,
  .zz-work-col--offset .zz-work-item { width: 100%; align-self: stretch; }

  /* — sobre nosotros: apilado — */
  .zz-about { grid-template-columns: 1fr; gap: 24px; }

  /* — servicios: menos aire en la fila para que entre en una línea — */
  .zz-serv-front { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .zz-serv-desc { font-size: 13px; }

  /* — contacto: el email es una sola palabra larga, que pueda partirse — */
  .zz-contact-mail { overflow-wrap: anywhere; }

  /* — botón flotante: un poco más chico y más pegado al borde — */
  .zz-wa-fab { width: 50px; height: 50px; right: 14px; bottom: 14px; }
  .zz-wa-fab svg { width: 24px; height: 24px; }
  .zz-footer span:last-child { margin-right: 70px; }
}


/* ═══ 19. Botón flotante de WhatsApp ══════════════════════════════════════
   Fijo abajo a la derecha, visible durante todo el scroll. Verde y redondo
   a propósito: es el único lugar del sitio que rompe la grilla recta, para
   que se lea de inmediato como "este es el botón de WhatsApp". */

.zz-wa-fab {
  position: fixed; right: clamp(16px, 4vw, 28px); bottom: clamp(16px, 4vw, 28px);
  z-index: 80;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: #25d366; color: #fff;
  border: none; border-radius: 50%;
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.zz-wa-fab svg { width: 28px; height: 28px; }
.zz-wa-fab:hover { background: #1fb959; transform: translateY(-2px); }
.zz-wa-fab:active { background: #189651; transform: translateY(0); }
.zz-wa-fab:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .zz-wa-fab { transition: background .18s ease; }
  .zz-wa-fab:hover { transform: none; }
}