.logo-responsive {
    display: none;
}

@media screen and (min-width: 340px) and (max-width: 767px) {
    body {
        background-image: url(../imagenes/responsive/resposive-1.jpg), url(../imagenes/responsive/responsive-2.jpg), url(../imagenes/responsive/responsive-3.jpg);
        background-color: #55013f;
		background-size: contain, 100%, contain;
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: top center, center center, bottom center;
        font-size: 16px; /* Tamaño base de fuente */
	}

    /* Información general */
    .informacionaqui {
        font-size: 18px; /* En lugar de 2.3vw */
    }
    
    /* Título principal */
    #esto h3 {
        font-size: 28px; /* En lugar de 3.6vw */
    }
    
    /* Recuadros */
    #recuadros article p {
        font-size: 16px; /* En lugar de 1.61vw */
    }
    
    /* Lista */
    #lista p {
        font-size: 24px; /* En lugar de 4vw */
    }
    
    /* Más de - título */
    #masde h4 {
        font-size: 20px; /* En lugar de 2.5vw */
    }
    
    /* Más de - párrafos */
    #masde p {
        font-size: 14px; /* En lugar de 1.5vw */
    }
    
    /* Más de - enlaces */
    #masde div a {
        font-size: 14px; /* En lugar de 1.6vw */
        height: 35px; /* En lugar de 4vw */
        line-height: 35px;
    }
    
    /* Contrata */
    #contrata h3 {
        font-size: 26px; /* En lugar de 4vw */
    }
    
    /* Éxito */
    #exito article {
        font-size: 18px; /* En lugar de 2.4vw */
    }
    
    /* Ajustes adicionales para móvil */
    
    /* Hacer que los recuadros se vean en columna */
    #recuadros article {
        width: 90%;
        margin-left: 5% !important;
        margin-bottom: 20px;
        float: none;
        height: auto;
    }
    
    /* Hacer que las secciones de "más de" se vean en columna */
    #masde div {
        width: 90%;
        margin-left: 5%;
        margin-bottom: 20px;
        float: none;
        height: auto;
    }
    
    /* Ajustar la información de "Aquí el ser" */
    .informacionaqui {
        width: 90%;
        margin-left: 5%;
        float: none;
    }
    
    .fotografia {
        width: 90%;
        margin-left: 5%;
        float: none;
        margin-top: 20px;
    }
    
    /* Ajustar sección de éxito */
    #exito article {
        width: 90%;
        margin-left: 5%;
        float: none;
        margin-bottom: 20px;
    }
    
    /* ARREGLAR ALTURAS FIJAS PROBLEMÁTICAS */
    
    /* Header - no usar altura fija */
    header {
        height: auto;
        min-height: 300px;
        padding: 20px 0;
    }
    
    /* Video info - altura automática */
    #videoinfo {
        height: auto;
        padding: 20px 0;
    }
    
    /* Bienvenida - altura automática */
    #bienvenida {
        height: auto;
        padding: 20px 0;
    }
    
    /* Aquí el ser - altura automática */
    #Aquielser {
        height: auto;
        padding: 20px 0;
    }
    
    /* Esto - EL PROBLEMA PRINCIPAL */
    #esto {
        height: auto; /* En lugar de 30vw */
        padding: 30px 0; /* Espaciado más consistente */
    }
    
    /* Recuadros - altura automática */
    #recuadros {
        height: auto; /* En lugar de 60vw */
        padding: 20px 0;
    }
    
    /* Lista - altura automática */
    #lista {
        height: auto; /* En lugar de 125vw */
        padding: 20px 0;
    }
    
    /* Más de - altura automática */
    #masde {
        height: auto; /* En lugar de 90vw */
        padding: 20px 0;
    }
    
    /* Contrata - altura automática */
    #contrata {
        height: auto; /* En lugar de 22vw */
        padding: 30px 0;
    }
    
    /* Éxito - altura automática */
    #exito {
        height: auto; /* En lugar de 95vw */
        padding: 20px 0;
    }
    
    /* Espacio - reducir en móvil */
    #espacio {
        height: 50px; /* En lugar de 100vw */
    }
    
    /* Footer - altura automática */
    footer {
        height: auto; /* En lugar de 35vw */
        padding: 30px 0;
    }
    
    /* Arreglar altura de párrafos con overflow */
    #masde p {
        height: auto; /* En lugar de 30vw */
        overflow: visible;
    }
	#recuadros .recuadro1 {
		margin-left: 0%;
	}


    #videoinfo img {
        width: 30%;
    }
    #masde div {
        padding-bottom: 12%;
    }
}

@media screen and (min-width: 340px) and (max-width: 767px) { 
    #recuadros article p {
        font-size: 19px;
    }
    #masde p {
        font-size: 19px;
    }
}

/* update */
/* Mobile - 414 x 736px (iPhone 8 Plus, etc.) */
@media screen and (max-width: 414px) {
  /* Tus estilos para móvil */
  .forma {
    --size: 1rem;
    width: var(--size) !important;
    height: var(--size) !important;
  }
  
}

/* Tablet - 768 x 1024px (iPad, tablets) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #recuadros article p {
        font-size: 15px;
    }
    #masde p {
        font-size: 15px;
    }
     .forma {
        --size: 1rem;
        width: var(--size) !important;
        height: var(--size) !important;
    }

    #espacio {
        /* display: none !important; */
    }
    footer {
        width: 100% !important;
        height: auto !important;
    }
    footer article {
        margin-left: 0;
        width: 100% !important;
    }
    footer a img {
        width: 2rem !important;
        margin-top: 6rem;
    }
  /* Tus estilos para tablet */
}

/* Desktop - 1440 x 900px (pantallas grandes) */
@media screen and (min-width: 1440px) {
  /* Tus estilos para desktop */
   footer a img {
        width: 7rem !important;
        margin-top: 12rem;
    }
}