/* ===========================================================================
   LUAL PERÚ — Dirección de arte v3
   Principios: escala monumental, hairlines en vez de cajas, imagen a sangre,
   acento usado con avaricia, texto reducido al hueso.
   =========================================================================== */

:root{
  --negro:#15171A;
  --negro-2:#1D2024;
  --negro-3:#252A2F;
  --hair:rgba(255,255,255,.13);
  --hair-oscura:rgba(21,23,26,.12);

  --blanco:#FFFFFF;
  --hueso:#EFF1F2;
  --tinta:#16222B;
  --tinta-2:#4C5C66;
  --tinta-3:#5E6B73;
  --claro:#C9CDD2;
  --claro-2:#8E959C;

  --fuego:#F2C230;      /* el acento. Se usa poco y se nota mucho. */
  --fuego-tinta:#D9A800;
  --fuego-2:#FFE07A;        /* pareja clara del degradado */
  --fuego-oscuro:#7F6200;   /* el amarillo sobre superficie clara: 5.75 blanco · 5.08 hueso */
  --btn-a:#FFD24A; --btn-b:#E0AC12;   /* relleno del botón principal */
  --sobre-fuego:#15171A;    /* texto encima del amarillo */
  --luz-rgb:242,194,48; --luz-a:.13;
  --luz2-rgb:120,130,140; --luz2-a:.16;

  --display:'Archivo','Archivo Expanded',system-ui,'Segoe UI',sans-serif;
  --texto:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:180px;

  --maxw:1440px;
  --pad:clamp(20px,5vw,72px);
  --t:.5s cubic-bezier(.2,.7,.25,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--blanco); color:var(--tinta);
  font-family:var(--texto); font-size:clamp(15px,1.05vw,17px); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--fuego); outline-offset:3px}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.saltar{position:absolute; left:-9999px}
.saltar:focus{left:20px; top:20px; z-index:200; background:#fff; color:#000; padding:12px 18px}

/* --- Tipografía: la escala es el diseño ---------------------------------- */
.display{
  font-family:var(--display); font-weight:800;
  font-variation-settings:'wdth' 112;
  line-height:.92; letter-spacing:-.035em; margin:0;
  text-wrap:balance;
}
.d1{font-size:clamp(2.6rem,7.6vw,6.75rem)}
.d2{font-size:clamp(2.2rem,6.4vw,5.25rem)}
.d3{font-size:clamp(1.5rem,3.2vw,2.6rem); line-height:1; letter-spacing:-.025em}

/* Etiqueta micro: el contrapeso de la escala grande */
.micro{
  font-family:var(--display); font-weight:600; font-size:.6875rem;
  letter-spacing:.22em; text-transform:uppercase; margin:0;
  font-variation-settings:'wdth' 100;
}
.micro-fuego{color:var(--fuego)}
.micro-tenue{color:var(--tinta-3)}
.micro-claro{color:var(--claro-2)}

.lede{font-size:clamp(1.0625rem,1.5vw,1.375rem); line-height:1.5; max-width:44ch;
  color:var(--tinta-2); font-weight:400; margin:0}
.lede-claro{color:var(--claro)}
p{margin:0 0 1em; max-width:62ch}
.tenue{color:var(--tinta-2)}

/* --- Enlaces y acciones --------------------------------------------------- */
.accion{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--display); font-weight:600; font-size:.875rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding:20px 0; border-bottom:1px solid currentColor;
  transition:gap var(--t), color var(--t);
}
.accion .flecha{transition:transform var(--t)}
.accion:hover{gap:22px; color:var(--fuego)}
.accion-fuego{color:var(--fuego)}
.accion-relleno{
  border:0; background:var(--fuego); color:#fff;
  padding:18px 30px; letter-spacing:.05em;
  transition:background var(--t);
}
.accion-relleno:hover{background:var(--fuego-tinta); color:#fff}
.accion-linea{border:1px solid var(--hair); padding:18px 30px; color:#fff; transition:background var(--t), color var(--t)}
.accion-linea:hover{background:#fff; color:var(--negro)}

/* --- Barra superior ------------------------------------------------------- */
.top{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:var(--s5);
  padding:var(--s5) var(--pad);
  mix-blend-mode:normal; transition:background var(--t), border-color var(--t), padding var(--t);
  border-bottom:1px solid transparent;
}
.top.fija{background:rgba(21,23,26,.92); backdrop-filter:blur(10px);
  border-bottom-color:var(--hair); padding-top:var(--s4); padding-bottom:var(--s4)}
.logo{display:flex; align-items:center; gap:11px; margin-right:auto; color:#fff}
.logo .marca-barra{width:4px; height:22px; background:var(--fuego)}
.logo b{font-family:var(--display); font-weight:800; font-size:1rem; letter-spacing:.02em;
  font-variation-settings:'wdth' 115}
.top nav{display:none; gap:var(--s6); align-items:center}
.top nav a{font-size:.8125rem; letter-spacing:.04em; color:var(--claro); transition:color var(--t)}
.top nav a:hover{color:#fff}
.top .cta-top{display:none}
@media(min-width:1080px){ .top nav{display:flex} .top .cta-top{display:inline-flex} .top .abrir{display:none} }
.abrir{background:none; border:0; color:#fff; font-family:var(--display); font-weight:600;
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; padding:8px 0}

/* Panel móvil a pantalla completa */
.panel{position:fixed; inset:0; z-index:99; background:var(--negro); padding:100px var(--pad) var(--s7);
  display:none; flex-direction:column; overflow-y:auto}
.panel.abierto{display:flex}
.panel a{font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,7vw,2.4rem);
  letter-spacing:-.02em; color:#fff; padding:var(--s3) 0; border-bottom:1px solid var(--hair);
  font-variation-settings:'wdth' 108}
.panel a:last-of-type{color:var(--fuego)}

/* --- Portada a sangre ----------------------------------------------------- */
.portada{position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background:var(--negro); color:#fff; overflow:hidden}
.portada-fondo{position:absolute; inset:0; z-index:0}
.portada-fondo img{width:100%; height:100%; object-fit:cover; filter:grayscale(.22) contrast(1.06) brightness(.78)}
.portada-fondo::after{content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(21,23,26,.70) 0%, rgba(21,23,26,.28) 40%, rgba(21,23,26,.95) 100%),
    linear-gradient(90deg, rgba(21,23,26,.88) 0%, rgba(21,23,26,.62) 34%, rgba(21,23,26,.12) 62%, rgba(21,23,26,0) 80%)}
.portada .wrap{position:relative; z-index:2; width:100%; padding-bottom:var(--s8); padding-top:140px}
.portada .d1{max-width:13ch}
.portada .lede{margin-top:var(--s5)}
.portada-pie{display:flex; flex-wrap:wrap; gap:var(--s5) var(--s7); align-items:flex-end;
  margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--hair)}
.portada-acciones{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}

/* --- Cifras en hairline --------------------------------------------------- */
.cifras{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){ .cifras{grid-template-columns:repeat(4,minmax(0,1fr))} }
.cifra{padding:var(--s7) var(--s5) var(--s7) 0; border-top:1px solid var(--hair-oscura)}
.cifra b{display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(2.4rem,5vw,4rem); line-height:.9; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; font-variation-settings:'wdth' 108}
.cifra span{display:block; margin-top:var(--s3); font-size:.8125rem; color:var(--tinta-2); max-width:22ch}
.oscuro .cifra{border-top-color:var(--hair)}
.oscuro .cifra b{color:#fff}
.oscuro .cifra span{color:var(--claro-2)}

/* --- Bloques -------------------------------------------------------------- */
.bloque{padding:var(--s10) 0}
.bloque-corto{padding:var(--s9) 0}
.hueso{background:var(--hueso)}
.oscuro{background:var(--negro); color:#fff}
.oscuro .display{color:#fff}
.oscuro p{color:var(--claro)}

/* Encabezado de bloque asimétrico: la etiqueta a la izquierda, el titular corrido */
.cab{display:grid; gap:var(--s5); grid-template-columns:minmax(0,1fr); margin-bottom:var(--s8)}
@media(min-width:900px){
  .cab{grid-template-columns:200px minmax(0,1fr); gap:var(--s7); align-items:start}
}

/* --- Lista editorial de servicios ---------------------------------------- */
.servicios{border-top:1px solid var(--hair-oscura)}
.serv{
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:var(--s4);
  align-items:baseline; padding:var(--s5) 0; border-bottom:1px solid var(--hair-oscura);
  transition:padding-left var(--t), background var(--t);
}
@media(min-width:820px){
  /* Columnas en fracciones, no en ch: el título a 28px desbordaba su columna
     y se montaba sobre la descripción cuando ocupaba dos líneas. */
  .serv{grid-template-columns:64px minmax(0,1.05fr) minmax(0,1.35fr) 28px;
        gap:var(--s6); align-items:center; padding:var(--s6) 0}
}
.serv:hover{padding-left:var(--s4)}
.serv .idx{font-family:var(--display); font-weight:600; font-size:.75rem; letter-spacing:.1em;
  color:var(--tinta-3); font-variant-numeric:tabular-nums}
.serv h3{overflow-wrap:break-word; font-family:var(--display); font-weight:700; font-size:clamp(1.25rem,2.3vw,1.75rem);
  letter-spacing:-.02em; margin:0; line-height:1.05; font-variation-settings:'wdth' 108;
  transition:color var(--t)}
.serv:hover h3{color:var(--fuego)}
.serv .qué{font-size:.9375rem; color:var(--tinta-2); margin:0; max-width:52ch}
.serv .flecha{color:var(--tinta-3); transition:transform var(--t), color var(--t); justify-self:end}
.serv:hover .flecha{transform:translateX(6px); color:var(--fuego)}

/* --- Banda de imagen a sangre -------------------------------------------- */
.banda{position:relative; min-height:clamp(340px,58vh,620px); display:flex; align-items:flex-end;
  background:var(--negro-2); color:#fff; overflow:hidden}
.banda-fondo{position:absolute; inset:0; z-index:0}
.banda-fondo img{width:100%; height:100%; object-fit:cover; filter:grayscale(.4) brightness(.5)}
.banda-fondo::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(21,23,26,.15),rgba(21,23,26,.9))}
.banda .wrap{position:relative; z-index:2; width:100%; padding-top:var(--s8); padding-bottom:var(--s8)}

/* Marcador de foto: elegante, no un cuadro punteado de wireframe */
.foto-falta{position:relative; background:
  linear-gradient(135deg,var(--negro-3) 0%,var(--negro-2) 60%,#0F1113 100%);
  display:flex; align-items:flex-end; overflow:hidden}
.foto-falta::before{content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg,transparent 0 22px,rgba(228,85,14,.05) 22px 44px)}
.foto-falta .nota{position:relative; z-index:2; padding:var(--s5); max-width:44ch}
.foto-falta .nota b{display:block; font-family:var(--display); font-weight:600; font-size:.625rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fuego); margin-bottom:8px}
.foto-falta .nota span{font-size:.8125rem; color:var(--claro-2); line-height:1.5}
.foto-falta.alto{min-height:clamp(320px,52vh,560px)}
.foto-falta.cuadro{aspect-ratio:4/3}
.foto-falta.retrato{aspect-ratio:3/4}

/* --- Dato pendiente, discreto pero visible ------------------------------- */
.pdte{color:var(--fuego); border-bottom:1px dashed rgba(228,85,14,.55); white-space:nowrap}
.oscuro .pdte,.banda .pdte,.portada .pdte{color:var(--fuego)}

/* --- Tabla mínima --------------------------------------------------------- */
.tabla-min{width:100%; border-collapse:collapse; font-size:.9375rem}
.tabla-min th{font-family:var(--display); font-weight:600; font-size:.625rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tinta-3); text-align:left; padding:0 var(--s5) var(--s3) 0;
  border-bottom:1px solid var(--hair-oscura); white-space:nowrap}
.tabla-min td{padding:var(--s4) var(--s5) var(--s4) 0; border-bottom:1px solid var(--hair-oscura);
  vertical-align:top}
.tabla-min td:first-child{font-family:var(--display); font-weight:700; white-space:nowrap}
.oscuro .tabla-min th{color:var(--claro-2); border-bottom-color:var(--hair)}
.oscuro .tabla-min td{border-bottom-color:var(--hair); color:var(--claro)}
.oscuro .tabla-min td:first-child{color:#fff}
.scroll-x{overflow-x:auto; max-width:100%}

/* --- Casos: antes / después ---------------------------------------------- */
.casos{display:grid; gap:2px; grid-template-columns:minmax(0,1fr); background:var(--hair-oscura)}
@media(min-width:820px){ .casos{grid-template-columns:repeat(3,minmax(0,1fr))} }
.caso{background:var(--blanco); position:relative}
.caso .par{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--hair-oscura)}
.caso .par > *{position:relative}
.marca-ad{position:absolute; top:12px; left:12px; z-index:3; font-family:var(--display);
  font-weight:600; font-size:.5625rem; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; background:rgba(21,23,26,.72); padding:5px 8px}
.caso .pie{padding:var(--s5) var(--s5) var(--s6)}
.caso .pie h3{font-family:var(--display); font-weight:700; font-size:1.0625rem; margin:0 0 6px;
  letter-spacing:-.01em}
.caso .pie p{font-size:.8125rem; color:var(--tinta-2); margin:0}

/* --- Logos de clientes ---------------------------------------------------- */
.clientes{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s7); justify-content:flex-start}
.clientes img{height:26px; width:auto; opacity:.4; filter:grayscale(1) brightness(0) invert(1);
  transition:opacity var(--t)}
.clientes img:hover{opacity:.85}

/* --- Contacto ------------------------------------------------------------- */
.campo{margin-bottom:var(--s5)}
.campo label{display:block; font-family:var(--display); font-weight:600; font-size:.625rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--claro-2); margin-bottom:10px}
.campo input,.campo select,.campo textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--hair);
  color:#fff; font-family:var(--texto); font-size:1rem; padding:10px 0; border-radius:0;
}
.campo textarea{resize:vertical; min-height:70px}
.campo input::placeholder,.campo textarea::placeholder{color:#5A6167}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0; border-bottom-color:var(--fuego)}
.campo select option{background:var(--negro-2); color:#fff}
.dos{display:grid; gap:var(--s5); grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){ .dos{grid-template-columns:repeat(2,minmax(0,1fr))} }
.hp{position:absolute; left:-9999px}

/* --- Pie ------------------------------------------------------------------ */
.pie-sitio{background:var(--negro); color:var(--claro-2); padding:var(--s9) 0 var(--s6); font-size:.875rem}
.pie-sitio a{color:var(--claro); transition:color var(--t)}
.pie-sitio a:hover{color:var(--fuego)}
.pie-cols{display:grid; gap:var(--s7); grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){ .pie-cols{grid-template-columns:1.4fr 1fr 1fr} }
.pie-sitio h4{font-family:var(--display); font-weight:600; font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:#fff; margin:0 0 var(--s4)}
.pie-sitio ul{list-style:none; padding:0; margin:0}
.pie-sitio li{margin-bottom:10px}
.legal{margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--hair);
  display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between; font-size:.75rem}

/* --- WhatsApp ------------------------------------------------------------- */
.wa{position:fixed; right:20px; bottom:20px; z-index:90; width:54px; height:54px;
  background:#1EA855; display:grid; place-items:center; color:#062B14;
  box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform var(--t)}
.wa:hover{transform:translateY(-3px)}
.wa svg{width:26px; height:26px}

/* --- Aparición al hacer scroll. Sobria: opacidad y 14px, una sola vez. ---- */
.rev{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.25,1)}
.rev.visible{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
  .rev{opacity:1!important; transform:none!important}
}

/* ---------------------------------------------------------------------------
   ENCUADRE DE LAS FOTOS A SANGRE
   La portada tiene al operario en el tercio derecho: al recortar en pantallas
   altas hay que anclar hacia ese lado para no perderlo. En móvil se ancla aún
   más a la derecha, porque el recorte vertical es mucho más agresivo.
   ------------------------------------------------------------------------- */
.portada-fondo img{object-position:74% 22%}
@media(max-width:700px){ .portada-fondo img{object-position:80% 20%} }
.banda-fondo img{object-position:center 42%}

/* ---------------------------------------------------------------------------
   BLOQUES CON FOTOGRAFÍA REAL (01-09-2026)
   ------------------------------------------------------------------------- */

/* Par de imágenes: proceso + verificación */
.dupla{display:grid; gap:2px; grid-template-columns:minmax(0,1fr); background:var(--hair)}
@media(min-width:760px){ .dupla{grid-template-columns:repeat(2,minmax(0,1fr))} }
.dupla figure{margin:0; position:relative; background:var(--negro-2)}
.dupla img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.dupla figcaption{position:absolute; left:0; right:0; bottom:0; padding:var(--s5);
  background:linear-gradient(180deg,transparent,rgba(21,23,26,.92));
  font-size:.8125rem; color:var(--claro); line-height:1.45}
.dupla figcaption b{display:block; font-family:var(--display); font-weight:600; font-size:.625rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fuego); margin-bottom:6px}

