:root {
    --sc: #FF307C ;
    --sc2: #52E4FC;
    --sc3: #ECF458;
  }
.pruebass {
    display: block;
    width: 300px;
    height: 5000px;
    background-color: red;
    font-size: 2rem;
}




.pasos_proceso {
  background-color: #ffffff;
  width: 100%;
  margin: auto;
  padding: 2rem 0;
}
/* Layout principal: imagen a la izquierda, contenido a la derecha */
.layout{
  width: 100%;
  max-width:85rem;
  margin: auto;
  padding:24px 1px;
  display:grid;
  grid-template-columns: 30% 70%;
  gap:0px;
  align-items:center center;
  justify-content: center;
  background-color: #fff;
}

/* Imagen lateral */
.imagen-lateral{
  width:100%;
  height:100%;
  min-height:360px;
  border-radius:12px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid rgba(15,23,42,0.04);
}
.imagen-lateral img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Contenido derecho */
.contenido{
  position:relative;
  padding:8px 4px;
}

/* Título con ¡HOY! en verde */

.titulo{
  margin:0 0 18px 0;
  font-size:1.5rem;
  line-height:1.05;
  font-weight:400;
  color:#393939;
  margin: auto;
  width: 100%;
}
.titulo .verde{
  color:var(--sc);
  font-weight:800;
  font-size: 3.3rem;
  padding: 2rem 0;
  width: 100%;
}

/* Patrón de puntos sutil en la esquina inferior derecha */
.contenido::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:120px;
  height:120px;
  background:radial-gradient(circle at 6px 6px, rgba(244, 2, 115, 0.126) 2px, transparent 2px);
  background-size:18px 18px;
  opacity:0.9;
  pointer-events:none;
  border-radius:8px;
}

/* Contenedor de tarjetas (vertical) */
.cards{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: a;
  padding: 0;
}

/* Cada tarjeta: número en cuadro y texto a la derecha */
.paso-card{
  display: inline-block;
  align-items:start;
  background:var(--card-bg);
  border-radius:10px;
  padding:16px;
  border:1px solid rgba(11,94,168,0.06);
  box-shadow: 0 6px 18px rgba(11,94,168,0.04);
  width: 100%;
  max-width: 270px;
  height: 300px;
  margin: 20px;
}

/* Número estilo cuadro negro con número blanco */
.paso-numero{
  width:44px;
  height:44px;
  background:var(--sc);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:18px;
  border-radius:8px;
}

/* Texto de cada paso */
.paso-texto-1 {
    height: auto;
    margin: auto;
    display: inline-flex;
    flex-wrap: wrap;
}
.paso-texto-1 p {
    
    padding: 0;
    margin: 0;
    text-transform: unset;
    color: var(--sc);
    padding-top: 4rem;
    font-weight: 900;
}
.paso-texto h3{
  margin:0;
  font-size: 1.2rem;
  color:#535353;
  font-weight:100;
  padding-top: 1rem;
}
.paso-texto p{
  margin:8px 0 0 0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.45;
}

/* Ajustes responsivos */
@media (max-width: 1000px){
  .layout{
    grid-template-columns: 1fr;
    gap:20px;
    padding:20px;
  }
  .imagen-lateral{
    min-height:260px;
  }
  .contenido::after{
    right:8px;
    bottom:-8px;
    width:90px;
    height:90px;
    background-size:14px 14px;
  }
}

@media (max-width: 600px){
  .titulo{ font-size:20px; }
  .paso-card{ text-align: center; grid-template-columns:56px 1fr; padding:12px; min-width: 100%; height: auto;
min-height: auto;}
  .paso-numero{ width:56px; height:56px; font-size:16px; border-radius:6px; margin: auto; }
  .imagen-lateral{ min-height:200px; border-radius:8px; }
 .paso-texto-1 {
    height: auto;
    margin: auto;
    display: block
    }
    .paso-texto-1 p { 
    padding-top: 0.5rem;
    font-weight: 900;
}
}










.banner-marketing-section{
  width:100%;
  background-color: #ffff;
}

/* Layout: izquierda grande, derecha dos apiladas */
.banner_marketing{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:12px;
  align-items:stretch;
  width: 100%;
  max-width: 100rem;
  margin: auto;
  padding: 2rem 1rem;
}

/* Columna derecha con dos banners apilados */
.right-column{
  display:flex;
  flex-direction:column;
  gap:1px;
  border-radius: 20px;
  overflow: hidden;
}

