/* ===========================================================================
   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}
/* El correo es largo para la columna del pie: se deja partir antes que desbordar. */
.pie-sitio li a[href^="mailto:"]{overflow-wrap:anywhere}



/* ── 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} }

/* ===========================================================================
   LUAL · BLOQUE DE MÓVIL   (04-09-2026)
   ---------------------------------------------------------------------------
   Va AL FINAL de lual.css. Todo vive dentro de @media (max-width:767px):
   ninguna regla base se edita, ningún token de :root se toca, y por tanto el
   escritorio no se entera. Comprobado por comparación de huellas SHA-256 de
   capturas a página completa a 1440 y 1180 px.

   Objetivo medido: 680 px de zona limpia. Es lo que queda en un iPhone 16 Pro
   con las barras de Safari desplegadas (874 de pantalla − 118 de barra
   superior − 76 de píldora inferior), medido sobre capturas reales.

   Decisiones de Lu incorporadas el 04-09-2026:
   · la cinta de datos sale de la portada — esa información vive en otras
     secciones y en un teléfono nadie la lee;
   · el botón de las puertas de la sección 02 deja de ser una píldora grande y
     pasa a enlace con filete, como «Conocer la planta →»;
   · las tejas de servicios llevan solo el nombre, centrado y en versalitas;
   · el formulario de cotización va enmarcado, para que se distinga del bloque
     de datos que tiene encima;
   · el pie va en desplegables.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   NEUTRALIZADOR DE ESCRITORIO — tres reglas, y fuera del bloque de móvil
   ---------------------------------------------------------------------------
   El pie pasa a <details>/<summary> para poder plegarse en móvil. Un <summary>
   trae por defecto su triángulo y `display:list-item`, así que sin estas tres
   reglas el escritorio SÍ cambiaría. Su único trabajo es que el marcado nuevo
   se vea, en escritorio, exactamente igual que el marcado viejo. Comprobado
   con las huellas SHA-256 de las seis páginas a 1440 y 1180 px.
   ------------------------------------------------------------------------- */
.pie-des{ display:block }
.pie-des > summary{ display:block; list-style:none }
.pie-des > summary::-webkit-details-marker{ display:none }
/* El rótulo «Desliza» de la sección 02 solo existe en móvil. */
.p3-desliza{ display:none }
/* El mando de paso de la sección 01 (flechas y contador) solo existe en móvil. */
.t1-mando{ display:none }
/* La etiqueta «Llamar» del teléfono solo existe en móvil. */
.cot-tel-et{ display:none }

