/*
|--------------------------------------------------------------------------
| QUEBRADA EL AMOLADERO — DESIGN SYSTEM
|--------------------------------------------------------------------------
| Optimizado para:
| - Header desktop/tablet/móvil
| - Buscador expandible
| - Drawer móvil + redes sociales
| - Hero con imagen desktop/tablet + móvil
| - Tipografía, botones, secciones y utilidades
|--------------------------------------------------------------------------
*/

:root {
    --amoladero-primary: #046748;
    --amoladero-deep: #00594F;
    --amoladero-medium: #378B7B;
    --amoladero-light: #DCE5DF;
    --amoladero-accent: #2D8956;
    --amoladero-white: #FFFFFF;
    --amoladero-black: #111111;

    --amoladero-font-display: var(--wp--preset--font-family--emaro), sans-serif;
    --amoladero-font-heavy: var(--wp--preset--font-family--nexa-heavy), Arial, sans-serif;
    --amoladero-font-body: Arial, Helvetica, sans-serif;

    --amoladero-container: 1440px;
    --amoladero-content: 1200px;
    --amoladero-gutter: clamp(20px, 4vw, 64px);
    --amoladero-section-space: clamp(72px, 9vw, 150px);

    --amoladero-radius-pill: 999px;
    --amoladero-radius-card: 18px;
    --amoladero-ease: cubic-bezier(.4, 0, .2, 1);
    --amoladero-drawer-ease: cubic-bezier(.22, 1, .36, 1);
}


/* ==========================================================================
   1. BASE / WORDPRESS
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--amoladero-white);
    color: var(--amoladero-black);
    font-family: var(--amoladero-font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.amoladero-menu-open {
    overflow: hidden;
}

img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

svg {
    max-width: 100%;
}

a {
    color: inherit;
}

.wp-site-blocks,
.wp-block-template-part {
    margin: 0;
    padding: 0;
}

body .is-layout-constrained > .alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ==========================================================================
   2. LAYOUT
   ========================================================================== */

.amoladero-container {
    width: min(calc(100% - (var(--amoladero-gutter) * 2)), var(--amoladero-container));
    margin-inline: auto;
}

.amoladero-content {
    width: min(calc(100% - (var(--amoladero-gutter) * 2)), var(--amoladero-content));
    margin-inline: auto;
}


/* ==========================================================================
   3. HEADER — DESKTOP
   ========================================================================== */

/*
|--------------------------------------------------------------------------
| HEADER GLOBAL
|--------------------------------------------------------------------------
| Una sola fuente de verdad para Home y todas las páginas internas.
| Conserva el mismo diseño visual del Home:
| logo a la izquierda, navegación centrada y búsqueda a la derecha.
|--------------------------------------------------------------------------
*/

.amoladero-header,
.amoladero-header.wp-block-group,
.amoladero-header.has-background {
    position: absolute;
    z-index: 100;
    top: 14px;
    right: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--amoladero-white);
    box-shadow: none;
}


/* Header grid */

.amoladero-header__inner {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
    align-items: center;
    width: min(calc(100% - (var(--amoladero-gutter) * 2)), var(--amoladero-container));
    min-height: 108px;
    margin-inline: auto;
    gap: 24px;
}


/* Logo */

.amoladero-header__brand {
    grid-column: 1;
    justify-self: start;
    margin: 0;
}

.amoladero-header__brand .wp-block-shortcode {
    margin: 0;
    line-height: 0;
}

.amoladero-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
}

.amoladero-logo__image {
    display: block;
    width: clamp(68px, 5vw, 94px);
    max-width: none;
    height: auto;
}


/* Navigation */

.amoladero-header__nav {
    grid-column: 2;
    justify-self: center;
    margin: 0;
}

