/* ================================================================
   L.A.N.G. PRO SpA
   Sistema: azul institucional sólido sobre neutros, materialidad
   por línea de 1px antes que por sombra. Sin gradientes de marca.

   Bloqueos de diseño (no romper sin decisión explícita):
   - Un solo acento cromático: --accent (azul del logotipo).
     La pátina verde solo marca estado (foco), nunca decora.
   - Un solo sistema de radios: --radius en todo control y tarjeta.
     --radius-lg queda reservado al panel del formulario.
   - Un solo tema por carga: claro u oscuro segun el sistema.
     Ninguna sección invierte el tema a mitad de página.
   ================================================================ */

/* ----------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Rampa de marca. #0B1D4B del logotipo es --accent. */
  --navy-900: oklch(16% 0.070 265);
  --navy-800: oklch(20% 0.085 265);
  --navy-700: oklch(23% 0.090 265);
  --navy-600: oklch(29% 0.100 265);
  --navy-400: oklch(55% 0.130 258);
  --navy-300: oklch(72% 0.130 250);
  --navy-100: oklch(93% 0.030 262);
  --navy-050: oklch(96.5% 0.014 265);

  /* Pátina: solo estado. Ver bloqueo arriba. */
  --patina: oklch(52% 0.085 200);
  --patina-bright: oklch(75% 0.100 195);

  /* Neutros. Sin blanco ni negro puros. */
  --n-100: oklch(99% 0 0);
  --n-99:  oklch(98.6% 0 0);
  --n-97:  oklch(97% 0 0);
  --n-93:  oklch(93% 0 0);
  --n-89:  oklch(89% 0 0);
  --n-58:  oklch(58% 0 0);
  --n-46:  oklch(46% 0 0);
  --n-21:  oklch(21% 0 0);

  /* Superficies y texto: tema claro */
  --bg:          var(--n-100);
  --bg-sunken:   var(--n-97);
  --bg-raised:   var(--n-99);
  --bg-accent:   var(--navy-050);
  --rule:        var(--n-89);
  /* Borde de campo de formulario. Más oscuro que --rule a propósito:
     WCAG 1.4.11 pide 3:1 en el límite de un control, y aquí el relleno
     del campo casi no se distingue del panel que lo contiene. */
  --rule-field:  oklch(58% 0 0);
  --rule-strong: var(--navy-700);
  --text:        var(--n-21);
  --text-muted:  var(--n-46);
  --accent:      var(--navy-700);
  --accent-hover: var(--navy-600);
  --on-accent:   var(--n-100);
  --focus:       var(--patina);

  /* Tipografía */
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  --fs-display: clamp(2.15rem, 4.4vw, 3.35rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.4rem);
  --fs-h3: 1.0625rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.6875rem;

  /* Espaciado y forma */
  --space-section: clamp(4rem, 8vw, 6.5rem);
  --radius: 4px;
  --radius-lg: 6px;
  --header-h: 72px;
  --max-w: 1180px;

  /* Movimiento. Curvas propias: las de CSS por defecto no tienen fuerza. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-reveal: 520ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          oklch(15% 0.008 265);
    --bg-sunken:   oklch(11.5% 0.008 265);
    --bg-raised:   oklch(19% 0.010 265);
    --bg-accent:   oklch(18% 0.020 265);
    --rule:        oklch(33% 0.012 265);
    --rule-field:  oklch(54% 0.014 265);
    --rule-strong: var(--navy-300);
    --text:        oklch(93% 0 0);
    --text-muted:  oklch(73% 0 0);
    --accent:      var(--navy-300);
    --accent-hover: oklch(80% 0.110 250);
    --on-accent:   oklch(15% 0.020 265);
    --focus:       var(--patina-bright);
  }
}

/* ----------------------------------------------------------------
   2. RESET Y BASE
   ---------------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.14;
  color: var(--text);
  text-wrap: balance;
}

h3 {
  font-weight: 600;
  letter-spacing: -0.012em;
}

p {
  color: var(--text-muted);
  text-wrap: pretty;
}

button {
  font: inherit;
  color: inherit;
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* El header pegajoso tapa el destino de cada ancla sin este margen. */
:target,
section[id] {
  scroll-margin-top: calc(var(--header-h) + 1.25rem);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -110%);
  z-index: 200;
  padding: 0.7rem 1.4rem;
  font-size: var(--fs-small);
  font-weight: 600;
  background-color: var(--accent);
  color: var(--on-accent);
  border-radius: 0 0 var(--radius) var(--radius);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline-offset: 4px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

