/* =========================================================
   HERO MÓVIL (.ja-hero-movil)
   Todo va acotado a .ja-hero-movil: no afecta al hero de escritorio.
   El prefijo "html body" asegura que estas reglas ganen a las de escritorio.
   ========================================================= */

html body .ja-hero-movil {
    --jm-ivory: var(--ja-ivory, #F1EDE4);
    --jm-ivory-soft: var(--ja-ivory-soft, #D6D0C5);
    --jm-terracota: var(--ja-terracota, #AC5C3E);
    --jm-turquesa: var(--ja-turquesa, #009B9B);
    --jm-serif: var(--ja-serif, "Cormorant Garamond", serif);
    --jm-sans: var(--ja-sans, "Manrope", sans-serif);
}

/* 1. HEADER: identidad a la izquierda, INFO a la derecha.
   El bloque Cover "is-light" pone el texto en negro: por eso
   el nombre, INFO y "Explora la biblioteca" no se veían. */
html body .ja-hero-movil .wp-block-cover__inner-container {
    color: var(--jm-ivory) !important;
    width: 100% !important;
}
html body .ja-hero-movil .ja-header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px 20px 28px !important;
    box-sizing: border-box !important;
    background: transparent !important;
}
html body .ja-hero-movil .ja-header-identity-group {
    margin: 0 !important;
    padding: 0 !important;
}
html body .ja-hero-movil .ja-header-identity {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body .ja-hero-movil .ja-header-identity-name-role {
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}
html body .ja-hero-movil .ja-header-info-column {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
}
html body .ja-hero-movil .ja-header-name {
    margin: 0 0 6px !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    color: var(--jm-ivory) !important;
    text-align: left !important;
}
html body .ja-hero-movil .ja-header-role {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    color: var(--jm-ivory-soft) !important;
    text-align: left !important;
}
html body .ja-hero-movil .ja-header-info {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: right !important;
    color: var(--jm-ivory) !important;
}
html body .ja-hero-movil .ja-header-info a {
    color: var(--jm-ivory) !important;
}

/* 2. COLUMNAS EN PILA */
html body .ja-hero-movil .ja-movil-solo {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}
html body .ja-hero-movil .ja-movil-title,
html body .ja-hero-movil .ja-biblioteca-libros-movil,
html body .ja-hero-movil .ja-movil-lead-cta {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    flex-basis: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 3. TEXTOS: todo alineado a la izquierda.
   margin-left: 0 anula los 48px que pone el editor en línea. */
html body .ja-hero-movil .ja-hero-title-one,
html body .ja-hero-movil .ja-hero-lead-cta {
    font-family: var(--jm-serif) !important;
    font-size: clamp(26px, 8.4vw, 36px) !important;
    font-weight: 500 !important;
    font-style: normal !important;
    line-height: 0.96 !important;
    letter-spacing: -0.035em !important;
    text-align: left !important;
    text-indent: 0 !important;
    color: var(--jm-ivory) !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
}
html body .ja-hero-movil .ja-hero-lead-cta {
    color: var(--jm-terracota) !important;
    margin-bottom: 0 !important;
}
html body .ja-hero-movil .ja-hero-lead,
html body .ja-hero-movil .ja-hero-cta {
    font-family: var(--jm-sans) !important;
    text-align: left !important;
    text-indent: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
}
html body .ja-hero-movil .ja-hero-lead {
    margin: 22px 0 16px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    color: var(--jm-ivory-soft) !important;
}
html body .ja-hero-movil .ja-hero-cta,
html body .ja-hero-movil .ja-hero-cta a {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.12em !important;
    color: var(--jm-ivory) !important;
    text-decoration: none !important;
}
html body .ja-hero-movil .ja-hero-cta a:hover {
    color: var(--jm-turquesa) !important;
}

/* 4. ESTANTE
   La imagen del mueble es el fondo; la caja mantiene su proporción
   (1080 x 819), así que la rejilla siempre coincide con las baldas.
   Medidas de la rejilla en píxeles de la imagen original:
   filas    0-110 techo | 110-404 balda superior | 404-436 tabla |
            436-734 balda inferior | 734-819 base
   columnas 0-170 | 170-480 | 480-790 | 790-1080 (adornos) */
html body .ja-hero-movil .ja-biblioteca-libros-movil {
    margin: 26px 0 4px !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    aspect-ratio: auto !important;
}
html body .ja-hero-movil .ja-biblioteca-libros-one-movil {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: calc(100% + 40px) !important;
    max-width: none !important;
    height: 0 !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 -20px !important;
    padding: 0 0 75.83% !important; /* 819 / 1080: misma proporción que la imagen */
    background-color: #100d0b !important;
    background-image: url("/wp-content/uploads/2026/11/Fondo-para-movil-2.webp") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
html body .ja-hero-movil .ja-biblioteca-libros-one-movil::before,
html body .ja-hero-movil .ja-biblioteca-libros-one-movil::after {
    content: none !important;
}
html body .ja-hero-movil .ja-biblioteca {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 110fr) minmax(0, 294fr) minmax(0, 32fr) minmax(0, 298fr) minmax(0, 85fr) !important;
    grid-template-columns: minmax(0, 170fr) minmax(0, 310fr) minmax(0, 310fr) minmax(0, 290fr) !important;
    gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body .ja-hero-movil .ja-biblioteca .libro {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: block !important;
    align-self: end !important;
    justify-self: center !important;
    width: 57% !important; /* ancho de la celda; la altura sale sola */
    max-width: 57% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
    transition: transform 300ms ease !important;
}
html body .ja-hero-movil .ja-biblioteca .libro:hover,
html body .ja-hero-movil .ja-biblioteca .libro:focus-visible {
    transform: translateY(-3px) !important;
}
html body .ja-hero-movil .ja-biblioteca .libro img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 !important;
    border-radius: 1px !important;
    box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.7) !important;
}
/* Arriba: Joel Amón, Servicios. Abajo: Portafolio, Hablemos */
html body .ja-hero-movil .ja-biblioteca .libro-1 { grid-area: 2 / 2 !important; }
html body .ja-hero-movil .ja-biblioteca .libro-2 { grid-area: 2 / 3 !important; }
html body .ja-hero-movil .ja-biblioteca .libro-4 { grid-area: 4 / 2 !important; }
html body .ja-hero-movil .ja-biblioteca .libro-3 { grid-area: 4 / 3 !important; }
html body .ja-hero-movil .ja-biblioteca .libro:not(.libro-1):not(.libro-2):not(.libro-3):not(.libro-4) {
    display: none !important;
}

/* 5. FOOTER: especialidades a la izquierda, "Explora la biblioteca" a la derecha */
html body .ja-hero-movil .ja-footer {
    width: 100% !important;
    margin: 28px 0 0 !important;
    padding: 0 20px 28px !important;
    box-sizing: border-box !important;
}
html body .ja-hero-movil .ja-footer-informacion {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 0 !important;
}
html body .ja-hero-movil .ja-footer-one,
html body .ja-hero-movil .ja-footer-two {
    display: block !important;
    width: 100% !important;
    flex: none !important;
    flex-basis: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
html body .ja-hero-movil .ja-footer-one,
html body .ja-hero-movil .ja-footer-one * {
    text-align: left !important;
}
html body .ja-hero-movil .ja-footer-especialidades,
html body .ja-hero-movil .ja-footer-establecida {
    margin: 0 !important;
    font-family: var(--jm-sans) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}
html body .ja-hero-movil .ja-footer-especialidades {
    color: var(--jm-ivory) !important;
    margin-bottom: 6px !important;
}
html body .ja-hero-movil .ja-footer-establecida {
    color: var(--jm-terracota) !important;
}
html body .ja-hero-movil .ja-footer-two,
html body .ja-hero-movil .ja-footer-two * {
    text-align: right !important;
    justify-content: flex-end !important;
}
html body .ja-hero-movil .ja-footer-two p,
html body .ja-hero-movil .ja-footer-two a,
html body .ja-hero-movil .ja-footer-two span {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-family: var(--jm-sans) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--jm-ivory) !important;
    text-decoration: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}
html body .ja-hero-movil .ja-footer-two a:hover,
html body .ja-hero-movil .ja-footer-two a:hover span {
    color: var(--jm-turquesa) !important;
}

/* =========================================================
   PÁGINAS INTERNAS (Joel Amón, Servicios, Portafolio, Casos,
   30 años, Proceso, Hablemos)
   No hace falta tocar los bloques: el CSS reconoce la página
   interna porque su columna izquierda contiene .ja-menu-interno.
   ========================================================= */

/* ---------- Tipografía del texto: Manrope (PC y móvil) ----------
   El tema asigna al cuerpo "IBM Plex Sans", que no está cargada,
   y el navegador cae en una serif genérica tipo Times. */
html body .wp-block-columns:has(.ja-menu-interno) > .wp-block-column:not(:has(> .ja-menu-interno)) :is(p, li, label, input, textarea, select, blockquote, figcaption):not(.has-cormorant-garamond-font-family) {
    font-family: 'Manrope', sans-serif !important;
}

/* ---------- PC: portada más pequeña ---------- */
@media (min-width: 782px) {
    html body .wp-block-column:has(> .ja-menu-interno) > .wp-block-image {
        margin: 0 auto 8px !important;
    }
    html body .wp-block-column:has(> .ja-menu-interno) > .wp-block-image img {
        width: min(100%, 300px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }
}

/* ---------- MÓVIL ----------
   Orden de lectura, como un libro:
   1. Migas  2. Portada  3. Contenido  4. Índice (al final, como en un libro) */
@media (max-width: 781px) {
    html body .wp-block-columns:has(.ja-menu-interno) {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
    }
    /* La columna oscura "se disuelve" para poder reordenar sus piezas */
    html body .wp-block-columns:has(.ja-menu-interno) > .wp-block-column:has(> .ja-menu-interno) {
        display: contents !important;
    }

    /* 1. Migas */
    html body .ja-navegacion-superior {
        order: 1 !important;
        margin: 0 !important;
        padding: 20px 20px 0 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    /* 2. Portada */
    html body .wp-block-column:has(> .ja-menu-interno) > .wp-block-image {
        order: 2 !important;
        margin: 0 !important;
        padding: 28px 20px 36px !important;
        text-align: center !important;
    }
    html body .wp-block-column:has(> .ja-menu-interno) > .wp-block-image img {
        width: min(48vw, 200px) !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* 3. Contenido (columna papel) */
    html body .wp-block-columns:has(.ja-menu-interno) > .wp-block-column:not(:has(> .ja-menu-interno)) {
        order: 3 !important;
        flex: none !important;
        flex-basis: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 36px 20px 8px !important;
        box-sizing: border-box !important;
    }
    html body .wp-block-columns:has(.ja-menu-interno) > .wp-block-column:not(:has(> .ja-menu-interno)) :is(h1, h2) {
        font-size: clamp(30px, 8.6vw, 38px) !important;
        line-height: 1.05 !important;
        margin-top: 10px !important;
    }
    html body .wp-block-columns:has(.ja-menu-interno) > .wp-block-column:not(:has(> .ja-menu-interno)) p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
    /* Medios y texto: foto arriba a todo el ancho, texto debajo */
    html body .wp-block-columns:has(.ja-menu-interno) .wp-block-media-text {
        display: block !important;
    }
    html body .wp-block-columns:has(.ja-menu-interno) .wp-block-media-text__media {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 5 !important;
        max-height: 70vh !important;
        margin: 0 0 20px !important;
        overflow: hidden !important;
    }
    html body .wp-block-columns:has(.ja-menu-interno) .wp-block-media-text__media img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    html body .wp-block-columns:has(.ja-menu-interno) .wp-block-media-text__content {
        padding: 0 !important;
    }
    /* Caja de llamada (CTA): texto y botón uno debajo del otro */
    html body .wp-block-columns:has(.ja-menu-interno) .wp-block-group:has(> .wp-block-group .ja-boton-llamado) {
        padding: 28px 22px !important;
    }
    html body .wp-block-columns:has(.ja-menu-interno) .wp-block-group:has(.ja-boton-llamado) h3 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }
    html body .wp-block-columns:has(.ja-menu-interno) .wp-block-columns:has(.ja-boton-llamado) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
        margin-bottom: 0 !important;
    }
    html body .wp-block-columns:has(.ja-menu-interno) .wp-block-columns:has(.ja-boton-llamado) > .wp-block-column {
        flex-basis: auto !important;
        width: 100% !important;
    }
    html body .wp-block-columns:has(.ja-menu-interno) .wp-block-buttons.ja-boton-llamado {
        justify-content: flex-start !important;
    }

    /* 4. Índice al final, con los puntos guía del escritorio */
    html body .ja-menu-interno {
        order: 4 !important;
        margin: 0 !important;
        padding: 36px 20px 48px !important;
        box-sizing: border-box !important;
    }
    html body .ja-menu-interno::before {
        content: "ÍNDICE" !important;
        display: block !important;
        margin-bottom: 14px !important;
        font-family: 'Manrope', sans-serif !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 0.12em !important;
        color: #AC5C3E !important;
    }
    html body .ja-menu-interno ul {
        display: block !important;
    }
    html body .ja-menu-interno li {
        padding: 0 !important;
    }
    html body .ja-menu-interno li:not(:last-child)::after {
        content: none !important;
    }
    html body .ja-menu-interno li a {
        display: flex !important;
        align-items: flex-end !important;
        padding: 12px 0 !important;
        font-size: 14px !important;
        border-bottom: 1px solid rgba(241, 237, 228, 0.08) !important;
    }
    html body .ja-menu-interno .ja-texto {
        display: block !important;
        padding-right: 8px !important;
    }
    html body .ja-menu-interno .ja-puntos {
        display: block !important;
    }
    html body .ja-menu-interno .ja-numero {
        display: block !important;
        padding-left: 8px !important;
        color: rgba(241, 237, 228, 0.5) !important;
    }
    /* Tomo actual en terracota */
    html body.page-id-446 .ja-menu-interno a[href*="/joel-amon/"],
    html body.page-id-454 .ja-menu-interno a[href*="/servicios/"],
    html body.page-id-456 .ja-menu-interno a[href*="/portafolio/"],
    html body.page-id-458 .ja-menu-interno a[href*="/casos-de-estudio/"],
    html body.page-id-460 .ja-menu-interno a[href*="/30-anos/"],
    html body.page-id-462 .ja-menu-interno a[href*="/proceso/"],
    html body.page-id-464 .ja-menu-interno a[href*="/hablemos/"] {
        color: #AC5C3E !important;
    }
    html body.page-id-446 .ja-menu-interno a[href*="/joel-amon/"] .ja-numero,
    html body.page-id-454 .ja-menu-interno a[href*="/servicios/"] .ja-numero,
    html body.page-id-456 .ja-menu-interno a[href*="/portafolio/"] .ja-numero,
    html body.page-id-458 .ja-menu-interno a[href*="/casos-de-estudio/"] .ja-numero,
    html body.page-id-460 .ja-menu-interno a[href*="/30-anos/"] .ja-numero,
    html body.page-id-462 .ja-menu-interno a[href*="/proceso/"] .ja-numero,
    html body.page-id-464 .ja-menu-interno a[href*="/hablemos/"] .ja-numero {
        color: #AC5C3E !important;
    }
}