/*
  lg-hero.css — andamiaje del hero de LedGrafic.com.ar
  Versión propia del bloque que en ModuTec está escrito 39 veces con Tailwind por CDN.
  Va en UNA sola hoja; cada modulo mod_custom de la posicion `hero` sólo lleva markup.

  Donde se sube este archivo (decisión de deployment, no de diseño):
    templates/astroid_three/css/lg-hero.css   (se carga desde el estilo astroid_three)
  y NO se copia dentro de cada modulo: es justamente lo que se quiere evitar.

  Tokens: los dos colores no son inventados. #0B1D3A y #00C853 son los únicos dos
  colores que ya usan los 33 articulos generados del sitio (badge CARTELGRAFIC y
  badge MODUTEC). Si LedGrafic define paleta propia, se cambian acá solamente.
*/

:root {
  --lg-navy: #0B1D3A;        /* primario: fondo del hero, titulos sobre blanco   */
  --lg-green: #00C853;       /* acento: energía / uptime / CTA                    */
  --lg-ink: #10141b;
  --lg-mut: #6b7686;
  --lg-line: #e4e7ec;
  /* Tokens de tinta y de superficie, separados del color de marca. Hacen falta
     por separado: --lg-navy es a la vez fondo del hero y color de los titulos,
     y en modo oscuro el fondo tiene que seguir siendo navy pero el titulo no
     puede seguir siendo navy. Estos si se pueden redefinir. */
  --lg-titulo: #0B1D3A;    /* titulos sobre superficie clara */
  --lg-body: #26313f;      /* tinta del cuerpo del articulo */
  --lg-surface: #fff;      /* fondo de tarjetas y de las celdas de medida */
  --lg-soft: #f6f8fb;      /* fondo de los avisos */
  --lg-shell: 1200px;        /* el mismo ancho que ModuTec usa en sus 47 bloques  */
  /* MEDIDO EN NAVEGADOR el 2026-10-23 sobre ledgrafic.com.ar y modutec.com.ar
     (ambos astroid_three con params vacios, viewport 582px):
     el header principal es position:STATIC y mide 70px / 60px. No flota, no
     pisa el contenido: por eso el hero NO lleva el margin-top negativo que
     ModuTec repite 38 veces (-200/+200), que solo deja 200px de aire muerto.
     Lo unico que se superpone es el clon sticky (fixed, padding 10+10, logo
     max-height 25) medido en 60px; sirve para anclas y barras pegajosas. */
  --lg-header-h: 70px;       /* header static: 60 en ModuTec, 70 en LedGrafic      */
  --lg-sticky-h: 60px;       /* clon fixed: se usa en scroll-margin-top            */
  --lg-fs-title: clamp(34px, 5.2vw, 60px);
  --lg-r: 20px;
}

/* ---- modo oscuro --------------------------------------------------------- */
/* El modo oscuro no lo inventamos: es el color mode de Astroid, medido el
   2026-10-25 en params/13.json (`astroid_color_mode_enable:"1"`,
   `astroid_color_mode_default:"auto"`) y resuelto del lado del cliente por
   `media/astroid/js/script.js`, que escribe `data-bs-theme="dark"` en <html>.
   Bootstrap trae las variables oscuras y con eso el tema solo ya se invierte
   (medido: el cuerpo queda rgb(179,179,180) sobre rgb(40,41,40), ratio 6,97,
   y las 33 paginas de la matriz no cargan esta hoja o sea no tienen nada
   que arreglar). Lo que quedaba ilegible era lo nuestro: la tinta fija de
   titulos y parrafos sobre el fondo oscuro del tema (medido 1,15 y 1,11).
   No se toca --lg-navy ni --lg-green: el hero es navy de marca en los dos
   modos y el boton verde lleva tinta navy encima. */
[data-bs-theme="dark"] {
  --lg-titulo: #e8eef7;
  --lg-body: #c6d0dd;
  --lg-mut: #94a3b8;
  --lg-ink: #dbe3ee;
  --lg-surface: #1c2530;
  --lg-soft: #16202b;
  --lg-line: #2a3542;
}

/* ---- contenedor -------------------------------------------------------- */
.lg-shell {
  max-width: var(--lg-shell);
  margin-inline: auto;
  padding-inline: 16px;
}

/* ---- banda superior ---------------------------------------------------- */
/* La foto va en un <img class="lg-hero__img"> dentro del modulo, no en el
   background: asi conserva el alt y el load="lazy". */
.lg-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  background: var(--lg-navy);
  /* Sin margin-top negativo: el header de astroid_three es position:static
     (medido), asi que el hero ya arranca debajo. Ver la nota de --lg-header-h.
     El scroll-margin-top si lo necesita el clon sticky, que es fixed. */
  scroll-margin-top: var(--lg-sticky-h);
  padding-top: 40px;
  padding-bottom: 132px;   /* reserva para la franja de tiles que sube -96px */
  overflow: hidden;
}
.lg-hero--tall { min-height: 560px; padding-bottom: 176px; }   /* solo la portada */