@media (max-width:767px){

/* ===========================================================================
   1 · PORTADA DE LA HOME
   =========================================================================== */

  /* Al salir la cinta de datos, el contenido se quedaba pegado a la barra y
     todo el sobrante se acumulaba abajo. Se centra en el hueco que queda entre
     la barra (62 px) y la franja de clientes (94 px, va absoluta abajo). */
  .cine-fija{ align-items:center }
  .actos{ padding-top:86px; padding-bottom:112px }

  .cine-titular{ font-size:2.05rem; line-height:1.02; max-width:15ch }
  .cine-lede{ font-size:.9375rem; line-height:1.5; margin-top:14px; max-width:40ch }

  /* La cinta de datos sale. Los tres datos siguen en el sitio: 150 m²/día y
     700 m² de cabina están en las páginas de servicio y en la banda 04;
     los grados, en la sección 01 y en la tabla de la 05. */
  .cine-cifras{ display:none }

  .cine-acciones{ margin-top:26px; gap:10px }
  .cine-acciones .accion{ padding:16px 22px; font-size:.78125rem }
  .cine-promesa{ margin-top:14px; font-size:.8125rem }
  /* «Visita técnica sin costo en Lima y Callao» es el dato de la sección 02.
     Aquí estaba repetido. Necesita envolver esa frase en un <span>. */
  .cine-promesa .promesa-extra{ display:none }

  /* La franja deja de desplazarse: los siete logos caben en dos filas y se
     ven todos. Hoy dos de los siete no se veían nunca. */
  .franja-cine{ --esc:.58; padding:12px 12px 14px; gap:7px }
  /* Los logos van centrados. El pasillo para el botón flotante se deja
     simétrico: con relleno solo a la derecha el bloque se veía corrido. */
  .franja-cine .logos{
    flex-wrap:wrap; overflow-x:visible; justify-content:center;
    width:100%; padding:0; gap:9px 16px;
  }
  .franja-cine .rotulo{ font-size:.5625rem; letter-spacing:.22em }

/* ===========================================================================
   2 · HOME · 01 TRABAJOS REALIZADOS
   =========================================================================== */

  #trabajos{ padding-top:26px; padding-bottom:26px }
  #trabajos .barra-sec{ margin-bottom:14px; padding-bottom:8px; flex-wrap:nowrap; gap:14px }
  #trabajos .cifras-sec{ font-size:.5625rem }
  #trabajos .t1-fila{ margin-top:16px; gap:16px }

  /* El rótulo en una línea: el dato de los grados sale. No se pierde —está en
     «Grado alcanzado» de cada ficha y en la tabla de la sección 05— y aquí iba
     sin contexto, que es lo que el manual manda evitar. */
  #trabajos .cifras-sec{ display:none }
  #trabajos .barra-sec{ padding-bottom:6px; margin-bottom:12px }

  /* La foto baja un punto de tamaño. Se reduce el ANCHO manteniendo el 4:3, así
     que no se recorta nada: sigue siendo la toma entera, solo un poco menor. */
  #trabajos .t1-mirador{ width:90%; margin-left:auto; margin-right:auto; position:relative }

  /* Mando de paso, sobre la propia foto: el pulgar y el ojo ya están ahí. */
  .t1-mando{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:absolute; left:0; right:0; bottom:0; z-index:3; padding:12px 12px 14px;
    background:linear-gradient(180deg,rgba(21,23,26,0),rgba(21,23,26,.86));
  }
  .t1-flecha{
    width:44px; height:44px; flex:0 0 auto; border-radius:999px; padding:0;
    border:1px solid rgba(242,194,48,.5); background:rgba(21,23,26,.55);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    color:var(--fuego); font-family:var(--display); font-weight:400; font-size:22px;
    line-height:1; cursor:pointer; display:grid; place-items:center;
  }
  .t1-flecha:active{ background:var(--fuego); color:var(--sobre-fuego); border-color:var(--fuego) }
  .t1-cuenta{
    font-family:var(--display); font-weight:700; font-size:.6875rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--claro-2); font-variant-numeric:tabular-nums;
  }
  .t1-cuenta b{ color:var(--fuego); font-size:.9375rem; margin-right:3px }

  .t1-origen{ margin-bottom:8px }
  .t1-ejemplo{ font-size:.6875rem; line-height:1.35; margin-bottom:10px; max-width:none }
  .t1-ficha h3{ margin-bottom:8px }
  /* La descripción repetía lo que la ficha dice campo por campo. */
  .t1-desc{ display:none }

  /* Seis campos en dos columnas: etiqueta encima, valor debajo. De 279 a 132. */
  .t1-datos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px }
  .t1-datos div{ display:block; padding:8px 0; align-items:stretch }
  .t1-datos dt{ font-size:.6875rem; line-height:1.25; color:var(--claro-2) }
  .t1-datos dd{ text-align:left; font-size:.8125rem; line-height:1.25; margin-top:2px }
  .t1-ficha .accion{ margin-top:16px; padding:15px 26px }

  /* La ficha del trabajo va enmarcada, igual que el formulario de cotización:
     es el bloque de datos de la sección y tenía el mismo problema de no
     distinguirse de lo que hay alrededor. */
  #trabajos .t1-ficha{
    background:var(--negro-2); border:1px solid rgba(242,194,48,.30);
    border-radius:16px; padding:16px 16px 20px;
    box-shadow:0 18px 40px -30px rgba(0,0,0,.9);
  }
  #trabajos .t1-datos{ border-top-color:rgba(255,255,255,.14) }
  #trabajos .t1-datos div{ border-bottom-color:rgba(255,255,255,.14) }

  /* El rótulo a la izquierda y «Ver todos» pegado a él, no en el borde
     derecho: ahí es donde vive el botón flotante y le tapaba la flecha. */
  .t1-galeria{ margin-top:16px; padding-top:12px; gap:10px 14px;
    grid-template-columns:auto minmax(0,1fr); align-items:center }
  .t1-rot{ font-size:.625rem }
  .t1-rot b{ font-size:.8125rem }
  .t1-rot span{ display:inline; margin-left:8px }
  .t1-tiras{ padding-bottom:4px; gap:8px }
  .t1-tiras button{ width:66px; height:48px }
  /* «Ver todos» tenía borde discontinuo —que en este sistema significa «falta
     algo aquí»— y quedaba pegado al borde derecho, justo debajo del botón
     flotante, que le tapaba la flecha. Filete sólido y a la izquierda. */
  .t1-todos{
    padding:13px 18px; font-size:.625rem; justify-self:start; grid-column:2;
    border-style:solid; border-color:rgba(242,194,48,.45); gap:10px;
  }
  .t1-todos:hover{ background:rgba(242,194,48,.10); border-color:var(--fuego) }

