/* ============================================================ */
/* PRODUCTOS -- capa editorial "catálogo para decidir" (2026-08-27) */
/* Recorrido continuo: sin índice lateral, paginado ni scroll-snap. */
/* Prefijo pje- exclusivo de esta página; el explorador (pg-*/pgx-*) */
/* conserva sus clases y su JS de filtros existentes intactos.      */
/* ============================================================ */

.pg-productos.pje-page{
  --pje-header-height:79px;
  --pje-slide-gap:14px;
}

.pje-chapter{ position:relative; scroll-margin-top:82px; }
.pje-chapter [data-pje-reveal]{ will-change:transform,opacity; }

html:has(body.pg-productos){ scroll-snap-type:none !important; scroll-behavior:auto; }
.pg-productos #main-content{ padding:0 !important; }
.pg-productos .pje-chapter{
  min-height:0 !important;
  display:block;
  scroll-snap-align:none !important;
  scroll-snap-stop:normal !important;
}

.pje-chapter .pg-eyebrow, .pje-chapter .pje-num,
.pje-chapter h1, .pje-chapter h2,
.pje-chapter [data-pje-reveal]{
  transition:opacity .58s ease, transform .62s cubic-bezier(.16,.76,.24,1);
}
/* Mejora progresiva (P0 2026-08-25). El estado base del documento es
   VISIBLE: estas reglas solo apagan contenido cuando page-progress.js ya
   confirmo que puede animarlo y armo html.pje-reveal-armed. Sin JS, sin
   IntersectionObserver, con reduced-motion o ante cualquier excepcion, la
   clase nunca llega y las cinco categorias se pintan igual.
   Antes estas reglas apagaban por defecto y dependian de que el observer
   acertara: en movil no acertaba y el catalogo quedaba invisible. */
html.pje-reveal-armed .pje-chapter:not([data-pje-free]):not(.is-visible) .pg-eyebrow,
html.pje-reveal-armed .pje-chapter:not([data-pje-free]):not(.is-visible) .pje-num,
html.pje-reveal-armed .pje-chapter:not([data-pje-free]):not(.is-visible) h1,
html.pje-reveal-armed .pje-chapter:not([data-pje-free]):not(.is-visible) h2,
html.pje-reveal-armed .pje-chapter:not([data-pje-free]):not(.is-visible) [data-pje-reveal]{ opacity:0; transform:translateY(20px); }
.pje-chapter.is-visible .pje-num{ transition-delay:0s; }
.pje-chapter.is-visible .pg-eyebrow{ transition-delay:.05s; }
.pje-chapter.is-visible h1,.pje-chapter.is-visible h2{ transition-delay:.1s; }
.pje-chapter.is-visible [data-pje-reveal="text"]{ transition-delay:.18s; }
.pje-chapter.is-visible [data-pje-reveal="media"]{ transition-delay:.26s; }
.pje-chapter.is-visible [data-pje-reveal="evidence"]{ transition-delay:.34s; }
.pje-chapter.is-visible [data-pje-reveal="cta"]{ transition-delay:.42s; }

@media (prefers-reduced-motion:reduce){
  .pje-chapter .pg-eyebrow,.pje-chapter .pje-num,.pje-chapter h1,.pje-chapter h2,.pje-chapter [data-pje-reveal]{ transition:none !important; }
  .pje-chapter:not(.is-visible) .pg-eyebrow,
  .pje-chapter:not(.is-visible) .pje-num,
  .pje-chapter:not(.is-visible) h1,
  .pje-chapter:not(.is-visible) h2,
  .pje-chapter:not(.is-visible) [data-pje-reveal]{ opacity:1 !important; transform:none !important; }
}

.pg-productos footer .f2-cols,
.pg-productos footer .f2-highlight,
.pg-productos footer .f2-legal{ opacity:1; transform:none; transition:none; }

