/* BLOG HOME TEMPLATE */
:root {
    --loyal-header-height: 72px;
  }

  .wp-site-blocks {
    padding-top: 0 !important;
  }

  .wp-site-blocks > .wp-block-template-part + .loyal-blog-hero,
  .wp-site-blocks > .wp-block-template-part + .wp-block-cover {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
  }

  .loyal-blog-hero {
    width: 100vw !important;
    max-width: none !important;
    height: calc(100svh - var(--loyal-header-height)) !important;
    min-height: calc(100svh - var(--loyal-header-height)) !important;
    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    background: #0f172a !important;
  }

  .loyal-blog-hero .wp-block-cover__image-background {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 0 !important;
  }

  .loyal-blog-hero .wp-block-cover__background,
  .loyal-blog-hero .wp-block-cover__gradient-background,
  .loyal-blog-hero::before,
  .loyal-blog-hero::after {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
  }

  .loyal-blog-hero .wp-block-cover__inner-container {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .loyal-blog-hero-card {
    width: 760px !important;
    max-width: calc(100% - 48px) !important;
    padding: 46px 48px 42px !important;
    border-radius: 24px !important;
    text-align: center !important;
    background: rgba(15, 23, 42, 0.34) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.30) !important;
    box-sizing: border-box !important;
    transform: translateY(-40px) !important;
  }

  .loyal-blog-kicker {
    margin: 0 0 12px !important;
    color: #ffb071 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
  }

  .loyal-blog-hero-card h1 {
    margin: 0 0 18px !important;
    color: #ffffff !important;
    font-size: 56px !important;
    line-height: 1.03 !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    text-shadow: 0 3px 18px rgba(0,0,0,0.28) !important;
  }

  .loyal-blog-hero-card p {
    margin: 0 auto !important;
    max-width: 640px !important;
    color: #f8fafc !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
    font-weight: 500 !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.24) !important;
  }

  .loyal-blog-hero-actions {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 28px !important;
  }

  .loyal-blog-hero-btn {
    display: inline-block !important;
    background: #ff7a1a !important;
    color: #ffffff !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: 0 14px 30px rgba(255, 122, 26, 0.28) !important;
  }

  .loyal-blog-hero-secondary {
    display: inline-block !important;
    background: rgba(255,255,255,0.92) !important;
    color: #0f172a !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
  }

  .loyal-blog-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 70px 22px 80px !important;
    background: #f8fafc !important;
    box-sizing: border-box !important;
  }

  .loyal-blog-inner {
    max-width: 1180px !important;
    margin: 0 auto !important;
  }

  .loyal-blog-intro {
    margin: 0 auto 34px !important;
    max-width: 860px !important;
    text-align: center !important;
  }

  .loyal-blog-intro h2 {
    margin: 0 0 12px !important;
    color: #0f172a !important;
    font-size: 42px !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
  }

  .loyal-blog-intro p {
    margin: 0 auto !important;
    color: #475569 !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
    max-width: 760px !important;
  }

  .loyal-blog-query {
    max-width: 1180px !important;
    margin: 0 auto !important;
  }

  .loyal-blog-query .wp-block-post-template {
    gap: 24px !important;
  }

  .loyal-blog-post-card {
    height: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  .loyal-blog-post-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.11) !important;
  }

  .loyal-blog-post-card .wp-block-post-featured-image {
    margin: 0 !important;
  }

  .loyal-blog-post-card .wp-block-post-featured-image img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block !important;
  }

  .loyal-blog-card-body {
    padding: 22px 22px 24px !important;
  }

  .loyal-blog-card-body .wp-block-post-date {
    margin: 0 0 10px !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  .loyal-blog-card-body .wp-block-post-title {
    margin: 0 0 12px !important;
    font-size: 24px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.03em !important;
  }

  .loyal-blog-card-body .wp-block-post-title a {
    color: #0f172a !important;
    text-decoration: none !important;
  }

  .loyal-blog-card-body .wp-block-post-title a:hover {
    color: #ff7a1a !important;
  }

  .loyal-blog-card-body .wp-block-post-excerpt {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
  }

  .loyal-blog-card-body .wp-block-post-excerpt__more-link {
    display: inline-block !important;
    margin-top: 12px !important;
    color: #0f4c81 !important;
    font-weight: 900 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }

  .loyal-blog-pagination {
    margin-top: 44px !important;
    gap: 12px !important;
  }

  .loyal-blog-pagination a,
  .loyal-blog-pagination .page-numbers {
    border-radius: 10px !important;
    padding: 10px 14px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    font-weight: 800 !important;
  }

  .loyal-blog-pagination a:hover {
    background: #ff7a1a !important;
    color: #ffffff !important;
    border-color: #ff7a1a !important;
  }

  .loyal-blog-empty {
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 28px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    text-align: center !important;
    color: #475569 !important;
  }

  @media (max-width: 900px) {
    .loyal-blog-hero-card {
      padding: 34px 28px !important;
      transform: translateY(-20px) !important;
    }

    .loyal-blog-hero-card h1 {
      font-size: 42px !important;
    }

    .loyal-blog-hero-card p {
      font-size: 16px !important;
    }

    .loyal-blog-intro h2 {
      font-size: 32px !important;
    }
  }

  @media (max-width: 768px) {
    :root {
      --loyal-header-height: 96px;
    }

    .loyal-blog-hero {
      height: calc(100svh - var(--loyal-header-height)) !important;
      min-height: calc(100svh - var(--loyal-header-height)) !important;
    }

    .loyal-blog-hero-card {
      max-width: calc(100% - 36px) !important;
      padding: 30px 24px !important;
      border-radius: 18px !important;
      transform: translateY(-10px) !important;
    }

    .loyal-blog-hero-card h1 {
      font-size: 38px !important;
    }

    .loyal-blog-hero-actions a {
      width: 100% !important;
      text-align: center !important;
      box-sizing: border-box !important;
    }

    .loyal-blog-main {
      padding: 52px 18px 64px !important;
    }
  }
  @media(max-width:430px){
    :root{
      --loyal-header-height:82px;
    }

    .loyal-blog-hero{
      height:calc(100dvh - var(--loyal-header-height)) !important;
      min-height:520px !important;
      max-height:680px !important;
    }

    .loyal-blog-hero .wp-block-cover__inner-container{
      align-items:flex-start !important;
      justify-content:center !important;
      padding-top:34px !important;
      box-sizing:border-box !important;
    }

    .loyal-blog-hero-card{
      width:auto !important;
      max-width:calc(100% - 44px) !important;
      padding:24px 20px 22px !important;
      border-radius:18px !important;
      transform:none !important;
    }

    .loyal-blog-kicker{
      font-size:12px !important;
      line-height:1.2 !important;
      letter-spacing:.12em !important;
      margin:0 0 10px !important;
    }

    .loyal-blog-hero-card h1{
      font-size:30px !important;
      line-height:1.08 !important;
      letter-spacing:-.035em !important;
      margin:0 0 12px !important;
    }

    .loyal-blog-hero-card p{
      font-size:14.5px !important;
      line-height:1.52 !important;
      max-width:100% !important;
      margin:0 auto !important;
    }

    .loyal-blog-hero-actions{
      margin-top:18px !important;
      gap:10px !important;
    }

    .loyal-blog-hero-actions a,
    .loyal-blog-hero-btn,
    .loyal-blog-hero-secondary{
      width:100% !important;
      min-height:44px !important;
      padding:12px 16px !important;
      font-size:14px !important;
      line-height:1.15 !important;
      border-radius:11px !important;
      box-sizing:border-box !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
    }

    .loyal-blog-main{
      padding:40px 16px 58px !important;
    }

    .loyal-blog-intro{
      margin-bottom:26px !important;
    }

    .loyal-blog-intro h2{
      font-size:28px !important;
      line-height:1.12 !important;
      margin-bottom:10px !important;
    }

    .loyal-blog-intro p{
      font-size:15px !important;
      line-height:1.58 !important;
    }

    .loyal-blog-query .wp-block-post-template{
      gap:18px !important;
    }

    .loyal-blog-post-card{
      border-radius:18px !important;
    }

    .loyal-blog-post-card .wp-block-post-featured-image img{
      height:190px !important;
    }

    .loyal-blog-card-body{
      padding:18px 18px 20px !important;
    }

    .loyal-blog-card-body .wp-block-post-title{
      font-size:21px !important;
      line-height:1.22 !important;
      margin-bottom:10px !important;
    }

    .loyal-blog-card-body .wp-block-post-excerpt{
      font-size:14.5px !important;
      line-height:1.58 !important;
    }
  }

  @media(max-width:380px){
    .loyal-blog-hero .wp-block-cover__inner-container{
      padding-top:26px !important;
    }

    .loyal-blog-hero-card{
      max-width:calc(100% - 36px) !important;
      padding:22px 18px 20px !important;
    }

    .loyal-blog-hero-card h1{
      font-size:28px !important;
    }

    .loyal-blog-hero-card p{
      font-size:14px !important;
      line-height:1.48 !important;
    }

    .loyal-blog-hero-actions{
      margin-top:16px !important;
    }

    .loyal-blog-hero-actions a,
    .loyal-blog-hero-btn,
    .loyal-blog-hero-secondary{
      min-height:42px !important;
      font-size:13.5px !important;
    }
  }
  
  /* =========================================================
     SINGLE POST HERO WITH DYNAMIC H1 + EXCERPT + QUOTE CARD
  ========================================================= */

  .loyal-single-quote-hero,
  .wp-block-cover.loyal-single-quote-hero{
    width:100vw !important;
    max-width:none !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding:0 !important;
    position:relative !important;
    overflow:hidden !important;
    min-height:744px !important;
    height:calc(100svh - 72px) !important;
    background:#0f172a !important;
  }

  .loyal-single-quote-hero .wp-block-cover__image-background{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:1 !important;
    filter:none !important;
  }

  .loyal-single-quote-hero .wp-block-cover__background,
  .loyal-single-quote-hero .wp-block-cover__gradient-background,
  .loyal-single-quote-hero::before,
  .loyal-single-quote-hero::after{
    display:none !important;
    opacity:0 !important;
    background:transparent !important;
  }

  .loyal-single-quote-hero .wp-block-cover__inner-container{
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    min-height:100% !important;
    margin:0 !important;
    padding:0 !important;
    position:relative !important;
    z-index:2 !important;
  }

  .loyal-single-hero-layer{
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    position:relative !important;
    margin:0 !important;
    padding:0 !important;
  }

  .loyal-hero-quote-card{
    position:absolute !important;
    top:118px !important;
    left:40.5% !important;
    transform:translateX(-50%) !important;

    width:520px !important;
    max-width:calc(100vw - 42px) !important;

    padding:24px 24px 22px !important;
    border-radius:22px !important;

    background:rgba(255,255,255,0.82) !important;
    backdrop-filter:blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(145%) !important;

    border:1px solid rgba(255,255,255,0.82) !important;
    box-shadow:0 24px 70px rgba(15,23,42,0.28) !important;
    box-sizing:border-box !important;
    z-index:20 !important;
  }

  .loyal-hero-kicker{
    display:inline-block !important;
    margin:0 0 9px !important;
    padding:7px 11px !important;
    border-radius:999px !important;
    background:#eef6ff !important;
    color:#1d4ed8 !important;
    border:1px solid #bfdbfe !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
  }

  .loyal-hero-quote-card h1,
  .loyal-hero-dynamic-title{
    margin:0 0 9px !important;
    color:#071426 !important;
    font-size:30px !important;
    line-height:1.08 !important;
    font-weight:900 !important;
    letter-spacing:-.035em !important;
  }

  .loyal-hero-dynamic-excerpt,
  .loyal-hero-dynamic-excerpt p,
  .loyal-hero-quote-card .wp-block-post-excerpt,
  .loyal-hero-quote-card .wp-block-post-excerpt p{
    margin:0 0 14px !important;
    color:#334155 !important;
    font-size:15px !important;
    line-height:1.5 !important;
    font-weight:500 !important;
  }

  .loyal-hero-dynamic-excerpt .wp-block-post-excerpt__more-text{
    display:none !important;
  }

  .loyal-hero-form{
    display:flex !important;
    gap:10px !important;
    width:100% !important;
    margin:14px 0 0 !important;
    padding:0 !important;
    align-items:center !important;
  }

  .loyal-hero-form input{
    flex:1 1 auto !important;
    min-width:0 !important;
    height:50px !important;
    border-radius:13px !important;
    border:1px solid #cbd5e1 !important;
    background:#ffffff !important;
    color:#0f172a !important;
    padding:0 14px !important;
    font-size:16px !important;
    font-weight:700 !important;
    outline:none !important;
    box-sizing:border-box !important;
  }

  .loyal-hero-form input:focus{
    border-color:#ff7a1a !important;
    box-shadow:0 0 0 3px rgba(255,122,26,0.18) !important;
  }

  .loyal-hero-form button{
    flex:0 0 auto !important;
    height:50px !important;
    border:none !important;
    border-radius:13px !important;
    background:#ff7a1a !important;
    color:#ffffff !important;
    padding:0 18px !important;
    font-size:15px !important;
    font-weight:900 !important;
    cursor:pointer !important;
    white-space:nowrap !important;
    box-shadow:0 10px 24px rgba(255,122,26,0.26) !important;
  }

  .loyal-hero-form button:hover{
    background:#e96810 !important;
    transform:translateY(-1px) !important;
  }

  .loyal-hero-trust{
    margin:11px 0 0 !important;
    color:#475569 !important;
    font-size:12px !important;
    line-height:1.45 !important;
    font-weight:600 !important;
  }

  .loyal-single-content-shell{
    width:100%;
    max-width:none !important;
    margin:0 !important;
    padding:0 24px 40px;
    box-sizing:border-box;
  }

  .loyal-single-content-shell .wp-block-post-content{
    width:100%;
    max-width:1380px !important;
    margin:0 auto !important;
  }

  .loyal-single-content-shell .wp-block-post-content > *{
    max-width:none;
  }

  .loyal-loya-post{
    max-width:1380px !important;
    width:100%;
    padding:0 10px 42px !important;
    margin:0 auto !important;
  }

  @media (max-width:1100px){
    .loyal-hero-quote-card{
      left:50% !important;
      top:105px !important;
      width:500px !important;
    }
  }

  @media (max-width:768px){
    .loyal-single-quote-hero,
    .wp-block-cover.loyal-single-quote-hero{
      min-height:calc(100svh - 96px) !important;
      height:auto !important;
    }

    .loyal-single-quote-hero .wp-block-cover__inner-container{
      min-height:calc(100svh - 96px) !important;
      height:auto !important;
    }

    .loyal-single-hero-layer{
      min-height:calc(100svh - 96px) !important;
      display:flex !important;
      align-items:flex-end !important;
      justify-content:center !important;
      padding:20px 16px 28px !important;
      box-sizing:border-box !important;
    }

    .loyal-hero-quote-card{
      position:relative !important;
      top:auto !important;
      left:auto !important;
      transform:none !important;
      width:100% !important;
      max-width:100% !important;
      padding:20px 18px !important;
      border-radius:18px !important;
    }

    .loyal-hero-quote-card h1,
    .loyal-hero-dynamic-title{
      font-size:26px !important;
    }

    .loyal-hero-dynamic-excerpt,
    .loyal-hero-dynamic-excerpt p{
      font-size:14px !important;
    }

    .loyal-hero-form{
      flex-direction:column !important;
    }

    .loyal-hero-form input,
    .loyal-hero-form button{
      width:100% !important;
    }

    .loyal-single-content-shell{
      padding:0 14px 28px;
    }

    .loyal-loya-post{
      padding:0 4px 32px !important;
    }
  }
/* =========================================================
   SINGLE POST HERO - MOVER CARD AL MARCO ROJO / CASI CENTRO
   Pegar al final del <style>
========================================================= */

@media (min-width: 1101px){
  .loyal-single-quote-hero .loyal-hero-quote-card,
  .wp-block-cover.loyal-single-quote-hero .loyal-hero-quote-card{
    position: absolute !important;
    top: 118px !important;

    /* Mueve el card más hacia el centro/derecha */
    left: calc(50% + 450px) !important;

    right: auto !important;
    transform: translateX(-50%) !important;

    width: 520px !important;
    max-width: 520px !important;
    z-index: 50 !important;
  }
}
/* =========================================================
   SINGLE POST HERO - CARD TRANSPARENTE / GLASS EFFECT
   Pegar al final del <style>
========================================================= */

.loyal-single-quote-hero .loyal-hero-quote-card,
.wp-block-cover.loyal-single-quote-hero .loyal-hero-quote-card{
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(145%) !important;

  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22) !important;
}
/* =========================================================
   CARD MÁS TRANSPARENTE - VER FONDO REAL
========================================================= */

.loyal-single-quote-hero .loyal-hero-quote-card,
.wp-block-cover.loyal-single-quote-hero .loyal-hero-quote-card{
  background: rgba(255, 255, 255, 0.75) !important;

  /* Baja mucho el blur porque el blur es lo que lo hace verse opaco */
  backdrop-filter: blur(4px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(4px) saturate(120%) !important;

  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12) !important;
}