/* ==========================================================================
   Softeclab — capa premium  ·  v2 "impacto"
   --------------------------------------------------------------------------
   Se carga DESPUES de style.css. El tema de 2021 no se modifica.
   Revertir por completo = quitar el <link> y el <script> del layout.

   Paleta tomada del tema, no inventada:
     #0092ff (136 usos)  #091d3e (93)  #848e9f (48)
     #1f314f (16)        #e7ebef (14)  #054c8b (5)

   v1 23 ago 2026 — pulido base
   v2 23 ago 2026 — hero animado, parallax, tilt 3D, barra de progreso
   ========================================================================== */

:root {
  --sl-blue:        #0092ff;
  --sl-blue-bright: #38aaff;
  --sl-blue-deep:   #054c8b;
  --sl-navy:        #091d3e;
  --sl-slate:       #1f314f;
  --sl-gray:        #848e9f;
  --sl-line:        #e7ebef;
  --sl-mist:        #f1f5fe;

  --sl-grad-brand:  linear-gradient(125deg, #0092ff 0%, #0b74d4 55%, #054c8b 100%);
  --sl-grad-sheen:  linear-gradient(125deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%);
  --sl-grad-mist:   linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);

  --sl-shadow-sm:   0 1px 2px rgba(9,29,62,.05), 0 2px 8px rgba(9,29,62,.04);
  --sl-shadow-md:   0 4px 12px rgba(9,29,62,.07), 0 14px 34px rgba(9,29,62,.06);
  --sl-shadow-lg:   0 10px 28px rgba(9,29,62,.10), 0 28px 64px rgba(9,29,62,.10);
  --sl-shadow-xl:   0 20px 48px rgba(9,29,62,.16), 0 44px 96px rgba(9,29,62,.14);
  --sl-shadow-blue: 0 10px 26px rgba(0,146,255,.30);

  --sl-ease:    cubic-bezier(.22,.61,.36,1);
  --sl-ease-io: cubic-bezier(.65,.05,.36,1);
  --sl-fast: .22s;
  --sl-mid:  .42s;
  --sl-slow: .75s;

  --sl-r-sm: 6px;
  --sl-r-md: 12px;
  --sl-r-lg: 18px;
}

/* ==========================================================================
   1. BARRA DE PROGRESO DE LECTURA
   ========================================================================== */

.sl-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  background: transparent;
}

.sl-progress > i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0092ff, #38aaff 45%, #054c8b);
  box-shadow: 0 0 12px rgba(0,146,255,.7);
  transition: width .08s linear;
}

/* ==========================================================================
   2. HERO — el mayor cambio de todos
   ========================================================================== */

.slider { position: relative; overflow: hidden; }

/* El contenido siempre por encima de la aurora y del zoom. */
.slide-item .container { position: relative; z-index: 3; }

/* --- 2a. Ken Burns -------------------------------------------------------
   OJO: el main.js del tema convierte el <img> de .bg-img en background-image
   del propio .slide-item y elimina el div. Por eso no se puede animar una
   imagen: el JS inyecta .sl-bg, una capa propia con la misma foto, que si
   se puede transformar. Va en z-index -2, debajo del degradado oscuro del
   tema (su ::before esta en -1), para no tapar lo que hace legible el texto.
   ------------------------------------------------------------------------- */

.slide-item .sl-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.03);
  will-change: transform;
}

.slide-item.slick-active .sl-bg {
  animation: slKenBurns 20s var(--sl-ease-io) forwards;
}

@keyframes slKenBurns {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.4%, -1.8%, 0); }
}

/* --- 2b. Aurora: manchas de color que derivan sobre la imagen -------------
   Dentro del slide y en z-index 1: por encima del degradado oscuro (-1) y
   por debajo del texto (.container esta en 3).
   ------------------------------------------------------------------------- */

.slide-item .sl-aurora {
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(52px);
  transition: opacity 1.4s var(--sl-ease);
}

