/* ============ MÓDULO DE DISPONIBILIDAD — exclusivo de RENTA =============
   Es EL diferenciador de esta landing. Venta usa un formulario consultivo
   vertical de 16 campos (dimensionar antes de cotizar); Renta usa una BARRA
   HORIZONTAL tipo reserva: fechas primero, porque quien renta ya sabe cuándo
   y lo que pregunta es si está disponible. La forma del control es parte de
   la diferencia, no solo el texto.
   ======================================================================== */
.pl-avail{position:relative;z-index:2;margin-top:-1px;background:var(--pl-bg2);
  border-top:1px solid var(--pl-line);border-bottom:1px solid var(--pl-line)}
.pl-avail .wrap{padding-top:38px;padding-bottom:38px}
.pl-avail-h{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.pl-avail-h h2{font-size:clamp(24px,2.6vw,32px)}
.pl-avail-h h2 em{font-style:normal;color:var(--pl-amber)}
.pl-avail-h p{color:var(--pl-mut);font-size:14.5px;line-height:1.55}
.pl-avail-bar{display:grid;grid-template-columns:repeat(5,1fr) auto;gap:14px;align-items:end}
.pl-avail-bar > *{min-width:0}
.pl-af{display:flex;flex-direction:column;gap:7px}
.pl-af label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--pl-faint);font-weight:700;
  font-family:var(--pl-cond)}
.pl-af input,.pl-af select{width:100%;min-width:0;background:var(--pl-bg);border:1px solid var(--pl-line2);
  border-radius:10px;color:var(--pl-ink);padding:13px 14px;font-family:var(--pl-sans);font-size:14.5px;
  transition:border-color .18s}