.lg-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lg-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(11, 29, 58, .95) 0%,
    rgba(11, 29, 58, .82) 45%,
    rgba(11, 29, 58, .55) 100%);
}
.lg-hero > .lg-shell { position: relative; z-index: 2; width: 100%; }

.lg-crumb {
  display: inline-block;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.lg-crumb:hover { color: #fff; border-bottom-color: var(--lg-green); }

.lg-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.lg-badge::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lg-green);
}

/* ---- eslogan ------------------------------------------------------------- */
/* La linea emotiva vive arriba del h1 y por eso no puede pintarse con --lg-green:
   el h1 de la portada ya tiene su <em> en verde a 10px de distancia. Se resuelve
   en blanco bajo, que sobre el scrim navy da 10,0 y deja que el verde siga
   siendo solo el acento del boton y del <em>. */
.lg-hero .lg-eslogan {
  margin: 16px 0 0;
  max-width: 44ch;
  font-size: clamp(15px, 1.6vw, 18px);
  font-style: italic;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255, 255, 255, .74);
  text-wrap: balance;
}
/* despues del eslogan el h1 se pega unos px: los dos son una sola idea */
.lg-eslogan + .lg-title { margin-top: 8px; }
.lg-title {
  margin: 10px 0 0;
  font-size: var(--lg-fs-title);
  line-height: 1.05;
  font-weight: 800;
  color: #fff;
  text-wrap: balance;
}
.lg-title em { font-style: normal; color: var(--lg-green); }

.lg-lead {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .90);
}

.lg-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lg-btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 14px;
  background: var(--lg-green);
  color: var(--lg-navy);
  font-weight: 800;
  text-decoration: none;
}
.lg-btn:hover { filter: brightness(.92); }
.lg-btn--ghost {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .32);
  color: #fff;
  font-weight: 600;
}

/* ---- tabla de medidas del formato -------------------------------------- */
/* ModuTec no tiene esta franja porque vende obra; LedGrafic vende un bien
   tecnico y el avisador/inversor pregunta m2, pitch, nits y kW. */
.lg-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin-top: 32px;
  background: var(--lg-line);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-r);
  overflow: hidden;
}
.lg-specs > div { background: var(--lg-surface); padding: 16px 18px; }
.lg-specs dt {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lg-mut);
}
.lg-specs dd {
  margin: 6px 0 0;
  font-size: 21px;
  font-weight: 800;
  color: var(--lg-titulo);
}
.lg-specs dd small { display: block; font-size: 12px; font-weight: 600; color: var(--lg-mut); }

/* ---- grilla de tarjetas ------------------------------------------------ */
.lg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  padding-block: 44px 56px;
}
.lg-card {
  display: block;
  border-radius: var(--lg-r);
  background: var(--lg-surface);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(16, 20, 27, .10);
  text-decoration: none;
  color: inherit;
}
.lg-card:hover { box-shadow: 0 12px 34px rgba(16, 20, 27, .18); }

.lg-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--lg-navy);
  overflow: hidden;
}
.lg-card__media img,
.lg-card__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Sin multimedia no hay tarjeta rota: la variante tipografica es de primera
   clase, porque LedGrafic hoy tiene 16 fotos y 0 videos en todo el disco. */
.lg-card__media--none {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-align: center;
}

.lg-card__body { padding: 18px 20px 22px; }

/* lo que todavia no esta medido: se dice, no se esconde */
.lg-avisos {
  margin: 26px 0 0;
  padding: 18px 22px 18px 40px;
  border-left: 4px solid var(--lg-green);
  background: var(--lg-soft);
  color: var(--lg-ink);
  font-size: 14px;
  line-height: 1.6;
}
.lg-avisos li { margin: 6px 0; }

.lg-card__body h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--lg-titulo);
}
.lg-card__body p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lg-mut);
}

/* tarjetas-enlace de la portada (la franja de 4 de ModuTec) */
.lg-grid--tiles { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px;
                  margin-top: -96px; position: relative; z-index: 3; }
.lg-tile { position: relative; display: block; height: 300px; border-radius: var(--lg-r);
           overflow: hidden; box-shadow: 0 10px 30px rgba(16, 20, 27, .18); color: #fff;
           /* Sin foto el tile no se queda blanco: el navy de la marca hace de
              fondo y el scrim ya esta pensado para leerse encima. */
           background: var(--lg-navy);
           text-decoration: none; }
.lg-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lg-tile__scrim { position: absolute; inset: 0;
                  background: linear-gradient(0deg, rgba(8, 12, 22, .88), rgba(8, 12, 22, .18)); }
.lg-tile__body { position: absolute; bottom: 0; padding: 22px; }
.lg-tile__body h3 { margin: 0; font-size: 19px; font-weight: 800; }
.lg-tile__body p { margin: 4px 0 0; font-size: 13px; color: rgba(255, 255, 255, .78); }

