/* ==========================================================================
   COMPONENTES — barra, navegación, botones, tarjetas, formulario, pie
   ========================================================================== */

/* ===================================================================== BARRA */

.barra {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--barra-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: height var(--d-medio) var(--ease-out),
              background-color var(--d-medio) var(--ease-out),
              border-color var(--d-medio) var(--ease-out),
              backdrop-filter var(--d-medio) var(--ease-out);
}

/* Sobre la portada inmersiva la barra no tiene fondo: la foto se ve entera. */
.barra[data-estado='suelta'] {
  background-color: transparent;
  color: #EDEDED;
}

.barra[data-estado='fija'] {
  height: var(--barra-h-compacta);
  background-color: color-mix(in srgb, var(--gris-900) 86%, transparent);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-bottom-color: rgba(255 255 255 / 0.10);
  color: #EDEDED;
}

.barra__interior {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
}

.barra__logo {
  display: block;
  flex: none;
  color: currentColor;
  transition: transform var(--d-pulso) var(--ease-out), opacity var(--d-rapido) var(--ease-out);
}
.barra__logo img {
  width: clamp(142px, 15vw, 174px);
  height: auto;
  transition: width var(--d-medio) var(--ease-out);
}
.barra[data-estado='fija'] .barra__logo img { width: clamp(130px, 13vw, 152px); }
.barra__logo:active { transform: scale(0.97); }

/* ------------------------------------------------------------ NAVEGACIÓN */

.nav { display: none; }

@media (min-width: 1000px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(var(--e-4), 2.2vw, var(--e-6));
  }
}

.nav__enlace {
  /* inline-flex y no inline: en un enlace en línea el relleno vertical no
     entra en la caja, y el objetivo real se queda en la altura del texto. */
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  position: relative;
  padding-block: var(--e-2);
  font-family: var(--fuente-display);
  font-size: var(--t-pie);
  font-weight: 600;
  font-stretch: 102%;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 74%, transparent);
  transition: color var(--d-rapido) var(--ease-out);
}

/* El subrayado se dibuja con clip-path desde la izquierda: se puede
   interrumpir a mitad de camino sin saltar. */
.nav__enlace::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 6px;
  height: 2px;
  background: var(--naranja-500);
  clip-path: inset(0 100% 0 0);
  /* Esta duración es la de la SALIDA: al retirar el cursor el trazo se
     recoge rápido. La entrada, declarada en :hover, es algo más larga. */
  transition: clip-path 150ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav__enlace:hover { color: currentColor; }
  .nav__enlace:hover::after {
    clip-path: inset(0 0 0 0);
    transition: clip-path 240ms var(--ease-out);
  }
}

.nav__enlace[aria-current='page'] {
  color: currentColor;
}
.nav__enlace[aria-current='page']::after {
  clip-path: inset(0 0 0 0);
}

.barra__acciones { display: flex; align-items: center; gap: var(--e-4); }

/* ------------------------------------------------- BOTÓN DE MENÚ (MÓVIL) */

.menu-boton {
  /* Flex y no grid: en grid cada trazo cae en su propia fila implícita y
     el margen de 6 px deja de gobernar la separación, con lo que las aspas
     no llegan a cruzarse. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-inline-end: -10px;
  color: currentColor;
  transition: transform var(--d-pulso) var(--ease-out);
}
.menu-boton:active { transform: scale(0.94); }
@media (min-width: 1000px) { .menu-boton { display: none; } }

.menu-boton__trazo {
  display: block;
  width: 24px; height: 2px;
  background: currentColor;
  transition: transform var(--d-medio) var(--ease-out),
              opacity 120ms var(--ease-out);
}
.menu-boton__trazo + .menu-boton__trazo { margin-top: 6px; }

.menu-boton[aria-expanded='true'] .menu-boton__trazo:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-boton[aria-expanded='true'] .menu-boton__trazo:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.menu-boton[aria-expanded='true'] .menu-boton__trazo:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ----------------------------------------------------------- PANEL MÓVIL */

.panel-movil {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--barra-h) + var(--e-6)) var(--margen) var(--e-8);
  background: var(--gris-950);
  color: #EDEDED;
  /* Entra como una cortina desde arriba; no aparece de la nada. */
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--d-lento) var(--ease-cortina),
              visibility 0s linear var(--d-lento);
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.panel-movil[data-abierto='true'] {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path var(--d-lento) var(--ease-cortina), visibility 0s;
}

