/* =========================================================
   Fortek Industrial — estilos v3
   Sistema: placa de acero + rojo de forja + ámbar de peligro,
   tipografía condensada de trazo industrial (Barlow Condensed)
   ========================================================= */

:root {
  --placa: #10131a;
  --placa-oscura: #0a0c11;
  --placa-media: #1a1e27;
  --acero: #6b7684;
  --acero-claro: #b7c0c9;
  --blanco: #f3f5f7;
  --rojo: #b3262b;
  --rojo-vivo: #e0353c;
  --ambar: #c88a2e;
  --ambar-vivo: #e0a53f;

  /* Sección "placa clara" (blueprint/acero cepillado) para romper el negro */
  --placa-clara: #dfe2e6;
  --placa-clara-borde: #c7ccd1;
  --texto-en-claro: #1a1d21;
  --acero-en-claro: #565f68;

  --vidrio: rgba(255, 255, 255, .045);
  --vidrio-fuerte: rgba(255, 255, 255, .07);
  --vidrio-borde: rgba(255, 255, 255, .09);

  --titulo: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texto: "Barlow", "Segoe UI", Arial, sans-serif;

  --radio-chico: 6px;
  --radio: 14px;
  --ancho: 1180px;
  --encabezado-alto: 72px;
}

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--encabezado-alto) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--blanco);
  background-color: var(--placa);
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(120% 90% at 15% 0%, rgba(179,38,43,.09), transparent 60%);
  background-size: 46px 46px, 46px 46px, auto;
  overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }
a { color: inherit; }

h1,
h2,
h3,
h4 {
  font-family: var(--titulo);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.005em;
  text-wrap: balance;
}
h2 { font-size: clamp(2.3rem, 5.2vw, 3.4rem); }
h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.05; }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--acero-claro); }

p { max-width: 64ch; }
.hero-sub,
.panel-intro,
.contacto-info p,
.pisos-texto p { text-wrap: pretty; }

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

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

.saltar {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--rojo);
  border-radius: var(--radio-chico);
  text-decoration: none;
}
.saltar:focus { top: 16px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  font-family: var(--texto);
  font-weight: 600;
  font-size: 1.02rem;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .15s, box-shadow .2s;
}
.boton:active { transform: translateY(1px); }
.boton svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round;
}

.boton-rojo {
  background: linear-gradient(155deg, var(--rojo-vivo), var(--rojo) 65%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 24px -10px rgba(179,38,43,.8);
}
.boton-rojo:hover { background: var(--rojo-vivo); }

.boton-vidrio {
  background: var(--vidrio);
  border-color: var(--vidrio-borde);
  color: var(--blanco);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.boton-vidrio:hover { border-color: rgba(255,255,255,.28); background: var(--vidrio-fuerte); }

.boton-chico { min-height: 40px; padding: 0 16px; font-size: .875rem; }
.boton-grande { min-height: 54px; padding: 0 26px; font-size: 1rem; }
.boton-ancho { width: 100%; }
.boton[disabled] { opacity: .6; cursor: wait; }

/* ---------- Encabezado (vidrio) ---------- */
.encabezado {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: background-color .25s, border-color .25s;
}
.encabezado.con-fondo {
  background: rgba(19, 21, 25, .92);
  border-bottom-color: var(--vidrio-borde);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

.encabezado-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--encabezado-alto);
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--titulo);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .015em;
  text-transform: uppercase;
}
.marca-logo {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--placa);
  border: 1px solid var(--vidrio-borde);
}
.marca-logo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.22) translateY(3%);
}

.menu {
  display: flex;
  align-items: center;
  gap: 26px;
}
.menu a:not(.boton) {
  position: relative;
  text-decoration: none;
  font-weight: 500;
  color: var(--acero-claro);
  transition: color .2s;
}
.menu a:not(.boton)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--rojo);
  transform: scaleX(0);
  transition: transform .25s;
}
.menu a:not(.boton):hover { color: var(--blanco); }
.menu a.activo { color: var(--blanco); }
.menu a.activo::after { transform: scaleX(1); }

