/* Listado de Noticias */

.noticias-section {
    width: 100%;
    background: var(--color-light-gray);
    padding: 70px 0 95px;
    /* Tipografia para todo lo que se lee como noticia (titulos, resumenes,
       fecha, cuerpo), en Helvetica Neue segun pidio el cliente. Los
       controles de interfaz (botones, tags, el formulario de contacto,
       clima/ticker) ya declaran su propia font-family mas abajo o son
       inputs/botones nativos que el navegador nunca hereda por defecto,
       asi que no se ven afectados por esto. */
    font-family: var(--font-noticias);
}

.noticias-section h1,
.noticias-section h2,
.noticias-section h3 {
    font-family: var(--font-noticias);
}

/* El clima y el ticker financiero son widgets de datos, no contenido
   editorial: se mantienen en la tipografia sans del sitio para que los
   numeros/temperatura se lean como dato, no como texto de articulo. */
.noticias-clima,
.noticias-ticker {
    font-family: var(--font-body);
}

/* El formulario de contacto es un control de interfaz (se reusa tal cual
   en el modal FAB de mobile, fuera de .noticias-section), no contenido
   editorial: su titulo se mantiene en la tipografia de marca. */
.noticias-cta h3 {
    font-family: var(--font-titles);
}

.noticias-container {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Layout principal (escritorio): 5 columnas. La noticia destacada ocupa
   las primeras 4 columnas en la fila 1; bajo ella, las tarjetas de
   noticias y el formulario comparten la fila 2 (3 columnas + 1). La
   quinta columna es una barra lateral (clima + anuncios) que abarca
   ambas filas, al lado de la destacada. */

.noticias-layout {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 210px;
    gap: 32px;
    align-items: start;
}

.noticia-destacada {
    grid-column: 1 / 5;
    grid-row: 1;
}

.noticias-sidebar {
    grid-column: 5;
    grid-row: 1 / 3;
}

.noticias-grid {
    grid-column: 1 / 4;
    grid-row: 2;
}

.noticias-cta-slot {
    grid-column: 4;
    grid-row: 2;
    /* Antes este contenedor ocupaba casi toda la altura de la pantalla
       (100vh) y centraba el formulario adentro con flexbox, para que
       quedara siempre a la vista al hacer scroll. El efecto secundario:
       justo al llegar a esta fila, el formulario se veia bien por debajo
       de las tarjetas (centrado en un contenedor mucho mas alto que
       ellas), no alineado con su borde superior. Un sticky simple, igual
       al que ya usa .noticias-sidebar al lado, lo deja pegado arriba
       desde el principio, alineado con las tarjetas, y se mantiene a la
       vista igual al scrollear. */
    position: sticky;
    top: calc(var(--header-height) + 24px);
}

/* Layout mobile (<=700px): reemplaza la grilla/sidebar/formulario de
   arriba por una version intercalada de noticias y anuncios (ver media
   query mas abajo). Oculto por defecto. */

.noticias-mobile-layout {
    display: none;
}

/* Noticia destacada: foto cuadrada a la izquierda (con un acento rojo
   asomando detras), contenido a la derecha con boton solido. */

.noticia-destacada {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    align-items: center;
    gap: 40px;

    margin: 24px 0 64px;
    /* Misma tarjeta que .noticia-card (fondo blanco, radio, sombra), para
       que la destacada se agrupe visualmente como las demas noticias en
       vez de quedar suelta sobre el fondo de la pagina. */
    padding: 32px;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.03), 0 10px 28px rgba(17, 17, 17, 0.06);
}

.noticia-destacada-media {
    position: relative;
}

.noticia-destacada-image {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.noticia-destacada-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.noticia-destacada:hover .noticia-destacada-image img {
    transform: scale(1.04);
}

.noticia-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.noticia-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;

    background: rgba(255, 5, 5, 0.08);
    color: var(--color-primary);

    font-family: var(--font-titles);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 999px;
}

