/* SECCIÓN MODELO REPLICABLE */
.modelo-section{
  padding: 80px 0;
  background: #e7f3fb; /* mismo celeste de programas, ajusta si hace falta */
}

.bgamunas{
 
  background: #fff; /* mismo celeste de programas, ajusta si hace falta */
}

.modelo-container{
  max-width: 1284px;
  margin: 0 auto;
}

/* GRID 2 COLUMNAS (imagen / texto) */
.modelo-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  align-items: center; /* centra verticalmente ambas columnas */
}

/* COLUMNA IZQUIERDA */
.modelo-media{
  display: flex;
  justify-content: center;
}

/* 🔹 Contenedor 490x490 que recorta en círculo */
.modelo-media-inner{
  position: relative;
  width: 490px;
  height: 490px;
  border-radius: 553.19px;  /* valor de Figma */
  overflow: visible;         /* recorta la imagen y el svg */
}

/* FOTO ADMINISTRABLE (DE WORDPRESS) */
/* .modelo-photo{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 18px 32px rgba(0,0,0,0.18);
} */

.modelo-photo{
  width: 100%;
  height: 100%;
  border-radius: 553.19px;   /* ← valor exacto de Figma */
  object-fit: cover;
  display: block;
  box-shadow: 0 18px 32px rgba(0,0,0,0.18);
}


/* MARCO SVG TRANSPARENTE ENCIMA */
/* .modelo-frame{
  position: absolute;
  inset: 0;              
  width: 100%;
  height: 100%;
  pointer-events: none;  
  display: block;
} */

    /* .modelo-frame{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 553.19px; 
    pointer-events: none;
    } */

.modelo-frame{
  position: absolute;
  inset: 0;             /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  pointer-events: none; /* no tapa clics */
  z-index: 2;           /* por encima de la foto */
}

.modelo-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modelo-title{
  
  color: var(--azul2-100);
  margin-bottom: 16px;
}

.modelo-text{
  
  color: var(--azul2-100);
  margin-bottom: 16px;
}

.modelo-link{
  
  color: var(--verde-100);          /* verde Aquafondo */
  text-decoration: none;
}

.modelo-link:hover{
  text-decoration: underline;
}

@media (max-width: 992px){
  .modelo-grid{
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .modelo-media{
    order: 1;
  }

  .modelo-content{
    order: 2;
    text-align: center;
  }
}

@media (max-width: 600px){
  .modelo-section{
    padding: 60px 16px;
  }

  .modelo-media-inner{
    width: 320px;
    height: 320px; /* escala el círculo en móviles */
  }
}