.slide-item.slick-active .sl-aurora { opacity: .9; }

.sl-aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

.sl-aurora span:nth-child(1) {
  width: 46vw; height: 46vw; left: -6%; top: 4%;
  background: radial-gradient(circle at 35% 35%, rgba(0,146,255,.62), rgba(0,146,255,0) 68%);
  animation: slDrift1 26s var(--sl-ease-io) infinite alternate;
}

.sl-aurora span:nth-child(2) {
  width: 38vw; height: 38vw; right: -4%; top: 22%;
  background: radial-gradient(circle at 60% 40%, rgba(56,170,255,.48), rgba(56,170,255,0) 70%);
  animation: slDrift2 32s var(--sl-ease-io) infinite alternate;
}

.sl-aurora span:nth-child(3) {
  width: 30vw; height: 30vw; left: 34%; bottom: -12%;
  background: radial-gradient(circle at 50% 50%, rgba(5,76,139,.55), rgba(5,76,139,0) 72%);
  animation: slDrift3 22s var(--sl-ease-io) infinite alternate;
}

@keyframes slDrift1 { to { transform: translate3d(9vw, 5vh, 0) scale(1.18); } }
@keyframes slDrift2 { to { transform: translate3d(-7vw, 8vh, 0) scale(1.24); } }
@keyframes slDrift3 { to { transform: translate3d(5vw, -7vh, 0) scale(1.12); } }

/* --- 2c. Entrada del texto, disparada por .slick-active ------------------- */
/* Slick quita y pone .slick-active en cada cambio, asi que la animacion
   se vuelve a ejecutar sola en cada slide. Sin JS de por medio.            */

.sl-js .slide-item .slide__subtitle,
.sl-js .slide-item .slide__desc,
.sl-js .slide-item .slide__content .btn { opacity: 0; }

.sl-js .slide-item.slick-active .slide__subtitle {
  animation: slRise .9s var(--sl-ease) .15s both;
}

.sl-js .slide-item.slick-active .slide__desc {
  animation: slRise .9s var(--sl-ease) .70s both;
}

.sl-js .slide-item.slick-active .slide__content .btn {
  animation: slRise .9s var(--sl-ease) .88s both;
}

@keyframes slRise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: none;                    filter: blur(0); }
}

/* Titulo: cada palabra en su propia mascara, subiendo escalonada. */
.sl-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.sl-word > i {
  display: inline-block;
  font-style: inherit;
  transform: translate3d(0, 108%, 0);
  transition: none;
}

.sl-js .slide-item.slick-active .sl-word > i {
  animation: slWordUp .95s var(--sl-ease) both;
  animation-delay: calc(.30s + var(--sl-i, 0) * .055s);
}