.amoladero-header .wp-block-navigation {
    margin: 0;
    justify-content: center;
    font-family: var(--amoladero-font-heavy);
    font-size: clamp(.74rem, .82vw, .92rem);
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.amoladero-header .wp-block-navigation__container {
    justify-content: center;
    gap: clamp(20px, 2vw, 34px);
}

.amoladero-header .wp-block-navigation-item__content {
    color: var(--amoladero-white);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 220ms ease;
}

.amoladero-header .wp-block-navigation-item__content:hover {
    opacity: .72;
}


/* Right tools */

.amoladero-header__tools {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    margin: 0;
}


/* ==========================================================================
   4. SEARCH — DESKTOP / TABLET
   Conserva la interacción que ya funciona.
   ========================================================================== */

.amoladero-search {
    position: relative;
    width: 42px;
    height: 42px;
    margin: 0;
    overflow: visible;
    transition: width 320ms var(--amoladero-ease);
}

.amoladero-search .wp-block-search__inside-wrapper {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 42px;
    height: 42px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: var(--amoladero-radius-pill);
    background: transparent;
    overflow: hidden;
    transition:
        width 320ms var(--amoladero-ease),
        background 220ms ease,
        box-shadow 220ms ease;
}

.amoladero-search .wp-block-search__input {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 38px;
    padding: 0 !important;
    border: 0 !important;
    outline: 0;
    opacity: 0;
    background: transparent;
    color: var(--amoladero-deep);
    font-family: var(--amoladero-font-body);
    font-size: .78rem;
    transition:
        width 320ms var(--amoladero-ease),
        flex-basis 320ms var(--amoladero-ease),
        padding 320ms var(--amoladero-ease),
        opacity 160ms ease;
}

.amoladero-search .wp-block-search__input::placeholder {
    color: rgba(0, 89, 79, .55);
}

.amoladero-search .wp-block-search__button {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--amoladero-primary) !important;
    color: var(--amoladero-white) !important;
    cursor: pointer;
    transition:
        background 220ms ease,
        transform 220ms ease;
}

.amoladero-search .wp-block-search__button:hover {
    background: var(--amoladero-accent) !important;
    transform: scale(1.04);
}

.amoladero-search.is-open {
    width: clamp(150px, 13vw, 210px);
}

.amoladero-search.is-open .wp-block-search__inside-wrapper {
    width: clamp(170px, 15vw, 230px);
    background: var(--amoladero-white);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
}

.amoladero-search.is-open .wp-block-search__input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 4px 12px !important;
    opacity: 1;
}


/* ==========================================================================
   5. HERO
   ========================================================================== */

.amoladero-hero {
    position: relative;
    width: 100%;
    min-height: clamp(600px, 76vh, 840px);
    overflow: hidden;
    background: var(--amoladero-deep);
    isolation: isolate;
}

.amoladero-hero__media {
    position: absolute !important;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 100% !important;
    margin: 0 !important;
}
/* ==========================================================================
   HERO — FRANJA DECORATIVA INFERIOR
   ========================================================================== */

.amoladero-hero {
    position: relative;
    overflow: hidden;
}

.amoladero-hero::after {
    content: "";

    position: absolute;
    z-index: 10;

    left: 0;
    bottom: -1px;

    display: block;
    width: 100%;
    height: clamp(54px, 6vw, 86px);

    background-image: url("/wp-content/themes/amoladero/assets/svg/linea-decorativa-hero.svg");
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: auto 100%;

    pointer-events: none;
}

.amoladero-hero__media .wp-block-cover__image-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.amoladero-hero__media--desktop {
    display: flex;
}

.amoladero-hero__media--mobile {
    display: none;
}

.amoladero-hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: rgba(0, 55, 48, .34);
    pointer-events: none;
}

.amoladero-hero__content-wrap {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    width: min(calc(100% - (var(--amoladero-gutter) * 2)), var(--amoladero-container));
    min-height: clamp(600px, 76vh, 840px);
    margin-inline: auto;
    padding: 110px 0 80px;
}

.amoladero-hero__content {
    display: flex;
    flex-direction: column;
    width: min(100%, 790px);
    gap: clamp(14px, 2vw, 26px);
}

.amoladero-hero__title {
    margin: 0;
    color: var(--amoladero-white);
    font-family: var(--amoladero-font-display);
    font-size: clamp(3.2rem, 6vw, 7rem);
    font-weight: 400;
    line-height: .9;
    letter-spacing: -.025em;
    text-transform: uppercase;
    text-wrap: balance;
}

.amoladero-hero__lead {
    max-width: 680px;
    margin: 0;
    color: var(--amoladero-white);
    font-family: var(--amoladero-font-heavy);
    font-size: clamp(1rem, 1.45vw, 1.35rem);
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
    text-wrap: balance;
}


/* Hero content alignment */

.amoladero-hero__content.is-style-hero-left {
    align-items: flex-start;
    margin-right: auto;
    text-align: left;
}

.amoladero-hero__content.is-style-hero-center {
    align-items: center;
    margin-inline: auto;
    text-align: center;
}

.amoladero-hero__content.is-style-hero-right {
    align-items: flex-end;
    margin-left: auto;
    text-align: right;
}