/* Rejilla de trabajos entregados */
.trabajos{display:grid; gap:2px; grid-template-columns:minmax(0,1fr); background:var(--hair-oscura)}
@media(min-width:700px){ .trabajos{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1040px){ .trabajos{grid-template-columns:repeat(3,minmax(0,1fr))} }
.trabajo{position:relative; background:var(--negro); overflow:hidden; display:block}
.trabajo img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.2,.7,.25,1); filter:brightness(.92)}
.trabajo:hover img{transform:scale(1.03)}
.trabajo .info{position:absolute; inset:auto 0 0 0; padding:var(--s6) var(--s5) var(--s5);
  background:linear-gradient(180deg,transparent,rgba(21,23,26,.9))}
.trabajo h3{font-family:var(--display); font-weight:700; font-size:1.0625rem; color:#fff;
  margin:0 0 4px; letter-spacing:-.01em}
.trabajo p{font-size:.75rem; color:var(--claro-2); margin:0; letter-spacing:.04em;
  text-transform:uppercase; font-family:var(--display); font-weight:500}

/* Banda de planta: encuadre vertical, hay que anclar arriba */
.banda-fondo img.vertical{object-position:center 30%}

/* Siete logos: reducir el hueco entre ellos para que quepan en dos filas */
.clientes{gap:var(--s5) var(--s6)}
@media(min-width:1080px){ .clientes{gap:var(--s5) var(--s7)} }

/* El pie de foto caía sobre zonas claras de la imagen y perdía contraste.
   Se refuerza el degradado para garantizar legibilidad sobre cualquier foto. */
.dupla figcaption{
  background:linear-gradient(180deg,rgba(21,23,26,0) 0%,rgba(21,23,26,.55) 35%,rgba(21,23,26,.95) 100%);
  padding-top:var(--s8);
}
.trabajo .info{
  background:linear-gradient(180deg,rgba(21,23,26,0) 0%,rgba(21,23,26,.6) 40%,rgba(21,23,26,.95) 100%);
}

/* ===========================================================================
   AJUSTES PARA PANTALLAS GRANDES (01-09-2026)

   Tres problemas detectados en un monitor de ~2000 px:

   1. Hueco enorme entre el menú y el titular. La portada anclaba el contenido
      abajo (align-items:flex-end), así que TODO el alto sobrante se acumulaba
      arriba. Ahora el bloque se centra verticalmente y el sobrante se reparte.
   2. Menú diminuto. Estaba fijo en 13 px, que a 2000 px de ancho es ilegible.
      Pasa a escalar con el viewport.
   3. La barra superior iba a sangre completa mientras el contenido se limitaba
      a 1440 px: el logo quedaba muy a la izquierda, desalineado con el titular.
      Ahora comparten el mismo contenedor.
   =========================================================================== */

/* --- 1. Portada: repartir el espacio en vez de acumularlo arriba --------- */
.portada{align-items:center; min-height:min(100svh, 1000px)}
.portada .wrap{padding-top:clamp(120px,13vh,180px); padding-bottom:clamp(40px,6vh,72px)}
.portada-pie{margin-top:clamp(40px,6vh,64px)}

/* --- 2. Barra superior alineada con el contenido ------------------------- */
.top{padding-left:0; padding-right:0; display:block}
.top-in{
  max-width:var(--maxw); margin:0 auto;
  padding:var(--s5) var(--pad);
  display:flex; align-items:center; gap:var(--s5);
  transition:padding var(--t);
}
.top.fija .top-in{padding-top:var(--s4); padding-bottom:var(--s4)}

/* --- 3. Escala de la navegación ----------------------------------------- */
.logo .marca-barra{width:5px; height:clamp(22px,1.7vw,28px)}
.logo b{font-size:clamp(1.0625rem,1.35vw,1.375rem); letter-spacing:.03em}
.top nav{gap:clamp(var(--s5),2.2vw,var(--s7))}
.top nav a{font-size:clamp(.875rem,1.02vw,1.0625rem); letter-spacing:.01em}
.abrir{font-size:.8125rem}
.top .cta-top{padding:15px clamp(22px,1.8vw,30px); font-size:clamp(.8125rem,.95vw,.9375rem)}

/* Etiquetas micro: legibles también en monitores grandes */
.micro{font-size:clamp(.6875rem,.82vw,.8125rem)}
.lede{font-size:clamp(1.0625rem,1.35vw,1.4375rem)}

/* Siete logos a 26 px ocupaban ~950 px y se derramaban sobre la zona iluminada
   de la foto, donde perdían legibilidad. Se reducen y se acotan para que
   quepan en una sola fila dentro de la mitad oscura. */
.portada-pie .clientes{max-width:min(760px, 46vw); gap:clamp(18px,1.9vw,32px)}
.clientes img{height:clamp(18px,1.5vw,24px); opacity:.5}
@media(max-width:900px){ .portada-pie .clientes{max-width:100%} }

/* ===========================================================================
   AJUSTE DE RITMO VERTICAL (01-09-2026)
   Los bloques usaban 128 px fijos arriba y abajo, más 64 de encabezado y 48
   por cifra: en total demasiado aire antes de que empezara el contenido.
   Ahora todo escala con el viewport y se compacta en pantallas normales.
   =========================================================================== */
.bloque{padding:clamp(56px,6.4vw,104px) 0}
.bloque-corto{padding:clamp(44px,5vw,80px) 0}
.cab{margin-bottom:clamp(32px,3.8vw,56px)}
.cab .lede{margin-top:clamp(18px,2.2vw,30px)!important}
.cifra{padding:clamp(26px,2.9vw,40px) var(--s5) clamp(26px,2.9vw,40px) 0}
.cifra span{margin-top:clamp(10px,1.1vw,14px)}

/* Logos más grandes: se acerca la etiqueta a la línea para ganar altura */
.portada-pie .micro{margin-bottom:10px!important}
.portada-pie .clientes{max-width:min(880px,52vw); gap:clamp(16px,1.6vw,26px)}
.clientes img{height:clamp(20px,1.85vw,30px); opacity:.58}
.clientes img:hover{opacity:.95}
@media(max-width:900px){ .portada-pie .clientes{max-width:100%} }

/* --- Preguntas frecuentes, en el lenguaje de hairlines ------------------- */
.faq{border-top:1px solid var(--hair-oscura); max-width:900px}
.oscuro .faq{border-top-color:var(--hair)}
.faq details{border-bottom:1px solid var(--hair-oscura)}
.oscuro .faq details{border-bottom-color:var(--hair)}
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  gap:var(--s5); padding:var(--s5) 0;
  font-family:var(--display); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(1.0625rem,1.6vw,1.375rem); transition:color var(--t);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--fuego)}
.faq summary::after{content:'+'; color:var(--fuego); font-weight:400; font-size:1.5rem; line-height:1}
.faq details[open] summary::after{content:'–'}
.faq .resp{padding:0 0 var(--s5); max-width:64ch; color:var(--tinta-2); font-size:.9375rem}
.oscuro .faq .resp{color:var(--claro)}

/* --- Miga de pan --------------------------------------------------------- */
.miga{font-size:.8125rem; color:var(--claro-2); letter-spacing:.02em}
.miga a{color:var(--claro-2); transition:color var(--t)}
.miga a:hover{color:var(--fuego)}

/* --- Portada de página interior: más baja que la home ------------------- */
.portada.interior{min-height:min(78svh,760px)}
.portada.interior .wrap{padding-top:clamp(120px,15vh,180px)}
.portada.interior .d1{font-size:clamp(2.3rem,6vw,5rem); max-width:16ch}

/* --- Tarjeta de dato sobre fondo hueso ---------------------------------- */
.nota-lateral{border-left:2px solid var(--fuego); padding:var(--s2) 0 var(--s2) var(--s5)}
.nota-lateral p:last-child{margin-bottom:0}

/* Las etapas del proceso no son enlaces: no deben mostrar cursor de mano
   ni desplazarse al pasar el ratón. */
div.serv{cursor:default}
div.serv:hover{padding-left:0}
div.serv:hover h3{color:inherit}

/* Las cifras admiten palabras, no solo números ("Intemperie", "Sin límite").
   A 390 px una palabra larga a 38 px desbordaba media columna. */
.cifra b{font-size:clamp(1.75rem,4.8vw,4rem); overflow-wrap:break-word; hyphens:auto}


/* ---- Navegación interna de la previsualización ---- */
.ruta[hidden]{display:none}
#nohay{background:var(--negro); color:#fff; min-height:100svh; display:grid; place-items:center}
#nohay .caja{max-width:52rem; padding:var(--s7) var(--pad)}
#nohay .lista-p a{display:block; padding:var(--s3) 0; border-bottom:1px solid var(--hair);
  font-family:var(--display); font-weight:700; font-size:clamp(1rem,2.4vw,1.25rem); color:#fff}
#nohay .lista-p a:hover{color:var(--fuego)}

/* ===========================================================================
   MAQUINARIA (01-09-2026)
   Patrones nuevos, mismo lenguaje: filetes, nada de tarjetas con sombra.
   Se añaden sobre el sistema v3 aprobado; no se modifica ninguna regla previa.
   =========================================================================== */

/* --- Portada sin fotografía todavía --------------------------------------
   No hay foto de maquinaria. En vez de rellenar con stock, la portada usa la
   textura de "foto pendiente" del sistema y muestra el brief de la toma. */
.portada.sin-foto .portada-fondo{
  background:linear-gradient(135deg,var(--negro-3) 0%,var(--negro-2) 58%,#0F1113 100%);
}
.portada.sin-foto .portada-fondo::before{
  content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg,transparent 0 26px,rgba(228,85,14,.055) 26px 52px);
}
.portada.sin-foto .portada-fondo::after{
  background:linear-gradient(180deg,rgba(21,23,26,.55) 0%,rgba(21,23,26,.2) 45%,rgba(21,23,26,.9) 100%);
}
.brief-foto{
  position:relative; z-index:2; margin-top:var(--s7);
  border-left:2px solid var(--fuego); padding:var(--s2) 0 var(--s2) var(--s5); max-width:56ch;
}
.brief-foto b{display:block; font-family:var(--display); font-weight:600; font-size:.625rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fuego); margin-bottom:6px}
.brief-foto span{font-size:.8125rem; color:var(--claro-2); line-height:1.5}

/* --- Corrección heredada -------------------------------------------------
   `.cifra span` alcanzaba también al <span class="pdte"> que va DENTRO del
   número: un dato pendiente en una cifra salía a 13 px y en bloque aparte.
   Se acota para que el XXXX se lea a la escala de la cifra. */
.cifra b .pdte{display:inline; font-size:inherit; margin:0; max-width:none; color:var(--fuego)}

/* --- Estado de disponibilidad --------------------------------------------
   En una flota de pocos equipos, la disponibilidad es la primera pregunta.
   Se muestra como dato consultable, nunca como promesa que no controlamos. */
.estado{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:600; font-size:.6875rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:9px 15px; border:1px solid var(--hair); color:#fff;
}
.estado .punto{width:7px; height:7px; border-radius:50%; background:var(--fuego); flex:0 0 auto}
.estado.claro{border-color:var(--hair-oscura); color:var(--tinta)}

/* --- Ficha técnica: dos columnas de filetes ------------------------------ */
.ficha{margin:0; display:grid; grid-template-columns:minmax(0,1fr); column-gap:var(--s8);
  border-top:1px solid var(--hair-oscura)}
@media(min-width:860px){ .ficha{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ficha > div{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:var(--s3) var(--s5); padding:var(--s4) 0; border-bottom:1px solid var(--hair-oscura)}
.ficha dt{font-size:.875rem; color:var(--tinta-2); margin:0; flex:1 1 14ch; min-width:0}
.ficha dd{margin:0; font-family:var(--display); font-weight:700; font-size:.9375rem;
  letter-spacing:-.005em; text-align:right; flex:0 1 auto; overflow-wrap:break-word; min-width:0}
.oscuro .ficha{border-top-color:var(--hair)}
.oscuro .ficha > div{border-bottom-color:var(--hair)}
.oscuro .ficha dt{color:var(--claro-2)}
.oscuro .ficha dd{color:#fff}

/* --- Qué incluye y qué no ------------------------------------------------
   La transparencia sobre lo NO incluido evita la discusión en la entrega. */
.incluye{display:grid; gap:var(--s7); grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){ .incluye{grid-template-columns:repeat(2,minmax(0,1fr))} }
.incluye h3{font-family:var(--display); font-weight:600; font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; margin:0 0 var(--s4); color:var(--tinta-3)}
.oscuro .incluye h3{color:var(--claro-2)}
.incluye ul{list-style:none; margin:0; padding:0}
.incluye li{position:relative; padding:var(--s3) 0 var(--s3) var(--s5);
  border-bottom:1px solid var(--hair-oscura); font-size:.9375rem}
.oscuro .incluye li{border-bottom-color:var(--hair); color:var(--claro)}
.incluye li::before{content:'+'; position:absolute; left:0; top:var(--s3);
  font-family:var(--display); font-weight:700; color:var(--fuego)}
.incluye .fuera li::before{content:'–'; color:var(--tinta-3)}
.oscuro .incluye .fuera li::before{color:var(--claro-2)}

/* --- Rejilla de equipos del hub ------------------------------------------
   Mismo patrón que .trabajos: bloques a hueso separados por filete de 2 px. */
.equipos{display:grid; gap:2px; grid-template-columns:minmax(0,1fr); background:var(--hair-oscura)}
@media(min-width:860px){ .equipos{grid-template-columns:repeat(3,minmax(0,1fr))} }
.equipo{background:var(--blanco); display:flex; flex-direction:column;
  transition:background var(--t)}
.equipo:hover{background:var(--hueso)}
.equipo .lamina{position:relative; aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--negro-3) 0%,var(--negro-2) 60%,#0F1113 100%);
  display:flex; align-items:flex-end; overflow:hidden}
.equipo .lamina::before{content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg,transparent 0 22px,rgba(228,85,14,.05) 22px 44px)}
.equipo .lamina .nota{position:relative; z-index:2; padding:var(--s5)}
.equipo .lamina .nota b{display:block; font-family:var(--display); font-weight:600; font-size:.5625rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fuego); margin-bottom:6px}
.equipo .lamina .nota span{font-size:.75rem; color:var(--claro-2); line-height:1.45}
.equipo .cuerpo{padding:var(--s5) var(--s5) var(--s6); display:flex; flex-direction:column; flex:1}
.equipo h3{font-family:var(--display); font-weight:700; font-size:1.25rem; letter-spacing:-.015em;
  margin:0 0 var(--s3); line-height:1.1; transition:color var(--t)}
.equipo:hover h3{color:var(--fuego)}
.equipo p{font-size:.875rem; color:var(--tinta-2); margin:0 0 var(--s4); max-width:38ch}
.equipo .dato{font-family:var(--display); font-weight:600; font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinta-3); margin-top:auto; padding-top:var(--s4);
  border-top:1px solid var(--hair-oscura); display:flex; justify-content:space-between; gap:var(--s4)}