@keyframes slWordUp {
  from { transform: translate3d(0, 108%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* El hero se va desvaneciendo al hacer scroll — lo controla el JS. */
.sl-js .slide-item.slick-active .slide__content {
  will-change: transform, opacity;
}

/* --- 2d. Indicador de scroll --------------------------------------------- */

.sl-scrollcue {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 4;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  animation: slCueIn .8s var(--sl-ease) 1.6s forwards;
}

.sl-scrollcue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 3px;
  background: #fff;
  animation: slCueDot 1.9s var(--sl-ease-io) infinite;
}

@keyframes slCueIn  { to { opacity: .85; } }
@keyframes slCueDot {
  0%   { transform: translateY(0);    opacity: 1; }
  55%  { transform: translateY(14px); opacity: .15; }
  56%  { transform: translateY(0);    opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* ==========================================================================
   3. AMBIENTE — orbes que derivan detras de las secciones claras
   ========================================================================== */

.features-layout3,
.about-layout2 { position: relative; overflow: hidden; }

.features-layout3::before,
.about-layout2::before {
  content: "";
  position: absolute;
  width: 52vw; height: 52vw;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: .55;
  background: radial-gradient(circle at 50% 50%, rgba(0,146,255,.16), rgba(0,146,255,0) 70%);
}

.features-layout3::before { top: -18%; right: -14%; animation: slDrift2 34s var(--sl-ease-io) infinite alternate; }
.about-layout2::before    { bottom: -22%; left: -16%; animation: slDrift1 40s var(--sl-ease-io) infinite alternate; }

.features-layout3 > .container,
.about-layout2 > .container { position: relative; z-index: 1; }

/* ==========================================================================
   4. TIPOGRAFIA
   ========================================================================== */

.slide__title,
.heading__title,
.page-title h1 {
  letter-spacing: -.028em;
  text-wrap: balance;
}

.slide__title { line-height: 1.04; }
.heading__title { line-height: 1.1; }

.heading__desc, .slide__desc,
.feature__desc, .process-item__desc { text-wrap: pretty; }

.heading__subtitle {
  position: relative;
  display: inline-block;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sl-blue);
}

.heading__subtitle::after {
  content: "";
  display: block;
  width: 38px; height: 2px;
  margin-top: .6rem;
  border-radius: 2px;
  background: var(--sl-grad-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--sl-slow) var(--sl-ease) .15s;
}

.is-sl-in .heading__subtitle::after,
.heading.is-sl-in .heading__subtitle::after { transform: scaleX(1); }

.text-center .heading__subtitle::after { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   5. BOTONES — gradiente, brillo, imán
   ========================================================================== */

.btn {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--sl-fast) var(--sl-ease),
    box-shadow var(--sl-fast) var(--sl-ease),
    background-color var(--sl-fast) var(--sl-ease);
}

.btn__primary {
  background-image: var(--sl-grad-brand);
  border-color: transparent;
  box-shadow: var(--sl-shadow-blue);
}

.btn__primary::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--sl-grad-sheen);
  opacity: 0;
  transition: opacity var(--sl-mid) var(--sl-ease);
  pointer-events: none;
}

.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }
.btn__primary:hover { box-shadow: 0 18px 38px rgba(0,146,255,.42); }
.btn__primary:hover::before { opacity: 1; }
.btn__secondary:hover { box-shadow: var(--sl-shadow-md); }

.btn .btn__icon,
.btn [class*="icon-arrow"] {
  display: inline-block;
  transition: transform var(--sl-mid) var(--sl-ease);
}

.btn:hover .btn__icon,
.btn:hover [class*="icon-arrow"] { transform: translateX(6px); }

/* Boton magnetico: el JS mueve --sl-mx/--sl-my. */
.sl-magnet {
  transform: translate3d(var(--sl-mx, 0px), var(--sl-my, 0px), 0);
  transition: transform .18s var(--sl-ease);
}

.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--sl-blue);
  outline-offset: 3px;
  border-radius: var(--sl-r-sm);
}

/* ==========================================================================
   6. TARJETAS — profundidad, tilt 3D y resplandor que sigue al cursor
   ========================================================================== */

.features-layout3 .row { perspective: 1400px; }

.feature-item {
  position: relative;
  isolation: isolate;
  background: var(--sl-grad-mist);
  border: 1px solid var(--sl-line);
  border-radius: var(--sl-r-lg);
  padding: 2.4rem 1.9rem;
  box-shadow: var(--sl-shadow-sm);
  transform-style: preserve-3d;
  transition:
    transform var(--sl-mid) var(--sl-ease),
    box-shadow var(--sl-mid) var(--sl-ease),
    border-color var(--sl-mid) var(--sl-ease);
}

/* Resplandor que persigue al cursor dentro de la tarjeta. */
.feature-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--sl-mid) var(--sl-ease);
  background: radial-gradient(
    340px circle at var(--sl-gx, 50%) var(--sl-gy, 50%),
    rgba(0,146,255,.16), rgba(0,146,255,0) 62%
  );
  pointer-events: none;
  z-index: -1;
}

.feature-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: var(--sl-r-lg) var(--sl-r-lg) 0 0;
  background: var(--sl-grad-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--sl-mid) var(--sl-ease);
}