.menu-boton {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.menu-boton span {
  position: absolute;
  left: 11px; right: 11px;
  height: 2px;
  background: var(--blanco);
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.menu-boton span:nth-child(1) { top: 15px; }
.menu-boton span:nth-child(2) { top: 21px; }
.menu-boton span:nth-child(3) { top: 27px; }
.menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =========================================================
   HERO: piso epóxico en perspectiva (juntas y brillo)
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--encabezado-alto) + 48px) 0 120px;
  overflow: hidden;
  background: radial-gradient(55% 50% at 78% 40%, rgba(111,123,132,.2), transparent 70%);
}

.hero-piso {
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: 0;
  height: 36%;
  perspective: 420px;
  perspective-origin: 50% 0%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.45) 45%, transparent 92%);
          mask-image: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.45) 45%, transparent 92%);
}
.hero-piso-plano {
  position: absolute;
  inset: 0 0 -60% 0;
  transform-origin: 50% 0%;
  transform: rotateX(68deg);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 2px, rgba(255,255,255,.06) 2px 3px, transparent 3px 110px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, rgba(255,255,255,.06) 2px 3px, transparent 3px 110px),
    linear-gradient(180deg, #4a545c 0%, #353c43 60%, #2b3137 100%);
  overflow: hidden;
}
/* Brillo del epóxico: una pasada al cargar y después cada tanto */
.hero-piso-plano::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: brillo-piso 9s ease-in-out .8s infinite;
}
@keyframes brillo-piso {
  0%   { transform: translateX(-100%); }
  28%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.hero-fila {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 48px;
}

.hero-lugar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  margin-bottom: 22px;
  font-weight: 500;
  font-size: .95rem;
  color: var(--acero-claro);
  background: var(--vidrio);
  border: 1px solid var(--vidrio-borde);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  animation: subir .7s cubic-bezier(.2,.8,.2,1) .05s both;
}
.hero-lugar svg {
  width: 18px; height: 18px;
  fill: none; stroke: var(--rojo-vivo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.hero h1 { max-width: 62ch; }

.hero-linea-1,
.hero-linea-2 {
  display: block;
  text-wrap: balance;
  animation: subir .8s cubic-bezier(.2,.8,.2,1) both;
}
.hero-linea-1 {
  font-size: clamp(2rem, 5.2vw, 3.7rem);
  animation-delay: .15s;
}
.hero-linea-2 {
  margin-top: 20px;
  font-size: clamp(1.25rem, 2.6vw, 1.8rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--acero-claro);
  animation-delay: .3s;
}

.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
  animation: subir .8s cubic-bezier(.2,.8,.2,1) .45s both;
}

/* =========================================================
   Panel del emblema: el logo ya no flota suelto, vive dentro de
   un panel con esquinas de mira (firma visual del sitio) y un
   barrido de escaneo, como un módulo de control industrial.
   Mismo componente en todos los tamaños de pantalla.
   ========================================================= */
.panel-emblema {
  position: relative;
  width: min(100%, 400px);
  justify-self: center;
  padding: 26px;
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border: 1px solid var(--vidrio-borde);
  border-radius: 18px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  animation: aparecer 1.1s cubic-bezier(.2,.8,.2,1) both;
}

.esquina { position: absolute; width: 26px; height: 26px; z-index: 2; pointer-events: none; }
.esquina--tl { top: -1px; left: -1px; border-top: 2px solid var(--rojo-vivo); border-left: 2px solid var(--rojo-vivo); border-radius: 10px 0 0 0; }
.esquina--br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--rojo-vivo); border-right: 2px solid var(--rojo-vivo); border-radius: 0 0 10px 0; }

.panel-escaner {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rojo-vivo) 45%, var(--ambar-vivo) 55%, transparent);
  filter: blur(.3px);
  animation: escaneo 6s ease-in-out infinite;
}
@keyframes escaneo {
  0%   { top: -4%; opacity: 0; }
  8%   { opacity: .85; }
  50%  { opacity: .85; }
  92%  { opacity: 0; }
  100% { top: 104%; opacity: 0; }
}

