/*
Theme Name: Modern Language Center
Description: Custom theme for Modern Language Center
Author: Rosa Ortega, Alfredo Altamirano
Version: 1.0.0
License: GPL v2 or later
Text Domain: modern-language-center   
*/

@import url("assets/css/fonts.css");

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
  padding-left: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  background: none;
  border: none;
  outline: none;
  color: inherit;
}

:root {
  /* Layout */
  --content-max-width: 1750px;
  --content-max-width-1200: 1200px;
  --section-padding: 4rem 0;

  /* MLC */
  --font-primary: "MarselisPro", Arial, sans-serif;

  /* Bootstrap */
  --bs-font-sans-serif: var(--font-primary);
  --bs-heading-color: var(--gray-900);
  --bs-body-color: var(--gray-900);
  --bs-body-bg: var(--gray-200);

  /* Font Sizes */
  --fs-250: clamp(120px, 13vw, 250px);
  --fs-160: clamp(80px, 9vw, 160px);
  --fs-105: clamp(56px, 6.5vw, 105px);
  --fs-100: clamp(50px, 5.5vw, 100px);
  --fs-90: clamp(48px, 5.6vw, 90px);
  --fs-86: clamp(46px, 5.2vw, 86px);
  --fs-80: clamp(40px, 4.4vw, 80px);
  --fs-72: clamp(44px, 5.2vw, 72px);
  --fs-64: clamp(40px, 4.8vw, 64px);
  --fs-60: clamp(34px, 4vw, 60px);
  --fs-58: clamp(32px, 3.8vw, 58px);
  --fs-52: clamp(32px, 3.8vw, 52px);
  --fs-48: clamp(28px, 3.2vw, 48px);
  --fs-40: clamp(26px, 2.7vw, 40px);
  --fs-36: clamp(24px, 2.4vw, 36px);
  --fs-30: clamp(20px, 2vw, 30px);
  --fs-26: clamp(18px, 1.9vw, 26px);
  --fs-24: clamp(18px, 1.8vw, 24px);
  --fs-22: clamp(16px, 1.6vw, 22px);
  --fs-21: clamp(16px, 1.45vw, 21px);
  --fs-18: clamp(14px, 1.4vw, 18px);
  --fs-16: clamp(13px, 1.2vw, 16px);
  --fs-14: clamp(12px, 1.1vw, 14px);
  --fs-12: clamp(10px, 1vw, 12px);

  /* MLC color system */
  /* Blue */
  --blue-900: #00296a;
  --blue-850: #081f9e;
  --blue-800: #003ea1;
  --blue-750: #234097;
  --blue-700: #004296;
  --blue-600: #2559df;
  --blue-550: #016dff;
  --blue-500: #0189cd;
  --blue-400: #007ece;
  --blue-350: #038cfc;
  --blue-300: #008afe;
  --blue-200: #3c88f6;
  --blue-150: #6cd4ff;
  --blue-125: #70cbff;
  --blue-100: #88deff;
  --blue-75: #acd3ff;
  --blue-50: #b7daff;

  /* Cyan */
  --cyan-500: #00e2ff;

  /* Copper */
  --copper-900: #79541b;
  --copper-800: #8f6513;
  --copper-700: #a87237;
  --copper-600: #b47c33;
  --copper-500: #b08c5a;
  --copper-400: #c3842c;
  --copper-300: #c1985c;
  --copper-200: #c99651;
  --copper-150: #cea065;
  --copper-100: #e1b16c;
  --copper-50: #edd38d;

  /* Green */
  --green-900: #014332;
  --green-800: #194233;
  --green-700: #006c4c;
  --green-600: #00845f;
  --green-500: #03936a;
  --green-400: #009767;
  --green-300: #298662;
  --green-200: #59dfb7;
  --green-100: #7edcb9;
  --green-50: #80d3b3;

  /* Gray */
  --gray-900: #2d2d2d;
  --gray-800: #3a3a3a;
  --gray-700: #4d4d4d;
  --gray-600: #666666;
  --gray-500: #999999;
  --gray-200: #e4e4e4;
  --gray-100: #e6e6e6;
  --gray-0: #ffffff;

  /* Purple */
  --purple-900: #390962;
  --purple-800: #44026b;
  --purple-700: #52137e;
  --purple-600: #804fa9;
  --purple-500: #8249b8;
  --purple-400: #8b45be;
  --purple-350: #aa63e3;
  --purple-300: #a679d0;
  /* --purple-250: #b57edc; */
  --purple-250: #bf7ce2;
  --purple-200: #ad75d4;
  --purple-100: #d8a0ff;
  --purple-50: #dea3f8;

  /* Red */
  --red-700: #560221;
  --red-600: #570322;
  --red-500: #901736;
  --red-400: #941837;
  --red-300: #951938;

  /* Yellow */
  --yellow-900: #e05800;
  --yellow-800: #e15900;
  --yellow-700: #e7662b;
  --yellow-600: #f78600;
  --yellow-500: #fd8f01;
  --yellow-400: #fe9918;
  --yellow-350: #f48e19;
  --yellow-300: #febb00;
  --yellow-250: #ffaa3b;
  --yellow-200: #ffd600;
  --yellow-150: #fee589;
  --yellow-100: #ffed62;

  /* Aliases */
  --white: var(--gray-0);

  /* Gradients */
  --gradient-blue: linear-gradient(135deg,
      var(--blue-400) 0%,
      var(--blue-800) 100%);
  --gradient-blue-inverse: linear-gradient(135deg,
      var(--blue-100) 0%,
      var(--blue-50) 100%);
  --gradient-blue-medium: linear-gradient(135deg,
      var(--blue-200) 0%,
      var(--blue-850) 100%);
  --gradient-blue750-red700: linear-gradient(180deg, var(--blue-750) 0%, var(--red-300) 65%, var(--red-700) 100%);
  --gradient-purple600-red300-red600: linear-gradient(180deg, var(--purple-600) 0%, var(--red-300) 53%, var(--red-600) 100%);
  --gradient-red400-red700: linear-gradient(2deg, var(--red-400) 0%, var(--red-700) 100%);
  --gradient-red500-red700: linear-gradient(179deg, var(--red-500) 0%, var(--red-700) 100%);
  --gradient-copper: linear-gradient(135deg,
      var(--copper-500) 0%,
      var(--copper-800) 100%);
  --gradient-green: linear-gradient(135deg,
      var(--green-400) 0%,
      var(--green-800) 100%);
  --gradient-purple: linear-gradient(135deg,
      var(--purple-400) 0%,
      var(--purple-900) 100%);
  --gradient-purple300-purple800: linear-gradient(155deg,
      var(--purple-300) 0%,
      var(--purple-600) 20%,
      var(--purple-800) 100%);
  --gradient-purple600-purple900: linear-gradient(180deg,
      var(--purple-600) 0%,
      var(--purple-900) 100%);
  --gradient-purple600-purple900-inverse: linear-gradient(180deg,
      var(--purple-900) 0%,
      var(--purple-700) 100%);
  --gradient-red: linear-gradient(180deg,
      var(--yellow-250) 0%,
      var(--red-300) 52%,
      var(--red-700) 100%);
  --gradient-red-inverse: linear-gradient(180deg,
      var(--red-500) 0%,
      var(--red-700) 100%);
  --gradient-red-medium: linear-gradient(1deg,
      var(--red-400) 0%,
      var(--red-700) 100%);
  --gradient-yellow: linear-gradient(135deg,
      var(--yellow-500) 0%,
      var(--yellow-800) 100%);
  --gradient-yellow-vertical: linear-gradient(180deg,
      var(--yellow-600) 0%,
      var(--yellow-900) 100%);
      --gradient-yellow-inverse-vertical: linear-gradient(180deg,
      var(--yellow-900) 0%,
      var(--yellow-800) 100%);
  --gradient-orange: linear-gradient(360deg,
      var(--yellow-900) 0%,
      var(--yellow-600) 100%);

  /* Borders */
  --border-radius-8: 8px;
  --border-radius-12: 12px;
  --border-radius-16: 16px;
  --border-radius-24: 24px;
  --border-radius-pill: 9999px;

  /* Shadows */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.1);
  --text-shadow-md-white: 0 0 15px rgba(255, 255, 255, 0.9);

  /* Texts */
  --text-primary: var(--gray-900);
  --text-inverse: var(--gray-0);
  --text-input: var(--gray-500);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ==========================================================================
   Base Classes
   ========================================================================== */