/* ----------------------------------------------------------------
   3. BOTONES
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8rem 1.75rem;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--t-hover) ease,
    border-color var(--t-hover) ease,
    color var(--t-hover) ease,
    transform var(--t-press) var(--ease-out);
}

/* Devolver el gesto: sin esto el botón no acusa recibo del clic. */
.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background-color: var(--accent);
  color: var(--on-accent);
}

.btn-secondary {
  background-color: var(--bg-raised);
  color: var(--text);
  border-color: var(--rule);
}

.btn-outline {
  background-color: transparent;
  color: var(--accent);
  border-color: var(--accent);
  min-height: 42px;
  padding: 0.65rem 1.4rem;
}

.btn-full {
  width: 100%;
}

.btn-small {
  min-height: 38px;
  padding: 0.5rem 1.1rem;
  font-size: var(--fs-small);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background-color: var(--accent-hover); }
  .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
  .btn-outline:hover { background-color: var(--accent); color: var(--on-accent); }
}

button[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ----------------------------------------------------------------
   4. ENCABEZADO
   ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--t-hover) ease;
}

.site-header[data-scrolled="true"] {
  border-bottom-color: var(--rule-strong);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-logo {
  height: 44px;
  width: auto;
}

/* El SVG del logotipo es azul #0B1D4B. Sobre fondo oscuro ese azul no
   alcanza contraste, así que se pasa a blanco. Se invierte con filtro
   porque un <img> externo no hereda currentColor. */
@media (prefers-color-scheme: dark) {
  .brand-logo { filter: brightness(0) invert(1); }
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.main-nav a {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text);
  /* Sin esto las etiquetas se parten en dos líneas cuando el espacio
     aprieta, en vez de forzar el paso al menú hamburguesa. */
  white-space: nowrap;
  transition: color var(--t-hover) ease;
}

.nav-cta {
  background-color: var(--accent);
  color: var(--on-accent) !important;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius);
  font-weight: 600;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}

.nav-cta:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .main-nav a:hover { color: var(--accent); }
  .nav-cta:hover { background-color: var(--accent-hover); }
}

/* A 14px de fuente el enlace mide 17px de alto, bajo el mínimo táctil de
   24px (WCAG 2.5.8). Va en un min-width para no pisar el padding que el
   nav móvil ya define, y excluye al CTA, que tiene su propio padding:
   .main-nav a tiene más especificidad que .nav-cta y se lo comería. */
@media (min-width: 901px) {
  .main-nav a:not(.nav-cta) {
    padding-block: 0.45rem;
  }
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  /* Las barras miden 26x17, pero el área táctil llega a 44x43 vía padding
     con box-sizing content-box. WCAG 2.5.8 pide 24x24 como mínimo. */
  box-sizing: content-box;
  width: 26px;
  height: 17px;
  padding: 13px 9px;
  margin-right: -9px;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--text);
  border-radius: 1px;
  transition: transform 220ms var(--ease-out), opacity 160ms ease;
}

/* ----------------------------------------------------------------
   5. HERO
   ---------------------------------------------------------------- */
.hero {
  padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  background-color: var(--bg-sunken);
  border-bottom: 1px solid var(--rule);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
  max-width: 24ch;
}

.hero-lead {
  font-size: 1.0625rem;
  max-width: 44ch;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.hero-image {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
}

/* ----------------------------------------------------------------
   6. FRANJA DE CAPACIDADES
   ---------------------------------------------------------------- */
.spec-strip {
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--rule);
}

.spec-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2rem;
}