/* número editorial de capítulo */
.pje-num{ display:block; font-family:'Archivo',sans-serif; font-weight:900; font-size:12px; letter-spacing:.14em; color:var(--brick); margin:0 0 10px; }
.pje-num.is-light{ color:#ff8a80; }

/* ============================================================ */
/* CAPÍTULO 01 -- portada del catálogo                             */
/* ============================================================ */
.pje-portada{ background:var(--navy); color:#fff; padding:0; border-bottom:3px solid var(--brick); }
.pje-portada-grid{
  display:grid;
  grid-template-columns:minmax(340px,43%) minmax(0,57%);
  align-items:stretch;
  height:clamp(310px,36vw,370px);
  min-height:310px;
}
@media (max-width:960px){ .pje-portada-grid{ grid-template-columns:1fr; min-height:0; } }
.pje-portada-copy{ display:flex; flex-direction:column; justify-content:center; padding:26px clamp(24px,4.2vw,54px); }
.pje-portada-photo{ position:relative; overflow:hidden; min-height:0; }
.pje-portada-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pje-portada-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg,rgba(6,29,51,.55) 0%,rgba(6,29,51,.05) 30%,transparent 55%); }
@media (max-width:960px){ .pje-portada-photo{ aspect-ratio:16/10; min-height:0; order:-1; } }
.pje-portada-h1{ font-family:'Archivo',sans-serif; font-weight:900; text-transform:uppercase; line-height:.94; letter-spacing:-.02em; font-size:clamp(27px,2.65vw,38px); color:#fff; margin:0 0 12px; }
.pje-portada-h1 .red{ color:var(--brick); }
.pje-portada-intro{ font-size:13px; line-height:1.45; color:rgba(255,255,255,.8); max-width:44ch; margin:0 0 15px; }
.pje-portada-ctas{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:15px; }
.pje-portada-ctas .btn{ min-height:42px; padding:10px 18px; }
.pje-portada-proof{ list-style:none; margin:0; padding:10px 0 0; border-top:1px solid rgba(255,255,255,.16); display:flex; flex-direction:row; flex-wrap:wrap; gap:6px 16px; }
.pje-portada-proof li{ font-size:10.5px; color:rgba(255,255,255,.74); }
@media (max-width:960px){
  .pje-portada-grid{ height:auto; }
  .pje-portada-copy{ padding:28px 24px 30px; }
  .pje-portada-photo{ aspect-ratio:16/7; }
  .pje-portada-h1{ font-size:clamp(28px,8vw,40px); max-width:12ch; }
}

/* ============================================================ */
/* CAPÍTULO 02 -- ajustes al panel existente (pgx-*)                */
/* ============================================================ */
.pgx-panels{ grid-template-columns:repeat(5,minmax(0,1fr)); }
/* 5 columnas necesita texto mas compacto que las 4 originales -- sin esto,  */
/* "Infraestructura eléctrica" y "Urbanización y pavimentación" se cortan.   */
.pgx-panels .pgx-panel h3{ font-size:clamp(17px,1.35vw,22px); }
.pgx-panels .pgx-panel p{ font-size:12.5px; max-width:none; }
@media (max-width:1180px){
  .pgx-panels{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pgx-panels .pgx-panel h3{ font-size:clamp(20px,2vw,26px); }
}
@media (max-width:900px){ .pgx-panels{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .pgx-panels{ grid-template-columns:1fr; } }
.pgx-panel-count{ display:inline-block; font-family:'Archivo',sans-serif; font-weight:700; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.94); margin-bottom:6px; }

/* .btn-ghost-dark no existe en el CSS base de esta página (sí en Proyectos) */
.btn-ghost-dark{ border:1.5px solid rgba(255,255,255,.4); color:#fff; background:none; }
.btn-ghost-dark:hover{ border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }

/* ============================================================ */
/* CAPÍTULO 03 -- explorador: buscador                             */
/* ============================================================ */
.pg-search{ position:relative; margin-bottom:20px; max-width:420px; }
.pg-search label{ display:block; font-family:'Archivo',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-navy); margin-bottom:7px; }
.pg-search-input-wrap{ position:relative; }
.pg-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--gray-mid); pointer-events:none; }
.pg-search input{
  width:100%; box-sizing:border-box; height:46px; padding:0 40px 0 40px; border:1.5px solid var(--gray-line);
  border-radius:6px; font-family:'Archivo',sans-serif; font-size:14px; color:var(--ink-navy); background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pg-search input:focus{ outline:none; border-color:var(--brick); box-shadow:0 0 0 3px rgba(215,0,0,.12); }
.pg-search-clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%;
  border:none; background:none; color:var(--gray-mid); cursor:pointer; display:none; align-items:center; justify-content:center;
  font-size:16px; line-height:1;
}
.pg-search-clear.is-visible{ display:flex; }
.pg-search-clear:hover{ color:var(--brick); background:rgba(215,0,0,.08); }