.section {
  padding: var(--section-padding);
}

/* === Color Classes === */

/* Background Colors */
.bg-copper {
  background-color: var(--copper-900);
}

.bg-copper-light {
  background-color: var(--copper-50);
}

.bg-green {
  background-color: var(--green-700);
}

.bg-green-dark {
  background-color: var(--green-900);
}

.bg-green-light {
  background-color: var(--green-100);
}

/* Font Colors */
.text-blue {
  color: var(--blue-500);
}

.text-blue-light {
  color: var(--blue-100);
}

.text-blue-dark {
  color: var(--blue-900);
}

.text-copper {
  color: var(--copper-900);
}

.text-copper-light {
  color: var(--copper-50);
}

.text-green {
  color: var(--green-700);
}

.text-green-dark {
  color: var(--green-900);
}

.text-green-light {
  color: var(--green-100);
}

/* === Heading Sizes === */
h1 {
  font-size: var(--fs-90);
}

h2 {
  font-size: var(--fs-60);
}

h3 {
  font-size: var(--fs-48);
}

h4 {
  font-size: var(--fs-36);
}

h5 {
  font-size: var(--fs-30);
}

h6 {
  font-size: var(--fs-24);
}

/* === Additional Font Sizes === */

.fs-105 {
  font-size: var(--fs-105);
}

