/*Hero*/

.header{
    background-color: #353535;
    color: #fff;
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column; /* Changed for better stacking on all screens initially */
    align-items: center;
    justify-content: center; /* Added for better vertical centering */
    min-height: 100vh; /* Use min-height for flexibility */
    box-sizing: border-box; /* Add for better padding/border behavior */
}

.columna1{
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%; /* Ensure it takes full width for stacking */
    padding: 1rem; /* Add some padding for smaller screens */
}

.columna1 h1{
    font-size: 3rem; /* Adjusted base font size */
    margin-top: 2rem;
}

.columna1 p{
    font-size: 1.1rem; /* Adjusted base font size */
    padding: 1rem 1rem 0 1rem; /* Adjusted padding */
}

.columna2{
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    width: 100%; /* Ensure it takes full width */
}

.columna2 img{
    width: 60%; /* More responsive width */
    max-width: 350px; /* Adjusted max-width */
    height: auto; /* Maintain aspect ratio */
}

/*Sobre Planificar*/

.sobrePlanificar{
    background-color: #FF7E00;
    color: white;
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column; /* Ensure stacking on smaller screens */
    align-items: center;
    justify-content: center; /* Added for better centering */
}

.porquePlanificar{
    padding: 2rem 1rem; /* Adjusted padding */
}

.porquePlanificar h3{
    font-size: 2rem; /* Adjusted base font size */
}

.porquePlanificar p{
    font-size: 1.1rem; /* Adjusted base font size */
    padding: 1rem 1rem 0 1rem; /* Adjusted padding */
}

/*Ruta al Exito*/

.rutaAlExito{
    background-color: #353535;
    color: #fff;
    padding: 2rem 1rem; /* Adjusted padding */
    text-align: center;
    display: flex;
    flex-direction: column; /* Ensure stacking */
    align-items: center;
    margin: 2rem 1rem; /* Adjusted margin for smaller screens */
    border-radius: 1rem;
}

.rutaAlExito h3 {
    font-size: 2rem; /* Adjusted base font size */
}

.rutaAlExito p {
    font-size: 1.1rem; /* Adjusted base font size */
}

.inputs{
    max-width: 100%; /* Allow inputs to take more width on smaller screens */
    width: 90%; /* Or a specific width */
}

.btnCalcularObjetivo, #descargarPlanificacion { /* Combined similar styles */
    background-color: #FF7E00;
    color: white;
    padding: 15px 20px; /* Adjusted padding */
    margin-top: 2rem;
    border-radius: 1rem;
    text-decoration: none;
    font-weight: 600;
    display: inline-block; /* Better for button-like behavior */
    border: none; /* Ensure button style consistency */
    cursor: pointer; /* Add cursor for better UX */
}

#descargarPlanificacion{
    background-color: #353535; /* Kept original for this specific ID if intended */
    border: 2px solid #FF7E00; /* Example to make it look like a button */
}


#miNombre{
    box-sizing: border-box;
    padding: 15px;
    width: 100%; /* Make it full width of its container */
    max-width: 300px; /* Keep a max width */
    font-weight: 600;
    border: none;
    border-radius: 0.5rem; /* Added for better appearance */
    margin-top: 1rem; /* Added margin */
}

.contenedorInputs{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 2rem;
    align-items: center;
    margin-top: 2rem; /* Adjusted margin */
    width: 100%; /* Ensure it takes full width */
}

.respuestaInputs{
    font-size: 1.2rem; /* Adjusted base font size */
    margin-top: 1.5rem; /* Adjusted margin */
}

/* Calculando efectividades */
.calculandoEfectividades{
    padding: 2rem 1rem; /* Adjusted padding */
}
.calculandoEfectividades h3{
    font-size: 2rem; /* Adjusted base font size */
}

.calculandoEfectividades p{
    font-size: 1.1rem; /* Adjusted base font size */
    padding: 1rem 1rem 0 1rem; /* Adjusted padding */
}

/* Contenedor Resultados */
.contenedorResultados{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    background-color: #FF7E00;
    color: white;
    border-radius: 0;
    padding: 2rem 1rem; /* Adjusted padding */
}

.contenedorResultados h3{
    font-size: 2rem; /* Adjusted base font size */
    text-align: center;
}

.contenedorResultados p{
    font-size: 1.1rem; /* Adjusted base font size */
    text-align: center;
}