.noticia-destacada-body h2 {
    font-size: 1.9rem;
    line-height: 1.25;
    text-align: left;
    margin: 14px 0 16px;
    /* Helvetica Neue (Mac) y su respaldo Arial (Windows, que no trae
       Helvetica Neue) tienen metricas distintas: el mismo titulo puede
       envolver en una cantidad de lineas distinta segun el sistema
       operativo. Como la destacada y la fila de tarjetas+formulario
       comparten la misma grilla, esa diferencia de alto corria toda la
       fila de abajo. Reservando siempre el alto de 3 lineas (y cortando
       con "..." si el titulo las supera) la fila queda estable sin
       importar que fuente termine usando el navegador. */
    min-height: calc(1.9rem * 1.25 * 3);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.noticia-destacada-body p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-medium-gray);
    margin-bottom: 26px;
    /* Antes tenia max-width:46ch: en pantallas anchas dejaba el resumen
       mucho mas angosto que el titulo, con un vacio notorio a la derecha. */
    /* Mismo motivo que el min-height del titulo mas arriba: sin esto, un
       resumen que entra en Helvetica Neue (Mac) pero envuelve una linea
       de mas en su respaldo Arial (Windows, que no trae Helvetica Neue)
       sigue corriendo el alto de toda la fila y desalineando las
       tarjetas y el formulario de abajo. Un resumen de 250 caracteres
       practicamente nunca llega a 4 lineas en este ancho, asi que el
       corte casi nunca se nota. */
    min-height: calc(1rem * 1.7 * 4);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.noticia-destacada-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 30px;

    background: var(--color-dark);
    color: var(--color-white);

    font-family: var(--font-titles);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: var(--border-radius-sm);

    transition: var(--transition-smooth);
}

.noticia-destacada-btn:hover {
    background: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 5, 5, 0.25);
}

.noticia-sin-imagen {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-dark) 0%, #2a0505 100%);
}

.noticia-sin-imagen img {
    width: 30%;
    max-width: 64px;
    height: auto;
    object-fit: contain;
    opacity: 0.9;
}

/* Grid de noticias: tarjetas chicas con foto cuadrada y su fecha
   superpuesta, como recuadros compactos debajo de la destacada. */

.noticias-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.noticia-card {
    display: block;
    background: var(--color-white);
    border: 1px solid rgba(17, 17, 17, 0.06);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.03), 0 10px 28px rgba(17, 17, 17, 0.06);
    overflow: hidden;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Respaldo para el modo de alto contraste de Windows ("forced-colors"):
   si esta activo, el navegador aplana los colores de fondo propios de la
   pagina a un puñado de colores del sistema, y un borde tan transparente
   como el de arriba puede no alcanzar a notarse. Esto fuerza un borde
   solido con el color de texto del sistema, sin tocar el resto del
   diseño cuando ese modo no esta activo. */
@media (forced-colors: active) {
    .noticia-card {
        border: 1px solid CanvasText;
    }
}

.noticia-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 4px rgba(17, 17, 17, 0.04), 0 22px 40px rgba(17, 17, 17, 0.1);
}

.noticia-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.noticia-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.noticia-card:hover .noticia-card-image img {
    transform: scale(1.06);
}

.noticia-card-body {
    padding: 16px 16px 10px;
}

.noticia-card-body h3 {
    font-size: 0.95rem;
    line-height: 1.35;
    text-align: left;
    margin: 0 0 8px;
}

.noticia-card-body p {
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--color-medium-gray);
    margin-bottom: 12px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.noticia-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.noticia-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--color-medium-gray);
}

.noticia-stat svg {
    flex: none;
}

/* Insignias */

.noticia-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;

    background: rgba(255, 5, 5, 0.1);
    color: var(--color-primary);

    font-family: var(--font-titles);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 999px;
}

.noticia-badge--overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;

    background: var(--color-primary);
    color: var(--color-white);
    padding: 5px 12px;
    font-size: 0.66rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Elementos comunes */

