/* ==========================================================================
   Gaia Evolución del Ser — Layout: Header, Footer, Menu, Offcanvas, Grid
   Extracted from Blocksy main.min.css + index.html structure
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Header — #header
   Source: Blocksy ct-header + index.html
   -------------------------------------------------------------------------- */

#header {
  position: relative;
  z-index: 50;
}

.ct-header {
  position: relative;
}

.ct-header [data-row] {
  position: relative;
}

.ct-sticky-container {
  position: relative;
}

/* Sticky header — shrinks on scroll */
.ct-header--sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ct-header--sticky [data-sticky="shrink"] {
  transition: padding 0.25s ease;
}

/* Header rows (top bar, middle, bottom) */
.ct-header [data-row="top"] {
  background: var(--color-bg-light);
  padding: 8px 0;
  font-size: 13px;
  z-index: 3;
}

.ct-header [data-row="middle"] {
  z-index: 2;
  padding: 15px 0;
}

.ct-header [data-row="bottom"] {
  z-index: 1;
}

/* Transparent header — used for hero overlays */
.ct-header [data-transparent-row="yes"] {
  background: transparent !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.ct-header [data-transparent-row="yes"] [data-row] {
  background: transparent;
}

/* Header row columns */
.ct-header [data-column-set] {
  display: flex;
}

.ct-header [data-column-set] .ct-container {
  display: flex;
  align-items: center;
  min-height: inherit;
  width: 100%;
}

.ct-header [data-column="start"] {
  display: flex;
  justify-content: flex-start;
}

.ct-header [data-column="middle"] {
  display: flex;
  justify-content: center;
  flex: 1;
}

.ct-header [data-column="end"] {
  display: flex;
  justify-content: flex-end;
}

.ct-header [data-items] {
  display: flex;
  align-items: center;
}

.ct-header [data-column="start"] [data-items="primary"] {
  justify-content: flex-start;
}

.ct-header [data-column="end"] [data-items="primary"] {
  justify-content: flex-end;
}

/* Header text element (top bar announcements) */
.ct-header-text {
  width: 100%;
}

.ct-header-text[data-width="stretch"] {
  flex: 1;
}

.ct-header-text .entry-content {
  font-size: 13px;
  line-height: 1.4;
}

.ct-header-text .entry-content p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   2. Logo / Site Branding
   -------------------------------------------------------------------------- */

.site-branding {
  display: flex;
  align-items: center;
}

.site-logo-container {
  display: block;
  max-height: 85px;
}

.site-logo-container img {
  height: auto;
  max-height: 85px;
  width: auto;
}

/* Sticky logo: hidden by default / shown when sticky */
.sticky-logo {
  display: none;
}

.ct-header--sticky .sticky-logo {
  display: block;
}

.ct-header--sticky .default-logo {
  display: none;
}

/* In transparent header, show light logo */
[data-transparent-row="yes"] .default-logo {
  display: block;
}

[data-transparent-row="yes"] .sticky-logo {
  display: none;
}

/* --------------------------------------------------------------------------
   3. Desktop Menu — .ct-menu / #header-menu
   Source: index.html #header-menu-1 + Blocksy global.css
   -------------------------------------------------------------------------- */

.menu-container {
  display: flex;
  align-items: center;
}

/* Top level menu */
.menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 40px; /* --menu-items-spacing */
}

.menu li {
  position: relative;
}

.menu > li > a,
.ct-menu-link {
  display: flex;
  align-items: center;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 0;
  transition: var(--theme-transition);
}

.menu > li > a:hover,
.menu > li.current-menu-item > a {
  color: var(--color-primary);
}

/* Transparent header menu items */
[data-transparent-row="yes"] .menu > li > a {
  color: rgba(255, 255, 255, 0.75);
}

[data-transparent-row="yes"] .menu > li > a:hover,
[data-transparent-row="yes"] .menu > li.current-menu-item > a {
  color: var(--color-white);
}

/* Sticky header menu color */
.ct-header--sticky .menu > li > a {
  color: var(--color-text);
}

.ct-header--sticky .menu > li > a:hover {
  color: var(--color-primary);
}

/* Dropdown toggle (arrow) */
.ct-toggle-dropdown-desktop {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
}

.ct-toggle-dropdown-desktop svg {
  width: 8px;
  height: 8px;
  fill: currentColor;
}