.amoladero-hero__content.is-style-hero-left .amoladero-hero__title,
.amoladero-hero__content.is-style-hero-left .amoladero-hero__lead {
    text-align: left;
}

.amoladero-hero__content.is-style-hero-center .amoladero-hero__title,
.amoladero-hero__content.is-style-hero-center .amoladero-hero__lead {
    text-align: center;
}

.amoladero-hero__content.is-style-hero-right .amoladero-hero__title,
.amoladero-hero__content.is-style-hero-right .amoladero-hero__lead {
    text-align: right;
}


/* ==========================================================================
   6. SECTIONS / TYPOGRAPHY / UI
   ========================================================================== */

.amoladero-section {
    position: relative;
    width: 100%;
    padding-block: var(--amoladero-section-space);
}

.amoladero-section--primary {
    background: var(--amoladero-primary);
    color: var(--amoladero-white);
}

.amoladero-section--deep {
    background: var(--amoladero-deep);
    color: var(--amoladero-white);
}

.amoladero-section--medium {
    background: var(--amoladero-medium);
    color: var(--amoladero-white);
}

.amoladero-section--light {
    background: var(--amoladero-light);
    color: var(--amoladero-primary);
}

.amoladero-section--accent {
    background: var(--amoladero-accent);
    color: var(--amoladero-white);
}