.equipo .dato .ir{color:var(--fuego)}


/* ===========================================================================
   BARRA v4 Y PORTADA DIRECCIÓN B (01-09-2026)
   El logotipo pasa a ser el lockup aprobado. La barra gana el desplegable de
   servicios, el teléfono visible y WhatsApp como acción primaria.
   =========================================================================== */

/* --- Desplegable de servicios -------------------------------------------
   Funciona sin JS: se abre con :hover y con :focus-within, así que también
   responde al tabulador. El JS sólo añade el cierre con Escape. */
.menu-serv{position:relative; display:inline-flex}
.menu-serv > a .flecha-menu{font-size:.68em; margin-left:7px; opacity:.7}
/* El panel arrancaba 18 px más abajo que el enlace: ese hueco transparente no
   recibía el ratón y el menú se cerraba al bajar hacia él. Ahora el contenedor
   empieza pegado al enlace y el aire son sus propios padding, así que el
   recorrido del ratón nunca sale de la zona sensible. */
.mega{
  position:absolute; left:-28px; top:100%; z-index:30;
  padding-top:20px; display:none;
}
.menu-serv:hover .mega,.menu-serv:focus-within .mega{display:block}
.mega .caja{
  background:rgba(21,23,26,.98); backdrop-filter:blur(10px);
  border:1px solid var(--hair); padding:var(--s7);
  display:grid; grid-template-columns:repeat(3,minmax(170px,1fr)); gap:var(--s6) var(--s8);
}
/* Un rótulo ocupa dos renglones y los otros uno; se iguala la altura para que
   los tres primeros enlaces arranquen en la misma línea. */
.mega h4{font-family:var(--display); font-weight:600; font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fuego); margin:0 0 var(--s4); line-height:1.35;
  min-height:2.7em; display:flex; align-items:flex-start}
.mega ul{list-style:none; margin:0; padding:0}
.mega li{margin-bottom:6px}
.mega li:last-child{margin-bottom:0}
/* El paso del ratón se notaba apenas (gris claro a blanco). Ahora suma tres
   señales a la vez: filete naranja a la izquierda, desplazamiento y fondo tenue.
   Es el mismo gesto que ya usa la lista de servicios del cuerpo de las páginas. */
.mega a{
  display:block; position:relative; font-size:.9375rem; color:var(--claro);
  white-space:nowrap; padding:8px 10px 8px 14px;
  transition:color .18s ease, background .18s ease, padding-left .18s ease;
}
.mega a::before{
  content:''; position:absolute; left:0; top:6px; bottom:6px; width:2px;
  background:var(--fuego); transform:scaleY(0); transform-origin:center;
  transition:transform .18s ease;
}
.mega a:hover,.mega a:focus-visible{color:#fff; background:rgba(255,255,255,.06); padding-left:20px}
.mega a:hover::before,.mega a:focus-visible::before{transform:scaleY(1)}
/* La página en la que estás ya lleva el filete puesto. */
.mega a[style*="#fff"]::before{transform:scaleY(1)}

/* Los enlaces de primer nivel también acusan el paso del ratón. */
.top nav > a,.menu-serv > a{position:relative; padding-bottom:4px}
.top nav > a::after,.menu-serv > a::after{content:''; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--fuego); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease}
.top nav > a:hover::after,.menu-serv:hover > a::after,.menu-serv:focus-within > a::after{transform:scaleX(1)}

/* --- Teléfono y WhatsApp en la barra ------------------------------------- */
.top .tel{display:none; font-family:var(--display); font-weight:600;
  font-size:clamp(.8125rem,.95vw,.9375rem); letter-spacing:.02em; color:#fff; white-space:nowrap}
.top .tel:hover{color:var(--fuego)}
.cta-top{gap:10px}
/* Cualquier acción con glifo: el SVG hereda el tamaño del texto, no el del bloque. */
.accion svg{width:18px; height:18px; flex:0 0 auto}
.cta-top svg{width:17px; height:17px}
@media(min-width:1180px){ .top .tel{display:inline-flex} }

/* --- Portada B: pantalla partida ----------------------------------------- */
.portada.partida{
  display:grid; grid-template-columns:minmax(0,1fr);
  min-height:100svh; background:var(--negro); color:#fff; align-items:stretch;
}
@media(min-width:980px){
  .portada.partida{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); min-height:min(100svh,1000px)}
}
.lado-texto{
  display:flex; align-items:center; background:var(--negro);
  padding:clamp(104px,13vh,152px) var(--pad) clamp(36px,5vh,60px);
}
.lado-texto .interior{width:100%; max-width:760px; margin-left:auto}
/* lual.css limita el titular de portada a 13ch; en la pantalla partida el ancho
   lo manda la columna, no un recuento de caracteres. */
.portada.partida .d1{max-width:none}
/* La entradilla se veía desordenada: renglones muy desiguales y un último
   renglón corto. Se acorta la medida, se sube el cuerpo y se deja que el
   navegador reparta el rag (text-wrap:pretty evita huérfanas). */
.portada.partida .lede{
  max-width:44ch; font-size:clamp(1.0625rem,1.22vw,1.1875rem);
  line-height:1.62; color:var(--claro); text-wrap:pretty;
}
.lado-foto{position:relative; overflow:hidden; background:var(--negro-2); min-height:62vw}
@media(min-width:980px){ .lado-foto{min-height:0} }
.lado-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 45%; filter:grayscale(.12) contrast(1.03) brightness(.84)}
.lado-foto::after{content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg,rgba(21,23,26,.92) 0%,rgba(21,23,26,.5) 40%,rgba(21,23,26,0) 82%)}
@media(max-width:979px){
  .lado-foto::after{background:linear-gradient(180deg,rgba(21,23,26,.9) 0%,rgba(21,23,26,.15) 45%,rgba(21,23,26,.55) 100%)}
}

/* Anotación técnica: el recurso de marca que se repite sobre las fotos */
.anota{position:absolute; z-index:4; left:8%; top:54%; width:64%; max-width:460px}
.anota .linea{display:block; height:1px; background:var(--fuego); position:relative}
.anota .linea::before{content:''; position:absolute; left:0; top:-3px; width:7px; height:7px;
  background:var(--fuego); border-radius:50%}
.anota b{display:block; margin-top:14px; font-family:var(--display); font-weight:600;
  font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:#fff}
.anota span{display:block; margin-top:8px; font-size:.9375rem; line-height:1.55; color:var(--claro)}
@media(max-width:979px){ .anota{left:var(--pad); width:auto; right:var(--pad); top:auto; bottom:var(--s6)} }

/* --- Cinta de datos de la portada ----------------------------------------
   Tres datos, no cuatro. Las cifras van todas en la fila 1 de la rejilla y las
   etiquetas todas en la fila 2, así comparten línea base aunque una cifra sea
   más larga que otra: es lo que hacía que se vieran pegadas y desalineadas. */
.tira{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--s6); border-top:1px solid var(--hair);
  margin-top:clamp(26px,3.4vh,40px)}
.tira > div{display:contents}
.tira b{grid-row:1; align-self:end; padding-top:clamp(18px,2.2vh,26px);
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.0625rem,1.42vw,1.375rem); letter-spacing:-.02em; line-height:1.1;
  font-variant-numeric:tabular-nums; overflow-wrap:break-word}
.tira span{grid-row:2; padding:10px 0 clamp(18px,2.2vh,26px);
  font-size:.9375rem; line-height:1.5; color:var(--claro); max-width:30ch}
@media(max-width:600px){
  .tira{grid-template-columns:minmax(0,1fr); column-gap:0}
  .tira > div{display:block; padding:var(--s4) 0; border-bottom:1px solid var(--hair)}
  .tira > div:last-child{border-bottom:0}
  .tira b,.tira span{grid-row:auto; padding:0; display:block}
  .tira span{margin-top:5px; max-width:36ch}
}

/* Los siete logos de cliente. Todos llegan a 60 px de alto en el archivo, pero
   la masa de tinta y el cuerpo del texto dentro de cada uno son muy distintos:
   a la misma altura, unos se ven el doble que otros. Se compensa uno a uno para
   que pesen parecido a la vista, y aun así caben en una sola fila. */
.lado-texto .clientes{max-width:100%; gap:14px 16px; align-items:center}
.lado-texto .clientes img{height:clamp(17px,1.8vw,27px); opacity:.72;
  transition:opacity var(--t)}
.lado-texto .clientes img:hover{opacity:1}
.lado-texto .clientes img[alt="PETROPERÚ"]        {height:clamp(16px,1.66vw,24.8px)}
.lado-texto .clientes img[alt="COSAPI"]           {height:clamp(17px,1.80vw,27px)}
.lado-texto .clientes img[alt="Neptunia"]         {height:clamp(20px,2.12vw,31.9px)}
.lado-texto .clientes img[alt="TASA"]             {height:clamp(19px,1.98vw,29.7px)}
.lado-texto .clientes img[alt="Pesquera Capricornio"]{height:clamp(19px,2.02vw,30.2px)}
.lado-texto .clientes img[alt="Molino El Triunfo"]{height:clamp(22px,2.30vw,34.6px)}
.lado-texto .clientes img[alt="Pay Pay"]          {height:clamp(18px,1.91vw,28.6px)}

.promesa{margin-top:var(--s5); font-size:.9375rem; color:var(--claro-2)}

/* --- Escala de los titulares de sección -----------------------------------
   `.d2` estaba en 84 px a 1440: el titular ocupaba media pantalla y dejaba un
   hueco muerto a la derecha, con 390 px de aire antes del primer contenido.
   A 60 px conserva la presencia y el contenido sube unos 100 px.
   El titular de portada (.d1) no se toca. */
.d2{font-size:clamp(2rem,4.2vw,3.75rem)}

/* --- Ritmo vertical entre secciones ---------------------------------------
   `.bloque` tenía 92 px arriba y abajo: cuando dos secciones se tocan, el
   hueco sumaba 184 px, casi un quinto de pantalla en blanco. El encargo pide
   densidad de información, no aire. A 64 px el hueco baja a 128 px y las
   secciones siguen respirando. */
.bloque{padding:clamp(40px,4.4vw,64px) 0}

/* La página de «esto no existe» declara display:grid, que gana al atributo
   hidden del navegador y la dejaba visible al final del documento. */
#nohay[hidden]{display:none}

/* Los logos de cliente cierran la portada con el mismo filete que abre la cinta
   de datos: dos reglas horizontales que enmarcan el bloque de pruebas. */
.clientes-bloque{border-top:1px solid var(--hair); padding-top:clamp(16px,2vh,24px)}
.promesa b{color:#fff; font-weight:600}


/* ===========================================================================
   TRABAJOS ENTREGADOS — Dirección C (02-09-2026)
   Un caso contado en profundidad y el resto en una tira de miniaturas.
   Las miniaturas son etiquetas de un grupo de radios: el intercambio de ficha
   lo hace el CSS, así que funciona sin JavaScript y responde al teclado.
   =========================================================================== */
.trabajos-c{position:relative}
.trabajos-c .sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Escenario: la ficha del trabajo activo */
.escenario > .caso-c{display:none}
.caso-c{grid-template-columns:minmax(0,1fr); gap:2px; align-items:stretch}
@media(min-width:900px){ .caso-c{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} }
.caso-c .foto{position:relative; background:var(--negro-2); overflow:hidden; min-height:clamp(240px,42vw,460px)}
.caso-c .foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.caso-c .marca{position:absolute; top:0; left:0; z-index:2; font-family:var(--display);
  font-weight:600; font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; background:var(--fuego); padding:7px 12px}
.caso-c .datos{background:var(--negro); color:#fff; padding:clamp(28px,3.4vw,48px)}
.caso-c .datos .sector{font-family:var(--display); font-weight:600; font-size:.625rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fuego); margin:0 0 var(--s4)}
.caso-c .datos h3{font-family:var(--display); font-weight:800;
  font-size:clamp(1.375rem,2.2vw,2rem); letter-spacing:-.03em; line-height:1.04;
  margin:0 0 var(--s5); color:#fff}
.caso-c .datos p{color:var(--claro); font-size:.9375rem; max-width:46ch; margin:0}
.ficha-c{margin:var(--s5) 0 0; border-top:1px solid var(--hair)}
.ficha-c > div{display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s4); padding:12px 0; border-bottom:1px solid var(--hair)}
.ficha-c dt{margin:0; font-size:.875rem; color:var(--claro-2)}
.ficha-c dd{margin:0; font-family:var(--display); font-weight:700; font-size:.9375rem;
  color:#fff; text-align:right}

/* Tira de miniaturas */
.tira-c{display:grid; gap:2px; grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--hair-oscura); margin-top:2px}
@media(min-width:760px){ .tira-c{grid-template-columns:repeat(7,minmax(0,1fr))} }
.tira-c label{position:relative; display:block; background:var(--negro); overflow:hidden;
  cursor:pointer}
.tira-c img{width:100%; aspect-ratio:1/1; object-fit:cover; filter:brightness(.62);
  transition:filter .35s ease, transform .6s cubic-bezier(.2,.7,.25,1)}
.tira-c label:hover img{filter:brightness(.85); transform:scale(1.04)}
.tira-c .info{position:absolute; inset:auto 0 0 0; padding:var(--s7) var(--s3) var(--s3);
  background:linear-gradient(180deg,rgba(21,23,26,0) 0%,rgba(21,23,26,.6) 42%,rgba(21,23,26,.95) 100%)}
.tira-c .info b{display:block; font-family:var(--display); font-weight:700; font-size:.8125rem;
  color:#fff; line-height:1.15}
/* Barra naranja arriba: marca cuál es el trabajo que se está viendo */
.tira-c label::before{content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--fuego); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease; z-index:3}

/* Barra de sección: la etiqueta a la izquierda y las cifras a la derecha,
   compartiendo un filete. Recupera el ancho que ocupaba la columna de 200 px. */
.barra-sec{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:var(--s4) var(--s6); padding-bottom:14px; border-bottom:1px solid var(--hair-oscura);
  margin-bottom:var(--s6)}
.cifras-sec{display:flex; flex-wrap:wrap; gap:var(--s4) var(--s7); font-family:var(--display);
  font-weight:600; font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-3)}
.cifras-sec b{color:var(--tinta); font-weight:800; letter-spacing:-.01em; font-size:.9375rem;
  margin-right:6px}
/* El titular va en una sola línea y ocupa el ancho: era el hueco a la derecha,
   no el cuerpo de la letra, lo que hacía que la sección se viera vacía.
   Por debajo de 1100 px se parte solo en dos, que es lo correcto. */
.fila-sec .d2{max-width:none}
.fila-sec .lede{margin:var(--s4) 0 0; max-width:58ch}
.pista{margin:var(--s6) 0 var(--s4); font-size:.875rem; color:var(--tinta-3)}

/* La llamada es la última casilla de la tira: aparece justo donde el ojo
   termina de reconocer su pieza, sin tener que bajar a buscarla. */
.tira-c .cta{background:var(--fuego); color:#fff; display:flex; flex-direction:column;
  justify-content:space-between; gap:var(--s5); padding:var(--s4);
  grid-column:span 3; min-height:150px; transition:background var(--t)}
@media(min-width:760px){ .tira-c .cta{grid-column:auto; aspect-ratio:1/1; min-height:0} }
.tira-c .cta:hover{background:var(--fuego-tinta)}
.tira-c .cta b{font-family:var(--display); font-weight:800; font-size:.9375rem; line-height:1.15;
  letter-spacing:-.01em}
.tira-c .cta .pie{display:flex; align-items:center; gap:9px; font-family:var(--display);
  font-weight:600; font-size:.625rem; letter-spacing:.14em; text-transform:uppercase}
.tira-c .cta svg{width:16px; height:16px; flex:0 0 auto}
.cierre-c{display:flex; justify-content:flex-end; margin-top:var(--s5)}

