/* ══════════════════════════════════════════════════════════
   ME FIRST — HEADER C+
   Namespace `mfh-` / `.mfh__*`. Autosuficiente: no depende de
   assets/css/style.css ni del :root del bundle React, porque
   react-shell.php solo enlaza este archivo.
   Prefijo elegido porque .site-header, .brand-lockup, .brand,
   .cart-count, .icon-button, .menu-toggle, .desktop-navigation y
   .mobile-navigation YA existen en react/assets/index-*.css.
══════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────── */
:root {
    --mf-paper: #FFFAF6;
    --mf-page: #FFFEFC;
    --mf-cream: #FEF6EB;
    --mf-butter: #FEEAC6;
    --mf-berry: #D21940;
    --mf-coral: #F85735;
    --mf-ink: #202328;
    --mf-line: rgba(95, 45, 50, 0.14);
    --mf-muted: #6F6665;
}

.mfh,
.mfh-menu {
    --mfh-display: 'DM Serif Display', Georgia, serif;
    --mfh-body: 'Inter', Arial, sans-serif;
    --mfh-shadow: 0 12px 34px rgba(185, 55, 73, 0.11);
    --mfh-ease: cubic-bezier(0.2, 0.75, 0.2, 1);
    --mfh-z: 1000;
}

/* Anclas: el header C+ sólido mide 66px; el cápsula 16+66. */
html { scroll-padding-top: 84px; }

/* ── Base (estado transparente, páginas con hero) ────────── */
.mfh {
    position: fixed;
    z-index: var(--mfh-z);
    top: 0;
    left: 0;
    width: 100%;
    font-family: var(--mfh-body);
    transition: top 0.46s var(--mfh-ease);
}

/* ── Barra de avisos ─────────────────────────────────────── */
.mfh__announce {
    height: 36px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--mf-berry);
    color: #fff;
    transition: height 0.4s var(--mfh-ease), opacity 0.28s ease;
}
.mfh__announce-track { width: min(100% - 32px, 720px); display: grid; place-items: center; }
.mfh__announce-msg {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    transform: translateY(8px);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.015em;
    text-align: center;
    transition: opacity 0.45s ease, transform 0.45s var(--mfh-ease);
}
.mfh__announce-msg--on { opacity: 1; transform: translateY(0); }

/* ── Shell ───────────────────────────────────────────────── */
.mfh__wrap { padding: 14px clamp(1.25rem, 3vw, 3rem); transition: padding 0.46s var(--mfh-ease); }
.mfh__shell {
    width: 100%;
    max-width: 1440px;
    height: 84px;
    margin: 0 auto;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3.8rem);
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    transition:
        max-width 0.52s var(--mfh-ease), height 0.46s var(--mfh-ease),
        padding 0.46s var(--mfh-ease), background-color 0.36s ease,
        border-color 0.36s ease, border-radius 0.52s var(--mfh-ease),
        box-shadow 0.36s ease;
}

/* ── Cápsula (la agrega el JS a partir de scrollY >= 120) ── */
.mfh--capsule { top: 16px; }
.mfh--capsule .mfh__announce { height: 0; opacity: 0; }
.mfh--capsule .mfh__wrap { padding: 0 clamp(1.25rem, 3vw, 3rem); }
.mfh--capsule .mfh__shell {
    max-width: 1120px;
    height: 66px;
    padding: 0 10px 0 22px;
    border-color: var(--mf-line);
    border-radius: 999px;
    background: rgba(255, 250, 246, 0.82);
    box-shadow: var(--mfh-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    backdrop-filter: blur(18px) saturate(1.12);
}

/* ── Wordmark (lockup serif aprobado: "mefirst" en display) ─ */
.mfh__brand {
    min-width: max-content;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--mf-berry);
    font-family: var(--mfh-display);
    font-size: clamp(2.75rem, 4vw, 4rem);
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.9;
    text-decoration: none;
    transition: font-size 0.46s var(--mfh-ease), transform 0.3s ease;
}
.mfh__brand:hover { transform: translateY(-1px); }
.mfh__brand-first { color: var(--mf-ink); }
.mfh--capsule .mfh__brand { font-size: 1.95rem; }

/* ── Links de escritorio ─────────────────────────────────── */
.mfh__links { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 2vw, 2.1rem); }
.mfh__links a {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--mf-ink);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}
.mfh__links a::after {
    content: "";
    position: absolute; right: 0; bottom: 6px; left: 0;
    height: 2px; border-radius: 2px;
    background: var(--mf-berry);
    transform: scaleX(0); transform-origin: right;
    transition: transform 0.25s ease;
}
.mfh__links a:hover::after,
.mfh__links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* ── Acciones ────────────────────────────────────────────── */
.mfh__actions { min-width: max-content; display: flex; align-items: center; gap: 8px; }
.mfh__icon {
    position: relative;
    width: 48px; height: 48px; padding: 0;
    border: 1px solid var(--mf-line); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--mf-ink);
    background: rgba(255, 255, 255, 0.34);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.mfh__icon:hover { transform: translateY(-2px); }