.pg-chip[aria-pressed="true"]{ background:var(--brick); border-color:var(--brick); color:#fff; }

/* Área táctil mínima de 44×44px en móvil/tablet para chips y controles     */
/* pequeños del explorador (regla explícita del brief para esta página).    */
@media (max-width:1100px){
  .pg-chip{ min-height:44px; display:inline-flex; align-items:center; padding:10px 18px; }
  .pg-search-clear{ width:38px; height:38px; }
  .pg-catnav a{ min-height:44px; }
}

/* ============================================================ */
/* CAPÍTULO 04 -- destacados                                       */
/* ============================================================ */
.pje-featured{ background:var(--bg-portada,#f7f7f5); }
.pje-featured-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:8px; }
@media (max-width:1023px){ .pje-featured-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .pje-featured-grid{ grid-template-columns:1fr; } }
.pje-feat-card{ display:flex; flex-direction:column; background:#fff; border-radius:6px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:0 10px 24px rgba(20,20,20,.07); transition:transform .18s ease, box-shadow .18s ease; }
.pje-feat-card:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(20,20,20,.12); }
.pje-feat-photo{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#eee; }
.pje-feat-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.pje-feat-card:hover .pje-feat-photo img{ transform:scale(1.02); }
.pje-feat-body{ padding:18px 20px 22px; display:flex; flex-direction:column; flex:1; }
.pje-feat-cat{ font-family:'Archivo',sans-serif; font-weight:800; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--brick); margin-bottom:7px; }
.pje-feat-name{ font-family:'Archivo',sans-serif; font-weight:800; font-size:16.5px; color:var(--ink-navy); margin:0 0 8px; }
.pje-feat-why{ font-size:12.5px; line-height:1.5; color:var(--gray-mid); margin:0 0 16px; flex:1; }
.pje-feat-cta{ font-family:'Archivo',sans-serif; font-weight:700; font-size:12.5px; text-transform:uppercase; color:var(--brick); }
.pje-feat-card--wide{ grid-column:span 3; flex-direction:row; }
@media (max-width:1023px){ .pje-feat-card--wide{ grid-column:span 2; } }
@media (max-width:640px){ .pje-feat-card--wide{ grid-column:span 1; flex-direction:column; } }
.pje-feat-card--wide .pje-feat-photo{ aspect-ratio:auto; width:42%; flex-shrink:0; }
@media (max-width:640px){ .pje-feat-card--wide .pje-feat-photo{ width:100%; aspect-ratio:4/3; } }
.pje-feat-card--wide .pje-feat-body{ justify-content:center; }
.pje-feat-card--wide .pje-feat-name{ font-size:20px; }

/* ============================================================ */
/* CAPÍTULO 03 -- cierre comercial unificado                    */
/* ============================================================ */

/* ============================================================ */
/* CAPITULO 01 — BANNER "ATLAS DE PRODUCTOS"  (2026-08-24)      */
/* ------------------------------------------------------------ */
/* Sustituye a .pje-portada (navy + una sola foto). Direccion de */
/* arte de la primera propuesta: navy a la izquierda y mosaico   */
/* fotografico a la derecha con separadores finos y acento rojo. */
/* El resto de la pagina conserva el dossier tecnico editorial.  */
/* Las 5 fotografias son reales y verificadas contra los         */
/* originales de "Galeria JN".                                   */
/* ============================================================ */
.atlas{
  padding:0;
  color:#fff;
  background:
    repeating-linear-gradient(116deg,transparent 0 46px,rgba(255,255,255,.022) 47px 48px),
    linear-gradient(145deg,#001321 0%,#03243c 55%,#00172b 100%);
}
.atlas-grid{
  display:grid;
  grid-template-columns:minmax(0,43fr) minmax(0,57fr);
  /* La fila necesita minmax(0,1fr) explicito: sin esto se autodimensiona con
     la altura intrinseca de las fotos del mosaico (llegaba a 1486px) y el
     banner desbordaba su propia caja, dejando los CTA fuera de pantalla. */
  grid-template-rows:minmax(0,1fr);
  align-items:stretch;
  /* Banner editorial compacto: funciona como umbral del catálogo, no como
     una página completa. */
  height:clamp(310px,36vw,370px);
  min-height:310px;
  overflow:hidden;
}

/* ---- lado izquierdo: mensaje ---- */
.atlas-copy{
  position:relative; z-index:2; min-height:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:24px clamp(24px,3vw,42px) 24px clamp(28px,5vw,64px);
  min-width:0;
}
.atlas-kicker{
  display:flex; align-items:center; gap:9px; margin:0 0 12px;
  font:800 9.5px/1 'Archivo',sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:#ff5252;
}
.atlas-kicker-dash{ width:26px; height:2px; background:var(--brick,#d70000); flex:0 0 auto; }
.atlas-h1{
  margin:0 0 12px;
  font-family:'Archivo',sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(27px,2.65vw,38px); line-height:.94; letter-spacing:-.025em; color:#fff;
}
/* Cada linea vive dentro de una mascara para la entrada en dos bloques. */
.atlas-line{ display:block; overflow:hidden; }
.atlas-line>span{ display:block; }
.atlas-h1 em{ font-style:normal; color:var(--brick,#d70000); }
.atlas-intro{
  margin:0 0 12px; max-width:50ch;
  font-size:13px; line-height:1.45; color:rgba(255,255,255,.78);
}
.atlas-facts{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin:0 0 15px; padding:10px 0 0; border-top:1px solid rgba(255,255,255,.17);
  font:800 9.5px/1.3 'Archivo',sans-serif; letter-spacing:.075em; text-transform:uppercase;
  color:rgba(255,255,255,.86);
}
.atlas-facts b{ font-weight:800; }
.atlas-sep{ width:1px; height:11px; background:rgba(255,255,255,.3); }
.atlas-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.atlas-cta-main,.atlas-cta-alt{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 17px; min-height:42px; box-sizing:border-box; border-radius:2px; text-decoration:none;
  font:800 10.5px/1 'Archivo',sans-serif; letter-spacing:.075em; text-transform:uppercase;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.atlas-cta-main{ background:var(--brick,#d70000); color:#fff; border:1px solid var(--brick,#d70000); }
.atlas-cta-main:hover{ background:#b40000; border-color:#b40000; }
.atlas-cta-alt{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); }
.atlas-cta-alt:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.atlas-cta-main:focus-visible,.atlas-cta-alt:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.atlas-ctas .arrow-cta{ transition:transform .18s ease; }
.atlas-cta-main:hover .arrow-cta,.atlas-cta-alt:hover .arrow-cta{ transform:translateX(4px); }

/* ---- lado derecho: mosaico ---- */
/* Separadores = el propio navy visto a traves de un gap de 3px. Sin marcos
   blancos, sin tarjetas, sin esquinas redondeadas. */
.atlas-mosaic{
  position:relative; min-width:0; min-height:0; height:100%;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1.14fr) minmax(0,1fr) minmax(0,.6fr);
  gap:3px;
  background:#00172b;
}
.atlas-tile{ position:relative; margin:0; overflow:hidden; min-width:0; min-height:0; background:#03243c; }
.atlas-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Cada pieza va al hueco cuya proporcion le calza, para que cover no la
   corte: la placa de cierre es nativamente muy alargada (1582x387) y por eso
   ocupa la franja inferior a todo lo ancho. */
.atlas-tile-lead{ grid-column:1; grid-row:1 / 3; }   /* camara electrica */
.atlas-tile-d{ grid-column:2; grid-row:1; }          /* solucion especial */
.atlas-tile-b{ grid-column:3; grid-row:1; }          /* urbanizacion */
.atlas-tile-a{ grid-column:2 / 4; grid-row:2; }      /* canalizacion */
.atlas-tile-c{ grid-column:1 / 4; grid-row:3; }      /* cierres (franja) */

/* Etiqueta minima. Velo solo en su franja, nunca sobre todo el producto. */
.atlas-tile figcaption{
  position:absolute; inset:auto 0 0; z-index:2; padding:22px 11px 8px;
  background:linear-gradient(transparent,rgba(0,19,33,.86));
  font:800 8.6px/1.2 'Archivo',sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.92); pointer-events:none;
}
.atlas-tile-c figcaption{ padding-top:16px; }

/* Costura diagonal roja entre el mensaje y el mosaico. */
.atlas-seam{
  position:absolute; z-index:3; left:-1px; top:0; bottom:0; width:10px;
  background:var(--brick,#d70000);
  clip-path:polygon(88% 0,100% 0,12% 100%,0 100%);
  transform-origin:top;
}

/* ================= entrada editorial (750-950 ms) ================= */
/* 1 navy · 2 titulo en dos bloques · 3 fotos por mascara · 4 linea roja
   una sola vez · 5 CTA al final. Solo transform, opacity y clip-path.    */
.atlas .atlas-line>span,
.atlas .atlas-kicker,
.atlas .atlas-intro,
.atlas .atlas-facts,
.atlas .atlas-ctas{ transition:opacity .34s ease, transform .42s cubic-bezier(.16,.76,.24,1); }
.atlas .atlas-tile{ transition:clip-path .42s cubic-bezier(.22,1,.36,1); }
.atlas .atlas-seam{ transition:transform .32s cubic-bezier(.22,1,.36,1); }

.atlas:not(.is-visible) .atlas-kicker{ opacity:0; transform:translateY(10px); }
.atlas:not(.is-visible) .atlas-line>span{ opacity:0; transform:translateY(100%); }
.atlas:not(.is-visible) .atlas-intro,
.atlas:not(.is-visible) .atlas-facts,
.atlas:not(.is-visible) .atlas-ctas{ opacity:0; transform:translateY(12px); }
.atlas:not(.is-visible) .atlas-tile{ clip-path:inset(0 0 100% 0); }
.atlas:not(.is-visible) .atlas-seam{ transform:scaleY(0); }

/* Tiempos ajustados para cerrar dentro del rango pedido: el ultimo
   elemento termina a los 920ms (antes cerraba a 1040ms). */
.atlas.is-visible .atlas-kicker{ transition-delay:.02s; }
.atlas.is-visible .atlas-line:nth-child(1)>span{ transition-delay:.06s; }
.atlas.is-visible .atlas-line:nth-child(2)>span{ transition-delay:.14s; }
.atlas.is-visible .atlas-intro{ transition-delay:.24s; }
.atlas.is-visible .atlas-facts{ transition-delay:.30s; }
.atlas.is-visible .atlas-tile-lead{ transition-delay:.20s; }
.atlas.is-visible .atlas-tile-d{ transition-delay:.26s; }
.atlas.is-visible .atlas-tile-b{ transition-delay:.32s; }
.atlas.is-visible .atlas-tile-a{ transition-delay:.38s; }
.atlas.is-visible .atlas-tile-c{ transition-delay:.44s; }
.atlas.is-visible .atlas-seam{ transition-delay:.40s; }
.atlas.is-visible .atlas-ctas{ transition-delay:.50s; }   /* cierra a 920ms */

/* El motor generico de capitulos tambien anima h1: aqui manda el timeline
   propio del banner, si no el titulo entraria dos veces. */
.pje-chapter.atlas h1{ transition:none !important; opacity:1 !important; transform:none !important; }

/* ---------------- movil ---------------- */
/* Encabezado y titulo primero, una fotografia protagonista completa y
   debajo una tira de tres secundarias. La quinta (franja de cierres) se
   oculta a proposito: el brief pide no mostrar las cinco a la vez. */
@media (max-width:960px){
  .atlas-grid{ grid-template-columns:1fr; height:auto; min-height:0; }
  .atlas-copy{ padding:36px var(--page-pad,20px) 26px; }
  .atlas-mosaic{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:auto auto;
    gap:3px;
  }
  .atlas-tile-lead{ grid-column:1 / 4; grid-row:1; aspect-ratio:16/10; }
  .atlas-tile-d{ grid-column:1; grid-row:2; aspect-ratio:1/1; }
  .atlas-tile-b{ grid-column:2; grid-row:2; aspect-ratio:1/1; }
  .atlas-tile-a{ grid-column:3; grid-row:2; aspect-ratio:1/1; }
  .atlas-tile-c{ display:none; }
  .atlas-seam{ display:none; }
  .atlas-tile figcaption{ font-size:7.6px; padding:18px 7px 6px; letter-spacing:.07em; }
}
@media (max-width:420px){
  .atlas-tile figcaption{ font-size:7px; padding:16px 5px 5px; letter-spacing:.04em; }
}
@media (max-width:640px){
  .atlas-copy{ padding:24px var(--page-pad,20px) 22px; }
  .atlas-kicker{ margin-bottom:9px; }
  .atlas-h1{ font-size:clamp(27px,8.2vw,34px); margin-bottom:10px; }
  .atlas-intro{ margin-bottom:10px; }
  .atlas-facts{ margin-bottom:12px; padding-top:8px; }
  .atlas-ctas{ gap:8px; }
  .atlas-cta-main,.atlas-cta-alt{ padding:10px 12px; font-size:9.5px; }
  .atlas-mosaic{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:104px;
  }
  .atlas-tile-lead,.atlas-tile-d,.atlas-tile-b,.atlas-tile-a{
    grid-row:1;
    grid-column:auto;
    aspect-ratio:auto;
  }
  .atlas-tile-c{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .atlas .atlas-line>span,.atlas .atlas-kicker,.atlas .atlas-intro,
  .atlas .atlas-facts,.atlas .atlas-ctas,.atlas .atlas-tile,.atlas .atlas-seam{
    transition:none !important; opacity:1 !important; transform:none !important; clip-path:none !important;
  }
}

/* ============================================================ */
/* Fotografias reales verticales en tarjetas 4:3  (2026-08-24)   */
/* ------------------------------------------------------------ */
/* Poyo, estaca y camara electrica son piezas verticales y sus   */
/* fotografias reales tambien lo son (0,75 / 0,35 / 0,75).       */
/* Medido: en una caja 4:3 con object-fit:cover ninguna cabe sin */
/* cortar el producto -- por eso las versiones anteriores        */
/* recomponian la pieza sobre un fondo mas ancho.                */
/* Aqui se usa contain SOLO en estas tres, sobre el mismo fondo  */
/* que ya tiene la tarjeta (#f0f1f0): la pieza se ve completa y  */
/* no se inventa entorno. Las otras 28 tarjetas no cambian.      */
/* ============================================================ */
.pg-card-photo img[src*="/catalogo-real/"],
.pje-feat-photo img[src*="/catalogo-real/"],
.pd-gallery-main img[src*="/catalogo-real/"]{
  object-fit:contain;
}
/* El relleno lateral toma el tono real del fondo de cada fotografia
   (muestreado de sus propias esquinas), de modo que la pieza no quede como
   un rectangulo oscuro flotando sobre un fondo claro. No se altera la
   fotografia: solo se pinta la caja que la contiene. */
.pg-card-photo:has(img[src*="poyo-real"]),
.pje-feat-photo:has(img[src*="poyo-real"]),
.pd-gallery-main:has(img[src*="poyo-real"]){ background:#1d272f; }
.pg-card-photo:has(img[src*="estaca-real-horizontal"]),
.pje-feat-photo:has(img[src*="estaca-real-horizontal"]),
.pd-gallery-main:has(img[src*="estaca-real-horizontal"]){ background:#404a55; }
.pg-card-photo:has(img[src*="camara-electrica-real"]),
.pje-feat-photo:has(img[src*="camara-electrica-real"]),
.pd-gallery-main:has(img[src*="camara-electrica-real"]){ background:#787169; }
/* Respaldo para navegadores sin :has() -- el fondo se pinta en la imagen. */
@supports not selector(:has(*)){
  .pg-card-photo img[src*="poyo-real"],.pje-feat-photo img[src*="poyo-real"]{ background:#1d272f; }
  .pg-card-photo img[src*="estaca-real-horizontal"],.pje-feat-photo img[src*="estaca-real-horizontal"]{ background:#404a55; }
  .pg-card-photo img[src*="camara-electrica-real"]{ background:#787169; }
}


/* Estaca: la fotografia real se presenta con el encuadre girado 90 grados
   (aprobado). La pieza es de 7,9:1 y asi aprovecha el ancho natural de la
   tarjeta conservando ambos extremos. El padding lateral deja un pequeno
   margen de seguridad para que no llegue a tocar los bordes: la pieza queda
   en ~86% del ancho util, centrada. El relleno muestra el fondo real de la
   propia fotografia, no un color inventado. */
.pg-card-photo img[src*="estaca-real-horizontal"],
.pje-feat-photo img[src*="estaca-real-horizontal"],
.pd-gallery-main img[src*="estaca-real-horizontal"]{
  padding:0 6%;
  box-sizing:border-box;
}