/* ------------------------------------ */
/* ESTILOS GENERALES Y TIPOGRAFÍA */
/* ------------------------------------ */

.leyenda-placas-contenedor {
    width: 95%;
    /* Ancho máximo para dejar un margen */
    max-width: 900px;
    /* Ancho máximo recomendado para contenido centrado */
    margin: 0 auto;
    /* Centra el bloque contenedor */
    padding: 20px 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Tipografía sans-serif */
}

/* ------------------------------------ */
/* ESTILOS DE TÍTULOS (Centrado) */
/* ------------------------------------ */

.leyenda-titulo {
    text-align: center;
    font-size: 2em;
    margin-bottom: 0.5em;
    font-weight: bold;
}

.leyenda-subtitulo {
    text-align: center;
    font-size: 1em;
    /* Subtítulos más pequeños y con interlineado ajustado */
    line-height: 1.3;
    margin-bottom: 2em;
    font-weight: normal;
}

/* ------------------------------------ */
/* ESTILOS DE FRASES (Columnas y Espaciado) */
/* ------------------------------------ */

.columnas-frases-wrapper {
    display: flex;
    flex-wrap: wrap;
    /* Permite que las columnas se apilen en móvil */
    gap: 30px;
    /* Espacio entre las dos columnas */
    justify-content: center;
    /* Centra las columnas si hay espacio */
}

.columna-frase {
    /* En escritorio, cada columna ocupa aproximadamente la mitad */
    flex: 1 1 45%;
    max-width: 45%;
}

.columna-frase p {
    margin: 0;
    /* Elimina el margen por defecto de los párrafos */
    padding: 2px 0;
    /* Espaciado mínimo para que las frases no se separen mucho */
    line-height: 1.2;
    /* Interlineado ajustado */
    font-size: 0.9em;
}

.separador {
    height: 10px !important;
    /* Pequeño espacio para separar secciones */
    padding: 0;
}

.texto-derecha {
    text-align: right;
    margin-top: 10px !important;
    /* Para separar la fecha del texto */
    font-style: italic;
}


/* ------------------------------------ */
/* MEDIA QUERY (Adaptación a Móviles) */
/* ------------------------------------ */

@media (max-width: 600px) {
    .columnas-frases-wrapper {
        flex-direction: column;
        /* Apila las columnas verticalmente */
        gap: 20px;
    }

    .columna-frase {
        /* En móvil, cada columna ocupa todo el ancho */
        flex: 1 1 100%;
        max-width: 100%;
        text-align: left;
        /* Aseguramos alineación izquierda */
    }

    .texto-derecha {
        text-align: left;
        /* Cambiamos a izquierda en móvil para consistencia */
    }
}