/*
Theme Name: JM Soluciones Grupales
Theme URI: https://www.jmsolucionesgrupales.com/
Author: JM Soluciones Grupales e Inmobiliarias
Author URI: https://www.jmsolucionesgrupales.com/p%C3%A1gina-principal
Description: Tema WordPress personalizado para JM Soluciones Grupales — Crowdfunding Empresarial, Inmobiliaria, Subastas, Vitrina Holding (18+ empresas en 7 categorías). Integración WooCommerce opcional, CTAs WhatsApp por programa, estructura responsive del menú replicada del sitio original Google Sites. Seguridad nivel B/M/A en functions.php, sin frameworks pesados.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.1
Tags: one-column, two-columns, right-sidebar, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, threaded-comments, translation-ready, e-commerce, woocommerce, business
Text Domain: jm-soluciones-grupales
Domain Path: /languages
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.txt
*/

/* ==========================================================================
   ESTILOS BASE DEL TEMA JM SOLUCIONES GRUPALES
   --------------------------------------------------------------------------
   Paleta de colores JM Soluciones Grupales (misma casa de marca que Shark Alliance):
     · Azul marino  #0f4c81 (principal)
     · Azul medio   #14548c (secundario)
     · Turquesa     #1fa4c5 (CTAs de oferta / acentos)
     · Dorado       #f5c518 (CTAs y elementos destacados del grupo)
     · Verde WA     #25d366 (CTAs WhatsApp oficial)
     · Verde 700    #15803d (hover WhatsApp)
     · Texto base   #e2e8f0 (blanco-azulado sobre fondo oscuro)
     · Fondo dark   #071a2e (azul noche corporativo)
     · Borde        #e5e7eb (claro) / rgba(245,197,24,.18) (oscuro dorado)
   Tipografía: Inter (Google Fonts) · fallback system-ui (sin dependencias externas).
   Layout máximo: 1200 px (margen izq/derecho automático, centrado).
   ========================================================================== */

/* ============================================
   1. Variables CSS (paleta + layout + breakpoints)
   ============================================ */
:root {
    --jm-c-primary:      #0f4c81;
    --jm-c-primary-600:  #14548c;
    --jm-c-primary-700:  #0c3558;
    --jm-c-accent:       #1fa4c5;
    --jm-c-accent-700:   #38bdf8;
    --jm-c-whatsapp:     #25d366;
    --jm-c-whatsapp-700: #15803d;
    --jm-c-success:      #0f766e;
    --jm-c-text:         #e2e8f0;
    --jm-c-muted:        #94a3b8;
    --jm-c-subtle:       #64748b;
    --jm-c-bg:           #071a2e;
    --jm-c-bg-alt:       #0a2540;
    --jm-c-bg-muted:     #0e2e4d;
    --jm-c-border:       rgba(245, 197, 24, 0.12);
    --jm-c-white:        #ffffff;

    --jm-c-gold:         #f5c518;
    --jm-c-gold-600:     #d4a90b;
    --jm-c-gold-700:     #a88206;
    --jm-c-dark-bg:      #071a2e;
    --jm-c-dark-bg-2:    #0a2540;
    --jm-c-dark-border:  rgba(245, 197, 24, 0.18);
    --jm-c-nav-text:     #cbd5e1;
    --jm-c-nav-hover:    var(--jm-c-gold);

    --jm-rw: 1200px;    /* Layout máximo */
    --jm-px: 1.25rem;   /* Padding horizontal móvil */
    --jm-py: 4.5rem;    /* Padding vertical secciones */

    --jm-shadow-sm: 0 1px 2px rgba(3, 7, 18, .45), 0 1px 3px rgba(3, 7, 18, .55);
    --jm-shadow-md: 0 14px 40px -16px rgba(3, 7, 18, .85);
    --jm-shadow-dark: 0 12px 40px -12px rgba(7, 26, 46, .65), 0 2px 6px rgba(7, 26, 46, .4);
    --jm-radius-sm: 6px;
    --jm-radius-md: 12px;
    --jm-radius-lg: 18px;

    --jm-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================
   2. Reset / base tipografía
   ============================================ */
html,
body {
    font-family: var(--jm-font);
    color: var(--jm-c-text);
    background-color: var(--jm-c-bg);
    line-height: 1.65;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--jm-font);
    font-weight: 800;
    line-height: 1.2;
    color: var(--jm-c-primary-700);
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
}

p { margin: 0 0 1.1rem; }

a {
    color: var(--jm-c-accent);
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}

a:hover, a:focus {
    color: var(--jm-c-gold);
    text-decoration: underline;
}

/* Accesibilidad: lector pantalla solo textos */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ============================================
   3. Layout estructural del sitio
   ============================================ */
.jm-site {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--jm-c-bg);
}

.jm-site > main {
    flex: 1 1 auto;
    padding: 0;
}

.jm-home {
    display: block;
    width: 100%;
}

/* ============================================
   3b. HEADER — Menú principal (STICKY siempre, COLOR SÓLIDO NAVY, ya NO TAPA el Hero)
   ============================================ */
:root {
    /* Altura FIJA estimada del header sticky (hace que no haya saltos de tamaño entre reposo / scrolled) */
    --jm-header-h: 76px;
}

@media (max-width: 768px) {
    :root { --jm-header-h: 68px; }
}

.jm-site-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    max-width: 100%;
    background: var(--jm-c-dark-bg);
    border-bottom: 1px solid var(--jm-c-dark-border);
    box-shadow: var(--jm-shadow-dark);
    /* SIN TRANSICIONES DE NINGÚN TIPO (ni sombras, ni nada) para NO mini-zoom al scrollear */
    transition: none;
    /* NINGÚN overflow en ninguna dirección → evita barra de scroll interna minúscula
       si algún elemento (submenús, sombras) se sale de la caja. */
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    box-sizing: border-box;
    min-height: var(--jm-header-h);
    max-height: none;
    display: block;
}

.jm-site-header.is-scrolled {
    background: var(--jm-c-dark-bg);
    border-bottom: 1px solid var(--jm-c-dark-border);
    box-shadow: var(--jm-shadow-dark);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    max-height: none;
}

.jm-header__inner {
    max-width: var(--jm-rw);
    width: 100%;
    margin: 0 auto;
    padding: 0.7rem var(--jm-px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--jm-header-h);
    /* NO max-height aquí — si los paddings + fuentes suman un poco más de --jm-header-h
       por redondeo o zoom del navegador, no mete scroll interno. */
    max-height: none;
    height: auto;
    box-sizing: border-box;
    /* NINGÚN overflow: hidden/auto. Todo lo que sobresalga (submenús dropdown,
       sombras, foco outline) se muestra normalmente sin scrollbar. */
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
}

/* MISMO padding SIEMPRE, tanto reposo como .is-scrolled → NINGÚN CAMBIO */
.jm-site-header.is-scrolled .jm-header__inner {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

/* ---------- Branding / Logo ---------- */
.jm-site-branding {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
}

.jm-site-branding a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.jm-site-branding .custom-logo,
.jm-site-branding__logo-img {
    height: 44px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    /* Sin transiciones de altura/tamaño al scrollear — solo hover/focus */
    transition: transform .2s ease, filter .2s ease;
    display: block;
}

.jm-site-branding__logo-text {
    display: inline-flex;
    align-items: center;
    font-family: var(--jm-font);
    font-weight: 900;
    /* TAMAÑO FIJO — no cambia al scrollear → sin mini-zoom */
    font-size: 1.12rem;
    line-height: 1.05;
    letter-spacing: 0.008em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.4rem 0.15rem;
    /* Transiciones solo hover/focus — NINGUNA relacionada con scroll */
    transition: transform .2s ease, filter .2s ease, opacity .2s ease;
    color: var(--jm-c-white);
    filter: drop-shadow(0 1px 0 rgba(15, 76, 129, 0.55));
    white-space: nowrap;
}

/* MISMO height SIEMPRE, incluso con is-scrolled (no hay cambio) */
.jm-site-header.is-scrolled .jm-site-branding .custom-logo,
.jm-site-header.is-scrolled .jm-site-branding__logo-img {
    height: 44px;
}

/* MISMO font-size/letter-spacing SIEMPRE al scrollear (ningún cambio → sin mini-zoom) */
.jm-site-header.is-scrolled .jm-site-branding__logo-text {
    font-size: 1.12rem;
    letter-spacing: 0.008em;
}

.jm-site-branding__logo-link:hover .jm-site-branding__logo-img,
.jm-site-branding__logo-link:focus-visible .jm-site-branding__logo-img {
    transform: translateY(-1px);
    filter: drop-shadow(0 6px 12px rgba(245,197,24,.25));
}

.jm-site-branding__logo-link:hover .jm-site-branding__logo-text,
.jm-site-branding__logo-link:focus-visible .jm-site-branding__logo-text {
    transform: translateY(-1px);
    color: rgba(255,255,255,0.92);
    filter: drop-shadow(0 4px 10px rgba(255, 255, 255, 0.15));
}

@media (max-width: 768px) {
    .jm-site-branding .custom-logo,
    .jm-site-branding__logo-img {
        height: 40px;
        max-width: 190px;
    }
    /* Tamaño FIJO al scrollear (sin mini-zoom) — igual que reposo */
    .jm-site-header.is-scrolled .jm-site-branding .custom-logo,
    .jm-site-header.is-scrolled .jm-site-branding__logo-img {
        height: 40px;
    }
    .jm-site-branding__logo-text {
        font-size: 1rem;
        letter-spacing: 0.008em;
        padding: 0.4rem 0.1rem;
    }
    /* Tamaño FIJO al scrollear — igual que reposo */
    .jm-site-header.is-scrolled .jm-site-branding__logo-text {
        font-size: 1rem;
        letter-spacing: 0.008em;
    }
}

.jm-site-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.jm-site-title a {
    color: var(--jm-c-white);
    text-decoration: none;
    background: linear-gradient(90deg, var(--jm-c-white) 0%, var(--jm-c-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.jm-site-description {
    display: none;
}

/* ---------- Contenedor Navegación + CTA ---------- */
.jm-header__nav-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
}

.jm-nav--primary {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.jm-menu--primary {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow: visible;
}

.jm-menu-item {
    position: relative;
}

.jm-menu-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.48rem 0.6rem 0.48rem 0.85rem;
    margin: 0;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1;
    color: var(--jm-c-nav-text);
    text-decoration: none;
    border-radius: var(--jm-radius-sm);
    transition: color .2s ease, background-color .2s ease;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: middle;
}

.jm-menu-item.is-active > .jm-menu-link {
    color: var(--jm-c-gold);
}

.jm-menu-item.is-active > .jm-menu-link::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    right: 0.45rem;
    bottom: 0.22rem;
    height: 2px;
    background: linear-gradient(90deg, var(--jm-c-gold), var(--jm-c-gold-600));
    border-radius: 2px;
}

/* Caret / flecha submenú */
.jm-menu-caret {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    margin-right: -0.25rem;
    z-index: 2;
    cursor: pointer;
    opacity: 0.75;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    border-radius: var(--jm-radius-sm);
    transition:
        transform .2s ease,
        opacity .2s ease,
        color .2s ease,
        background-color .2s ease;
}

.jm-menu-caret::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transform: translateY(1px);
    pointer-events: none;
}

.jm-menu-caret:hover,
.jm-menu-caret:focus-within {
    color: var(--jm-c-gold);
    opacity: 1;
    background: rgba(245, 197, 24, 0.06);
}

.jm-menu-item--has-children.is-open > .jm-menu-link > .jm-menu-caret {
    transform: translateY(0);
    opacity: 1;
    color: var(--jm-c-gold);
    background: rgba(245, 197, 24, 0.06);
}

.jm-menu-item--has-children.is-open > .jm-menu-link > .jm-menu-caret::before {
    transform: translateY(1px) rotate(180deg);
}

/* ---------- Submenús (dropdown) ---------- */
.jm-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0.5rem;
    background: var(--jm-c-dark-bg-2);
    border: 1px solid var(--jm-c-dark-border);
    border-radius: var(--jm-radius-md);
    box-shadow: var(--jm-shadow-dark);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 110;
}

.jm-menu-item--has-children.is-open > .jm-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.jm-submenu .jm-menu-link {
    display: flex;
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    color: var(--jm-c-nav-text);
    border-radius: var(--jm-radius-sm);
}

.jm-submenu .jm-menu-link:hover,
.jm-submenu .jm-menu-link:focus {
    color: var(--jm-c-gold);
    background: rgba(245, 197, 24, 0.08);
}

.jm-submenu .jm-menu-item.is-active > .jm-menu-link {
    color: var(--jm-c-gold);
    background: rgba(245, 197, 24, 0.10);
}

.jm-submenu .jm-menu-item.is-active > .jm-menu-link::after {
    display: none;
}

/* Submenús anidados (2do, 3er, 4to nivel): ACORDEÓN VERTICAL EXPANDIDO */
.jm-submenu .jm-submenu {
    position: static;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 0;
    border-left: 0 solid transparent;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    max-height: 0;
    overflow: hidden;
    display: block;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease, max-height .25s ease, margin .25s ease, padding .25s ease, border-width .25s ease;
    z-index: 1;
}

.jm-submenu .jm-submenu .jm-submenu {
    /* Se hereda margin/padding solo cuando está ABIERTO */
}

.jm-menu-item--has-children.is-open > .jm-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    max-height: 1200px;
    overflow: visible;
    margin: 0.35rem 0 0.5rem 0.75rem;
    padding: 0.35rem 0.35rem 0.35rem 0.75rem;
    border-left: 2px solid var(--jm-c-dark-border);
    background: var(--jm-c-dark-bg-2);
}

.jm-submenu .jm-submenu .jm-menu-item--has-children.is-open > .jm-submenu {
    border-left-color: rgba(245, 197, 24, 0.35);
    margin-left: 0.75rem;
}

.jm-submenu .jm-menu-item--has-children > .jm-menu-link .jm-menu-caret {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-left: auto;
    margin-right: -0.2rem;
    z-index: 2;
    cursor: pointer;
    opacity: 0.75;
    border-radius: var(--jm-radius-sm);
    box-sizing: border-box;
    transition:
        transform .2s ease,
        opacity .2s ease,
        color .2s ease,
        background-color .2s ease;
}

.jm-submenu .jm-menu-item--has-children > .jm-menu-link .jm-menu-caret::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transform: translateY(1px);
    pointer-events: none;
}

.jm-submenu .jm-menu-item--has-children > .jm-menu-link .jm-menu-caret:hover,
.jm-submenu .jm-menu-item--has-children > .jm-menu-link .jm-menu-caret:focus-within {
    color: var(--jm-c-gold);
    opacity: 1;
    background: rgba(245, 197, 24, 0.08);
}

.jm-submenu .jm-menu-item--has-children.is-open > .jm-menu-link .jm-menu-caret {
    transform: translateY(0);
    opacity: 1;
    color: var(--jm-c-gold);
    background: rgba(245, 197, 24, 0.10);
}

.jm-submenu .jm-menu-item--has-children.is-open > .jm-menu-link .jm-menu-caret::before {
    transform: translateY(1px) rotate(180deg);
}

.jm-menu-item--depth-1.is-active > .jm-menu-link::after {
    display: none;
}

.jm-submenu {
    max-height: none;
    overflow: visible;
    overflow-x: clip;
    overflow-y: visible;
}

@media (min-width: 992px) {
    .jm-submenu {
        max-width: 320px;
    }
}


/* ---------- Botón CTA (dorado) ---------- */
.jm-header__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.jm-btn--gold {
    background: linear-gradient(135deg, var(--jm-c-gold) 0%, var(--jm-c-gold-600) 100%);
    color: #0a2540;
    border-color: var(--jm-c-gold);
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.005em;
    border-radius: var(--jm-radius-md);
    border: 2px solid var(--jm-c-gold);
    box-sizing: border-box;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px -6px rgba(245, 197, 24, 0.55);
}

.jm-btn--gold:hover {
    background: linear-gradient(135deg, var(--jm-c-gold-600) 0%, var(--jm-c-gold-700) 100%);
    border-color: var(--jm-c-gold-600);
    color: #071a2e;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(245, 197, 24, 0.65);
}

/* ---------- Botón hamburguesa (oculto desktop) ---------- */
.jm-header__toggle {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--jm-c-dark-border);
    border-radius: var(--jm-radius-sm);
    color: var(--jm-c-white);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.jm-header__toggle:hover,
.jm-header__toggle:focus {
    background: rgba(245, 197, 24, 0.08);
    color: var(--jm-c-gold);
    outline: none;
}

.jm-header__toggle[aria-expanded="true"] {
    background: rgba(245, 197, 24, 0.12);
    color: var(--jm-c-gold);
}

.jm-toggle-icon {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: background-color .2s ease;
}

.jm-toggle-icon::before,
.jm-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .25s ease, top .25s ease, opacity .2s ease;
}

.jm-toggle-icon::before { top: -6px; }
.jm-toggle-icon::after  { top: 6px; }

.jm-header__toggle[aria-expanded="true"] .jm-toggle-icon {
    background: transparent;
}

.jm-header__toggle[aria-expanded="true"] .jm-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.jm-header__toggle[aria-expanded="true"] .jm-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

/* ============================================
   4. Botones reutilizables (CTAs)
   ============================================ */
.jm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .85rem 1.4rem;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
    border-radius: var(--jm-radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease,
                background-color .18s ease, color .18s ease, border-color .18s ease;
    white-space: normal;
}

.jm-btn:focus-visible {
    outline: 3px solid var(--jm-c-accent);
    outline-offset: 2px;
}

.jm-btn:hover { transform: translateY(-1px); box-shadow: var(--jm-shadow-md); }

.jm-btn--primary {
    background: var(--jm-c-primary);
    color: var(--jm-c-white);
    border-color: var(--jm-c-primary);
}
.jm-btn--primary:hover { background: var(--jm-c-primary-700); border-color: var(--jm-c-primary-700); color: var(--jm-c-white); }

.jm-btn--accent {
    background: var(--jm-c-accent);
    color: var(--jm-c-white);
    border-color: var(--jm-c-accent);
}
.jm-btn--accent:hover { background: var(--jm-c-accent-700); border-color: var(--jm-c-accent-700); color: var(--jm-c-white); }

.jm-btn--ghost {
    background: rgba(31, 164, 197, 0.08);
    color: var(--jm-c-accent);
    border-color: rgba(31, 164, 197, 0.55);
}
.jm-btn--ghost:hover {
    background: var(--jm-c-accent);
    color: var(--jm-c-white);
    border-color: var(--jm-c-accent);
    text-decoration: none;
}

.jm-btn--whatsapp {
    background: var(--jm-c-whatsapp);
    color: var(--jm-c-white);
    border-color: var(--jm-c-whatsapp);
    font-weight: 800;
}
.jm-btn--whatsapp:hover { background: var(--jm-c-whatsapp-700); border-color: var(--jm-c-whatsapp-700); color: var(--jm-c-white); }

.jm-btn--lg { padding: 1.2rem 2rem; font-size: 1.1rem; border-radius: var(--jm-radius-lg); }

/* ============================================
   5. Secciones (wrapper interno común)
   ============================================ */
.jm-section__inner {
    max-width: var(--jm-rw);
    margin: 0 auto;
    padding: var(--jm-py) var(--jm-px);
}

.jm-section__title {
    font-size: clamp(1.9rem, 2.4vw + 1rem, 2.7rem);
    text-align: center;
    margin-bottom: 1rem;
}

.jm-section__lede {
    text-align: center;
    font-size: 1.05rem;
    color: var(--jm-c-muted);
    max-width: 780px;
    margin: 0 auto 3rem;
}

/* ============================================
   6. SECCIÓN · HERO PRINCIPAL (SOLO IMAGEN DE FONDO · 70% PANTALLA)
      · El header ahora es sticky, NO TAPA la imagen.
      · Como el hero usa 70dvh (70% viewport) y el sticky ya ocupa espacio de flujo normal,
        se mantiene 70dvh y nada se solapa.
   ============================================ */
.jm-hero {
    position: relative;
    background-color: var(--jm-c-dark-bg-2);
    background-image: url('assets/images/jm-hero-home-banner-v3.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    color: var(--jm-c-white);
    overflow: hidden;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
}

.jm-hero::before {
    content: none;
    display: none;
    background: none;
    background-image: none;
}

.jm-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--jm-rw);
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

/* Responsive Hero: reducido móvil · Header sticky (sin solapamiento) */
@media (max-width: 1199px) {
    .jm-hero {
        min-height: 70vh;
        min-height: 70dvh;
    }
}

@media (max-width: 991px) {
    .jm-hero {
        min-height: 70vh;
        min-height: 70dvh;
        background-position: center center;
    }
}

@media (max-width: 767px) {
    .jm-hero {
        min-height: 70vh;
        min-height: 70dvh;
        background-position: center center;
    }
}

@media (max-width: 480px) {
    .jm-hero {
        min-height: 52vh;
        min-height: 52dvh;
        background-position: center center;
    }
}

/* ============================================
   6b. SECCIÓN · PRIVACIDAD BENEFICIARIOS (fondo BLANCO)
       Debajo del hero · texto institucional + CTA azul
   ============================================ */
.jm-privacidad {
    position: relative;
    background-color: var(--jm-c-white, #ffffff);
    color: var(--jm-c-navy-900, #0c2f52);
    overflow: hidden;
}

.jm-privacidad__inner {
    max-width: var(--jm-rw);
    margin: 0 auto;
    padding: 3.2rem var(--jm-px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.8rem;
}

.jm-privacidad__text {
    max-width: 62ch;
    margin: 0;
    font-size: clamp(0.98rem, 0.3vw + 0.95rem, 1.12rem);
    line-height: 1.7;
    font-weight: 500;
    color: var(--jm-c-navy-900, #0c2f52);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.jm-privacidad__title {
    display: block;
    position: relative;
    margin: 0;
    padding: 0.3rem 0 0.7rem 0;
    max-width: 28ch;
    text-align: center;
    font-size: clamp(1.55rem, 1.8vw + 1.05rem, 2.35rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    font-weight: 900;
    text-transform: none;
    color: var(--jm-c-primary, #0f4c81);
    text-shadow: none;
    box-shadow: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.jm-privacidad__title::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin: 0.9rem auto 0 auto;
    background-color: var(--jm-c-gold, #f5c518);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(245, 197, 24, 0.25);
}

.jm-privacidad__cta-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Botón Azul Oscuro CTA (JM primary) ---------- */
.jm-btn--primary-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 2.1rem;
    font-size: clamp(0.9rem, 0.3vw + 0.88rem, 1rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jm-c-white, #ffffff);
    background-color: var(--jm-c-primary, #0f4c81);
    border: 1px solid var(--jm-c-primary-600, #14548c);
    border-radius: 6px;
    box-shadow:
        0 10px 26px -12px rgba(15, 76, 129, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    text-decoration: none;
    cursor: pointer;
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, background-color .22s ease;
    font-family: var(--jm-font);
    line-height: 1;
    white-space: nowrap;
    text-align: center;
}

.jm-btn--primary-cta:hover,
.jm-btn--primary-cta:focus {
    background-color: var(--jm-c-primary-600, #14548c);
    transform: translateY(-1px);
    filter: saturate(1.1);
    box-shadow:
        0 14px 30px -10px rgba(20, 84, 140, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    text-decoration: none;
    outline: none;
    color: var(--jm-c-white, #ffffff);
}

.jm-btn--primary-cta:active {
    transform: translateY(0);
    box-shadow:
        0 5px 14px -4px rgba(12, 47, 82, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

@media (max-width: 639px) {
    .jm-privacidad__inner {
        padding: 2.2rem var(--jm-px);
        gap: 1.4rem;
    }

    .jm-privacidad__title {
        font-size: clamp(1.35rem, 5.2vw + 0.2rem, 1.8rem);
        line-height: 1.2;
        padding-bottom: 0.6rem;
    }

    .jm-privacidad__title::after {
        width: 56px;
        height: 3px;
        margin-top: 0.7rem;
    }

    .jm-privacidad__text {
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .jm-btn--primary-cta {
        padding: 0.85rem 1.6rem;
        font-size: 0.85rem;
        letter-spacing: 0.07em;
        width: min(440px, 100%);
    }
}

/* ============================================
   6d. SECCIÓN · ¿QUIENES SOMOS? (Imagen izq + Texto der)
       Mejorado sobre el diseño de referencia (pill azul, bordes, sombras)
   ============================================ */
.jm-quienes-grid {
    position: relative;
    background-color: var(--jm-c-white, #ffffff);
    color: var(--jm-c-navy-900, #0c2f52);
    overflow: hidden;
}

.jm-quienes-grid__inner {
    max-width: var(--jm-rw);
    margin: 0 auto;
    padding: 3.5rem var(--jm-px);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 3.2rem;
}

/* ============== Lado IZQUIERDO · Imagen ============== */
.jm-quienes-grid__media {
    margin: 0;
    display: block;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    background-color: #eaf2fb;
    aspect-ratio: 4 / 3;
    box-shadow:
        0 22px 60px -24px rgba(12, 47, 82, 0.55),
        0 10px 26px -16px rgba(12, 47, 82, 0.35),
        inset 0 0 0 1px rgba(15, 76, 129, 0.08);
    position: relative;
    isolation: isolate;
    transition: transform .35s ease, box-shadow .35s ease;
}

.jm-quienes-grid__media::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(15, 76, 129, 0.06) 0%,
        transparent 45%,
        rgba(245, 197, 24, 0.06) 100%
    );
    z-index: 2;
}

.jm-quienes-grid__media:hover {
    transform: translateY(-3px);
    box-shadow:
        0 28px 70px -22px rgba(12, 47, 82, 0.65),
        0 12px 28px -14px rgba(12, 47, 82, 0.45),
        inset 0 0 0 1px rgba(15, 76, 129, 0.12);
}

.jm-quienes-grid__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1.005);
    transition: transform .5s ease, filter .4s ease;
}

.jm-quienes-grid__media:hover .jm-quienes-grid__img {
    transform: scale(1.04);
    filter: saturate(1.06);
}

/* ============== Lado DERECHO · Texto ============== */
.jm-quienes-grid__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.5rem;
}

/* PILL azul con el título (estilo barra superior de la ref. pero más suave) */
.jm-quienes-grid__pill {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.6rem;
    background-color: var(--jm-c-primary, #0f4c81);
    border: 1px solid var(--jm-c-primary-600, #14548c);
    border-radius: 10px;
    box-shadow:
        0 12px 30px -14px rgba(15, 76, 129, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    position: relative;
}

/* acento dorado del lado IZQ del pill (barra decorativa) */
.jm-quienes-grid__pill::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 5px;
    border-radius: 0 6px 6px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.jm-quienes-grid__title {
    margin: 0;
    padding: 0;
    font-size: clamp(1.25rem, 1.4vw + 0.85rem, 1.9rem);
    line-height: 1.15;
    letter-spacing: 0.005em;
    font-weight: 800;
    text-transform: none;
    color: var(--jm-c-white, #ffffff);
    text-shadow:
        0 2px 8px rgba(3, 12, 26, 0.45),
        0 0 1px rgba(255, 255, 255, 0.18);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--jm-font);
}

.jm-quienes-grid__text {
    margin: 0;
    max-width: 56ch;
    font-size: clamp(1rem, 0.2vw + 0.96rem, 1.1rem);
    line-height: 1.72;
    font-weight: 500;
    color: var(--jm-c-navy-900, #0c2f52);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: left;
}

/* ==================== RESPONSIVE · ≤ 991px (tablet) ==================== */
@media (max-width: 991px) {
    .jm-quienes-grid__inner {
        grid-template-columns: 1fr;
        gap: 2.2rem;
        padding: 2.8rem var(--jm-px);
    }

    .jm-quienes-grid__media {
        aspect-ratio: 16 / 10;
        max-width: 760px;
        margin: 0 auto;
    }

    .jm-quienes-grid__content {
        align-items: center;
        text-align: center;
    }

    .jm-quienes-grid__text {
        text-align: center;
    }
}

/* ==================== RESPONSIVE · ≤ 639px (móvil) ==================== */
@media (max-width: 639px) {
    .jm-quienes-grid__inner {
        padding: 2.3rem var(--jm-px);
        gap: 1.8rem;
    }

    .jm-quienes-grid__media {
        aspect-ratio: 4 / 3;
        border-radius: 14px;
    }

    .jm-quienes-grid__pill {
        padding: 0.78rem 1.2rem;
        border-radius: 9px;
    }

    .jm-quienes-grid__pill::before {
        width: 4px;
    }

    .jm-quienes-grid__title {
        font-size: clamp(1.08rem, 4.6vw + 0.1rem, 1.45rem);
    }

    .jm-quienes-grid__text {
        font-size: 0.97rem;
        line-height: 1.68;
    }
}

/* ============================================
   6f. SECCIÓN · NUESTROS PROGRAMAS (3 cards)
       Crowdfunding · Shark Alliance · Inmobiliaria
   ============================================ */
.jm-programas {
    position: relative;
    background-color: var(--jm-c-white, #ffffff);
    color: var(--jm-c-navy-900, #0c2f52);
    overflow: hidden;
}

/* Fondo decorativo suave (blur blobs azul+gold) */
.jm-programas::before,
.jm-programas::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}
.jm-programas::before {
    width: 520px;
    height: 520px;
    top: -160px;
    left: -120px;
    background: radial-gradient(circle, rgba(15, 76, 129, 0.28), transparent 65%);
}
.jm-programas::after {
    width: 460px;
    height: 460px;
    bottom: -140px;
    right: -120px;
    background: radial-gradient(circle, rgba(245, 197, 24, 0.22), transparent 65%);
}

.jm-programas__inner {
    position: relative;
    z-index: 1;
    max-width: var(--jm-rw);
    margin: 0 auto;
    padding: 4rem var(--jm-px) 4.5rem;
}

/* --- HEADER: Título + intro --- */
.jm-programas__header {
    text-align: center;
    margin: 0 auto 3rem;
    max-width: 82ch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
}

.jm-programas__title {
    margin: 0;
    padding: 0 0 0.6rem 0;
    font-size: clamp(1.8rem, 2.4vw + 1.1rem, 3rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--jm-c-primary, #0f4c81);
    text-shadow: none;
    box-shadow: none;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* subrayado dorado del título */
.jm-programas__title::after {
    content: "";
    display: block;
    width: 96px;
    height: 5px;
    margin: 1rem auto 0 auto;
    border-radius: 999px;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow: 0 3px 10px rgba(245, 197, 24, 0.28);
}

.jm-programas__intro {
    margin: 0;
    font-size: clamp(0.98rem, 0.3vw + 0.95rem, 1.12rem);
    line-height: 1.75;
    font-weight: 500;
    color: var(--jm-c-navy-900, #0c2f52);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
}

/* --- GRID 3 COLUMNAS (cards) --- */
.jm-programas__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.2rem;
    align-items: stretch;
}

/* --- Card componente --- */
.jm-programa-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.2rem;
    padding: 1.4rem 1.4rem 1.8rem;
    background-color: var(--jm-c-white, #ffffff);
    border-radius: 20px;
    border: 1px solid rgba(15, 76, 129, 0.08);
    box-shadow:
        0 18px 50px -24px rgba(12, 47, 82, 0.45),
        0 6px 18px -12px rgba(12, 47, 82, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    position: relative;
    overflow: hidden;
    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .3s ease,
        background-color .3s ease;
    z-index: 0;
}

/* borde superior sutil dorado */
.jm-programa-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--jm-c-primary, #0f4c81) 0%,
        var(--jm-c-gold, #f5c518) 55%,
        var(--jm-c-primary, #0f4c81) 100%);
    z-index: 1;
    transition: transform .35s ease;
    transform-origin: left;
}

.jm-programa-card:hover {
    transform: translateY(-6px) rotateX(2deg);
    border-color: rgba(15, 76, 129, 0.18);
    box-shadow:
        0 28px 70px -18px rgba(12, 47, 82, 0.55),
        0 10px 22px -14px rgba(12, 47, 82, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}

.jm-programa-card:hover::before { transform: scaleX(1.02); }

/* --- Imagen card (circular con borde dorado navy) --- */
.jm-programa-card__media {
    margin: 0;
    width: min(280px, 82%);
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    overflow: hidden;
    display: block;
    background-color: #eaf2fb;
    padding: 0;
    border: 5px solid var(--jm-c-white, #ffffff);
    box-shadow:
        0 0 0 2px rgba(245, 197, 24, 0.55),
        0 0 0 4px var(--jm-c-primary, #0f4c81),
        0 16px 30px -14px rgba(15, 76, 129, 0.45);
    position: relative;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}

.jm-programa-card__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .5s ease, filter .4s ease;
    transform: scale(1.01);
}

.jm-programa-card:hover .jm-programa-card__media {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 0 0 2px rgba(245, 197, 24, 0.9),
        0 0 0 4px var(--jm-c-primary-600, #14548c),
        0 22px 36px -14px rgba(15, 76, 129, 0.6);
}
.jm-programa-card:hover .jm-programa-card__img {
    transform: scale(1.08);
    filter: saturate(1.08);
}

/* --- Pill título programa (Crowdfunding / Shark Alliance / Inmobiliaria) --- */
.jm-programa-card__pill {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem 0.7rem 1.35rem;
    background-color: var(--jm-c-primary, #0f4c81);
    border: 1px solid var(--jm-c-primary-600, #14548c);
    border-radius: 10px;
    box-shadow:
        0 10px 22px -12px rgba(15, 76, 129, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    position: relative;
    text-decoration: none !important;
    cursor: pointer;
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    transition:
        background-color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .28s cubic-bezier(.2,.8,.2,1);
}

.jm-programa-card__pill:hover,
.jm-programa-card__pill:focus-visible {
    background-color: var(--jm-c-primary-600, #14548c);
    border-color: rgba(245, 197, 24, 0.6);
    box-shadow:
        0 16px 30px -12px rgba(20, 84, 140, 0.78),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 0 1px rgba(245, 197, 24, 0.35);
    transform: translateY(-2px);
    outline: none;
}

.jm-programa-card__pill--accent {
    background-color: var(--jm-c-primary-600, #14548c);
    border-color: rgba(245, 197, 24, 0.45);
    box-shadow:
        0 12px 26px -14px rgba(20, 84, 140, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 0 1px rgba(245, 197, 24, 0.22);
}

.jm-programa-card__pill--accent:hover,
.jm-programa-card__pill--accent:focus-visible {
    background-color: #185fa3;
    border-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 20px 34px -12px rgba(20, 84, 140, 0.85),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 0 2px rgba(245, 197, 24, 0.45);
}

/* Barra dorada vertical izquierda (decorativa igual que sección quienes) */
.jm-programa-card__pill-left {
    position: absolute;
    left: 0;
    top: 16%;
    bottom: 16%;
    width: 5px;
    border-radius: 0 6px 6px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: transform .28s ease, background-color .28s ease, box-shadow .28s ease;
}

.jm-programa-card__pill:hover .jm-programa-card__pill-left,
.jm-programa-card__pill:focus-visible .jm-programa-card__pill-left {
    transform: scaleY(1.15);
    background: linear-gradient(180deg, #ffd84a 0%, #f5c518 55%, #e3b210 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.18),
        0 0 14px 0 rgba(245, 197, 24, 0.55);
}

.jm-programa-card__name {
    margin: 0;
    padding: 0;
    font-size: clamp(1rem, 0.4vw + 0.96rem, 1.2rem);
    line-height: 1.2;
    letter-spacing: 0.02em;
    font-weight: 800;
    text-transform: none;
    color: currentColor;
    text-shadow:
        0 2px 6px rgba(3, 12, 26, 0.4),
        0 0 1px rgba(255, 255, 255, 0.2);
    font-family: var(--jm-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    z-index: 1;
    transition:
        transform .28s ease,
        letter-spacing .28s ease;
}

/* Subrayado animado tipo "slide desde la izquierda" bajo el texto del título */
.jm-programa-card__name::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -4px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffd84a, #f5c518);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.45);
    transition: right .35s cubic-bezier(.2,.8,.2,1);
}

.jm-programa-card__pill:hover .jm-programa-card__name,
.jm-programa-card__pill:focus-visible .jm-programa-card__name {
    transform: translateX(3px);
    letter-spacing: 0.035em;
}

.jm-programa-card__pill:hover .jm-programa-card__name::after,
.jm-programa-card__pill:focus-visible .jm-programa-card__name::after {
    right: 0;
}

/* Icono flecha del lado derecho */
.jm-programa-card__pill-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: currentColor;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        background-color .28s ease,
        border-color .28s ease,
        color .28s ease,
        box-shadow .28s ease;
}

.jm-programa-card__pill-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, #ffd84a 0%, #f5c518 100%);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity .28s ease, transform .28s ease;
    z-index: -1;
}

.jm-programa-card__pill:hover .jm-programa-card__pill-icon,
.jm-programa-card__pill:focus-visible .jm-programa-card__pill-icon {
    transform: translateX(4px) rotate(-6deg);
    background-color: rgba(255, 255, 255, 0.2);
    border-color: var(--jm-c-gold, #f5c518);
    color: #0c2f52;
    box-shadow: 0 8px 18px -6px rgba(245, 197, 24, 0.55);
}

.jm-programa-card__pill:hover .jm-programa-card__pill-icon::before,
.jm-programa-card__pill:focus-visible .jm-programa-card__pill-icon::before {
    opacity: 1;
    transform: scale(1);
}

.jm-programa-card__pill-icon svg {
    width: 20px;
    height: 20px;
    transition: transform .25s ease;
}

.jm-programa-card__pill:hover .jm-programa-card__pill-icon svg {
    transform: translateX(1px);
}

/* --- Descripción card --- */
.jm-programa-card__desc {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.72;
    font-weight: 500;
    color: var(--jm-c-navy-900, #0c2f52);
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- CTA (deprecated — quitado de las 3 cards) --- */
.jm-programa-card__cta {
    display: none !important;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 0.2rem;
}
.jm-btn--sm {
    padding: 0.7rem 1.5rem !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.06em !important;
    width: min(380px, 100%);
}

/* ==================== RESPONSIVE · ≤ 1080px (pre-tablet) ==================== */
@media (max-width: 1080px) {
    .jm-programas__inner { padding: 3.4rem var(--jm-px) 3.8rem; }
    .jm-programas__grid { gap: 1.8rem; }
    .jm-programa-card { padding: 1.25rem 1.25rem 1.6rem; }
    .jm-programa-card__media { width: 74%; }
    .jm-programa-card__desc { min-height: 6rem; }
}

/* ==================== RESPONSIVE · ≤ 991px (tablet) ==================== */
@media (max-width: 991px) {
    .jm-programas__inner { padding: 3rem var(--jm-px) 3.4rem; }
    .jm-programas__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }
    .jm-programas__header { margin-bottom: 2.4rem; }
    .jm-programa-card__desc { min-height: auto; }
    .jm-programa-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 560px;
        margin: 0 auto;
    }
}

/* ==================== RESPONSIVE · ≤ 639px (móvil) ==================== */
@media (max-width: 639px) {
    .jm-programas__inner {
        padding: 2.4rem var(--jm-px) 3rem;
    }
    .jm-programas__title {
        font-size: clamp(1.55rem, 7vw + 0.1rem, 2.1rem);
    }
    .jm-programas__title::after {
        width: 72px;
        height: 4px;
        margin-top: 0.75rem;
    }
    .jm-programas__intro {
        font-size: 0.96rem;
        line-height: 1.68;
    }
    .jm-programas__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .jm-programa-card:nth-child(3) { max-width: none; }
    .jm-programa-card { padding: 1.2rem 1.15rem 1.5rem; }
    .jm-programa-card__media { width: min(250px, 72%); }
    .jm-programa-card__pill {
        padding: 0.65rem 1rem;
        border-radius: 9px;
    }
    .jm-programa-card__name {
        font-size: 1rem;
    }
    .jm-programa-card__desc {
        font-size: 0.95rem;
        line-height: 1.68;
    }
}

/* ============================================
   6h. SECCIÓN · VITRINA HOLDING (JM Grupo Empresarial)
       Productos y Servicios de nuestros aliados
   ============================================ */
.jm-vitrina {
    position: relative;
    background-color: var(--jm-c-white, #ffffff);
    color: var(--jm-c-navy-900, #0c2f52);
    overflow: hidden;
    isolation: isolate;
}

/* fondo blur decorativo igual que programas pero más sutil */
.jm-vitrina::before,
.jm-vitrina::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.32;
    pointer-events: none;
    z-index: 0;
}
.jm-vitrina::before {
    width: 560px;
    height: 560px;
    top: -180px;
    right: -140px;
    background: radial-gradient(circle, rgba(245, 197, 24, 0.22), transparent 65%);
}
.jm-vitrina::after {
    width: 500px;
    height: 500px;
    bottom: -160px;
    left: -120px;
    background: radial-gradient(circle, rgba(15, 76, 129, 0.26), transparent 65%);
}

.jm-vitrina__inner {
    position: relative;
    z-index: 1;
    max-width: var(--jm-rw);
    margin: 0 auto;
    padding: 2.8rem var(--jm-px) 3.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.6rem;
}

/* ============= HEADER Vitrina (pill + subtítulo) ============= */
.jm-vitrina__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    max-width: 82ch;
    min-width: 0;
    box-sizing: border-box;
    margin-bottom: 0.2rem;
}
.jm-vitrina__pill {
    min-width: min(620px, 100%);
    max-width: 100%;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
    padding: 0.82rem 1.3rem;
    background-color: var(--jm-c-primary, #0f4c81);
    border: 1px solid var(--jm-c-primary-600, #14548c);
    border-radius: 10px;
    box-shadow:
        0 12px 26px -14px rgba(15, 76, 129, 0.68),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.jm-vitrina__pill::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16%;
    bottom: 16%;
    width: 5px;
    border-radius: 0 6px 6px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.55);
}
.jm-vitrina__pill-title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.25rem, 1.05vw + 0.95rem, 1.85rem);
    line-height: 1.35;
    letter-spacing: 0.01em;
    font-weight: 900;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    max-width: 100%;
    text-shadow:
        0 2px 8px rgba(3, 12, 26, 0.48),
        0 0 1px rgba(255, 255, 255, 0.2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--jm-font);
}
.jm-vitrina__subtitle {
    margin: 0;
    font-size: clamp(0.98rem, 0.2vw + 0.96rem, 1.08rem);
    line-height: 1.7;
    color: var(--jm-c-navy-900, #0c2f52);
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============= BANNER PRINCIPAL (gallery-05) · TAMAÑO REDUCIDO (se ve completa) ============= */
.jm-vitrina__banner {
    margin: 0;
    width: min(820px, 86%);
    max-width: 100%;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    border: 3px solid var(--jm-c-gold, #f5c518);
    background-color: #071a2e;
    box-shadow:
        0 26px 64px -20px rgba(12, 47, 82, 0.7),
        0 12px 26px -16px rgba(245, 197, 24, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    position: relative;
    isolation: isolate;
    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;
}
.jm-vitrina__banner:hover {
    transform: translateY(-3px);
    border-color: #ffd84a;
    box-shadow:
        0 32px 72px -18px rgba(12, 47, 82, 0.78),
        0 18px 32px -12px rgba(245, 197, 24, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.jm-vitrina__banner-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform .65s ease, filter .5s ease;
    transform: scale(1.005);
}
.jm-vitrina__banner:hover .jm-vitrina__banner-img {
    transform: scale(1.04);
    filter: saturate(1.08);
}

/* ==================== RESPONSIVE · ≤ 1150px Vitrina ==================== */
@media (max-width: 1150px) {
    .jm-vitrina__inner {
        padding: 2.6rem var(--jm-px) 3rem;
        gap: 1.4rem;
    }
    .jm-vitrina__banner { width: min(740px, 88%); }
}

/* ==================== RESPONSIVE · ≤ 991px (tablet) ==================== */
@media (max-width: 991px) {
    .jm-vitrina__inner {
        padding: 2.4rem var(--jm-px) 2.8rem;
        gap: 1.25rem;
    }
    .jm-vitrina__banner {
        width: min(660px, 90%);
        border-radius: 18px;
    }
}

/* ==================== RESPONSIVE · ≤ 639px (móvil) ==================== */
@media (max-width: 639px) {
    .jm-vitrina__inner {
        padding: 2.2rem var(--jm-px) 2.6rem;
        gap: 1.1rem;
    }
    .jm-vitrina__pill {
        padding: 0.72rem 1.15rem;
        min-width: 100%;
        max-width: 100%;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        border-radius: 9px;
    }
    .jm-vitrina__pill::before { width: 4px; }
    .jm-vitrina__pill-title {
        font-size: 0.98rem;
        letter-spacing: 0.008em;
        line-height: 1.35;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        -webkit-hyphens: auto;
        hyphens: auto;
        max-width: 100%;
    }
    .jm-vitrina__subtitle {
        font-size: 0.94rem;
        line-height: 1.65;
    }
    .jm-vitrina__banner {
        width: 92%;
        border-radius: 14px;
        border-width: 2px;
    }
}

/* ============================================
   6i. SECCIÓN · SUB-CTA "SUBE TU EMPRENDIMIENTO"
       (Refuerzo visual debajo del Hero)
   ============================================ */
.jm-subcta {
    position: relative;
    background-color: #030c1a;
    background-image:
        radial-gradient(1200px 420px at 50% -10%, rgba(31, 164, 197, 0.14), transparent 60%),
        radial-gradient(900px 380px at 50% 120%, rgba(15, 76, 129, 0.45), transparent 65%);
    overflow: hidden;
}

.jm-subcta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(3, 12, 26, 0.45) 0%, rgba(3, 12, 26, 0.2) 18%, rgba(3, 12, 26, 0.7) 100%);
}

.jm-subcta__inner {
    position: relative;
    z-index: 1;
    max-width: var(--jm-rw);
    margin: 0 auto;
    padding: 2rem var(--jm-px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.15rem;
}

.jm-subcta__title {
    font-size: clamp(1.45rem, 2.6vw + 0.4rem, 2.6rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
    text-shadow:
        0 8px 24px rgba(3, 7, 18, 0.85),
        0 2px 6px rgba(3, 7, 18, 0.75),
        0 0 1px rgba(255, 255, 255, 0.18);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.jm-btn--gold-2xl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(620px, 100%);
    padding: 0.75rem 2rem;
    font-size: clamp(0.85rem, 0.5vw + 0.78rem, 0.98rem);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #030712;
    background: linear-gradient(180deg, #d4a90c 0%, #b8890f 100%);
    border: 1px solid #a88206;
    border-radius: 6px;
    box-shadow:
        0 10px 24px -10px rgba(212, 169, 12, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    text-decoration: none;
    cursor: pointer;
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, background .22s ease;
    font-family: var(--jm-font);
    line-height: 1;
}

.jm-btn--gold-2xl:hover,
.jm-btn--gold-2xl:focus {
    background: linear-gradient(180deg, #e2b711 0%, #c49a1c 100%);
    transform: translateY(-1px);
    filter: saturate(1.1);
    box-shadow:
        0 14px 28px -10px rgba(226, 183, 17, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
    text-decoration: none;
    outline: none;
    color: #030712;
}

.jm-btn--gold-2xl:active {
    transform: translateY(0);
    box-shadow:
        0 5px 12px -4px rgba(184, 137, 15, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

@media (max-width: 639px) {
    .jm-subcta__inner {
        padding: 1.5rem var(--jm-px);
        gap: 0.95rem;
    }

    .jm-subcta__title {
        font-size: clamp(1.3rem, 4.8vw + 0.1rem, 1.85rem);
    }

    .jm-btn--gold-2xl {
        padding: 0.68rem 1.5rem;
        font-size: 0.85rem;
        letter-spacing: 0.05em;
    }
}

/* ============================================
   6c. SECCIÓN · QUIENES SOMOS (Logo + Texto dorado)
   ============================================ */
.jm-quienes {
    background-color: #000000;
    position: relative;
    overflow: hidden;
}

.jm-quienes::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(700px 400px at 12% 50%, rgba(15, 76, 129, 0.28), transparent 65%),
        radial-gradient(800px 500px at 88% 50%, rgba(31, 164, 197, 0.15), transparent 65%);
}

.jm-quienes__inner {
    position: relative;
    z-index: 1;
    max-width: 1040px;
    margin: 0 auto;
    padding: 5rem var(--jm-px);
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 3.5rem 4rem;
    align-items: center;
}

.jm-quienes__media {
    margin: 0;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1 / 1;
    justify-self: center;
    position: relative;
}

.jm-quienes__media::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 3px;
    background:
        conic-gradient(from 180deg at 50% 50%,
            rgba(245, 197, 24, 0.95) 0deg,
            rgba(184, 137, 15, 0.6) 120deg,
            rgba(255, 255, 255, 0.25) 200deg,
            rgba(212, 169, 12, 0.95) 360deg);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    box-shadow:
        0 0 50px 0 rgba(245, 197, 24, 0.22),
        0 0 100px -10px rgba(245, 197, 24, 0.35),
        0 18px 50px -12px rgba(3, 7, 18, 0.9);
    pointer-events: none;
    z-index: 1;
}

.jm-quienes__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    display: block;
    filter: drop-shadow(0 10px 30px rgba(3, 7, 18, 0.85));
    position: relative;
    z-index: 0;
}

.jm-quienes__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.75rem;
    max-width: 620px;
}

.jm-quienes__title-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.jm-btn--gold-section {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(520px, 100%);
    padding: 0.7rem 2.2rem;
    font-size: 0.98rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: none;
    color: #030712;
    background: linear-gradient(180deg, #d4a90c 0%, #b8890f 100%);
    border: 1px solid #a88206;
    border-radius: 6px;
    box-shadow:
        0 10px 26px -10px rgba(212, 169, 12, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-decoration: none;
    cursor: default;
    pointer-events: none;
    transition: none;
    line-height: 1;
    margin: 0;
}

.jm-btn--gold-section:hover {
    text-decoration: none;
    color: #030712;
}

.jm-quienes__desc {
    margin: 0;
    padding: 0;
    color: #f5c518;
    font-size: clamp(1.15rem, 1.05vw + 0.95rem, 1.5rem);
    line-height: 1.85;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: left;
    text-shadow: 0 4px 18px rgba(3, 7, 18, 0.78);
}

/* Responsive QUIENES SOMOS */
@media (max-width: 991px) {
    .jm-quienes__inner {
        grid-template-columns: 320px 1fr;
        max-width: 880px;
        padding: 4rem var(--jm-px);
        gap: 3rem 3rem;
    }

    .jm-quienes__media {
        max-width: 320px;
    }

    .jm-quienes__content {
        gap: 1.5rem;
    }

    .jm-btn--gold-section {
        width: min(460px, 100%);
        font-size: 0.92rem;
    }
}

@media (max-width: 767px) {
    .jm-quienes__inner {
        grid-template-columns: 1fr;
        max-width: 640px;
        padding: 3.25rem var(--jm-px);
        gap: 2rem;
        text-align: center;
    }

    .jm-quienes__media {
        max-width: 280px;
    }

    .jm-quienes__content {
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        max-width: 100%;
    }

    .jm-quienes__title-wrap {
        justify-content: center;
    }

    .jm-btn--gold-section {
        width: min(420px, 100%);
        padding: 0.65rem 1.75rem;
        font-size: 0.88rem;
    }

    .jm-quienes__desc {
        text-align: center;
        font-size: clamp(1.02rem, 1.5vw + 0.85rem, 1.2rem);
        line-height: 1.75;
    }
}

@media (max-width: 480px) {
    .jm-quienes__inner {
        padding: 2.5rem var(--jm-px);
        gap: 1.75rem;
    }

    .jm-quienes__media {
        max-width: 240px;
    }

    .jm-quienes__content {
        gap: 1.25rem;
    }

    .jm-btn--gold-section {
        width: 100%;
        font-size: 0.85rem;
        padding: 0.6rem 1.5rem;
    }

    .jm-quienes__desc {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* ============================================
   6d. SECCIÓN · PROMO POSTER Gran Empresa + Botón oferta
   ============================================ */
.jm-promo {
    background-color: #000000;
    position: relative;
    overflow: hidden;
}

.jm-promo::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 500px at 50% 0%, rgba(15, 76, 129, 0.22), transparent 65%),
        radial-gradient(900px 500px at 50% 100%, rgba(31, 164, 197, 0.12), transparent 65%);
}

.jm-promo__inner {
    position: relative;
    z-index: 1;
    max-width: 1040px;
    margin: 0 auto;
    padding: 4.5rem var(--jm-px) 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
}

.jm-promo__poster {
    margin: 0;
    width: 100%;
    max-width: 546px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.jm-promo__poster::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    padding: 2px;
    background: linear-gradient(135deg,
        rgba(245, 197, 24, 0.95) 0%,
        rgba(15, 76, 129, 0.8) 45%,
        rgba(31, 164, 197, 0.75) 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    z-index: 1;
    pointer-events: none;
    opacity: 0.95;
}

.jm-promo__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    position: relative;
    z-index: 0;
    box-shadow:
        0 0 60px -10px rgba(245, 197, 24, 0.18),
        0 20px 60px -12px rgba(3, 7, 18, 0.95);
}

.jm-promo__cta-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jm-btn--gold-offer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(820px, 100%);
    padding: 0.85rem 2.5rem;
    font-size: clamp(0.9rem, 0.6vw + 0.8rem, 1.08rem);
    font-weight: 900;
    letter-spacing: 0.025em;
    text-transform: none;
    color: #030712;
    background: linear-gradient(180deg, #d4a90c 0%, #b8890f 100%);
    border: 1px solid #a88206;
    border-radius: 6px;
    box-shadow:
        0 12px 28px -10px rgba(212, 169, 12, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
    line-height: 1.2;
    text-align: center;
    font-family: var(--jm-font);
}

.jm-btn--gold-offer:hover,
.jm-btn--gold-offer:focus {
    background: linear-gradient(180deg, #e2b711 0%, #c49a1c 100%);
    transform: translateY(-1.5px);
    filter: saturate(1.12);
    box-shadow:
        0 16px 36px -10px rgba(226, 183, 17, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    color: #030712;
    text-decoration: none;
    outline: none;
}

.jm-btn--gold-offer:active {
    transform: translateY(0);
    box-shadow:
        0 6px 16px -4px rgba(184, 137, 15, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Responsive PROMO POSTER */
@media (max-width: 991px) {
    .jm-promo__inner {
        max-width: 880px;
        padding: 3.75rem var(--jm-px) 4.25rem;
        gap: 2rem;
    }

    .jm-promo__poster {
        max-width: 448px;
    }
}

@media (max-width: 767px) {
    .jm-promo__inner {
        max-width: 640px;
        padding: 3rem var(--jm-px) 3.5rem;
        gap: 1.75rem;
    }

    .jm-promo__poster {
        max-width: 364px;
    }

    .jm-btn--gold-offer {
        padding: 0.78rem 2rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .jm-promo__inner {
        padding: 2.25rem var(--jm-px) 2.75rem;
        gap: 1.5rem;
    }

    .jm-promo__poster {
        max-width: 92%;
    }

    .jm-btn--gold-offer {
        width: 100%;
        padding: 0.72rem 1.5rem;
        font-size: 0.88rem;
        line-height: 1.3;
        letter-spacing: 0.015em;
    }
}

/* ============================================
   6e. SECCIÓN · GALERÍA 3 IMÁGENES (vertical)
   ============================================ */
.jm-gallery3 {
    background-color: #000000;
    position: relative;
    overflow: hidden;
}

.jm-gallery3::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(1000px 600px at 50% 0%, rgba(15, 76, 129, 0.2), transparent 65%),
        radial-gradient(1000px 600px at 50% 100%, rgba(31, 164, 197, 0.1), transparent 65%);
}

.jm-gallery3__inner {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
    padding: 4.5rem var(--jm-px) 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.75rem;
}

.jm-gallery3__item {
    margin: 0;
    width: 100%;
    max-width: 900px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jm-gallery3__item::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg,
        rgba(245, 197, 24, 0.95) 0%,
        rgba(15, 76, 129, 0.75) 50%,
        rgba(31, 164, 197, 0.7) 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    z-index: 1;
    pointer-events: none;
    opacity: 0.92;
}

.jm-gallery3__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    position: relative;
    z-index: 0;
    box-shadow:
        0 0 55px -10px rgba(245, 197, 24, 0.14),
        0 22px 60px -14px rgba(3, 7, 18, 0.95);
    transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
    will-change: transform;
}

.jm-gallery3__item:hover .jm-gallery3__img {
    transform: translateY(-4px);
    filter: saturate(1.08) brightness(1.02);
    box-shadow:
        0 0 70px -8px rgba(245, 197, 24, 0.26),
        0 28px 70px -16px rgba(3, 7, 18, 0.98);
}

/* Responsive GALERÍA 3 */
@media (max-width: 991px) {
    .jm-gallery3__inner {
        max-width: 860px;
        padding: 3.75rem var(--jm-px) 4.25rem;
        gap: 2.25rem;
    }

    .jm-gallery3__item {
        max-width: 780px;
    }
}

@media (max-width: 767px) {
    .jm-gallery3__inner {
        max-width: 640px;
        padding: 3rem var(--jm-px) 3.5rem;
        gap: 1.75rem;
    }

    .jm-gallery3__item {
        max-width: 100%;
    }

    .jm-gallery3__img {
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .jm-gallery3__inner {
        padding: 2.25rem var(--jm-px) 2.75rem;
        gap: 1.25rem;
    }

    .jm-gallery3__item::before {
        inset: -2px;
        border-radius: 12px;
    }

    .jm-gallery3__img {
        border-radius: 10px;
    }
}

/* ============================================
   6f. SECCIÓN · FERIA DE EMPRENDEDORES
       (Botón superior + 2 imágenes + Botón dorado)
   ============================================ */
.jm-feria {
    background-color: #000000;
    position: relative;
    overflow: hidden;
}

.jm-feria::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(1000px 600px at 50% 0%, rgba(15, 76, 129, 0.18), transparent 65%),
        radial-gradient(1000px 600px at 50% 100%, rgba(31, 164, 197, 0.1), transparent 65%);
}

.jm-feria__inner {
    position: relative;
    z-index: 1;
    max-width: 1040px;
    margin: 0 auto;
    padding: 4.5rem var(--jm-px) 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}

/* ---------- Botones placa superior / inferior ---------- */
.jm-feria__btn-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Placa superior estática (no clickeable) */
.jm-btn--gold-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(980px, 100%);
    padding: 0.75rem 2.5rem;
    font-size: clamp(0.9rem, 0.7vw + 0.8rem, 1.08rem);
    font-weight: 900;
    letter-spacing: 0.035em;
    text-transform: none;
    color: #030712;
    background: linear-gradient(180deg, #d4a90c 0%, #b8890f 100%);
    border: 1px solid #a88206;
    border-radius: 6px;
    box-shadow:
        0 10px 26px -10px rgba(212, 169, 12, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-decoration: none;
    cursor: default;
    pointer-events: none;
    line-height: 1.15;
    text-align: center;
    font-family: var(--jm-font);
    margin: 0;
}

.jm-btn--gold-plate:hover {
    text-decoration: none;
    color: #030712;
}

/* ---------- Botón inferior CLICK AQUI! (clickeable → WhatsApp) ---------- */
.jm-btn--gold-cta-click {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(980px, 100%);
    padding: 0.85rem 2.5rem;
    font-size: clamp(0.92rem, 0.75vw + 0.82rem, 1.1rem);
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #030712;
    background: linear-gradient(180deg, #d4a90c 0%, #b8890f 100%);
    border: 1px solid #a88206;
    border-radius: 6px;
    box-shadow:
        0 12px 28px -10px rgba(212, 169, 12, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
    line-height: 1.15;
    text-align: center;
    font-family: var(--jm-font);
}

.jm-btn--gold-cta-click:hover,
.jm-btn--gold-cta-click:focus {
    background: linear-gradient(180deg, #e2b711 0%, #c49a1c 100%);
    transform: translateY(-1.5px);
    filter: saturate(1.12);
    box-shadow:
        0 16px 36px -10px rgba(226, 183, 17, 0.72),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    color: #030712;
    text-decoration: none;
    outline: none;
}

.jm-btn--gold-cta-click:active {
    transform: translateY(0);
    box-shadow:
        0 6px 16px -4px rgba(184, 137, 15, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* ---------- Imágenes ---------- */
.jm-feria__item {
    margin: 0;
    width: 100%;
    max-width: 980px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jm-feria__item::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 8px;
    padding: 2px;
    background: linear-gradient(135deg,
        rgba(245, 197, 24, 0.95) 0%,
        rgba(15, 76, 129, 0.75) 50%,
        rgba(31, 164, 197, 0.7) 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    z-index: 1;
    pointer-events: none;
    opacity: 0.95;
}

.jm-feria__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    position: relative;
    z-index: 0;
    box-shadow:
        0 0 55px -10px rgba(245, 197, 24, 0.12),
        0 22px 60px -14px rgba(3, 7, 18, 0.95);
    transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
    will-change: transform;
}

.jm-feria__item:hover .jm-feria__img {
    transform: translateY(-3px);
    filter: saturate(1.06) brightness(1.02);
    box-shadow:
        0 0 70px -8px rgba(245, 197, 24, 0.22),
        0 28px 70px -16px rgba(3, 7, 18, 0.98);
}

/* Responsive FERIA */
@media (max-width: 991px) {
    .jm-feria__inner {
        max-width: 880px;
        padding: 3.75rem var(--jm-px) 4.25rem;
        gap: 2rem;
    }

    .jm-btn--gold-plate,
    .jm-btn--gold-cta-click,
    .jm-feria__item {
        max-width: 860px;
    }
}

@media (max-width: 767px) {
    .jm-feria__inner {
        max-width: 640px;
        padding: 3rem var(--jm-px) 3.5rem;
        gap: 1.75rem;
    }

    .jm-btn--gold-plate,
    .jm-btn--gold-cta-click,
    .jm-feria__item {
        max-width: 100%;
    }

    .jm-btn--gold-plate {
        padding: 0.7rem 1.75rem;
        font-size: 0.92rem;
    }

    .jm-btn--gold-cta-click {
        padding: 0.8rem 1.75rem;
        font-size: 0.98rem;
    }
}

@media (max-width: 480px) {
    .jm-feria__inner {
        padding: 2.25rem var(--jm-px) 2.75rem;
        gap: 1.5rem;
    }

    .jm-btn--gold-plate {
        padding: 0.65rem 1.5rem;
        font-size: 0.85rem;
        letter-spacing: 0.025em;
    }

    .jm-btn--gold-cta-click {
        padding: 0.72rem 1.5rem;
        font-size: 0.92rem;
        letter-spacing: 0.05em;
    }

    .jm-feria__item::before {
        inset: -1.5px;
    }
}

/* ============================================
   6g. SECCIÓN · SISTEMA INSTITUCIONAL DE EVALUACIÓN ESTRATÉGICA
       (METODOLOGÍA SOL® y CREANDO EMPRESA SOL®)
   ============================================ */
.jm-soltext {
    background-color: var(--jm-c-white, #ffffff);
    position: relative;
    overflow: hidden;
}

.jm-soltext__inner {
    position: relative;
    z-index: 1;
    max-width: var(--jm-rw, 1200px);
    margin: 0 auto;
    padding: 3rem var(--jm-px) 3.6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.55rem;
    color: var(--jm-c-navy-900, #0c2f52);
    font-family: var(--jm-font);
}

/* Título principal · estilo PILL NAVY (coincide con Programas / Vitrina / Quienes) */
.jm-soltext__title {
    margin: 0 0 0.25rem;
    align-self: stretch;
    padding: 0.95rem 1.4rem 0.95rem 1.55rem;
    background-color: var(--jm-c-primary, #0f4c81);
    border: 1px solid var(--jm-c-primary-600, #14548c);
    border-radius: 10px;
    box-shadow:
        0 14px 28px -15px rgba(15, 76, 129, 0.68),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    width: fit-content;
    max-width: 100%;
    font-size: clamp(1.25rem, 1.1vw + 0.96rem, 1.95rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: 0.01em;
    color: var(--jm-c-white, #ffffff);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    text-shadow:
        0 2px 8px rgba(3, 12, 26, 0.46),
        0 0 1px rgba(255, 255, 255, 0.18);
}

.jm-soltext__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16%;
    bottom: 16%;
    width: 5px;
    border-radius: 0 6px 6px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.55);
}

/* Línea dorada inferior decorativa DESPUÉS del pill (opcional, sutil) */
.jm-soltext__title::after {
    content: "";
    position: absolute;
    left: 1.55rem;
    right: auto;
    bottom: -12px;
    width: min(220px, 38%);
    height: 3px;
    background: linear-gradient(90deg,
        var(--jm-c-gold, #f5c518) 0%,
        rgba(245, 197, 24, 0) 100%);
    border-radius: 3px;
}

/* Texto intro / párrafos base */
.jm-soltext__intro,
.jm-soltext__paragraph {
    margin: 0;
    padding: 0;
    font-size: clamp(1rem, 0.3vw + 0.96rem, 1.1rem);
    line-height: 1.82;
    color: var(--jm-c-navy-900, #0c2f52);
    letter-spacing: 0.005em;
    text-align: left;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.jm-soltext__paragraph {
    margin-top: 0.15rem;
}

/* Bullet list (METODOLOGÍAS) */
.jm-soltext__bullets {
    list-style: none;
    padding: 0;
    margin: 0.85rem 0 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.jm-soltext__bullet {
    position: relative;
    padding: 1.15rem 1.35rem 1.15rem 3.2rem;
    background: linear-gradient(90deg,
        #ffffff 0%,
        rgba(234, 242, 251, 0.78) 100%);
    border: 1px solid rgba(15, 76, 129, 0.12);
    border-left: 4px solid var(--jm-c-gold, #f5c518);
    border-radius: 14px;
    box-shadow:
        0 16px 36px -22px rgba(12, 47, 82, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.75);
    font-size: clamp(1rem, 0.35vw + 0.95rem, 1.12rem);
    line-height: 1.7;
    color: var(--jm-c-navy-900, #0c2f52);
    font-weight: 600;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.jm-soltext__bullet:hover {
    transform: translateX(3px);
    border-left-color: #ffd84a;
    box-shadow:
        0 20px 44px -20px rgba(12, 47, 82, 0.62),
        inset 0 0 0 1px rgba(255, 255, 255, 0.9),
        0 6px 12px -10px rgba(245, 197, 24, 0.35);
}

.jm-soltext__bullet::before {
    content: "";
    position: absolute;
    left: 1.15rem;
    top: 50%;
    width: 1.05rem;
    height: 1.05rem;
    transform: translateY(-50%) rotate(45deg);
    background: var(--jm-c-gold, #f5c518);
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.55);
}

.jm-soltext__bullet strong,
.jm-soltext__intro strong,
.jm-soltext__paragraph strong {
    color: var(--jm-c-primary, #0f4c81);
    font-weight: 800;
}

/* Firma + cita institucional */
.jm-soltext__sign {
    width: 100%;
    margin-top: 1rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(15, 76, 129, 0.14);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.jm-soltext__firm {
    margin: 0;
    padding: 0;
    font-size: clamp(1.05rem, 0.4vw + 0.96rem, 1.22rem);
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: 0.01em;
    color: var(--jm-c-primary, #0f4c81);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    padding-left: 1.05rem;
}

.jm-soltext__firm::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 999px;
    background-color: var(--jm-c-gold, #f5c518);
}

.jm-soltext__quote {
    margin: 0;
    padding: 1.35rem 1.55rem 1.35rem 1.85rem;
    background: linear-gradient(135deg,
        #ffffff 0%,
        rgba(234, 242, 251, 0.82) 100%);
    border: 1px solid rgba(15, 76, 129, 0.12);
    border-left: 5px solid var(--jm-c-gold, #f5c518);
    border-radius: 14px;
    box-shadow:
        0 18px 40px -24px rgba(12, 47, 82, 0.55),
        0 0 40px -14px rgba(245, 197, 24, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.jm-soltext__quote p {
    margin: 0;
    padding: 0;
    font-size: clamp(0.98rem, 0.3vw + 0.94rem, 1.1rem);
    line-height: 1.82;
    color: var(--jm-c-navy-900, #0c2f52);
    font-style: italic;
    letter-spacing: 0.005em;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Responsive SOLTEXT · breakpoints unificados (coincide con Vitrina / Programas) */
@media (max-width: 1150px) {
    .jm-soltext__inner {
        padding: 2.8rem var(--jm-px) 3.3rem;
        gap: 1.45rem;
    }
}

@media (max-width: 991px) {
    .jm-soltext__inner {
        padding: 2.6rem var(--jm-px) 3rem;
        gap: 1.3rem;
    }

    .jm-soltext__title {
        padding: 0.85rem 1.2rem 0.85rem 1.35rem;
        font-size: clamp(1.15rem, 1.5vw + 0.8rem, 1.6rem);
        width: 100%;
        border-radius: 9px;
    }
    .jm-soltext__title::before { width: 4px; }
    .jm-soltext__title::after {
        left: 1.35rem;
        bottom: -10px;
        width: min(180px, 42%);
    }

    .jm-soltext__bullets {
        gap: 0.85rem;
    }

    .jm-soltext__bullet {
        padding: 1.05rem 1.1rem 1.05rem 2.75rem;
    }

    .jm-soltext__bullet::before {
        left: 0.95rem;
        width: 0.9rem;
        height: 0.9rem;
    }

    .jm-soltext__sign {
        margin-top: 0.9rem;
        padding-top: 1.8rem;
        gap: 1.05rem;
    }

    .jm-soltext__quote {
        padding: 1.1rem 1.15rem 1.1rem 1.35rem;
        border-left-width: 4px;
    }
}

@media (max-width: 639px) {
    .jm-soltext__inner {
        padding: 2.4rem var(--jm-px) 2.8rem;
        gap: 1.15rem;
    }

    .jm-soltext__title {
        padding: 0.78rem 1.05rem 0.78rem 1.25rem;
        font-size: clamp(1.05rem, 5vw + 0.15rem, 1.35rem);
    }
    .jm-soltext__title::after {
        left: 1.25rem;
        bottom: -9px;
        width: 55%;
    }

    .jm-soltext__intro,
    .jm-soltext__paragraph {
        font-size: 0.96rem;
        line-height: 1.76;
    }

    .jm-soltext__bullets { gap: 0.75rem; }

    .jm-soltext__bullet {
        padding: 1rem 1rem 1rem 2.45rem;
        font-size: 0.96rem;
        border-radius: 12px;
    }

    .jm-soltext__bullet::before {
        left: 0.85rem;
        width: 0.8rem;
        height: 0.8rem;
    }

    .jm-soltext__sign {
        margin-top: 0.75rem;
        padding-top: 1.6rem;
        gap: 0.95rem;
    }

    .jm-soltext__firm {
        font-size: 1rem;
        line-height: 1.4;
        padding-left: 0.9rem;
    }

    .jm-soltext__quote {
        padding: 1rem 1rem 1rem 1.15rem;
        border-radius: 12px;
    }

    .jm-soltext__quote p {
        font-size: 0.95rem;
        line-height: 1.78;
    }
}

/* ============================================
   7. SECCIÓN · ¿Qué es JM Soluciones Grupales? (about)
   ============================================ */
.jm-about { background: var(--jm-c-bg); }
.jm-about__body {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    color: var(--jm-c-muted);
    font-size: 1.05rem;
}
.jm-link {
    font-weight: 700;
    color: var(--jm-c-accent);
    display: inline-block;
    padding: 0.3rem 0;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.jm-link:hover {
    color: var(--jm-c-gold);
    border-bottom-color: var(--jm-c-gold);
    text-decoration: none;
}

/* ============================================
   8. SECCIÓN · GALERÍA 9 BANNERS (grilla responsive)
   ============================================ */
.jm-banners { background: var(--jm-c-bg-alt); }
.jm-banners__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(180px, auto);
}

.jm-banner {
    margin: 0;
    border-radius: var(--jm-radius-md);
    overflow: hidden;
    box-shadow: var(--jm-shadow-sm);
    background: var(--jm-c-bg-muted);
    border: 1px solid var(--jm-c-border);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: block;
    position: relative;
}

.jm-banner:hover {
    transform: translateY(-3px);
    box-shadow: var(--jm-shadow-md);
    border-color: var(--jm-c-dark-border);
}

.jm-banner__svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: saturate(1.1) contrast(1.02);
}

/* Distribución asimétrica desktop (9 banners combinados tamaños como Google Sites real) */
.jm-banners__grid > .jm-banner:nth-child(1) { grid-column: span 12; grid-row: span 1; min-height: 280px; }  /* ancho 1280x602 */
.jm-banners__grid > .jm-banner:nth-child(2) { grid-column: span 7;  grid-row: span 2; }                        /* 1280x853 portrait */
.jm-banners__grid > .jm-banner:nth-child(3) { grid-column: span 5;  grid-row: span 2; }                        /* 853x1280 vertical */
.jm-banners__grid > .jm-banner:nth-child(4) { grid-column: span 6;  grid-row: span 2; aspect-ratio: 1 / 1; }   /* 1254x1254 cuadrado */
.jm-banners__grid > .jm-banner:nth-child(5) { grid-column: span 6;  grid-row: span 1; }                        /* ancho corto 1280x439 */
.jm-banners__grid > .jm-banner:nth-child(6) { grid-column: span 6;  grid-row: span 2; }                        /* 1280x853 */
.jm-banners__grid > .jm-banner:nth-child(7) { grid-column: span 12; grid-row: span 1; }                        /* ancho 1280x602 */
.jm-banners__grid > .jm-banner:nth-child(8) { grid-column: span 5;  grid-row: span 2; }                        /* 853x1280 vertical */
.jm-banners__grid > .jm-banner:nth-child(9) { grid-column: span 7;  grid-row: span 2; }                        /* ancho 1280x439 combinado */

/* Tablet: 2 columnas equitativas (1023 → 769) */
@media (max-width: 1023px) {
    .jm-banners__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
    .jm-banners__grid > .jm-banner { grid-column: span 2 !important; grid-row: span 1 !important; min-height: 240px; aspect-ratio: 16 / 10; }
    .jm-banners__grid > .jm-banner:nth-child(4) { aspect-ratio: 4 / 5; grid-column: span 2; }
}

/* Móvil: 1 sola columna */
@media (max-width: 639px) {
    .jm-banners__grid { grid-template-columns: 1fr; }
    .jm-banners__grid > .jm-banner { grid-column: span 1 !important; aspect-ratio: 16 / 9; min-height: 200px; }
    .jm-banners__grid > .jm-banner:nth-child(4) { aspect-ratio: 1 / 1; }
}

/* ============================================
   9. SECCIÓN · METODOLOGÍAS SOL® (8 cards)
   ============================================ */
.jm-sol {
    background:
        radial-gradient(1100px 520px at 0% -10%, rgba(31, 164, 197, .12), transparent 60%),
        linear-gradient(180deg, var(--jm-c-bg) 0%, var(--jm-c-bg-alt) 100%);
}

.jm-sol__eyebrow {
    display: block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .10em;
    font-weight: 700;
    font-size: .85rem;
    color: var(--jm-c-gold);
    margin: 0 0 .75rem;
    text-shadow: 0 2px 12px rgba(245, 197, 24, 0.25);
}

.jm-sol__cards {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.jm-sol-card {
    background: var(--jm-c-bg-alt);
    border: 1px solid var(--jm-c-border);
    border-top: 5px solid var(--jm-c-accent);
    border-radius: var(--jm-radius-lg);
    padding: 1.8rem 1.6rem;
    box-shadow: var(--jm-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-top-color .25s ease, background-color .25s ease;
    height: 100%;
}

.jm-sol-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--jm-shadow-md);
    border-top-color: var(--jm-c-gold);
    background: var(--jm-c-bg-muted);
}

.jm-sol-card__title {
    font-size: 1.2rem;
    color: var(--jm-c-white);
    margin: 0 0 .8rem;
}

.jm-sol-card__desc {
    color: var(--jm-c-muted);
    font-size: 1rem;
    margin: 0;
}

.jm-sol-card--quote {
    grid-column: span 3;
    border-top-color: var(--jm-c-gold);
    background:
        linear-gradient(135deg, rgba(31, 164, 197, .06), rgba(245, 197, 24, .08));
    text-align: center;
}

.jm-sol-card__quote {
    margin: 0;
    padding: 1.2rem 1.5rem;
    border-left: 6px solid var(--jm-c-gold);
    border-radius: var(--jm-radius-md);
    background: var(--jm-c-bg);
    color: var(--jm-c-text);
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1.75;
    text-align: left;
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid var(--jm-c-border);
    border-left: 6px solid var(--jm-c-gold);
}

.jm-sol-card__quote p { margin-bottom: .6rem; }

.jm-sol-card__quote cite {
    display: block;
    font-style: normal;
    font-weight: 700;
    color: var(--jm-c-gold);
    text-align: right;
    margin-top: .8rem;
    font-size: .95rem;
}

/* Responsive cards SOL */
@media (max-width: 991px) {
    .jm-sol__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jm-sol-card--quote { grid-column: span 2; }
}
@media (max-width: 639px) {
    .jm-sol__cards { grid-template-columns: 1fr; }
    .jm-sol-card--quote { grid-column: span 1; }
}

/* ============================================
   10. SECCIÓN · CTA GENERAL WHATSAPP
   ============================================ */
.jm-cta {
    background: linear-gradient(135deg, var(--jm-c-whatsapp-700) 0%, var(--jm-c-success) 100%);
    color: var(--jm-c-white);
    border-radius: var(--jm-radius-lg);
    margin: 5rem var(--jm-px) 0;
    max-width: var(--jm-rw);
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--jm-shadow-md);
    overflow: hidden;
}

.jm-cta__inner {
    padding: 4rem var(--jm-px);
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.jm-cta__title {
    color: var(--jm-c-white);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    margin: 0 0 1rem;
}

.jm-cta__lede {
    color: #dcfce7;
    font-size: 1.05rem;
    margin: 0 auto 2rem;
    max-width: 720px;
}

.jm-cta .jm-btn--whatsapp {
    background: var(--jm-c-white);
    color: var(--jm-c-whatsapp-700);
    border-color: var(--jm-c-white);
    font-weight: 800;
}
.jm-cta .jm-btn--whatsapp:hover {
    background: #dcfce7;
    color: var(--jm-c-whatsapp-700);
    border-color: #dcfce7;
}

/* ============================================
   11. RESPONSIVE — HEADER / MENÚ
   ============================================ */

/* Tablet / Móvil grande: mostrar hamburguesa y colapsar nav */
@media (max-width: 991px) {
    .jm-header__toggle {
        display: inline-flex;
    }

    .jm-header__nav-wrap {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        height: auto;
        width: min(320px, 88vw);
        padding: 5.5rem 1.25rem 2.25rem;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 1rem;
        background:
            linear-gradient(180deg, var(--jm-c-dark-bg) 0%, var(--jm-c-dark-bg-2) 100%);
        border-left: 1px solid var(--jm-c-dark-border);
        box-shadow: -20px 0 60px -20px rgba(7, 26, 46, 0.9);
        transform: translateX(105%);
        transition: transform .3s cubic-bezier(.2,.8,.2,1);
        z-index: 99;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .jm-header__nav-wrap.is-open {
        transform: translateX(0);
    }

    .jm-nav--primary {
        display: block;
        width: 100%;
    }

    .jm-menu--primary {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }

    .jm-menu-link {
        width: 100%;
        padding: 0.8rem 1rem;
        font-size: 1rem;
        border-radius: var(--jm-radius-md);
    }

    .jm-menu-item.is-active > .jm-menu-link::after {
        left: 1rem;
        right: auto;
        bottom: 0.5rem;
        width: 32px;
    }

    .jm-menu-caret {
        margin-left: auto;
    }

    .jm-menu-item--has-children > .jm-menu-link {
        cursor: pointer;
    }

    /* Submenús móvil: acordeón inline */
    .jm-submenu {
        position: static;
        min-width: 0;
        margin: 0.25rem 0 0.5rem 0.75rem;
        padding: 0.25rem 0.25rem 0.25rem 0.5rem;
        border-left: 2px solid var(--jm-c-dark-border);
        border-top: none;
        border-right: none;
        border-bottom: none;
        border-radius: 0;
        background: var(--jm-c-dark-bg-2);
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }

    .jm-menu-item--has-children.is-open > .jm-submenu {
        display: block;
    }

    .jm-menu-item--has-children > .jm-menu-link .jm-menu-caret {
        transition: transform .2s ease;
    }

    .jm-menu-item--has-children.is-open > .jm-menu-link .jm-menu-caret {
        transform: translateY(1px) rotate(180deg);
        opacity: 1;
    }

    .jm-header__cta {
        width: 100%;
        margin-top: 0.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--jm-c-dark-border);
    }

    .jm-header__cta .jm-btn--gold {
        width: 100%;
        justify-content: center;
        padding: 0.9rem 1.25rem;
    }

    /* Backdrop móvil */
    .jm-header__backdrop {
        position: fixed;
        inset: 0;
        background: rgba(3, 7, 18, 0.6);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
        z-index: 98;
    }

    .jm-header__backdrop.is-visible {
        opacity: 1;
        visibility: visible;
    }
}

/* Móvil pequeño */
@media (max-width: 480px) {
    .jm-site-branding .custom-logo {
        max-width: 170px;
        height: 40px;
    }

    .jm-site-header.is-scrolled .jm-site-branding .custom-logo {
        height: 36px;
    }

    .jm-header__inner {
        padding: 0.8rem var(--jm-px);
        gap: 0.75rem;
    }

    .jm-header__nav-wrap {
        padding-top: 4.75rem;
    }
}

/* ============================================
   12. RESPONSIVE — Breakpoints generales + reset
   ============================================ */
@media (max-width: 768px) {
    :root { --jm-py: 3rem; }
    .jm-hero__inner { padding: 4rem var(--jm-px) 3.5rem; }
    .jm-hero__cta-row .jm-btn { width: 100%; flex: 1 1 100%; }
    .jm-cta { margin-top: 3.5rem; }
    .jm-cta__inner { padding: 2.8rem 1rem; }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

body {
    margin: 0;
    overflow-x: hidden;
}

.jm-mensaje-en-construccion {
    max-width: var(--jm-rw);
    margin: 3rem auto;
    padding: 2rem;
    border-left: 6px solid var(--jm-c-gold);
    background-color: var(--jm-c-bg-alt);
    border: 1px solid var(--jm-c-border);
    border-left: 6px solid var(--jm-c-gold);
    border-radius: var(--jm-radius-md);
    color: var(--jm-c-text);
    box-shadow: var(--jm-shadow-md);
}

.jm-mensaje-en-construccion h1 {
    margin-top: 0;
    color: var(--jm-c-gold);
}

/* ============================================
   8. SECCIÓN GLOBAL · CONTACTO (Mapa + Datos + CTA WhatsApp)
      Se carga desde footer.php → APARECE EN TODAS LAS PÁGINAS
   ============================================ */
.jm-contactglobal {
    background-color: var(--jm-c-white, #ffffff);
    position: relative;
    overflow: hidden;
}

.jm-contactglobal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1320px, calc(100% - var(--jm-px, 2rem) * 2));
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(15, 76, 129, 0.12) 10%,
        rgba(15, 76, 129, 0.25) 30%,
        rgba(15, 76, 129, 0.32) 50%,
        rgba(15, 76, 129, 0.25) 70%,
        rgba(15, 76, 129, 0.12) 90%,
        transparent 100%);
    pointer-events: none;
    z-index: 3;
}

.jm-contactglobal__inner {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    padding: 4.5rem var(--jm-px) 5.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-rows: auto auto;
    gap: 3.5rem 4.5rem;
    align-items: start;
    justify-content: center;
}

/* Grupo CTA = ROW 1, ocupa las 2 columnas enteras (full width superior) */
.jm-contactglobal__group--cta {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    place-items: center !important;
    gap: 1.75rem !important;
    padding: 0 var(--jm-px, 1.5rem) !important;
    text-align: center !important;
}

/* ====== CONTENEDOR INTERNO CTA CENTRADO ABSOLUTO ====== */
.jm-contactglobal__group--cta > * {
    width: 100% !important;
    max-width: 1260px !important;
    margin: 0 auto !important;
    text-align: center !important;
    align-self: center !important;
}

/* Mapa = ROW 2 col 1 (se mantiene) */
.jm-contactglobal__mapwrap {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    justify-self: stretch;
    align-self: start;
}

/* Datos (dirección + correos) = ROW 2 col 2 (se mantiene) */
.jm-contactglobal__data {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

/* ----- Columna IZQUIERDA: Mapa ----- */
.jm-contactglobal__mapwrap {
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 4 / 3;
    border-radius: var(--jm-radius-lg);
    overflow: hidden;
    background: #eef4fa;
    padding: 3px;
    box-shadow:
        0 0 70px -18px rgba(15, 76, 129, 0.22),
        0 22px 52px -22px rgba(12, 47, 82, 0.55);
}

.jm-contactglobal__mapwrap::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 3px;
    background: linear-gradient(135deg,
        rgba(15, 76, 129, 0.95) 0%,
        rgba(20, 84, 140, 0.82) 50%,
        rgba(31, 164, 197, 0.7) 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    z-index: 1;
    pointer-events: none;
    border-radius: var(--jm-radius-lg);
    opacity: 0.95;
}

.jm-contactglobal__iframe {
    width: 100% !important;
    height: 100% !important;
    display: block;
    border: 0;
    border-radius: calc(var(--jm-radius-lg) - 3px);
    background: #e9ecef;
    position: relative;
    z-index: 0;
}

/* ----- Columna DERECHA: Datos contacto ----- */
.jm-contactglobal__data {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.75rem;
    padding-top: 0.5rem;
}

.jm-contactglobal__title.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.jm-contactglobal__group {
    width: 100%;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
}

.jm-contactglobal__label {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
    font-size: clamp(0.98rem, 0.5vw + 0.9rem, 1.18rem);
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--jm-c-primary, #0f4c81);
}

.jm-contactglobal__label--alt {
    margin-top: 0.75rem;
}

/* Email principal (resaltado) */
.jm-contactglobal__email {
    display: inline-block;
    margin: 0;
    padding: 0;
    font-size: clamp(1rem, 0.75vw + 0.9rem, 1.2rem);
    line-height: 1.55;
    color: var(--jm-c-navy-900, #0c2f52);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(15, 76, 129, 0.3);
    text-underline-offset: 3px;
    font-weight: 600;
    transition: color .18s ease, filter .18s ease, transform .18s ease, text-decoration-color .18s ease;
}

.jm-contactglobal__email:hover,
.jm-contactglobal__email:focus {
    color: var(--jm-c-primary, #0f4c81);
    filter: saturate(1.15);
    text-decoration-color: var(--jm-c-primary, #0f4c81);
    outline: none;
}

.jm-contactglobal__email--primary {
    font-size: clamp(1.12rem, 0.8vw + 1rem, 1.45rem);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.005em;
    padding: 0.85rem 1.75rem;
    border-radius: var(--jm-radius-md);
    background: linear-gradient(180deg,
        rgba(15, 76, 129, 0.10) 0%,
        rgba(20, 84, 140, 0.08) 50%,
        rgba(10, 54, 94, 0.12) 100%);
    border: 1px solid rgba(15, 76, 129, 0.55);
    text-decoration: none;
    box-shadow:
        0 0 42px -14px rgba(15, 76, 129, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 -1px 0 rgba(12, 47, 82, 0.12) inset,
        0 14px 34px -22px rgba(12, 47, 82, 0.55);
    color: var(--jm-c-primary, #0f4c81);
    transition: color .18s ease, background .18s ease, border-color .18s ease,
                transform .18s ease, box-shadow .18s ease;
}

.jm-contactglobal__email--primary:hover,
.jm-contactglobal__email--primary:focus {
    color: var(--jm-c-white, #ffffff);
    background: linear-gradient(180deg,
        var(--jm-c-primary-600, #14548c) 0%,
        var(--jm-c-primary, #0f4c81) 55%,
        #0a365e 100%);
    border-color: rgba(15, 76, 129, 0.95);
    transform: translateY(-1.5px);
    box-shadow:
        0 0 60px -10px rgba(15, 76, 129, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 -1px 0 rgba(6, 30, 55, 0.55) inset,
        0 20px 44px -18px rgba(12, 47, 82, 0.7);
    text-decoration: none;
    outline: none;
}

/* Lista de correos alternos */
.jm-contactglobal__emaillist {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
}

.jm-contactglobal__emaillist li {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
}

/* Grupo CTA (texto + 4 botones WhatsApp) */
.jm-contactglobal__group--cta {
    gap: 1.75rem !important;
    margin-top: 0.15rem !important;
}

.jm-contactglobal__cta-text {
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 1260px !important;
    text-align: center !important;
    display: block !important;
    font-size: clamp(1.08rem, 0.9vw + 0.95rem, 1.42rem) !important;
    line-height: 1.72 !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    color: var(--jm-c-navy-900, #0c2f52) !important;
}

.jm-contactglobal__cta-text .jm-contactglobal__br {
    display: block !important;
    margin: 0 auto !important;
}

/* Botón QUIERO SER SOCIO! azul (antes dorado) */
.jm-btn--gold-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(880px, 100%);
    padding: 0.95rem 2.75rem;
    font-size: clamp(0.98rem, 0.75vw + 0.85rem, 1.18rem);
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--jm-c-white, #ffffff);
    background: linear-gradient(180deg, #14548c 0%, #0f4c81 100%);
    border: 1px solid #0a365e;
    border-radius: 8px;
    box-shadow:
        0 16px 40px -14px rgba(15, 76, 129, 0.68),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
    line-height: 1.2;
    text-align: center;
    font-family: var(--jm-font);
}

.jm-btn--gold-contact:hover,
.jm-btn--gold-contact:focus {
    background: linear-gradient(180deg, #185f9c 0%, #14548c 100%);
    transform: translateY(-1.8px);
    filter: saturate(1.15);
    box-shadow:
        0 22px 50px -14px rgba(20, 84, 140, 0.78),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    color: var(--jm-c-white, #ffffff);
    text-decoration: none;
    outline: none;
}

.jm-btn--gold-contact:active {
    transform: translateY(0);
    box-shadow:
        0 10px 24px -8px rgba(15, 76, 129, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* ============= GRID 4 BOTONES WHATSAPP (footer) ============= */
.jm-contactglobal__btns {
    width: 100% !important;
    max-width: 1260px !important;
    margin: 0 auto !important;
    margin-top: 0.1rem !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    grid-auto-flow: row !important;
    gap: 1.15rem 1.4rem !important;
    align-items: stretch !important;
    justify-content: center !important;
    justify-items: stretch !important;
    place-content: center !important;
}

/* Botón base (estilo unificado) */
.jm-contactbtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    place-content: center !important;
    place-items: center !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 1.15rem 1.5rem 1.15rem 1.5rem !important;
    border-radius: 12px !important;
    font-family: var(--jm-font) !important;
    font-size: clamp(1.02rem, 0.35vw + 0.98rem, 1.2rem) !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    letter-spacing: 0.018em !important;
    text-decoration: none !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        box-shadow .28s ease,
        background-color .28s ease,
        background .28s ease,
        border-color .28s ease,
        color .28s ease !important;
    border-left: 4px solid transparent !important;
    text-align: center !important;
}

.jm-contactbtn__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
}

.jm-contactbtn__text {
    flex: 1 1 auto;
    display: inline-block;
}

/* ====== Botón DESTACADO #1: Necesito financiar mi empresa (PRIMARY) ====== */
.jm-contactbtn--primary {
    grid-column: span 3 !important;
    padding: 1.35rem 2rem 1.35rem 2rem !important;
    background: linear-gradient(180deg, #14548c 0%, #0f4c81 55%, #0a365e 100%) !important;
    border: 1px solid rgba(10, 54, 94, 0.95) !important;
    border-left-width: 5px !important;
    border-left-color: var(--jm-c-gold, #f5c518) !important;
    color: var(--jm-c-white, #ffffff) !important;
    box-shadow:
        0 0 44px -12px rgba(15, 76, 129, 0.4),
        0 16px 42px -20px rgba(12, 47, 82, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(6, 30, 55, 0.45) !important;
    font-size: clamp(1.15rem, 0.6vw + 1.02rem, 1.42rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.025em !important;
    justify-content: center !important;
    place-content: center !important;
    place-items: center !important;
    text-align: center !important;
    gap: 1.1rem !important;
}
.jm-contactbtn--primary .jm-contactbtn__icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 12px -6px rgba(3, 12, 26, 0.55);
}
.jm-contactbtn--primary:hover,
.jm-contactbtn--primary:focus {
    transform: translateY(-2.5px);
    background: linear-gradient(180deg, #185f9c 0%, #14548c 55%, #0c3f6d 100%);
    border-left-color: #ffd84a;
    box-shadow:
        0 0 60px -10px rgba(15, 76, 129, 0.5),
        0 24px 54px -18px rgba(12, 47, 82, 0.85),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(6, 30, 55, 0.45),
        0 8px 14px -10px rgba(245, 197, 24, 0.35);
    color: #ffffff;
    text-decoration: none;
    outline: none;
}

/* ====== Botones 2 / 3 / 4: Programas (SECONDARY outline) ====== */
.jm-contactbtn--program {
    padding: 1.2rem 1.5rem 1.2rem 1.5rem !important;
    background: linear-gradient(180deg,
        #ffffff 0%,
        rgba(234, 242, 251, 0.88) 100%) !important;
    border: 1px solid rgba(15, 76, 129, 0.22) !important;
    border-left-width: 5px !important;
    border-left-color: var(--jm-c-gold, #f5c518) !important;
    color: var(--jm-c-primary, #0f4c81) !important;
    box-shadow:
        0 16px 38px -22px rgba(12, 47, 82, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.85) !important;
    font-size: clamp(1.02rem, 0.32vw + 0.98rem, 1.16rem) !important;
    font-weight: 800 !important;
    justify-content: center !important;
    place-content: center !important;
    place-items: center !important;
    text-align: center !important;
    align-self: center !important;
}
.jm-contactbtn--program .jm-contactbtn__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    background: linear-gradient(145deg,
        rgba(15, 76, 129, 0.12),
        rgba(15, 76, 129, 0.04));
    color: var(--jm-c-primary, #0f4c81);
    border: 1px solid rgba(15, 76, 129, 0.18);
}
.jm-contactbtn--program:hover,
.jm-contactbtn--program:focus {
    transform: translateY(-2.2px);
    border-left-color: #ffd84a;
    background: linear-gradient(180deg,
        #ffffff 0%,
        rgba(209, 229, 248, 0.92) 100%);
    box-shadow:
        0 22px 48px -18px rgba(12, 47, 82, 0.68),
        0 10px 18px -12px rgba(245, 197, 24, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.95);
    color: #0a365e;
    text-decoration: none;
    outline: none;
}
.jm-contactbtn--program:hover .jm-contactbtn__icon,
.jm-contactbtn--program:focus .jm-contactbtn__icon {
    background: linear-gradient(145deg,
        var(--jm-c-primary, #0f4c81),
        var(--jm-c-primary-600, #14548c));
    color: var(--jm-c-white, #ffffff);
    border-color: transparent;
}

/* Responsive botones WhatsApp footer */
@media (max-width: 991px) {
    .jm-contactglobal__group--cta {
        padding: 0 !important;
    }
    .jm-contactglobal__btns {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.9rem 1rem !important;
        max-width: 100% !important;
    }
    .jm-contactbtn--primary {
        grid-column: span 2 !important;
        padding: 1.15rem 1.35rem 1.15rem 1.35rem !important;
        font-size: clamp(1.05rem, 0.5vw + 1rem, 1.2rem) !important;
    }
    .jm-contactbtn--primary .jm-contactbtn__icon {
        width: 46px !important;
        height: 46px !important;
        flex: 0 0 46px !important;
    }
    .jm-contactbtn {
        padding: 1rem 1.15rem 1rem 1.15rem !important;
        font-size: clamp(0.98rem, 0.3vw + 0.95rem, 1.08rem) !important;
        gap: 0.9rem !important;
    }
    .jm-contactbtn__icon {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }
}
@media (max-width: 639px) {
    .jm-contactglobal__group--cta {
        padding: 0 !important;
    }
    .jm-contactglobal__cta-text {
        font-size: 1.08rem !important;
    }
    .jm-contactglobal__btns {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
        max-width: 100% !important;
    }
    .jm-contactbtn--primary {
        grid-column: span 1 !important;
        padding: 1.1rem 1.15rem 1.1rem 1.15rem !important;
        font-size: 1.1rem !important;
    }
    .jm-contactbtn--primary .jm-contactbtn__icon {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
    }
    .jm-contactbtn {
        padding: 0.95rem 1.05rem 0.95rem 1.05rem !important;
        gap: 0.85rem !important;
        border-radius: 10px !important;
    }
    .jm-contactbtn__icon {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
        border-radius: 9px !important;
    }
}

/* Responsive CONTACTO GLOBAL */
@media (max-width: 1199px) {
    .jm-contactglobal__inner {
        max-width: 1120px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
        gap: 3rem 3.5rem;
        padding: 4rem var(--jm-px) 5rem;
    }

    .jm-contactglobal__group--cta {
        max-width: 100% !important;
        margin: 0 auto !important;
        gap: 1.75rem !important;
        padding: 0 var(--jm-px, 1.5rem) !important;
    }

    .jm-contactglobal__btns {
        max-width: 1000px !important;
        gap: 1.1rem 1.3rem !important;
    }

    .jm-contactglobal__mapwrap {
        max-width: 100%;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .jm-contactglobal__data {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
}

@media (max-width: 991px) {
    .jm-contactglobal__inner {
        max-width: 880px;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 2.75rem;
        padding: 3.75rem var(--jm-px) 4.25rem;
    }

    .jm-contactglobal__group--cta {
        grid-column: 1 / -1;
        grid-row: 1 / 2;
        max-width: 100%;
        margin: 0;
        gap: 1.25rem;
    }

    .jm-contactglobal__mapwrap {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
        max-width: 720px;
        margin: 0 auto;
    }

    .jm-contactglobal__data {
        grid-column: 1 / -1;
        grid-row: 3 / 4;
        gap: 1.5rem;
        padding-top: 0;
    }
}

@media (max-width: 767px) {
    .jm-contactglobal__inner {
        max-width: 640px;
        padding: 3rem var(--jm-px) 3.5rem;
        gap: 2.25rem;
    }

    .jm-contactglobal__group--cta {
        max-width: 100%;
        gap: 1.1rem;
    }

    .jm-contactglobal__mapwrap {
        max-width: 100%;
        aspect-ratio: 16 / 10;
    }

    .jm-contactglobal__group {
        gap: 0.65rem;
    }

    .jm-contactglobal__email--primary {
        padding: 0.75rem 1.25rem;
        width: 100%;
        text-align: center;
        font-size: 1.08rem;
    }
}

@media (max-width: 480px) {
    .jm-contactglobal__inner {
        padding: 2.25rem var(--jm-px) 2.75rem;
        gap: 1.85rem;
    }

    .jm-contactglobal__group--cta {
        gap: 1rem;
    }

    .jm-contactglobal__mapwrap {
        aspect-ratio: 4 / 3;
        border-radius: var(--jm-radius-md);
    }

    .jm-contactglobal__data {
        gap: 1.25rem;
    }

    .jm-contactglobal__label {
        font-size: 0.95rem;
        letter-spacing: 0.03em;
    }

    .jm-contactglobal__email {
        font-size: 0.98rem;
        word-break: break-word;
    }

    .jm-contactglobal__email--primary {
        padding: 0.7rem 1rem;
        font-size: 1rem;
    }

    .jm-contactglobal__cta-text {
        font-size: 1rem;
        line-height: 1.6;
    }
}

/* ==========================================================
   15. PÁGINA INTERNA · FERIA DE EMPRENDEDORES
       [1] Hero 100vh parallax scroll + [2] Grid 6 cards
   ========================================================== */

.jm-internal {
    width: 100%;
    overflow: hidden;
    background: var(--jm-c-bg);
}

/* ---------- [1] Hero interno 100vh (Parallax) ---------- */
.jm-page-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    color: var(--jm-c-white);
    text-align: center;
    background-color: var(--jm-c-dark-bg-2);
}

.jm-page-hero__bg {
    position: absolute;
    top: -8%;
    left: 0;
    right: 0;
    height: 116%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    will-change: transform;
    z-index: -1;
}

.jm-page-hero[data-jm-parallax-image] .jm-page-hero__bg {
    background-image: attr(data-jm-parallax-image url);
}

/* ---------- Variante: HERO SOLO IMAGEN (sin overlay, sin textos, SIN parallax) ---------- */
.jm-page-hero--imageonly {
    position: relative;
    background-color: #04101f;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 !important;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;   /* ← Centrado EXACTO vertical y horizontal */
    background-position-x: 50%;
    background-position-y: 50%;
    background-attachment: scroll;
    overflow: hidden;
}

.jm-page-hero--imageonly .jm-page-hero__bg {
    display: none;
}

.jm-page-hero--imageonly + * {
    position: relative;
    z-index: 1;
    isolation: isolate;
    background: var(--jm-c-bg);
}

/* ---------- Variante ESPECIAL solo página CAPACITACIONES: Hero 75% alto pantalla ---------- */
.jm-page-hero--capacitaciones-75 {
    min-height: 75vh;
    min-height: 75dvh;
}

.jm-page-hero__overlay { display: none; }
.jm-page-hero__inner { display: none; }
.jm-page-hero__scrolldown { display: none; }

/* ---------- [2] Grid 6 Cards Feria ---------- */
.jm-feria-cards {
    position: relative;
    padding: clamp(4rem, 8vw, 6.5rem) 0;
    background:
        radial-gradient(900px 420px at 10% 10%, rgba(31, 164, 197, 0.10), transparent 60%),
        radial-gradient(800px 420px at 90% 80%, rgba(12, 53, 88, 0.45), transparent 60%),
        var(--jm-c-bg);
    overflow: hidden;
}

/* Variante Feria: Fondo NEGRO PURO y SIN título de sección */
.jm-feria-cards--nobg {
    background: #000000;
    padding-top: clamp(3.5rem, 7vw, 5.5rem);
    padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}

.jm-feria-cards--nobg .jm-feria-cards__header { display: none; }

/* Todo el main interno de feria también negro para quede uniforme de punta a punta */
.jm-internal--feria {
    background: #000000;
}

/* --------------- Variante Categorías internas (Salud y Belleza, Moda...) --------------- */
.jm-internal--categoria {
    background: #000000;
}

/* Grid con 1 SOLA columna centrada (no afecta a feria 3 cols) */
.jm-categoria-cards--1cols .jm-feria-cards__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
    gap: 1.25rem;
}

/* Grid con 2 COLUMNAS (Inscríbete / Plan Embajador / Capacitaciones) */
.jm-categoria-cards--2cols .jm-feria-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 62rem;
    margin-left: auto;
    margin-right: auto;
    gap: 1.75rem;
}

@media (max-width: 991px) {
    .jm-categoria-cards--2cols .jm-feria-cards__grid {
        gap: 1.25rem;
    }
}
@media (max-width: 560px) {
    .jm-categoria-cards--2cols .jm-feria-cards__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Variante ESPECIAL solo página INSCRIBETE: Cards más ANCHAS y BAJAS (rectangulares) ---------- */
.jm-inscribete-cards .jm-feria-cards__grid {
    max-width: 86rem;
    margin-left: auto;
    margin-right: auto;
    gap: 2rem;
}

@media (max-width: 1199px) {
    .jm-inscribete-cards .jm-feria-cards__grid {
        max-width: 78rem;
        gap: 1.75rem;
    }
}

@media (max-width: 991px) {
    .jm-inscribete-cards .jm-feria-cards__grid {
        max-width: 62rem;
        gap: 1.5rem;
    }
}

@media (max-width: 560px) {
    .jm-inscribete-cards .jm-feria-cards__grid {
        max-width: 100%;
        gap: 1.25rem;
    }
}

/* ---------- Variante INSCRIBETE CTA ajustada: menos padding inferior + cards padding superior reducido ---------- */
.jm-cta-solo--inscribete-tight {
    padding-top: clamp(1.75rem, 3.5vw, 3rem);
    padding-bottom: clamp(0.5rem, 1.25vw, 1.25rem);
}

.jm-inscribete-cards {
    padding-top: clamp(1rem, 2vw, 2rem) !important;
}

/* ---------- Variante CAPACITACIONES CTA ajustada: MENOS SEPARACIÓN entre botón y footer (mismo fondo) ---------- */
.jm-cta-solo--capacitaciones-tight {
    padding-top: clamp(1.75rem, 3.5vw, 3rem);
    padding-bottom: clamp(0.25rem, 0.75vw, 0.75rem);
}

/* ---------- Variante PROGRAMA EMBAJADOR: SEPARACIÓN MÁXIMA 30px entre botones ↔ cards ---------- */
.jm-programaembajador-cta {
    padding-top: 0.9375rem;
    padding-bottom: 0.0625rem;
}

.jm-programaembajador-cards {
    padding-top: 0.9375rem !important;
    padding-bottom: 0.0625rem !important;
}

/* ---------- Página QUIENES SOMOS: texto institucional + galería + banner ---------- */
.jm-quienes-text {
    position: relative;
    width: 100%;
    background: #000000;
    padding: clamp(2.25rem, 6vw, 4rem) 0 clamp(1rem, 2vw, 1.75rem);
    isolation: isolate;
    z-index: 1;
}

.jm-quienes-text__inner {
    width: 100%;
    max-width: 66rem;
    margin: 0 auto;
    padding: 0 var(--jm-px);
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3.5vw, 2.5rem);
}

.jm-quienes-text__lead {
    margin: 0;
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.8;
    color: rgba(230, 240, 252, 0.92);
    font-weight: 400;
    letter-spacing: 0.01em;
    text-align: justify;
    hyphens: auto;
}

.jm-quienes-text__quote {
    margin: 0;
    padding: 1.5rem 2rem;
    font-size: clamp(1.15rem, 1.9vw, 1.65rem);
    line-height: 1.5;
    font-weight: 800;
    text-align: center;
    color: var(--jm-c-gold, #f9cd33);
    text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 0 18px rgba(245,197,24,.2);
    border-top: 1px solid rgba(245,197,24,.25);
    border-bottom: 1px solid rgba(245,197,24,.25);
    background:
        radial-gradient(400px 180px at 50% 50%, rgba(245,197,24,.08), transparent 70%);
    border-radius: var(--jm-radius-md);
    position: relative;
}

.jm-quienes-text__quote-mark {
    opacity: .55;
    font-size: 1.25em;
    padding: 0 0.25em;
    vertical-align: -0.08em;
}

/* 2 columnas imágenes */
.jm-quienes-gallery {
    position: relative;
    width: 100%;
    background: #000000;
    padding: clamp(1.75rem, 5vw, 3.25rem) 0 clamp(0.5rem, 1.25vw, 1rem);
}

.jm-quienes-gallery__inner {
    width: 100%;
    max-width: 86rem;
    margin: 0 auto;
    padding: 0 var(--jm-px);
}

.jm-quienes-gallery__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2.25rem);
}

.jm-quienes-gallery__item {
    background-color: #04101f;
    border: 1px solid rgba(245,197,24,.18);
    border-radius: var(--jm-radius-lg);
    box-shadow: 0 18px 44px -22px rgba(3,7,18,.85), 0 0 0 1px rgba(255,255,255,.02) inset;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.jm-quienes-gallery__item:hover,
.jm-quienes-gallery__item:focus-within {
    transform: translateY(-4px);
    border-color: rgba(245,197,24,.45);
    box-shadow:
        0 28px 60px -26px rgba(3,7,18,.9),
        0 0 0 1px rgba(245,197,24,.35),
        0 0 30px -6px rgba(245,197,24,.25);
}

.jm-quienes-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    background-color: #04101f;
}

@media (max-width: 768px) {
    .jm-quienes-gallery__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .jm-quienes-text__lead {
        text-align: left;
    }
}

/* Imagen GRANDE banner */
.jm-quienes-bigimg {
    position: relative;
    width: 100%;
    background: #000000;
    padding: clamp(1.75rem, 5vw, 3.25rem) 0 clamp(0.5rem, 1.25vw, 1rem);
}

.jm-quienes-bigimg__inner {
    width: 100%;
    max-width: 92rem;
    margin: 0 auto;
    padding: 0 var(--jm-px);
}

.jm-quienes-bigimg__inner img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    background: #04101f;
    border: 1px solid rgba(245,197,24,.2);
    border-radius: var(--jm-radius-lg);
    box-shadow: 0 28px 64px -26px rgba(3,7,18,.95);
}

/* ---------- Página SAVIGEL: 4 cards producto horizontal con fondo ---------- */
.jm-savigel-products {
    position: relative;
    width: 100%;
    background-color: #000000;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    padding: clamp(2.25rem, 6vw, 4.25rem) 0;
    isolation: isolate;
}

.jm-savigel-products__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(9, 31, 64, 0.74) 0%,
            rgba(20, 66, 128, 0.58) 35%,
            rgba(17, 56, 110, 0.64) 65%,
            rgba(9, 31, 64, 0.78) 100%
        ),
        radial-gradient(
            1400px 800px at 50% 0%,
            rgba(90, 170, 248, 0.22) 0%,
            rgba(40, 110, 200, 0.10) 45%,
            transparent 78%
        );
    z-index: 1;
}

.jm-savigel-products__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 96rem;
    margin: 0 auto;
    padding: 0 var(--jm-px);
    display: flex;
    flex-direction: column;
    gap: clamp(1.75rem, 4vw, 3.5rem);
}

/* 1 card: 2 columnas horizontales (media | content) */
.jm-savigel-card {
    background: rgba(12, 40, 82, 0.88);
    border: 1px solid rgba(130, 196, 255, 0.26);
    border-radius: var(--jm-radius-2xl);
    box-shadow:
        0 36px 70px -40px rgba(0, 18, 55, 0.92),
        0 0 0 1px rgba(190, 226, 255, 0.045) inset,
        0 1px 0 rgba(220, 240, 255, 0.11) inset,
        0 -1px 0 rgba(5, 16, 38, 0.72) inset,
        0 0 70px -26px rgba(90, 170, 248, 0.22);
    padding: clamp(1rem, 2.5vw, 2rem);
    display: grid;
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 3.5vw, 3rem);
    align-items: start;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background-color .35s ease;
}

.jm-savigel-card:hover {
    transform: translateY(-3px);
    background-color: rgba(20, 62, 122, 0.92);
    border-color: rgba(160, 215, 255, 0.52);
    box-shadow:
        0 48px 80px -40px rgba(0, 14, 46, 0.97),
        0 0 0 1px rgba(160, 215, 255, 0.44),
        0 0 90px -16px rgba(90, 180, 255, 0.32);
}

/* Columna IZQ: foto + botón debajo */
.jm-savigel-card__media {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;
}

.jm-savigel-card__media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center center;
    background-color: rgba(8, 24, 52, 0.92);
    border: 1px solid rgba(130, 196, 255, 0.26);
    border-radius: var(--jm-radius-xl);
    box-shadow: 0 24px 50px -30px rgba(0, 14, 40, 0.94);
    display: block;
}

.jm-savigel-card__btn {
    width: 100%;
}

/* Columna DER: texto / títulos / bullets */
.jm-savigel-card__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: rgba(236, 246, 255, 0.95);
}

.jm-savigel-card__title {
    margin: 0;
    font-size: clamp(1.1rem, 1.9vw, 1.6rem);
    line-height: 1.3;
    font-weight: 800;
    color: var(--jm-c-gold, #f9cd33);
    letter-spacing: -0.01em;
    text-shadow: 0 1px 0 rgba(0,0,0,.6);
}

.jm-savigel-card__lead {
    margin: 0;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.75;
    color: rgba(240, 249, 255, 0.90);
    text-align: justify;
    hyphens: auto;
}

.jm-savigel-card__subblock {
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.jm-savigel-card__subtitle {
    margin: 0;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    font-weight: 700;
    color: rgba(255, 244, 200, 0.97);
    letter-spacing: 0.005em;
}

.jm-savigel-card__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.jm-savigel-card__list li {
    font-size: clamp(0.9rem, 1.05vw, 1rem);
    line-height: 1.6;
    padding: 0.55rem 0.95rem;
    background: rgba(90, 170, 248, 0.11);
    border-left: 3px solid rgba(140, 200, 255, 0.70);
    border-radius: 0 var(--jm-radius-md) var(--jm-radius-md) 0;
    color: rgba(242, 250, 255, 0.94);
}

.jm-savigel-card__note {
    margin: 0;
    font-size: clamp(0.9rem, 1.05vw, 1rem);
    line-height: 1.6;
    color: rgba(228, 242, 255, 0.89);
    font-style: italic;
    padding-left: 0.25rem;
}

.jm-savigel-card__price {
    margin-top: 0.5rem;
    align-self: flex-start;
    padding: 1.1rem 1.75rem;
    font-size: clamp(1.15rem, 1.65vw, 1.5rem);
    font-weight: 900;
    letter-spacing: 0.01em;
    color: var(--jm-c-gold, #f9cd33);
    text-shadow:
        0 1px 0 rgba(0,0,0,.65),
        0 0 22px rgba(245,197,24,.35),
        0 0 4px rgba(255,230,120,.55);
    background-color: rgba(8, 26, 58, 0.78);
    background-image:
        radial-gradient(420px 140px at 50% 50%, rgba(90, 170, 248, 0.18), transparent 70%);
    border-top: 1px solid rgba(140, 200, 255, 0.34);
    border-bottom: 1px solid rgba(140, 200, 255, 0.34);
    border-left: 3px solid rgba(180, 222, 255, 0.62);
    border-right: 0;
    border-radius: 0 var(--jm-radius-lg) var(--jm-radius-lg) 0;
    box-shadow:
        0 12px 26px -14px rgba(0, 10, 30, 0.9),
        0 1px 0 rgba(206, 234, 255, 0.07) inset;
}

/* RESPONSIVE: móvil + tablet <991px → apilar verticalmente */
@media (max-width: 991px) {
    .jm-savigel-products {
        background-attachment: scroll;
    }
    .jm-savigel-card {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding: 1.25rem;
    }
    .jm-savigel-card__media {
        max-width: 32rem;
        margin: 0 auto;
        width: 100%;
    }
    .jm-savigel-card__lead {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jm-savigel-card,
    .jm-savigel-card:hover {
        transform: none;
        transition: none;
    }
    .jm-savigel-products {
        background-attachment: scroll;
    }
}

/* ---------- Variante ESPECIAL solo página PLAN EMBAJADOR: cards VERTICALES 3:4 + imagen COMPLETA sin recorte ---------- */
.jm-programaembajador-cards .jm-feria-card__media {
    aspect-ratio: 3 / 4;
    background-color: #04101f;
}

.jm-programaembajador-cards .jm-feria-card__media img {
    object-fit: contain;
    object-position: center center;
    background-color: #04101f;
}

.jm-programaembajador-cards .jm-feria-card__wrap:hover .jm-feria-card__media img,
.jm-programaembajador-cards .jm-feria-card__wrap:focus-within .jm-feria-card__media img {
    transform: scale(1.025);
}

.jm-feria-card__wrap--nocta {
    gap: 0 !important;
    padding-bottom: 1rem;
}

.jm-feria-card__wrap--nocta .jm-feria-card__cta {
    display: none;
}

.jm-inscribete-cards .jm-feria-card__media {
    aspect-ratio: 16 / 9;
}

@media (max-width: 991px) {
    .jm-inscribete-cards .jm-feria-card__media {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 560px) {
    .jm-inscribete-cards .jm-feria-card__media {
        aspect-ratio: 16 / 9;
    }
}

/* --------------- Variante Landing simple (Gastronomia): HERO + SECCIÓN APARTE CTA --------------- */
.jm-internal--landing {
    background: #000000;
}

/* Hero SOLO IMAGEN de la variante Gastronomía usa ya .jm-page-hero--imageonly */

/* Sección aparte: botón solo, debajo del hero, antes del footer */
.jm-cta-solo {
    position: relative;
    width: 100%;
    background: #000000;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3.5rem, 7vw, 6rem);
    isolation: isolate;
    z-index: 1;
}

.jm-cta-solo__inner {
    width: 100%;
    max-width: var(--jm-rw);
    margin: 0 auto;
    padding: 0 var(--jm-px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.jm-btn--hero-gold,
.jm-btn--hero-gold:link,
.jm-btn--hero-gold:visited,
.jm-btn--hero-gold:hover,
.jm-btn--hero-gold:focus,
.jm-btn--hero-gold:focus-visible,
.jm-btn--hero-gold:active,
.jm-btn--hero-gold .jm-btn__label {
    color: #041020 !important;
}

.jm-btn--hero-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(40rem, 92%);
    max-width: 100%;
    min-height: 68px;
    padding: 1rem 2.5rem;
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.15;
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
    color: #041020;
    background: linear-gradient(180deg,
        #fad74f 0%,
        #f5c518 42%,
        #e1b012 100%);
    border: 1px solid rgba(176, 123, 4, 0.50);
    border-radius: 999px;
    box-shadow:
        0 22px 50px -22px rgba(245, 197, 24, 0.95),
        0 18px 44px -28px rgba(255, 199, 0, 0.85),
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 -2px 0 rgba(128, 85, 0, 0.32) inset;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        box-shadow .3s ease,
        background .3s ease,
        filter .3s ease;
    font-family: inherit;
}

/* Hover: sube 4px, se vuelve más claro y con + halo (mismo sistema de contraste AAA) */
.jm-btn--hero-gold:hover,
.jm-btn--hero-gold:focus-visible {
    transform: translateY(-4px);
    background: linear-gradient(180deg,
        #ffe267 0%,
        #f9cd33 42%,
        #eebd1a 100%);
    box-shadow:
        0 32px 64px -24px rgba(245, 197, 24, 0.98),
        0 26px 58px -36px rgba(255, 216, 88, 0.92),
        0 1px 0 rgba(255, 255, 255, 0.70) inset,
        0 -2px 0 rgba(128, 85, 0, 0.32) inset;
    outline: none;
}

.jm-btn--hero-gold:focus-visible {
    outline: 2px solid #f5c518;
    outline-offset: 5px;
}

.jm-btn--hero-gold:active {
    transform: translateY(0) scale(0.995);
    background: linear-gradient(180deg,
        #e7bf19 0%,
        #d4a910 50%,
        #b9920a 100%);
    filter: saturate(0.98);
    box-shadow:
        0 12px 28px -18px rgba(245, 197, 24, 0.60),
        0 1px 0 rgba(255, 255, 255, 0.40) inset,
        0 -1px 0 rgba(128, 85, 0, 0.32) inset;
}

/* Estado botón placeholder disabled (sin URL) */
.jm-btn--hero-gold[disabled],
.jm-btn--hero-gold[aria-disabled="true"] {
    opacity: 1;
    cursor: not-allowed;
    background: linear-gradient(180deg,
        #fad74f 0%,
        #f5c518 42%,
        #e1b012 100%);
    box-shadow:
        0 20px 44px -22px rgba(245, 197, 24, 0.85),
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 -2px 0 rgba(128, 85, 0, 0.32) inset;
}

.jm-btn--hero-gold[disabled]:hover,
.jm-btn--hero-gold[aria-disabled="true"]:hover,
.jm-btn--hero-gold[disabled]:active,
.jm-btn--hero-gold[aria-disabled="true"]:active {
    transform: none;
    filter: none;
    background: linear-gradient(180deg,
        #fad74f 0%,
        #f5c518 42%,
        #e1b012 100%);
    box-shadow:
        0 20px 44px -22px rgba(245, 197, 24, 0.85),
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 -2px 0 rgba(128, 85, 0, 0.32) inset;
}

/* Responsive botón Gastronomía */
@media (max-width: 991px) {
    .jm-btn--hero-gold {
        font-size: 0.95rem;
        letter-spacing: 0.20em;
        min-height: 62px;
        padding: 0.9rem 2rem;
    }
}

@media (max-width: 560px) {
    .jm-btn--hero-gold {
        font-size: 0.9rem;
        letter-spacing: 0.18em;
        min-width: 94%;
        min-height: 64px;
        padding: 0.95rem 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jm-btn--hero-gold { transition: none; }
    .jm-btn--hero-gold:hover { transform: none; }
}

/* Compensación admin-bar para hero imageonly es la que ya está definida arriba,
   no necesita ajuste extra para la sección .jm-cta-solo. */

/* Estado DISABLED del botón cuando no hay URL (placeholder) */
.jm-btn--feria-card[disabled],
.jm-btn--feria-card[aria-disabled="true"] {
    opacity: 1;
    cursor: not-allowed;
    background: linear-gradient(180deg,
        #f9cd33 0%,
        #f0be1b 50%,
        #dcae10 100%);
    box-shadow:
        0 12px 26px -14px rgba(245, 197, 24, 0.75),
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 -2px 0 rgba(128, 85, 0, 0.30) inset;
}

.jm-btn--feria-card[disabled]:hover,
.jm-btn--feria-card[aria-disabled="true"]:hover,
.jm-btn--feria-card[disabled]:active,
.jm-btn--feria-card[aria-disabled="true"]:active {
    transform: none;
    background: linear-gradient(180deg,
        #f9cd33 0%,
        #f0be1b 50%,
        #dcae10 100%);
    box-shadow:
        0 12px 26px -14px rgba(245, 197, 24, 0.75),
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 -2px 0 rgba(128, 85, 0, 0.30) inset;
    filter: none;
}

.jm-feria-cards__inner {
    width: min(var(--jm-rw), 100%);
    margin: 0 auto;
    padding: 0 var(--jm-px);
}

.jm-feria-cards__header {
    text-align: center;
    margin: 0 auto 3.5rem;
    max-width: 72ch;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.jm-feria-cards__kicker {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--jm-c-gold);
}

.jm-feria-cards__title {
    margin: 0;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--jm-c-white);
    background: linear-gradient(90deg, var(--jm-c-white) 0%, var(--jm-c-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.jm-feria-cards__intro {
    margin: 0.25rem 0 0;
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(215, 230, 248, 0.85);
}

.jm-feria-cards__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
}

.jm-feria-card {
    animation: jm-feria-card-in 0.65s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: var(--jm-feria-card-delay, 0s);
}

@keyframes jm-feria-card-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .jm-feria-card { animation: none; }
    .jm-page-hero__scrolldown-wheel { animation: none; }
    .jm-page-hero__bg { will-change: auto; }
}

.jm-feria-card__wrap {
    position: relative;
    background: var(--jm-c-dark-bg-2);
    border: 1px solid var(--jm-c-dark-border);
    border-radius: var(--jm-radius-lg);
    overflow: hidden;
    box-shadow: var(--jm-shadow-dark);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.jm-feria-card__wrap:hover,
.jm-feria-card__wrap:focus-within {
    transform: translateY(-6px);
    box-shadow:
        0 24px 56px -20px rgba(3, 7, 18, 0.70),
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 14px 34px -18px rgba(245, 197, 24, 0.35);
    border-color: rgba(245, 197, 24, 0.35);
}

.jm-feria-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #04101f;
}

.jm-feria-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(3, 12, 26, 0.45) 100%);
    pointer-events: none;
}

.jm-feria-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .65s cubic-bezier(.2,.8,.2,1), filter .35s ease;
    filter: saturate(1.05);
}

.jm-feria-card__wrap:hover .jm-feria-card__media img,
.jm-feria-card__wrap:focus-within .jm-feria-card__media img {
    transform: scale(1.06);
    filter: saturate(1.15);
}

/* ---------- Variante Card: SOLO IMAGEN + BOTÓN (estilo referencia) ---------- */
.jm-feria-card__wrap--imagebtn {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(180deg,
        #071931 0%,
        #05142a 55%,
        #041020 100%);
    border: 1px solid rgba(245, 197, 24, 0.22);
    border-radius: 32px;
    box-shadow:
        0 28px 60px -28px rgba(0, 0, 0, 0.78),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}

.jm-feria-card__wrap--imagebtn:hover,
.jm-feria-card__wrap--imagebtn:focus-within {
    transform: translateY(-6px);
    border-color: rgba(245, 197, 24, 0.55);
    box-shadow:
        0 34px 80px -26px rgba(2, 6, 16, 0.82),
        0 20px 44px -24px rgba(245, 197, 24, 0.35),
        0 0 0 1px rgba(245, 197, 24, 0.22) inset;
}

.jm-feria-card__media--full {
    aspect-ratio: 1 / 1.12;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    background: #030c1a;
    border: 1px solid rgba(245, 197, 24, 0.14);
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.65);
}

.jm-feria-card__media--full::after { display: none; }

.jm-feria-card__cta {
    padding: 0.1rem 0 0.25rem;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

/* Fuerza color de texto NEGRO (#041020) en TODOS los estados del botón feria-card
   para que no se herede el dorado del selector global a:hover,a:focus { color: gold; } */
.jm-btn--feria-card,
.jm-btn--feria-card:link,
.jm-btn--feria-card:visited,
.jm-btn--feria-card:hover,
.jm-btn--feria-card:focus,
.jm-btn--feria-card:focus-visible,
.jm-btn--feria-card:active,
.jm-btn--feria-card .jm-btn__label {
    color: #041020 !important;
}

.jm-btn--feria-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    min-height: 56px;
    padding: 0.95rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.15;
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
    color: #041020;
    background: linear-gradient(180deg,
        #f9cd33 0%,
        #f0be1b 50%,
        #dcae10 100%);
    border: 1px solid rgba(176, 123, 4, 0.45);
    border-radius: 999px;
    box-shadow:
        0 14px 30px -16px rgba(245, 197, 24, 0.85),
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 -2px 0 rgba(128, 85, 0, 0.30) inset;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        box-shadow .3s ease,
        background .3s ease,
        filter .3s ease;
    font-family: inherit;
}

/* --------------- CONSTRATE WCAG 2.1 AAA (ratio ~14.5:1 texto #041020 sobre #f9cd33) --------------- */
.jm-btn--feria-card:hover,
.jm-btn--feria-card:focus-visible {
    transform: translateY(-3px);
    background: linear-gradient(180deg,
        #ffd748 0%,
        #f5c518 50%,
        #e4b211 100%);
    box-shadow:
        0 22px 44px -18px rgba(245, 197, 24, 0.95),
        0 16px 38px -22px rgba(255, 199, 0, 0.70),
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 -2px 0 rgba(128, 85, 0, 0.30) inset;
    outline: none;
}

.jm-btn--feria-card:focus-visible {
    outline: 2px solid #f5c518;
    outline-offset: 4px;
}

.jm-btn--feria-card:active {
    transform: translateY(0) scale(0.99);
    background: linear-gradient(180deg,
        #e6bd19 0%,
        #d4a910 55%,
        #b9920a 100%);
    filter: saturate(0.98);
    box-shadow:
        0 8px 18px -12px rgba(245, 197, 24, 0.60),
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 -1px 0 rgba(128, 85, 0, 0.30) inset;
}

.jm-btn--feria-card .jm-btn__label {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-block;
}

/* Responsive ratios & font size (armonía mobile) */
@media (max-width: 1199px) {
    .jm-feria-card__wrap--imagebtn { padding: 0.9rem; border-radius: 28px; }
    .jm-feria-card__media--full   { border-radius: 20px; }
    .jm-btn--feria-card { font-size: 0.9rem; letter-spacing: 0.18em; }
}

@media (max-width: 991px) {
    .jm-feria-card__wrap--imagebtn { padding: 0.85rem; border-radius: 26px; gap: 0.85rem; }
    .jm-feria-card__media--full   { aspect-ratio: 3 / 3.4; border-radius: 18px; }
    .jm-btn--feria-card {
        font-size: 0.86rem;
        letter-spacing: 0.16em;
        padding: 0.9rem 1.25rem;
        min-height: 52px;
    }
}

@media (max-width: 560px) {
    .jm-feria-card__wrap--imagebtn { padding: 1rem; border-radius: 28px; gap: 1rem; }
    .jm-feria-card__media--full   { aspect-ratio: 4 / 4.5; border-radius: 20px; }
    .jm-btn--feria-card {
        font-size: 0.95rem;
        letter-spacing: 0.18em;
        padding: 1rem 1.4rem;
        min-height: 58px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jm-btn--feria-card,
    .jm-feria-card__wrap--imagebtn { transition: none; }
    .jm-btn--feria-card:hover,
    .jm-feria-card__wrap--imagebtn:hover { transform: none; }
}

.jm-feria-card__body {
    padding: 1.25rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1 1 auto;
}

.jm-feria-card__title {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 800;
    color: var(--jm-c-gold);
    letter-spacing: -0.005em;
}

.jm-feria-card__text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(220, 234, 252, 0.85);
}

/* ---------- Responsive: Feria ---------- */
@media (max-width: 1199px) {
    .jm-feria-cards__grid {
        gap: 1.5rem;
    }
}

@media (max-width: 991px) {
    .jm-feria-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .jm-page-hero__inner {
        padding-top: 7rem;
        padding-bottom: 5rem;
    }
}

@media (max-width: 768px) {
    .jm-feria-cards {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .jm-feria-cards__header { margin-bottom: 2.5rem; }
}

@media (max-width: 560px) {
    .jm-feria-cards__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

@media (max-width: 480px) {
    .jm-page-hero__inner {
        padding-top: 6rem;
        gap: 0.75rem;
    }

    .jm-page-hero__eyebrow { font-size: 0.7rem; padding: 0.3rem 0.8rem; }
    .jm-page-hero__lede { font-size: 1rem; }

    .jm-feria-card__body { padding: 1rem 1rem 1.25rem; }
    .jm-feria-card__title { font-size: 1.1rem; }
}

/* ---------- Admin Bar Compensation: Hero Feria ---------- */
@media (min-width: 783px) {
    body.admin-bar .jm-page-hero {
        min-height: calc(100vh - 32px);
        min-height: calc(100dvh - 32px);
        padding-top: 32px;
    }
    body.admin-bar .jm-page-hero--capacitaciones-75 {
        min-height: calc(75vh - 32px);
        min-height: calc(75dvh - 32px);
        padding-top: 32px;
    }
}
@media (max-width: 782px) and (min-width: 1px) {
    body.admin-bar .jm-page-hero {
        min-height: calc(100vh - 46px);
        min-height: calc(100dvh - 46px);
        padding-top: 46px;
    }
    body.admin-bar .jm-page-hero--capacitaciones-75 {
        min-height: calc(75vh - 46px);
        min-height: calc(75dvh - 46px);
        padding-top: 46px;
    }
}

/* ==========================================================
   ADMIN BAR COMPENSATION (USUARIOS LOGUEADOS)
   Evita que el header fixed tape el wpadminbar de WordPress
   ========================================================== */
body.admin-bar .jm-site-header {
    top: 32px;
}

body.admin-bar .jm-hero__content,
body.admin-bar .jm-about,
body.admin-bar .jm-content-wrap {
    padding-top: 112px; /* 80px header + 32px adminbar desktop */
}

body.admin-bar .jm-mobile-nav__panel,
body.admin-bar .jm-header__nav-wrap {
    top: 112px;
    bottom: 0;
    height: auto;
}

@media screen and (max-width: 782px) {
    body.admin-bar .jm-site-header {
        top: 46px;
    }

    body.admin-bar .jm-hero__content,
    body.admin-bar .jm-about,
    body.admin-bar .jm-content-wrap {
        padding-top: 126px; /* 80px header + 46px adminbar móvil */
    }

    body.admin-bar .jm-mobile-nav__panel,
    body.admin-bar .jm-header__nav-wrap {
        top: 126px;
        bottom: 0;
        height: auto;
    }
}

@media screen and (max-width: 600px) {
    body.admin-bar #wpadminbar {
        position: fixed !important;
    }
}

/* ===== Footer ===== */
.jm-site-footer {
    background: var(--jm-c-white, #ffffff);
    border-top: 1px solid rgba(15, 76, 129, 0.12);
    padding: 2.5rem 0 2rem;
    font-size: 0.9rem;
    color: var(--jm-c-navy-900, #0c2f52);
    text-align: center;
}

.jm-footer-info {
    max-width: var(--jm-rw);
    margin: 0 auto;
    padding: 0 var(--jm-px);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.jm-footer-info a {
    color: var(--jm-c-primary, #0f4c81);
    text-decoration: none;
    font-weight: 700;
    transition: color .2s ease, text-decoration-color .2s ease;
}

.jm-footer-info a:hover,
.jm-footer-info a:focus {
    color: var(--jm-c-primary-600, #14548c);
    text-decoration: underline;
    text-decoration-color: var(--jm-c-primary-600, #14548c);
}

.jm-footer-whatsapp {
    color: var(--jm-c-navy-900, #0c2f52);
    font-weight: 600;
}

.jm-footer-whatsapp a {
    color: var(--jm-c-primary, #0f4c81);
}

.jm-footer-whatsapp a:hover,
.jm-footer-whatsapp a:focus {
    color: var(--jm-c-primary-600, #14548c);
}

/* ==========================================================
 * # PÁGINA: Misión y Visión — Hero 70vh
 * ========================================================== */

.jm-mision-main {
    width: 100%;
    background-color: var(--jm-c-white, #ffffff);
}

.jm-mision-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
}

/* Imagen de fondo (aristotle-header-dark) · SIN desvanecidos ni filtros, imagen limpia */
.jm-mision-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-mision-hero-banner.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay NAVY suave · SIN desvanecimientos agresivos ni gradientes gold.
   Solo un tinte mínimo para contraste del texto blanco sobre la foto. */
.jm-mision-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.35);
    mix-blend-mode: normal;
}

/* Contenedor interno · mismo max-width que todo el tema (--jm-rw = 1320px) */
.jm-mision-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

/* Título H1 "Objetivo Institucional — JM Soluciones Grupales": COLOR BLANCO */
.jm-mision-hero__title {
    color: var(--jm-c-white, #ffffff) !important;
}

/* Pill: OBJETIVO INSTITUCIONAL · barra gold izquierda igual que pills NUESTROS PROGRAMAS */
.jm-mision-hero__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.2rem 0.6rem 1.85rem;
    border-radius: 12px;
    background-color: var(--jm-c-white, #ffffff);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 2px 0 rgba(15, 76, 129, 0.22) inset,
        0 10px 28px -10px rgba(12, 47, 82, 0.55),
        0 0 0 1px rgba(15, 76, 129, 0.18);
    isolation: isolate;
}

.jm-mision-hero__pill-left {
    position: absolute;
    left: 0;
    top: 16%;
    bottom: 16%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 10px 0 rgba(245, 197, 24, 0.4);
}

.jm-mision-hero__pill-text {
    color: var(--jm-c-primary, #0f4c81);
    font-weight: 800;
    font-size: clamp(0.86rem, 0.42vw + 0.8rem, 1.08rem);
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* Grupo 2 párrafos (objetivo + propósito) · TEXTO MÁS PEQUEÑO */
.jm-mision-hero__copy {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
}

.jm-mision-hero__p {
    margin: 0;
    padding: 1.1rem 1.35rem;
    width: 100%;
    border-radius: 14px;
    background-color: rgba(10, 27, 46, 0.52);
    backdrop-filter: blur(3px) saturate(110%);
    -webkit-backdrop-filter: blur(3px) saturate(110%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 10px 28px -12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(245, 197, 24, 0.06);
    color: rgba(255, 255, 255, 0.96);
    text-align: center;
    font-size: clamp(0.9rem, 0.38vw + 0.85rem, 1.06rem);
    line-height: 1.68;
    font-weight: 500;
    letter-spacing: 0.005em;
    text-wrap: pretty;
}

.jm-mision-hero__p--one::before {
    content: '';
    display: block;
    margin: 0 auto 0.75rem auto;
    width: 42px;
    height: 2.5px;
    border-radius: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 50%,
        transparent 100%);
    box-shadow: 0 0 8px rgba(245, 197, 24, 0.4);
}

.jm-mision-hero__p--two {
    background-color: rgba(15, 76, 129, 0.46);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================
 * # PÁGINA: Misión y Visión — Responsive breakpoints
 * ========================================================== */

@media (max-width: 1199px) {
    .jm-mision-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-mision-hero__inner {
        max-width: 1000px;
        gap: 1.35rem;
    }
    .jm-mision-hero__pill {
        padding: 0.55rem 1.1rem 0.55rem 1.7rem;
        border-radius: 11px;
    }
    .jm-mision-hero__pill-text {
        font-size: clamp(0.82rem, 0.42vw + 0.78rem, 1rem);
    }
    .jm-mision-hero__copy {
        max-width: 920px;
        gap: 1rem;
    }
    .jm-mision-hero__p {
        padding: 1rem 1.25rem;
        font-size: clamp(0.86rem, 0.34vw + 0.82rem, 1rem);
        line-height: 1.64;
    }
}

@media (max-width: 991px) {
    .jm-mision-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-mision-hero__inner {
        max-width: 820px;
        gap: 1.2rem;
    }
    .jm-mision-hero__pill {
        padding: 0.5rem 1.05rem 0.5rem 1.6rem;
        border-radius: 11px;
    }
    .jm-mision-hero__pill-text {
        font-size: clamp(0.8rem, 1vw + 0.76rem, 0.96rem);
        letter-spacing: 0.03em;
    }
    .jm-mision-hero__copy {
        max-width: 100%;
        gap: 0.9rem;
    }
    .jm-mision-hero__p {
        padding: 0.95rem 1.15rem;
        border-radius: 13px;
        font-size: 0.92rem;
        line-height: 1.62;
        text-align: left;
    }
}

@media (max-width: 639px) {
    .jm-mision-hero {
        min-height: 76vh;
        min-height: 76dvh;
        padding: 5rem 0 4rem 0;
    }
    .jm-mision-hero__inner {
        gap: 1.1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-mision-hero__pill {
        width: 100%;
        padding: 0.52rem 1rem 0.52rem 1.45rem;
        border-radius: 10px;
    }
    .jm-mision-hero__pill-text {
        font-size: 0.84rem;
        letter-spacing: 0.028em;
    }
    .jm-mision-hero__copy {
        gap: 0.85rem;
    }
    .jm-mision-hero__p {
        padding: 0.85rem 1rem;
        border-radius: 12px;
        font-size: 0.88rem;
        line-height: 1.6;
        text-align: left;
    }
    .jm-mision-hero__p--one::before {
        margin-bottom: 0.65rem;
        width: 38px;
    }
}

/* ==========================================================
 * # PÁGINA: Misión y Visión — Cards MISIÓN / VISIÓN (2 cols)
 * ========================================================== */

.jm-mv {
    position: relative;
    width: 100%;
    background-color: var(--jm-c-white, #ffffff);
    padding: 4.5rem 0 5.25rem 0;
    overflow: hidden;
}

.jm-mv__inner {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
}

.jm-mv__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 1.8rem;
    align-items: stretch;
    justify-items: stretch;
}

/* Cada card MISION / VISION · diseño unificado JM: UN SOLO borde gold izq gradiente, overflow corta esquinas */
.jm-mv-card {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    padding: 2rem 1.7rem;
    border-radius: 20px;
    background-color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 18px 48px -22px rgba(12, 47, 82, 0.26),
        0 6px 18px -8px rgba(12, 47, 82, 0.18),
        0 0 0 1px rgba(15, 76, 129, 0.10);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.jm-mv-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 48%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 16px 0 rgba(245, 197, 24, 0.32);
    z-index: 0;
}

.jm-mv-card:hover,
.jm-mv-card:focus-within {
    transform: translateY(-5px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 2px 0 rgba(15, 76, 129, 0.1) inset,
        0 28px 68px -24px rgba(12, 47, 82, 0.34),
        0 12px 28px -10px rgba(12, 47, 82, 0.24),
        0 0 0 1px rgba(15, 76, 129, 0.16),
        0 0 26px -4px rgba(245, 197, 24, 0.22);
}

/* Variante VISION (borde gradiente navy izq, más intenso) */
.jm-mv-card--vision::before {
    background: linear-gradient(180deg,
        var(--jm-c-primary-300, #2d7bb8) 0%,
        var(--jm-c-primary, #0f4c81) 50%,
        var(--jm-c-primary-800, #0c3961) 100%);
    box-shadow: 0 0 18px 0 rgba(15, 76, 129, 0.35);
}

/* Header card: Pill "MISIÓN" / "VISIÓN" con barra gold izq (patrón JM) */
.jm-mv-card__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.jm-mv-card__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 0.5rem;
    padding: 0.65rem 1.2rem 0.65rem 1.7rem;
    border-radius: 12px;
    background-color: var(--jm-c-white, #ffffff);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 2px 0 rgba(15, 76, 129, 0.18) inset,
        0 10px 26px -10px rgba(12, 47, 82, 0.32),
        0 0 0 1px rgba(15, 76, 129, 0.12);
    isolation: isolate;
}

.jm-mv-card__pill--accent {
    background-color: rgba(15, 76, 129, 0.04);
}

.jm-mv-card__pill-left {
    position: absolute;
    left: 0;
    top: 16%;
    bottom: 16%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.15),
        0 0 10px 0 rgba(245, 197, 24, 0.35);
}

.jm-mv-card--vision .jm-mv-card__pill-left {
    background-color: var(--jm-c-primary, #0f4c81);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 10px 0 rgba(15, 76, 129, 0.35);
}

.jm-mv-card__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-weight: 900;
    font-size: clamp(1.02rem, 0.55vw + 0.98rem, 1.35rem);
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.jm-mv-card--vision .jm-mv-card__title {
    color: var(--jm-c-primary, #0f4c81);
}

/* Body card: 2 párrafos */
.jm-mv-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.jm-mv-card__p {
    margin: 0;
    padding: 0.82rem 1.05rem;
    border-radius: 11px;
    background-color: rgba(15, 76, 129, 0.05);
    border: 1px solid rgba(15, 76, 129, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 2px 8px -4px rgba(12, 47, 82, 0.12);
    color: var(--jm-c-navy-900, #0c2f52);
    font-size: clamp(0.84rem, 0.3vw + 0.82rem, 0.98rem);
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: 0.005em;
    text-align: left;
    text-wrap: pretty;
}

.jm-mv-card--vision .jm-mv-card__p {
    background-color: rgba(245, 197, 24, 0.06);
    border-color: rgba(245, 197, 24, 0.15);
}

/* ==========================================================
 * # Cards Misión / Visión — Responsive breakpoints
 * ========================================================== */

@media (max-width: 1199px) {
    .jm-mv {
        padding: 4rem 0 4.75rem 0;
    }
    .jm-mv__inner {
        max-width: 1180px;
    }
    .jm-mv__grid {
        gap: 1.5rem;
    }
    .jm-mv-card {
        padding: 1.75rem 1.45rem;
        gap: 1.15rem;
        border-radius: 18px;
    }
    .jm-mv-card__pill {
        margin-left: 0.45rem;
        padding: 0.58rem 1.1rem 0.58rem 1.55rem;
        border-radius: 11px;
    }
    .jm-mv-card__title {
        font-size: clamp(0.98rem, 0.5vw + 0.95rem, 1.22rem);
        letter-spacing: 0.06em;
    }
    .jm-mv-card__body {
        gap: 0.75rem;
    }
    .jm-mv-card__p {
        padding: 0.75rem 0.98rem;
        font-size: clamp(0.82rem, 0.28vw + 0.8rem, 0.94rem);
        line-height: 1.58;
        border-radius: 10px;
    }
}

@media (max-width: 991px) {
    .jm-mv {
        padding: 3.75rem 0 4.25rem 0;
    }
    .jm-mv__inner {
        max-width: 920px;
    }
    .jm-mv__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 1.5rem;
    }
    .jm-mv-card {
        padding: 1.6rem 1.4rem;
        gap: 1.1rem;
        border-radius: 16px;
    }
    .jm-mv-card__pill {
        margin-left: 0.45rem;
        padding: 0.55rem 1.05rem 0.55rem 1.5rem;
        border-radius: 11px;
    }
    .jm-mv-card__title {
        font-size: clamp(0.96rem, 1.2vw + 0.92rem, 1.18rem);
        letter-spacing: 0.06em;
    }
    .jm-mv-card__body {
        gap: 0.72rem;
    }
    .jm-mv-card__p {
        padding: 0.72rem 0.95rem;
        font-size: 0.9rem;
        line-height: 1.56;
        border-radius: 10px;
    }
}

@media (max-width: 639px) {
    .jm-mv {
        padding: 3.25rem 0 3.75rem 0;
    }
    .jm-mv__inner {
        padding: 0 var(--jm-px, 1.25rem);
        max-width: 100%;
    }
    .jm-mv__grid {
        gap: 1.25rem;
    }
    .jm-mv-card {
        padding: 1.4rem 1.15rem;
        gap: 1rem;
        border-radius: 15px;
    }
    .jm-mv-card::before {
        width: 4px;
    }
    .jm-mv-card__pill {
        width: calc(100% - 0.45rem);
        margin-left: 0.45rem;
        padding: 0.55rem 1rem 0.55rem 1.4rem;
        border-radius: 10px;
    }
    .jm-mv-card__pill-left {
        width: 4px;
        border-radius: 0 4px 4px 0;
    }
    .jm-mv-card__title {
        font-size: 0.98rem;
        letter-spacing: 0.05em;
    }
    .jm-mv-card__body {
        gap: 0.7rem;
    }
    .jm-mv-card__p {
        padding: 0.7rem 0.9rem;
        border-radius: 10px;
        font-size: 0.88rem;
        line-height: 1.54;
    }
}

/* ==========================================================
 * # PÁGINA: Inversionistas Naturales — Hero 70vh
 * Referencia: Hero página Misión y Visión
 * Imagen fondo: assets/images/jm-inversionistas-hero-banner.jpg
 *               (origen TRAE/Inversionistas naturales/otros-empr-002.jpg)
 * Después del hero SOLO get_footer() — NINGUNA sección adicional
 * ========================================================== */

.jm-inversionistas-main {
    width: 100%;
    background-color: var(--jm-c-white, #ffffff);
}

.jm-inversionistas-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
}

/* Imagen de fondo (otros-empr-002) · SIN desvanecidos ni filtros, imagen limpia */
.jm-inversionistas-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-inversionistas-hero-banner.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay NAVY suave · SIN desvanecimientos agresivos ni gradientes gold.
   Solo un tinte mínimo para contraste del texto blanco sobre la foto. */
.jm-inversionistas-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.35);
    mix-blend-mode: normal;
}

/* Contenedor interno · mismo max-width que todo el tema (--jm-rw = 1320px) */
.jm-inversionistas-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

/* Título H1 VISIBLE GRANDE "Inversionistas Naturales" · ÚNICO título de la página (sin repeticiones)
 * Profesional, blanco, tracking amplio, sombras multicapa text-shadow estilo JM. */
.jm-inversionistas-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.025em;
    text-align: center;
    text-transform: none;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(15, 76, 129, 0.15);
}

/* Divisor gold DEBAJO del H1 (gradiente + brillo, separa título del copy). */
.jm-inversionistas-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 12px 0 rgba(245, 197, 24, 0.55);
}

/* Grupo 1 solo párrafo lead (descripción red inversionistas) · CAJA ÚNICA glassmorphism, NO 2 cajas */
.jm-inversionistas-hero__copy {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

/* UN SOLO BLOQUE GLASSMORPHISM: lead descripción · sin doble caja */
.jm-inversionistas-hero__lead {
    margin: 0;
    padding: 1.35rem 1.75rem;
    width: 100%;
    border-radius: 16px;
    background-color: rgba(10, 27, 46, 0.48);
    backdrop-filter: blur(6px) saturate(125%);
    -webkit-backdrop-filter: blur(6px) saturate(125%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 14px 38px -14px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(245, 197, 24, 0.1);
    color: rgba(255, 255, 255, 0.97);
    text-align: center;
    font-size: clamp(1rem, 0.42vw + 0.95rem, 1.2rem);
    line-height: 1.72;
    font-weight: 500;
    letter-spacing: 0.008em;
    text-wrap: pretty;
}

/* ==========================================================
 * # PÁGINA: Inversionistas Naturales — Responsive breakpoints
 * (mismos 3 niveles JM estándar que Misión+Visión)
 * ========================================================== */

@media (max-width: 1199px) {
    .jm-inversionistas-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-inversionistas-hero__inner {
        max-width: 1000px;
        gap: 1.25rem;
    }
    .jm-inversionistas-hero__pill {
        padding: 0.55rem 1.1rem 0.55rem 1.7rem;
        border-radius: 11px;
    }
    .jm-inversionistas-hero__pill-text {
        font-size: clamp(0.82rem, 0.42vw + 0.78rem, 1rem);
    }
    .jm-inversionistas-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-inversionistas-hero__divider {
        width: 84px;
        height: 3px;
    }
    .jm-inversionistas-hero__copy {
        max-width: 880px;
    }
    .jm-inversionistas-hero__lead {
        padding: 1.15rem 1.5rem;
        font-size: clamp(0.96rem, 0.38vw + 0.92rem, 1.12rem);
        line-height: 1.68;
    }
}

@media (max-width: 991px) {
    .jm-inversionistas-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-inversionistas-hero__inner {
        max-width: 820px;
        gap: 1.1rem;
    }
    .jm-inversionistas-hero__pill {
        padding: 0.5rem 1.05rem 0.5rem 1.6rem;
        border-radius: 11px;
    }
    .jm-inversionistas-hero__pill-text {
        font-size: clamp(0.8rem, 1vw + 0.76rem, 0.96rem);
        letter-spacing: 0.03em;
    }
    .jm-inversionistas-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.018em;
    }
    .jm-inversionistas-hero__divider {
        width: 72px;
        height: 3px;
    }
    .jm-inversionistas-hero__copy {
        max-width: 100%;
    }
    .jm-inversionistas-hero__lead {
        padding: 1rem 1.3rem;
        border-radius: 14px;
        font-size: 0.96rem;
        line-height: 1.66;
        text-align: left;
    }
}

@media (max-width: 639px) {
    .jm-inversionistas-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-inversionistas-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-inversionistas-hero__pill {
        width: 100%;
        padding: 0.52rem 1rem 0.52rem 1.45rem;
        border-radius: 10px;
    }
    .jm-inversionistas-hero__pill-text {
        font-size: 0.84rem;
        letter-spacing: 0.028em;
    }
    .jm-inversionistas-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.015em;
    }
    .jm-inversionistas-hero__divider {
        width: 60px;
        height: 3px;
    }
    .jm-inversionistas-hero__copy {
        width: 100%;
    }
    .jm-inversionistas-hero__lead {
        padding: 0.95rem 1.15rem;
        border-radius: 13px;
        font-size: 0.92rem;
        line-height: 1.64;
        text-align: left;
        backdrop-filter: blur(5px) saturate(120%);
        -webkit-backdrop-filter: blur(5px) saturate(120%);
    }
}

/* ==========================================================
 * # PÁGINA: Inscripciones — Hero 70vh
 * Referencia: Hero página Inversionistas Naturales (mismo patrón visual).
 * Imagen fondo: assets/images/aristotle-header-dark-ban01.webp
 *               (set inline style en .jm-inscripciones-hero__bg).
 * Contenido: Pill + H1 + Divider gold + Caja glassmorphism 3 párrafos +
 *            Botón verde WA (WhatsApp) centrado.
 * Después del hero SOLO get_footer()
 * ========================================================== */

.jm-inscripciones-main {
    width: 100%;
    background-color: var(--jm-c-white, #ffffff);
}

.jm-inscripciones-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 6.75rem 0 5.25rem 0;
}

/* Imagen hero aristotle (set desde inline style en page-inscripciones.php) */
.jm-inscripciones-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay navy suave 0.38 para contraste texto blanco (igual inversionistas) */
.jm-inscripciones-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.38);
    mix-blend-mode: normal;
}

/* Inner · max-width 1320px (--jm-rw), todo centrado, gap 1.65rem por el botón adicional */
.jm-inscripciones-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.4rem;
}

/* Pill Kicker NAVY uppercase gold borde (MISMO estilo Vitrina Holding 21-sep) */
.jm-inscripciones-hero__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.25rem 0.55rem 1.95rem;
    background: linear-gradient(180deg, #0f4c81 0%, #0a3d68 100%);
    border: 2px solid #f0c419;
    border-radius: 999px;
    box-shadow:
        0 1px 0 rgba(255,255,255,.35) inset,
        0 1px 0 rgba(10,61,104,.1),
        0 10px 22px -12px rgba(15,76,129,.65),
        0 0 0 1px rgba(240,196,25,.35),
        0 0 18px rgba(240,196,25,.22);
    isolation: isolate;
    overflow: visible;
}

.jm-inscripciones-hero__pill-left {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 62%;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 14%, #f0c419 55%, #c99a12 100%);
    border-radius: 999px;
    box-shadow:
        0 0 6px rgba(240,196,25,.55),
        0 0 14px rgba(240,196,25,.22);
}

.jm-inscripciones-hero__pill-text {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(0.76rem, 0.62vw + 0.7rem, 0.92rem);
    letter-spacing: 0.095em;
    line-height: 1;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(10,61,104,.35);
}

/* H1 "Inscripciones" igual estilo inversionistas naturales */
.jm-inscripciones-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.025em;
    text-align: center;
    text-transform: none;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(15, 76, 129, 0.15);
}

/* Divider gold gradiente debajo H1 (igual inversionistas) */
.jm-inscripciones-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 12px 0 rgba(245, 197, 24, 0.55);
}

/* Contenedor glassmorphism · max-width 1080px por ser 3 párrafos + botón (más largo que inversionistas) */
.jm-inscripciones-hero__copy {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.jm-inscripciones-hero__lead {
    margin: 0;
    padding: 1.2rem 1.6rem 1.45rem 1.6rem;
    width: 100%;
    border-radius: 18px;
    background-color: rgba(10, 27, 46, 0.5);
    backdrop-filter: blur(7px) saturate(128%);
    -webkit-backdrop-filter: blur(7px) saturate(128%);
    border: 1px solid rgba(255, 255, 255, 0.17);
    box-shadow:
        0 16px 42px -16px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(245, 197, 24, 0.12);
    color: rgba(255, 255, 255, 0.975);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.8rem;
}

/* 3 párrafos user texto VERBATIM · interlineado 1.72, fuente 500, gap 1 rem entre ellos */
.jm-inscripciones-hero__p {
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: clamp(1rem, 0.42vw + 0.95rem, 1.18rem);
    line-height: 1.72;
    font-weight: 500;
    letter-spacing: 0.008em;
    text-wrap: pretty;
    text-align: center;
}

/* Wrapper botón WA centrado debajo último párrafo, margin-top pequeño reducido */
.jm-inscripciones-hero__ctas {
    width: 100%;
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0;
}

/* ===========================
   BOTÓN WHATSAPP (verde WA 25D366)
   estilo JM unificado con:
   acento gold izq · border gold 2px · icon svg
   hover: bordes gold brillante + sombra WA verde
   =========================== */
.jm-inscripciones-wa {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.92rem 1.75rem 0.92rem 1.75rem;
    min-width: 230px;
    margin: 0 auto;
    background: linear-gradient(180deg, #25D366 0%, #1ebe5a 100%);
    background-color: #25D366;
    border: 2px solid #f0c419;
    border-radius: 16px;
    color: #ffffff;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(1rem, 0.4vw + 0.96rem, 1.1rem);
    letter-spacing: 0.035em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 108, 49, 0.35);
    box-shadow:
        0 1px 0 rgba(255,255,255,.28) inset,
        0 1px 0 rgba(0, 108, 49, .4) inset,
        0 1px 0 rgba(255,255,255,.45),
        0 12px 28px -14px rgba(30,170,78,.72),
        0 22px 46px -28px rgba(0,0,0,.65),
        0 0 0 1px rgba(240,196,25,.32);
    overflow: hidden;
    cursor: pointer;
    transition:
        transform .38s cubic-bezier(.19,1,.22,1),
        background-color .28s ease,
        border-color .28s ease,
        box-shadow .4s ease,
        color .28s ease;
    will-change: transform;
    isolation: isolate;
    outline: none;
}

.jm-inscripciones-wa:hover,
.jm-inscripciones-wa:focus-visible {
    transform: translateY(-3px);
    background: linear-gradient(180deg, #1ebe5a 0%, #16a349 100%);
    background-color: #1ebe5a;
    border-color: #ffe082;
    color: #ffffff;
    text-decoration: none;
    box-shadow:
        0 1px 0 rgba(255,255,255,.3) inset,
        0 1px 0 rgba(12, 95, 42, .45) inset,
        0 1px 0 rgba(255,255,255,.48),
        0 15px 32px -16px rgba(30,170,78,.8),
        0 26px 52px -32px rgba(0,0,0,.7),
        0 0 0 1px rgba(255,224,130,.5);
}

.jm-inscripciones-wa:active {
    transform: translateY(-1px);
}

/* Acento gold izquierdo dentro botón (patrón JM) */
.jm-inscripciones-wa__accent {
    position: absolute;
    left: 7px;
    top: 15%;
    bottom: 15%;
    width: 4px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 14%, #f0c419 55%, #c99a12 100%);
    border-radius: 999px;
    box-shadow:
        0 0 6px rgba(240,196,25,.55),
        0 0 14px rgba(240,196,25,.22);
    pointer-events: none;
    z-index: 2;
}

.jm-inscripciones-wa__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.55rem;
    height: 1.55rem;
    color: #ffffff;
    z-index: 3;
}

.jm-inscripciones-wa__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.jm-inscripciones-wa__label {
    position: relative;
    z-index: 3;
    display: inline-block;
    padding-left: 0.1rem;
}

/* ==========================================================
 * # PÁGINA: Inscripciones — Responsive breakpoints
 * (mismos 3 niveles JM que Inversionistas Naturales + ajuste texto left móvil 991/639)
 * ========================================================== */

@media (max-width: 1199px) {
    .jm-inscripciones-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 5.6rem 0 4.25rem 0;
        align-items: center;
        justify-content: center;
    }
    .jm-inscripciones-hero__inner {
        max-width: 1000px;
        gap: 1.25rem;
    }
    .jm-inscripciones-hero__pill {
        padding: 0.48rem 1.05rem 0.48rem 1.6rem;
        border-radius: 11px;
    }
    .jm-inscripciones-hero__pill-text {
        font-size: clamp(0.8rem, 0.42vw + 0.76rem, 0.96rem);
    }
    .jm-inscripciones-hero__title {
        font-size: clamp(1.45rem, 2.1vw + 1.2rem, 2.35rem);
    }
    .jm-inscripciones-hero__divider {
        width: 80px;
        height: 3px;
    }
    .jm-inscripciones-hero__copy {
        max-width: 960px;
    }
    .jm-inscripciones-hero__lead {
        padding: 1.05rem 1.45rem 1.3rem 1.45rem;
    }
    .jm-inscripciones-hero__p {
        font-size: clamp(0.94rem, 0.38vw + 0.9rem, 1.05rem);
        line-height: 1.66;
    }
    .jm-inscripciones-wa {
        padding: 0.76rem 1.5rem 0.76rem 1.5rem;
        min-width: 200px;
        border-radius: 14px;
        font-size: 0.98rem;
    }
}

@media (max-width: 991px) {
    .jm-inscripciones-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 4.8rem 0 3.8rem 0;
        align-items: center;
        justify-content: center;
    }
    .jm-inscripciones-hero__inner {
        max-width: 820px;
        gap: 1.1rem;
    }
    .jm-inscripciones-hero__pill {
        padding: 0.45rem 1rem 0.45rem 1.55rem;
        border-radius: 11px;
    }
    .jm-inscripciones-hero__pill-text {
        font-size: clamp(0.78rem, 1vw + 0.74rem, 0.94rem);
        letter-spacing: 0.03em;
    }
    .jm-inscripciones-hero__title {
        font-size: clamp(1.2rem, 2.3vw + 1.05rem, 1.95rem);
        letter-spacing: 0.018em;
    }
    .jm-inscripciones-hero__divider {
        width: 68px;
        height: 3px;
    }
    .jm-inscripciones-hero__copy {
        max-width: 100%;
    }
    .jm-inscripciones-hero__lead {
        padding: 1rem 1.25rem 1.25rem 1.25rem;
        border-radius: 16px;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .jm-inscripciones-hero__p {
        font-size: 0.94rem;
        line-height: 1.64;
        text-align: left;
    }
    .jm-inscripciones-hero__ctas {
        justify-content: flex-start;
        margin-top: 0.2rem;
    }
    .jm-inscripciones-wa {
        padding: 0.72rem 1.3rem 0.72rem 1.3rem;
        min-width: 185px;
        border-radius: 13px;
        font-size: 0.94rem;
        margin: 0;
    }
}

@media (max-width: 639px) {
    .jm-inscripciones-hero {
        min-height: 76vh;
        min-height: 76dvh;
        padding: 3.8rem 0 3rem 0;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
    }
    .jm-inscripciones-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-inscripciones-hero__pill {
        width: 100%;
        padding: 0.48rem 0.95rem 0.48rem 1.4rem;
        border-radius: 10px;
    }
    .jm-inscripciones-hero__pill-text {
        font-size: 0.82rem;
        letter-spacing: 0.028em;
    }
    .jm-inscripciones-hero__title {
        font-size: clamp(1.05rem, 5.2vw + 0.95rem, 1.6rem);
        letter-spacing: 0.015em;
    }
    .jm-inscripciones-hero__divider {
        width: 56px;
        height: 3px;
    }
    .jm-inscripciones-hero__copy {
        width: 100%;
    }
    .jm-inscripciones-hero__lead {
        padding: 0.95rem 1.05rem 1.15rem 1.05rem;
        border-radius: 14px;
        align-items: flex-start;
        gap: 0.7rem;
        backdrop-filter: blur(5px) saturate(122%);
        -webkit-backdrop-filter: blur(5px) saturate(122%);
    }
    .jm-inscripciones-hero__p {
        font-size: 0.9rem;
        line-height: 1.62;
        text-align: left;
    }
    .jm-inscripciones-hero__ctas {
        width: 100%;
        margin-top: 0.1rem;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.7rem;
    }
    .jm-inscripciones-wa {
        padding: 0.7rem 1.15rem 0.7rem 1.15rem;
        min-width: 100%;
        width: 100%;
        border-radius: 12px;
        font-size: 0.92rem;
        letter-spacing: 0.028em;
    }
}

/* ==========================================================
 * # PÁGINA: Vitrina Holding
 * Referencia estructura: tema sharkalliance page-feria-de-emprendedores.php
 * Adaptada colores JM: navy #0f4c81 · gold #f5c518 · white · breakpoints 3 niveles
 * Contenido: Hero 70vh jm-vitrina-010.webp · Grid 3 cols × 3 filas 9 cards categorías
 *            imagen jm-vitrina-001..009.webp + botón CTA barra gold
 * ========================================================== */

.jm-vitrina-main {
    width: 100%;
    background-color: var(--jm-c-white, #ffffff);
}

/* ==========================================================
 *   [1/2] HERO VITRINA HOLDING · reducido móvil
 * ========================================================== */
.jm-vitrina-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    display: block;
    background-color: transparent;
    padding: 0;
    margin: 0;
}

/* Imagen de fondo hero (jm-vitrina-010.webp) · SIN filtros, SIN overlay, 100% pantalla */
.jm-vitrina-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-vitrina-010.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* ==========================================================
 *   [2/2] SECCIÓN GRID CARDS · 9 categorías (3 cols × 3 filas)
 *   Referencia: shark-feria-cards grid 6 → JM 9
 * ========================================================== */
.jm-vitrina-cards {
    position: relative;
    width: 100%;
    padding: 5.75rem 0 6.5rem 0;
    background-color: var(--jm-c-white, #ffffff);
    overflow: hidden;
}

.jm-vitrina-cards__inner {
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.75rem;
}

/* Header sección categorías: pill + H2 */
.jm-vitrina-cards__head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-vitrina-cards__head-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 10px 26px -10px rgba(15, 76, 129, 0.42),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    isolation: isolate;
}

.jm-vitrina-cards__head-pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 10px 0 rgba(245, 197, 24, 0.35);
}

.jm-vitrina-cards__head-pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.82rem, 0.38vw + 0.78rem, 1rem);
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
}

.jm-vitrina-cards__head-title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-navy-900, #0c2f52);
    font-size: clamp(1.45rem, 1.25vw + 1.28rem, 2.15rem);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.008em;
    text-transform: none;
    text-wrap: balance;
    text-align: left;
}

/* Grid 3 columnas 3 filas × 9 cards */
.jm-vitrina-cards__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    gap: 1.85rem 1.65rem;
    align-items: stretch;
    justify-items: stretch;
}

/* Cada item card grid */
.jm-vitrina-card {
    width: 100%;
    display: block;
    /* animation stagger delay (CSS var --jm-vitrina-card-delay from HTML inline style) */
    animation: jm-vitrina-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--jm-vitrina-card-delay, 0s);
}

@keyframes jm-vitrina-card-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* -----------------------
 *  REDISEÑO CARD UNIFICADA (JM v2):
 *  1 SOLO trazo gold visible en TODO el envoltorio clickeable.
 *  Imagen (arriba) + Botón NAVY (abajo) = 1 SOLA PIEZA, SIN GAP ni separación.
 * ----------------------- */

.jm-vitrina-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;                          /* SIN ESPACIO ENTRE IMAGEN Y BOTÓN */
    padding: 0;
    margin: 0;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;

    /* 1 SOLID BORDER GOLD (UNICO TRAZO EXTERIOR VISIBLE) */
    border: 2px solid var(--jm-c-gold, #f5c518);
    /* 1 SOLO BORDER-RADIUS (engloba TODO: media + btn) */
    border-radius: 18px;
    overflow: hidden;                  /* corta contenido interno al mismo radio */

    /* 1 SOMBRA COMPLETA (no duplicada) */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 16px 44px -20px rgba(12, 47, 82, 0.24),
        0 4px 16px -6px rgba(12, 47, 82, 0.15),
        0 0 14px -2px rgba(245, 197, 24, 0.2);

    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease;
    will-change: transform;
}

/* Hover: ELEVAR la card ENTERA (1 solo movimiento, no fragmentado) */
.jm-vitrina-card__wrap:hover,
.jm-vitrina-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    color: inherit;
    /* Borde gold más brillante en hover, sombra un poco más fuerte */
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 28px 66px -22px rgba(12, 47, 82, 0.3),
        0 8px 22px -6px rgba(12, 47, 82, 0.2),
        0 0 26px -4px rgba(245, 197, 24, 0.3),
        0 0 18px -2px rgba(245, 197, 24, 0.35);
}

/* ==========================================================
 *  MEDIA (arriba de la card UNIFICADA) · SIN BORDE, SIN SHADOW, SIN BOTTOM-RADIUS
 * ========================================================== */
.jm-vitrina-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--jm-c-primary-50, #e8f0f8);
    isolation: isolate;

    border: none;                      /* el wrap dibuja el borde exterior */
    box-shadow: none;                  /* el wrap dibuja la sombra exterior */
    border-radius: 0;                  /* el wrap controla el radio de las esquinas */
    transition:
        filter 0.25s ease,
        background-color 0.25s ease;
}

/* Barra gold izquierda (se mantiene dentro de media) */
.jm-vitrina-card__accent {
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 4px;
    z-index: 2;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.4);
}

/* Imagen: hover scale normal (la imagen se mueve DENTRO, todo lo demás no) */
.jm-vitrina-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(1);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.32s ease;
    will-change: transform;
}

.jm-vitrina-card__wrap:hover .jm-vitrina-card__img {
    transform: scale(1.05);
    filter: saturate(1.08) contrast(1.02);
}

/* Media en hover: nada de cambiar border (ya no tiene). Solo 1 filtro brillo muy suave */
.jm-vitrina-card__wrap:hover .jm-vitrina-card__media {
    filter: saturate(1.02);
}

/* ==========================================================
 *  CTA / BOTÓN (abajo, DENTRO DE LA MISMA CARD UNIFICADA)
 *  Fondo NAVY, BARRA GOLD IZQUIERDA · SIN BORDE EXTERIOR (el wrap lo dibuja)
 *  · Sin top-radius (está pegado a la imagen de arriba)
 *  · Sin bottom-radius (wrap se encarga del redondeo inferior)
 * ========================================================== */
.jm-vitrina-card__cta {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.jm-vitrina-card__btn {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.78rem 1.15rem 0.78rem 1.75rem;
    border-radius: 0;                    /* radio controlado por el wrap */
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(0.9rem, 0.42vw + 0.85rem, 1.03rem);
    line-height: 1.25;
    letter-spacing: 0.03em;
    text-transform: capitalize;
    text-align: center;

    border: none;                        /* SIN BORDE EXTERIOR gold (wrap lo dibuja) */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 -1px 0 rgba(12, 47, 82, 0.12) inset;   /* divisor sutil NAVY/navy sin línea */
    isolation: isolate;
    transition:
        background-color 0.25s ease,
        color 0.25s ease;
    will-change: background-color;
}

/* Barra gold izquierda del botón categoría (se mantiene · patrón JM) */
.jm-vitrina-card__btn-accent {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 8px 0 rgba(245, 197, 24, 0.3);
}

.jm-vitrina-card__btn-label {
    width: 100%;
}

/* Hover: solo cambia color interior NAVY y texto gold (nada de border ni transform individual) */
.jm-vitrina-card__wrap:hover .jm-vitrina-card__btn,
.jm-vitrina-card__wrap:focus-visible .jm-vitrina-card__btn {
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
}
/* Quitar hover independiente del botón (quien eleva y gestiona el foco es el __wrap) */
.jm-vitrina-card__btn:hover,
.jm-vitrina-card__btn:focus-visible {
    transform: none;
    outline: none;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 -1px 0 rgba(12, 47, 82, 0.12) inset;
}

/* ==========================================================
 *   Responsive breakpoints (JM estándar) · AJUSTAR SOLO RADIO DEL WRAP
 * ========================================================== */

@media (max-width: 1199px) {
    .jm-vitrina-hero {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0;
    }
    .jm-vitrina-cards { padding: 4.75rem 0 5.5rem 0; }
    .jm-vitrina-cards__inner { gap: 2.25rem; }
    .jm-vitrina-cards__head-title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-vitrina-cards__grid { gap: 1.5rem 1.35rem; }
    .jm-vitrina-card__wrap { border-radius: 16px; }
}

@media (max-width: 991px) {
    .jm-vitrina-hero {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0;
    }
    .jm-vitrina-cards { padding: 4.25rem 0 5rem 0; }
    .jm-vitrina-cards__inner { gap: 2rem; }
    .jm-vitrina-cards__head-title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-vitrina-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(5, auto);
        gap: 1.35rem 1.25rem;
    }
    .jm-vitrina-card__wrap { border-radius: 15px; }
}

@media (max-width: 639px) {
    .jm-vitrina-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 0;
    }
    .jm-vitrina-cards { padding: 3.5rem 0 4.25rem 0; }
    .jm-vitrina-cards__inner { gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-vitrina-cards__head { gap: 0.7rem; }
    .jm-vitrina-cards__head-title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-vitrina-cards__grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(9, auto);
        gap: 1.6rem;
    }
    .jm-vitrina-card__wrap { border-radius: 14px; }
    .jm-vitrina-card__accent { width: 4px; top: 10%; bottom: 10%; }
    .jm-vitrina-card__btn {
        padding: 0.66rem 0.95rem 0.66rem 1.5rem;
        font-size: 0.94rem;
        border-radius: 0;
    }
}

/* ==========================================================
 * # PÁGINA: Salud y Belleza (subpágina Vitrina Holding /salud-y-belleza/)
 * Estructura: SIN hero · 1 sola sección padding grid cards empresas asociadas
 *             5 cards: Savigel · ARspa Bogotá · Tai · Ciel · Nagomi
 * ========================================================== */

.jm-salud-belleza-main {
    width: 100%;
    background-color: var(--jm-c-white, #ffffff);
}

/* ==========================================================
 * # PÁGINA: Savigel (subpágina Vitrina Holding /savigel/)
 * Estructura:
 *   (1) HERO 100vh full imagen (igual Vitrina Hero, SIN overlays textos)
 *   (2) SECCIÓN GRID 4 COLUMNAS × 4 PRODUCTOS (Anti-Acné · Capilar · Línea · Cristales)
 *       Cards 1 SOLA PIEZA unificada (igual Vitrina v2): img 1:1 + texto · border gold continúo
 * ========================================================== */

.jm-savigel-main {
    width: 100%;
    background-color: var(--jm-c-white, #ffffff);
}

/* ---------- (1) HERO SAVIGEL 70vh · imagen completa + texto "Linea Savigel" ---------- */
.jm-savigel-hero {
    position: relative;
    width: 100%;
    /* ✅ Altura del hero = 70% viewport (como usuario pidió, NO más 100vh) */
    min-height: 70vh;
    min-height: 70dvh;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--jm-c-primary-700, #0c3961);
}
.jm-savigel-hero__bg {
    position: absolute;
    inset: 0;
    background-image: var(--jm-savigel-hero-bg, none);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--jm-c-primary-50, #e8f0f8);
    filter: saturate(1.08) contrast(1.02);
    transform: scale(1.02);
    z-index: 0;
}
/* Overlay sutil gradiente DARKENED para legibilidad del título */
.jm-savigel-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(12, 47, 82, 0.12) 0%, rgba(12, 47, 82, 0.10) 30%, rgba(12, 47, 82, 0.26) 100%),
        radial-gradient(ellipse at center, rgba(12, 47, 82, 0) 40%, rgba(12, 47, 82, 0.22) 100%);
    pointer-events: none;
}

/* Contenedor centrado contenido hero */
.jm-savigel-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.jm-savigel-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 0 1.5rem 0;
    max-width: 50rem;
}

/* TÍTULO: "Linea Savigel" — blanco puro con stroke gold suave + sombras 3 capas */
.jm-savigel-hero__title {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(2.1rem, 3.2vw + 1.6rem, 4.4rem);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: 0.012em;
    text-transform: none;
    text-wrap: balance;
    text-align: center;
    isolation: isolate;
    /* Sombras multicapa texto: resalta sobre fondo imagen variada */
    text-shadow:
        0 2px 0 rgba(12, 47, 82, 0.18),
        0 8px 22px rgba(12, 47, 82, 0.36),
        0 0 38px rgba(12, 47, 82, 0.30);
}

/* ================================================================
 *  🔥 LÍNEA INFERIOR LLAMATIVA "Linea Savigel"
 *  Patrón JM 3 elementos:
 *    (a) Barra HORIZONTAL GRADIENTE gold 4px · fade left/right
 *    (b) Halo glow gold atrás (box-shadow + filter blur)
 *    (c) Accent left VERTICAL mini 4px gold (barrita a la izquierda)
 * ================================================================ */
.jm-savigel-hero__divider {
    position: relative;
    width: min(14rem, 50%);
    height: 10px;
    display: block;
    isolation: isolate;
}
/* (a) Barra principal gold gradiente horizontal */
.jm-savigel-hero__divider-bar {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold-200, #ffe082) 14%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 86%,
        transparent 100%);
    z-index: 2;
}
/* (b) Halo / glow GOLD detrás (blur 10px · llamativo) */
.jm-savigel-hero__divider-glow {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
    z-index: 1;
    background: radial-gradient(ellipse at center,
        rgba(245, 197, 24, 0.62) 0%,
        rgba(245, 197, 24, 0.22) 42%,
        transparent 80%);
    filter: blur(6px);
    opacity: 0.85;
}
/* (c) Barra gold IZQUIERDA (accent vertical patrón JM) */
.jm-savigel-hero__divider-left {
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 4px;
    border-radius: 0 6px 6px 0;
    background-color: var(--jm-c-gold, #f5c518);
    z-index: 3;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.12),
        0 0 12px 0 rgba(245,197,24,0.55);
}
/* (d) Punto gold DERECHO (equilibra la barra izquierda · simetría) */
.jm-savigel-hero__divider::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--jm-c-gold, #f5c518);
    z-index: 3;
    box-shadow:
        0 0 0 3px rgba(255, 224, 130, 0.35),
        0 0 14px 0 rgba(245, 197, 24, 0.65);
}

/* ---------- Responsive breakpoints Hero Savigel ---------- */
@media (max-width: 1199px) {
    .jm-savigel-hero__title { font-size: clamp(1.95rem, 3.1vw + 1.45rem, 3.85rem); }
    .jm-savigel-hero__divider { width: min(13rem, 48%); }
}
@media (max-width: 991px) {
    .jm-savigel-hero,
    .jm-savigel-hero__inner { min-height: 66vh; min-height: 66dvh; }
    .jm-savigel-hero__title { font-size: clamp(1.7rem, 3.6vw + 1.3rem, 3.2rem); letter-spacing: 0.018em; }
    .jm-savigel-hero__content { gap: 1.25rem; max-width: 38rem; }
    .jm-savigel-hero__divider { width: min(11rem, 46%); height: 8px; }
    .jm-savigel-hero__divider-bar { height: 3.5px; }
}
@media (max-width: 639px) {
    .jm-savigel-hero,
    .jm-savigel-hero__inner { min-height: 60vh; min-height: 60dvh; }
    .jm-savigel-hero__title {
        font-size: clamp(1.5rem, 8.8vw + 1.15rem, 2.55rem);
        line-height: 1.1;
        letter-spacing: 0.02em;
    }
    .jm-savigel-hero__content { gap: 1.05rem; padding: 1.65rem 0 1.4rem 0; }
    .jm-savigel-hero__divider { width: 9rem; height: 8px; }
    .jm-savigel-hero__divider-bar { height: 3px; }
    .jm-savigel-hero__divider-glow { height: 15px; filter: blur(5px); }
    .jm-savigel-hero__divider-left { width: 3.5px; top: 18%; bottom: 18%; }
    .jm-savigel-hero__divider::after { width: 9px; height: 9px; }
}
@media (max-width: 380px) {
    .jm-savigel-hero__title { font-size: 1.4rem; letter-spacing: 0.025em; }
    .jm-savigel-hero__divider { width: 7.5rem; }
}

/* ---------- (2) SECCIÓN PRODUCTOS SAVIGEL · Grid 4 cols ---------- */
.jm-savigel-productos {
    position: relative;
    width: 100%;
    padding: 5.75rem 0 6.5rem 0;
    background-color: var(--jm-c-white, #ffffff);
    overflow: hidden;
}
.jm-savigel-productos__inner {
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.75rem;
}

/* Header sección: pill kicker + H2 + subtítulo */
.jm-savigel-productos__head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}
.jm-savigel-productos__head-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 10px 26px -10px rgba(15, 76, 129, 0.42),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    isolation: isolate;
}
.jm-savigel-productos__head-pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 10px 0 rgba(245, 197, 24, 0.35);
}
.jm-savigel-productos__head-pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.82rem, 0.38vw + 0.78rem, 1rem);
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
}
.jm-savigel-productos__head-title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-navy-900, #0c2f52);
    font-size: clamp(1.45rem, 1.25vw + 1.28rem, 2.15rem);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.008em;
    text-transform: none;
    text-wrap: balance;
    text-align: left;
}
.jm-savigel-productos__head-sub {
    width: 100%;
    max-width: 54rem;
    margin: 0;
    padding: 0;
    color: var(--jm-c-navy-600, #3a5f82);
    font-size: clamp(0.92rem, 0.3vw + 0.88rem, 1.05rem);
    line-height: 1.7;
    font-weight: 500;
}

/* ✅ Grid 2x2 · 2 ARRIBA + 2 ABAJO (TAMAÑO REDUCIDO · cards más pequeñas que user pidió) */
.jm-savigel-productos__grid {
    list-style: none;
    margin: 0 auto;           /* centrar el bloque respecto al inner */
    padding: 0;
    width: 100%;
    max-width: 860px;         /* ↓ 1040 → 860px (ancho total menor = cards proporcionalmente más chicas) */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 1.85rem 1.65rem;     /* ↓ gaps reducidos 2.25→1.85 */
    align-items: stretch;
    justify-items: stretch;
}

/* ================================================================
 *  🎯 REDISEÑO CARD SAVIGEL · v3 PREMIUM
 *  Problemas resueltos respecto a v1 (captura):
 *    ❌ Quita FONDO NAVY GRANDE EXTERIOR del <li>
 *    ❌ Quita MARCO GOLD PEQUEÑO DENTRO (superposición 2 marcos = se veía mal)
 *    ❌ Quita texto desalineado con bordes rotos
 *  Se sustituye POR UNA SOLA CARD COHESIVA:
 *    1 padding interior blanco, 1 único trazo gold exterior, 1 radius,
 *    1 imagen arriba con marco suave, 1 bloque NAVY abajo pill-like.
 * ================================================================ */

/* Contenedor LI: TRANSPARENTE, SIN padding, SIN fondo navy, SIN bordes
 * (así NO heredamos estilos de salud-belleza ni aparecen marcos superpuestos) */
.jm-savigel-card {
    width: 100%;
    display: block;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    animation: jm-savigel-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--jm-savigel-card-delay, 0s);
}
@keyframes jm-savigel-card-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* -------- WRAP CLICKEABLE: 1 SOLA CARD (TAMAÑO COMPACTO REDUCIDO) -------- */
.jm-savigel-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    /* ↓ Padding INTERIOR reducido 1.5rem → 1.15rem (24px → 18px) */
    padding: 1.15rem;
    margin: 0;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;

    /* ✅ ÚNICO BORDE GOLD VISIBLE EN TODA LA CARD */
    border: 2.5px solid var(--jm-c-gold, #f5c518);
    /* ✅ ÚNICO BORDER-RADIUS (reducido 22 → 19px) */
    border-radius: 19px;
    overflow: hidden;

    /* Fondo INTERNO BLANCO PURO (cubre todo el contenido) */
    background-color: var(--jm-c-white, #ffffff);

    /* ✅ SOMBRA EXTERIOR 6 capas JM (ligeramente reducida) */
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 2px 0 rgba(15, 76, 129, 0.06) inset,
        0 16px 34px -14px rgba(12, 47, 82, 0.26),
        0 5px 15px -5px rgba(12, 47, 82, 0.16),
        0 0 0 1px rgba(245, 197, 24, 0.22),
        0 0 14px -3px rgba(245, 197, 24, 0.24);

    transition:
        transform .34s cubic-bezier(.19,1,.22,1),
        box-shadow .34s cubic-bezier(.19,1,.22,1),
        border-color .28s ease;
    will-change: transform;
}
/* HOVER: elevación 6px (antes 8, reducido para tamaño compacto) */
.jm-savigel-card__wrap:hover,
.jm-savigel-card__wrap:focus-visible {
    transform: translateY(-6px);
    text-decoration: none;
    color: inherit;
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.95) inset,
        0 2px 0 rgba(15, 76, 129, 0.06) inset,
        0 26px 56px -16px rgba(12, 47, 82, 0.34),
        0 9px 22px -6px rgba(12, 47, 82, 0.22),
        0 0 0 2px rgba(255, 224, 130, 0.48),
        0 0 26px -3px rgba(245, 197, 24, 0.38),
        0 0 16px -1px rgba(245, 197, 24, 0.3);
}

/* (a) MEDIA PRODUCTO: 1:1 · marco gold 2px · radius 12px (reducido 14→12) */
.jm-savigel-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    isolation: isolate;
    border: 2px solid rgba(245, 197, 24, 0.55);
    border-radius: 12px;
    background-color: var(--jm-c-white, #ffffff);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.96) inset,
        0 -1px 0 rgba(12, 47, 82, 0.08) inset,
        0 8px 20px -8px rgba(12, 47, 82, 0.2);
    transition: filter .28s ease, border-color .28s ease, box-shadow .28s ease;
}
/* HOVER media: border gold más brillante */
.jm-savigel-card__wrap:hover .jm-savigel-card__media {
    border-color: var(--jm-c-gold, #f5c518);
    filter: saturate(1.06) contrast(1.03);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.98) inset,
        0 -1px 0 rgba(12, 47, 82, 0.09) inset,
        0 12px 26px -10px rgba(12, 47, 82, 0.26),
        0 0 16px -3px rgba(245, 197, 24, 0.28);
}
/* Barra gold IZQUIERDA: compacta (ajustada a padding 1.15rem) */
.jm-savigel-card__accent {
    position: absolute;
    left: 0.55rem;
    top: 10%;
    bottom: 10%;
    width: 4px;
    z-index: 2;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 8px 0 rgba(245, 197, 24, 0.4);
}
/* Imagen: hover scale 1.05 (antes 1.06) */
.jm-savigel-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    background-color: var(--jm-c-white, #fff);
    transform: scale(1);
    transition: transform .55s cubic-bezier(.19,1,.22,1),
                filter .34s ease;
    will-change: transform;
}
.jm-savigel-card__wrap:hover .jm-savigel-card__img {
    transform: scale(1.05);
    filter: saturate(1.07) contrast(1.01);
}

/* SEPARADOR · compacto (1.15 → 0.95rem) */
.jm-savigel-card__body {
    position: relative;
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding-top: 0.95rem;
    margin-top: 0.95rem;
    background: transparent;
}
.jm-savigel-card__body::before {
    content: '';
    position: absolute;
    left: 5%;
    right: 5%;
    top: 0;
    height: 1.3px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold-200, #ffe082) 18%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-200, #ffe082) 82%,
        transparent 100%);
    box-shadow: 0 0 6px 0 rgba(245, 197, 24, 0.32);
}
/* TÍTULO PILL NAVY · MÁS PEQUEÑO (padding 0.95→0.78rem, font 1.08→0.94rem, radius 11px) */
.jm-savigel-card__title {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.78rem 0.9rem 0.78rem 1.3rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(0.86rem, 0.35vw + 0.82rem, 0.94rem);  /* ↓ achicado texto */
    line-height: 1.32;
    font-weight: 800;
    letter-spacing: -0.005em;
    text-transform: none;
    text-wrap: balance;
    text-align: center;
    border: 2px solid rgba(245, 197, 24, 0.62);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.15) inset,
        0 2px 0 rgba(12, 47, 82, 0.24) inset,
        0 10px 22px -8px rgba(15, 76, 129, 0.42),
        0 0 12px -2px rgba(245, 197, 24, 0.24);
    transition:
        background-color .26s ease,
        color .26s ease,
        border-color .26s ease,
        box-shadow .26s ease,
        transform .26s ease;
}
/* Barra gold izquierda DENTRO del pill */
.jm-savigel-card__title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.1),
        0 0 8px 0 rgba(245,197,24, 0.32);
}
/* Hover TÍTULO: translateY 1.5px (antes 2px) */
.jm-savigel-card__wrap:hover .jm-savigel-card__title,
.jm-savigel-card__wrap:focus-visible .jm-savigel-card__title {
    transform: translateY(-1.5px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.17) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 13px 28px -8px rgba(15, 76, 129, 0.54),
        0 0 18px -2px rgba(245,197,24,0.36),
        0 0 0 1px rgba(15, 76, 129, 0.2);
}
/* Limpiamos el pseudo body::after que sobraba (antiguo intento barra) para cards compactas */
.jm-savigel-card__body::after {
    display: none;
}

/* ---------- Responsive breakpoints (JM estándar) ---------- */
@media (max-width: 1199px) {
    .jm-savigel-productos { padding: 4.75rem 0 5.5rem 0; }
    .jm-savigel-productos__inner { gap: 2.25rem; }
    .jm-savigel-productos__head-title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-savigel-productos__grid { max-width: 800px; gap: 1.65rem 1.5rem; }
    .jm-savigel-card__wrap { padding: 1.1rem; border-radius: 18px; }
    .jm-savigel-card__media { border-radius: 12px; }
    .jm-savigel-card__body { margin-top: 0.9rem; padding-top: 0.9rem; }
}
@media (max-width: 991px) {
    .jm-savigel-productos { padding: 4.25rem 0 5rem 0; }
    .jm-savigel-productos__inner { gap: 2rem; }
    .jm-savigel-productos__head-title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    /* MANTENEMOS 2 columnas también en tablet (usuario pidió 2+2) */
    .jm-savigel-productos__grid {
        max-width: 600px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem 1.45rem;
    }
    .jm-savigel-card__wrap { padding: 1.05rem; border-radius: 18px; }
    .jm-savigel-card__media { border-radius: 12px; }
    .jm-savigel-card__title { padding: 0.76rem 0.88rem 0.76rem 1.25rem; font-size: 0.92rem; border-radius: 11px; }
}
@media (max-width: 639px) {
    .jm-savigel-productos { padding: 3.5rem 0 4.25rem 0; }
    .jm-savigel-productos__inner { gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-savigel-productos__head { gap: 0.7rem; }
    .jm-savigel-productos__head-title {
        font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem);
        text-align: left;
    }
    /* Sólo en móvil pasamos a 1 columna stack vertical */
    .jm-savigel-productos__grid {
        max-width: 460px;
        margin: 0 auto;
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
    .jm-savigel-card__wrap { padding: 1.1rem; border-radius: 18px; border-width: 2.5px; }
    .jm-savigel-card__media { border-radius: 11px; }
    .jm-savigel-card__accent { left: 0.55rem; top: 10%; bottom: 10%; }
    .jm-savigel-card__body { margin-top: 0.92rem; padding-top: 0.92rem; }
    .jm-savigel-card__title { padding: 0.78rem 0.92rem 0.78rem 1.28rem; font-size: 0.95rem; border-radius: 11px; }
}

/* ==========================================================
 *   SECCIÓN ÚNICA · Grid cards empresas Salud y Belleza
 * ========================================================== */
.jm-salud-belleza-cards {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    background-color: var(--jm-c-white, #ffffff);
    overflow: hidden;
}

.jm-salud-belleza-cards__inner {
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.75rem;
}

/* Header sección: pill navy + H2 (igual Vitrina categorías) */
.jm-salud-belleza-cards__head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-salud-belleza-cards__head-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 10px 26px -10px rgba(15, 76, 129, 0.42),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    isolation: isolate;
}

.jm-salud-belleza-cards__head-pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 10px 0 rgba(245, 197, 24, 0.4);
}

.jm-salud-belleza-cards__head-pill-text {
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--jm-c-white, #ffffff);
}

.jm-salud-belleza-cards__head-title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-size: clamp(1.45rem, 1.55vw + 1.25rem, 2.15rem);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-align: left;
    text-transform: none;
    text-wrap: balance;
}

/* Grid 3 columnas × 2 filas = 5 cards (última fila 2 cards, se alinean izq) */
.jm-salud-belleza-cards__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 1.85rem 1.65rem;
    align-items: stretch;
    justify-items: stretch;
}

/* Cada item card grid */
.jm-salud-belleza-card {
    width: 100%;
    display: block;
    /* stagger delay 0.09s */
    animation: jm-sb-card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--jm-sb-card-delay, 0s);
}

@keyframes jm-sb-card-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Wrap <a> completo: toda la card clickeable placeholder # */
.jm-salud-belleza-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.85rem;
    padding: 0;
    margin: 0;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.jm-salud-belleza-card__wrap:hover,
.jm-salud-belleza-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    color: inherit;
}

/* Media · MISMA ALTURA FIJA para TODAS las cards + imagen COMPLETA sin recortes (object-fit:contain centrado). Fondo blanco elegante como "cojín" sobrante alrededor del banner. */
.jm-salud-belleza-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* ← MISMA ALTURA FIJA GARANTIZADA en todas las cards del grid */
    overflow: hidden;
    border-radius: 18px;
    /* Fondo elegante blanco crema (mejor que azul claro para banners con fondo blanco Savigel/ARspa etc.) */
    background-color: #ffffff;
    background-image:
        linear-gradient(135deg, #fffdf7 0%, #fff9ec 50%, #ffffff 100%);
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Borde gold JM 2px + glow suave */
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 16px 44px -20px rgba(12, 47, 82, 0.24),
        0 4px 16px -6px rgba(12, 47, 82, 0.15),
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 0 14px -2px rgba(245, 197, 24, 0.2);
    transition: border-radius 0.25s ease,
                box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.25s ease;
}

/* Acento gold izq gradiente 4px 8% top/bot */
.jm-salud-belleza-card__accent {
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 4px;
    z-index: 2;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.4);
}

/* Imagen · COMPLETA 100% dentro del contenedor (object-fit contain) + centrada → NUNCA se recorta. Mantiene ancho/alto automático y queda perfectamente enmarcada en el fondo crema de la caja. */
.jm-salud-belleza-card__img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    transform: scale(1);
    margin: auto;
    padding: 0.55rem; /* Padding interno alrededor del banner para que NO toque el borde gold */
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.32s ease;
    will-change: transform;
}

.jm-salud-belleza-card__wrap:hover .jm-salud-belleza-card__img {
    /* Sutil zoom sin desbordamiento, mantiene la imagen COMPLETA */
    transform: scale(1.02);
    filter: saturate(1.08) contrast(1.02);
}

/* ==========================================================
 *   MODIFICADOR: 2 últimas cards (Nagomi + Lunae) · imagen MÁS GRANDE
 *   Clase condicional: <li class="jm-salud-belleza-card jm-salud-belleza-card--lg">
 * ========================================================== */

/* (1) Padding reducido: sobrante alrededor de la imagen 0.55rem → 0.15rem (más espacio útil para la imagen) */
.jm-salud-belleza-card--lg .jm-salud-belleza-card__img {
    padding: 0.15rem;
    transform: scale(1.3);       /* ← +30% TAMAÑO extra en logo Nagomi y Lunae */
    transform-origin: center center;
}

/* (2) Hover en cards --lg: aumenta +34% sin desbordar la caja de aspect 4:3 */
.jm-salud-belleza-card--lg:hover a .jm-salud-belleza-card__img,
.jm-salud-belleza-card--lg a:hover .jm-salud-belleza-card__img,
.jm-salud-belleza-card--lg a:focus-visible .jm-salud-belleza-card__img {
    transform: scale(1.34);
    filter: saturate(1.09) contrast(1.04);
}

/* (3) Ajuste móvil ≤639px: escala más conservadora 1.18 / 1.22 para no sobresalir en pantallas pequeñas */
@media (max-width: 639px) {
    .jm-salud-belleza-card--lg .jm-salud-belleza-card__img {
        transform: scale(1.18);
        padding: 0.25rem;
    }
    .jm-salud-belleza-card--lg a:hover .jm-salud-belleza-card__img {
        transform: scale(1.22);
    }
}

.jm-salud-belleza-card__wrap:hover .jm-salud-belleza-card__media {
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 28px 66px -22px rgba(12, 47, 82, 0.3),
        0 8px 22px -6px rgba(12, 47, 82, 0.2),
        0 0 26px -4px rgba(245, 197, 24, 0.3),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 18px -2px rgba(245, 197, 24, 0.35);
}

/* CTA botón nombre empresa (decorativo, dentro del wrap <a>) */
.jm-salud-belleza-card__cta {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.jm-salud-belleza-card__btn {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.68rem 1.05rem 0.68rem 1.7rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    font-weight: 700;
    font-size: clamp(0.84rem, 0.32vw + 0.82rem, 0.96rem);
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-align: center;
    text-transform: none;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 8px 22px -10px rgba(15, 76, 129, 0.45),
        0 0 0 1px rgba(245, 197, 24, 0.3),
        0 0 12px -2px rgba(245, 197, 24, 0.18);
    isolation: isolate;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.25s ease,
                box-shadow 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease;
    will-change: transform;
}

.jm-salud-belleza-card__btn-accent {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 10px 0 rgba(245, 197, 24, 0.32);
}

.jm-salud-belleza-card__btn-label {
    width: 100%;
}

.jm-salud-belleza-card__wrap:hover .jm-salud-belleza-card__btn {
    transform: translateY(-2px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 12px 28px -10px rgba(15, 76, 129, 0.55),
        0 0 18px -4px rgba(245, 197, 24, 0.35),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
}

/* ==========================================================
 *   Responsive breakpoints 3 niveles (JM estándar)
 * ========================================================== */

@media (max-width: 1199px) {
    .jm-salud-belleza-cards { padding: 5rem 0 5.75rem 0; }
    .jm-salud-belleza-cards__inner { gap: 2.25rem; }
    .jm-salud-belleza-cards__head-title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-salud-belleza-cards__grid { gap: 1.5rem 1.35rem; }
    .jm-salud-belleza-card__media { border-radius: 16px; }
}

@media (max-width: 991px) {
    .jm-salud-belleza-cards { padding: 4.25rem 0 5rem 0; }
    .jm-salud-belleza-cards__inner { gap: 2rem; }
    .jm-salud-belleza-cards__head-title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    /* Grid pasa de 3 cols → 2 cols en tablet (5 cards = 3 filas) */
    .jm-salud-belleza-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
        gap: 1.35rem 1.25rem;
    }
    .jm-salud-belleza-card__media { border-radius: 15px; }
}

@media (max-width: 639px) {
    .jm-salud-belleza-cards { padding: 3.5rem 0 4.25rem 0; }
    .jm-salud-belleza-cards__inner { gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-salud-belleza-cards__head { gap: 0.7rem; }
    .jm-salud-belleza-cards__head-title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    /* Grid pasa 2 cols → 1 columna (stack vertical) en móvil (5 cards = 5 filas) */
    .jm-salud-belleza-cards__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 1.6rem;
    }
    .jm-salud-belleza-card__media { border-radius: 14px; }
    .jm-salud-belleza-card__accent { width: 4px; top: 10%; bottom: 10%; }
    .jm-salud-belleza-card__btn { padding: 0.6rem 0.9rem 0.6rem 1.45rem; font-size: 0.9rem; border-radius: 10px; }
}

/* ==========================================================
 *   SECCIÓN BIOGRAFÍA JOHN MEJÍA — portada JM (ANTES footer)
 *   Layout 2 cols desktop (foto izq + texto der)
 *   1 col stack responsive movil (foto arriba centrada)
 *   Colores JM: navy #0f4c81 + gold #f5c518
 * ========================================================== */

/* ---------------- 1. Contenedor general sección ---------------- */
.jm-restaurantes-main {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    background-color: var(--jm-c-white, #ffffff);
}

/* ==========================================================
 *   SECCIÓN ÚNICA · Grid cards empresas Restaurantes
 *   (igual en estilo a Salud y Belleza · 3×2 = 6 cards)
 * ========================================================== */
.jm-restaurantes-cards {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    background-color: var(--jm-c-white, #ffffff);
    overflow: hidden;
}

.jm-restaurantes-cards__inner {
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.75rem;
}

/* Header sección: pill navy + H2 (igual S&B / Vitrina) */
.jm-restaurantes-cards__head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-restaurantes-cards__head-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 10px 26px -10px rgba(15, 76, 129, 0.42),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    isolation: isolate;
}

.jm-restaurantes-cards__head-pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 10px 0 rgba(245, 197, 24, 0.4);
}

.jm-restaurantes-cards__head-pill-text {
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--jm-c-white, #ffffff);
}

.jm-restaurantes-cards__head-title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-size: clamp(1.45rem, 1.55vw + 1.25rem, 2.15rem);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-align: left;
    text-transform: none;
    text-wrap: balance;
}

/* Grid 3 columnas × 2 filas = 6 cards */
.jm-restaurantes-cards__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 1.85rem 1.65rem;
    align-items: stretch;
    justify-items: stretch;
}

/* Cada item card grid */
.jm-restaurantes-card {
    width: 100%;
    display: block;
    /* stagger delay 0.09s (igual S&B) */
    animation: jm-rst-card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--jm-rst-card-delay, 0s);
}

@keyframes jm-rst-card-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Wrap <a> completo: toda la card clickeable placeholder # */
.jm-restaurantes-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.85rem;
    padding: 0;
    margin: 0;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.jm-restaurantes-card__wrap:hover,
.jm-restaurantes-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    color: inherit;
}

/* Media · MISMA ALTURA FIJA 4:3 en TODAS las cards · imagen COMPLETA contain
 *   Fondo crema elegante igual S&B, borde gold 2px + glow suave.
 */
.jm-restaurantes-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 18px;
    background-color: #ffffff;
    background-image:
        linear-gradient(135deg, #fffdf7 0%, #fff9ec 50%, #ffffff 100%);
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 16px 44px -20px rgba(12, 47, 82, 0.24),
        0 4px 16px -6px rgba(12, 47, 82, 0.15),
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 0 14px -2px rgba(245, 197, 24, 0.2);
    transition: border-radius 0.25s ease,
                box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.25s ease;
}

/* Acento gold izq gradiente 4px 8% top/bot (patrón JM) */
.jm-restaurantes-card__accent {
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 4px;
    z-index: 2;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.4);
}

/* Imagen: completa dentro del contenedor (nunca se recorta). Padding alrededor. */
.jm-restaurantes-card__img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    transform: scale(1);
    margin: auto;
    padding: 0.55rem;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.32s ease;
    will-change: transform;
}

.jm-restaurantes-card__wrap:hover .jm-restaurantes-card__img {
    transform: scale(1.02);
    filter: saturate(1.08) contrast(1.02);
}

/* ==========================================================
 *   MODIFICADOR: 1ª card (Carmen Medellín/Cartagena, índice 0)
 *                Imagen GRANDE (tamaño medio equilibrado)
 *                Punto medio: NO tan pequeña 1.3 / NO exagerada 1.75
 * ========================================================== */

/* (0) MEDIA padding 0 para que la caja ofrezca máximo espacio útil */
.jm-restaurantes-card--lg .jm-restaurantes-card__media {
    padding: 0 !important;
}

/* (1) Imagen: tamaño EQUILIBRADO scale 1.5.
 *   Pequeño padding 0.12rem para que NO se corten los bordes decorativos
 *   (flores/loros de los lados del logo Carmen horizontal).
 *   Quitamos width/height 100% para NO deformar la proporción del logo.
 */
.jm-restaurantes-card--lg .jm-restaurantes-card__img {
    padding: 0.12rem !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: scale(1.5) !important;
    transform-origin: center center !important;
    transition: transform .5s cubic-bezier(.19,1,.22,1), filter .34s ease !important;
}

/* (2) HOVER tamaño controlado: scale 1.57 */
.jm-restaurantes-card--lg:hover a .jm-restaurantes-card__img,
.jm-restaurantes-card--lg a:hover .jm-restaurantes-card__img,
.jm-restaurantes-card--lg a:focus-visible .jm-restaurantes-card__img {
    transform: scale(1.57) !important;
    filter: saturate(1.09) contrast(1.04) !important;
}

/* (3) Móvil ≤639px: escala más conservadora, sin cortar bordes */
@media (max-width: 639px) {
    .jm-restaurantes-card--lg .jm-restaurantes-card__img {
        transform: scale(1.25) !important;
        padding: 0.2rem !important;
    }
    .jm-restaurantes-card--lg a:hover .jm-restaurantes-card__img {
        transform: scale(1.32) !important;
    }
}

.jm-restaurantes-card__wrap:hover .jm-restaurantes-card__media {
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 28px 66px -22px rgba(12, 47, 82, 0.3),
        0 8px 22px -6px rgba(12, 47, 82, 0.2),
        0 0 26px -4px rgba(245, 197, 24, 0.3),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 18px -2px rgba(245, 197, 24, 0.35);
}

/* CTA botón nombre empresa (decorativo, dentro del wrap <a>) */
.jm-restaurantes-card__cta {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.jm-restaurantes-card__btn {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.68rem 1.05rem 0.68rem 1.7rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    font-weight: 700;
    font-size: clamp(0.84rem, 0.32vw + 0.82rem, 0.96rem);
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-align: center;
    text-transform: none;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 8px 22px -10px rgba(15, 76, 129, 0.45),
        0 0 0 1px rgba(245, 197, 24, 0.3),
        0 0 12px -2px rgba(245, 197, 24, 0.18);
    isolation: isolate;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.25s ease,
                box-shadow 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease;
    will-change: transform;
}

.jm-restaurantes-card__btn-accent {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 10px 0 rgba(245, 197, 24, 0.32);
}

.jm-restaurantes-card__btn-label {
    width: 100%;
}

.jm-restaurantes-card__wrap:hover .jm-restaurantes-card__btn {
    transform: translateY(-2px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 12px 28px -10px rgba(15, 76, 129, 0.55),
        0 0 18px -4px rgba(245, 197, 24, 0.35),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
}

/* ==========================================================
 *   Responsive breakpoints JM estándar (igual S&B)
 *   Desktop: 3 cols · Tablet: 2 cols · Móvil: 1 col
 * ========================================================== */

@media (max-width: 1199px) {
    .jm-restaurantes-cards { padding: 5rem 0 5.75rem 0; }
    .jm-restaurantes-cards__inner { gap: 2.25rem; }
    .jm-restaurantes-cards__head-title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-restaurantes-cards__grid { gap: 1.5rem 1.35rem; }
    .jm-restaurantes-card__media { border-radius: 16px; }
}

@media (max-width: 991px) {
    .jm-restaurantes-cards { padding: 4.25rem 0 5rem 0; }
    .jm-restaurantes-cards__inner { gap: 2rem; }
    .jm-restaurantes-cards__head-title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    /* 3 cols → 2 cols (6 cards = 3 filas) */
    .jm-restaurantes-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
        gap: 1.35rem 1.25rem;
    }
    .jm-restaurantes-card__media { border-radius: 15px; }
}

@media (max-width: 639px) {
    .jm-restaurantes-cards { padding: 3.5rem 0 4.25rem 0; }
    .jm-restaurantes-cards__inner { gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-restaurantes-cards__head { gap: 0.7rem; }
    .jm-restaurantes-cards__head-title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    /* 2 cols → 1 columna stack vertical (6 cards = 6 filas) */
    .jm-restaurantes-cards__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 1.6rem;
    }
    .jm-restaurantes-card__media { border-radius: 14px; }
    .jm-restaurantes-card__accent { width: 4px; top: 10%; bottom: 10%; }
    .jm-restaurantes-card__btn { padding: 0.6rem 0.9rem 0.6rem 1.45rem; font-size: 0.9rem; border-radius: 10px; }
}

/* ==========================================================
 *   [ PÁGINA TURISMO (page-turismo.php) ]
 *   Igual en estructura/diseño que Restaurantes y Ferreterias.
 *   Grid 2 columnas cards → 2 cols tablet → 1 col móvil.
 *   BORDE GOLD + ACENTO IZQUIERDO PATRÓN JM / SOMBRAS 6 CAPAS /
 *   HOVER UNIFICADO translate + border gold claro + img zoom.
 *   (Colocado ANTES del bloque CONSTRUCTORAS)
 * ========================================================== */

/* ---------------- 0. Contenedor MAIN & SECTION ---------------- */

.jm-turismo-main {
    position: relative;
    width: 100%;
    min-height: 60vh;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-turismo-cards {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

.jm-turismo-cards__inner {
    position: relative;
    width: 100%;
    max-width: var(--jm-maxw-page, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    gap: 2.65rem;
}

/* ---------------- 1. HEADER SECCIÓN: pill navy + H2 ---------------- */

.jm-turismo-cards__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.05rem;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.jm-turismo-cards__head-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.65rem 0.55rem 1.95rem;
    background: linear-gradient(180deg, #0f4c81 0%, #0a3d68 100%);
    border: 2px solid #f0c419;
    border-radius: 999px;
    box-shadow:
        0 1px 0 rgba(255,255,255,.35) inset,
        0 1px 0 rgba(10,61,104,.1),
        0 10px 22px -12px rgba(15,76,129,.65),
        0 0 0 1px rgba(240,196,25,.35),
        0 0 18px rgba(240,196,25,.22);
    isolation: isolate;
    overflow: visible;
}

.jm-turismo-cards__head-pill-left {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 62%;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 14%, #f0c419 55%, #c99a12 100%);
    border-radius: 999px;
    box-shadow:
        0 0 6px rgba(240,196,25,.55),
        0 0 14px rgba(240,196,25,.22);
}

.jm-turismo-cards__head-pill-text {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(0.76rem, 0.62vw + 0.7rem, 0.92rem);
    letter-spacing: 0.095em;
    line-height: 1;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(10,61,104,.35);
}

.jm-turismo-cards__head-title {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 1.8vw + 1.25rem, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #0f4c81;
    margin: 0;
    padding: 0;
    text-align: center;
    text-wrap: balance;
    text-shadow:
        0 1px 0 rgba(255,255,255,.8),
        0 12px 28px -16px rgba(15,76,129,.45);
}

/* ---------------- 2. GRID · 2 CARDS CENTRADAS ---------------- */

.jm-turismo-cards__grid {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 1.8rem 1.65rem;
    align-items: stretch;
    z-index: 2;
}

.jm-turismo-card {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    transform: translateY(22px);
    animation: jm-turismo-card-in .58s cubic-bezier(.19,1,.22,1) forwards;
    animation-delay: calc(.15s + (var(--jm-trm-card-delay, 0s) * 1s));
    will-change: transform, opacity;
}

@keyframes jm-turismo-card-in {
    0%   { opacity: 0; transform: translateY(22px); }
    100% { opacity: 1; transform: translateY(0);    }
}

/* ---------------- 3. WRAP CLICKEABLE (media + CTA) ---------------- */

.jm-turismo-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    outline: none;
    transition: transform .42s cubic-bezier(.19,1,.22,1);
    z-index: 2;
}

.jm-turismo-card__wrap:hover,
.jm-turismo-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    outline: none;
}

/* ---------------- 4. MEDIA 4:3 imagen/logo ---------------- */

.jm-turismo-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0.55rem;
    margin: 0;
    background:
        linear-gradient(135deg, rgba(240,196,25,.09) 0%, rgba(240,196,25,0) 42%),
        linear-gradient(180deg, #fffdf7 0%, #fff9ec 56%, #ffffff 100%);
    background-color: #fff9ec;
    border: 2px solid #f0c419;
    border-radius: 17px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 1px 0 rgba(240,196,25,.45) inset,
        0 1px 0 rgba(255,255,255,.55),
        0 8px 19px -14px rgba(240,196,25,.38),
        0 18px 40px -26px rgba(15,76,129,.55),
        0 0 0 1px rgba(15,76,129,.05);
    transition: transform .42s cubic-bezier(.19,1,.22,1),
                border-color .3s ease,
                box-shadow .4s ease;
    will-change: transform;
    isolation: isolate;
}

.jm-turismo-card__accent {
    position: absolute;
    left: 4px;
    top: 8%;
    bottom: 8%;
    width: 4px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 12%, #f0c419 52%, #c99a12 100%);
    border-radius: 999px;
    box-shadow:
        0 0 5px rgba(240,196,25,.6),
        0 0 12px rgba(240,196,25,.25);
    z-index: 2;
    pointer-events: none;
}

.jm-turismo-card__img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    margin: 0 auto;
    display: block;
    padding: 0.55rem;
    z-index: 1;
    transition: transform .5s cubic-bezier(.19,1,.22,1),
                filter .34s ease;
    will-change: transform;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.jm-turismo-card__wrap:hover .jm-turismo-card__img {
    transform: scale(1.02);
    filter: saturate(1.08) contrast(1.02);
}

.jm-turismo-card__wrap:hover .jm-turismo-card__media {
    border-color: #ffe082;
    box-shadow:
        0 1px 0 rgba(255,255,255,.92) inset,
        0 1px 0 rgba(255,224,130,.65) inset,
        0 1px 0 rgba(255,255,255,.6),
        0 10px 22px -12px rgba(240,196,25,.48),
        0 24px 52px -28px rgba(15,76,129,.68),
        0 0 0 1px rgba(15,76,129,.06);
}

/* ---------------- 5. CTA BOTÓN NAVY / TEXTO NOMBRE ---------------- */

.jm-turismo-card__cta {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 2;
}

.jm-turismo-card__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.8rem 1.15rem 0.8rem 1.75rem;
    margin: 0 auto;
    background: linear-gradient(180deg, #0f4c81 0%, #0a3d68 100%);
    background-color: #0f4c81;
    border: 2px solid #f0c419;
    border-radius: 13px;
    color: #ffffff;
    text-align: center;
    text-wrap: balance;
    box-shadow:
        0 1px 0 rgba(255,255,255,.22) inset,
        0 1px 0 rgba(10,61,104,.3) inset,
        0 1px 0 rgba(255,255,255,.4),
        0 11px 24px -14px rgba(10,61,104,.7),
        0 22px 46px -28px rgba(15,76,129,.65),
        0 0 0 1px rgba(240,196,25,.32);
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    transition:
        transform .36s cubic-bezier(.19,1,.22,1),
        background-color .28s ease,
        border-color .28s ease,
        box-shadow .38s ease,
        color .28s ease;
    will-change: transform;
}

.jm-turismo-card__btn-accent {
    position: absolute;
    left: 7px;
    top: 18%;
    bottom: 18%;
    width: 4px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 16%, #f0c419 56%, #c99a12 100%);
    border-radius: 999px;
    box-shadow:
        0 0 6px rgba(240,196,25,.55),
        0 0 15px rgba(240,196,25,.28);
    pointer-events: none;
    z-index: 2;
}

.jm-turismo-card__btn-label {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(0.88rem, 0.92vw + 0.82rem, 1.08rem);
    line-height: 1.3;
    letter-spacing: 0.025em;
    color: #ffffff;
    text-align: center;
    text-transform: none;
    text-shadow: 0 1px 0 rgba(10,61,104,.35);
    z-index: 3;
}

/* Hover del botón por wrap */
.jm-turismo-card__wrap:hover .jm-turismo-card__btn {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #0a3d68 0%, #073054 100%);
    background-color: #073054;
    border-color: #ffe082;
    color: #ffe082;
    box-shadow:
        0 1px 0 rgba(255,255,255,.25) inset,
        0 1px 0 rgba(7,48,84,.35) inset,
        0 1px 0 rgba(255,255,255,.42),
        0 13px 28px -16px rgba(7,48,84,.78),
        0 26px 54px -32px rgba(15,76,129,.72),
        0 0 0 1px rgba(255,224,130,.45);
}

.jm-turismo-card__wrap:hover .jm-turismo-card__btn-label {
    color: #ffe082;
}

/* ---------------- 6. RESPONSIVE BREAKPOINTS ---------------- */

/* ≤1199 Desktop medio */
@media (max-width: 1199px) {
    .jm-turismo-cards { padding: 5rem 0 5.75rem 0; }
    .jm-turismo-cards__inner { gap: 2.25rem; }
    .jm-turismo-cards__head-title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-turismo-cards__grid { max-width: 880px; gap: 1.5rem 1.35rem; }
    .jm-turismo-card__media { border-radius: 16px; }
}

/* ≤991 Tablet */
@media (max-width: 991px) {
    .jm-turismo-cards { padding: 4.25rem 0 5rem 0; }
    .jm-turismo-cards__inner { gap: 2rem; }
    .jm-turismo-cards__head-title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-turismo-cards__grid {
        max-width: 720px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4rem 1.2rem;
    }
    .jm-turismo-card__media { border-radius: 15px; }
}

/* ≤639 Móvil */
@media (max-width: 639px) {
    .jm-turismo-cards { padding: 3.5rem 0 4.25rem 0; }
    .jm-turismo-cards__inner { gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-turismo-cards__head { gap: 0.7rem; }
    .jm-turismo-cards__head-title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-turismo-cards__grid {
        max-width: 520px;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 1.6rem;
    }
    .jm-turismo-card__media { border-radius: 14px; }
    .jm-turismo-card__accent { width: 4px; top: 10%; bottom: 10%; }
    .jm-turismo-card__btn { padding: 0.6rem 0.9rem 0.6rem 1.45rem; font-size: 0.9rem; border-radius: 10px; }
}

/* ==========================================================
 *   [ PÁGINA CONSTRUCTORAS (page-constructoras.php) ]
 *   Igual en estructura/diseño que Restaurantes y Fitness.
 *   Grid 3 columnas cards → 2 cols tablet → 1 col móvil.
 *   BORDE GOLD + ACENTO IZQUIERDO PATRÓN JM / SOMBRAS 6 CAPAS /
 *   HOVER UNIFICADO translate + border gold claro + img zoom.
 *   (Colocado ANTES del bloque DROGUERIAS)
 * ========================================================== */

/* ---------------- 0. Contenedor MAIN & SECTION ---------------- */

.jm-constructoras-main {
    position: relative;
    width: 100%;
    min-height: 60vh;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-constructoras-cards {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

.jm-constructoras-cards__inner {
    position: relative;
    width: 100%;
    max-width: var(--jm-maxw-page, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    gap: 2.65rem;
}

/* ---------------- 1. HEADER SECCIÓN: pill navy + H2 ---------------- */

.jm-constructoras-cards__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.05rem;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.jm-constructoras-cards__head-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.65rem 0.55rem 1.95rem;
    background: linear-gradient(180deg, #0f4c81 0%, #0a3d68 100%);
    border: 2px solid #f0c419;
    border-radius: 999px;
    box-shadow:
        0 1px 0 rgba(255,255,255,.35) inset,
        0 1px 0 rgba(10,61,104,.1),
        0 10px 22px -12px rgba(15,76,129,.65),
        0 0 0 1px rgba(240,196,25,.35),
        0 0 18px rgba(240,196,25,.22);
    isolation: isolate;
    overflow: visible;
}

.jm-constructoras-cards__head-pill-left {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 62%;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 14%, #f0c419 55%, #c99a12 100%);
    border-radius: 999px;
    box-shadow:
        0 0 6px rgba(240,196,25,.55),
        0 0 14px rgba(240,196,25,.22);
}

.jm-constructoras-cards__head-pill-text {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(0.76rem, 0.62vw + 0.7rem, 0.92rem);
    letter-spacing: 0.095em;
    line-height: 1;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(10,61,104,.35);
}

.jm-constructoras-cards__head-title {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 1.8vw + 1.25rem, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #0f4c81;
    margin: 0;
    padding: 0;
    text-align: center;
    text-wrap: balance;
    text-shadow:
        0 1px 0 rgba(255,255,255,.8),
        0 12px 28px -16px rgba(15,76,129,.45);
}

/* ---------------- 2. GRID CARDS 3x1 ---------------- */

.jm-constructoras-cards__grid {
    position: relative;
    width: 100%;
    max-width: var(--jm-maxw-page, 1320px);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 1.8rem 1.65rem;
    align-items: stretch;
    z-index: 2;
}

.jm-constructora-card {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    transform: translateY(22px);
    animation: jm-constructora-card-in .58s cubic-bezier(.19,1,.22,1) forwards;
    animation-delay: calc(.15s + (var(--jm-cnr-card-delay, 0s) * 1s));
    will-change: transform, opacity;
}

@keyframes jm-constructora-card-in {
    0%   { opacity: 0; transform: translateY(22px); }
    100% { opacity: 1; transform: translateY(0);    }
}

/* ---------------- 3. WRAP CLICKEABLE (media + CTA) ---------------- */

.jm-constructora-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    outline: none;
    transition: transform .42s cubic-bezier(.19,1,.22,1);
    z-index: 2;
}

.jm-constructora-card__wrap:hover,
.jm-constructora-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    outline: none;
}

/* ---------------- 4. MEDIA 4:3 imagen/logo ---------------- */

.jm-constructora-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0.55rem;
    margin: 0;
    background:
        linear-gradient(135deg, rgba(240,196,25,.09) 0%, rgba(240,196,25,0) 42%),
        linear-gradient(180deg, #fffdf7 0%, #fff9ec 56%, #ffffff 100%);
    background-color: #fff9ec;
    border: 2px solid #f0c419;
    border-radius: 17px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 1px 0 rgba(240,196,25,.45) inset,
        0 1px 0 rgba(255,255,255,.55),
        0 8px 19px -14px rgba(240,196,25,.38),
        0 18px 40px -26px rgba(15,76,129,.55),
        0 0 0 1px rgba(15,76,129,.05);
    transition: transform .42s cubic-bezier(.19,1,.22,1),
                border-color .3s ease,
                box-shadow .4s ease;
    will-change: transform;
    isolation: isolate;
}

.jm-constructora-card__accent {
    position: absolute;
    left: 4px;
    top: 8%;
    bottom: 8%;
    width: 4px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 12%, #f0c419 52%, #c99a12 100%);
    border-radius: 999px;
    box-shadow:
        0 0 5px rgba(240,196,25,.6),
        0 0 12px rgba(240,196,25,.25);
    z-index: 2;
    pointer-events: none;
}

.jm-constructora-card__img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    margin: 0 auto;
    display: block;
    padding: 0.55rem;
    z-index: 1;
    transition: transform .5s cubic-bezier(.19,1,.22,1),
                filter .34s ease;
    will-change: transform;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.jm-constructora-card__wrap:hover .jm-constructora-card__img {
    transform: scale(1.02);
    filter: saturate(1.08) contrast(1.02);
}

.jm-constructora-card__wrap:hover .jm-constructora-card__media {
    border-color: #ffe082;
    box-shadow:
        0 1px 0 rgba(255,255,255,.92) inset,
        0 1px 0 rgba(255,224,130,.65) inset,
        0 1px 0 rgba(255,255,255,.6),
        0 10px 22px -12px rgba(240,196,25,.48),
        0 24px 52px -28px rgba(15,76,129,.68),
        0 0 0 1px rgba(15,76,129,.06);
}

/* ---------------- 5. CTA BOTÓN NAVY / TEXTO NOMBRE ---------------- */

.jm-constructora-card__cta {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 2;
}

.jm-constructora-card__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.8rem 1.15rem 0.8rem 1.75rem;
    margin: 0 auto;
    background: linear-gradient(180deg, #0f4c81 0%, #0a3d68 100%);
    background-color: #0f4c81;
    border: 2px solid #f0c419;
    border-radius: 13px;
    color: #ffffff;
    text-align: center;
    text-wrap: balance;
    box-shadow:
        0 1px 0 rgba(255,255,255,.22) inset,
        0 1px 0 rgba(10,61,104,.3) inset,
        0 1px 0 rgba(255,255,255,.4),
        0 11px 24px -14px rgba(10,61,104,.7),
        0 22px 46px -28px rgba(15,76,129,.65),
        0 0 0 1px rgba(240,196,25,.32);
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    transition:
        transform .36s cubic-bezier(.19,1,.22,1),
        background-color .28s ease,
        border-color .28s ease,
        box-shadow .38s ease,
        color .28s ease;
    will-change: transform;
}

.jm-constructora-card__btn-accent {
    position: absolute;
    left: 7px;
    top: 18%;
    bottom: 18%;
    width: 4px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 16%, #f0c419 56%, #c99a12 100%);
    border-radius: 999px;
    box-shadow:
        0 0 6px rgba(240,196,25,.55),
        0 0 15px rgba(240,196,25,.28);
    pointer-events: none;
    z-index: 2;
}

.jm-constructora-card__btn-label {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(0.88rem, 0.92vw + 0.82rem, 1.08rem);
    line-height: 1.3;
    letter-spacing: 0.025em;
    color: #ffffff;
    text-align: center;
    text-transform: none;
    text-shadow: 0 1px 0 rgba(10,61,104,.35);
    z-index: 3;
}

/* Hover del botón por wrap */
.jm-constructora-card__wrap:hover .jm-constructora-card__btn {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #0a3d68 0%, #073054 100%);
    background-color: #073054;
    border-color: #ffe082;
    color: #ffe082;
    box-shadow:
        0 1px 0 rgba(255,255,255,.25) inset,
        0 1px 0 rgba(7,48,84,.35) inset,
        0 1px 0 rgba(255,255,255,.42),
        0 13px 28px -16px rgba(7,48,84,.78),
        0 26px 54px -32px rgba(15,76,129,.72),
        0 0 0 1px rgba(255,224,130,.45);
}

.jm-constructora-card__wrap:hover .jm-constructora-card__btn-label {
    color: #ffe082;
}

/* ---------------- 6. RESPONSIVE BREAKPOINTS ---------------- */

/* ≤1199 Desktop medio */
@media (max-width: 1199px) {
    .jm-constructoras-cards { padding: 5rem 0 5.75rem 0; }
    .jm-constructoras-cards__inner { gap: 2.25rem; }
    .jm-constructoras-cards__head-title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-constructoras-cards__grid { gap: 1.5rem 1.35rem; }
    .jm-constructora-card__media { border-radius: 16px; }
}

/* ≤991 Tablet → 2 cols */
@media (max-width: 991px) {
    .jm-constructoras-cards { padding: 4.25rem 0 5rem 0; }
    .jm-constructoras-cards__inner { gap: 2rem; }
    .jm-constructoras-cards__head-title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-constructoras-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4rem 1.2rem;
    }
    .jm-constructora-card__media { border-radius: 15px; }
}

/* ≤639 Móvil → 1 col */
@media (max-width: 639px) {
    .jm-constructoras-cards { padding: 3.5rem 0 4.25rem 0; }
    .jm-constructoras-cards__inner { gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-constructoras-cards__head { gap: 0.7rem; }
    .jm-constructoras-cards__head-title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-constructoras-cards__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 1.6rem;
    }
    .jm-constructora-card__media { border-radius: 14px; }
    .jm-constructora-card__accent { width: 4px; top: 10%; bottom: 10%; }
    .jm-constructora-card__btn { padding: 0.6rem 0.9rem 0.6rem 1.45rem; font-size: 0.9rem; border-radius: 10px; }
}

/* ==========================================================
 *   [ PÁGINA DROGUERIAS (page-droguerias.php) ]
 *   Igual en estructura/diseño que Restaurantes y Salud y Belleza.
 *   ÚNICA card (1 columna centrada) en desktop/tablet.
 *   BORDE GOLD + ACENTO IZQUIERDO PATRÓN JM / SOMBRAS 6 CAPAS /
 *   HOVER UNIFICADO translate + border gold claro + img zoom.
 *   (Colocado ANTES del bloque FITNESS)
 * ========================================================== */

/* ---------------- 0. Contenedor MAIN & SECTION ---------------- */

.jm-droguerias-main {
    position: relative;
    width: 100%;
    min-height: 60vh;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-droguerias-cards {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

.jm-droguerias-cards__inner {
    position: relative;
    width: 100%;
    max-width: var(--jm-maxw-page, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    gap: 2.65rem;
}

/* ---------------- 1. HEADER SECCIÓN: pill navy + H2 ---------------- */

.jm-droguerias-cards__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.05rem;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.jm-droguerias-cards__head-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.65rem 0.55rem 1.95rem;
    background: linear-gradient(180deg, #0f4c81 0%, #0a3d68 100%);
    border: 2px solid #f0c419;
    border-radius: 999px;
    box-shadow:
        0 1px 0 rgba(255,255,255,.35) inset,
        0 1px 0 rgba(10,61,104,.1),
        0 10px 22px -12px rgba(15,76,129,.65),
        0 0 0 1px rgba(240,196,25,.35),
        0 0 18px rgba(240,196,25,.22);
    isolation: isolate;
    overflow: visible;
}

.jm-droguerias-cards__head-pill-left {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 62%;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 14%, #f0c419 55%, #c99a12 100%);
    border-radius: 999px;
    box-shadow:
        0 0 6px rgba(240,196,25,.55),
        0 0 14px rgba(240,196,25,.22);
}

.jm-droguerias-cards__head-pill-text {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(0.76rem, 0.62vw + 0.7rem, 0.92rem);
    letter-spacing: 0.095em;
    line-height: 1;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(10,61,104,.35);
}

.jm-droguerias-cards__head-title {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 1.8vw + 1.25rem, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #0f4c81;
    margin: 0;
    padding: 0;
    text-align: center;
    text-wrap: balance;
    text-shadow:
        0 1px 0 rgba(255,255,255,.8),
        0 12px 28px -16px rgba(15,76,129,.45);
}

/* ---------------- 2. GRID · 1 SOLA CARD CENTRADA ---------------- */

.jm-droguerias-cards__grid {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 0;
    align-items: stretch;
    z-index: 2;
}

.jm-drogueria-card {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    transform: translateY(22px);
    animation: jm-drogueria-card-in .58s cubic-bezier(.19,1,.22,1) forwards;
    animation-delay: calc(.15s + (var(--jm-drg-card-delay, 0s) * 1s));
    will-change: transform, opacity;
}

@keyframes jm-drogueria-card-in {
    0%   { opacity: 0; transform: translateY(22px); }
    100% { opacity: 1; transform: translateY(0);    }
}

/* ---------------- 3. WRAP CLICKEABLE (media + CTA) ---------------- */

.jm-drogueria-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    outline: none;
    transition: transform .42s cubic-bezier(.19,1,.22,1);
    z-index: 2;
}

.jm-drogueria-card__wrap:hover,
.jm-drogueria-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    outline: none;
}

/* ---------------- 4. MEDIA 4:3 imagen/logo ---------------- */

.jm-drogueria-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0.55rem;
    margin: 0;
    background:
        linear-gradient(135deg, rgba(240,196,25,.09) 0%, rgba(240,196,25,0) 42%),
        linear-gradient(180deg, #fffdf7 0%, #fff9ec 56%, #ffffff 100%);
    background-color: #fff9ec;
    border: 2px solid #f0c419;
    border-radius: 17px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 1px 0 rgba(240,196,25,.45) inset,
        0 1px 0 rgba(255,255,255,.55),
        0 8px 19px -14px rgba(240,196,25,.38),
        0 18px 40px -26px rgba(15,76,129,.55),
        0 0 0 1px rgba(15,76,129,.05);
    transition: transform .42s cubic-bezier(.19,1,.22,1),
                border-color .3s ease,
                box-shadow .4s ease;
    will-change: transform;
    isolation: isolate;
}

.jm-drogueria-card__accent {
    position: absolute;
    left: 4px;
    top: 8%;
    bottom: 8%;
    width: 4px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 12%, #f0c419 52%, #c99a12 100%);
    border-radius: 999px;
    box-shadow:
        0 0 5px rgba(240,196,25,.6),
        0 0 12px rgba(240,196,25,.25);
    z-index: 2;
    pointer-events: none;
}

.jm-drogueria-card__img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    margin: 0 auto;
    display: block;
    padding: 0.55rem;
    z-index: 1;
    transition: transform .5s cubic-bezier(.19,1,.22,1),
                filter .34s ease;
    will-change: transform;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.jm-drogueria-card__wrap:hover .jm-drogueria-card__img {
    transform: scale(1.02);
    filter: saturate(1.08) contrast(1.02);
}

.jm-drogueria-card__wrap:hover .jm-drogueria-card__media {
    border-color: #ffe082;
    box-shadow:
        0 1px 0 rgba(255,255,255,.92) inset,
        0 1px 0 rgba(255,224,130,.65) inset,
        0 1px 0 rgba(255,255,255,.6),
        0 10px 22px -12px rgba(240,196,25,.48),
        0 24px 52px -28px rgba(15,76,129,.68),
        0 0 0 1px rgba(15,76,129,.06);
}

/* ---------------- 5. CTA BOTÓN NAVY / TEXTO NOMBRE ---------------- */

.jm-drogueria-card__cta {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 2;
}

.jm-drogueria-card__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.8rem 1.15rem 0.8rem 1.75rem;
    margin: 0 auto;
    background: linear-gradient(180deg, #0f4c81 0%, #0a3d68 100%);
    background-color: #0f4c81;
    border: 2px solid #f0c419;
    border-radius: 13px;
    color: #ffffff;
    text-align: center;
    text-wrap: balance;
    box-shadow:
        0 1px 0 rgba(255,255,255,.22) inset,
        0 1px 0 rgba(10,61,104,.3) inset,
        0 1px 0 rgba(255,255,255,.4),
        0 11px 24px -14px rgba(10,61,104,.7),
        0 22px 46px -28px rgba(15,76,129,.65),
        0 0 0 1px rgba(240,196,25,.32);
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    transition:
        transform .36s cubic-bezier(.19,1,.22,1),
        background-color .28s ease,
        border-color .28s ease,
        box-shadow .38s ease,
        color .28s ease;
    will-change: transform;
}

.jm-drogueria-card__btn-accent {
    position: absolute;
    left: 7px;
    top: 18%;
    bottom: 18%;
    width: 4px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 16%, #f0c419 56%, #c99a12 100%);
    border-radius: 999px;
    box-shadow:
        0 0 6px rgba(240,196,25,.55),
        0 0 15px rgba(240,196,25,.28);
    pointer-events: none;
    z-index: 2;
}

.jm-drogueria-card__btn-label {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(0.88rem, 0.92vw + 0.82rem, 1.08rem);
    line-height: 1.3;
    letter-spacing: 0.025em;
    color: #ffffff;
    text-align: center;
    text-transform: none;
    text-shadow: 0 1px 0 rgba(10,61,104,.35);
    z-index: 3;
}

/* Hover del botón por wrap */
.jm-drogueria-card__wrap:hover .jm-drogueria-card__btn {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #0a3d68 0%, #073054 100%);
    background-color: #073054;
    border-color: #ffe082;
    color: #ffe082;
    box-shadow:
        0 1px 0 rgba(255,255,255,.25) inset,
        0 1px 0 rgba(7,48,84,.35) inset,
        0 1px 0 rgba(255,255,255,.42),
        0 13px 28px -16px rgba(7,48,84,.78),
        0 26px 54px -32px rgba(15,76,129,.72),
        0 0 0 1px rgba(255,224,130,.45);
}

.jm-drogueria-card__wrap:hover .jm-drogueria-card__btn-label {
    color: #ffe082;
}

/* ---------------- 6. RESPONSIVE BREAKPOINTS ---------------- */

/* ≤1199 Desktop medio */
@media (max-width: 1199px) {
    .jm-droguerias-cards { padding: 5rem 0 5.75rem 0; }
    .jm-droguerias-cards__inner { gap: 2.25rem; }
    .jm-droguerias-cards__head-title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-droguerias-cards__grid { max-width: 640px; }
    .jm-drogueria-card__media { border-radius: 16px; }
}

/* ≤991 Tablet */
@media (max-width: 991px) {
    .jm-droguerias-cards { padding: 4.25rem 0 5rem 0; }
    .jm-droguerias-cards__inner { gap: 2rem; }
    .jm-droguerias-cards__head-title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-droguerias-cards__grid {
        max-width: 560px;
        grid-template-columns: 1fr;
        gap: 0;
    }
    .jm-drogueria-card__media { border-radius: 15px; }
}

/* ≤639 Móvil */
@media (max-width: 639px) {
    .jm-droguerias-cards { padding: 3.5rem 0 4.25rem 0; }
    .jm-droguerias-cards__inner { gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-droguerias-cards__head { gap: 0.7rem; }
    .jm-droguerias-cards__head-title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-droguerias-cards__grid {
        max-width: 100%;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 0;
    }
    .jm-drogueria-card__media { border-radius: 14px; }
    .jm-drogueria-card__accent { width: 4px; top: 10%; bottom: 10%; }
    .jm-drogueria-card__btn { padding: 0.6rem 0.9rem 0.6rem 1.45rem; font-size: 0.9rem; border-radius: 10px; }
}

/* ==========================================================
 *   [ PÁGINA FITNESS (page-fitness.php) ]
 *   Igual en estructura/diseño que Restaurantes y Salud y Belleza.
 *   Grid 3 columnas cards → 2 cols tablet → 1 col móvil.
 *   BORDE GOLD + ACENTO IZQUIERDO PATRÓN JM / SOMBRAS 6 CAPAS /
 *   HOVER UNIFICADO translate + border gold claro + img zoom.
 *   (Colocado ANTES del bloque FERRETERIAS)
 * ========================================================== */

/* ---------------- 0. Contenedor MAIN & SECTION ---------------- */

.jm-fitness-main {
    position: relative;
    width: 100%;
    min-height: 60vh;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-fitness-cards {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

.jm-fitness-cards__inner {
    position: relative;
    width: 100%;
    max-width: var(--jm-maxw-page, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    gap: 2.65rem;
}

/* ---------------- 1. HEADER SECCIÓN: pill navy + H2 ---------------- */

.jm-fitness-cards__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.05rem;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.jm-fitness-cards__head-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.65rem 0.55rem 1.95rem;
    background: linear-gradient(180deg, #0f4c81 0%, #0a3d68 100%);
    border: 2px solid #f0c419;
    border-radius: 999px;
    box-shadow:
        0 1px 0 rgba(255,255,255,.35) inset,
        0 1px 0 rgba(10,61,104,.1),
        0 10px 22px -12px rgba(15,76,129,.65),
        0 0 0 1px rgba(240,196,25,.35),
        0 0 18px rgba(240,196,25,.22);
    isolation: isolate;
    overflow: visible;
}

.jm-fitness-cards__head-pill-left {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 62%;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 14%, #f0c419 55%, #c99a12 100%);
    border-radius: 999px;
    box-shadow:
        0 0 6px rgba(240,196,25,.55),
        0 0 14px rgba(240,196,25,.22);
}

.jm-fitness-cards__head-pill-text {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(0.76rem, 0.62vw + 0.7rem, 0.92rem);
    letter-spacing: 0.095em;
    line-height: 1;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(10,61,104,.35);
}

.jm-fitness-cards__head-title {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 1.8vw + 1.25rem, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #0f4c81;
    margin: 0;
    padding: 0;
    text-align: center;
    text-wrap: balance;
    text-shadow:
        0 1px 0 rgba(255,255,255,.8),
        0 12px 28px -16px rgba(15,76,129,.45);
}

/* ---------------- 2. GRID CARDS 3x1 ---------------- */

.jm-fitness-cards__grid {
    position: relative;
    width: 100%;
    max-width: var(--jm-maxw-page, 1320px);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 1.8rem 1.65rem;
    align-items: stretch;
    z-index: 2;
}

.jm-fitness-card {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    transform: translateY(22px);
    animation: jm-fitness-card-in .58s cubic-bezier(.19,1,.22,1) forwards;
    animation-delay: calc(.15s + (var(--jm-fit-card-delay, 0s) * 1s));
    will-change: transform, opacity;
}

@keyframes jm-fitness-card-in {
    0%   { opacity: 0; transform: translateY(22px); }
    100% { opacity: 1; transform: translateY(0);    }
}

/* ---------------- 3. WRAP CLICKEABLE (media + CTA) ---------------- */

.jm-fitness-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    outline: none;
    transition: transform .42s cubic-bezier(.19,1,.22,1);
    z-index: 2;
}

.jm-fitness-card__wrap:hover,
.jm-fitness-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    outline: none;
}

/* ---------------- 4. MEDIA 4:3 imagen/logo ---------------- */

.jm-fitness-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0.55rem;
    margin: 0;
    background:
        linear-gradient(135deg, rgba(240,196,25,.09) 0%, rgba(240,196,25,0) 42%),
        linear-gradient(180deg, #fffdf7 0%, #fff9ec 56%, #ffffff 100%);
    background-color: #fff9ec;
    border: 2px solid #f0c419;
    border-radius: 17px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 1px 0 rgba(240,196,25,.45) inset,
        0 1px 0 rgba(255,255,255,.55),
        0 8px 19px -14px rgba(240,196,25,.38),
        0 18px 40px -26px rgba(15,76,129,.55),
        0 0 0 1px rgba(15,76,129,.05);
    transition: transform .42s cubic-bezier(.19,1,.22,1),
                border-color .3s ease,
                box-shadow .4s ease;
    will-change: transform;
    isolation: isolate;
}

.jm-fitness-card__accent {
    position: absolute;
    left: 4px;
    top: 8%;
    bottom: 8%;
    width: 4px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 12%, #f0c419 52%, #c99a12 100%);
    border-radius: 999px;
    box-shadow:
        0 0 5px rgba(240,196,25,.6),
        0 0 12px rgba(240,196,25,.25);
    z-index: 2;
    pointer-events: none;
}

.jm-fitness-card__img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    margin: 0 auto;
    display: block;
    padding: 0.55rem;
    z-index: 1;
    transition: transform .5s cubic-bezier(.19,1,.22,1),
                filter .34s ease;
    will-change: transform;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.jm-fitness-card__wrap:hover .jm-fitness-card__img {
    transform: scale(1.02);
    filter: saturate(1.08) contrast(1.02);
}

.jm-fitness-card__wrap:hover .jm-fitness-card__media {
    border-color: #ffe082;
    box-shadow:
        0 1px 0 rgba(255,255,255,.92) inset,
        0 1px 0 rgba(255,224,130,.65) inset,
        0 1px 0 rgba(255,255,255,.6),
        0 10px 22px -12px rgba(240,196,25,.48),
        0 24px 52px -28px rgba(15,76,129,.68),
        0 0 0 1px rgba(15,76,129,.06);
}

/* ---------------- 5. CTA BOTÓN NAVY / TEXTO NOMBRE ---------------- */

.jm-fitness-card__cta {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 2;
}

.jm-fitness-card__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.8rem 1.15rem 0.8rem 1.75rem;
    margin: 0 auto;
    background: linear-gradient(180deg, #0f4c81 0%, #0a3d68 100%);
    background-color: #0f4c81;
    border: 2px solid #f0c419;
    border-radius: 13px;
    color: #ffffff;
    text-align: center;
    text-wrap: balance;
    box-shadow:
        0 1px 0 rgba(255,255,255,.22) inset,
        0 1px 0 rgba(10,61,104,.3) inset,
        0 1px 0 rgba(255,255,255,.4),
        0 11px 24px -14px rgba(10,61,104,.7),
        0 22px 46px -28px rgba(15,76,129,.65),
        0 0 0 1px rgba(240,196,25,.32);
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    transition:
        transform .36s cubic-bezier(.19,1,.22,1),
        background-color .28s ease,
        border-color .28s ease,
        box-shadow .38s ease,
        color .28s ease;
    will-change: transform;
}

.jm-fitness-card__btn-accent {
    position: absolute;
    left: 7px;
    top: 18%;
    bottom: 18%;
    width: 4px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 16%, #f0c419 56%, #c99a12 100%);
    border-radius: 999px;
    box-shadow:
        0 0 6px rgba(240,196,25,.55),
        0 0 15px rgba(240,196,25,.28);
    pointer-events: none;
    z-index: 2;
}

.jm-fitness-card__btn-label {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(0.88rem, 0.92vw + 0.82rem, 1.08rem);
    line-height: 1.3;
    letter-spacing: 0.025em;
    color: #ffffff;
    text-align: center;
    text-transform: none;
    text-shadow: 0 1px 0 rgba(10,61,104,.35);
    z-index: 3;
}

/* Hover del botón por wrap */
.jm-fitness-card__wrap:hover .jm-fitness-card__btn {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #0a3d68 0%, #073054 100%);
    background-color: #073054;
    border-color: #ffe082;
    color: #ffe082;
    box-shadow:
        0 1px 0 rgba(255,255,255,.25) inset,
        0 1px 0 rgba(7,48,84,.35) inset,
        0 1px 0 rgba(255,255,255,.42),
        0 13px 28px -16px rgba(7,48,84,.78),
        0 26px 54px -32px rgba(15,76,129,.72),
        0 0 0 1px rgba(255,224,130,.45);
}

.jm-fitness-card__wrap:hover .jm-fitness-card__btn-label {
    color: #ffe082;
}

/* ---------------- 6. RESPONSIVE BREAKPOINTS ---------------- */

/* ≤1199 Desktop medio */
@media (max-width: 1199px) {
    .jm-fitness-cards { padding: 5rem 0 5.75rem 0; }
    .jm-fitness-cards__inner { gap: 2.25rem; }
    .jm-fitness-cards__head-title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-fitness-cards__grid { gap: 1.5rem 1.35rem; }
    .jm-fitness-card__media { border-radius: 16px; }
}

/* ≤991 Tablet → 2 cols */
@media (max-width: 991px) {
    .jm-fitness-cards { padding: 4.25rem 0 5rem 0; }
    .jm-fitness-cards__inner { gap: 2rem; }
    .jm-fitness-cards__head-title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-fitness-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4rem 1.2rem;
    }
    .jm-fitness-card__media { border-radius: 15px; }
}

/* ≤639 Móvil → 1 col */
@media (max-width: 639px) {
    .jm-fitness-cards { padding: 3.5rem 0 4.25rem 0; }
    .jm-fitness-cards__inner { gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-fitness-cards__head { gap: 0.7rem; }
    .jm-fitness-cards__head-title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-fitness-cards__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 1.6rem;
    }
    .jm-fitness-card__media { border-radius: 14px; }
    .jm-fitness-card__accent { width: 4px; top: 10%; bottom: 10%; }
    .jm-fitness-card__btn { padding: 0.6rem 0.9rem 0.6rem 1.45rem; font-size: 0.9rem; border-radius: 10px; }
}

/* ==========================================================
 *   [ PÁGINA CARMEN MEDELLÍN / CARTAGENA (page-carmen-medellin-cartagena.php) ]
 *   Landing individual Restaurante Carmen.
 *   DISEÑO 1:1 IGUAL QUE PÁGINA SALUD Y BELLEZA (card patrón JM):
 *   Header pill navy kicker + H2 navy (sin divider) + TARJETA ÚNICA
 *   centrada (aspect 4:3 igual S&B, fondo crema, border gold 2px,
 *   acento gold izq 4px 8% top/bot, img contain padding 0.55rem,
 *   botón navy debajo igual S&B con acento izq 18%)
 *   + Wrap <a> clickeable completo = WhatsApp.
 *   (Colocado ANTES del bloque FERRETERIAS)
 * ========================================================== */

.jm-carmen-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

/* ---------------- SECTION · padding igual S&B · inner ancho card centrada 460px (igual que ancho natural en grid 3 cols S&B) ---------------- */
.jm-carmen-showcase {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

.jm-carmen-showcase__inner {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.75rem;
}

/* ---------------- HEADER · MISMA ESTRUCTURA QUE SALUD Y BELLEZA / RESTAURANTES (pill kicker + H2) ---------------- */
.jm-carmen-head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-carmen-head__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 2px 0 rgba(12,47,82,0.25) inset,
        0 10px 26px -10px rgba(15,76,129,0.42),
        0 0 0 1px rgba(15,76,129,0.22);
}

.jm-carmen-head__pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px 0 rgba(245,197,24,0.4);
}

.jm-carmen-head__pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
}

.jm-carmen-head__title {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.45rem, 1.55vw + 1.25rem, 2.15rem);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: none;
    text-wrap: balance;
    text-align: left;
}

/* ---------------- TARJETA ÚNICA · 1:1 MISMA ESTRUCTURA QUE CARD SALUD Y BELLEZA ---------------- */
.jm-carmen-card {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    display: block;
    animation: jm-carmen-card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0s;
}

@keyframes jm-carmen-card-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Wrap <a> clickeable completo (igual S&B wrap <a>) · hover translateY -5px */
.jm-carmen-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.85rem;
    padding: 0;
    margin: 0;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.jm-carmen-card__wrap:hover,
.jm-carmen-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    color: inherit;
}

/* MEDIA · aspect-ratio 4:3 (IGUAL S&B) · fondo crema gradiente · border gold 2px · sombras 6 capas */
.jm-carmen-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 18px;
    background-color: #ffffff;
    background-image:
        linear-gradient(135deg, #fffdf7 0%, #fff9ec 50%, #ffffff 100%);
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 16px 44px -20px rgba(12, 47, 82, 0.24),
        0 4px 16px -6px rgba(12, 47, 82, 0.15),
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 0 14px -2px rgba(245, 197, 24, 0.2);
    transition:
        border-radius 0.25s ease,
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease;
}

/* Acento gold izq gradiente 4px · 8% top/bot (IGUAL S&B) */
.jm-carmen-card__accent {
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 4px;
    z-index: 2;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.4);
}

/* IMAGEN · OCUPA 100% EL ANCHO DE LA CARD (tocando borde izq/der) · width 100% + height auto + padding 0 + scale 1 · logo horizontal mantiene su aspect ratio natural */
.jm-carmen-card__img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    object-position: center center;
    transform: scale(1) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 12px;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.32s ease;
    will-change: transform;
}

.jm-carmen-card__wrap:hover .jm-carmen-card__img {
    transform: scale(1.04) !important;
    filter: saturate(1.08) contrast(1.03);
}

/* HOVER MEDIA · border gold claro + sombras intensificadas (IGUAL S&B) */
.jm-carmen-card__wrap:hover .jm-carmen-card__media {
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 28px 66px -22px rgba(12, 47, 82, 0.3),
        0 8px 22px -6px rgba(12, 47, 82, 0.2),
        0 0 26px -4px rgba(245, 197, 24, 0.3),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 18px -2px rgba(245, 197, 24, 0.35);
}

/* ---------------- CTA BOTÓN · 1:1 IGUAL BOTÓN SALUD Y BELLEZA (navy gold, acento izq 18%) ---------------- */
.jm-carmen-card__cta {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.jm-carmen-card__btn {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.68rem 1.05rem 0.68rem 1.7rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: clamp(0.84rem, 0.32vw + 0.82rem, 0.96rem);
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-align: center;
    text-transform: none;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 8px 22px -10px rgba(15, 76, 129, 0.45),
        0 0 0 1px rgba(245, 197, 24, 0.3),
        0 0 12px -2px rgba(245, 197, 24, 0.18);
    isolation: isolate;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
    will-change: transform;
}

/* Acento gold izq botón · 18% top/bot (IGUAL S&B) */
.jm-carmen-card__btn-accent {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 10px 0 rgba(245, 197, 24, 0.32);
}

.jm-carmen-card__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.jm-carmen-card__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

/* HOVER BOTÓN · translateY -2, fondo navy más oscuro, texto gold, border gold claro (IGUAL S&B) */
.jm-carmen-card__wrap:hover .jm-carmen-card__btn {
    transform: translateY(-2px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 12px 28px -10px rgba(15, 76, 129, 0.55),
        0 0 18px -4px rgba(245, 197, 24, 0.35),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
}

/* ---------------- RESPONSIVE · 3 niveles IGUAL S&B (1199 / 991 / 639) ---------------- */
@media (max-width: 1199px) {
    .jm-carmen-showcase { padding: 5rem 0 5.75rem 0; }
    .jm-carmen-showcase__inner { max-width: 520px; gap: 2.25rem; }
    .jm-carmen-head__title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-carmen-card { max-width: 430px; }
    .jm-carmen-card__media { border-radius: 16px; }
}

@media (max-width: 991px) {
    .jm-carmen-showcase { padding: 4.25rem 0 5rem 0; }
    .jm-carmen-showcase__inner { max-width: 480px; gap: 2rem; }
    .jm-carmen-head__title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-carmen-card { max-width: 400px; }
    .jm-carmen-card__media { border-radius: 15px; }
}

@media (max-width: 639px) {
    .jm-carmen-showcase { padding: 3.5rem 0 4.25rem 0; }
    .jm-carmen-showcase__inner { max-width: 100%; gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-carmen-head { gap: 0.7rem; align-items: flex-start; }
    .jm-carmen-head__title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-carmen-card { max-width: 100%; }
    .jm-carmen-card__media { border-radius: 14px; }
    .jm-carmen-card__accent { width: 4px; top: 10%; bottom: 10%; }
    .jm-carmen-card__btn { padding: 0.6rem 0.9rem 0.6rem 1.45rem; font-size: 0.9rem; border-radius: 10px; }
}

/* ==========================================================
 *   [ PÁGINA CELELE CARTAGENA (page-cecele-cartagena.php) ]
 *   Landing individual Restaurante Celele Cartagena Getsemaní.
 *   CLON 1:1 estructura page-carmen-medellin-cartagena v5
 *   (1:1 igual card Salud y Belleza) con UNICA diferencia:
 *   CARD PANORÁMICA MÁS ANCHA QUE ALTA (img fachada azul + texto
 *   descripción Getsemaní, aspect ratio MUY horizontal).
 *   ESTRATEGIA para que IMAGEN OCUPA 100% ANCHO + 100% ALTO
 *   de la card (sin fondo crema ni padding/margen vacío):
 *   1) Card max-width desktop = 920px (mucho mas ancha que Carmen 460px).
 *   2) __media: SIN aspect-ratio FÍJO (se ajusta a la img),
 *      background: TRANSPARENTE (#fff fallback igual img), padding 0.
 *   3) __img: width:100%, height:auto, display:block, padding 0,
 *      margin 0. La card toma AUTOMATICAMENTE altura natural de
 *      la imagen (aspect ratio propio de jm-cecele-001.png).
 *   RESULTADO: 0 px de espacio vacío arriba/abajo/izq/der.
 *   Header pill + H2 izquierda igual S&B/Carmen. Botón "Reservar aquí"
 *   navy gold igual que otros landings.
 *   (Colocado ANTES del bloque FERRETERIAS)
 * ========================================================== */

.jm-cecele-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

/* SECTION · padding igual S&B/Carmen (6 / 6.75 rem) · inner max-width = 1020px (casi full ancho panorámico) */
.jm-cecele-showcase {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

.jm-cecele-showcase__inner {
    position: relative;
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.75rem;
}

/* HEADER · igual Carmen/S&B (izquierda · sin divider · sin subtítulo) */
.jm-cecele-head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-cecele-head__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 2px 0 rgba(12,47,82,0.25) inset,
        0 10px 26px -10px rgba(15,76,129,0.42),
        0 0 0 1px rgba(15,76,129,0.22);
}

.jm-cecele-head__pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px 0 rgba(245,197,24,0.4);
}

.jm-cecele-head__pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
}

.jm-cecele-head__title {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.45rem, 1.55vw + 1.25rem, 2.15rem);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: none;
    text-wrap: balance;
    text-align: left;
}

/* ---------------- CARD ÚNICA PANORÁMICA · MÁS ANCHA QUE ALTA (igual estructura wrap S&B/Carmen) ---------------- */
.jm-cecele-card {
    width: 100%;
    max-width: 920px; /* DESKTOP = 920px (MÁS ANCHA que alta) */
    margin: 0 auto;
    display: block;
    animation: jm-cecele-card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0s;
}

@keyframes jm-cecele-card-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Wrap <a> clickeable completo · hover translateY -5px igual S&B */
.jm-cecele-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.85rem;
    padding: 0;
    margin: 0;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.jm-cecele-card__wrap:hover,
.jm-cecele-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    color: inherit;
}

/* ---------------- MEDIA · CLAVE: SIN aspect-ratio FÍJO, PADDING 0, FONDO TRANSPARENTE → ALTURA = IMAGEN NATURAL (100% ancho Y alto) ---------------- */
.jm-cecele-card__media {
    position: relative;
    width: 100%;
    display: block; /* sin aspect-ratio, altura se ajusta automáticamente a img natural => card mas ancha que alta (img panorámica) */
    overflow: hidden;
    border-radius: 18px;
    background-color: #ffffff;
    isolation: isolate;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 16px 44px -20px rgba(12, 47, 82, 0.24),
        0 4px 16px -6px rgba(12, 47, 82, 0.15),
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 0 14px -2px rgba(245, 197, 24, 0.2);
    transition:
        border-radius 0.25s ease,
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease;
}

/* Acento gold izq gradiente 4px · 8% top/bot (patrón JM igual S&B/Carmen) */
.jm-cecele-card__accent {
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 4px;
    z-index: 2;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.4);
}

/* IMAGEN · width 100% + height auto + padding 0 + margin 0 · OCUPA 100% ANCHO Y 100% ALTO DE LA CARD (no hay fondo crema visible, todo lleno con la img) */
.jm-cecele-card__img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: fill;
    object-position: center center;
    transform: scale(1) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.32s ease;
    will-change: transform;
}

.jm-cecele-card__wrap:hover .jm-cecele-card__img {
    transform: scale(1.02) !important;
    filter: saturate(1.08) contrast(1.03);
}

/* HOVER MEDIA · border gold claro + sombras intensificadas (igual S&B/Carmen) */
.jm-cecele-card__wrap:hover .jm-cecele-card__media {
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 28px 66px -22px rgba(12, 47, 82, 0.3),
        0 8px 22px -6px rgba(12, 47, 82, 0.2),
        0 0 26px -4px rgba(245, 197, 24, 0.3),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 18px -2px rgba(245, 197, 24, 0.35);
}

/* ---------------- CTA BOTÓN · 1:1 IGUAL BOTÓN CELELE = BOTÓN CARMEN / S&B (navy gold, acento izq 18%, WhatsApp) ---------------- */
.jm-cecele-card__cta {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.jm-cecele-card__btn {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.68rem 1.05rem 0.68rem 1.7rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: clamp(0.84rem, 0.32vw + 0.82rem, 0.96rem);
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-align: center;
    text-transform: none;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 8px 22px -10px rgba(15, 76, 129, 0.45),
        0 0 0 1px rgba(245, 197, 24, 0.3),
        0 0 12px -2px rgba(245, 197, 24, 0.18);
    isolation: isolate;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
    will-change: transform;
}

.jm-cecele-card__btn-accent {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 10px 0 rgba(245, 197, 24, 0.32);
}

.jm-cecele-card__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.jm-cecele-card__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

/* HOVER BOTÓN · translateY -2, navy más oscuro, texto gold, border gold claro (igual S&B/Carmen) */
.jm-cecele-card__wrap:hover .jm-cecele-card__btn {
    transform: translateY(-2px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 12px 28px -10px rgba(15, 76, 129, 0.55),
        0 0 18px -4px rgba(245, 197, 24, 0.35),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
}

/* ---------------- RESPONSIVE 3 NIVELES · mantiene card PANORÁMICA (mas ancha que alta) en todos los breakpoints ---------------- */
@media (max-width: 1199px) {
    .jm-cecele-showcase { padding: 5rem 0 5.75rem 0; }
    .jm-cecele-showcase__inner { max-width: 880px; gap: 2.25rem; }
    .jm-cecele-head__title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-cecele-card { max-width: 820px; }
    .jm-cecele-card__media { border-radius: 16px; }
    .jm-cecele-card__img { border-radius: 14px; }
}

@media (max-width: 991px) {
    .jm-cecele-showcase { padding: 4.25rem 0 5rem 0; }
    .jm-cecele-showcase__inner { max-width: 760px; gap: 2rem; }
    .jm-cecele-head__title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-cecele-card { max-width: 100%; } /* tablet 768px llena todo inner width, sigue siendo mas ancha que alta */
    .jm-cecele-card__media { border-radius: 15px; }
    .jm-cecele-card__img { border-radius: 13px; }
}

@media (max-width: 639px) {
    .jm-cecele-showcase { padding: 3.5rem 0 4.25rem 0; }
    .jm-cecele-showcase__inner { max-width: 100%; gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-cecele-head { gap: 0.7rem; align-items: flex-start; }
    .jm-cecele-head__title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-cecele-card { max-width: 100%; }
    .jm-cecele-card__media { border-radius: 14px; }
    .jm-cecele-card__accent { width: 4px; top: 10%; bottom: 10%; }
    .jm-cecele-card__img { border-radius: 12px; }
    .jm-cecele-card__btn { padding: 0.6rem 0.9rem 0.6rem 1.45rem; font-size: 0.9rem; border-radius: 10px; }
}

/* ==========================================================
 *   [ PÁGINA PLATILLOS VOLADORES CALI (page-platillos-voladores-cali.php) ]
 *   Landing individual Platillos Voladores Cali.
 *   CLON 1:1 estructura página Celele Cartagena.
 *   DIFERENCIA: GRID 3 COLUMNAS IGUAL FITNESS / CONSTRUCTORAS
 *   (3 menús / cards = 3 imágenes PNG cuadrado 1:1 que ya traen
 *   CONSIGO MISMAS nombre plato, descripción y precio).
 *   Cada card: SIN aspect-ratio fijo en media (altura natural img).
 *   Imagen ocupa 100% ancho + 100% alto (igual estrategia Celele,
 *   sin padding/margin/bg crema vacío).
 *   DEBAJO del grid: ÚNICO BOTÓN "Reserva aquí" full-width
 *   (igual foto de referencia enviada por user, 1 solo botón abajo).
 *   Link global cards + botón = WhatsApp helper campaña
 *   "Platillos Voladores Cali - Reservas" (misma para todos).
 *   (Colocado ANTES del bloque FERRETERIAS)
 * ========================================================== */

.jm-pvoladores-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-pvoladores-showcase {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

/* Inner max-width 1280px (igual Fitness/Constructoras grid 3 cols amplio) */
.jm-pvoladores-showcase__inner {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 3rem;
}

/* HEADER igual Celele / Carmen / S&B (alineado IZQUIERDA · sin divider · sin subtítulo) */
.jm-pvoladores-head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-pvoladores-head__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 2px 0 rgba(12,47,82,0.25) inset,
        0 10px 26px -10px rgba(15,76,129,0.42),
        0 0 0 1px rgba(15,76,129,0.22);
}

.jm-pvoladores-head__pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px 0 rgba(245,197,24,0.4);
}

.jm-pvoladores-head__pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
}

.jm-pvoladores-head__title {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.45rem, 1.55vw + 1.25rem, 2.15rem);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: none;
    text-wrap: balance;
    text-align: left;
}

/* ---------------- GRID 3 COLUMNAS (igual Fitness/Constructoras) ---------------- */
.jm-pvoladores-grid {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.2rem 2.2rem;
    align-items: start;
    justify-content: center;
}

.jm-pvoladores-grid__item {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    display: block;
}

/* Stagger entrada 3 cards delay progresivo (0 / 0.09 / 0.18s) */
.jm-pvoladores-grid__item:nth-child(1) { animation: jm-pvoladores-card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0s; }
.jm-pvoladores-grid__item:nth-child(2) { animation: jm-pvoladores-card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.09s; }
.jm-pvoladores-grid__item:nth-child(3) { animation: jm-pvoladores-card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.18s; }

@keyframes jm-pvoladores-card-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Card wrapper igual Celele/S&B (padding 0, margin 0) */
.jm-pvoladores-card {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    display: block;
}

.jm-pvoladores-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    margin: 0;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 18px;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.jm-pvoladores-card__wrap:hover,
.jm-pvoladores-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    color: inherit;
}

/* ---------------- MEDIA · ESTRATEGIA CELELE: SIN aspect-ratio FÍJO, padding 0, background blanco → altura img natural (1:1 cuadrada = card cuadrada perfecta). Img ocupa 100% ancho+alto. ---------------- */
.jm-pvoladores-card__media {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background-color: #ffffff;
    isolation: isolate;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 16px 44px -20px rgba(12, 47, 82, 0.24),
        0 4px 16px -6px rgba(12, 47, 82, 0.15),
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 0 14px -2px rgba(245, 197, 24, 0.2);
    transition:
        border-radius 0.25s ease,
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease;
}

/* Acento gold izq gradiente 4px 8% top/bot patrón JM (igual Celele/S&B) */
.jm-pvoladores-card__accent {
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 4px;
    z-index: 2;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.4);
}

/* IMAGEN · width 100% height auto padding 0 margin 0 → LLENA TODO ancho + alto de la card (como Celele) */
.jm-pvoladores-card__img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: fill;
    object-position: center center;
    transform: scale(1) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.32s ease;
    will-change: transform;
}

.jm-pvoladores-card__wrap:hover .jm-pvoladores-card__img {
    transform: scale(1.02) !important;
    filter: saturate(1.08) contrast(1.03);
}

/* HOVER MEDIA · border gold claro + sombras intensificadas (igual Celele) */
.jm-pvoladores-card__wrap:hover .jm-pvoladores-card__media {
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 28px 66px -22px rgba(12, 47, 82, 0.3),
        0 8px 22px -6px rgba(12, 47, 82, 0.2),
        0 0 26px -4px rgba(245, 197, 24, 0.3),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 18px -2px rgba(245, 197, 24, 0.35);
}

/* ---------------- ÚNICO BOTÓN CENTRADO FULL-WIDTH "Reserva aquí" DEBAJO grid (igual foto user referencia) ---------------- */
.jm-pvoladores-cta {
    width: 100%;
    max-width: 100%;
    padding: 0.4rem 0 0 0;
    margin: 0;
    display: block;
}

.jm-pvoladores-cta__btn {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.05rem 1.3rem 1.05rem 2.1rem;
    border-radius: 12px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: clamp(1rem, 0.5vw + 0.96rem, 1.2rem);
    line-height: 1.3;
    letter-spacing: 0.025em;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 14px 32px -12px rgba(15, 76, 129, 0.5),
        0 0 0 1px rgba(245, 197, 24, 0.3),
        0 0 16px -2px rgba(245, 197, 24, 0.2);
    isolation: isolate;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
    will-change: transform;
    cursor: pointer;
    outline: none;
}

.jm-pvoladores-cta__btn-accent {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 12px 0 rgba(245, 197, 24, 0.32);
}

.jm-pvoladores-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.jm-pvoladores-cta__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    font-weight: 800;
}

/* HOVER BOTÓN · translateY -3px navy-700 texto gold hover border gold claro */
.jm-pvoladores-cta__btn:hover,
.jm-pvoladores-cta__btn:focus-visible {
    transform: translateY(-3px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 20px 44px -14px rgba(15, 76, 129, 0.62),
        0 0 22px -5px rgba(245, 197, 24, 0.38),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    text-decoration: none;
}

.jm-pvoladores-cta__btn:active {
    transform: translateY(-1px);
    transition-duration: .14s;
}

/* ---------------- RESPONSIVE 4 NIVELES · grid cambia cols = Fitness/Constructoras ---------------- */
@media (max-width: 1199px) {
    .jm-pvoladores-showcase { padding: 5rem 0 5.75rem 0; }
    .jm-pvoladores-showcase__inner { max-width: 1024px; gap: 2.5rem; }
    .jm-pvoladores-head__title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-pvoladores-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.9rem 1.9rem; } /* 1199 → 2 cols (igual Fitness) */
}

@media (max-width: 991px) {
    .jm-pvoladores-showcase { padding: 4.25rem 0 5rem 0; }
    .jm-pvoladores-showcase__inner { max-width: 760px; gap: 2.2rem; }
    .jm-pvoladores-head__title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-pvoladores-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7rem 1.7rem; } /* 991 → 2 cols (igual Fitness) */
}

@media (max-width: 639px) {
    .jm-pvoladores-showcase { padding: 3.5rem 0 4.25rem 0; }
    .jm-pvoladores-showcase__inner { max-width: 100%; gap: 2rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-pvoladores-head { gap: 0.7rem; align-items: flex-start; }
    .jm-pvoladores-head__title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-pvoladores-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.6rem; } /* 639 → 1 col stack */
    .jm-pvoladores-card__media { border-radius: 14px; }
    .jm-pvoladores-card__img { border-radius: 12px; }
    .jm-pvoladores-cta__btn { padding: 0.95rem 1.15rem 0.95rem 1.85rem; font-size: 1.02rem; border-radius: 11px; gap: 0.65rem; }
    .jm-pvoladores-cta__btn-icon { width: 22px; height: 22px; }
}

/* ==========================================================
 *   [ PÁGINA MORA CASTILLA POPAYÁN (page-mora-castilla-popayan.php) ]
 *   Landing individual Mora Castilla Popayán.
 *   CLON 1:1 estructura página Platillos Voladores Cali.
 *   GRID 3 COLUMNAS IGUAL PLATILLOS VOLADORES / FITNESS / CONSTRUCTORAS
 *   (3 menús / cards = 3 imágenes PNG que ya traen CONSIGO MISMAS
 *   nombre plato, descripción y precio. SIN texto extra PHP).
 *   Cada card: SIN aspect-ratio fijo en media (altura natural img).
 *   Imagen ocupa 100% ancho + 100% alto (igual estrategia Platillos,
 *   sin padding/margin/bg vacío).
 *   DEBAJO del grid: ÚNICO BOTÓN "Reserva aquí" full-width.
 *   Link global cards + botón = WhatsApp helper campaña
 *   "Mora Castilla Popayan - Reservas" (misma para todos).
 *   (Colocado ANTES del bloque FERRETERIAS)
 * ========================================================== */

.jm-mcastilla-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-mcastilla-showcase {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

.jm-mcastilla-showcase__inner {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 3rem;
}

.jm-mcastilla-head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-mcastilla-head__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 2px 0 rgba(12,47,82,0.25) inset,
        0 10px 26px -10px rgba(15,76,129,0.42),
        0 0 0 1px rgba(15,76,129,0.22);
}

.jm-mcastilla-head__pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px 0 rgba(245,197,24,0.4);
}

.jm-mcastilla-head__pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
}

.jm-mcastilla-head__title {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.45rem, 1.55vw + 1.25rem, 2.15rem);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: none;
    text-wrap: balance;
    text-align: left;
}

.jm-mcastilla-grid {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.2rem 2.2rem;
    align-items: start;
    justify-content: center;
}

.jm-mcastilla-grid__item {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    display: block;
}

.jm-mcastilla-grid__item:nth-child(1) { animation: jm-mcastilla-card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0s; }
.jm-mcastilla-grid__item:nth-child(2) { animation: jm-mcastilla-card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.09s; }
.jm-mcastilla-grid__item:nth-child(3) { animation: jm-mcastilla-card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.18s; }

@keyframes jm-mcastilla-card-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.jm-mcastilla-card {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    display: block;
}

.jm-mcastilla-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    margin: 0;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 18px;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.jm-mcastilla-card__wrap:hover,
.jm-mcastilla-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    color: inherit;
}

.jm-mcastilla-card__media {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background-color: #ffffff;
    isolation: isolate;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 16px 44px -20px rgba(12, 47, 82, 0.24),
        0 4px 16px -6px rgba(12, 47, 82, 0.15),
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 0 14px -2px rgba(245, 197, 24, 0.2);
    transition:
        border-radius 0.25s ease,
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease;
}

.jm-mcastilla-card__accent {
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 4px;
    z-index: 2;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.4);
}

.jm-mcastilla-card__img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: fill;
    object-position: center center;
    transform: scale(1) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.32s ease;
    will-change: transform;
}

.jm-mcastilla-card__wrap:hover .jm-mcastilla-card__img {
    transform: scale(1.02) !important;
    filter: saturate(1.08) contrast(1.03);
}

.jm-mcastilla-card__wrap:hover .jm-mcastilla-card__media {
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 28px 66px -22px rgba(12, 47, 82, 0.3),
        0 8px 22px -6px rgba(12, 47, 82, 0.2),
        0 0 26px -4px rgba(245, 197, 24, 0.3),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 18px -2px rgba(245, 197, 24, 0.35);
}

.jm-mcastilla-cta {
    width: 100%;
    max-width: 100%;
    padding: 0.4rem 0 0 0;
    margin: 0;
    display: block;
}

.jm-mcastilla-cta__btn {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.05rem 1.3rem 1.05rem 2.1rem;
    border-radius: 12px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: clamp(1rem, 0.5vw + 0.96rem, 1.2rem);
    line-height: 1.3;
    letter-spacing: 0.025em;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 14px 32px -12px rgba(15, 76, 129, 0.5),
        0 0 0 1px rgba(245, 197, 24, 0.3),
        0 0 16px -2px rgba(245, 197, 24, 0.2);
    isolation: isolate;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
    will-change: transform;
    cursor: pointer;
    outline: none;
}

.jm-mcastilla-cta__btn-accent {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 12px 0 rgba(245, 197, 24, 0.32);
}

.jm-mcastilla-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.jm-mcastilla-cta__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    font-weight: 800;
}

.jm-mcastilla-cta__btn:hover,
.jm-mcastilla-cta__btn:focus-visible {
    transform: translateY(-3px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 20px 44px -14px rgba(15, 76, 129, 0.62),
        0 0 22px -5px rgba(245, 197, 24, 0.38),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    text-decoration: none;
}

.jm-mcastilla-cta__btn:active {
    transform: translateY(-1px);
    transition-duration: .14s;
}

@media (max-width: 1199px) {
    .jm-mcastilla-showcase { padding: 5rem 0 5.75rem 0; }
    .jm-mcastilla-showcase__inner { max-width: 1024px; gap: 2.5rem; }
    .jm-mcastilla-head__title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-mcastilla-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.9rem 1.9rem; }
}

@media (max-width: 991px) {
    .jm-mcastilla-showcase { padding: 4.25rem 0 5rem 0; }
    .jm-mcastilla-showcase__inner { max-width: 760px; gap: 2.2rem; }
    .jm-mcastilla-head__title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-mcastilla-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7rem 1.7rem; }
}

@media (max-width: 639px) {
    .jm-mcastilla-showcase { padding: 3.5rem 0 4.25rem 0; }
    .jm-mcastilla-showcase__inner { max-width: 100%; gap: 2rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-mcastilla-head { gap: 0.7rem; align-items: flex-start; }
    .jm-mcastilla-head__title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-mcastilla-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.6rem; }
    .jm-mcastilla-card__media { border-radius: 14px; }
    .jm-mcastilla-card__img { border-radius: 12px; }
    .jm-mcastilla-cta__btn { padding: 0.95rem 1.15rem 0.95rem 1.85rem; font-size: 1.02rem; border-radius: 11px; gap: 0.65rem; }
    .jm-mcastilla-cta__btn-icon { width: 22px; height: 22px; }
}

/* ==========================================================
 *   [ PÁGINA ALAMBIQUE MEDELLÍN (page-alambique-medellin.php) ]
 *   Landing individual Restaurante Alambique Medellín.
 *   CLON 1:1 estructura página Celele Cartagena.
 *   CARD ÚNICA panorámica (1 sola imagen menu alambique.png).
 *   ESTRATEGIA para que IMAGEN OCUPA 100% ANCHO + 100% ALTO
 *   de la card (sin fondo blanco ni padding/margen vacío):
 *   1) Card max-width desktop = 920px (mas ancha que alta).
 *   2) __media: SIN aspect-ratio FÍJO (se ajusta a la img),
 *      background: #fff, padding 0.
 *   3) __img: width:100%, height:auto, display:block, padding 0,
 *      margin 0. Card toma AUTOMATICAMENTE altura natural img.
 *   Header pill RESTAURANTE ALAMBIQUE + H2 izquierda (igual patrón
 *   Restaurantes). Abajo card: botón navy gold "RESERVAR AQUÍ"
 *   WhatsApp helper campaña "Alambique Medellin - Reservas".
 *   (Colocado ANTES del bloque FERRETERIAS)
 * ========================================================== */

.jm-alambique-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-alambique-showcase {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

.jm-alambique-showcase__inner {
    position: relative;
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.75rem;
}

.jm-alambique-head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-alambique-head__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 2px 0 rgba(12,47,82,0.25) inset,
        0 10px 26px -10px rgba(15,76,129,0.42),
        0 0 0 1px rgba(15,76,129,0.22);
}

.jm-alambique-head__pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px 0 rgba(245,197,24,0.4);
}

.jm-alambique-head__pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
}

.jm-alambique-head__title {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.45rem, 1.55vw + 1.25rem, 2.15rem);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: none;
    text-wrap: balance;
    text-align: left;
}

/* CARD ÚNICA panorámica 920px desktop (mas ancha que alta) */
.jm-alambique-card {
    width: 100%;
    max-width: 644px; /* DESKTOP -30%: 920px × 0.7 = 644px (card 30% más pequeña que Celele original) */
    margin: 0 auto;
    display: block;
    animation: jm-alambique-card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0s;
}

@keyframes jm-alambique-card-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.jm-alambique-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    margin: 0;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 18px;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.jm-alambique-card__wrap:hover,
.jm-alambique-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    color: inherit;
}

/* MEDIA · SIN aspect-ratio FÍJO, padding 0 → ALTURA natural imagen (0 px espacio vacío) */
.jm-alambique-card__media {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background-color: #ffffff;
    isolation: isolate;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 16px 44px -20px rgba(12, 47, 82, 0.24),
        0 4px 16px -6px rgba(12, 47, 82, 0.15),
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 0 14px -2px rgba(245, 197, 24, 0.2);
    transition:
        border-radius 0.25s ease,
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease;
}

.jm-alambique-card__accent {
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 4px;
    z-index: 2;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.4);
}

.jm-alambique-card__img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: fill;
    object-position: center center;
    transform: scale(1) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.32s ease;
    will-change: transform;
}

.jm-alambique-card__wrap:hover .jm-alambique-card__img {
    transform: scale(1.02) !important;
    filter: saturate(1.08) contrast(1.03);
}

.jm-alambique-card__wrap:hover .jm-alambique-card__media {
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 28px 66px -22px rgba(12, 47, 82, 0.3),
        0 8px 22px -6px rgba(12, 47, 82, 0.2),
        0 0 26px -4px rgba(245, 197, 24, 0.3),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 18px -2px rgba(245, 197, 24, 0.35);
}

/* BOTÓN SEPARADO ABAJO card (no dentro wrap). Navy gold WhatsApp RESERVAR AQUÍ. */
.jm-alambique-cta {
    width: 100%;
    max-width: 100%;
    padding: 0.2rem 0 0 0;
    margin: 0;
    display: block;
}

.jm-alambique-cta__btn {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.68rem 1.05rem 0.68rem 1.7rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: clamp(0.84rem, 0.32vw + 0.82rem, 0.96rem);
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 8px 22px -10px rgba(15, 76, 129, 0.45),
        0 0 0 1px rgba(245, 197, 24, 0.3),
        0 0 12px -2px rgba(245, 197, 24, 0.18);
    isolation: isolate;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
    will-change: transform;
    cursor: pointer;
    outline: none;
}

.jm-alambique-cta__btn-accent {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 10px 0 rgba(245, 197, 24, 0.32);
}

.jm-alambique-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.jm-alambique-cta__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.jm-alambique-cta__btn:hover,
.jm-alambique-cta__btn:focus-visible {
    transform: translateY(-2px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 12px 28px -10px rgba(15, 76, 129, 0.55),
        0 0 18px -4px rgba(245, 197, 24, 0.35),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    text-decoration: none;
}

.jm-alambique-cta__btn:active {
    transform: translateY(-1px);
    transition-duration: .14s;
}

/* RESPONSIVE 3 NIVELES card panorámica (mas ancha que alta) */
@media (max-width: 1199px) {
    .jm-alambique-showcase { padding: 5rem 0 5.75rem 0; }
    .jm-alambique-showcase__inner { max-width: 880px; gap: 2.25rem; }
    .jm-alambique-head__title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-alambique-card { max-width: 574px; } /* 1199: 820 × 0.7 = 574px (-30%) */
    .jm-alambique-card__media { border-radius: 16px; }
    .jm-alambique-card__img { border-radius: 14px; }
}

@media (max-width: 991px) {
    .jm-alambique-showcase { padding: 4.25rem 0 5rem 0; }
    .jm-alambique-showcase__inner { max-width: 760px; gap: 2rem; }
    .jm-alambique-head__title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-alambique-card { max-width: 100%; }
    .jm-alambique-card__media { border-radius: 15px; }
    .jm-alambique-card__img { border-radius: 13px; }
}

@media (max-width: 639px) {
    .jm-alambique-showcase { padding: 3.5rem 0 4.25rem 0; }
    .jm-alambique-showcase__inner { max-width: 100%; gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-alambique-head { gap: 0.7rem; align-items: flex-start; }
    .jm-alambique-head__title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-alambique-card { max-width: 100%; }
    .jm-alambique-card__media { border-radius: 14px; }
    .jm-alambique-card__accent { width: 4px; top: 10%; bottom: 10%; }
    .jm-alambique-card__img { border-radius: 12px; }
    .jm-alambique-cta__btn { padding: 0.6rem 0.9rem 0.6rem 1.45rem; font-size: 0.9rem; border-radius: 10px; }
}

/* ==========================================================
 *   [ PÁGINA MAR Y ZIELO CARTAGENA (page-mar-y-zielo-cartagena.php) ]
 *   Landing individual Mar y Zielo Cartagena.
 *   DISEÑO DIFERENTE A LAS OTRAS LANDINGS (NO cards, NO imágenes):
 *   Estructura: Header (pill + H2 izquierda) →
 *   CAJA CREMA BEIGE palida (fondo carta gastronómica tipo menú)
 *   con TÍTULO grande SERIF GOLD VIEJO "ORIGEN" CENTRADO +
 *   PÁRRAFO TEXTO extraído VERBATIM de la imagen referencia user.
 *   Debajo caja texto: Botón navy gold "RESERVAR AQUÍ" (igual
 *   patrón JM de otros landings). SIN footer custom, get_footer normal.
 *   (Colocado ANTES del bloque FERRETERIAS)
 * ========================================================== */

.jm-maryzielo-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-maryzielo-showcase {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

.jm-maryzielo-showcase__inner {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 3rem;
}

/* HEADER igual patrón JM (izquierda · pill navy + H2 navy) */
.jm-maryzielo-head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-maryzielo-head__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 2px 0 rgba(12,47,82,0.25) inset,
        0 10px 26px -10px rgba(15,76,129,0.42),
        0 0 0 1px rgba(15,76,129,0.22);
}

.jm-maryzielo-head__pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px 0 rgba(245,197,24,0.4);
}

.jm-maryzielo-head__pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
}

.jm-maryzielo-head__title {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.45rem, 1.55vw + 1.25rem, 2.15rem);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: none;
    text-wrap: balance;
    text-align: left;
}

/* ---------------- CAJA CREMA BEIGE: Título ORIGEN + párrafo (bloque texto DIFERENTE) ---------------- */
.jm-maryzielo-origin {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 5.5rem 6rem;
    border-radius: 24px;
    background-color: #f9f4e3; /* BEIGE CREMA palido igual imagen referencia (fondo carta menú papel) */
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(157, 123, 40, 0.06) inset,
        0 28px 72px -26px rgba(15, 52, 92, 0.18),
        0 10px 28px -10px rgba(15, 52, 92, 0.12),
        0 0 0 1px rgba(157, 123, 40, 0.18);
    isolation: isolate;
    animation: jm-maryzielo-origin-in 0.74s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.08s;
}

@keyframes jm-maryzielo-origin-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.jm-maryzielo-origin__title {
    width: 100%;
    margin: 0 0 2.7rem 0;
    padding: 0;
    text-align: center;
    color: #9d7b28; /* GOLD VIEJO oscuro (oro bronceado = igual imagen referencia, NO amarillo brillante gold JM oficial) */
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: clamp(2.9rem, 4.6vw + 2.1rem, 5.6rem);
    line-height: 1.05;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-wrap: balance;
}

.jm-maryzielo-origin__text {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    color: #62768d; /* AZUL GRISÁCEO petróleo palido (igual imagen referencia texto azul grisáceo, NO navy negro) */
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    font-size: clamp(1.06rem, 0.62vw + 1.01rem, 1.3rem);
    line-height: 1.7;
    letter-spacing: -0.003em;
}

/* ---------------- CTA BOTÓN RESERVAR AQUÍ debajo caja crema (igual Alambique botón navy gold) ---------------- */
.jm-maryzielo-cta {
    width: 100%;
    max-width: 100%;
    padding: 0.1rem 0 0 0;
    margin: 0;
    display: block;
}

.jm-maryzielo-cta__btn {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.72rem 1.1rem 0.72rem 1.85rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: clamp(0.86rem, 0.35vw + 0.84rem, 0.98rem);
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 10px 26px -10px rgba(15, 76, 129, 0.5),
        0 0 0 1px rgba(245, 197, 24, 0.3),
        0 0 14px -2px rgba(245, 197, 24, 0.2);
    isolation: isolate;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
    will-change: transform;
    cursor: pointer;
    outline: none;
}

.jm-maryzielo-cta__btn-accent {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 10px 0 rgba(245, 197, 24, 0.32);
}

.jm-maryzielo-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.jm-maryzielo-cta__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.jm-maryzielo-cta__btn:hover,
.jm-maryzielo-cta__btn:focus-visible {
    transform: translateY(-2px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 16px 36px -12px rgba(15, 76, 129, 0.6),
        0 0 20px -5px rgba(245, 197, 24, 0.36),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    text-decoration: none;
}

.jm-maryzielo-cta__btn:active {
    transform: translateY(-1px);
    transition-duration: .14s;
}

/* RESPONSIVE 3 NIVELES: crema beige padding reducido + título ORIGEN reducido */
@media (max-width: 1199px) {
    .jm-maryzielo-showcase { padding: 5rem 0 5.75rem 0; }
    .jm-maryzielo-showcase__inner { max-width: 920px; gap: 2.5rem; }
    .jm-maryzielo-head__title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-maryzielo-origin { padding: 4.5rem 4.75rem; border-radius: 22px; }
    .jm-maryzielo-origin__title { font-size: clamp(2.5rem, 4vw + 1.9rem, 4.7rem); margin-bottom: 2.3rem; }
    .jm-maryzielo-origin__text { font-size: clamp(1.02rem, 0.55vw + 0.98rem, 1.2rem); line-height: 1.67; }
}

@media (max-width: 991px) {
    .jm-maryzielo-showcase { padding: 4.25rem 0 5rem 0; }
    .jm-maryzielo-showcase__inner { max-width: 760px; gap: 2.2rem; }
    .jm-maryzielo-head__title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-maryzielo-origin { padding: 3.5rem 2.9rem; border-radius: 20px; }
    .jm-maryzielo-origin__title { font-size: clamp(2.1rem, 4.8vw + 1.7rem, 3.9rem); margin-bottom: 1.9rem; }
    .jm-maryzielo-origin__text { font-size: 1.08rem; line-height: 1.65; }
}

@media (max-width: 639px) {
    .jm-maryzielo-showcase { padding: 3.5rem 0 4.25rem 0; }
    .jm-maryzielo-showcase__inner { max-width: 100%; gap: 1.9rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-maryzielo-head { gap: 0.7rem; align-items: flex-start; }
    .jm-maryzielo-head__title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-maryzielo-origin { padding: 2.6rem 1.6rem; border-radius: 18px; }
    .jm-maryzielo-origin__title { font-size: clamp(1.9rem, 10vw + 1.65rem, 3.1rem); letter-spacing: 0.03em; margin-bottom: 1.55rem; }
    .jm-maryzielo-origin__text { font-size: 1.02rem; line-height: 1.63; }
    .jm-maryzielo-cta__btn { padding: 0.63rem 0.95rem 0.63rem 1.55rem; font-size: 0.9rem; border-radius: 10px; }
}

/* ==========================================================
 *   [ PÁGINA FERROCENTRO SUBCATEGORÍA FERRETERÍAS (page-ferricentro.php) ]
 *   Subcategoría dentro de Ferreterías "Ferricentro" (herrajes /
 *   perfiles / tuberías / materiales para construcción).
 *   CLON 1:1 estructura Alambique / Celele (NO es restaurante):
 *   Header (pill navy + H2 Ferricentro izquierda) →
 *   CARD ÚNICA PANORÁMICA imagen grande catálogo productos.png
 *   (mas ancha que alta · 920px desktop).
 *   ESTRATEGIA IMAGEN 100% LLENADO = Celele:
 *   SIN aspect-ratio fijo, padding 0, img width 100% height auto
 *   object-fit fill → 0 px espacio vacío, altura = natural imagen.
 *   Debajo card: Botón navy gold label custom "Solicita tu producto."
 *   (user VERBATIM con punto final) WhatsApp helper campaña
 *   "Ferricentro - Pedidos".
 *   (Colocado ANTES del bloque FERRETERIAS)
 * ========================================================== */

.jm-ferricentro-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-ferricentro-showcase {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

.jm-ferricentro-showcase__inner {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.75rem;
}

/* HEADER izquierda igual Celele/Alambique (pill navy kicker FERROCENTRO subcategoría + H2 navy) */
.jm-ferricentro-head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-ferricentro-head__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 2px 0 rgba(12,47,82,0.25) inset,
        0 10px 26px -10px rgba(15,76,129,0.42),
        0 0 0 1px rgba(15,76,129,0.22);
}

.jm-ferricentro-head__pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px 0 rgba(245,197,24,0.4);
}

.jm-ferricentro-head__pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
}

.jm-ferricentro-head__title {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.45rem, 1.55vw + 1.25rem, 2.15rem);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: none;
    text-wrap: balance;
    text-align: left;
}

/* CARD ÚNICA panorámica grande ANCHO COMPLETO (igual que botón Solicita tu producto) */
.jm-ferricentro-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    animation: jm-ferricentro-card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0s;
}

@keyframes jm-ferricentro-card-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.jm-ferricentro-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    margin: 0;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 18px;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.jm-ferricentro-card__wrap:hover,
.jm-ferricentro-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    color: inherit;
}

/* MEDIA · SIN aspect-ratio · padding 0 · background blanco → ALTURA = img natural. Imagen llena 100% ancho+alto. */
.jm-ferricentro-card__media {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background-color: #ffffff;
    isolation: isolate;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 16px 44px -20px rgba(12, 47, 82, 0.24),
        0 4px 16px -6px rgba(12, 47, 82, 0.15),
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 0 14px -2px rgba(245, 197, 24, 0.2);
    transition:
        border-radius 0.25s ease,
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease;
}

.jm-ferricentro-card__accent {
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 4px;
    z-index: 2;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.4);
}

.jm-ferricentro-card__img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: fill;
    object-position: center center;
    transform: scale(1) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.32s ease;
    will-change: transform;
}

.jm-ferricentro-card__wrap:hover .jm-ferricentro-card__img {
    transform: scale(1.02) !important;
    filter: saturate(1.08) contrast(1.03);
}

.jm-ferricentro-card__wrap:hover .jm-ferricentro-card__media {
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 28px 66px -22px rgba(12, 47, 82, 0.3),
        0 8px 22px -6px rgba(12, 47, 82, 0.2),
        0 0 26px -4px rgba(245, 197, 24, 0.3),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 18px -2px rgba(245, 197, 24, 0.35);
}

/* BOTÓN SEPARADO ABAJO card. Label user VERBATIM: "Solicita tu producto." (con punto final) */
.jm-ferricentro-cta {
    width: 100%;
    max-width: 100%;
    padding: 0.2rem 0 0 0;
    margin: 0;
    display: block;
}

.jm-ferricentro-cta__btn {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.76rem 1.15rem 0.76rem 1.9rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: clamp(0.94rem, 0.42vw + 0.92rem, 1.08rem);
    line-height: 1.3;
    letter-spacing: 0.022em;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 12px 30px -11px rgba(15, 76, 129, 0.52),
        0 0 0 1px rgba(245, 197, 24, 0.32),
        0 0 16px -3px rgba(245, 197, 24, 0.22);
    isolation: isolate;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
    will-change: transform;
    cursor: pointer;
    outline: none;
}

.jm-ferricentro-cta__btn-accent {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 12px 0 rgba(245, 197, 24, 0.32);
}

.jm-ferricentro-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.jm-ferricentro-cta__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.jm-ferricentro-cta__btn:hover,
.jm-ferricentro-cta__btn:focus-visible {
    transform: translateY(-3px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 20px 44px -14px rgba(15, 76, 129, 0.62),
        0 0 22px -5px rgba(245, 197, 24, 0.38),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    text-decoration: none;
}

.jm-ferricentro-cta__btn:active {
    transform: translateY(-1px);
    transition-duration: .14s;
}

/* RESPONSIVE 3 NIVELES card panorámica (igual Celele) */
@media (max-width: 1199px) {
    .jm-ferricentro-showcase { padding: 5rem 0 5.75rem 0; }
    .jm-ferricentro-showcase__inner { max-width: 920px; gap: 2.25rem; }
    .jm-ferricentro-head__title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-ferricentro-card { max-width: 100%; }
    .jm-ferricentro-card__media { border-radius: 16px; }
    .jm-ferricentro-card__img { border-radius: 14px; }
}

@media (max-width: 991px) {
    .jm-ferricentro-showcase { padding: 4.25rem 0 5rem 0; }
    .jm-ferricentro-showcase__inner { max-width: 760px; gap: 2rem; }
    .jm-ferricentro-head__title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-ferricentro-card { max-width: 100%; }
    .jm-ferricentro-card__media { border-radius: 15px; }
    .jm-ferricentro-card__img { border-radius: 13px; }
}

@media (max-width: 639px) {
    .jm-ferricentro-showcase { padding: 3.5rem 0 4.25rem 0; }
    .jm-ferricentro-showcase__inner { max-width: 100%; gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-ferricentro-head { gap: 0.7rem; align-items: flex-start; }
    .jm-ferricentro-head__title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-ferricentro-card { max-width: 100%; }
    .jm-ferricentro-card__media { border-radius: 14px; }
    .jm-ferricentro-card__accent { width: 4px; top: 10%; bottom: 10%; }
    .jm-ferricentro-card__img { border-radius: 12px; }
    .jm-ferricentro-cta__btn { padding: 0.68rem 1rem 0.68rem 1.65rem; font-size: 0.94rem; border-radius: 10px; }
    .jm-ferricentro-cta__btn-icon { width: 18px; height: 18px; }
}

/* ==========================================================
 *   [ PÁGINA MUNDIAL DE TORNILLOS SUBCATEGORÍA FERRETERÍAS (page-mundial-de-tornillos.php) ]
 *   Subcategoría dentro de Ferreterías "Mundial de Tornillos".
 *   CLON estructura page-ferricentro.php (NO es restaurante) con
 *   la diferencia que en lugar de 1 card HAY 3 CARDS VERTICALES
 *   1 COLUMNA (Herramientas / Wasas / Abrazaderas) una debajo de
 *   la otra, TODAS con el MISMO ANCHO que el botón inferior
 *   "Solicita tu producto." (ambos = 100% del contenedor inner).
 *   Header (pill navy + H2 Mundial de Tornillos izquierda) →
 *   GRID 3 CARDS VERTICAL 100% ancho (igual Ferricentro FIX width) →
 *   Botón navy gold debajo grid "Solicita tu producto."
 *   helper campaña WhatsApp = Mundial de Tornillos - Pedidos.
 *   (Colocado ANTES del bloque FERRETERIAS y DESPUÉS FERROCENTRO)
 * ========================================================== */

.jm-mundialtornillos-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-mundialtornillos-showcase {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

.jm-mundialtornillos-showcase__inner {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.75rem;
}

/* HEADER izquierda igual Ferricentro (pill navy kicker MUNDIAL DE TORNILLOS subcategoría + H2 navy) */
.jm-mundialtornillos-head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-mundialtornillos-head__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 2px 0 rgba(12,47,82,0.25) inset,
        0 10px 26px -10px rgba(15,76,129,0.42),
        0 0 0 1px rgba(15,76,129,0.22);
}

.jm-mundialtornillos-head__pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px 0 rgba(245,197,24,0.4);
}

.jm-mundialtornillos-head__pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
}

.jm-mundialtornillos-head__title {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.45rem, 1.55vw + 1.25rem, 2.15rem);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: none;
    text-wrap: balance;
    text-align: left;
}

/* GRID 3 CARDS VERTICAL 1 COLUMNA · TODAS 100% ANCHO (igual que botón "Solicita tu producto") · gap entre cards */
.jm-mundialtornillos-grid {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2rem;
}

.jm-mundialtornillos-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    animation: jm-mundialtornillos-card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.jm-mundialtornillos-grid .jm-mundialtornillos-card:nth-child(1) { animation-delay: 0.00s; }
.jm-mundialtornillos-grid .jm-mundialtornillos-card:nth-child(2) { animation-delay: 0.12s; }
.jm-mundialtornillos-grid .jm-mundialtornillos-card:nth-child(3) { animation-delay: 0.24s; }

@keyframes jm-mundialtornillos-card-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.jm-mundialtornillos-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    margin: 0;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 18px;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.jm-mundialtornillos-card__wrap:hover,
.jm-mundialtornillos-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    color: inherit;
}

/* MEDIA · SIN aspect-ratio · padding 0 · background blanco → ALTURA = img natural. Imagen llena 100% ancho+alto. */
.jm-mundialtornillos-card__media {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background-color: #ffffff;
    isolation: isolate;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 16px 44px -20px rgba(12, 47, 82, 0.24),
        0 4px 16px -6px rgba(12, 47, 82, 0.15),
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 0 14px -2px rgba(245, 197, 24, 0.2);
    transition:
        border-radius 0.25s ease,
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease;
}

.jm-mundialtornillos-card__accent {
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 4px;
    z-index: 2;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.4);
}

.jm-mundialtornillos-card__img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: fill;
    object-position: center center;
    transform: scale(1) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.32s ease;
    will-change: transform;
}

.jm-mundialtornillos-card__wrap:hover .jm-mundialtornillos-card__img {
    transform: scale(1.02) !important;
    filter: saturate(1.08) contrast(1.03);
}

.jm-mundialtornillos-card__wrap:hover .jm-mundialtornillos-card__media {
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 28px 66px -22px rgba(12, 47, 82, 0.3),
        0 8px 22px -6px rgba(12, 47, 82, 0.2),
        0 0 26px -4px rgba(245, 197, 24, 0.3),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 18px -2px rgba(245, 197, 24, 0.35);
}

/* BOTÓN SEPARADO ABAJO grid. Label user VERBATIM: "Solicita tu producto." (con punto final) */
.jm-mundialtornillos-cta {
    width: 100%;
    max-width: 100%;
    padding: 0.2rem 0 0 0;
    margin: 0;
    display: block;
}

.jm-mundialtornillos-cta__btn {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.76rem 1.15rem 0.76rem 1.9rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: clamp(0.94rem, 0.42vw + 0.92rem, 1.08rem);
    line-height: 1.3;
    letter-spacing: 0.022em;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 12px 30px -11px rgba(15, 76, 129, 0.52),
        0 0 0 1px rgba(245, 197, 24, 0.32),
        0 0 16px -3px rgba(245, 197, 24, 0.22);
    isolation: isolate;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
    will-change: transform;
    cursor: pointer;
    outline: none;
}

.jm-mundialtornillos-cta__btn-accent {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 12px 0 rgba(245, 197, 24, 0.32);
}

.jm-mundialtornillos-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.jm-mundialtornillos-cta__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.jm-mundialtornillos-cta__btn:hover,
.jm-mundialtornillos-cta__btn:focus-visible {
    transform: translateY(-3px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 20px 44px -14px rgba(15, 76, 129, 0.62),
        0 0 22px -5px rgba(245, 197, 24, 0.38),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    text-decoration: none;
}

.jm-mundialtornillos-cta__btn:active {
    transform: translateY(-1px);
    transition-duration: .14s;
}

/* RESPONSIVE 3 NIVELES grid vertical (igual Ferricentro FIX width 100% match botón) */
@media (max-width: 1199px) {
    .jm-mundialtornillos-showcase { padding: 5rem 0 5.75rem 0; }
    .jm-mundialtornillos-showcase__inner { max-width: 920px; gap: 2.25rem; }
    .jm-mundialtornillos-head__title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-mundialtornillos-grid { gap: 1.75rem; }
    .jm-mundialtornillos-card { max-width: 100%; }
    .jm-mundialtornillos-card__media { border-radius: 16px; }
    .jm-mundialtornillos-card__img { border-radius: 14px; }
}

@media (max-width: 991px) {
    .jm-mundialtornillos-showcase { padding: 4.25rem 0 5rem 0; }
    .jm-mundialtornillos-showcase__inner { max-width: 760px; gap: 2rem; }
    .jm-mundialtornillos-head__title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-mundialtornillos-grid { gap: 1.5rem; }
    .jm-mundialtornillos-card { max-width: 100%; }
    .jm-mundialtornillos-card__media { border-radius: 15px; }
    .jm-mundialtornillos-card__img { border-radius: 13px; }
}

@media (max-width: 639px) {
    .jm-mundialtornillos-showcase { padding: 3.5rem 0 4.25rem 0; }
    .jm-mundialtornillos-showcase__inner { max-width: 100%; gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-mundialtornillos-head { gap: 0.7rem; align-items: flex-start; }
    .jm-mundialtornillos-head__title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-mundialtornillos-grid { gap: 1.25rem; }
    .jm-mundialtornillos-card { max-width: 100%; }
    .jm-mundialtornillos-card__media { border-radius: 14px; }
    .jm-mundialtornillos-card__accent { width: 4px; top: 10%; bottom: 10%; }
    .jm-mundialtornillos-card__img { border-radius: 12px; }
    .jm-mundialtornillos-cta__btn { padding: 0.68rem 1rem 0.68rem 1.65rem; font-size: 0.94rem; border-radius: 10px; }
    .jm-mundialtornillos-cta__btn-icon { width: 18px; height: 18px; }
}

/* ==========================================================
 *   [ PÁGINA POWER CLUB GYM SUBCATEGORÍA FITNESS (page-power-club-gym.php) ]
 *   Subcategoría dentro de Fitness "Power Club Gym".
 *   CLON estructura page-ferricentro.php (1 card panorámica + botón
 *   debajo) con la diferencia de que NO es Ferretería sino categoría
 *   FITNESS (gimnasio). Card entera clickeable WhatsApp + botón
 *   inferior CTA label user VERBATIM: "inscribete con descuento".
 *   Card = 100% ancho en TODOS breakpoints (igual que botón inferior,
 *   igual patrón FIX ancho card=botón Ferricentro).
 *   Campaña WhatsApp helper = Power Club Gym - Inscripciones.
 *   (Colocado ANTES del bloque FERRETERIAS y DESPUÉS MUNDIAL DE TORNILLOS)
 * ========================================================== */

.jm-powerclubgym-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-powerclubgym-showcase {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

.jm-powerclubgym-showcase__inner {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.75rem;
}

/* HEADER izquierda (pill navy kicker POWER CLUB GYM · FITNESS + H2 navy) */
.jm-powerclubgym-head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-powerclubgym-head__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 2px 0 rgba(12,47,82,0.25) inset,
        0 10px 26px -10px rgba(15,76,129,0.42),
        0 0 0 1px rgba(15,76,129,0.22);
}

.jm-powerclubgym-head__pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px 0 rgba(245,197,24,0.4);
}

.jm-powerclubgym-head__pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
}

.jm-powerclubgym-head__title {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.45rem, 1.55vw + 1.25rem, 2.15rem);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: none;
    text-wrap: balance;
    text-align: left;
}

/* CARD ÚNICA 100% ANCHO (igual FIX Ferricentro → IGUAL que botón inferior "inscribete con descuento") */
.jm-powerclubgym-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    animation: jm-powerclubgym-card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0s;
}

@keyframes jm-powerclubgym-card-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.jm-powerclubgym-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    margin: 0;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 18px;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.jm-powerclubgym-card__wrap:hover,
.jm-powerclubgym-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    color: inherit;
}

/* MEDIA · SIN aspect-ratio · padding 0 · height auto natural img. Imagen llena 100% ancho. */
.jm-powerclubgym-card__media {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background-color: #ffffff;
    isolation: isolate;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 16px 44px -20px rgba(12, 47, 82, 0.24),
        0 4px 16px -6px rgba(12, 47, 82, 0.15),
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 0 14px -2px rgba(245, 197, 24, 0.2);
    transition:
        border-radius 0.25s ease,
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease;
}

.jm-powerclubgym-card__accent {
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 4px;
    z-index: 2;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.4);
}

.jm-powerclubgym-card__img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: fill;
    object-position: center center;
    transform: scale(1) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.32s ease;
    will-change: transform;
}

.jm-powerclubgym-card__wrap:hover .jm-powerclubgym-card__img {
    transform: scale(1.02) !important;
    filter: saturate(1.08) contrast(1.03);
}

.jm-powerclubgym-card__wrap:hover .jm-powerclubgym-card__media {
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 28px 66px -22px rgba(12, 47, 82, 0.3),
        0 8px 22px -6px rgba(12, 47, 82, 0.2),
        0 0 26px -4px rgba(245, 197, 24, 0.3),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 18px -2px rgba(245, 197, 24, 0.35);
}

/* BOTÓN SEPARADO ABAJO card. Label user VERBATIM: "inscribete con descuento" (minúsculas sin tilde) */
.jm-powerclubgym-cta {
    width: 100%;
    max-width: 100%;
    padding: 0.2rem 0 0 0;
    margin: 0;
    display: block;
}

.jm-powerclubgym-cta__btn {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.76rem 1.15rem 0.76rem 1.9rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: clamp(0.94rem, 0.42vw + 0.92rem, 1.08rem);
    line-height: 1.3;
    letter-spacing: 0.022em;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 12px 30px -11px rgba(15, 76, 129, 0.52),
        0 0 0 1px rgba(245, 197, 24, 0.32),
        0 0 16px -3px rgba(245, 197, 24, 0.22);
    isolation: isolate;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
    will-change: transform;
    cursor: pointer;
    outline: none;
}

.jm-powerclubgym-cta__btn-accent {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 12px 0 rgba(245, 197, 24, 0.32);
}

.jm-powerclubgym-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.jm-powerclubgym-cta__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.jm-powerclubgym-cta__btn:hover,
.jm-powerclubgym-cta__btn:focus-visible {
    transform: translateY(-3px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 20px 44px -14px rgba(15, 76, 129, 0.62),
        0 0 22px -5px rgba(245, 197, 24, 0.38),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    text-decoration: none;
}

.jm-powerclubgym-cta__btn:active {
    transform: translateY(-1px);
    transition-duration: .14s;
}

/* RESPONSIVE 3 NIVELES (igual Ferricentro FIX 100% width card = botón) */
@media (max-width: 1199px) {
    .jm-powerclubgym-showcase { padding: 5rem 0 5.75rem 0; }
    .jm-powerclubgym-showcase__inner { max-width: 920px; gap: 2.25rem; }
    .jm-powerclubgym-head__title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-powerclubgym-card { max-width: 100%; }
    .jm-powerclubgym-card__media { border-radius: 16px; }
    .jm-powerclubgym-card__img { border-radius: 14px; }
}

@media (max-width: 991px) {
    .jm-powerclubgym-showcase { padding: 4.25rem 0 5rem 0; }
    .jm-powerclubgym-showcase__inner { max-width: 760px; gap: 2rem; }
    .jm-powerclubgym-head__title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-powerclubgym-card { max-width: 100%; }
    .jm-powerclubgym-card__media { border-radius: 15px; }
    .jm-powerclubgym-card__img { border-radius: 13px; }
}

@media (max-width: 639px) {
    .jm-powerclubgym-showcase { padding: 3.5rem 0 4.25rem 0; }
    .jm-powerclubgym-showcase__inner { max-width: 100%; gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-powerclubgym-head { gap: 0.7rem; align-items: flex-start; }
    .jm-powerclubgym-head__title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-powerclubgym-card { max-width: 100%; }
    .jm-powerclubgym-card__media { border-radius: 14px; }
    .jm-powerclubgym-card__accent { width: 4px; top: 10%; bottom: 10%; }
    .jm-powerclubgym-card__img { border-radius: 12px; }
    .jm-powerclubgym-cta__btn { padding: 0.68rem 1rem 0.68rem 1.65rem; font-size: 0.94rem; border-radius: 10px; }
    .jm-powerclubgym-cta__btn-icon { width: 18px; height: 18px; }
}

/* ==========================================================
 *   [ PÁGINA ANIMAL X GYM SUBCATEGORÍA FITNESS (page-animal-x-gym.php) ]
 *   Subcategoría dentro de Fitness "Animal X Gym".
 *   CLON estructura page-power-club-gym.php (1 card panorámica + botón
 *   debajo · subcategoría Gimnasios). Card entera clickeable WhatsApp +
 *   botón inferior CTA label user VERBATIM: "inscribete con nuestros
 *   descuentos".
 *   Card = 100% ancho en TODOS breakpoints (igual FIX ancho card=botón).
 *   Campaña WhatsApp helper = Animal X Gym - Inscripciones.
 *   (Colocado ANTES del bloque FERRETERIAS y DESPUÉS POWER CLUB GYM)
 * ========================================================== */

.jm-animalxgym-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-animalxgym-showcase {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

.jm-animalxgym-showcase__inner {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.75rem;
}

.jm-animalxgym-head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-animalxgym-head__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 2px 0 rgba(12,47,82,0.25) inset,
        0 10px 26px -10px rgba(15,76,129,0.42),
        0 0 0 1px rgba(15,76,129,0.22);
}

.jm-animalxgym-head__pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px 0 rgba(245,197,24,0.4);
}

.jm-animalxgym-head__pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
}

.jm-animalxgym-head__title {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.45rem, 1.55vw + 1.25rem, 2.15rem);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: none;
    text-wrap: balance;
    text-align: left;
}

.jm-animalxgym-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    animation: jm-animalxgym-card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0s;
}

@keyframes jm-animalxgym-card-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.jm-animalxgym-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    margin: 0;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 18px;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.jm-animalxgym-card__wrap:hover,
.jm-animalxgym-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    color: inherit;
}

.jm-animalxgym-card__media {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background-color: #ffffff;
    isolation: isolate;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 16px 44px -20px rgba(12, 47, 82, 0.24),
        0 4px 16px -6px rgba(12, 47, 82, 0.15),
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 0 14px -2px rgba(245, 197, 24, 0.2);
    transition:
        border-radius 0.25s ease,
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease;
}

.jm-animalxgym-card__accent {
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 4px;
    z-index: 2;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.4);
}

.jm-animalxgym-card__img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: fill;
    object-position: center center;
    transform: scale(1) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.32s ease;
    will-change: transform;
}

.jm-animalxgym-card__wrap:hover .jm-animalxgym-card__img {
    transform: scale(1.02) !important;
    filter: saturate(1.08) contrast(1.03);
}

.jm-animalxgym-card__wrap:hover .jm-animalxgym-card__media {
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 28px 66px -22px rgba(12, 47, 82, 0.3),
        0 8px 22px -6px rgba(12, 47, 82, 0.2),
        0 0 26px -4px rgba(245, 197, 24, 0.3),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 18px -2px rgba(245, 197, 24, 0.35);
}

.jm-animalxgym-cta {
    width: 100%;
    max-width: 100%;
    padding: 0.2rem 0 0 0;
    margin: 0;
    display: block;
}

.jm-animalxgym-cta__btn {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.76rem 1.15rem 0.76rem 1.9rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: clamp(0.94rem, 0.42vw + 0.92rem, 1.08rem);
    line-height: 1.3;
    letter-spacing: 0.022em;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 12px 30px -11px rgba(15, 76, 129, 0.52),
        0 0 0 1px rgba(245, 197, 24, 0.32),
        0 0 16px -3px rgba(245, 197, 24, 0.22);
    isolation: isolate;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
    will-change: transform;
    cursor: pointer;
    outline: none;
}

.jm-animalxgym-cta__btn-accent {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 12px 0 rgba(245, 197, 24, 0.32);
}

.jm-animalxgym-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.jm-animalxgym-cta__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.jm-animalxgym-cta__btn:hover,
.jm-animalxgym-cta__btn:focus-visible {
    transform: translateY(-3px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 20px 44px -14px rgba(15, 76, 129, 0.62),
        0 0 22px -5px rgba(245, 197, 24, 0.38),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    text-decoration: none;
}

.jm-animalxgym-cta__btn:active {
    transform: translateY(-1px);
    transition-duration: .14s;
}

@media (max-width: 1199px) {
    .jm-animalxgym-showcase { padding: 5rem 0 5.75rem 0; }
    .jm-animalxgym-showcase__inner { max-width: 920px; gap: 2.25rem; }
    .jm-animalxgym-head__title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-animalxgym-card { max-width: 100%; }
    .jm-animalxgym-card__media { border-radius: 16px; }
    .jm-animalxgym-card__img { border-radius: 14px; }
}

@media (max-width: 991px) {
    .jm-animalxgym-showcase { padding: 4.25rem 0 5rem 0; }
    .jm-animalxgym-showcase__inner { max-width: 760px; gap: 2rem; }
    .jm-animalxgym-head__title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-animalxgym-card { max-width: 100%; }
    .jm-animalxgym-card__media { border-radius: 15px; }
    .jm-animalxgym-card__img { border-radius: 13px; }
}

@media (max-width: 639px) {
    .jm-animalxgym-showcase { padding: 3.5rem 0 4.25rem 0; }
    .jm-animalxgym-showcase__inner { max-width: 100%; gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-animalxgym-head { gap: 0.7rem; align-items: flex-start; }
    .jm-animalxgym-head__title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-animalxgym-card { max-width: 100%; }
    .jm-animalxgym-card__media { border-radius: 14px; }
    .jm-animalxgym-card__accent { width: 4px; top: 10%; bottom: 10%; }
    .jm-animalxgym-card__img { border-radius: 12px; }
    .jm-animalxgym-cta__btn { padding: 0.68rem 1rem 0.68rem 1.65rem; font-size: 0.94rem; border-radius: 10px; }
    .jm-animalxgym-cta__btn-icon { width: 18px; height: 18px; }
}

/* ==========================================================
 *   [ PÁGINA LEANDRO GYM SUBCATEGORÍA FITNESS (page-leandro-gym.php) ]
 *   Subcategoría dentro de Fitness "Leandro Gym".
 *   CLON estructura Power Club Gym / Animal X Gym (1 card panorámica
 *   + botón debajo · subcategoría Gimnasios). Card entera clickeable
 *   WhatsApp + botón inferior CTA label Title Case: "Inscríbete con
 *   el 15% de Descuento" (palabras significativas mayúscula 1ª letra,
 *   conectores con/de y artículo el minúsculas, 15% numérico,
 *   Descuento mayúscula inicial). Igual regla Title Case user
 *   ej "Sistema Institucional de Evaluación Estratégica".
 *   Card = 100% ancho TODOS breakpoints (igual FIX Ferricentro →
 *   card imagen = ANCHO EXACTO botón inferior).
 *   Campaña WhatsApp helper = Leandro Gym - Inscripciones.
 *   (Colocado ANTES del bloque FERRETERIAS y DESPUÉS ANIMAL X GYM)
 * ========================================================== */

.jm-leandrogym-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-leandrogym-showcase {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

.jm-leandrogym-showcase__inner {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.75rem;
}

.jm-leandrogym-head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-leandrogym-head__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 2px 0 rgba(12,47,82,0.25) inset,
        0 10px 26px -10px rgba(15,76,129,0.42),
        0 0 0 1px rgba(15,76,129,0.22);
}

.jm-leandrogym-head__pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px 0 rgba(245,197,24,0.4);
}

.jm-leandrogym-head__pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
}

.jm-leandrogym-head__title {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.45rem, 1.55vw + 1.25rem, 2.15rem);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: none;
    text-wrap: balance;
    text-align: left;
}

.jm-leandrogym-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    animation: jm-leandrogym-card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0s;
}

@keyframes jm-leandrogym-card-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.jm-leandrogym-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    margin: 0;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 18px;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.jm-leandrogym-card__wrap:hover,
.jm-leandrogym-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    color: inherit;
}

.jm-leandrogym-card__media {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background-color: #ffffff;
    isolation: isolate;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 16px 44px -20px rgba(12, 47, 82, 0.24),
        0 4px 16px -6px rgba(12, 47, 82, 0.15),
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 0 14px -2px rgba(245, 197, 24, 0.2);
    transition:
        border-radius 0.25s ease,
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease;
}

.jm-leandrogym-card__accent {
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 4px;
    z-index: 2;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.4);
}

.jm-leandrogym-card__img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: fill;
    object-position: center center;
    transform: scale(1) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.32s ease;
    will-change: transform;
}

.jm-leandrogym-card__wrap:hover .jm-leandrogym-card__img {
    transform: scale(1.02) !important;
    filter: saturate(1.08) contrast(1.03);
}

.jm-leandrogym-card__wrap:hover .jm-leandrogym-card__media {
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 28px 66px -22px rgba(12, 47, 82, 0.3),
        0 8px 22px -6px rgba(12, 47, 82, 0.2),
        0 0 26px -4px rgba(245, 197, 24, 0.3),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 18px -2px rgba(245, 197, 24, 0.35);
}

.jm-leandrogym-cta {
    width: 100%;
    max-width: 100%;
    padding: 0.2rem 0 0 0;
    margin: 0;
    display: block;
}

.jm-leandrogym-cta__btn {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.76rem 1.15rem 0.76rem 1.9rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: clamp(0.94rem, 0.42vw + 0.92rem, 1.08rem);
    line-height: 1.3;
    letter-spacing: 0.022em;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 12px 30px -11px rgba(15, 76, 129, 0.52),
        0 0 0 1px rgba(245, 197, 24, 0.32),
        0 0 16px -3px rgba(245, 197, 24, 0.22);
    isolation: isolate;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
    will-change: transform;
    cursor: pointer;
    outline: none;
}

.jm-leandrogym-cta__btn-accent {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 12px 0 rgba(245, 197, 24, 0.32);
}

.jm-leandrogym-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.jm-leandrogym-cta__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.jm-leandrogym-cta__btn:hover,
.jm-leandrogym-cta__btn:focus-visible {
    transform: translateY(-3px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 20px 44px -14px rgba(15, 76, 129, 0.62),
        0 0 22px -5px rgba(245, 197, 24, 0.38),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    text-decoration: none;
}

.jm-leandrogym-cta__btn:active {
    transform: translateY(-1px);
    transition-duration: .14s;
}

@media (max-width: 1199px) {
    .jm-leandrogym-showcase { padding: 5rem 0 5.75rem 0; }
    .jm-leandrogym-showcase__inner { max-width: 920px; gap: 2.25rem; }
    .jm-leandrogym-head__title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-leandrogym-card { max-width: 100%; }
    .jm-leandrogym-card__media { border-radius: 16px; }
    .jm-leandrogym-card__img { border-radius: 14px; }
}

@media (max-width: 991px) {
    .jm-leandrogym-showcase { padding: 4.25rem 0 5rem 0; }
    .jm-leandrogym-showcase__inner { max-width: 760px; gap: 2rem; }
    .jm-leandrogym-head__title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-leandrogym-card { max-width: 100%; }
    .jm-leandrogym-card__media { border-radius: 15px; }
    .jm-leandrogym-card__img { border-radius: 13px; }
}

@media (max-width: 639px) {
    .jm-leandrogym-showcase { padding: 3.5rem 0 4.25rem 0; }
    .jm-leandrogym-showcase__inner { max-width: 100%; gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-leandrogym-head { gap: 0.7rem; align-items: flex-start; }
    .jm-leandrogym-head__title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-leandrogym-card { max-width: 100%; }
    .jm-leandrogym-card__media { border-radius: 14px; }
    .jm-leandrogym-card__accent { width: 4px; top: 10%; bottom: 10%; }
    .jm-leandrogym-card__img { border-radius: 12px; }
    .jm-leandrogym-cta__btn { padding: 0.68rem 1rem 0.68rem 1.65rem; font-size: 0.94rem; border-radius: 10px; }
    .jm-leandrogym-cta__btn-icon { width: 18px; height: 18px; }
}

/* ==========================================================
 *   [ PÁGINA FARMANORTE SUBCATEGORÍA DROGUERÍAS (page-farmanorte.php) ]
 *   Subcategoría dentro de Droguerías "Farmanorte".
 *   CLON estructura Leandro Gym (1 card panorámica + botón debajo
 *   subcategoría Droguerías). Card entera clickeable WhatsApp +
 *   botón inferior CTA label user VERBATIM: "10% de Descuento en
 *   tus Pedidos." (10% numérico, Descuento/Pedidos mayúscula
 *   inicial; preposiciones/posesivos de/en/tus minúsculas; punto
 *   final exactamente como lo escribió el usuario).
 *   Card = 100% ancho TODOS breakpoints (igual FIX Ferricentro:
 *   card imagen = ANCHO EXACTO botón inferior).
 *   Campaña WhatsApp helper = Farmanorte - Pedidos.
 *   (Colocado ANTES del bloque FERRETERIAS y DESPUÉS LEANDRO GYM)
 * ========================================================== */

.jm-farmanorte-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-farmanorte-showcase {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

.jm-farmanorte-showcase__inner {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.75rem;
}

.jm-farmanorte-head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-farmanorte-head__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 2px 0 rgba(12,47,82,0.25) inset,
        0 10px 26px -10px rgba(15,76,129,0.42),
        0 0 0 1px rgba(15,76,129,0.22);
}

.jm-farmanorte-head__pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px 0 rgba(245,197,24,0.4);
}

.jm-farmanorte-head__pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
}

.jm-farmanorte-head__title {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.45rem, 1.55vw + 1.25rem, 2.15rem);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: none;
    text-wrap: balance;
    text-align: left;
}

.jm-farmanorte-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    animation: jm-farmanorte-card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0s;
}

@keyframes jm-farmanorte-card-in {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.jm-farmanorte-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    margin: 0;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 18px;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.jm-farmanorte-card__wrap:hover,
.jm-farmanorte-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    color: inherit;
}

.jm-farmanorte-card__media {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    background-color: #ffffff;
    isolation: isolate;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 16px 44px -20px rgba(12, 47, 82, 0.24),
        0 4px 16px -6px rgba(12, 47, 82, 0.15),
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 0 14px -2px rgba(245, 197, 24, 0.2);
    transition:
        border-radius 0.25s ease,
        box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.25s ease;
}

.jm-farmanorte-card__accent {
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 4px;
    z-index: 2;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.4);
}

.jm-farmanorte-card__img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: fill;
    object-position: center center;
    transform: scale(1) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.32s ease;
    will-change: transform;
}

.jm-farmanorte-card__wrap:hover .jm-farmanorte-card__img {
    transform: scale(1.02) !important;
    filter: saturate(1.08) contrast(1.03);
}

.jm-farmanorte-card__wrap:hover .jm-farmanorte-card__media {
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.08) inset,
        0 28px 66px -22px rgba(12, 47, 82, 0.3),
        0 8px 22px -6px rgba(12, 47, 82, 0.2),
        0 0 26px -4px rgba(245, 197, 24, 0.3),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 18px -2px rgba(245, 197, 24, 0.35);
}

.jm-farmanorte-cta {
    width: 100%;
    max-width: 100%;
    padding: 0.2rem 0 0 0;
    margin: 0;
    display: block;
}

.jm-farmanorte-cta__btn {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.76rem 1.15rem 0.76rem 1.9rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: clamp(0.94rem, 0.42vw + 0.92rem, 1.08rem);
    line-height: 1.3;
    letter-spacing: 0.022em;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 12px 30px -11px rgba(15, 76, 129, 0.52),
        0 0 0 1px rgba(245, 197, 24, 0.32),
        0 0 16px -3px rgba(245, 197, 24, 0.22);
    isolation: isolate;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
    will-change: transform;
    cursor: pointer;
    outline: none;
}

.jm-farmanorte-cta__btn-accent {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 12px 0 rgba(245, 197, 24, 0.32);
}

.jm-farmanorte-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.jm-farmanorte-cta__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.jm-farmanorte-cta__btn:hover,
.jm-farmanorte-cta__btn:focus-visible {
    transform: translateY(-3px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 20px 44px -14px rgba(15, 76, 129, 0.62),
        0 0 22px -5px rgba(245, 197, 24, 0.38),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    text-decoration: none;
}

.jm-farmanorte-cta__btn:active {
    transform: translateY(-1px);
    transition-duration: .14s;
}

@media (max-width: 1199px) {
    .jm-farmanorte-showcase { padding: 5rem 0 5.75rem 0; }
    .jm-farmanorte-showcase__inner { max-width: 920px; gap: 2.25rem; }
    .jm-farmanorte-head__title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-farmanorte-card { max-width: 100%; }
    .jm-farmanorte-card__media { border-radius: 16px; }
    .jm-farmanorte-card__img { border-radius: 14px; }
}

@media (max-width: 991px) {
    .jm-farmanorte-showcase { padding: 4.25rem 0 5rem 0; }
    .jm-farmanorte-showcase__inner { max-width: 760px; gap: 2rem; }
    .jm-farmanorte-head__title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-farmanorte-card { max-width: 100%; }
    .jm-farmanorte-card__media { border-radius: 15px; }
    .jm-farmanorte-card__img { border-radius: 13px; }
}

@media (max-width: 639px) {
    .jm-farmanorte-showcase { padding: 3.5rem 0 4.25rem 0; }
    .jm-farmanorte-showcase__inner { max-width: 100%; gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-farmanorte-head { gap: 0.7rem; align-items: flex-start; }
    .jm-farmanorte-head__title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-farmanorte-card { max-width: 100%; }
    .jm-farmanorte-card__media { border-radius: 14px; }
    .jm-farmanorte-card__accent { width: 4px; top: 10%; bottom: 10%; }
    .jm-farmanorte-card__img { border-radius: 12px; }
    .jm-farmanorte-cta__btn { padding: 0.68rem 1rem 0.68rem 1.65rem; font-size: 0.94rem; border-radius: 10px; }
    .jm-farmanorte-cta__btn-icon { width: 18px; height: 18px; }
}

/* ==========================================================
 *   [ PÁGINA OSPINAS TRANSFORMA SUBCATEGORÍA INMOBILIARIA
 *                         (page-ospinas-transforma.php) ]
 *   Subcategoría Inmobiliaria "Ospinas Transforma".
 *   DISEÑO TEXTO-PURO (igual estructura que Mar y Zielo
 *   pero fondo blanco NO crema, título principal VINO TINTO
 *   y grid 2 columnas 4 párrafos extraídos VERBATIM de la
 *   imagen enviada por user).
 *   Pill left gold bar · H2 izquierda Ospinas Transforma.
 *   Título grande vino tinto: "Somos una empresa integral
 *   en servicios inmobiliarios con una trayectoria de más
 *   de 94 años."
 *   Grid 2 cols 4 párrafos → 1 col tablet/móvil.
 *   Botón debajo label VERBATIM botón user imagen (sin punto):
 *   "Conoce nuestros proyectos".
 *   Campaña WhatsApp helper = Ospinas Transforma - Inmobiliaria.
 *   (Colocado ANTES del bloque FERRETERIAS y DESPUÉS FARMANORTE)
 * ========================================================== */

.jm-ospinas-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-ospinas-showcase {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

.jm-ospinas-showcase__inner {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 3rem;
}

.jm-ospinas-head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-ospinas-head__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 2px 0 rgba(12,47,82,0.25) inset,
        0 10px 26px -10px rgba(15,76,129,0.42),
        0 0 0 1px rgba(15,76,129,0.22);
}

.jm-ospinas-head__pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px 0 rgba(245,197,24,0.4);
}

.jm-ospinas-head__pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
}

.jm-ospinas-head__title {
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.45rem, 1.55vw + 1.25rem, 2.15rem);
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: none;
    text-wrap: balance;
    text-align: left;
}

.jm-ospinas-box {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 3.25rem 3.75rem 3.5rem 3.75rem;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 20px;
    border: 2px solid var(--jm-c-gold, #f5c518);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 2px 0 rgba(15, 76, 129, 0.06) inset,
        0 22px 58px -24px rgba(12, 47, 82, 0.22),
        0 6px 22px -8px rgba(12, 47, 82, 0.14),
        0 0 0 1px rgba(245, 197, 24, 0.32),
        0 0 18px -3px rgba(245, 197, 24, 0.2);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.75rem;
}

.jm-ospinas-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14%;
    bottom: 14%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 12px 0 rgba(245, 197, 24, 0.32);
    z-index: 2;
    pointer-events: none;
}

.jm-ospinas-box__title {
    width: 100%;
    margin: 0;
    padding: 0 0 0 0.35rem;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(1.55rem, 1.9vw + 1.3rem, 2.75rem);
    line-height: 1.24;
    font-weight: 800;
    letter-spacing: -0.005em;
    text-transform: none;
    text-wrap: balance;
    text-align: left;
    position: relative;
    z-index: 3;
}

.jm-ospinas-box__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    column-gap: 3rem;
    row-gap: 1.75rem;
    align-items: start;
    justify-items: stretch;
    position: relative;
    z-index: 3;
}

.jm-ospinas-box__text {
    margin: 0;
    padding: 0;
    color: var(--jm-c-navy-900, #0c2f52);
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 450;
    font-size: clamp(0.94rem, 0.22vw + 0.92rem, 1.04rem);
    line-height: 1.78;
    letter-spacing: 0.004em;
    text-align: left;
    text-wrap: pretty;
}

.jm-ospinas-cta {
    width: 100%;
    max-width: 100%;
    padding: 0.2rem 0 0 0;
    margin: 0;
    display: block;
}

.jm-ospinas-cta__btn {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.85rem 1.25rem 0.85rem 2rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: clamp(0.98rem, 0.42vw + 0.96rem, 1.12rem);
    line-height: 1.3;
    letter-spacing: 0.018em;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 47, 82, 0.25) inset,
        0 14px 34px -12px rgba(15, 76, 129, 0.52),
        0 0 0 1px rgba(245, 197, 24, 0.32),
        0 0 16px -3px rgba(245, 197, 24, 0.22);
    isolation: isolate;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
    will-change: transform;
    cursor: pointer;
    outline: none;
}

.jm-ospinas-cta__btn-accent {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 12px 0 rgba(245, 197, 24, 0.32);
}

.jm-ospinas-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.jm-ospinas-cta__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.jm-ospinas-cta__btn:hover,
.jm-ospinas-cta__btn:focus-visible {
    transform: translateY(-3px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 22px 48px -16px rgba(15, 76, 129, 0.62),
        0 0 22px -5px rgba(245, 197, 24, 0.38),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    text-decoration: none;
}

.jm-ospinas-cta__btn:active {
    transform: translateY(-1px);
    transition-duration: .14s;
}

@media (max-width: 1199px) {
    .jm-ospinas-showcase { padding: 5rem 0 5.75rem 0; }
    .jm-ospinas-showcase__inner { max-width: 1000px; gap: 2.5rem; }
    .jm-ospinas-box { padding: 2.75rem 3rem 3rem 3rem; gap: 2.25rem; border-radius: 18px; }
    .jm-ospinas-head__title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-ospinas-box__title { font-size: clamp(1.4rem, 1.55vw + 1.2rem, 2.35rem); }
    .jm-ospinas-box__grid { column-gap: 2.5rem; row-gap: 1.6rem; }
}

@media (max-width: 991px) {
    .jm-ospinas-showcase { padding: 4.25rem 0 5rem 0; }
    .jm-ospinas-showcase__inner { max-width: 820px; gap: 2.25rem; }
    .jm-ospinas-box { padding: 2.25rem 2.25rem 2.5rem 2.25rem; gap: 2rem; border-radius: 17px; }
    .jm-ospinas-head__title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-ospinas-box__title { font-size: clamp(1.25rem, 1.3vw + 1.12rem, 1.95rem); }
    .jm-ospinas-box__grid { grid-template-columns: 1fr; grid-template-rows: auto; column-gap: 0; row-gap: 1.35rem; }
    .jm-ospinas-box::before { top: 10%; bottom: 10%; }
    .jm-ospinas-cta__btn { padding: 0.78rem 1.15rem 0.78rem 1.85rem; font-size: 1rem; border-radius: 10px; }
}

@media (max-width: 639px) {
    .jm-ospinas-showcase { padding: 3.5rem 0 4.25rem 0; }
    .jm-ospinas-showcase__inner { max-width: 100%; gap: 1.85rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-ospinas-head { gap: 0.7rem; align-items: flex-start; }
    .jm-ospinas-head__title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-ospinas-box { padding: 1.85rem 1.35rem 2rem 1.6rem; gap: 1.75rem; border-radius: 15px; }
    .jm-ospinas-box::before { top: 8%; bottom: 8%; }
    .jm-ospinas-box__title { padding-left: 0.2rem; font-size: clamp(1.08rem, 5.2vw + 1rem, 1.7rem); line-height: 1.28; }
    .jm-ospinas-box__grid { row-gap: 1.15rem; }
    .jm-ospinas-box__text { font-size: 0.94rem; line-height: 1.72; }
    .jm-ospinas-cta__btn { padding: 0.72rem 1rem 0.72rem 1.65rem; font-size: 0.96rem; border-radius: 10px; }
    .jm-ospinas-cta__btn-icon { width: 18px; height: 18px; }
}

/* ==========================================================
 *   [ PÁGINA JARAMILLO MORA CONSTRUCTORA (page-jaramillo-mora-constructora.php) ]
 *   Clon estructura/diseño Ospinas Transforma: texto-puro fondo blanco.
 *   Pill + H2 izquierda subcategoría CONSTRUCTORAS / Título principal NAVY.
 *   Grid 2 columnas → 1 col tablet móvil.
 *   Párrafo 3 (GRI 2021 reporte 2025) ocupa TODO el ancho
 *   (span-2 full row).
 *   Posición: DESPUÉS Ospinas Transforma / ANTES bloque Ferreterías General.
 * ========================================================== */

/* ---------------- 0. MAIN + SECTION ---------------- */

.jm-jaramillomora-main {
    position: relative;
    width: 100%;
    min-height: 70vh;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-jaramillomora-showcase {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    overflow: hidden;
    z-index: 2;
    background:
        radial-gradient(circle at 85% 0%, rgba(245, 197, 24, 0.075) 0%, rgba(245, 197, 24, 0) 40%),
        radial-gradient(circle at 15% 100%, rgba(15, 76, 129, 0.085) 0%, rgba(15, 76, 129, 0) 42%),
        #ffffff;
}

.jm-jaramillomora-showcase__inner {
    position: relative;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 3.25rem;
    z-index: 2;
}

/* ---------------- 1. HEADER IZQUIERDA pill + H2 ---------------- */

.jm-jaramillomora-head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-jaramillomora-head__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 2px 0 rgba(12,47,82,0.25) inset,
        0 10px 26px -10px rgba(15,76,129,0.42),
        0 0 0 1px rgba(15,76,129,0.22);
}

.jm-jaramillomora-head__pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px 0 rgba(245,197,24,0.4);
}

.jm-jaramillomora-head__pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    line-height: 1.35;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    max-width: 100%;
    z-index: 2;
}

.jm-jaramillomora-head__title {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 1.55vw + 1.3rem, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-align: left;
    text-wrap: balance;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ---------------- 2. CAJA CONTENIDO TEXTO fondo blanco BORDE GOLD ---------------- */

.jm-jaramillomora-box {
    position: relative;
    width: 100%;
    padding: 3rem 3.25rem 3.25rem 3.25rem;
    background-color: #ffffff;
    border: 2px solid rgba(245, 197, 24, 0.55);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 0 0 1px rgba(255, 255, 255, 1),
        0 0 0 6px rgba(245, 197, 24, 0.10),
        0 36px 88px -36px rgba(10, 37, 64, 0.34),
        0 22px 54px -24px rgba(10, 37, 64, 0.22),
        0 0 32px -8px rgba(245, 197, 24, 0.34);
    isolation: isolate;
    overflow: hidden;
}

.jm-jaramillomora-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 4px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 12%, #f5c518 50%, #d9ac10 88%, rgba(245, 197, 24, 0) 100%);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(245, 197, 24, 0.55);
    z-index: 2;
    pointer-events: none;
}

.jm-jaramillomora-box__title {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 0 0 0.25rem;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 1.7vw + 1.25rem, 2.55rem);
    line-height: 1.18;
    letter-spacing: -0.008em;
    text-align: left;
    text-wrap: pretty;
    z-index: 3;
}

/* Grid 2 columnas → 1 col móvil (igual Ospinas Transforma) */

.jm-jaramillomora-box__grid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    column-gap: 3rem;
    row-gap: 1.75rem;
    align-items: start;
    justify-content: stretch;
    z-index: 3;
}

.jm-jaramillomora-box__text {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #2b3b52;
    font-family: 'Segoe UI', Roboto, 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.78;
    letter-spacing: 0.004em;
    text-align: left;
    hyphens: auto;
}

/* Párrafo 3 (GRI 2021 reporte 2025): OCUPA LAS 2 COLUMNAS enteras (una fila completa) */

.jm-jaramillomora-box__text--span-2 {
    grid-column: 1 / -1;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(10, 37, 64, 0.08);
    padding-top: 1.5rem;
    margin-top: 0.25rem;
}

/* ---------------- 3. BOTÓN CTA NAVY (label VERBATIM imagen: Conoce nuestros Proyectos) ---------------- */

.jm-jaramillomora-cta {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 3;
}

.jm-jaramillomora-cta__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.85rem 1.55rem 0.85rem 2.15rem;
    width: 100%;
    max-width: 100%;
    background-color: var(--jm-c-primary, #0f4c81);
    color: #ffffff;
    border: 2px solid rgba(245, 197, 24, 0.62);
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.15;
    letter-spacing: 0.01em;
    white-space: normal;
    text-align: center;
    overflow: hidden;
    transition: transform .22s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 57, 97, 0.28) inset,
        0 28px 64px -22px rgba(15, 76, 129, 0.65),
        0 0 24px -7px rgba(245, 197, 24, 0.42),
        0 0 0 3px rgba(245, 197, 24, 0.18),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    isolation: isolate;
}

.jm-jaramillomora-cta__btn-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 12%, #f5c518 50%, #d9ac10 88%, rgba(245, 197, 24, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

.jm-jaramillomora-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    color: currentColor;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.jm-jaramillomora-cta__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.jm-jaramillomora-cta__btn:hover,
.jm-jaramillomora-cta__btn:focus-visible {
    transform: translateY(-3px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 22px 48px -16px rgba(15, 76, 129, 0.62),
        0 0 22px -5px rgba(245, 197, 24, 0.38),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    text-decoration: none;
}

.jm-jaramillomora-cta__btn:active {
    transform: translateY(-1px);
    transition-duration: .14s;
}

/* ---------------- MEDIA QUERIES (3 breakpoints standard JM) ---------------- */

@media (max-width: 1199px) {
    .jm-jaramillomora-showcase { padding: 5rem 0 5.75rem 0; }
    .jm-jaramillomora-showcase__inner { max-width: 1000px; gap: 2.5rem; }
    .jm-jaramillomora-box { padding: 2.75rem 3rem 3rem 3rem; gap: 2.25rem; border-radius: 18px; }
    .jm-jaramillomora-head__title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-jaramillomora-box__title { font-size: clamp(1.4rem, 1.55vw + 1.2rem, 2.35rem); }
    .jm-jaramillomora-box__grid { column-gap: 2.5rem; row-gap: 1.6rem; }
}

@media (max-width: 991px) {
    .jm-jaramillomora-showcase { padding: 4.25rem 0 5rem 0; }
    .jm-jaramillomora-showcase__inner { max-width: 820px; gap: 2.25rem; }
    .jm-jaramillomora-box { padding: 2.25rem 2.25rem 2.5rem 2.25rem; gap: 2rem; border-radius: 17px; }
    .jm-jaramillomora-head__title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-jaramillomora-box__title { font-size: clamp(1.25rem, 1.3vw + 1.12rem, 1.95rem); }
    .jm-jaramillomora-box__grid { grid-template-columns: 1fr; grid-template-rows: auto; column-gap: 0; row-gap: 1.35rem; }
    .jm-jaramillomora-box__text--span-2 { padding-top: 1.35rem; margin-top: 0; }
    .jm-jaramillomora-box::before { top: 10%; bottom: 10%; }
    .jm-jaramillomora-cta__btn { padding: 0.78rem 1.15rem 0.78rem 1.85rem; font-size: 1rem; border-radius: 10px; }
}

@media (max-width: 639px) {
    .jm-jaramillomora-showcase { padding: 3.5rem 0 4.25rem 0; }
    .jm-jaramillomora-showcase__inner { max-width: 100%; gap: 1.85rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-jaramillomora-head { gap: 0.7rem; align-items: flex-start; }
    .jm-jaramillomora-head__title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-jaramillomora-box { padding: 1.85rem 1.35rem 2rem 1.6rem; gap: 1.75rem; border-radius: 15px; }
    .jm-jaramillomora-box::before { top: 8%; bottom: 8%; }
    .jm-jaramillomora-box__title { padding-left: 0.2rem; font-size: clamp(1.08rem, 5.2vw + 1rem, 1.7rem); line-height: 1.28; }
    .jm-jaramillomora-box__grid { row-gap: 1.15rem; }
    .jm-jaramillomora-box__text { font-size: 0.94rem; line-height: 1.72; }
    .jm-jaramillomora-box__text--span-2 { padding-top: 1.15rem; }
    .jm-jaramillomora-cta__btn { padding: 0.72rem 1rem 0.72rem 1.65rem; font-size: 0.96rem; border-radius: 10px; }
    .jm-jaramillomora-cta__btn-icon { width: 18px; height: 18px; }
}

/* ==========================================================
 *   [ PÁGINA CONSTRUCTORA CASA (page-constructora-casa.php) ]
 *   Subcategoría CONSTRUCTORAS "Constructora CASA"
 *   (Compañía de Constructores Asociados S.A. – CASA, 1979).
 *   CLON estructura Ospinas Transforma: texto-puro fondo blanco,
 *   Pill + H2 izquierda subcategoría CONSTRUCTORAS,
 *   Título principal NAVY JM (NO verde original imagen).
 *   Grid 2 columnas → 1 col tablet móvil.
 *   Párrafo 1 VERBATIM = FILA COMPLETA (span-2 ancho total).
 *   Posición: DESPUÉS Jaramillo Mora / ANTES bloque Ferreterías.
 * ========================================================== */

/* ---------------- 0. MAIN + SECTION ---------------- */

.jm-constructoracasa-main {
    position: relative;
    width: 100%;
    min-height: 70vh;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-constructoracasa-showcase {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    overflow: hidden;
    z-index: 2;
    background:
        radial-gradient(circle at 85% 0%, rgba(245, 197, 24, 0.075) 0%, rgba(245, 197, 24, 0) 40%),
        radial-gradient(circle at 15% 100%, rgba(15, 76, 129, 0.085) 0%, rgba(15, 76, 129, 0) 42%),
        #ffffff;
}

.jm-constructoracasa-showcase__inner {
    position: relative;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 3.25rem;
    z-index: 2;
}

/* ---------------- 1. HEADER IZQUIERDA pill + H2 (IGUAL OSPINAS) ---------------- */

.jm-constructoracasa-head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-constructoracasa-head__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 2px 0 rgba(12,47,82,0.25) inset,
        0 10px 26px -10px rgba(15,76,129,0.42),
        0 0 0 1px rgba(15,76,129,0.22);
}

.jm-constructoracasa-head__pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px 0 rgba(245,197,24,0.4);
}

.jm-constructoracasa-head__pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    line-height: 1.35;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    max-width: 100%;
    z-index: 2;
}

.jm-constructoracasa-head__title {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 1.55vw + 1.3rem, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-align: left;
    text-wrap: balance;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ---------------- 2. CAJA CONTENIDO TEXTO fondo blanco BORDE GOLD ---------------- */

.jm-constructoracasa-box {
    position: relative;
    width: 100%;
    padding: 3rem 3.25rem 3.25rem 3.25rem;
    background-color: #ffffff;
    border: 2px solid rgba(245, 197, 24, 0.55);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 0 0 1px rgba(255, 255, 255, 1),
        0 0 0 6px rgba(245, 197, 24, 0.10),
        0 36px 88px -36px rgba(10, 37, 64, 0.34),
        0 22px 54px -24px rgba(10, 37, 64, 0.22),
        0 0 32px -8px rgba(245, 197, 24, 0.34);
    isolation: isolate;
    overflow: hidden;
}

.jm-constructoracasa-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 4px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 12%, #f5c518 50%, #d9ac10 88%, rgba(245, 197, 24, 0) 100%);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(245, 197, 24, 0.55);
    z-index: 2;
    pointer-events: none;
}

.jm-constructoracasa-box__title {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 0 0 0.25rem;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 1.7vw + 1.25rem, 2.55rem);
    line-height: 1.18;
    letter-spacing: -0.008em;
    text-align: center;
    text-wrap: pretty;
    z-index: 3;
}

.jm-constructoracasa-box__grid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    column-gap: 3rem;
    row-gap: 1.75rem;
    align-items: start;
    justify-content: stretch;
    z-index: 3;
}

.jm-constructoracasa-box__text {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #2b3b52;
    font-family: 'Segoe UI', Roboto, 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.78;
    letter-spacing: 0.004em;
    text-align: center;
    hyphens: auto;
}

/* Párrafo único VERBATIM = OCUPA 2 COLUMNAS COMPLETAS (todo el ancho) */
.jm-constructoracasa-box__text--span-2 {
    grid-column: 1 / -1;
    padding-top: 0.25rem;
}

/* ---------------- 3. BOTÓN CTA NAVY label VERBATIM imagen ---------------- */

.jm-constructoracasa-cta {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 3;
}

.jm-constructoracasa-cta__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.85rem 1.55rem 0.85rem 2.15rem;
    width: 100%;
    max-width: 100%;
    background-color: var(--jm-c-primary, #0f4c81);
    color: #ffffff;
    border: 2px solid rgba(245, 197, 24, 0.62);
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.15;
    letter-spacing: 0.01em;
    white-space: normal;
    text-align: center;
    overflow: hidden;
    transition: transform .22s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 57, 97, 0.28) inset,
        0 28px 64px -22px rgba(15, 76, 129, 0.65),
        0 0 24px -7px rgba(245, 197, 24, 0.42),
        0 0 0 3px rgba(245, 197, 24, 0.18),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    isolation: isolate;
}

.jm-constructoracasa-cta__btn-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 12%, #f5c518 50%, #d9ac10 88%, rgba(245, 197, 24, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

.jm-constructoracasa-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    color: currentColor;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.jm-constructoracasa-cta__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.jm-constructoracasa-cta__btn:hover,
.jm-constructoracasa-cta__btn:focus-visible {
    transform: translateY(-3px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 22px 48px -16px rgba(15, 76, 129, 0.62),
        0 0 22px -5px rgba(245, 197, 24, 0.38),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    text-decoration: none;
}

.jm-constructoracasa-cta__btn:active {
    transform: translateY(-1px);
    transition-duration: .14s;
}

/* ---------------- MEDIA QUERIES (3 breakpoints standard JM) ---------------- */

@media (max-width: 1199px) {
    .jm-constructoracasa-showcase { padding: 5rem 0 5.75rem 0; }
    .jm-constructoracasa-showcase__inner { max-width: 1000px; gap: 2.5rem; }
    .jm-constructoracasa-box { padding: 2.75rem 3rem 3rem 3rem; gap: 2.25rem; border-radius: 18px; }
    .jm-constructoracasa-head__title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-constructoracasa-box__title { font-size: clamp(1.4rem, 1.55vw + 1.2rem, 2.35rem); }
    .jm-constructoracasa-box__grid { column-gap: 2.5rem; row-gap: 1.6rem; }
}

@media (max-width: 991px) {
    .jm-constructoracasa-showcase { padding: 4.25rem 0 5rem 0; }
    .jm-constructoracasa-showcase__inner { max-width: 820px; gap: 2.25rem; }
    .jm-constructoracasa-box { padding: 2.25rem 2.25rem 2.5rem 2.25rem; gap: 2rem; border-radius: 17px; }
    .jm-constructoracasa-head__title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-constructoracasa-box__title { font-size: clamp(1.25rem, 1.3vw + 1.12rem, 1.95rem); text-align: left; }
    .jm-constructoracasa-box__grid { grid-template-columns: 1fr; grid-template-rows: auto; column-gap: 0; row-gap: 1.35rem; }
    .jm-constructoracasa-box__text { text-align: left; }
    .jm-constructoracasa-box__text--span-2 { padding-top: 0; }
    .jm-constructoracasa-box::before { top: 10%; bottom: 10%; }
    .jm-constructoracasa-cta__btn { padding: 0.78rem 1.15rem 0.78rem 1.85rem; font-size: 1rem; border-radius: 10px; }
}

@media (max-width: 639px) {
    .jm-constructoracasa-showcase { padding: 3.5rem 0 4.25rem 0; }
    .jm-constructoracasa-showcase__inner { max-width: 100%; gap: 1.85rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-constructoracasa-head { gap: 0.7rem; align-items: flex-start; }
    .jm-constructoracasa-head__title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-constructoracasa-box { padding: 1.85rem 1.35rem 2rem 1.6rem; gap: 1.75rem; border-radius: 15px; }
    .jm-constructoracasa-box::before { top: 8%; bottom: 8%; }
    .jm-constructoracasa-box__title { padding-left: 0.2rem; font-size: clamp(1.08rem, 5.2vw + 1rem, 1.7rem); line-height: 1.28; }
    .jm-constructoracasa-box__grid { row-gap: 1.15rem; }
    .jm-constructoracasa-box__text { font-size: 0.94rem; line-height: 1.72; text-align: left; }
    .jm-constructoracasa-cta__btn { padding: 0.72rem 1rem 0.72rem 1.65rem; font-size: 0.96rem; border-radius: 10px; }
    .jm-constructoracasa-cta__btn-icon { width: 18px; height: 18px; }
}

/* ==========================================================
 *   [ PÁGINA VIAJES CIRCULAR (page-viajes-circular.php) ]
 *   Subcategoría TURISMO "Viajes Circular"
 *   (Agencia de viajes 30 años, 16 sucursales Colombia).
 *   CLON estructura Ospinas Transforma y añade BLOQUE ADICIONAL
 *   "Beneficios para ti" con 3 tarjetas beneficios estilo JM
 *   navy/gold (grid 3 cols desktop / 2 cols tablet / 1 col móvil).
 *   Orden VERBATIM imagen user:
 *     1) ¿Quiénes somos? (título principal)
 *     2) Párrafo intro agencia 30 años 16 sucursales (span-2 ancho total)
 *     3) Subtítulo "Beneficios para ti"
 *     4) Grid 3 tarjetas beneficios VERBATIM textos
 *     5) Botón CTA: "Pregunta por tu viaje"
 *   Paleta navy JM #0f4c81 (NO morado original imagen).
 *   Posición: DESPUÉS Constructora CASA / ANTES Ferreterías General.
 * ========================================================== */

/* ---------------- 0. MAIN + SECTION ---------------- */

.jm-viajescircular-main {
    position: relative;
    width: 100%;
    min-height: 70vh;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-viajescircular-showcase {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    overflow: hidden;
    z-index: 2;
    background:
        radial-gradient(circle at 85% 0%, rgba(245, 197, 24, 0.075) 0%, rgba(245, 197, 24, 0) 40%),
        radial-gradient(circle at 15% 100%, rgba(15, 76, 129, 0.085) 0%, rgba(15, 76, 129, 0) 42%),
        #ffffff;
}

.jm-viajescircular-showcase__inner {
    position: relative;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 3.25rem;
    z-index: 2;
}

/* ---------------- 1. HEADER IZQUIERDA pill + H2 (IGUAL OSPINAS) ---------------- */

.jm-viajescircular-head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-viajescircular-head__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 2px 0 rgba(12,47,82,0.25) inset,
        0 10px 26px -10px rgba(15,76,129,0.42),
        0 0 0 1px rgba(15,76,129,0.22);
}

.jm-viajescircular-head__pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px 0 rgba(245,197,24,0.4);
}

.jm-viajescircular-head__pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    line-height: 1.35;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    max-width: 100%;
    z-index: 2;
}

.jm-viajescircular-head__title {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 1.55vw + 1.3rem, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-align: left;
    text-wrap: balance;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ---------------- 2. CAJA CONTENIDO TEXTO fondo blanco BORDE GOLD ---------------- */

.jm-viajescircular-box {
    position: relative;
    width: 100%;
    padding: 3rem 3.25rem 3.25rem 3.25rem;
    background-color: #ffffff;
    border: 2px solid rgba(245, 197, 24, 0.55);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 0 0 1px rgba(255, 255, 255, 1),
        0 0 0 6px rgba(245, 197, 24, 0.10),
        0 36px 88px -36px rgba(10, 37, 64, 0.34),
        0 22px 54px -24px rgba(10, 37, 64, 0.22),
        0 0 32px -8px rgba(245, 197, 24, 0.34);
    isolation: isolate;
    overflow: hidden;
}

.jm-viajescircular-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 4px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 12%, #f5c518 50%, #d9ac10 88%, rgba(245, 197, 24, 0) 100%);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(245, 197, 24, 0.55);
    z-index: 2;
    pointer-events: none;
}

.jm-viajescircular-box__title {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 0 0 0.25rem;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 900;
    font-size: clamp(1.7rem, 1.85vw + 1.4rem, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: left;
    text-wrap: pretty;
    z-index: 3;
}

.jm-viajescircular-box__grid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    column-gap: 3rem;
    row-gap: 1.75rem;
    align-items: start;
    justify-content: stretch;
    z-index: 3;
}

.jm-viajescircular-box__text {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #2b3b52;
    font-family: 'Segoe UI', Roboto, 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.78;
    letter-spacing: 0.004em;
    text-align: left;
    hyphens: auto;
}

/* Párrafo intro VERBATIM = OCUPA 2 COLUMNAS COMPLETAS (todo el ancho) */
.jm-viajescircular-box__text--span-2 {
    grid-column: 1 / -1;
    padding-top: 0.25rem;
}

/* ---------------- 3. SUBTÍTULO Beneficios para ti ---------------- */

.jm-viajescircular-beneficios__title {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 1rem 0 0 0;
    padding: 0 0 0 0.25rem;
    color: #1e2a3c;
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: clamp(1.35rem, 1.3vw + 1.15rem, 2rem);
    line-height: 1.15;
    letter-spacing: -0.006em;
    text-align: left;
    text-wrap: pretty;
    z-index: 3;
}

.jm-viajescircular-beneficios__title::after {
    content: "";
    display: block;
    width: 64px;
    height: 3.5px;
    margin: 0.65rem 0 0 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--jm-c-gold-200, #ffe082) 0%, var(--jm-c-gold, #f5c518) 100%);
    box-shadow: 0 0 8px 0 rgba(245, 197, 24, 0.35);
}

/* ---------------- 4. GRID 3 TARJETAS BENEFICIOS estilo JM ---------------- */

.jm-viajescircular-beneficios__grid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 1.65rem;
    align-items: stretch;
    justify-content: stretch;
    z-index: 3;
}

.jm-viajescircular-benefit {
    position: relative;
    width: 100%;
    padding: 2rem 1.8rem 2rem 1.8rem;
    background-color: #ffffff;
    border: 2px solid rgba(15, 76, 129, 0.14);
    border-radius: 16px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 0 0 1px rgba(255,255,255,1),
        0 0 0 5px rgba(245, 197, 24, 0.08),
        0 26px 60px -28px rgba(10, 37, 64, 0.32),
        0 14px 32px -18px rgba(10, 37, 64, 0.18);
    transition: transform .24s ease, border-color .22s ease, box-shadow .26s ease;
    overflow: hidden;
    isolation: isolate;
}

.jm-viajescircular-benefit::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, rgba(245, 197, 24, 0) 0%, #ffe082 14%, #f5c518 52%, #d9ac10 86%, rgba(245, 197, 24, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

.jm-viajescircular-benefit:hover,
.jm-viajescircular-benefit:focus-within {
    transform: translateY(-4px);
    border-color: rgba(245, 197, 24, 0.55);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 0 0 1px rgba(255,255,255,1),
        0 0 0 5px rgba(245, 197, 24, 0.16),
        0 32px 70px -24px rgba(15, 76, 129, 0.42),
        0 14px 32px -12px rgba(245, 197, 24, 0.28);
}

.jm-viajescircular-benefit__head {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    margin: 0 0 1.15rem 0;
    padding: 0;
    z-index: 2;
}

.jm-viajescircular-benefit__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(15, 76, 129, 0.22),
        0 10px 20px -10px rgba(15, 76, 129, 0.45),
        0 0 10px rgba(245, 197, 24, 0.18);
    padding: 0;
}

.jm-viajescircular-benefit:hover .jm-viajescircular-benefit__icon {
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-white, #ffffff);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.2) inset,
        0 0 0 1px rgba(12, 57, 97, 0.28),
        0 12px 24px -10px rgba(12, 57, 97, 0.55),
        0 0 14px rgba(245, 197, 24, 0.32);
}

.jm-viajescircular-benefit__title {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0.15rem 0 0 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 800;
    font-size: clamp(0.98rem, 0.28vw + 0.94rem, 1.12rem);
    line-height: 1.32;
    letter-spacing: -0.004em;
    text-align: left;
    text-wrap: pretty;
    z-index: 2;
}

.jm-viajescircular-benefit:hover .jm-viajescircular-benefit__title {
    color: var(--jm-c-primary-700, #0c3961);
}

.jm-viajescircular-benefit__desc {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 0 0 0.15rem;
    color: #34465f;
    font-family: 'Segoe UI', Roboto, 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 0.96rem;
    line-height: 1.68;
    letter-spacing: 0.002em;
    text-align: left;
    hyphens: auto;
    z-index: 2;
}

/* ---------------- 5. BOTÓN CTA NAVY label VERBATIM imagen ---------------- */

.jm-viajescircular-cta {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 3;
}

.jm-viajescircular-cta__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.85rem 1.55rem 0.85rem 2.15rem;
    width: 100%;
    max-width: 100%;
    background-color: var(--jm-c-primary, #0f4c81);
    color: #ffffff;
    border: 2px solid rgba(245, 197, 24, 0.62);
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.15;
    letter-spacing: 0.01em;
    white-space: normal;
    text-align: center;
    overflow: hidden;
    transition: transform .22s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 57, 97, 0.28) inset,
        0 28px 64px -22px rgba(15, 76, 129, 0.65),
        0 0 24px -7px rgba(245, 197, 24, 0.42),
        0 0 0 3px rgba(245, 197, 24, 0.18),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    isolation: isolate;
}

.jm-viajescircular-cta__btn-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 12%, #f5c518 50%, #d9ac10 88%, rgba(245, 197, 24, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

.jm-viajescircular-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    color: currentColor;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.jm-viajescircular-cta__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.jm-viajescircular-cta__btn:hover,
.jm-viajescircular-cta__btn:focus-visible {
    transform: translateY(-3px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 22px 48px -16px rgba(15, 76, 129, 0.62),
        0 0 22px -5px rgba(245, 197, 24, 0.38),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    text-decoration: none;
}

.jm-viajescircular-cta__btn:active {
    transform: translateY(-1px);
    transition-duration: .14s;
}

/* ---------------- MEDIA QUERIES (3 breakpoints standard JM) ---------------- */

@media (max-width: 1199px) {
    .jm-viajescircular-showcase { padding: 5rem 0 5.75rem 0; }
    .jm-viajescircular-showcase__inner { max-width: 1020px; gap: 2.5rem; }
    .jm-viajescircular-box { padding: 2.75rem 3rem 3rem 3rem; gap: 2rem; border-radius: 18px; }
    .jm-viajescircular-head__title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-viajescircular-box__title { font-size: clamp(1.5rem, 1.55vw + 1.3rem, 2.35rem); }
    .jm-viajescircular-beneficios__title { font-size: clamp(1.18rem, 1.1vw + 1.05rem, 1.72rem); }
    .jm-viajescircular-beneficios__grid { gap: 1.4rem; }
    .jm-viajescircular-benefit { padding: 1.75rem 1.5rem; }
}

@media (max-width: 991px) {
    .jm-viajescircular-showcase { padding: 4.25rem 0 5rem 0; }
    .jm-viajescircular-showcase__inner { max-width: 820px; gap: 2.25rem; }
    .jm-viajescircular-box { padding: 2.25rem 2.25rem 2.5rem 2.25rem; gap: 1.75rem; border-radius: 17px; }
    .jm-viajescircular-head__title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-viajescircular-box__title { font-size: clamp(1.3rem, 1.3vw + 1.15rem, 1.95rem); }
    .jm-viajescircular-beneficios__title { font-size: clamp(1.08rem, 1.6vw + 1rem, 1.5rem); }
    .jm-viajescircular-box__grid { grid-template-columns: 1fr; grid-template-rows: auto; column-gap: 0; row-gap: 1.35rem; }
    .jm-viajescircular-box__text--span-2 { padding-top: 0; }
    .jm-viajescircular-beneficios__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .jm-viajescircular-benefit { padding: 1.65rem 1.35rem; }
    .jm-viajescircular-benefit__icon { width: 42px; height: 42px; border-radius: 10px; }
    .jm-viajescircular-benefit__icon svg { width: 23px; height: 23px; }
    .jm-viajescircular-box::before { top: 10%; bottom: 10%; }
    .jm-viajescircular-cta__btn { padding: 0.78rem 1.15rem 0.78rem 1.85rem; font-size: 1rem; border-radius: 10px; }
}

@media (max-width: 639px) {
    .jm-viajescircular-showcase { padding: 3.5rem 0 4.25rem 0; }
    .jm-viajescircular-showcase__inner { max-width: 100%; gap: 1.85rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-viajescircular-head { gap: 0.7rem; align-items: flex-start; }
    .jm-viajescircular-head__title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-viajescircular-box { padding: 1.85rem 1.35rem 2rem 1.6rem; gap: 1.5rem; border-radius: 15px; }
    .jm-viajescircular-box::before { top: 8%; bottom: 8%; }
    .jm-viajescircular-box__title { padding-left: 0.2rem; font-size: clamp(1.15rem, 5.6vw + 1.05rem, 1.85rem); line-height: 1.22; }
    .jm-viajescircular-beneficios__title { padding-left: 0.2rem; font-size: clamp(1rem, 4.2vw + 0.95rem, 1.4rem); }
    .jm-viajescircular-beneficios__grid { grid-template-columns: 1fr; gap: 1.15rem; }
    .jm-viajescircular-benefit { padding: 1.5rem 1.25rem 1.5rem 1.35rem; border-radius: 14px; }
    .jm-viajescircular-benefit__icon { width: 40px; height: 40px; border-radius: 9px; }
    .jm-viajescircular-benefit__icon svg { width: 22px; height: 22px; }
    .jm-viajescircular-benefit__head { gap: 0.85rem; margin-bottom: 0.95rem; }
    .jm-viajescircular-box__text { font-size: 0.94rem; line-height: 1.72; }
    .jm-viajescircular-benefit__desc { font-size: 0.92rem; line-height: 1.65; }
    .jm-viajescircular-cta__btn { padding: 0.72rem 1rem 0.72rem 1.65rem; font-size: 0.96rem; border-radius: 10px; }
    .jm-viajescircular-cta__btn-icon { width: 18px; height: 18px; }
}

/* ==========================================================
 *   [ PÁGINA VIAJES CHAPINERO (page-viajes-chapinero.php) ]
 *   Subcategoría TURISMO "Viajes Chapinero".
 *   CLON estructura Ospinas/Viajes Circular + caja banner
 *   oscuro central.
 *   Orden VERBATIM imagen user:
 *     1) Título grande: "¡Hablemos!"
 *     2) Párrafo centrado: equipo soporte soluciones rápidas
 *        personalizadas satisfacer necesidades.
 *   Mejora de diseño JM al fondo gris plano original imagen:
 *   BOX = navy dark JM #0a2540 (no gris 50% neutro),
 *   textos blancos, acentos gold, padding grande,
 *   centrado 100% contenido.
 *   Botón label VERBATIM imagen: "Viaja con nosotros".
 *   Posición: DESPUÉS Viajes Circular / ANTES Ferreterías General.
 * ========================================================== */

/* ---------------- 0. MAIN + SECTION ---------------- */

.jm-viajeschapinero-main {
    position: relative;
    width: 100%;
    min-height: 70vh;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-viajeschapinero-showcase {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    overflow: hidden;
    z-index: 2;
    background:
        radial-gradient(circle at 85% 0%, rgba(245, 197, 24, 0.075) 0%, rgba(245, 197, 24, 0) 40%),
        radial-gradient(circle at 15% 100%, rgba(15, 76, 129, 0.085) 0%, rgba(15, 76, 129, 0) 42%),
        #ffffff;
}

.jm-viajeschapinero-showcase__inner {
    position: relative;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 3.25rem;
    z-index: 2;
}

/* ---------------- 1. HEADER IZQUIERDA pill + H2 (IGUAL OSPINAS) ---------------- */

.jm-viajeschapinero-head {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
}

.jm-viajeschapinero-head__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.52rem 1.05rem 0.52rem 1.65rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 2px 0 rgba(12,47,82,0.25) inset,
        0 10px 26px -10px rgba(15,76,129,0.42),
        0 0 0 1px rgba(15,76,129,0.22);
}

.jm-viajeschapinero-head__pill-left {
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 10px 0 rgba(245,197,24,0.4);
}

.jm-viajeschapinero-head__pill-text {
    color: var(--jm-c-white, #ffffff);
    font-weight: 800;
    font-size: clamp(0.8rem, 0.32vw + 0.78rem, 0.94rem);
    letter-spacing: 0.065em;
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    line-height: 1.35;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    max-width: 100%;
    z-index: 2;
}

.jm-viajeschapinero-head__title {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 1.55vw + 1.3rem, 2.2rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-align: left;
    text-wrap: balance;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ---------------- 2. CAJA BANNER OSCURO NAVY (mejora diseño gris plano original) ---------------- */

.jm-viajeschapinero-box {
    position: relative;
    width: 100%;
    padding: 5rem 3.5rem 5rem 3.5rem;
    background: linear-gradient(180deg, #0c2c4b 0%, #0a2540 100%);
    border: 2px solid rgba(245, 197, 24, 0.38);
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    text-align: center;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 0 0 1px rgba(255,255,255,0.06),
        0 0 0 6px rgba(245, 197, 24, 0.07),
        0 42px 98px -40px rgba(10, 37, 64, 0.55),
        0 26px 68px -28px rgba(10, 37, 64, 0.4),
        0 0 44px -12px rgba(245, 197, 24, 0.36);
    isolation: isolate;
    overflow: hidden;
}

.jm-viajeschapinero-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14%;
    bottom: 14%;
    width: 4px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 14%, #f5c518 50%, #d9ac10 86%, rgba(245, 197, 24, 0) 100%);
    border-radius: 999px;
    box-shadow: 0 0 14px rgba(245, 197, 24, 0.55);
    z-index: 2;
    pointer-events: none;
}

.jm-viajeschapinero-box::after {
    content: "";
    position: absolute;
    right: 0;
    top: 14%;
    bottom: 14%;
    width: 4px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 14%, #f5c518 50%, #d9ac10 86%, rgba(245, 197, 24, 0) 100%);
    border-radius: 999px;
    box-shadow: 0 0 14px rgba(245, 197, 24, 0.55);
    z-index: 2;
    pointer-events: none;
}

.jm-viajeschapinero-box__title {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 2.5vw + 1.85rem, 4.35rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    text-align: center;
    text-wrap: balance;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.35),
        0 0 18px rgba(245, 197, 24, 0.32);
    z-index: 3;
}

.jm-viajeschapinero-box__title::after {
    content: "";
    display: block;
    width: 104px;
    height: 4px;
    margin: 1.2rem auto 0 auto;
    border-radius: 999px;
    background: linear-gradient(90deg,
        rgba(255, 224, 130, 0.25) 0%,
        var(--jm-c-gold-200, #ffe082) 18%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 82%,
        rgba(255, 224, 130, 0.25) 100%);
    box-shadow: 0 0 12px 0 rgba(245, 197, 24, 0.5);
}

.jm-viajeschapinero-box__grid {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    column-gap: 3rem;
    row-gap: 1.75rem;
    align-items: start;
    justify-content: stretch;
    z-index: 3;
}

.jm-viajeschapinero-box__text {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #f3f6ff;
    font-family: 'Segoe UI', Roboto, 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(1.02rem, 0.45vw + 1rem, 1.25rem);
    line-height: 1.78;
    letter-spacing: 0.005em;
    text-align: center;
    hyphens: auto;
    opacity: 0.96;
}

/* Párrafo único VERBATIM = OCUPA 2 COLUMNAS COMPLETAS (todo el ancho) */
.jm-viajeschapinero-box__text--span-2 {
    grid-column: 1 / -1;
}

/* ---------------- 3. BOTÓN CTA NAVY label VERBATIM imagen ---------------- */

.jm-viajeschapinero-cta {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 3;
}

.jm-viajeschapinero-cta__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.85rem 1.55rem 0.85rem 2.15rem;
    width: 100%;
    max-width: 100%;
    background-color: var(--jm-c-primary, #0f4c81);
    color: #ffffff;
    border: 2px solid rgba(245, 197, 24, 0.62);
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.15;
    letter-spacing: 0.01em;
    white-space: normal;
    text-align: center;
    overflow: hidden;
    transition: transform .22s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(12, 57, 97, 0.28) inset,
        0 28px 64px -22px rgba(15, 76, 129, 0.65),
        0 0 24px -7px rgba(245, 197, 24, 0.42),
        0 0 0 3px rgba(245, 197, 24, 0.18),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    isolation: isolate;
}

.jm-viajeschapinero-cta__btn-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 12%, #f5c518 50%, #d9ac10 88%, rgba(245, 197, 24, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

.jm-viajeschapinero-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    color: currentColor;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.12));
}

.jm-viajeschapinero-cta__btn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.jm-viajeschapinero-cta__btn:hover,
.jm-viajeschapinero-cta__btn:focus-visible {
    transform: translateY(-3px);
    background-color: var(--jm-c-primary-700, #0c3961);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 rgba(12, 47, 82, 0.3) inset,
        0 22px 48px -16px rgba(15, 76, 129, 0.62),
        0 0 22px -5px rgba(245, 197, 24, 0.38),
        0 0 0 2px rgba(255, 224, 130, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.22);
    text-decoration: none;
}

.jm-viajeschapinero-cta__btn:active {
    transform: translateY(-1px);
    transition-duration: .14s;
}

/* ---------------- MEDIA QUERIES (3 breakpoints standard JM) ---------------- */

@media (max-width: 1199px) {
    .jm-viajeschapinero-showcase { padding: 5rem 0 5.75rem 0; }
    .jm-viajeschapinero-showcase__inner { max-width: 1020px; gap: 2.5rem; }
    .jm-viajeschapinero-box { padding: 4.25rem 3rem 4.25rem 3rem; gap: 2.1rem; border-radius: 20px; }
    .jm-viajeschapinero-head__title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-viajeschapinero-box__title { font-size: clamp(1.75rem, 2vw + 1.6rem, 3.6rem); }
    .jm-viajeschapinero-box__title::after { width: 92px; margin-top: 1rem; }
    .jm-viajeschapinero-box__grid { max-width: 920px; }
}

@media (max-width: 991px) {
    .jm-viajeschapinero-showcase { padding: 4.25rem 0 5rem 0; }
    .jm-viajeschapinero-showcase__inner { max-width: 820px; gap: 2.25rem; }
    .jm-viajeschapinero-box { padding: 3.25rem 2.25rem 3.25rem 2.25rem; gap: 1.85rem; border-radius: 18px; }
    .jm-viajeschapinero-head__title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-viajeschapinero-box__title { font-size: clamp(1.5rem, 2.1vw + 1.35rem, 2.9rem); }
    .jm-viajeschapinero-box__title::after { width: 76px; height: 3.5px; margin-top: 0.85rem; }
    .jm-viajeschapinero-box__grid { grid-template-columns: 1fr; grid-template-rows: auto; column-gap: 0; row-gap: 1.35rem; }
    .jm-viajeschapinero-box__text--span-2 { padding-top: 0; }
    .jm-viajeschapinero-box::before { top: 12%; bottom: 12%; }
    .jm-viajeschapinero-box::after  { top: 12%; bottom: 12%; }
    .jm-viajeschapinero-cta__btn { padding: 0.78rem 1.15rem 0.78rem 1.85rem; font-size: 1rem; border-radius: 10px; }
}

@media (max-width: 639px) {
    .jm-viajeschapinero-showcase { padding: 3.5rem 0 4.25rem 0; }
    .jm-viajeschapinero-showcase__inner { max-width: 100%; gap: 1.85rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-viajeschapinero-head { gap: 0.7rem; align-items: flex-start; }
    .jm-viajeschapinero-head__title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-viajeschapinero-box { padding: 2.5rem 1.5rem 2.5rem 1.5rem; gap: 1.65rem; border-radius: 16px; }
    .jm-viajeschapinero-box::before { top: 10%; bottom: 10%; }
    .jm-viajeschapinero-box::after  { top: 10%; bottom: 10%; }
    .jm-viajeschapinero-box__title {
        font-size: clamp(1.28rem, 7.6vw + 1.18rem, 2.35rem);
        line-height: 1.12;
    }
    .jm-viajeschapinero-box__title::after { width: 64px; height: 3px; margin-top: 0.75rem; }
    .jm-viajeschapinero-box__text { font-size: 0.98rem; line-height: 1.74; }
    .jm-viajeschapinero-cta__btn { padding: 0.72rem 1rem 0.72rem 1.65rem; font-size: 0.96rem; border-radius: 10px; }
    .jm-viajeschapinero-cta__btn-icon { width: 18px; height: 18px; }
}

/* ==========================================================
 *   [ PÁGINA SUBASTAS Y POSTULACIONES (page-subastas-y-postulaciones.php) ]
 *   HERO 100% CLON MEDIDAS INVERSIONISTAS NATURALES (min-height 70vh):
 *   Imagen hero origen TRAE/Subastas/subastas-suba-suba-002.webp
 *    → assets/images/jm-subastasypost-hero-001.webp
 *   TÍTULO ÚNICO HERO: "Licitaciones & Subastas" (centrado + divider gold).
 *   DESPUÉS DEL HERO: sección Licitaciones clon 1:1 front-page.php
 *    (reutiliza selectores .jm-licitaciones* originales → 0 duplicación).
 *   Posición: DESPUÉS Viajes Chapinero / ANTES Ferreterías General.
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-subastasypost-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO 100% CLON INVERSIONISTAS NATURALES ---------------- */

.jm-subastasypost-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
}

/* Imagen de fondo subastas-suba-suba-002.webp · SIN desvanecidos ni filtros, imagen limpia */
.jm-subastasypost-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-subastasypost-hero-001.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay NAVY suave · IGUAL Inversionistas Naturales (tinte mínimo navy 0.35 SIN gradientes gold) */
.jm-subastasypost-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.35);
    mix-blend-mode: normal;
}

/* Contenedor interno · IGUAL Inversionistas Naturales (max-width var --jm-rw = 1320px) */
.jm-subastasypost-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

/* --- H1 ÚNICO DEL HERO VERBATIM user: Licitaciones & Subastas · IGUAL clamp/font-size inversionistas --- */

.jm-subastasypost-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.025em;
    text-align: center;
    text-transform: none;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(15, 76, 129, 0.15);
}

/* Divisor gold DEBAJO del H1 · 100% IGUAL medidas inversionistas (96px width, gradient, glow) */
.jm-subastasypost-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 12px 0 rgba(245, 197, 24, 0.55);
}

/* ---------------- MEDIA QUERIES · 100% CLON INVERSIONISTAS NATURALES ---------------- */

@media (max-width: 1199px) {
    .jm-subastasypost-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-subastasypost-hero__inner {
        max-width: 1000px;
        gap: 1.25rem;
    }
    .jm-subastasypost-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-subastasypost-hero__divider {
        width: 84px;
        height: 3px;
    }
}

@media (max-width: 991px) {
    .jm-subastasypost-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-subastasypost-hero__inner {
        max-width: 820px;
        gap: 1.1rem;
    }
    .jm-subastasypost-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.018em;
    }
    .jm-subastasypost-hero__divider {
        width: 72px;
        height: 3px;
    }
}

@media (max-width: 639px) {
    .jm-subastasypost-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-subastasypost-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-subastasypost-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.015em;
    }
    .jm-subastasypost-hero__divider {
        width: 60px;
        height: 3px;
    }
}

/* ==========================================================
 *   [ PÁGINA SUBASTAS DE PRODUCTOS (page-subastas-de-productos.php) ]
 *   CLON 100% HERO de Subastas y Postulaciones (que clona Inversionistas
 *   Naturales, min-height 70vh, overlay navy 0.35 SIN gradientes gold).
 *   Imagen hero origen: TRAE/Subastas/subastas-suba-suba-001.webp
 *    → assets/images/jm-subastasproductos-hero-001.webp
 *   TÍTULO ÚNICO HERO: "Subastas de Productos" (centrado, divider gold).
 *   DESPUÉS HERO: sección Licitaciones SOLO FILA PRODUCTOS (no servicios),
 *   reutiliza selectores .jm-licitaciones* originales portada.
 *   Posición: DESPUÉS Subastas y Postulaciones / ANTES Ferreterías.
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-subastasproductos-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO 100% CLON INVERSIONISTAS NATURALES / SUBASTAS Y POSTULACIONES ---------------- */

.jm-subastasproductos-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
}

/* Imagen de fondo subastas-suba-suba-002.webp (CORREGIDA user) · SIN desvanecidos ni filtros, imagen limpia */
.jm-subastasproductos-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-subastasproductos-hero-002.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay NAVY suave · IGUAL Inversionistas Naturales (tinte mínimo navy 0.35 SIN gradientes gold) */
.jm-subastasproductos-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.35);
    mix-blend-mode: normal;
}

/* Contenedor interno · IGUAL Inversionistas Naturales (max-width var --jm-rw = 1320px) */
.jm-subastasproductos-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

/* --- H1 ÚNICO DEL HERO VERBATIM user: Subastas de Productos · IGUAL clamp/font-size inversionistas --- */

.jm-subastasproductos-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.025em;
    text-align: center;
    text-transform: none;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(15, 76, 129, 0.15);
}

/* Divider gold DEBAJO del H1 · 100% IGUAL medidas inversionistas (96px width, gradient, glow) */
.jm-subastasproductos-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 12px 0 rgba(245, 197, 24, 0.55);
}

/* ---------------- MEDIA QUERIES · 100% CLON INVERSIONISTAS NATURALES ---------------- */

@media (max-width: 1199px) {
    .jm-subastasproductos-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-subastasproductos-hero__inner {
        max-width: 1000px;
        gap: 1.25rem;
    }
    .jm-subastasproductos-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-subastasproductos-hero__divider {
        width: 84px;
        height: 3px;
    }
}

@media (max-width: 991px) {
    .jm-subastasproductos-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-subastasproductos-hero__inner {
        max-width: 820px;
        gap: 1.1rem;
    }
    .jm-subastasproductos-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.018em;
    }
    .jm-subastasproductos-hero__divider {
        width: 72px;
        height: 3px;
    }
}

@media (max-width: 639px) {
    .jm-subastasproductos-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-subastasproductos-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-subastasproductos-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.015em;
    }
    .jm-subastasproductos-hero__divider {
        width: 60px;
        height: 3px;
    }
}

/* ==========================================================
 *   [ PÁGINA SUBASTAS DE SERVICIOS (page-subastas-de-servicios.php) ]
 *   HERO: 0 TEXTO · SOLO imagen subastas-suba-suba-001.webp
 *         (altura 70vh igual Inversionistas Naturales, overlay navy 0.2 SIN texto).
 *   GRID 4 COLUMNAS cards: 4 categorías profesionales clickeables slugs internos
 *   (Abogados / Ingenieros / Contadores / Arquitectos).
 *   Cada card: img subastas-suba-007.webp marco navy + barra gold left 4px +
 *   botón inferior navy gold flecha SVG. 6 sombras multicapa JM. Hover
 *   translate + border gold glow + img zoom saturate.
 *   Posición: DESPUÉS Subastas de Productos / ANTES Ferreterías General.
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-subastasservicios-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO · 0 TEXTO · SOLO IMAGEN ---------------- */

.jm-subastasservicios-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    padding: 7.5rem 0 6rem 0;
}

/* Imagen de fondo: subastas-suba-suba-001.webp (igual ruta assets/images/ que
   Inversionistas / Subastas Productos). 0 filtros overlay extra. */
.jm-subastasservicios-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-subastasservicios-hero-001.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay navy MUY suave 0.2 · SIN gradientes gold (como los otros heroes pero 0.2
   para que la imagen luzca más, ya que NO hay texto encima). */
.jm-subastasservicios-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.2);
    mix-blend-mode: normal;
}

/* ---------------- 2. SECCIÓN CARDS 4 COLUMNAS ---------------- */

.jm-subastasservicios-cards {
    position: relative;
    width: 100%;
    padding: 7.5rem 0 8rem 0;
    background-color: #ffffff;
    background-image:
        radial-gradient(1000px 600px at 10% -8%, rgba(245, 197, 24, 0.085) 0%, transparent 52%),
        radial-gradient(1000px 600px at 100% 110%, rgba(15, 76, 129, 0.1) 0%, transparent 52%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.jm-subastasservicios-cards__inner {
    position: relative;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
}

/* --- Header subtítulo grid · Pill igual Ospinas navy + barra gold --- */

.jm-subastasservicios-cards__header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.25rem;
    padding: 0 0 2.75rem 0;
    margin: 0 0 1.75rem 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.jm-subastasservicios-cards__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 1.35rem 0.6rem 1.35rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 4px 14px rgba(15, 76, 129, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.1);
    isolation: isolate;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
}

/* Barra gold izquierda del pill · 100% igual Ospinas */
.jm-subastasservicios-cards__pill::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.55);
    z-index: 0;
}

.jm-subastasservicios-cards__pill-title {
    position: relative;
    z-index: 1;
    margin: 0 0 0 0.25rem;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: 0.95rem;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    max-width: 100%;
}

.jm-subastasservicios-cards__subtitle {
    margin: 0;
    padding: 0;
    max-width: 78ch;
    color: var(--jm-c-dark-bg-2, #0a1b2e);
    font-size: clamp(1.02rem, 0.35vw + 1rem, 1.15rem);
    line-height: 1.6;
    font-weight: 550;
    letter-spacing: 0.004em;
}

.jm-subastasservicios-cards__divider {
    display: block;
    width: 64px;
    height: 4px;
    margin: 0.25rem 0 0 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 60%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.5);
}

/* --- GRID 4 COLUMNAS cards servicios --- */

.jm-subastasservicios-cards__grid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
    justify-items: stretch;
}

/* ---------------- 3. CARDS CLICKEABLES (4 unidades iguales) ---------------- */

.jm-subserv-card {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border: 2px solid var(--jm-c-primary-100, rgba(15, 76, 129, 0.22));
    border-radius: 14px;
    overflow: hidden;
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 300ms ease,
        box-shadow 420ms ease,
        background-color 300ms ease;
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 0 0 1px rgba(245, 197, 24, 0.05),
        0 6px 14px rgba(15, 76, 129, 0.1),
        0 14px 28px rgba(15, 76, 129, 0.09),
        0 28px 55px rgba(10, 27, 46, 0.12),
        0 4px 0 rgba(15, 76, 129, 0.06);
}

/* Barra gold izquierda patrón JM */
.jm-subserv-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 100%);
    z-index: 2;
    box-shadow: 1px 0 10px rgba(245, 197, 24, 0.45);
}

.jm-subserv-card:hover {
    transform: translateY(-6px);
    border-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 0 0 2px rgba(245, 197, 24, 0.35),
        0 8px 20px rgba(245, 197, 24, 0.1),
        0 18px 38px rgba(15, 76, 129, 0.12),
        0 32px 65px rgba(10, 27, 46, 0.14),
        0 6px 0 rgba(245, 197, 24, 0.08);
}

.jm-subserv-card__link {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    padding: 0 0 0 0;
    gap: 0;
    z-index: 1;
}

/* --- Imagen card 16:9 · SIN MARCO NAVY · 100% ANCHO card (SIN borde, padding 0) --- */

.jm-subserv-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    padding: 0;
    border-radius: 14px 14px 0 0;
    background-color: #ffffff;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 0 0 1px rgba(15, 76, 129, 0.12) inset;
}

/* Barra gold izquierda DENTRO de la imagen (superior izquierda) */
.jm-subserv-card__media::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 100%);
    z-index: 2;
    box-shadow: 1px 0 8px rgba(245, 197, 24, 0.45);
}

/* (ELIMINADA ::after barra gold inferior del marco navy - no aplica SIN marco) */

.jm-subserv-card__img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 14px 14px 0 0;
    filter: saturate(1.03);
    transition:
        transform 650ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 400ms ease,
        opacity 400ms ease;
}

.jm-subserv-card:hover .jm-subserv-card__img {
    transform: scale(1.04);
    filter: saturate(1.18) contrast(1.03);
}

/* --- Botón inferior CTA FULL WIDTH 100% · REDISEÑADO BONITO 24-sep · EXTREMOS A EXTREMOS card --- */

.jm-subserv-card__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 0 0;
    padding: 1.25rem 1.7rem 1.25rem 1.75rem;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(145deg,
        var(--jm-c-primary, #0f4c81) 0%,
        var(--jm-c-primary-600, #0d406d) 45%,
        var(--jm-c-primary-700, #0a2540) 100%);
    color: var(--jm-c-white, #ffffff);
    font-size: 1.18rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.015em;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        background-image 450ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 450ms ease,
        color 400ms ease,
        transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1),
        border-top-color 350ms ease;
    border-top: 2.5px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 -6px 18px rgba(10, 27, 46, 0.32),
        0 3px 8px rgba(10, 27, 46, 0.25),
        0 8px 18px rgba(15, 76, 129, 0.3),
        0 16px 34px rgba(10, 27, 46, 0.22);
}

/* Borde superior degradado gold · separador visual IMAGEN → BOTÓN */
.jm-subserv-card__btn::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2.5px;
    height: 2.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 12%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 88%,
        transparent 100%);
    z-index: 2;
    box-shadow: 0 0 12px rgba(245, 197, 24, 0.55);
}

/* Fondo gold hover BONITO (radial grande arriba + degradado superior + shimmer) · DESHABILITADO x user no le gusta brillo amarillo */
.jm-subserv-card__btn::after {
    display: none !important;
}

.jm-subserv-card:hover .jm-subserv-card__btn {
    background: linear-gradient(145deg,
        var(--jm-c-primary-700, #0a2540) 0%,
        var(--jm-c-primary, #0f4c81) 50%,
        var(--jm-c-dark-bg, #061421) 100%);
    border-top-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 -8px 22px rgba(10, 27, 46, 0.38),
        0 5px 14px rgba(10, 27, 46, 0.3),
        0 12px 28px rgba(15, 76, 129, 0.32),
        0 22px 48px rgba(10, 27, 46, 0.25);
}

/* ::after disabled (brillo amarillo user no quiere) */

.jm-subserv-card__btn-label {
    position: relative;
    z-index: 1;
    padding-left: 0.55rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.25),
        0 1px 3px rgba(10, 27, 46, 0.35);
}

.jm-subserv-card__btn-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 12px;
    background: linear-gradient(145deg,
        rgba(245, 197, 24, 0.22) 0%,
        rgba(245, 197, 24, 0.1) 100%);
    color: var(--jm-c-gold, #f5c518);
    flex-shrink: 0;
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        background-image 380ms ease,
        background-color 380ms ease,
        color 380ms ease,
        box-shadow 380ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(245, 197, 24, 0.25),
        0 1px 4px rgba(245, 197, 24, 0.2);
}

.jm-subserv-card:hover .jm-subserv-card__btn-icon {
    transform: translateX(5px);
    background: linear-gradient(145deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 100%);
    color: var(--jm-c-dark-bg-2, #0a1b2e);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 18px rgba(245, 197, 24, 0.8),
        0 2px 8px rgba(10, 27, 46, 0.22);
}

/* ---------------- 4. MEDIA QUERIES (breakpoints standard JM) ---------------- */

@media (max-width: 1199px) {
    .jm-subastasservicios-cards {
        padding: 6.5rem 0 7rem 0;
    }
    .jm-subastasservicios-cards__inner {
        max-width: 1000px;
    }
    .jm-subastasservicios-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-subastasservicios-cards__grid {
        gap: 1.1rem;
    }
    .jm-subserv-card__btn {
        width: 100%;
        padding: 1.15rem 1.55rem 1.15rem 1.6rem;
        font-size: 1.1rem;
    }
    .jm-subserv-card__btn-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (max-width: 991px) {
    .jm-subastasservicios-cards {
        padding: 5.75rem 0 6.25rem 0;
    }
    .jm-subastasservicios-cards__inner {
        max-width: 820px;
    }
    .jm-subastasservicios-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-subastasservicios-cards__header {
        padding: 0 0 2.25rem 0;
        gap: 1rem;
    }
    .jm-subastasservicios-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
    .jm-subserv-card__btn {
        width: 100%;
        padding: 1.1rem 1.4rem 1.1rem 1.5rem;
        font-size: 1.06rem;
    }
    .jm-subserv-card__btn-icon {
        width: 2.4rem;
        height: 2.4rem;
    }
}

@media (max-width: 639px) {
    .jm-subastasservicios-cards {
        padding: 5rem 0 5.5rem 0;
    }
    .jm-subastasservicios-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-subastasservicios-cards__inner {
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-subastasservicios-cards__header {
        padding: 0 0 2rem 0;
        gap: 0.85rem;
        margin: 0 0 1.25rem 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .jm-subastasservicios-cards__pill {
        max-width: 100%;
        min-width: 0;
        width: auto;
        padding: 0.55rem 1.15rem 0.55rem 1.15rem;
        gap: 0.6rem;
    }
    .jm-subastasservicios-cards__pill-title {
        font-size: 0.78rem;
        letter-spacing: 0.1em;
        line-height: 1.35;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
    .jm-subastasservicios-cards__grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 0.9rem;
    }
    .jm-subserv-card__btn {
        width: 100%;
        padding: 1.1rem 1.35rem 1.1rem 1.45rem;
        font-size: 1.12rem;
    }
    .jm-subserv-card__btn-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
    .jm-subastasservicios-hero__overlay {
        background-color: rgba(8, 31, 55, 0.28);
    }
}

/* ==========================================================
 *   [ PÁGINA ABOGADOS (page-abogados.php) ]
 *   HERO CON TEXTO · clon medidas hero Subastas de Servicios / Inversionistas.
 *   Imagen hero: subastas-suba-006.webp (misma que la card Abogados Subastas Servicios)
 *                ruta assets/images/jm-subastasservicios-card-006.webp.
 *   TÍTULO H1 ÚNICO CENTRADO: "Abogados" · blanco grande clamp 1.85rem→3.1rem.
 *   DECORACIONES HERO PATRÓN JM:
 *     · Divider gold degradado glow 96px DEBAJO H1 (igual Inversionistas).
 *     · 2 Barras gold verticales IZQUIERDA / DERECHA · 14% altura desde top ·
 *       estilo Hero Viajes Chapinero · gradiente 180deg + glow 8px.
 *   DESPUÉS DEL HERO NINGUNA SECCIÓN · solo footer.
 *   Posición: DESPUÉS Subastas de Servicios / ANTES Ferreterías General.
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-abogados-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO Abogados ---------------- */

.jm-abogados-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen hero: subastas-suba-006.webp · misma imagen card Abogados */
.jm-abogados-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-subastasservicios-card-006.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay navy suave · igual Subastas Servicios 0.2 (legible texto blanco) */
.jm-abogados-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.38);
    mix-blend-mode: normal;
}

/* 2 Barras gold decorativas verticales · estilo Viajes Chapinero banner
 * (izquierda y derecha · top 14% hasta bottom 14% · gradiente gold 180deg) */
.jm-abogados-hero__accent-left,
.jm-abogados-hero__accent-right {
    position: absolute;
    top: 14%;
    bottom: 14%;
    width: 3.5px;
    z-index: 2;
    border-radius: 4px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.6);
}

.jm-abogados-hero__accent-left  { left:  2.25%; }
.jm-abogados-hero__accent-right { right: 2.25%; }

/* Contenedor texto · igual Inversionistas (max-width 1320px var --jm-rw) */
.jm-abogados-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

/* H1 Abogados · igual Inversionistas clamp 1.85rem → 3.1rem weight 900 */
.jm-abogados-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.25);
}

/* Divider gold DEBAJO H1 · igual Inversionistas / Subastas y Postulaciones (96px width · gradient · glow) */
.jm-abogados-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

/* ---------------- 2. MEDIA QUERIES · igual Subastas Servicios / Inversionistas ---------------- */

@media (max-width: 1199px) {
    .jm-abogados-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-abogados-hero__inner {
        max-width: 1000px;
        gap: 1.25rem;
    }
    .jm-abogados-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-abogados-hero__divider {
        width: 84px;
        height: 3px;
    }
    .jm-abogados-hero__accent-left,
    .jm-abogados-hero__accent-right {
        top: 15%;
        bottom: 15%;
        width: 3px;
    }
    .jm-abogados-hero__accent-left  { left:  1.75%; }
    .jm-abogados-hero__accent-right { right: 1.75%; }
}

@media (max-width: 991px) {
    .jm-abogados-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-abogados-hero__inner {
        max-width: 820px;
        gap: 1.1rem;
    }
    .jm-abogados-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.028em;
    }
    .jm-abogados-hero__divider {
        width: 72px;
        height: 3px;
    }
    .jm-abogados-hero__accent-left,
    .jm-abogados-hero__accent-right {
        top: 16%;
        bottom: 16%;
        width: 3px;
    }
    .jm-abogados-hero__accent-left  { left:  1.25%; }
    .jm-abogados-hero__accent-right { right: 1.25%; }
}

@media (max-width: 639px) {
    .jm-abogados-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-abogados-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-abogados-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.28);
    }
    .jm-abogados-hero__divider {
        width: 60px;
        height: 3px;
    }
    .jm-abogados-hero__accent-left,
    .jm-abogados-hero__accent-right {
        display: none;
    }
}

/* ==========================================================
 *   [ PÁGINA INGENIEROS (page-ingenieros.php) ]
 *   CLON 1:1 PÁGINA ABOGADOS · Hero texto decorado + solo footer.
 *   Imagen hero: subastas-suba-007.webp (misma que card Ingenieros Subastas Servicios)
 *                ruta assets/images/jm-subastasservicios-card-007.webp.
 *   TÍTULO H1 ÚNICO CENTRADO: "Ingenieros" · uppercase · 3 capas text-shadow.
 *   DECORACIONES (100% igual Abogados):
 *     · Divider gold degradado glow 96px DEBAJO H1.
 *     · 2 Barras gold verticales izq/der · 14% altura · gradiente 180deg + glow.
 *   DESPUÉS HERO NINGUNA SECCIÓN · solo footer.
 *   Posición: DESPUÉS Abogados / ANTES Ferreterías General.
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-ingenieros-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO Ingenieros ---------------- */

.jm-ingenieros-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen hero: subastas-suba-007.webp · misma imagen card Ingenieros */
.jm-ingenieros-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-subastasservicios-card-007.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay navy suave · igual Abogados (0.38) para legibilidad texto blanco */
.jm-ingenieros-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.38);
    mix-blend-mode: normal;
}

/* 2 Barras gold decorativas verticales · igual Abogados / Viajes Chapinero */
.jm-ingenieros-hero__accent-left,
.jm-ingenieros-hero__accent-right {
    position: absolute;
    top: 14%;
    bottom: 14%;
    width: 3.5px;
    z-index: 2;
    border-radius: 4px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.6);
}

.jm-ingenieros-hero__accent-left  { left:  2.25%; }
.jm-ingenieros-hero__accent-right { right: 2.25%; }

/* Contenedor texto · igual Abogados (max-width 1320px var --jm-rw) */
.jm-ingenieros-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

/* H1 Ingenieros · igual Abogados clamp 1.85rem → 3.1rem weight 900 uppercase */
.jm-ingenieros-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.25);
}

/* Divider gold DEBAJO H1 · igual Abogados (96px width · gradient · glow 14px) */
.jm-ingenieros-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

/* ---------------- 2. MEDIA QUERIES · igual Abogados ---------------- */

@media (max-width: 1199px) {
    .jm-ingenieros-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-ingenieros-hero__inner {
        max-width: 1000px;
        gap: 1.25rem;
    }
    .jm-ingenieros-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-ingenieros-hero__divider {
        width: 84px;
        height: 3px;
    }
    .jm-ingenieros-hero__accent-left,
    .jm-ingenieros-hero__accent-right {
        top: 15%;
        bottom: 15%;
        width: 3px;
    }
    .jm-ingenieros-hero__accent-left  { left:  1.75%; }
    .jm-ingenieros-hero__accent-right { right: 1.75%; }
}

@media (max-width: 991px) {
    .jm-ingenieros-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-ingenieros-hero__inner {
        max-width: 820px;
        gap: 1.1rem;
    }
    .jm-ingenieros-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.028em;
    }
    .jm-ingenieros-hero__divider {
        width: 72px;
        height: 3px;
    }
    .jm-ingenieros-hero__accent-left,
    .jm-ingenieros-hero__accent-right {
        top: 16%;
        bottom: 16%;
        width: 3px;
    }
    .jm-ingenieros-hero__accent-left  { left:  1.25%; }
    .jm-ingenieros-hero__accent-right { right: 1.25%; }
}

@media (max-width: 639px) {
    .jm-ingenieros-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-ingenieros-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-ingenieros-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.28);
    }
    .jm-ingenieros-hero__divider {
        width: 60px;
        height: 3px;
    }
    .jm-ingenieros-hero__accent-left,
    .jm-ingenieros-hero__accent-right {
        display: none;
    }
}

/* ==========================================================
 *   [ PÁGINA CONTADORES (page-contadores.php) ]
 *   CLON 1:1 PÁGINA ABOGADOS / INGENIEROS · Hero texto decorado + solo footer.
 *   Imagen hero: subastas-suba-008.webp (misma que card Contadores Subastas Servicios)
 *                ruta assets/images/jm-subastasservicios-card-008.webp.
 *   TÍTULO H1 ÚNICO CENTRADO: "Contadores" · uppercase · 3 capas text-shadow.
 *   DECORACIONES (100% igual Abogados/Ingenieros):
 *     · Divider gold degradado glow 96px DEBAJO H1.
 *     · 2 Barras gold verticales izq/der · 14% altura · gradiente 180deg + glow.
 *   DESPUÉS HERO NINGUNA SECCIÓN · solo footer.
 *   Posición: DESPUÉS Ingenieros / ANTES Ferreterías General.
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-contadores-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO Contadores ---------------- */

.jm-contadores-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen hero: subastas-suba-008.webp · misma imagen card Contadores */
.jm-contadores-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-subastasservicios-card-008.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay navy suave · igual Abogados/Ingenieros (0.38) para legibilidad texto blanco */
.jm-contadores-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.38);
    mix-blend-mode: normal;
}

/* 2 Barras gold decorativas verticales · igual Abogados/Ingenieros / Viajes Chapinero */
.jm-contadores-hero__accent-left,
.jm-contadores-hero__accent-right {
    position: absolute;
    top: 14%;
    bottom: 14%;
    width: 3.5px;
    z-index: 2;
    border-radius: 4px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.6);
}

.jm-contadores-hero__accent-left  { left:  2.25%; }
.jm-contadores-hero__accent-right { right: 2.25%; }

/* Contenedor texto · igual Abogados/Ingenieros (max-width 1320px var --jm-rw) */
.jm-contadores-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

/* H1 Contadores · igual Abogados/Ingenieros clamp 1.85rem → 3.1rem weight 900 uppercase */
.jm-contadores-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.25);
}

/* Divider gold DEBAJO H1 · igual Abogados/Ingenieros (96px width · gradient · glow 14px) */
.jm-contadores-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

/* ---------------- 2. MEDIA QUERIES · igual Abogados/Ingenieros ---------------- */

@media (max-width: 1199px) {
    .jm-contadores-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-contadores-hero__inner {
        max-width: 1000px;
        gap: 1.25rem;
    }
    .jm-contadores-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-contadores-hero__divider {
        width: 84px;
        height: 3px;
    }
    .jm-contadores-hero__accent-left,
    .jm-contadores-hero__accent-right {
        top: 15%;
        bottom: 15%;
        width: 3px;
    }
    .jm-contadores-hero__accent-left  { left:  1.75%; }
    .jm-contadores-hero__accent-right { right: 1.75%; }
}

@media (max-width: 991px) {
    .jm-contadores-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-contadores-hero__inner {
        max-width: 820px;
        gap: 1.1rem;
    }
    .jm-contadores-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.028em;
    }
    .jm-contadores-hero__divider {
        width: 72px;
        height: 3px;
    }
    .jm-contadores-hero__accent-left,
    .jm-contadores-hero__accent-right {
        top: 16%;
        bottom: 16%;
        width: 3px;
    }
    .jm-contadores-hero__accent-left  { left:  1.25%; }
    .jm-contadores-hero__accent-right { right: 1.25%; }
}

@media (max-width: 639px) {
    .jm-contadores-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-contadores-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-contadores-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.28);
    }
    .jm-contadores-hero__divider {
        width: 60px;
        height: 3px;
    }
    .jm-contadores-hero__accent-left,
    .jm-contadores-hero__accent-right {
        display: none;
    }
}

/* ==========================================================
 *   [ PÁGINA ARQUITECTOS (page-arquitectos.php) ]
 *   CLON 1:1 PÁGINA ABOGADOS / INGENIEROS / CONTADORES · Hero texto decorado + solo footer.
 *   Imagen hero: subastas-suba-009.webp (misma que card Arquitectos Subastas Servicios)
 *                ruta assets/images/jm-subastasservicios-card-009.webp.
 *   TÍTULO H1 ÚNICO CENTRADO: "Arquitectos" · uppercase · 3 capas text-shadow.
 *   DECORACIONES (100% igual Abogados/Ingenieros/Contadores):
 *     · Divider gold degradado glow 96px DEBAJO H1.
 *     · 2 Barras gold verticales izq/der · 14% altura · gradiente 180deg + glow.
 *   DESPUÉS HERO NINGUNA SECCIÓN · solo footer.
 *   Posición: DESPUÉS Contadores / ANTES Ferreterías General.
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-arquitectos-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO Arquitectos ---------------- */

.jm-arquitectos-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen hero: subastas-suba-009.webp · misma imagen card Arquitectos */
.jm-arquitectos-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-subastasservicios-card-009.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay navy suave · igual Abogados/Ingenieros/Contadores (0.38) para legibilidad texto blanco */
.jm-arquitectos-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.38);
    mix-blend-mode: normal;
}

/* 2 Barras gold decorativas verticales · igual Abogados/Ingenieros/Contadores / Viajes Chapinero */
.jm-arquitectos-hero__accent-left,
.jm-arquitectos-hero__accent-right {
    position: absolute;
    top: 14%;
    bottom: 14%;
    width: 3.5px;
    z-index: 2;
    border-radius: 4px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.6);
}

.jm-arquitectos-hero__accent-left  { left:  2.25%; }
.jm-arquitectos-hero__accent-right { right: 2.25%; }

/* Contenedor texto · igual Abogados/Ingenieros/Contadores (max-width 1320px var --jm-rw) */
.jm-arquitectos-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

/* H1 Arquitectos · igual Abogados/Ingenieros/Contadores clamp 1.85rem → 3.1rem weight 900 uppercase */
.jm-arquitectos-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.25);
}

/* Divider gold DEBAJO H1 · igual Abogados/Ingenieros/Contadores (96px width · gradient · glow 14px) */
.jm-arquitectos-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

/* ---------------- 2. MEDIA QUERIES · igual Abogados/Ingenieros/Contadores ---------------- */

@media (max-width: 1199px) {
    .jm-arquitectos-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-arquitectos-hero__inner {
        max-width: 1000px;
        gap: 1.25rem;
    }
    .jm-arquitectos-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-arquitectos-hero__divider {
        width: 84px;
        height: 3px;
    }
    .jm-arquitectos-hero__accent-left,
    .jm-arquitectos-hero__accent-right {
        top: 15%;
        bottom: 15%;
        width: 3px;
    }
    .jm-arquitectos-hero__accent-left  { left:  1.75%; }
    .jm-arquitectos-hero__accent-right { right: 1.75%; }
}

@media (max-width: 991px) {
    .jm-arquitectos-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-arquitectos-hero__inner {
        max-width: 820px;
        gap: 1.1rem;
    }
    .jm-arquitectos-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.028em;
    }
    .jm-arquitectos-hero__divider {
        width: 72px;
        height: 3px;
    }
    .jm-arquitectos-hero__accent-left,
    .jm-arquitectos-hero__accent-right {
        top: 16%;
        bottom: 16%;
        width: 3px;
    }
    .jm-arquitectos-hero__accent-left  { left:  1.25%; }
    .jm-arquitectos-hero__accent-right { right: 1.25%; }
}

@media (max-width: 639px) {
    .jm-arquitectos-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-arquitectos-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-arquitectos-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.28);
    }
    .jm-arquitectos-hero__divider {
        width: 60px;
        height: 3px;
    }
    .jm-arquitectos-hero__accent-left,
    .jm-arquitectos-hero__accent-right {
        display: none;
    }
}

/* ==========================================================
 *   [ PÁGINA CROWDFUNDING (page-crowdfunding.php) ]
 *   CLON estructura base PÁGINA SUBASTAS DE SERVICIOS.
 *   HERO: CON TEXTO (título "Crowdfunding" + divider gold degradado).
 *         Imagen hero: otros-empr-002.webp
 *                      → assets/images/jm-crowdfunding-hero-002.webp.
 *         Altura 70vh/70dvh igual Subastas Servicios. Overlay navy 0.35.
 *         H1: clamp 1.85rem → 3.1rem uppercase weight 900 text-shadow 3 capas.
 *   GRID 3 COLUMNAS cards: Crowfunding Empresarial / Inmobiliario / Donativo.
 *   Cada card: img programas-prog-00X.webp 16:9 SIN marco, 100% ancho card.
 *   Botón inferior CTA FULL WIDTH (igual Subastas Servicios 24-sep): 100%
 *   ancho card, border-radius solo inferior, separador border-top gold
 *   degradado + shimmer hover 3 capas (radial gold + linear gold + shimmer blanco).
 *   Posición: DESPUÉS Arquitectos / ANTES Ferreterías General.
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-crowdfunding-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO · CON TEXTO · CROWDFUNDING ---------------- */

.jm-crowdfunding-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen de fondo: otros-empr-002.webp (Programas) → jm-crowdfunding-hero-002.webp */
.jm-crowdfunding-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-crowdfunding-hero-002.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay navy suave 0.35 (equilibrio imagen visible + legibilidad H1 blanco) */
.jm-crowdfunding-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.35);
    mix-blend-mode: normal;
}

/* Contenedor texto hero (max-width 1320px var --jm-rw) */
.jm-crowdfunding-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

/* H1 Crowdfunding clamp 1.85rem → 3.1rem weight 900 uppercase text-shadow 3 capas */
.jm-crowdfunding-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.22);
}

/* Divider gold DEBAJO H1 · 96px degradado glow (igual Abogados) */
.jm-crowdfunding-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

/* ---------------- 2. SECCIÓN CARDS 3 COLUMNAS ---------------- */

.jm-crowdfunding-cards {
    position: relative;
    width: 100%;
    padding: 7.5rem 0 8rem 0;
    background-color: #ffffff;
    background-image:
        radial-gradient(1000px 600px at 10% -8%, rgba(245, 197, 24, 0.085) 0%, transparent 52%),
        radial-gradient(1000px 600px at 100% 110%, rgba(15, 76, 129, 0.1) 0%, transparent 52%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.jm-crowdfunding-cards__inner {
    position: relative;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
}

/* --- Header subtítulo grid · Pill patrón JM navy + barra gold --- */

.jm-crowdfunding-cards__header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.25rem;
    padding: 0 0 2.75rem 0;
    margin: 0 0 1.75rem 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.jm-crowdfunding-cards__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 1.35rem 0.6rem 1.35rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 4px 14px rgba(15, 76, 129, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.1);
    isolation: isolate;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
}

.jm-crowdfunding-cards__pill::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.55);
    z-index: 0;
}

.jm-crowdfunding-cards__pill-title {
    position: relative;
    z-index: 1;
    margin: 0 0 0 0.25rem;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: 0.95rem;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    max-width: 100%;
}

.jm-crowdfunding-cards__subtitle {
    margin: 0;
    padding: 0;
    max-width: 78ch;
    color: var(--jm-c-dark-bg-2, #0a1b2e);
    font-size: clamp(1.02rem, 0.35vw + 1rem, 1.15rem);
    line-height: 1.6;
    font-weight: 550;
    letter-spacing: 0.004em;
}

.jm-crowdfunding-cards__divider {
    display: block;
    width: 64px;
    height: 4px;
    margin: 0.25rem 0 0 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 60%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.5);
}

/* --- GRID 3 COLUMNAS cards crowdfunding --- */

.jm-crowdfunding-cards__grid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
    justify-items: stretch;
}

/* ---------------- 3. CARDS CLICKEABLES (3 unidades iguales) ---------------- */

.jm-cfcard {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border: 2px solid var(--jm-c-primary-100, rgba(15, 76, 129, 0.22));
    border-radius: 14px;
    overflow: hidden;
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 300ms ease,
        box-shadow 420ms ease,
        background-color 300ms ease;
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 0 0 1px rgba(245, 197, 24, 0.05),
        0 6px 14px rgba(15, 76, 129, 0.1),
        0 14px 28px rgba(15, 76, 129, 0.09),
        0 28px 55px rgba(10, 27, 46, 0.12),
        0 4px 0 rgba(15, 76, 129, 0.06);
}

/* Barra gold izquierda patrón JM */
.jm-cfcard::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 100%);
    z-index: 2;
    box-shadow: 1px 0 10px rgba(245, 197, 24, 0.45);
}

.jm-cfcard:hover {
    transform: translateY(-6px);
    border-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 0 0 2px rgba(245, 197, 24, 0.35),
        0 8px 20px rgba(245, 197, 24, 0.1),
        0 18px 38px rgba(15, 76, 129, 0.12),
        0 32px 65px rgba(10, 27, 46, 0.14),
        0 6px 0 rgba(245, 197, 24, 0.08);
}

.jm-cfcard__link {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    padding: 0 0 0 0;
    gap: 0;
    z-index: 1;
}

/* --- Imagen card 16:9 · SIN MARCO · 100% ANCHO card --- */

.jm-cfcard__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    padding: 0;
    border-radius: 14px 14px 0 0;
    background-color: #ffffff;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 0 0 1px rgba(15, 76, 129, 0.12) inset;
}

/* Barra gold izquierda DENTRO de la imagen (superior izquierda) */
.jm-cfcard__media::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 100%);
    z-index: 2;
    box-shadow: 1px 0 8px rgba(245, 197, 24, 0.45);
}

.jm-cfcard__img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 14px 14px 0 0;
    filter: saturate(1.03);
    transition:
        transform 650ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 400ms ease,
        opacity 400ms ease;
}

.jm-cfcard:hover .jm-cfcard__img {
    transform: scale(1.04);
    filter: saturate(1.18) contrast(1.03);
}

/* --- Botón inferior CTA FULL WIDTH 100% · DISEÑO PREMIUM BONITO --- */

.jm-cfcard__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 0 0;
    padding: 1.25rem 1.7rem 1.25rem 1.75rem;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(145deg,
        var(--jm-c-primary, #0f4c81) 0%,
        var(--jm-c-primary-600, #0d406d) 45%,
        var(--jm-c-primary-700, #0a2540) 100%);
    color: var(--jm-c-white, #ffffff);
    font-size: 1.18rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.015em;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        background-image 450ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 450ms ease,
        color 400ms ease,
        transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1),
        border-top-color 350ms ease;
    border-top: 2.5px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 -6px 18px rgba(10, 27, 46, 0.32),
        0 3px 8px rgba(10, 27, 46, 0.25),
        0 8px 18px rgba(15, 76, 129, 0.3),
        0 16px 34px rgba(10, 27, 46, 0.22);
}

/* Borde superior degradado gold · separador visual IMAGEN → BOTÓN */
.jm-cfcard__btn::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2.5px;
    height: 2.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 12%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 88%,
        transparent 100%);
    z-index: 2;
    box-shadow: 0 0 12px rgba(245, 197, 24, 0.55);
}

/* Fondo gold hover BONITO (radial + degradado + shimmer) · DESHABILITADO x user no le gusta brillo amarillo */
.jm-cfcard__btn::after {
    display: none !important;
}

.jm-cfcard:hover .jm-cfcard__btn {
    background: linear-gradient(145deg,
        var(--jm-c-primary-700, #0a2540) 0%,
        var(--jm-c-primary, #0f4c81) 50%,
        var(--jm-c-dark-bg, #061421) 100%);
    border-top-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 -8px 22px rgba(10, 27, 46, 0.38),
        0 5px 14px rgba(10, 27, 46, 0.3),
        0 12px 28px rgba(15, 76, 129, 0.32),
        0 22px 48px rgba(10, 27, 46, 0.25);
}

/* ::after disabled (brillo amarillo user no quiere) */

.jm-cfcard__btn-label {
    position: relative;
    z-index: 1;
    padding-left: 0.55rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.25),
        0 1px 3px rgba(10, 27, 46, 0.35);
}

.jm-cfcard__btn-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 12px;
    background: linear-gradient(145deg,
        rgba(245, 197, 24, 0.22) 0%,
        rgba(245, 197, 24, 0.1) 100%);
    color: var(--jm-c-gold, #f5c518);
    flex-shrink: 0;
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        background-image 380ms ease,
        background-color 380ms ease,
        color 380ms ease,
        box-shadow 380ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(245, 197, 24, 0.25),
        0 1px 4px rgba(245, 197, 24, 0.2);
}

.jm-cfcard:hover .jm-cfcard__btn-icon {
    transform: translateX(5px);
    background: linear-gradient(145deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 100%);
    color: var(--jm-c-dark-bg-2, #0a1b2e);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 18px rgba(245, 197, 24, 0.8),
        0 2px 8px rgba(10, 27, 46, 0.22);
}

/* ---------------- 4. MEDIA QUERIES (breakpoints standard JM) ---------------- */

@media (max-width: 1199px) {
    .jm-crowdfunding-cards {
        padding: 6.5rem 0 7rem 0;
    }
    .jm-crowdfunding-cards__inner {
        max-width: 1000px;
    }
    .jm-crowdfunding-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-crowdfunding-hero__inner {
        gap: 1.25rem;
    }
    .jm-crowdfunding-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-crowdfunding-hero__divider {
        width: 84px;
        height: 3px;
    }
    .jm-crowdfunding-cards__grid {
        gap: 1.1rem;
    }
    .jm-cfcard__btn {
        width: 100%;
        padding: 1.15rem 1.55rem 1.15rem 1.6rem;
        font-size: 1.1rem;
    }
    .jm-cfcard__btn-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (max-width: 991px) {
    .jm-crowdfunding-cards {
        padding: 5.75rem 0 6.25rem 0;
    }
    .jm-crowdfunding-cards__inner {
        max-width: 820px;
    }
    .jm-crowdfunding-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-crowdfunding-hero__inner {
        gap: 1.1rem;
    }
    .jm-crowdfunding-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.028em;
    }
    .jm-crowdfunding-hero__divider {
        width: 72px;
        height: 3px;
    }
    .jm-crowdfunding-cards__header {
        padding: 0 0 2.25rem 0;
        gap: 1rem;
    }
    .jm-crowdfunding-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
    .jm-cfcard__btn {
        width: 100%;
        padding: 1.1rem 1.4rem 1.1rem 1.5rem;
        font-size: 1.06rem;
    }
    .jm-cfcard__btn-icon {
        width: 2.4rem;
        height: 2.4rem;
    }
}

@media (max-width: 639px) {
    .jm-crowdfunding-cards {
        padding: 5rem 0 5.5rem 0;
    }
    .jm-crowdfunding-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-crowdfunding-hero__overlay {
        background-color: rgba(8, 31, 55, 0.42);
    }
    .jm-crowdfunding-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-crowdfunding-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.25);
    }
    .jm-crowdfunding-hero__divider {
        width: 60px;
        height: 3px;
    }
    .jm-crowdfunding-cards__inner {
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-crowdfunding-cards__header {
        padding: 0 0 2rem 0;
        gap: 0.85rem;
        margin: 0 0 1.25rem 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .jm-crowdfunding-cards__pill {
        max-width: 100%;
        min-width: 0;
        width: auto;
        padding: 0.55rem 1.15rem 0.55rem 1.15rem;
        gap: 0.6rem;
    }
    .jm-crowdfunding-cards__pill-title {
        font-size: 0.78rem;
        letter-spacing: 0.1em;
        line-height: 1.35;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
    .jm-crowdfunding-cards__grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 0.9rem;
    }
    .jm-cfcard__btn {
        width: 100%;
        padding: 1.1rem 1.35rem 1.1rem 1.45rem;
        font-size: 1.12rem;
    }
    .jm-cfcard__btn-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* ==========================================================
 *   [ PÁGINA PROGRAMAS (page-programas.php) ]
 *   CLON 100% HERO página CROWDFUNDING.
 *   MISMA imagen hero (jm-crowdfunding-hero-002.webp).
 *   MISMA altura 70vh/70dvh. MISMO overlay navy 0.35.
 *   MISMO divider gold 96px degradado glow.
 *   ÚNICO CAMBIO: H1 texto = "Programas" (en vez Crowdfunding).
 *   DESPUÉS HERO: NINGUNA SECCIÓN (sin cards). SOLO footer.
 *   Posición: DESPUÉS Crowdfunding General · ANTES Crowdfunding Empresas.
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-programas-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO · CON TEXTO · PROGRAMAS (100% igual Crowdfunding hero) ---------------- */

.jm-programas-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen de fondo: MISMA que Crowdfunding (otros-empr-002.webp → jm-crowdfunding-hero-002.webp) */
.jm-programas-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-crowdfunding-hero-002.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay navy suave 0.35 (IGUAL Crowdfunding) */
.jm-programas-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.35);
    mix-blend-mode: normal;
}

/* Contenedor texto hero (max-width 1320px var --jm-rw) */
.jm-programas-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

/* H1 "Programas" clamp 1.85rem → 3.1rem weight 900 uppercase text-shadow 3 capas (igual Crowdfunding) */
.jm-programas-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.22);
}

/* Divider gold DEBAJO H1 · 96px degradado glow (igual Crowdfunding / Abogados) */
.jm-programas-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

/* ---------------- 2. MEDIA QUERIES (solo HERO, no hay más secciones) ---------------- */

@media (max-width: 1199px) {
    .jm-programas-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-programas-hero__inner {
        gap: 1.25rem;
    }
    .jm-programas-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-programas-hero__divider {
        width: 84px;
        height: 3px;
    }
}

@media (max-width: 991px) {
    .jm-programas-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-programas-hero__inner {
        gap: 1.1rem;
    }
    .jm-programas-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.028em;
    }
    .jm-programas-hero__divider {
        width: 72px;
        height: 3px;
    }
}

@media (max-width: 639px) {
    .jm-programas-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-programas-hero__overlay {
        background-color: rgba(8, 31, 55, 0.42);
    }
    .jm-programas-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-programas-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.25);
    }
    .jm-programas-hero__divider {
        width: 60px;
        height: 3px;
    }
}

/* ==========================================================
 *   [ PÁGINA SHARK ALLIANCE (page-shark-alliance.php) ]
 *   CLON 100% HERO página CROWDFUNDING / PROGRAMAS.
 *   MISMA imagen hero (jm-crowdfunding-hero-002.webp).
 *   MISMA altura 70vh/70dvh. MISMO overlay navy 0.35.
 *   MISMO divider gold 96px degradado glow.
 *   ÚNICO CAMBIO: H1 texto = "Shark Alliance".
 *   DESPUÉS HERO: NINGUNA SECCIÓN (sin cards). SOLO footer.
 *   Posición: DESPUÉS Programas · ANTES Crowdfunding Empresas.
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-sharkalliance-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO · CON TEXTO · SHARK ALLIANCE (100% igual Crowdfunding / Programas hero) ---------------- */

.jm-sharkalliance-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen de fondo: MISMA que Crowdfunding / Programas (jm-crowdfunding-hero-002.webp) */
.jm-sharkalliance-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-crowdfunding-hero-002.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay navy suave 0.35 (IGUAL Crowdfunding / Programas) */
.jm-sharkalliance-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.35);
    mix-blend-mode: normal;
}

/* Contenedor texto hero (max-width 1320px var --jm-rw) */
.jm-sharkalliance-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

/* H1 "Shark Alliance" clamp 1.85rem → 3.1rem weight 900 uppercase text-shadow 3 capas */
.jm-sharkalliance-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.22);
}

/* Divider gold DEBAJO H1 · 96px degradado glow (igual Crowdfunding / Programas / Abogados) */
.jm-sharkalliance-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

/* ---------------- 2. MEDIA QUERIES (solo HERO, no hay más secciones) ---------------- */

@media (max-width: 1199px) {
    .jm-sharkalliance-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-sharkalliance-hero__inner {
        gap: 1.25rem;
    }
    .jm-sharkalliance-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-sharkalliance-hero__divider {
        width: 84px;
        height: 3px;
    }
}

@media (max-width: 991px) {
    .jm-sharkalliance-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-sharkalliance-hero__inner {
        gap: 1.1rem;
    }
    .jm-sharkalliance-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.028em;
    }
    .jm-sharkalliance-hero__divider {
        width: 72px;
        height: 3px;
    }
}

@media (max-width: 639px) {
    .jm-sharkalliance-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-sharkalliance-hero__overlay {
        background-color: rgba(8, 31, 55, 0.42);
    }
    .jm-sharkalliance-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-sharkalliance-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.25);
    }
    .jm-sharkalliance-hero__divider {
        width: 60px;
        height: 3px;
    }
}

/* ==========================================================
 *   [ PÁGINA CROWFUNDING INMOBILIARIO (page-crowfunding-inmobiliario.php) ]
 *   Nota: Ortografía 1 'n' en "Crowfunding" (no 2) 100% VERBATIM user.
 *   CLON 100% HERO página CROWDFUNDING / PROGRAMAS / SHARK ALLIANCE.
 *   MISMA imagen hero (jm-crowdfunding-hero-002.webp).
 *   MISMA altura 70vh/70dvh. MISMO overlay navy 0.35.
 *   MISMO divider gold 96px degradado glow.
 *   ÚNICO CAMBIO: H1 texto = "Crowfunding inmobiliario".
 *   DESPUÉS HERO: NINGUNA SECCIÓN (sin cards). SOLO footer.
 *   Posición: DESPUÉS Shark Alliance · ANTES Crowdfunding Empresas.
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-crowfundinginmo-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO · CON TEXTO · Crowfunding Inmobiliario (100% igual Crowdfunding hero base) ---------------- */

.jm-crowfundinginmo-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen de fondo: MISMA que Crowdfunding / Programas / Shark (jm-crowdfunding-hero-002.webp) */
.jm-crowfundinginmo-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-crowdfunding-hero-002.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay navy suave 0.35 (IGUAL Crowdfunding / Programas / Shark) */
.jm-crowfundinginmo-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.35);
    mix-blend-mode: normal;
}

/* Contenedor texto hero (max-width 1320px var --jm-rw) */
.jm-crowfundinginmo-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

/* H1 "Crowfunding inmobiliario" clamp 1.85rem → 3.1rem weight 900 uppercase text-shadow 3 capas */
.jm-crowfundinginmo-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.22);
}

/* Divider gold DEBAJO H1 · 96px degradado glow (igual Crowdfunding / Programas / Shark / Abogados) */
.jm-crowfundinginmo-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

/* ---------------- 2. MEDIA QUERIES (solo HERO, no hay más secciones) ---------------- */

@media (max-width: 1199px) {
    .jm-crowfundinginmo-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-crowfundinginmo-hero__inner {
        gap: 1.25rem;
    }
    .jm-crowfundinginmo-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-crowfundinginmo-hero__divider {
        width: 84px;
        height: 3px;
    }
}

@media (max-width: 991px) {
    .jm-crowfundinginmo-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-crowfundinginmo-hero__inner {
        gap: 1.1rem;
    }
    .jm-crowfundinginmo-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.028em;
    }
    .jm-crowfundinginmo-hero__divider {
        width: 72px;
        height: 3px;
    }
}

@media (max-width: 639px) {
    .jm-crowfundinginmo-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-crowfundinginmo-hero__overlay {
        background-color: rgba(8, 31, 55, 0.42);
    }
    .jm-crowfundinginmo-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-crowfundinginmo-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.25);
    }
    .jm-crowfundinginmo-hero__divider {
        width: 60px;
        height: 3px;
    }
}

/* ==========================================================
 *   [ PÁGINA CROWFUNDING DONACIÓN (page-crowfunding-donacion.php) ]
 *   Nota: Ortografía 1 'n' en "Crowfunding" (no 2) igual que Inmobiliario,
 *         100% VERBATIM nombre de página user.
 *   CLON 100% HERO página CROWDFUNDING / PROGRAMAS / SHARK / INMOBILIARIO.
 *   MISMA imagen hero (jm-crowdfunding-hero-002.webp).
 *   MISMA altura 70vh/70dvh. MISMO overlay navy 0.35.
 *   MISMO divider gold 96px degradado glow.
 *   ÚNICO CAMBIO: H1 texto = "Donación" (con tilde VERBATIM).
 *   DESPUÉS HERO: NINGUNA SECCIÓN (sin cards). SOLO footer.
 *   Posición: DESPUÉS Crowfunding Inmobiliario · ANTES Crowdfunding Empresas.
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-crowfundingdonacion-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO · CON TEXTO · Donación (100% igual Crowdfunding hero base) ---------------- */

.jm-crowfundingdonacion-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen de fondo: MISMA que Crowdfunding / Programas / Shark / Inmo (jm-crowdfunding-hero-002.webp) */
.jm-crowfundingdonacion-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-crowdfunding-hero-002.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay navy suave 0.35 (IGUAL Crowdfunding / Programas / Shark / Inmo) */
.jm-crowfundingdonacion-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.35);
    mix-blend-mode: normal;
}

/* Contenedor texto hero (max-width 1320px var --jm-rw) */
.jm-crowfundingdonacion-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

/* H1 "Donación" clamp 1.85rem → 3.1rem weight 900 uppercase text-shadow 3 capas */
.jm-crowfundingdonacion-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.22);
}

/* Divider gold DEBAJO H1 · 96px degradado glow */
.jm-crowfundingdonacion-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

/* ---------------- 2. MEDIA QUERIES (solo HERO, no hay más secciones) ---------------- */

@media (max-width: 1199px) {
    .jm-crowfundingdonacion-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-crowfundingdonacion-hero__inner {
        gap: 1.25rem;
    }
    .jm-crowfundingdonacion-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-crowfundingdonacion-hero__divider {
        width: 84px;
        height: 3px;
    }
}

@media (max-width: 991px) {
    .jm-crowfundingdonacion-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-crowfundingdonacion-hero__inner {
        gap: 1.1rem;
    }
    .jm-crowfundingdonacion-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.028em;
    }
    .jm-crowfundingdonacion-hero__divider {
        width: 72px;
        height: 3px;
    }
}

@media (max-width: 639px) {
    .jm-crowfundingdonacion-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-crowfundingdonacion-hero__overlay {
        background-color: rgba(8, 31, 55, 0.42);
    }
    .jm-crowfundingdonacion-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-crowfundingdonacion-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.25);
    }
    .jm-crowfundingdonacion-hero__divider {
        width: 60px;
        height: 3px;
    }
}

/* ==========================================================
 *   [ PÁGINA CROWDFUNDING EMPRESAS (page-crowdfunding-empresas.php) ]
 *   Hija de Página Crowdfunding principal.
 *   HERO: CON TEXTO. Imagen MISMA que Crowdfunding principal (002.webp).
 *         H1 "Crowdfunding Empresas" uppercase + divider gold 96px.
 *         Altura 70vh igual Crowdfunding padre. Overlay navy 0.35.
 *   LISTADO 4 CARDS HORIZONTALES (1 columna · 4 filas):
 *     Cada card FLEX 2 columnas internas:
 *       · IZQUIERDA: img programas-prog-003/004/005/006.webp 16:9 (35% ancho).
 *       · DERECHA: contenido.
 *         - Barra TÍTULO NAVY (fondo navy #0f4c81, texto blanco centrado)
 *           con nombre de la empresa (igual estructura img referencia user).
 *         - Párrafos de descripción (de 1 a 4 bloques) · texto navy oscuro.
 *         - Bloque estadísticas CROWDFUNDING: 3 filas META / MONTO
 *           RECAUDADO / INVERSIONISTAS · LABEL color verde + VALOR verde
 *           · linea separadora gradiente green.
 *   Responsive:
 *     · ≤991px: img 40% / content 60%
 *     · ≤639px: stack IMG arriba 100% · CONTENT abajo 100%
 *   Posición: DESPUÉS Crowdfunding General / ANTES Ferreterías General.
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-cfempresas-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO · CON TEXTO · CROWDFUNDING EMPRESAS ---------------- */

.jm-cfempresas-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen de fondo = MISMA que Crowdfunding principal (otros-empr-002.webp) */
.jm-cfempresas-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-crowdfunding-hero-002.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay navy 0.35 (igual Crowdfunding padre) */
.jm-cfempresas-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.35);
    mix-blend-mode: normal;
}

.jm-cfempresas-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

/* H1 Crowdfunding Empresas clamp 1.85rem → 3.1rem uppercase weight 900 */
.jm-cfempresas-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.22);
}

/* Divider gold 96px degradado glow DEBAJO H1 (igual Crowdfunding) */
.jm-cfempresas-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

/* ---------------- 2. SECCIÓN LISTADO CARDS HORIZONTALES ---------------- */

.jm-cfempresas-list {
    position: relative;
    width: 100%;
    padding: 7.5rem 0 8rem 0;
    background-color: #ffffff;
    background-image:
        radial-gradient(1000px 600px at 10% -8%, rgba(245, 197, 24, 0.075) 0%, transparent 52%),
        radial-gradient(1000px 600px at 100% 110%, rgba(15, 76, 129, 0.095) 0%, transparent 52%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.jm-cfempresas-list__inner {
    position: relative;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
}

/* --- Header sección listado · Pill navy + barra gold igual patrón JM --- */

.jm-cfempresas-list__header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.25rem;
    padding: 0 0 2.75rem 0;
    margin: 0 0 2rem 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.jm-cfempresas-list__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 1.35rem 0.6rem 1.35rem;
    border-radius: 11px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 4px 14px rgba(15, 76, 129, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.1);
    isolation: isolate;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    width: auto;
}

.jm-cfempresas-list__pill::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.55);
    z-index: 0;
}

.jm-cfempresas-list__pill-title {
    position: relative;
    z-index: 1;
    margin: 0 0 0 0.25rem;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: 0.95rem;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    max-width: 100%;
}

.jm-cfempresas-list__subtitle {
    margin: 0;
    padding: 0;
    max-width: 78ch;
    color: var(--jm-c-dark-bg-2, #0a1b2e);
    font-size: clamp(1.02rem, 0.35vw + 1rem, 1.15rem);
    line-height: 1.6;
    font-weight: 550;
    letter-spacing: 0.004em;
}

.jm-cfempresas-list__divider {
    display: block;
    width: 64px;
    height: 4px;
    margin: 0.25rem 0 0 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 60%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.5);
}

/* --- GRID 1 COLUMNA cards horizontales (4 filas) --- */

.jm-cfempresas-list__grid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2.25rem;
    align-items: stretch;
    justify-items: stretch;
}

/* ---------------- 3. CARDS HORIZONTALES (imagen izq + contenido der) ---------------- */

.jm-cfempcard {
    position: relative;
    width: 100%;
    min-height: 100%;
    background-color: #ffffff;
    border: 2px solid var(--jm-c-primary-100, rgba(15, 76, 129, 0.2));
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 0 0 1px rgba(245, 197, 24, 0.05),
        0 6px 14px rgba(15, 76, 129, 0.09),
        0 14px 28px rgba(15, 76, 129, 0.08),
        0 28px 55px rgba(10, 27, 46, 0.11);
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 320ms ease,
        box-shadow 420ms ease;
}

/* Barra gold izquierda patrón JM (4px vertical gradiente 180deg) */
.jm-cfempcard::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 100%);
    z-index: 3;
    box-shadow: 1px 0 10px rgba(245, 197, 24, 0.45);
}

.jm-cfempcard:hover {
    transform: translateY(-5px);
    border-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 0 0 2px rgba(245, 197, 24, 0.32),
        0 8px 20px rgba(245, 197, 24, 0.08),
        0 18px 38px rgba(15, 76, 129, 0.11),
        0 32px 65px rgba(10, 27, 46, 0.13);
}

/* BLOQUE IZQUIERDO: Imagen 16:9 · 35% ancho card (flex 0 0 35%) */
.jm-cfempcard__media {
    position: relative;
    flex: 0 0 35%;
    max-width: 35%;
    width: 35%;
    margin: 0;
    padding: 0;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    overflow: hidden;
    isolation: isolate;
    border-right: 1px solid var(--jm-c-primary-100, rgba(15, 76, 129, 0.2));
}

.jm-cfempcard__img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    filter: saturate(1.02);
    transition:
        transform 650ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 400ms ease;
}

.jm-cfempcard:hover .jm-cfempcard__img {
    transform: scale(1.04);
    filter: saturate(1.16) contrast(1.03);
}

/* BLOQUE DERECHO: Contenedor contenido · restante 65% */
.jm-cfempcard__content {
    position: relative;
    flex: 1 1 auto;
    width: 65%;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
}

/* --- Barra superior TÍTULO NAVY (igual img referencia user) --- */

.jm-cfempcard__title-bar {
    position: relative;
    width: 100%;
    padding: 0.95rem 1.75rem 0.95rem 1.75rem;
    background: linear-gradient(145deg,
        var(--jm-c-primary, #0f4c81) 0%,
        var(--jm-c-primary-600, #0d406d) 50%,
        var(--jm-c-primary-700, #0a2540) 100%);
    color: var(--jm-c-white, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom: 2.5px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 2px 10px rgba(10, 27, 46, 0.35);
    isolation: isolate;
    overflow: hidden;
}

/* Degradado gold inferior barra */
.jm-cfempcard__title-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2.5px;
    height: 2.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 12%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 88%,
        transparent 100%);
    z-index: 2;
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.45);
}

.jm-cfempcard__title {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.05rem, 0.5vw + 1rem, 1.2rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.22),
        0 1px 4px rgba(10, 27, 46, 0.35);
    white-space: normal;
}

/* --- Bloque PÁRRAFOS descripción --- */

.jm-cfempcard__text {
    position: relative;
    width: 100%;
    padding: 1.5rem 1.75rem 1.5rem 1.75rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    color: var(--jm-c-dark-bg-2, #0a1b2e);
}

.jm-cfempcard__paragraph {
    margin: 0;
    padding: 0;
    color: var(--jm-c-dark-bg-2, #0a1b2e);
    font-size: clamp(0.95rem, 0.18vw + 0.92rem, 1.05rem);
    line-height: 1.62;
    font-weight: 500;
    letter-spacing: 0.003em;
}

/* --- Bloque CROWDFUNDING STATS: META / MONTO / INVERSIONISTAS --- */

.jm-cfempcard__stats {
    position: relative;
    width: 100%;
    padding: 1.25rem 1.75rem 1.5rem 1.75rem;
    margin: 0 auto 0 auto;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.85rem;
    max-width: 100%;
}

/* Linea separadora superior gradiente green (igual img referencia verde) */
.jm-cfempcard__stats::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(46, 125, 50, 0.55) 10%,
        rgba(46, 125, 50, 0.75) 50%,
        rgba(46, 125, 50, 0.55) 90%,
        transparent 100%);
    margin-bottom: 0.2rem;
}

.jm-cfempcard__stat {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(160px, 32%) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    justify-items: stretch;
    border-bottom: 1px solid rgba(46, 125, 50, 0.22);
    padding-bottom: 0.65rem;
}

.jm-cfempcard__stat:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* LABEL color verde (igual img referencia user) */
.jm-cfempcard__stat-label {
    position: relative;
    margin: 0;
    padding: 0 0.5rem 0 0;
    color: #2e7d32;
    font-size: 0.95rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: rgba(46, 125, 50, 0.45);
    text-underline-offset: 3px;
}

/* VALUE color verde (alineado a la derecha) */
.jm-cfempcard__stat-value {
    position: relative;
    margin: 0;
    padding: 0;
    color: #2e7d32;
    font-size: 0.98rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.005em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- BLOQUE CTA BOTÓN: Ver Información de la Empresa (full-width) · ALINEADO A BOTONES OFICIALES JM --- */

.jm-cfempcard__info-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 3.5rem);
    margin: 0.25rem auto 1.75rem auto;
    padding: 1.18rem 1.6rem 1.18rem 1.7rem;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(145deg,
        var(--jm-c-primary, #0f4c81) 0%,
        var(--jm-c-primary-600, #0d406d) 45%,
        var(--jm-c-primary-700, #0a2540) 100%);
    color: var(--jm-c-white, #ffffff);
    font-size: 1.08rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.012em;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        background-image 450ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 450ms ease,
        color 400ms ease,
        transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1),
        border-top-color 350ms ease;
    border-top: 2.5px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 -6px 18px rgba(10, 27, 46, 0.32),
        0 3px 8px rgba(10, 27, 46, 0.25),
        0 8px 18px rgba(15, 76, 129, 0.3),
        0 16px 34px rgba(10, 27, 42, 0.22);
}

/* Borde superior degradado gold · separador visual STATS → BOTÓN */
.jm-cfempcard__info-btn::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2.5px;
    height: 2.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 12%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 88%,
        transparent 100%);
    z-index: 2;
    box-shadow: 0 0 12px rgba(245, 197, 24, 0.55);
}

/* Fondo gold hover OFICIAL JM (radial grande arriba + degradado superior + shimmer) · DESHABILITADO x user no le gusta brillo amarillo */
.jm-cfempcard__info-btn::after {
    display: none !important;
}

.jm-cfempcard__info-btn:hover {
    background: linear-gradient(145deg,
        var(--jm-c-primary-700, #0a2540) 0%,
        var(--jm-c-primary, #0f4c81) 50%,
        var(--jm-c-dark-bg, #061421) 100%);
    border-top-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 -8px 22px rgba(10, 27, 46, 0.38),
        0 5px 14px rgba(10, 27, 46, 0.3),
        0 12px 28px rgba(15, 76, 129, 0.32),
        0 22px 48px rgba(10, 27, 46, 0.25);
}

/* ::after disabled (brillo amarillo user no quiere) */

.jm-cfempcard__info-btn-text {
    position: relative;
    z-index: 1;
    padding-left: 0.4rem;
    white-space: normal;
    line-height: 1.2;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.25),
        0 1px 3px rgba(10, 27, 46, 0.35);
}

.jm-cfempcard__info-btn-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 12px;
    background: linear-gradient(145deg,
        rgba(245, 197, 24, 0.22) 0%,
        rgba(245, 197, 24, 0.1) 100%);
    color: var(--jm-c-gold, #f5c518);
    flex-shrink: 0;
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        background-image 380ms ease,
        background-color 380ms ease,
        color 380ms ease,
        box-shadow 380ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(245, 197, 24, 0.25),
        0 1px 4px rgba(245, 197, 24, 0.2);
}

.jm-cfempcard__info-btn:hover .jm-cfempcard__info-btn-icon {
    transform: translateX(5px);
    background: linear-gradient(145deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 100%);
    color: var(--jm-c-dark-bg-2, #0a1b2e);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 18px rgba(245, 197, 24, 0.8),
        0 2px 8px rgba(10, 27, 42, 0.22);
}

/* ---------------- 4. MEDIA QUERIES · breakpoints standard JM ---------------- */

@media (max-width: 1199px) {
    .jm-cfempresas-list {
        padding: 6.5rem 0 7rem 0;
    }
    .jm-cfempresas-list__inner {
        max-width: 1000px;
    }
    .jm-cfempresas-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-cfempresas-hero__inner {
        gap: 1.25rem;
    }
    .jm-cfempresas-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.55rem);
    }
    .jm-cfempresas-hero__divider {
        width: 84px;
        height: 3px;
    }
    .jm-cfempresas-list__grid {
        gap: 2rem;
    }
    /* Ajuste porcentajes: img 38% · content 62% */
    .jm-cfempcard__media {
        flex-basis: 38%;
        max-width: 38%;
        width: 38%;
    }
    .jm-cfempcard__content {
        width: 62%;
    }
    .jm-cfempcard__title-bar {
        padding: 0.9rem 1.45rem 0.9rem 1.45rem;
    }
    .jm-cfempcard__text,
    .jm-cfempcard__stats {
        padding-left: 1.45rem;
        padding-right: 1.45rem;
    }
    .jm-cfempcard__info-btn {
        width: calc(100% - 2.9rem);
        padding: 1.08rem 1.45rem 1.08rem 1.55rem;
        margin-top: 0.2rem;
        margin-bottom: 1.5rem;
        font-size: 1rem;
    }
    .jm-cfempcard__info-btn-text {
        font-size: 0.98rem;
    }
    .jm-cfempcard__info-btn-icon {
        width: 2.4rem;
        height: 2.4rem;
    }
}

@media (max-width: 991px) {
    .jm-cfempresas-list {
        padding: 5.75rem 0 6.25rem 0;
    }
    .jm-cfempresas-list__inner {
        max-width: 820px;
    }
    .jm-cfempresas-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-cfempresas-hero__inner {
        gap: 1.1rem;
    }
    .jm-cfempresas-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.1rem);
        letter-spacing: 0.028em;
    }
    .jm-cfempresas-hero__divider {
        width: 72px;
        height: 3px;
    }
    .jm-cfempresas-list__header {
        padding: 0 0 2.25rem 0;
        gap: 1rem;
    }
    .jm-cfempresas-list__grid {
        gap: 1.75rem;
    }
    /* Cards siguen HORIZONTALES en tablet: img 40% + content 60% */
    .jm-cfempcard {
        flex-direction: row;
    }
    .jm-cfempcard__media {
        flex-basis: 40%;
        max-width: 40%;
        width: 40%;
    }
    .jm-cfempcard__content {
        width: 60%;
    }
    .jm-cfempcard__title-bar {
        padding: 0.85rem 1.3rem 0.85rem 1.3rem;
    }
    .jm-cfempcard__title {
        font-size: 1rem;
        letter-spacing: 0.022em;
    }
    .jm-cfempcard__text {
        padding: 1.25rem 1.3rem 1.25rem 1.3rem;
        gap: 0.85rem;
    }
    .jm-cfempcard__stats {
        padding: 1.1rem 1.3rem 1.3rem 1.3rem;
        gap: 0.7rem;
    }
    .jm-cfempcard__stat {
        grid-template-columns: minmax(150px, 38%) minmax(0, 1fr);
        gap: 0.4rem;
        padding-bottom: 0.55rem;
    }
    .jm-cfempcard__stat-label {
        font-size: 0.88rem;
    }
    .jm-cfempcard__stat-value {
        font-size: 0.92rem;
    }
    .jm-cfempcard__info-btn {
        width: calc(100% - 2.6rem);
        padding: 1rem 1.25rem 1rem 1.3rem;
        margin-top: 0.15rem;
        margin-bottom: 1.3rem;
        font-size: 0.97rem;
        border-top-width: 2.2px;
    }
    .jm-cfempcard__info-btn-text {
        font-size: 0.95rem;
    }
    .jm-cfempcard__info-btn-icon {
        width: 2.3rem;
        height: 2.3rem;
        border-radius: 11px;
    }
}

@media (max-width: 639px) {
    .jm-cfempresas-list {
        padding: 5rem 0 5.5rem 0;
    }
    .jm-cfempresas-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-cfempresas-hero__overlay {
        background-color: rgba(8, 31, 55, 0.42);
    }
    .jm-cfempresas-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-cfempresas-hero__title {
        font-size: clamp(1.12rem, 5.5vw + 0.98rem, 1.75rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.25);
    }
    .jm-cfempresas-hero__divider {
        width: 60px;
        height: 3px;
    }
    .jm-cfempresas-list__inner {
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-cfempresas-list__header {
        padding: 0 0 2rem 0;
        gap: 0.85rem;
        margin: 0 0 1.35rem 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .jm-cfempresas-list__pill {
        max-width: 100%;
        min-width: 0;
        width: auto;
        padding: 0.55rem 1.15rem 0.55rem 1.15rem;
        gap: 0.6rem;
    }
    .jm-cfempresas-list__pill-title {
        font-size: 0.78rem;
        letter-spacing: 0.1em;
        line-height: 1.35;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
    .jm-cfempresas-list__grid {
        gap: 1.4rem;
    }
    /* ==== STACK MÓVIL: imagen 100% width ARRIBA · contenido 100% width ABAJO ==== */
    .jm-cfempcard {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .jm-cfempcard__media {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16 / 9;
        border-right: 0;
        border-bottom: 1px solid var(--jm-c-primary-100, rgba(15, 76, 129, 0.2));
    }
    .jm-cfempcard__content {
        width: 100%;
        flex: 1 1 auto;
    }
    .jm-cfempcard__title-bar {
        padding: 0.85rem 1.2rem 0.85rem 1.2rem;
    }
    .jm-cfempcard__title {
        font-size: 0.98rem;
    }
    .jm-cfempcard__text {
        padding: 1.1rem 1.2rem 1.1rem 1.2rem;
        gap: 0.8rem;
    }
    .jm-cfempcard__paragraph {
        line-height: 1.58;
    }
    .jm-cfempcard__stats {
        padding: 1rem 1.2rem 1.25rem 1.2rem;
        gap: 0.65rem;
    }
    .jm-cfempcard__stat {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.18rem;
        padding-bottom: 0.55rem;
    }
    /* Label + Value a FULL WIDTH · label arriba · valor abajo alineado DERECHA */
    .jm-cfempcard__stat-label,
    .jm-cfempcard__stat-value {
        width: 100%;
    }
    .jm-cfempcard__stat-label {
        font-size: 0.85rem;
    }
    .jm-cfempcard__stat-value {
        font-size: 0.95rem;
        text-align: right;
    }
    /* Botón CTA full-width móvil: alineado patrón JM oficial */
    .jm-cfempcard__info-btn {
        width: calc(100% - 2.4rem);
        padding: 0.95rem 1.05rem 0.95rem 1.1rem;
        margin-top: 0.1rem;
        margin-bottom: 1.15rem;
        border-radius: 0 0 12px 12px;
        border-top-width: 2px;
        font-size: 0.93rem;
    }
    .jm-cfempcard__info-btn-text {
        font-size: 0.93rem;
        line-height: 1.3;
        padding-left: 0.25rem;
    }
    .jm-cfempcard__info-btn-icon {
        width: 2.15rem;
        height: 2.15rem;
        border-radius: 10px;
        flex-shrink: 0;
    }
}

/* ==========================================================
 *   [ PÁGINA INTERNA · ACEROS CARIBE S.A. (page-aceros-caribe-s-a.php) ]
 *   Página detalle inversión (hija Crowdfunding Empresas).
 *   SIN HERO. Layout 2 columnas desktop:
 *       IZQ (40%) → Logo Aceros + CTA WA "Quiero Ser Socio".
 *       DER (60%) → Títulos underlined black uppercase + 6 párrafos
 *                   textos VERBATIM extraídos imagen referencia user.
 *   Responsive: 1199 → 38/62; 991 → 40/60; 639 → STACK 1 col.
 *   (Insertado DESPUÉS Crowdfunding Empresas · ANTES Ferreterías General)
 * ========================================================== */

/* ---------------- 0. Contenedor MAIN & SECTION ---------------- */

.jm-acerosca-main {
    position: relative;
    width: 100%;
    min-height: 60vh;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

/* ---------------- 1. SECCIÓN DETALLE EMPRESA · 2 columnas ---------------- */

.jm-acerosca-detail {
    position: relative;
    width: 100%;
    padding: 7rem 0 7.5rem 0;
    margin: 0;
    background:
        radial-gradient(1200px 500px at 10% -10%,
            rgba(201, 162, 39, 0.08) 0%, transparent 60%),
        radial-gradient(900px 450px at 100% 110%,
            rgba(10, 37, 64, 0.08) 0%, transparent 55%),
        linear-gradient(180deg,
            #ffffff 0%,
            #fdfbf6 55%,
            #ffffff 100%);
    overflow: hidden;
}

.jm-acerosca-detail__inner {
    position: relative;
    width: 100%;
    max-width: 1260px;
    margin: 0 auto 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    z-index: 1;
}

.jm-acerosca-detail__grid {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3rem;
    padding: 2.5rem;
    border-radius: 22px;
    background-color: #ffffff;
    border: 1px solid rgba(201, 162, 39, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -2px 0 rgba(10, 37, 64, 0.05),
        0 10px 30px rgba(10, 27, 42, 0.12),
        0 22px 60px rgba(10, 27, 42, 0.08);
}

/* Barra gold izquierda patrón JM */
.jm-acerosca-detail__grid::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.5rem;
    bottom: 1.5rem;
    width: 4px;
    background: linear-gradient(180deg,
        rgba(201, 162, 39, 0.15) 0%,
        rgba(245, 197, 24, 0.95) 15%,
        rgba(201, 162, 39, 1) 50%,
        rgba(245, 197, 24, 0.95) 85%,
        rgba(201, 162, 39, 0.15) 100%);
    border-radius: 0 4px 4px 0;
    z-index: 2;
    box-shadow:
        0 0 14px rgba(245, 197, 24, 0.35),
        2px 0 8px rgba(10, 27, 42, 0.12);
}

/* --- Columna izquierda: Logo + CTA --- */

.jm-acerosca-detail__col--media {
    flex: 0 0 40%;
    max-width: 40%;
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.75rem;
    padding-left: 0.75rem;
}

.jm-acerosca-detail__logo-wrap {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 1.5rem;
    border-radius: 16px;
    background:
        radial-gradient(400px 250px at 50% 0%,
            rgba(245, 197, 24, 0.14) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fffdf7 100%);
    border: 1px solid rgba(201, 162, 39, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 4px 14px rgba(10, 27, 42, 0.1),
        0 1px 3px rgba(10, 27, 42, 0.08);
    overflow: hidden;
}

.jm-acerosca-detail__logo {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

/* --- Botón "Quiero Ser Socio" · alineado patrón botones JM (navy/gold oficial) --- */

.jm-acerosca-detail__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 1.22rem 1.7rem 1.22rem 1.85rem;
    border-radius: 14px;
    background: linear-gradient(145deg,
        var(--jm-c-primary, #0f4c81) 0%,
        var(--jm-c-primary-600, #0d406d) 45%,
        var(--jm-c-primary-700, #0a2540) 100%);
    color: var(--jm-c-white, #ffffff);
    font-size: 1.22rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        background-image 450ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 450ms ease,
        color 400ms ease,
        transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1),
        border-top-color 350ms ease;
    border-top: 2.5px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 -6px 18px rgba(10, 27, 42, 0.32),
        0 3px 8px rgba(10, 27, 42, 0.25),
        0 8px 18px rgba(15, 76, 129, 0.3),
        0 16px 34px rgba(10, 27, 42, 0.22);
}

/* Separador superior gold degradado */
.jm-acerosca-detail__cta::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2.5px;
    height: 2.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 12%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 88%,
        transparent 100%);
    z-index: 2;
    box-shadow: 0 0 12px rgba(245, 197, 24, 0.55);
}

/* Overlay gold hover (radial + degradado + shimmer) · DESHABILITADO x user no le gusta brillo amarillo */
.jm-acerosca-detail__cta::after {
    display: none !important;
}

.jm-acerosca-detail__cta:hover {
    background: linear-gradient(145deg,
        var(--jm-c-primary-700, #0a2540) 0%,
        var(--jm-c-primary, #0f4c81) 50%,
        var(--jm-c-dark-bg, #061421) 100%);
    border-top-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 -8px 22px rgba(10, 27, 42, 0.38),
        0 5px 14px rgba(10, 27, 42, 0.3),
        0 12px 28px rgba(15, 76, 129, 0.32),
        0 22px 48px rgba(10, 27, 42, 0.25);
    transform: translateY(-3px);
}

/* ::after disabled (brillo amarillo user no quiere) */

.jm-acerosca-detail__cta-label {
    position: relative;
    z-index: 1;
    padding-left: 0.45rem;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.25),
        0 1px 3px rgba(10, 27, 42, 0.35);
}

.jm-acerosca-detail__cta-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 12px;
    background: linear-gradient(145deg,
        rgba(245, 197, 24, 0.22) 0%,
        rgba(245, 197, 24, 0.1) 100%);
    color: var(--jm-c-gold, #f5c518);
    flex-shrink: 0;
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        background-image 380ms ease,
        background-color 380ms ease,
        color 380ms ease,
        box-shadow 380ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(245, 197, 24, 0.25),
        0 1px 4px rgba(245, 197, 24, 0.2);
}

.jm-acerosca-detail__cta:hover .jm-acerosca-detail__cta-icon {
    transform: translateX(5px);
    background: linear-gradient(145deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 100%);
    color: var(--jm-c-dark-bg-2, #0a1b2e);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 18px rgba(245, 197, 24, 0.8),
        0 2px 8px rgba(10, 27, 42, 0.22);
}

/* --- Columna derecha: Títulos + párrafos VERBATIM img ref --- */

.jm-acerosca-detail__col--content {
    flex: 1 1 auto;
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.25rem;
    padding-right: 0.5rem;
}

/* Título underlined black uppercase (igual imagen referencia user) */
.jm-acerosca-detail__title {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0 0 0.4rem 0;
    font-size: 1.45rem;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    color: #111111;
    text-decoration: underline;
    text-decoration-color: #111111;
    text-decoration-thickness: 1.2px;
    text-underline-offset: 5px;
}

.jm-acerosca-detail__title--h2 {
    font-size: 1.38rem;
    padding-top: 0.25rem;
}

.jm-acerosca-detail__text-block {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.1rem;
}

.jm-acerosca-detail__paragraph {
    margin: 0;
    padding: 0;
    font-size: 1.03rem;
    line-height: 1.72;
    font-weight: 400;
    letter-spacing: 0.005em;
    color: #1a1a1a;
    text-align: left;
}

/* ---------------- 4. MEDIA QUERIES · breakpoints standard JM ---------------- */

@media (max-width: 1199px) {
    .jm-acerosca-detail {
        padding: 6.5rem 0 7rem 0;
    }
    .jm-acerosca-detail__inner {
        max-width: 1000px;
    }
    .jm-acerosca-detail__grid {
        gap: 2.5rem;
        padding: 2.25rem;
    }
    /* Porcentajes cols: 38% / 62% */
    .jm-acerosca-detail__col--media {
        flex-basis: 38%;
        max-width: 38%;
        width: 38%;
        gap: 1.5rem;
    }
    .jm-acerosca-detail__col--content {
        width: 62%;
        gap: 2rem;
    }
    .jm-acerosca-detail__title {
        font-size: 1.3rem;
    }
    .jm-acerosca-detail__title--h2 {
        font-size: 1.24rem;
    }
    .jm-acerosca-detail__paragraph {
        font-size: 1rem;
        line-height: 1.68;
    }
    .jm-acerosca-detail__cta {
        padding: 1.1rem 1.5rem 1.1rem 1.6rem;
        font-size: 1.12rem;
    }
    .jm-acerosca-detail__cta-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (max-width: 991px) {
    .jm-acerosca-detail {
        padding: 5.75rem 0 6.25rem 0;
    }
    .jm-acerosca-detail__inner {
        max-width: 820px;
    }
    .jm-acerosca-detail__grid {
        gap: 2rem;
        padding: 2rem;
        border-radius: 18px;
    }
    /* Cards siguen HORIZONTALES en tablet: 40% / 60% */
    .jm-acerosca-detail__col--media {
        flex-basis: 40%;
        max-width: 40%;
        width: 40%;
        gap: 1.35rem;
    }
    .jm-acerosca-detail__col--content {
        width: 60%;
        gap: 1.8rem;
    }
    .jm-acerosca-detail__logo-wrap {
        padding: 1.25rem;
        border-radius: 14px;
    }
    .jm-acerosca-detail__title {
        font-size: 1.18rem;
    }
    .jm-acerosca-detail__title--h2 {
        font-size: 1.12rem;
    }
    .jm-acerosca-detail__paragraph {
        font-size: 0.97rem;
        line-height: 1.64;
    }
    .jm-acerosca-detail__text-block {
        gap: 0.95rem;
    }
    .jm-acerosca-detail__cta {
        padding: 1rem 1.3rem 1rem 1.4rem;
        font-size: 1.02rem;
        border-radius: 12px;
        border-top-width: 2.2px;
    }
    .jm-acerosca-detail__cta-icon {
        width: 2.35rem;
        height: 2.35rem;
        border-radius: 11px;
    }
}

@media (max-width: 639px) {
    .jm-acerosca-detail {
        padding: 5rem 0 5.5rem 0;
    }
    .jm-acerosca-detail__inner {
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-acerosca-detail__grid {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 1.75rem;
        padding: 1.5rem;
        border-radius: 16px;
    }
    .jm-acerosca-detail__grid::before {
        top: 1.15rem;
        bottom: 1.15rem;
        width: 3px;
    }
    /* STACK MÓVIL: Logo + CTA ARRIBA (100%) · Contenido ABAJO (100%) */
    .jm-acerosca-detail__col--media,
    .jm-acerosca-detail__col--content {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    .jm-acerosca-detail__col--media {
        gap: 1.25rem;
    }
    .jm-acerosca-detail__col--content {
        gap: 1.6rem;
    }
    .jm-acerosca-detail__logo-wrap {
        padding: 1.1rem;
        border-radius: 12px;
    }
    .jm-acerosca-detail__title {
        font-size: 1.02rem;
        text-underline-offset: 4px;
        line-height: 1.32;
    }
    .jm-acerosca-detail__title--h2 {
        font-size: 0.98rem;
    }
    .jm-acerosca-detail__paragraph {
        font-size: 0.95rem;
        line-height: 1.62;
    }
    .jm-acerosca-detail__text-block {
        gap: 0.85rem;
    }
    .jm-acerosca-detail__cta {
        padding: 0.95rem 1.15rem 0.95rem 1.25rem;
        font-size: 1rem;
        border-radius: 12px;
        border-top-width: 2px;
        letter-spacing: 0.015em;
    }
    .jm-acerosca-detail__cta-label {
        padding-left: 0.25rem;
    }
    .jm-acerosca-detail__cta-icon {
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 10px;
    }
}

/* ==========================================================
 *   [ PÁGINA INTERNA · TRANS RENACER S.A. (page-trans-renacer-s-a.php) ]
 *   Página detalle inversión (hija Crowdfunding Empresas).
 *   DISEÑO 100% IGUAL que Aceros Caribe S.A. (mismo layout).
 *   SIN HERO. Layout 2 columnas desktop:
 *       IZQ (40%) → Logo Trans Renacer / AS Transportes (card 004)
 *                  + CTA WA "Quiero Ser Socio".
 *       DER (60%) → Títulos underlined black uppercase + textos
 *                   VERBATIM extraídos imagen referencia user.
 *   Responsive: 1199 → 38/62; 991 → 40/60; 639 → STACK 1 col.
 *   (Insertado DESPUÉS Aceros Caribe S.A. · ANTES Ferreterías General)
 * ========================================================== */

/* ---------------- 0. Contenedor MAIN & SECTION ---------------- */

.jm-transrenace-main {
    position: relative;
    width: 100%;
    min-height: 60vh;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

/* ---------------- 1. SECCIÓN DETALLE EMPRESA · 2 columnas ---------------- */

.jm-transrenace-detail {
    position: relative;
    width: 100%;
    padding: 7rem 0 7.5rem 0;
    margin: 0;
    background:
        radial-gradient(1200px 500px at 10% -10%,
            rgba(201, 162, 39, 0.08) 0%, transparent 60%),
        radial-gradient(900px 450px at 100% 110%,
            rgba(10, 37, 64, 0.08) 0%, transparent 55%),
        linear-gradient(180deg,
            #ffffff 0%,
            #fdfbf6 55%,
            #ffffff 100%);
    overflow: hidden;
}

.jm-transrenace-detail__inner {
    position: relative;
    width: 100%;
    max-width: 1260px;
    margin: 0 auto 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    z-index: 1;
}

.jm-transrenace-detail__grid {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3rem;
    padding: 2.5rem;
    border-radius: 22px;
    background-color: #ffffff;
    border: 1px solid rgba(201, 162, 39, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -2px 0 rgba(10, 37, 64, 0.05),
        0 10px 30px rgba(10, 27, 42, 0.12),
        0 22px 60px rgba(10, 27, 42, 0.08);
}

/* Barra gold izquierda patrón JM */
.jm-transrenace-detail__grid::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.5rem;
    bottom: 1.5rem;
    width: 4px;
    background: linear-gradient(180deg,
        rgba(201, 162, 39, 0.15) 0%,
        rgba(245, 197, 24, 0.95) 15%,
        rgba(201, 162, 39, 1) 50%,
        rgba(245, 197, 24, 0.95) 85%,
        rgba(201, 162, 39, 0.15) 100%);
    border-radius: 0 4px 4px 0;
    z-index: 2;
    box-shadow:
        0 0 14px rgba(245, 197, 24, 0.35),
        2px 0 8px rgba(10, 27, 42, 0.12);
}

/* --- Columna izquierda: Logo + CTA --- */

.jm-transrenace-detail__col--media {
    flex: 0 0 40%;
    max-width: 40%;
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.75rem;
    padding-left: 0.75rem;
}

.jm-transrenace-detail__logo-wrap {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 1.5rem;
    border-radius: 16px;
    background:
        radial-gradient(400px 250px at 50% 0%,
            rgba(245, 197, 24, 0.14) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fffdf7 100%);
    border: 1px solid rgba(201, 162, 39, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 4px 14px rgba(10, 27, 42, 0.1),
        0 1px 3px rgba(10, 27, 42, 0.08);
    overflow: hidden;
}

.jm-transrenace-detail__logo {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: cover;
    border-radius: 10px;
}

/* --- Botón "Quiero Ser Socio" · alineado patrón botones JM (navy/gold oficial) --- */

.jm-transrenace-detail__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 1.22rem 1.7rem 1.22rem 1.85rem;
    border-radius: 14px;
    background: linear-gradient(145deg,
        var(--jm-c-primary, #0f4c81) 0%,
        var(--jm-c-primary-600, #0d406d) 45%,
        var(--jm-c-primary-700, #0a2540) 100%);
    color: var(--jm-c-white, #ffffff);
    font-size: 1.22rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        background-image 450ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 450ms ease,
        color 400ms ease,
        transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1),
        border-top-color 350ms ease;
    border-top: 2.5px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 -6px 18px rgba(10, 27, 42, 0.32),
        0 3px 8px rgba(10, 27, 42, 0.25),
        0 8px 18px rgba(15, 76, 129, 0.3),
        0 16px 34px rgba(10, 27, 42, 0.22);
}

/* Separador superior gold degradado */
.jm-transrenace-detail__cta::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2.5px;
    height: 2.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 12%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 88%,
        transparent 100%);
    z-index: 2;
    box-shadow: 0 0 12px rgba(245, 197, 24, 0.55);
}

/* Overlay gold hover (radial + degradado + shimmer) · DESHABILITADO x user no le gusta brillo amarillo */
.jm-transrenace-detail__cta::after {
    display: none !important;
}

.jm-transrenace-detail__cta:hover {
    background: linear-gradient(145deg,
        var(--jm-c-primary-700, #0a2540) 0%,
        var(--jm-c-primary, #0f4c81) 50%,
        var(--jm-c-dark-bg, #061421) 100%);
    border-top-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 -8px 22px rgba(10, 27, 42, 0.38),
        0 5px 14px rgba(10, 27, 42, 0.3),
        0 12px 28px rgba(15, 76, 129, 0.32),
        0 22px 48px rgba(10, 27, 42, 0.25);
    transform: translateY(-3px);
}

/* ::after disabled (brillo amarillo user no quiere) */

.jm-transrenace-detail__cta-label {
    position: relative;
    z-index: 1;
    padding-left: 0.45rem;
}

.jm-transrenace-detail__cta-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 12px;
    background: linear-gradient(145deg,
        rgba(245, 197, 24, 0.22) 0%,
        rgba(245, 197, 24, 0.1) 100%);
    color: var(--jm-c-gold, #f5c518);
    flex-shrink: 0;
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        background-image 380ms ease,
        background-color 380ms ease,
        color 380ms ease,
        box-shadow 380ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(245, 197, 24, 0.25),
        0 1px 4px rgba(245, 197, 24, 0.2);
}

.jm-transrenace-detail__cta:hover .jm-transrenace-detail__cta-icon {
    transform: translateX(5px);
    background: linear-gradient(145deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 100%);
    color: var(--jm-c-dark-bg-2, #0a1b2e);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 18px rgba(245, 197, 24, 0.8),
        0 2px 8px rgba(10, 27, 42, 0.22);
}

/* --- Columna derecha: Títulos + párrafos VERBATIM img ref --- */

.jm-transrenace-detail__col--content {
    flex: 1 1 auto;
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.25rem;
    padding-right: 0.5rem;
}

/* Título underlined black uppercase (igual imagen referencia user) */
.jm-transrenace-detail__title {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0 0 0.4rem 0;
    font-size: 1.45rem;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    color: #111111;
    text-decoration: underline;
    text-decoration-color: #111111;
    text-decoration-thickness: 1.2px;
    text-underline-offset: 5px;
}

.jm-transrenace-detail__title--h2 {
    font-size: 1.38rem;
    padding-top: 0.25rem;
}

.jm-transrenace-detail__text-block {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.1rem;
}

.jm-transrenace-detail__paragraph {
    margin: 0;
    padding: 0;
    font-size: 1.03rem;
    line-height: 1.72;
    font-weight: 400;
    letter-spacing: 0.005em;
    color: #1a1a1a;
    text-align: left;
}

/* ---------------- 4. MEDIA QUERIES · breakpoints standard JM ---------------- */

@media (max-width: 1199px) {
    .jm-transrenace-detail {
        padding: 6.5rem 0 7rem 0;
    }
    .jm-transrenace-detail__inner {
        max-width: 1000px;
    }
    .jm-transrenace-detail__grid {
        gap: 2.5rem;
        padding: 2.25rem;
    }
    /* Porcentajes cols: 38% / 62% */
    .jm-transrenace-detail__col--media {
        flex-basis: 38%;
        max-width: 38%;
        width: 38%;
        gap: 1.5rem;
    }
    .jm-transrenace-detail__col--content {
        width: 62%;
        gap: 2rem;
    }
    .jm-transrenace-detail__title {
        font-size: 1.3rem;
    }
    .jm-transrenace-detail__title--h2 {
        font-size: 1.24rem;
    }
    .jm-transrenace-detail__paragraph {
        font-size: 1rem;
        line-height: 1.68;
    }
    .jm-transrenace-detail__cta {
        padding: 1.1rem 1.5rem 1.1rem 1.6rem;
        font-size: 1.12rem;
    }
    .jm-transrenace-detail__cta-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (max-width: 991px) {
    .jm-transrenace-detail {
        padding: 5.75rem 0 6.25rem 0;
    }
    .jm-transrenace-detail__inner {
        max-width: 820px;
    }
    .jm-transrenace-detail__grid {
        gap: 2rem;
        padding: 2rem;
        border-radius: 18px;
    }
    /* Cards siguen HORIZONTALES en tablet: 40% / 60% */
    .jm-transrenace-detail__col--media {
        flex-basis: 40%;
        max-width: 40%;
        width: 40%;
        gap: 1.35rem;
    }
    .jm-transrenace-detail__col--content {
        width: 60%;
        gap: 1.8rem;
    }
    .jm-transrenace-detail__logo-wrap {
        padding: 1.25rem;
        border-radius: 14px;
    }
    .jm-transrenace-detail__title {
        font-size: 1.18rem;
    }
    .jm-transrenace-detail__title--h2 {
        font-size: 1.12rem;
    }
    .jm-transrenace-detail__paragraph {
        font-size: 0.97rem;
        line-height: 1.64;
    }
    .jm-transrenace-detail__text-block {
        gap: 0.95rem;
    }
    .jm-transrenace-detail__cta {
        padding: 1rem 1.3rem 1rem 1.4rem;
        font-size: 1.02rem;
        border-radius: 12px;
        border-top-width: 2.2px;
    }
    .jm-transrenace-detail__cta-icon {
        width: 2.35rem;
        height: 2.35rem;
        border-radius: 11px;
    }
}

@media (max-width: 639px) {
    .jm-transrenace-detail {
        padding: 5rem 0 5.5rem 0;
    }
    .jm-transrenace-detail__inner {
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-transrenace-detail__grid {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 1.75rem;
        padding: 1.5rem;
        border-radius: 16px;
    }
    .jm-transrenace-detail__grid::before {
        top: 1.15rem;
        bottom: 1.15rem;
        width: 3px;
    }
    /* STACK MÓVIL: Logo + CTA ARRIBA (100%) · Contenido ABAJO (100%) */
    .jm-transrenace-detail__col--media,
    .jm-transrenace-detail__col--content {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    .jm-transrenace-detail__col--media {
        gap: 1.25rem;
    }
    .jm-transrenace-detail__col--content {
        gap: 1.6rem;
    }
    .jm-transrenace-detail__logo-wrap {
        padding: 1.1rem;
        border-radius: 12px;
    }
    .jm-transrenace-detail__title {
        font-size: 1.02rem;
        text-underline-offset: 4px;
        line-height: 1.32;
    }
    .jm-transrenace-detail__title--h2 {
        font-size: 0.98rem;
    }
    .jm-transrenace-detail__paragraph {
        font-size: 0.95rem;
        line-height: 1.62;
    }
    .jm-transrenace-detail__text-block {
        gap: 0.85rem;
    }
    .jm-transrenace-detail__cta {
        padding: 0.95rem 1.15rem 0.95rem 1.25rem;
        font-size: 1rem;
        border-radius: 12px;
        border-top-width: 2px;
        letter-spacing: 0.015em;
    }
    .jm-transrenace-detail__cta-label {
        padding-left: 0.25rem;
    }
    .jm-transrenace-detail__cta-icon {
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 10px;
    }
}

/* ==========================================================
 *   [ PÁGINA INTERNA · RENTACAR WM (page-rentacar-wm.php) ]
 *   Página detalle inversión (hija Crowdfunding Empresas).
 *   MISMA estructura base 2 columnas que Aceros / Trans Renacer.
 *   NUEVO: GALERÍA SLIDER (4 imágenes) después Logo + CTA.
 *   SIN HERO. Layout 2 columnas desktop:
 *       IZQ (40%) → Logo RentaCar WM (card 005 CF Empresas)
 *                  + CTA WA "Quiero Ser Socio"
 *                  + GALERÍA SLIDER (prev/next circular gris + dots).
 *       DER (60%) → Títulos underlined black uppercase + textos
 *                   VERBATIM extraídos imagen referencia user.
 *   Responsive: 1199 → 38/62; 991 → 40/60; 639 → STACK 1 col.
 *   (Insertado DESPUÉS Trans Renacer S.A. · ANTES Ferreterías General)
 * ========================================================== */

/* ---------------- 0. Contenedor MAIN & SECTION ---------------- */

.jm-rentacarwm-main {
    position: relative;
    width: 100%;
    min-height: 60vh;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

/* ---------------- 1. SECCIÓN DETALLE EMPRESA · 2 columnas ---------------- */

.jm-rentacarwm-detail {
    position: relative;
    width: 100%;
    padding: 7rem 0 7.5rem 0;
    margin: 0;
    background:
        radial-gradient(1200px 500px at 10% -10%,
            rgba(201, 162, 39, 0.08) 0%, transparent 60%),
        radial-gradient(900px 450px at 100% 110%,
            rgba(10, 37, 64, 0.08) 0%, transparent 55%),
        linear-gradient(180deg,
            #ffffff 0%,
            #fdfbf6 55%,
            #ffffff 100%);
    overflow: hidden;
}

.jm-rentacarwm-detail__inner {
    position: relative;
    width: 100%;
    max-width: 1260px;
    margin: 0 auto 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    z-index: 1;
}

.jm-rentacarwm-detail__grid {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3rem;
    padding: 2.5rem;
    border-radius: 22px;
    background-color: #ffffff;
    border: 1px solid rgba(201, 162, 39, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -2px 0 rgba(10, 37, 64, 0.05),
        0 10px 30px rgba(10, 27, 42, 0.12),
        0 22px 60px rgba(10, 27, 42, 0.08);
}

/* Barra gold izquierda patrón JM */
.jm-rentacarwm-detail__grid::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.5rem;
    bottom: 1.5rem;
    width: 4px;
    background: linear-gradient(180deg,
        rgba(201, 162, 39, 0.15) 0%,
        rgba(245, 197, 24, 0.95) 15%,
        rgba(201, 162, 39, 1) 50%,
        rgba(245, 197, 24, 0.95) 85%,
        rgba(201, 162, 39, 0.15) 100%);
    border-radius: 0 4px 4px 0;
    z-index: 2;
    box-shadow:
        0 0 14px rgba(245, 197, 24, 0.35),
        2px 0 8px rgba(10, 27, 42, 0.12);
}

/* --- Columna izquierda: Logo + CTA + GALERÍA --- */

.jm-rentacarwm-detail__col--media {
    flex: 0 0 40%;
    max-width: 40%;
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.75rem;
    padding-left: 0.75rem;
}

.jm-rentacarwm-detail__logo-wrap {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 1.5rem;
    border-radius: 16px;
    background:
        radial-gradient(400px 250px at 50% 0%,
            rgba(245, 197, 24, 0.14) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fffdf7 100%);
    border: 1px solid rgba(201, 162, 39, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 4px 14px rgba(10, 27, 42, 0.1),
        0 1px 3px rgba(10, 27, 42, 0.08);
    overflow: hidden;
}

.jm-rentacarwm-detail__logo {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

/* --- Botón "Quiero Ser Socio" · alineado patrón botones JM (navy/gold oficial) --- */

.jm-rentacarwm-detail__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 1.22rem 1.7rem 1.22rem 1.85rem;
    border-radius: 14px;
    background: linear-gradient(145deg,
        var(--jm-c-primary, #0f4c81) 0%,
        var(--jm-c-primary-600, #0d406d) 45%,
        var(--jm-c-primary-700, #0a2540) 100%);
    color: var(--jm-c-white, #ffffff);
    font-size: 1.22rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        background-image 450ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 450ms ease,
        color 400ms ease,
        transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1),
        border-top-color 350ms ease;
    border-top: 2.5px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 -6px 18px rgba(10, 27, 42, 0.32),
        0 3px 8px rgba(10, 27, 42, 0.25),
        0 8px 18px rgba(15, 76, 129, 0.3),
        0 16px 34px rgba(10, 27, 42, 0.22);
}

/* Separador superior gold degradado */
.jm-rentacarwm-detail__cta::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2.5px;
    height: 2.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 12%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 88%,
        transparent 100%);
    z-index: 2;
    box-shadow: 0 0 12px rgba(245, 197, 24, 0.55);
}

/* Overlay gold hover (radial + degradado + shimmer) · DESHABILITADO x user no le gusta brillo amarillo */
.jm-rentacarwm-detail__cta::after {
    display: none !important;
}

.jm-rentacarwm-detail__cta:hover {
    background: linear-gradient(145deg,
        var(--jm-c-primary-700, #0a2540) 0%,
        var(--jm-c-primary, #0f4c81) 50%,
        var(--jm-c-dark-bg, #061421) 100%);
    border-top-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 -8px 22px rgba(10, 27, 42, 0.38),
        0 5px 14px rgba(10, 27, 42, 0.3),
        0 12px 28px rgba(15, 76, 129, 0.32),
        0 22px 48px rgba(10, 27, 42, 0.25);
    transform: translateY(-3px);
}

/* ::after disabled (brillo amarillo user no quiere) */

.jm-rentacarwm-detail__cta-label {
    position: relative;
    z-index: 1;
    padding-left: 0.45rem;
}

.jm-rentacarwm-detail__cta-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 12px;
    background: linear-gradient(145deg,
        rgba(245, 197, 24, 0.22) 0%,
        rgba(245, 197, 24, 0.1) 100%);
    color: var(--jm-c-gold, #f5c518);
    flex-shrink: 0;
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        background-image 380ms ease,
        background-color 380ms ease,
        color 380ms ease,
        box-shadow 380ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(245, 197, 24, 0.25),
        0 1px 4px rgba(245, 197, 24, 0.2);
}

.jm-rentacarwm-detail__cta:hover .jm-rentacarwm-detail__cta-icon {
    transform: translateX(5px);
    background: linear-gradient(145deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 100%);
    color: var(--jm-c-dark-bg-2, #0a1b2e);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 18px rgba(245, 197, 24, 0.8),
        0 2px 8px rgba(10, 27, 42, 0.22);
}

/* =========== GALERÍA SLIDER · NUEVO (RentaCar WM) =========== */

.jm-rentacarwm-gallery {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}

.jm-rentacarwm-gallery__viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 560px;
    min-height: 340px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(201, 162, 39, 0.2);
    background:
        radial-gradient(300px 200px at 50% 10%,
            rgba(201, 162, 39, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fafaf7 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -2px 0 rgba(10, 37, 64, 0.04),
        0 6px 18px rgba(10, 27, 42, 0.12),
        0 2px 6px rgba(10, 27, 42, 0.08);
}

/* Slides stack absolute: solo is-active visible (opacity+z-index) */
.jm-rentacarwm-gallery__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 0;
    transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    background-color: #ffffff;
}

.jm-rentacarwm-gallery__slide.is-active {
    opacity: 1;
    z-index: 2;
}

.jm-rentacarwm-gallery__img {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center center;
    background-color: #ffffff;
    transform: scale(1.01);
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.jm-rentacarwm-gallery__slide.is-active .jm-rentacarwm-gallery__img {
    transform: scale(1);
}

/* Botones PREV / NEXT · círculo gris oscuro semitransparente */
.jm-rentacarwm-gallery__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    border-radius: 999px;
    background-color: rgba(36, 36, 40, 0.48);
    color: #ffffff;
    cursor: pointer;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition:
        background-color 260ms ease,
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 260ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 3px 8px rgba(10, 27, 42, 0.3),
        0 1px 3px rgba(10, 27, 42, 0.22);
}

.jm-rentacarwm-gallery__btn:hover {
    background-color: rgba(10, 37, 64, 0.78);
    transform: translateY(-50%) scale(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 0 1px rgba(245, 197, 24, 0.4),
        0 5px 14px rgba(10, 27, 42, 0.38),
        0 2px 6px rgba(10, 27, 42, 0.26);
}

.jm-rentacarwm-gallery__btn:focus-visible {
    outline: 2px solid var(--jm-c-gold, #f5c518);
    outline-offset: 3px;
}

.jm-rentacarwm-gallery__btn--prev {
    left: 0.85rem;
}

.jm-rentacarwm-gallery__btn--next {
    right: 0.85rem;
}

/* DOTS · indicadores inferiores (estilo user gris oscuro · activo navy) */
.jm-rentacarwm-gallery__dots {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.1rem 0 0 0;
    margin: 0 auto 0 auto;
}

.jm-rentacarwm-gallery__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.7rem;
    height: 0.7rem;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(10, 27, 42, 0.2);
    background-color: #d1d5db;
    border-radius: 999px;
    cursor: pointer;
    transition:
        background-color 260ms ease,
        width 260ms ease,
        border-color 260ms ease,
        transform 200ms ease,
        box-shadow 260ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 1px 2px rgba(10, 27, 42, 0.12);
}

.jm-rentacarwm-gallery__dot:hover {
    transform: scale(1.15);
    border-color: rgba(245, 197, 24, 0.5);
}

.jm-rentacarwm-gallery__dot.is-active {
    background-color: var(--jm-c-primary, #0f4c81);
    border-color: rgba(201, 162, 39, 0.65);
    width: 1.55rem;
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 2px 5px rgba(15, 76, 129, 0.3),
        0 1px 3px rgba(10, 27, 42, 0.18);
}

.jm-rentacarwm-gallery__dot:focus-visible {
    outline: 2px solid var(--jm-c-gold, #f5c518);
    outline-offset: 3px;
}

/* --- Columna derecha: Títulos + párrafos VERBATIM img ref --- */

.jm-rentacarwm-detail__col--content {
    flex: 1 1 auto;
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.25rem;
    padding-right: 0.5rem;
}

/* Título underlined black uppercase (igual imagen referencia user) */
.jm-rentacarwm-detail__title {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0 0 0.4rem 0;
    font-size: 1.45rem;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    color: #111111;
    text-decoration: underline;
    text-decoration-color: #111111;
    text-decoration-thickness: 1.2px;
    text-underline-offset: 5px;
}

.jm-rentacarwm-detail__title--h2 {
    font-size: 1.38rem;
    padding-top: 0.25rem;
}

.jm-rentacarwm-detail__text-block {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.1rem;
}

.jm-rentacarwm-detail__paragraph {
    margin: 0;
    padding: 0;
    font-size: 1.03rem;
    line-height: 1.72;
    font-weight: 400;
    letter-spacing: 0.005em;
    color: #1a1a1a;
    text-align: left;
}

.jm-rentacarwm-detail__strong {
    display: inline-block;
    margin: 0 0.15rem 0 0;
    padding: 0;
    font-weight: 800;
    color: var(--jm-c-primary, #0f4c81);
    letter-spacing: 0.012em;
}

/* ---------------- 4. MEDIA QUERIES · breakpoints standard JM ---------------- */

@media (max-width: 1199px) {
    .jm-rentacarwm-detail {
        padding: 6.5rem 0 7rem 0;
    }
    .jm-rentacarwm-detail__inner {
        max-width: 1000px;
    }
    .jm-rentacarwm-detail__grid {
        gap: 2.5rem;
        padding: 2.25rem;
    }
    /* Porcentajes cols: 38% / 62% */
    .jm-rentacarwm-detail__col--media {
        flex-basis: 38%;
        max-width: 38%;
        width: 38%;
        gap: 1.5rem;
    }
    .jm-rentacarwm-detail__col--content {
        width: 62%;
        gap: 2rem;
    }
    .jm-rentacarwm-detail__title {
        font-size: 1.3rem;
    }
    .jm-rentacarwm-detail__title--h2 {
        font-size: 1.24rem;
    }
    .jm-rentacarwm-detail__paragraph {
        font-size: 1rem;
        line-height: 1.68;
    }
    .jm-rentacarwm-detail__cta {
        padding: 1.1rem 1.5rem 1.1rem 1.6rem;
        font-size: 1.12rem;
    }
    .jm-rentacarwm-detail__cta-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
    /* Galería */
    .jm-rentacarwm-gallery__btn {
        width: 2.55rem;
        height: 2.55rem;
    }
    .jm-rentacarwm-gallery__btn--prev { left: 0.75rem; }
    .jm-rentacarwm-gallery__btn--next { right: 0.75rem; }
}

@media (max-width: 991px) {
    .jm-rentacarwm-detail {
        padding: 5.75rem 0 6.25rem 0;
    }
    .jm-rentacarwm-detail__inner {
        max-width: 820px;
    }
    .jm-rentacarwm-detail__grid {
        gap: 2rem;
        padding: 2rem;
        border-radius: 18px;
    }
    /* Cards siguen HORIZONTALES en tablet: 40% / 60% */
    .jm-rentacarwm-detail__col--media {
        flex-basis: 40%;
        max-width: 40%;
        width: 40%;
        gap: 1.35rem;
    }
    .jm-rentacarwm-detail__col--content {
        width: 60%;
        gap: 1.8rem;
    }
    .jm-rentacarwm-detail__logo-wrap {
        padding: 1.25rem;
        border-radius: 14px;
    }
    .jm-rentacarwm-detail__title {
        font-size: 1.18rem;
    }
    .jm-rentacarwm-detail__title--h2 {
        font-size: 1.12rem;
    }
    .jm-rentacarwm-detail__paragraph {
        font-size: 0.97rem;
        line-height: 1.64;
    }
    .jm-rentacarwm-detail__text-block {
        gap: 0.95rem;
    }
    .jm-rentacarwm-detail__cta {
        padding: 1rem 1.3rem 1rem 1.4rem;
        font-size: 1.02rem;
        border-radius: 12px;
        border-top-width: 2.2px;
    }
    .jm-rentacarwm-detail__cta-icon {
        width: 2.35rem;
        height: 2.35rem;
        border-radius: 11px;
    }
    /* Galería */
    .jm-rentacarwm-gallery__viewport {
        border-radius: 13px;
    }
    .jm-rentacarwm-gallery__btn {
        width: 2.4rem;
        height: 2.4rem;
    }
    .jm-rentacarwm-gallery__btn--prev { left: 0.65rem; }
    .jm-rentacarwm-gallery__btn--next { right: 0.65rem; }
    .jm-rentacarwm-gallery__dots { gap: 0.55rem; }
    .jm-rentacarwm-gallery__dot { width: 0.65rem; height: 0.65rem; }
    .jm-rentacarwm-gallery__dot.is-active { width: 1.45rem; }
}

@media (max-width: 639px) {
    .jm-rentacarwm-detail {
        padding: 5rem 0 5.5rem 0;
    }
    .jm-rentacarwm-detail__inner {
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-rentacarwm-detail__grid {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 1.75rem;
        padding: 1.5rem;
        border-radius: 16px;
    }
    .jm-rentacarwm-detail__grid::before {
        top: 1.15rem;
        bottom: 1.15rem;
        width: 3px;
    }
    /* STACK MÓVIL: Logo + CTA + GALERÍA ARRIBA (100%) · Contenido ABAJO (100%) */
    .jm-rentacarwm-detail__col--media,
    .jm-rentacarwm-detail__col--content {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    .jm-rentacarwm-detail__col--media {
        gap: 1.25rem;
    }
    .jm-rentacarwm-detail__col--content {
        gap: 1.6rem;
    }
    .jm-rentacarwm-detail__logo-wrap {
        padding: 1.1rem;
        border-radius: 12px;
    }
    .jm-rentacarwm-detail__title {
        font-size: 1.02rem;
        text-underline-offset: 4px;
        line-height: 1.32;
    }
    .jm-rentacarwm-detail__title--h2 {
        font-size: 0.98rem;
    }
    .jm-rentacarwm-detail__paragraph {
        font-size: 0.95rem;
        line-height: 1.62;
    }
    .jm-rentacarwm-detail__text-block {
        gap: 0.85rem;
    }
    .jm-rentacarwm-detail__cta {
        padding: 0.95rem 1.15rem 0.95rem 1.25rem;
        font-size: 1rem;
        border-radius: 12px;
        border-top-width: 2px;
        letter-spacing: 0.015em;
    }
    .jm-rentacarwm-detail__cta-label {
        padding-left: 0.25rem;
    }
    .jm-rentacarwm-detail__cta-icon {
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 10px;
    }
    /* Galería móvil */
    .jm-rentacarwm-gallery {
        gap: 0.6rem;
    }
    .jm-rentacarwm-gallery__viewport {
        aspect-ratio: 5 / 4;
        min-height: 300px;
        max-height: 440px;
        border-radius: 12px;
    }
    .jm-rentacarwm-gallery__btn {
        width: 2.25rem;
        height: 2.25rem;
    }
    .jm-rentacarwm-gallery__btn--prev { left: 0.5rem; }
    .jm-rentacarwm-gallery__btn--next { right: 0.5rem; }
    .jm-rentacarwm-gallery__btn svg {
        width: 18px !important;
        height: 18px !important;
    }
    .jm-rentacarwm-gallery__dots { gap: 0.5rem; padding-top: 0; }
    .jm-rentacarwm-gallery__dot { width: 0.6rem; height: 0.6rem; }
    .jm-rentacarwm-gallery__dot.is-active { width: 1.35rem; }
}

/* ==========================================================
 *   [ PÁGINA INTERNA · LUXURY PROYECTS SAS (page-luxury-proyects-s-a-s.php) ]
 *   Página detalle inversión (hija Crowdfunding Empresas).
 *   MISMA estructura base 2 columnas que RentaCar WM.
 *   NUEVO: GALERÍA SLIDER (12 imágenes) EN COLUMNA DERECHA,
 *          DESPUÉS de H1 underlined + 2 párrafos VERBATIM user.
 *   SIN HERO. Layout 2 columnas desktop:
 *       IZQ (40%) → Logo Luxury (Casa Loma Luxury, card 006 CF Empresas)
 *                  + CTA WA "Quiero Ser Socio" (SIN galería aquí).
 *       DER (60%) → Título underlined black uppercase VERBATIM
 *                   + 2 párrafos (acompañamiento único + espacios tiempo)
 *                   + GALERÍA SLIDER 12 renders arquitectura
 *   Responsive: 1199 → 38/62; 991 → 40/60; 639 → STACK 1 col.
 *   (Insertado DESPUÉS RentaCar WM · ANTES Ferreterías General)
 * ========================================================== */

/* ---------------- 0. Contenedor MAIN & SECTION ---------------- */

.jm-luxuryproy-main {
    position: relative;
    width: 100%;
    min-height: 60vh;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

/* ---------------- 1. SECCIÓN DETALLE EMPRESA · 2 columnas ---------------- */

.jm-luxuryproy-detail {
    position: relative;
    width: 100%;
    padding: 7rem 0 7.5rem 0;
    margin: 0;
    background:
        radial-gradient(1200px 500px at 10% -10%,
            rgba(201, 162, 39, 0.08) 0%, transparent 60%),
        radial-gradient(900px 450px at 100% 110%,
            rgba(10, 37, 64, 0.08) 0%, transparent 55%),
        linear-gradient(180deg,
            #ffffff 0%,
            #fdfbf6 55%,
            #ffffff 100%);
    overflow: hidden;
}

.jm-luxuryproy-detail__inner {
    position: relative;
    width: 100%;
    max-width: 1260px;
    margin: 0 auto 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    z-index: 1;
}

.jm-luxuryproy-detail__grid {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3rem;
    padding: 2.5rem;
    border-radius: 22px;
    background-color: #ffffff;
    border: 1px solid rgba(201, 162, 39, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -2px 0 rgba(10, 37, 64, 0.05),
        0 10px 30px rgba(10, 27, 42, 0.12),
        0 22px 60px rgba(10, 27, 42, 0.08);
}

/* Barra gold izquierda patrón JM */
.jm-luxuryproy-detail__grid::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.5rem;
    bottom: 1.5rem;
    width: 4px;
    background: linear-gradient(180deg,
        rgba(201, 162, 39, 0.15) 0%,
        rgba(245, 197, 24, 0.95) 15%,
        rgba(201, 162, 39, 1) 50%,
        rgba(245, 197, 24, 0.95) 85%,
        rgba(201, 162, 39, 0.15) 100%);
    border-radius: 0 4px 4px 0;
    z-index: 2;
    box-shadow:
        0 0 14px rgba(245, 197, 24, 0.35),
        2px 0 8px rgba(10, 27, 42, 0.12);
}

/* --- Columna izquierda: Logo + CTA (SIN GALERÍA · Casa Loma Luxury img ref user) --- */

.jm-luxuryproy-detail__col--media {
    flex: 0 0 40%;
    max-width: 40%;
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.75rem;
    padding-left: 0.75rem;
}

.jm-luxuryproy-detail__logo-wrap {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 1.5rem;
    border-radius: 16px;
    background:
        radial-gradient(400px 250px at 50% 0%,
            rgba(245, 197, 24, 0.14) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fffdf7 100%);
    border: 1px solid rgba(201, 162, 39, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 4px 14px rgba(10, 27, 42, 0.1),
        0 1px 3px rgba(10, 27, 42, 0.08);
    overflow: hidden;
}

.jm-luxuryproy-detail__logo {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

/* --- Botón "Quiero Ser Socio" · alineado patrón botones JM (navy/gold oficial) --- */

.jm-luxuryproy-detail__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 1.22rem 1.7rem 1.22rem 1.85rem;
    border-radius: 14px;
    background: linear-gradient(145deg,
        var(--jm-c-primary, #0f4c81) 0%,
        var(--jm-c-primary-600, #0d406d) 45%,
        var(--jm-c-primary-700, #0a2540) 100%);
    color: var(--jm-c-white, #ffffff);
    font-size: 1.22rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        background-image 450ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 450ms ease,
        color 400ms ease,
        transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1),
        border-top-color 350ms ease;
    border-top: 2.5px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 -6px 18px rgba(10, 27, 42, 0.32),
        0 3px 8px rgba(10, 27, 42, 0.25),
        0 8px 18px rgba(15, 76, 129, 0.3),
        0 16px 34px rgba(10, 27, 42, 0.22);
}

/* Separador superior gold degradado */
.jm-luxuryproy-detail__cta::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2.5px;
    height: 2.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 12%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 88%,
        transparent 100%);
    z-index: 2;
    box-shadow: 0 0 12px rgba(245, 197, 24, 0.55);
}

/* Overlay gold hover (radial + degradado + shimmer) · DESHABILITADO x user no le gusta brillo amarillo */
.jm-luxuryproy-detail__cta::after {
    display: none !important;
}

.jm-luxuryproy-detail__cta:hover {
    background: linear-gradient(145deg,
        var(--jm-c-primary-700, #0a2540) 0%,
        var(--jm-c-primary, #0f4c81) 50%,
        var(--jm-c-dark-bg, #061421) 100%);
    border-top-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 -8px 22px rgba(10, 27, 42, 0.38),
        0 5px 14px rgba(10, 27, 42, 0.3),
        0 12px 28px rgba(15, 76, 129, 0.32),
        0 22px 48px rgba(10, 27, 42, 0.25);
    transform: translateY(-3px);
}

/* ::after disabled (brillo amarillo user no quiere) */

.jm-luxuryproy-detail__cta-label {
    position: relative;
    z-index: 1;
    padding-left: 0.45rem;
}

.jm-luxuryproy-detail__cta-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 12px;
    background: linear-gradient(145deg,
        rgba(245, 197, 24, 0.22) 0%,
        rgba(245, 197, 24, 0.1) 100%);
    color: var(--jm-c-gold, #f5c518);
    flex-shrink: 0;
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        background-image 380ms ease,
        background-color 380ms ease,
        color 380ms ease,
        box-shadow 380ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(245, 197, 24, 0.25),
        0 1px 4px rgba(245, 197, 24, 0.2);
}

.jm-luxuryproy-detail__cta:hover .jm-luxuryproy-detail__cta-icon {
    transform: translateX(5px);
    background: linear-gradient(145deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 100%);
    color: var(--jm-c-dark-bg-2, #0a1b2e);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 18px rgba(245, 197, 24, 0.8),
        0 2px 8px rgba(10, 27, 42, 0.22);
}

/* =========== GALERÍA SLIDER · NUEVO (Luxury Proyects SAS) · COL DERECHA (después de párrafos) =========== */

.jm-luxuryproy-gallery {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.75rem;
    margin: 0.25rem 0 0 0;
    padding: 0;
}

.jm-luxuryproy-gallery__viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 580px;
    min-height: 360px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(201, 162, 39, 0.2);
    background:
        radial-gradient(300px 200px at 50% 10%,
            rgba(201, 162, 39, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fafaf7 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -2px 0 rgba(10, 37, 64, 0.04),
        0 6px 18px rgba(10, 27, 42, 0.12),
        0 2px 6px rgba(10, 27, 42, 0.08);
}

/* Slides stack absolute: solo is-active visible (opacity+z-index) */
.jm-luxuryproy-gallery__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 0;
    transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    background-color: #ffffff;
}

.jm-luxuryproy-gallery__slide.is-active {
    opacity: 1;
    z-index: 2;
}

.jm-luxuryproy-gallery__img {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center center;
    background-color: #ffffff;
    transform: scale(1.01);
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.jm-luxuryproy-gallery__slide.is-active .jm-luxuryproy-gallery__img {
    transform: scale(1);
}

/* Botones PREV / NEXT · círculo gris oscuro semitransparente */
.jm-luxuryproy-gallery__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    border-radius: 999px;
    background-color: rgba(36, 36, 40, 0.48);
    color: #ffffff;
    cursor: pointer;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition:
        background-color 260ms ease,
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 260ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 3px 8px rgba(10, 27, 42, 0.3),
        0 1px 3px rgba(10, 27, 42, 0.22);
}

.jm-luxuryproy-gallery__btn:hover {
    background-color: rgba(10, 37, 64, 0.78);
    transform: translateY(-50%) scale(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 0 1px rgba(245, 197, 24, 0.4),
        0 5px 14px rgba(10, 27, 42, 0.38),
        0 2px 6px rgba(10, 27, 42, 0.26);
}

.jm-luxuryproy-gallery__btn:focus-visible {
    outline: 2px solid var(--jm-c-gold, #f5c518);
    outline-offset: 3px;
}

.jm-luxuryproy-gallery__btn--prev {
    left: 0.85rem;
}

.jm-luxuryproy-gallery__btn--next {
    right: 0.85rem;
}

/* DOTS · 12 indicadores inferiores (estilo user gris oscuro · activo navy) */
.jm-luxuryproy-gallery__dots {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.1rem 0 0 0;
    margin: 0 auto 0 auto;
}

.jm-luxuryproy-gallery__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.65rem;
    height: 0.65rem;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(10, 27, 42, 0.2);
    background-color: #d1d5db;
    border-radius: 999px;
    cursor: pointer;
    transition:
        background-color 260ms ease,
        width 260ms ease,
        border-color 260ms ease,
        transform 200ms ease,
        box-shadow 260ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 1px 2px rgba(10, 27, 42, 0.12);
}

.jm-luxuryproy-gallery__dot:hover {
    transform: scale(1.15);
    border-color: rgba(245, 197, 24, 0.5);
}

.jm-luxuryproy-gallery__dot.is-active {
    background-color: var(--jm-c-primary, #0f4c81);
    border-color: rgba(201, 162, 39, 0.65);
    width: 1.35rem;
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 2px 5px rgba(15, 76, 129, 0.3),
        0 1px 3px rgba(10, 27, 42, 0.18);
}

.jm-luxuryproy-gallery__dot:focus-visible {
    outline: 2px solid var(--jm-c-gold, #f5c518);
    outline-offset: 3px;
}

/* --- Columna derecha: Títulos + párrafos VERBATIM img ref + GALERÍA --- */

.jm-luxuryproy-detail__col--content {
    flex: 1 1 auto;
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.25rem;
    padding-right: 0.5rem;
}

/* Título underlined black uppercase (igual imagen referencia user) */
.jm-luxuryproy-detail__title {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0 0 0.4rem 0;
    font-size: 1.45rem;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    color: #111111;
    text-decoration: underline;
    text-decoration-color: #111111;
    text-decoration-thickness: 1.2px;
    text-underline-offset: 5px;
}

.jm-luxuryproy-detail__title--h2 {
    font-size: 1.38rem;
    padding-top: 0.25rem;
}

.jm-luxuryproy-detail__text-block {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.1rem;
}

.jm-luxuryproy-detail__paragraph {
    margin: 0;
    padding: 0;
    font-size: 1.03rem;
    line-height: 1.72;
    font-weight: 400;
    letter-spacing: 0.005em;
    color: #1a1a1a;
    text-align: left;
}

.jm-luxuryproy-detail__strong {
    display: inline-block;
    margin: 0 0.15rem 0 0;
    padding: 0;
    font-weight: 800;
    color: var(--jm-c-primary, #0f4c81);
    letter-spacing: 0.012em;
}

/* ---------------- 4. MEDIA QUERIES · breakpoints standard JM ---------------- */

@media (max-width: 1199px) {
    .jm-luxuryproy-detail {
        padding: 6.5rem 0 7rem 0;
    }
    .jm-luxuryproy-detail__inner {
        max-width: 1000px;
    }
    .jm-luxuryproy-detail__grid {
        gap: 2.5rem;
        padding: 2.25rem;
    }
    /* Porcentajes cols: 38% / 62% */
    .jm-luxuryproy-detail__col--media {
        flex-basis: 38%;
        max-width: 38%;
        width: 38%;
        gap: 1.5rem;
    }
    .jm-luxuryproy-detail__col--content {
        width: 62%;
        gap: 2rem;
    }
    .jm-luxuryproy-detail__title {
        font-size: 1.3rem;
    }
    .jm-luxuryproy-detail__title--h2 {
        font-size: 1.24rem;
    }
    .jm-luxuryproy-detail__paragraph {
        font-size: 1rem;
        line-height: 1.68;
    }
    .jm-luxuryproy-detail__cta {
        padding: 1.1rem 1.5rem 1.1rem 1.6rem;
        font-size: 1.12rem;
    }
    .jm-luxuryproy-detail__cta-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
    /* Galería */
    .jm-luxuryproy-gallery__btn {
        width: 2.55rem;
        height: 2.55rem;
    }
    .jm-luxuryproy-gallery__btn--prev { left: 0.75rem; }
    .jm-luxuryproy-gallery__btn--next { right: 0.75rem; }
    .jm-luxuryproy-gallery__dots { gap: 0.45rem; }
    .jm-luxuryproy-gallery__dot { width: 0.62rem; height: 0.62rem; }
    .jm-luxuryproy-gallery__dot.is-active { width: 1.28rem; }
}

@media (max-width: 991px) {
    .jm-luxuryproy-detail {
        padding: 5.75rem 0 6.25rem 0;
    }
    .jm-luxuryproy-detail__inner {
        max-width: 820px;
    }
    .jm-luxuryproy-detail__grid {
        gap: 2rem;
        padding: 2rem;
        border-radius: 18px;
    }
    /* Cards siguen HORIZONTALES en tablet: 40% / 60% */
    .jm-luxuryproy-detail__col--media {
        flex-basis: 40%;
        max-width: 40%;
        width: 40%;
        gap: 1.35rem;
    }
    .jm-luxuryproy-detail__col--content {
        width: 60%;
        gap: 1.8rem;
    }
    .jm-luxuryproy-detail__logo-wrap {
        padding: 1.25rem;
        border-radius: 14px;
    }
    .jm-luxuryproy-detail__title {
        font-size: 1.18rem;
    }
    .jm-luxuryproy-detail__title--h2 {
        font-size: 1.12rem;
    }
    .jm-luxuryproy-detail__paragraph {
        font-size: 0.97rem;
        line-height: 1.64;
    }
    .jm-luxuryproy-detail__text-block {
        gap: 0.95rem;
    }
    .jm-luxuryproy-detail__cta {
        padding: 1rem 1.3rem 1rem 1.4rem;
        font-size: 1.02rem;
        border-radius: 12px;
        border-top-width: 2.2px;
    }
    .jm-luxuryproy-detail__cta-icon {
        width: 2.35rem;
        height: 2.35rem;
        border-radius: 11px;
    }
    /* Galería */
    .jm-luxuryproy-gallery__viewport {
        border-radius: 13px;
        aspect-ratio: 16 / 11;
        min-height: 320px;
    }
    .jm-luxuryproy-gallery__btn {
        width: 2.4rem;
        height: 2.4rem;
    }
    .jm-luxuryproy-gallery__btn--prev { left: 0.65rem; }
    .jm-luxuryproy-gallery__btn--next { right: 0.65rem; }
    .jm-luxuryproy-gallery__dots { gap: 0.4rem; }
    .jm-luxuryproy-gallery__dot { width: 0.6rem; height: 0.6rem; }
    .jm-luxuryproy-gallery__dot.is-active { width: 1.2rem; }
}

@media (max-width: 639px) {
    .jm-luxuryproy-detail {
        padding: 5rem 0 5.5rem 0;
    }
    .jm-luxuryproy-detail__inner {
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-luxuryproy-detail__grid {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 1.75rem;
        padding: 1.5rem;
        border-radius: 16px;
    }
    .jm-luxuryproy-detail__grid::before {
        top: 1.15rem;
        bottom: 1.15rem;
        width: 3px;
    }
    /* STACK MÓVIL: Logo + CTA ARRIBA (100%) · Títulos + Galería ABAJO (100%) */
    .jm-luxuryproy-detail__col--media,
    .jm-luxuryproy-detail__col--content {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    .jm-luxuryproy-detail__col--media {
        gap: 1.25rem;
    }
    .jm-luxuryproy-detail__col--content {
        gap: 1.6rem;
    }
    .jm-luxuryproy-detail__logo-wrap {
        padding: 1.1rem;
        border-radius: 12px;
    }
    .jm-luxuryproy-detail__title {
        font-size: 1.02rem;
        text-underline-offset: 4px;
        line-height: 1.32;
    }
    .jm-luxuryproy-detail__title--h2 {
        font-size: 0.98rem;
    }
    .jm-luxuryproy-detail__paragraph {
        font-size: 0.95rem;
        line-height: 1.62;
    }
    .jm-luxuryproy-detail__text-block {
        gap: 0.85rem;
    }
    .jm-luxuryproy-detail__cta {
        padding: 0.95rem 1.15rem 0.95rem 1.25rem;
        font-size: 1rem;
        border-radius: 12px;
        border-top-width: 2px;
        letter-spacing: 0.015em;
    }
    .jm-luxuryproy-detail__cta-label {
        padding-left: 0.25rem;
    }
    .jm-luxuryproy-detail__cta-icon {
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 10px;
    }
    /* Galería móvil */
    .jm-luxuryproy-gallery {
        gap: 0.6rem;
    }
    .jm-luxuryproy-gallery__viewport {
        aspect-ratio: 4 / 3;
        min-height: 280px;
        max-height: 420px;
        border-radius: 12px;
    }
    .jm-luxuryproy-gallery__btn {
        width: 2.25rem;
        height: 2.25rem;
    }
    .jm-luxuryproy-gallery__btn--prev { left: 0.5rem; }
    .jm-luxuryproy-gallery__btn--next { right: 0.5rem; }
    .jm-luxuryproy-gallery__btn svg {
        width: 18px !important;
        height: 18px !important;
    }
    .jm-luxuryproy-gallery__dots {
        gap: 0.38rem;
        padding-top: 0;
    }
    .jm-luxuryproy-gallery__dot {
        width: 0.58rem;
        height: 0.58rem;
    }
    .jm-luxuryproy-gallery__dot.is-active {
        width: 1.15rem;
    }
}

/* ==========================================================
 *   [ PÁGINA FERRETERIAS (page-ferreterias.php) ]
 *   Igual en estructura/diseño que Restaurantes y Salud y Belleza.
 *   Grid 2 columnas cards → 2 cols tablet → 1 col móvil.
 *   BORDE GOLD + ACENTO IZQUIERDO PATRÓN JM / SOMBRAS 6 CAPAS /
 *   HOVER UNIFICADO translate + border gold claro + img zoom.
 *   (Colocado ANTES del bloque BIOGRAFÍA JOHN MEJÍA portada JM)
 * ========================================================== */

/* ---------------- 0. Contenedor MAIN & SECTION ---------------- */

.jm-ferreterias-main {
    position: relative;
    width: 100%;
    min-height: 60vh;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
}

.jm-ferreterias-cards {
    position: relative;
    width: 100%;
    padding: 6rem 0 6.75rem 0;
    margin: 0;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 2;
}

.jm-ferreterias-cards__inner {
    position: relative;
    width: 100%;
    max-width: var(--jm-maxw-page, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 2.15rem);
    display: flex;
    flex-direction: column;
    gap: 2.65rem;
}

/* ---------------- 1. HEADER SECCIÓN: pill navy + H2 ---------------- */

.jm-ferreterias-cards__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.05rem;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.jm-ferreterias-cards__head-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.65rem 0.55rem 1.95rem;
    background: linear-gradient(180deg, #0f4c81 0%, #0a3d68 100%);
    border: 2px solid #f0c419;
    border-radius: 999px;
    box-shadow:
        0 1px 0 rgba(255,255,255,.35) inset,
        0 1px 0 rgba(10,61,104,.1),
        0 10px 22px -12px rgba(15,76,129,.65),
        0 0 0 1px rgba(240,196,25,.35),
        0 0 18px rgba(240,196,25,.22);
    isolation: isolate;
    overflow: visible;
}

.jm-ferreterias-cards__head-pill-left {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 62%;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 14%, #f0c419 55%, #c99a12 100%);
    border-radius: 999px;
    box-shadow:
        0 0 6px rgba(240,196,25,.55),
        0 0 14px rgba(240,196,25,.22);
}

.jm-ferreterias-cards__head-pill-text {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(0.76rem, 0.62vw + 0.7rem, 0.92rem);
    letter-spacing: 0.095em;
    line-height: 1;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(10,61,104,.35);
}

.jm-ferreterias-cards__head-title {
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 1.8vw + 1.25rem, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #0f4c81;
    margin: 0;
    padding: 0;
    text-align: center;
    text-wrap: balance;
    text-shadow:
        0 1px 0 rgba(255,255,255,.8),
        0 12px 28px -16px rgba(15,76,129,.45);
}

/* ---------------- 2. GRID CARDS 2×1 ---------------- */

.jm-ferreterias-cards__grid {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 1.8rem 1.65rem;
    align-items: stretch;
    z-index: 2;
}

.jm-ferreterias-card {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    opacity: 0;
    transform: translateY(22px);
    animation: jm-ferreterias-card-in .58s cubic-bezier(.19,1,.22,1) forwards;
    animation-delay: calc(.15s + (var(--jm-frr-card-delay, 0s) * 1s));
    will-change: transform, opacity;
}

@keyframes jm-ferreterias-card-in {
    0%   { opacity: 0; transform: translateY(22px); }
    100% { opacity: 1; transform: translateY(0);    }
}

/* ---------------- 3. WRAP CLICKEABLE (media + CTA) ---------------- */

.jm-ferreterias-card__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    outline: none;
    transition: transform .42s cubic-bezier(.19,1,.22,1);
    z-index: 2;
}

.jm-ferreterias-card__wrap:hover,
.jm-ferreterias-card__wrap:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    outline: none;
}

/* ---------------- 4. MEDIA 4:3 imagen/logo ---------------- */

.jm-ferreterias-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0.55rem;
    margin: 0;
    background:
        linear-gradient(135deg, rgba(240,196,25,.09) 0%, rgba(240,196,25,0) 42%),
        linear-gradient(180deg, #fffdf7 0%, #fff9ec 56%, #ffffff 100%);
    background-color: #fff9ec;
    border: 2px solid #f0c419;
    border-radius: 17px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 1px 0 rgba(240,196,25,.45) inset,
        0 1px 0 rgba(255,255,255,.55),
        0 8px 19px -14px rgba(240,196,25,.38),
        0 18px 40px -26px rgba(15,76,129,.55),
        0 0 0 1px rgba(15,76,129,.05);
    transition: transform .42s cubic-bezier(.19,1,.22,1),
                border-color .3s ease,
                box-shadow .4s ease;
    will-change: transform;
    isolation: isolate;
}

.jm-ferreterias-card__accent {
    position: absolute;
    left: 4px;
    top: 8%;
    bottom: 8%;
    width: 4px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 12%, #f0c419 52%, #c99a12 100%);
    border-radius: 999px;
    box-shadow:
        0 0 5px rgba(240,196,25,.6),
        0 0 12px rgba(240,196,25,.25);
    z-index: 2;
    pointer-events: none;
}

.jm-ferreterias-card__img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    margin: 0 auto;
    display: block;
    padding: 0.55rem;
    z-index: 1;
    transition: transform .5s cubic-bezier(.19,1,.22,1),
                filter .34s ease;
    will-change: transform;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.jm-ferreterias-card__wrap:hover .jm-ferreterias-card__img {
    transform: scale(1.02);
    filter: saturate(1.08) contrast(1.02);
}

.jm-ferreterias-card__wrap:hover .jm-ferreterias-card__media {
    border-color: #ffe082;
    box-shadow:
        0 1px 0 rgba(255,255,255,.92) inset,
        0 1px 0 rgba(255,224,130,.65) inset,
        0 1px 0 rgba(255,255,255,.6),
        0 10px 22px -12px rgba(240,196,25,.48),
        0 24px 52px -28px rgba(15,76,129,.68),
        0 0 0 1px rgba(15,76,129,.06);
}

/* ---------------- 5. CTA BOTÓN NAVY / TEXTO NOMBRE ---------------- */

.jm-ferreterias-card__cta {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 2;
}

.jm-ferreterias-card__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.8rem 1.15rem 0.8rem 1.75rem;
    margin: 0 auto;
    background: linear-gradient(180deg, #0f4c81 0%, #0a3d68 100%);
    background-color: #0f4c81;
    border: 2px solid #f0c419;
    border-radius: 13px;
    color: #ffffff;
    text-align: center;
    text-wrap: balance;
    box-shadow:
        0 1px 0 rgba(255,255,255,.22) inset,
        0 1px 0 rgba(10,61,104,.3) inset,
        0 1px 0 rgba(255,255,255,.4),
        0 11px 24px -14px rgba(10,61,104,.7),
        0 22px 46px -28px rgba(15,76,129,.65),
        0 0 0 1px rgba(240,196,25,.32);
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    transition:
        transform .36s cubic-bezier(.19,1,.22,1),
        background-color .28s ease,
        border-color .28s ease,
        box-shadow .38s ease,
        color .28s ease;
    will-change: transform;
}

.jm-ferreterias-card__btn-accent {
    position: absolute;
    left: 7px;
    top: 18%;
    bottom: 18%;
    width: 4px;
    background: linear-gradient(180deg, rgba(255,224,130,0) 0%, #ffe082 16%, #f0c419 56%, #c99a12 100%);
    border-radius: 999px;
    box-shadow:
        0 0 6px rgba(240,196,25,.55),
        0 0 15px rgba(240,196,25,.28);
    pointer-events: none;
    z-index: 2;
}

.jm-ferreterias-card__btn-label {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(0.88rem, 0.92vw + 0.82rem, 1.08rem);
    line-height: 1.3;
    letter-spacing: 0.025em;
    color: #ffffff;
    text-align: center;
    text-transform: none;
    text-shadow: 0 1px 0 rgba(10,61,104,.35);
    z-index: 3;
}

/* Hover del botón por wrap */
.jm-ferreterias-card__wrap:hover .jm-ferreterias-card__btn {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #0a3d68 0%, #073054 100%);
    background-color: #073054;
    border-color: #ffe082;
    color: #ffe082;
    box-shadow:
        0 1px 0 rgba(255,255,255,.25) inset,
        0 1px 0 rgba(7,48,84,.35) inset,
        0 1px 0 rgba(255,255,255,.42),
        0 13px 28px -16px rgba(7,48,84,.78),
        0 26px 54px -32px rgba(15,76,129,.72),
        0 0 0 1px rgba(255,224,130,.45);
}

.jm-ferreterias-card__wrap:hover .jm-ferreterias-card__btn-label {
    color: #ffe082;
}

/* ---------------- 6. RESPONSIVE BREAKPOINTS ---------------- */

/* ≤1199 Desktop medio */
@media (max-width: 1199px) {
    .jm-ferreterias-cards { padding: 5rem 0 5.75rem 0; }
    .jm-ferreterias-cards__inner { gap: 2.25rem; }
    .jm-ferreterias-cards__head-title { font-size: clamp(1.28rem, 1.2vw + 1.15rem, 1.9rem); }
    .jm-ferreterias-cards__grid { max-width: 880px; gap: 1.5rem 1.35rem; }
    .jm-ferreterias-card__media { border-radius: 16px; }
}

/* ≤991 Tablet */
@media (max-width: 991px) {
    .jm-ferreterias-cards { padding: 4.25rem 0 5rem 0; }
    .jm-ferreterias-cards__inner { gap: 2rem; }
    .jm-ferreterias-cards__head-title { font-size: clamp(1.15rem, 1.8vw + 1.05rem, 1.65rem); }
    .jm-ferreterias-cards__grid {
        max-width: 720px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4rem 1.2rem;
    }
    .jm-ferreterias-card__media { border-radius: 15px; }
}

/* ≤639 Móvil */
@media (max-width: 639px) {
    .jm-ferreterias-cards { padding: 3.5rem 0 4.25rem 0; }
    .jm-ferreterias-cards__inner { gap: 1.75rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-ferreterias-cards__head { gap: 0.7rem; }
    .jm-ferreterias-cards__head-title { font-size: clamp(1.05rem, 4.5vw + 0.98rem, 1.45rem); text-align: left; }
    .jm-ferreterias-cards__grid {
        max-width: 520px;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 1.6rem;
    }
    .jm-ferreterias-card__media { border-radius: 14px; }
    .jm-ferreterias-card__accent { width: 4px; top: 10%; bottom: 10%; }
    .jm-ferreterias-card__btn { padding: 0.6rem 0.9rem 0.6rem 1.45rem; font-size: 0.9rem; border-radius: 10px; }
}

/* ==========================================================
 *   SECCIÓN BIOGRAFÍA JOHN MEJÍA — portada JM (ANTES footer)
 *   (continuación bloque original - NO MODIFICAR)
 * ========================================================== */

/* ---------------- 1. Contenedor general sección ---------------- */

.jm-bio-john {
    position: relative;
    width: 100%;
    padding: 6.25rem 0 6.75rem 0;
    background-color: #ffffff;
    background-image:
        linear-gradient(180deg,
            rgba(245, 197, 24, 0.035) 0%,
            rgba(245, 197, 24, 0) 18%,
            rgba(15, 76, 129, 0.015) 100%);
    overflow: hidden;
    isolation: isolate;
}

.jm-bio-john__inner {
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 3.5rem;
}

/* ---------------- TÍTULO PRINCIPAL H1 CENTRADO "SOBRE NOSOTROS" (ANTES pill) ---------------- */

.jm-bio-john__hero-title-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.jm-bio-john__hero-title {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: var(--jm-c-primary, #0f4c81);
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
    font-weight: 900;
    font-size: clamp(1.85rem, 2.3vw + 1.65rem, 3.1rem);
    line-height: 1.1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-wrap: balance;
    text-align: center;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 2px 10px rgba(15, 76, 129, 0.08);
    position: relative;
    z-index: 2;
}

.jm-bio-john__hero-title::after {
    content: "";
    display: block;
    width: 84px;
    height: 4px;
    margin: 0.85rem auto 0 auto;
    border-radius: 999px;
    background: linear-gradient(90deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.3);
}

@media (max-width: 1199px) {
    .jm-bio-john__hero-title {
        font-size: clamp(1.65rem, 1.9vw + 1.45rem, 2.6rem);
        letter-spacing: 0.045em;
    }
    .jm-bio-john__hero-title::after { width: 76px; margin-top: 0.75rem; }
}

@media (max-width: 991px) {
    .jm-bio-john { padding: 5.25rem 0 5.75rem 0; }
    .jm-bio-john__inner { gap: 3rem; }
    .jm-bio-john__hero-title {
        font-size: clamp(1.45rem, 3vw + 1.25rem, 2.15rem);
        letter-spacing: 0.04em;
    }
    .jm-bio-john__hero-title::after { width: 64px; height: 3.5px; margin-top: 0.7rem; }
}

@media (max-width: 639px) {
    .jm-bio-john { padding: 4.25rem 0 4.75rem 0; }
    .jm-bio-john__inner { gap: 2.5rem; }
    .jm-bio-john__hero-title {
        font-size: clamp(1.25rem, 6.2vw + 1.08rem, 1.95rem);
        letter-spacing: 0.035em;
    }
    .jm-bio-john__hero-title::after { width: 56px; height: 3px; margin-top: 0.65rem; }
}

/* ---------------- 2. Header pill kicker PERFIL DEL FUNDADOR ---------------- */
.jm-bio-john__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.jm-bio-john__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.58rem 1.15rem 0.58rem 1.75rem;
    border-radius: 12px;
    background-color: var(--jm-c-white, #ffffff);
    color: var(--jm-c-primary, #0f4c81);
    border: 1px solid rgba(245, 197, 24, 0.5);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 2px 0 rgba(245, 197, 24, 0.18) inset,
        0 12px 30px -12px rgba(15, 76, 129, 0.22),
        0 0 0 1px rgba(15, 76, 129, 0.10);
    isolation: isolate;
}

.jm-bio-john__pill-left {
    position: absolute;
    left: 0;
    top: 16%;
    bottom: 16%;
    width: 4.5px;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.4);
}

.jm-bio-john__pill-text {
    color: var(--jm-c-primary, #0f4c81);
    font-weight: 800;
    font-size: clamp(0.82rem, 0.4vw + 0.78rem, 1rem);
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* ---------------- 3. Layout 2 columnas (avatar + texto) ---------------- */
.jm-bio-john__layout {
    width: 100%;
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 3.75rem;
    align-items: start;
    justify-content: start;
}

/* =========================================================
 *   COLUMNA IZQUIERDA AVATAR · BLOQUE INFERIOR (DEBAJO foto)
 *   Para llenar el espacio vacío que quedaba bajo la foto
 * ========================================================= */

/* Layout columna entera: foto (arriba) + bloque inferior (abajo) · flex columna gap */
.jm-bio-john__avatar-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
    padding-top: 0.25rem;
}

/* Wrapper del bloque inferior (todos los chips juntos) */
.jm-bio-john__avatar-col-bottom {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.15rem;
    padding: 0 0.1rem 0 0.1rem;
}

/* ---------------------------------------------------
 *  (1) Badge CEO Fundador · card gold + icono layer
 * --------------------------------------------------- */
.jm-bio-john__badge-ceo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.95rem;
    padding: 0.9rem 1.05rem;
    border-radius: 14px;
    background: linear-gradient(135deg,
        rgba(245, 197, 24, 0.14) 0%,
        rgba(255, 255, 255, 1) 45%,
        rgba(245, 197, 24, 0.08) 100%);
    border: 1px solid rgba(245, 197, 24, 0.55);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 2px 0 rgba(245, 197, 24, 0.22) inset,
        0 12px 28px -14px rgba(15, 76, 129, 0.24),
        0 0 0 1px rgba(15, 76, 129, 0.07);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Barra gold izq decorativa */
.jm-bio-john__badge-ceo::before {
    content: "";
    position: absolute;
    left: 0; top: 10%; bottom: 10%;
    width: 4px;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(180deg, #ffe082 0%, #f5c518 50%, #d9ac10 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.45);
}

.jm-bio-john__badge-ceo-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0f4c81 0%, #1a6bb2 100%);
    color: #ffe082;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.4rem;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 1),
        0 0 0 4px rgba(245, 197, 24, 0.45),
        inset 0 0 0 1px rgba(255, 224, 130, 0.28);
}

.jm-bio-john__badge-ceo-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.15rem;
    min-width: 0;
}
.jm-bio-john__badge-ceo-text strong {
    color: var(--jm-c-primary, #0f4c81);
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.15;
}
.jm-bio-john__badge-ceo-text span {
    color: var(--jm-c-navy-700, #1a466f);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.35;
}

/* ---------------------------------------------------
 *  (2) Cifra emblemática · +USD 500M
 * --------------------------------------------------- */
.jm-bio-john__stat {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.3rem;
    padding: 0.85rem 1.05rem 0.9rem 1.25rem;
    border-radius: 14px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(12, 47, 82, 0.25),
        0 14px 30px -16px rgba(15, 76, 129, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 2px 0 rgba(255, 255, 255, 0.08);
}
.jm-bio-john__stat::before {
    content: "";
    position: absolute;
    right: -40px; top: -38px;
    width: 150px; height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,197,24,0.18) 0%, rgba(245,197,24,0) 68%);
    pointer-events: none;
}
.jm-bio-john__stat::after {
    content: "";
    position: absolute;
    left: 0; top: 14%; bottom: 14%;
    width: 4px;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(180deg, #ffe082 0%, #f5c518 50%, #d9ac10 100%);
    box-shadow: 0 0 10px 0 rgba(245, 197, 24, 0.55);
}
.jm-bio-john__stat-num {
    font-size: clamp(1.35rem, 1.35vw + 1.2rem, 2.05rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0.01em;
    color: var(--jm-c-gold-200, #ffe082);
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.jm-bio-john__stat-lbl {
    font-size: 0.8rem;
    line-height: 1.5;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    max-width: 100%;
    text-wrap: pretty;
}

/* ---------------------------------------------------
 *  (3) Tags carreras · 4 chips wrap compactos
 * --------------------------------------------------- */
.jm-bio-john__tags {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}
.jm-bio-john__tags li {
    margin: 0;
    padding: 0.45rem 0.8rem 0.45rem 0.8rem;
    background-color: rgba(15, 76, 129, 0.07);
    color: var(--jm-c-primary, #0f4c81);
    border: 1px solid rgba(15, 76, 129, 0.22);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.jm-bio-john__tags li:hover {
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-gold-200, #ffe082);
    border-color: rgba(245, 197, 24, 0.6);
    transform: translateY(-1.5px);
    box-shadow: 0 8px 16px -8px rgba(15, 76, 129, 0.35);
}

/* ---------------------------------------------------
 *  (4) Redes sociales · SOLO LinkedIn 1 botón
 *      → WhatsApp e Instagram ELIMINADOS (solicitado usuario)
 * --------------------------------------------------- */
.jm-bio-john__social {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);  /* ← 1 sola columna, LinkedIn ocupa TODO el ancho disponible */
    gap: 0;
    align-items: stretch;
    justify-items: stretch;
}
.jm-bio-john__social li { margin: 0; padding: 0; width: 100%; }

.jm-bio-john__social-link {
    display: flex;
    flex-direction: row;      /* ← icono + label HORIZONTAL (ahora que es 1 solo) */
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    height: 100%;
    padding: 0.85rem 0.9rem 0.85rem 1.05rem;
    border-radius: 14px;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.28s ease,
                box-shadow 0.28s ease,
                background-color 0.25s ease,
                color 0.25s ease,
                border-color 0.25s ease;
    will-change: transform;
    border: 1px solid rgba(10, 102, 194, 0.32);
    background-color: rgba(10, 102, 194, 0.07);
}
.jm-bio-john__social-link:hover,
.jm-bio-john__social-link:focus-visible {
    transform: translateY(-2px);
    text-decoration: none;
}

.jm-bio-john__social-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.jm-bio-john__social-label {
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

/* Único color: LinkedIn (faltan WA/IG). No hay CSS -wa ni -ig que usar. */
.jm-bio-john__social-link.-li {
    color: #0a66c2;
    background-color: rgba(10, 102, 194, 0.07);
    border-color: rgba(10, 102, 194, 0.32);
}
.jm-bio-john__social-link.-li:hover {
    background-color: #0a66c2;
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 10px 22px -8px rgba(10, 102, 194, 0.55);
}

/* (5) CTA VER VITRINA HOLDING · ELIMINADO (solicitado usuario). No hay CSS jm-bio-john__cta activo por ahora. */

/* =========================================================
 *   BREAKPOINTS bloque inferior
 * ========================================================= */

/* ≤1199px · bloque inferior gaps/paddings reducidos */
@media (max-width: 1199px) {
    .jm-bio-john__avatar-col { gap: 1.3rem; }
    .jm-bio-john__avatar-col-bottom { gap: 1.0rem; padding: 0; }
    .jm-bio-john__tags li { font-size: 0.75rem; padding: 0.42rem 0.72rem; }
    .jm-bio-john__stat-num { font-size: clamp(1.25rem, 1.3vw + 1.1rem, 1.85rem); }
    .jm-bio-john__cta-text { font-size: 0.86rem; }
}

/* ≤991px · STACK 1 columna foto arriba, bloque inferior debajo centrado */
@media (max-width: 991px) {
    .jm-bio-john__avatar-col {
        padding-top: 0;
        gap: 1.45rem;
        max-width: 420px; /* limita ancho bloque para no crecer demasiado */
        margin: 0 auto;
    }
    .jm-bio-john__avatar-col-bottom {
        gap: 1.05rem;
        padding: 0;
    }
    .jm-bio-john__tags { justify-content: center; }
    .jm-bio-john__badge-ceo-text span { font-size: 0.82rem; }
}

/* ≤639px · móvil stack 1 col completo */
@media (max-width: 639px) {
    .jm-bio-john__avatar-col { gap: 1.25rem; max-width: 100%; }
    .jm-bio-john__avatar-col-bottom { gap: 0.95rem; }

    .jm-bio-john__badge-ceo {
        padding: 0.82rem 0.9rem;
        gap: 0.75rem;
    }
    .jm-bio-john__badge-ceo-icon {
        width: 38px; height: 38px;
        margin-left: 0.25rem;
    }

    .jm-bio-john__stat { padding: 0.8rem 0.9rem 0.85rem 1.1rem; }
    .jm-bio-john__stat-num { font-size: clamp(1.2rem, 5vw + 1.08rem, 1.75rem); }
    .jm-bio-john__stat-lbl { font-size: 0.78rem; }

    .jm-bio-john__tags { justify-content: center; gap: 0.45rem; }
    .jm-bio-john__tags li { font-size: 0.72rem; padding: 0.4rem 0.68rem; }

    .jm-bio-john__social { gap: 0.45rem; }
    .jm-bio-john__social-link { padding: 0.55rem 0.28rem; border-radius: 10px; }
    .jm-bio-john__social-icon { width: 23px; height: 23px; }
    .jm-bio-john__social-label { font-size: 0.68rem; }

    .jm-bio-john__cta {
        padding: 0.82rem 0.9rem 0.82rem 1.25rem;
        border-radius: 12px;
    }
    .jm-bio-john__cta-text { font-size: 0.83rem; }
    .jm-bio-john__cta-arrow { width: 28px; height: 28px; }
}

/* =========================================================
 *   BREAKPOINTS JM STANDARD: ≤1199px · ≤991px · ≤639px
 * ========================================================= */

.jm-bio-john__avatar {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    isolation: isolate;
    background: linear-gradient(135deg, #fff7e0 0%, #fff 55%, #e8f0f8 100%);
    /* BORDE GOLD 5px + brillo exterior shadow multicapa JM */
    border: 5px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 0 0 6px rgba(255, 255, 255, 1),
        0 0 0 7px rgba(245, 197, 24, 0.42),
        0 22px 55px -18px rgba(12, 47, 82, 0.32),
        0 10px 30px -12px rgba(12, 47, 82, 0.22),
        0 0 0 1px rgba(15, 76, 129, 0.08),
        inset 0 0 0 3px rgba(255, 255, 255, 0.55),
        0 0 24px 2px rgba(245, 197, 24, 0.25);
}

.jm-bio-john__avatar-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* IMPORTANTE: John está más al LADO DERECHO de la foto ORIGINAL (logo JM a la izquierda).
       → 78% horizontal = pone el rostro de John en el CENTRO del círculo, mostrando SU CARA COMPLETA.
       → 22% vertical = alinea un poco más arriba el punto focal (frente ojos).
       Así se aprecia la persona, no el logo izquierdo. */
    object-position: 78% 22%;
    border-radius: 50%;
    background-color: #ffffff;
    filter: saturate(1.04) contrast(1.04) brightness(1.01);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.3s ease,
                box-shadow 0.3s ease;
    will-change: transform;
}

/* Hover foto: suave escala 1.03 + glow gold */
.jm-bio-john__avatar:hover .jm-bio-john__avatar-img,
.jm-bio-john__avatar-col:hover .jm-bio-john__avatar-img {
    transform: scale(1.03);
    filter: saturate(1.06) contrast(1.04);
    box-shadow: inset 0 0 20px -10px rgba(245, 197, 24, 0.65);
}

/* ---------------- 5. Columna 2: texto biografía (nombre / subtitulo / copy / firma) ---------------- */
.jm-bio-john__content-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1rem;
    padding-top: 0.1rem;
}

/* Título JOHN MEJÍA — uppercase 900 navy clamp grande */
.jm-bio-john__title {
    margin: 0;
    padding: 0;
    font-size: clamp(2.1rem, 2.45vw + 1.65rem, 3.55rem);
    line-height: 1.03;
    letter-spacing: 0.01em;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--jm-c-navy-900, #0c2f52);
    text-wrap: balance;
    text-align: left;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8),
        0 2px 6px rgba(12, 47, 82, 0.14);
}

/* Subtítulo cargos — barra gold izq NO. Pill style ligero */
.jm-bio-john__subtitle {
    margin: 0;
    padding: 0.5rem 0.9rem 0.5rem 1.35rem;
    color: var(--jm-c-primary, #0f4c81);
    font-weight: 700;
    font-size: clamp(0.95rem, 0.45vw + 0.92rem, 1.15rem);
    line-height: 1.4;
    letter-spacing: 0.005em;
    background-color: rgba(245, 197, 24, 0.085);
    border-left: 3.5px solid var(--jm-c-gold, #f5c518);
    border-radius: 0 10px 10px 0;
    max-width: 70ch;
    text-wrap: pretty;
}

/* Divisor gold JM unificado 96px */
.jm-bio-john__divider {
    width: 96px;
    height: 3.5px;
    display: block;
    border-radius: 99px;
    margin: 0.2rem 0 0.3rem 0;
    background: linear-gradient(90deg,
        rgba(245, 197, 24, 0) 0%,
        rgba(245, 197, 24, 1) 20%,
        #ffe082 50%,
        rgba(245, 197, 24, 1) 80%,
        rgba(245, 197, 24, 0) 100%);
    box-shadow: 0 0 12px 0 rgba(245, 197, 24, 0.45);
}

/* Wrapper párrafos biografía */
.jm-bio-john__copy {
    width: 100%;
    max-width: 100%;
    margin-top: 0.15rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.9rem;
}

/* Párrafo normal biografía */
.jm-bio-john__p {
    margin: 0;
    padding: 0;
    color: var(--jm-c-navy-700, #1a466f);
    font-weight: 450;
    font-size: clamp(0.98rem, 0.28vw + 0.95rem, 1.1rem);
    line-height: 1.78;
    letter-spacing: 0.003em;
    text-wrap: pretty;
    max-width: 88ch;
}

/* Resaltar negrita datos clave (USD 500M / METHODOLOGÍA SOL® etc.) · JM gold + navy 900 */
.jm-bio-john__p strong,
.jm-bio-john__p b {
    color: var(--jm-c-navy-900, #0c2f52);
    font-weight: 800;
    background: linear-gradient(180deg, transparent 62%, rgba(245, 197, 24, 0.22) 62%, rgba(245, 197, 24, 0.22) 96%, transparent 96%);
    padding: 0 2px;
    border-radius: 3px;
}

/* Firma footer final John Jair Mejía — barra gold izq ancha */
.jm-bio-john__signature {
    margin-top: 1.35rem;
    padding: 1.1rem 1.35rem 1.1rem 1.5rem;
    background: linear-gradient(135deg,
        rgba(15, 76, 129, 0.035) 0%,
        rgba(15, 76, 129, 0) 45%,
        rgba(245, 197, 24, 0.075) 100%);
    border-radius: 0 16px 16px 0;
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1rem;
    isolation: isolate;
}

.jm-bio-john__signature-accent {
    position: absolute;
    left: 0;
    top: 8%;
    bottom: 8%;
    width: 5px;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(180deg,
        var(--jm-c-gold-200, #ffe082) 0%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #d9ac10) 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.45);
}

.jm-bio-john__signature-text {
    margin: 0;
    padding-left: 0.45rem;
    color: var(--jm-c-primary, #0f4c81);
    font-weight: 750;
    font-style: italic;
    font-size: clamp(0.98rem, 0.35vw + 0.95rem, 1.15rem);
    line-height: 1.55;
    letter-spacing: 0.005em;
    max-width: 82ch;
    text-wrap: pretty;
}

/* =========================================================
 *   BREAKPOINTS JM STANDARD: ≤1199px · ≤991px · ≤639px
 * ========================================================= */

/* --- Breakpoint 1 · Desktop mediano ≤1199px --- */
@media (max-width: 1199px) {
    .jm-bio-john { padding: 5.25rem 0 5.75rem; }
    .jm-bio-john__inner { gap: 2.6rem; padding: 0 var(--jm-px, 1.35rem); }
    .jm-bio-john__layout {
        grid-template-columns: 270px minmax(0, 1fr);
        gap: 2.9rem;
    }
    .jm-bio-john__title { font-size: clamp(1.8rem, 2.3vw + 1.35rem, 2.8rem); }
    .jm-bio-john__avatar { max-width: 260px; border-width: 4.5px; }
}

/* --- Breakpoint 2 · Tablet ≤991px · STACK 1 COLUMNA (foto arriba centrada, texto abajo) --- */
@media (max-width: 991px) {
    .jm-bio-john { padding: 4.5rem 0 5.25rem; }
    .jm-bio-john__inner { gap: 2.35rem; padding: 0 var(--jm-px, 1.25rem); }

    /* Stack 1 columna foto arriba, texto debajo */
    .jm-bio-john__layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 2.35rem;
        justify-items: center;
        text-align: left;
    }

    /* Avatar col centrado 230px max width */
    .jm-bio-john__avatar-col { padding-top: 0; }
    .jm-bio-john__avatar { max-width: 230px; border-width: 4.5px; }

    /* Título y subtítulo pueden crecer al ancho completo */
    .jm-bio-john__content-col { gap: 0.9rem; padding-top: 0; }
    .jm-bio-john__title {
        font-size: clamp(1.6rem, 4.2vw + 1.35rem, 2.4rem);
        text-align: left;
    }
    .jm-bio-john__subtitle {
        max-width: 100%;
        font-size: clamp(0.9rem, 1.2vw + 0.88rem, 1.04rem);
    }
    .jm-bio-john__divider { margin-top: 0; }
    .jm-bio-john__p { max-width: 100%; }
    .jm-bio-john__signature { margin-top: 1.1rem; }
    .jm-bio-john__signature-text { max-width: 100%; }
}

/* --- Breakpoint 3 · Móvil ≤639px --- */
@media (max-width: 639px) {
    .jm-bio-john { padding: 3.65rem 0 4.3rem; }
    .jm-bio-john__inner { gap: 2.05rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-bio-john__layout { gap: 1.9rem; }

    /* Avatar reducido 190px · border gold 4px */
    .jm-bio-john__avatar {
        max-width: 190px;
        border-width: 4px;
        box-shadow:
            0 0 0 5px rgba(255, 255, 255, 1),
            0 0 0 6px rgba(245, 197, 24, 0.4),
            0 16px 40px -14px rgba(12, 47, 82, 0.28),
            0 0 18px 2px rgba(245, 197, 24, 0.22);
    }

    /* Título más pequeño movil */
    .jm-bio-john__title {
        font-size: clamp(1.45rem, 7.2vw + 1.1rem, 2.05rem);
        text-align: left;
        letter-spacing: 0;
    }

    .jm-bio-john__subtitle {
        padding: 0.5rem 0.8rem 0.5rem 1.1rem;
        font-size: 0.92rem;
        border-left-width: 3px;
    }

    .jm-bio-john__divider { width: 80px; height: 3px; }

    .jm-bio-john__p {
        font-size: 0.96rem;
        line-height: 1.72;
        font-weight: 440;
    }

    /* Firma movil padding reducido */
    .jm-bio-john__signature {
        margin-top: 1.05rem;
        padding: 0.95rem 1.05rem 0.95rem 1.2rem;
        border-radius: 0 14px 14px 0;
    }
    .jm-bio-john__signature-accent { width: 4.5px; }
    .jm-bio-john__signature-text {
        font-size: 0.96rem;
        line-height: 1.52;
        padding-left: 0.35rem;
    }
}

/* ==========================================================
 *   SECCIÓN LICITACIONES & SUBASTAS · portada JM (DESPUÉS Vitrina, ANTES SOL®)
 *   REDISEÑO v2 (feedback user):
 *     • NO es 2 columnas lado a lado.
 *     • 1 SOLA COLUMNA · 2 filas STACK una debajo de la otra.
 *     • CADA FILA = GRID INTERNO 2 cols:
 *         COL IZQ: imagen (16:9 marco gold/navy)
 *         COL DER: pill categoría + título + garantía + botón CTA
 *   Colores JM: navy #0f4c81 + gold #f5c518 · patrón diseño unificado
 * ========================================================== */

/* ---------------- 1. Contenedor general sección ---------------- */
.jm-licitaciones {
    position: relative;
    width: 100%;
    padding: 6.25rem 0 6.75rem 0;
    background-color: #ffffff;
    background-image:
        linear-gradient(135deg,
            rgba(245, 197, 24, 0.04) 0%,
            rgba(245, 197, 24, 0) 22%,
            rgba(15, 76, 129, 0.02) 70%,
            rgba(15, 76, 129, 0.028) 100%);
    overflow: hidden;
    isolation: isolate;
}
.jm-licitaciones::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 6px;
    background: linear-gradient(90deg,
        rgba(245,197,24,0) 0%,
        rgba(245,197,24,0.68) 50%,
        rgba(245,197,24,0) 100%);
    box-shadow: 0 0 20px 0 rgba(245,197,24,0.28);
    z-index: 1;
    pointer-events: none;
}
.jm-licitaciones::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg,
        rgba(15,76,129,0) 0%,
        rgba(15,76,129,0.58) 50%,
        rgba(15,76,129,0) 100%);
    z-index: 1;
    pointer-events: none;
}

.jm-licitaciones__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 3.25rem;
}

/* ---------------- 2. Header pill título + subtítulo ---------------- */
.jm-licitaciones__header {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
    max-width: 110ch;
}
.jm-licitaciones__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
    padding: 0.62rem 1.3rem 0.62rem 1.95rem;
    border-radius: 13px;
    background-color: var(--jm-c-primary, #0f4c81);
    /* ↓↓↓ CORRECCIÓN USER: COLOR TEXTO BLANCO (antes gold muy oscuro no se veía ↓↓↓ */
    color: #ffffff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 2px 0 rgba(245, 197, 24, 0.28) inset,
        0 14px 32px -14px rgba(15, 76, 129, 0.45),
        0 0 0 1px rgba(245, 197, 24, 0.48);
    isolation: isolate;
}
.jm-licitaciones__pill::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16%;
    bottom: 16%;
    width: 4.5px;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(180deg,
        #ffe082 0%,
        #f5c518 50%,
        #d9ac10 100%);
    box-shadow: 0 0 12px 0 rgba(245, 197, 24, 0.55);
}
.jm-licitaciones__pill-title {
    margin: 0;
    padding: 0;
    font-size: clamp(0.88rem, 0.48vw + 0.84rem, 1.08rem);
    letter-spacing: 0.075em;
    line-height: 1.35;
    text-transform: uppercase;
    font-weight: 900;
    color: inherit;   /* hereda BLANCO de __pill */
    text-shadow: 0 1px 0 rgba(0,0,0,0.20);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    max-width: 100%;
}
.jm-licitaciones__subtitle {
    margin: 0;
    padding: 0;
    color: var(--jm-c-navy-700, #1a466f);
    font-size: clamp(0.98rem, 0.3vw + 0.95rem, 1.12rem);
    line-height: 1.65;
    font-weight: 500;
    max-width: 108ch;
    text-wrap: pretty;
}

/* ---------------- 3. Grid STACK 1 SOLA COLUMNA · 2 filas stack vertical (Servicios + Productos) ---------------- */
.jm-licitaciones__grid {
    width: 100%;
    display: grid;
    /* ↓↓↓ ANTES era repeat(2) → AHORA 1 SOLA COLUMNA (2 filas stack verticales ↓↓↓ */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2.25rem;
    align-items: stretch;
    justify-items: stretch;
}

/* ---------------- 4. Fila individual (Servicios o Productos) GRID INTERNO 2 cols: img IZQ | texto DER ---------------- */
.jm-licitaciones-row {
    position: relative;
    width: 100%;
    min-height: 100%;
    display: grid;
    /* ≡≡≡ GRID INTERNO CADA FILA: 52% imagen + 48% texto (imagen un poco mayor por ser contenido visual importante) ≡≡≡ */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2.25rem;
    align-items: center;
    justify-items: stretch;
    border-radius: 24px;
    background-color: #ffffff;
    border: 1px solid rgba(15, 76, 129, 0.12);
    padding: 1.85rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 2px 0 rgba(245, 197, 24, 0.10) inset,
        0 32px 70px -30px rgba(12, 47, 82, 0.32),
        0 16px 38px -20px rgba(15, 76, 129, 0.24),
        0 0 0 1px rgba(15, 76, 129, 0.05);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.28s ease;
    will-change: transform;
}
.jm-licitaciones-row::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: linear-gradient(180deg,
        #ffe082 0%,
        #f5c518 50%,
        #d9ac10 100%);
    box-shadow: 2px 0 18px -2px rgba(245,197,24,0.48);
    z-index: 2;
    pointer-events: none;
}
.jm-licitaciones-row:hover,
.jm-licitaciones-row:focus-within {
    transform: translateY(-4px);
    border-color: rgba(245, 197, 24, 0.62);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 2px 0 rgba(245, 197, 24, 0.16) inset,
        0 38px 82px -28px rgba(12, 47, 82, 0.38),
        0 22px 46px -24px rgba(15, 76, 129, 0.30),
        0 0 0 1px rgba(245, 197, 24, 0.38);
}

/* -------- 4.1 Columna IZQUIERDA: imagen 16:9 con marco gold/navy -------- */
.jm-licitaciones-row__media {
    margin: 0;
    padding: 0.6rem;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    background: linear-gradient(135deg,
        #fffdf4 0%,
        #fff7dc 45%,
        #fff1b6 100%);
    border: 2px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 2px 0 rgba(245, 197, 24, 0.30) inset,
        0 18px 38px -18px rgba(15, 76, 129, 0.32),
        0 0 0 1px rgba(245, 197, 24, 0.22);
    overflow: hidden;
    position: relative;
    z-index: 3;
    display: block;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.jm-licitaciones-row__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    border-radius: 14px;
    display: block;
    background-color: #ffffff;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.3s ease;
    will-change: transform;
}
.jm-licitaciones-row:hover .jm-licitaciones-row__img {
    transform: scale(1.03);
    filter: saturate(1.06) contrast(1.03);
}

/* -------- 4.2 Columna DERECHA: pill + título + garantía + botón -------- */
.jm-licitaciones-row__content {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1.25rem;
    padding: 0.25rem 0.25rem 0.25rem 0;
    position: relative;
    z-index: 3;
}

.jm-licitaciones-row__header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.7rem;
}
.jm-licitaciones-row__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background-color: rgba(15, 76, 129, 0.09);
    border: 1px solid rgba(15, 76, 129, 0.24);
    color: var(--jm-c-primary, #0f4c81);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
}
.jm-licitaciones-row__pill.-productos {
    background-color: rgba(245, 197, 24, 0.12);
    border-color: rgba(200, 160, 20, 0.48);
    color: #8a6b06;
}
.jm-licitaciones-row__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-navy-900, #0c2f52);
    font-size: clamp(1.5rem, 1.1vw + 1.2rem, 2.1rem);
    line-height: 1.18;
    letter-spacing: 0.005em;
    font-weight: 900;
    max-width: 22ch;
    text-wrap: balance;
    text-shadow: 0 1px 0 rgba(255,255,255,0.75);
}

/* -------- 4.3 Bloque garantía JM (escudo + texto) -------- */
.jm-licitaciones-row__guarantee {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    padding: 1.05rem 1.15rem 1.05rem 1.35rem;
    border-radius: 16px;
    background: linear-gradient(135deg,
        rgba(245, 197, 24, 0.10) 0%,
        rgba(255, 255, 255, 1) 42%,
        rgba(15, 76, 129, 0.05) 100%);
    border: 1px solid rgba(245, 197, 24, 0.48);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 2px 0 rgba(245, 197, 24, 0.22) inset,
        0 0 0 1px rgba(15, 76, 129, 0.06);
    position: relative;
    isolation: isolate;
}
.jm-licitaciones-row__guarantee::before {
    content: "";
    position: absolute;
    left: 0; top: 12%; bottom: 12%;
    width: 4px;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(180deg, #ffe082 0%, #f5c518 50%, #d9ac10 100%);
    box-shadow: 0 0 10px 0 rgba(245,197,24,0.45);
}
.jm-licitaciones-row__guarantee-badge {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    margin-left: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5c518 0%, #e1b013 100%);
    color: #0c2f52;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 1),
        0 0 0 4px rgba(245, 197, 24, 0.45),
        inset 0 0 0 1px rgba(12, 47, 82, 0.10);
}
.jm-licitaciones-row__guarantee-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
    min-width: 0;
}
.jm-licitaciones-row__guarantee-title {
    display: block;
    color: var(--jm-c-primary, #0f4c81);
    font-size: 0.95rem;
    line-height: 1.3;
    letter-spacing: 0.005em;
    font-weight: 900;
}
.jm-licitaciones-row__guarantee-p {
    margin: 0;
    padding: 0;
    color: var(--jm-c-navy-700, #1a466f);
    font-size: clamp(0.88rem, 0.2vw + 0.86rem, 0.95rem);
    line-height: 1.65;
    font-weight: 500;
    max-width: 75ch;
    text-wrap: pretty;
}

/* -------- 4.4 Botón CTA (página futura) -------- */
.jm-licitaciones-row__btn {
    align-self: flex-start;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.95rem;
    max-width: 100%;
    padding: 1rem 1.4rem 1rem 1.95rem;
    border-radius: 15px;
    background-color: var(--jm-c-primary, #0f4c81);
    color: #ffffff;
    text-decoration: none;
    font-size: clamp(0.9rem, 0.25vw + 0.88rem, 1rem);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: 0.02em;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 2px 0 rgba(245, 197, 24, 0.24) inset,
        0 18px 38px -16px rgba(15, 76, 129, 0.6),
        0 0 0 1px rgba(245, 197, 24, 0.42);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease,
                background-color 0.25s ease,
                color 0.25s ease;
    will-change: transform;
}
.jm-licitaciones-row__btn::before {
    content: "";
    position: absolute;
    left: 0; top: 14%; bottom: 14%;
    width: 4.5px;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(180deg, #ffe082 0%, #f5c518 50%, #d9ac10 100%);
    box-shadow: 0 0 12px 0 rgba(245, 197, 24, 0.55);
}
.jm-licitaciones-row__btn::after {
    content: "";
    position: absolute;
    right: -90px; top: -90px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,197,24,0.18) 0%, rgba(245,197,24,0) 70%);
    z-index: -1;
    pointer-events: none;
}
.jm-licitaciones-row__btn:hover,
.jm-licitaciones-row__btn:focus-visible {
    transform: translateY(-2px);
    color: #fff8dd;
    text-decoration: none;
    background: linear-gradient(135deg, #0f4c81 0%, #1562a4 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 2px 0 rgba(245, 197, 24, 0.32) inset,
        0 22px 44px -16px rgba(15, 76, 129, 0.68),
        0 0 0 1px rgba(245, 197, 24, 0.55);
}
.jm-licitaciones-row__btn-label {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 1.35;
    text-align: left;
}
.jm-licitaciones-row__btn-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(245, 197, 24, 0.18);
    color: var(--jm-c-gold-200, #ffe082);
    transition: background-color 0.25s ease,
                color 0.25s ease,
                transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.jm-licitaciones-row__btn:hover .jm-licitaciones-row__btn-icon {
    background-color: #f5c518;
    color: #0c2f52;
    transform: translateX(3px);
}

/* -------- Modifier --productos: Fila 2 (Producto. Invertimos paleta (barra izq navy, img marco navy, botón gold -------- */
.jm-licitaciones-row--productos::before {
    background: linear-gradient(180deg, #1a6bb2 0%, #0f4c81 50%, #0c2f52 100%);
    box-shadow: 2px 0 18px -2px rgba(15,76,129,0.5);
}
.jm-licitaciones-row--productos .jm-licitaciones-row__media {
    background: linear-gradient(135deg,
        #f4f8fc 0%,
        #e6eef7 45%,
        #d4e1f0 100%);
    border-color: var(--jm-c-primary, #0f4c81);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 2px 0 rgba(15, 76, 129, 0.24) inset,
        0 18px 38px -18px rgba(15, 76, 129, 0.34),
        0 0 0 1px rgba(15, 76, 129, 0.22);
}
.jm-licitaciones-row--productos .jm-licitaciones-row__guarantee {
    background: linear-gradient(135deg,
        rgba(15, 76, 129, 0.08) 0%,
        rgba(255, 255, 255, 1) 42%,
        rgba(245, 197, 24, 0.07) 100%);
    border-color: rgba(15, 76, 129, 0.34);
}
.jm-licitaciones-row--productos .jm-licitaciones-row__guarantee::before {
    background: linear-gradient(180deg, #1a6bb2 0%, #0f4c81 50%, #0c2f52 100%);
    box-shadow: 0 0 10px 0 rgba(15,76,129,0.45);
}
.jm-licitaciones-row--productos .jm-licitaciones-row__guarantee-badge {
    background: linear-gradient(135deg, #0f4c81 0%, #1a6bb2 100%);
    color: #ffe082;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 1),
        0 0 0 4px rgba(15, 76, 129, 0.45),
        inset 0 0 0 1px rgba(255, 224, 130, 0.22);
}
.jm-licitaciones-row--productos .jm-licitaciones-row__guarantee-title {
    color: #0f4c81;
}
.jm-licitaciones-row--productos .jm-licitaciones-row__btn {
    background: linear-gradient(135deg,
        #d9ac10 0%,
        #f5c518 55%,
        #f9d962 100%);
    color: #0c2f52;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 2px 0 rgba(12, 47, 82, 0.13) inset,
        0 18px 38px -16px rgba(200, 160, 20, 0.62),
        0 0 0 1px rgba(12, 47, 82, 0.2);
}
.jm-licitaciones-row--productos .jm-licitaciones-row__btn::before {
    background: linear-gradient(180deg, #0f4c81 0%, #1a6bb2 50%, #0c2f52 100%);
    box-shadow: 0 0 12px 0 rgba(15, 76, 129, 0.5);
}
.jm-licitaciones-row--productos .jm-licitaciones-row__btn:hover,
.jm-licitaciones-row--productos .jm-licitaciones-row__btn:focus-visible {
    background: linear-gradient(135deg,
        #c89d09 0%,
        #e6b410 55%,
        #f1c820 100%);
    color: #0c2f52;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 2px 0 rgba(12, 47, 82, 0.17) inset,
        0 22px 44px -16px rgba(180, 140, 15, 0.75),
        0 0 0 1px rgba(12, 47, 82, 0.26);
}
.jm-licitaciones-row--productos .jm-licitaciones-row__btn-icon {
    background-color: rgba(12, 47, 82, 0.18);
    color: #0c2f52;
}
.jm-licitaciones-row--productos .jm-licitaciones-row__btn:hover .jm-licitaciones-row__btn-icon {
    background-color: #0c2f52;
    color: #ffe082;
}

/* ---------------- 5. BREAKPOINTS JM STANDARD · sección Licitaciones v2 ---------------- */

/* -------- Breakpoint 1 · Desktop mediano ≤1199px -------- */
@media (max-width: 1199px) {
    .jm-licitaciones { padding: 5.25rem 0 5.75rem 0; }
    .jm-licitaciones__inner { gap: 2.8rem; padding: 0 var(--jm-px, 1.35rem); max-width: 1180px; }

    .jm-licitaciones__grid { gap: 1.9rem; }
    .jm-licitaciones-row {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 1.85rem;
        padding: 1.6rem;
        border-radius: 22px;
    }

    .jm-licitaciones-row__media { padding: 0.52rem; border-radius: 17px; }
    .jm-licitaciones-row__img { border-radius: 13px; }

    .jm-licitaciones-row__content { gap: 1.05rem; padding: 0; }
    .jm-licitaciones-row__title { font-size: clamp(1.3rem, 1vw + 1.1rem, 1.8rem); }

    .jm-licitaciones-row__guarantee { padding: 0.95rem 1.05rem 0.95rem 1.2rem; gap: 0.9rem; border-radius: 15px; }
    .jm-licitaciones-row__guarantee-badge { width: 42px; height: 42px; margin-left: 0.28rem; }
    .jm-licitaciones-row__guarantee-title { font-size: 0.92rem; }
    .jm-licitaciones-row__guarantee-p { font-size: 0.9rem; line-height: 1.62; }

    .jm-licitaciones-row__btn {
        padding: 0.92rem 1.25rem 0.92rem 1.8rem;
        border-radius: 14px;
        font-size: 0.92rem;
    }
    .jm-licitaciones-row__btn-icon { width: 40px; height: 40px; }
}

/* -------- Breakpoint 2 · Tablet ≤991px · STACK INTERNO (imagen arriba, texto abajo DENTRO de cada fila -------- */
@media (max-width: 991px) {
    .jm-licitaciones { padding: 4.5rem 0 5.25rem 0; }
    .jm-licitaciones__inner { gap: 2.5rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-licitaciones__header { gap: 0.75rem; }
    .jm-licitaciones__subtitle { font-size: clamp(0.94rem, 0.35vw + 0.9rem, 1.05rem); }

    .jm-licitaciones__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.85rem;
        max-width: 820px;
        margin: 0 auto;
    }

    .jm-licitaciones-row {
        /* ≡≡≡ GRID INTERNO: STACK COMPLETO 1 columna (imagen arriba, texto abajo) ≡≡≡ */
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 1.5rem;
        padding: 1.6rem;
        border-radius: 21px;
    }
    .jm-licitaciones-row__media {
        max-width: 100%;
        padding: 0.55rem;
        border-radius: 17px;
    }
    .jm-licitaciones-row__content {
        gap: 1.08rem;
        padding: 0 0.15rem;
    }
    .jm-licitaciones-row__header { gap: 0.65rem; }
    .jm-licitaciones-row__pill { font-size: 0.74rem; padding: 0.37rem 0.92rem; }
    .jm-licitaciones-row__title {
        font-size: clamp(1.35rem, 2.3vw + 1.1rem, 1.85rem);
        max-width: 100%;
    }
    .jm-licitaciones-row__guarantee { padding: 0.98rem 1.05rem 0.98rem 1.2rem; border-radius: 15px; }
    .jm-licitaciones-row__guarantee-badge { width: 44px; height: 44px; }
    .jm-licitaciones-row__guarantee-title { font-size: 0.9rem; }
    .jm-licitaciones-row__guarantee-p { font-size: 0.92rem; line-height: 1.65; }
    .jm-licitaciones-row__btn { padding: 0.92rem 1.2rem 0.92rem 1.78rem; border-radius: 14px; }
}

/* -------- Breakpoint 3 · Móvil ≤639px -------- */
@media (max-width: 639px) {
    .jm-licitaciones { padding: 3.65rem 0 4.35rem 0; }
    .jm-licitaciones__inner { gap: 2.15rem; padding: 0 var(--jm-px, 1.25rem); }
    .jm-licitaciones::before { height: 4px; }
    .jm-licitaciones::after { height: 3.5px; }

    .jm-licitaciones__header { gap: 0.65rem; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
    .jm-licitaciones__pill {
        padding: 0.54rem 1.15rem 0.54rem 1.6rem;
        border-radius: 11px;
        max-width: 100%;
        min-width: 0;
        width: auto;
        box-sizing: border-box;
    }
    .jm-licitaciones__pill::before { width: 3.5px; }
    .jm-licitaciones__pill-title {
        font-size: 0.78rem;
        letter-spacing: 0.055em;
        line-height: 1.35;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        -webkit-hyphens: auto;
        hyphens: auto;
        max-width: 100%;
    }
    .jm-licitaciones__subtitle { font-size: 0.94rem; line-height: 1.62; }

    .jm-licitaciones__grid { gap: 1.6rem; max-width: 100%; }

    .jm-licitaciones-row {
        padding: 1.35rem;
        border-radius: 19px;
    }
    .jm-licitaciones-row::before { width: 4px; }
    .jm-licitaciones-row__media {
        padding: 0.44rem;
        border-radius: 15px;
        border-width: 1.5px;
    }
    .jm-licitaciones-row__img { border-radius: 12px; }

    .jm-licitaciones-row__content { gap: 0.95rem; padding: 0; }
    .jm-licitaciones-row__header { gap: 0.58rem; }
    .jm-licitaciones-row__pill {
        font-size: 0.7rem;
        padding: 0.35rem 0.84rem;
    }
    .jm-licitaciones-row__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.6rem);
    }

    .jm-licitaciones-row__guarantee {
        padding: 0.9rem 1rem 0.9rem 1.1rem;
        border-radius: 14px;
        gap: 0.8rem;
    }
    .jm-licitaciones-row__guarantee::before { width: 3.5px; }
    .jm-licitaciones-row__guarantee-badge {
        width: 40px;
        height: 40px;
        margin-left: 0.2rem;
    }
    .jm-licitaciones-row__guarantee-badge svg { width: 20px; height: 20px; }
    .jm-licitaciones-row__guarantee-title { font-size: 0.88rem; }
    .jm-licitaciones-row__guarantee-p { font-size: 0.88rem; line-height: 1.6; }

    .jm-licitaciones-row__btn {
        padding: 0.82rem 1rem 0.82rem 1.55rem;
        border-radius: 13px;
        gap: 0.8rem;
        font-size: 0.9rem;
        width: 100%;
    }
    .jm-licitaciones-row__btn::before { width: 4px; }
    .jm-licitaciones-row__btn-icon {
        width: 36px;
        height: 36px;
    }
    .jm-licitaciones-row__btn-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* ============================================================
 *  OVERRIDE LICITACIONES v2 · MÁXIMA ESPECIFICIDAD
 *  (garantiza que sin importar caché/orden CSS, se aplique v2)
 * ============================================================ */

/* --- Stack 1 SOLA COLUMNA (2 filas una debajo otra) · NO 2 cols lado a lado --- */
body .jm-licitaciones__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 2.25rem !important;
    width: 100% !important;
    align-items: stretch !important;
}

/* --- Pill título: fondo navy · TEXTO BLANCO PURO --- */
body .jm-licitaciones__pill {
    background-color: #0f4c81 !important;
    color: #ffffff !important;
}
body .jm-licitaciones__pill-title {
    color: #ffffff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.20) !important;
}

/* --- Cada fila: GRID INTERNO 2 cols = IMAGEN IZQ + CONTENIDO DER --- */
body .jm-licitaciones-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    gap: 2.25rem !important;
    align-items: center !important;
    width: 100% !important;
    padding: 1.85rem !important;
    border-radius: 24px !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 76, 129, 0.12) !important;
}

/* --- Media (imagen col izq) 16:9 marco gold por defecto --- */
body .jm-licitaciones-row__media {
    margin: 0;
    padding: 0.6rem;
    border: 2px solid rgba(245, 197, 24, 0.6);
    border-radius: 18px;
    background: linear-gradient(145deg,
        rgba(245, 197, 24, 0.12) 0%,
        rgba(255, 255, 255, 1) 55%,
        rgba(15, 76, 129, 0.06) 100%);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,1) inset,
        0 18px 45px -20px rgba(15, 76, 129, 0.35);
    transition: transform .32s ease, border-color .28s ease;
}
body .jm-licitaciones-row__img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center 38%;
    display: block;
    border-radius: 14px;
    transition: transform .45s cubic-bezier(.22,1,.36,1), filter .3s ease;
    will-change: transform;
}

/* --- Contenido col der: flex-col gap 1.25rem (pill / título / garantía / btn) --- */
body .jm-licitaciones-row__content {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 1.25rem !important;
    padding: 0.25rem 0.15rem 0.25rem 0 !important;
    text-align: left !important;
}

/* --- Fila 2 Productos: invertir paleta · marco navy · barra izq navy · botón gold --- */
body .jm-licitaciones-row--productos::before { background: linear-gradient(180deg,#1a5ea8 0%,#0f4c81 55%,#0c2f52 100%) !important; }
body .jm-licitaciones-row--productos .jm-licitaciones-row__media {
    border-color: rgba(15, 76, 129, 0.6) !important;
    background: linear-gradient(145deg,
        rgba(15, 76, 129, 0.1) 0%,
        rgba(255, 255, 255, 1) 55%,
        rgba(245, 197, 24, 0.05) 100%) !important;
}
body .jm-licitaciones-row--productos .jm-licitaciones-row__guarantee::before {
    background: linear-gradient(180deg,#1a5ea8 0%,#0f4c81 55%,#0c2f52 100%) !important;
}
body .jm-licitaciones-row--productos .jm-licitaciones-row__guarantee-badge {
    background: linear-gradient(145deg,#0f4c81 0%,#0c2f52 100%) !important;
    color: #ffe082 !important;
    border: 1px solid rgba(245, 197, 24, 0.55) !important;
}
body .jm-licitaciones-row--productos .jm-licitaciones-row__guarantee-title { color: #0f4c81 !important; }
body .jm-licitaciones-row--productos .jm-licitaciones-row__btn {
    background: linear-gradient(145deg,#ffe082 0%,#f5c518 55%,#d9ac10 100%) !important;
    color: #0c2f52 !important;
    border: 1px solid rgba(15, 76, 129, 0.22) !important;
}
body .jm-licitaciones-row--productos .jm-licitaciones-row__btn::before {
    background: linear-gradient(180deg,#1a5ea8 0%,#0f4c81 55%,#0c2f52 100%) !important;
}
body .jm-licitaciones-row--productos .jm-licitaciones-row__btn-icon {
    background: rgba(15, 76, 129, 0.88) !important;
    color: #ffe082 !important;
}

/* --- Breakpoint Tablet ≤991px: CADA FILA stack completo 1 col (img arriba, texto abajo) --- */
@media (max-width: 991px) {
    body .jm-licitaciones-row {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 1.5rem !important;
        max-width: 820px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body .jm-licitaciones-row__content { align-items: flex-start !important; text-align: left !important; }
}

/* --- Breakpoint Móvil ≤639px: paddings + botón full width --- */
@media (max-width: 639px) {
    body .jm-licitaciones-row { padding: 1.35rem !important; gap: 1.25rem !important; }
    body .jm-licitaciones-row__btn { width: 100% !important; }
    body .jm-licitaciones__grid { gap: 1.6rem !important; }
}

/* ============================================================
 *  BOTONES FLOTANTES GLOBALES · WOMPI + WHATSAPP (v5.4 · PULSO 1 SOLO ANILLO)
 *  Stack bottom-RIGHT. Wompi (arriba) · WhatsApp (abajo).
 *  ✅ 1 SOLO ANILLO expansible por botón · ciclo LARGO 4.8s · desfase 2.1s entre botones
 *  ✅ Wompi  = BLANCO PURO (#fff) + imagen wompi CENTRADA
 *  ✅ WhatsApp = VERDE OFICIAL (#25D366) + SVG blanco CENTRADO
 * ============================================================ */

/* --- Keyframe: pulso limpio (expansión + fade) --- */
@keyframes jm-float-pulse-clean {
    0% {
        transform: scale(0.98);
        opacity: 0.82;
    }
    65% {
        transform: scale(1.70);
        opacity: 0;
    }
    100% {
        transform: scale(1.75);
        opacity: 0;
    }
}

/* ---- 1. Stack: bottom-right fijo ---- */
body .jm-float-stack {
    position: fixed;
    bottom: 1.8rem;
    right: 1.6rem;
    left: auto;
    z-index: 99997;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.9rem;
    pointer-events: none;
    max-width: 80px;
}
@media (prefers-reduced-motion: reduce) {
    body .jm-float-stack * {
        animation: none !important;
        transition: none !important;
    }
    body .jm-float__pulse { display: none !important; }
}

/* ---- 2. Botón BASE ---- */
body .jm-float {
    --jm-float-size: 66px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--jm-float-size);
    height: var(--jm-float-size);
    min-width: var(--jm-float-size);
    min-height: var(--jm-float-size);
    border-radius: 50%;
    text-decoration: none !important;
    cursor: pointer;
    pointer-events: auto;

    box-shadow:
        0 0 0 1px rgba(15, 76, 129, 0.10),
        0 14px 28px -14px rgba(12, 47, 82, 0.45);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;

    isolation: isolate;
    overflow: visible;
}

/* --- Span PULSO · 1 SOLO anillo por botón --- */
body .jm-float__pulse {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    border-radius: 50%;
    border-width: 2.8px;
    border-style: solid;
    pointer-events: none;

    /* CICLO LARGO: 4.8s */
    animation: jm-float-pulse-clean 4.8s cubic-bezier(.19, 1, .22, 1) infinite;
}

/* Pulso Wompi: GOLD */
body .jm-float--wompi .jm-float__pulse {
    border-color: rgba(240, 196, 25, 0.78);
}

/* Pulso WhatsApp: VERDE · DESFASE 2.1s respecto a Wompi */
body .jm-float--whatsapp .jm-float__pulse {
    border-color: rgba(37, 211, 102, 0.70);
    animation-delay: 2.1s;
}

/* Al hacer hover/focus/active: pulso se pausa y desaparece */
body .jm-float:hover .jm-float__pulse,
body .jm-float:focus-visible .jm-float__pulse,
body .jm-float:active .jm-float__pulse {
    animation-play-state: paused;
    opacity: 0 !important;
}

/* --- WOMPI (arriba): BLANCO COMPLETO + borde gold --- */
body .jm-float--wompi {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 2px solid #f0c419;
}

/* --- WHATSAPP (abajo): VERDE OFICIAL COMPLETO + borde blanco --- */
body .jm-float--whatsapp {
    background-color: #25D366 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 2px solid #ffffff;
}

/* Hover: elevación MUY sutil 2px */
body .jm-float:hover,
body .jm-float:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgba(15, 76, 129, 0.18),
        0 20px 36px -14px rgba(12, 47, 82, 0.58);
    outline: none;
}
body .jm-float--wompi:hover,
body .jm-float--wompi:focus-visible {
    border-color: #d9ab0a;
}
body .jm-float--whatsapp:hover,
body .jm-float--whatsapp:focus-visible {
    filter: brightness(0.96);
}
body .jm-float:active {
    transform: translateY(0);
}

/* ---- 3. Imagen Wompi: 72% NÍTIDA, sobre fondo blanco DIRECTAMENTE ---- */
body .jm-float__img {
    position: relative;
    z-index: 2;
    display: block;
    width: 72% !important;
    height: 72% !important;
    max-width: 72% !important;
    max-height: 72% !important;
    object-fit: contain;
    object-position: center center;
    filter: none !important;
    image-rendering: auto;
}

/* ---- 4. SVG WhatsApp: 62% BLANCO NÍTIDO, sobre fondo verde DIRECTAMENTE ---- */
body .jm-float__svg {
    position: relative;
    z-index: 2;
    display: block;
    color: #ffffff !important;
    fill: #ffffff !important;
    width: 62% !important;
    height: 62% !important;
    max-width: 62% !important;
    max-height: 62% !important;
    filter: none !important;
}

/* ---- 5. Breakpoints ---- */
@media (max-width: 1199px) {
    body .jm-float-stack { bottom: 1.5rem; right: 1.3rem; gap: 0.85rem; }
    body .jm-float { --jm-float-size: 62px; }
}
@media (max-width: 991px) {
    body .jm-float-stack { bottom: 1.25rem; right: 1.05rem; gap: 0.8rem; }
    body .jm-float { --jm-float-size: 58px; }
}
@media (max-width: 639px) {
    body .jm-float-stack { bottom: 1rem; right: 0.9rem; gap: 0.75rem; max-width: 68px; }
    body .jm-float { --jm-float-size: 56px; border-width: 2px; }
    body .jm-float__pulse { animation-duration: 4.1s; }
    body .jm-float--whatsapp .jm-float__pulse { animation-delay: 1.8s; }
}
@media (max-width: 380px) {
    body .jm-float-stack { bottom: 0.8rem; right: 0.75rem; gap: 0.65rem; }
    body .jm-float { --jm-float-size: 52px; }
}

/* ==========================================================
 *   [ PÁGINA JM SOLUCIONES INMOBILIARIA (page-jm-soluciones-inmobiliaria.php) ]
 *   Primera de la rama INMOBILIARIA JM Soluciones.
 *   Ruta assets PERSISTENTE: jmsolucionesgrupales\TRAE\Inmobiliaria
 *   ESTRUCTURA 3 SECCIONES VERBATIM USER:
 *     1. HERO SIN TEXTO · img = inmobiliaria-inmo-017.webp (70vh/70dvh)
 *         overlay navy rgba(8,31,55, 0.35) sin TÍTULO.
 *     2. GRID 2 CARDS (50% / 50%) = 1: inmobiliaria-prog-004.webp Inmuebles Nuevos / Proyectos slug inmuebles-nuevos-proyectos · Card 2: inmobiliaria-prog-005.webp Inmuebles Usados slug inmuebles-usados.
 *        Identidad visual cards = 1:1 jm-cfcard Crowdfunding.
 *     3. SECCIÓN IMAGEN GRANDE + BOTÓN WHATSAPP INMOBILIARIA
 *        Imagen completa contain (jm-inmobiliaria-full-006.webp).
 *        Botón "Conoce Nuestros Inmuebles" → WA 573213846182 target _blank.
 *     4. FOOTER.
 *   Reglas permanentes: NO brillo hover botones · NO text-shadow títulos ·
 *                 TITLE CASE botones.
 *   (Insertado DESPUÉS Float Stack / POSICIÓN NUEVA (último bloque).
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-inmo-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO · SIN TEXTO · JM SOLUCIONES INMOBILIARIA */

.jm-inmo-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
}

.jm-inmo-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-inmobiliaria-hero-017.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
}

.jm-inmo-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.35);
    mix-blend-mode: normal;
}

/* ---------------- 2. GRID 2 CARDS INMOBILIARIAS (identidad visual jm-cfcard 1:1 Crowdfunding) ---------------- */

.jm-inmo-cards {
    position: relative;
    width: 100%;
    padding: 7.5rem 0 7.75rem 0;
    margin: 0;
    background:
        radial-gradient(1200px 500px at 10% -10%, rgba(201, 162, 39, 0.08) 0%, transparent 60%),
        radial-gradient(900px 450px at 100% 110%, rgba(10, 37, 64, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fdfbf6 55%, #ffffff 100%);
    overflow: hidden;
}

.jm-inmo-cards__inner {
    position: relative;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
}

.jm-inmo-cards__header {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.35rem;
    padding: 0 0 2.75rem 0;
    margin: 0 0 1.5rem 0;
}

.jm-inmo-cards__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
    padding: 0.6rem 1.3rem 0.6rem 1.35rem;
    border-radius: 999px;
    background: linear-gradient(145deg, var(--jm-c-primary, #0f4c81) 0%, var(--jm-c-dark-bg-2, #0a2540) 100%);
    background-color: var(--jm-c-primary, #0f4c81);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 0 1px rgba(245, 197, 24, 0.22),
        0 6px 16px -6px rgba(15, 76, 129, 0.4),
        0 14px 32px -16px rgba(10, 27, 46, 0.3);
    overflow: visible;
    isolation: isolate;
}

.jm-inmo-cards__pill-title {
    margin: 0;
    padding: 0;
    font-size: clamp(0.82rem, 0.25vw + 0.82rem, 0.92rem);
    line-height: 1.48;
    font-weight: 650;
    letter-spacing: 0.11em;
    color: var(--jm-c-white, #ffffff);
    text-align: left;
    text-transform: uppercase;
    text-wrap: balance;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    max-width: 100%;
}

.jm-inmo-cards__subtitle {
    margin: 0;
    padding: 0;
    max-width: 900px;
    font-size: clamp(1rem, 0.25vw + 0.95rem, 1.12rem);
    line-height: 1.78;
    font-weight: 400;
    color: var(--jm-c-navy-gray-600, #4b5b74);
    text-align: left;
    letter-spacing: 0.002em;
}

.jm-inmo-cards__divider {
    display: block;
    width: 112px;
    height: 3.2px;
    margin: 0 0 0.3rem 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.42);
}

/* Grid 2 columnas cards desktop: 50% / 50%  IGUAL Crowdfunding*/

.jm-inmo-cards__grid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
    justify-items: stretch;
}

/* Card wrapper (clon visual jm-cfcard 100%) */

.jm-inmocard {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.jm-inmocard__link {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    text-decoration: none;
    color: inherit;
    padding: 1.5rem;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fdfbf6 55%, #ffffff 100%);
    background-color: #ffffff;
    border: 1.5px solid;
    border-image: linear-gradient(135deg,
        rgba(201, 162, 39, 0.32) 0%,
        rgba(15, 76, 129, 0.16) 50%,
        rgba(201, 162, 39, 0.32) 100%) 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 0 1px rgba(201, 162, 39, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.55),
        0 8px 19px -14px rgba(240, 196, 25, 0.38),
        0 18px 40px -26px rgba(15, 76, 129, 0.55),
        0 0 0 1px rgba(15, 76, 129, 0.05);
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 420ms cubic-bezier(0.19, 1, 0.22, 1),
        border-color 300ms ease,
        box-shadow 420ms ease;
    will-change: transform;
}

.jm-inmocard__link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-500, #d4af37) 50%,
        var(--jm-c-gold-700, #b8860b) 100%);
    box-shadow: 0 0 18px rgba(245, 197, 24, 0.35);
    z-index: 0;
}

.jm-inmocard__link:hover,
.jm-inmocard__link:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    outline: none;
    border: 1.5px solid;
    border-image: linear-gradient(135deg,
        rgba(245, 197, 24, 0.75) 0%,
        rgba(255, 224, 130, 0.5) 50%,
        rgba(245, 197, 24, 0.75) 100%) 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 0 0 1px rgba(245, 197, 24, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.55),
        0 10px 24px -14px rgba(240, 196, 25, 0.42),
        0 22px 46px -26px rgba(15, 76, 129, 0.62),
        0 0 0 1px rgba(15, 76, 129, 0.06);
}

/* IMG card: 16:9 arriba + badge sup-izq Proyectos/Usados */

.jm-inmocard__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 1.4rem 0;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow:
        0 0 0 1px rgba(15, 76, 129, 0.08) 0;
    z-index: 1;
}

.jm-inmocard__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jm-c-white, #ffffff);
    background: linear-gradient(145deg, var(--jm-c-primary, #0f4c81) 0%, var(--jm-c-dark-bg-2, #0a2540) 100%);
    box-shadow: 0 4px 10px -4px rgba(10, 27, 46, 0.35),
                0 0 0 1px rgba(245, 197, 24, 0.3);
}

.jm-inmocard__img {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center center;
    transition: transform 520ms cubic-bezier(0.19, 1, 0.22, 1),
                filter 420ms ease;
    will-change: transform;
}

.jm-inmocard__link:hover .jm-inmocard__img {
    transform: scale(1.05);
    filter: saturate(1.05);
}

/* Botón CTA card: Full-Width CTA inferior navy gold degradado (igual jm-cfcard__btn 100% */

.jm-inmocard__btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.22rem 1.7rem 1.22rem 1.85rem;
    border-radius: 14px;
    background: linear-gradient(145deg,
        var(--jm-c-primary, #0f4c81) 0%,
        var(--jm-c-dark-bg-2, #0a2540) 100%);
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    text-decoration: none;
    text-align: left;
    transition:
        transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
        background-image 380ms ease,
        background-color 380ms ease,
        box-shadow 420ms ease,
        color 380ms ease;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1px 0 rgba(0, 0, 0, 0.18) inset;
}

/* Barra superior gold degradado en botón cards CTA */

.jm-inmocard__btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold-200, #ffe082) 20%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #b8860b) 80%,
        transparent 100%);
    box-shadow: 0 0 12px 0 rgba(245, 197, 24, 0.55);
    z-index: 1;
    opacity: 0.9;
}

/* ❌ REGLAS PERMANENTES USER 24-sep:
   NO BRILLO HOVER BOTÓN (display: none !important) +
   NO TEXT-SHADOW label. */

.jm-inmocard__btn::after {
    display: none !important;
}

.jm-inmocard__link:hover .jm-inmocard__btn,
.jm-inmocard__link:focus-visible .jm-inmocard__btn {
    background: linear-gradient(145deg,
        #0a3c66 0%,
        #081a2e 100%);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgba(245, 197, 24, 0.32),
        0 12px 28px -10px rgba(15, 76, 129, 0.55),
        0 0 20px 0 rgba(15, 76, 129, 0.18);
}

.jm-inmocard__btn-label {
    position: relative;
    z-index: 2;
    font-size: clamp(1.08rem, 0.3vw + 1.05rem, 1.18rem);
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    color: var(--jm-c-white, #ffffff);
    flex: 1 1 auto;
    text-align: left;
}

.jm-inmocard__btn-icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 12px;
    background: linear-gradient(145deg,
        rgba(245, 197, 24, 0.22) 0%,
        rgba(245, 197, 24, 0.1) 100%);
    color: var(--jm-c-gold, #f5c518);
    flex-shrink: 0;
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        background-image 380ms ease,
        background-color 380ms ease,
        color 380ms ease,
        box-shadow 380ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(245, 197, 24, 0.25),
        0 1px 4px rgba(245, 197, 24, 0.2);
}

.jm-inmocard__link:hover .jm-inmocard__btn-icon {
    transform: translateX(5px);
    background: linear-gradient(145deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 100%);
    color: var(--jm-c-dark-bg-2, #0a1b2e);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 18px rgba(245, 197, 24, 0.8),
        0 2px 8px rgba(10, 27, 46, 0.22);
}

/* ---------------- 3. SECCIÓN IMAGEN GRANDE + BOTÓN WHATSAPP INMOBILIARIA ---------------- */

.jm-inmo-cta {
    position: relative;
    width: 100%;
    padding: 1.5rem 0 8rem 0;
    margin: 0;
    background:
        radial-gradient(1200px 500px at 50% -10%, rgba(201, 162, 39, 0.07) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fdfbf6 60%, #ffffff 100%);
    overflow: hidden;
}

.jm-inmo-cta__inner {
    position: relative;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2.25rem;
}

.jm-inmo-cta__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    padding: 0;
    border-radius: 22px;
    overflow: hidden;
    border: 2px solid transparent;
    background-image: linear-gradient(#ffffff, #ffffff),
        linear-gradient(135deg,
            rgba(201, 162, 39, 0.45) 0%,
            rgba(15, 76, 129, 0.25) 50%,
            rgba(201, 162, 39, 0.45) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 1px 0 rgba(255, 255, 255, 0.55),
        0 20px 44px -26px rgba(240, 196, 25, 0.35),
        0 28px 52px -30px rgba(15, 76, 129, 0.5),
        0 0 0 1px rgba(15, 76, 129, 0.04);
    isolation: isolate;
}

/* BARRA IZQUIERDA GOLD 4px degradado wrap 100% altura */

.jm-inmo-cta__media::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-500, #d4af37) 50%,
        var(--jm-c-gold-700, #b8860b) 100%);
    box-shadow: 0 0 18px rgba(245, 197, 24, 0.35);
    z-index: 2;
}

.jm-inmo-cta__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    background-color: #ffffff;
    transition: transform 620ms cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform;
    z-index: 1;
}

.jm-inmo-cta__media:hover .jm-inmo-cta__img {
    transform: scale(1.01);
}

/* Botón Conoce Nuestros Inmuebles. Patrón Oficial JM WA Inmobiliaria. */

.jm-inmo-cta__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-width: min(560px, 92vw);
    max-width: 92vw;
    padding: 1.45rem 2.4rem 1.45rem 2.6rem;
    border-radius: 16px;
    background: linear-gradient(145deg,
        var(--jm-c-primary, #0f4c81) 0%,
        var(--jm-c-dark-bg-2, #0a2540) 100%);
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    text-decoration: none;
    transition:
        transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
        background-image 380ms ease,
        background-color 380ms ease,
        box-shadow 420ms ease;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 22px -10px rgba(15, 76, 129, 0.42),
        0 0 34px -10px rgba(15, 76, 129, 0.22);
}

.jm-inmo-cta__btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2.75px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold-200, #ffe082) 20%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #b8860b) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
    z-index: 1;
    opacity: 0.9;
}

/* ❌ PERMANENTE USER 24-sep: NO BRILLO HOVER BOTÓN. NO TEXT-SHADOW LABEL */

.jm-inmo-cta__btn::after { display: none !important; }

.jm-inmo-cta__btn:hover,
.jm-inmo-cta__btn:focus-visible {
    background: linear-gradient(145deg, #0a3c66 0%, #081a2e 100%);
    background-color: #0a3c66;
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgba(245, 197, 24, 0.32),
        0 18px 34px -10px rgba(15, 76, 129, 0.55),
        0 0 30px 0 rgba(15, 76, 129, 0.22);
    text-decoration: none;
    outline: none;
    color: var(--jm-c-white, #ffffff);
}

.jm-inmo-cta__btn-label {
    position: relative;
    z-index: 2;
    font-size: clamp(1.18rem, 0.45vw + 1.1rem, 1.35rem);
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    color: var(--jm-c-white, #ffffff);
    text-align: center;
    flex: 1 1 auto;
}

.jm-inmo-cta__btn-icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(245, 197, 24, 0.22) 0%, rgba(245, 197, 24, 0.1) 100%);
    color: var(--jm-c-gold, #f5c518);
    flex-shrink: 0;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), background-image 380ms ease, background-color 380ms ease, color 380ms ease, box-shadow 380ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(245, 197, 24, 0.25),
        0 1px 4px rgba(245, 197, 24, 0.2);
}

.jm-inmo-cta__btn:hover .jm-inmo-cta__btn-icon,
.jm-inmo-cta__btn:focus-visible .jm-inmo-cta__btn-icon {
    transform: translateX(5px);
    background: linear-gradient(145deg, var(--jm-c-gold, #f5c518) 0%, var(--jm-c-gold-200, #ffe082) 100%);
    color: var(--jm-c-dark-bg-2, #0a1b2e);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 20px rgba(245, 197, 24, 0.8),
        0 2px 10px rgba(10, 27, 46, 0.22);
}

/* ---------------- 4. MEDIA QUERIES (breakpoints standard JM 1199 / 991 / 639) ---------------- */

@media (max-width: 1199px) {
    .jm-inmo-cards { padding: 6.5rem 0 6.75rem 0; }
    .jm-inmo-cards__inner { max-width: 1000px; }
    .jm-inmo-hero { min-height: 70vh; min-height: 70dvh; }
    .jm-inmo-cards__grid { gap: 1.1rem; }
    .jm-inmo-cards__header { padding: 0 0 2.5rem 0; }
    .jm-inmocard__btn { padding: 1.15rem 1.55rem 1.15rem 1.6rem; font-size: 1.1rem; }
    .jm-inmocard__btn-icon { width: 2.5rem; height: 2.5rem; }
    .jm-inmo-cta { padding: 0.25rem 0 7rem 0; }
    .jm-inmo-cta__inner { gap: 2rem; }
    .jm-inmo-cta__btn { min-width: min(520px, 92vw); padding: 1.3rem 2.25rem 1.3rem 2.4rem; font-size: 1.06rem; }
    .jm-inmo-cta__btn-icon { width: 2.75rem; height: 2.75rem; }
}

@media (max-width: 991px) {
    .jm-inmo-cards { padding: 5.75rem 0 6.25rem 0; }
    .jm-inmo-cards__inner { max-width: 820px; }
    .jm-inmo-hero { min-height: 72vh; min-height: 72dvh; }
    .jm-inmo-cards__header { padding: 0 0 2.25rem 0; gap: 1rem; }
    .jm-inmo-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .jm-inmocard__link { padding: 1.25rem; border-radius: 20px; }
    .jm-inmocard__btn { padding: 1.1rem 1.4rem 1.1rem 1.5rem; font-size: 1.06rem; }
    .jm-inmocard__btn-icon { width: 2.4rem; height: 2.4rem; }
    .jm-inmo-cta { padding: 0 0 6.25rem 0; }
    .jm-inmo-cta__inner { gap: 1.85rem; }
    .jm-inmo-cta__btn { min-width: 100%; max-width: 100%; padding: 1.22rem 2rem 1.22rem 2.15rem; font-size: 1.15rem; }
    .jm-inmo-cta__btn-icon { width: 2.6rem; height: 2.6rem; }
}

@media (max-width: 639px) {
    .jm-inmo-cards { padding: 5rem 0 5.5rem 0; }
    .jm-inmo-hero { min-height: 52vh; min-height: 52dvh; }
    .jm-inmo-hero__overlay { background-color: rgba(8, 31, 55, 0.42); }
    .jm-inmo-cards__inner { padding: 0 var(--jm-px, 1.25rem); }
    .jm-inmo-cards__header { padding: 0 0 2rem 0; gap: 0.85rem; margin: 0 0 1.25rem 0; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
    .jm-inmo-cards__pill {
        padding: 0.55rem 1.15rem 0.55rem 1.2rem;
        max-width: 100%;
        min-width: 0;
        width: auto;
        box-sizing: border-box;
    }
    .jm-inmo-cards__pill-title {
        font-size: 0.76rem;
        letter-spacing: 0.095em;
        line-height: 1.42;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        -webkit-hyphens: auto;
        hyphens: auto;
        max-width: 100%;
    }
    .jm-inmo-cards__divider { width: 92px; }
    .jm-inmo-cards__subtitle { font-size: 1rem; line-height: 1.72; }
    .jm-inmo-cards__grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .jm-inmocard__link { padding: 1.1rem; border-radius: 18px; }
    .jm-inmocard__badge { top: 0.75rem; left: 0.75rem; font-size: 0.7rem; padding: 0.4rem 0.85rem; }
    .jm-inmocard__media { border-radius: 12px; margin-bottom: 1.25rem; }
    .jm-inmocard__btn { padding: 1.05rem 1.3rem 1.05rem 1.4rem; font-size: 1.02rem; border-radius: 12px; }
    .jm-inmocard__btn-icon { width: 2.25rem; height: 2.25rem; }
    .jm-inmo-cta { padding: 0 0 5.5rem 0; }
    .jm-inmo-cta__inner { padding: 0 var(--jm-px, 1.25rem); gap: 1.6rem; }
    .jm-inmo-cta__media { aspect-ratio: 4 / 3; border-radius: 18px; }
    .jm-inmo-cta__btn { padding: 1.15rem 1.75rem 1.15rem 1.9rem; font-size: 1.08rem; border-radius: 14px; }
    .jm-inmo-cta__btn-icon { width: 2.5rem; height: 2.5rem; }
}

/* ==========================================================
 *   [ PÁGINA INMUEBLES NUEVOS / PROYECTOS (page-inmuebles-nuevos-proyectos.php) ]
 *   Hija #1 de JM Soluciones Inmobiliaria.
 *   ESTRUCTURA VERBATIM USER:
 *     1. HERO (UNICA SECCIÓN) = 100% ALTO DE PANTALLA (100vh / 100dvh)
 *        Imagen = TRAE/Inmobiliaria/inmobiliaria-inmo-008.webp
 *        SIN TEXTO. SIN H1. SIN divider.
 *     2. DESPUÉS HERO: NADA. SOLO get_footer()
 *   Reglas permanentes: NO brillo hover botones (no hay botones aquí)
 *                       NO text-shadow títulos (no hay).
 *   (Insertado DESPUÉS JM Soluciones Inmobiliaria. Último bloque del archivo.)
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-inmobinenos-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO · reducido móvil · Inmuebles Nuevos / Proyectos ---------------- */

.jm-inmobinenos-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 620px;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
}

.jm-inmobinenos-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-inmo-inmobinenos-hero-008.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
}

/* Overlay navy degradado ELIMINADO VERBATIM USER 25-sep:
   "quita el degradado del hero".
   Ahora 100% transparente en TODOS breakpoints. Imagen 008 SIN capa
   superpuesta visible. */

.jm-inmobinenos-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: transparent;
    mix-blend-mode: normal;
}

/* ---------------- 2. MEDIA QUERIES (solo ajustar altura mínima + overlay más oscuro móvil) ---------------- */

@media (max-width: 1199px) {
    .jm-inmobinenos-hero {
        height: 100vh;
        height: 100dvh;
        min-height: 600px;
    }
}

@media (max-width: 991px) {
    .jm-inmobinenos-hero {
        height: 100vh;
        height: 100dvh;
        min-height: 580px;
    }
}

@media (max-width: 639px) {
    .jm-inmobinenos-hero {
        min-height: 52vh;
        min-height: 52dvh;
    }
    /* Overlay degradado MÓVIL TAMBIÉN ELIMINADO (igual desktop): transparente 100% */
    .jm-inmobinenos-hero__overlay {
        background-color: transparent;
    }
}

/* ==========================================================
 *   [ PÁGINA INMUEBLES USADOS (page-inmuebles-usados.php) ]
 *   Hija #2 de JM Soluciones Inmobiliaria.
 *   ESTRUCTURA 3 BLOQUES VERBATIM USER:
 *     1. HERO SIN TEXTO · img = inmobiliaria-inmo-inmo-003.webp
 *                       jm-inmo-inmousados-hero-003.webp.
 *     2. BOTÓN CENTRADO "¿Qué estás buscando?" → WA directo
 *        phone=573213846182 target _blank.
 *     3. GRID 4x2 8 CARDS · 4 columnas x 2 filas.
 *        FILA 1 (009-012): Apartamentos / Casas / Locales / Oficinas
 *        FILA 2 (013-016): Casa lote / Casa campestre / Apartaestudio / Finca
 *        Cada card: ARRIBA img 16:9 · ABAJO botón slug interno.
 *        Identidad visual cards = 1:1 jm-cfcard Crowdfunding.
 *   Reglas permanentes user 24-sep:
 *     • NO brillo hover botones → ::after display none !important
 *     • NO text-shadow títulos/labels botones.
 *     • Title Case botones.
 *   (Insertado DESPUÉS Inmuebles Nuevos / Proyectos. Último bloque.)
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-inmousados-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO · SIN TEXTO · Inmuebles Usados (70vh / 70dvh) ---------------- */

.jm-inmousados-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
}

.jm-inmousados-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-inmo-inmousados-hero-003.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
}

/* Overlay navy suave 0.32 para mejorar legibilidad del footer (si llegara
   a verse el borde). NO hay texto en el hero → overlay muy ligero. */

.jm-inmousados-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.32);
    mix-blend-mode: normal;
}

/* ---------------- 2. BOTÓN CENTRADO DEBAJO HERO: "¿Qué estás buscando?" WA ---------------- */

.jm-inmousados-cta-busco {
    position: relative;
    width: 100%;
    padding: 4.5rem 0 3.5rem 0;
    margin: 0;
    background:
        radial-gradient(900px 420px at 50% -10%, rgba(201, 162, 39, 0.07) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fdfbf6 55%, #ffffff 100%);
    overflow: hidden;
}

.jm-inmousados-cta-busco__inner {
    position: relative;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

/* Botón Oficial JM navy gold degradado igual CTA WA Inmo General. */

.jm-inmousados-cta-busco__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-width: min(640px, 92vw);
    max-width: 92vw;
    padding: 1.5rem 2.6rem 1.5rem 2.85rem;
    border-radius: 18px;
    background: linear-gradient(145deg,
        var(--jm-c-primary, #0f4c81) 0%,
        var(--jm-c-dark-bg-2, #0a2540) 100%);
    background-color: var(--jm-c-primary, #0f4c81);
    color: var(--jm-c-white, #ffffff);
    text-decoration: none;
    transition:
        transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
        background-image 380ms ease,
        background-color 380ms ease,
        box-shadow 420ms ease;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 28px -12px rgba(15, 76, 129, 0.45),
        0 0 40px -12px rgba(15, 76, 129, 0.22);
}

/* Barra gold degradado glow superior estilo JM Oficial */

.jm-inmousados-cta-busco__btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2.75px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold-200, #ffe082) 20%,
        var(--jm-c-gold, #f5c518) 50%,
        var(--jm-c-gold-700, #b8860b) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
    z-index: 1;
    opacity: 0.9;
}

/* ❌ REGLAS PERMANENTES USER 24-sep: NO BRILLO + NO TEXT-SHADOW */

.jm-inmousados-cta-busco__btn::after { display: none !important; }

.jm-inmousados-cta-busco__btn:hover,
.jm-inmousados-cta-busco__btn:focus-visible {
    background: linear-gradient(145deg, #0a3c66 0%, #081a2e 100%);
    background-color: #0a3c66;
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgba(245, 197, 24, 0.32),
        0 20px 40px -12px rgba(15, 76, 129, 0.55),
        0 0 34px 0 rgba(15, 76, 129, 0.22);
    text-decoration: none;
    outline: none;
    color: var(--jm-c-white, #ffffff);
}

.jm-inmousados-cta-busco__btn-label {
    position: relative;
    z-index: 2;
    font-size: clamp(1.22rem, 0.55vw + 1.12rem, 1.5rem);
    line-height: 1.32;
    font-weight: 800;
    letter-spacing: 0.035em;
    color: var(--jm-c-white, #ffffff);
    text-align: center;
    flex: 1 1 auto;
}

.jm-inmousados-cta-busco__btn-icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.05rem;
    height: 3.05rem;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(245, 197, 24, 0.22) 0%, rgba(245, 197, 24, 0.1) 100%);
    color: var(--jm-c-gold, #f5c518);
    flex-shrink: 0;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), background-image 380ms ease, background-color 380ms ease, color 380ms ease, box-shadow 380ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(245, 197, 24, 0.25),
        0 1px 4px rgba(245, 197, 24, 0.2);
}

.jm-inmousados-cta-busco__btn:hover .jm-inmousados-cta-busco__btn-icon,
.jm-inmousados-cta-busco__btn:focus-visible .jm-inmousados-cta-busco__btn-icon {
    transform: translateX(5px);
    background: linear-gradient(145deg, var(--jm-c-gold, #f5c518) 0%, var(--jm-c-gold-200, #ffe082) 100%);
    color: var(--jm-c-dark-bg-2, #0a1b2e);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 20px rgba(245, 197, 24, 0.8),
        0 2px 10px rgba(10, 27, 46, 0.22);
}

/* ---------------- 3. GRID 4×2 8 CARDS POR TIPO INMUEBLE (jm-inmousacard = clon visual 1:1 jm-cfcard) ---------------- */

.jm-inmousados-tipos {
    position: relative;
    width: 100%;
    padding: 1.5rem 0 7.75rem 0;
    margin: 0;
    background:
        radial-gradient(1200px 500px at 10% -10%, rgba(201, 162, 39, 0.08) 0%, transparent 60%),
        radial-gradient(900px 450px at 100% 110%, rgba(10, 37, 64, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fdfbf6 55%, #ffffff 100%);
    overflow: hidden;
}

.jm-inmousados-tipos__inner {
    position: relative;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
}

.jm-inmousados-tipos__header {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.35rem;
    padding: 0 0 2.75rem 0;
    margin: 0 0 1.5rem 0;
}

.jm-inmousados-tipos__pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
    padding: 0.6rem 1.3rem 0.6rem 1.35rem;
    border-radius: 999px;
    background: linear-gradient(145deg, var(--jm-c-primary, #0f4c81) 0%, var(--jm-c-dark-bg-2, #0a2540) 100%);
    background-color: var(--jm-c-primary, #0f4c81);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 0 1px rgba(245, 197, 24, 0.22),
        0 6px 16px -6px rgba(15, 76, 129, 0.4),
        0 14px 32px -16px rgba(10, 27, 46, 0.3);
    overflow: visible;
    isolation: isolate;
}

.jm-inmousados-tipos__pill-title {
    margin: 0;
    padding: 0;
    font-size: clamp(0.82rem, 0.25vw + 0.82rem, 0.92rem);
    line-height: 1.48;
    font-weight: 650;
    letter-spacing: 0.11em;
    color: var(--jm-c-white, #ffffff);
    text-align: left;
    text-transform: uppercase;
    text-wrap: balance;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    max-width: 100%;
}

.jm-inmousados-tipos__subtitle {
    margin: 0;
    padding: 0;
    max-width: 1020px;
    font-size: clamp(1rem, 0.25vw + 0.95rem, 1.12rem);
    line-height: 1.78;
    font-weight: 400;
    color: var(--jm-c-navy-gray-600, #4b5b74);
    text-align: left;
    letter-spacing: 0.002em;
}

.jm-inmousados-tipos__divider {
    display: block;
    width: 112px;
    height: 3.2px;
    margin: 0 0 0.3rem 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.42);
}

/* Grid 4×2 desktop: 4 columnas x 2 filas */

.jm-inmousados-tipos__grid {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
    justify-items: stretch;
}

/* ---------------- 3. CARDS CLICKEABLES (8 unidades · 4x2) 1:1 IDÉNTICAS jm-cfcard Crowdfunding ---------------- */

/* =====================================================
 * VERBATIM USER "usa el diseño que hicimos en las cards
 * de la página crowdfunding".
 * TODOS los selectores .jm-inmousacard-* son una copia
 * PROPIEDAD-POR-PROPIEDAD del bloque jm-cfcard (L18489-
 * L18733). Cambiados solo nombres clase. Hover trigger en
 * ARTICLE outer .jm-inmousacard:hover (igual .jm-cfcard:hover).
 * NO tocar: valores, unidades, orden, colores, sombras.
 * Reglas permanentes user 24-sep respetadas:
 *   • __btn::after display none (sin brillo amarillo).
 *   • No hay text-shadow en TÍTULOS/PÍLDORA/SUBTÍTULO.
 *   • Pero __btn-label SI text-shadow 2 capas (IGUAL
 *     jm-cfcard__btn-label L18692-L18694. User lo aprobó
 *     en Crowdfunding, solo prohibió text-shadow en
 *     títulos principales h2 pill/subtitle).
 * ===================================================== */

.jm-inmousacard {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border: 2px solid var(--jm-c-primary-100, rgba(15, 76, 129, 0.22));
    border-radius: 14px;
    overflow: hidden;
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 300ms ease,
        box-shadow 420ms ease,
        background-color 300ms ease;
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 0 0 1px rgba(245, 197, 24, 0.05),
        0 6px 14px rgba(15, 76, 129, 0.1),
        0 14px 28px rgba(15, 76, 129, 0.09),
        0 28px 55px rgba(10, 27, 46, 0.12),
        0 4px 0 rgba(15, 76, 129, 0.06);
}

/* Barra gold izquierda patrón JM (igual jm-cfcard::before) */
.jm-inmousacard::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 100%);
    z-index: 2;
    box-shadow: 1px 0 10px rgba(245, 197, 24, 0.45);
}

.jm-inmousacard:hover {
    transform: translateY(-6px);
    border-color: var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 0 0 2px rgba(245, 197, 24, 0.35),
        0 8px 20px rgba(245, 197, 24, 0.1),
        0 18px 38px rgba(15, 76, 129, 0.12),
        0 32px 65px rgba(10, 27, 46, 0.14),
        0 6px 0 rgba(245, 197, 24, 0.08);
}

.jm-inmousacard__link {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    padding: 0 0 0 0;
    gap: 0;
    z-index: 1;
}

/* --- Imagen card 16:9 · SIN MARCO · 100% ANCHO card · radius SUPERIOR 14px (igual jm-cfcard__media) --- */

.jm-inmousacard__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    padding: 0;
    border-radius: 14px 14px 0 0;
    background-color: #ffffff;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 0 0 1px rgba(15, 76, 129, 0.12) inset;
}

/* Barra gold izquierda DENTRO de la imagen (superior izquierda)
   Igual jm-cfcard__media::before L18570-L18583. */
.jm-inmousacard__media::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 100%);
    z-index: 2;
    box-shadow: 1px 0 8px rgba(245, 197, 24, 0.45);
}

.jm-inmousacard__img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 14px 14px 0 0;
    filter: saturate(1.03);
    transition:
        transform 650ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 400ms ease,
        opacity 400ms ease;
}

.jm-inmousacard:hover .jm-inmousacard__img {
    transform: scale(1.04);
    filter: saturate(1.18) contrast(1.03);
}

/* --- Botón inferior CTA FULL WIDTH 100% · radius INFERIOR 14px · 1:1 jm-cfcard__btn --- */

.jm-inmousacard__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 0 0;
    padding: 1.25rem 1.7rem 1.25rem 1.75rem;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(145deg,
        var(--jm-c-primary, #0f4c81) 0%,
        var(--jm-c-primary-600, #0d406d) 45%,
        var(--jm-c-primary-700, #0a2540) 100%);
    color: var(--jm-c-white, #ffffff);
    font-size: 1.18rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.015em;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        background-image 450ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 450ms ease,
        color 400ms ease,
        transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1),
        border-top-color 350ms ease;
    border-top: 2.5px solid var(--jm-c-gold, #f5c518);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 -6px 18px rgba(10, 27, 46, 0.32),
        0 3px 8px rgba(10, 27, 46, 0.25),
        0 8px 18px rgba(15, 76, 129, 0.3),
        0 16px 34px rgba(10, 27, 46, 0.22);
}

/* Borde superior degradado gold · separador visual IMAGEN → BOTÓN
   Igual jm-cfcard__btn::before L18646-L18661. */
.jm-inmousacard__btn::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2.5px;
    height: 2.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 12%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 88%,
        transparent 100%);
    z-index: 2;
    box-shadow: 0 0 12px rgba(245, 197, 24, 0.55);
}

/* ❌ Fondo gold hover BONITO 3-capas (brillo) · DESHABILITADO
   PERMANENTEMENTE x user 24-sep no le gusta.
   Igual jm-cfcard__btn::after L18664-L18666. */
.jm-inmousacard__btn::after {
    display: none !important;
}

.jm-inmousacard:hover .jm-inmousacard__btn {
    background: linear-gradient(145deg,
        var(--jm-c-primary-700, #0a2540) 0%,
        var(--jm-c-primary, #0f4c81) 50%,
        var(--jm-c-dark-bg, #061421) 100%);
    border-top-color: var(--jm-c-gold-200, #ffe082);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 0 0 1px rgba(245, 197, 24, 0.35),
        0 -8px 22px rgba(10, 27, 46, 0.38),
        0 5px 14px rgba(10, 27, 46, 0.3),
        0 12px 28px rgba(15, 76, 129, 0.32),
        0 22px 48px rgba(10, 27, 46, 0.25);
}

/* Label botón = text-shadow 2 capas (IGUAL jm-cfcard. Aprobado por user en Crowdfunding.
   Únicamente los TÍTULOS PRINCIPALES tienen prohibido text-shadow user 24-sep). */
.jm-inmousacard__btn-label {
    position: relative;
    z-index: 1;
    padding-left: 0.55rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.25),
        0 1px 3px rgba(10, 27, 46, 0.35);
}

.jm-inmousacard__btn-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 12px;
    background: linear-gradient(145deg,
        rgba(245, 197, 24, 0.22) 0%,
        rgba(245, 197, 24, 0.1) 100%);
    color: var(--jm-c-gold, #f5c518);
    flex-shrink: 0;
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        background-image 380ms ease,
        background-color 380ms ease,
        color 380ms ease,
        box-shadow 380ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(245, 197, 24, 0.25),
        0 1px 4px rgba(245, 197, 24, 0.2);
}

.jm-inmousacard:hover .jm-inmousacard__btn-icon {
    transform: translateX(5px);
    background: linear-gradient(145deg,
        var(--jm-c-gold, #f5c518) 0%,
        var(--jm-c-gold-200, #ffe082) 100%);
    color: var(--jm-c-dark-bg-2, #0a1b2e);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 18px rgba(245, 197, 24, 0.8),
        0 2px 8px rgba(10, 27, 46, 0.22);
}

/* ---------------- 4. MEDIA QUERIES breakpoints JM estándar ---------------- */

@media (max-width: 1199px) {
    .jm-inmousados-hero {
        min-height: 70vh;
        min-height: 70dvh;
    }
    .jm-inmousados-cta-busco { padding: 4rem 0 3rem 0; }
    .jm-inmousados-cta-busco__btn { min-width: min(580px, 92vw); padding: 1.35rem 2.35rem 1.35rem 2.5rem; }
    .jm-inmousados-cta-busco__btn-label { font-size: clamp(1.1rem, 0.5vw + 1.02rem, 1.3rem); }
    .jm-inmousados-cta-busco__btn-icon { width: 2.85rem; height: 2.85rem; }
    .jm-inmousados-tipos { padding: 0.5rem 0 7rem 0; }
    .jm-inmousados-tipos__inner { max-width: 1000px; }
    .jm-inmousados-tipos__grid { gap: 1.1rem; }
    .jm-inmousados-tipos__header { padding: 0 0 2.5rem 0; }
    .jm-inmousacard__btn {
        width: 100%;
        padding: 1.15rem 1.55rem 1.15rem 1.6rem;
        font-size: 1.1rem;
    }
    .jm-inmousacard__btn-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (max-width: 991px) {
    .jm-inmousados-hero {
        min-height: 72vh;
        min-height: 72dvh;
    }
    .jm-inmousados-cta-busco { padding: 3.5rem 0 2.75rem 0; }
    .jm-inmousados-cta-busco__btn { min-width: 100%; max-width: 100%; padding: 1.25rem 2.1rem 1.25rem 2.25rem; }
    .jm-inmousados-cta-busco__btn-label { font-size: clamp(1.08rem, 0.5vw + 1.02rem, 1.22rem); }
    .jm-inmousados-cta-busco__btn-icon { width: 2.7rem; height: 2.7rem; }
    .jm-inmousados-tipos { padding: 0 0 6.25rem 0; }
    .jm-inmousados-tipos__inner { max-width: 820px; }
    .jm-inmousados-tipos__header { padding: 0 0 2.25rem 0; gap: 1rem; }
    .jm-inmousados-tipos__grid {
        /* Tablet: 4 cols → 2 columnas x 4 filas */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
    .jm-inmousacard__btn {
        width: 100%;
        padding: 1.1rem 1.4rem 1.1rem 1.5rem;
        font-size: 1.06rem;
    }
    .jm-inmousacard__btn-icon {
        width: 2.4rem;
        height: 2.4rem;
    }
}

@media (max-width: 639px) {
    .jm-inmousados-hero {
        min-height: 52vh;
        min-height: 52dvh;
    }
    .jm-inmousados-hero__overlay { background-color: rgba(8, 31, 55, 0.42); }
    .jm-inmousados-cta-busco { padding: 3rem 0 2.5rem 0; }
    .jm-inmousados-cta-busco__inner { padding: 0 var(--jm-px, 1.25rem); }
    .jm-inmousados-cta-busco__btn { padding: 1.18rem 1.9rem 1.18rem 2.05rem; border-radius: 16px; }
    .jm-inmousados-cta-busco__btn-label { font-size: clamp(1.05rem, 4.5vw + 1rem, 1.28rem); }
    .jm-inmousados-cta-busco__btn-icon { width: 2.6rem; height: 2.6rem; }
    .jm-inmousados-tipos { padding: 0 0 5.5rem 0; }
    .jm-inmousados-tipos__inner { padding: 0 var(--jm-px, 1.25rem); }
    .jm-inmousados-tipos__header { padding: 0 0 2rem 0; gap: 0.85rem; margin: 0 0 1.25rem 0; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
    .jm-inmousados-tipos__pill {
        padding: 0.55rem 1.15rem 0.55rem 1.2rem;
        max-width: 100%;
        min-width: 0;
        width: auto;
        box-sizing: border-box;
    }
    .jm-inmousados-tipos__pill-title {
        font-size: 0.76rem;
        letter-spacing: 0.095em;
        line-height: 1.42;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        -webkit-hyphens: auto;
        hyphens: auto;
        max-width: 100%;
    }
    .jm-inmousados-tipos__divider { width: 92px; }
    .jm-inmousados-tipos__subtitle { font-size: 1rem; line-height: 1.72; }
    .jm-inmousados-tipos__grid {
        /* Móvil: 1 columna stack · 8 filas individuales */
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9rem;
    }
    .jm-inmousacard__btn {
        width: 100%;
        padding: 1.1rem 1.35rem 1.1rem 1.45rem;
        font-size: 1.12rem;
    }
    .jm-inmousacard__btn-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* ==========================================================
 *   [ PÁGINA APARTAMENTOS (page-apartamentos.php) ]
 *   Página hija #1 de 8 de Inmuebles Usados / JM Inmobiliaria.
 *   CLON 1:1 page-contadores.php · Patrón Hero Subastas hijas.
 *   TODAS las 8 páginas internas Inmobiliaria (Casas / Locales /
 *   Oficinas / Casa lote / Casa campestre / Apartaestudio / Finca)
 *   MANTIENEN MISMO CSS. Cambian nombre slug y texto H1.
 *   Imagen hero = jm-inmo-apartamentos-hero-017.webp (inmo-017).
 *   H1 = "Apartamentos" · uppercase 900 · text-shadow 3 capas
 *   (EXCEPCIÓN PERMANENTE APROBADA USER 24-sep para H1 HEROES).
 *   Decoraciones patrón JM:
 *     • Overlay navy 0.38 desktop / 0.42 ≤639.
 *     • 2 barras gold vertical izq/der 14% altura · 2.25% ancho.
 *     • Divider gold 96px degradado glow DEBAJO H1.
 *     • Barras ocultas ≤639.
 *   Altura: min-height 70vh / 72vh ≤991 / 76vh ≤639.
 *   POSICIÓN: AL FINAL style.css DESPUÉS Inmuebles Usados.
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-apartamentos-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO Apartamentos · clon 1:1 .jm-contadores-hero ---------------- */

.jm-apartamentos-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen hero: inmobiliaria-inmo-017.webp · misma que hero padre JM Inmobiliaria
   (en page-jm-soluciones-inmobiliaria.php). Pero cada página hija tiene su
   propio archivo nomenclatura JM para cache correcto WP. */
.jm-apartamentos-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-inmo-apartamentos-hero-017.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay navy suave · igual Contadores/Abogados (0.38) para legibilidad H1 blanco */
.jm-apartamentos-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.38);
    mix-blend-mode: normal;
}

/* 2 Barras gold decorativas verticales · igual Contadores 14% alto · 2.25% ancho
   degradado 180deg gold transparent transparente + glow 10px rgba(245,197,24,0.6) */
.jm-apartamentos-hero__accent-left,
.jm-apartamentos-hero__accent-right {
    position: absolute;
    top: 14%;
    bottom: 14%;
    width: 3.5px;
    z-index: 2;
    border-radius: 4px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.6);
}

.jm-apartamentos-hero__accent-left  { left:  2.25%; }
.jm-apartamentos-hero__accent-right { right: 2.25%; }

/* Contenedor texto Hero · max-width var(--jm-rw 1320px) centrado · flex-col gap 1.5rem */
.jm-apartamentos-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

/* H1 = "Apartamentos" · EXACTO clamp jm-contadores-hero__title
   weight 900 uppercase · letter-spacing 0.035em
   ⚠️ text-shadow 3 capas MANTENIDO (EXCEPCIÓN PERMANENTE USER 24-sep
   sólo H1 heroes 23-sep+. NO aplica a títulos NO heroes.) */
.jm-apartamentos-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.25);
}

/* Divider gold DEBAJO H1 · degradado 90deg glow 14px · width 96px */
.jm-apartamentos-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

/* ---------------- 2. MEDIA QUERIES · exactos jm-contadores-hero ---------------- */

@media (max-width: 1199px) {
    .jm-apartamentos-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-apartamentos-hero__inner {
        max-width: 1000px;
        gap: 1.25rem;
    }
    .jm-apartamentos-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-apartamentos-hero__divider {
        width: 84px;
        height: 3px;
    }
    .jm-apartamentos-hero__accent-left,
    .jm-apartamentos-hero__accent-right {
        top: 15%;
        bottom: 15%;
        width: 3px;
    }
    .jm-apartamentos-hero__accent-left  { left:  1.75%; }
    .jm-apartamentos-hero__accent-right { right: 1.75%; }
}

@media (max-width: 991px) {
    .jm-apartamentos-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-apartamentos-hero__inner {
        max-width: 820px;
        gap: 1.1rem;
    }
    .jm-apartamentos-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.028em;
    }
    .jm-apartamentos-hero__divider {
        width: 72px;
        height: 3px;
    }
    .jm-apartamentos-hero__accent-left,
    .jm-apartamentos-hero__accent-right {
        top: 16%;
        bottom: 16%;
        width: 3px;
    }
    .jm-apartamentos-hero__accent-left  { left:  1.25%; }
    .jm-apartamentos-hero__accent-right { right: 1.25%; }
}

@media (max-width: 639px) {
    .jm-apartamentos-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-apartamentos-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-apartamentos-hero__overlay { background-color: rgba(8, 31, 55, 0.42); }
    .jm-apartamentos-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.28);
    }
    .jm-apartamentos-hero__divider {
        width: 60px;
        height: 3px;
    }
    .jm-apartamentos-hero__accent-left,
    .jm-apartamentos-hero__accent-right {
        display: none;
    }
}

/* ==========================================================
 *   [ PÁGINA CASAS (page-casas.php) ]
 *   Página hija #2 de 8 de Inmuebles Usados / JM Inmobiliaria.
 *   CLON 1:1 page-apartamentos.php / page-contadores.php.
 *   Mismo patrón Hero Subastas hijas profesionales.
 *   Imagen hero = jm-inmo-casas-hero-017.webp (misma inmo-017).
 *   H1 = "Casas" · uppercase 900 · text-shadow 3 capas hero.
 *   Decoraciones exactas Apartamentos / Contadores.
 *   Posición CSS: AL FINAL DESPUÉS Apartamentos (inmediato).
 * ========================================================== */

/* ---------------- 0. MAIN ---------------- */

.jm-casas-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* ---------------- 1. HERO Casas · clon 1:1 jm-apartamentos-hero / jm-contadores-hero ---------------- */

.jm-casas-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen hero: inmo-017 · archivo propio nomenclatura JM por caché */
.jm-casas-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-inmo-casas-hero-017.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

/* Overlay navy 0.38 igual heroes estándar JM para legibilidad H1 blanco */
.jm-casas-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.38);
    mix-blend-mode: normal;
}

/* 2 Barras gold verticales 14% alto · 2.25% ancho · degradado glow */
.jm-casas-hero__accent-left,
.jm-casas-hero__accent-right {
    position: absolute;
    top: 14%;
    bottom: 14%;
    width: 3.5px;
    z-index: 2;
    border-radius: 4px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.6);
}

.jm-casas-hero__accent-left  { left:  2.25%; }
.jm-casas-hero__accent-right { right: 2.25%; }

/* Contenedor texto centrado · max-width 1320px var(--jm-rw) · gap 1.5rem */
.jm-casas-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

/* H1 "Casas" · clamp weight 900 uppercase · text-shadow 3 capas EXCEPCIÓN H1 HERO user 24-sep */
.jm-casas-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.25);
}

/* Divider gold 96px glow DEBAJO H1 · degradado 90deg */
.jm-casas-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

/* ---------------- 2. MEDIA QUERIES · exactos Apartamentos / Contadores ---------------- */

@media (max-width: 1199px) {
    .jm-casas-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-casas-hero__inner {
        max-width: 1000px;
        gap: 1.25rem;
    }
    .jm-casas-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-casas-hero__divider {
        width: 84px;
        height: 3px;
    }
    .jm-casas-hero__accent-left,
    .jm-casas-hero__accent-right {
        top: 15%;
        bottom: 15%;
        width: 3px;
    }
    .jm-casas-hero__accent-left  { left:  1.75%; }
    .jm-casas-hero__accent-right { right: 1.75%; }
}

@media (max-width: 991px) {
    .jm-casas-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-casas-hero__inner {
        max-width: 820px;
        gap: 1.1rem;
    }
    .jm-casas-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.028em;
    }
    .jm-casas-hero__divider {
        width: 72px;
        height: 3px;
    }
    .jm-casas-hero__accent-left,
    .jm-casas-hero__accent-right {
        top: 16%;
        bottom: 16%;
        width: 3px;
    }
    .jm-casas-hero__accent-left  { left:  1.25%; }
    .jm-casas-hero__accent-right { right: 1.25%; }
}

@media (max-width: 639px) {
    .jm-casas-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-casas-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-casas-hero__overlay { background-color: rgba(8, 31, 55, 0.42); }
    .jm-casas-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.28);
    }
    .jm-casas-hero__divider {
        width: 60px;
        height: 3px;
    }
    .jm-casas-hero__accent-left,
    .jm-casas-hero__accent-right {
        display: none;
    }
}

/* ==========================================================
 *   [ PÁGINA LOCALES COMERCIALES (page-locales-comerciales.php) ]
 *   Página hija #3 de 8 de Inmuebles Usados / JM Inmobiliaria.
 *   CLON 1:1 page-apartamentos.php / page-casas.php / page-contadores.php.
 *   Imagen hero = jm-inmo-localescomerciales-hero-017.webp (inmo-017).
 *   H1 = "Locales Comerciales" · uppercase 900 · text-shadow 3 capas hero.
 *   Posición CSS: AL FINAL DESPUÉS Casas (inmediato).
 * ========================================================== */

.jm-localescomerciales-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

.jm-localescomerciales-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jm-localescomerciales-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-inmo-localescomerciales-hero-017.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

.jm-localescomerciales-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.38);
    mix-blend-mode: normal;
}

.jm-localescomerciales-hero__accent-left,
.jm-localescomerciales-hero__accent-right {
    position: absolute;
    top: 14%;
    bottom: 14%;
    width: 3.5px;
    z-index: 2;
    border-radius: 4px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.6);
}

.jm-localescomerciales-hero__accent-left  { left:  2.25%; }
.jm-localescomerciales-hero__accent-right { right: 2.25%; }

.jm-localescomerciales-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

.jm-localescomerciales-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.25);
}

.jm-localescomerciales-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

@media (max-width: 1199px) {
    .jm-localescomerciales-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-localescomerciales-hero__inner {
        max-width: 1000px;
        gap: 1.25rem;
    }
    .jm-localescomerciales-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-localescomerciales-hero__divider {
        width: 84px;
        height: 3px;
    }
    .jm-localescomerciales-hero__accent-left,
    .jm-localescomerciales-hero__accent-right {
        top: 15%;
        bottom: 15%;
        width: 3px;
    }
    .jm-localescomerciales-hero__accent-left  { left:  1.75%; }
    .jm-localescomerciales-hero__accent-right { right: 1.75%; }
}

@media (max-width: 991px) {
    .jm-localescomerciales-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-localescomerciales-hero__inner {
        max-width: 820px;
        gap: 1.1rem;
    }
    .jm-localescomerciales-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.028em;
    }
    .jm-localescomerciales-hero__divider {
        width: 72px;
        height: 3px;
    }
    .jm-localescomerciales-hero__accent-left,
    .jm-localescomerciales-hero__accent-right {
        top: 16%;
        bottom: 16%;
        width: 3px;
    }
    .jm-localescomerciales-hero__accent-left  { left:  1.25%; }
    .jm-localescomerciales-hero__accent-right { right: 1.25%; }
}

@media (max-width: 639px) {
    .jm-localescomerciales-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-localescomerciales-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-localescomerciales-hero__overlay { background-color: rgba(8, 31, 55, 0.42); }
    .jm-localescomerciales-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.28);
    }
    .jm-localescomerciales-hero__divider {
        width: 60px;
        height: 3px;
    }
    .jm-localescomerciales-hero__accent-left,
    .jm-localescomerciales-hero__accent-right {
        display: none;
    }
}

/* ==========================================================
 *   [ PÁGINA OFICINAS (page-oficinas.php) ]
 *   Página hija #4 de 8 de Inmuebles Usados / JM Inmobiliaria.
 *   CLON 1:1 page-apartamentos.php / page-casas.php / page-contadores.php.
 *   Imagen hero = jm-inmo-oficinas-hero-017.webp (inmo-017).
 *   H1 = "Oficinas" · uppercase 900 · text-shadow 3 capas hero.
 *   Posición CSS: AL FINAL DESPUÉS Locales Comerciales.
 * ========================================================== */

.jm-oficinas-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

.jm-oficinas-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jm-oficinas-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-inmo-oficinas-hero-017.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

.jm-oficinas-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.38);
    mix-blend-mode: normal;
}

.jm-oficinas-hero__accent-left,
.jm-oficinas-hero__accent-right {
    position: absolute;
    top: 14%;
    bottom: 14%;
    width: 3.5px;
    z-index: 2;
    border-radius: 4px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.6);
}

.jm-oficinas-hero__accent-left  { left:  2.25%; }
.jm-oficinas-hero__accent-right { right: 2.25%; }

.jm-oficinas-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

.jm-oficinas-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.25);
}

.jm-oficinas-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

@media (max-width: 1199px) {
    .jm-oficinas-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-oficinas-hero__inner {
        max-width: 1000px;
        gap: 1.25rem;
    }
    .jm-oficinas-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-oficinas-hero__divider {
        width: 84px;
        height: 3px;
    }
    .jm-oficinas-hero__accent-left,
    .jm-oficinas-hero__accent-right {
        top: 15%;
        bottom: 15%;
        width: 3px;
    }
    .jm-oficinas-hero__accent-left  { left:  1.75%; }
    .jm-oficinas-hero__accent-right { right: 1.75%; }
}

@media (max-width: 991px) {
    .jm-oficinas-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-oficinas-hero__inner {
        max-width: 820px;
        gap: 1.1rem;
    }
    .jm-oficinas-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.028em;
    }
    .jm-oficinas-hero__divider {
        width: 72px;
        height: 3px;
    }
    .jm-oficinas-hero__accent-left,
    .jm-oficinas-hero__accent-right {
        top: 16%;
        bottom: 16%;
        width: 3px;
    }
    .jm-oficinas-hero__accent-left  { left:  1.25%; }
    .jm-oficinas-hero__accent-right { right: 1.25%; }
}

@media (max-width: 639px) {
    .jm-oficinas-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-oficinas-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-oficinas-hero__overlay { background-color: rgba(8, 31, 55, 0.42); }
    .jm-oficinas-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.28);
    }
    .jm-oficinas-hero__divider {
        width: 60px;
        height: 3px;
    }
    .jm-oficinas-hero__accent-left,
    .jm-oficinas-hero__accent-right {
        display: none;
    }
}

/* ==========================================================
 *   [ PÁGINA CASA LOTE (page-casa-lote.php) ]
 *   Página hija #5 de 8 de Inmuebles Usados / JM Inmobiliaria.
 *   CLON 1:1 page-apartamentos.php / page-oficinas.php.
 *   ⚠️ IMAGEN HERO DIFERENTE (user 25-sep): inmo-003 (NO inmo-017).
 *      Usado por últimas 4 hijas: Casa Lote / Casa Campestre /
 *      Apartaestudio / Finca.
 *   H1 = "Casa Lote" · uppercase 900 · text-shadow 3 capas hero.
 *   Posición CSS: AL FINAL DESPUÉS Oficinas.
 * ========================================================== */

.jm-casalote-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

.jm-casalote-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ⚠️ Imagen hero = INMO-003 · asignada por user a últimas 4 hijas */
.jm-casalote-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-inmo-casalote-hero-003.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

.jm-casalote-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.38);
    mix-blend-mode: normal;
}

.jm-casalote-hero__accent-left,
.jm-casalote-hero__accent-right {
    position: absolute;
    top: 14%;
    bottom: 14%;
    width: 3.5px;
    z-index: 2;
    border-radius: 4px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.6);
}

.jm-casalote-hero__accent-left  { left:  2.25%; }
.jm-casalote-hero__accent-right { right: 2.25%; }

.jm-casalote-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

.jm-casalote-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.25);
}

.jm-casalote-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

@media (max-width: 1199px) {
    .jm-casalote-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-casalote-hero__inner {
        max-width: 1000px;
        gap: 1.25rem;
    }
    .jm-casalote-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-casalote-hero__divider {
        width: 84px;
        height: 3px;
    }
    .jm-casalote-hero__accent-left,
    .jm-casalote-hero__accent-right {
        top: 15%;
        bottom: 15%;
        width: 3px;
    }
    .jm-casalote-hero__accent-left  { left:  1.75%; }
    .jm-casalote-hero__accent-right { right: 1.75%; }
}

@media (max-width: 991px) {
    .jm-casalote-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-casalote-hero__inner {
        max-width: 820px;
        gap: 1.1rem;
    }
    .jm-casalote-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.028em;
    }
    .jm-casalote-hero__divider {
        width: 72px;
        height: 3px;
    }
    .jm-casalote-hero__accent-left,
    .jm-casalote-hero__accent-right {
        top: 16%;
        bottom: 16%;
        width: 3px;
    }
    .jm-casalote-hero__accent-left  { left:  1.25%; }
    .jm-casalote-hero__accent-right { right: 1.25%; }
}

@media (max-width: 639px) {
    .jm-casalote-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-casalote-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-casalote-hero__overlay { background-color: rgba(8, 31, 55, 0.42); }
    .jm-casalote-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.28);
    }
    .jm-casalote-hero__divider {
        width: 60px;
        height: 3px;
    }
    .jm-casalote-hero__accent-left,
    .jm-casalote-hero__accent-right {
        display: none;
    }
}

/* ==========================================================
 *   [ PÁGINA CASA CAMPESTRE (page-casa-campestre.php) ]
 *   Página hija #6 de 8 de Inmuebles Usados / JM Inmobiliaria.
 *   CLON 1:1 page-casa-lote.php / page-apartamentos.php.
 *   Imagen hero = INMO-003 (últimas 4 hijas · mismo que Casa Lote).
 *   H1 = "Casa Campestre" · uppercase 900 · text-shadow 3 capas hero.
 *   Posición CSS: AL FINAL DESPUÉS Casa Lote.
 * ========================================================== */

.jm-casacampestre-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

.jm-casacampestre-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jm-casacampestre-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-inmo-casacampestre-hero-003.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

.jm-casacampestre-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.38);
    mix-blend-mode: normal;
}

.jm-casacampestre-hero__accent-left,
.jm-casacampestre-hero__accent-right {
    position: absolute;
    top: 14%;
    bottom: 14%;
    width: 3.5px;
    z-index: 2;
    border-radius: 4px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.6);
}

.jm-casacampestre-hero__accent-left  { left:  2.25%; }
.jm-casacampestre-hero__accent-right { right: 2.25%; }

.jm-casacampestre-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

.jm-casacampestre-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.25);
}

.jm-casacampestre-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

@media (max-width: 1199px) {
    .jm-casacampestre-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-casacampestre-hero__inner {
        max-width: 1000px;
        gap: 1.25rem;
    }
    .jm-casacampestre-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-casacampestre-hero__divider {
        width: 84px;
        height: 3px;
    }
    .jm-casacampestre-hero__accent-left,
    .jm-casacampestre-hero__accent-right {
        top: 15%;
        bottom: 15%;
        width: 3px;
    }
    .jm-casacampestre-hero__accent-left  { left:  1.75%; }
    .jm-casacampestre-hero__accent-right { right: 1.75%; }
}

@media (max-width: 991px) {
    .jm-casacampestre-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-casacampestre-hero__inner {
        max-width: 820px;
        gap: 1.1rem;
    }
    .jm-casacampestre-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.028em;
    }
    .jm-casacampestre-hero__divider {
        width: 72px;
        height: 3px;
    }
    .jm-casacampestre-hero__accent-left,
    .jm-casacampestre-hero__accent-right {
        top: 16%;
        bottom: 16%;
        width: 3px;
    }
    .jm-casacampestre-hero__accent-left  { left:  1.25%; }
    .jm-casacampestre-hero__accent-right { right: 1.25%; }
}

@media (max-width: 639px) {
    .jm-casacampestre-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-casacampestre-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-casacampestre-hero__overlay { background-color: rgba(8, 31, 55, 0.42); }
    .jm-casacampestre-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.28);
    }
    .jm-casacampestre-hero__divider {
        width: 60px;
        height: 3px;
    }
    .jm-casacampestre-hero__accent-left,
    .jm-casacampestre-hero__accent-right {
        display: none;
    }
}

/* ==========================================================
 *   [ PÁGINA APARTAESTUDIO (page-apartaestudio.php) ]
 *   Página hija #7 de 8 de Inmuebles Usados / JM Inmobiliaria.
 *   CLON 1:1 page-casa-lote.php / page-casa-campestre.php.
 *   Imagen hero = INMO-003 (últimas 4 hijas).
 *   H1 = "Apartaestudio" · uppercase 900 · text-shadow 3 capas hero.
 *   Posición CSS: AL FINAL DESPUÉS Casa Campestre.
 * ========================================================== */

.jm-apartaestudio-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

.jm-apartaestudio-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jm-apartaestudio-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-inmo-apartaestudio-hero-003.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

.jm-apartaestudio-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.38);
    mix-blend-mode: normal;
}

.jm-apartaestudio-hero__accent-left,
.jm-apartaestudio-hero__accent-right {
    position: absolute;
    top: 14%;
    bottom: 14%;
    width: 3.5px;
    z-index: 2;
    border-radius: 4px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.6);
}

.jm-apartaestudio-hero__accent-left  { left:  2.25%; }
.jm-apartaestudio-hero__accent-right { right: 2.25%; }

.jm-apartaestudio-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

.jm-apartaestudio-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.25);
}

.jm-apartaestudio-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

@media (max-width: 1199px) {
    .jm-apartaestudio-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-apartaestudio-hero__inner {
        max-width: 1000px;
        gap: 1.25rem;
    }
    .jm-apartaestudio-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-apartaestudio-hero__divider {
        width: 84px;
        height: 3px;
    }
    .jm-apartaestudio-hero__accent-left,
    .jm-apartaestudio-hero__accent-right {
        top: 15%;
        bottom: 15%;
        width: 3px;
    }
    .jm-apartaestudio-hero__accent-left  { left:  1.75%; }
    .jm-apartaestudio-hero__accent-right { right: 1.75%; }
}

@media (max-width: 991px) {
    .jm-apartaestudio-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-apartaestudio-hero__inner {
        max-width: 820px;
        gap: 1.1rem;
    }
    .jm-apartaestudio-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.028em;
    }
    .jm-apartaestudio-hero__divider {
        width: 72px;
        height: 3px;
    }
    .jm-apartaestudio-hero__accent-left,
    .jm-apartaestudio-hero__accent-right {
        top: 16%;
        bottom: 16%;
        width: 3px;
    }
    .jm-apartaestudio-hero__accent-left  { left:  1.25%; }
    .jm-apartaestudio-hero__accent-right { right: 1.25%; }
}

@media (max-width: 639px) {
    .jm-apartaestudio-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-apartaestudio-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-apartaestudio-hero__overlay { background-color: rgba(8, 31, 55, 0.42); }
    .jm-apartaestudio-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.28);
    }
    .jm-apartaestudio-hero__divider {
        width: 60px;
        height: 3px;
    }
    .jm-apartaestudio-hero__accent-left,
    .jm-apartaestudio-hero__accent-right {
        display: none;
    }
}

/* ==========================================================
 *   [ PÁGINA FINCA (page-finca.php) ]
 *   Página hija #8 ÚLTIMA de 8 de Inmuebles Usados / JM Inmobiliaria.
 *   CLON 1:1 page-apartaestudio.php / page-casa-lote.php.
 *   Imagen hero = INMO-003 (últimas 4 hijas · mismo que Casa Lote).
 *   H1 = "Finca" · uppercase 900 · text-shadow 3 capas hero.
 *   Posición CSS: AL FINAL DESPUÉS Apartaestudio.
 *   BLOQUE INMOBILIARIA COMPLETA.
 * ========================================================== */

.jm-finca-main {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
}

.jm-finca-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 70vh;
    min-height: 70dvh;
    overflow: hidden;
    background-color: var(--jm-c-dark-bg-2, #0a1b2e);
    color: var(--jm-c-white, #ffffff);
    padding: 7.5rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jm-finca-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: url('assets/images/jm-inmo-finca-hero-003.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    filter: none;
    transform: none;
}

.jm-finca-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(8, 31, 55, 0.38);
    mix-blend-mode: normal;
}

.jm-finca-hero__accent-left,
.jm-finca-hero__accent-right {
    position: absolute;
    top: 14%;
    bottom: 14%;
    width: 3.5px;
    z-index: 2;
    border-radius: 4px;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(245, 197, 24, 0.6);
}

.jm-finca-hero__accent-left  { left:  2.25%; }
.jm-finca-hero__accent-right { right: 2.25%; }

.jm-finca-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--jm-rw, 1320px);
    margin: 0 auto;
    padding: 0 var(--jm-px, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

.jm-finca-hero__title {
    margin: 0;
    padding: 0;
    color: var(--jm-c-white, #ffffff);
    font-size: clamp(1.85rem, 2.6vw + 1.45rem, 3.1rem);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.38),
        0 1px 0 rgba(15, 76, 129, 0.18),
        0 0 22px rgba(245, 197, 24, 0.25);
}

.jm-finca-hero__divider {
    display: block;
    width: 96px;
    height: 3.5px;
    margin: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--jm-c-gold, #f5c518) 20%,
        var(--jm-c-gold-200, #ffe082) 50%,
        var(--jm-c-gold, #f5c518) 80%,
        transparent 100%);
    box-shadow: 0 0 14px 0 rgba(245, 197, 24, 0.62);
}

@media (max-width: 1199px) {
    .jm-finca-hero {
        min-height: 70vh;
        min-height: 70dvh;
        padding: 6.25rem 0 4.75rem 0;
    }
    .jm-finca-hero__inner {
        max-width: 1000px;
        gap: 1.25rem;
    }
    .jm-finca-hero__title {
        font-size: clamp(1.55rem, 2.3vw + 1.25rem, 2.6rem);
    }
    .jm-finca-hero__divider {
        width: 84px;
        height: 3px;
    }
    .jm-finca-hero__accent-left,
    .jm-finca-hero__accent-right {
        top: 15%;
        bottom: 15%;
        width: 3px;
    }
    .jm-finca-hero__accent-left  { left:  1.75%; }
    .jm-finca-hero__accent-right { right: 1.75%; }
}

@media (max-width: 991px) {
    .jm-finca-hero {
        min-height: 72vh;
        min-height: 72dvh;
        padding: 5.75rem 0 4.5rem 0;
    }
    .jm-finca-hero__inner {
        max-width: 820px;
        gap: 1.1rem;
    }
    .jm-finca-hero__title {
        font-size: clamp(1.3rem, 2.5vw + 1.1rem, 2.15rem);
        letter-spacing: 0.028em;
    }
    .jm-finca-hero__divider {
        width: 72px;
        height: 3px;
    }
    .jm-finca-hero__accent-left,
    .jm-finca-hero__accent-right {
        top: 16%;
        bottom: 16%;
        width: 3px;
    }
    .jm-finca-hero__accent-left  { left:  1.25%; }
    .jm-finca-hero__accent-right { right: 1.25%; }
}

@media (max-width: 639px) {
    .jm-finca-hero {
        min-height: 52vh;
        min-height: 52dvh;
        padding: 3.5rem 0 2.5rem 0;
    }
    .jm-finca-hero__inner {
        gap: 1rem;
        padding: 0 var(--jm-px, 1.25rem);
    }
    .jm-finca-hero__overlay { background-color: rgba(8, 31, 55, 0.42); }
    .jm-finca-hero__title {
        font-size: clamp(1.15rem, 5.5vw + 1rem, 1.8rem);
        letter-spacing: 0.022em;
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 18px rgba(245, 197, 24, 0.28);
    }
    .jm-finca-hero__divider {
        width: 60px;
        height: 3px;
    }
    .jm-finca-hero__accent-left,
    .jm-finca-hero__accent-right {
        display: none;
    }
}