@media (min-width: 1000px) { .panel-movil { display: none; } }

.panel-movil__nav { display: flex; flex-direction: column; }

.panel-movil__enlace {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: clamp(0.7rem, 2.4vw, 1.05rem);
  border-bottom: 1px solid rgba(255 255 255 / 0.09);
  font-family: var(--fuente-display);
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 740;
  font-stretch: 103%;
  letter-spacing: var(--track-display);
  line-height: 1.06;
  text-transform: uppercase;
  /* Estado de partida ya visible: sólo se desplaza y se recorta. */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--d-medio) var(--ease-out),
              transform var(--d-medio) var(--ease-out),
              color var(--d-rapido) var(--ease-out);
}

.panel-movil[data-abierto='true'] .panel-movil__enlace {
  opacity: 1;
  transform: translateY(0);
}
.panel-movil[data-abierto='true'] .panel-movil__enlace:nth-child(1) { transition-delay: 90ms; }
.panel-movil[data-abierto='true'] .panel-movil__enlace:nth-child(2) { transition-delay: 130ms; }
.panel-movil[data-abierto='true'] .panel-movil__enlace:nth-child(3) { transition-delay: 170ms; }
.panel-movil[data-abierto='true'] .panel-movil__enlace:nth-child(4) { transition-delay: 210ms; }
.panel-movil[data-abierto='true'] .panel-movil__enlace:nth-child(5) { transition-delay: 250ms; }
.panel-movil[data-abierto='true'] .panel-movil__enlace:nth-child(6) { transition-delay: 290ms; }

.panel-movil__enlace[aria-current='page'] { color: var(--naranja-400); }
.panel-movil__enlace .cota { font-size: 0.625rem; }

.panel-movil__pie {
  margin-top: var(--e-8);
  display: grid;
  gap: var(--e-3);
}

/* ==================================================================== BOTONES */

.boton {
  --boton-fondo: var(--naranja-500);
  --boton-texto: var(--gris-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  padding: 0.95rem 1.6rem;
  min-height: 48px;
  background-color: var(--boton-fondo);
  color: var(--boton-texto);
  font-family: var(--fuente-display);
  font-size: var(--t-pie);
  font-weight: 700;
  font-stretch: 104%;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
  transition: background-color var(--d-rapido) var(--ease-out),
              transform var(--d-pulso) var(--ease-out),
              color var(--d-rapido) var(--ease-out);
}

.boton:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .boton:hover { --boton-fondo: var(--naranja-400); }
}

.boton svg {
  flex: none;
  transition: transform var(--d-medio) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .boton:hover svg { transform: translate3d(4px, 0, 0); }
}

.boton--contorno {
  --boton-fondo: transparent;
  --boton-texto: var(--texto);
  box-shadow: inset 0 0 0 1px var(--borde-fuerte);
  clip-path: none;
}
@media (hover: hover) and (pointer: fine) {
  .boton--contorno:hover {
    --boton-fondo: transparent;
    --boton-texto: var(--acento-texto);
    box-shadow: inset 0 0 0 1px currentColor;
  }
}

.boton--claro {
  --boton-fondo: #EDEDED;
  --boton-texto: var(--gris-900);
}
@media (hover: hover) and (pointer: fine) {
  .boton--claro:hover { --boton-fondo: #FFFFFF; }
}

.boton--grande { padding: 1.1rem 2rem; min-height: 56px; font-size: var(--t-base); }
.boton--bloque { width: 100%; }

/* Enlace con flecha: la flecha avanza, el texto no se mueve. */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--fuente-display);
  font-size: var(--t-pie);
  font-weight: 650;
  font-stretch: 102%;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--acento-texto);
  padding-block: var(--e-2);
}
.enlace-flecha svg {
  flex: none;
  transition: transform var(--d-medio) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .enlace-flecha:hover svg { transform: translateX(5px); }
}
.enlace-flecha:active { transform: scale(0.98); }

/* ==================================================================== ICONOS
   Trazo dibujado, 1.6px, retícula de 24. Nunca glifos ni emoji. */

.icono {
  width: 24px; height: 24px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
  fill: none;
  flex: none;
}
.icono--sm { width: 18px; height: 18px; stroke-width: 1.8; }
.icono--lg { width: 34px; height: 34px; stroke-width: 1.3; }