/* Qué ficha se ve y qué miniatura queda marcada */
#t1:checked ~ .wrap .escenario > .caso-c:nth-of-type(1){display:grid}
#t1:checked ~ .wrap .tira-c label:nth-of-type(1)::before{transform:scaleX(1)}
#t1:checked ~ .wrap .tira-c label:nth-of-type(1) img{filter:brightness(.95)}
#t1:focus-visible ~ .wrap .tira-c label:nth-of-type(1){outline:2px solid var(--fuego); outline-offset:-2px}
#t2:checked ~ .wrap .escenario > .caso-c:nth-of-type(2){display:grid}
#t2:checked ~ .wrap .tira-c label:nth-of-type(2)::before{transform:scaleX(1)}
#t2:checked ~ .wrap .tira-c label:nth-of-type(2) img{filter:brightness(.95)}
#t2:focus-visible ~ .wrap .tira-c label:nth-of-type(2){outline:2px solid var(--fuego); outline-offset:-2px}
#t3:checked ~ .wrap .escenario > .caso-c:nth-of-type(3){display:grid}
#t3:checked ~ .wrap .tira-c label:nth-of-type(3)::before{transform:scaleX(1)}
#t3:checked ~ .wrap .tira-c label:nth-of-type(3) img{filter:brightness(.95)}
#t3:focus-visible ~ .wrap .tira-c label:nth-of-type(3){outline:2px solid var(--fuego); outline-offset:-2px}
#t4:checked ~ .wrap .escenario > .caso-c:nth-of-type(4){display:grid}
#t4:checked ~ .wrap .tira-c label:nth-of-type(4)::before{transform:scaleX(1)}
#t4:checked ~ .wrap .tira-c label:nth-of-type(4) img{filter:brightness(.95)}
#t4:focus-visible ~ .wrap .tira-c label:nth-of-type(4){outline:2px solid var(--fuego); outline-offset:-2px}
#t5:checked ~ .wrap .escenario > .caso-c:nth-of-type(5){display:grid}
#t5:checked ~ .wrap .tira-c label:nth-of-type(5)::before{transform:scaleX(1)}
#t5:checked ~ .wrap .tira-c label:nth-of-type(5) img{filter:brightness(.95)}
#t5:focus-visible ~ .wrap .tira-c label:nth-of-type(5){outline:2px solid var(--fuego); outline-offset:-2px}
#t6:checked ~ .wrap .escenario > .caso-c:nth-of-type(6){display:grid}
#t6:checked ~ .wrap .tira-c label:nth-of-type(6)::before{transform:scaleX(1)}
#t6:checked ~ .wrap .tira-c label:nth-of-type(6) img{filter:brightness(.95)}
#t6:focus-visible ~ .wrap .tira-c label:nth-of-type(6){outline:2px solid var(--fuego); outline-offset:-2px}

/* ===========================================================================
   PARA QUIÉN + SERVICIOS (02-09-2026)
   Dos secciones, no una. Las puertas van apaisadas y los servicios cuadrados:
   la proporción distinta es lo que impide que se lean como lo mismo repetido.
   El título va siempre abajo a la izquierda, nunca centrado: sobre una foto de
   obra el centro es justo donde está el objeto y es donde peor se lee.
   =========================================================================== */

/* --- Tres puertas, apaisadas --------------------------------------------- */
.puertas{display:grid; gap:2px; grid-template-columns:minmax(0,1fr);
  background:var(--hair-oscura); margin-top:var(--s6)}
@media(min-width:820px){ .puertas{grid-template-columns:repeat(3,minmax(0,1fr))} }
.puerta{position:relative; display:block; background:var(--negro); overflow:hidden;
  aspect-ratio:16/10; min-width:0}
.puerta .img{position:absolute; inset:0; display:block; overflow:hidden}
.puerta .img img{width:100%; height:100%; object-fit:cover; filter:brightness(.58);
  transition:transform .7s cubic-bezier(.2,.7,.25,1)}
.puerta:hover .img img{transform:scale(1.05)}
.puerta .img.falta{background:linear-gradient(135deg,var(--negro-3),var(--negro-2) 60%,#0F1113)}
.puerta .img.falta::before{content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg,transparent 0 22px,rgba(228,85,14,.055) 22px 44px)}
.puerta::after{content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(21,23,26,.1) 24%,rgba(21,23,26,.62) 58%,rgba(21,23,26,.95) 100%)}
.puerta .texto{position:absolute; z-index:3; left:0; right:0; bottom:0;
  padding:var(--s6) var(--s5) var(--s5)}
.puerta .texto b{display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.0625rem,1.45vw,1.3125rem); letter-spacing:-.02em; line-height:1.12; color:#fff}
.puerta .sub{display:block; margin-top:8px; font-size:.8125rem; line-height:1.5;
  color:var(--claro); max-width:32ch}
.puerta .ir{display:inline-block; margin-top:var(--s4); font-family:var(--display); font-weight:600;
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fuego)}
.puerta::before{content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--fuego); z-index:4; transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease}
.puerta:hover::before{transform:scaleX(1)}

/* --- Los diez servicios, en tejas cuadradas ------------------------------ */
.tejas{display:grid; gap:2px; grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--hair); margin-top:var(--s6)}
@media(min-width:760px){ .tejas{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(min-width:1080px){ .tejas{grid-template-columns:repeat(4,minmax(0,1fr))} }
.teja{position:relative; display:block; background:var(--negro); overflow:hidden;
  min-width:0; aspect-ratio:4/3}
@media(min-width:1080px){ .teja{aspect-ratio:1/1} .teja.doble{grid-column:span 2; aspect-ratio:2/1} }
.teja .img{position:absolute; inset:0; display:block; overflow:hidden}
.teja .img img{width:100%; height:100%; object-fit:cover; filter:brightness(.6) grayscale(.1);
  transition:transform .7s cubic-bezier(.2,.7,.25,1), filter .4s ease}
.teja:hover .img img{transform:scale(1.05); filter:brightness(.75) grayscale(0)}
.teja .img.falta{background:linear-gradient(135deg,var(--negro-3),var(--negro-2) 60%,#0F1113)}
.teja .img.falta::before{content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg,transparent 0 22px,rgba(228,85,14,.055) 22px 44px)}
.teja::after{content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(21,23,26,0) 38%,rgba(21,23,26,.55) 68%,rgba(21,23,26,.94) 100%)}
.rotulo-teja{position:absolute; z-index:3; left:0; right:0; bottom:0; padding:var(--s5);
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4)}
.rotulo-teja b{font-family:var(--display); font-weight:800;
  font-size:clamp(.9375rem,1.3vw,1.1875rem); letter-spacing:-.015em; line-height:1.1; color:#fff}
.teja.doble .rotulo-teja b{font-size:clamp(1.25rem,2vw,1.75rem)}
.rotulo-teja .flecha{color:var(--fuego); opacity:0; transform:translateX(-6px);
  transition:opacity .3s ease, transform .3s ease; font-size:1.125rem; line-height:1}
.teja:hover .rotulo-teja .flecha{opacity:1; transform:none}
.teja::before{content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--fuego); z-index:4; transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease}
.teja:hover::before{transform:scaleX(1)}

/* La casilla 11 aprovecha el hueco que dejan diez servicios en cuatro columnas
   y recoge al que llegó al final sin decidirse. */
.teja.llamada{background:var(--fuego); color:#fff; display:flex; flex-direction:column;
  justify-content:space-between; padding:var(--s5); transition:background var(--t)}
.teja.llamada:hover{background:var(--fuego-tinta)}
.teja.llamada::after,.teja.llamada::before{display:none}
.teja.llamada b{font-family:var(--display); font-weight:800; font-size:1.0625rem;
  line-height:1.15; letter-spacing:-.015em; max-width:16ch}
.teja.llamada .ir{font-family:var(--display); font-weight:600; font-size:.625rem;
  letter-spacing:.14em; text-transform:uppercase}

/* Brief de la foto que falta, encima de la teja */
.aviso-foto{position:absolute; z-index:3; top:var(--s4); left:var(--s4); right:var(--s4);
  font-family:var(--texto); font-size:.6875rem; line-height:1.4; color:var(--claro-2);
  border-left:2px solid var(--fuego); padding-left:10px}

/* La barra de sección estaba resuelta para fondo claro; sobre negro hay que
   invertir los grises o desaparece. */
.oscuro .barra-sec{border-bottom-color:var(--hair)}
.oscuro .micro-tenue{color:var(--claro-2)}
.oscuro .cifras-sec{color:var(--claro-2)}
.oscuro .cifras-sec b{color:#fff}
.oscuro .fila-sec .lede{color:var(--claro)}



/* ===========================================================================
   PALETA SEGURIDAD — luz, movimiento y franja de clientes   (02-09-2026)
   Grafito neutro + amarillo de señalización. El amarillo manda solo: acento,
   botón y poco más. Sobre superficie clara nunca va el amarillo puro, va
   --fuego-oscuro, que sí cumple contraste.
   =========================================================================== */

/* --- El amarillo no lleva texto blanco encima --------------------------- */
.accion-relleno{background:linear-gradient(180deg,var(--btn-a),var(--btn-b));
  color:var(--sobre-fuego); position:relative; overflow:hidden; isolation:isolate}
.accion-relleno:hover{background:linear-gradient(180deg,var(--btn-b),var(--btn-b));
  color:var(--sobre-fuego)}
/* Brillo que cruza el botón al pasar el cursor */
.accion-relleno::after{content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg,transparent 26%,rgba(255,255,255,.45) 48%,transparent 72%);
  transform:translateX(-130%); transition:transform .8s cubic-bezier(.2,.7,.25,1)}
.accion-relleno:hover::after{transform:translateX(130%)}
.tira-c .cta{background:var(--fuego); color:var(--sobre-fuego)}
.tira-c .cta:hover{background:var(--fuego-tinta); color:var(--sobre-fuego)}
.caso-c .foto .marca{color:var(--sobre-fuego); background:var(--fuego)}

/* --- Sobre superficie clara, el amarillo baja a su versión oscura ------- */
.pdte,.cifra b .pdte{color:var(--fuego-oscuro); border-bottom-color:rgba(127,98,0,.55)}
.oscuro .pdte,.banda .pdte,.portada .pdte,.caso-c .pdte,
.pie-sitio .pdte,.oscuro .cifra b .pdte{color:var(--fuego); border-bottom-color:rgba(242,194,48,.5)}
.accion-fuego{color:var(--fuego-oscuro)}
.oscuro .accion-fuego,.banda .accion-fuego,.portada .accion-fuego{color:var(--fuego)}
.accion:hover{color:var(--fuego-oscuro)}
.oscuro .accion:hover,.banda .accion:hover,.portada .accion:hover,
.tira-c .cta:hover{color:var(--fuego)}
.tira-c .cta:hover{color:var(--sobre-fuego)}
.serv:hover h3,.serv:hover .flecha,.faq summary:hover,.faq summary::after,
.miga a:hover,.equipo:hover h3,.equipo .dato .ir,#nohay .lista-p a:hover{
  color:var(--fuego-oscuro)}
.oscuro .serv:hover h3,.oscuro .serv:hover .flecha,.oscuro .faq summary:hover,
.oscuro .faq summary::after,.oscuro .equipo:hover h3,.oscuro .equipo .dato .ir{
  color:var(--fuego)}
/* .micro-fuego vive siempre sobre superficie oscura: se queda en amarillo puro */

/* Texto secundario que había quedado en tinta sobre fondo oscuro (2.59) */
.oscuro .serv .qué{color:var(--claro)}
.oscuro .serv .flecha{color:var(--claro-2)}

/* La teja de llamada es amarilla: su texto va en grafito, no en blanco */
.teja.llamada,.teja.llamada b,.teja.llamada .ir{color:var(--sobre-fuego)}

/* --- Luz: el fondo deja de ser un vacío --------------------------------- */
.lado-texto{
  background:
    radial-gradient(115% 85% at 6% 0%, rgba(var(--luz-rgb),var(--luz-a)), transparent 58%),
    radial-gradient(78% 66% at 104% 104%, rgba(var(--luz2-rgb),var(--luz2-a)), transparent 62%),
    var(--negro);
}
.portada.interior .portada-fondo::after{
  background:
    radial-gradient(90% 70% at 8% 6%, rgba(var(--luz-rgb),.10), transparent 55%),
    linear-gradient(180deg,rgba(21,23,26,.82) 0%,rgba(21,23,26,.45) 45%,rgba(21,23,26,.95) 100%);
}
/* El acento del titular, en degradado */
.portada .d1 span,.d1 .acento{
  background:linear-gradient(96deg, var(--fuego) 6%, var(--fuego-2) 94%);
  -webkit-background-clip:text; background-clip:text; color:transparent!important;
}
::selection{background:var(--fuego); color:var(--sobre-fuego)}

/* --- La cinta de datos se subraya al pasar el cursor -------------------- */
.tira b{background-image:linear-gradient(90deg,var(--fuego),var(--fuego-2));
  background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .5s cubic-bezier(.2,.7,.25,1); padding-bottom:4px}
.tira:hover b{background-size:100% 2px}

/* --- Tarjetas clicables: el borde se enciende y la pieza se levanta ----- */
.teja,.puerta,.equipo,.tira-c label{transition:transform .35s cubic-bezier(.2,.7,.25,1),
  box-shadow .35s ease, border-color .35s ease}
.teja:hover,.puerta:hover,.equipo:hover{transform:translateY(-3px)}
.equipo:hover{border-color:rgba(242,194,48,.5)}

/* ═══════════════ Franja de clientes · latón con brillo ═══════════════════ */
.franja-clientes{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px clamp(24px,3vw,48px); padding:15px clamp(20px,4vw,40px); overflow:hidden;
  background:linear-gradient(118deg,#F2C230 0%,#C08E06 52%,#E3B429 100%);
}
.franja-clientes::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.42) 50%,transparent 66%);
  transform:translateX(-120%); animation:brillo-franja 12s ease-in-out infinite}
@keyframes brillo-franja{0%,72%{transform:translateX(-120%)} 100%{transform:translateX(120%)}}
.franja-clientes .rotulo{margin:0; font-family:var(--display); font-weight:600;
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap;
  color:rgba(21,23,26,.66)}
.franja-clientes .logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px clamp(16px,2.1vw,32px)}
.franja-clientes img{height:22px; width:auto; filter:grayscale(1) brightness(0); opacity:.82;
  transition:transform .35s cubic-bezier(.2,.7,.25,1), opacity .3s ease}
.franja-clientes img:hover{transform:scale(1.16) translateY(-1px); opacity:1}

@media (prefers-reduced-motion:reduce){
  .accion-relleno::after,.franja-clientes::after{display:none}
  .franja-clientes img:hover{transform:none}
  .teja:hover,.puerta:hover,.equipo:hover{transform:none}
}


/* ═══ Sección 01 como escena (02-09-2026) ═══ */
:root{
  --salida:cubic-bezier(.65,0,.35,1);
  --suave:cubic-bezier(.2,.7,.25,1);
  --acero:#3E6076;
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* ══════════════════ LA ESCENA ══════════════════
   Sin caja, sin marco, sin foto rectangular. Un espacio continuo con luz,
   grano y polvo, y la pieza recortada flotando dentro con su sombra. */
.escena{position:relative; overflow:hidden; background:var(--negro); color:#fff;
  min-height:min(92svh,880px); display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr); align-content:start}
@media(min-width:960px){
  .escena{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); min-height:min(90svh,860px)}
}

/* — Ambiente: dos focos que derivan siempre, grano y viñeta — */
.orbe{position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0}
.orbe-1{width:64vmax; height:64vmax; left:-18vmax; top:-24vmax;
  background:radial-gradient(circle, rgba(242,194,48,.20), transparent 62%);
  animation:deriva-1 26s ease-in-out infinite alternate}