.hero-logo {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--vidrio-borde), 0 30px 60px -22px rgba(0,0,0,.65);
}
/* Resplandor detrás del emblema, del rojo de la marca */
.hero-logo-brillo {
  position: absolute;
  inset: -18%;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(179,38,43,.4), transparent 72%);
  filter: blur(6px);
}
.hero-logo img {
  position: absolute;
  z-index: 1;
  inset: 7%;
  width: 86%;
  height: 86%;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(closest-side at 50% 55%, #000 72%, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% 55%, #000 72%, transparent 100%);
}

.anillo {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
}
.anillo-ext { stroke: var(--acero); opacity: .45; animation: girar 40s linear infinite; }
.anillo-int { stroke: var(--rojo); animation: girar 14s linear infinite reverse; }

@keyframes girar    { to { transform: rotate(360deg); } }
@keyframes aparecer { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes subir    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Secciones ---------- */
.seccion { padding: 104px 0; }

.seccion-cabeza { margin-bottom: 44px; }

/* =========================================================
   SERVICIOS en pestañas (sin JS se muestran todos)
   ========================================================= */
.serv { display: grid; gap: 16px; }
.serv-lista { display: none; }

.js .serv {
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: start;
}
.js .serv-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: calc(var(--encabezado-alto) + 24px);
}

.serv-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 12px 18px;
  font-family: var(--texto);
  font-weight: 600;
  font-size: 1.05rem;
  text-align: left;
  color: var(--acero-claro);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.serv-tab svg {
  flex: none;
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.serv-tab:hover { color: var(--blanco); background: var(--vidrio); }
.serv-tab[aria-selected="true"] {
  color: var(--blanco);
  background: var(--vidrio-fuerte);
  border-color: var(--vidrio-borde);
  box-shadow: inset 3px 0 0 var(--rojo);
}
.serv-tab[aria-selected="true"] svg { stroke: var(--rojo-vivo); }

.tarjeta {
  position: relative;
  background: var(--vidrio);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  overflow: hidden;
}
/* Luz que sigue al cursor (posición desde app.js) */
.tarjeta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--x, 50%) var(--y, -40%), rgba(255,255,255,.06), transparent 60%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.tarjeta:hover::before { opacity: 1; }

.panel {
  display: flex;
  flex-direction: column;
  padding: 38px 40px 40px;
}
.js .panel:not(.activo) { display: none; }
.js .panel.activo { animation: panel-entra .35s ease-out; }

/* =========================================================
   Ilustraciones de cada servicio (una escena animada por panel)
   ========================================================= */
.panel-ilustracion {
  position: relative;
  height: 180px;
  margin: -38px -40px 32px;
  background:
    radial-gradient(120% 100% at 12% 0%, rgba(179,38,43,.18), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 3px, transparent 3px 20px),
    linear-gradient(180deg, rgba(0,0,0,.3), transparent 75%),
    var(--placa-oscura);
  border-bottom: 1px solid var(--vidrio-borde);
}
.panel-ilustracion svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --- Mantenimiento industrial: engranes --- */
.engrane-grande,
.engrane-chica {
  fill: var(--acero);
  fill-opacity: .9;
  transform-box: fill-box;
  transform-origin: center;
}
.engrane-chica { fill: var(--acero-claro); fill-opacity: .8; }
.engrane-grande .hueco,
.engrane-chica .hueco { fill: var(--placa-oscura); }
.engrane-grande .remache,
.engrane-chica .remache { fill: var(--rojo-vivo); }
.engrane-grande { animation: girar 22s linear infinite; }
.engrane-chica { animation: girar 13s linear infinite reverse; }
.llave-ilustracion {
  fill: none;
  stroke: var(--rojo-vivo);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  animation: llave-balanceo 4.5s ease-in-out infinite;
}
@keyframes llave-balanceo {
  0%, 100% { rotate: -4deg; }
  50%      { rotate: 5deg; }
}

/* --- Mantenimiento comercial: repintado --- */
.fachada { fill: none; stroke: var(--acero-claro); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.pintura {
  fill: var(--rojo-vivo);
  opacity: .2;
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: pasada-pintura 5.5s ease-in-out infinite;
}
.rodillo {
  fill: none;
  stroke: var(--acero-claro);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: mover-rodillo 5.5s ease-in-out infinite;
}
.rodillo rect { fill: var(--acero-claro); stroke: none; }
@keyframes pasada-pintura {
  0%, 8%   { transform: scaleX(0); }
  50%, 82% { transform: scaleX(1); }
  100%     { transform: scaleX(0); }
}
@keyframes mover-rodillo {
  0%, 8%   { transform: translate(46px, 99px); opacity: 0; }
  14%      { opacity: 1; }
  50%, 76% { transform: translate(214px, 99px); opacity: 1; }
  82%      { opacity: 0; }
  100%     { transform: translate(46px, 99px); opacity: 0; }
}

/* --- HVAC: ventilador --- */
.aspas { fill: var(--acero-claro); fill-opacity: .8; transform-box: fill-box; transform-origin: center; animation: girar 3.2s linear infinite; }
.aspas .buje { fill: var(--rojo-vivo); }
.rejilla { fill: none; stroke: var(--acero); stroke-width: 2.5; opacity: .7; }
.lama { stroke: var(--placa-oscura); stroke-width: 7; }
.brisa { fill: none; stroke: var(--acero-claro); stroke-width: 2; stroke-linecap: round; opacity: 0; stroke-dasharray: 3 7; animation: brisa-avanza 2.4s ease-in-out infinite; }
.brisa:nth-child(5) { animation-delay: .25s; }
.brisa:nth-child(6) { animation-delay: .5s; }
@keyframes brisa-avanza {
  0%   { opacity: 0; stroke-dashoffset: 10; }
  20%  { opacity: .8; }
  70%  { opacity: 0; }
  100% { opacity: 0; stroke-dashoffset: -14; }
}

/* --- Electricidad: tablero --- */
.tablero { fill: var(--placa-oscura); stroke: var(--acero); stroke-width: 2; }
.interruptor { fill: var(--acero-claro); opacity: .35; animation: interruptor-pulso 2.2s ease-in-out infinite; }
@keyframes interruptor-pulso {
  0%, 100% { opacity: .35; }
  50%      { opacity: .95; fill: var(--rojo-vivo); }
}
.cable { fill: none; stroke: var(--acero); stroke-width: 2; stroke-dasharray: 5 5; animation: corriente-fluye 1.1s linear infinite; }
@keyframes corriente-fluye { to { stroke-dashoffset: -20; } }
.rayo { fill: var(--rojo-vivo); animation: rayo-pulso 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes rayo-pulso {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.08); }
}

/* --- CCTV: cámara con cono de visión y visor --- */
.cam-soporte { fill: var(--acero); }
.cam-brazo { stroke: var(--acero); stroke-width: 5; stroke-linecap: round; }
.cam-cuerpo { fill: var(--acero); }
.cam-visera { fill: var(--acero-claro); }
.cam-lente { fill: var(--placa-oscura); stroke: var(--acero-claro); stroke-width: 2; }
.cam-ojo { fill: var(--rojo-vivo); opacity: .9; }
.cono {
  fill: var(--rojo-vivo);
  opacity: .16;
  transform-box: fill-box;
  transform-origin: 0% 39.6%;
  animation: cono-barrido 6s ease-in-out infinite;
}
@keyframes cono-barrido {
  0%, 100% { rotate: -11deg; }
  50%      { rotate: 11deg; }
}
.visor {
  fill: none;
  stroke: var(--acero-claro);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}
.rec { fill: var(--rojo-vivo); animation: rec-parpadeo 1.4s ease-in-out infinite; }
@keyframes rec-parpadeo {
  0%, 55%  { opacity: 1; }
  60%, 100% { opacity: .15; }
}

/* --- Construcción: plano y grúa --- */
.plano { stroke: var(--acero); stroke-width: 1; opacity: .16; }
.edificio-dibujo {
  fill: none;
  stroke: var(--acero-claro);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dibujar-edificio 7s ease-in-out infinite alternate;
}
@keyframes dibujar-edificio { 0% { stroke-dashoffset: 1; } 45%, 100% { stroke-dashoffset: 0; } }
.grua { stroke: var(--acero); stroke-width: 2; stroke-linecap: round; }
.grua .gancho { fill: var(--rojo-vivo); stroke: none; }
.grua .pluma,
.grua .tiro,
.grua .gancho {
  transform-box: fill-box;
  transform-origin: 356px 26px;
  animation: grua-balanceo 4.6s ease-in-out infinite;
}
@keyframes grua-balanceo {
  0%, 100% { rotate: -3deg; }
  50%      { rotate: 3deg; }
}
@keyframes panel-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.panel h3 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; }
.panel-intro {
  margin-top: 12px;
  font-size: 1.1rem;
  color: var(--acero-claro);
}