/* ================================================================ BLOQUE-DATO
   Par medida + etiqueta, alineado a una regla. No es una tarjeta de métrica
   suelta: siempre va dentro de una serie con hilo superior compartido. */

.serie-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--borde);
  border-block: 1px solid var(--borde);
}

.dato {
  background: var(--lienzo);
  padding: var(--e-5) var(--e-4) var(--e-5) 0;
  padding-inline-start: var(--e-4);
}
.serie-datos > .dato:first-child { padding-inline-start: 0; }

.dato__valor {
  display: block;
  font-family: var(--fuente-display);
  font-size: clamp(1.5rem, 1.32rem + 0.78vw, 2.125rem);
  font-weight: 740;
  font-stretch: 102%;
  letter-spacing: -0.026em;
  line-height: 1;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.dato__valor em { font-style: normal; color: var(--acento-texto); }

.dato__etiqueta {
  display: block;
  margin-top: var(--e-3);
  font-family: var(--fuente-cota);
  font-size: var(--t-cota);
  font-weight: 500;
  letter-spacing: var(--track-cota);
  text-transform: uppercase;
  color: var(--texto-suave);
  line-height: 1.4;
}

/* ============================================================== FIGURA/OBRA */

.obra {
  display: block;
  position: relative;
  margin: 0;
}

.obra__marco {
  position: relative;
  overflow: hidden;
  background: var(--superficie);
  --chaflan: 18px;
  clip-path: polygon(
    0 0, calc(100% - var(--chaflan)) 0, 100% var(--chaflan),
    100% 100%, var(--chaflan) 100%, 0 calc(100% - var(--chaflan))
  );
}

.obra__marco img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--d-lento) var(--ease-out),
              filter var(--d-lento) var(--ease-out);
}

/* Las fotos de origen son de resolución baja; un grano muy fino unifica
   la textura entre tomas y suaviza el reescalado. */
.obra__marco::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.obra__pie {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde);
}

/* Sobre el hilo del pie se traza una regla naranja, con el mismo gesto
   de izquierda a derecha que la cota: es la misma idea a otra escala. */
.obra__pie::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: -1px;
  height: 1px;
  background: var(--acento);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 180ms var(--ease-out);
}

.obra__titulo,
.obra__nota { transition: transform 420ms var(--ease-out), color 200ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .obra:hover .obra__marco img { transform: scale(1.045); }
  .obra:hover .obra__pie::before {
    clip-path: inset(0 0 0 0);
    transition: clip-path 420ms var(--ease-out);
  }
  .obra:hover .obra__titulo { transform: translate3d(3px, 0, 0); color: var(--acento-texto); }
  .obra:hover .obra__nota { transform: translate3d(3px, 0, 0); }
}

.obra__titulo {
  font-family: var(--fuente-display);
  font-size: var(--t-pie);
  font-weight: 650;
  font-stretch: 102%;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto);
  line-height: 1.35;
}

.obra__nota { font-size: var(--t-micro); color: var(--texto-suave); line-height: 1.5; }

/* ================================================================ LISTA-SPEC
   Lista de servicios con hilos. Reemplaza la fila de tarjetas iguales:
   se lee como una hoja de especificación. */

.spec { border-top: 1px solid var(--borde); }

.spec__fila {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-4);
  align-items: start;
  padding-block: clamp(0.85rem, 2vw, 1.15rem);
  border-bottom: 1px solid var(--borde);
}

.spec__marca {
  width: 9px; height: 9px;
  margin-top: 0.56em;
  flex: none;
  background: var(--acento);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.spec__texto { line-height: 1.5; }
.spec__texto strong { font-weight: 600; color: var(--texto); }
.spec__texto span { color: var(--texto-suave); }

/* ================================================================ FORMULARIO */

.campo { display: grid; gap: var(--e-2); }

.campo__etiqueta {
  font-family: var(--fuente-display);
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--texto);
}
.campo__etiqueta[data-opcional]::after {
  content: ' · opcional';
  font-family: var(--fuente-cota);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--texto-suave);
}

.campo__entrada {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 48px;
  background: var(--superficie-up);
  color: var(--texto);
  border: 1px solid var(--borde-fuerte);
  border-radius: 0;
  transition: border-color var(--d-rapido) var(--ease-out),
              background-color var(--d-rapido) var(--ease-out);
}

.campo__entrada::placeholder { color: var(--gris-500); opacity: 1; }
.tema-oscuro .campo__entrada::placeholder { color: var(--gris-400); }