.orbe-2{width:52vmax; height:52vmax; right:-16vmax; bottom:-22vmax;
  background:radial-gradient(circle, rgba(62,96,118,.34), transparent 62%);
  animation:deriva-2 32s ease-in-out infinite alternate}
@keyframes deriva-1{to{transform:translate(9vmax,7vmax) scale(1.12)}}
@keyframes deriva-2{to{transform:translate(-8vmax,-6vmax) scale(1.08)}}
.grano{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.13;
  background-image:var(--grano); mix-blend-mode:overlay;
  animation:tiembla .9s steps(2) infinite}
@keyframes tiembla{50%{transform:translate(-3px,2px)}}
.vineta{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(11,13,15,.72) 100%)}
#polvo{position:absolute; inset:0; z-index:2; pointer-events:none}
/* Barrido de luz que cruza la escena cada 11 s */
.barrido{position:absolute; inset:-20% -60%; z-index:2; pointer-events:none;
  background:linear-gradient(104deg, transparent 42%, rgba(255,255,255,.055) 50%, transparent 58%);
  animation:cruza 11s linear infinite}
@keyframes cruza{from{transform:translateX(-40%)} to{transform:translateX(40%)}}

/* — La pieza: recortada, flotando, con sombra propia — */
.escenario{position:relative; z-index:3; display:grid; place-items:center;
  padding:clamp(8px,1.5vh,20px) clamp(20px,4vw,60px) clamp(86px,12vh,124px);
  min-height:clamp(300px,42vh,480px)}
/* En escritorio el índice vive a la izquierda: la pieza no lo pisa */

.pieza{position:absolute; width:min(92%,660px); display:grid; place-items:center;
  opacity:0; transform:translateY(46px) scale(.94); filter:blur(6px);
  transition:opacity .6s ease, transform .95s var(--salida), filter .7s ease}
.pieza.viva{opacity:1; transform:none; filter:none}
.pieza.sale{opacity:0; transform:translateY(-52px) scale(.97) rotate(-3deg); filter:blur(7px)}
.flota{animation:flota 6.5s ease-in-out infinite alternate}
/* La foto enmarcada flota con más recorrido: al ser un objeto rectangular
   necesita más movimiento para leerse igual de vivo que la pieza calada. */
.escenario.sincalar .flota{animation:flota-marco 6s ease-in-out infinite alternate}
@keyframes flota-marco{
  from{transform:translate3d(-14px,-18px,0) rotate(-2.2deg) scale(.985)}
  to{transform:translate3d(14px,20px,0) rotate(2deg) scale(1.015)}}
/* Cuando la pieza sale del cuadro en la foto original, el borde recto se
   disuelve en vez de cortar en seco. Es un parche: la toma final debe traer
   la pieza entera dentro del encuadre. */
.pieza.corte-d .flota{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent 99%);
  mask-image:linear-gradient(90deg,#000 82%,transparent 99%)}
.pieza.corte-x .flota{
  -webkit-mask-image:linear-gradient(90deg,transparent 1%,#000 9%,#000 91%,transparent 99%);
  mask-image:linear-gradient(90deg,transparent 1%,#000 9%,#000 91%,transparent 99%)}
/* La pieza calada se movía la mitad que la enmarcada y parecía quieta al
   lado de ella. Ahora las dos tienen recorrido comparable. */
@keyframes flota{from{transform:translate3d(-11px,-16px,0) rotate(-1.9deg) scale(.988)}
                 to{transform:translate3d(11px,18px,0) rotate(1.7deg) scale(1.014)}}
.pieza svg{width:100%; height:auto; overflow:visible;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.55))}
.pieza img{width:100%; height:auto;
  filter:drop-shadow(0 30px 38px rgba(0,0,0,.6)) contrast(1.05) saturate(.97) brightness(1.02)}
.sombra{position:absolute; bottom:-4%; left:50%; transform:translateX(-50%);
  width:64%; height:26px; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(0,0,0,.62), transparent 78%);
  animation:respira 6.5s ease-in-out infinite alternate}
@keyframes respira{from{transform:translateX(-50%) scale(1.06); opacity:.75}
                   to{transform:translateX(-50%) scale(.9); opacity:.5}}

/* — La misma pieza sin calar, dentro de un marco de foto — */
.calada{display:block}
.marco-foto{display:none; margin:0; background:var(--hueso); padding:14px 14px 0;
  box-shadow:0 30px 60px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.06) inset;
  transform:rotate(-1.4deg); width:100%}
.marco-foto img{width:100%; height:auto; display:block}
.marco-foto figcaption{padding:12px 2px 16px; display:flex; flex-wrap:wrap;
  align-items:baseline; justify-content:space-between; gap:4px 14px}
.marco-foto b{font-family:var(--display); font-weight:700; font-size:.9375rem;
  color:var(--tinta); letter-spacing:-.01em}
.marco-foto span{font-family:var(--display); font-weight:600; font-size:.5625rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--acero)}
.escenario.sincalar .calada{display:none}
.escenario.sincalar .marco-foto{display:block}
.escenario.sincalar .sombra{width:52%}



/* — El encuadre: la guía de cómo debe venir la foto — */
.encuadre{position:absolute; inset:8% 12%; z-index:4; pointer-events:none;
  border:1px dashed rgba(242,194,48,.55); opacity:0; transition:opacity .4s ease}
.escena.guia .encuadre{opacity:1}
.encuadre::before,.encuadre::after{content:''; position:absolute; background:rgba(242,194,48,.3)}
.encuadre::before{left:0; right:0; top:50%; height:1px}
.encuadre::after{top:0; bottom:0; left:50%; width:1px}
.encuadre span{position:absolute; top:-11px; left:12px; background:var(--negro);
  padding:0 8px; font-family:var(--display); font-weight:600; font-size:.5625rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fuego)}
.encuadre .margen{position:absolute; inset:9%; border:1px dashed rgba(255,255,255,.18)}
.marcador{position:absolute; z-index:5; font-family:var(--display); font-weight:600;
  font-size:.5625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--claro-2);
  opacity:0; transition:opacity .4s ease}
.escena.guia .marcador{opacity:1}
.marcador.izq{right:12%; top:8%; transform:translate(0,-170%)}
.marcador.abajo{left:50%; bottom:8%; transform:translate(-50%,150%)}

/* — La ficha, suspendida: sólo filetes, sin panel — */
.suspendida{position:relative; z-index:3; padding:0 clamp(20px,4vw,60px) clamp(96px,13vh,132px)}
@media(min-width:960px){ .suspendida{padding:clamp(4px,1vh,16px) clamp(20px,4vw,60px) clamp(96px,13vh,132px)} }
.suspendida .n{font-family:var(--display); font-weight:800; font-size:.75rem;
  letter-spacing:.2em; color:var(--fuego)}
.origen{margin:8px 0 0; font-family:var(--display); font-weight:600; font-size:.5625rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--claro-2);
  display:inline-flex; align-items:center; gap:8px}
.origen::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--claro-2)}
.origen.real{color:#7FD1A4} .origen.real::before{background:#7FD1A4}
.aviso-ej{margin:10px 0 0; font-size:.75rem; color:var(--fuego);
  border-left:2px solid var(--fuego); padding-left:10px; max-width:34ch}
.aviso-ej b{color:#fff}
.suspendida h3{font-family:var(--display); font-weight:800; font-variation-settings:'wdth' 110;
  font-size:clamp(1.75rem,3.4vw,2.75rem); line-height:1; letter-spacing:-.035em;
  margin:12px 0 0; max-width:14ch}
.suspendida .desc{color:var(--claro); font-size:clamp(.9375rem,1.1vw,1.0625rem);
  margin:14px 0 0; max-width:40ch}
.lineas{margin:clamp(20px,3vh,30px) 0 0; display:grid}
.lineas > div{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--hair);
  opacity:0; transform:translateY(14px)}
.entra .lineas > div{animation:sube-linea .6s var(--salida) forwards}
.entra .lineas > div:nth-child(1){animation-delay:.20s}
.entra .lineas > div:nth-child(2){animation-delay:.27s}
.entra .lineas > div:nth-child(3){animation-delay:.34s}
.entra .lineas > div:nth-child(4){animation-delay:.41s}
.entra .lineas > div:nth-child(5){animation-delay:.48s}
.entra .lineas > div:nth-child(6){animation-delay:.55s}
@keyframes sube-linea{to{opacity:1; transform:none}}
.lineas dt{font-size:.8125rem; color:var(--claro-2); margin:0}
.lineas dd{margin:0; font-family:var(--display); font-weight:600; font-size:.9375rem;
  text-align:right}
.pdte{color:var(--fuego); border-bottom:1px dashed rgba(242,194,48,.5); white-space:nowrap}
.entra .n,.entra h3,.entra .desc{animation:sube-linea .7s var(--salida) backwards}
.entra .n{animation-delay:.02s} .entra h3{animation-delay:.08s} .entra .desc{animation-delay:.15s}

/* — Rótulo superior de la escena — */
.cab-escena{grid-column:1/-1; position:relative; z-index:5;
  padding:clamp(24px,3.2vh,38px) clamp(20px,4vw,60px) clamp(4px,1vh,12px)}
.rotulo-escena{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px;
  padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.12)}
/* Un solo renglón: el titular es el rótulo de la sección, no un párrafo.
   `nowrap` obliga a que la escala se ajuste al ancho, nunca al revés. */
.titular-escena{font-family:var(--display); font-weight:800; font-variation-settings:'wdth' 112;
  font-size:clamp(1.75rem,5.6vw,4.4rem); line-height:1; letter-spacing:-.04em;
  margin:clamp(12px,1.8vh,20px) 0 0; color:#fff; white-space:nowrap}
.rotulo-escena p{margin:0; font-family:var(--display); font-weight:600; font-size:.6875rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--claro-2)}
.rotulo-escena .cifra{color:#fff}
/* En móvil el número no debe quedarse solo en un renglón: la línea de grados
   se estrecha a su lado en vez de saltar debajo. */
@media(max-width:700px){ .rotulo-escena p:last-child{flex:1 1 0; min-width:0} }

/* — Galería inferior: dice que hay más y que se pueden tocar — */
.galeria{position:absolute; z-index:6; left:0; right:0; bottom:0;
  padding:clamp(12px,2vh,18px) clamp(16px,4vw,60px) clamp(14px,2.2vh,20px);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px clamp(18px,3vw,40px);
  background:linear-gradient(180deg, rgba(21,23,26,0), rgba(21,23,26,.72) 45%, rgba(21,23,26,.92));
  border-top:1px solid rgba(255,255,255,.10)}
.rotulo-gal{margin:0; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  font-family:var(--display)}
.rotulo-gal .paso{display:inline-flex; align-items:baseline; gap:4px}
.rotulo-gal b{font-weight:800; font-size:1.125rem; color:var(--fuego);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.rotulo-gal i{font-style:normal; font-weight:600; font-size:.75rem; color:var(--claro-2)}
.rotulo-gal .nombre{font-weight:700; font-size:.9375rem; color:#fff; letter-spacing:-.01em}
.rotulo-gal .pista{font-weight:600; font-size:.5625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--claro-2)}
@media(max-width:700px){ .rotulo-gal .pista{display:none} }
.tiras{display:flex; gap:8px; margin-left:auto; overflow-x:auto; padding-bottom:2px;
  scrollbar-width:none}
.tiras::-webkit-scrollbar{display:none}
.tiras button{position:relative; flex:0 0 auto; width:clamp(62px,7vw,86px); aspect-ratio:4/3;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); padding:6px;
  cursor:pointer; transition:border-color .3s ease, background .3s ease, transform .3s var(--suave)}
.tiras button:hover{transform:translateY(-3px); border-color:rgba(242,194,48,.6);
  background:rgba(242,194,48,.08)}
.tiras img{width:100%; height:100%; object-fit:contain; opacity:.55;
  transition:opacity .3s ease}
.tiras button.on{border-color:var(--fuego); background:rgba(242,194,48,.10)}
.tiras button.on img{opacity:1}
.tiras .avance{position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--fuego),var(--fuego-2)); transform:scaleX(0);
  transform-origin:left}
.tiras button.on .avance{animation:llena 4.2s linear forwards}
.escena:hover .tiras button.on .avance{animation-play-state:paused}
@keyframes llena{to{transform:scaleX(1)}}
.tiras .num{position:absolute; top:4px; left:6px; font-family:var(--display); font-weight:700;
  font-size:.5rem; letter-spacing:.1em; color:var(--claro-2)}
.tiras button.on .num{color:var(--fuego)}

/* El interruptor de la foto vive dentro del escenario, encima de la pieza:
   así no ocupa una franja propia ni empuja la cabecera hacia abajo. */
.mando-foto{position:absolute; z-index:7; top:0; right:clamp(20px,4vw,60px)}
@media(max-width:959px){ .mando-foto{right:clamp(16px,4vw,24px)} }

