/**
 * Subsitio Experiencia - Shared header & footer styles.
 * Colors are controlled via CSS custom properties; each page overrides them.
 */

/* Sanomat Web – titles on home, menu, nosotros (regular + italic) */
@font-face {
  font-family: "Sanomat Web";
  src: url("../fonts/SANOMAT SEMIBOLD.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sanomat Web";
  src: url("../fonts/SANOMAT SEMIBOLD ITALIC.TTF") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Titles: Sanomat Web; .exp-section__title uses italic */
.page-subsitio-experiencia .exp-hero__title,
.page-subsitio-experiencia .exp-section__heading,
.page-subsitio-experiencia .exp-card__title {
  font-family: "Sanomat Web", sans-serif;
}

.page-subsitio-experiencia .exp-section__title {
  font-family: "Sanomat Web", sans-serif;
  font-style: italic;
  font-size: 72px;
}

.page-subsitio-experiencia .exp-section--vive .exp-section__title {
  font-size: 72px;
}

.page-subsitio-experiencia .exp-section--vive .exp-section__body {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
}

/* Smooth scroll for anchor links (e.g. hero button to #categorias) */
html {
  scroll-behavior: smooth;
}

/* Default theme (fallback) */
:root {
  --exp-header-bg: rgba(0, 0, 0, 0.3);
  --exp-header-text: #fff;
  --exp-header-cta-bg: #c4a35a;
  --exp-header-cta-text: #fff;
  --exp-footer-bg: #7B612A;
  --exp-footer-text: #e7e0d3;
  --exp-footer-pattern: rgba(255, 255, 255, 0.05);
}

/* Header */
.header-experiencia {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--exp-header-bg);
  color: var(--exp-header-text);
  transition: background 0.3s ease, color 0.3s ease;
}

.header-experiencia__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  gap: 1.5rem;
}

/* Brand: logo + hamburger (hamburger visible only on mobile) */
.header-experiencia__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-experiencia__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease;
}

.header-experiencia__hamburger:hover,
.header-experiencia__hamburger:focus {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.header-experiencia__hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  flex-shrink: 0;
}

/* Mobile menu panel (hidden on desktop). Black background 0.4 opacity when open. */
.header-experiencia__mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: var(--exp-header-text);
  padding: 1rem 1.5rem 1.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

.header-experiencia__mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.header-experiencia__mobile-menu-list a {
  display: block;
  padding: 0.75rem 0;
  color: #f5dcc0;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 20px;
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(245, 220, 192, 0.2);
}

.header-experiencia__mobile-menu-list a:hover {
  opacity: 0.85;
}

.header-experiencia__mobile-menu-list li:last-child a {
  border-bottom: 0;
}

.header-experiencia__logo a {
  color: inherit;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.header-experiencia__nav {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  margin-right: 1rem;
}

.header-experiencia__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
  font-family: "Fira Sans", sans-serif;
  font-weight: 600;
}

.header-experiencia__menu a,
.header-experiencia__menu a:visited {
  color: #f5dcc0;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.header-experiencia__menu a:hover {
  color: #f5dcc0;
  text-decoration: underline;
}

/* Microsite: visited links keep same color as unvisited (no global :visited override) */
body.subsitio-experiencia a:visited {
  color: unset;
}

.header-experiencia__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: var(--exp-header-cta-bg);
  color: #451c28;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Fira Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.1em;
  border-radius: 5px;
  transition: background 0.2s ease, color 0.2s ease;
}

.header-experiencia__btn:visited .header-experiencia__btn-text{
    color: #451c28;
}

.header-experiencia__btn:visited  .header-experiencia__btn-icon{
    color: #451c28;
}

.header-experiencia__btn:hover {
  background: #451c28;
  color: var(--exp-header-cta-bg)!important;
}

.header-experiencia__btn:hover span{
    color: var(--exp-header-cta-bg)!important;
  }

.header-experiencia__btn .header-experiencia__btn-icon {
  flex-shrink: 0;
}

.header-experiencia__btn .header-experiencia__btn-icon path {
  fill: currentColor;
  transition: fill 0.2s ease;
}

.header-experiencia__btn:hover .header-experiencia__btn-icon path {
  fill: #c4a35a;
}

/* Footer */
.footer-experiencia {
  position: relative;
  background: var(--exp-footer-bg);
  color: var(--exp-footer-text);
  padding: 0 1.5rem 2rem;
}

