:root {
  --hero-min-height: 10vh;       /* altura mínima de cada hero */
  --hero-padding-top: 6px;       /* respiro arriba (reducido) */
  --hero-padding-bottom: 6px;    /* respiro abajo (reducido) */
  --hero-gap: 6px;               /* separación entre secciones hero (reducida) */
  /* -----------------------------
    Variables para las tarjetas de "Nuestros servicios"
    Edita estos valores para cambiar rápidamente el espaciado, tamaño
    de iconos y la tipografía de las tarjetas sin buscar reglas más abajo.
    Valores recomendados: usa rem/px coherentes con el resto del diseño.
    ----------------------------- */

  /* Espacio interno superior del panel blanco (aumenta para bajar el icono)
    - Tipo: longitud (ej. 2.25rem, 24px)
    - Afecta: distancia entre la parte superior de la tarjeta y el contenido */
    --svc-back-pad-top: 0.05rem;

  /* Espacio interno lateral (derecha/izquierda) del panel blanco
    - Tipo: longitud
    - Afecta: evita que el contenido llegue a los bordes laterales */
  --svc-back-pad-side: 1.25rem;

  /* Espacio interno inferior del panel blanco
    - Tipo: longitud
    - Afecta al separador inferior entre contenido y el borde */
  --svc-back-pad-bottom: 1.25rem;

  /* Tamaño máximo del icono dentro del panel posterior
    - Tipo: longitud
    - Afecta: reduce/agranda el icono para que no ocupe demasiado */
  --svc-icon-max: 44px;

  /* Padding interno del propio icono (si necesita acolchado) */
  --svc-icon-padding: 0px;

  /* Margen superior del icono (empuja el icono hacia abajo)
    - Cambia este valor para bajar/subir el icono dentro de la tarjeta */
  --svc-icon-margin-top: 1px;

  /* Margen inferior del icono (espacio entre icono y título) */
  --svc-icon-margin-bottom: 0.75rem;

  /* Tamaño del título (h3) dentro del panel posterior */
  --svc-h3-size: 1.15rem;

  /* Tamaño del párrafo descriptivo dentro del panel posterior */
  --svc-p-size: 1rem;

  /* Interlineado del párrafo (mejora legibilidad y evita cortes) */
  --svc-p-lineheight: 1.35;

  /* === Valores para móvil (ancho <= 900px) ===
    Ajusta si quieres tipografías más pequeñas en pantallas pequeñas */
  --svc-mobile-h3-size: 1rem;
  --svc-mobile-p-size: 0.88rem;
}


/* ================================
   HERO SLIDER (MOSAICO)
================================ */
.hero-slider {
  position: relative;
  height: calc(100vh - 70px);
  display: flex;              /* activa Flexbox */
  align-items: center;        /* centra vertical */
  justify-content: center;    /* centra horizontal */
  text-align: center;
  overflow: hidden;
  color: #fff;
}

.hero-slider__images {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #ffffff; /* o el color que quieras para rellenar */
  /*object-fit: cover;
  object-position: center center; /* centra la imagen */
  opacity: 0;
  transition: opacity 1.5s ease;
}

.hero-slider__img.active {
  opacity: 1;
}

.hero-slider__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.01);
  z-index: -1;
}

.hero-slider__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  animation: fadeInUp 1s ease-out;
}

.hero-slider__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  margin-bottom: 1rem;
}

.hero-slider__title span {
  color: var(--color-primary);
}

.hero-slider__subtitle {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.hero-slider__actions {
  display: inline-flex;
  gap: 1rem;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}



/* ================================
   NUESTROS SERVICIOS (CUADRÍCULA)
================================ */
.services-grid-section {
  padding: 5rem 1rem;
  text-align: center;
  position: relative;
  overflow: hidden; /* asegura que el fondo no se desborde */
}


.services-grid-section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0%;   /* margen izquierdo */
  right: 0%;  /* margen derecho */
  background: url("../assets/images/hero2.jpg") center/cover no-repeat;
  filter: brightness(0.5);    /* oscurece para dar contraste */
/*  border-radius: 20px; /* opcional, esquinas redondeadas */
  z-index: -1;
}