/* Los mandos de esta maqueta (no van al sitio) */
.mandos{position:absolute; z-index:7; top:clamp(52px,8vh,84px); right:clamp(16px,4vw,60px);
  display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.interruptor{border:1px solid rgba(255,255,255,.24); background:rgba(21,23,26,.55);
  backdrop-filter:blur(8px); color:#fff; font-family:var(--display); font-weight:600;
  font-size:.625rem; letter-spacing:.18em; text-transform:uppercase; padding:10px 15px;
  cursor:pointer; transition:background .3s ease, color .3s ease}
.interruptor:hover{background:var(--fuego); color:var(--sobre-fuego); border-color:transparent}


/* La escena ya no reserva una franja para la barra fija: esa franja se leía
   como un hueco muerto permanente a cambio de un solapamiento que sólo ocurre
   en un punto del scroll. El anclaje sí guarda el margen. */
.escena{padding-top:0; scroll-margin-top:96px}
/* Aire de entrada: la franja clara de clientes muere justo encima y el titular
   necesita separarse de ese borde, no arrancar pegado a él. */
.cab-escena{padding-top:clamp(52px,6.6vh,88px)}
/* Menos aire vertical, arriba y abajo — la portada también */
.portada.partida{min-height:min(66svh,760px)}
/* El aire de arriba es exactamente el que necesita la barra fija (128 px en
   móvil, 148 en escritorio) más un respiro: ni un píxel de relleno. */
.lado-texto{padding-top:100px; padding-bottom:clamp(18px,2.6vh,30px);
  padding-left:var(--borde); padding-right:clamp(24px,3vw,60px)}
@media(min-width:980px){ .lado-texto{padding-top:clamp(118px,13vh,152px)} }

/* --- Un solo sistema de ancho: el borde de la pantalla -------------------
   La barra vivía en un contenedor de 1440 px centrado mientras la portada
   sangraba a los dos bordes. A 2000 px eso dejaba 280 px de barra vacía a
   cada lado y el texto de la portada arrancaba 260 px dentro del negro: la
   composición se leía corrida hacia la derecha. Ahora todo mide su margen
   contra la pantalla, no contra un contenedor. */
:root{ --borde:clamp(20px,3.2vw,64px) }
.top{padding-top:0; padding-bottom:0}
/* El desenfoque de fondo de la barra costaba un cuadro entero sobre el vídeo
   de la portada y no se veía: el fondo ya está al 92 % de opacidad. */
.top.fija{backdrop-filter:none; -webkit-backdrop-filter:none}
/* `.top.fija` del CSS base volvía a meter 16 px arriba y abajo y la barra
   crecía al hacer scroll en vez de encoger. El relleno lo pone `.top-in`. */
.top.fija{padding-top:0; padding-bottom:0}
.top-in{max-width:none; padding-left:var(--borde); padding-right:var(--borde);
  padding-top:clamp(15px,1.7vh,21px); padding-bottom:clamp(15px,1.7vh,21px)}
.top.fija .top-in{padding-top:clamp(11px,1.3vh,16px); padding-bottom:clamp(11px,1.3vh,16px)}
/* El texto arranca en el borde real y ya no se empuja a la derecha. */
.lado-texto .interior{margin-left:0; margin-right:auto}

/* --- La navegación gana peso, no tamaño ---------------------------------
   150 px de barra para un menú de 15 px en minúsculas. Se baja la altura y
   se pasa a versalitas: es el idioma que ya habla el resto del sitio. */
.top nav{gap:clamp(20px,1.9vw,38px)}
/* OJO: sólo los hijos directos. Con `.top nav a` el mega menú de Servicios
   heredaba versalitas y tracking, se ensanchaba y las tres columnas se pisaban. */
.top nav > a,.menu-serv > a{font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(.6875rem,.78vw,.8125rem); letter-spacing:.14em; color:var(--claro)}
.top nav > a:hover,.menu-serv > a:hover{color:var(--fuego)}
/* El desplegable vuelve a su tipografía de lectura */
.mega a{font-family:var(--texto); font-weight:400; text-transform:none; letter-spacing:0;
  font-size:.9375rem}
.mega h4{min-height:2.6em; margin-bottom:10px}   /* alinea el primer enlace de las tres columnas */

/* --- La cabecera, en una sola banda --------------------------------------
   El titular ocupaba una franja propia de 183 px que cruzaba las dos columnas,
   y la ficha de la derecha no podía empezar hasta que terminara: eso era el
   hueco.
   La cabecera pasa a ser una sola banda: el titular a la izquierda y los grados
   a la derecha, alineados por la base. Baja de 183 a ~120 px de alto, así que
   la ficha empieza 63 px más arriba y la foto conserva su tamaño. */
@media(min-width:900px){
  .cab-escena{display:flex; align-items:baseline; justify-content:space-between;
    gap:10px clamp(24px,3vw,48px); flex-wrap:wrap;
    padding-top:clamp(66px,7.6vh,88px); padding-bottom:clamp(10px,1.4vh,16px)}
  .cab-escena .rotulo-escena{order:2; border-bottom:0; padding-bottom:0; flex:0 1 auto;
    justify-content:flex-start}   /* si baja de línea, alinea con el titular */
  .cab-escena .rotulo-escena::after{display:none}
  .titular-escena{order:1; margin-top:0}
  /* El filete cruza toda la banda, por debajo de las dos cosas */
  .cab-escena{border-bottom:1px solid rgba(255,255,255,.12)}
}
/* Y la ficha ocupa la columna derecha de arriba abajo, así que empieza a la
   altura del titular en vez de esperar a que termine la banda. */
@media(min-width:960px){
  /* Filas explícitas: si no, el alto de la ficha —que cruza las dos— se reparte
     entre ellas y empuja la foto hacia abajo. */
  .escena{grid-template-rows:auto 1fr}
  .cab-escena{grid-column:1; grid-row:1}
  .escenario{grid-column:1; grid-row:2}
  /* La ficha arranca a la misma altura que el titular: su relleno superior
     tiene que ser el mismo que el de la cabecera. */
  .suspendida{grid-column:2; grid-row:1 / span 2; align-self:start; padding-top:clamp(66px,7.6vh,88px)}
}
.mega .caja{gap:var(--s5) var(--s7); padding:var(--s6) var(--s7)}
/* El teléfono en amarillo: es la segunda vía de contacto y tiene que verse. */
.top .tel{letter-spacing:.05em; color:var(--fuego)}
.top .tel:hover{color:var(--fuego-2)}

/* --- Franja de clientes · acabado C, hueso quieto (aprobado 02-09-2026) ---
   Deja de ser una barra de color saturado y pasa a ser una banda clara entre
   dos oscuros: el respiro que el ojo pide después de la portada negra. Los
   logos no se invierten —nacen en tinta oscura para fondo claro— así que
   conservan el detalle fino que se pierde al pasarlos a blanco. */
.franja-clientes{flex-direction:column; flex-wrap:nowrap;
  gap:clamp(14px,1.7vw,20px); padding:clamp(26px,3.4vw,38px) clamp(20px,4vw,48px);
  background:linear-gradient(180deg,#F4F6F7,#E7EAEC);
  border-top:1px solid rgba(22,34,43,.14); border-bottom:1px solid rgba(22,34,43,.14)}
.franja-clientes::after{display:none}
.franja-clientes .rotulo{font-size:.6875rem; letter-spacing:.26em; color:var(--fuego-oscuro)}
.franja-clientes .logos{gap:16px clamp(24px,3vw,46px)}
.franja-clientes img{height:34px; filter:grayscale(1) contrast(1.18); opacity:1}
.franja-clientes img[alt="PETROPERÚ"]{height:31px}
.franja-clientes img[alt="COSAPI"]{height:34px}
.franja-clientes img[alt="Neptunia"]{height:40px}
.franja-clientes img[alt="TASA"]{height:37px}
.franja-clientes img[alt="Pesquera Capricornio"]{height:38px}
.franja-clientes img[alt="Molino El Triunfo"]{height:43px}
.franja-clientes img[alt="Pay Pay"]{height:36px}
.franja-clientes img{opacity:.8;
  transition:opacity .13s ease-out, transform .16s ease-out, filter .13s ease-out}
.franja-clientes img:hover{opacity:1; transform:translateY(-3px) scale(1.12);
  filter:grayscale(0) contrast(1.04)}

/* --- Piezas que sólo existen enmarcadas ---------------------------------
   Las fotos de planta y de proceso no se recortan: el fondo es la
   información (la cabina, el puente grúa, el EPP, el patio). Van siempre
   dentro del marco y con el movimiento del marco. */
.pieza.solo-marco .calada{display:none}
.pieza.solo-marco .marco-foto{display:block}
.pieza.solo-marco .flota{animation:flota-marco 6s ease-in-out infinite alternate}
.pieza.solo-marco .sombra{width:52%}
/* La última miniatura quedaba debajo del botón flotante de WhatsApp. */
.galeria{padding-right:clamp(84px,7vw,112px)}

/* --- La escena, más legible ---------------------------------------------
   Los rótulos micro estaban en 9-10 px. Como contrapeso de la escala grande
   funcionan, pero a un metro de un monitor de 24" no se leen. Toda la escala
   pequeña de la escena sube un escalón. */
.rotulo-escena p{font-size:clamp(.75rem,.85vw,.875rem)}
.suspendida .n{font-size:.875rem; letter-spacing:.18em}
.origen{font-size:.6875rem; letter-spacing:.16em}
.aviso-ej{font-size:.8125rem; max-width:38ch}
.suspendida .desc{font-size:clamp(1rem,1.12vw,1.125rem)}
.lineas > div{padding:12px 0}
.lineas dt{font-size:.9375rem}
.lineas dd{font-size:clamp(1rem,1.05vw,1.0625rem)}
.marco-foto b{font-size:1rem}
/* El titular de la ficha estaba limitado a 14 caracteres y la descripción a 40:
   con eso «Carrocería de volquete, como llega» salía en tres renglones aunque
   la columna tuviera sitio de sobra, y la sección crecía sin necesidad. */
.suspendida h3{max-width:24ch; font-size:clamp(1.5rem,2.9vw,2.375rem); line-height:1.03}
.suspendida .desc{max-width:62ch}
.marco-foto span{font-size:.625rem; letter-spacing:.16em}
/* Reserva bajo la ficha para que el botón no quede debajo de la galería. */
/* La galería va en posición absoluta al pie de la escena, así que la ficha
   tiene que reservarle su alto exacto. Un valor fijo se quedaba corto en
   pantalla baja —donde la galería encoge menos que el resto— y el filete
   superior de la galería cruzaba por encima del botón amarillo, además de
   robarle el clic a su franja inferior. Ahora el alto se mide y se reserva. */
.escena{--gal-h:132px}
@media(min-width:960px){
  .suspendida{padding-bottom:calc(var(--gal-h) + clamp(14px,2.4vh,26px))}
}
@media(max-width:959px){ .suspendida{padding-bottom:clamp(190px,24vh,220px)} }

/* --- La tira de miniaturas: al centro y más grande ----------------------
   Con `margin-left:auto` la tira se pegaba al borde derecho: en una pantalla
   ancha quedaba fuera del recorrido del ojo y no se leía como el control que
   es. La rejilla la centra en la pantalla y el rótulo se queda a la izquierda. */
.tiras{gap:10px}
.tiras button{width:clamp(76px,8vw,104px)}
.tiras .num{font-size:.625rem; top:5px; left:7px}
.rotulo-gal b{font-size:1.375rem}
.rotulo-gal i{font-size:.875rem}
.rotulo-gal{flex-direction:column; align-items:flex-start; gap:4px}
.rotulo-gal .pista{font-size:.6875rem; letter-spacing:.16em; color:var(--fuego); display:block;
  /* `.pista` es una clase que ya existe en el sitio con margen propio
     (32/16 px): dentro del rótulo de la galería estiraba el bloque de 46 a
     94 px, y ése era el alto que la ficha reservaba abajo. */
  margin:0}
@media(min-width:960px){
  .galeria{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center; padding-right:clamp(16px,4vw,60px)}
  .rotulo-gal{grid-column:1}
  .tiras{grid-column:2; margin-left:0; justify-self:center}
}

/* --- La salida a la página de proyectos ---------------------------------
   Va al final de la tira, que es donde termina el barrido del ojo después de
   las ocho miniaturas, y no compite con el botón amarillo de cotizar: no
   lleva foto, no lleva número y se lee como un control, no como una pieza.
   Un filete la separa de las miniaturas para que nadie la cuente como la 09. */
.tira-todos{position:relative; flex:0 0 auto; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; text-decoration:none;
  width:clamp(76px,8vw,104px); aspect-ratio:4/3; padding:6px;
  margin-left:clamp(10px,1.4vw,20px);
  border:1px dashed rgba(242,194,48,.45); background:rgba(242,194,48,.04);
  font-family:var(--display); font-weight:700; font-size:.5625rem;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.25;
  color:var(--fuego); text-align:center;
  transition:border-color .16s ease-out, background .16s ease-out, transform .16s ease-out}
.tira-todos::before{content:''; position:absolute; top:14%; bottom:14%;
  left:calc(-1 * clamp(5px,.7vw,10px)); width:1px; background:rgba(255,255,255,.16)}
.tira-todos .flecha{font-size:1.0625rem; line-height:1; font-weight:400}
.tira-todos:hover,.tira-todos:focus-visible{border-style:solid; border-color:var(--fuego);
  background:rgba(242,194,48,.12); transform:translateY(-3px)}
.tira-todos:focus-visible{outline:2px solid var(--fuego); outline-offset:3px}
@media(min-width:960px) and (max-height:880px){
  .tira-todos{width:clamp(56px,min(8vw,11.4vh),104px)}
}
@media(max-width:959px){ .galeria{padding-right:clamp(76px,14vw,96px)} }

/* --- Entrada de la cabecera --------------------------------------------
   El titular se descubre de abajo hacia arriba, como si saliera de debajo del
   filete; el filete se traza y el rótulo sube detrás. Una sola vez, al entrar
   en pantalla, y nada de esto ocurre con `prefers-reduced-motion`. */
.rotulo-escena{position:relative; border-bottom-color:transparent}
.rotulo-escena::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:rgba(255,255,255,.12); transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--salida)}
.rotulo-escena p{opacity:0; transform:translateY(10px);
  transition:opacity .6s ease .18s, transform .7s var(--salida) .18s}
.titular-escena{opacity:0; clip-path:inset(0 0 108% 0); transform:translateY(.16em);
  transition:opacity .5s ease .1s, clip-path .95s var(--salida) .1s,
             transform .95s var(--salida) .1s}
.escena.vista .rotulo-escena::after{transform:scaleX(1)}
.escena.vista .rotulo-escena p{opacity:1; transform:none}
.escena.vista .titular-escena{opacity:1; clip-path:inset(-.22em 0 -.3em 0); transform:none}
@media (prefers-reduced-motion:reduce){
  .rotulo-escena{border-bottom-color:rgba(255,255,255,.12)}
  .rotulo-escena::after{display:none}
  .rotulo-escena p,.titular-escena{opacity:1!important; transform:none!important;
    clip-path:none!important; transition:none}
}

/* --- Ni la pieza ni el marco pisan la galería ---------------------------
   Las piezas van en posición absoluta y centradas: una foto alta se salía por
   arriba y por abajo del escenario y se metía debajo de la tira de miniaturas.
   Se le da más alto al escenario y un techo a la pieza. */
/* Las piezas van en posición absoluta: se centran en la CAJA DE RELLENO del
   escenario, así que el `padding-bottom` no las subía — las bajaba. El aire
   sobre la galería se consigue con la altura del escenario, y cada pieza tiene
   un techo para no desbordarla. */
/* `.escena` centra sus items en la fila, y a la fila la estira la columna de
   la ficha: el escenario caía 230 px por debajo de la cabecera y la foto
   quedaba hundida. Se ancla arriba y la pieza se alinea a su borde superior,
   a la altura del primer renglón de la ficha. */
.escenario{align-self:start; align-items:start; min-height:clamp(340px,50vh,540px); padding-bottom:0}
/* El vaivén levanta la pieza unos 34 px: sin este margen el marco se subía
   por encima del filete de la cabecera. */
.pieza{margin-top:clamp(34px,4.2vh,50px)}
.pieza .calada img{max-height:clamp(250px,42vh,440px); object-fit:contain; object-position:center}
/* El marco se ajusta a su foto en vez de estirarse al ancho de la pieza. */
.marco-foto{width:auto; max-width:100%; margin-inline:auto}
.marco-foto img{width:auto; max-width:100%; max-height:clamp(200px,35vh,380px)}
/* El techo deja margen para lo que añade el vaivén: giro, escala y 18 px de
   recorrido. Sin ese margen la foto entraba por debajo de la galería. */

/* --- Estado de los botones: solo el reflejo ------------------------------
   El botón amarillo cambiaba el color de la letra al pasar el cursor: una
   regla posterior de `.accion:hover` pisaba su color y además aplanaba el
   degradado. Lo único que debe ocurrir es el barrido de luz. */
.accion.accion-relleno:hover,.accion.accion-relleno:focus-visible{
  background:linear-gradient(180deg,var(--btn-a),var(--btn-b));
  color:var(--sobre-fuego); gap:14px}
/* El botón de línea sí invierte, y a propósito: es la forma más rotunda de
   decir «estás sobre este botón». Sólo con el cursor encima; en reposo se
   queda como está. */
