/* [2026-09-20] Lifting del blog: portada (body#blog) y articulo (body#blog-post).
   Todo va acotado a esos dos id de body, asi que no toca ninguna otra pagina.
   Borrar los dos <link> que lo cargan revierte el aspecto anterior por completo. */

/* ============ ARTICULO ============ */

/* El texto se leia a 960px de ancho con letra de 14.6px. Se acota la medida
   de lectura y se sube el cuerpo; las imagenes siguen a todo el ancho. */
body#blog-post .content_blog{
    font-size: 17px;
    line-height: 1.72;
    color: #2f3437;
}
body#blog-post .content_blog p{
    font-size: 17px;
    line-height: 1.72;
    color: #2f3437;
    margin: 0 0 20px;
}
body#blog-post .content_blog h2{
    font-size: 26px;
    line-height: 1.3;
    color: #1d2b3a;
    margin: 42px 0 14px;
    font-weight: 700;
}
body#blog-post .content_blog h3{
    font-size: 20px;
    line-height: 1.35;
    color: #1d2b3a;
    margin: 32px 0 10px;
    font-weight: 700;
}
body#blog-post .content_blog h2:first-child,
body#blog-post .content_blog h3:first-child{ margin-top: 0; }

body#blog-post .content_blog img{
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 26px 0;
    display: block;
}
body#blog-post .content_blog ul,
body#blog-post .content_blog ol{ margin: 0 0 20px; padding-left: 22px; }
body#blog-post .content_blog li{ margin-bottom: 8px; }

/* Los enlaces dentro del texto no se distinguian del resto */
body#blog-post .content_blog a{
    color: #2d57a5;
    text-decoration: underline;
    text-underline-offset: 2px;
}
body#blog-post .content_blog a:hover{ color: #1d3c75; }

/* Cabecera del articulo: titulo y firma con aire */
body#blog-post h1{
    font-size: 34px;
    line-height: 1.22;
    color: #1d2b3a;
    margin: 6px 0 4px;
}
body#blog-post .blog_social_container{
    border-top: 1px solid #e6ebf1;
    border-bottom: 1px solid #e6ebf1;
    padding: 12px 0;
    margin: 14px 0 30px;
}
body#blog-post .bread_crumb_post{ margin-bottom: 4px; }

/* ============ PORTADA DEL BLOG ============ */

/* La tarjeta del ultimo post tenia margin-top:-200px y se subia encima del
   titulo y del banner. Se reduce el solape a algo que no pise el H1. */
/* La tarjeta del ultimo post venia partida en dos: .left_ (20%) sin fondo,
   con la etiqueta "Latest post" suelta, y .right_ (80%) blanco con sombra.
   Se veia como un trozo inacabado pegado a la tarjeta. Aqui se unifican las dos
   mitades en una sola tarjeta blanca con sombra y esquinas redondeadas. */
body#blog .landing_last_post,
body#blog-category .landing_last_post{
    margin-top: -60px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0,0,0,.14);
    border-radius: 12px;
    overflow: hidden;
    align-items: stretch;
}
body#blog .landing_last_post .left_,
body#blog-category .landing_last_post .left_{
    background: #fbfcfe;
    border-right: 1px solid #eef2f6;
    padding: 18px 15px 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body#blog .landing_last_post .left_ p,
body#blog-category .landing_last_post .left_ p{
    font-size: 15pt;
    line-height: 1.2;
    color: #1d2b3a;
    margin-top: 26px;
}
/* la sombra ya la lleva la tarjeta entera; la mitad derecha no necesita otra */
body#blog .landing_last_post .right_,
body#blog-category .landing_last_post .right_{
    box-shadow: none;
    padding: 18px 20px;
}
body#blog .title_blog_container{ padding-bottom: 20px; }
body#blog .landing-blog-top-banner{
    border-radius: 10px;
    object-fit: cover;
    width: 100%;
    /* la imagen de origen puede venir vertical (858x1287) y sin tope crecia a 822px */
    height: 340px;
    max-height: 340px;
}
@media screen and (max-width: 768px){
    body#blog .landing-blog-top-banner{ height: 200px; max-height: 200px; }
}

/* ============ TARJETAS (portada y pie de articulo) ============ */

/* Eran columnas flotadas de alto desigual y salian escalonadas. */
body#blog .row,
body#blog-post .row{ align-items: stretch; }

body#blog .blog_box,
body#blog-post .blog_box{
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6ebf1;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}
body#blog .blog_box:hover,
body#blog-post .blog_box:hover{
    box-shadow: 0 8px 22px rgba(0,0,0,.10);
    transform: translateY(-2px);
}
body#blog .blog_box .banner_,
body#blog-post .blog_box .banner_{
    width: 100%;
    height: 158px;
    object-fit: cover;
    display: block;
}
body#blog .blog_box .blog_content,
body#blog-post .blog_box .blog_content{
    padding: 14px 16px 18px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
