body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #fff;
            color: #333;
        }

        header {
            text-align: center;
            display: block;
            margin: 0 auto;
            padding: 0;
            border: 0;
            position: relative; /* Añadido para posicionamiento de elementos internos */
        }

        header img {
                    max-width: min(100%, 800px); /* Limita el ancho máximo mientras permite responsive */
                    height: auto; /* Mantiene la proporción de aspecto */
                    width: auto; /* Permite que la imagen se ajuste naturalmente */
                    max-height: 120px; /* Aumentamos un poco la altura máxima */
                    margin: 20px auto; /* Centramos horizontalmente y añadimos más espacio vertical */
                    display: block; /* Necesario para margin auto */
                }

        header h1, header h2 {
            display: none; /* Ocultar los títulos que se solapan ya que están en la imagen de fondo */
        }



        nav {
            margin-top: 20px; /* Añadir espacio entre el header y la navegación */
            background-color: #457287;
            padding: 10px 0;
            text-align: center;
        }

        nav a {
            color: #fff;
            text-decoration: none;
            margin: 0 15px;
            font-weight: bold;
            transition: color 0.3s ease;
        }

        nav a:hover {
            color: #ffa500;
        }

        .resumen {
            background-color: #cff0ff;
            color: #000000;
            text-align: center;
            padding: 40px;
        }


        .destacado {
            background-color: #457287;
            color: #fff;
            text-align: center;
            padding: 20px;
        }

        .destacado .boton {
            display: inline-block;
            margin-top: 15px;
            padding: 10px 20px;
            background-color: #9C8A42;
            color: #000;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .destacado .boton:hover {
            background-color: rgb(196, 180, 163);
        }

        #descargar {
            background-color: rgb(15, 29, 46);
        }

        .secciones {
            display: flex;
            justify-content: space-around;
            margin: 20px;
        }

        .seccion {
            flex: 1;
            margin: 10px;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .seccion h3 {
            color: #224e4c;
            margin-bottom: 15px;
        }

        .seccion > img {
            width: 50px;
            height: 50px;
            margin-bottom: 10px;
        }

        .contacto {
            padding: 20px;
            text-align: center;
            background-color: #e0f7fa;
        }

        footer {
            background-color: #457287;
            color: #fff;
            text-align: center;
            padding: 10px 0;
        }

        /* Botón volver arriba */
        #volver-arriba {
            position: fixed;
            right: 16px;
            bottom: 16px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: none;
            background: #457287;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.25);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.2s ease;
            transform: translateY(8px);
            z-index: 999;
        }

        #volver-arriba:hover {
            background: #2f5884;
        }

        #volver-arriba.mostrar {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .imagen-centro {
            display: block;
            margin: 0 auto;
            padding: 0;
            max-width: 100%;
            height: auto;
            border: 0;
        }

        @media (max-width: 768px) {
            .destacado, #descargar {
                padding: 15px;  /* Reducir el padding */
                margin-bottom: 15px;  /* Reducir el margen inferior */
            }
        }

@media (max-width: 768px) {
    /* Contenedor principal para asegurar consistencia */
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 100vw;
        padding: 0;
        margin: 0;
        overflow-x: hidden;
    }

    /* Reglas comunes para todas las secciones principales */
    header, 
    nav, 
    main,
    .destacado, 
    #descargar, 
    .seccion, 
    .contacto, 
    footer {
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px 0;
        padding: 15px;
        box-sizing: border-box;
    }

    /* Contenedor principal */
    main {
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* Destacado y descargar específicamente */
    .destacado,
    #descargar {
        width: 100%;
        margin: 0 0 20px 0;
        padding: 20px;
        box-sizing: border-box;
    }

    /* Secciones en columna */
    .secciones {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
    }

    /* Cada sección individual */
    .seccion {
        width: 100%;
        margin: 0 0 20px 0;
        padding: 15px;
        box-sizing: border-box;
    }

    /* Navegación vertical */
    nav {
        width: 100%;
        padding: 10px;
    }

    nav a {
        display: block;
        width: 100%;
        padding: 10px 0;
        margin: 5px 0;
        text-align: center;
    }

    /* Imágenes responsivas */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Safari/iOS específico */
    @supports (-webkit-touch-callout: none) {
        .destacado,
        #descargar,
        .seccion {
            width: calc(100% - 30px);
            margin-left: auto;
            margin-right: auto;
        }
    }
}

/* iPhone específico */
@media screen and (max-width: 428px) {
    .destacado,
    #descargar,
    .seccion {
        width: calc(100% - 20px);
        margin-left: auto;
        margin-right: auto;
        padding: 15px;
    }
}
.padi-logo {
    display: block;
    max-width: 260px;    /* tamaño máximo deseado */
    height: auto;        /* mantiene la proporción original */
    width: 100%;         /* se ajusta proporcionalmente dentro del contenedor */
    object-fit: contain; /* asegura que no se deforme */
  }