/* ==========================================================================
   AJAXPERU — Sistema de diseño "moderno" (2026)
   Se carga DESPUÉS de estilos.css / responsive.css y los sobreescribe.
   Paleta azul, tipografía Space Grotesk + Manrope, tarjetas con hover,
   animaciones de entrada al hacer scroll (ver iniciales.js → jsReveal).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#0B1220;
  --ink-2:#101A2E;
  --paper:#F5F8FC;
  --paper-2:#EAF1FB;
  --text:#101827;
  --muted:#5B6B85;
  --muted-light:#A9B8CE;
  --line:#DCE6F2;
  --accent:#2F6FEF;
  --accent-2:#5EC8FF;
  --accent-deep:#12306B;
  --whatsapp:#20B858;
  --radius:16px;
  --radius-sm:10px;
  --shadow-card:0 24px 44px -28px rgba(11,18,32,0.28);
}

/* ---------------------------------------------------------------------- */
/* Base / tipografía                                                      */
/* ---------------------------------------------------------------------- */
body{
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Space Grotesk','Manrope',system-ui,sans-serif;
  letter-spacing:-0.01em;
}
strong{ color:var(--accent-deep); font-weight:800; }
.rojo{ color:var(--accent-deep); }
a{ color:var(--accent); }
a:hover{ color:var(--accent-deep); }

/* ---------------------------------------------------------------------- */
/* Scroll-reveal utility (activado por iniciales.js vía IntersectionObserver) */
/* ---------------------------------------------------------------------- */
.jsReveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.jsReveal.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .jsReveal{ opacity:1; transform:none; transition:none; }
}
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------------------- */
/* Header / navegación                                                    */
/* ---------------------------------------------------------------------- */
header{
  background:rgba(11,18,32,0.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:none;
  border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
}
.headerInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:min(1280px, 94%);
  margin:0 auto;
}
.headerIzq, .headerDer{ float:none; width:auto; }
.logo img{ width:auto; max-height:52px; }
/* estilos.css trae "nav ul { margin: 25px 0 0 0; }" — era un hack para el
   header antiguo (sin flexbox) que ahora empuja el menú hacia abajo y lo
   descentra respecto al logo. Lo anulamos solo en el menú de escritorio. */