.feature-item:hover {
  box-shadow: var(--sl-shadow-xl);
  border-color: transparent;
}

.feature-item:hover::before { opacity: 1; }
.feature-item:hover::after  { transform: scaleX(1); }

.feature__icon {
  display: inline-flex;
  transform: translateZ(28px);
  transition: transform var(--sl-mid) var(--sl-ease), color var(--sl-mid) var(--sl-ease);
}

.feature-item:hover .feature__icon {
  transform: translateZ(46px) scale(1.1);
  color: var(--sl-blue);
}

.feature__title { letter-spacing: -.014em; transform: translateZ(18px); }
.feature__desc  { transform: translateZ(10px); }

/* ==========================================================================
   7. PASOS DEL PROCESO
   ========================================================================== */

.process-item { position: relative; transition: transform var(--sl-mid) var(--sl-ease); }
.process-item:hover { transform: translateY(-6px); }
.process-item__title { letter-spacing: -.012em; transition: color var(--sl-fast) var(--sl-ease); }
.process-item:hover .process-item__title { color: var(--sl-blue); }

/* ==========================================================================
   8. IMAGENES CON PARALLAX
   ========================================================================== */

.about__img img,
.about-layout2 img,
.video__banner {
  border-radius: var(--sl-r-md);
  box-shadow: var(--sl-shadow-md);
}

.sl-parallax {
  will-change: transform;
  transform: translate3d(0, var(--sl-py, 0px), 0);
}

.about__img:hover img { box-shadow: var(--sl-shadow-xl); }

.blockquote__title {
  position: relative;
  padding-left: 1.15rem;
  border-left: 3px solid var(--sl-blue);
}

/* ==========================================================================
   9. CABECERA
   ========================================================================== */

.header .navbar {
  transition:
    padding var(--sl-mid) var(--sl-ease),
    background-color var(--sl-mid) var(--sl-ease),
    box-shadow var(--sl-mid) var(--sl-ease);
}

.header.is-sl-compact .navbar {
  padding-top: .3rem;
  padding-bottom: .3rem;
  background-color: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(1.7) blur(16px);
  backdrop-filter: saturate(1.7) blur(16px);
  box-shadow: 0 1px 0 var(--sl-line), var(--sl-shadow-md);
}

.header.is-sl-compact .navbar-brand img {
  transition: max-height var(--sl-mid) var(--sl-ease);
  max-height: 36px;
}

.nav__item-link { position: relative; transition: color var(--sl-fast) var(--sl-ease); }

.nav__item-link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -3px;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--sl-grad-brand);
  transform: translateX(-50%);
  transition: width var(--sl-mid) var(--sl-ease);
}

.nav__item-link:hover::after { width: 68%; }

/* ==========================================================================
   10. REVELADO AL SCROLL — barrido con desenfoque, no un simple fundido
   ========================================================================== */

.sl-js [data-sl-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  filter: blur(8px);
  transition:
    opacity  .95s var(--sl-ease),
    transform .95s var(--sl-ease),
    filter    .95s var(--sl-ease);
  transition-delay: var(--sl-delay, 0ms);
}

.sl-js [data-sl-reveal="left"]  { transform: translate3d(-46px, 0, 0); }
.sl-js [data-sl-reveal="right"] { transform: translate3d(46px, 0, 0); }
.sl-js [data-sl-reveal="scale"] { transform: scale(.93); }

.sl-js [data-sl-reveal].is-sl-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ==========================================================================
   11. DETALLES
   ========================================================================== */

html { scrollbar-color: var(--sl-gray) transparent; scroll-behavior: smooth; }
:target { scroll-margin-top: 96px; }
::selection { background: rgba(0,146,255,.20); color: var(--sl-navy); }

.footer-widget__title { letter-spacing: -.008em; }

.footer-widget-nav a,
.footer-widget__content a {
  transition: color var(--sl-fast) var(--sl-ease), padding-left var(--sl-fast) var(--sl-ease);
}

