/* ============================================================================
   PIE DE nexluroia.cloud — novedades + pie a tres columnas

   Copia de la estructura del pie de sistemasysoluciones.com, que es la
   referencia que eligio Matias, con la paleta de NexLuro: donde ellos usan
   naranja, va el violeta --violet.

   EXCEPCION A LA REGLA DE FONDO CLARO: el pie va oscuro, pedido explicito de
   Matias el 5/09 mirando la referencia ("todo igual, tal cual, una copia").
   El resto del sitio sigue claro. CLAUDE.md dice fondo claro siempre; esta es
   la unica parte que se aparta, y a proposito.

   Se carga DESPUES de home-redesign.css: el <footer> esta en la linea 48 del
   HTML pero los <style> siguen hasta la 1271, asi que cualquier regla escrita
   cerca del markup queda pisada.

   OJO: home-redesign.js tenia un rebuildFooter() que reemplazaba el pie
   entero al cargar la pagina. Quedo desactivado; si el pie vuelve a
   desaparecer, revisar eso primero.
============================================================================ */

/* ============================================================================
   ANCHO DE LA PAGINA — pedido de Matias el 5/09: "que ocupe todo el espacio"

   home-redesign.css encerraba TODO el sitio en `.wrap{max-width:1180px}`. En
   una pantalla de 1870 px eso dejaba unos 345 px vacios de cada lado, y era lo
   que se veia mal en computadora.

   Ya habia un intento de ensancharlo a 1420 px en un <style> del HTML, pero
   home-redesign.css se carga despues y lo volvia a 1180 en silencio. Por eso
   parecia que no habia forma de cambiarlo.

   El texto NO se estira: `.hero p`, `.hero-lead` y `.sub` tienen su propio
   max-width de 590-620 px, asi que las lineas siguen siendo comodas de leer.
   Lo que gana aire son las grillas, las tarjetas, la barra y el pie.

   Se conserva un padding lateral para que nada quede pegado al borde de la
   pantalla, y baja en tablet y celular.

   CORREGIDO despues de verlo en pantalla: sacarle el limite del todo se pasaba
   al otro extremo. Estirado a 1870 px, el hero quedaba con el texto pegado a
   la izquierda, el celular a la derecha y un vacio enorme en el medio, y las
   letras se veian chicas porque el mismo cuerpo de siempre nadaba en mucho mas
   espacio. El punto justo esta en 1760: aprovecha casi toda la pantalla sin
   que el contenido se estire hasta romperse.
============================================================================ */
.wrap {
  width: 100%;
  max-width: 1760px;
  padding-inline: 40px;
  margin-inline: auto;
}
@media (max-width: 1024px) { .wrap { padding-inline: 28px; } }
@media (max-width: 640px)  { .wrap { padding-inline: 18px; } }

/* El cuerpo sube de 16 a 17 px y los textos de apoyo acompanan. Con el
   contenedor mas ancho, el tamano viejo se veia chico. */
body { font-size: 17px; }
.hero p, .hero-lead { font-size: 19px; }
.sub { font-size: 17px; }

/* ------------------------------------------------ novedades del blog --- */
.novedades {
  padding: 70px 0 62px;
  background: var(--soft2);
}

.novedades h2 {
  margin: 0 0 30px;
  color: var(--violet);
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.novedades-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

/* La tarjeta entera es el link: sin bajada, sin fecha y sin boton, igual que
   en la referencia. Menos elementos compitiendo por el clic. */
.nota-card { display: block; color: inherit; text-decoration: none; }

/* Altura fija ademas de aspect-ratio. Con aspect-ratio solo, cualquier regla
   de img del sitio que toque height gana y las fotos salen verticales. */
.nota-card img {
  display: block;
  width: 100%;
  height: 190px;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 4px;
  background: var(--line);
  transition: opacity .2s ease;
}
.nota-card h3 {
  margin: 18px 0 0;
  color: var(--ink);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -.01em;
  transition: color .2s ease;
}
.nota-card:hover img { opacity: .88; }
.nota-card:hover h3 { color: var(--violet); }

/* ------------------------------------------------------- el pie oscuro --- */
footer.pie {
  background: #2d2d2d;
  color: #d6d6d6;
  padding: 54px 0 0;
  border: 0;
}

.pie-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* Cada titulo de columna lleva la rayita corta de acento adelante, como en la
   referencia. */
.pie-col h4 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  color: var(--violet);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pie-col h4::before {
  content: "";
  width: 22px;
  height: 2px;
  flex: none;
  background: var(--violet);
}

.pie-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 15px; }
.pie-col a { color: #d6d6d6; text-decoration: none; transition: color .2s ease; }
.pie-col a:hover { color: #fff; }

/* Contacto: icono + dato, alineados arriba porque la ubicacion puede ocupar
   dos lineas. */
.pie-dato { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; font-size: 16px; }
.pie-dato svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--violet); }
.pie-dato span { color: #d6d6d6; }

/* Bloque de contacto directo. Reemplaza al newsletter de la referencia: no hay
   lista de correos ni quien escriba una, y un campo de mail que no va a ningun
   lado es peor que no ponerlo. */
.pie-cta p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: #d6d6d6; }
.pie-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 4px;
  background: var(--violet);
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  transition: filter .2s ease, transform .2s ease;
}
.pie-btn:hover { filter: brightness(1.12); transform: translateY(-1px); color: #fff !important; }

/* Los logos van en GRIS, no en el color de cada marca. Con los colores reales
   quedaban gritones sobre el fondo oscuro y se comian la atencion del pie.
   Los SVG usan fill:currentColor, asi que el color sale de aca. */
.pie-redes { margin-top: 30px; }
.pie-redes .iconos { display: flex; gap: 18px; align-items: center; }
.pie-redes a {
  display: inline-flex;
  color: #9a9a9a;
  transition: color .2s ease, transform .2s ease;
}
.pie-redes a:hover { color: #fff; transform: translateY(-2px); }
.pie-redes svg { width: 28px; height: 28px; display: block; }

.pie-legal {
  margin-top: 46px;
  padding: 19px 0 22px;
  border-top: 1px solid #414141;
  color: #b4b4b4;
  font-size: 14px;
  text-align: center;
}
.pie-legal a { color: #b4b4b4; text-decoration: none; }
.pie-legal a:hover { color: #fff; }

/* ------------------------------------------------- volver arriba --- */
/* Encima del flotante de WhatsApp, que ya existia. Aparece recien despues de
   scrollear para no tapar nada al entrar. */
#subir {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: .25s ease;
  box-shadow: 0 8px 22px #0b102040;
}
#subir.visible { opacity: 1; visibility: visible; transform: none; }
#subir:hover { filter: brightness(1.12); }
#subir svg { width: 21px; height: 21px; }

/* ------------------------------------------------------- responsive --- */
@media (max-width: 1100px) {
  .novedades-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .pie-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  .novedades { padding: 52px 0 46px; }
  .novedades-grid { grid-template-columns: 1fr; gap: 24px; }
  .nota-card img { height: 210px; }
  .pie-grid { grid-template-columns: 1fr; gap: 34px; }
  #subir { right: 15px; bottom: 80px; width: 44px; height: 44px; }
}