.campo__entrada:hover { border-color: color-mix(in srgb, var(--acento) 55%, var(--borde-fuerte)); }
.campo__entrada:focus { outline: none; border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.campo__entrada:focus-visible { outline: var(--anillo-foco) solid var(--naranja-600); outline-offset: var(--anillo-sep); }

textarea.campo__entrada { min-height: 148px; resize: vertical; line-height: 1.58; }
select.campo__entrada { appearance: none; background-image: none; cursor: pointer; }

.campo__ayuda { font-size: var(--t-micro); color: var(--texto-suave); line-height: 1.5; }

/* Error: nombra el problema y la salida. Nunca sólo un borde rojo. */
.campo__error {
  display: none;
  align-items: flex-start;
  gap: var(--e-2);
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--naranja-700);
  font-weight: 500;
}
.tema-oscuro .campo__error { color: var(--naranja-300); }

.campo[data-invalido='true'] .campo__error { display: flex; }
.campo[data-invalido='true'] .campo__entrada {
  border-color: var(--naranja-700);
  box-shadow: inset 0 0 0 1px var(--naranja-700);
}

/* Aviso de envío */
.aviso {
  display: none;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--acento);
  background: color-mix(in srgb, var(--acento) 10%, transparent);
  font-size: var(--t-pie);
  line-height: 1.55;
}
.aviso[data-visible='true'] { display: flex; }
.aviso strong { display: block; margin-bottom: 2px; }

/* ===================================================================== PIE */

.pie {
  background: var(--gris-950);
  color: #EDEDED;
  padding-block: var(--e-9) var(--e-6);
}

.pie__parrilla {
  display: grid;
  gap: var(--e-8);
}
@media (min-width: 760px) {
  .pie__parrilla { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); }
}

.pie__logo { display: inline-block; color: #EDEDED; }
.pie__logo img { width: clamp(168px, 18vw, 196px); height: auto; }

.pie__titulo {
  font-family: var(--fuente-display);
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--gris-300);
  margin-bottom: var(--e-4);
}

.pie__lista { display: grid; gap: var(--e-3); }

.pie__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: color-mix(in srgb, #EDEDED 86%, transparent);
  font-size: var(--t-pie);
  transition: color var(--d-rapido) var(--ease-out);
  width: fit-content;
}
@media (hover: hover) and (pointer: fine) {
  .pie__enlace:hover { color: var(--naranja-400); }
}

.pie__base {
  margin-top: var(--e-8);
  padding-top: var(--e-5);
  border-top: 1px solid rgba(255 255 255 / 0.10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-6);
  align-items: baseline;
  justify-content: space-between;
}

/* ======================================================== PORTADA DE PÁGINA
   Cada página interior tiene portada propia: franja oscura a sangre con
   la misma fotografía tratada que el inicio, recortada en un punto
   distinto por página. No es la portada inmersiva del inicio —ocupa poco
   menos de media pantalla— pero da entrada y evita que una página
   empiece en blanco. */

.encabezado-pagina {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(330px, 48vh, 520px);
  background: var(--gris-950);
  color: #EDEDED;
  padding-block: calc(var(--barra-h) + clamp(2.5rem, 2rem + 4vw, 4.5rem))
                 clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
  overflow: hidden;
}

.encabezado-pagina > .contenedor { width: 100%; }

.encabezado-pagina__fondo { position: absolute; inset: 0; z-index: -2; }
.encabezado-pagina__fondo img { width: 100%; height: 100%; object-fit: cover; }

/* Un encuadre por página sobre el mismo archivo: la banda se genera alta
   (1800 × 889) justamente para que quede recorrido vertical que desplazar. */
.encabezado-pagina[data-vista='nosotros']  .encabezado-pagina__fondo img { object-position: 40% 30%; }
.encabezado-pagina[data-vista='servicios'] .encabezado-pagina__fondo img { object-position: 14% 64%; }
.encabezado-pagina[data-vista='proyectos'] .encabezado-pagina__fondo img { object-position: 84% 30%; }
.encabezado-pagina[data-vista='clientes']  .encabezado-pagina__fondo img { object-position: 50% 48%; }
.encabezado-pagina[data-vista='contacto']  .encabezado-pagina__fondo img { object-position: 4% 44%; }