.footer-widget-nav a:hover { padding-left: 5px; }

/* ==========================================================================
   12. TACTIL Y PANTALLAS CHICAS — sin tilt ni parallax, que cuestan bateria
   ========================================================================== */

@media (hover: none), (max-width: 991px) {
  .feature-item { transform: none !important; }
  .feature-item::before { display: none; }
  .sl-parallax { transform: none !important; }
  .slide-item.slick-active .sl-aurora { opacity: .65; }
  .slide-item .sl-aurora { filter: blur(38px); }
  .slide-item.slick-active .sl-bg { animation-duration: 30s; }
  .sl-scrollcue { display: none; }
}

/* ==========================================================================
   13. ACCESIBILIDAD — quien pidio menos movimiento no recibe ninguno
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .sl-js [data-sl-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .slide-item .sl-aurora,
  .sl-scrollcue,
  .sl-progress { display: none !important; }

  .slide-item .sl-bg { animation: none !important; transform: none !important; }

  .sl-js .slide-item .slide__subtitle,
  .sl-js .slide-item .slide__desc,
  .sl-js .slide-item .slide__content .btn { opacity: 1 !important; }

  .sl-word > i { transform: none !important; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   14. HERO GENERATIVO "RED" — definitivo
   --------------------------------------------------------------------------
   Canvas que reemplaza la foto de stock del hero, mas el selector flotante
   para comparar variantes. Al elegir una, se borra el selector y se deja
   fija la ganadora.
   ========================================================================== */

.slide-item .sl-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;              /* sobre el degradado del tema (-1), bajo el texto (3) */
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Con hero generativo la foto se va: es justo lo que veniamos a quitar.
   Se conserva un rastro minimo para que el fondo no quede plano. */
.sl-hero-gen .sl-bg {
  opacity: .10;
  filter: grayscale(1) contrast(1.1);
  animation: none !important;
}

/* La aurora sobra: el canvas ya aporta el color. */
.sl-hero-gen .sl-aurora { display: none; }

/* El degradado oscuro del tema tampoco hace falta sobre un fondo ya oscuro. */
.sl-hero-gen .slide-item::before { opacity: .28; }

@media (prefers-reduced-motion: reduce) {
  .slide-item .sl-canvas { display: none; }
  .sl-hero-gen .sl-bg { opacity: 1; filter: none; }
}


/* =====================================================================
   ACCESIBILIDAD Y RENDIMIENTO — 7 sep 2026
   Todo lo de abajo son OVERRIDES al final del archivo. El tema de 2021 no
   se toca; para revertir cualquiera, basta borrar su bloque.
   Origen: PageSpeed Insights (movil 48/100, accesibilidad 86) + auditoria.
   ===================================================================== */

/* --- 1. CONTRASTE DEL BOTON PRINCIPAL ------------------------------
   "Habla con un experto" daba 3.20:1 en blanco de 13 px sobre #0092ff:
   reprueba WCAG AA, que pide 4.5:1. Se oscurece el arranque del degradado.
   Ratios verificados contra blanco: #0b74d4 = 4.71:1 · #0a6fc7 = 5.11:1.
   El #0092ff se conserva en todo lo demas del sitio; solo cambia el boton. */
:root {
  --sl-grad-brand: linear-gradient(125deg, #0b74d4 0%, #0a6fc7 55%, #054c8b 100%);
}

/* --- 2. FOCO VISIBLE AL NAVEGAR CON TECLADO ------------------------
   El tema apaga el outline globalmente ("*{outline:0}") y lo vuelve a
   apagar en los campos. Quien navega con teclado no sabe donde esta. */
.form-control:focus,
.form-control:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid #0b74d4 !important;
  outline-offset: 2px !important;
}
.form-control:focus {
  border-color: #0b74d4 !important;
}
/* Sobre el panel azul oscuro del formulario, el azul no se ve: va blanco. */
.contact-panel__info .form-control:focus,
.contact-panel .form-control:focus-visible {
  outline-color: #ffffff !important;
}