.headerDer nav ul{ margin:0; }
nav ul li a{
  color:rgba(255,255,255,0.82);
  font-weight:600;
  font-size:14.5px;
  position:relative;
}
nav ul li a::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background:var(--accent);
  transition:right .25s ease;
}
nav ul li a:hover, nav ul li a.active{ color:#fff; }
nav ul li a:hover::after, nav ul li a.active::after{ right:0; }

.menuCelular{
  background:rgba(11,18,32,0.97);
  backdrop-filter:blur(14px);
}
.menuCelular nav ul li a{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
}
.menuCelular nav ul li a:hover, .menuCelular nav ul li a.active{ color:var(--accent-2); }
.hamburguesa img{ filter:invert(1) brightness(1.6); transition:transform .2s ease; }
.hamburguesa:hover img{ transform:scale(1.08); }
.cierre img{ filter:invert(1) brightness(1.6); }

/* ---------------------------------------------------------------------- */
/* Botones                                                                 */
/* ---------------------------------------------------------------------- */
.boton{
  background-color:var(--accent) !important;
  color:#fff !important;
  border-radius:100px;
  padding:0.95rem 1.7rem;
  font-weight:700;
  box-shadow:0 14px 30px -14px rgba(47,111,239,0.6);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.boton:hover{ transform:translateY(-3px); box-shadow:0 18px 36px -12px rgba(47,111,239,0.75); }
.boton a{
  color:#fff !important;
  background-color:transparent !important;
  border:none !important;
  padding:0 !important;
  font-weight:700 !important;
}
.btn.btn-primary,
.btn-fucsia{
  background-color:var(--accent) !important;
  border-color:var(--accent) !important;
  border-radius:100px;
  font-weight:700;
  letter-spacing:0.02em;
  padding:12px 34px;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 14px 28px -14px rgba(47,111,239,0.55);
}
.btn.btn-primary:hover,
.btn-fucsia:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -10px rgba(47,111,239,0.7); }

/* ---------------------------------------------------------------------- */
/* Encabezados de sección (subtítulos, contenidoSeccion, artículos)        */
/* ---------------------------------------------------------------------- */
.subtitulo h2{ color:var(--text); }
.subtitulo h2::after,
.contenidoSeccion h2::after,
.divTituloArticulo h1::after{
  border-bottom-color:var(--accent) !important;
}
.contenidoSeccion h2,
.contenidoSeccion h3,
.contenidoSeccion h4,
.tituloRelacionados h2,
.divTituloArticulo h1,
h2.tituloAzulPago{
  color:var(--text);
}
.pagination li.active a{ background-color:var(--accent) !important; }

/* ---------------------------------------------------------------------- */
/* Banners de sección internas (.bannerParallax + .tituloSeccion)          */
/* ---------------------------------------------------------------------- */
.bannerParallax{
  height:300px;
}
.bannerParallax::after{
  background:linear-gradient(120deg, rgba(11,18,32,0.90), rgba(18,48,107,0.74));
}
.bannerParallax::before{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(32% 60% at 12% 30%, rgba(94,200,255,0.28), transparent 65%),
    radial-gradient(28% 55% at 88% 75%, rgba(47,111,239,0.30), transparent 65%);
  filter:blur(30px);
}
.tituloSeccion{ top:0; height:100%; display:flex; align-items:center; justify-content:center; z-index:2; }
.tituloSeccion h1,
.tituloSeccionBajo{
  animation:fadeInUp .8s cubic-bezier(.2,.7,.2,1) both;
  font-size:clamp(28px,4vw,44px) !important;
}
.tituloSeccion h1::after{
  content:'';
  display:block;
  width:64px; height:3px;
  background:var(--accent-2);
  margin:18px auto 0;
  border-radius:2px;
}

/* ---------------------------------------------------------------------- */
/* Cuerpo de las páginas internas (.contenidoSeccion + .submenuLateral)    */
/* ---------------------------------------------------------------------- */
section:has(.contenidoSeccion){ padding:56px 0 80px; }
.contenidoSeccion{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:44px 48px !important;
}
.contenidoSeccion h2{ font-size:26px; }
.contenidoSeccion h2::after{ margin:12px 0 22px 0; }
.contenidoSeccion p{ color:var(--muted); line-height:1.75; }
.submenuLateral{ padding-top:0; }
.submenuLateral ul li a{ padding:13px 16px; }
@media (max-width:900px){
  .contenidoSeccion{ padding:28px 24px !important; }
}

/* ---------------------------------------------------------------------- */
/* Sidebar de subsecciones                                                 */
/* ---------------------------------------------------------------------- */
.submenuLateral ul li a{
  background:#fff;
  border:1px solid var(--line);
  border-left:3px solid var(--line);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom:6px;
  font-weight:600;
  color:var(--text);
}
.submenuLateral ul li a:hover{
  border-left-color:var(--accent);
  background:var(--paper-2);
  color:var(--accent-deep);
}
.submenuLateral ul li a.active{
  border-left-color:var(--accent);
  background:var(--paper-2);
  color:var(--accent-deep);
  font-weight:800;
}

/* ---------------------------------------------------------------------- */
/* Tarjetas: cluster (home), artHome (home blog), trabajos, artículos      */
/* ---------------------------------------------------------------------- */
.cluster, .artHome, .trabajo, .articulo, .caracteristica{
  border-radius:var(--radius);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.cluster:hover, .artHome:hover, .trabajo:hover, .articulo:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-card);
}
.artHome{ border-color:var(--line); overflow:hidden; }
.artHome .tituloArt{ background:var(--paper-2); }
.artHome .linkArt{ background:var(--accent); }
.artHome .linkArt a{ color:#fff; }

.trabajo{ box-shadow:0 10px 24px -16px rgba(11,18,32,0.25); overflow:hidden; }
.tituloTrabajo{ border-top-color:var(--accent); }
.linkTrabajo a{ background-color:var(--accent); }

.tituloArticulo, .innerTituloArticulo a{ color:var(--text); }
.linkArticulo a{ color:var(--accent); font-weight:700; }
.linkArticulo span:after{ filter:none; }

.tituloMasLeidos{ background:var(--paper-2); color:var(--accent-deep); }

/* Íconos FontAwesome usados en listas de características (hosting, páginas) */
.fa, .fas, .far{ color:var(--accent); }
.caracteristica h3, .caractHosting h3{ color:var(--text); }

/* ---------------------------------------------------------------------- */
/* Formularios                                                             */
/* ---------------------------------------------------------------------- */
.divForm{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.cabeceraForm{
  background:var(--ink);
  border-radius:0;
}
.form-control{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:10px 14px;
}
.form-control:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(47,111,239,0.15);
}
.control-label{ color:var(--text); font-weight:700; }

/* ---------------------------------------------------------------------- */
/* Tablas de planes / precios                                             */
/* ---------------------------------------------------------------------- */
.cabeceraTabla, .precioTabla{ background:var(--ink); }
.tituloTabla, .celdaSubtituloTabla{ background:var(--paper-2); border-color:var(--line); }
.celdaTabla{ background:#fff; border-color:var(--line); }

/* ---------------------------------------------------------------------- */
/* Paginación                                                              */
/* ---------------------------------------------------------------------- */
.pagina a{ background-color:var(--accent); }
.pagina a:hover{ color:var(--accent); }
.pagina a.active{ background-color:var(--accent-deep); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                   */
/* ---------------------------------------------------------------------- */
footer{ background-color:var(--ink); padding:56px 0 0; }
.footerModerno{ padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.1); }
.footerTagline{
  color:rgba(255,255,255,0.5); font-size:14.5px; line-height:1.7;
  max-width:300px; margin-top:16px;
}
.footerHeading{
  font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; color:#fff; margin-bottom:6px;
}
.infoFooter h4, .infoFooter p.footerHeading{ font-family:'Space Grotesk',sans-serif; }
.infoFooter ul{ margin-top:14px; }
.infoFooter ul li{
  color:rgba(255,255,255,0.68); display:flex; align-items:center; gap:10px;
  margin-bottom:12px; font-size:14.5px;
}
.infoFooter ul li svg{ width:17px; height:17px; stroke:var(--accent-2); flex-shrink:0; }
.infoFooter ul li a{ color:inherit; }
.infoFooter ul li a:hover{ color:#fff; }
ul.sociales{ display:flex; gap:12px; margin-top:14px; }
ul.sociales li{ float:none; margin-right:0; font-size:inherit; }
ul.sociales li a{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,0.18);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
ul.sociales li a img{ width:20px; height:20px; }
ul.sociales li a:hover{ background:var(--accent); border-color:var(--accent); transform:translateY(-3px); }
.footerBottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:20px 0 56px; font-size:13px; color:rgba(255,255,255,0.42);
}

/* WhatsApp flotante */
.whatsapp{
  background-color:var(--whatsapp);
  border-radius:100px;
  box-shadow:0 16px 30px -14px rgba(32,184,88,0.6);
  position:fixed;
}
.whatsapp::before{
  content:'';
  position:absolute; inset:0; border-radius:100px;
  border:2px solid var(--whatsapp); opacity:.6;
  animation:pulseRing 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes pulseRing{
  0%{ transform:scale(1); opacity:.6; }
  100%{ transform:scale(1.18); opacity:0; }
}

/* ---------------------------------------------------------------------- */
/* Tarjetas de planes de Hosting (home + hosting/planes)                   */
/* ---------------------------------------------------------------------- */
.pricingGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.pricingCard{
  position:relative;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 30px; display:flex; flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.pricingCard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:transparent; }
.pricingCard.destacado{ border-color:var(--accent); box-shadow:0 24px 48px -26px rgba(47,111,239,0.4); }
.pricingCard .badgeDestacado{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#fff; font-size:12px; font-weight:700;
  letter-spacing:0.04em; padding:6px 16px; border-radius:100px; white-space:nowrap;
}
.pricingCard .planNombre{
  font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--accent);
}
.pricingCard .planPrecio{
  font-family:'Space Grotesk',sans-serif; font-size:38px; font-weight:700;
  color:var(--text); margin:14px 0 2px;
}
.pricingCard .planPrecio small{ font-size:14px; font-weight:600; color:var(--muted); }
.pricingCard .planPeriodo{ font-size:13px; color:var(--muted); margin-bottom:24px; }
.pricingCard .planFeatures{ list-style:none; margin:0 0 28px; padding:0; flex-grow:1; }
.pricingCard .planFeatures li{
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--line);
  font-size:14.5px; color:var(--text);
}
.pricingCard .planFeatures li:last-child{ border-bottom:none; }
.pricingCard .planFeatures li svg{ width:17px; height:17px; stroke:var(--accent); flex-shrink:0; margin-top:2px; }
.planComprar{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:#fff !important; font-weight:700; font-size:14.5px;
  padding:14px 20px; border-radius:100px; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 14px 26px -14px rgba(47,111,239,0.55);
}
.planComprar:hover{ color:#fff !important; transform:translateY(-2px); box-shadow:0 18px 30px -10px rgba(47,111,239,0.7); }
@media (max-width:900px){
  .pricingGrid{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------- */
/* Checkout de compra (hosting/comprar/:plan)                              */
/* ---------------------------------------------------------------------- */
.checkoutWrap{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:36px; align-items:start;
}
.checkoutResumen{
  background:var(--ink); color:#fff; border-radius:var(--radius);
  padding:36px 32px; position:sticky; top:110px;
}
.checkoutResumen h2{ color:#fff; font-size:24px; margin:10px 0 18px; }
.checkoutPrecio{ font-family:'Space Grotesk',sans-serif; font-size:34px; font-weight:700; color:var(--accent-2); }
.checkoutPrecio small{ font-size:13px; font-weight:600; color:rgba(255,255,255,0.6); }
.checkoutNota{ font-size:14px; line-height:1.7; color:rgba(255,255,255,0.62); margin:16px 0 20px; }
.checkoutResumen .card-link{ color:var(--accent-2); }
.checkoutFormCard{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-card); padding:36px 32px;
}
.checkoutFormCard h3{ margin-top:0; margin-bottom:20px; font-size:19px; }
.checkoutErrores{
  background:#FDECEC; border:1px solid #F5B5B5; color:#8A1F1F;
  border-radius:var(--radius-sm); padding:16px 18px; margin-bottom:20px;
}
.checkoutErrores ul{ margin:0; padding-left:18px; }
.checkoutErrores li{ font-size:14px; line-height:1.6; }
.checkoutFormCard .form-group{ margin-bottom:16px; }
.checkoutFormCard label{ display:block; margin-bottom:6px; font-weight:700; font-size:13.5px; }
@media (max-width:820px){
  .checkoutWrap{ grid-template-columns:1fr; }
  .checkoutResumen{ position:static; }
}

/* Botón volver arriba — el ícono SVG viene con fill blanco baked-in,
   por eso el círculo debe ser oscuro/acento y no blanco (quedaba invisible). */
.toTop{
  background-color:var(--accent);
  box-shadow:0 14px 28px -14px rgba(47,111,239,0.55);
  border:none;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, background-color .2s ease;
}
.toTop img{ width:20px; height:20px; }
.toTop:hover{ transform:translateY(-3px); background-color:var(--accent-deep); }

/* ---------------------------------------------------------------------- */
/* Home — hero, servicios, artículos (clases nuevas usadas en inicio_view) */
/* ---------------------------------------------------------------------- */
.heroModerno{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  padding:170px 0 130px;
  margin-top:0;
}
.heroModerno .heroMesh{
  position:absolute; inset:-20%;
  background:
    radial-gradient(38% 45% at 18% 22%, rgba(47,111,239,0.55), transparent 60%),
    radial-gradient(32% 40% at 82% 18%, rgba(94,200,255,0.30), transparent 60%),
    radial-gradient(45% 55% at 65% 85%, rgba(47,111,239,0.20), transparent 60%);
  filter:blur(60px);
  animation:meshDrift 18s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes meshDrift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(-3%,2%,0) scale(1.08); }
}
.heroModerno .heroGrid{
  position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(60% 60% at 50% 40%, black, transparent);
}
.heroModerno .heroShape{
  position:absolute; border-radius:50%;
  border:1px solid rgba(255,255,255,0.14);
  animation:floaty 9s ease-in-out infinite;
  z-index:0;
}
.heroModerno .heroShape.s1{ width:130px; height:130px; top:16%; right:12%; }
.heroModerno .heroShape.s2{ width:64px; height:64px; top:62%; right:22%; border-color:rgba(47,111,239,0.5); animation-delay:1.4s; }
.heroModerno .heroShape.s3{ width:22px; height:22px; top:30%; right:6%; background:var(--accent); border:none; animation-delay:.7s; }
@keyframes floaty{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-22px) rotate(8deg); }
}
.heroModerno .container-header{ position:relative; z-index:1; max-width:900px; }
.heroModerno .content-header{ flex-direction:column; align-items:flex-start; width:100%; }
.heroModerno .content-header > *{ width:auto; max-width:100%; margin-left:0; margin-right:0; }
.heroModerno .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent-2); margin-bottom:22px;
}
.heroModerno .eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--accent-2); }
.heroModerno h1{
  font-size:clamp(32px,4.6vw,52px);
  line-height:1.08; font-weight:600; color:#fff; text-align:left;
  margin:0 auto; max-width:none;
}
.heroModerno .main-title{
  font-family:'Space Grotesk',sans-serif; font-weight:500;
  font-size:clamp(19px,2.2vw,26px); line-height:1.35;
  color:rgba(255,255,255,0.88); text-align:left; width:auto; margin:30px 0 24px; padding:0;
}
.heroModerno .main-title span{ color:var(--accent-2); font-weight:700; }
.heroModerno .subtitle{
  color:rgba(255,255,255,0.6); text-align:left; width:auto; margin:0 0 40px; padding:0;
  font-size:16.5px; line-height:1.7; max-width:560px;
}
.heroModerno .subtitle span{ color:var(--accent-2); }
.heroModerno .boton{ margin:0 !important; display:inline-flex; align-items:center; gap:10px; }