.amoladero-display,
.amoladero-title {
    margin: 0;
    color: var(--amoladero-primary);
    font-family: var(--amoladero-font-display);
    font-size: clamp(2.75rem, 6vw, 6.5rem);
    font-weight: 400;
    line-height: .92;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.amoladero-subtitle {
    margin: 0;
    color: var(--amoladero-primary);
    font-family: var(--amoladero-font-heavy);
    font-size: clamp(1.7rem, 3vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.amoladero-heading {
    margin: 0;
    color: var(--amoladero-primary);
    font-family: var(--amoladero-font-heavy);
    font-size: clamp(1.25rem, 2vw, 2rem);
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.amoladero-body {
    margin: 0;
    color: inherit;
    font-family: var(--amoladero-font-body);
    font-size: clamp(1rem, 1.1vw, 1.15rem);
    line-height: 1.65;
}

.amoladero-label,
.amoladero-nav {
    font-family: var(--amoladero-font-heavy);
    font-weight: 800;
    text-transform: uppercase;
}

.amoladero-button,
.wp-element-button.amoladero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px clamp(30px, 4vw, 58px);
    border: 0;
    border-radius: var(--amoladero-radius-pill);
    background: var(--amoladero-accent);
    color: var(--amoladero-white);
    font-family: var(--amoladero-font-heavy);
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background 220ms ease,
        transform 220ms ease;
}

.amoladero-button:hover {
    background: var(--amoladero-primary);
    transform: translateY(-2px);
}

.amoladero-button:focus-visible {
    outline: 3px solid var(--amoladero-medium);
    outline-offset: 4px;
}

.amoladero-button--light {
    background: var(--amoladero-white);
    color: var(--amoladero-primary);
}

.amoladero-button--light:hover {
    background: var(--amoladero-light);
    color: var(--amoladero-deep);
}

.amoladero-link {
    color: var(--amoladero-primary);
    font-family: var(--amoladero-font-heavy);
    text-decoration: none;
    transition: color 220ms ease;
}

.amoladero-link:hover {
    color: var(--amoladero-accent);
}


/* ==========================================================================
   7. FOOTER — BASE
   ========================================================================== */

.amoladero-footer {
    position: relative;
    width: 100%;
    padding: clamp(48px, 7vw, 96px) var(--amoladero-gutter);
    background: var(--amoladero-deep);
    color: var(--amoladero-white);
}

.amoladero-footer a {
    color: inherit;
    text-decoration: none;
}


/* ==========================================================================
   8. TABLET
   ========================================================================== */

@media (max-width: 1024px) {
    :root {
        --amoladero-gutter: 32px;
    }

    .amoladero-header__inner {
        grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
        min-height: 88px;
        gap: 16px;
    }


    .amoladero-logo__image {
        width: clamp(66px, 7vw, 88px);
    }

    .amoladero-header .wp-block-navigation {
        font-size: clamp(.70rem, 1vw, .86rem);
    }

    .amoladero-header .wp-block-navigation__container {
        gap: clamp(14px, 1.6vw, 24px);
    }
}


/* ==========================================================================
   9. MOBILE HEADER / SEARCH / DRAWER
   ========================================================================== */

.amoladero-mobile-socials {
    display: none;
}

@media (max-width: 781px) {
    :root {
        --amoladero-gutter: 20px;
        --amoladero-section-space: 72px;
    }

    .amoladero-header {
        top: 10px;
    }

    .admin-bar .amoladero-header {
        top: 56px;
    }

    /*
     * Una sola fila estable:
     * logo | espacio | lupa | hamburger
     */
    .amoladero-header__inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 40px 42px;
        grid-template-rows: 70px;
        align-items: center;
        min-height: 70px;
        gap: 8px;
    }

    .amoladero-header__brand {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .amoladero-logo__image {
        width: clamp(50px, 13vw, 62px);
    }

    .amoladero-header__tools {
        grid-column: 3;
        grid-row: 1;
        position: relative;
        z-index: 20;
        justify-self: end;
        width: 40px;
        height: 40px;
        overflow: visible;
    }

    .amoladero-header__nav {
        grid-column: 4;
        grid-row: 1;
        position: relative;
        z-index: 30;
        display: flex;
        align-items: center;
        justify-content: center;
        justify-self: end;
        width: 42px;
        height: 42px;
        margin: 0;
    }


    /* Mobile search: the icon NEVER moves */

    .amoladero-search,
    .amoladero-search.is-open {
        position: relative;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .amoladero-search .wp-block-search__inside-wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        display: block !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        transform: none !important;
        overflow: visible !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .amoladero-search .wp-block-search__input {
        position: absolute !important;
        z-index: 1;
        top: 1px;
        right: 32px;
        width: 0 !important;
        min-width: 0 !important;
        height: 38px;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 999px 0 0 999px !important;
        outline: 0 !important;
        opacity: 0;
        background: var(--amoladero-white) !important;
        color: var(--amoladero-deep) !important;
        pointer-events: none;
        overflow: hidden;
        transition:
            width 320ms var(--amoladero-ease),
            padding 320ms var(--amoladero-ease),
            opacity 180ms ease !important;
    }

    .amoladero-search.is-open .wp-block-search__input {
        width: min(48vw, 190px) !important;
        padding: 4px 14px !important;
        opacity: 1;
        pointer-events: auto;
        box-shadow: -8px 8px 24px rgba(0, 0, 0, .12);
    }

    .amoladero-search .wp-block-search__button,
    .amoladero-search .wp-block-search__button:hover {
        position: absolute !important;
        z-index: 3;
        top: 0;
        right: 0;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: none !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: var(--amoladero-primary) !important;
        color: var(--amoladero-white) !important;
        transform: none !important;
        pointer-events: auto !important;
        touch-action: manipulation;
    }


    /* Hamburger */

    .amoladero-header .wp-block-navigation__responsive-container-open {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: var(--amoladero-white) !important;
    }

    .amoladero-header .wp-block-navigation__responsive-container-open svg {
        width: 29px;
        height: 29px;
    }


    /* Drawer overlay — mounted but inert when closed */

    .amoladero-header .wp-block-navigation__responsive-container {
        position: fixed !important;
        z-index: 1000 !important;
        inset: 0 !important;
        display: block !important;
        width: 100vw !important;
        height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(0, 30, 25, .42) !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        overflow: hidden;
        transition:
            opacity 280ms ease,
            visibility 0s linear 420ms;
    }

    .amoladero-header .wp-block-navigation__responsive-container.is-menu-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .amoladero-header .wp-block-navigation__responsive-close {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .amoladero-header .wp-block-navigation__responsive-dialog {
        position: absolute;
        top: 12px;
        right: 0;
        bottom: 12px;
        display: flex;
        flex-direction: column;
        width: min(82vw, 360px);
        height: auto;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--amoladero-deep);
        color: var(--amoladero-white);
        border-radius: 20px 0 0 20px;
        box-shadow: -18px 0 46px rgba(0, 0, 0, .20);
        overflow: hidden;
        transform: translate3d(104%, 0, 0);
        transition: transform 420ms var(--amoladero-drawer-ease);
        will-change: transform;
    }

    .amoladero-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog {
        transform: translate3d(0, 0, 0);
    }


    /* Drawer close */

    .amoladero-header .wp-block-navigation__responsive-container-close {
        position: absolute !important;
        z-index: 10;
        top: 24px !important;
        right: 20px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 50%;
        background: rgba(255, 255, 255, .09) !important;
        color: var(--amoladero-white) !important;
        cursor: pointer;
    }

    .amoladero-header .wp-block-navigation__responsive-container-close svg {
        width: 27px !important;
        height: 27px !important;
    }


    /* Drawer navigation */

    .amoladero-header .wp-block-navigation__responsive-container-content {
        display: flex !important;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        min-height: 0;
        padding: 105px 30px 155px !important;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .amoladero-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 0 !important;
    }

    .amoladero-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .17);
    }

    .amoladero-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 18px 0;
        color: var(--amoladero-white) !important;
        font-family: var(--amoladero-font-heavy);
        font-size: clamp(1.05rem, 4.8vw, 1.35rem);
        font-weight: 800;
        line-height: 1.15;
        text-align: left;
        text-decoration: none;
        text-transform: uppercase;
        transition:
            padding-left 190ms ease,
            opacity 190ms ease;
    }

    .amoladero-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content:hover {
        padding-left: 7px;
        opacity: .78;
    }


    /* Drawer socials */

    .amoladero-mobile-socials {
        position: fixed;
        z-index: 1002;
        right: 0;
        bottom: 12px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: min(82vw, 360px);
        padding: 24px 30px max(28px, env(safe-area-inset-bottom));
        background:
            linear-gradient(
                to top,
                var(--amoladero-deep) 76%,
                rgba(0, 89, 79, 0)
            );
        border-radius: 0 0 0 20px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(104%, 0, 0);
        transition:
            transform 420ms var(--amoladero-drawer-ease),
            opacity 220ms ease,
            visibility 0s linear 420ms;
    }

    body.amoladero-menu-open .amoladero-mobile-socials,
    body:has(.wp-block-navigation__responsive-container.is-menu-open)
    .amoladero-mobile-socials {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0, 0, 0);
        transition-delay: 0s;
    }

    .amoladero-mobile-socials__label {
        margin: 0 0 12px;
        color: rgba(255, 255, 255, .72);
        font-family: var(--amoladero-font-heavy);
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .amoladero-mobile-social-icons {
        gap: 12px;
    }

    .amoladero-mobile-social-icons .wp-social-link {
        margin: 0;
        background: transparent !important;
        color: var(--amoladero-white) !important;
    }

    .amoladero-mobile-social-icons .wp-social-link a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .30);
        border-radius: 50%;
        transition:
            background 190ms ease,
            transform 190ms ease;
    }

    .amoladero-mobile-social-icons .wp-social-link a:hover {
        background: rgba(255, 255, 255, .12);
        transform: translateY(-2px);
    }


    /* Drawer always above search */

    body.amoladero-menu-open .amoladero-header__tools {
        pointer-events: none;
    }

    body.amoladero-menu-open .amoladero-search {
        opacity: 0;
    }


    /* Admin bar only affects logged-in previews */

    body.admin-bar .amoladero-header
    .wp-block-navigation__responsive-container {
        top: 46px !important;
        height: calc(100dvh - 46px) !important;
    }
}


