/* Reset básico y configuración global */
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4; /* Un fondo suave */
    color: #333;
}

.container { /* Contenedor principal para centrar contenido */
    max-width: 960px;
    margin: 20px auto;
    padding: 0 20px;
    background-color: #fff; /* Fondo blanco para el contenido */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra sutil */
    border-radius: 8px; /* Bordes redondeados */
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, a, p {
    font-family: 'Roboto', sans-serif;
    text-rendering: optimizeLegibility; 
}

/* Estilos del Header */
.primer {
    padding: 40px 0 20px 0; /* Más espacio vertical */
    text-align: center;
    border-bottom: 1px solid #eee; /* Separador sutil */
}

.primer h1 {
    font-size: 3.5em; /* Tamaño ajustado */
    margin: 0;
    color: #222; /* Color más oscuro */
    font-weight: 500; /* Peso de fuente */
    text-shadow: none; /* Quitar sombra anterior */
}

/* Estilos de las secciones principales */
main {
    padding: 30px 0;
}

section {
    margin-bottom: 40px; /* Espacio entre secciones */
}

/* Sección Descripción */
.descripcion p {
    font-size: 1.1em;
    color: #555;
    text-align: justify; /* Texto justificado para mejor lectura */
    padding: 0 15px; /* Padding lateral */
}

/* Sección Preview Amazon */
.preview-amazon h2 {
    text-align: center;
    font-size: 2em;
    color: #333;
    margin-bottom: 25px;
    font-weight: 500;
}

/* Añadido para centrar el iframe de Amazon */
.amazon-embed-container {
    text-align: center; /* Mantenemos centrado */
    padding-bottom: 20px; /* Espacio inferior */
}

/* Imagen de portada (si se añade) */
.descripcion img {
    display: block; /* Para centrar con margin auto */
    margin: 20px auto; /* Centrar imagen */
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Footer (si se añade) */
footer {
    text-align: center;
    padding: 20px;
    margin-top: 30px;
    font-size: 0.9em;
    color: #777;
    border-top: 1px solid #eee;
}

/* Media Query para Responsividad */
@media screen and (max-width: 768px) {
    .container {
        width: 90%;
        margin: 15px auto;
        padding: 0 15px;
    }

    .primer h1 {
        font-size: 2.5em; /* Reducir tamaño en móviles */
    }

    .preview-amazon h2 {
        font-size: 1.6em;
    }

    .descripcion p {
        font-size: 1em;
        padding: 0 5px;
    }

    /* Ajustar el iframe si es necesario */
    .amazon-embed-container iframe {
        max-width: 95%; /* Asegurar que no se desborde */
    }
}