/* ---- etiqueta "Simulacion" ------------------------------------------------ */
/* El generador la escribe al lado de cada <img> de material de proveedor
   (PUBLICABLES -> SIMULACION). Sale en las tres capas que llevan imagen, asi que
   se posiciona contra el contenedor relativo de cada una: .lg-hero (absolute
   respecto de la banda), .lg-card__media y .lg-tile. Va con z-index arriba del
   scrim porque el scrim se pinta despues del <img>: si la etiqueta quedara
   debajo, la capa oscura la tapa justo sobre la foto que hay que advertir. */
.lg-sim {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: rgba(8, 12, 22, .78);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  pointer-events: none;
}
/* ---- cuerpo del articulo ------------------------------------------------ */
/* El introtext va en el articulo, debajo del hero. No pide su propia hoja:
   el <link> lo trae el mod_custom de hero, que esta publicado en la misma
   pagina y con el mismo menuid. */
.lg-cuerpo { max-width: 820px; padding-block: 56px 72px; }
.lg-cuerpo h2 {
  margin: 44px 0 0;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--lg-titulo);
  text-wrap: balance;
}
.lg-cuerpo h2:first-child { margin-top: 0; }
.lg-cuerpo p {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--lg-body);
}
/* El poema va en un <p> con <br>, no en una <ul>: el selector duplica la clase
   para ganarle a .lg-cuerpo p (0-1-1), que le impondria el color del cuerpo. */
.lg-cuerpo .lg-verso {
  margin: 30px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--lg-green);
  max-width: 44ch;
  font-size: 19px;
  font-style: italic;
  line-height: 1.8;
  color: var(--lg-titulo);
}
.lg-cuerpo ul { margin: 14px 0 0; padding-left: 22px; }
.lg-cuerpo li { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--lg-body); }
.lg-cuerpo .lg-avisos { margin-top: 26px; }

/* ---- tipografia -------------------------------------------------------- */
/* Se declara la familia una sola vez. ModuTec pide Montserrat+Open Sans desde
   Google Fonts en 40 de 47 bloques; aca el cuerpo del hero se resuelve con la pila
   del sistema y Montserrat se cargo UNA vez en el template (logo_typography_options,
   2026-10-25) en vez de pegarla en cada modulo. */
.lg-hero, .lg-shell { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

/* ---- chrome del tema ---------------------------------------------------- */
/* El logo salia en la serif de la demo: .site-title del compiled-3d8c6fe0 del tema
   pide "Playfair Display". Desde el 2026-10-25 Montserrat SI esta entre las familias
   que el sitio descarga: se declaro en logo_typography_options de params/13.json y
   Astroid emite el <link> de Google Fonts (pesos 600/700/800). La regla de abajo
   queda igual y ahora pega: pide Montserrat primero y conserva la pila del sistema
   como fallback si el CDN de fuentes no responde. h1..h6 siguen en Playfair.
   El selector replica el del tema (.astroid-framework .astroid-logo-text > a.site-title,
   especificidad 0-2-1) porque con .site-title a secas perdía por especificidad. */
.astroid-framework .astroid-logo-text,
.astroid-framework .astroid-logo-text > a.site-title {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
}

/* La columna del topbar trae hideonxs/hideonsm/hideonmd: telefono y mail solo se
   ven desde 992px. Debajo de ese corte la seccion queda vacia y deja una franja
   beige de 24px arriba de todas las paginas. */
@media (max-width: 991.98px) {
  .top-bars { display: none; }
}

/* La segunda hamburguesa no es un segundo menu: es el disparador del panel
   off-canvas de la demo, y ese panel no tiene nada publicado (mide "No module
   Published on Offcanvas position", 0 enlaces). Abre una cortina vacia. Se esconde
   el disparador, no el panel: el menu de verdad (.header-mobilemenu-trigger) queda. */
.header-offcanvas-trigger,
.offcanvas-button { display: none !important; }

/* La franja beige que queda arriba del hero en el celular NO es el topbar (ese ya
   esta oculto arriba): es el padding-top:150px + padding-bottom:90px que la plantilla
   de pagina de Astroid le puso a la seccion del hero (compilado-3d8c6fe0, regla con id
   #hs-63efb3808db04c37625133). En desktop esa respiracion se ve bien; en 581px de
   ancho son 150 px de beige vacio antes de que aparezca el titulo, sobre una pantalla
   de 556 px. Se achica solo debajo del corte de 992px. El selector usa el mismo id que
   el tema para no necesitar !important; si alguien guarda de nuevo la plantilla de
   pagina y el id cambia, esta linea queda inofensiva (no rompe nada, deja de aplicar)
   y el chequeo chrome_seccion_hero del instalador lo avisa. */
@media (max-width: 991.98px) {
  #hs-63efb3808db04c37625133 { padding-top: 40px; padding-bottom: 36px; }
}

@media (max-width: 640px) {
  .lg-hero { min-height: 0; padding-block: 28px 112px; }
  .lg-grid--tiles { margin-top: -24px; }
  .lg-lead { font-size: 16px; }
  .lg-grid { gap: 16px; padding-block: 32px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-card__media video { display: none; }
  .lg-card__media--video::after {
    content: "video desactivado";
    position: absolute; inset: auto 12px 12px auto;
    font-size: 11px; color: rgba(255, 255, 255, .7);
  }
}