/* Vibrados Navarrete · Portada editorial v35 */
.pg-home{
  --ed-navy:#00172b;
  --ed-navy-2:#06324f;
  --ed-red:#d70000;
  --ed-paper:#f4f7f9;
  --ed-line:#d8e0e6;
  --ed-ink:#061a2d;
  background:#e9eef2;
  overflow-x:hidden;
  overflow-x:clip;
}
.pg-home .hero,.pg-home main>section[id]{position:relative;isolation:isolate}
.pg-home main>section[id]{scroll-margin-top:0}
.pg-home .hero::before,.pg-home main>section[id]::before{
  content:attr(data-editorial-page) "  /  10";position:absolute;z-index:5;top:24px;right:30px;pointer-events:none;
  font:800 10px/1 'Archivo',sans-serif;letter-spacing:.14em;color:rgba(0,23,43,.34)
}
.pg-home .hero::after,.pg-home main>section[id]::after{
  content:attr(data-editorial-label);position:absolute;z-index:5;right:30px;top:42px;pointer-events:none;
  font:700 8px/1 'Archivo',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(0,23,43,.3)
}

/* Portada: misma gramática diagonal de Empresa, conservando el carrusel. */
.pg-home .hero{border-bottom:1px solid rgba(255,255,255,.14);background:var(--ed-navy)}
.pg-home .hero::before,.pg-home .hero::after{
  right:auto;left:28px;color:rgba(255,255,255,.58);writing-mode:vertical-rl;transform:rotate(180deg)
}
.pg-home .hero::after{left:46px;top:24px}
.pg-home .hero-navy{
  width:55%;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(circle at 16% 92%,rgba(215,0,0,.13),transparent 27%),
    radial-gradient(circle at 76% 18%,rgba(34,122,169,.28),transparent 34%),
    linear-gradient(145deg,#001321 0%,#03243c 54%,#00172b 100%);
  clip-path:polygon(0 0,90.9% 0,81.8% 100%,0 100%)
}
.pg-home .hero-navy::before{
  content:'';position:absolute;z-index:0;inset:-22% -10% -18% -18%;pointer-events:none;
  background:
    radial-gradient(ellipse at 30% 48%,rgba(102,211,255,.15),transparent 31%),
    radial-gradient(ellipse at 58% 70%,rgba(215,0,0,.11),transparent 25%);
  filter:blur(20px);opacity:.88;transform:translate3d(-2%,0,0) scale(1.03)
}
.pg-home .hero-navy::after{
  content:'';position:absolute;z-index:0;inset:0;pointer-events:none;
  background:
    linear-gradient(112deg,transparent 16%,rgba(164,224,247,.075) 38%,transparent 56%),
    repeating-linear-gradient(122deg,transparent 0 42px,rgba(132,218,247,.045) 43px 44px);
  opacity:.72;mix-blend-mode:screen
}
.pg-home .hero-navy-texture{z-index:0;opacity:.62}
.pg-home .hero-navy>.hero-content{position:relative;z-index:2}
.pg-home .hero-edge{width:55%;clip-path:none;background:transparent}
.pg-home .hero-media{clip-path:polygon(9.1% 0,100% 0,100% 100%,0 100%)}
.pg-home .hero-media::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)
}
.pg-home .hero-media::before{
  content:'';position:absolute;z-index:5;inset:0 auto 0 0;width:9.4%;pointer-events:none;transform:none;
  background:#d70000;clip-path:polygon(97% 0,100% 0,3% 100%,0 100%);
  box-shadow:none
}
.pg-home .hero-photo-scrim{background:none}
.pg-home .hero-content{padding-left:max(64px,5vw)}
.pg-home .hero-h1-v2{letter-spacing:-.045em}
.pg-home .hero-highlight{letter-spacing:.015em}
.pg-home .hero-sub{max-width:51ch}
.pg-home .hero-photo-caption{
  position:absolute;z-index:7;right:clamp(42px,4vw,70px);bottom:42px;display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:'index title' 'index meta';column-gap:12px;align-items:center;max-width:330px;padding:11px 14px;
  border-left:2px solid var(--ed-red);background:rgba(0,23,43,.72);box-shadow:0 12px 28px rgba(0,23,43,.2);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);color:#fff;pointer-events:none
}
.pg-home .hero-photo-caption-index{grid-area:index;font:900 11px/1 'Archivo',sans-serif;color:#ff3434;letter-spacing:.04em}
.pg-home .hero-photo-caption strong{grid-area:title;font:800 11px/1.15 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.04em}
.pg-home .hero-photo-caption>span:last-child{grid-area:meta;margin-top:3px;font:500 9px/1.25 'Archivo',sans-serif;color:rgba(255,255,255,.66)}
.pg-home .trust{position:relative;z-index:4;margin:0;border-top:1px solid rgba(255,255,255,.12);background:linear-gradient(90deg,#00172b,#062e49 50%,#00172b)}
.pg-home .trust-inner{max-width:1500px}
/* El boton grande "PAUSAR" (.hero-motion-toggle) se retiro por pedido del
   cliente. Su CSS se elimina para que ese diseno no pueda reaparecer: el
   control de pausa vive ahora en .hero-pause, integrado en la tira de
   controles del banner. */
.pg-home .hero.is-carousel-paused .hp-dot-fill{animation-play-state:paused!important}

@media (prefers-reduced-motion:no-preference){
  .pg-home .hero-navy::before{animation:heroArchitecturalGlow 8.5s ease-in-out infinite alternate}
  .pg-home .hero-navy::after{animation:heroLightSweep 11s ease-in-out infinite}
  @keyframes heroArchitecturalGlow{
    0%{opacity:.68;transform:translate3d(-3%,1%,0) scale(1.02)}
    100%{opacity:1;transform:translate3d(3%,-1%,0) scale(1.08)}
  }
  @keyframes heroLightSweep{
    0%,20%{background-position:-180px 0,0 0;opacity:.48}
    58%,100%{background-position:520px 0,0 0;opacity:.78}
  }
}
.pg-home #proyectos .rp-title em{font-style:normal;color:var(--ed-red)}

@media (min-width:1101px){
  .pg-home main>section[id]{
    display:flex;align-items:stretch;min-height:calc(100svh - 68px);padding:14px 28px!important;scroll-margin-top:0;
    background:linear-gradient(118deg,rgba(0,23,43,.018) 0 1px,transparent 1px 52px),#e9eef2
  }
  .pg-home main>section[id]>.wrap{
    position:relative;width:100%;max-width:1500px;min-height:calc(100svh - 96px);margin:auto;
    padding:clamp(30px,3vw,48px) clamp(32px,3.3vw,54px);overflow:hidden;border:1px solid rgba(0,23,43,.13);
    border-top:3px solid var(--ed-red);border-radius:2px;background:rgba(250,252,253,.97);box-shadow:0 22px 55px rgba(0,23,43,.09)
  }
  .pg-home main>section[id]::before{top:34px;right:54px}
  .pg-home main>section[id]::after{top:51px;right:54px}
  .pg-home #soluciones>.wrap,.pg-home #camaras>.wrap,.pg-home #medida>.wrap,.pg-home #proceso>.wrap,
  .pg-home #proyectos>.wrap,.pg-home #opiniones>.wrap,.pg-home #faq>.wrap{display:flex;flex-direction:column;justify-content:center}
  .pg-home #soluciones .sol-head,.pg-home #proyectos .rp-head,.pg-home #opiniones .rvw-head{padding-bottom:20px;border-bottom:1px solid var(--ed-line)}
  .pg-home #soluciones .sol-card,.pg-home #soluciones .sol-cta{height:clamp(390px,49vh,470px)}
  .pg-home #camaras .ce-top{grid-template-columns:minmax(390px,.82fr) minmax(560px,1.18fr)}
  .pg-home #camaras .ce-photo-main{height:clamp(300px,37vh,380px)}
  .pg-home #camaras .ce-families{margin-top:16px;gap:10px}
  .pg-home #camaras .ce-family{padding:12px 14px 11px;gap:16px}
  .pg-home #camaras .ce-family-info h3{font-size:16px}
  .pg-home #camaras .ce-family-scale{padding-left:14px}
  .pg-home #camaras .ce-family-chart-bars{gap:8px}
  .pg-home #camaras .ce-family-chart-arrow b{font-size:5.5px}
  .pg-home #camaras .ce-proof{margin-top:16px;padding-top:12px}

  .pg-home #medida>.wrap{
    background:repeating-linear-gradient(116deg,transparent 0 48px,rgba(255,255,255,.025) 49px 50px),linear-gradient(145deg,#00172b,#073654);
    color:#fff;border-color:rgba(255,255,255,.14)
  }
  .pg-home #medida::before,.pg-home #medida::after,.pg-home #proceso::before,.pg-home #proceso::after{color:rgba(255,255,255,.42)}
  .pg-home #medida .sm-title,.pg-home #medida .sm-title em,.pg-home #medida .sm-cap h3,.pg-home #medida .sm-intro,.pg-home #medida .sm-cap p{color:#fff}
  .pg-home #medida .sm-intro,.pg-home #medida .sm-cap p{color:rgba(255,255,255,.72)}
  .pg-home #medida .sm-capabilities{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.045)}
  .pg-home #medida .sm-cap{border-color:rgba(255,255,255,.14)}
  .pg-home #medida .sm-example{background:#fff}
  .pg-home #medida .sm-process{border:1px solid rgba(255,255,255,.14)}

  /* #contacto: cierre editorial "puente de cotizacion" -- misma superficie */
  /* navy que #medida, contenido comprensible sin scroll en ~1290x912. */
  .pg-home #contacto>.wrap{
    background:linear-gradient(145deg,#00172b,#062843);color:#fff;border-color:rgba(255,255,255,.14);
    display:grid;align-items:center
  }

  /* La página "A medida" concentra la evidencia y el contacto. El recorrido
     repetido vive en la página siguiente, dedicada al proceso. */
  .pg-home #medida>.wrap{min-height:calc(100svh - 96px);height:calc(100svh - 96px);justify-content:center}
  .pg-home #medida .sm-top{height:min(540px,calc(100svh - 205px));min-height:500px;align-items:stretch}
  .pg-home #medida .sm-left{height:100%;display:flex;flex-direction:column;justify-content:center}
  .pg-home #medida .sm-photos{height:100%;min-height:0}
  .pg-home #medida .sm-example{height:100%;min-height:0}
  .pg-home #medida .sm-example-media{aspect-ratio:auto}
  .pg-home #medida .sm-example-strip{height:92px;min-height:92px}
  .pg-home #medida .sm-example-strip figure,.pg-home #medida .sm-example-strip img{min-height:90px;max-height:90px}
  .pg-home #medida .sm-process{display:none}
  .pg-home #medida .sm-final-cta{margin-top:12px;min-height:72px}

  .pg-home #proceso>.wrap{
    background:radial-gradient(circle at 80% 15%,rgba(36,103,144,.23),transparent 34%),
    repeating-linear-gradient(116deg,transparent 0 48px,rgba(255,255,255,.024) 49px 50px),#00172b;
    color:#fff;border-color:rgba(255,255,255,.14)
  }
  .pg-home #proceso .qp-title,.pg-home #proceso .qp-title em,.pg-home #proceso .qp-intro,.pg-home #proceso .qp-pillar h3,.pg-home #proceso .qp-pillar p{color:#fff}
  .pg-home #proceso .qp-intro,.pg-home #proceso .qp-pillar p{color:rgba(255,255,255,.7)}
  .pg-home #proceso .qp-pillars{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
  .pg-home #proceso .qp-pillar{border-color:rgba(255,255,255,.14)}
  .pg-home #proceso .qp-photos{box-shadow:0 22px 48px rgba(0,0,0,.28)}
  .pg-home #proyectos>.wrap{min-height:calc(100svh - 96px);height:calc(100svh - 96px);justify-content:center}
  .pg-home #proyectos .rp-head{margin-bottom:14px;align-items:flex-start}
  .pg-home #proyectos .rp-title{font-size:clamp(34px,3.1vw,43px);line-height:.96;letter-spacing:-.035em}
  .pg-home #proyectos .rp-title em{font-style:normal;color:var(--ed-red)}
  .pg-home #proyectos .rp-head-aside{max-width:300px}
  .pg-home #proyectos .rp-intro{font-size:12.5px;line-height:1.45;margin-bottom:9px}
  .pg-home #proyectos .rp-gallery{height:clamp(290px,34vh,340px)}
  .pg-home #proyectos .rp-case-tag{padding:6px 11px}
  .pg-home #proyectos .rp-case figcaption{padding:18px 20px 15px}
  .pg-home #proyectos .rp-case figcaption strong{font-size:14.5px}
  .pg-home #proyectos .rp-strip{gap:10px}
  .pg-home #proyectos .rp-ctas{margin-top:16px}
  .pg-home #proyectos .rs-integrated{margin-top:14px;padding-top:10px}
  .pg-home #proyectos .rs-eyebrow{margin-bottom:7px}
  .pg-home #proyectos .rs-strip{height:84px}
  .pg-home #proyectos .rs-item{padding:10px 14px}
  .pg-home #proyectos .rs-item p{font-size:10.5px;line-height:1.32}
  .pg-home #opiniones>.wrap{background:linear-gradient(145deg,#f9fbfc,#eef3f7)}
  .pg-home #opiniones .google-review-stage{min-height:clamp(300px,39vh,370px)}
  .pg-home #faq .faq-grid{align-items:center}
  .pg-home #faq .faq-left{padding-right:clamp(20px,4vw,60px)}
  .pg-home #faq .faq-right{background:#fff;border:1px solid var(--ed-line);box-shadow:0 18px 42px rgba(0,23,43,.07)}
  .pg-home #faq .faq-close{margin:0;border-width:1px 0 0}
  .pg-home #contacto .qc-left,.pg-home #contacto .qc-right{min-height:calc(100svh - 96px)}
  .pg-home #contacto .qc-left-inner,.pg-home #contacto .qc-right{display:flex;flex-direction:column;justify-content:center}
  .pg-home footer{min-height:calc(100svh - 68px);display:flex;align-items:center}
  .pg-home footer>.foot-inner{width:100%}
}

/* ============================================================ */
/* #proyectos · pantallas BAJAS de escritorio (>=1101 x <850)     */
/* ------------------------------------------------------------ */
/* Defecto PREEXISTENTE detectado al auditar la matriz de QA del  */
/* 2026-08-24, no introducido por el modo compacto:               */
/* a 1366x768, 1151x768 y 1150x768 el .wrap de #proyectos mide    */
/* calc(100svh - 96px) = 672 px y su contenido necesita 676,3 px  */
/* (156,3 cabecera + 14 + 290 galeria + 14 + 142 respaldo + 16 +  */
/* 44 CTAs). Con justify-content:center el sobrante se reparte    */
/* arriba y abajo, y como el .wrap lleva overflow:hidden, el      */
/* epigrafe "EVIDENCIA REAL · FABRICACION Y APLICACIONES" quedaba */
/* cortado 6,1 px por el borde superior (medido: .rp-head arranca */
/* en y=64,1 y el borde del .wrap en y=70,2).                     */
/* Se recuperan 22 px ajustando solo respiros -- ni un texto      */
/* cambia de tamano, ni se oculta nada.                           */
/* ============================================================ */
@media (min-width:1101px) and (max-height:849px){
  .pg-home #proyectos .rp-head{margin-bottom:8px;padding-bottom:14px}
  .pg-home #proyectos .rs-integrated{margin-top:10px;padding-top:8px}
  .pg-home #proyectos .rp-ctas{margin-top:12px}
}

/* ============================================================ */
/* #proyectos · MODO COMPACTO 901-1100 px   (2026-08-24)         */
/* ------------------------------------------------------------ */
/* Tramo ciego entre los dos modos que ya existian:               */
/*   >=1101 px -> presentacion por paginas (100svh por seccion)   */
/*   <=900  px -> apilado a una columna (index.html)              */
/* En medio, #proyectos quedaba en dos columnas sin altura        */
/* definida y crecia hasta 2323 px a 1024x768 (tarjeta principal  */
/* de 548 x 1494 px). La causa exacta esta documentada en         */
/* section-layout.css, sobre el bloque @media (max-width:900px)   */
/* de #proyectos.                                                 */
/*                                                                */
/* Aqui NO se aplica ningun max-height ni overflow:hidden: la      */
/* altura se DERIVA del viewport (svh) igual que en el modo de     */
/* pantalla completa, y todos los hijos de grid/flex llevan        */
/* min-width:0 / min-height:0 para que el minimo automatico no     */
/* reintroduzca el desbordamiento.                                */
/* Composicion: cabecera en una fila · caso a la izquierda · tres  */
/* evidencias a la derecha · franja de respaldo · CTA al pie.      */
/* ============================================================ */
@media (min-width:901px) and (max-width:1100px){
  /* La seccion mide EXACTAMENTE una pantalla y el .wrap toma su caja de
     contenido con height:100%. Asi el padding vertical de la seccion
     (12px !important, definido mas abajo en este mismo archivo) entra en
     la cuenta solo, sin numeros magicos que se desincronicen. */
  .pg-home main>section#proyectos{
    min-height:100svh;
    height:100svh;
    box-sizing:border-box;
  }
  .pg-home #proyectos>.wrap{
    display:flex;flex-direction:column;justify-content:center;
    gap:clamp(11px,2.6svh,26px);
    height:100%;
    min-height:0;
    padding:clamp(13px,2svh,22px) clamp(18px,2.2vw,26px);
    box-sizing:border-box;
  }
  .pg-home #proyectos>.wrap>*{min-width:0;min-height:0}

  /* --- cabecera compacta en una fila --- */
  .pg-home #proyectos .rp-head{
    display:grid;grid-template-columns:minmax(0,1.12fr) minmax(262px,.88fr);
    align-items:center;gap:clamp(18px,2.4vw,30px);margin:0;flex:0 0 auto;
  }
  .pg-home #proyectos .rp-eyebrow{margin-bottom:6px}
  .pg-home #proyectos .rp-title{margin:0;font-size:clamp(26px,3.1vw,34px);line-height:.98;letter-spacing:-.03em}
  .pg-home #proyectos .rp-head-aside{max-width:none;padding:10px 13px 9px}
  .pg-home #proyectos .rp-intro{margin:0 0 7px;font-size:11.5px;line-height:1.4;max-width:none}
  .pg-home #proyectos .rp-proofs{gap:4px 13px}
  .pg-home #proyectos .rp-proofs li{font-size:9.5px;padding-left:11px}

  /* --- galeria: caso + tres evidencias, altura desde el viewport --- */
  /* A 1024x768 da 546 x 307 px en el caso principal = 1,78:1 (16:9). */
  .pg-home #proyectos .rp-gallery{
    flex:0 0 auto;display:grid;
    grid-template-columns:1.45fr 1fr;
    grid-template-rows:minmax(0,1fr);
    gap:12px;align-items:stretch;
    height:clamp(232px,42svh,364px);
  }
  .pg-home #proyectos .rp-case,
  .pg-home #proyectos .rp-strip,
  .pg-home #proyectos .rp-strip-item{min-width:0;min-height:0}
  .pg-home #proyectos .rp-strip{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:repeat(3,minmax(0,1fr));
    gap:10px;height:100%;
  }
  .pg-home #proyectos .rp-case img,
  .pg-home #proyectos .rp-strip-item img{height:100%;min-height:0}
  .pg-home #proyectos .rp-case-tag{padding:5px 9px}
  .pg-home #proyectos .rp-case figcaption{padding:14px 16px 12px}
  .pg-home #proyectos .rp-case-cat{margin-bottom:3px;font-size:10.5px}
  .pg-home #proyectos .rp-case figcaption strong{font-size:13.5px}
  .pg-home #proyectos .rp-strip-item figcaption{padding:8px 11px}

  /* --- franja de respaldo resumida: cuatro columnas en una fila --- */
  .pg-home #proyectos .rs-integrated{
    flex:0 0 auto;margin:0;
    padding:clamp(8px,1.2svh,12px) 0 0;
    border-top:1px solid #d8dee4;
  }
  .pg-home #proyectos .rs-eyebrow{margin-bottom:7px}
  .pg-home #proyectos .rs-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pg-home #proyectos .rs-item{padding:9px 11px;gap:9px}
  .pg-home #proyectos .rs-num{font-size:20px}
  .pg-home #proyectos .rs-item h3{font-size:11.5px;line-height:1.15}
  .pg-home #proyectos .rs-item p{font-size:9.5px;line-height:1.3}
  .pg-home #proyectos .rs-item>svg{width:19px;height:19px;flex:0 0 19px}

  /* --- CTA al pie de la misma pantalla --- */
  .pg-home #proyectos .rp-ctas{flex:0 0 auto;margin:0;gap:10px 20px}
  .pg-home #proyectos .rp-cta-main{padding:10px 16px;font-size:11.5px}
  .pg-home #proyectos .rp-cta-sec{font-size:12px}
}

