/* ==========================================================================
   1. IMPORTACIÓN DE FUENTE Y VARIABLES DE MARCA (:root)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
   /* --- FUENTE ÚNICA CORPORATIVA --- */
   --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

   /* Asignación funcional */
   --font-body: var(--font-primary);
   --font-title: var(--font-primary);
   --font-subtitle: var(--font-primary);
   --font-menu: var(--font-primary);

   /* --- PALETA CORPORATIVA --- */
   --brand-purple: #613493;
   /* Ajustado exactamente al valor de la plantilla original */
   --brand-purple-hover: #522378;
   --brand-purple-dark: #3B165C;

   /* Tonos Secundarios y Fondos */
   --brand-purple-soft: #ECE2F2;
   --brand-purple-light-bg: #F7F2FA;
   --bg-white: #FFFFFF;

   /* Tipografía y Neutros */
   --text-dark: #1A1A1A;
   --text-muted: #6E6E73;
   --border-subtle: rgba(97, 52, 147, 0.08);
}

/* ==========================================================================
   2. RESETS Y REGLAS TIPOGRÁFICAS GLOBALES
   ========================================================================== */

body {
   font-family: var(--font-body) !important;
   color: var(--text-dark);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* Encabezados Globales (H1 a H6) */
h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-title);
   color: var(--text-dark);
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: -0.03em !important;
   margin-bottom: 0.5rem;
}

/* Párrafos e Inputs */
p,
span,
a,
li,
button,
input,
textarea {
   font-family: var(--font-body);
   line-height: 1.6;
}

/* ==========================================================================
   3. REGLAS ESTRUCTURALES Y COMPONENTES REUTILIZABLES (FIXED)
   ========================================================================== */

/* --- FIX CONTAINER BOOTSTRAP (1430px Custom de la Plantilla) --- */
@media (min-width: 1400px) {

   .container,
   .container-lg,
   .container-md,
   .container-sm,
   .container-xl,
   .container-xxl {
      max-width: 1430px !important;
   }

   .container-1890 {
      max-width: 1890px !important;
      padding-left: 25px;
      padding-right: 25px;
   }
}

/* --- FIX TÍTULOS CORPORATIVOS --- */


.title-purple,
.aq-section-title.title-purple,
.aq-section-title-purple {
   font-family: var(--font-title) !important;
   color: var(--brand-purple) !important;
   /* <--- FIX: Forzado al morado corporativo */
   font-weight: 800;
   letter-spacing: -0.035em !important;
}

/* Tamaño estándar de títulos de sección */
.fs-36,
.aq-section-title.fs-36 {
   font-size: 36px !important;
   letter-spacing: -0.36px !important;
   line-height: 1.2;
}

@media (max-width: 767px) {

   .fs-36,
   .aq-section-title.fs-36 {
      font-size: 28px !important;
   }
}

/* Badges / Etiqueta Superior de Marca */
.luxury-badge {
   display: inline-block;
   font-family: var(--font-subtitle) !important;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px !important;
   color: var(--brand-purple);
   background: rgba(97, 52, 147, 0.1);
   padding: 5px 14px;
   border-radius: 20px;
}

/* Botón Outline Corporativo */
.btn-brand-outline {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 12px 28px;
   border: 1px solid var(--brand-purple);
   color: var(--brand-purple) !important;
   font-family: var(--font-primary) !important;
   font-size: 14px;
   font-weight: 600;
   border-radius: 50px;
   text-decoration: none;
   background: transparent;
   transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-brand-outline .icon-arrow {
   display: inline-flex;
   transition: transform 0.3s ease;
}

.btn-brand-outline:hover {
   background-color: var(--brand-purple);
   color: #FFFFFF !important;
   border-color: var(--brand-purple);
   box-shadow: 0 8px 20px rgba(97, 52, 147, 0.22);
}

.btn-brand-outline:hover .icon-arrow {
   transform: translateX(5px);
}

/* Clases de Fondo y Utilidades */
.bg-white-theme {
   background-color: var(--bg-white) !important;
}

.bg-secondary-theme {
   background: linear-gradient(180deg, #FFFFFF 0%, #ECE2F2 8%, #ECE2F2 90%, #FFFFFF 100%) !important;
}

.bg-purple-accent {
   background-color: var(--brand-purple) !important;
   color: #FFFFFF !important;
}

.p-relative {
   position: relative;
}

.z-1 {
   z-index: 1;
}


/* ==========================================================================
   4. NAVEGACIÓN MÓVIL Y OFFCANVAS GLOBAL (PANEL IZQUIERDO)
   ========================================================================== */

/* --- Botón Hamburguesa --- */
.aq-offcanvas-toggle {
   background: transparent;
   border: none;
   padding: 6px;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.aq-header-bar span {
   display: block;
   width: 24px;
   height: 2px;
   background-color: #FFFFFF;
   /* En Home es blanco */
   margin: 5px 0;
   border-radius: 2px;
   transition: all 0.3s ease;
}

/* Para cabeceras sobre fondo claro (Subpáginas) */
.aq-header-area .aq-header-bar span {
   background-color: var(--text-dark);
}

.aq-offcanvas-toggle:hover .aq-header-bar span {
   background-color: var(--brand-purple) !important;
}

/* --- Panel Offcanvas Deslizable (DESDE LA IZQUIERDA) --- */
.aq-offcanvas-wrap {
   position: fixed;
   top: 0;
   left: -100%;
   /* Inicia oculto a la IZQUIERDA */
   right: auto;
   width: 320px;
   max-width: 85%;
   height: 100%;
   background-color: var(--bg-white);
   z-index: 99999;
   padding: 30px 25px;
   transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
   box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
   overflow-y: auto;
}

.aq-offcanvas-wrap.opened,
.aq-offcanvas-wrap.active {
   left: 0 !important;
   /* Despliega hacia la derecha hasta encajar */
}

/* --- Fondo Oscuro Traslúcido (Overlay) --- */
.body-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.65);
   z-index: 9999;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
}

.body-overlay.opened,
.body-overlay.active {
   opacity: 1;
   visibility: visible;
}

/* --- Cabecera dentro del Offcanvas --- */
.aq-offcanvas-top {
   padding-bottom: 20px;
   margin-bottom: 20px;
   border-bottom: 1px solid var(--border-subtle);
}

.aq-offcanvas-close span {
   cursor: pointer;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--text-dark);
   transition: all 0.25s ease;
}