body#blog .blog_box .title_,
body#blog-post .blog_box .title_{
    font-size: 15px;
    line-height: 1.35;
    color: #1d2b3a;
    font-weight: 700;
    margin: 8px 0 8px;
}
body#blog .blog_box .content_,
body#blog-post .blog_box .content_{
    font-size: 13.5px;
    line-height: 1.55;
    color: #5a6673;
}

body#blog .blog_titles,
body#blog-post .post_section_subtitles_{
    font-size: 24px;
    color: #1d2b3a;
    font-weight: 700;
}

@media screen and (max-width: 768px){
    body#blog-post .content_blog{ font-size: 16px; }
    body#blog-post .content_blog p{ font-size: 16px; }
    body#blog-post h1{ font-size: 26px; }
    body#blog-post .content_blog h2{ font-size: 22px; margin-top: 32px; }
    body#blog .landing_last_post{ margin-top: 14px; }
}


/* ============ MAQUETA DE DOS COLUMNAS DEL ARTICULO ============ */

/* El contenedor del sitio son 960px; en el articulo se ensancha para que
   quepan la columna de lectura y la barra lateral sin apretar el texto. */
/* Solo el contenedor del ARTICULO se ensancha, para que quepan la columna de
   lectura y la barra lateral. El del cotizador conserva el ancho del sitio. */
@media screen and (min-width: 1200px){
    body#blog-post .blog-article-container{ max-width: 1160px; }
}

body#blog-post .blog-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-gap: 46px;
    align-items: start;
}
body#blog-post .blog-main{ min-width: 0; max-width: 760px; }

body#blog-post .blog-aside{
    position: sticky;
    top: 20px;
    align-self: start;
}

/* ---- indice del articulo ---- */
body#blog-post .blog-toc{
    border: 1px solid #e6ebf1;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 18px;
    background: #fbfcfe;
    max-height: 46vh;
    overflow-y: auto;
}
body#blog-post .blog-toc-title{
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #7a8794;
    font-weight: 700;
    margin: 0 0 10px;
}
body#blog-post .blog-toc ul{ list-style: none; margin: 0; padding: 0; }
body#blog-post .blog-toc li{ margin: 0 0 9px; }
body#blog-post .blog-toc a{
    color: #2f3437;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    display: block;
    border-left: 2px solid #e6ebf1;
    padding-left: 11px;
}
body#blog-post .blog-toc a:hover{ color: #2d57a5; border-left-color: #2d57a5; }

/* ---- tarjeta de reserva ---- */
body#blog-post .blog-cta{
    border: 1px solid #e6ebf1;
    border-radius: 10px;
    padding: 20px 18px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
body#blog-post .blog-cta-title{
    font-size: 16px;
    line-height: 1.35;
    color: #1d2b3a;
    font-weight: 700;
    margin: 0 0 8px;
}
body#blog-post .blog-cta-text{
    font-size: 13.5px;
    line-height: 1.55;
    color: #5a6673;
    margin: 0 0 14px;
}
body#blog-post .blog-cta-btn{
    display: block;
    text-align: center;
    background: #2d57a5;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    padding: 11px 14px;
    border-radius: 6px;
    transition: background .15s ease;
}
body#blog-post .blog-cta-btn:hover{ background: #1d3c75; color: #fff; }
body#blog-post .blog-cta-links{
    list-style: none;
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #eef2f6;
}
body#blog-post .blog-cta-links li{ margin-bottom: 7px; }
body#blog-post .blog-cta-links a{
    font-size: 13.5px;
    color: #2d57a5;
    text-decoration: none;
}
body#blog-post .blog-cta-links a:hover{ text-decoration: underline; }

/* La barra lateral solo cabe cuando el contenedor llega a 1140/1160px, o sea
   desde 1200px. Por debajo, con un contenedor de 960 la columna de lectura se
   quedaba en 564px, demasiado estrecha; ahi se apila. */
@media screen and (max-width: 1199px){
    body#blog-post .blog-layout{ grid-template-columns: 1fr; grid-gap: 26px; }
    body#blog-post .blog-aside{ position: static; }
    body#blog-post .blog-toc{ max-height: none; }
    body#blog-post .blog-main{ max-width: none; }
}


/* ============ COTIZADOR ARRIBA, EN TODO EL BLOG ============ */
/* Copia verbatim las reglas que home.css aplica al cotizador del resto del sitio.
   Unica diferencia: position static en vez de sticky, porque en el blog iria
   tapando el contenido al hacer scroll.
   La clase .blog-cotizador es propia de este bloque y no existe en ningun otro
   sitio, asi que no puede chocar con blog.css ni con base.min.css. */