/* ===========================================================================
   3 · HOME · 02 TRES RUTAS
   Cuatro puertas apiladas de 320 px eran 1.280: cuatro quintas partes de la
   sección. Pasan a una fila que se desliza, con el mismo patrón que ya usa la
   tira de trabajos. Ninguna puerta pierde nada.
   =========================================================================== */

  #tres-rutas{ padding-top:26px; padding-bottom:22px }
  #tres-rutas .barra-sec{ margin-bottom:14px; padding-bottom:10px }
  #tres-rutas .fila-sec .d2{ font-size:1.6rem; line-height:1.06 }

  .puertas.p3-rutas{
    display:grid; grid-auto-flow:column; grid-auto-columns:82%;
    grid-template-columns:none; gap:12px;
    margin-top:18px; padding:0 var(--pad) 4px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
  }
  .puertas.p3-rutas::-webkit-scrollbar{ display:none }
  .puertas.p3-rutas .puerta{
    aspect-ratio:auto; min-height:290px; scroll-snap-align:start; border-radius:14px;
  }
  .puerta .texto{ padding:20px 18px 14px }
  .puerta .sub{ margin-top:6px; font-size:.78125rem; line-height:1.4 }

  /* El botón deja de ser una píldora amarilla del ancho de la tarjeta y pasa
     a enlace con filete: el mismo gesto que «Conocer la planta →». Sigue
     siendo el área táctil entera de la tarjeta la que lleva a WhatsApp. */
  .p3-btn, .p3-btn2{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; margin-top:16px; padding:12px 0 10px;
    background:none; border:0; border-bottom:1px solid var(--fuego);
    border-radius:0; color:var(--fuego);
    font-family:var(--display); font-weight:700; font-size:.75rem;
    letter-spacing:.16em; text-transform:uppercase;
  }
  .p3-btn::after, .p3-btn2::after{ content:'→'; font-size:1rem; line-height:1 }
  .puerta:hover .p3-btn, .puerta:focus-visible .p3-btn,
  .p3-alq:hover .p3-btn2{ background:none; color:#fff; border-bottom-color:#fff }

  #tres-rutas .p3-desliza{
    display:block; margin:10px 0 0; font-family:var(--display); font-weight:700;
    font-size:.625rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--tinta-3);
  }

/* ===========================================================================
   4 · HOME · 03 SERVICIOS
   Solo el nombre, centrado y en versalitas. Sin descripción.
   =========================================================================== */

  #servicios{ padding-top:30px; padding-bottom:26px }
  #servicios .barra-sec{ margin-bottom:14px; padding-bottom:10px }
  #servicios .fila-sec .d2{ font-size:1.5rem; line-height:1.06 }
  #servicios .p4-lede{ font-size:.8125rem; line-height:1.35; margin-top:8px; max-width:none }

  .p4-tejas{ gap:10px; margin-top:16px }
  .p4-tejas .teja{ aspect-ratio:auto; min-height:96px }
  /* La regla base reparte la rejilla con `justify-content:space-between`, y eso
     dejaba la columna implícita al ancho del texto y pegada a la izquierda:
     «Granallado» salía 23 px descentrado y «Escoriado» 31 px. Se declara una
     columna que ocupa todo el ancho y el texto se centra dentro de ella. */
  .p4-tejas .rotulo-teja{
    position:absolute; inset:0; display:grid;
    grid-template-columns:minmax(0,1fr);
    justify-content:stretch; align-content:center; justify-items:stretch;
    text-align:center; padding:12px;
  }
  .p4-tejas .rotulo-teja b{
    width:100%; text-align:center;
    font-size:.8125rem; line-height:1.16; letter-spacing:.04em;
    text-transform:uppercase; text-wrap:balance;
  }
  .p4-sub{ display:none }
  .p4-tejas .rotulo-teja .flecha{ display:none }
  .p4-tejas .teja.llamada{ padding:12px; justify-content:center; align-items:center; text-align:center }
  .p4-tejas .teja.llamada b{ font-size:.8125rem; letter-spacing:.04em; text-transform:uppercase; max-width:14ch }
  .p4-tejas .teja.llamada .ir{ font-size:.5625rem }

  /* Los avisos de producción salen del camino del título. En escritorio siguen. */
  .p4-tejas .aviso-foto{ display:none }
  /* Con el texto centrado sobre la foto, el degradado pasa a un velo parejo:
     el peor píxel bajo la letra sube de 2,0 a más de 4,5. */
  .p4-tejas .teja::after{
    background:linear-gradient(180deg,rgba(21,23,26,.40),rgba(21,23,26,.58));
  }

/* ===========================================================================
   5 · HOME · 05 CONTROL Y NORMAS
   =========================================================================== */

  #control{ padding-top:26px; padding-bottom:26px }
  #control .cab{ margin-bottom:16px }
  /* «Qué grado necesitas» va en su propio cuadro: es una unidad —titular,
     tabla y salida a los certificados— y flotaba sobre el fondo sin límites. */
  #control > .wrap:last-child{
    background:var(--negro-2); border:1px solid rgba(242,194,48,.30);
    border-radius:16px; padding:18px 14px 16px; margin:22px var(--pad) 0;
    width:auto; box-shadow:0 18px 40px -30px rgba(0,0,0,.9);
  }
  #control h3.d3{ margin-top:0!important; margin-bottom:12px!important; font-size:1.25rem }
  #control > .wrap:last-child > p{ margin-bottom:0 }
  #control .accion{ padding:14px 0 0 }
  #control .tabla-min th{ padding-top:0 }

  .dupla{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px }
  .dupla figcaption{
    position:static; padding:9px 11px 11px; background:var(--negro-2);
    font-size:.625rem; line-height:1.3;
  }
  .dupla figcaption b{ font-size:.5625rem; margin-bottom:4px }