.spec-item dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.spec-item dd {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------------
   7. SECCIONES DE SERVICIO (imagen + texto)
   ---------------------------------------------------------------- */
.service-section {
  padding: var(--space-section) 0;
  border-bottom: 1px solid var(--rule);
}

.service-alt {
  background-color: var(--bg-sunken);
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.service-grid-reverse .service-content { order: 2; }
.service-grid-reverse .service-media { order: 1; }

.service-content h2 {
  font-size: var(--fs-h2);
  margin-bottom: 1rem;
  max-width: 24ch;
}

.service-lead {
  font-size: 1.0625rem;
  margin-bottom: 2rem;
  max-width: 52ch;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.feature-list li {
  padding-left: 1.15rem;
  border-left: 2px solid var(--accent);
}

.feature-list h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.35rem;
}

.feature-list p {
  font-size: var(--fs-small);
  max-width: 56ch;
}

.service-image {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background-color: var(--bg-raised);
}

/* ----------------------------------------------------------------
   8. TRABAJOS REALIZADOS (grilla asimétrica)
   ---------------------------------------------------------------- */
.work-section {
  padding: var(--space-section) 0;
  border-bottom: 1px solid var(--rule);
}

.section-head {
  margin-bottom: 2.5rem;
  max-width: 34ch;
}

.section-head h2 {
  font-size: var(--fs-h2);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.work-item-wide {
  grid-column: 1 / -1;
}

.work-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background-color: var(--bg-sunken);
}

.work-item-wide img {
  aspect-ratio: 16 / 7;
}

.work-item figcaption {
  margin-top: 0.85rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ----------------------------------------------------------------
   9. ENERGÍA (bloques de capacidad, sin fotografía)
   ---------------------------------------------------------------- */
.capability-section {
  padding: var(--space-section) 0;
  background-color: var(--bg-sunken);
  border-bottom: 1px solid var(--rule);
}

.capability-intro {
  max-width: 62ch;
  margin-bottom: 3rem;
}

.capability-intro h2 {
  font-size: var(--fs-h2);
  margin-bottom: 1rem;
  max-width: 26ch;
}

.capability-lead {
  font-size: 1.0625rem;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.capability-block {
  background-color: var(--bg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.capability-block h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.6rem;
  color: var(--accent);
}

.capability-block p {
  font-size: var(--fs-small);
}

/* ----------------------------------------------------------------
   10. CONTACTO
   ---------------------------------------------------------------- */
.contact-section {
  padding: var(--space-section) 0;
  background-color: var(--bg-accent);
}

.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.contact-intro h2 {
  font-size: var(--fs-h2);
  margin-bottom: 1rem;
  max-width: 22ch;
}

.contact-lead {
  margin-bottom: 2.5rem;
  max-width: 42ch;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-details li {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
  padding-top: 0.85rem;
}

.contact-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.4rem;
}

.contact-value {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.9375rem;
  color: var(--text);
}

.contact-value a {
  display: inline-block;
  padding-block: 0.15rem;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease;
  width: fit-content;
}

@media (hover: hover) and (pointer: fine) {
  .contact-value a:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
  }
}

.contact-form-wrapper {
  background-color: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.form-group {
  margin-bottom: 1.2rem;
}

.form-group label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: 0.45rem;
  color: var(--text);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--rule-field);
  border-radius: var(--radius);
  background-color: var(--bg);
  color: var(--text);
  transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}

.form-group select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

/* Solo tras interacción: nadie merece ver un campo en rojo antes de escribir. */
.form-group input:user-invalid,
.form-group textarea:user-invalid,
.form-group select:user-invalid {
  border-color: oklch(55% 0.17 28);
}

.form-hint {
  margin-top: 0.45rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.quote-form.is-submitting .btn-label::after {
  content: '…';
}

/* ----------------------------------------------------------------
   11. PIE DE PÁGINA
   ---------------------------------------------------------------- */
.site-footer {
  background-color: var(--navy-800);
  color: var(--n-100);
  padding-top: 3.5rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid oklch(100% 0 0 / 0.16);
}

.footer-logo {
  height: 34px;
  width: auto;
  margin-bottom: 1rem;
  /* El logotipo original es azul sobre blanco. Se invierte para leer sobre el azul. */
  filter: brightness(0) invert(1);
}

.footer-brand p {
  color: oklch(100% 0 0 / 0.72);
  font-size: var(--fs-small);
  max-width: 32ch;
}

/* Redes. El glifo va monocromo y no con el degradado de Instagram: el
   sistema tiene un solo acento cromático y un logo multicolor de 22px
   en el pie competiría con él sin aportar nada.
   El enlace mide 44x44 aunque el glifo sea de 22px, para cumplir el
   mínimo táctil; el margen negativo devuelve el glifo a la alineación
   del texto de arriba. */
.footer-social {
  display: flex;
  gap: 0.25rem;
  margin-top: 1.1rem;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -11px;
  border-radius: var(--radius);
  color: oklch(100% 0 0 / 0.72);
  transition: color var(--t-hover) ease, background-color var(--t-hover) ease;
}

.footer-social svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

@media (hover: hover) and (pointer: fine) {
  .footer-social a:hover {
    color: var(--n-100);
    background-color: oklch(100% 0 0 / 0.1);
  }
}

.footer-nav h2,
.footer-contact h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 1.1rem;
  color: oklch(100% 0 0 / 0.95);
}

.footer-nav ul,
.footer-contact ul {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* padding-block lleva el alto de golpeo a ~28px: a 14px de fuente el
   enlace medía 17px, bajo el mínimo táctil de 24px (WCAG 2.5.8). */
.footer-nav a,
.footer-contact a {
  display: inline-block;
  padding-block: 0.3rem;
  font-size: var(--fs-small);
  color: oklch(100% 0 0 / 0.72);
  transition: color var(--t-hover) ease;
  width: fit-content;
}

@media (hover: hover) and (pointer: fine) {
  .footer-nav a:hover,
  .footer-contact a:hover { color: var(--n-100); }
}

.footer-contact .btn-outline {
  border-color: oklch(100% 0 0 / 0.55);
  color: var(--n-100);
  margin-top: 1.1rem;
}

@media (hover: hover) and (pointer: fine) {
  .footer-contact .btn-outline:hover {
    background-color: var(--n-100);
    color: var(--navy-800);
    border-color: var(--n-100);
  }
}

.site-footer :focus-visible {
  outline-color: var(--patina-bright);
}

.footer-bottom {
  padding: 1.4rem 1.5rem;
  text-align: center;
}

.footer-bottom p {
  font-size: var(--fs-small);
  color: oklch(100% 0 0 / 0.6);
}

/* ----------------------------------------------------------------
   11-b. SELLO DE SECCIÓN
   El isotipo es una tuerca hexagonal, así que al pasar el mouse gira
   60 grados: un hexágono tiene seis caras, de modo que un sexto de
   vuelta cae exactamente sobre sí mismo y parece que alguien le puso
   la llave. La animación referencia el objeto, no adorna por adornar.

   El sello queda montado sobre la línea divisoria de la sección. Es
   opaco, así que tapa el hairline y lo remata, como un remache sobre
   una costura.
   ---------------------------------------------------------------- */
.service-section,
.work-section,
.capability-section,
.contact-section {
  position: relative;
}

.section-mark {
  position: absolute;
  top: -22px;
  left: 50%;
  /* Centrado por margen y no por transform: así transform queda libre
     para la rotación del hover, sin tener que repetir el translate. */
  margin-left: -22px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.section-mark img {
  width: 100%;
  height: 100%;
  transition: transform 300ms var(--ease-out);
}

.section-mark:active img {
  transform: rotate(60deg) scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
  .section-mark:hover img {
    transform: rotate(60deg);
  }
}

/* ----------------------------------------------------------------
   11-c. BOTÓN FLOTANTE DE WHATSAPP
   Verde #128C7E de la paleta oficial de WhatsApp en vez del #25D366
   más habitual: sobre ese verde claro el glifo blanco da 1.98:1 y
   WCAG 1.4.11 pide 3:1 para un icono que es el único indicador de la
   acción. Con este verde el glifo llega a 4.1:1 y sigue leyéndose
   como WhatsApp.
   ---------------------------------------------------------------- */
.wa-fab {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

.wa-fab-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: #128C7E;
  box-shadow: 0 6px 20px oklch(0% 0 0 / 0.28);
  transition: transform var(--t-hover) var(--ease-out),
              box-shadow var(--t-hover) ease;
}

.wa-fab-icon svg {
  width: 30px;
  height: 30px;
  fill: #FFFFFF;
}

/* El isotipo va montado en la esquina, con un anillo del color del
   botón para que no se confunda con el glifo. */
.wa-fab-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 2.5px #128C7E;
}

.wa-fab-label {
  order: -1;
  padding: 0.5rem 0.85rem;
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
  background-color: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px oklch(0% 0 0 / 0.14);
  /* Oculto hasta el hover: en reposo el botón es solo el círculo. */
  opacity: 0;
  transform: translateX(6px);
  transition: opacity var(--t-hover) ease,
              transform var(--t-hover) var(--ease-out);
  pointer-events: none;
}

.wa-fab:active .wa-fab-icon {
  transform: scale(0.96);
}

.wa-fab:focus-visible .wa-fab-label {
  opacity: 1;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .wa-fab:hover .wa-fab-icon {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px oklch(0% 0 0 / 0.32);
  }

  .wa-fab:hover .wa-fab-label {
    opacity: 1;
    transform: none;
  }
}

/* En pantallas chicas el botón se queda solo con el círculo: la
   etiqueta comería el ancho útil del contenido. */
@media (max-width: 560px) {
  .wa-fab-label { display: none; }

  .wa-fab-icon {
    width: 52px;
    height: 52px;
  }

  .wa-fab-icon svg {
    width: 27px;
    height: 27px;
  }
}

/* ----------------------------------------------------------------
   12. ENTRADA AL SCROLL
   El estado oculto solo aplica si el JS corrió. Sin script, el
   contenido se ve igual: nada queda invisible por un error de red.
   ---------------------------------------------------------------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

html.js .spec-item:nth-child(2),
html.js .work-grid > *:nth-child(2),
html.js .capability-block:nth-child(2),
html.js .service-grid > *:nth-child(2) { transition-delay: 70ms; }

html.js .spec-item:nth-child(3),
html.js .work-grid > *:nth-child(3),
html.js .capability-block:nth-child(3) { transition-delay: 140ms; }

/* ----------------------------------------------------------------
   13. RESPONSIVE: TABLET
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .hero h1 { max-width: 26ch; }

  .service-grid { grid-template-columns: 1fr; }
  .service-grid-reverse .service-content,
  .service-grid-reverse .service-media { order: initial; }
  .service-grid-reverse .service-media { order: -1; }

  .capability-grid { grid-template-columns: 1fr 1fr; }
  .capability-block:last-child { grid-column: 1 / -1; }

  .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------------------------------------------
   14. RESPONSIVE: MÓVIL
   El corte va en 900px, no en 768px: con cinco ítems el nav horizontal
   deja de caber en una línea alrededor de los 860px, y un nav de dos
   líneas es peor que el menú hamburguesa.
   ---------------------------------------------------------------- */
@media (max-width: 900px) {

  .menu-toggle { display: flex; }

  .main-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background-color: var(--bg);
    border-bottom: 1px solid var(--rule);
    /* Se anima transform y opacity, no max-height: el navegador no
       tiene que recalcular layout en cada frame. */
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition:
      transform 220ms var(--ease-out),
      opacity 180ms ease,
      visibility 0s linear 220ms;
  }

  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.5rem 1.25rem;
  }

  .main-nav li { border-bottom: 1px solid var(--rule); }

  .main-nav li:last-child {
    border-bottom: none;
    margin-top: 0.9rem;
  }

  .main-nav a {
    display: block;
    padding: 0.9rem 0;
    font-size: var(--fs-body);
  }

  .nav-cta { text-align: center; }

  .menu-toggle.is-active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-toggle.is-active span:nth-child(2) { opacity: 0; }
  .menu-toggle.is-active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .spec-row { grid-template-columns: 1fr; gap: 1.35rem; }

  .work-grid { grid-template-columns: 1fr; }
  .work-item-wide img,
  .work-item img { aspect-ratio: 4 / 3; }

  .capability-grid { grid-template-columns: 1fr; }
  .capability-block:last-child { grid-column: auto; }

  .form-row { grid-template-columns: 1fr; gap: 0; }

  .footer-inner { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ----------------------------------------------------------------
   15. MOVIMIENTO REDUCIDO
   No es "cero animación": se conservan color y opacidad, se quita
   todo desplazamiento.
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn:active,
  .nav-cta:active { transform: none; }

  /* El sello deja de girar y el botón de WhatsApp deja de desplazarse.
     La etiqueta sigue apareciendo, porque es información, no movimiento. */
  .section-mark img,
  .wa-fab-icon {
    transition: none;
    transform: none;
  }

  .section-mark:hover img,
  .section-mark:active img,
  .wa-fab:hover .wa-fab-icon,
  .wa-fab:active .wa-fab-icon { transform: none; }

  .wa-fab-label {
    transform: none;
    transition: opacity 120ms ease;
  }

  .main-nav {
    transition: opacity 120ms ease, visibility 0s linear 120ms;
    transform: none;
  }

  .menu-toggle span { transition: opacity 120ms ease; }
}

@media print {
  .site-header, .menu-toggle, .skip-link, .hero-actions, .contact-form-wrapper { display: none; }
  body { background: #fff; color: #000; }
}