.pl-af input:focus,.pl-af select:focus{outline:0;border-color:var(--pl-amber)}
.pl-af input::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.55);cursor:pointer}
.pl-af select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--pl-faint) 50%),linear-gradient(135deg,var(--pl-faint) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.pl-avail-bar .pl-btn{padding:14px 26px;white-space:nowrap}
/* segunda fila: datos de contacto, aparece siempre (el lead los necesita) */
.pl-avail-me{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.pl-avail-me > *{min-width:0}
.pl-avail-legal{color:var(--pl-faint);font-size:12.5px;line-height:1.55;margin-top:16px;max-width:76ch}
.pl-avail.sent .pl-avail-bar,.pl-avail.sent .pl-avail-me,.pl-avail.sent .pl-avail-legal{display:none}
.pl-avail .ok{display:none}
.pl-avail.sent .ok{display:block;padding:20px 0 6px}
.pl-avail.sent .ok h3{font-size:26px;color:var(--pl-amber);margin-bottom:10px}
.pl-avail.sent .ok p{color:var(--pl-mut);font-size:15px;line-height:1.6;max-width:56ch}
@media (max-width:1100px){
  .pl-avail-bar{grid-template-columns:repeat(3,1fr)}
  .pl-avail-bar .pl-btn{grid-column:1/-1;width:100%}
  .pl-avail-me{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .pl-avail-bar{grid-template-columns:1fr 1fr}
  .pl-avail-me{grid-template-columns:1fr}
}

/* ============================================================================
   PLANTAS DE LUZ — Soluciones de Energía · dirección de arte editorial
   AISLADO bajo body.pl. Prefijo .pl-.

   Identidad: negro/grafito industrial + ÁMBAR ELÉCTRICO. El rojo Interfaz
   queda SOLO para el CTA global del header, para que el acento de la vertical
   no compita con la marca.
   Tipografía: Barlow Condensed para display, números y kVA; Barlow para
   párrafos (no todo condensed — se lee mucho mejor en textos largos).
   ============================================================================ */
.pl{
  --pl-bg:#090A0D; --pl-bg2:#101216; --pl-bg3:#15171C;
  --pl-line:#20232A; --pl-line2:#2C313A;
  --pl-ink:#F2F4F7; --pl-mut:#98A1AE; --pl-faint:#646D7A;
  --pl-amber:#FFB000; --pl-amber2:#FFC749; --pl-amber-dim:rgba(255,176,0,.12);
  --pl-sans:'Barlow',system-ui,-apple-system,sans-serif;
  --pl-cond:'Barlow Condensed','Barlow',sans-serif;
  background:var(--pl-bg); color:var(--pl-ink);
  font-family:var(--pl-sans); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.pl .wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.pl h1,.pl h2,.pl h3{font-family:var(--pl-cond);font-weight:800;letter-spacing:-.015em;line-height:1.04;margin:0}
.pl p{margin:0;font-family:var(--pl-sans)}
.pl a{color:inherit;text-decoration:none}
.pl img{max-width:100%;display:block}
.pl :focus-visible{outline:2px solid var(--pl-amber);outline-offset:3px;border-radius:4px}

.pl-eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--pl-cond);font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;font-size:12.5px;color:var(--pl-amber)}
.pl-eyebrow::before{content:"";width:26px;height:2px;background:var(--pl-amber)}

/* ---------- botones ---------- */
.pl-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 26px;
  border-radius:10px;font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
.pl-btn:hover{transform:translateY(-1px)}
.pl .pl-btn--p{background:var(--pl-amber);color:#171200;box-shadow:0 8px 24px rgba(255,176,0,.22)}
.pl .pl-btn--p:hover{background:var(--pl-amber2)}
.pl .pl-btn--o{border-color:var(--pl-line2);color:var(--pl-ink);background:rgba(255,255,255,.02)}
.pl .pl-btn--o:hover{border-color:var(--pl-amber);color:#fff}
/* WhatsApp: terciario, discreto — no compite con el CTA principal */
.pl .pl-btn--wa{color:var(--pl-mut);padding:0 6px;height:auto;border:0;font-weight:600;font-size:14.5px}
.pl .pl-btn--wa:hover{color:#fff;transform:none}
.pl-btn--wa svg{color:#25D366}

/* ============================ HERO ============================
   Composición editorial 45/55. La fotografía sangra al borde derecho del
   viewport y se funde con el fondo por gradiente: no parece una imagen
   metida en una tarjeta. */
/* Columna: el contenido se centra en el espacio disponible y la franja de
   confianza queda anclada al fondo. Con flex-row la franja se colocaba como
   una segunda columna y flotaba encima de la foto. */
.pl-hero{position:relative;min-height:clamp(560px,80vh,820px);display:flex;flex-direction:column;
  overflow:hidden;border-bottom:1px solid var(--pl-line)}
.pl-hero > .wrap{flex:1;display:flex;align-items:center}
.pl-hero-photo{position:absolute;top:0;right:0;bottom:0;width:62%;z-index:0}
.pl-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:58% 50%}
/* Doble gradiente: funde el borde izquierdo con el fondo y asienta la base */
.pl-hero-photo::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--pl-bg) 0%,rgba(9,10,13,.92) 26%,rgba(9,10,13,.30) 68%,rgba(9,10,13,.15) 100%),
  linear-gradient(180deg,rgba(9,10,13,.55) 0%,transparent 26%,rgba(9,10,13,.72) 100%)}
.pl-hero .wrap{position:relative;z-index:1;width:100%}
.pl-hero-in{width:min(100%,600px);padding:64px 0 40px}
.pl-h1{margin:22px 0 0;font-size:clamp(40px,5.2vw,72px);color:#fff;line-height:.98;letter-spacing:-.028em}
.pl-h1 em{font-style:normal;color:var(--pl-amber)}
.pl-hero-sub{color:#C3CAD3;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.65;max-width:52ch;
  margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.pl-hero-sub b{color:#fff;font-weight:600}
.pl-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:32px}

/* franja de confianza — inline, sin tarjetas */
.pl-strip{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.09);
  background:rgba(9,10,13,.62);backdrop-filter:blur(8px)}
.pl-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.pl-strip .it{flex:1;min-width:180px;padding:20px 0;position:relative}
/* deja aire a la derecha para que el último dato no quede bajo el botón
   flotante de WhatsApp */
.pl-strip .it:last-child{padding-right:112px}
.pl-strip .it + .it{padding-left:28px}
.pl-strip .it + .it::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:1px;background:var(--pl-line2)}
.pl-strip .k{font-family:var(--pl-cond);font-size:20px;font-weight:800;color:#fff;line-height:1.1;letter-spacing:.01em}
.pl-strip .k em{font-style:normal;color:var(--pl-amber)}
.pl-strip .v{font-size:12.5px;color:var(--pl-mut);margin-top:3px}

/* ---------- secciones ---------- */
.pl-sec{padding:88px 0;border-bottom:1px solid var(--pl-line);position:relative}
.pl-sec--alt{background:var(--pl-bg2)}
.pl-head{max-width:720px}
.pl-head h2{font-size:clamp(30px,3.6vw,46px);color:#fff;margin-top:14px}
.pl-head h2 em{font-style:normal;color:var(--pl-amber)}
.pl-head p{color:var(--pl-mut);font-size:16.5px;line-height:1.68;margin-top:14px}

/* ============ APLICACIONES — editorial, foto distinta por bloque ============ */
.pl-apps{margin-top:44px;display:grid;gap:18px}
.pl-app{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  border:1px solid var(--pl-line);border-radius:18px;overflow:hidden;background:var(--pl-bg3);
  transition:border-color .24s ease}
.pl-app:hover{border-color:var(--pl-amber)}
.pl-app:nth-child(even) .pl-app-ph{order:-1}
.pl-app-ph{position:relative;min-height:300px;background:#0c0e12}
.pl-app-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease}
.pl-app:hover .pl-app-ph img{transform:scale(1.03)}
.pl-app-tx{padding:44px 44px 40px;display:flex;flex-direction:column;justify-content:center}
.pl-app-tx .n{font-family:var(--pl-cond);font-size:13px;font-weight:800;letter-spacing:.2em;
  color:var(--pl-amber);text-transform:uppercase}
.pl-app-tx h3{font-size:29px;color:#fff;margin-top:10px}
.pl-app-tx p{color:var(--pl-mut);font-size:15px;line-height:1.7;margin-top:12px}
.pl-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.pl-tags span,.pl-tags a{border:1px solid var(--pl-line2);border-radius:999px;padding:7px 14px;
  font-size:13px;color:#C6CDD6;transition:border-color .18s,color .18s}
.pl-tags a:hover{border-color:var(--pl-amber);color:#fff}

/* ============ CAPACIDADES ============ */
.pl-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.pl-cap{border:1px solid var(--pl-line);border-radius:18px;overflow:hidden;background:var(--pl-bg3);
  display:flex;flex-direction:column;transition:border-color .24s,transform .24s}
.pl-cap:hover{border-color:var(--pl-amber);transform:translateY(-4px)}
.pl-cap-ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0c0e12}
.pl-cap-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pl-cap:hover .pl-cap-ph img{transform:scale(1.04)}
/* el número de kVA monta sobre la foto */
/* Sombra doble: una cerrada que perfila el número y otra difusa que lo asienta.
   Así el kVA aguanta tanto sobre una toma nocturna como sobre pavimento claro
   a mediodía, sin tener que oscurecer más la fotografía. */
.pl-cap-kva{position:absolute;left:20px;bottom:14px;display:flex;align-items:baseline;gap:6px;
  font-family:var(--pl-cond);color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.95), 0 3px 20px rgba(0,0,0,.75)}
.pl-cap-kva b{font-size:52px;font-weight:800;line-height:.85;color:var(--pl-amber)}
.pl-cap-kva span{font-size:17px;font-weight:700;letter-spacing:.08em}
/* Velo inferior más profundo: las fotos nuevas son tomas diurnas (cielo,
   pavimento claro) y el degradado anterior dejaba el número de kVA sin
   contraste sobre las zonas brillantes. */
.pl-cap-ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 28%,rgba(9,10,13,.55) 62%,rgba(9,10,13,.94) 100%)}
.pl-cap-b{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.pl-cap-b h3{font-size:19px;color:#fff}
.pl-cap-use{color:var(--pl-mut);font-size:14px;line-height:1.6;margin-top:8px}
.pl-cap-specs{margin-top:16px;display:grid;gap:0}
.pl-cap-specs div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px dashed var(--pl-line);font-size:13px;color:var(--pl-mut)}
.pl-cap-specs b{color:#D8DDE4;font-weight:600;font-variant-numeric:tabular-nums}
.pl-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.pl-badge{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;font-size:11.5px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-family:var(--pl-cond)}
.pl-badge--r{background:var(--pl-amber-dim);color:var(--pl-amber2);border:1px solid rgba(255,176,0,.3)}
.pl-badge--v{background:rgba(150,160,175,.14);color:#C3CAD3;border:1px solid var(--pl-line2)}
.pl-cap-go{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:7px;
  color:var(--pl-amber);font-weight:700;font-size:14px}
.pl-note{color:var(--pl-faint);font-size:13px;margin-top:22px;line-height:1.6;max-width:78ch}
.pl-note a{color:var(--pl-amber);font-weight:600}

/* ============ RENTA / VENTA ============ */
.pl-modes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.pl-mode{position:relative;border:1px solid var(--pl-line);border-radius:18px;background:var(--pl-bg3);
  padding:38px 34px 34px;overflow:hidden;transition:border-color .24s,transform .24s}
.pl-mode:hover{border-color:var(--pl-amber);transform:translateY(-3px)}
.pl-mode::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pl-amber)}
.pl-mode .k{font-family:var(--pl-cond);font-size:12.5px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--pl-amber)}
.pl-mode h3{font-size:32px;color:#fff;margin-top:10px}
.pl-mode > p{color:var(--pl-mut);font-size:15px;line-height:1.7;margin-top:12px}
.pl-mode ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.pl-mode li{color:#C6CDD6;font-size:14.5px;display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.pl-mode li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;
  background:var(--pl-amber);margin-top:8px}
.pl-mode .pl-btn{margin-top:26px}

/* ============ PROCESO 01–07 ============ */
.pl-flow{display:grid;grid-template-columns:repeat(8,1fr);gap:0;margin-top:40px;
  border:1px solid var(--pl-line);border-radius:16px;overflow:hidden;background:var(--pl-bg3)}
.pl-step{padding:26px 18px;border-right:1px solid var(--pl-line);position:relative}
.pl-step:last-child{border-right:0}
.pl-step .n{font-family:var(--pl-cond);font-size:12.5px;font-weight:800;letter-spacing:.14em;
  color:var(--pl-amber);opacity:.9}
.pl-step h3{font-size:15.5px;color:#fff;margin-top:10px;line-height:1.25}
.pl-step p{font-size:12.5px;color:var(--pl-mut);margin-top:7px;line-height:1.5}

/* ============ CROSS-SELLING ============ */
.pl-cross{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border:1px solid var(--pl-line);
  border-radius:18px;overflow:hidden;background:var(--pl-bg3);margin-top:40px}
.pl-cross-tx{padding:44px 40px}
.pl-cross-tx h3{font-size:30px;color:#fff}
.pl-cross-tx h3 em{font-style:normal;color:var(--pl-amber)}
.pl-cross-tx p{color:var(--pl-mut);font-size:15px;line-height:1.7;margin-top:12px}
.pl-cross-ph{position:relative;min-height:280px;background:#0c0e12}
.pl-cross-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ============ GALERÍA asimétrica ============ */
.pl-gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:14px;margin-top:38px}
.pl-gal figure{position:relative;margin:0;border-radius:14px;overflow:hidden;background:#0c0e12;
  border:1px solid var(--pl-line)}
.pl-gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pl-gal figure:hover img{transform:scale(1.04)}
.pl-gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 16px 12px;font-size:12.5px;
  color:#E6EAF0;background:linear-gradient(180deg,transparent,rgba(9,10,13,.88))}
/* 6 tomas en mosaico asimétrico. Las verticales (retrato de teléfono) ocupan
   una columna y dos filas; las horizontales, dos columnas. Así ninguna se
   recorta de más y la composición no queda como una cuadrícula plana. */
.pl-gal .g-a{grid-column:span 2;grid-row:span 2}
.pl-gal .g-b{grid-column:span 1;grid-row:span 2}
.pl-gal .g-c{grid-column:span 1;grid-row:span 2}
.pl-gal .g-d{grid-column:span 1;grid-row:span 2}
.pl-gal .g-e{grid-column:span 1;grid-row:span 2}
.pl-gal .g-f{grid-column:span 2;grid-row:span 2}

/* ============ CIERRE / CONTACTO ============
   Aquí viven los teléfonos — NO en el hero. */
.pl-cta{padding:84px 0;background:
  linear-gradient(130deg,rgba(255,176,0,.07),transparent 58%),var(--pl-bg2);
  border-bottom:1px solid var(--pl-line)}
.pl-cta .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.pl-cta h2{font-size:clamp(30px,3.6vw,44px);color:#fff}
.pl-cta h2 em{font-style:normal;color:var(--pl-amber)}
.pl-cta p{color:var(--pl-mut);font-size:16px;line-height:1.68;margin-top:14px}
.pl-contact{border:1px solid var(--pl-line2);border-radius:16px;background:rgba(9,10,13,.55);padding:26px 26px 24px}
.pl-contact h3{font-family:var(--pl-cond);font-size:12.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--pl-faint)}
.pl-tel{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--pl-line)}
.pl-tel:last-of-type{border-bottom:0}
.pl-tel .l{font-size:12.5px;color:var(--pl-mut)}
.pl-tel .n{font-family:var(--pl-cond);font-size:21px;font-weight:800;color:#fff;letter-spacing:.01em}
.pl-tel:hover .n{color:var(--pl-amber)}
.pl-contact .pl-btn{width:100%;margin-top:16px}

/* ---------- reveal ---------- */
.pl-anim .pl-rev{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
.pl-anim .pl-rev.in{opacity:1;transform:none}

/* ============================ RESPONSIVE ============================ */
@media(max-width:1180px){
  .pl-flow{grid-template-columns:repeat(4,1fr)}
  .pl-step:nth-child(4){border-right:0}
  .pl-step{border-bottom:1px solid var(--pl-line)}
  .pl-step:nth-child(n+5){border-bottom:0}
}
@media(max-width:1024px){
  .pl-hero-photo{width:52%}
  .pl-caps{grid-template-columns:1fr 1fr}
  .pl-cross{grid-template-columns:1fr}
  .pl-cross-ph{min-height:220px;order:-1}
  .pl-cta .wrap{grid-template-columns:1fr;gap:30px}
  .pl-gal{grid-auto-rows:160px}
}
@media(max-width:860px){
  .pl .wrap{padding:0 22px}
  .pl-sec{padding:62px 0}
  /* Móvil: eyebrow → headline → copy → CTA → FOTO → datos.
     La foto va primera en el DOM porque en desktop se posiciona absoluta; aquí
     se reordena con flex. Ojo: display:block ignora `order` — tiene que seguir
     siendo flex column para que el reordenamiento surta efecto. */
  .pl-hero{min-height:auto;display:flex;flex-direction:column}
  .pl-hero > .wrap{flex:none}
  .pl-hero-photo{position:relative;width:100%;height:290px;order:2}
  .pl-strip{order:3}
  .pl-hero-photo::after{background:
    linear-gradient(180deg,rgba(9,10,13,.35),rgba(9,10,13,.15) 45%,var(--pl-bg) 100%)}
  .pl-hero .wrap{order:1}
  .pl-hero-in{padding:44px 0 30px;width:100%}
  .pl-app{grid-template-columns:1fr}
  .pl-app:nth-child(even) .pl-app-ph{order:0}
  .pl-app-ph{min-height:220px}
  .pl-app-tx{padding:30px 26px 32px}
  .pl-modes{grid-template-columns:1fr}
  .pl-strip .it{flex:1 1 50%;min-width:0;padding:16px 0}
  .pl-strip .it + .it{padding-left:0}
  .pl-strip .it + .it::before{display:none}
  .pl-strip .it:nth-child(even){padding-left:20px}
  .pl-gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .pl-gal .g-a,.pl-gal .g-f{grid-column:span 2;grid-row:span 1}
  .pl-gal .g-b,.pl-gal .g-c,.pl-gal .g-d,.pl-gal .g-e{grid-column:span 1;grid-row:span 2}
}
@media(max-width:620px){
  .pl-caps{grid-template-columns:1fr}
  .pl-flow{grid-template-columns:1fr 1fr}
  .pl-step{border-right:1px solid var(--pl-line);border-bottom:1px solid var(--pl-line)}
  .pl-step:nth-child(even){border-right:0}
  .pl-ctas{flex-direction:column;align-items:stretch}
  .pl-ctas .pl-btn{width:100%}
  .pl-ctas .pl-btn--wa{margin-top:2px}
  .pl-gal{grid-template-columns:1fr;grid-auto-rows:180px}
  .pl-gal .g-a,.pl-gal .g-b,.pl-gal .g-c,.pl-gal .g-d,.pl-gal .g-e,.pl-gal .g-f{
    grid-column:span 1;grid-row:span 1}
}
@media(prefers-reduced-motion:reduce){
  .pl *{transition:none !important;animation:none !important}
  .pl-anim .pl-rev{opacity:1;transform:none}
}