/* ===== Just Married — piezas nuevas de portada, header, footer y captación =====
   Complementa assets/css/style.css (no se edita). Colores: azul noche #14233d,
   azul #23669d, cielo #eaf3fa. Sin íconos de adorno: números editoriales y fotos reales. */

/* --- Logo en imagen --- */
.logo{display:inline-flex;align-items:center;flex:none}
.logo img{display:block;height:44px;width:auto}
.hdr-panel .logo img{height:38px}
@media (max-width:640px){.logo img{height:34px}.hdr-panel .logo img{height:30px}}
.ftr-logo{display:block;height:48px;width:auto;margin-bottom:12px}

/* --- Menú: un desplegable por grupo (más angosto que el mega-menú) --- */
@media (min-width:861px){
  .nav-cats-menu.ncm-sm{position:absolute;top:calc(100% + 6px);left:0;transform:none;width:auto;min-width:240px;
    grid-template-columns:1fr;padding:14px 12px;gap:0}
  .nav-cats-menu.ncm-sm.ncm-2{min-width:460px;grid-template-columns:1fr 1fr;gap:0 18px}
  /* puente invisible sobre el hueco de 6px: sin él, el menú se cerraba al bajar el mouse.
     Va en .nav-cats y no en el menú porque el overflow:auto del menú recorta su ::before. */
  .nav-cats:hover::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
}
.nav a.nav-pub{color:#fff}

/* --- Hero de portada --- */
.hero-jm{background-position:center 60%}
.hero-jm .eyebrow{display:inline-block;color:#fff;font-size:.78rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  background:rgba(20,35,61,.42);padding:6px 14px;border-radius:999px;margin-bottom:16px}
.hero-jm .quick-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px;position:relative;z-index:2}
.hero-jm .quick-filters .qf{display:inline-block;padding:8px 15px;border-radius:999px;font-size:.9rem;color:var(--txt);
  background:rgba(255,255,255,.94);border:1px solid transparent;transition:.2s}
.hero-jm .quick-filters .qf:hover{color:var(--gold)}

/* --- Bloques por grupo de categorías --- */
.jm-grupos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.jm-grupo{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 22px 16px}
.jm-grupo h3{font-size:1.3rem;margin-bottom:4px}
.jm-grupo p.jm-grupo-txt{color:var(--muted);font-size:.88rem;margin-bottom:12px}
.jm-grupo a{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:.95rem;color:var(--txt);transition:.2s}
.jm-grupo a:hover{color:var(--gold)}
.jm-grupo a small{color:var(--muted);font-size:.78rem;white-space:nowrap}

/* --- Destinos con foto --- */
.jm-destinos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.jm-dest{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:4/3.4;background:var(--bg2)}
.jm-dest img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.jm-dest:hover img{transform:scale(1.05)}
.jm-dest span{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;color:#fff;font-family:'Playfair Display',Georgia,serif;
  font-size:1.15rem;font-weight:600;background:linear-gradient(180deg,transparent,rgba(20,35,61,.82))}
@media (max-width:520px){.jm-destinos{grid-template-columns:repeat(2,1fr);gap:10px}.jm-dest span{font-size:1rem}}

/* --- Guías --- */
.jm-guias{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.jm-guias a{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-weight:600;line-height:1.35;transition:.2s}
.jm-guias a:hover{border-color:var(--gold);color:var(--gold)}

/* --- Pasos y ventajas con número editorial --- */
.jm-pasos{list-style:none;counter-reset:jm;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px 28px}
.jm-pasos li{counter-increment:jm;position:relative;padding-top:6px}
.jm-pasos li::before{content:counter(jm,decimal-leading-zero);display:block;font-family:'Playfair Display',Georgia,serif;
  font-size:2.2rem;line-height:1;color:var(--gold);margin-bottom:8px}
.jm-pasos li strong{display:block;font-size:1.05rem;margin-bottom:4px;color:var(--txt)}
.jm-pasos li span{color:var(--muted);font-size:.94rem}

/* --- Bloque para anunciantes (fondo azul noche) --- */
.jm-anun{background:#14233d;color:#fff;border-radius:24px;padding:46px 40px;position:relative;overflow:hidden}
.jm-anun .eyebrow{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#a9cbe6;margin-bottom:10px}
.jm-anun h2{font-size:clamp(1.7rem,3.4vw,2.4rem);color:#fff;margin-bottom:12px;max-width:760px}
.jm-anun p.jm-anun-txt{color:rgba(255,255,255,.84);max-width:720px;margin-bottom:28px;font-size:1.04rem}
.jm-anun .jm-pasos li::before{color:#7fb3dc}
.jm-anun .jm-pasos li strong{color:#fff}
.jm-anun .jm-pasos li span{color:rgba(255,255,255,.76)}
.jm-anun .jm-anun-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.jm-anun .btn-blanco{background:#fff;color:#14233d}
.jm-anun .btn-blanco:hover{transform:translateY(-2px)}
.jm-anun .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.jm-anun .btn-ghost:hover{color:#fff;border-color:#fff}
.jm-anun .jm-precio{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.72);font-size:.9rem}
.jm-anun .jm-precio a{color:#fff;text-decoration:underline}
@media (max-width:560px){.jm-anun{padding:34px 20px}.jm-anun .jm-anun-cta .btn{width:100%;justify-content:center}}

/* --- Texto corrido de páginas internas --- */
.jm-prosa{max-width:820px;margin:0 auto;line-height:1.8;font-size:1.02rem}
.jm-prosa h2{font-size:1.5rem;margin:30px 0 12px}
.jm-prosa p{margin-bottom:14px}
.jm-prosa ul{margin:0 0 14px 20px}
.jm-precio-final{max-width:820px;margin:0 auto;text-align:center;color:var(--muted);font-size:.95rem}
.jm-precio-final strong{color:var(--txt)}

/* --- Hero de portada para agencias (2026-10-28) --- */
.hero-jm .hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:26px 0 8px}
.hero-jm .btn-lg{padding:14px 26px;font-size:1rem}
.hero-jm .hero-ghost{background:rgba(20,35,61,.62);color:#fff;border:1px solid rgba(255,255,255,.6);padding:14px 22px;backdrop-filter:blur(4px)}
.hero-jm .hero-ghost:hover{background:#fff;color:var(--txt)}
.hero-jm .hero-busca{margin:22px auto 0;font-size:.9rem;text-align:center;max-width:none;text-shadow:0 1px 8px rgba(20,35,61,.6)}
@media (max-width:640px){.hero-jm .hero-ctas .btn{width:100%;justify-content:center}}