.mfh__icon svg { width: 21px; height: 21px; }
.mfh__cart-count {
    position: absolute; top: -2px; right: -2px;
    min-width: 20px; height: 20px; padding: 0 5px;
    border: 2px solid var(--mf-paper); border-radius: 999px;
    display: grid; place-items: center;
    color: #fff; background: var(--mf-berry);
    font-size: 0.65rem; font-weight: 800; line-height: 1;
}
.mfh__cart-count[hidden] { display: none !important; }
.mfh__cta {
    min-height: 48px; padding: 0 20px;
    border: 1px solid var(--mf-berry); border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: var(--mf-berry);
    font-size: 0.82rem; font-weight: 700; line-height: 1;
    text-decoration: none; white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.mfh__cta:hover { border-color: var(--mf-coral); background: var(--mf-coral); color: #fff; transform: translateY(-2px); }
.mfh--capsule .mfh__cta { min-height: 44px; padding: 0 17px; }
.mfh__cta-icon { display: none; border-color: var(--mf-berry); color: #fff; background: var(--mf-berry); }
.mfh__cta-icon:hover { border-color: var(--mf-coral); background: var(--mf-coral); color: #fff; }

/* ── Hamburguesa ─────────────────────────────────────────── */
.mfh__toggle {
    display: none;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}
.mfh__toggle span,
.mfh__toggle::before,
.mfh__toggle::after {
    content: "";
    position: absolute;
    width: 19px; height: 2px; border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.mfh__toggle::before { transform: translateY(-6px); }
.mfh__toggle::after { transform: translateY(6px); }
.mfh__toggle[aria-expanded="true"] span { opacity: 0; }
.mfh__toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.mfh__toggle[aria-expanded="true"]::after { transform: rotate(-45deg); }

/* ── Menú móvil (hermano inmediato del header) ───────────── */
.mfh-menu {
    position: fixed;
    z-index: calc(var(--mfh-z) - 1);
    top: 112px; right: 14px; left: 14px;
    padding: 18px;
    border: 1px solid var(--mf-line); border-radius: 28px;
    background: rgba(255, 250, 246, 0.97);
    box-shadow: var(--mfh-shadow);
    font-family: var(--mfh-body);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.mfh-menu[hidden] { display: none !important; }
.mfh-menu__nav { display: grid; }
.mfh-menu__link {
    min-height: 54px; padding: 0 8px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--mf-line);
    color: var(--mf-ink); font-size: 1rem; font-weight: 600; text-decoration: none;
}
.mfh-menu__link::after { content: "\2197"; color: var(--mf-berry); font-size: 1.1rem; }
.mfh-menu__link:last-child { border-bottom: 0; }
.mfh-menu__cta {
    min-height: 50px; margin-top: 14px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; background: var(--mf-berry); font-weight: 700; text-decoration: none;
}
.mfh-menu__cta:hover { background: var(--mf-coral); color: #fff; }
body.mfh-menu-open { overflow: hidden; }

/* ── Estado SÓLIDO (páginas sin hero) — va DESPUÉS del base ── */
.mfh--solid {
    position: sticky;
    top: 0;
    border-bottom: 1px solid var(--mf-line);
    background: var(--mf-paper);
    transition: none;
}
.mfh--solid .mfh__announce { display: none; }
.mfh--solid .mfh__wrap { padding: 0 clamp(1.25rem, 3vw, 3rem); transition: none; }
.mfh--solid .mfh__shell {
    max-width: 1120px; height: 66px; padding: 0 10px 0 22px;
    background: var(--mf-paper); transition: none;
}
.mfh--solid .mfh__brand { font-size: 1.95rem; transition: none; }
.mfh--solid .mfh__icon { background: var(--mf-cream); }
.mfh--solid .mfh__cta-icon { background: var(--mf-berry); }

/* ── Foco ────────────────────────────────────────────────── */
.mfh a:focus-visible,
.mfh button:focus-visible,
.mfh-menu a:focus-visible {
    outline: 3px solid var(--mf-coral);
    outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════
   SCOPE react-shell.php (home, /por-que-mefirst/, /preguntas-frecuentes/)
   El bundle React monta <header class="site-header"> como hijo directo
   de #root, con .brand-lockup + nav.desktop-navigation + .header-actions
   + nav.mobile-navigation#mobile-menu adentro. NO se usa `#root header`
   ni `header` a secas: el drawer del carrito renderiza
   <header class="cart-drawer-header"> dentro de <aside id="cart-drawer">.
══════════════════════════════════════════════════════════ */
html.mfh-react { scroll-padding-top: 96px; }
html.mfh-react body { padding-top: 36px; }           /* reserva la barra de avisos */
html.mfh-react .mfh,
html.mfh-react .mfh-menu { --mfh-z: 40; }            /* > .site-header (30), < .cart-layer (100) */

/* Top-state calibrado: 6 + 68 + 6 = 80px = altura exacta de .site-header */
html.mfh-react .mfh:not(.mfh--capsule) .mfh__wrap { padding: 6px clamp(1.25rem, 3vw, 3rem); }
html.mfh-react .mfh:not(.mfh--capsule) .mfh__shell { height: 68px; }

/* .site-header del bundle: en desktop sale del flujo por completo, así el
   hero sube hasta la barra de avisos y el header C+ flota encima de la
   foto, que es el estado transparente del diseño. La franja coral vive en
   .hero-coral-strip (hijo del hero) y sobrevive: verificado en WP real.
   En ≤900px el hero no tiene aire arriba y la cápsula taparía el titular,
   así que ahí el bundle se queda en flujo como espaciador y sólo se le
   apaga la pintura y se le ocultan los hijos. */
@media (min-width: 901px) {
    html.mfh-react .site-header { display: none !important; }
}
@media (max-width: 900px) {
    html.mfh-react .site-header {
        background: transparent;
        border-bottom: 0;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    html.mfh-react .site-header > .brand-lockup,
    html.mfh-react .site-header > .desktop-navigation,
    html.mfh-react .site-header > .header-actions,
    html.mfh-react .site-header > .mobile-navigation {
        visibility: hidden;
        pointer-events: none;
    }
}

/* ── Breakpoints del header C+ (alineados con el bundle: 900 / 600) ── */
@media (min-width: 901px) { .mfh-menu { display: none; } }

@media (max-width: 1080px) {
    .mfh__links { gap: 0.8rem; }
    .mfh__links a { font-size: 0.76rem; }
    .mfh__cta { padding-right: 15px; padding-left: 15px; }
}

@media (max-width: 900px) {
    .mfh__wrap { padding: 8px 14px; }
    .mfh__shell { height: 72px; gap: 10px; padding: 0 2px; }
    .mfh--capsule { top: 12px; }
    .mfh--capsule .mfh__wrap { padding: 0 12px; }
    .mfh--capsule .mfh__shell { height: 62px; padding: 0 7px 0 17px; }
    .mfh__brand { margin-right: auto; font-size: 2.5rem; }
    .mfh--capsule .mfh__brand,
    .mfh--solid .mfh__brand { font-size: 1.7rem; }
    .mfh__links { display: none; }
    .mfh__actions { gap: 4px; }
    .mfh__cta { display: none; }
    .mfh__icon { width: 44px; height: 44px; }
    .mfh__cta-icon { display: inline-flex; }
    .mfh__toggle { display: inline-flex; }
    .mfh-menu { display: block; top: 112px; }
    .mfh--capsule + .mfh-menu { top: 86px; }
    .mfh--solid + .mfh-menu { top: 74px; }

    html.mfh-react { scroll-padding-top: 88px; }
    /* En movil el top-state se pinta opaco: entre scrollY 0 y 120 (antes de que
       entre .mfh--capsule) el hero pasa por debajo y sin fondo el copy chocaba
       con el wordmark y los iconos. El fondo va en el wrap, no en el shell,
       para tapar tambien los 4px de arriba/abajo y los 14px laterales. */
    html.mfh-react .mfh:not(.mfh--capsule) .mfh__wrap {
        padding: 4px 14px;
        background: rgba(255, 250, 246, 0.92);
        -webkit-backdrop-filter: blur(14px) saturate(1.12);
        backdrop-filter: blur(14px) saturate(1.12);
    }
    html.mfh-react .mfh:not(.mfh--capsule) .mfh__shell { height: 60px; }
    html.mfh-react .mfh:not(.mfh--capsule) + .mfh-menu { top: 104px; }
}

@media (max-width: 600px) {
    .mfh--solid .mfh__wrap { padding: 0 8px; }
    .mfh--solid .mfh__shell { padding-left: 13px; }
    .mfh__brand { font-size: 2.2rem; }
    html.mfh-react .mfh:not(.mfh--capsule) .mfh__shell { height: 56px; }
    html.mfh-react .mfh:not(.mfh--capsule) + .mfh-menu { top: 100px; }
}

@media (prefers-reduced-motion: reduce) {
    .mfh, .mfh *, .mfh *::before, .mfh *::after,
    .mfh-menu, .mfh-menu *, .mfh-menu *::before, .mfh-menu *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}