/* Viewports bajos dentro del tramo compacto (p. ej. 1024x600):
   se ajustan galeria y respiros, nunca se oculta contenido. */
@media (min-width:901px) and (max-width:1100px) and (max-height:700px){
  .pg-home #proyectos .rp-title{font-size:clamp(22px,2.6vw,27px)}
  .pg-home #proyectos .rp-head-aside{padding:8px 11px 7px}
  .pg-home #proyectos .rp-intro{margin-bottom:5px;font-size:11px}
  .pg-home #proyectos .rp-gallery{height:clamp(190px,35svh,240px)}
  .pg-home #proyectos .rs-item{padding:7px 9px}
  .pg-home #proyectos .rs-item p{font-size:9px}
  .pg-home #proyectos .rp-cta-main{padding:9px 14px}
}

@media (max-width:1100px){
  /* #contacto en móvil: mismo fondo navy que en escritorio. Sin esto, la regla
     genérica ".pg-home main>section[id]>.wrap" (section-layout.css / este
     archivo, ambas con selector de mayor especificidad por el atributo [id])
     pinta un fondo claro encima y el texto blanco queda ilegible. */
  .pg-home #contacto>.wrap{
    background:linear-gradient(145deg,#00172b,#062843)!important;color:#fff;border-color:rgba(255,255,255,.14)
  }
}