.services-grid__title {
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 3rem;
  color: var(--color-titulos); /* usa tu variable de color */
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: 4rem;
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  overflow: visible; /* permite que crezca hacia afuera */
  /* Entry animation settings (appears when .in-view is added) */
  --svc-entry-distance: 48px;
  --svc-entry-duration: 680ms;
  --svc-entry-ease: cubic-bezier(.16,.85,.32,1);
  opacity: 0;
  transform: translateX(var(--svc-entry-distance));
  transition: transform var(--svc-entry-duration) var(--svc-entry-ease), opacity var(--svc-entry-duration) ease;
}

/* When the grid receives .in-view it slides to its normal position and becomes visible */
.services-grid.in-view {
  opacity: 1;
  transform: translateX(0);
}

.service-box {
  position: relative;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.3rem;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;

  /* removed entry/hover transform effects: keep static appearance */
  transform: none;
  transition: none;
  will-change: auto;
}

.service-box:hover { z-index: 1; }

.service-box__front,
.service-box__back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  transition: opacity 0.4s ease;
}

.service-box__front {
  background: var(--color-primary);
  color: #fff;
  z-index: 1;
  font-size: 3.1rem; /* <--- controla el tamaño del texto inicial */
}

.service-box__back {
  background: #fff;
  color: #333;
  opacity: 0;
  text-align: center;
  border-radius: 12px;
}


/* remove hover flip behavior so cards remain static */


/* Icono dentro de la descripción */
.service-box__back img.service-box__img {
  width: 48px;
  height: 48px;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

/* Logo central */
.services-grid__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 2;
  pointer-events: none; /* evita que tape los hover */
  overflow: visible; /* permitir que el anillo sobresalga sin cambiar la posición */
}

.services-grid__logo img {
  max-width: 100px;
  height: auto;
}


/* El efecto del anillo rojo (logo-ring) ha sido eliminado. */
/* Re-introducir reglas mínimas para el anillo rojo (aparece en hover, desaparece en mouseleave) */
.services-grid__logo .logo-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 3;
}
.services-grid__logo .logo-ring svg { width: 100%; height: 100%; display: block; }
.services-grid__logo .logo-ring svg { overflow: visible; }
/* logo-ring and ring animations removed for services grid (rest of site unaffected) */



/* === Orígenes por cuadrante (según el orden en el HTML) === */

.services-grid {
  --svc-inactive-scale: 0.86; /* how small inactive cards are */
  --svc-duration: 420ms; /* animation duration */
  --svc-ease: cubic-bezier(.2,.9,.3,1);
  --svc-info-bg: #ffffff; /* background for the revealed info */
}

/* ensure logo sits above cards */
.services-grid__logo { z-index: 60; }

/* transform origins for the reveal direction (back panel will use same origin) */
.services-grid .service-box:nth-of-type(1) { transform-origin: bottom right; } /* Arriba-Izquierda */
.services-grid .service-box:nth-of-type(2) { transform-origin: bottom left; }  /* Arriba-Derecha */
.services-grid .service-box:nth-of-type(3) { transform-origin: top right; }    /* Abajo-Izquierda */
.services-grid .service-box:nth-of-type(4) { transform-origin: top left; }     /* Abajo-Derecha */

/* smaller inactive cards; we don't scale the container during reveal to avoid background bleed */
.services-grid .service-box {
  transform: scale(var(--svc-inactive-scale));
  transition: transform var(--svc-duration) var(--svc-ease), box-shadow var(--svc-duration) var(--svc-ease);
  will-change: transform;
  background: transparent; /* move color to front so back reveal covers it */
  z-index: 20; /* below logo */
  overflow: hidden; /* clip the back reveal cleanly */
}

/* front: the colored face (blue) */
.services-grid .service-box__front {
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  color: #fff;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition: opacity 90ms linear; /* hide quickly to avoid seeing blue during reveal */
}