/* Full-width row edge to edge; SVG pattern */
.footer-experiencia__pattern {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  pointer-events: none;
  line-height: 0;
}

.footer-experiencia__pattern svg {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

.footer-experiencia__inner {
  max-width: 1200px;
  margin: 0 auto;
  margin-top:3rem;
}

/* Row 1: two columns at opposite ends */
.footer-experiencia__row--top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding-bottom: 3rem;
}

.footer-experiencia__col--left {
  max-width: 40%;
}

.footer-experiencia__col--right {
  text-align: right;
  max-width: 40%;
}

.footer-experiencia__logo {
  max-width: 180px;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto;
}

.footer-experiencia__logo svg {
  width: 100%;
  height: auto;
  display: block;
  color: var(--exp-footer-text);
}

.footer-experiencia__tagline {
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
  max-width: 220px;
  color: var(--exp-footer-text);
}

.footer-experiencia__address {
  font-size: 0.9375rem;
  margin: 0 0 0.5rem;
}

.footer-experiencia__hours {
  font-size: 0.875rem;
  margin: 0 0 1rem;
  line-height: 1.5;
}

.footer-experiencia__icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.footer-experiencia__icons a {
  color: inherit;
  text-decoration: none;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-experiencia__icons a.footer-experiencia__icon-link {
  width: 2rem;
  height: 2rem;
  color: #F5DCC0;
}

.footer-experiencia__icons a.footer-experiencia__icon-link svg {
  width: 100%;
  height: 100%;
  display: block;
}

.footer-experiencia__icons a:hover {
  text-decoration: none;
  opacity: 0.85;
}

/* Separator line */
.footer-experiencia__divider {
  height: 1px;
  background: rgba(237, 232, 215, 0.4);
  margin: 0 0 1.5rem;
}

/* Row 2: copyright left, links right */
.footer-experiencia__row--bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-experiencia__legal {
  font-size: 0.8125rem;
  margin: 0;
  color: var(--exp-footer-text);
}

.footer-experiencia__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.footer-experiencia__menu a {
  color: inherit;
  text-decoration: underline;
  font-size: 0.8125rem;
}

.footer-experiencia__menu a:hover {
  opacity: 0.9;
}

/* Spacer for fixed header */
.page-subsitio-experiencia .site-content {
  padding-top: 110px;
}

@media (max-width: 768px) {
  .header-experiencia {
    min-height: 75px;
  }

  .header-experiencia__inner {
    flex-wrap: nowrap;
    padding: 0 5% 0 1rem;
    min-height: 75px;
    align-items: center;
  }

  .header-experiencia__brand {
    flex: 1;
    justify-content: space-between;
    align-items: center;
  }

  .header-experiencia__logo {
    width: 120px;
    max-width: 120px;
  }

  .header-experiencia__logo a {
    display: block;
    line-height: 0;
  }

  .header-experiencia__logo svg {
    width: 100%;
    max-width: 120px;
    height: auto;
    display: block;
  }

  .header-experiencia__hamburger {
    display: flex;
    color: #EEDFC6;
  }

  .header-experiencia__nav,
  .header-experiencia__cta {
    display: none;
  }

  .header-experiencia__mobile-menu {
    display: block;
  }

  .header-experiencia--menu-open .header-experiencia__mobile-menu {
    max-height: 320px;
    opacity: 1;
  }

  .header-experiencia--menu-open .header-experiencia__hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .header-experiencia--menu-open .header-experiencia__hamburger-bar:nth-child(2) {
    opacity: 0;
  }

  .header-experiencia--menu-open .header-experiencia__hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .footer-experiencia__row--top {
    flex-direction: column;
    align-items: center;
  }

  .footer-experiencia__col--left,
  .footer-experiencia__col--right {
    max-width: none;
    text-align: center;
  }

  .footer-experiencia__icons {
    justify-content: center;
  }

  .footer-experiencia__row--bottom {
    flex-direction: column-reverse;
    align-items: center;
  }

  .footer-experiencia__legal {
    font-size: 10px;
    text-align: center;
  }

  .footer-experiencia__menu {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }

  .page-subsitio-experiencia .site-content {
    padding-top: 60px;
  }

  .page-subsitio-experiencia .exp-section--vive .exp-section__title {
    font-size: 48px;
    line-height: 58px;
  }

  .page-subsitio-experiencia .exp-section--vive .exp-section__body {
    width: 95%;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
}