.encabezado-pagina__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(8 8 8 / 0.90) 0%, rgb(8 8 8 / 0.66) 44%, rgb(8 8 8 / 0.30) 100%),
    linear-gradient(100deg, rgb(8 8 8 / 0.74) 0%, rgb(8 8 8 / 0.06) 74%);
}

.encabezado-pagina__parrilla {
  display: grid;
  gap: clamp(var(--e-4), 3vw, var(--e-8));
  align-items: end;
}
@media (min-width: 900px) {
  .encabezado-pagina__parrilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.encabezado-pagina__titulo { max-width: 18ch; color: var(--blanco); }
.encabezado-pagina__titulo em { font-style: normal; color: var(--naranja-500); }
.encabezado-pagina__guia { max-width: 46ch; color: #CFCFCF; }

.encabezado-pagina__cota { margin-top: clamp(1.75rem, 1.4rem + 2vw, 3rem); }
.encabezado-pagina__cota .cota { color: #C4C4C4; }
.encabezado-pagina__cota .cota em { color: var(--naranja-500); }
.encabezado-pagina__cota .cota-linea__trazo { color: rgb(255 255 255 / 0.30); }

/* ============================================================= MIGAS
   Ruta breve; sólo en páginas interiores. */

.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  margin-bottom: var(--e-5);
}
.migas a { display: inline-flex; align-items: center; min-height: 26px; color: #B4B4B4; transition: color var(--d-rapido) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .migas a:hover { color: var(--naranja-500); } }
.migas__sep { color: #8A8A8A; }   /* 3.2:1 — es decorativo, pero debe verse */
.migas [aria-current='page'] { color: var(--naranja-500); }

/* ========================================================= LLAMADA FINAL
   Bloque de cierre reutilizado por las páginas interiores. */

.llamada {
  background: var(--gris-900);
  color: #EDEDED;
  padding-block: var(--seccion-y);
}

.llamada__parrilla {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}
@media (min-width: 860px) {
  .llamada__parrilla {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--e-9);
  }
}

.llamada__titulo { color: #FFFFFF; max-width: 20ch; }
.llamada__titulo em { font-style: normal; color: var(--naranja-400); }
.llamada__nota { color: var(--gris-300); margin-top: var(--e-4); max-width: 46ch; }

.llamada__acciones { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; }


/* ================================================== ANCHOS DE TITULAR
   Los topes en «ch» dan la medida justa en pantallas anchas, pero en un
   móvil estrechan tanto la caja que una palabra larga —METALMECÁNICA—
   se parte por la mitad. Por debajo de 900 px manda el contenedor. */

@media (max-width: 899px) {
  .encabezado-pagina__titulo,
  .encabezado-pagina__guia,
  .llamada__titulo,
  .llamada__nota { max-width: none; }
}

/* ==================================================================== MARQUESINA
   Tira de clientes, justo donde termina la portada. Comparte el fondo
   oscuro con ella y no lleva borde superior: se lee como el zócalo de la
   portada, no como una sección aparte.

   Es deliberadamente discreta. Va en una sola fila, a tamaño de pie de
   página, porque su trabajo es dar respaldo de un vistazo y dejar pasar
   al visitante, no competir con el titular que tiene encima.

   No hay logotipos: son marcas de sus titulares, y el nombre compuesto en
   la tipografía del sitio dice lo mismo y sí pertenece a este diseño.

   Tres copias del grupo por pista: la animación recorre un tercio y
   reinicia en el mismo fotograma, así el ciclo nunca enseña el borde.
   ============================================================================ */

.marquesina {
  --desfile: 72s;
  position: relative;
  padding-block: clamp(0.85rem, 0.72rem + 0.56vw, 1.25rem);
  background: var(--gris-900);
  color: #DCDCDC;
  border-bottom: 1px solid var(--gris-700);
  overflow: hidden;
}

.marquesina__fila {
  display: flex;
  overflow: hidden;
  /* Los extremos se desvanecen: sin esto los nombres se cortan en seco
     contra el borde y el movimiento parece un error de recorte. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.marquesina__pista {
  display: flex;
  flex: none;
  width: max-content;
  animation: desfile var(--desfile) linear infinite;
  will-change: transform;
}

@keyframes desfile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3333%, 0, 0); }
}

/* Al pasar el cursor la tira se detiene: es la forma de leer un nombre
   concreto sin perseguirlo. */
@media (hover: hover) and (pointer: fine) {
  .marquesina:hover .marquesina__pista,
  .marquesina:focus-within .marquesina__pista { animation-play-state: paused; }
}

.marquesina__grupo {
  display: flex;
  align-items: center;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marquesina__pieza {
  display: flex;
  align-items: baseline;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  padding-inline-end: clamp(0.9rem, 2vw, 1.6rem);
  font-family: var(--fuente-display);
  font-size: clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem);
  font-weight: 650;
  font-stretch: 101%;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  color: #DCDCDC;
}

/* La localidad va en la monoespaciada de cotas y un paso más apagada:
   es un dato de ficha, no parte del nombre. */
.marquesina__sitio {
  font-family: var(--fuente-cota);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--gris-300);
  margin-inline-start: 0.55em;
}

/* El separador es el chaflán del logotipo reducido a su mínima expresión:
   un cuadrado girado 45°. Dibujado, no un glifo. */
.marquesina__pieza::after {
  content: '';
  width: 4px;
  height: 4px;
  flex: none;
  align-self: center;
  background: var(--naranja-500);
  transform: rotate(45deg);
}

/* Sin movimiento: la tira se vuelve recorrible a mano y la copia
   duplicada sale del árbol accesible. */
@media (prefers-reduced-motion: reduce) {
  .marquesina__fila {
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent 100%);
  }
  .marquesina__pista { animation: none; }
  .marquesina__grupo[aria-hidden='true'] { display: none; }
}

/* ================================================================ WHATSAPP
   Botón flotante de contacto. Sustituye al número que vivía en el
   encabezado: en Bolivia WhatsApp es el canal real de una consulta
   comercial, y un número escrito obliga a copiarlo a mano.

   Se mantiene fuera de la vista hasta que el visitante pasa la portada:
   es lo primero que se ve del sitio y no se tapa con un control.

   El glifo es la marca de WhatsApp, usada para identificar el servicio al
   que lleva el enlace, que es el uso que Meta contempla en sus normas de
   marca. Relleno naranja y glifo en gris oscuro, igual que el resto de
   botones primarios del sitio: 6.81:1.
   ======================================================================== */

.wasap {
  position: fixed;
  z-index: 90;
  inset-inline-end: clamp(1rem, 2.6vw, 2rem);
  inset-block-end: calc(clamp(1rem, 2.6vw, 2rem) + env(safe-area-inset-bottom, 0px));

  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;

  background: var(--naranja-500);
  color: var(--gris-900);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.26), 0 12px 28px -8px rgb(0 0 0 / 0.42);

  /* Estado de reposo: fuera de la vista, pero ya compuesto. */
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.92);
  pointer-events: none;
  transition:
    opacity 260ms var(--ease-out),
    transform 380ms var(--ease-out),
    background-color var(--d-rapido) var(--ease-out),
    box-shadow var(--d-medio) var(--ease-out);
}

.wasap[data-visible='true'] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}