/* ===========================================================================
   6 · COTIZACIÓN  (la home y las diez páginas interiores)
   La vía rápida va primero y el formulario va enmarcado: es la razón de ser
   de la sección y tenía encima un bloque de datos que le robaba el foco.
   =========================================================================== */

  #cotizar{ padding-top:26px; padding-bottom:26px }
  #cotizar .cab{ margin-bottom:16px }
  /* El titular en un solo renglón. Se quita el <br> del marcado y se ajusta el
     cuerpo para que «Cuéntanos qué hay que proteger» entre en una línea también
     a 360 px: medido, 304 px de texto contra 320 px disponibles. */
  #cotizar .cab .d2{ font-size:clamp(1rem,4.8vw,1.25rem); line-height:1.15 }
  #cotizar .cab .d2 br{ display:none }

  #cotizar .cot-dos{ gap:18px; display:flex; flex-direction:column }
  #cotizar .cot-lado{ order:-1; border-top:0; border-left:0; padding:0 }
  /* «O más rápido» sobraba: los dos botones se explican solos y el rótulo
     obligaba a leer una línea antes de poder tocar. */
  #cotizar .cot-lado > .micro{ display:none }
  /* Los dos canales, como dos botones iguales: WhatsApp relleno y teléfono
     de línea. Antes el teléfono era un enlace de texto y no se leía como algo
     que se pudiera tocar. */
  #cotizar .cot-lado .accion{
    margin-top:10px; padding:16px 20px; width:100%;
    justify-content:center; border-radius:var(--r-btn,999px);
  }
  #cotizar .cot-tel{
    border:1px solid var(--fuego); color:var(--fuego);
    letter-spacing:.08em; gap:10px;
  }
  #cotizar .cot-tel:active{ background:var(--fuego); color:var(--sobre-fuego) }
  #cotizar .cot-tel .flecha{ display:none }
  #cotizar .cot-tel .cot-tel-et{ display:inline }
  #cotizar .cot-datos{
    margin-top:16px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:16px;
  }
  #cotizar .cot-datos > div{ display:block; padding:8px 0 }
  #cotizar .cot-datos dt{ font-size:.6875rem; line-height:1.25 }
  #cotizar .cot-datos dd{ text-align:left; font-size:.8125rem; line-height:1.25; margin-top:2px }
  #cotizar .cot-lado > p:last-child{ font-size:.75rem; margin-bottom:0 }

  /* El marco del formulario */
  #cotizar form{
    order:1; background:var(--negro-2);
    border:1px solid rgba(242,194,48,.34); border-radius:16px;
    padding:20px 18px 22px; box-shadow:0 18px 40px -28px rgba(0,0,0,.9);
  }
  #cotizar form::before{
    content:'Déjanos tus datos';
    display:block; margin-bottom:16px; padding-bottom:12px;
    border-bottom:1px solid var(--hair);
    font-family:var(--display); font-weight:700; font-size:.6875rem;
    letter-spacing:.18em; text-transform:uppercase; color:var(--fuego);
  }
  #cotizar .campo{ margin-bottom:14px }
  #cotizar .campo label{ margin-bottom:4px; font-size:.625rem }
  #cotizar .campo input,#cotizar .campo select{ padding:12px 0; min-height:44px }
  #cotizar .campo textarea{ min-height:66px; padding:10px 0 }
  #cotizar .dos{ gap:0 16px; grid-template-columns:repeat(2,minmax(0,1fr)) }
  #cotizar form .accion{ padding:16px 30px; width:100%; justify-content:center }

/* ===========================================================================
   7 · PIE  (las doce páginas)
   Desplegables. Necesita marcado: cada <h4>+<ul> envuelto en
   <details class="pie-des" open><summary><h4>…</h4></summary><ul>…</ul></details>
   y dos líneas de JS que quitan `open` solo por debajo de 768 px. Sin JS, y en
   escritorio, el pie se ve exactamente como hoy.
   =========================================================================== */

  .pie-sitio{ padding:24px 0 16px; font-size:.875rem }
  .pie-cols{ gap:0 }
  .pie-sitio .pie-cols > div:first-child{ margin-bottom:14px }
  .pie-sitio .pie-cols > div:first-child p{ margin-bottom:0; line-height:1.45 }
  .pie-sitio h4{ margin-bottom:2px }
  .pie-sitio li{ margin-bottom:0 }
  .pie-sitio li a{
    display:flex; align-items:center; min-height:44px; line-height:1.2;
    border-bottom:1px solid rgba(255,255,255,.07); overflow-wrap:anywhere;
  }
  .pie-sitio .logo{ min-height:44px; align-items:center }
  .pie-sitio .pie-wa{
    margin-top:14px; width:100%; justify-content:center;
    border-radius:var(--r-btn,999px);
  }
  .legal{ margin-top:14px; padding-top:12px; gap:2px; font-size:.6875rem }

  .pie-des > summary{
    list-style:none; cursor:pointer; display:flex; align-items:center;
    justify-content:space-between; min-height:48px;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .pie-des > summary::-webkit-details-marker{ display:none }
  .pie-des > summary h4{ margin:0 }
  .pie-des > summary::after{ content:'+'; color:var(--fuego); font-size:1.25rem; line-height:1 }
  .pie-des[open] > summary::after{ content:'–' }
  .pie-des[open] > ul{ padding:4px 0 10px }
  /* Cuando el desplegable está abierto, los enlaces siguen en dos columnas. */
  .pie-sitio ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px }
  .pie-sitio .pie-cols > div:last-child ul{ grid-template-columns:minmax(0,1fr) }

