/* ===========================
   HERO EDITORIAL (ESTILO PERIÓDICO)
=========================== */

.editorial-hero-container {
    display: flex;
    align-items: center;        /* Centra verticalmente imagen + texto */
    justify-content: center;    /* Centra el bloque completo en la página */
    gap: 40px;                  /* Espacio entre imagen y texto */
    max-width: 1100px;
    margin: 20px auto 40px auto;
    padding: 20px;
}

/* Imagen a la izquierda */
.editorial-hero-left img {
    width: 260px;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}

/* Contenedor del texto */
.editorial-hero-right {
    display: flex;
    flex-direction: column;
    justify-content: center;    /* Centra verticalmente el texto */
    align-items: flex-start;    /* Evita que el botón se estire */
    max-width: 420px;           /* Ancho editorial perfecto */
}

/* Título editorial */
.editorial-titulo {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: left;
}

/* Párrafo editorial compacto */
.editorial-texto {
    white-space: normal;
    max-width: 360px;           /* Rompe el texto bonito */
    line-height: 1.55;
    opacity: 0.9;
    margin-bottom: 15px;
    text-align: left;
}

/* Botón */
.editorial-boton {
    display: inline-block;      /* Evita que flex lo estire */
    width: auto;                /* Tamaño natural */
    padding: 12px 24px;
    background: #0077ff;
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 5px;
}

/* ===========================
   RESPONSIVE — MÓVIL
=========================== */

@media (max-width: 768px) {

    .editorial-hero-container {
        flex-direction: column;      /* Imagen arriba, texto abajo */
        text-align: center;          /* Centra todo */
        gap: 20px;
        padding: 10px 20px;
    }

    .editorial-hero-left img {
        width: 100%;                 /* Imagen ocupa todo el ancho */
        max-width: 320px;            /* Pero no gigante */
        margin: 0 auto;
    }

    .editorial-hero-right {
        align-items: center;         /* Centra título, texto y botón */
        max-width: 100%;
    }

    .editorial-texto {
        max-width: 90%;              /* Párrafo compacto */
        margin: 0 auto 15px auto;
        text-align: center;
    }

    .editorial-boton {
        margin: 0 auto;
    }
}