.noticias-vacio {
    padding: 60px 0;
    text-align: center;
    color: var(--color-medium-gray);
    font-size: 1.1rem;
}

/* Sidebar: formulario de contacto, clima y anuncios */

.noticias-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 110px;
}

.noticias-cta {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: 28px 24px;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.03), 0 10px 28px rgba(17, 17, 17, 0.06);
    text-align: center;
}

.noticias-cta h3 {
    font-size: 1.1rem;
    margin: 0 0 6px;
}

.noticias-cta-phone {
    display: block;
    font-family: var(--font-titles);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary);
}

.noticias-cta-subtext {
    font-size: 0.78rem;
    color: var(--color-medium-gray);
    margin: 2px 0 18px;
}

.noticias-cta-messages p {
    padding: 10px 12px;
    border-radius: var(--border-radius-sm);
    font-size: 0.78rem;
    margin-bottom: 14px;
    text-align: left;
}

.noticias-cta-messages p.success {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.noticias-cta-messages p.error {
    background: rgba(255, 5, 5, 0.08);
    color: var(--color-primary);
}

.noticias-cta-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.noticias-cta-row {
    display: flex;
    gap: 10px;
}

.noticias-cta-row .noticias-cta-field {
    flex: 1;
    min-width: 0;
}

.noticias-cta-field label {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 5px;
}

.noticias-cta-field label span {
    color: var(--color-primary);
}

.noticias-cta-field input,
.noticias-cta-field select,
.noticias-cta-field textarea {
    width: 100%;
    padding: 9px 11px;

    border: 1px solid rgba(17, 17, 17, 0.14);
    border-radius: var(--border-radius-sm);

    font-family: inherit;
    font-size: 0.82rem;
    color: var(--color-dark);
    background: var(--color-white);
}

.noticias-cta-field input:focus,
.noticias-cta-field select:focus,
.noticias-cta-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.noticias-cta-field textarea {
    resize: vertical;
    min-height: 64px;
}

.noticias-cta-phone-group {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.noticias-cta-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    border: 1px solid rgba(17, 17, 17, 0.14);
    border-radius: var(--border-radius-sm);
    background: var(--color-white);
}

.noticias-cta-flag svg {
    border-radius: 2px;
}

.noticias-cta-flag svg[hidden] {
    display: none;
}

.noticias-cta-phone-group .noticias-cta-prefix-select {
    width: auto;
    flex-shrink: 0;
    padding: 9px 6px;
}

.noticias-cta-phone-group input {
    flex: 1;
    min-width: 0;
}

.noticias-cta-email-status {
    font-size: 0.72rem;
    margin-top: 5px;
    min-height: 1em;
}

.noticias-cta-email-status--ok {
    color: #0d7a3d;
}

.noticias-cta-email-status--error {
    color: var(--color-primary);
}

.noticias-cta-btn {
    width: 100%;
    height: 46px;
    margin-top: 4px;

    background: var(--color-dark);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-sm);

    font-family: var(--font-titles);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;

    transition: var(--transition-smooth);
}

.noticias-cta-btn:hover {
    background: var(--color-primary);
}

.noticias-clima {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.03), 0 10px 28px rgba(17, 17, 17, 0.06);
}

.noticias-clima-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.noticias-clima-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;

    background: rgba(255, 5, 5, 0.08);
    color: var(--color-primary);
    border-radius: 50%;
}

.noticias-clima-ciudad {
    font-size: 0.72rem;
    color: var(--color-medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0;
}

.noticias-clima-temp {
    font-family: var(--font-titles);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
}

.noticias-clima-desc {
    font-size: 0.8rem;
    color: var(--color-medium-gray);
    margin: 0;
}

.noticias-clima-fecha {
    font-size: 0.72rem;
    color: var(--color-medium-gray);
    margin: 6px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(17, 17, 17, 0.06);
}

.noticias-ticker {
    width: 100%;
    min-width: 0;
    background: var(--color-dark);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    padding: 10px 0;
}

.noticias-ticker-track {
    display: flex;
    align-items: center;
    width: max-content;
    white-space: nowrap;
    animation: noticias-ticker-scroll 14s linear infinite;
}

.noticias-ticker-item {
    font-family: var(--font-titles);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-white);
    letter-spacing: 0.3px;
    padding: 0 14px;
}