/* --- 3. BOTON DE MENU MOVIL ---------------------------------------
   Media 23x13 px. El minimo tactil recomendado es 44x44. Se agranda el
   area sin mover las tres rayitas, que siguen midiendo 23x13. */
@media (max-width: 991.98px) {
  .navbar-toggler {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .navbar-toggler .menu-lines {
    position: relative;
    width: 23px;
    height: 13px;
    display: block;
  }
}

/* --- 4. LA BARRA AZUL CORTADA DEL MENU MOVIL ----------------------
   El subrayado de hover del menu de escritorio se colaba en el cajon
   movil como una linea azul cortada junto a Software, Marketing y Diseno.
   Solo tiene sentido donde hay cursor. */
@media (max-width: 991.98px) {
  .nav__item-link::after {
    display: none !important;
    content: none !important;
  }
}

/* --- 5. BOTON DE SUBIR vs SELLO DE reCAPTCHA ----------------------
   Median 30x30 px y se encimaban con el badge de reCAPTCHA en /contacto. */
#scrollTopBtn {
  width: 44px !important;
  height: 44px !important;
  font-size: 16px !important;
}
@media (max-width: 991.98px) {
  #scrollTopBtn { bottom: 84px !important; right: 14px !important; }
  .grecaptcha-badge { bottom: 14px !important; }
}

/* --- 6. FUENTES DE ICONOS SIN BLOQUEAR EL TEXTO -------------------
   PageSpeed: "Font display, est savings 380 ms en movil / 2,940 ms en
   escritorio". Google Fonts ya viene con display=swap en la URL; Font
   Awesome no, y hay que forzarlo aqui. */
@font-face { font-family: "Font Awesome 5 Free";  font-display: swap; }
@font-face { font-family: "Font Awesome 5 Brands"; font-display: swap; }

/* --- 7. ALTURA AUTOMATICA EN LAS IMAGENES CON DIMENSIONES ----------
   El 7 sep 2026 se anadieron width/height reales a 159 <img> para que el
   navegador reserve el hueco y no salte el layout. PERO el tema trae
   "img{max-width:100%}" y NO trae "height:auto": sin esta regla, en cuanto
   el contenedor es mas angosto que la imagen, el ancho baja y la altura se
   queda clavada en el atributo, o sea la imagen se DEFORMA.
   Se limita a las que llevan los dos atributos, para no tocar nada mas. */
img[width][height] { height: auto; }

/* --- 8. LA LINEA DE TITULARIDAD LEGAL DEL PIE ----------------------
   Es el texto que el revisor de Google lee para la verificacion de
   anunciante, y venia en opacity .65 sobre el azul marino #091d3e del
   pie: reprobaba contraste AA. Subirlo a .92 NO alcanzo (el color base
   tambien era tenue), asi que se le da color explicito.
   #dbe4f0 sobre #091d3e da mas de 12:1 y pasa AAA de sobra. */
.footer .sl-legal {
  opacity: 1 !important;
  color: #dbe4f0 !important;
}

/* --- 9. HERO SIN FOTO ----------------------------------------------
   La foto del hero se retiro el 8 sep 2026. Vivia en tres sitios a la vez:
   el div .sl-bg del HTML, el .bg-img del tema, y una regla aqui que la
   pintaba desde el CSS. Los tres se han quitado.

   POR QUE: la clase .sl-hero-gen, que baja la foto a opacity .10 en grises,
   no entra hasta window.load. Medido en produccion: 1,038 ms enseñando una
   foto de stock de oficina a todo color antes de que aparecieran los nodos.
   Y como acababa al 10% en grises, no aportaba nada y pesaba 93 KB.
   Ya estaba medido aparte que quitarla NO empeora el LCP: el elemento mas
   grande pasa a ser el titulo.

   El fondo del hero lo dan ahora el color solido de abajo y el canvas. */
.slider,
.slider .slide-item {
  background-color: #091d3e;
}