/* ========================================================================== Chrome — header + footer for the homepage layouts Matches the final design: a light nav and a light footer, purple CTA accent. Hooks (.yg-head / .yg-foot-wrap) are added at runtime by the header layout script. The theme's own wrapper classes are unusable: Qwery caches the layout slug, so a rename leaves a stale class, and the id variant would bake this install's post ids into the stylesheet. !important is used throughout on purpose: Qwery styles .top_panel, .footer_wrap and .elementor-button at equal specificity from stylesheets that load after this one, so plain rules lose the cascade. These layouts are used ONLY by the homepage pages, so nothing here can affect the rest of the site. ========================================================================== */ :root{ --yg-terra:#B8967A; --yg-brown:#5A5040; --yg-gray:#8A8070; --yg-gray-l:#B8B4A8; --yg-purple:#8A70A8; --yg-beige:#F8F4EC; --yg-sand:#F5EDE3; --yg-font-s:'Cormorant Garamond',Georgia,serif; --yg-font-b:'DM Sans',-apple-system,sans-serif; } /* ─── HEADER ─── Matches the nav of the Método REIA® design: a constant light sand bar (no scroll-state change), 54px logo, centred menu, lila outline CTA. */ header.yg-head.top_panel, header.yg-head.yg-scrolled.top_panel{ position:fixed!important;top:0!important;left:0!important;right:0!important; z-index:1000!important; background:rgba(245,237,227,.95)!important; -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(184,150,122,.15)!important; } header.yg-head .elementor-section{padding:18px 6%!important} header.yg-head .elementor-container{max-width:100%!important;min-height:54px} header.yg-head .elementor-widget-wrap{align-content:center} /* the theme spaces stacked layout items 9px apart; the bar has one per column */ header.yg-head .sc_layouts_item{margin:0!important} /* desktop row: logo | menu | CTA spread like the design's space-between flex */ header.yg-head .sc_layouts_hide_on_tablet>.elementor-container{ display:flex!important;justify-content:space-between!important;align-items:center;gap:24px; } header.yg-head .sc_layouts_hide_on_tablet>.elementor-container>.elementor-column{ width:auto!important;flex:0 0 auto!important; } /* the menu column takes the free space and centres the menu in it — the same result as space-between, and wide enough that Qwery's overflow "collapse" (which folds items that do not fit into a "…" submenu) never triggers */ header.yg-head .sc_layouts_hide_on_tablet>.elementor-container>.elementor-column:nth-child(2){ flex:1 1 auto!important; } header.yg-head .sc_layouts_hide_on_tablet>.elementor-container>.elementor-column:nth-child(2)>.elementor-widget-wrap{ justify-content:center!important; } /* logo — the theme logo widget keeps the link home */ header.yg-head .yg-logo img{height:54px!important;width:auto!important;max-height:none!important} /* menu */ header.yg-head .sc_layouts_menu_nav>li{margin:0!important} header.yg-head .sc_layouts_menu_nav>li+li{margin-left:34px!important} header.yg-head .sc_layouts_menu_nav>li>a{ font-family:var(--yg-font-b)!important; font-size:14px!important;font-weight:300!important;letter-spacing:normal!important; text-transform:none!important;line-height:1.3!important; padding:0!important; color:#6A6050!important;transition:color .25s ease; } header.yg-head .sc_layouts_menu_nav>li>a:hover, header.yg-head .sc_layouts_menu_nav>li.current-menu-item>a{color:#A07A62!important} header.yg-head .sc_layouts_menu_nav>li>a:before, header.yg-head .sc_layouts_menu_nav>li>a:after{display:none!important} /* submenu */ header.yg-head .sc_layouts_menu_nav ul{ background:rgba(253,250,246,.97)!important; -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border:1px solid rgba(184,150,122,.1)!important; border-radius:14px!important;padding:8px!important; box-shadow:0 12px 40px rgba(106,96,80,.12)!important; } header.yg-head .sc_layouts_menu_nav ul li a{ font-family:var(--yg-font-b); font-size:13px!important;font-weight:400!important; color:var(--yg-brown)!important;border-radius:8px;padding:9px 14px!important; } header.yg-head .sc_layouts_menu_nav ul li a:hover{background:var(--yg-beige)!important} /* CTA pill — lila outline, fills on hover */ header.yg-head .yg-cta .sc_button{ font-family:var(--yg-font-b); font-size:13.5px!important;font-weight:500!important;letter-spacing:.01em!important; line-height:1.6!important;text-transform:none!important; padding:10px 22px!important;border-radius:24px!important; background:transparent!important; border:1.5px solid rgba(138,112,168,.45)!important; color:var(--yg-purple)!important; transition:all .3s ease;min-width:0!important; } header.yg-head .yg-cta .sc_button:hover{ background:var(--yg-purple)!important;color:#fff!important;border-color:var(--yg-purple)!important; } /* burger on tablet/mobile — dark on the light bar; the glyph is a span of its own */ header.yg-head .sc_layouts_menu_mobile_button_burger, header.yg-head .sc_layouts_menu_mobile_button_burger:before, header.yg-head .sc_layouts_menu_mobile_button_burger>a, header.yg-head .sc_layouts_menu_mobile_button_burger .sc_layouts_item_icon{color:var(--yg-brown)!important} /* tablet/mobile row: logo left, burger (+ CTA on tablet) right, one line — Elementor would otherwise stack the two columns full width on phones */ header.yg-head .sc_layouts_hide_on_desktop>.elementor-container{ display:flex!important;flex-wrap:nowrap!important;align-items:center;justify-content:space-between!important; } header.yg-head .sc_layouts_hide_on_desktop>.elementor-container>.elementor-column{ width:auto!important;flex:0 0 auto!important; } header.yg-head .sc_layouts_hide_on_desktop>.elementor-container>.elementor-column>.elementor-widget-wrap{ flex-wrap:nowrap!important;align-items:center;gap:18px; } @media(max-width:900px){ header.yg-head .elementor-section{padding:14px 5%!important} header.yg-head .yg-logo img{height:44px!important} } /* ─── FOOTER ─── Matches the footer of the Método REIA® design: beige, four columns (brand · Servicios · Contacto · Acreditación), serif italic column heads, then a bottom bar with the copyright and the WP-managed legal menu. */ footer.yg-foot-wrap{ background:var(--yg-beige)!important; border-top:1px solid rgba(200,168,96,.2)!important; } footer.yg-foot-wrap .footer_wrap_inner{background:transparent!important} footer.yg-foot-wrap .elementor-section{padding:0!important} footer.yg-foot-wrap .elementor-container{max-width:100%!important} footer.yg-foot-wrap .elementor-widget-wrap{padding:0!important} /* the theme sizes .sc_layouts_item to its content, which collapses the grid */ footer.yg-foot-wrap .sc_layouts_item, footer.yg-foot-wrap .elementor-widget-html, footer.yg-foot-wrap .elementor-widget-container, footer.yg-foot-wrap .yg-foot{width:100%!important;max-width:100%!important} /* width alone is not enough: the item is a flex child whose basis keeps it shrink-to-fit, so the grid inside collapses to its content width. */ footer.yg-foot-wrap .elementor-widget-wrap>.sc_layouts_item{flex:1 1 100%!important} footer.yg-foot-wrap .sc_layouts_item{margin:0!important} .yg-foot{box-sizing:border-box;padding:70px 6% 0;font-family:var(--yg-font-b)} .yg-foot *{box-sizing:border-box} .yg-foot .yg-foot-inner{ max-width:1200px;margin:0 auto 56px; display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:48px; } .yg-foot .yg-foot-logo{height:68px;width:auto;max-width:100%;margin-bottom:14px;display:block} .yg-foot .yg-foot-tagline{ font-size:14px;font-weight:300;line-height:1.6; color:#6A6050;max-width:300px;margin:0 0 20px; } .yg-foot .yg-foot-social{display:flex;gap:12px} .yg-foot .yg-foot-social a{ width:36px;height:36px;border-radius:50%; background:rgba(184,150,122,.1);color:#6A6050!important; display:flex;align-items:center;justify-content:center; text-decoration:none;transition:all .25s ease; } .yg-foot .yg-foot-social a:hover{background:var(--yg-terra);color:#fff!important} .yg-foot .yg-foot-social svg{display:block} .yg-foot .yg-foot-h{ font-family:var(--yg-font-s);font-style:italic;font-weight:400; font-size:18px;line-height:1.3;color:var(--yg-brown);margin-bottom:18px; } .yg-foot .yg-foot-links{display:flex;flex-direction:column;gap:10px} .yg-foot .yg-foot-links a{ font-size:13.5px;font-weight:300;line-height:1.5;color:#6A6050!important; text-decoration:none;transition:color .25s ease; } .yg-foot .yg-foot-links a:hover{color:#A07A62!important} /* Acreditación. Only a white version of the official artwork exists, so it sits on a dark panel. Do not recolour or invert it: the flag's colours are prescribed. */ .yg-foot .yg-foot-acc .yg-foot-h{margin-bottom:16px} .yg-foot .yg-foot-banner{ padding:14px;border-radius:10px;background:#5A5040;margin-bottom:12px; } .yg-foot .yg-foot-banner img{width:100%;height:auto;display:block} .yg-foot .yg-foot-caption{font-size:12px;font-weight:300;line-height:1.5;color:#6A6050;margin:0} /* Bottom bar — copyright left, WP-managed legal menu right. Hooked on :last-child, not on a section class: Elementor renders custom classes on widgets only. The section carries the 6% gutter and the container the 1200px box, so the rule lines up with the grid above. */ footer.yg-foot-wrap .elementor-top-section:last-child{padding:0 6%!important} footer.yg-foot-wrap .elementor-top-section:last-child>.elementor-container{ box-sizing:border-box; max-width:1200px!important;margin:0 auto!important; padding:24px 0 30px!important; border-top:1px solid rgba(184,150,122,.15); } footer.yg-foot-wrap .yg-foot-copy, footer.yg-foot-wrap .yg-foot-copy p{ font-family:var(--yg-font-b); font-size:12px!important;font-weight:300;line-height:1.5;color:var(--yg-gray)!important;margin:0; } footer.yg-foot-wrap .yg-foot-copy a{color:var(--yg-gray)!important;text-decoration:none;line-height:inherit!important} footer.yg-foot-wrap .yg-foot-copy a:hover{color:#A07A62!important} footer.yg-foot-wrap .yg-foot-legal .sc_layouts_menu_nav{ display:flex!important;flex-direction:row!important;justify-content:flex-end;gap:6px 18px;flex-wrap:wrap; } footer.yg-foot-wrap .elementor-widget-wrap>.sc_layouts_item.elementor-element{margin:0!important} /* the theme's clearfix ::before/::after on the menu