/* ==========================================================================
   10. HERO MOBILE
   ========================================================================== */

@media (max-width: 640px) {
    .amoladero-hero,
    .amoladero-hero__content-wrap {
        min-height: clamp(620px, 82svh, 820px);
    }

    .amoladero-hero__media--desktop {
        display: none;
    }

    .amoladero-hero__media--mobile {
        display: flex;
    }

    .amoladero-hero__media--mobile .wp-block-cover__image-background {
        object-position: center;
    }

    .amoladero-hero__content-wrap {
        padding: 118px 0 60px;
    }

    .amoladero-hero__content {
        width: 100%;
    }

    .amoladero-hero__title {
        max-width: 100%;
        font-size: clamp(2.6rem, 12vw, 4.6rem);
        line-height: .92;
    }

    .amoladero-hero__lead {
        max-width: 520px;
        font-size: clamp(.9rem, 4vw, 1.05rem);
    }

    .amoladero-hero__content.is-style-hero-center {
        width: 100%;
    }
     .amoladero-hero::after {
        height: 48px;

        background-size:
            auto 100%;

        background-repeat:
            repeat-x;

        background-position:
            center bottom;
    }

}


/* ==========================================================================
   11. SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {
    :root {
        --amoladero-gutter: 18px;
        --amoladero-section-space: 60px;
    }

    .amoladero-header__inner {
        grid-template-columns: auto minmax(0, 1fr) 38px 40px;
        grid-template-rows: 68px;
        gap: 6px;
    }

    .amoladero-logo__image {
        width: clamp(48px, 13vw, 58px);
    }

    .amoladero-header__tools,
    .amoladero-search,
    .amoladero-search.is-open,
    .amoladero-search .wp-block-search__inside-wrapper {
        width: 38px !important;
        height: 38px !important;
    }

    .amoladero-search .wp-block-search__button,
    .amoladero-search .wp-block-search__button:hover {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
    }

    .amoladero-search.is-open .wp-block-search__input {
        width: min(48vw, 180px) !important;
    }

    .amoladero-header__nav,
    .amoladero-header .wp-block-navigation__responsive-container-open {
        width: 40px !important;
        height: 40px !important;
    }

    .amoladero-header .wp-block-navigation__responsive-dialog,
    .amoladero-mobile-socials {
        width: min(86vw, 340px);
    }

    .amoladero-header .wp-block-navigation__responsive-container-content {
        padding: 96px 26px 145px !important;
    }

    .amoladero-mobile-socials {
        padding: 22px 26px max(26px, env(safe-area-inset-bottom));
    }
}


/* ==========================================================================
   12. ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* ==========================================================================
   DECORACIÓN LATERAL COMPARTIDA
   ========================================================================== */