.fs-72 {
  font-size: var(--fs-72);
}

.fs-21 {
  font-size: var(--fs-21);
}

.fs-18 {
  font-size: var(--fs-18);
}

.fs-14 {
  font-size: var(--fs-14);
}

.fs-12 {
  font-size: var(--fs-12);
}

/* === Button Classes === */

.btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: var(--card-border-radius);
  font-weight: 600;
  text-align: center;
  transition: var(--transition-normal);
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn-primary {
  background: var(--gradient-blue);
  color: var(--white);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-green {
  background: var(--gradient-green);
  color: var(--white);
}

.btn-green:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* === Animations === */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

.fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }

  .section {
    padding: 2rem 0;
  }
}

/* ==========================================================================
   Navbar
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0;
  background: transparent;
}

.floating-navbar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 50px;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 1750px;
  margin: 24px auto;
  padding: 0;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.floating-navbar>.container {
  width: 100%;
  margin: 0 auto;
  max-width: 100%;
  padding-left: 28px;
  padding-right: 28px;
  min-height: 108px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

@media (max-width: 360px) {
  .floating-navbar>.container {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.floating-navbar:hover {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.navbar-brand img {
  height: 50px;
  width: auto;
}

.navbar-nav .nav-link {
  color: #333 !important;
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
  color: #007bff !important;
}

.navbar-nav .dropdown-toggle::after {
  margin-left: 0.5rem;
}

/* Dropdown menu desktop */
.dropdown-menu {
  background: var(--white) !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: var(--shadow-md);
}

/* .dropdown-item */
.submenu-link {
  display: block;
  padding: 0.75rem 1rem;
  color: #666;
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;

  &:hover {
    color: #007bff;
    background-color: rgba(0, 123, 255, 0.05);
    border-bottom-color: #007bff;
  }
}

.dropdown-divider {
  margin: 0.5rem 1rem;
}

