/* ============================================================
   PuntoSeguro Blog — diseño móvil v1.0.0 (30/10/2026)
   Complementa a ps-blog-movil.css (cabecera, migas, CTA inferior).
   Radios 3 px, Poppins 400/500/700, colores de marca.
   ============================================================ */

/* Poppins: @font-face válidos también aquí (esta hoja no pasa por UCSS ni
   tiene caché de un año), porque el UCSS de LiteSpeed y las cachés del
   navegador seguían sirviendo los @font-face rotos de stylemain.css. */
@font-face{ font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/blog/wp-content/themes/puntoseguro/css/gfonts/poppins-normal.woff2') format('woff2'); }
@font-face{ font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/blog/wp-content/themes/puntoseguro/css/gfonts/poppins-medium.woff2') format('woff2'); }
@font-face{ font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/blog/wp-content/themes/puntoseguro/css/gfonts/poppins-bold.woff2') format('woff2'); }

/* Imágenes de las tarjetas: el tema pone .rounded en <picture>, no en la
   imagen, y salían con esquinas rectas. Mismo radio en el post. */
.blog-post figure img,
.blog-post figure picture{ border-radius: 3px; }
.single-post article > figure img,
.single-post .posts-full-width-featured-image1 img{ border-radius: 3px !important; }

/* Firma GEO (plugin ps-geo): sin el tiempo de lectura, en todos los tamaños */
.ps-geo-firma-lectura,
.ps-geo-firma-sep:has(+ .ps-geo-firma-lectura){ display: none !important; }

/* ============================================================
   Escritorio (>= 992 px)
   ============================================================ */
@media (min-width: 992px){

  /* Post: ~100 px entre migas y H1 (nav.mt-5.pt-2 + .container.mt-sm-5
     + section.pt-sm-4 + h1.py-3). Se deja en ~28 px. */
  /* v1.0.3: el body solo reserva 96 px y el header fijo mide 125 px; antes lo
     compensaba el margen de 56 px de las migas, que se redujo en v1.0.1 y las
     dejó tapadas. Se reserva el alto real del header (+32 px con admin bar). */
  body.single-post{ padding-top: 125px !important; }
  body.single-post.admin-bar{ padding-top: 157px !important; }
  .single-post .ps-breadcrumb{ margin-top: 20px !important; padding-top: 0 !important; margin-bottom: 0 !important; }
  .single-post .ps-breadcrumb + .container{ margin-top: 0 !important; }
  .single-post .main-container{ padding-top: 0 !important; }
  .single-post main > h1.py-3{ padding-top: 28px !important; }

  /* Tablas: en escritorio las celdas pueden partir línea, así que el scroll
     horizontal solo aparece si la tabla no cabe ni así. En móvil se mantiene
     el comportamiento actual (una línea por celda + scroll). */
  .ps-tv-tabla td,
  .ps-tv-tabla tbody th{ white-space: normal; }
  .ps-tv-tabla .ps-tv-precio,
  .ps-tv-tabla .ps-tv-badge{ white-space: nowrap; }
  /* Tablas normales del post: el tema les pone display:block + width:max-content,
     que impide partir línea y fuerza el scroll. Con width:auto la tabla se
     ajusta al ancho de la columna y conserva overflow-x:auto por si no cabe. */
  .single-post .post-inner.blogposts .post-content table{ width: auto; }
}

/* Pie: enlace "Configurar cookies" que inserta ps-blog-diseno.js */
.footer-bottom-links .ps-cky-config{ cursor: pointer; }

@media (max-width: 991.98px){

  /* 1) Categorías y etiquetas: ~160 px de aire sobre el H1
        (main.py-5 + margin-top inline + header.my-4.pt-4 + gutter .g-5) */
  body.archive main.container.py-5{ padding-top: 0 !important; margin-top: 0 !important; }
  body.archive main.container > header.row{
    --bs-gutter-y: 0;
    margin-top: 20px !important; margin-bottom: 4px !important; padding-top: 0 !important;
  }
  body.archive main.container > header.row h1{
    font-size: 26px; line-height: 1.25; font-weight: 700; margin-bottom: 10px !important;
  }
  body.archive .archive-description{
    font-size: 15px; line-height: 1.55; color: #333; max-width: 34em; margin: 0 auto;
  }
  body.archive .archive-description p{ margin-bottom: 0; }
  body.archive main.container > .row.mt-4{ margin-top: 8px !important; }

  /* 2) Portada del blog: que se vea el primer artículo en la primera pantalla */
  .puntoseguro_blog_banner{ height: auto !important; overflow: visible; }
  .puntoseguro_blog_banner h1{ font-size: 26px; line-height: 1.25; margin: 20px 0 6px !important; }
  .puntoseguro_blog_banner .custom-trustpilot{
    flex-wrap: nowrap; gap: 6px; font-size: 12px; margin: 0 auto 8px; white-space: nowrap;
  }
  .puntoseguro_blog_banner .custom-trustpilot .trust-stars{ width: 76px; height: auto; }
  .puntoseguro_blog_banner .custom-trustpilot .trustpilot-logo{ width: 68px; height: auto; margin-top: -4px; }
  .puntoseguro_blog_banner .h2{
    font-size: 16px !important; line-height: 1.5; font-weight: 400; color: #333;
    max-width: 30em; margin: 0 auto 14px !important;
  }
  body.home section.question.container{ margin-top: 0 !important; }

  /* Tarjetas del listado (portada y categorías) */
  .blog-post{ padding-top: 12px !important; padding-bottom: 20px !important; }
  .blog-post figure{ margin-bottom: 12px !important; }
  .blog-post .entry-title{ font-size: 20px; line-height: 1.3; }
  .blog-post .entry-summary p{ font-size: 15px; line-height: 1.55; color: #333; margin-bottom: 0; }

  /* 3) Post: H1 alineado a la izquierda con el texto, firma en 2 líneas,
        migas en una (se oculta el nivel intermedio "Seguros de vida/salud";
        el schema BreadcrumbList no cambia) */
  .single-post main > h1.py-3{
    text-align: left !important; font-size: 26px; line-height: 1.25; font-weight: 700;
    padding-top: 14px !important; padding-bottom: 10px !important;
  }
  .single-post .ps-geo-firma{ text-align: left; font-size: 13px; line-height: 1.5; color: #5a6b7b; margin-bottom: 4px; }
  .single-post .ps-geo-firma p{ margin: 0; }
  .single-post .ps-breadcrumb{ white-space: nowrap; overflow: hidden; }
  .single-post .ps-breadcrumb__list{ flex-wrap: nowrap; }
  .single-post .ps-breadcrumb__list:has(> :nth-child(7)) > :nth-child(3),
  .single-post .ps-breadcrumb__list:has(> :nth-child(7)) > :nth-child(4){ display: none; }
  .single-post .ps-breadcrumb__item{ overflow: hidden; text-overflow: ellipsis; min-width: 0; }

  /* 4) Menú abierto: fondo oscuro detrás (el desplegable queda dentro del
        header fijo y el contenido se veía por debajo). Toque fuera = cerrar (JS). */
  #mainheader:has(.navbar-collapse.show),
  #mainheader:has(.navbar-collapse.collapsing){
    box-shadow: 0 0 0 100vmax rgba(19, 20, 19, .45);
  }
  #mainheader .navbar-collapse.show{
    max-height: calc(100dvh - var(--ps-fixed-header-h, 64px)); overflow-y: auto; padding-bottom: 12px;
  }
  body.ps-menu-open{ overflow: hidden; }

  /* 5) CookieYes: el botón flotante tapaba el texto. Con el enlace
        "Configurar cookies" ya en el pie (lo pone el JS y añade la clase),
        el botón se oculta en móvil. Sin JS, el botón sigue como estaba. */
  body.ps-cky-footer-link .cky-btn-revisit-wrapper{ display: none !important; }
}

/* ============================================================
   v1.0.2 — Bootstrap: reglas base de los desplegables. El CSS optimizado
   (UCSS) que LiteSpeed sirve a anónimos las había perdido y los submenús
   salían abiertos en escritorio. Copia de bootstrap.min.css 5.3.
   ============================================================ */
.dropdown-menu{
  position: absolute; z-index: 1000; display: none; min-width: 10rem;
  padding: .5rem 0; margin: 0; list-style: none; text-align: left;
  background-color: #fff; background-clip: padding-box; border-radius: .25rem;
}
.dropdown-menu.show{ display: block; }
.navbar-expand-lg .navbar-nav .dropdown-menu{ position: absolute; }
@media (max-width: 991.98px){ .navbar-nav .dropdown-menu{ position: static; } }

/* ============================================================
   v1.0.2 — Menú de escritorio en una línea en portátiles (992-1399 px).
   Con Poppins ya cargada, a 1.280 px los enlaces se partían en dos
   líneas. Textos sin tocar (GEO): solo tamaño y separaciones.
   ============================================================ */
@media (min-width: 992px) and (max-width: 1399.98px){
  #mainheader .navbar-nav > li{ margin-left: 14px !important; margin-right: 0 !important; }
  #mainheader .navbar-nav > li > .nav-link{
    font-size: 15px !important; white-space: nowrap;
    padding-left: 6px !important; padding-right: 6px !important;
  }
  #mainheader .ps-search-trigger--desktop{ margin-left: 14px; }
}
@media (min-width: 992px) and (max-width: 1199.98px){
  #mainheader .navbar{ padding-left: 0; padding-right: 0; }
  #mainheader .navbar-brand-logo{ width: 150px !important; height: auto; }
  #mainheader .navbar-nav > li{ margin-left: 8px !important; }
  #mainheader .ps-search-trigger--desktop{ margin-left: 8px; padding: 0 12px; }
  #mainheader .ps-search-trigger--desktop .ps-search-trigger__text{ display: none; }
}

/* ============================================================
   v1.0.2 — Estilos del header que viven en un <style> inline de header.php
   y que el CSS optimizado de LiteSpeed para anónimos (UCSS) ha perdido:
   botón "Calcular precio" sin estilo y submenús abiertos en escritorio.
   Copia literal de header.php (líneas ~485-490 y ~565-572).
   ============================================================ */
.header .navbar a.ps-header-cta,.ps-header-cta{ display:inline-flex; align-items:center; justify-content:center; background:#142c91 !important; color:#fff !important; font-family:'Poppins',system-ui,sans-serif; font-weight:500; font-size:14px; line-height:1; text-decoration:none !important; padding:10px 16px; border-radius:2px; white-space:nowrap; transition:background .25s ease; }
.header .navbar a.ps-header-cta:hover,.header .navbar a.ps-header-cta:focus,.ps-header-cta:hover,.ps-header-cta:focus{ background:#002f87 !important; color:#fff !important; text-decoration:none !important; }
.ps-header-cta:focus-visible{ outline:2px solid #0F4479; outline-offset:2px; }
@media (min-width: 992px){
  .ps-header-cta--desktop{ margin-left:14px; font-size:15px; padding:12px 22px; }
  #navbarSupportedContent ul#menu-new_main_menu li:last-child .dropdown-menu{ right:-22px; }
  #navbarSupportedContent ul#menu-new_main_menu li:nth-last-child(2) .dropdown-menu{ right:auto; left:-100%; }
  .dropdown-menu{ position:absolute; float:none; display:none; }
  .navbar .dropdown:hover > .dropdown-menu{ display:block; }
  .dropdown-menu.show{ display:block; }
}