/*
 * Utilidad reutilizable para Actores, Recorrido,
 * Memorias, Investigación, etc.
 *
 * Reutiliza el mismo SVG que ya existe en el theme.
 */

.amoladero-with-side-rail {
    position: relative;

    overflow: hidden;
}


/*
 * El SVG original es horizontal.
 * Creamos una franja horizontal del ancho completo
 * y la rotamos 90°.
 *
 * Así obtenemos la decoración vertical sin crear
 * ningún SVG adicional.
 */

.amoladero-with-side-rail::before {
    content: "";

    position: absolute;

    z-index: 20;

    top: 0;
    left: 0;

    width: 100%;
    height:
        clamp(30px, 3.1vw, 48px);

    background-image:
        url("../svg/linea-decorativa-hero.svg");

    background-repeat:
        repeat-x;

    background-position:
        left center;

    background-size:
        auto 100%;

    pointer-events: none;

    transform-origin:
        top left;

    transform:
        rotate(90deg)
        translateY(-100%);
}


/* Móvil */

@media (max-width: 781px) {

    .amoladero-with-side-rail::before {
        height: 34px;
    }

}


/* ==========================================================================
   FIX IOS / MOBILE REAL — DRAWER ESTABLE + ANIMACIÓN
   --------------------------------------------------------------------------
   Objetivos:
   - evitar bug de composición de translate3d() en iOS;
   - eliminar parpadeo al abrir;
   - recuperar animación lateral suave;
   - conservar diseño actual;
   - drawer + redes se desplazan juntos;
   - no afecta desktop.
   ========================================================================== */