/* Separacion con el contenido. En las landings el naranja termina y lo que
   sigue empieza 18px despues; hay que dar ese mismo respiro, pero el margen
   que hace falta NO es el mismo en las tres plantillas del blog:

   - ARTICULO: debajo va la miga de pan, que ya trae 16px propios -> 2px bastan.
   - INDICE y CATEGORIA: debajo va el bloque del banner, cuyo contenedor no trae
     ningun margen, asi que con 2px la imagen quedaba pegada al naranja. */
body#blog-post .blog-cotizador{ margin-bottom: 2px; }
body#blog .blog-cotizador,
body#blog-category .blog-cotizador{ margin-bottom: 28px; }

.blog-cotizador .section-home-orange{
    background-color: #f6c24c;
    position: static;   /* en la portada es sticky; aqui taparia el contenido */
    box-shadow: 0 0 10px rgba(0,0,0,.5);
    z-index: 9;
    margin: 0;
    padding: 0;
}
/* NADA de max-width en el .container del cotizador: el sitio usa el contenedor
   responsivo de Bootstrap (540 / 720 / 960 / 1140 segun el ancho de pantalla).
   Poner un max-width fijo anulaba esos cuatro puntos de corte y a 1024px el
   contenedor se iba a 1024 en vez de 960, dejando los campos pegados al borde. */
.blog-cotizador .home-bookingbox{ display: flex; flex-direction: column; }
.blog-cotizador .home-bookingbox .top_{ margin-top: 10px; }
.blog-cotizador .home-bookingbox .top_ h2{
    /* mismas metricas que el <h1> de las landings: 20px de cuerpo, 35px de
       interlineado y sin margenes. Con 8px de margen arriba y 6px abajo el
       recuadro quedaba en 119px en vez de 127px. */
    font-size: 15pt; color: #33393f; text-align: center;
    line-height: 35px; margin: 0; font-weight: bold;
}
.blog-cotizador .home-bookingbox .content_{
    display: grid; grid-gap: 8px;
    grid-template-areas: "type from to passengers currency button";
    margin-bottom: 15px;
}
.blog-cotizador .home-bookingbox .content_ label{
    font-size: 11pt; line-height: 2; color: #33393f; font-weight: bold;
}
.blog-cotizador .home-bookingbox .content_ select,
.blog-cotizador .home-bookingbox .content_ input{ height: 38px; }
.blog-cotizador .home-bookingbox .content_ .type_{ grid-area: type; }
.blog-cotizador .home-bookingbox .content_ .from_{ grid-area: from; position: relative; }
.blog-cotizador .home-bookingbox .content_ .to_{ grid-area: to; position: relative; }
.blog-cotizador .home-bookingbox .content_ .passengers_{ grid-area: passengers; }
.blog-cotizador .home-bookingbox .content_ .currency_{ grid-area: currency; }
.blog-cotizador .home-bookingbox .content_ .button_{ grid-area: button; display: flex; }
.blog-cotizador .home-bookingbox .content_ .button_ button{
    width: 100%; background-color: #2d57a5; align-self: flex-end;
    min-height: 38px; border-radius: 5px; border: 0; color: #fff; cursor: pointer;
}
@media screen and (max-width: 976px){
    .blog-cotizador .home-bookingbox .content_{
        grid-gap: 10px;
        grid-template-areas: "type from to" "passengers currency button";
    }
}
@media screen and (max-width: 500px){
    .blog-cotizador .home-bookingbox .content_{
        grid-gap: 10px;
        grid-template-areas: "type type" "from to" "passengers currency" "button button";
    }
}
@media screen and (max-width: 350px){
    .blog-cotizador .home-bookingbox .content_{
        grid-gap: 10px;
        grid-template-areas: "type" "from" "to" "passengers" "currency" "button";
    }
}


/* ============ PEGAR EL COTIZADOR AL MENU ============ */
/* blog.css hace:
       body#blog #site-content-parser, body#blog-category #site-content-parser
       { margin-top: 10px; }
   Ese margen existia para dar aire al contenido del blog bajo el menu. Ahora el
   cotizador va primero y esos 10px lo separaban de la barra de navegacion,
   mientras que en las landings el naranja arranca pegado (hueco = 0).
   Se anula solo cuando la pagina lleva el cotizador delante. */
body#blog #site-content-parser,
body#blog-category #site-content-parser,
body#blog-post #site-content-parser{ margin-top: 0; }


/* ============ AVATAR DEL AUTOR EN LAS TARJETAS ============ */
/* Venia con margin-top:-60px y pegado al borde izquierdo, asi que quedaba
   cortado por la mitad contra la imagen y sin separacion. Se mantiene el
   solape (es intencionado) pero con margen lateral y anillo blanco para que
   se lea como una pieza y no como un recorte. */
body#blog .blog_box .blog_content img,
body#blog-category .blog_box .blog_content img,
body#blog-post .blog_box .blog_content img{
    margin: -34px 0 8px 2px;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.14);
    position: relative;
    z-index: 2;
}