/* Reputación: reseñas confirmadas, con lectura editorial y lenguaje visual de Google. */
.pg-home .google-profile{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:14px;min-width:320px;text-decoration:none}
.pg-home .google-g{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.14);font:900 25px/1 Arial,sans-serif}
.pg-home .google-g i{font-style:normal;background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 0 45%,#fbbc05 0 68%,#ea4335 0 82%,#4285f4 0);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-home .google-profile-copy{display:flex;flex-direction:column;gap:3px;color:#fff}
.pg-home .google-profile-copy small{font:700 9px/1 'Archivo',sans-serif;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.pg-home .google-profile-copy strong{font:800 16px/1.15 'Archivo',sans-serif}
.pg-home .google-profile-copy span{font:500 11px/1.2 'Archivo',sans-serif;color:rgba(255,255,255,.68)}
.pg-home .google-profile-arrow{color:#fff;font-size:22px}
.pg-home .google-review-stage{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);gap:18px;margin-top:22px}
.pg-home .google-review-window{display:flex;flex-direction:column;background:#fff;border:1px solid #dadce0;border-radius:12px;box-shadow:0 18px 42px rgba(60,64,67,.12);overflow:hidden}
.pg-home .google-review-window-top{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid #e8eaed}
.pg-home .google-review-window-top>span:nth-child(2){display:flex;flex-direction:column;gap:3px;color:#202124}
.pg-home .google-review-window-top strong{font:700 15px/1.2 Arial,sans-serif}
.pg-home .google-review-window-top small{font:400 12px/1.2 Arial,sans-serif;color:#5f6368}
.pg-home .google-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#0b57d0;color:#fff;font:700 14px/1 Arial,sans-serif}
.pg-home .google-review-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;flex:1;background:#e8eaed}
.pg-home .google-review-card{display:flex;flex-direction:column;min-width:0;padding:20px 18px 17px;background:#fff;color:#202124}
.pg-home .google-review-card-head{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:10px}
.pg-home .google-review-card-head>span:nth-child(2){display:flex;flex-direction:column;min-width:0;gap:3px}
.pg-home .google-review-card-head strong{overflow:hidden;font:700 14px/1.2 Arial,sans-serif;text-overflow:ellipsis;white-space:nowrap}
.pg-home .google-review-card-head small{font:400 11px/1.2 Arial,sans-serif;color:#5f6368}
.pg-home .google-reviewer-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#0b57d0;color:#fff;font:700 12px/1 Arial,sans-serif}
.pg-home .google-review-card:nth-child(2) .google-reviewer-avatar{background:#137333}
.pg-home .google-review-card:nth-child(3) .google-reviewer-avatar{background:#7b1fa2}
.pg-home .google-review-card:nth-child(4) .google-reviewer-avatar{background:#b06000}
.pg-home .google-review-card:nth-child(5) .google-reviewer-avatar{background:#006a6a}
.pg-home .google-review-card:nth-child(6) .google-reviewer-avatar{background:#5f3dc4}
.pg-home .google-review-stars{margin:18px 0 11px;color:#fbbc04;font:700 16px/1 Arial,sans-serif;letter-spacing:2px}
.pg-home .google-review-card blockquote{margin:0;font:500 14px/1.55 Arial,sans-serif;color:#3c4043}
.pg-home .google-review-source{margin-top:auto;padding-top:18px;font:600 9px/1.25 'Archivo',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6b7280}
.pg-home .google-review-policy{padding:28px;background:linear-gradient(145deg,#00172b,#063755);color:#fff;border-top:3px solid var(--ed-red);box-shadow:0 18px 42px rgba(0,23,43,.16)}
.pg-home .google-review-policy-kicker{font:800 9px/1 'Archivo',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#ff4545}
.pg-home .google-review-policy h3{margin:16px 0 24px;font:900 clamp(24px,2.2vw,34px)/.98 'Archivo',sans-serif;text-transform:uppercase}
.pg-home .google-review-policy ul{list-style:none;margin:0;padding:0}
.pg-home .google-review-policy li{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:9px;padding:13px 0;border-top:1px solid rgba(255,255,255,.14);font:600 12px/1.35 'Archivo',sans-serif;color:rgba(255,255,255,.82)}
.pg-home .google-review-policy li span{color:#ff3b3b;font-weight:800}

/* La respuesta 01 se despliega como la apertura del capítulo al entrar. */
@media (prefers-reduced-motion:no-preference){
  .pg-home.home-editorial-ready #faq .faq-item:first-child{position:relative;overflow:hidden}
  .pg-home.home-editorial-ready #faq.editorial-in .faq-item:first-child{animation:faqChapterOpen .72s cubic-bezier(.16,1,.3,1) .16s both}
  .pg-home.home-editorial-ready #faq.editorial-in .faq-item:first-child .faq-a-inner{animation:faqAnswerReveal .72s cubic-bezier(.16,1,.3,1) .28s both}
  .pg-home.home-editorial-ready #faq.editorial-in .faq-item:first-child::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(215,0,0,.11),transparent);transform:translateX(-110%);animation:faqSweep .82s ease .22s both;pointer-events:none}
  @keyframes faqChapterOpen{from{opacity:.25;transform:translateY(20px);box-shadow:inset 4px 0 0 rgba(215,0,0,0)}to{opacity:1;transform:none;box-shadow:inset 4px 0 0 #d70000}}
  @keyframes faqAnswerReveal{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
  @keyframes faqSweep{to{transform:translateX(110%)}}
}

/* Recupera la profundidad interactiva de las cuatro familias. La regla
   editorial de entrada tiene mayor especificidad que el hover histórico,
   por eso el movimiento se declara aquí sobre el estado ya visible. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .pg-home.home-editorial-ready #soluciones.sol-in.editorial-in .sol-card:hover{
    position:relative;z-index:20;
    transform:translateY(-10px) scale(1.04);
    filter:brightness(1.025);
    box-shadow:0 22px 52px rgba(3,28,45,.25),0 8px 20px rgba(3,28,45,.15),inset 3px 0 0 rgba(215,0,0,.58);
    transition:transform 145ms cubic-bezier(.2,.9,.2,1.12),box-shadow 150ms ease-out,filter 150ms ease-out;
    transition-delay:0ms!important
  }
  .pg-home.home-editorial-ready #soluciones.sol-in.editorial-in .sol-card:hover .sol-card-img{
    transform:scale(1.04);filter:contrast(1.045) brightness(1.025)
  }
  .pg-home.home-editorial-ready #soluciones.sol-in.editorial-in:has(.sol-card:hover) .sol-card:not(:hover){
    transform:scale(.982);filter:brightness(.93);
    transition:transform 150ms ease-out,filter 150ms ease-out;transition-delay:0ms!important
  }
}

/* Preguntas: despliegue editorial al recorrerlas con cursor, sin perder clic o teclado. */
.pg-home #faq .faq-item{position:relative;overflow:hidden;isolation:isolate}
.pg-home #faq .faq-item::before{
  content:'';position:absolute;z-index:2;left:0;top:0;bottom:0;width:3px;background:var(--ed-red);
  transform:scaleY(0);transform-origin:center;transition:transform 220ms cubic-bezier(.16,1,.3,1)
}
.pg-home #faq .faq-item.is-open::before{transform:scaleY(1)}
.pg-home #faq .faq-q{position:relative;z-index:1;transition:background 180ms ease,transform 220ms cubic-bezier(.16,1,.3,1)}
.pg-home #faq .faq-item.is-open .faq-q{background:linear-gradient(90deg,rgba(215,0,0,.045),rgba(0,23,43,.025))}
.pg-home #faq .faq-item.is-open .faq-q-text{transform:translateX(4px)}
.pg-home #faq .faq-q-text{transition:transform 220ms cubic-bezier(.16,1,.3,1),color 180ms ease}
.pg-home #faq .faq-a{transition:grid-template-rows 340ms cubic-bezier(.16,1,.3,1)}
.pg-home #faq .faq-a-inner p{opacity:0;transform:translateY(-7px);transition:opacity 200ms ease 30ms,transform 300ms cubic-bezier(.16,1,.3,1)}
.pg-home #faq .faq-item.is-open .faq-a-inner p{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
  .pg-home #faq .faq-item:not(.is-open):hover .faq-q-text{color:var(--ed-red);transform:translateX(3px)}
}

/* CTA de Soluciones: ocupa el ancho disponible y se despliega como acción principal. */
.pg-home #soluciones .sol-cta-btn{width:100%;min-height:46px;padding-inline:16px;box-sizing:border-box}
.pg-home #soluciones .sol-cta-btn-content{justify-content:space-between;text-align:left}
.pg-home #soluciones .sol-cta-btn .arrow-cta{margin-left:auto}

/* Navegación editorial v35.12: una guía óptica mínima, no un panel. */
@media (min-width:1101px) and (hover:hover) and (pointer:fine){
  .pg-home .page-progress{
    right:12px;
    width:18px;
    padding:7px 2px;
    gap:0;
    border:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .pg-home .page-progress::before{
    top:12px;
    bottom:12px;
    background:linear-gradient(180deg,transparent,rgba(133,224,255,.42) 16%,rgba(255,255,255,.5) 50%,rgba(215,0,0,.6) 84%,transparent);
    box-shadow:0 0 5px rgba(92,207,255,.2);
  }
  .pg-home .pp-count,
  .pg-home .pp-control,
  .pg-home .pp-next,
  .pg-home .pp-label{ display:none!important; }
  .pg-home .pp-stops{ gap:5px; padding:1px 0; }
  .pg-home .pp-stop{ width:16px; height:14px; }
  .pg-home .pp-stop > span{
    width:3px;
    height:3px;
    border:1px solid rgba(210,241,255,.66);
    background:#0b3149;
    box-shadow:0 0 4px rgba(106,215,255,.2);
  }
  .pg-home .pp-stop:hover > span,
  .pg-home .pp-stop:focus-visible > span{ width:5px; height:5px; }
  .pg-home .pp-stop.is-active > span{
    width:7px;
    height:7px;
    box-shadow:0 0 0 2px rgba(215,0,0,.14),0 0 8px rgba(255,68,68,.58);
  }
  .pg-home .pp-stop > i{ display:none; }
  .pg-home .pp-stop > em{
    display:block;
    right:20px;
    top:50%;
    padding:4px 7px;
    border:0;
    border-right:1px solid rgba(215,0,0,.72);
    background:rgba(0,23,43,.82);
    box-shadow:0 6px 18px rgba(0,23,43,.12);
    opacity:0;
    transform:translate(3px,-50%);
    font-size:8px;
    letter-spacing:.09em;
    white-space:nowrap;
    transition:opacity 120ms ease,transform 120ms ease;
  }
  .pg-home .pp-stop.is-active > em{ opacity:.58; transform:translate(0,-50%); }
  .pg-home .page-progress:hover .pp-stop.is-active > em,
  .pg-home .pp-stop:hover > em,
  .pg-home .pp-stop:focus-visible > em{ opacity:1; transform:translate(0,-50%); }
}

@media (min-width:1101px) and (hover:hover) and (pointer:fine){
  html:has(body.pg-home){scroll-snap-type:y mandatory;scroll-padding-top:68px}
  body.pg-home .hero,body.pg-home main>section[id]{scroll-snap-align:start;scroll-snap-stop:always}
  body.pg-home footer{scroll-snap-align:start;scroll-snap-stop:normal}
}
@media (min-width:1101px) and (hover:none),(min-width:1101px) and (pointer:coarse){
  html:has(body.pg-home){scroll-snap-type:none}
}

/* El barrido rojo acompaña la entrada sin tapar fotografías ni titulares. */
.pg-home #soluciones .sol-grid-scan{width:2.2%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28) 42%,rgba(215,0,0,.62) 55%,rgba(255,255,255,.28) 68%,transparent)}
.pg-home #soluciones.sol-in .sol-grid-scan{animation-duration:1.85s;animation-timing-function:cubic-bezier(.25,.7,.25,1)}

.pg-home main>section[id]>.wrap::after{
  content:'';position:absolute;right:-70px;bottom:-80px;width:230px;height:230px;border:1px solid rgba(0,23,43,.055);border-radius:50%;pointer-events:none
}
.pg-home #medida>.wrap::after,.pg-home #proceso>.wrap::after{border-color:rgba(255,255,255,.07)}

/* Ficha técnica ilustrada · base de concreto para poste */
.pg-home #medida .sm-tech-open{
  width:100%;margin-top:10px;padding:8px 9px;border:1px solid #d7e0e7;border-left:3px solid var(--ed-red);
  display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;text-align:left;background:#f4f7f9;color:#06182c;
  cursor:pointer;transition:background .22s ease,border-color .22s ease,transform .22s ease
}
.pg-home #medida .sm-tech-open:hover,.pg-home #medida .sm-tech-open:focus-visible{background:#eaf0f4;border-color:#b9c8d3;transform:translateY(-1px)}
.pg-home #medida .sm-tech-open-num{font-family:'Archivo',sans-serif;font-size:10px;font-weight:900;color:var(--ed-red)}
.pg-home #medida .sm-tech-open b,.pg-home #medida .sm-tech-open small{display:block}
.pg-home #medida .sm-tech-open b{font-family:'Archivo',sans-serif;font-size:10px;line-height:1.15;text-transform:uppercase}
.pg-home #medida .sm-tech-open small{margin-top:2px;font-size:9px;line-height:1.2;color:#65717c}
.pg-home #medida .sm-tech-open-arrow{font-size:17px;color:var(--ed-red)}

.sm-tech-dialog{width:min(1160px,calc(100vw - 36px));max-height:min(88vh,820px);padding:0;border:0;background:transparent;color:#071b2f;overflow:visible}
.sm-tech-dialog::backdrop{background:rgba(0,18,34,.78);backdrop-filter:blur(6px)}
.sm-tech-dialog-shell{position:relative;display:grid;grid-template-columns:minmax(300px,.78fr) minmax(520px,1.4fr);background:#f5f7f9;border-top:4px solid var(--ed-red);box-shadow:0 30px 90px rgba(0,10,24,.42);overflow:auto;max-height:min(88vh,820px)}
.sm-tech-close{position:absolute;z-index:2;right:12px;top:10px;width:38px;height:38px;border:1px solid rgba(255,255,255,.38);background:#00172b;color:#fff;font-size:27px;line-height:1;cursor:pointer}
.sm-tech-close:hover,.sm-tech-close:focus-visible{background:var(--ed-red)}
.sm-tech-dialog-copy{padding:44px 38px 36px;background:repeating-linear-gradient(116deg,transparent 0 48px,rgba(255,255,255,.024) 49px 50px),linear-gradient(145deg,#00172b,#073654);color:#fff}
.sm-tech-dialog-kicker{display:block;margin-bottom:18px;font-family:'Archivo',sans-serif;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:#ff3b3b}
.sm-tech-dialog-copy h2{max-width:390px;margin:0 0 18px;font-family:'Archivo',sans-serif;font-size:clamp(30px,3.4vw,48px);line-height:.96;text-transform:uppercase;color:#fff}
.sm-tech-dialog-copy p{margin:0 0 14px;font-size:14px;line-height:1.58;color:rgba(255,255,255,.76)}
.sm-tech-dialog-copy .sm-tech-dialog-lead{font-size:16px;line-height:1.5;color:#fff}
.sm-tech-dialog-note{margin-top:22px;padding:14px 16px;border-left:3px solid var(--ed-red);background:rgba(255,255,255,.07)}
.sm-tech-dialog-note b,.sm-tech-dialog-note span{display:block}
.sm-tech-dialog-note b{margin-bottom:5px;font-family:'Archivo',sans-serif;font-size:11px;text-transform:uppercase;color:#fff}
.sm-tech-dialog-note span{font-size:11px;line-height:1.45;color:rgba(255,255,255,.7)}
.sm-tech-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:20px 0 0;border-top:1px solid rgba(255,255,255,.18);border-left:1px solid rgba(255,255,255,.18)}
.sm-tech-specs div{padding:10px 12px;border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.sm-tech-specs dt{font:750 8px/1.2 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.58)}
.sm-tech-specs dd{margin:4px 0 0;font:800 12px/1.2 'Archivo',sans-serif;color:#fff}
.sm-tech-dialog-cta{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding:13px 15px;background:var(--ed-red);font-family:'Archivo',sans-serif;font-size:11px;font-weight:850;text-transform:uppercase;color:#fff;text-decoration:none}
.sm-tech-dialog-figure{margin:0;padding:54px 30px 24px;display:flex;flex-direction:column;justify-content:center;background:#eef2f5}
.sm-tech-dialog-figure img{width:100%;height:auto;display:block;border:1px solid #c9d2d9;background:#b8b8b8;box-shadow:0 18px 40px rgba(0,23,43,.12)}
.sm-tech-dialog-figure figcaption{margin-top:10px;font-size:10px;line-height:1.4;color:#5c6873}
.sm-tech-camera-figure img{width:min(100%,470px);max-height:650px;object-fit:contain;align-self:center;background:#dfe5e9}
.sm-tech-dialog--camera .sm-tech-dialog-copy{padding:34px 32px 24px}
.sm-tech-dialog--camera .sm-tech-dialog-kicker{margin-bottom:12px}
.sm-tech-dialog--camera .sm-tech-dialog-copy h2{margin-bottom:13px;font-size:clamp(29px,2.7vw,35px)}
.sm-tech-dialog--camera .sm-tech-dialog-copy p{margin-bottom:10px;font-size:12.5px;line-height:1.45}
.sm-tech-dialog--camera .sm-tech-dialog-copy .sm-tech-dialog-lead{font-size:14px;line-height:1.45}
.sm-tech-dialog--camera .sm-tech-specs{margin-top:14px}
.sm-tech-dialog--camera .sm-tech-specs div{padding:8px 10px}
.sm-camera-family{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:14px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.18)}
.sm-camera-family-card{min-width:0;padding:11px 12px;background:#08243a}
.sm-camera-family-card.is-special{background:linear-gradient(135deg,#0b2e49,#08243a)}
.sm-camera-family-card>span{display:block;margin-bottom:5px;font:800 8px/1.2 'Archivo',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#ff5b5b}
.sm-camera-family-card h3{margin:0 0 6px;font:850 13px/1.12 'Archivo',sans-serif;text-transform:uppercase;color:#fff}
.sm-camera-family-card p{margin:0!important;font-size:10.5px!important;line-height:1.38!important;color:rgba(255,255,255,.7)!important}
.sm-tech-dialog--camera .sm-tech-dialog-note{margin-top:14px;padding:10px 12px}
.sm-tech-dialog--camera .sm-tech-dialog-cta{margin-top:14px;padding:11px 13px}
.sm-tech-dialog--camera .sm-tech-camera-figure img{max-height:570px}

@media (prefers-reduced-motion:no-preference){
  .pg-home.home-editorial-ready main>section[id]>.wrap,.pg-home.home-editorial-ready main>section#contacto>.qc-grid{
    opacity:.78;transform:translateY(24px) scale(.992);filter:saturate(.86);
    transition:opacity .42s ease,transform .52s cubic-bezier(.16,1,.3,1),filter .5s ease
  }
  .pg-home.home-editorial-ready main>section[id].editorial-in>.wrap,.pg-home.home-editorial-ready main>section#contacto.editorial-in>.qc-grid{opacity:1;transform:none;filter:none}
  .pg-home.home-editorial-ready #soluciones .sol-card,.pg-home.home-editorial-ready #medida .sm-cap,
  .pg-home.home-editorial-ready #medida .sm-example,.pg-home.home-editorial-ready #proceso .qp-pillar,
  .pg-home.home-editorial-ready #opiniones .rvw-card,
  .pg-home.home-editorial-ready #faq .faq-item,.pg-home.home-editorial-ready #contacto .qc-form-flow span{
    opacity:.2;transform:translateY(18px);transition:opacity .36s ease,transform .5s cubic-bezier(.16,1,.3,1)
  }
  .pg-home.home-editorial-ready #soluciones.editorial-in .sol-card,
  .pg-home.home-editorial-ready #medida.editorial-in .sm-cap,.pg-home.home-editorial-ready #medida.editorial-in .sm-example,
  .pg-home.home-editorial-ready #proceso.editorial-in .qp-pillar,
  .pg-home.home-editorial-ready #opiniones.editorial-in .rvw-card,.pg-home.home-editorial-ready #faq.editorial-in .faq-item,
  .pg-home.home-editorial-ready #contacto.editorial-in .qc-form-flow span{opacity:1;transform:none}
  .pg-home .editorial-in :is(.sol-card,.sm-cap,.sm-example,.qp-pillar,.rvw-card,.faq-item,.qc-form-flow span):nth-child(2){transition-delay:.055s}
  .pg-home .editorial-in :is(.sol-card,.sm-cap,.sm-example,.qp-pillar,.rvw-card,.faq-item,.qc-form-flow span):nth-child(3){transition-delay:.11s}
  .pg-home .editorial-in :is(.sol-card,.sm-cap,.sm-example,.qp-pillar,.rvw-card,.faq-item,.qc-form-flow span):nth-child(4){transition-delay:.165s}
  .pg-home .editorial-in :is(.sol-card,.sm-cap,.sm-example,.qp-pillar,.rvw-card,.faq-item):nth-child(5){transition-delay:.22s}
  .pg-home .hero.editorial-in .hero-content{animation:homeCoverIn .7s cubic-bezier(.16,1,.3,1) both}
  @keyframes homeCoverIn{from{opacity:.3;transform:translateX(-24px)}to{opacity:1;transform:none}}
}

@media (max-width:1100px){
  .pg-home main>section[id]{padding:12px 18px!important}
  .pg-home main>section[id]>.wrap,.pg-home main>section#contacto>.qc-grid{
    position:relative;width:100%;padding:30px 28px;border:1px solid rgba(0,23,43,.13);border-top:3px solid var(--ed-red);
    border-radius:2px;background:#fbfcfd;box-shadow:0 16px 38px rgba(0,23,43,.08)
  }
  .pg-home main>section#contacto>.qc-grid{padding:0}
  .pg-home .hero::before,.pg-home .hero::after{display:none}
  .pg-home main>section[id]::before{top:28px;right:38px}
  .pg-home main>section[id]::after{top:45px;right:38px}
  .pg-home #soluciones .sol-grid-scan{display:none!important}
  .pg-home main>section[id]>.wrap::after{display:none}
  .pg-home .google-review-stage{grid-template-columns:1fr}
}

@media (max-width:900px){
  .pg-home .hero-photo-caption{right:16px;bottom:16px;max-width:calc(100% - 32px);padding:9px 11px}
  .pg-home .hero-media::before{display:none}
  .pg-home .hero-navy{width:100%;clip-path:none;background:#00172b}
  .pg-home .hero-edge{width:100%;clip-path:none}
  .pg-home .hero-media{clip-path:none}
  .sm-tech-dialog{width:min(94vw,720px);max-height:92vh}
  .sm-tech-dialog-shell{grid-template-columns:1fr;max-height:92vh}
  .sm-tech-dialog-copy{padding:42px 24px 26px}
  .sm-tech-dialog-copy h2{font-size:32px}
  .sm-tech-dialog-figure{padding:24px 18px}
}
@media (max-width:640px){
  .pg-home main>section[id]{padding:8px!important}
  .pg-home main>section[id]>.wrap,.pg-home main>section#contacto>.qc-grid{padding:24px 18px;box-shadow:0 10px 26px rgba(0,23,43,.07)}
  .pg-home main>section#contacto>.qc-grid{padding:0}
  .pg-home main>section[id]::before,.pg-home main>section[id]::after{display:none}
  .pg-home .hero-content{padding-left:22px}
  .pg-home #soluciones .sol-head,.pg-home #proyectos .rp-head,.pg-home #opiniones .rvw-head{padding-bottom:16px;border-bottom:1px solid var(--ed-line)}
  .pg-home .google-profile{min-width:0;grid-template-columns:40px 1fr auto}
  .pg-home .google-g{width:40px;height:40px}
  .pg-home .google-review-window-top{grid-template-columns:40px 1fr;padding:15px}
  .pg-home .google-review-list{grid-template-columns:1fr}
  .pg-home .google-review-card{min-height:190px;padding:20px}
  .pg-home .google-review-icon{font-size:62px;height:34px}
  .pg-home .google-review-policy{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){
  .pg-home main>section[id]>.wrap,.pg-home main>section#contacto>.qc-grid,.pg-home main>section[id] *{
    animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important
  }
}

/* ==========================================================
   #medida · Soluciones especiales — doble pagina editorial
   Correccion de cierre, 2026-08-24
   ----------------------------------------------------------
   Problema corregido: las dos fotografias usaban object-fit:contain
   dentro de una caja 3/4 con fondo degradado. Resultado: margenes
   vacios, marco blanco y sensacion de foto pegada sobre una tarjeta,
   con perdida de escala del producto.
   Ahora: fotografia a sangre con object-fit:cover y object-position
   estudiado por imagen, composicion asimetrica 42/58, linea roja fina,
   numeracion pequena y textos siempre FUERA de la fotografia.
   La foto del poyo se reencuadro de 9:16 a 4:5 en origen
   (especiales-poyo-alumbrado-catalogo.webp) para que cover no tenga
   que cortar la pieza en ningun ancho.
   ========================================================== */
.pg-home #medida .sm-examples{
  grid-template-columns:minmax(0,42fr) minmax(0,58fr);
  gap:14px;
}
/* La tarjeta deja de ser tarjeta: pasa a ser una placa editorial oscura
   sobre el navy de la seccion, sin sombra de plantilla ni esquinas blandas. */
.pg-home #medida .sm-example{
  border:1px solid rgba(255,255,255,.16);
  border-radius:2px;
  background:#04121f;
  box-shadow:none;
}
.pg-home #medida .sm-example-media{
  position:relative;
  aspect-ratio:4/5;
  display:block;
  background:#04121f;
}
.pg-home #medida .sm-example-lead .sm-example-media{ aspect-ratio:5/4; }
.pg-home #medida .sm-example-media img{
  width:100%;
  height:100%;
  object-fit:cover;              /* antes: contain -> margenes vacios */
  display:block;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.pg-home #medida .sm-example:hover .sm-example-media img{ transform:scale(1.015); }

/* Numeracion pequena sobre la fotografia, en una esquina limpia. */
.pg-home #medida .sm-example-num{
  position:absolute; top:0; left:0; z-index:2;
  padding:5px 9px 4px;
  background:var(--brick,#d70000);
  color:#fff;
  font:900 10px/1 'Archivo',sans-serif;
  letter-spacing:.08em;
}
/* Pie fotografico sobrio, apoyado en la franja de piso de la imagen
   (nunca sobre el producto) y con velo minimo, no un degrade que tape. */
.pg-home #medida .sm-example-foot{
  position:absolute; inset:auto 0 0; z-index:2;
  padding:16px 10px 7px;
  background:linear-gradient(transparent,rgba(2,14,25,.78));
  color:rgba(255,255,255,.9);
  font:600 9px/1.25 'Archivo',sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
}
/* Texto siempre fuera de la zona critica de la foto: bloque propio,
   separado por la linea roja fina. */
.pg-home #medida .sm-example figcaption{
  min-height:0;
  padding:11px 13px 13px;
  border-top:2px solid var(--brick,#d70000);
  background:#04121f;
}
.pg-home #medida .sm-example-kicker{ color:#ff5252; margin-bottom:4px; }
.pg-home #medida .sm-example h3{ color:#fff; }
.pg-home #medida .sm-example p{ color:rgba(255,255,255,.68); }

/* La tira de apoyo se alinea con la misma gramatica: sin esquinas
   redondeadas ni sombras de plantilla. */
.pg-home #medida .sm-example-strip{ gap:6px; }
.pg-home #medida .sm-example-strip figure{
  border:1px solid rgba(255,255,255,.16);
  border-radius:2px;
  box-shadow:none;
}
/* Al pasar la tira a la columna derecha, cada casilla es mas angosta.
   "CONFIGURACION" es una palabra unica que no puede partirse: con la escala
   anterior desbordaba y quedaba cortada por el overflow de la casilla. */
.pg-home #medida .sm-example-strip figcaption{
  padding:14px 7px 7px;
  font-size:7.8px;
  letter-spacing:.015em;
}

/* La pieza del ejemplo 01 es vertical (770x990 px reales dentro de su
   fotografia): en una caja apaisada, cover la cortaria siempre, da igual el
   object-position. Por eso su placa es vertical en todos los anchos. */
@media (max-width:1100px){
  .pg-home #medida .sm-example-side .sm-example-media{ aspect-ratio:4/5; }
  .pg-home #medida .sm-example-lead .sm-example-media{ aspect-ratio:1/1; }
}
@media (max-width:640px){
  .pg-home #medida .sm-examples{ grid-template-columns:1fr; }
  .pg-home #medida .sm-example-side .sm-example-media,
  .pg-home #medida .sm-example-lead .sm-example-media{ aspect-ratio:4/5; }
}
@media (prefers-reduced-motion:reduce){
  .pg-home #medida .sm-example-media img,
  .pg-home #medida .sm-example:hover .sm-example-media img{ transition:none; transform:none; }
}

/* En escritorio (>=1101px) la Home usa alturas de capitulo fijas: la
   fotografia debe rellenar la fila disponible, no imponer su propia
   proporcion. Se declara explicitamente para no depender del orden del
   cascade respecto al bloque compacto de mas arriba. La ausencia de
   recorte del producto en esta rama esta verificada por
   scripts/qa-cierre-home.mjs, que mide la ventana real de cover
   contra el area que ocupa la pieza en cada fotografia. */
@media (min-width:1101px){
  .pg-home #medida .sm-example-media,
  .pg-home #medida .sm-example-lead .sm-example-media{ aspect-ratio:auto; }
  .pg-home #medida .sm-example{ grid-template-rows:minmax(0,1fr) auto; }

  /* Doble pagina real: placa vertical de altura completa a la izquierda
     (la pieza del ejemplo 01 es vertical y necesita una caja vertical para
     que cover no la corte), y a la derecha la placa apaisada del ejemplo 02
     con la tira de apoyo debajo. Antes las dos placas compartian fila y la
     caja de la izquierda quedaba casi cuadrada: ahi se cortaba la pieza. */
  .pg-home #medida .sm-examples{
    grid-template-rows:minmax(0,1fr) auto;
    align-items:stretch;
  }
  .pg-home #medida .sm-example-side{ grid-column:1; grid-row:1 / -1; }
  .pg-home #medida .sm-example-lead{ grid-column:2; grid-row:1; }
  .pg-home #medida .sm-example-strip{ grid-column:2; grid-row:2; }
}


/* ============================================================
   #medida — modo compacto para pantallas de poca altura
   (2026-08-24)
   ------------------------------------------------------------
   Diagnostico: en 1366x768, 1151x768 y 1150x768 el contenedor
   .sm-top se comprimia por flex hasta su min-height de 500px,
   pero su grilla interna (fotografias + tira de 92px) necesitaba
   mas. La tira se desbordaba 44px por debajo de .sm-top y caia
   sobre la barra CTA: las cuatro miniaturas quedaban tapadas y
   sus rotulos, blanco sobre blanco.
   Correccion: se reduce proporcionalmente la altura de las
   fotografias protagonistas y solo los espacios secundarios, de
   modo que la grilla quepa completa y el CTA vuelva al flujo
   normal, despues de las miniaturas y con separacion visible.
   No se tocan escalas tipograficas de lectura.
   ============================================================ */
@media (min-width:901px) and (max-height:820px){
  /* Trims seguros en cualquier ancho de escritorio. */
  .pg-home #medida .sm-final-cta{ padding:16px clamp(18px,2.4vw,28px); }
  .pg-home #medida .sm-final-cta-text svg{ width:24px; height:24px; }
  .pg-home #medida .sm-intro{ margin-bottom:14px; }
  .pg-home #medida .sm-capabilities{ margin-top:12px; }
}
@media (min-width:1101px) and (max-height:820px){
  /* .sm-left media 553px y no se encogia (min-height:auto), asi que un
     .sm-top con altura fija solo conseguia que su contenido se desbordara
     por abajo. Aqui .sm-top pasa a altura de contenido y se recortan
     margenes y espacios secundarios hasta que la columna cabe. */
  .pg-home #medida>.wrap{ padding-top:22px; padding-bottom:26px; }
  .pg-home #medida .sm-top{ height:auto; min-height:0; }
  .pg-home #medida .sm-head{ margin-bottom:4px; }
  .pg-home #medida .sm-title{ font-size:26px; line-height:1.04; }
  .pg-home #medida .sm-intro{ margin-bottom:10px; }
  .pg-home #medida .sm-capabilities{ margin-top:10px; }
  .pg-home #medida .sm-cap{ padding:6px 12px 7px; }
  .pg-home #medida .sm-cap p{ line-height:1.3; }
  .pg-home #medida .sm-example-strip{ height:80px; min-height:80px; }
  .pg-home #medida .sm-example-strip figure,
  .pg-home #medida .sm-example-strip img{ min-height:78px; max-height:78px; }
  .pg-home #medida .sm-example figcaption{ padding:8px 12px 10px; }
  /* La barra CTA queda en el flujo, tras las miniaturas, con aire real. */
  .pg-home #medida .sm-final-cta{ margin-top:16px; min-height:0; }
}
/* Rotulos de las miniaturas: el velo se refuerza para garantizar
   contraste AA sobre cualquiera de las cuatro fotografias, no solo
   sobre las oscuras. */
.pg-home #medida .sm-example-strip figcaption{
  background:linear-gradient(transparent, rgba(0,16,29,.93) 62%);
}
/* "CONFIGURACION" es el rotulo mas largo de los cuatro y a 1150px se
   cortaba ~6px: la miniatura mide 78px y el rotulo pedia 70px mas 14px de
   padding. Se recuperan esos 6px del padding lateral y del prosado, sin
   bajar el cuerpo de 7,8px. Los otros tres ya cabian y no cambian. */
@media (min-width:1101px){
  .pg-home #medida .sm-example-strip figcaption{
    padding-inline:4px;
    letter-spacing:0;
    text-align:center;
  }
}


/* ============================================================
   Columna segura para el acceso flotante  (2026-08-24)
   ------------------------------------------------------------
   Medido: en 1150px el contenido llega a 28px del borde derecho,
   asi que un boton fijo de 48px pisaba CTA, rotulos y pies. Se
   reserva una franja a la derecha de los capitulos para que el
   .wa-fab y el riel de capitulos vivan fuera del area de lectura.
   Solo afecta el ancho disponible; no cambia alturas ni
   composicion interna.
   ============================================================ */
@media (min-width:1151px){
  /* Corredor calculado, no arbitrario: el .wa-fab mide 48px y se ancla a
     64px del borde derecho, asi que ocupa de 64 a 112px. Con el margen
     minimo de seguridad de 16px exigido: 112 + 16 = 128px.
     El breakpoint es 1151 y no 1101 porque de 1150px hacia abajo el
     flotante no existe -- lo sustituye el acceso del header -- y reservar
     espacio ahi seria alterar la composicion sin ninguna necesidad. */
  .pg-home main>section[id]{ padding-right:128px!important; }
  .pg-home #contacto{ padding-right:128px!important; }
  /* Los numerales de capitulo son absolutos: el padding no los desplaza. */
  .pg-home main>section[id]::before,
  .pg-home main>section[id]::after{ right:152px; }
  /* El pie de la fotografia del hero vive en su propia capa. */
  .pg-home .hero-photo-caption{ right:152px; }

  /* --- los tres elementos de #contacto que quedaban bajo el boton --- */
  /* "09": numeral absoluto propio de la seccion. */
  .pg-home #contacto .qcb-num{ right:152px; }
  /* "Fabricacion propia" y "Detalle de producto": pie de la fotografia.
     Se desplaza la figura completa; no se toca el tamano ni el color de
     sus rotulos, para no alterar su contraste. */
  .pg-home #contacto .qcb-photo{ margin-right:40px; }
}