.teacher-login-btn {
  background: var(--blue-750);
  border: none;
  padding: 0.5rem 1.5rem;
  font-weight: 600;
  display: inline-flex;
}

@media (min-width: 992px) {
  .teacher-login-btn {
    margin-left: 24px;
  }
}

.teacher-login-btn::after {
  background: var(--blue-550);
}

.teacher-login-btn .btn-text {
  color: var(--white);
}

.teacher-login-btn .btn-text-grow {
  color: var(--white);
}

/* Hamburguesa */
.custom-hamburger {
  background: none;
  border: none;
  padding: 0;
  width: 30px;
  height: 20px;
  position: relative;
  cursor: pointer;
  display: none;
}

.custom-hamburger .hamburger-line {
  display: block;
  position: absolute;
  left: 0;
  height: 2px;
  background: #007bff;
  border-radius: 1px;
  transition: all 0.3s ease;
}

.custom-hamburger .hamburger-line-top {
  width: 30px;
  top: 0;
}

.custom-hamburger .hamburger-line-bottom {
  width: 20px;
  bottom: 0;
  right: 0;
  left: auto;
}

.custom-hamburger.active .hamburger-line-bottom {
  transform: translateX(-10px);
}

/* Menú móvil overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 900;
  transition: right 0.3s ease;

  @media (min-width: 992px) {
    display: none !important;
  }

  @media (max-width: 991px) {
    top: 108px;
    height: calc(100vh - 108px);
  }

  &.active {
    right: 0;

    .mobile-menu-content {
      transform: translateX(0);
    }
  }

  .mobile-menu-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 300px;
    height: 100%;
    background: white;
    padding: 3rem 2rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;

    @media (max-width: 768px) {
      width: 100%;
      max-width: none;
      padding: 2rem 1.5rem;
    }
  }
}

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

.mobile-menu-item {
  margin-bottom: 1.5rem;

  .mobile-menu-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    color: #333;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;

    &:hover {
      color: #007bff;
    }

    /* Chevrones */
    .mobile-menu-chevron {
      width: 8px;
      height: 8px;
      border-right: 2px solid #666;
      border-bottom: 2px solid #666;
      transform: rotate(45deg);
      display: inline-block;
      transition: all 0.3s ease;
      margin-left: 8px;
      position: relative;
      top: -2px;
    }
  }

  /* Estados del chevron */
  &.active .mobile-menu-chevron {
    transform: rotate(225deg);
    border-right-color: #007bff;
    border-bottom-color: #007bff;
  }

  &:not(.active) .mobile-menu-chevron {
    transform: rotate(45deg);
    border-right-color: #666;
    border-bottom-color: #666;
  }

  .mobile-menu-dropdown:hover .mobile-menu-chevron {
    border-right-color: #007bff;
    border-bottom-color: #007bff;
  }

  /* Submenú expandido cuando está activo */
  &.active .mobile-submenu {
    max-height: 500px;
  }
}

/* Submenús móviles */
.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-left: 0;
  margin: 0;
  list-style: none;
  background: var(--white);

  /* Enlaces del submenú */
  .mobile-submenu-link {
    display: block;
    padding: 0.75rem 1.5rem 0.75rem 2.5rem;
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;

    &:hover {
      color: #007bff;
      background-color: rgba(0, 123, 255, 0.05);
      border-bottom-color: #007bff;
    }
  }

  /* Separador */
  .mobile-menu-separator {
    height: 1px;
    background-color: #e9ecef;
    margin: 0.5rem 1.5rem;
  }
}

/* Footer del menú móvil */
.mobile-menu-footer {
  position: absolute;
  bottom: 4rem;
  left: 1.5rem;
  right: 1.5rem;

  .mobile-teacher-login {
    width: 100%;
    text-align: center;
    border-radius: 20px;
  }
}

