/* === HERO SOBRE MI === */

.hero{
  padding-top:40px;   /* sistema hero */
  padding-bottom:50px;/* sistema hero */
}

.hero-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 40px;     /* sistema hero */
  display:flex;
  gap:60px;
  align-items:center;
}

.hero-image img{
  width:auto;
  max-height:480px;
  border-radius:10px;
  object-fit:cover;
}

/* === Texto === */
.hero-text{
  flex:1;
  text-align:left; /* sin tarjetas → siempre left */
}

.hero-text h1,

.hero-text h2 {
  font-size:28px;
  font-weight:700;
  margin-bottom:18px;
}

.hero-text p{
  font-size:16px;
  line-height:1.45;
  margin-bottom:14px;
  color: var(--body-text);
}

/* === MOBILE === */
@media(max-width:860px){

  .hero{
    padding-top:60px;   /* sistema hero */
    padding-bottom:32px;/* sistema hero */
  }

  .hero-inner{
    flex-direction:column;
    padding:0 16px;     /* sistema hero */
    gap:26px;
  }

  .hero-text{
    text-align:left;    /* mobile siempre left */
  }

  .hero-text h1,

  .hero-text h2 {
    font-size:28px;
  }

  .hero-text p{
    font-size:16px;
    color: var(--body-text);
  }
}

/* === TITULOS globales desktop === */
@media(min-width:861px){
  .hero-text h1,
  .hero-text h1,
  .hero-text h2 {
    font-size:28px !important;
  }
}