.accion.accion-linea:hover,.accion.accion-linea:focus-visible{
  background:#fff; border-color:#fff; color:var(--negro); gap:14px}
/* Mismo criterio en el interruptor de la foto. */
.interruptor:hover,.interruptor:focus-visible{
  background:rgba(21,23,26,.72); color:#fff; border-color:var(--fuego)}
/* La columna de texto era estrecha para el cuerpo del titular: el H1 rompía en
   tres renglones y sobraba sangría a los lados. Se ensancha la columna y la
   medida del texto en vez de achicar la tipografía. */
@media(min-width:980px){
  .portada.partida{grid-template-columns:minmax(0,1.34fr) minmax(0,.78fr)}
}
.lado-texto .interior{max-width:1120px}
/* El titular cierra un poco el tracking para que el primer renglón entre entero:
   es preferible a partirlo en tres o a bajar el cuerpo. */
.portada.partida .d1{letter-spacing:-.045em}
.portada.partida .lede{max-width:56ch}
.portada.partida .tira{margin-top:clamp(20px,2.6vh,32px)}
.clientes-bloque{padding-top:clamp(12px,1.6vh,18px)}
/* --- La barra no se esconde nunca ---------------------------------------
   Se probó a retirarla al bajar para que el titular de la escena no pasara por
   debajo. Descartado: el menú y el WhatsApp tienen que estar siempre a mano.
   Ahora se solidifica al primer scroll (40 px) y ahí se queda. */
.top{transition:background var(--t), border-color var(--t), padding var(--t)}
/* La maqueta apaga todas las animaciones con prefers-reduced-motion:
   hay que devolver a su sitio lo que arranca oculto. */
@media (prefers-reduced-motion:reduce){
  .pieza.viva{opacity:1!important; transform:none!important; filter:none!important}
  .lineas > div,.suspendida h3,.suspendida .desc{
    opacity:1!important; transform:none!important}
  .tiras button.on .avance{transform:scaleX(1)}
}

/* ═══ La sección cabe en una pantalla de portátil ═══════════════════════
   La altura de la escena la fija la ficha de la derecha, no el mirador: con
   la ficha llena medía ~800 px pasara lo que pasara, así que en un portátil
   de 700-790 px de alto la tira de miniaturas quedaba cortada por abajo.
   Aquí todo el ritmo vertical pasa a medirse en vh: se comprime lo que es
   aire —rellenos, márgenes, alto de fila— y no lo que es información.
   El relleno superior se mantiene en el alto de la barra fija para que el
   titular nunca quede debajo de ella. */
@media(min-width:960px) and (max-height:880px){
  .cab-escena{padding-bottom:clamp(6px,1vh,12px)}
  /* El alto reservado sigue siendo el de la galería medida; en pantalla baja
     sólo se recorta el respiro entre el botón y el filete. */
  .suspendida{padding-bottom:calc(var(--gal-h) + clamp(12px,1.8vh,20px))}

  /* El titular deja de medirse sólo contra el ancho: en pantalla baja, una
     tipografía de 5,6vw se come la mitad del alto disponible. */
  .titular-escena{font-size:clamp(1.75rem,min(5.6vw,8.4vh),4.4rem)}

  .origen{margin-top:4px}
  .aviso-ej{margin-top:7px}
  .suspendida h3{font-size:clamp(1.5rem,min(3.4vw,5vh),2.75rem);
                 margin-top:clamp(7px,1.3vh,12px)}
  .suspendida .desc{margin-top:clamp(8px,1.5vh,14px); line-height:1.42}

  /* La fila de datos es lo que más pesa: seis filas a 54 px son 324. */
  .lineas{margin-top:clamp(9px,1.9vh,30px)}
  .lineas > div{padding:clamp(3px,.85vh,12px) 0}
  .suspendida > p:last-child{margin-top:clamp(11px,2.2vh,26px)!important}
  .suspendida .accion{padding-top:clamp(11px,1.9vh,18px);
                      padding-bottom:clamp(11px,1.9vh,18px)}

  /* El mirador y su foto se ajustan al hueco que queda */
  .escenario{min-height:clamp(220px,34vh,540px)}
  .pieza{margin-top:clamp(16px,2.6vh,50px)}
  .pieza .calada img{max-height:clamp(180px,33vh,440px)}
  .marco-foto img{max-height:clamp(160px,28vh,380px)}

  /* La galería se estrecha con la pantalla: es un control, no un contenido */
  .galeria{padding-top:clamp(7px,1.2vh,18px); padding-bottom:clamp(9px,1.5vh,20px)}
  .tiras button{width:clamp(56px,min(8vw,11.4vh),104px)}
  .rotulo-gal b{font-size:clamp(1rem,2vh,1.375rem)}
  .rotulo-gal i{font-size:.8125rem}
}

/* Pantallas de portátil muy bajas: la descripción pasa a dos renglones en vez
   de tres y la fila de datos se queda en su mínimo legible. */
@media(min-width:960px) and (max-height:700px){
  .suspendida .desc{max-width:46ch; font-size:.9375rem}
  .aviso-ej{font-size:.6875rem; margin-top:5px}
  .lineas > div{padding:3px 0}
}


/* ═══════════════════ PORTADA ═══════════════════
   Estática: una sola pantalla, todo visible desde el primer momento. La versión
   con secuencia encadenada al scroll quedó archivada en
   `LUAL - maqueta completa, portada cinematografica.html`. */
.cine{position:relative; background:var(--negro)}
.cine-fija{position:relative; min-height:100svh; overflow:hidden; display:grid;
  place-items:center}
.telon{position:absolute; inset:0; z-index:0}
.sombra-cine{position:absolute; inset:0; z-index:1; pointer-events:none; background:#0B0D0F;
  opacity:.34}
.telon video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.penumbra{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(115% 82% at 24% 46%, rgba(21,23,26,.14), rgba(21,23,26,.9) 78%);
  opacity:.66}
/* Sin `mix-blend-mode`: mezclar una capa a pantalla completa sobre un vídeo
   en marcha cuesta un cuadro entero. A esta opacidad el resultado es el mismo. */
.grano-cine{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.07;
  background-image:var(--grano)}

/* La barra fija come arriba y la franja de clientes come abajo: el bloque se
   centra en lo que queda, no en la pantalla entera. */
.actos{position:relative; z-index:4; width:100%; max-width:var(--maxw); margin:0 auto;
  padding:clamp(96px,11.5vh,124px) var(--borde) clamp(126px,15vh,150px); color:#fff}

.cine-micro{margin:0; font-family:var(--display); font-weight:600; font-size:.6875rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--fuego)}
.cine-titular{font-family:var(--display); font-weight:800; font-variation-settings:'wdth' 114;
  font-size:clamp(2.2rem,5vw,4.4rem); line-height:.96; letter-spacing:-.045em;
  margin:clamp(12px,1.7vh,18px) 0 0; max-width:17ch; text-wrap:balance}
.cine-titular span{color:var(--fuego); display:block}
.cine-lede{font-size:clamp(1.0625rem,1.28vw,1.25rem); line-height:1.5; color:var(--claro);
  max-width:48ch; margin:clamp(14px,2vh,22px) 0 0}
.cine-cifras{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(14px,2vh,22px);
  margin:clamp(18px,2.6vh,30px) 0 0; max-width:min(100%,880px)}
@media(min-width:760px){ .cine-cifras{grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,44px)} }
.cine-cifras > div{border-top:1px solid rgba(255,255,255,.22); padding-top:12px}
.cine-cifras b{display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.1875rem,1.95vw,1.75rem); letter-spacing:-.03em; line-height:1.1;
  font-variant-numeric:tabular-nums; text-wrap:balance;
  /* La línea amarilla de la cinta de datos: se traza al pasar el cursor por la
     cifra (o al enfocarla con teclado), no está dibujada de entrada. */
  background-image:linear-gradient(90deg,var(--fuego),var(--fuego-2));
  background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:5px; width:fit-content;
  transition:background-size .42s cubic-bezier(.2,.7,.25,1)}
.cine-cifras > div{cursor:default}
.cine-cifras > div:hover b,
.cine-cifras > div:focus-visible b{background-size:100% 2px}
.cine-cifras > div:focus-visible{outline:2px solid var(--fuego); outline-offset:4px}
.cine-cifras span{display:block; margin-top:6px; font-size:.9375rem; line-height:1.45;
  color:var(--claro-2); max-width:30ch}
.cine-acciones{display:flex; flex-wrap:wrap; gap:var(--s3); margin:clamp(20px,2.8vh,30px) 0 0}
.cine-promesa{margin:clamp(11px,1.5vh,16px) 0 0; font-size:.9375rem; color:var(--claro-2)}
.cine-promesa b{color:#fff; font-weight:600}

/* La franja de clientes entra al final del tramo, dentro del mismo telón */
.franja-cine{position:absolute; z-index:5; left:0; right:0; bottom:0;
  background:linear-gradient(180deg,#F4F6F7,#E7EAEC); border-top:1px solid rgba(22,34,43,.14);
  padding:clamp(26px,3.4vw,38px) clamp(20px,4vw,48px);
  display:flex; flex-direction:column; align-items:center; gap:clamp(14px,1.7vw,20px);
}
.franja-cine .rotulo{margin:0; font-family:var(--display); font-weight:600; font-size:.6875rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--fuego-oscuro)}
.franja-cine .logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:16px clamp(24px,3vw,46px)}
.franja-cine{--esc:1}
.franja-cine img{height:calc(34px * var(--esc)); width:auto;
  filter:grayscale(1) contrast(1.18); opacity:.8;
  /* Respuesta inmediata: la cascada de entrada llevaba retardos de hasta 1,2 s
     y esos retardos se aplicaban también al pasar el cursor. */
  transition:opacity .13s ease-out, transform .16s ease-out, filter .13s ease-out;
  transition-delay:0s}
.franja-cine img:hover{opacity:1; transform:translateY(-3px) scale(1.12);
  filter:grayscale(0) contrast(1.04)}

.franja-cine img[alt="PETROPERÚ"]{height:calc(31px * var(--esc))}
.franja-cine img[alt="COSAPI"]{height:calc(34px * var(--esc))}
.franja-cine img[alt="Neptunia"]{height:calc(40px * var(--esc))}
.franja-cine img[alt="TASA"]{height:calc(37px * var(--esc))}
.franja-cine img[alt="Pesquera Capricornio"]{height:calc(38px * var(--esc))}
.franja-cine img[alt="Molino El Triunfo"]{height:calc(43px * var(--esc))}
.franja-cine img[alt="Pay Pay"]{height:calc(36px * var(--esc))}
/* — Móvil: el bloque no cabe centrado, así que arranca bajo la barra — */
@media(max-width:760px){
  .cine-fija{align-items:start}
  .actos{padding-top:clamp(84px,11vh,102px); padding-bottom:clamp(132px,17vh,148px)}
  .cine-titular{font-size:clamp(1.75rem,7.6vw,2.3rem); line-height:1; max-width:15ch}
  .cine-lede{font-size:.9375rem; line-height:1.45; margin-top:12px; max-width:38ch}
  .cine-cifras{gap:9px; margin-top:16px}
  .cine-cifras > div{padding-top:9px}
  .cine-cifras b{font-size:1.125rem}
  .cine-cifras span{font-size:.8125rem; line-height:1.35; margin-top:3px}
  .cine-acciones{margin-top:16px; gap:8px}
  .cine-acciones .accion{padding:15px 20px; font-size:.75rem}
  .cine-promesa{margin-top:11px; font-size:.8125rem}
  /* En móvil la franja es una sola fila que se desplaza: dos filas de logos
     se comían el alto que necesita el texto. */
  .franja-cine{--esc:.5; padding:11px 0 12px; gap:7px}
  .franja-cine .logos{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    width:100%; padding:0 14px; gap:22px; scrollbar-width:none}
  .franja-cine .logos::-webkit-scrollbar{display:none}
  .franja-cine img{flex:0 0 auto}
  .franja-cine .rotulo{font-size:.5625rem; letter-spacing:.22em}
}

/* Celulares de pantalla corta (iPhone SE y similares): otro escalón abajo. */
@media(max-width:760px) and (max-height:790px){
  .actos{padding-top:92px; padding-bottom:120px}
  .cine-titular{font-size:1.5625rem; line-height:1.02; max-width:17ch; margin-top:8px}
  .cine-lede{font-size:.875rem; line-height:1.4; margin-top:10px}
  .cine-cifras{gap:7px; margin-top:12px}
  .cine-cifras > div{padding-top:7px}
  .cine-cifras b{font-size:1rem; padding-bottom:4px}
  .cine-cifras span{font-size:.75rem; line-height:1.3; margin-top:2px}
  .cine-acciones{margin-top:12px}
  .cine-acciones .accion{padding:13px 16px; font-size:.6875rem}
  .cine-promesa{margin-top:9px; font-size:.75rem}
  .franja-cine{--esc:.44; padding:9px 0 10px; gap:5px}
}

/* Pantallas altas: el bloque crece para que el aire no se acumule arriba. */
@media(min-width:961px) and (min-height:1000px){
  .cine-titular{font-size:clamp(2.6rem,5.4vw,5rem)}
  .cine-lede{font-size:1.3125rem; max-width:44ch}
  .cine-cifras{margin-top:clamp(26px,3vh,38px); gap:clamp(22px,2.6vw,48px);
    max-width:min(100%,1060px)}
  .cine-cifras b{font-size:1.8125rem}
  .cine-cifras span{font-size:1rem}
  .cine-acciones{margin-top:clamp(26px,3vh,38px)}
  .cine-acciones .accion{padding:21px 34px; font-size:.9375rem}
  .cine-promesa{font-size:1rem; margin-top:clamp(14px,1.7vh,20px)}
}

/* Portátiles de pantalla corta (720-840 px de alto): el bloque no cabe a
   tamaño completo, así que baja un escalón entero en vez de recortarse. */
@media(min-width:761px) and (max-height:840px){
  .actos{padding-top:clamp(58px,7vh,72px); padding-bottom:clamp(122px,16vh,136px)}
  .cine-titular{font-size:clamp(1.9rem,3.8vw,3.1rem); margin-top:10px}
  .cine-lede{font-size:1rem; line-height:1.45; margin-top:12px}
  .cine-cifras{margin-top:16px; gap:14px clamp(16px,2vw,34px)}
  .cine-cifras > div{padding-top:9px}
  .cine-cifras b{font-size:1.1875rem}
  .cine-cifras span{font-size:.8125rem; line-height:1.35}
  .cine-acciones{margin-top:16px}
  .cine-acciones .accion{padding:15px 22px}
  .cine-promesa{margin-top:10px; font-size:.875rem}
  .franja-cine{--esc:.72; padding:16px clamp(20px,4vw,48px); gap:10px}
}

/* Si la portada se mueve, la sección 01 se queda quieta: dos piezas
   cinematográficas seguidas se anulan. */
.escena .orbe{opacity:.5}
.escena .barrido{display:none}
.escena #polvo{opacity:.45}

@media (prefers-reduced-motion:reduce){
  /* La portada ya es estática; aquí sólo se retira el vídeo —basta el póster—
     y se anula cualquier transición. */
  .telon video{display:none}
  .sombra-cine{opacity:.42}
  .cine-cifras b{transition:none}
  .franja-cine img{transition:none}
}



/* ═══ 02 — Tres rutas · Documento 26 rev. (03-09-2026) ════════════════════
   Sustituye a «Para quién». El alquiler NO es un cuarto público: es otra
   forma de comprar, y por eso va en franja transversal debajo de las tres. */
/* El titular va en dos renglones exactos: «…para» / «empresas, talleres y particulares».
   El salto se anula por debajo de 1000 px, donde la segunda línea no cabría. */
.p3-h2{max-width:none}
.p3-br{display:none}
@media(min-width:1000px){.p3-br{display:inline}}

/* La banda de rutas sale del margen y ocupa la pantalla de borde a borde.
   Es la única sección del sitio que lo hace: si lo hicieran varias, dejaría de
   ser un acento y sería desorden. */
#tres-rutas{padding-bottom:0}
/* La banda de tejas y el fondo de Servicios son los dos negros: pegados se leían
   como una sola masa. Lu pidió el respiro en NEGRO, no en claro, así que la
   separación es aire propio de Servicios, no una franja hueso. */
#servicios{padding-top:clamp(72px,7.5vw,120px)}
.p3-m{color:inherit; white-space:nowrap; padding-bottom:.02em;
  background-image:linear-gradient(var(--fuego),var(--fuego)); background-repeat:no-repeat;
  background-position:0 88%; background-size:100% .15em;
  transition:background-size .24s cubic-bezier(.2,.7,.25,1)}
.p3-m:hover,.p3-m:focus-visible{background-size:100% .42em}
/* sin bajada: el titular ya dice a quién sirve la sección y el rótulo carga «un solo estándar».
   El párrafo abría un hueco de aire que hacía que la sección se leyera como página de documento. */