.aq-offcanvas-close span:hover {
   background-color: var(--brand-purple-light-bg);
   color: var(--brand-purple);
}

/* --- Lista de Menú Móvil dentro del Offcanvas --- */
.aq-offcanvas-menu nav ul,
.aq-offcanvas-menu-wrap ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.aq-offcanvas-menu nav ul li,
.aq-offcanvas-menu-wrap ul li {
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.aq-offcanvas-menu nav ul li a,
.aq-offcanvas-menu-wrap ul li a {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 13px 0;
   font-family: var(--font-menu);
   font-size: 15px;
   font-weight: 600;
   color: var(--text-dark);
   text-decoration: none;
   transition: color 0.2s ease, padding-left 0.2s ease;
}

.aq-offcanvas-menu nav ul li a:hover,
.aq-offcanvas-menu nav ul li a.active,
.aq-offcanvas-menu-wrap ul li a:hover,
.aq-offcanvas-menu-wrap ul li a.active {
   color: var(--brand-purple);
   padding-left: 6px;
}

/* --- Ítem de WhatsApp integrado como Texto Normal con Icono Verde a la Izquierda --- */
.aq-offcanvas-menu nav ul li.menu-btn-whatsapp-item a,
.aq-offcanvas-menu-wrap ul li.menu-btn-whatsapp-item a {
   background-color: transparent !important;
   border-radius: 0 !important;
   color: var(--text-dark) !important;
   font-weight: 600 !important;
   padding: 13px 0 !important;
   box-shadow: none !important;
}

.aq-offcanvas-menu nav ul li.menu-btn-whatsapp-item a i,
.aq-offcanvas-menu-wrap ul li.menu-btn-whatsapp-item a i {
   color: #25D366 !important;
   /* Icono Verde */
   font-size: 18px !important;
}

.aq-offcanvas-menu nav ul li.menu-btn-whatsapp-item a:hover,
.aq-offcanvas-menu-wrap ul li.menu-btn-whatsapp-item a:hover {
   color: var(--brand-purple) !important;
   padding-left: 6px !important;
}


/* ==========================================================================
   BOTÓN FLOTANTE "VOLVER ARRIBA" (PROGRESS CIRCLE BACK-TO-TOP)
   Ubicación: global-brand.css
   ========================================================================== */

.progress-wrap {
   position: fixed;
   right: 50px;
   bottom: 50px;
   height: 46px;
   width: 46px;
   cursor: pointer;
   display: block;
   border-radius: 50px;
   box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
   z-index: 99;
   opacity: 0;
   visibility: hidden;
   transform: translateY(15px);
   transition: all 200ms linear;
   background-color: var(--bg-white, #FFFFFF);
}

.progress-wrap.active-progress {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

/* Flecha SVG central inyectada por Pseudo-elemento */
.progress-wrap::after {
   position: absolute;
   content: "";
   top: 0;
   left: 0;
   width: 46px;
   height: 44px;
   text-align: center;
   line-height: 44px;
   font-size: 14px;
   border-radius: 50px;
   color: var(--text-dark, #1A1A1A);
   transition: all 200ms linear;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 12px 10px;
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 6L6 1L1 6' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
}

.progress-wrap:hover::after {
   transform: translateY(-2px);
}

.progress-wrap:hover {
   box-shadow: 0 8px 20px rgba(104, 47, 150, 0.2);
}

/* Control estricto de dimensiones y trazo del SVG del círculo */
.progress-wrap svg.progress-circle {
   position: absolute;
   top: 0;
   left: 0;
   width: 100% !important;
   height: 100% !important;
   display: block;
}

.progress-wrap svg path {
   fill: none !important;
   /* Evita que el interior del círculo se pinte de negro */
}

.progress-wrap svg.progress-circle path {
   stroke: var(--brand-purple, #682F96);
   /* Color corporativo para la barra de progreso */
   stroke-width: 4px;
   box-sizing: border-box;
   transition: all 200ms linear;
}

/* Ajustes responsivos para pantallas pequeñas */
@media (max-width: 767px) {
   .progress-wrap {
      right: 20px;
      bottom: 20px;
   }
}



/* ==========================================================================
   5. PRELOADER Y BACK TO TOP GLOBALES (EXTRAÍDOS DE MAIN.CSS)
   Ubicación: global-brand.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   PRELOADER (#loading)
   -------------------------------------------------------------------------- */
#loading {
   background-color: #ffffff;
   height: 100%;
   width: 100%;
   position: fixed;
   z-index: 999999;
   margin-top: 0;
   top: 0;
   left: 0;
}

#loading-center {
   width: 100%;
   height: 100%;
   position: relative;
}

#loading-center-absolute {
   position: absolute;
   inset-inline-start: 50%;
   top: 50%;
   width: 25%;
   transform: translate(-50%, -50%);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
   #loading-center-absolute {
      width: 40%;
   }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
   #loading-center-absolute {
      width: 40%;
   }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
   #loading-center-absolute {
      width: 45%;
   }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
   #loading-center-absolute {
      width: 50%;
   }
}