.noticias-ticker-item strong {
    color: var(--color-primary);
    font-weight: 700;
}

.noticias-ticker-sep {
    color: rgba(255, 255, 255, 0.35);
}

@keyframes noticias-ticker-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .noticias-ticker-track {
        animation: none;
    }
}

.noticias-ad {
    position: relative;
    display: block;

    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.03), 0 10px 28px rgba(17, 17, 17, 0.06);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.noticias-ad:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(17, 17, 17, 0.04), 0 18px 32px rgba(17, 17, 17, 0.1);
}

.noticias-ad img {
    display: block;
    width: 100%;
    height: auto;
}

.noticias-ad-label {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 1;
    padding: 4px 10px;

    background: rgba(17, 17, 17, 0.55);
    color: var(--color-white);

    font-family: var(--font-titles);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 999px;
}

.noticias-ad-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-dark);
}

.noticias-ad-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.noticias-ad-video-cta {
    display: block;
    padding: 10px;
    background: var(--color-dark);
    color: var(--color-white);
    text-align: center;

    font-family: var(--font-titles);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;

    transition: background-color 150ms ease;
}

.noticias-ad-video-cta:hover {
    background: var(--color-primary);
}

/* Modal de anuncio */

body.anuncio-modal-lock {
    overflow: hidden;
}

.anuncio-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    /* El header (nav) tiene z-index mas alto y queda encima del overlay,
       asi que el modal no puede centrarse hasta pegar con el, o la X de
       cerrar termina casi encima del boton del menu hamburguesa. */
    padding: calc(var(--header-height) + 20px) 24px 24px;

    background: rgba(17, 17, 17, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.anuncio-modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.anuncio-modal {
    position: relative;
    width: 100%;
    max-width: 440px;

    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);

    transform: scale(0.95);
    transition: transform 220ms ease;
}

.anuncio-modal-overlay.is-open .anuncio-modal {
    transform: scale(1);
}

.anuncio-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;

    background: rgba(17, 17, 17, 0.55);
    color: var(--color-white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.anuncio-modal-close:hover {
    background: var(--color-primary);
}

.anuncio-modal-link {
    display: block;
}

.anuncio-modal-link img {
    display: block;
    width: 100%;
    height: auto;
}

.anuncio-modal-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-dark);
}

.anuncio-modal-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.anuncio-modal-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 54px;

    background: var(--color-dark);
    color: var(--color-white);

    font-family: var(--font-titles);
    font-size: 0.86rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;

    transition: background-color 150ms ease;
}

.anuncio-modal-cta:hover {
    background: var(--color-primary);
}

/* Botones flotantes mobile (sobre el de WhatsApp) + sus modales */