/* back: the white info panel that will scale from its origin */
.services-grid .service-box__back {
  position: absolute;
  inset: 0;
  background: var(--svc-info-bg);
  z-index: 2;
  opacity: 0;
  transform: none;
  transition: opacity calc(var(--svc-duration) / 1.1) var(--svc-ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Aumentar el espaciado superior/lateral para que los iconos no toquen ni se corten */
  padding: var(--svc-back-pad-top) var(--svc-back-pad-side) var(--svc-back-pad-bottom) var(--svc-back-pad-side); /* top, right, bottom, left */
  box-sizing: border-box;
  border-radius: 12px;
  pointer-events: none;
}

/* Refuerzo: centrar y limitar iconos dentro del panel posterior */
.services-grid .service-box__back img {
  display: block;
  max-width: var(--svc-icon-max);
  width: auto;
  height: auto;
  padding: var(--svc-icon-padding); /* pequeño acolchado interno del icono */
  margin: var(--svc-icon-margin-top) auto var(--svc-icon-margin-bottom); /* empuja el icono hacia abajo para evitar que se corte */
  object-fit: contain;
}

/* Ajustes de tipografía dentro del panel posterior para evitar cortes */
.services-grid .service-box__back h3 {
  font-size: var(--svc-h3-size);
  margin: 0.25rem 0 0.5rem;
  font-weight: 700;
}
.services-grid .service-box__back p {
  font-size: var(--svc-p-size); /* más pequeño para que quepa el texto */
  line-height: var(--svc-p-lineheight);
  margin: 0;
  color: #444;
  max-width: 90%;
}

@media (max-width: 900px) {
  .services-grid .service-box__back h3 { font-size: var(--svc-mobile-h3-size); }
  .services-grid .service-box__back p { font-size: var(--svc-mobile-p-size); }
}

/* apply the reveal on hover/focus/keyboard open (.is-open) */
.services-grid .service-box:hover,
.services-grid .service-box:focus,
.services-grid .service-box.is-open {
  transform: scale(1); /* pop to full-size when active */
  box-shadow: 0 20px 48px rgba(10,10,20,0.16);
}

.services-grid .service-box:hover .service-box__front,
.services-grid .service-box:focus .service-box__front,
.services-grid .service-box.is-open .service-box__front {
  /* keep front visible while the container scales; back will overlay by opacity */
  opacity: 1;
}

.services-grid .service-box:hover .service-box__back,
.services-grid .service-box:focus .service-box__back,
.services-grid .service-box.is-open .service-box__back {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* ensure back uses the same directional origin so reveal flows toward center */
.services-grid .service-box:nth-of-type(1) .service-box__back { transform-origin: bottom right; }
.services-grid .service-box:nth-of-type(2) .service-box__back { transform-origin: bottom left; }
.services-grid .service-box:nth-of-type(3) .service-box__back { transform-origin: top right; }
.services-grid .service-box:nth-of-type(4) .service-box__back { transform-origin: top left; }

/* Respect reduce-motion preference */
@media (prefers-reduced-motion: reduce) {
  .services-grid .service-box,
  .services-grid .service-box__front,
  .services-grid .service-box__back { transition: none !important; transform: none !important; }
}






/* ================================
   HERO SPLIT (ajustes generales)
================================ */
.hero-split {
  display: grid;
  grid-template-columns: 1fr minmax(140px, 15vw) 1fr;
  align-items: center;
  justify-items: center;
  column-gap: clamp(16px, 4vw, 64px);

  min-height: var(--hero-min-height);
  padding-top: var(--hero-padding-top);
  padding-bottom: var(--hero-padding-bottom);
  margin-bottom: var(--hero-gap);

  text-align: center;
  overflow: hidden;
}

/* Variante con proporciones iguales (Hero 2) */
.hero-split--equal {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Columna lateral */
.hero-split__col {
  display: grid;
  place-items: center;
  width: 100%;
}

/* Escenario de imágenes */
.hero-split__stage {
  position: relative;
  width: min(32vw, 480px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.hero-split__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-split__img.active { opacity: 1; }

/* Texto */
.hero-split__content {
  width: 100%;
  max-width: clamp(120px, 14vw, 200px);
  margin-inline: auto;
}
.hero-split__title {
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: 800;
  margin-bottom: .5rem;
  color: var(--color-primary);
}
.hero-split__subtitle {
  font-size: clamp(.85rem, 1.2vw, 1rem);
  color: #333;
  opacity: .9;
  margin-bottom: 1rem;
}
.hero-split__actions {
  display: inline-flex;
  gap: .75rem;
  font-size: .9rem;
}

/* Animaciones */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in-left   { animation: fadeInLeft 1s ease forwards; }
.fade-in-right  { animation: fadeInRight 1s ease forwards; }
.fade-in-up     { animation: fadeInUp 1s ease forwards; }

/* Responsive */
@media (max-width: 900px) {
  .hero-split,
  .hero-split--equal {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  row-gap: 12px; /* reducido para pantallas pequeñas */
  min-height: auto;
  padding-block: 16px 24px; /* menos padding vertical en móviles */
  }
  .hero-split__stage {
    width: min(82vw, 420px);
  }
  .hero-split__content {
    max-width: min(88vw, 360px);
  }
}


/* ================================
   SECCIÓN: Servicios (lista con iconos)
================================= */
.services-list-section {
  padding: 3.5rem 1rem;
  background: #fff;
}
.services-list__title {
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 800;
  margin-bottom: 1rem;
  text-align: center;
}
.services-list {
  display: flex;
  gap: 2.25rem;
  justify-content: center;
  align-items: stretch;
  margin-top: 1.5rem;
}

/* Entrada animada únicamente para la sección "Servicios (Lista con iconos)" */
.services-list .service-feature {
  opacity: 0;
  transform: translateY(18px);
  transition: transform 520ms cubic-bezier(.16,.85,.32,1), opacity 520ms ease;
}

/* Cuando el contenedor reciba .in-view los elementos aparecerán con stagger */
.services-list.in-view .service-feature {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger utilizando nth-child; ajusta los retrasos si quieres otro ritmo */
.services-list.in-view .service-feature:nth-child(1) { transition-delay: 0ms; }
.services-list.in-view .service-feature:nth-child(2) { transition-delay: 90ms; }
.services-list.in-view .service-feature:nth-child(3) { transition-delay: 180ms; }
.services-list.in-view .service-feature:nth-child(4) { transition-delay: 270ms; }
.services-list.in-view .service-feature:nth-child(5) { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .services-list .service-feature { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.service-feature {
  flex: 1 1 280px;
  background: #fff;
  border-radius: 10px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: center;
  text-align: center;
  box-shadow: 0 6px 20px rgba(10,10,15,0.04);
  transition: transform .28s ease, box-shadow .28s ease;
  cursor: default;
}
.service-feature:focus { box-shadow: 0 12px 30px rgba(10,10,15,0.08); outline: none; }
.service-feature img { width: 74px; height: 74px; object-fit: contain; }
.service-feature h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.service-feature p { margin: 0; color: #555; font-size: .95rem; }

/* ================================
   SECCIÓN: Blog (previews)
================================= */
.blog-section { padding: 3.5rem 1rem; background: var(--bg-page, #f7f7f8); }
.blog-section__title { font-size: clamp(1.6rem, 4vw, 2rem); font-weight: 800; margin-bottom: .25rem; text-align: center; }
.blog-section__intro { text-align: center; color: #555; margin-bottom: 1.25rem; }
.blog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1100px; margin: 0 auto; }
.blog-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 28px rgba(10,10,15,0.04); }
.blog-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.blog-card__image { height: 160px; background-size: cover; background-position: center; }
.blog-card__body { padding: 1rem; }
.blog-card__title { margin: 0 0 .5rem 0; font-size: 1.05rem; font-weight: 700; }
.blog-card__excerpt { margin: 0; color: #555; font-size: .95rem; }

.blog-section__actions { text-align: center; margin-top: 1rem; }

@media (max-width: 900px) {
  .services-list { flex-direction: column; }
  .blog-list { grid-template-columns: 1fr; }
}

/* Carousel styles for blog-list when initialized as carousel */
.blog-list.carousel {
  display: flex !important;
  flex-wrap: nowrap;
  overflow: hidden;
  padding: 0;
}
.blog-list.carousel .carousel-slide {
  flex: 0 0 100%; /* default: 1 per view */
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 0.5rem;
}
@media (min-width: 900px) {
  /* show 3 cards per view on desktop to match original layout */
  .blog-list.carousel .carousel-slide {
    flex: 0 0 calc(100% / 3);
  }
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.95);
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(10,10,20,0.08);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.carousel-btn--prev { left: 12px; }
.carousel-btn--next { right: 12px; }
.carousel-btn:focus { outline: 2px solid var(--color-primary); }

@media (max-width: 900px) {
  .carousel-btn { width: 38px; height: 38px; }
}

/* Play/Pause control
   Positioned centered-bottom so it doesn't overlap content. */


/* ================================
   FOOTER
================================= */
.footer { background: #0f1720; color: #dbe6ef; padding-top: 2.25rem; }
.footer__inner { display: flex; gap: 2rem; justify-content: space-between; align-items: flex-start; padding: 1.25rem 0; }
.footer__col { flex: 1 1 220px; }
.footer__brand p { color: #a8b6c3; max-width: 320px; }
.footer__contact h4, .footer__newsletter h4 { color: #fff; margin-top: 0; }
.footer__form { display: flex; gap: .5rem; margin-top: .5rem; }
.footer__form .input { padding: .5rem .75rem; border-radius: 6px; border: none; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.04); padding: .75rem 0; margin-top: 1rem; }
.footer__bottom small { color: #9fb0c4; }
.footer__links { float: right; }
.footer__links a { color: #9fb0c4; margin-left: 1rem; text-decoration: none; }

@media (max-width: 900px) {
  .footer__inner { flex-direction: column; gap: 1rem; }
  .footer__links { float: none; display: block; margin-top: .5rem; }
}


/* ================================
   ANIMACIONES DE HERO (entrada por lado/centro)
   - Hero 1: .hero-anim.from-right
   - Hero 2: .hero-anim.from-center
   - Hero 3: .hero-anim.from-left
   Animaciones recurrentes cuando la sección vuelve a entrar en viewport.
   En dispositivos táctiles o si el usuario prefiere reducir movimiento se aplicará modo reducido.
================================= */
.hero-anim { opacity: 0; transform: translateY(6px); transition: transform 700ms cubic-bezier(.2,.9,.2,1), opacity 700ms ease; }
.hero-anim.in-view { opacity: 1; transform: translateY(0); }

.hero-anim.from-right { /* valor por defecto; puedes cambiar --hero-translate-x desde JS o aquí en CSS */
  transform: translateX(var(--hero-translate-x, 36px)) translateY(6px);
}
.hero-anim.from-right.in-view {
  transform: translateX(0) translateY(0);
  transition: transform var(--hero-duration-x, 680ms) cubic-bezier(.16,.85,.32,1), opacity var(--hero-duration-x, 680ms) ease;
}

.hero-anim.from-center { transform: scale(.96) translateY(6px); }
.hero-anim.from-center.in-view { transform: scale(1) translateY(0); transition: transform var(--hero-duration-center, 640ms) cubic-bezier(.16,.85,.32,1), opacity var(--hero-duration-center, 640ms) ease; }

.hero-anim.from-left { transform: translateX(calc(var(--hero-translate-x, 36px) * -1)) translateY(6px); }
.hero-anim.from-left.in-view {
  transform: translateX(0) translateY(0);
  transition: transform var(--hero-duration-x, 680ms) cubic-bezier(.16,.85,.32,1), opacity var(--hero-duration-x, 680ms) ease;
}

/* Modo reducido: si el documento tiene la clase .reduced-motion o la preferencia del usuario, desactivar animaciones fuertes */
.reduced-motion .hero-anim,
html[data-reduced-motion] .hero-anim { transition: none !important; transform: none !important; opacity: 1 !important; }

@media (max-width:700px) {
  .hero-anim { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ------------------------------------------------------------------
  INSTRUCCIONES RÁPIDAS (para que puedas controlar fácilmente las animaciones)

  1) Control desde JS (recomendado): editar el bloque `config` en
    `js/components/heroAnims.js`. Valores disponibles:
     - durationX: duración (ms) de la entrada lateral (hero 1 y 3)
     - durationCenter: duración (ms) de la entrada desde el centro (hero 2)
     - translateX: distancia en px desde la que entran los hero laterales
     - threshold: umbral del IntersectionObserver (0..1)
     - disableOnTouch: true/false para desactivar en touch/mobile

    Ejemplo: initHeroAnims({ durationX: 900, translateX: 48 });

  2) Control desde CSS (válido si prefieres cambiar estilos sin tocar JS):
    - Puedes sobrescribir las variables CSS establecidas por JS:
      --hero-translate-x       (ej: 48px)
      --hero-duration-x        (ej: 900ms)
      --hero-duration-center   (ej: 720ms)

    Ejemplo (añadir en tu archivo CSS o en línea en la sección):
     .hero-split { --hero-translate-x: 48px; --hero-duration-x: 900ms; }

  3) Para cambiar el efecto de una sección individualmente, añade
    data-effect="from-left" | "from-right" | "from-center" al elemento
    <section class="hero-split" ...> en `index.html`.

  4) Si quieres desactivar completamente las animaciones para pruebas,
    añade la clase `reduced-motion` al elemento <html> o llama:
     initHeroAnims({ forceReduced: true })

 ------------------------------------------------------------------ */