.eyebrow-seccion{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow-seccion::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); }

.serviciosGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.servicioCard{
  background:#fff; border:1px solid var(--line); border-radius:22px; padding:38px 32px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.servicioCard:hover{ transform:translateY(-8px); border-color:transparent; box-shadow:var(--shadow-card); }
.servicioIcono{
  width:56px; height:56px; border-radius:16px; background:var(--ink);
  display:flex; align-items:center; justify-content:center; margin-bottom:24px;
  transition:background .35s ease, transform .35s ease;
}
.servicioIcono svg{ width:26px; height:26px; stroke:var(--accent-2); }
.servicioCard:hover .servicioIcono{ background:var(--accent); transform:scale(1.06) rotate(-4deg); }
.servicioCard:hover .servicioIcono svg{ stroke:#fff; }
.servicioCard h3{ font-size:19.5px; font-weight:600; margin:0 0 12px; }
.servicioCard p{ font-size:15px; line-height:1.7; color:var(--muted); margin:0; text-align:left; }

.articulosGridModerno{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.articuloCardModerno{ display:flex; flex-direction:column; }
.articuloThumbModerno{
  position:relative; height:180px; border-radius:18px; overflow:hidden; margin-bottom:20px;
  background:linear-gradient(135deg,#2F6FEF 0%,#0B1220 78%);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.articuloCardModerno:hover .articuloThumbModerno{ transform:translateY(-4px); }
.articuloThumbModerno img{ width:100%; height:100%; object-fit:cover; }
.articuloCardModerno h3{ font-size:17.5px; font-weight:600; line-height:1.35; margin:0 0 8px; }
.articuloCardModerno p{ font-size:14.5px; line-height:1.7; color:var(--muted); margin:0 0 14px; text-align:left; }
.card-link{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:14px; color:var(--accent); }
.card-link svg{ transition:transform .25s ease; }
.card-link:hover svg{ transform:translateX(4px); }

@media (max-width:900px){
  .serviciosGrid, .articulosGridModerno{ grid-template-columns:1fr; }
  .heroModerno{ padding:150px 0 100px; }
}

/* Entrada escalonada para elementos siempre visibles en el primer viewport
   (hero de Inicio, banners internos) — no dependen del IntersectionObserver */
.heroFadeIn{ animation:fadeInUp .8s cubic-bezier(.2,.7,.2,1) both; }
.heroFadeIn.d1{ animation-delay:.08s; }
.heroFadeIn.d2{ animation-delay:.18s; }
.heroFadeIn.d3{ animation-delay:.28s; }
@media (prefers-reduced-motion: reduce){
  .heroFadeIn{ animation:none; }
}