/* Items (enlaces) sin efectos, solo imagen */
.item-marketing{
  display:block;
  overflow:hidden;
  border-radius:6px;
  text-decoration:none;
  background:transparent;
  border:0;
  margin: 5px;
  border-radius: 20px;
}

/* Imagen ocupa todo el contenedor */
.item-marketing img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:6px;
}

/* Proporciones: grande a la izquierda, pequeñas a la derecha */
.item-large{
  aspect-ratio: 4 / 3;
}

.item-small{
  aspect-ratio: 4 / 3;
}

/* Accesibilidad: foco visible (sin hover/animaciones) */
.item-marketing:focus{
  outline: 3px solid rgba(46,204,113,0.18);
  outline-offset: 2px;
}

/* Responsive: en pantallas pequeñas apilar verticalmente (grande primero) */
@media (max-width: 900px){
  .banner_marketing{
    grid-template-columns: 1fr;
  }
  .right-column{
    flex-direction:column;
  }
  /* ajustar proporciones para móvil */
  .item-large{ aspect-ratio: 9 / 16; }
  .item-small{ aspect-ratio: 16 / 9; }
}

/* Ajuste fino para pantallas muy pequeñas */
@media (max-width: 420px){
  .banner-marketing-section{ padding:0 10px; }
  .item-large{ aspect-ratio: 4 / 3; }
}

















.asesoria-section {
  background-color: #f9f9f9;
  padding: 60px 20px;
  font-family: 'Segoe UI', sans-serif;
}

.asesoria-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  gap: 40px;
}

.asesoria-image {
  flex: 1 1 500px;
  text-align: center;
}

.asesoria-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  aspect-ratio: 3 / 4;
}

.asesoria-texto {
  flex: 1 1 500px;
  color: #333;
}

.asesoria-texto h2 {
  margin-bottom: 20px;
  color: #1a1a1a;
  font-size: 2.5rem;
  line-height: 2.5rem;
}
.asesoria-texto h2 span {
  color: var(--sc);
}

.asesoria-texto p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

.asesoria-boton {
  display: inline-block;
  background-color: var(--sc);
  color: white;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 6px;
  transition: background-color 0.3s ease;
  font-size: 1.2rem;
}

.asesoria-boton:hover {
  background-color: transparent;
    color: var(--sc);
    border: 2px solid var(--sc);
}
@media (max-width: 900px){
    .asesoria-container {
    text-align: center;
    }
}
















.dt_servicios{
    background-color: #f9f9f9;
    width: 100%;
    margin: auto;
    align-items: center;
}

.dt_servicios-seo {
  color: auto;
  padding: 0px;
  font-family: 'Segoe UI', sans-serif;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 120rem;
  margin: auto;
  padding: 5rem;
  background-image: url(../images/om_back.png);
  background-repeat: no-repeat;
  background-position: center center;
}

.dt_servicios-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width:100%;
  max-width: 480px;
  margin: 20px;
  gap: 40px;
  padding: 2rem;
   box-shadow: 0 6px 18px rgba(11,94,168,0.04);
   background-color: #f9f9f9;
}


.dt_servicios-texto {
  width: 100%;
}

.dt_servicios-texto h3 {
  font-size: 16px;
  color: #aaa;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dt_servicios-texto h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

.highlight {
  background-color: var(--sc);
  padding: 1px 6px;
  border-radius: 4px;
  color: #fff;
  margin-top: 50px ;
}

.dt_servicios-texto p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  margin-left: 2%;
  font-weight: 700;
}

.dt_servicios-beneficios {
  list-style: none;
  padding-left: 0;
  margin-bottom: 24px;
  margin-left: 2%;
}

.dt_servicios-beneficios li {
  margin-bottom: 8px;
  font-size: 16px;
}

.dt_servicios-boton {
  display: inline-block;
  background-color: var(--sc);
  color: #fff;
  /* border: 2px solid #fff; */
  padding: 12px 24px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.dt_servicios-boton:hover {
  background-color: #fff;
  color: #111;
}
@media (max-width: 750px){
  .dt_servicios-seo {
    padding: 1rem;
    max-width: 100%;
  }
  
  .dt_servicios-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width:100%;
    max-width: 100%;
    padding: 1rem;
    box-shadow: 0 6px 18px rgba(11,94,168,0.04);
    text-align: center;
  }
}








.clientes_section {
    width: 100%;
    background-color: #ffffff;
    padding: 2rem 0;
}
.clientes {
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 2rem;
}

.clientes img {
    width: 100%;
    max-width: 800px;
}