/* AMÉ — Mobile + responsive overrides on top of Intrio template
 * Loaded AFTER coloring.css to win specificity. Preserves desktop look.
 */

/* ─── Smooth scaling on all screens ──────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

/* ─── Hero typography on mobile (avoid horizontal overflow) ─────────── */
@media (max-width: 767px) {
    .fs-120 { font-size: clamp(2rem, 9vw, 3.4rem) !important; line-height: 1.05 !important; }
    .fs-100 { font-size: clamp(1.8rem, 8vw, 3rem) !important; }
    .fs-80  { font-size: clamp(1.6rem, 7vw, 2.6rem) !important; }
    .fs-60  { font-size: clamp(1.4rem, 6vw, 2.2rem) !important; }
    .display-1, .display-2, .display-3 { font-size: clamp(1.6rem, 7vw, 2.6rem) !important; line-height: 1.15 !important; }
    section { padding-top: 64px !important; padding-bottom: 64px !important; }
    .spacer-double { height: 32px; }
    body { font-size: 15px; line-height: 1.6; }
}
@media (max-width: 380px) {
    .fs-120 { font-size: clamp(1.8rem, 9vw, 2.6rem) !important; }
    body { font-size: 14.5px; }
}

/* ─── Header: refine "Cotizar" button on mobile ─────────────────────── */
/* Desktop: keep as is. Mobile: shrink + iconify. */
@media (max-width: 991px) {
    .menu_side_area .btn-main {
        padding: 0.55rem 0.95rem !important;
        font-size: 0.78rem !important;
        letter-spacing: 0.04em !important;
        font-weight: 600 !important;
    }
    .menu_side_area .btn-main span { font-size: inherit; }
}
@media (max-width: 575px) {
    /* Replace text with compact WhatsApp icon only on phones */
    .menu_side_area .btn-main {
        padding: 0 !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        background: var(--primary-color, #805231) !important;
        border: 0 !important;
    }
    .menu_side_area .btn-main::after {
        content: "";
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z'/%3E%3C/svg%3E") center/22px no-repeat;
        width: 22px;
        height: 22px;
    }
    .menu_side_area .btn-main:hover { transform: scale(1.06) !important; }
}

/* ─── Hamburger / mobile menu button ────────────────────────────────── */
#menu-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 8px !important;
    transition: background 0.2s ease !important;
}
@media (max-width: 575px) {
    .menu_side_area { gap: 8px; display: inline-flex; align-items: center; }
}

/* ─── Mobile main menu — make it elegant ────────────────────────────── */
@media (max-width: 1023px) {
    #mainmenu {
        background: rgba(255, 253, 247, 0.99) !important;
        backdrop-filter: blur(8px);
        box-shadow: 0 12px 32px -12px rgba(0,0,0,0.18) !important;
        border-top: 1px solid rgba(0,0,0,0.06);
        padding: 6px 0 14px !important;
    }
    #mainmenu li a.menu-item {
        font-family: 'Cormorant Garamond', 'Georgia', serif !important;
        font-size: 1.18rem !important;
        font-weight: 500 !important;
        letter-spacing: 0.01em !important;
        padding: 14px 24px !important;
        color: #2A2725 !important;
        border-bottom: 1px solid rgba(0,0,0,0.04) !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        text-transform: none !important;
    }
    #mainmenu li a.menu-item.active,
    #mainmenu li a.menu-item:hover {
        background: rgba(128, 82, 49, 0.06) !important;
        color: #805231 !important;
    }
    #mainmenu li ul li a {
        font-size: 0.95rem !important;
        padding: 10px 24px 10px 40px !important;
        color: #5A554F !important;
        letter-spacing: 0.02em !important;
        font-family: 'Manrope', sans-serif !important;
        text-transform: none !important;
    }
}

/* ─── Headers logo crispness ─────────────────────────────────────────── */
header #logo img { max-height: 48px !important; width: auto !important; }
@media (max-width: 575px) {
    header #logo img { max-height: 38px !important; }
}

/* ─── Logo — single colored variant on permanent light header ───────── */
header #logo .logo-main { display: block !important; }
header #logo .logo-scroll,
header #logo .logo-mobile { display: none !important; }
header #logo img { filter: none !important; }