.contenedorResultados span{
    font-size: 1.2rem; /* Adjusted base font size */
    font-weight: 700;
    margin-top: 1rem; /* Adjusted margin */
    display: block; /* Ensure spans take full width for text-align if needed */
    text-align: center; /* Center the text of spans */
}

.respuestaObjetivo{ /* This class is used multiple times, make it consistent */
    margin-top: 1.5rem; /* Adjusted margin */
    width: 100%;
    text-align: center;
}

.logo-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
  }

  .logo-container img {
    width: 50%; /* Adjusted width */
    max-width: 200px; /* Adjusted max-width */
    height: auto; /* Maintain aspect ratio */
  }

  .tusEfectividades{ /* Specific styling for this class if needed */
    font-size: 1.5rem; /* Adjusted base font size */
    font-weight: bold;
    margin-bottom: 1rem;
}

/* --- TABLET STYLES --- */
@media only screen and (min-width: 768px) {
    .header {
        flex-direction: row; /* Side by side for hero on tablet and up */
        padding: 30px;
        justify-content: space-around; /* Adjust as needed */
    }

    .columna1 {
        width: 50%;
        padding: 1rem 2rem; /* More padding on tablet */
        text-align: left; /* Align text to left on tablet */
    }
    .columna1 h1{
        font-size: 3.5rem; /* Larger font for tablet */
    }

    .columna1 p{
        font-size: 1.2rem; /* Larger font for tablet */
        padding: 1rem 0; /* Remove side padding if text-align left */
    }

    .columna2 {
        width: 40%;
        margin-top: 0; /* Reset margin */
    }
    .columna2 img{
        width: 100%;
        max-width: 450px; /* Larger image on tablet */
    }

    .sobrePlanificar {
        padding: 30px;
    }

    .porquePlanificar{
        padding: 2rem;
    }
    .porquePlanificar h3{
        font-size: 2.5rem;
    }
    .porquePlanificar p{
        font-size: 1.2rem;
        padding: 1rem 2rem 0 2rem;
    }

    .rutaAlExito{
        padding: 3rem 2rem;
        margin: 2rem auto; /* Center on page */
        max-width: 900px; /* Max width for this section */
    }
    .rutaAlExito h3{
        font-size: 2.5rem;
    }
    .rutaAlExito p{
        font-size: 1.2rem;
    }
    .inputs{
        max-width: 70%; /* Adjust input width on tablet */
    }

    .calculandoEfectividades {
        padding: 2rem;
    }
    .calculandoEfectividades h3{
        font-size: 2.5rem;
    }
    .calculandoEfectividades p{
        font-size: 1.2rem;
        padding: 1rem 2rem 0 2rem;
    }

    .contenedorResultados{
        padding: 3rem 2rem;
    }
    .contenedorResultados h3{
        font-size: 2.5rem;
    }
    .contenedorResultados p{
        font-size: 1.2rem;
    }
    .contenedorResultados span{
        font-size: 1.3rem;
    }
    .tusEfectividades{
        font-size: 1.8rem;
    }
}


/* --- DESKTOP STYLES --- */
/* --- ESTILOS PARA ESCRITORIO --- */
@media only screen and (min-width: 1024px) {
    /* ... (otros estilos de escritorio que ya tienes se mantienen) ... */

    .columna1 { /* Ajustamos el padding de la columna principal */
        width: 50%;
        padding: 2rem 4rem; /* Aumentamos el padding horizontal de la columna */
        text-align: left; /* Esto ya debería estar heredado de la tablet, pero lo confirmamos */
    }

    .columna1 h1{
        font-size: 4.5rem;
        text-align: left; /* Aseguramos la alineación del H1 */
        padding-left: 0; /* Quitamos padding extra si lo tuviera */
        padding-right: 0;
        /* El título ahora se alineará con el padding de .columna1 (4rem a la izquierda) */
    }

    .columna1 p{
        font-size: 1.3rem;
        /* Ajustamos el padding del párrafo para que no sume indentación extra */
        padding: 1rem 0 0 0; /* padding-left y padding-right a 0 */
        /* El párrafo ahora también se alineará con el padding de .columna1 (4rem a la izquierda) */
    }

    .columna2 img{
        max-width: 550px; /* */
    }

    .porquePlanificar{
        padding: 4rem; /* */
    }
    .porquePlanificar h3{
        font-size: 3rem;
    }
    .porquePlanificar p{
        font-size: 1.3rem; /* */
        padding: 1rem 4rem 0 4rem; /* */
    }
     .rutaAlExito{
        padding: 5rem; /* */
    }
    .rutaAlExito h3{
        font-size: 3rem;
    }
    .rutaAlExito p{
        font-size: 1.3rem;
    }

    .inputs{
        max-width: 70%;
    }

    .respuestaInputs{
        font-size: 1.5rem; /* */
    }

    .calculandoEfectividades {
        padding: 4rem; /* */
    }
    .calculandoEfectividades h3{
        font-size: 3rem;
    }
    .calculandoEfectividades p{
        font-size: 1.3rem; /* */
        padding: 1rem 4rem 0 4rem; /* */
    }

    .contenedorResultados h3{
        font-size: 3rem; /* */
    }
    .contenedorResultados p{
        font-size: 1.3rem; /* */
    }
    .contenedorResultados span{
        font-size: 1.5rem; /* */
    }

    .tusEfectividades{
        font-size: 2.3rem; /* */
    }
}