.ct-toggle-dropdown-desktop .ct-icon {
  transition: transform 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.menu-item:hover > a > .ct-toggle-dropdown-desktop .ct-icon {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   4. Dropdown / Submenu
   Source: Blocksy global.css — submenu styles
   -------------------------------------------------------------------------- */

.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 200px;
  background: var(--color-primary);
  border-radius: 2px;
  box-shadow: 0 10px 20px rgba(41, 51, 61, 0.1);
  list-style: none;
  margin: 0;
  padding: 13px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

/* Dropdown offset: the Global CSS sets --dropdown-top-offset: -25px */
.sub-menu {
  margin-top: -25px;
  padding-top: 38px; /* 25px offset + 13px padding */
}

.menu-item:hover > .sub-menu,
.menu-item:focus-within > .sub-menu,
.menu-item-has-children.submenu-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sub-menu .menu-item {
  position: relative;
}

.sub-menu .ct-menu-link {
  display: block;
  padding: 6px 20px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  color: #ffffff;
  text-transform: none;
  text-decoration: none;
  transition: var(--theme-transition);
}

.sub-menu .ct-menu-link:hover {
  color: var(--color-gold-light);
}

/* Dividers between dropdown items */
.sub-menu .menu-item + .menu-item {
  border-top: 1px dotted rgba(250, 251, 252, 0.2);
  padding-top: 13px;
}

.sub-menu .menu-item + .menu-item .ct-menu-link {
  padding-top: 19px;
}

/* Nested submenus (level 2) */
.sub-menu .sub-menu {
  top: -38px;
  left: 100%;
  margin-top: 0;
  padding-top: 13px;
}

/* Animated submenu — using .animated-submenu-block on parent li */
.animated-submenu-block > .sub-menu,
.animated-submenu-inline > .sub-menu {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   5. Mobile Menu Toggle (hamburger)
   Source: index.html — ct-header-trigger
   -------------------------------------------------------------------------- */

.ct-header-trigger {
  display: none; /* hidden on desktop */
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.ct-header-trigger .ct-icon {
  fill: currentColor;
}

.ct-header-trigger .ct-label {
  margin-left: 7px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Transparent header hamburger color */
[data-transparent-row="yes"] .ct-header-trigger {
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   6. Offcanvas panel (mobile menu side panel)
   Source: index.html #offcanvas + Blocksy ct-panel
   -------------------------------------------------------------------------- */

.ct-drawer-canvas {
  position: fixed;
  z-index: 100;
}

#offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  width: 100%;
  max-width: 400px;
  background: var(--color-white);
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

#offcanvas[aria-hidden="false"],
#offcanvas:not([inert]) {
  transform: translateX(0);
}

/* Overlay behind offcanvas */
.ct-drawer-canvas::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 99;
}

.ct-drawer-canvas[data-location="start"]:has(#offcanvas:not([inert]))::before {
  opacity: 1;
  visibility: visible;
}

/* Close button */
.ct-panel-actions {
  display: flex;
  justify-content: flex-end;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.ct-toggle-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--color-text);
  transition: var(--theme-transition);
}

.ct-toggle-close:hover {
  color: var(--color-primary);
}

.ct-toggle-close svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* Mobile menu inside offcanvas */
.ct-panel-content {
  padding: 20px;
}

.ct-panel-content .mobile-menu {
  margin-top: 20px;
}

.mobile-menu .menu {
  flex-direction: column;
  gap: 0;
}

.mobile-menu .menu li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-menu .ct-menu-link {
  padding: 13px 0;
  font-size: 14px;
  font-weight: 600;
}

/* Submenu toggle in mobile */
.ct-sub-menu-parent {
  display: flex;
  align-items: center;
}

.ct-sub-menu-parent > a {
  flex: 1;
}

.ct-toggle-dropdown-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
}

.ct-toggle-dropdown-mobile svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.ct-toggle-dropdown-mobile[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.mobile-menu .sub-menu {
  position: static;
  background: var(--color-bg-light);
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  margin: 0;
  padding: 0 0 0 15px;
  min-width: auto;
  display: none;
}

.mobile-menu .sub-menu .ct-menu-link {
  color: var(--color-text);
  font-size: 13px;
}

.mobile-menu .sub-menu .ct-menu-link:hover {
  color: var(--color-primary);
}

.mobile-menu .sub-menu .menu-item + .menu-item {
  border-top: none;
  padding-top: 0;
}

.mobile-menu .sub-menu .menu-item + .menu-item .ct-menu-link {
  padding-top: 13px;
}

/* Submenu visible when parent button aria-expanded="true" */
.ct-toggle-dropdown-mobile[aria-expanded="true"] + .sub-menu,
.ct-toggle-dropdown-mobile[aria-expanded="true"] ~ .sub-menu {
  display: block;
}

/* --------------------------------------------------------------------------
   7. Footer — #footer
   Source: index.html footer + Blocksy ct-footer
   -------------------------------------------------------------------------- */

#footer {
  background: var(--color-bg-light);
  padding: 60px 0 0;
  margin-top: 60px;
}

.ct-footer [data-row="middle"] {
  padding-bottom: 40px;
}

.ct-footer [data-row="middle"] .ct-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: 40px;
}

.ct-footer [data-row="bottom"] {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 25px 0;
}

.ct-footer [data-row="bottom"] .ct-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

/* Offcanvas scroll lock */
body.ct-offcanvas-active {
  overflow: hidden;
}

/* Footer widgets */
.ct-widget {
  margin-bottom: 25px;
}

/* WordPress block groups (vertical layout) */
.wp-block-group.is-vertical.is-layout-flex {
  flex-direction: column;
  align-items: flex-start;
}

.ct-widget h4,
.ct-widget .wp-block-heading {
  font-family: var(--font-primary);
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 15px;
}

.ct-widget .widget-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ct-widget .widget-menu li {
  margin-bottom: 8px;
}

.ct-widget .widget-menu a {
  color: var(--color-text);
  font-size: 14px;
  text-decoration: none;
  transition: var(--theme-transition);
}

.ct-widget .widget-menu a:hover {
  color: var(--color-primary);
}

/* Contact info block in footer */
.ct-contact-info-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ct-contact-info-block li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 18px;
}

