/* =====================================================
   SECCIÓN "BASE"
===================================================== */

.base-contenedor {
  width: 100%;
  padding: 60px 20px;
  box-sizing: border-box;
  background-color: transparent;
}

/* Wrapper interno: controla el layout en columnas */

.base-wrapper {
  display: flex;
  align-items: flex-start; /* alinea la imagen arriba */
  justify-content: space-between;
  gap: 40px;
}

/* Columna de la imagen */
.base-imagen {
  flex: 1;
  min-width: 300px;
  position: sticky; /* se queda fija mientras el texto se desplaza */
  top: 20px; /* separa un poco del borde superior */
  align-self: flex-start;
  height: fit-content;
}

/* Imagen */
.base-imagen img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  object-fit: cover;
  display: block;
}


/* Texto general */
.base-texto {
  flex: 1;
  min-width: 300px;
  align-self: flex-start;
}

/* Solo el título */
.base-texto h1 {
  color: var(--primario);
}

/* Contenido: párrafos, listas, etc. */
.base-texto .contenido {
  line-height: 1.7;
  color: var(--negro);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 2rem);
    text-align: justify;
}


/* ===== Responsivo ===== */
@media (max-width: 900px) {
  .base-imagen {
    position: static; /* desactiva el sticky en móviles */
  }
}
/* ===== Variante opcional: invertir orden ===== */
.base-wrapper.invertido .base-imagen {
  order: 2;
}
.base-wrapper.invertido .base-texto {
  order: 1;
}
/* ===== Animaciones elegantes para la sección base ===== */

/* Estado inicial (invisible) */
.base-imagen,
.base-texto {
  opacity: 0;
  transform: translateY(40px);
  animation-fill-mode: forwards;
}

/* Imagen entra desde la izquierda */
.base-imagen {
  animation: slideInLeft 1.2s ease-out forwards;
  animation-delay: 0.3s;
}

/* Texto entra desde la derecha */
.base-texto {
  animation: slideInRight 1.2s ease-out forwards;
  animation-delay: 0.6s;
}

/* Keyframes */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==== Ajuste fino de espacio solo para el botón de esta plantilla === */
.espacio-pagina-base {
  margin-top: 0.1rem !important;   /* reduce el espacio entre contenido y botón */
  padding-top: 0 !important;     /* elimina espacio interno extra */
  text-align: center;
}

/* Si el padding del contenedor deja hueco adicional, compénsalo visualmente */
.base-contenedor {
  padding-bottom: 1.5px !important; /* antes era 60px */
}
/* === Evitar superposición del CTA y mantener sticky solo en escritorio === */

/* --- General --- */
.base-contenedor {
  position: relative;
  padding-bottom: 50px !important; /* antes 100px, ahora más compacto */
}

/* --- Imagen sticky solo en escritorio --- */
.base-imagen {
  position: sticky;
  top: 20px;
  align-self: flex-start;
  height: fit-content;
  z-index: 1;
}

/* --- Botón al final (evita solapamiento) --- */
.cta-servicio {
  position: relative;
  z-index: 2;
  background: white; /* evita que se vea texto detrás */
  padding: 2rem 0;
}

/* === Ajuste responsivo: desactiva sticky y evita solapamiento en móviles === */
@media (max-width: 900px) {
  .base-imagen {
    position: static !important;
  }

  /* Espacio inferior mucho más compacto en móvil */
  .base-contenedor {
    padding-bottom: 10px !important; /* antes 40px */
  }

  /* Opcional: reduce espacio extra del CTA */
  .cta-servicio {
    padding: 1rem 0; /* antes 2rem */
  }
}


@media (max-width: 900px) {

  .base-texto h1 {
    margin: 0 0 1rem 0;
  }

}

/* =====================================
   RESPONSIVE SECCIÓN BASE (SEGURO)
===================================== */

@media (max-width: 1024px) {

  .base-wrapper {
    flex-direction: column;
    gap: 2.5rem;
  }

  /* Quitamos sticky en tablet y móvil */
  .base-imagen {
    position: static !important;
    width: 100%;
  }

  .base-imagen img {
    max-width: 650px;
    margin: 0 auto;
  }

  /* No centramos todo el texto */
  .base-texto {
    width: 100%;
  }

  /* Solo centramos el título */
  .base-texto h1 {
    text-align: center;
    margin-bottom: 1.5rem;
  }

  /* Contenido controlado */
  .entrada-contenido {
    max-width: 700px;
    margin: 0 auto;
    text-align: justify;
  }

}


/* Ajuste fino para móviles pequeños */
@media (max-width: 600px) {

  .entrada-contenido {
    text-align: left;
    padding: 0 1rem;
  }

}