/* --- MOBILE SPECIFIC STYLES (already covered by base styles and small adjustments) --- */
/* Your existing @media only screen and (max-width: 768px) and (max-width: 480px) can be refined or merged */
/* The base styles are now mobile-first, so these media queries are for adjustments if needed */

@media only screen and (max-width: 767px) { /* For smaller tablets and large phones */
    .columna1 h1 {
        font-size: 2.5rem; /* Slightly smaller than tablet, larger than small mobile */
    }
    .columna1 p {
        font-size: 1rem;
    }
    .columna2 img{
        width: 50%;
        max-width: 300px;
    }

    .porquePlanificar h3, .rutaAlExito h3, .calculandoEfectividades h3, .contenedorResultados h3, .container h3 {
        font-size: 2.2rem;
    }
    .porquePlanificar p, .rutaAlExito p, .calculandoEfectividades p, .contenedorResultados p, .container p {
        font-size: 1rem;
    }
    .inputs{
        max-width: 85%;
    }
    .respuestaInputs, .contenedorResultados span {
        font-size: 1.1rem;
    }
    .tusEfectividades {
        font-size: 1.6rem;
    }
    .logo-container img {
        max-width: 180px;
    }
}


@media only screen and (max-width: 480px) {
    .header {
        padding: 10px; /* Less padding on very small screens */
        min-height: auto; /* Allow hero to shrink if content is small */
    }
    .columna1 h1 {
        font-size: 2rem; /* Further reduce font size for very small screens */
    }
    .columna1 p {
        font-size: 0.9rem; /* Further reduce font size */
        padding: 0.5rem;
    }
    .columna2 img{
        width: 70%; /* Image can be a bit larger proportionally on small screens */
        max-width: 200px;
    }

    .porquePlanificar, .calculandoEfectividades {
        padding: 1.5rem 0.5rem;
    }
    .porquePlanificar h3, .calculandoEfectividades h3, .container h3 {
        font-size: 1.8rem;
    }
    .porquePlanificar p, .calculandoEfectividades p, .container p {
        font-size: 0.9rem;
        padding: 0.5rem;
    }

    .rutaAlExito {
        padding: 1.5rem 0.5rem; /* Less padding */
        margin: 1rem 0.5rem; /* Less margin */
    }
    .rutaAlExito h3 { font-size: 1.8rem; }
    .rutaAlExito p { font-size: 0.9rem; }

    .inputs{
        max-width: 95%; /* Almost full width */
        font-size: 0.9rem; /* Smaller font for inputs */
    }
    .input-group-text { /* Bootstrap class, adjust its font size */
        font-size: 0.85rem;
    }

    .btnCalcularObjetivo, #descargarPlanificacion {
        padding: 12px 15px; /* Smaller button padding */
        font-size: 0.9rem; /* Smaller button font */
    }
    #miNombre{
        padding: 12px;
        font-size: 0.9rem;
    }

    .respuestaInputs{
        font-size: 1rem; /* Smaller response text */
    }

    .contenedorResultados{
        padding: 1.5rem 0.5rem;
    }
    .contenedorResultados h3{
        font-size: 1.8rem;
    }
    .contenedorResultados p{
        font-size: 0.9rem;
    }
    .contenedorResultados span{
        font-size: 1rem; /* Smaller result spans */
        margin-top: 0.8rem;
    }

    .tusEfectividades{
        font-size: 1.3rem;
    }

    .logo-container img {
        width: 60%;
        max-width: 150px; /* Smaller logo */
      }
}