@media
    (max-width: 781px)
    and (hover: none)
    and (pointer: coarse) {

    :root {
        --amoladero-mobile-drawer-width:
            min(82vw, 360px);

        --amoladero-drawer-duration:
            380ms;

        --amoladero-drawer-ease:
            cubic-bezier(
                0.22,
                1,
                0.36,
                1
            );
    }


    /* ======================================================================
       OVERLAY GLOBAL
       ====================================================================== */

    .amoladero-header
    .wp-block-navigation__responsive-container {
        position:
            fixed !important;

        inset:
            0 !important;

        width:
            100% !important;

        min-width:
            100% !important;

        max-width:
            100% !important;

        height:
            100vh !important;

        height:
            100svh !important;

        min-height:
            100svh !important;

        max-height:
            100svh !important;

        margin:
            0 !important;

        padding:
            0 !important;

        overflow:
            hidden !important;

        /*
         * CRÍTICO IOS:
         * nada de translate3d en el overlay.
         */
        transform:
            none !important;

        -webkit-transform:
            none !important;

        translate:
            none !important;

        scale:
            none !important;

        rotate:
            none !important;

        will-change:
            auto !important;

        /*
         * Backdrop.
         */
        background:
            rgba(
                0,
                43,
                38,
                0.38
            )
            !important;

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;

        transition:
            opacity 220ms ease,
            visibility 0s linear
                var(--amoladero-drawer-duration)
            !important;
    }


    .amoladero-header
    .wp-block-navigation__responsive-container.is-menu-open {
        opacity:
            1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;

        transition:
            opacity 220ms ease,
            visibility 0s linear 0s
            !important;
    }


    /* ======================================================================
       WORDPRESS RESPONSIVE WRAPPER
       ====================================================================== */

    .amoladero-header
    .wp-block-navigation__responsive-close {
        position:
            absolute !important;

        inset:
            0 !important;

        width:
            100% !important;

        height:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

        transform:
            none !important;

        -webkit-transform:
            none !important;
    }


    /* ======================================================================
       DRAWER
       ----------------------------------------------------------------------
       IMPORTANTE:
       Animamos RIGHT.
       NO usamos transform.
       ====================================================================== */

    .amoladero-header
    .wp-block-navigation__responsive-dialog {
        position:
            absolute !important;

        top:
            max(
                12px,
                env(
                    safe-area-inset-top,
                    0px
                )
            )
            !important;

        /*
         * Cerrado:
         * queda completamente fuera de pantalla.
         */
        right:
            calc(
                -1 *
                var(
                    --amoladero-mobile-drawer-width
                )
                - 8px
            )
            !important;

        bottom:
            max(
                12px,
                env(
                    safe-area-inset-bottom,
                    0px
                )
            )
            !important;

        left:
            auto !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        width:
            var(
                --amoladero-mobile-drawer-width
            )
            !important;

        min-width:
            0 !important;

        max-width:
            var(
                --amoladero-mobile-drawer-width
            )
            !important;

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            calc(
                100svh - 24px
            )
            !important;

        margin:
            0 !important;

        padding:
            0 !important;

        overflow:
            hidden !important;

        box-sizing:
            border-box;

        background:
            var(--amoladero-deep)
            !important;

        color:
            var(--amoladero-white)
            !important;

        border-radius:
            20px 0 0 20px;

        box-shadow:
            -18px 0 46px
            rgba(
                0,
                0,
                0,
                0.20
            );

        /*
         * Eliminamos completamente GPU translate.
         */
        transform:
            none !important;

        -webkit-transform:
            none !important;

        translate:
            none !important;

        scale:
            none !important;

        rotate:
            none !important;

        will-change:
            auto !important;

        opacity:
            1 !important;

        /*
         * Animación principal.
         */
        transition:
            right
            var(--amoladero-drawer-duration)
            var(--amoladero-drawer-ease)
            !important;
    }


    /* Drawer abierto */

    .amoladero-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-dialog {
        right:
            0 !important;

        transform:
            none !important;

        -webkit-transform:
            none !important;
    }


    /* ======================================================================
       BOTÓN CERRAR
       ====================================================================== */

    .amoladero-header
    .wp-block-navigation__responsive-container-close {
        position:
            absolute !important;

        z-index:
            60 !important;

        top:
            max(
                24px,
                env(
                    safe-area-inset-top,
                    0px
                )
            )
            !important;

        right:
            20px !important;

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            46px !important;

        height:
            46px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        transform:
            none !important;

        -webkit-transform:
            none !important;
    }


    /* ======================================================================
       CONTENIDO DEL DRAWER
       ====================================================================== */

    .amoladero-header
    .wp-block-navigation__responsive-container-content {
        display:
            flex !important;

        flex:
            1 1 auto !important;

        flex-direction:
            column !important;

        align-items:
            stretch !important;

        justify-content:
            flex-start !important;

        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        min-height:
            0 !important;

        margin:
            0 !important;

        padding:
            105px
            30px
            155px
            !important;

        box-sizing:
            border-box;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;

        -webkit-overflow-scrolling:
            touch;

        overscroll-behavior:
            contain;

        transform:
            none !important;

        -webkit-transform:
            none !important;
    }


    /* ======================================================================
       NAV
       ====================================================================== */

    .amoladero-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            stretch !important;

        justify-content:
            flex-start !important;

        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

        gap:
            0 !important;

        transform:
            none !important;

        -webkit-transform:
            none !important;
    }


    .amoladero-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item {
        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        box-sizing:
            border-box;
    }


    .amoladero-header
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            100% !important;

        box-sizing:
            border-box;
    }


    /* ======================================================================
       REDES SOCIALES
       ----------------------------------------------------------------------
       Misma animación y misma velocidad que el drawer.
       ====================================================================== */

    .amoladero-mobile-socials {
        position:
            fixed !important;

        z-index:
            1002 !important;

        /*
         * Cerrado:
         * fuera de pantalla.
         */
        right:
            calc(
                -1 *
                var(
                    --amoladero-mobile-drawer-width
                )
                - 8px
            )
            !important;

        left:
            auto !important;

        bottom:
            max(
                12px,
                env(
                    safe-area-inset-bottom,
                    0px
                )
            )
            !important;

        width:
            var(
                --amoladero-mobile-drawer-width
            )
            !important;

        min-width:
            0 !important;

        max-width:
            var(
                --amoladero-mobile-drawer-width
            )
            !important;

        box-sizing:
            border-box;

        /*
         * Otra vez:
         * nada de transform.
         */
        transform:
            none !important;

        -webkit-transform:
            none !important;

        translate:
            none !important;

        scale:
            none !important;

        rotate:
            none !important;

        will-change:
            auto !important;

        opacity:
            1 !important;

        visibility:
            visible;

        pointer-events:
            none;

        transition:
            right
            var(--amoladero-drawer-duration)
            var(--amoladero-drawer-ease)
            !important;
    }


    /* Estado abierto */

    body.amoladero-menu-open
    .amoladero-mobile-socials,
    body:has(
        .wp-block-navigation__responsive-container.is-menu-open
    )
    .amoladero-mobile-socials {
        right:
            0 !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;

        transform:
            none !important;

        -webkit-transform:
            none !important;
    }


    /* ======================================================================
       SCROLL LOCK
       ====================================================================== */

    body.amoladero-menu-open {
        overflow:
            hidden !important;

        overscroll-behavior:
            none;
    }


    body.amoladero-menu-open
    .amoladero-header
    .wp-block-navigation__responsive-container-content {
        touch-action:
            pan-y;
    }


    body.amoladero-menu-open
    .amoladero-mobile-socials {
        touch-action:
            pan-y;
    }

}


