/*
  Portada de eNova — fondo de portadas (login, tapa, pantalla de bienvenida).
  Complementa al patrón de anillos (patron.css), que sigue siendo el fondo de página.
  La portada va en UNA superficie destacada, siempre en petróleo (también en páginas claras):
  la mitad de portada de un login, la tapa de un sitio, un hero.
    fondo:    petróleo con dos halos difuminados (arriba-derecha, abajo-izquierda) y un grano
              de ruido al 4,5 % que rompe las bandas del degradado
    retícula: hoja técnica de 48 px con cruces de latón cada 192 px, que se apaga hacia abajo-derecha
  Uso: <section class="enova-portada">                 (sólo fondo con halos)
       <section class="enova-portada enova-reticula">  (fondo + retícula)
  El contenido va adentro, encima (position: relative; z-index: 0 o más).
  No animarla, no cambiar colores ni opacidades, no ponerla detrás de texto largo ni de fotos.
*/
:root {
  --enova-portada-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .62 0 0 0 0 .6 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --enova-portada-halos:
    radial-gradient(ellipse 75% 65% at 100% 0%, rgba(0,107,91,.30) 0%, rgba(0,107,91,.12) 40%, transparent 75%),
    radial-gradient(ellipse 85% 75% at 0% 100%, rgba(0,80,70,.34) 0%, rgba(0,61,54,.14) 40%, transparent 75%);
  --enova-reticula-cruces: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cg stroke='%23C8A44B' stroke-opacity='.28' stroke-width='1'%3E%3Cpath d='M0 -5V5M-5 0H5M192 -5V5M187 0H197M0 187V197M-5 192H5M192 187V197M187 192H197'/%3E%3C/g%3E%3C/svg%3E");
  --enova-reticula:
    var(--enova-reticula-cruces),
    linear-gradient(rgba(200,164,75,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,164,75,.055) 1px, transparent 1px);
  --enova-reticula-size: 192px 192px, 48px 48px, 48px 48px;
  --enova-reticula-position: 24px 24px, 24px 24px, 24px 24px;
  --enova-reticula-mask: linear-gradient(160deg, #000 40%, rgba(0,0,0,.35) 100%);
}

.enova-portada {
  position: relative;
  isolation: isolate;
  background-color: #0A2320;
}
.enova-portada::before,
.enova-portada::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* fondo: grano + halos */
.enova-portada::before {
  background-image: var(--enova-portada-grano), var(--enova-portada-halos);
  background-size: 240px 240px, 100% 100%, 100% 100%;
}
/* retícula encima del fondo */
.enova-portada.enova-reticula::after {
  background-image: var(--enova-reticula);
  background-size: var(--enova-reticula-size);
  background-position: var(--enova-reticula-position);
  -webkit-mask-image: var(--enova-reticula-mask);
          mask-image: var(--enova-reticula-mask);
}