.ct-contact-info-block .ct-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--color-lavender);
  border-radius: 50%;
}

.ct-contact-info-block .ct-icon-container svg {
  width: 18px;
  height: 18px;
  fill: var(--color-primary);
}

.ct-contact-info-block .contact-info {
  display: flex;
  flex-direction: column;
}

.ct-contact-info-block .contact-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 3px;
}

.ct-contact-info-block .contact-text {
  font-size: 14px;
  color: var(--color-text);
}

.ct-contact-info-block .contact-text a {
  color: var(--color-text);
  text-decoration: none;
  transition: var(--theme-transition);
}

.ct-contact-info-block .contact-text a:hover {
  color: var(--color-primary);
}

/* Social icons in footer */
.ct-socials-block {
  margin-top: 10px;
}

.ct-social-box {
  display: flex;
  gap: 20px;
}

.ct-social-box a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-lavender);
  border-radius: 50%;
  transition: background 0.2s ease;
}

.ct-social-box a:hover {
  background: var(--color-bg-light);
}

.ct-social-box .ct-icon-container {
  display: flex;
}

.ct-social-box svg {
  width: 20px;
  height: 20px;
  fill: var(--color-primary);
}

/* Footer copyright */
.ct-footer-copyright {
  font-size: 13px;
  color: var(--color-text);
}

.ct-footer-copyright p {
  margin: 0;
}

.ct-footer-copyright a {
  color: var(--color-primary);
  text-decoration: none;
}

.ct-footer-copyright a:hover {
  color: var(--color-secondary);
}

/* Footer menu (legal links) */
.footer-menu-inline .menu {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-menu-inline .ct-menu-link {
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  color: var(--color-text);
}

.footer-menu-inline .ct-menu-link:hover {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   8. Main Content Area
   -------------------------------------------------------------------------- */

#main-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1;
}

.ct-container-full[data-content="normal"] {
  width: 100%;
}

/* Entry content */
.entry-content {
  width: 100%;
}

.entry-content.is-layout-constrained > * {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
}

.entry-content.is-layout-constrained > .alignfull,
.entry-content.is-layout-constrained > .ct-section-stretched {
  max-width: none;
}

/* --------------------------------------------------------------------------
   9. Elementor-style Container (e-con / Flexbox containers)
   Source: Elementor 4.x container system
   -------------------------------------------------------------------------- */

.e-con {
  --container-max-width: 1140px;
  display: flex;
}

.e-con.e-flex {
  flex-direction: column;
}

.e-con.e-con-boxed {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
}

.e-con-inner {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.e-con-full {
  flex: 1;
}

/* Layout direction helpers */
.e-con.e-flex.e-con-row {
  flex-direction: row;
}

.e-con.e-flex.e-con-column {
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   10. Elementor Section — legacy row-based columns
   Source: Elementor frontend.min.css + index.html
   -------------------------------------------------------------------------- */

.elementor-section {
  position: relative;
}

.elementor-section .elementor-container {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--container-width);
}

.elementor-top-section > .elementor-container {
  flex-wrap: wrap;
}

.elementor-column {
  position: relative;
  display: flex;
  min-height: 1px;
}

.elementor-column-wrap,
.elementor-widget-wrap {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 100%;
  position: relative;
}

.elementor-element-populated {
  padding: 20px;
}

/* Column widths */
.elementor-col-25 { width: 25%; }
.elementor-col-33 { width: 33.333%; }
.elementor-col-50 { width: 50%; }
.elementor-col-66 { width: 66.666%; }
.elementor-col-75 { width: 75%; }
.elementor-col-100 { width: 100%; }

/* Column gaps */
.elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding: 10px; }
.elementor-column-gap-no > .elementor-column > .elementor-element-populated { padding: 0; }
.elementor-column-gap-extended > .elementor-column > .elementor-element-populated { padding: 15px; }
.elementor-column-gap-wider > .elementor-column > .elementor-element-populated { padding: 30px; }

/* Background overlay */
.elementor-background-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Content alignment */
.elementor-section-content-middle > .elementor-container {
  align-items: center;
}

.elementor-section-height-default > .elementor-container {
  min-height: auto;
}

/* Responsive column visibility */
.elementor-hidden-phone,
.elementor-hidden-tablet,
.elementor-hidden-desktop {
  display: none;
}