.puertas.p3-rutas{display:grid; gap:0; background:none; margin-top:var(--s7);
  grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.puertas.p3-rutas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.puertas.p3-rutas{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* OJO: `aspect-ratio` y `min-height` juntos hacen que el navegador calcule el ANCHO a
   partir del alto y la teja se sale de la rejilla. Por eso arriba manda la proporción
   y abajo manda el alto mínimo, nunca los dos a la vez. */
.p3-rutas .puerta{scroll-margin-top:104px}
@media(min-width:700px){.puertas.p3-rutas .puerta{aspect-ratio:4/3; min-height:0}}
@media(min-width:1100px){.puertas.p3-rutas .puerta{aspect-ratio:1/1}}
@media(max-width:699px){.puertas.p3-rutas .puerta{aspect-ratio:auto; min-height:320px}}


/* la nota de foto pendiente comparte fila con la anotación: arriba a la derecha en escritorio,
   debajo en móvil. Antes chocaba con el título de la teja. */
.p3-ruta .aviso-foto{top:calc(var(--s5) + 52px); left:var(--s5); right:var(--s5)}
@media(min-width:1100px){.p3-ruta .aviso-foto{top:var(--s5); left:auto; right:var(--s5); width:min(42%,190px)}}

/* la anotación técnica sobre la foto: rótulo en pregunta + respuesta en amarillo.
   Regla de redacción: describe capacidad o puerta de entrada, nunca un tope.
   «desde» solo para mínimos que aceptamos; «hasta» para nuestra capacidad. */
.p3-nota{position:absolute; z-index:3; top:var(--s5); left:var(--s5); right:var(--s5);
  border-left:2px solid var(--fuego); padding-left:12px}
.p3-nota i{display:block; font-style:normal; font-family:var(--display); font-weight:600;
  font-size:.625rem; letter-spacing:.15em; text-transform:uppercase; color:var(--claro-2)}
.p3-nota b{display:block; margin-top:3px; font-family:var(--display); font-weight:800;
  font-size:clamp(.9375rem,1.15vw,1.125rem); line-height:1.15; letter-spacing:-.01em;
  color:var(--fuego); font-variant-numeric:tabular-nums}

.p3-ruta .texto{padding:var(--s6) var(--s5) var(--s5)}
.p3-ruta .texto b{font-variation-settings:'wdth' 112; text-transform:uppercase;
  letter-spacing:.05em; font-size:clamp(1.0625rem,1.5vw,1.375rem)}
.p3-ruta .sub{max-width:34ch; margin-top:7px}
.p3-btn{display:inline-flex; align-items:center; justify-content:center; margin-top:var(--s5);
  background:linear-gradient(180deg,var(--btn-a),var(--btn-b)); color:var(--sobre-fuego);
  font-family:var(--display); font-weight:700; font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; border-radius:999px; padding:13px 28px;
  transition:background .25s ease}
.puerta:hover .p3-btn,.puerta:focus-visible .p3-btn{background:linear-gradient(180deg,var(--btn-b),var(--btn-b))}
@media(max-width:699px){.p3-btn{width:100%; padding:16px 20px; font-size:.8125rem}}


/* ═══ 03 — Servicios · Documento 28 (03-09-2026) ══════════════════════════
   Único cambio de forma: las tejas se separan (gap 2px → 20px + radio 14px),
   así dejan de leerse como un muro. Ocho tejas en dos filas de cuatro:
   fuera galvanizado (no se hace) y fuera las dos de venta, que no son
   servicios y ya viven en la franja de alquiler y venta de la sección 02. */
.p4-lede{max-width:74ch}   /* dos renglones, no tres: 74ch sigue dentro de la medida de lectura */
.p4-tejas{gap:16px; background:none; margin-top:var(--s7)}
@media(min-width:760px){.p4-tejas{gap:18px}}
@media(min-width:1080px){.p4-tejas{gap:20px}}
.p4-tejas .teja{border-radius:14px; background:var(--negro-2);
  transition:transform .2s ease-out, box-shadow .2s ease-out}
.p4-tejas .teja:hover{transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.45)}
.p4-tejas .teja::before{border-radius:14px 14px 0 0}
.p4-tejas .rotulo-teja{display:block}
.p4-tejas .rotulo-teja b{display:block}
.p4-sub{display:block; margin-top:7px; font-size:.8125rem; line-height:1.45;
  color:var(--claro); max-width:30ch}
.p4-tejas .rotulo-teja .flecha{position:absolute; right:var(--s5); bottom:var(--s5)}
/* La teja de llamada era punteada, y el punteado en este sistema significa
   «falta algo aquí»: es el mismo recurso de los marcadores [FOTO PENDIENTE].
   Pasa a superficie sólida. El amarillo va rebajado a #B8860B —Lu lo pidió más
   apagado para que no grite—; sobre él, el texto negro da 5,5:1, por encima del
   4,5:1 que exige AA. */
.p4-tejas .teja.llamada{background:linear-gradient(158deg,#C08D0C,#A87A08); border:0;
  display:flex; flex-direction:column; justify-content:center; gap:var(--s4);
  padding:var(--s5)}
.p4-tejas .teja.llamada:hover{background:linear-gradient(158deg,#D39C0D,#B8860B)}
.p4-tejas .teja.llamada b{color:var(--sobre-fuego); max-width:18ch}
.p4-tejas .teja.llamada .ir{color:var(--sobre-fuego)}
.p4-tejas .teja.llamada::after,.p4-tejas .teja.llamada::before{display:none}

/* franja transversal · alquiler */
.p3-alq{position:relative; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:var(--s5) var(--s6); overflow:hidden;
  margin-top:2px; padding:var(--s6) var(--s5); min-height:158px; background:var(--negro)}
.p3-alq .img{position:absolute; inset:0; display:block; overflow:hidden}
.p3-alq .img img{width:100%; height:100%; object-fit:cover; filter:brightness(.5);
  transition:transform .7s cubic-bezier(.2,.7,.25,1)}
.p3-alq:hover .img img{transform:scale(1.04)}
.p3-alq::after{content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(21,23,26,.94) 30%,rgba(21,23,26,.55) 100%)}
.p3-alq::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; z-index:4;
  background:var(--fuego); transform:scaleX(0); transform-origin:left; transition:transform .3s ease}
.p3-alq:hover::before{transform:scaleX(1)}
.p3-alq .texto{position:relative; z-index:3; min-width:0; max-width:52ch}
.p3-alq b{display:block; font-family:var(--display); font-variation-settings:'wdth' 112;
  font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(1rem,1.35vw,1.25rem); line-height:1.14; color:#fff}
.p3-alq .sub{display:block; margin-top:8px; font-size:.8125rem; line-height:1.5; color:var(--claro)}
.p3-btn2{position:relative; z-index:3; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.5); color:#fff; border-radius:999px; padding:14px 30px;
  font-family:var(--display); font-weight:600; font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; transition:background .25s ease, color .25s ease, border-color .25s ease}
.p3-alq:hover .p3-btn2{background:#fff; color:var(--negro); border-color:#fff}
@media(max-width:999px){.p3-btn2{width:100%; padding:16px 20px; font-size:.8125rem}}

@media (prefers-reduced-motion:reduce){
  .p3-m,.p3-btn,.p3-btn2,.p3-alq .img img{transition:none}
}



/* ═══ 01 — Trabajos realizados · sin escena (03-09-2026) ══════════════════
   La foto va ENTERA: la caja tiene la misma proporción que las tomas (4:3),
   así que `cover` no recorta nada. En pantallas bajas la caja se estrecha
   para no pasar de 66svh de alto, conservando la proporción — nunca se
   ponen juntos aspect-ratio y min/max-height: el navegador calcularía el
   ancho a partir del alto y la caja se saldría de la rejilla. */
.t1-fila{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:var(--s6) var(--s7);
  align-items:start; margin-top:var(--s6)}
@media(max-width:980px){.t1-fila{grid-template-columns:1fr}}
.t1-mirador{margin:0; position:relative; overflow:hidden; background:var(--negro-2);
  width:min(100%, calc(66svh * 4 / 3)); aspect-ratio:4/3}
.t1-mirador img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.t1-mirador img[hidden]{display:none}

/* «Foto real»: se queda. Lo que se quitó es «sin recortar», que distinguía la pieza calada
   de la foto completa y ya no distingue nada. El rótulo vale por sí solo: en un rubro donde
   todos ilustran con banco de imágenes, decir que la foto es de obra propia es el argumento. */
.t1-origen{margin:0 0 10px; font-family:var(--display); font-weight:700; font-size:.625rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--claro-2)}
.t1-origen b{color:var(--fuego)}
/* Aviso de datos de ejemplo. Los seis campos están rellenos con valores plausibles
   leídos de cada foto, para que el papá de Lu vea el bloque lleno y entienda qué tiene
   que completar. NO se publica así: el aviso se quita el mismo día que lleguen los datos. */
.t1-ejemplo{margin:0 0 12px; font-size:.75rem; line-height:1.4; color:var(--fuego);
  border-left:2px solid var(--fuego); padding:2px 0 2px 10px; max-width:34ch}
.t1-ejemplo b{color:#fff}
.t1-ficha h3{margin:0 0 10px; font-family:var(--display); font-variation-settings:'wdth' 112;
  font-weight:800; font-size:clamp(1.25rem,1.9vw,1.6rem); line-height:1.1; color:#fff}
.t1-desc{margin:0 0 var(--s5); font-size:.9375rem; line-height:1.5; color:var(--claro); max-width:38ch}
.t1-datos{margin:0; border-top:1px solid var(--hair)}
.t1-datos div{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:10px 0; border-bottom:1px solid var(--hair)}
.t1-datos dt{margin:0; font-size:.8125rem; color:var(--claro-2)}
.t1-datos dd{margin:0; font-size:.875rem; font-weight:600; color:#fff; text-align:right;
  font-variant-numeric:tabular-nums}
.t1-ficha .accion{margin-top:var(--s5); border-radius:999px; padding:15px 30px; font-size:.8125rem}

.t1-galeria{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:var(--s5) var(--s6); margin-top:var(--s6); padding-top:var(--s5);
  border-top:1px solid var(--hair)}
@media(max-width:820px){
  .t1-galeria{grid-template-columns:1fr auto; align-items:end}
  .t1-galeria .t1-tiras{grid-column:1 / -1; order:3}
}
.t1-rot{margin:0; font-family:var(--display); font-weight:700; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--claro-2)}
.t1-rot b{color:var(--fuego); font-size:1rem}
.t1-rot span{display:block; margin-top:3px; color:var(--fuego); font-size:.625rem}
/* Con quince trabajos la tira ya no cabe en una línea. En vez de dejar que envuelva
   —la segunda fila quedaba coja: once arriba y cuatro abajo— pasa a ser una tira
   que se desplaza en horizontal, con anclaje por miniatura. Es el mismo gesto en
   escritorio y en móvil, y aguanta que sigan entrando trabajos. */
.t1-tiras{display:flex; gap:10px; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--hair) transparent;
  padding-bottom:10px; -webkit-overflow-scrolling:touch;
  /* la tira se desvanece por la derecha para que se lea que hay más */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 48px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 48px),transparent 100%)}
.t1-tiras::-webkit-scrollbar{height:6px}
.t1-tiras::-webkit-scrollbar-thumb{background:var(--hair); border-radius:999px}
.t1-tiras button{flex:0 0 auto; scroll-snap-align:start}
/* «Ver todos» va pegado a las miniaturas, no al borde derecho: ahí chocaba con el WhatsApp flotante */
.t1-tiras button{position:relative; width:104px; height:74px; padding:0; overflow:hidden;
  border:1px solid var(--hair); background:var(--negro-2); cursor:pointer;
  transition:border-color .18s ease-out, opacity .18s ease-out; opacity:.72}
.t1-tiras button img{width:100%; height:100%; object-fit:cover; display:block}
.t1-tiras button:hover{opacity:1}
.t1-tiras button[aria-current="true"]{border-color:var(--fuego); opacity:1}
.t1-todos{display:inline-flex; align-items:center; gap:8px; font-family:var(--display);
  font-weight:700; font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fuego); border:1px dashed rgba(242,194,48,.5); border-radius:999px; padding:12px 22px}
.t1-todos:hover{background:rgba(242,194,48,.08)}
@media(max-width:600px){
  .t1-tiras button{width:78px; height:58px}
  .t1-galeria{gap:var(--s4)}
}



/* ═══ /proyectos/ (03-09-2026) ════════════════════════════════════════════
   La página existía como enlace desde el menú y desde «Ver todos», y no
   llevaba a ninguna parte. Es una rejilla de casos con la misma ficha de
   seis campos de la home. Los datos siguen siendo de ejemplo. */
.pr-rejilla{display:grid; gap:var(--s6); grid-template-columns:minmax(0,1fr); margin-top:var(--s7)}
@media(min-width:900px){.pr-rejilla{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s7) var(--s6)}}
.pr-caso{min-width:0}
.pr-caso figure{margin:0 0 var(--s5); aspect-ratio:4/3; overflow:hidden; background:var(--negro-2)}
.pr-caso figure img{width:100%; height:100%; object-fit:cover; display:block}
.pr-caso h2{margin:0 0 8px; font-family:var(--display); font-variation-settings:'wdth' 112;
  font-weight:800; font-size:clamp(1.15rem,1.7vw,1.45rem); line-height:1.12; color:#fff}
.pr-caso p{margin:0 0 var(--s5); font-size:.9375rem; line-height:1.5; color:var(--claro); max-width:44ch}
.pr-datos{margin:0; border-top:1px solid var(--hair)}
.pr-datos div{display:flex; justify-content:space-between; gap:16px; padding:9px 0;
  border-bottom:1px solid var(--hair)}
.pr-datos dt{margin:0; font-size:.8125rem; color:var(--claro-2)}
.pr-datos dd{margin:0; font-size:.875rem; font-weight:600; color:#fff; text-align:right}



/* ═══ CIERRE DE LA HOME · Documento 36 (04-09-2026) ═══════════════════════ */

/* C2 · La banda de la nave y la sección de control son las dos oscuras: sin
   filete ni aire se leían como un solo bloque. La bajada baja a dos renglones
   ensanchando la medida (la de 44ch la partía en tres). */
#control{border-top:1px solid var(--hair); padding-top:clamp(56px,6vw,88px)}
#control .cab .lede{max-width:66ch}

/* E · Cotización a dos columnas. El formulario ocupaba 760 px de 1440 y dejaba
   media pantalla vacía justo donde se decide el contacto. La columna derecha
   pone ahí lo que hace falta para decidir: canal directo, plazo y formalidad. */
#cotizar .cot-dos{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s7)}
@media(min-width:980px){
  #cotizar .cot-dos{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); gap:var(--s8)}
}
#cotizar .cab .lede{max-width:72ch}   /* un solo renglón en escritorio */
.cot-lado{border-left:1px solid var(--hair); padding-left:var(--s6)}
@media(max-width:979px){
  .cot-lado{border-left:0; border-top:1px solid var(--hair); padding:var(--s6) 0 0}
}
.cot-lado .accion{display:flex; margin-top:var(--s4)}
.cot-wa{background:#1EA855; color:#fff; justify-content:center; gap:10px}
.cot-wa:hover{background:#188744; color:#fff}
.cot-wa svg{width:18px; height:18px; flex:0 0 auto}
.cot-tel{justify-content:flex-start; border-bottom:1px solid currentColor}
.cot-datos{margin:var(--s6) 0 0; border-top:1px solid var(--hair)}
.cot-datos > div{display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s4); padding:11px 0; border-bottom:1px solid var(--hair)}
.cot-datos dt{margin:0; font-size:.8125rem; color:var(--claro-2)}
.cot-datos dd{margin:0; font-size:.875rem; font-weight:600; color:#fff; text-align:right}
.cot-nota{margin-top:var(--s5); font-size:.8125rem; color:var(--claro-2)}

/* El pie: cuatro columnas en vez de tres, para que no quede un cuarto de ancho
   vacío en pantalla grande. */
@media(min-width:760px){ .pie-cols{grid-template-columns:1.35fr 1fr 1fr 1fr} }
.pie-wa{margin-top:var(--s5); font-size:.75rem; padding:14px 20px}



/* ── Revelado progresivo (03-09-2026) ────────────────────────────────────
   Sin JavaScript el contenido se ve igual: la regla de partida es visible y
   solo se esconde cuando el documento declara que hay JS. Antes, si el guion
   fallaba o tardaba, media página se quedaba en opacidad 0. */
.rev{opacity:1; transform:none}
.js .rev{opacity:0; transform:translateY(14px)}
.js .rev.visible{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .js .rev{opacity:1; transform:none} }