/* ============================================================
   Blog PuntoSeguro — cabecera móvil en una fila + hueco correcto
   bajo el header fijo + migas + plantilla de página sin aire.
   Sustituye al bloque "Fix: evitar que el header fixed-top tape
   el título" de stylemain.css (líneas 642-655, v1.16), que puede
   quedarse: estas reglas lo pisan.
   Ámbito: < 992 px (donde se muestra la hamburguesa).
   ============================================================ */
@media (max-width: 991.98px){

  /* 1) Altura real del header móvil (una sola fila) */
  :root{ --ps-fixed-header-h: 64px; }

  header.header#mainheader{ min-height: var(--ps-fixed-header-h); }
  /* Causa del header de 128 px: logo (190) + botón + hamburguesa no cabían
     en 360 px y el navbar partía en dos filas. Con el logo a 150 px cabe en
     una; el .navbar-collapse (menú abierto) sigue saltando debajo como ahora. */
  #mainheader .navbar{
    align-items: center;
    column-gap: 8px;
    padding: 0 12px;
    min-height: var(--ps-fixed-header-h);
  }
  #mainheader .navbar-brand{ padding: 0; margin-right: auto; display: flex; align-items: center; flex-shrink: 0; }
  #mainheader .navbar-brand-logo{ width: 150px; height: auto; }
  /* Con #id para ganar al CSS inline del tema (.header .navbar a.ps-header-cta) */
  #mainheader .navbar a.ps-header-cta--mobile{
    margin: 0;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
  }
  #mainheader .navbar-toggler{ padding: 6px 0 6px 4px; }
  @media (max-width: 359px){   /* iPhone SE / Galaxy pequeños */
    #mainheader .navbar{ padding: 0 10px; column-gap: 6px; }
    #mainheader .navbar-brand-logo{ width: 118px; }
    #mainheader .navbar a.ps-header-cta--mobile{ padding: 8px 10px; font-size: 12px; }
    #mainheader .navbar-toggler{ padding: 6px 0; }
  }

  /* 2) Hueco bajo el header fijo en TODAS las plantillas (antes solo .single-post) */
  body{ padding-top: var(--ps-fixed-header-h) !important; }
  body.admin-bar{ padding-top: calc(var(--ps-fixed-header-h) + 46px) !important; }
  .puntoseguro_blog_banner, .main-banner{ margin-top: 0 !important; }

  /* 3) Migas de pan: una línea, pegadas al header; en móvil se oculta el
        último nivel (repetía el título del artículo en dos líneas) */
  .ps-breadcrumb{ margin: 14px 16px 0 !important; padding: 0 !important; }
  .ps-breadcrumb__item--current,
  .ps-breadcrumb__sep:nth-last-child(2){ display: none; }

  /* 4) Posts: título pegado a las migas */
  .main-container.pt-3{ padding-top: 0 !important; }
  main > h1.py-3{ padding-top: 8px !important; padding-bottom: 8px !important; }

  /* 5) Plantilla de página (p. ej. metodología de rankings): quitar
        los ~150 px de aire de los contenedores anidados y alinear como los posts */
  .bannernew.blog{ padding-bottom: 0 !important; }
  .bannernew.blog .container-fluid{ padding: 0 !important; }
  .bannernew.blog .container-md{ padding: 8px 16px 0 !important; }
  .bannernew.blog .row.pb-4{ padding-bottom: 12px !important; }
  .bannernew.blog .text-center{ text-align: left !important; }
  .bannernew.blog h1{ font-size: 1.55rem; line-height: 1.25; margin-bottom: 0; }

  /* 6) (Opcional, descomentar) Firma GEO compacta en móvil: de 5 líneas a 2.
  .ps-geo-firma{ text-align: left; font-size: 13px; line-height: 1.5; }
  .ps-geo-firma > span{ display: inline; }
  .ps-geo-firma-sep{ display: inline; }
  */
}

/* ============================================================
   Barra CTA inferior en móvil (la pinta ps-blog-movil.php; la
   muestra ps-blog-movil.js cuando hay decisión de cookies y el
   lector lleva ~35 % del artículo). Solo < 992 px.
   ============================================================ */