/* ─── Menu link colors — dark so they're readable on light navbar ───── */
header #mainmenu > li > a,
header #mainmenu li a.menu-item,
header #mainmenu > li > a span {
    color: #2A2725 !important;  /* deep charcoal, contrast on cream bg */
}
header #mainmenu > li > a:hover,
header #mainmenu > li:hover > a,
header #mainmenu > li > a.active,
header #mainmenu > li > a:hover span {
    color: #805231 !important;  /* brand cognac on hover/active */
}
header #mainmenu li.has-child:after {
    color: rgba(42, 39, 37, 0.55) !important;
}
/* Submenu items keep their gray but a touch darker */
header #mainmenu li ul li a {
    color: #4A4744 !important;
    background: transparent !important;
    transition: background 0.18s ease, color 0.18s ease;
}
/* On hover, Intrio paints the bg cognac — force the text white for contrast */
header #mainmenu li ul li:hover > a,
header #mainmenu li ul li a:hover,
header #mainmenu li ul li.active > a {
    color: #ffffff !important;
    background: #805231 !important;
}
/* Hamburger icon visible on light bg */
#menu-btn {
    background-color: transparent;
}
#menu-btn::before,
#menu-btn::after,
#menu-btn span {
    background-color: #2A2725 !important;
}

/* ─── Hero sections — full viewport, account for fixed header ───────── */
/* Home magazine hero (full-bleed swiper) */
#section-intro,
#section-intro.mh-800 .mh-800 { min-height: 100vh !important; }
#section-intro .mh-800 { min-height: 100vh !important; }
/* Shift the absolutely-positioned middle text down to clear the fixed header.
   Without this, on short viewports (mobile landscape) the H1 lands behind
   the navbar. */
#section-intro .abs.abs-middle {
    top: calc(50% + var(--ame-header-h) / 2) !important;
}
/* Inner-page hero (PageHero.astro component) */
section.bg-dark.text-light.jarallax {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    padding-top: calc(var(--ame-header-h) + 1rem) !important;
    padding-bottom: 2rem !important;
}
section.bg-dark.text-light.jarallax > .container {
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
}
/* When the inner content would overflow the available vertical space (very
   short viewports like mobile-landscape), scroll inside the hero rather than
   letting content slide under the fixed header. */
section.bg-dark.text-light.jarallax > .container > * {
    flex-shrink: 0;
}

/* Any first section directly inside <main> that is NOT a hero gets header-
   height padding so its content never sits under the fixed navbar, AND is
   stretched to ~viewport height for the "all heroes full-screen" rule.
   Covers pages without PageHero (e.g. /equipo/lanzamiento). */
body > main > section:first-of-type:not(#section-intro):not(.jarallax) {
    padding-top: calc(var(--ame-header-h) + 1.5rem) !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ─── Footer mobile centering ─────────────────────────────────────────── */
@media (max-width: 767px) {
    footer { text-align: center; }
    footer .widget { text-align: center; margin-bottom: 32px; }
    footer .social-icons { justify-content: center; }
    footer .subfooter { text-align: center; }
}

/* ─── Make CTA buttons sized for touch ───────────────────────────────── */
@media (max-width: 575px) {
    .btn-main, .btn-line, .btn-color, .button-main, button.button-main {
        min-height: 44px;
    }
}

/* ─── Prevent horizontal scroll on ALL viewports (defensive root guard) ─ */
html, body { overflow-x: hidden !important; max-width: 100vw; position: relative; }
@media (max-width: 575px) {
    .container, .container-fluid { padding-left: 16px; padding-right: 16px; }
}

/* The Intrio mobile mainmenu was positioned at left:20 width:100vw, causing
   ~20px overflow on the right. Cap to viewport. */
@media (max-width: 1023px) {
    #mainmenu {
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

/* The off-canvas overlay (#extra-wrap) sits at right:-500px in Intrio's CSS,
   which keeps it visually offscreen but its bounding-box still adds 500px to
   the document scrollWidth. Hide it from layout entirely when not open. */
#extra-wrap:not(.open) { display: none !important; }
#extra-wrap.open { right: 0 !important; }

/* Owl Carousel: ensure stage doesn't bleed past container. */
.owl-carousel,
.owl-stage-outer,
.owl-2-cols,
.owl-4-cols-center,
.owl-single-dots,
.owl-theme { overflow: hidden !important; }

/* ─── Smooth scroll behavior ─────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ─── Reduce motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─── Botón primario AMÉ — centrado perfecto X+Y y altura uniforme ──── */
.btn-main {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 48px;
    line-height: 1.2 !important;
    padding-left: 1.6rem !important;
    padding-right: 1.6rem !important;
    vertical-align: middle;
    white-space: nowrap;
}
.btn-main > span {
    display: inline-block;
    line-height: 1.2;
}
.btn-main.w-100 { display: flex !important; width: 100%; }
@media (max-width: 575px) {
    .btn-main { min-height: 44px; padding-left: 1.2rem !important; padding-right: 1.2rem !important; }
}

/* ─── Hero scroll-down indicator — minimal, elegant, animated ───────── */
.ame-hero-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    margin-left: -22px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: transparent;
    backdrop-filter: blur(4px);
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    z-index: 5;
    cursor: pointer;
    animation: ame-bob 2.4s ease-in-out infinite;
}
.ame-hero-scroll:hover,
.ame-hero-scroll:focus {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}
.ame-hero-scroll svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transform: translateY(1px);
}
@keyframes ame-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}
/* Home hero #section-intro has light/dark bg via swiper — keep white scheme.
   PageHero is bg-dark text-light — same scheme works. */
