/* General */
@media (max-width: 480px) {

  main {
    padding-inline: 0.75rem;
  }

  h1 {
    font-size: 1.7rem;
  }

  p {
    padding-inline: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
  }

  /* Botón de idioma */
  .lang-switch {
    display: none;
  }

  /* Navegación */
  nav div#menu {
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    gap: 0rem;
    padding-top: 1rem;
    border-radius: 16px;
    background-color: transparent;
  }

  nav div#logotipo {
    justify-content: center;
    gap: 0.6rem;
    min-width: 0;
  }

  nav div#logotipo h1 {
    font-size: 1.2rem;
  }

  nav div#logotipo img {
    width: 40px;
  }

  nav ul#social-media img {
    display: none;
  }

  /* Navegación */

  nav div#selectores-cabecera {
    padding-top: 0.5rem;
    justify-content: center;
  }

  nav div#selectores-cabecera p {
    font-size: 1.2rem;
  }


}


/* ---------- móviles / cv ---------- */
@media (max-width: 480px) {

  /* Inicio / Perfil */
  section#inicio {
    padding-top: 1.5rem;
    gap: 1.5rem;
    margin-top: 0;
  }

  #marco-imagen {

    width: min(220px, 100%);
    border-radius: 25px 0;
  }

  #info {
    padding: 1rem;
    border-radius: 0 30px;
  }

  #info h1 {
    font-size: clamp(1.7rem, 6vw, 2.2rem);
    padding: 0.5rem;
  }

  #nickname {
    padding-inline: 0.5rem;
    font-size: 0.9rem;
  }

  .info-generica {
    font-size: 1rem;
    padding-inline: 0.5rem;
  }

  #tech {
    padding-left: 0.5rem;
  }

  .html,
  .css,
  .js,
  .json,
  .ilu,
  .pho,
  .vsc,
  .pyt,
  .svg,
  .xml,
  .php,
  .ai,
  .lin,
  .fig,
  .cor,
  .cof {
    width: 27px;
  }

  /* Secciones principales */
  section#about-me,
  section#contenido,
  section#skills {
    width: 90%;
    margin-top: 1rem;
    padding: 1rem 0rem;
    border-radius: 16px;
    background-color: transparent;
    border: none;
  }

  section#about-me:hover,
  section#contenido:hover {
    border: none;
  }

  section#contenido #information {
    grid-template-columns: minmax(0, 1fr);
  }

  div.content-bloq {
    padding-top: 1rem 0rem;
  }

  div.bloq1 {
    background-color: var(--graphite);
    border: none;
    border-radius: 5px;
    padding: 2rem 0.5rem;
  }

  div.bloq2 {
    padding: 5rem 0rem;
  }

  ul#lista-info-trabajo li {
    border-radius: 5px;
    padding: 1.2rem 0.8rem;
    margin-bottom: 1rem;
    flex-wrap: nowrap;
    background-color: var(--graphite);
  }

  ul#lista-info-trabajo p:nth-of-type(1) {
    font-size: 0.8rem;
    padding-left: 0.2rem;
    padding-right: 0;
    text-align: left;
  }

  ul#lista-info-trabajo p:nth-of-type(2) {
    font-size: 0.8rem;
    padding: 0;
    text-align: right;
  }

  /* Habilidades */

  section#skills {
    background-color: transparent;
    border: none;
  }

  #skills:hover {
    border: none;
  }

  section#skills h1 {
    padding-bottom: 1rem;
  }

  section#skills div#skills-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    padding-top: 1.5rem;
  }

  section#skills div.skill-item {
    padding: 1rem 0.5rem;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: center;
  }

  section#skills div.skill-item img.skill-logo {
    width: 38px;
    height: 38px;
  }
}


/* ---------- Móviles / servicios---------- */
@media (max-width: 480px) {

  section#initial {
    display: block;
    margin: 0 auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 2rem;

  }

  /* servicios servicios servicios */

  div#content-initial h1#titulo-content {
    display: none;
  }

  div#content-initial h1#titulo-content-movil div.edit {
    font-size: 3.2rem;
  }

  div#content-initial h1#titulo-content-movil {
    display: block;
    font-size: 2rem;
    padding-top: 0rem;
    padding-bottom: 2rem;
  }


  div.info-initial p {
    font-size: 1.2rem;
  }

  /* Seccion de los servicios */

  section#servicios {
    left: 0;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background-color: transparent;
    border-radius: 15px;
    max-height: fit-content;
  }

  /*Titulo Mis Servicios Web*/
  section h2#titulo-servicios {
    display: block;
    margin: 0 auto;
    text-align: center;
    padding-top: 0rem;
    padding-bottom: 3rem;
    font-size: 2rem;
  }

  section#servicios div.bloq1{
    overflow-x: auto;
    scroll-snap-type: mandatory;
    -webkit-overflow-scrolling: touch;
  }

  section#servicios div.bloq1::-webkit-scrollbar{
    display: none;
  }

  /*Grid de mis servicios*/
  div#grid-servicios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  div.card {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    width: 320px;
    scroll-snap-align: center;
  }

  div.card h3 {
    display: block;
    text-align: center;
    font-size: 2rem;
    padding-top: 1.5rem;
  }

  div.card p {
    padding-inline: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  ul.lista-categoria {
    font-size: 1.1rem;
    padding-inline: 3rem;
  }

  /*Extra y contenido*/
  section#extras-contenido {
    display: block;
    margin: 0 auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 0.5rem;
    width: 90%;
    border-radius: 10px;
  }

  section#extras-contenido div.bloq2 {
    padding-top: 0rem;
    padding-bottom: 2rem;
    display: grid;
  }

  /*Seccion de contenido*/
  div.contenido {
    display: block;
    margin: 0 auto;
    width: 100%;
  }

  div.lista-contenido p {
    text-align: left;
  }

  /*seccion de extras*/

  div.extras {
    display: block;
    margin: 0 auto;
    width: 100%;
  }

  div.costo-extra {
    display: flex;
    justify-content: space-between;
  }

  h3#titulo-contenido,
  h3#titulo-extras {
    text-align: left;
    font-size: 1.8rem;
    padding-top: 2rem;
    padding-bottom: 1rem;
    padding-inline: 1.2rem;
  }

  div.lista-contenido,
  div.lista-extras {
    padding-inline: 1.2rem;
  }

}