/* ==================================== */
/* 🖼️ ESTILOS DE LA PORTADA (Sección #inicio) */
/* ==================================== */

#inicio {
    background-color: #e5e5e5;
    justify-content: flex-start;
}

/* === TÍTULO PORTFOLIO === */
.portfolio-title {
    color: #557948;
    font-size: 15vw;
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    line-height: 1;
    position: absolute;
    top: 38%;               /* antes 52% → lo subimos un toque */
    left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    white-space: nowrap;
    text-shadow:
        0 6px 18px rgba(0,0,0,0.22),
        0 0 20px rgba(255, 233, 80, 0.25),   /* amarillo suave */
        0 0 40px rgba(255, 233, 80, 0.18);   /* halo más amplio */
    z-index: 1;
}

.portfolio-title:hover {
    transform: translate(-50%, -50%) scale(1.02);
}

/* === IMAGEN PRINCIPAL === */
.model-image {
    width: auto;
    max-height: 85vh;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

/* === TEXTO IZQUIERDA (colaboraciones) === */
.info-left {
    position: absolute;
    bottom: 6%;
    left: 4%;
    text-align: left;
    font-size: 0.95rem;
    color: #2a2a2a;
    max-width: 420px;
    line-height: 1.45;
}

/* === TEXTO DERECHA (nombre + bio) === */
.info-right {
    position: absolute;
    bottom: 6%;
    right: 4%;
    text-align: right;
    max-width: 420px;  
    color: #2a2a2a;
}



.info-right .name {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    white-space: nowrap;     /* <- EL CAMBIO IMPORTANTE */
    display: block;
}


/* Texto general derecha */
.info-right p {
    font-size: 1.05rem;     /* un toque más grande */
    line-height: 1.5;
    margin: 0;
}

/* === TEXTO SUPERIOR DERECHA (Octubre 2025) === */
.info-right-top {
    position: absolute;
    top: 80px;              /* antes 5% → ahora en px para evitar el navbar */
    right: 4%;
    font-size: 1.3rem;
    color: #2a2a2a;
    z-index: 3;
}

/* ========================================= */
/*  INICIO - Responsive (tablets y móviles)  */
/* ========================================= */

@media (max-width: 900px) {

  /* El contenedor de la sección */
  #inicio {
    position: relative;
    padding: 80px 16px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 16px;
  }

  /* El título deja de estar absolute y se hace más chico */
  .portfolio-title {
    position: static;
    transform: none;
    font-size: clamp(2.6rem, 11vw, 3.6rem);
    text-align: center;
    line-height: 1;
    margin-bottom: 4px;
  }

  /* Fecha / texto de arriba a la derecha: lo volvemos normalito */
  .info-box.info-right-top {
    position: static;
    transform: none;
    align-self: center;
    margin-bottom: 4px;
    font-size: 0.9rem;
    opacity: 0.9;
  }

  /* Foto de Ángeles */
  .model-image {
    position: static;
    transform: none;
    width: min(260px, 70vw);
    height: auto;
    margin: 4px auto 8px;
    display: block;
  }

  /* Cajitas de texto (izquierda / derecha) pasan a ser bloques uno abajo del otro */
  .info-box {
    position: static;
    transform: none;
    max-width: 360px;
    margin: 4px auto;
    text-align: center;
    padding: 10px 12px;
    font-size: 0.95rem;
  }

  .info-left,
  .info-right {
    align-self: center;
  }
}

@media (max-width: 600px) {
  #inicio {
    padding-top: 70px;
  }

  .portfolio-title {
    font-size: clamp(2.3rem, 12vw, 3.1rem);
  }

  .info-box {
    font-size: 0.9rem;
  }
}

/* ========================================= */
/*  INICIO - Extra mini pantallas (< 400px)  */
/* ========================================= */

@media (max-width: 400px) {

  #inicio {
    padding-top: 68px;      /* un poco menos de aire arriba */
    padding-bottom: 18px;   /* menos espacio abajo */
  }

  /* Título más compacto aún */
  .portfolio-title {
    font-size: clamp(1.6rem, 8vw, 2rem);  /* antes ~1.9rem */
    margin-bottom: 0;
  }

  /* Foto más chica y pegada al título */
  .model-image {
    width: 50vw;        /* antes 55vw */
    margin: 2px auto 4px;
  }

  /* Cajitas de texto más comprimidas */
  .info-box {
    max-width: 320px;
    font-size: 0.78rem;   /* bajamos un poquito más */
    line-height: 1.35;
    padding: 4px 8px;
    margin: 2px auto;
  }

  .info-box p {
    margin: 2px 0;       /* casi sin separación entre líneas */
  }

  /* “Octubre 2025” arriba a la derecha */
  .info-box.info-right-top {
    font-size: 0.74rem;
  }
}

/* ========================================= */
/*   INICIO - Optimizado para móviles chicos */
/*         iPhone SE – 375px / 400px         */
/* ========================================= */

@media (max-width: 420px) {

  #inicio {
    padding-top: 65px;      /* menos aire arriba */
    padding-bottom: 12px;
  }

  /* Título más compacto */
  .portfolio-title {
    font-size: clamp(1.4rem, 7.5vw, 1.9rem);
    margin-bottom: 4px;
    letter-spacing: -0.5px;   /* más compacto visualmente */
  }

  /* Imagen más chica */
  .model-image {
    width: 42vw;          /* antes 50–55vw */
    margin: 0 auto 4px;
  }

  /* Ajuste general de cajas */
  .info-box {
    max-width: 300px;
    font-size: 0.74rem;    /* antes 0.78rem */
    line-height: 1.28;
    padding: 3px 6px;
    margin: 2px auto;
    gap: 0;               /* 🔥 quita espacio vertical */
  }

  .info-box p {
    margin: 1px 0;       /* 🔥 casi sin separación */
  }

  .info-left,
  .info-right,
  .info-right-top {
    margin-top: 0px !important;
  }

  .info-right-top {
    font-size: 0.7rem;
  }
}