.ps-sticky-cta{ display: none; }
.ps-sticky-cta[hidden]{ display: none !important; }
@media (max-width: 991.98px){
  .ps-sticky-cta{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1029; /* bajo el header (1030) y bajo CookieYes */
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    font-family: 'Poppins', system-ui, sans-serif;
    transform: translateY(110%); transition: transform .3s ease;
  }
  .ps-sticky-cta.is-visible{ transform: translateY(0); }
  .ps-sticky-cta__text{ flex: 1 1 auto; min-width: 0; line-height: 1.25; }
  .ps-sticky-cta__text strong{ display: block; font-size: 14px; font-weight: 600; color: #142c91; }
  .ps-sticky-cta__text span{ display: block; font-size: 12px; color: #5a6b7b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ps-sticky-cta__btn{
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    background: #142c91 !important; color: #fff !important; text-decoration: none !important;
    font-size: 13px; font-weight: 600; line-height: 1; padding: 11px 16px; border-radius: 999px; white-space: nowrap;
  }
  .ps-sticky-cta__btn:hover, .ps-sticky-cta__btn:focus{ background: #002f87 !important; color: #fff !important; }
  .ps-sticky-cta__close{
    flex: 0 0 auto; width: 32px; height: 32px; border: 0; background: transparent; color: #5a6b7b;
    font-size: 22px; line-height: 1; padding: 0; cursor: pointer;
  }
  /* Con la barra visible: hueco al final de la página y subir el botón de CookieYes */
  body.ps-sticky-cta-open{ padding-bottom: 72px; }
  body.ps-sticky-cta-open .cky-btn-revisit-wrapper{ bottom: 84px !important; }
  /* Hasta que el visitante decide cookies, el banner manda: la barra ni se pinta */
}

/* ============================================================
   Estilo base de las migas (.ps-breadcrumb). single.php lo lleva inline;
   las páginas no, así que se repite aquí para las migas que inyecta
   ps-blog-movil.php. Idéntico al de los posts.
   ============================================================ */
.ps-breadcrumb{ margin: 12px 0 16px; font-size: 14px; color: #6a6a6a; }
.ps-breadcrumb__list{ list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ps-breadcrumb__item a{ color: #0f4479; text-decoration: none; font-weight: 600; }
.ps-breadcrumb__item a:hover{ text-decoration: underline; }
.ps-breadcrumb__sep{ color: #b5b5b5; }
.ps-breadcrumb__item--current{ color: #303235; font-weight: 600; }
@media (max-width: 767px){ .ps-breadcrumb{ font-size: 13px; } }

/* ============================================================
   Escritorio (>= 992 px), solo páginas (plantilla bannernew): el tema no
   reserva hueco bajo el header fijo (125 px) y las migas inyectadas
   quedaban debajo; además había ~250 px de aire entre título y texto.
   ============================================================ */
@media (min-width: 992px){
  body.page:not(.home){ padding-top: 125px; }
  body.page:not(.home).admin-bar{ padding-top: calc(125px + 32px); }
  body.page .ps-breadcrumb{ margin-top: 14px !important; margin-bottom: 0 !important; }
  body.page .bannernew.blog{ padding-bottom: 0 !important; }
  body.page .bannernew.blog .container-fluid{ padding-top: 0 !important; padding-bottom: 0 !important; }
  body.page .bannernew.blog .container-md{ padding-top: 8px !important; padding-bottom: 0 !important; }
  body.page .bannernew.blog .row.pb-4{ padding-bottom: 0 !important; }
}

/* ============================================================
   v1.1.0 — Páginas del blog (plantilla bannernew, p. ej. metodología de
   rankings): columna de lectura de 860 px, título alineado con el texto,
   H2 de sección y tablas .comparativa-vida con cabecera azul y zebra.
   ============================================================ */
body.page .ps-breadcrumb{ max-width: 860px; margin-left: auto !important; margin-right: auto !important; padding: 0 16px !important; }
body.page .bannernew.blog .container-md{ max-width: 860px; margin-left: auto; margin-right: auto; padding-left: 16px !important; padding-right: 16px !important; }
body.page .bannernew.blog .row.justify-content-center{ justify-content: flex-start !important; }
body.page .bannernew.blog .col-xl-10{ flex: 0 0 100%; max-width: 100%; }
body.page .bannernew.blog .text-center{ text-align: left !important; }
body.page .bannernew.blog h1{ font-size: 38px; line-height: 1.2; color: #131413; margin: 6px 0 0; }
body.page .textimages1-page-type-wrapper .entry-content{ max-width: 860px; margin-left: auto; margin-right: auto; padding: 0 16px; }
body.page .entry-content{ font-size: 17px; line-height: 1.7; color: #333; }
body.page .entry-content > p{ margin-bottom: 1.1em; }
body.page .entry-content > p[style]{ border-radius: 3px; }
body.page .entry-content h2{ font-size: 26px; font-weight: 500; color: #142c91; margin: 44px 0 14px; padding-bottom: 8px; border-bottom: 2px solid #EDEEF6; }
body.page .entry-content h2:first-of-type{ margin-top: 28px; }
body.page .entry-content h3{ font-size: 20px; font-weight: 500; color: #142c91; margin: 28px 0 10px; }
body.page .entry-content a{ color: #142c91; text-decoration: underline; text-decoration-color: #b8c0e6; text-underline-offset: 2px; }
body.page .entry-content a:hover{ text-decoration-color: #142c91; }
body.page .entry-content .table-responsive{ margin: 16px 0 10px; border: 1px solid #e3e6f0; border-radius: 3px; }
body.page .entry-content table.comparativa-vida{ width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; margin: 0; }
body.page .entry-content table.comparativa-vida thead th{ background: #142c91; color: #fff; font-weight: 500; text-align: left; padding: 11px 12px; vertical-align: bottom; white-space: nowrap; }
body.page .entry-content table.comparativa-vida tbody th,
body.page .entry-content table.comparativa-vida tbody td{ padding: 10px 12px; border-top: 1px solid #e3e6f0; vertical-align: top; text-align: left; color: #333; }
body.page .entry-content table.comparativa-vida tbody th{ font-weight: 700; color: #142c91; white-space: nowrap; }
body.page .entry-content table.comparativa-vida tbody tr:nth-child(even){ background: #f6f7fb; }
body.page .entry-content table.comparativa-vida td strong{ color: #131413; white-space: nowrap; }
body.page .entry-content table.comparativa-vida td a{ text-decoration: none; border-bottom: 1px solid #b8c0e6; }
body.page .entry-content p[id^="nota-"]{ font-size: 14px; color: #5a6b7b; margin: 8px 0 0; }
body.page .entry-content p[id^="nota-"] em{ font-style: normal; }
@media (max-width: 767px){
  body.page .bannernew.blog h1{ font-size: 26px; }
  body.page .entry-content{ font-size: 16px; }
  body.page .entry-content h2{ font-size: 22px; margin-top: 34px; }
  body.page .entry-content table.comparativa-vida{ font-size: 13px; }
  body.page .entry-content table.comparativa-vida thead th,
  body.page .entry-content table.comparativa-vida tbody th,
  body.page .entry-content table.comparativa-vida tbody td{ padding: 8px 10px; }
}