.panel .boton { align-self: flex-start; }

.checks { list-style: none; display: grid; gap: 12px; margin: 24px 0 32px; font-size: 1.05rem; }
.checks li {
  position: relative;
  padding-left: 30px;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .38em;
  width: 7px;
  height: 12px;
  border: solid var(--rojo-vivo);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* =========================================================
   PISOS Y CONCRETO
   ========================================================= */
.pisos {
  background: linear-gradient(180deg, var(--placa-oscura), rgba(21,23,27,.55));
  border-top: 1px solid var(--vidrio-borde);
  border-bottom: 1px solid var(--vidrio-borde);
}

.pisos-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.pisos-texto > p {
  margin-top: 16px;
  font-size: 1.1rem;
  color: var(--acero-claro);
}

/* Corte de capas del piso: se separa al entrar en pantalla */
.pisos-muestra {
  position: relative;
  height: 360px;
  perspective: 1200px;
}
.muestra-capa {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 34%;
  top: 33%;
  border-radius: 10px;
  transform-style: preserve-3d;
  transform: rotateX(62deg) rotateZ(-32deg) translateZ(0);
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 30px 40px -20px rgba(0,0,0,.6);
}
.muestra-capa span {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: .8rem;
  color: rgba(255,255,255,.85);
  opacity: 0;
  transition: opacity .5s .9s;
}
.capa-concreto {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0 2px, transparent 3px) 0 0 / 18px 18px,
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.25) 0 2px, transparent 3px) 0 0 / 23px 23px,
    #4d545b;
}
.capa-primer { background: rgba(120,130,138,.55); border: 1px solid rgba(255,255,255,.12); }
.capa-epoxico {
  background: linear-gradient(120deg, #7c8790 0%, #5b666f 45%, #8e99a2 70%, #5b666f 100%);
  overflow: hidden;
}
.capa-epoxico::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform: translateX(-100%);
}
.capa-sello {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.pisos-muestra.visible .capa-concreto { transform: rotateX(62deg) rotateZ(-32deg) translateZ(-90px); }
.pisos-muestra.visible .capa-primer { transform: rotateX(62deg) rotateZ(-32deg) translateZ(-30px); }
.pisos-muestra.visible .capa-epoxico { transform: rotateX(62deg) rotateZ(-32deg) translateZ(30px); }
.pisos-muestra.visible .capa-sello { transform: rotateX(62deg) rotateZ(-32deg) translateZ(90px); }
.pisos-muestra.visible .muestra-capa span { opacity: 1; }
.pisos-muestra.visible .capa-epoxico::after { animation: brillo 3.5s ease-in-out 1.2s infinite; }
@keyframes brillo {
  0%   { transform: translateX(-100%); }
  45%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.especialidades {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 56px;
}
.especialidad {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  background: var(--vidrio);
  border: 1px solid var(--vidrio-borde);
  border-top: 3px solid var(--acero);
  border-radius: 4px 4px var(--radio) var(--radio);
  transition: border-top-color .25s, transform .2s;
}
.especialidad:hover { transform: translateY(-3px); }
.especialidad:nth-child(1) { border-top-color: var(--rojo); }
.especialidad:nth-child(2) { border-top-color: var(--ambar); }
.especialidad:nth-child(4) { border-top-color: var(--rojo); }
.especialidad p {
  flex: 1;
  margin-top: 10px;
  font-size: 1rem;
  color: var(--acero-claro);
}
.especialidad span {
  align-self: flex-start;
  margin-top: 20px;
  padding-bottom: 2px;
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 2px solid var(--rojo);
  transition: border-color .2s;
}
.especialidad:hover span { border-bottom-color: var(--rojo-vivo); }
.especialidad:hover { background: var(--vidrio-fuerte); }

/* ---------- Por qué Fortek ---------- */
.razones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
}
.razon svg {
  width: 34px; height: 34px;
  margin-bottom: 18px;
  fill: none; stroke: var(--rojo-vivo); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.razon p {
  margin-top: 8px;
  font-size: 1rem;
  color: var(--acero-claro);
}

/* ---------- Proceso: franja clara de acero cepillado ----------
   Rompe el negro corrido del resto del sitio, como una placa de
   especificaciones atornillada entre dos secciones oscuras. */
.proceso-seccion {
  padding: 88px 0;
  background:
    repeating-linear-gradient(100deg, rgba(0,0,0,.05) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, var(--placa-clara), #cfd4d9);
  color: var(--texto-en-claro);
  border-top: 6px solid var(--placa-oscura);
  border-bottom: 6px solid var(--placa-oscura);
}
.proceso-seccion .seccion-cabeza h2 { color: var(--texto-en-claro); }
.proceso-seccion .seccion-cabeza p { color: var(--acero-en-claro); }

.proceso {
  list-style: none;
  counter-reset: paso;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.proceso li {
  counter-increment: paso;
  position: relative;
  padding: 30px 22px 24px;
  background: #fff;
  border: 1px solid var(--placa-clara-borde);
  border-radius: var(--radio-chico);
  box-shadow: 0 14px 26px -18px rgba(15,17,20,.35);
}
.proceso li::before {
  content: "0" counter(paso);
  display: block;
  margin-bottom: 10px;
  font-family: var(--titulo);
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--rojo);
}
.proceso li:nth-child(2)::before { color: var(--ambar); }
.proceso li:nth-child(3)::before { color: var(--acero); }
.proceso li:nth-child(4)::before { color: var(--rojo); }
.proceso h3 { color: var(--texto-en-claro); }
.proceso p {
  margin-top: 8px;
  font-size: 1rem;
  color: var(--acero-en-claro);
}

/* ---------- Contacto ---------- */
.contacto {
  background: radial-gradient(50% 60% at 85% 50%, rgba(111,123,132,.14), transparent 70%);
}
.contacto-fila {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.contacto-info > p {
  margin-top: 14px;
  color: var(--acero-claro);
}

.datos {
  list-style: none;
  margin-top: 30px;
  display: grid;
  gap: 22px;
}
.datos li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  word-break: break-word;
}
.datos svg {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
  fill: none; stroke: var(--rojo-vivo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.dato-titulo {
  display: block;
  font-size: .875rem;
  color: var(--acero);
}
.datos a { text-decoration: none; font-weight: 600; }
.datos a[href^="mailto:"] { font-size: clamp(.85rem, 4.2vw, 1.06rem); overflow-wrap: anywhere; }
.datos a:hover { text-decoration: underline; text-decoration-color: var(--rojo); text-underline-offset: 4px; }

.formulario {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 32px;
  background: var(--vidrio);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.campo { display: grid; gap: 6px; }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo label { font-weight: 600; font-size: .95rem; }
.opcional { font-weight: 400; color: var(--acero); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--blanco);
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radio-chico);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3bdc4' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}
.campo select option { background: var(--placa); color: var(--blanco); }
.campo ::placeholder { color: var(--acero); }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--acero-claro);
  background: rgba(0,0,0,.35);
  box-shadow: 0 0 0 3px rgba(179,189,196,.15);
}
.campo .invalido,
.campo .invalido:focus { border-color: var(--rojo-vivo); }
.error-campo { font-size: .875rem; color: #ff8a8f; }

.trampa {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .95rem;
  color: var(--acero-claro);
  cursor: pointer;
}
.aviso input {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--rojo);
}
.aviso a { color: var(--blanco); }
.aviso.invalido span { color: #ff8a8f; }

.estado { min-height: 1.5em; font-size: .95rem; text-align: center; }
.estado.ok { color: #8fd9a8; }
.estado.error { color: #ff8a8f; }

/* ---------- Pie ---------- */
.pie {
  background: var(--placa-oscura);
  border-top: 1px solid var(--vidrio-borde);
  color: var(--acero-claro);
  font-size: .98rem;
}

.pie-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding-top: 40px;
  padding-bottom: 24px;
}
.pie .marca { color: var(--blanco); }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.pie-enlaces a { text-decoration: none; color: var(--acero-claro); overflow-wrap: anywhere; transition: color .2s; }
.pie-enlaces a:hover { color: var(--blanco); }
.pie-copy {
  padding-top: 8px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  font-size: .9rem;
  color: var(--acero);
}
/* Pie simple del aviso de privacidad (sin enlaces) */
.pie > .pie-fila:only-child { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }

/* ---------- WhatsApp flotante ---------- */
.whatsapp-flotante {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1f9d55;
  box-shadow: 0 10px 24px rgba(0,0,0,.4);
  animation: whatsapp-rebote 3.4s ease-in-out 2s infinite;
  transition: transform .2s, opacity .25s;
}
.whatsapp-flotante:hover {
  transform: scale(1.08);
  animation-play-state: paused;
}
/* Se atenúa cuando ya hay otro botón de WhatsApp visible en pantalla (evita encimarse) */
.whatsapp-flotante.oculto {
  opacity: 0;
  transform: scale(.7);
  pointer-events: none;
  transition: transform .25s, opacity .25s;
}
/* Dos anillos de pulso, uno detrás de otro */
.whatsapp-flotante::before,
.whatsapp-flotante::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #1f9d55;
  z-index: -1;
  animation: whatsapp-pulso 2.6s ease-out infinite;
}
.whatsapp-flotante::after { animation-delay: 1.3s; }
.whatsapp-flotante svg {
  position: relative;
  width: 30px; height: 30px;
  fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round;
}

@keyframes whatsapp-pulso {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes whatsapp-rebote {
  0%, 78%, 100% { transform: translateY(0); }
  84%           { transform: translateY(-9px); }
  90%           { transform: translateY(0); }
  94%           { transform: translateY(-4px); }
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1024px) {
  .especialidades,
.razones { grid-template-columns: repeat(2, 1fr); }
  
}

@media (max-width: 960px) {
  .hero-fila,
.pisos-fila,
.contacto-fila { grid-template-columns: 1fr; }

  .hero { min-height: auto; padding-bottom: 96px; }
  .panel-emblema { width: min(78%, 340px); order: -1; margin: 0 auto; }
  .hero h1 { max-width: 34ch; }

  .pisos-muestra { height: 300px; order: -1; }
  .proceso { grid-template-columns: repeat(2, 1fr); }

  .js .serv { grid-template-columns: 1fr; }
  .js .serv-lista {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    padding-bottom: 4px;
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 28px), transparent);
  }
  .js .serv-lista::-webkit-scrollbar { display: none; }
  .serv-tab {
    width: auto;
    flex: none;
    scroll-snap-align: start;
    white-space: nowrap;
    border-color: var(--vidrio-borde);
  }
  .serv-tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--rojo); }

  
}

@media (max-width: 820px) {
  .menu-boton { display: block; }

  .menu {
    position: fixed;
    top: calc(var(--encabezado-alto) + env(safe-area-inset-top, 0px));
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 24px;
    background: var(--placa-oscura);
    border-bottom: 1px solid var(--vidrio-borde);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .menu.abierto { opacity: 1; transform: none; visibility: visible; }
  .menu a:not(.boton) {
    padding: 14px 0;
    border-bottom: 1px solid var(--vidrio-borde);
    font-size: 1.05rem;
  }
  .menu a:not(.boton)::after { display: none; }
  .menu .boton { margin-top: 16px; min-height: 48px; }
  .encabezado:has(.menu.abierto) { background: var(--placa-oscura); }

  
  
}

@media (max-width: 600px) {
  .seccion { padding: 76px 0; }
  .proceso-seccion { padding-top: 0; }
  .contenedor { padding: 0 20px; }
  .js .serv-lista { margin: 0 -20px; padding-left: 20px; padding-right: 20px; scroll-padding-inline: 20px; }

  .hero { padding-top: calc(var(--encabezado-alto) + 20px); padding-bottom: 72px; }
  .hero-fila { gap: 16px; display: block; }
  .hero-lugar { margin-bottom: 22px; }
  .hero-acciones .boton { width: 100%; }
  .hero-piso { height: 30%; }

  /* El panel del emblema ya no es un flotante: es una tarjeta más,
     así se comporta igual de bien en cualquier ancho de pantalla. */
  .panel-emblema { width: 100%; max-width: 300px; margin: 32px auto 0; padding: 20px; }
  

  .panel { padding: 26px 22px 28px; }
  
  .panel .boton { align-self: stretch; }

  .especialidades,
.razones,
.proceso { grid-template-columns: 1fr; }
  .razones { gap: 32px; }
  .pisos-muestra { height: 240px; }

  .campo-doble { grid-template-columns: 1fr; }
  .formulario { padding: 22px; }

  
  

  .whatsapp-flotante { width: 50px; height: 50px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .whatsapp-flotante svg { width: 26px; height: 26px; }

  
  
}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
*::before,
*::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}