/* ===========================================================================
   8 · PÁGINAS INTERIORES
   Mismo criterio: primero aire, después repetición, los datos nunca.
   Aquí no hay ids: son las clases del sistema, así que alcanza a las once
   páginas de servicio, maquinaria y proyectos a la vez.
   =========================================================================== */

  /* Ritmo vertical de todos los bloques */
  .bloque{ padding:30px 0 }
  .bloque-corto{ padding:24px 0 }
  .cab{ margin-bottom:16px; gap:12px }
  .cab .d2{ font-size:1.5rem; line-height:1.06 }
  .cab .lede{ margin-top:10px!important; font-size:.9375rem; line-height:1.45 }
  .cab .d3{ font-size:1.25rem }

  /* Encabezado de página interior */
  .portada.interior{ min-height:0 }
  .portada.interior .wrap{ padding-top:84px; padding-bottom:30px }
  .portada.interior .d1{ font-size:1.95rem; line-height:1.04; max-width:16ch }
  .portada.interior .lede{ font-size:.9375rem; line-height:1.45; margin-top:12px!important; max-width:40ch }
  .portada.interior .miga{ font-size:.75rem }
  /* La miga es un objetivo táctil real. El relleno le da 44 px de alto sin
     mover un píxel de la maquetación, porque se compensa con margen negativo. */
  .miga a{ display:inline-block; padding:14px 0; margin:-14px 0 }
  /* Los «XXXX» y los datos pendientes no pueden ir en una sola línea: a 360 px
     desbordaban la página en la ficha de Servicio en Planta. */
  .pdte{ white-space:normal; overflow-wrap:anywhere }
  .portada-acciones{ gap:10px; margin-top:20px }
  .portada.interior .accion{ padding:16px 22px; font-size:.78125rem }
  .portada.interior .promesa{ margin-top:14px; font-size:.8125rem }
  .brief-foto{ margin-top:22px; font-size:.75rem }
  .brief-foto span{ font-size:.75rem }

  /* Cintas de cifras de las páginas interiores: mismo problema que la
     portada, pero aquí los datos sí se leen porque están en su contexto.
     Se compactan, no se quitan. */
  .cifra{ padding:14px 12px 14px 0 }
  .cifra b{ font-size:1.375rem }
  .cifra span{ font-size:.75rem; margin-top:5px; line-height:1.35 }

  /* Lista editorial de servicios y de pasos de proceso */
  .serv{ grid-template-columns:32px minmax(0,1fr); gap:12px; padding:14px 0 }
  .serv h3{ font-size:1.0625rem }
  .serv .qué{ font-size:.8125rem; line-height:1.4 }
  .serv .idx{ font-size:.625rem }

  /* Preguntas frecuentes */
  .faq summary{ padding:15px 0; font-size:1rem; min-height:52px; gap:14px }
  .faq .resp{ font-size:.875rem; line-height:1.5; padding-bottom:15px }

  /* Fichas técnicas: etiqueta encima, valor debajo, en dos columnas */
  .ficha{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px }
  .ficha > div{ display:block; padding:9px 0 }
  .ficha dt{ font-size:.6875rem; line-height:1.25 }
  .ficha dd{ text-align:left; font-size:.8125rem; line-height:1.25; margin-top:2px }

  /* Qué incluye y qué no */
  .incluye{ gap:20px }
  .incluye li{ padding:9px 0 9px 20px; font-size:.875rem; line-height:1.4 }
  .incluye h3{ margin-bottom:8px }

  /* Rejilla de trabajos y de equipos: dos columnas en vez de una */
  .trabajos{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .trabajo .info{ padding:26px 12px 12px }
  .trabajo h3{ font-size:.875rem }
  .trabajo p{ font-size:.625rem }
  .equipo .cuerpo{ padding:16px 16px 18px }
  .equipo h3{ font-size:1.0625rem }
  .equipo p{ font-size:.8125rem; margin-bottom:12px }
  .equipo .dato{ font-size:.625rem; padding-top:12px }

  /* Banda de imagen a sangre */
  .banda{ min-height:300px }
  .banda .wrap{ padding-top:30px; padding-bottom:30px }
  .banda .d2{ font-size:1.5rem }
  .banda .lede{ font-size:.9375rem; line-height:1.45 }

  /* Rejilla de proyectos */
  .pr-rejilla{ gap:10px }

  /* Notas laterales y tablas */
  .nota-lateral{ padding-left:16px }
  .nota-lateral p{ font-size:.875rem; line-height:1.45 }
  .scroll-x{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
  }
  /* Con la tabla dentro del cuadro, las cinco columnas tienen que caber:
     se aprieta el relleno lateral en vez de esconder una columna. */
  .tabla-min th,.tabla-min td{ padding-right:8px }
  .tabla-min td{ font-size:.8125rem }
  .tabla-min th{ font-size:.5625rem; letter-spacing:.12em }

/* ===========================================================================
   9 · TRANSVERSAL
   =========================================================================== */

  /* Redondo de verdad —círculo, no cuadrado con esquinas— y sin el halo oscuro
     que le dibujaba un rectángulo alrededor sobre las fotos claras. */
  .wa{
    right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    width:54px; height:54px; border-radius:50%;
    box-shadow:0 6px 18px rgba(0,0,0,.30), 0 0 0 3px rgba(21,23,26,.16);
  }
  .wa svg{ width:27px; height:27px }

  /* La barra, al hacer scroll, en negro sólido: la veladura translúcida dejaba
     leer el texto de debajo y ensuciaba el logotipo. */
  .top.fija{
    background:var(--negro);
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .top .top-in{ padding-top:10px; padding-bottom:10px }
  .top .top-in > .logo{ min-height:44px; align-items:center }
  .abrir{ min-height:44px; padding:0 4px; display:inline-flex; align-items:center }
  /* El panel de menú se cortaba por abajo con la barra de Safari puesta:
     el último elemento, «WhatsApp», quedaba debajo. */
  /* El panel llevaba 8 destinos y el pie 14: faltaban Escoriado y
     Recubrimientos especiales. Con los diez servicios más el teléfono y el
     WhatsApp, la lista tiene que apretarse para caber sin desplazamiento. */
  .panel{ padding:66px var(--pad) calc(20px + env(safe-area-inset-bottom, 0px)) }
  .panel a{ font-size:1.125rem; padding:9px 0; letter-spacing:-.01em }
}


/* ===========================================================================
   LUAL · TEXTOS 05-09-2026 — reglas de apoyo
   ---------------------------------------------------------------------------
   Cinco neutralizadores (fuera del bloque de móvil, para que el escritorio vea
   el marcado nuevo exactamente como veía el viejo) y su contraparte de móvil.
   Ni un token, ni una escala, ni un radio, ni una regla de maquetación de
   escritorio tocados.
   =========================================================================== */
.cine-chip{ display:none }
.lede-mov{ display:none }
.puerta .texto b.p3-t-mov{ display:none }
.puerta .texto .sub.p3-s-mov{ display:none }
.t1-apoyo{ display:none }

/* Bajada de la 02 y banner de escritorio: texto nuevo, con el ritmo del sistema */
.p3-lede{ margin-top:var(--s5); max-width:66ch }
.p3-banner{
  margin:var(--s6) 0 0; padding:12px 16px; border-left:2px solid var(--fuego);
  background:rgba(242,194,48,.08); border-radius:0 var(--r-caja) var(--r-caja) 0;
  font-family:var(--display); font-weight:600; font-size:.8125rem;
  letter-spacing:.02em; color:var(--tinta);
}
.t1-lede{ margin-top:var(--s5); max-width:66ch }
.t5-lede{ margin-top:var(--s4); margin-bottom:var(--s5) }
.cifras-05{ margin-top:var(--s5) }
.q-br{ display:none }   /* los tres renglones exactos son solo de celular */
.p4-llamada-sub{
  display:block; margin-top:8px; font-family:var(--cuerpo); font-weight:400;
  font-size:.8125rem; line-height:1.35; letter-spacing:0; text-transform:none;
  color:rgba(21,23,26,.72); max-width:26ch;
}

@media (max-width:767px){
  /* El chip único de la portada. Revierte, solo para este dato, la salida de
     la cinta del 04-09: un chip no es la cinta de cuatro datos. */
  .cine-chip{
    display:inline-flex; align-items:center; margin:14px 0 0; padding:8px 14px;
    border:1px solid rgba(242,194,48,.55); border-radius:999px;
    font-family:var(--display); font-weight:700; font-size:.6875rem;
    letter-spacing:.1em; text-transform:uppercase; color:var(--fuego);
  }
  /* El chip y la bajada de dos líneas se pagan con el aire de abajo: la
     portada vuelve a los 680 px de pantalla limpia sin perder ningún dato. */
  .actos{ padding-top:78px; padding-bottom:62px }
  .lede-esc{ display:none }
  .lede-mov{ display:inline }
  .puerta .texto b.p3-t-esc{ display:none }
  .puerta .texto b.p3-t-mov{ display:block }
  .puerta .texto .sub.p3-s-esc{ display:none }
  .puerta .texto .sub.p3-s-mov{ display:block }
  /* El banner de la 02 es solo de escritorio: en móvil el dato ya está en el
     rótulo de la sección. */
  .p3-banner{ display:none }
  .p3-lede{ font-size:.8125rem; line-height:1.4; margin-top:10px }
  .t1-lede{ font-size:.8125rem; line-height:1.4; margin-top:8px }
  .t5-lede{ font-size:.8125rem; line-height:1.4 }
  .cifras-05{ display:none }
  .t1-apoyo{
    display:block; margin:10px 0 0; font-size:.75rem; line-height:1.4;
    color:var(--claro-2);
  }
  .p4-llamada-sub{ display:none }
}


/* ===========================================================================
   LUAL · AJUSTES 05-09-2026 — líneas exactas y subrayado amarillo
   =========================================================================== */

/* El subrayado amarillo del titular de la 02, ahora también sin ser enlace.
   Mismo trazo y misma altura que `.p3-m`, para que sea el mismo gesto. */
em.am{
  font-style:normal; color:inherit;
  background-image:linear-gradient(var(--fuego),var(--fuego));
  background-repeat:no-repeat; background-position:0 88%;
  background-size:100% .2em; padding-bottom:.02em;
}
/* Sobre fondo oscuro el amarillo va pleno; sobre claro, también: es un filete,
   no un bloque, así que no cambia el contraste del texto. */

/* ── Portada ─────────────────────────────────────────────────────────────── */
/* El cuerpo del titular NO se toca: queda el de siempre en los dos anchos. */
.cine-titular .h1-a, .cine-titular .h1-b{ display:block }
/* la regla base pinta de amarillo TODO span del titular; el primer renglón
   vuelve a blanco y solo el segundo queda en el acento */
.cine-titular .h1-a{ color:#fff }
.cine-titular .h1-b{ color:var(--fuego) }
/* La bajada en dos líneas y la tercera cifra en una */
.cine-lede{ max-width:none }
.cine-cifras b{ text-wrap:nowrap; white-space:nowrap }

/* ── 01 ──────────────────────────────────────────────────────────────────── */
.t1-lede{ max-width:none }

/* ── 02 ──────────────────────────────────────────────────────────────────── */
.p3-lede{ max-width:none }

/* ── 05 · el marco amarillo también en escritorio ────────────────────────── */
.t5-caja{
  border:1px solid rgba(242,194,48,.42); border-radius:var(--r-caja);
  padding:6px 14px 2px; background:rgba(242,194,48,.045);
}

@media (min-width:768px){
  /* La bajada en dos renglones también a 1440: sin tope se iba a uno solo. */
  .cine-lede{ font-size:clamp(.95rem,1.15vw,1.0625rem); max-width:80ch }
  .cine-cifras b{ font-size:clamp(1.0625rem,1.45vw,1.4375rem) }
  .cine-cifras span{ max-width:34ch }
  /* 01: la bajada entra en un renglón */
  .t1-lede{ font-size:.9375rem; white-space:nowrap }
  /* 02: la bajada entra en un renglón */
  .p3-lede{ font-size:.9375rem; white-space:nowrap }
  /* 03 y 04: dos líneas de titular */
  .p4-h2{ max-width:24ch }
  .banda-h2{ max-width:26ch }
  /* OJO: `.banda` también existe en las páginas interiores (la banda «04 — La
     diferencia» se reutiliza en cuatro de ellas). Cualquier regla suelta sobre
     `.banda` les cambiaría el cuerpo. Se acota por hermano de `.banda-h2`,
     que solo existe en la home. */
  .banda-h2 ~ .lede-claro{ max-width:52ch }
}

@media (max-width:767px){
  /* Portada: «Arenado y pintura industrial» tiene que caber en un renglón
     también a 360 px, que es el peor caso real. */
  /* 01: el titular en dos líneas y la bajada fuera — la ficha de seis campos,
     justo debajo, ya dice lo mismo. */
  #trabajos .fila-sec .d2{ font-size:1.28rem; line-height:1.1; max-width:none }
  .t1-lede{ display:none }
  /* 02 y 03: dos líneas de titular */
  #tres-rutas .fila-sec .d2{ font-size:clamp(1.14rem,5.4vw,1.32rem); line-height:1.12; max-width:none }
  /* El cuerpo del titular de la 03 queda como siempre; lo que sale en celular
     es la bajada. */
  #servicios .p4-lede{ display:none }
  #control .cab .d2{ font-size:1.25rem; line-height:1.12 }
  /* 04 */
  .banda-h2{ font-size:clamp(1.08rem,5.1vw,1.25rem); line-height:1.12; max-width:none;
             font-variation-settings:'wdth' 88 }
  /* 05: aire entre la bajada y la cabecera de la tabla, y tabla sin
     desplazamiento: la cabecera va en dos renglones y las celdas envuelven. */
  /* La cabecera de la tabla (SSPC, NACE…) se pegaba a la bajada. */
  .t5-lede{ margin-bottom:20px }
  #control .t5-caja{ margin-top:22px; overflow-x:visible; padding:10px 12px 4px }
  #control .t5-caja .tabla-min{ min-width:0; width:100%; table-layout:fixed; font-size:.6875rem }
  #control .tabla-min th, #control .tabla-min td{
    padding:8px 4px; white-space:normal; word-break:normal; hyphens:auto;
  }
  #control .tabla-min th:nth-child(1), #control .tabla-min td:nth-child(1){ width:23% }
  #control .tabla-min th:nth-child(2), #control .tabla-min td:nth-child(2){ width:11% }
  #control .tabla-min th:nth-child(3), #control .tabla-min td:nth-child(3){ width:13% }
  #control .tabla-min th:nth-child(4), #control .tabla-min td:nth-child(4){ width:13% }
  #control .tabla-min th:nth-child(5), #control .tabla-min td:nth-child(5){ width:40% }
  /* El CTA de la 05, ahora de una sola línea, se quedaba en 37 px de alto
     táctil. 44 es el mínimo. */
  #control .accion-fuego{ min-height:44px; display:inline-flex; align-items:center }
  /* 03: las ocho tejas al mismo alto, la de llamada incluida */
  .p4-tejas{ grid-auto-rows:104px }
  .p4-tejas .teja{ min-height:104px; height:104px }
  .p4-tejas .teja.llamada{ min-height:104px; padding:10px }
  /* los tres renglones son los del marcado: nowrap impide un cuarto */
  .p4-tejas .teja.llamada b{
    font-size:clamp(.625rem,2.9vw,.75rem); line-height:1.24; max-width:none;
    white-space:nowrap; text-wrap:nowrap;
  }
  .p4-tejas .teja.llamada .q-br{ display:inline }
  .p4-tejas .teja.llamada .ir{ font-size:.5625rem; margin-top:6px }
}


/* ===========================================================================
   EL MENÚ DE CELULAR · Opción A (05-09-2026)
   Todo dentro del panel, que por encima de 767 px es display:none. El
   escritorio no cambia ni un píxel por esto.
   =========================================================================== */
.pn-des > summary{ list-style:none }
.pn-des > summary::-webkit-details-marker{ display:none }

@media (max-width:767px){
  .panel .pn-des{ border-bottom:1px solid var(--hair) }
  .panel .pn-des > summary{
    display:flex; align-items:center; justify-content:space-between; cursor:pointer;
    font-family:var(--display); font-weight:700; font-size:1.125rem;
    letter-spacing:.02em; text-transform:uppercase; color:#fff;
    padding:11px 0; min-height:44px;
  }
  .panel .pn-des > summary::after{
    content:'\25BE'; color:var(--fuego); font-size:.9rem;
    transition:transform .2s ease;
  }
  .panel .pn-des[open] > summary::after{ transform:rotate(180deg) }
  .panel .pn-lista{ padding:2px 0 10px }
  .panel .pn-lista a{
    display:block; font-family:var(--texto); font-weight:400; font-size:.9375rem;
    letter-spacing:0; text-transform:none; color:var(--claro);
    padding:11px 0 11px 14px; border-bottom:0; border-left:2px solid var(--negro-3);
    min-height:44px; line-height:1.4;
  }
  .panel .pn-lista a:active{ border-left-color:var(--fuego); color:#fff }

  /* Las cinco entradas de primer nivel, con el mismo peso que el desplegable */
  .panel > a{ text-transform:uppercase; letter-spacing:.02em }

  /* Teléfono y WhatsApp, separados del bloque de navegación */
  .panel .pn-tel{
    margin-top:14px; border-bottom:0; color:var(--fuego);
    text-transform:none; letter-spacing:-.01em;
  }
  .panel .pn-wa{
    margin-top:8px; border-bottom:0; border-radius:var(--r-btn);
    background:linear-gradient(180deg,var(--btn-a),var(--btn-b));
    color:var(--sobre-fuego, #15171A); text-align:center;
    display:flex; align-items:center; justify-content:center; gap:10px;
    font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
    padding:16px 20px; min-height:52px;
  }
  /* la regla base pinta de amarillo el último enlace del panel; aquí el
     último es un botón relleno y su letra tiene que ser oscura */
  .panel a:last-of-type{ color:var(--sobre-fuego, #15171A) }
}


/* ===========================================================================
   LUAL · DATOS REALES 05-09-2026
   =========================================================================== */

/* Al salir granallado quedan 6 servicios + la tarjeta de llamada = 7 tejas, y
   7 deja la última fila coja en una rejilla de 4 o de 2 columnas. La tarjeta
   de llamada ocupa dos columnas y la rejilla vuelve a cerrar. */
/* En escritorio las tejas llevan `aspect-ratio:1/1`; al ocupar dos columnas,
   la de llamada se convertía en un cuadrado de 638 px y estiraba la sección
   350 px. Ocupando dos columnas hay que soltarle la proporción. */
.p4-tejas .teja.llamada{ grid-column:span 2; aspect-ratio:auto }

/* La cinta de sectores de la 02. Es una lista, no una decoración: dice a qué
   industrias se ha entregado trabajo. */
.p3-sectores{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none;
  margin:var(--s5) 0 0; padding:0;
}
.p3-sectores li{
  font-family:var(--display); font-weight:600; font-size:.6875rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-2);
  border:1px solid rgba(22,34,43,.16); border-radius:var(--r-btn);
  padding:6px 12px;
}

@media (max-width:767px){
  .p3-sectores{ gap:6px; margin-top:12px }
  .p3-sectores li{ font-size:.625rem; letter-spacing:.08em; padding:5px 10px }
}


/* ══ El flotante se aparta cuando ya hay contacto en pantalla ═══════════════
   Decision de Lu, 07-09-2026: opcion B del punto 10.1 del anexo. Medido en la
   Etapa 1: el disco tapaba de forma permanente el correo del pie en las 13
   paginas, y pasaba por encima de 27-29 clicables al desplazarse. El pie ya
   lleva su propio boton de WhatsApp, asi que ahi el flotante no aporta. */
.wa{ transition:opacity .18s ease, transform .18s ease }
.wa.wa-aparte{ opacity:0; transform:scale(.85); pointer-events:none }
@media (prefers-reduced-motion:reduce){ .wa{ transition:none } }