.mobile-fab {
    display: none;
    position: fixed;
    right: 23px;
    width: 54px;
    height: 54px;
    z-index: 9999;

    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.mobile-fab:hover {
    transform: scale(1.1);
}

.mobile-fab-ofertas {
    bottom: 158px;
    background: var(--color-dark);
    font-size: 24px;
}

.mobile-fab-contacto {
    bottom: 92px;
    background: var(--color-primary);
    color: var(--color-white);
}

.mobile-fab-fuego {
    display: inline-block;
    animation: mobile-fab-fuego-vivo 2.4s ease-in-out infinite;
}

@keyframes mobile-fab-fuego-vivo {
    0%, 100% { transform: scale(1) rotate(-3deg); }
    25% { transform: scale(1.08) rotate(3deg); }
    50% { transform: scale(0.95) rotate(-2deg); }
    75% { transform: scale(1.05) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-fab-fuego {
        animation: none;
    }
}

body.fab-modal-lock {
    overflow: hidden;
}

.fab-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Mismo motivo que en .anuncio-modal-overlay: el header queda por
       encima del overlay, hay que dejarle espacio para que la X de cerrar
       no quede pegada al boton del menu. */
    padding: calc(var(--header-height) + 20px) 24px 24px;

    background: rgba(17, 17, 17, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.fab-modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.fab-modal {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - var(--header-height) - 40px);

    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);

    display: flex;
    flex-direction: column;
    overflow: hidden;

    transform: scale(0.95);
    transition: transform 220ms ease;
}

.fab-modal-overlay.is-open .fab-modal {
    transform: scale(1);
}

.fab-modal--contacto {
    background: transparent;
    box-shadow: none;
}

.fab-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;

    background: rgba(17, 17, 17, 0.55);
    color: var(--color-white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.fab-modal-close:hover {
    background: var(--color-primary);
}

.fab-modal-title {
    padding: 24px 24px 0;
    margin: 0;
    font-size: 1.1rem;
    text-align: center;
}

.fab-modal-scroll {
    padding: 20px 24px 24px;
    overflow-y: auto;
}

.fab-oferta {
    display: flex;
    flex-direction: column;
}

.fab-oferta + .fab-oferta {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.fab-oferta-link {
    display: block;
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.fab-oferta-link img {
    display: block;
    width: 100%;
    height: auto;
}

.fab-oferta-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-dark);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.fab-oferta-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.fab-oferta-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    margin-top: 10px;

    background: var(--color-dark);
    color: var(--color-white);
    border-radius: var(--border-radius-md);

    font-family: var(--font-titles);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;

    transition: background-color 150ms ease;
}

.fab-oferta-cta:hover {
    background: var(--color-primary);
}

.fab-oferta-vacio {
    text-align: center;
    color: var(--color-medium-gray);
    font-size: 0.9rem;
    padding: 20px 0;
}

.fab-modal--contacto .noticias-cta {
    box-shadow: none;
}

/* Responsive */

@media (max-width: 960px) {
    .noticias-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .noticia-destacada,
    .noticias-sidebar,
    .noticias-grid,
    .noticias-cta-slot {
        grid-column: auto;
        grid-row: auto;
    }

    .noticias-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 20px;
    }

    .noticias-cta-slot {
        position: static;
        height: auto;
        display: block;
    }
}

@media (max-width: 420px) {
    .noticias-cta-row {
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .noticia-destacada {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .noticia-destacada-accent {
        top: -12px;
        left: -12px;
    }
}

@media (max-width: 700px) {
    .noticias-section {
        padding: 50px 0 70px;
    }

    .noticias-container {
        padding: 0 10px;
    }

    .noticia-destacada {
        margin: 16px 0 48px;
        max-width: 340px;
    }

    .noticia-destacada-body h2 {
        font-size: 1.5rem;
    }

    /* Version celular: la grilla/sidebar/formulario de escritorio se
       reemplazan por el layout intercalado de .noticias-mobile-layout
       (la destacada arriba se mantiene igual en ambas versiones). */

    .noticias-layout > .noticias-grid,
    .noticias-layout > .noticias-sidebar,
    .noticias-layout > .noticias-cta-slot {
        display: none;
    }

    .noticias-mobile-layout {
        display: block;
    }

    .noticias-mobile-feed {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .noticia-card-body {
        padding: 12px 12px 10px;
    }

    /* Tarjetas del feed mobile: solo foto, titulo, vistas/likes y fecha
       (la fecha ya viene en el badge superpuesto a la foto). */
    .noticias-mobile-feed .noticia-tags,
    .noticias-mobile-feed .noticia-card-body p {
        display: none;
    }

    .mobile-fab {
        display: flex;
    }
}