@media (max-width: 575px) {
   #loading-center-absolute {
      width: 90%;
   }
}

/* Contenedor del Logo y Círculo del Preloader */
.aq-preloader-logo {
   width: 180px;
   height: 180px;
   line-height: 180px;
   position: relative;
   text-align: center;
   margin: 0 auto 20px auto;
   display: flex;
   align-items: center;
   justify-content: center;
}

.aq-preloader-logo img {
   max-width: 110px;
   height: auto;
   position: relative;
   z-index: 2;
}

.aq-preloader-circle {
   position: absolute;
   top: 0;
   inset-inline-start: 0;
   width: 100%;
   height: 100%;
}

.aq-preloader-circle svg {
   position: absolute;
   top: 0;
   inset-inline-start: 0;
   width: 100%;
   height: 100%;
   animation: aq-rotate 5s linear infinite;
}

.aq-preloader-circle svg circle:last-child {
   stroke: var(--brand-purple, #682F96);
   /* Cambiado al color morado de marca */
   stroke-dashoffset: 0;
   stroke-dasharray: 1128, 3150;
   animation: aq-loading 4s linear infinite;
   transform-origin: center center;
}

.aq-preloader-content {
   text-align: center;
}

.aq-preloader-subtitle {
   font-size: 15px;
   font-weight: 500;
   margin-bottom: 0;
   color: var(--text-dark, #1A1A1A);
}

/* Animaciones del Círculo Giratorio */
@keyframes aq-loading {
   0% {
      stroke-dashoffset: 0;
      stroke-dasharray: 0, 3150;
   }

   100% {
      stroke-dashoffset: -1131;
      stroke-dasharray: 1128, 3138;
   }
}

@keyframes aq-rotate {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}


/* --------------------------------------------------------------------------
   BOTÓN VOLVER ARRIBA (.progress-wrap)
   -------------------------------------------------------------------------- */
.progress-wrap {
   position: fixed;
   inset-inline-end: 50px;
   bottom: 50px;
   height: 46px;
   width: 46px;
   cursor: pointer;
   display: block;
   z-index: 99;
   opacity: 0;
   visibility: hidden;
   border-radius: 50px;
   transform: translateY(15px);
   -webkit-transition: all 200ms linear;
   transition: all 200ms linear;
   background-color: var(--bg-white, #ffffff);
   color: var(--text-dark, #1a1a1a);
   box-shadow: 0px 8px 16px rgba(3, 4, 28, 0.3);
}

.progress-wrap.active-progress {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.progress-wrap::after {
   position: absolute;
   content: "";
   top: 0px;
   width: 46px;
   height: 44px;
   border-radius: 4px;
   inset-inline-start: 0;
   transition: all 0.4s ease;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 12px 10px;
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 6L6 1L1 6' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
}

.progress-wrap:hover {
   transform: translateY(-4px);
}

.progress-wrap svg path {
   fill: none;
}

.progress-wrap svg.progress-circle path {
   stroke-width: 4;
   box-sizing: border-box;
   stroke: var(--brand-purple, #682F96);
   -webkit-transition: all 200ms linear;
   transition: all 200ms linear;
}

@media (max-width: 767px) {
   .progress-wrap {
      inset-inline-end: 20px;
      bottom: 20px;
   }
}

/* ==========================================================================
   COMPONENTES GLOBALES DE PÁGINAS INTERNAS
   ========================================================================== */

/* Breadcrumb Global */
.pd-breadcrumb-list {
    font-size: 0.875rem; /* 14px */
    color: var(--text-muted);
    font-weight: 500;
}

.pd-breadcrumb-list span {
    margin: 0 4px;
}

.pd-breadcrumb-list a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.pd-breadcrumb-list a:hover {
    color: var(--brand-purple);
}