/* ==========================================================================
   MOBILE PEQUEÑO
   ========================================================================== */

@media
    (max-width: 480px)
    and (hover: none)
    and (pointer: coarse) {

    :root {
        --amoladero-mobile-drawer-width:
            min(86vw, 340px);
    }


    .amoladero-header
    .wp-block-navigation__responsive-container-content {
        padding:
            96px
            26px
            145px
            !important;
    }


    .amoladero-mobile-socials {
        padding:
            22px
            26px
            max(
                26px,
                env(
                    safe-area-inset-bottom,
                    0px
                )
            )
            !important;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media
    (max-width: 781px)
    and (hover: none)
    and (pointer: coarse)
    and (prefers-reduced-motion: reduce) {

    .amoladero-header
    .wp-block-navigation__responsive-container,

    .amoladero-header
    .wp-block-navigation__responsive-dialog,

    .amoladero-mobile-socials {
        transition:
            none !important;
    }

}

/* ==========================================================================
   IOS / MOBILE REAL — ELIMINAR PARPADEO DE PRIMERA APERTURA
   --------------------------------------------------------------------------
   Conserva:
   - animación lateral del drawer;
   - animación lateral de redes;
   - backdrop;
   - diseño actual.

   Elimina únicamente:
   - transición opacity del overlay que genera flash en primera apertura.
   ========================================================================== */

@media
    (max-width: 781px)
    and (hover: none)
    and (pointer: coarse) {

    .amoladero-header
    .wp-block-navigation__responsive-container {
        /*
         * El overlay ya está pintado desde el principio.
         * Cuando está cerrado simplemente permanece oculto.
         */
        opacity:
            1 !important;

        visibility:
            hidden;

        pointer-events:
            none;

        /*
         * NO animamos opacity.
         *
         * Esperamos a que termine el slide para ocultarlo
         * cuando se cierra.
         */
        transition:
            visibility
            0s
            linear
            var(--amoladero-drawer-duration)
            !important;
    }


    .amoladero-header
    .wp-block-navigation__responsive-container.is-menu-open {
        opacity:
            1 !important;

        visibility:
            visible !important;

        pointer-events:
            auto !important;

        /*
         * Visible inmediatamente al abrir.
         */
        transition:
            visibility
            0s
            linear
            0s
            !important;
    }


    /*
     * El drawer mantiene exactamente
     * la animación que ya dejamos funcionando.
     */

    .amoladero-header
    .wp-block-navigation__responsive-dialog {
        opacity:
            1 !important;

        transition:
            right
            var(--amoladero-drawer-duration)
            var(--amoladero-drawer-ease)
            !important;
    }


    /*
     * Redes exactamente sincronizadas
     * con el drawer.
     */

    .amoladero-mobile-socials {
        opacity:
            1 !important;

        transition:
            right
            var(--amoladero-drawer-duration)
            var(--amoladero-drawer-ease)
            !important;
    }

}
/* HEADER — Redes sociales del drawer móvil */
@media (max-width: 1024px) {
    .amoladero-mobile-socials,
    .amoladero-mobile-socials .amoladero-mobile-social-icons,
    .amoladero-mobile-socials .wp-social-link,
    .amoladero-mobile-socials .wp-social-link a {
        pointer-events: auto !important;
    }
}