@media (prefers-reduced-motion: reduce) {
    .ame-hero-scroll { animation: none; }
}
@media (max-width: 575px) {
    .ame-hero-scroll {
        bottom: 18px;
        width: 38px;
        height: 38px;
        margin-left: -19px;
    }
    .ame-hero-scroll svg { width: 15px; height: 15px; }
}

/* ─── Blog post body images — polished defaults ─────────────────────── */
.blog-read img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 32px 0 !important;
    box-shadow: 0 12px 32px -12px rgba(0,0,0,0.18);
    display: block;
}
.blog-read figure { margin: 32px 0; }
.blog-read figure img { margin: 0 !important; }
.blog-read figcaption {
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 10px;
    font-style: italic;
}

/* (Hero overrides removed by request — restore original Intrio layout on mobile) */

/* ─── Footer big "up-right-arrow" — hide on mobile ──────────────────── */
@media (max-width: 767px) {
    footer .w-60px[src*="up-right-arrow"],
    footer img[src*="up-right-arrow"] { display: none !important; }
    footer .d-flex.align-items-center.justify-content-between h2 { text-align: center; width: 100%; }
}

/* ─── btn-line variant for secondary CTA inside dark cards ─────────── */
.btn-line {
    display: inline-block;
    padding: 8px 18px;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 4px;
    transition: all 0.2s ease;
}
.btn-line:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.08); }

/* ─── Phone: hide WA button from navbar entirely (FAB does the job) ──── */
@media (max-width: 767px) {
    .menu_side_area .btn-main { display: none !important; }
}

/* ─── Floating WhatsApp FAB (mobile + desktop bottom-right) ─────────── */
.ame-fab-wa {
    position: fixed;
    bottom: 18px;
    right: 18px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #25D366;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px -3px rgba(37,211,102,0.45), 0 1px 3px rgba(0,0,0,0.12);
    z-index: 9999;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}
.ame-fab-wa:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 20px -3px rgba(37,211,102,0.6), 0 2px 6px rgba(0,0,0,0.15);
    color: #fff !important;
}
.ame-fab-wa svg { width: 22px; height: 22px; fill: #fff; }
@media (max-width: 767px) {
    .ame-fab-wa { bottom: 14px; right: 14px; width: 44px; height: 44px; }
    .ame-fab-wa svg { width: 20px; height: 20px; }
}

/* ─── Inline CTA bars throughout the site ────────────────────────────── */
.ame-cta-strip {
    background: linear-gradient(135deg, #2A2725 0%, #805231 100%);
    color: #fff;
    padding: 32px 24px;
    border-radius: 8px;
    text-align: center;
    margin: 32px 0;
}
.ame-cta-strip h3 { color: #fff; margin-bottom: 8px; font-size: 1.5rem; }
.ame-cta-strip p { color: rgba(255,255,255,0.85); margin-bottom: 20px; }
.ame-cta-strip .btn-main { background: #25D366 !important; border: 0; }
.ame-cta-strip .btn-main:hover { background: #1ebe5a !important; }

@media (max-width: 575px) {
    .ame-cta-strip { padding: 24px 18px; margin: 24px 0; }
    .ame-cta-strip h3 { font-size: 1.2rem; }
}

/* ─── Sticky header — always visible, always solid light background ─── */
header.transparent,
header {
    position: fixed !important;
    top: 0 !important; left: 0; right: 0;
    width: 100%;
    z-index: 30000 !important;  /* above #de-loader (z=20000) so visible during load */
    background: rgba(255, 253, 247, 0.97) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 24px -10px rgba(0,0,0,0.18);
    transition: background 0.2s ease, box-shadow 0.2s ease;
    margin-top: 0 !important;
}
header.header-solid {
    background: rgba(255, 253, 247, 0.97) !important;
}
/* Intrio's designesia.js adds .scroll-down (margin-top: -90px) and .smaller.
   We want the header ALWAYS visible — neutralize the hide rule. */
header.scroll-down,
header.scroll-up,
header.smaller,
header.smaller.scroll-down,
header.smaller.scroll-up,
header.clone {
    margin-top: 0 !important;
    top: 0 !important;
    transform: none !important;
}
/* Reserve room so the fixed header doesn't sit on top of section content.
   Values include a small safety margin over the actual rendered header. */
:root { --ame-header-h: 92px; }
@media (max-width: 1023px) { :root { --ame-header-h: 80px; } }
@media (max-width: 767px)  { :root { --ame-header-h: 76px; } }
body > main { padding-top: 0; }