.wasap__glifo { width: 29px; height: 29px; fill: currentColor; }

@media (hover: hover) and (pointer: fine) {
  .wasap:hover {
    background: var(--naranja-400);
    box-shadow: 0 5px 12px rgb(0 0 0 / 0.28), 0 18px 38px -10px rgb(0 0 0 / 0.46);
  }
}

.wasap[data-visible='true']:active { transform: scale(0.94); }

/* Etiqueta en burbuja, que crece desde el propio botón y no desde su
   centro: el origen de la transformación es el borde que la lanza. */
.wasap__texto {
  position: absolute;
  inset-inline-end: calc(100% + 12px);
  padding: 0.45rem 0.7rem;
  background: var(--gris-900);
  color: #EDEDED;
  font-family: var(--fuente-display);
  font-size: var(--t-micro);
  font-weight: 650;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--sombra-2);
  opacity: 0;
  transform: translate3d(5px, 0, 0) scale(0.96);
  transform-origin: right center;
  pointer-events: none;
  transition: opacity 130ms var(--ease-out), transform 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .wasap:hover .wasap__texto,
  .wasap:focus-visible .wasap__texto {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wasap {
    transform: none;
    transition: opacity 120ms linear, background-color 120ms linear;
  }
  .wasap[data-visible='true'] { transform: none; }
  .wasap[data-visible='true']:active { transform: none; background: var(--naranja-600); }
  .wasap__texto { transform: none; transition: opacity 120ms linear; }
}