/* Responsive navbar */
@media (max-width: 991px) {
  .custom-hamburger {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .floating-navbar {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1rem 1.5rem;
    border-radius: 0;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
}

@media (max-width: 768px) {
  .floating-navbar {
    margin: 0;
    padding: 1rem 1.5rem;
    border-radius: 0;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
}

/* ==========================================================================
   Home Contact Section
   ========================================================================== */

.home-contact {
  padding: 2rem 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.home-contact p {
  font-size: 20px;
  text-align: justify;
}

.home-contact .button-template-2 {
  padding: 0.5rem 4rem;
}

/* ==========================================================================
   Brands Infinite Scroll Animation
   ========================================================================== */

.home-brands {
  padding: 4rem 0;
  background: #f0f0f0;
  overflow: hidden;
}

.home-brands h2 {
  text-align: center;
  margin-bottom: 3rem;
  color: #2d2d2d;
  font-family: var(--font-heading);
  font-weight: 700;
}

/* Infinite Scroll Container */
.brands-gallery {
  overflow: hidden;
  position: relative;
  padding: 2rem 0;
  --brands-gap: 4rem;
  /* Fades laterales en #F0F0F0 para integrarse con el fondo */
  background: linear-gradient(90deg,
      rgba(240, 240, 240, 1) 0%,
      rgba(240, 240, 240, 0.85) 10%,
      rgba(240, 240, 240, 0) 20%,
      rgba(240, 240, 240, 0) 80%,
      rgba(240, 240, 240, 0.85) 90%,
      rgba(240, 240, 240, 1) 100%);
}

/* Track */
.brands-scroll {
  display: flex;
  align-items: center;
  gap: var(--brands-gap);
  width: max-content;
  animation: brands-marquee 48s linear infinite;
  will-change: transform;
  padding-left: var(--brands-gap);
}

/* Logos */
.brand-logo {
  height: 48px;
  width: auto;
  opacity: 0.95;
  transition: transform 0.2s ease, opacity 0.2s ease;
  display: block;
}

.brand-logo:hover {
  transform: scale(1.05);
  opacity: 1;
}

/* Pausa al hacer hover */
.brands-gallery:hover .brands-scroll {
  animation-play-state: paused;
}

/* Animación */
@keyframes brands-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Ajustes responsivos */
@media (max-width: 991px) {
  .brand-logo {
    height: 40px;
  }

  .brands-scroll {
    animation-duration: 32s;
  }
}

@media (max-width: 575px) {
  .brand-logo {
    height: 32px;
  }

  .brands-gallery {
    --brands-gap: 2rem;
  }

  .brands-scroll {
    animation-duration: 28s;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: linear-gradient(135deg,
      var(--gradient-purple-1),
      var(--gradient-purple-2));
  color: white;
  padding: 3rem 0 1rem;
}

.site-footer>.container {
  max-width: 1440px;
}

.site-footer h5 {
  color: white;
  margin-bottom: 1rem;
  font-size: clamp(18px, 1.7vw, 25px);
  font-weight: 700;
}

.site-footer p {
  margin-bottom: 0.5rem;
  font-size: var(--fs-footer);
  font-weight: 400;
}

.site-footer hr {
  border-color: rgba(255, 255, 255, 0.3);
  margin: 2rem 0 1rem;
}

.site-footer i {
  margin-right: 0.5rem;
  width: 16px;
}

/* ==========================================================================
   How Can We Help Section - Nueva sección de contacto
   ========================================================================== */

.how-can-we-help {
  padding: 5rem 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  text-align: center;
}

.help-content h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 1.5rem;
  font-family: var(--font-heading);
}

.help-content p {
  font-size: 1.2rem;
  color: var(--gray-600);
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.help-content .btn-lg {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 50px;
  background: var(--gradient-purple);
  border: none;
  color: var(--white);
  text-decoration: none;
  transition: var(--transition-normal);
  display: inline-block;
}

.help-content .btn-lg:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(131, 73, 185, 0.4);
  color: var(--white);
}

@media (max-width: 768px) {
  .how-can-we-help {
    padding: 3rem 0;
  }

  .help-content h2 {
    font-size: 2rem;
  }

  .help-content p {
    font-size: 1.1rem;
    padding: 0 1rem;
  }

  .help-content .btn-lg {
    padding: 0.875rem 2rem;
    font-size: 1rem;
  }
}

/* ==========================================================================
   Shared Background Sections (Contact+Footer, Bonus+Footer, etc.)
   ========================================================================== */

.shared-background-section {
  padding: 0;
  margin: 0;
  position: relative;
}

/* == Contact Section == */
.contact-section {
  padding: 6rem 0 4rem 0;
  position: relative;
}

.contact-content {
  text-align: center;

  & h2 {
    color: var(--gray-0);
    font-weight: 700;
    margin-bottom: 1rem;
  }

  & h4 {
    color: var(--gray-0);
    margin-bottom: 2rem;
    opacity: 0.9;
  }
}

.btn-contact {
  background: var(--blue-100);
  border: 2px solid var(--blue-100);
  border-radius: 9999px;
  color: var(--blue-800);
  display: inline-block;
  font-size: var(--fs-24);
  font-weight: 700;
  padding: 0.75rem 2rem;
  transition: var(--transition-normal);

  &:hover {
    color: var(--blue-800);
    background: var(--blue-150);
    border-color: var(--blue-150);
    box-shadow: 0 8px 25px var(--blue-100);
    transform: translateY(-2px);
  }
}

/* == Footer Section == */
.site-footer {
  color: var(--blue-100);
  font-size: var(--fs-21);
  padding: 3rem 0 2rem 0;
}

.footer-logo {
  max-height: 90px;
  margin-bottom: 1rem;
}

.footer-privacy {
  transition: color var(--transition-normal);

  &:hover {
    color: var(--gray-0);
  }
}

.site-footer h5 {
  font-size: var(--fs-24);
  font-weight: 700;
  margin-bottom: 1rem;
}

.footer-links {
  padding: 0;
  margin: 0;

  & li {
    margin-bottom: 0.5rem;
  }

  & a {
    transition: color var(--transition-normal);
  }

  & a:hover {
    color: var(--gray-0);
  }
}

.footer-contact {
  & p {
    margin-bottom: 0.5rem;
  }

  & a {
    transition: color var(--transition-normal);
  }

  & a:hover {
    color: var(--gray-0);
  }
}

.footer-bottom {
  border-top: 1px solid var(--blue-100);
  margin-top: 2rem;
  padding-top: 1.5rem;
  width: 100%;
  clear: both;
}

.footer-bottom p {
  font-size: var(--fs-18);
  margin-bottom: 0;
}

/* ==========================================================================
   Dynamic Shared Background Colors
   ========================================================================== */

/* Default/Home: Blue gradient */
.shared-background-blue {
  background: transparent linear-gradient(90deg, #0285ca 0%, #004296 100%) 0% 0% no-repeat padding-box;
}

/* Coaching Program: Green gradient */
.shared-background-coaching {
  background: var(--gradient-green);
}

/* Premium Program: Copper gradient */
.shared-background-premium {
  background: var(--gradient-copper);
}

/* Extiende el fondo de la sección compartida al footer adyacente (sin duplicar HTML) */
.shared-background-section.shared-background-blue+.site-footer {
  background: transparent linear-gradient(90deg, #0285ca 0%, #004296 100%) 0% 0% no-repeat padding-box;
}

/* Fallback cuando el footer no es hermano adyacente del bloque (por cierre de <main>) */
body.page-es-home .site-footer {
  background: transparent linear-gradient(90deg, #0285ca 0%, #004296 100%) 0% 0% no-repeat padding-box;
}

body.page-privacy-policy-es .site-footer,
body.page-template-page-privacy-policy-es .site-footer {
  background: transparent linear-gradient(90deg, #0285ca 0%, #004296 100%) 0% 0% no-repeat padding-box;
}

/* ==========================================================================
   Responsive Design for Contact & Footer
   ========================================================================== */

@media (max-width: 768px) {
  .contact-section {
    padding: 4rem 0 3rem 0;
  }

  .site-footer {
    padding: 2rem 0 1.5rem 0;
  }

  .site-footer .row>div {
    margin-bottom: 2rem;
  }

  .site-footer .row>div:last-child {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   Fixes para Bootstrap - Sobrescribir estilos conflictivos
   ========================================================================== */

/* Asegurar que el botón hamburguesa personalizado se muestre */
@media (max-width: 991px) {
  .navbar .custom-hamburger {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (min-width: 992px) {
  .navbar .custom-hamburger {
    display: none !important;
  }
}

/* ==========================================================================
   Enhanced Button Base Styles (Global - Reusable)
   ========================================================================== */
.btn-enhanced {
  border-radius: var(--border-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  color: var(--white);
  transition: border-color var(--transition-normal);
}

/* Botón (estado normal)se desliza hacia la izquierda */
.btn-enhanced::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-pill);
  transition: transform var(--transition-slow);
  transform-origin: right center;
  z-index: 1;
  pointer-events: none;
}

.btn-enhanced:hover::after {
  transform: translateX(-100%);
}

/* Texto del botón normal */
.btn-enhanced .btn-text {
  position: relative;
  z-index: 3;
  color: var(--white);
  transition: opacity var(--transition-normal);
  white-space: nowrap;
}

.btn-enhanced:hover .btn-text {
  opacity: 0;
}

/* Texto secundario */
.btn-enhanced .btn-text-grow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0.05);
  font-weight: 700;
  color: var(--white);
  opacity: 0;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  z-index: 2;
  white-space: nowrap;
  pointer-events: none;
}

.btn-enhanced:hover .btn-text-grow {
  transform: translateX(-50%) translateY(-50%) scale(1);
  opacity: 1;
}

/* ==========================================================================
   Privacy Policy Page Styles
   ========================================================================== */

.privacy-policy-section {
  padding: 8rem 0 4rem 0;
  background: var(--white);
}

.privacy-policy-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
  color: var(--gray-900);
  line-height: 1.7;
}

.privacy-policy-title {
  font-size: var(--fs-60);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 2rem;
  text-align: center;
}

.privacy-policy-intro {
  margin-bottom: 3rem;
  font-size: var(--fs-18);
}

.privacy-policy-intro p {
  margin-bottom: 1rem;
}

.privacy-policy-section-item {
  margin-bottom: 3rem;
}

.privacy-policy-heading {
  font-size: var(--fs-30);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 1.5rem;
  margin-top: 2rem;
}

.privacy-policy-section-item p {
  font-size: var(--fs-18);
  margin-bottom: 1rem;
  color: var(--gray-800);
}

.privacy-policy-list {
  margin: 1.5rem 0;
  padding-left: 2rem;
  list-style-type: disc;
}

.privacy-policy-list li {
  font-size: var(--fs-18);
  margin-bottom: 0.75rem;
  color: var(--gray-800);
  line-height: 1.6;
}

.privacy-policy-content a {
  color: var(--blue-600);
  text-decoration: underline;
  transition: color var(--transition-normal);
}

.privacy-policy-content a:hover {
  color: var(--blue-800);
}

.privacy-policy-content strong {
  font-weight: 700;
  color: var(--gray-900);
}

@media (max-width: 767px) {
  .privacy-policy-section {
    padding: 10rem 0 2rem 0;
  }

  .privacy-policy-content {
    padding: 0 1rem;
  }

  .privacy-policy-title {
    margin-bottom: 1.5rem;
  }

  .privacy-policy-heading {
    margin-top: 1.5rem;
  }
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.u-content-max-1200 {
  max-width: var(--content-max-width-1200);
}

.u-content-max-1750 {
  max-width: var(--content-max-width);
}