/**
* Template Name: Kelly
* Template URL: https://bootstrapmade.com/kelly-free-bootstrap-cv-resume-html-template/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - Cosmic Fluir Estelar Theme */
:root {
  /* Cosmic Color Palette */
  --cosmic-lavender: #C9B6E4; /* Lavanda estelar - Main backgrounds, soft sections */
  --cosmic-night-blue: #2E2D4D; /* Azul noche cósmico - Titles, buttons, important details */
  --cosmic-flowing-blue: #6ECEDA; /* Azul agua fluyente - Links, icons, accents */
  --cosmic-sage-green: #A8C3B8; /* Verde salvia - Hover states, forms, natural details */
  --cosmic-soft-gold: #E6CBA8; /* Dorado suave - Vibrational phrases, borders */
  --cosmic-smoke-white: #F5F5F5; /* Blanco humo - Cards, text blocks */

  /* Primary Theme Colors */
  --background-color: linear-gradient(135deg, #2E2D4D 0%, #1a1933 50%, #0f0d1a 100%); /* Deep cosmic background */
  --default-color: #E6E6FA; /* Light cosmic text color */
  --heading-color: #C9B6E4; /* Cosmic lavender for headings */
  --accent-color: #6ECEDA; /* Flowing blue accent */
  --surface-color: rgba(245, 245, 245, 0.95); /* Semi-transparent smoke white */
  --contrast-color: #2E2D4D; /* Dark contrast for light backgrounds */

  /* Secondary Colors */
  --secondary-bg: rgba(201, 182, 228, 0.1); /* Subtle lavender background */
  --card-bg: rgba(245, 245, 245, 0.98); /* Card backgrounds with opacity */
  --border-color: rgba(230, 203, 168, 0.3); /* Soft gold borders */
}

/* Nav Menu Colors - Cosmic Navigation Theme */
:root {
  --nav-color: var(--cosmic-smoke-white);  /* Light navigation text */
  --nav-hover-color: var(--cosmic-flowing-blue); /* Flowing blue hover effect */
  --nav-mobile-background-color: rgba(46, 45, 77, 0.95); /* Dark cosmic mobile nav */
  --nav-dropdown-background-color: rgba(245, 245, 245, 0.98); /* Light dropdown background */
  --nav-dropdown-color: var(--cosmic-night-blue); /* Dark text in dropdown */
  --nav-dropdown-hover-color: var(--cosmic-flowing-blue); /* Blue hover in dropdown */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: var(--cosmic-smoke-white);
  --surface-color: rgba(245, 245, 245, 0.95);
  --default-color: var(--cosmic-night-blue);
  /* Variables para el menú móvil */
  --nav-mobile-background-color: rgba(46, 45, 77, 0.95);
  --nav-dropdown-color: var(--cosmic-smoke-white);
  --nav-dropdown-hover-color: var(--cosmic-flowing-blue);
}

.contact-page {
  background: var(--cosmic-smoke-white) !important;
  color: var(--cosmic-night-blue);
}

.contact-page::before,
.contact-page::after {
  display: none !important;
}

.contact-page .main {
  background: var(--cosmic-smoke-white) !important;
}

.contact-page .contact.section {
  background: linear-gradient(135deg, rgba(46, 45, 77, 0.03) 0%, rgba(201, 182, 228, 0.05) 100%) !important;
  color: var(--cosmic-night-blue) !important;
}

.dark-background {
  --background-color: linear-gradient(135deg, var(--cosmic-night-blue) 0%, #1a1933 50%, #0f0d1a 100%);
  --default-color: var(--cosmic-smoke-white);
  --heading-color: var(--cosmic-lavender);
  --surface-color: rgba(201, 182, 228, 0.1);
  --contrast-color: var(--cosmic-smoke-white);
}

/* Cosmic Theme Classes */
.cosmic-background {
  background: linear-gradient(135deg, var(--cosmic-night-blue) 0%, #1a1933 50%, #0f0d1a 100%);
  color: var(--cosmic-smoke-white);
}

.cosmic-card {
  background: var(--card-bg, rgba(245, 245, 245, 0.98));
  border: 1px solid var(--border-color, rgba(201, 182, 228, 0.3));
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(201, 182, 228, 0.2);
  backdrop-filter: blur(10px);
  /* Ensure high contrast text */
  color: var(--cosmic-night-blue);
}

/* Enhanced cosmic card with better readability */
.cosmic-card.spiritual-glow {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(110, 206, 218, 0.4);
  color: var(--cosmic-night-blue);
}

.cosmic-gradient-text {
  /* ENHANCED CONTRAST: Using darker cosmic colors for better readability on light backgrounds */
  background: linear-gradient(135deg, #1a5c6d 0%, #5a4a8f 50%, #3d7b8a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  /* Fallback for browsers that don't support background-clip: text */
  @supports not (-webkit-background-clip: text) {
    background: none !important;
    color: var(--cosmic-night-blue) !important;
  }
  /* Subtle shadow for better definition without compromising gradient visibility */
  filter: drop-shadow(0 1px 2px rgba(46, 45, 77, 0.1));
  font-weight: 700;
  /* Ensure sufficient contrast ratio (WCAG AA compliant) */
}

/* Enhanced cosmic gradient text for better visibility */
.about-gradient {
  /* ULTRA DARK for maximum contrast */
  background: none !important;
  color: #2a2a3e !important;
  -webkit-text-fill-color: #2a2a3e !important;
  font-weight: 500;
  text-shadow: none;
  line-height: 1.6;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.spiritual-glow {
  box-shadow: 0 0 20px rgba(110, 206, 218, 0.3);
  transition: all 0.3s ease;
}

.spiritual-glow:hover {
  box-shadow: 0 0 30px rgba(110, 206, 218, 0.5);
  transform: translateY(-2px);
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background: var(--background-color);
  font-family: var(--default-font);
  position: relative;
  overflow-x: hidden;
}

/* Cosmic Background Effects */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><radialGradient id="star" cx="50%" cy="50%" r="50%"><stop offset="0%" style="stop-color:%23FFFFFF;stop-opacity:0.8" /><stop offset="100%" style="stop-color:%23FFFFFF;stop-opacity:0" /></radialGradient></defs><circle cx="10" cy="20" r="0.5" fill="url(%23star)" /><circle cx="80" cy="15" r="0.3" fill="url(%23star)" /><circle cx="30" cy="80" r="0.4" fill="url(%23star)" /><circle cx="90" cy="70" r="0.2" fill="url(%23star)" /><circle cx="20" cy="50" r="0.3" fill="url(%23star)" /><circle cx="70" cy="30" r="0.5" fill="url(%23star)" /><circle cx="50" cy="90" r="0.4" fill="url(%23star)" /></svg>') repeat;
  opacity: 0.3;
  z-index: -2;
  animation: twinkle 8s infinite ease-in-out;
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(201, 182, 228, 0.1) 0%, transparent 50%);
  z-index: -1;
  animation: cosmic-pulse 6s infinite ease-in-out;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

@keyframes cosmic-pulse {
  0%, 100% { transform: scale(1); opacity: 0.1; }
  50% { transform: scale(1.05); opacity: 0.2; }
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

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

/*--------------------------------------------------------------
# Global Header - Cosmic Theme
--------------------------------------------------------------*/
.header {
  color: var(--nav-color);
  background: rgba(46, 45, 77, 0.95);
  backdrop-filter: blur(10px);
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;
  box-shadow: 0px 4px 20px rgba(201, 182, 228, 0.3);
  border-bottom: 1px solid rgba(230, 203, 168, 0.2);
}

/* Elevar z-index del header y desactivar backdrop-filter cuando el menú móvil está activo.
   backdrop-filter crea un containing block que atrapa a los elementos position:fixed dentro del header */
@media (max-width: 1199px) {
  .mobile-nav-active .header {
    z-index: 99998 !important;
    backdrop-filter: none !important;
  }
}

.header.scrolled {
  background: rgba(46, 45, 77, 0.98);
  box-shadow: 0px 4px 25px rgba(201, 182, 228, 0.4);
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 90px;
  margin-right: 8px;
  mix-blend-mode: lighten;
  filter: brightness(1.15);
  transition: filter 0.3s ease;
}

.header .logo img:hover {
  filter: brightness(1.3);
}

.header .logo h1 {
  font-size: 32px;
  margin: 0;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--cosmic-lavender);
  text-shadow: 0 0 10px rgba(201, 182, 228, 0.5);
  letter-spacing: 2px;
}

.header .header-social-links {
  padding-right: 15px;
}

.header .header-social-links a {
  color: var(--cosmic-flowing-blue);
  padding-left: 6px;
  display: inline-block;
  transition: 0.3s;
  font-size: 24px;
  opacity: 0.8;
}

.header .header-social-links a:hover {
  color: var(--cosmic-lavender);
  opacity: 1;
  text-shadow: 0 0 8px rgba(201, 182, 228, 0.6);
  transform: translateY(-2px);
}

.header .header-social-links a i {
  line-height: 0px;
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .header-social-links {
    order: 2;
  }

  .header .navmenu {
    order: 3;
  }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 14px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    font-size: 15px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: all 0.3s ease;
    position: relative;
    text-shadow: 0 1px 2px rgba(46, 45, 77, 0.5);
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background: linear-gradient(90deg, var(--cosmic-flowing-blue), var(--cosmic-lavender));
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
    box-shadow: 0 0 6px rgba(110, 206, 218, 0.6);
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 25px;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--cosmic-flowing-blue);
    text-shadow: 0 0 8px rgba(110, 206, 218, 0.6);
    transform: translateY(-1px);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    backdrop-filter: blur(10px);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 15px;
    z-index: 99;
    box-shadow: 0px 8px 32px rgba(201, 182, 228, 0.3);
    border: 1px solid var(--border-color);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Mobile Navigation */

/* Keyframe para la entrada escalonada de cada item */
@keyframes nav-item-appear {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keyframe para el boton close (rotate-in) */
@keyframes close-btn-in {
  from {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

/* Keyframe para el brillo del brand text */
@keyframes brand-glow {
  0%, 100% {
    text-shadow: 0 0 8px rgba(110, 206, 218, 0.3), 0 0 20px rgba(201, 182, 228, 0.15);
  }
  50% {
    text-shadow: 0 0 16px rgba(110, 206, 218, 0.5), 0 0 30px rgba(201, 182, 228, 0.25);
  }
}

@media (max-width: 1199px) {

  /* ── Boton hamburguesa ─────────────────────────────────────── */
  .mobile-nav-toggle {
    font-size: 26px;
    line-height: 0;
    margin-right: 8px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    color: var(--cosmic-lavender);
    transition: color 0.25s ease, transform 0.25s ease, background 0.25s ease;
    border: 1px solid rgba(201, 182, 228, 0.25);
    background: rgba(46, 45, 77, 0.4);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  .mobile-nav-toggle:hover {
    color: var(--cosmic-flowing-blue);
    background: rgba(110, 206, 218, 0.12);
    border-color: rgba(110, 206, 218, 0.4);
    transform: scale(1.08);
  }

  /* ── Boton close (oculto por defecto) ──────────────────────── */
  .mobile-nav-close {
    display: none;
  }

  /* ── Brand text decorativo (oculto por defecto) ────────────── */
  .mobile-nav-brand {
    display: none;
  }

  /* ── Contenedor del navmenu (estado cerrado) ───────────────── */
  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  /* ── La lista UL es el overlay fullscreen ──────────────────── */
  .navmenu ul {
    position: fixed;
    inset: 0;
    z-index: 99999;
    list-style: none;
    margin: 0;
    padding: 0;
    /* Fullscreen centrado */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* Fondo cosmico */
    background:
      radial-gradient(ellipse at 30% 20%, rgba(201, 182, 228, 0.12) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 80%, rgba(110, 206, 218, 0.08) 0%, transparent 50%),
      radial-gradient(ellipse at 50% 50%, rgba(230, 203, 168, 0.05) 0%, transparent 40%),
      linear-gradient(160deg, rgba(46, 45, 77, 0.98) 0%, rgba(28, 27, 55, 0.99) 50%, rgba(18, 16, 38, 1) 100%);
    /* Hidden by default with animatable properties */
    visibility: hidden;
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: visibility 0.2s, opacity 0.2s ease, backdrop-filter 0.2s ease, -webkit-backdrop-filter 0.2s ease;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* ── Linea de luz decorativa superior ──────────────────────── */
  .navmenu ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--cosmic-flowing-blue) 30%,
      var(--cosmic-lavender) 60%,
      var(--cosmic-soft-gold) 80%,
      transparent 100%
    );
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  /* ── Linea de luz decorativa inferior ──────────────────────── */
  .navmenu ul::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--cosmic-soft-gold) 20%,
      var(--cosmic-lavender) 50%,
      var(--cosmic-flowing-blue) 80%,
      transparent 100%
    );
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  /* ── Items de navegacion (ocultos por defecto) ─────────────── */
  .navmenu li {
    position: relative;
    opacity: 0;
  }

  /* ── Separador punto medio entre items ─────────────────────── */
  .navmenu > ul > li + li::before {
    content: '\00B7';
    display: block;
    text-align: center;
    color: rgba(230, 203, 168, 0.35);
    font-size: 20px;
    line-height: 1;
    margin: 2px 0;
  }

  /* ── Estilo de los enlaces ──────────────────────────────────── */
  .navmenu a,
  .navmenu a:focus {
    color: rgba(245, 245, 245, 0.85);
    padding: 12px 32px;
    font-family: var(--nav-font);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: block;
    text-align: center;
    white-space: nowrap;
    transition: color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
    position: relative;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Underline centrado ::after */
  .navmenu a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, var(--cosmic-flowing-blue), var(--cosmic-lavender));
    border-radius: 1px;
    transition: transform 0.25s ease;
  }

  .navmenu a:hover::after,
  .navmenu .active::after,
  .navmenu .active:focus::after {
    transform: translateX(-50%) scaleX(1);
  }

  /* Hover y estado activo */
  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--cosmic-flowing-blue);
    transform: scale(1.05);
    text-shadow: 0 0 12px rgba(110, 206, 218, 0.5);
  }

  /* ── Submenus (dropdown) ────────────────────────────────────── */
  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 6px 0;
    margin: 0 0 6px 0;
    background: rgba(14, 12, 30, 0.5);
    border-left: 2px solid rgba(230, 203, 168, 0.2);
    margin-left: 28px;
    border-radius: 0 0 8px 8px;
    transition: all 0.3s ease;
    /* Reset fullscreen styles for dropdown sub-ul */
    visibility: visible;
    opacity: 1;
    inset: unset;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    backdrop-filter: none;
  }

  .navmenu .dropdown ul ul {
    background: rgba(14, 12, 30, 0.4);
    margin-left: 20px;
  }

  .navmenu .dropdown > .dropdown-active {
    display: block;
  }

  .navmenu .dropdown ul a {
    font-size: 13px;
    padding: 10px 20px;
    letter-spacing: 0.04em;
    color: rgba(201, 182, 228, 0.75);
    text-transform: none;
    text-align: left;
  }

  .navmenu .dropdown ul a:hover {
    color: var(--cosmic-sage-green);
    background: rgba(168, 195, 184, 0.08);
    transform: none;
    text-shadow: none;
  }

  /* Icono del dropdown toggle */
  .navmenu a i,
  .navmenu a:focus i {
    font-size: 11px;
    line-height: 0;
    margin-left: 5px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.25s ease, color 0.25s ease, transform 0.3s ease;
    background: rgba(201, 182, 228, 0.12);
    color: var(--cosmic-lavender);
    border: 1px solid rgba(201, 182, 228, 0.2);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background: rgba(110, 206, 218, 0.25);
    color: var(--cosmic-flowing-blue);
    border-color: rgba(110, 206, 218, 0.4);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background: rgba(110, 206, 218, 0.2);
    color: var(--cosmic-flowing-blue);
    border-color: rgba(110, 206, 218, 0.4);
    transform: rotate(180deg);
  }

  /* ══════════════════════════════════════════════════════════════
     Estado ACTIVO: body.mobile-nav-active
     ══════════════════════════════════════════════════════════════ */
  .mobile-nav-active {
    overflow: hidden;
  }

  /* Overlay visible */
  .mobile-nav-active .navmenu > ul {
    visibility: visible;
    opacity: 1;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* Lineas decorativas visibles */
  .mobile-nav-active .navmenu > ul::before,
  .mobile-nav-active .navmenu > ul::after {
    opacity: 0.7;
  }

  /* Items animados en cadena */
  .mobile-nav-active .navmenu > ul > li {
    animation: nav-item-appear 0.2s ease both;
  }

  .mobile-nav-active .navmenu > ul > li:nth-child(1) { animation-delay: 0.06s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(2) { animation-delay: 0.10s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(3) { animation-delay: 0.14s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(4) { animation-delay: 0.18s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(5) { animation-delay: 0.22s; }
  .mobile-nav-active .navmenu > ul > li:nth-child(6) { animation-delay: 0.26s; }

  /* ── Boton close visible dentro del overlay ────────────────── */
  .mobile-nav-active .mobile-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100001;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(201, 182, 228, 0.35);
    background: rgba(46, 45, 77, 0.6);
    color: var(--cosmic-lavender);
    font-size: 20px;
    cursor: pointer;
    animation: close-btn-in 0.25s ease both;
    animation-delay: 0.1s;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav-active .mobile-nav-close:hover {
    color: var(--cosmic-soft-gold);
    background: rgba(230, 203, 168, 0.15);
    border-color: rgba(230, 203, 168, 0.4);
    transform: rotate(90deg);
  }

  /* ── Brand text decorativo en la parte inferior ────────────── */
  .mobile-nav-active .mobile-nav-brand {
    display: block;
    position: fixed;
    bottom: 32px;
    left: 0;
    right: 0;
    z-index: 100001;
    text-align: center;
    font-family: var(--heading-font);
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(201, 182, 228, 0.4);
    pointer-events: none;
    animation: brand-glow 4s ease-in-out infinite;
  }
}

/*--------------------------------------------------------------
# Global Footer - Cosmic Grounding
--------------------------------------------------------------*/
.footer {
  color: var(--cosmic-smoke-white);
  background: linear-gradient(135deg, var(--cosmic-night-blue) 0%, #1a1933 100%);
  font-size: 14px;
  padding: 60px 0 40px;
  position: relative;
  overflow: hidden;
  /* isolation: isolate crea un nuevo contexto de apilamiento independiente
     para que los z-index internos se resuelvan correctamente en todos los navegadores */
  isolation: isolate;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cosmic-flowing-blue), var(--cosmic-lavender), var(--cosmic-sage-green), var(--cosmic-soft-gold));
  opacity: 0.8;
}

.footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at bottom, rgba(201, 182, 228, 0.1) 0%, transparent 70%);
  z-index: 0;
  /* pointer-events: none es critico: impide que este overlay decorativo
     intercepte los clics y taps en movil sobre los enlaces del footer */
  pointer-events: none;
}

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

.footer .social-links {
  margin-top: 20px;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 2px solid rgba(110, 206, 218, 0.4);
  font-size: 22px;
  color: var(--cosmic-flowing-blue);
  margin: 0 8px;
  transition: all 0.4s ease;
  background: rgba(245, 245, 245, 0.1);
  backdrop-filter: blur(5px);
  position: relative;
  z-index: 2;
}

.footer .social-links a:hover {
  color: var(--cosmic-lavender);
  border-color: var(--cosmic-lavender);
  background: rgba(201, 182, 228, 0.2);
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 8px 20px rgba(201, 182, 228, 0.3);
}

/* ---------------------------------------------------------------
   Footer: enlaces legales (Aviso Legal, Politica de Privacidad,
   Politica de Cookies). Se consolidan los dos bloques duplicados
   que existian antes en uno solo, corrigiendo el problema de taps
   en movil.
   Causas del fallo en movil:
     1. ::after del footer con z-index > 0 y sin pointer-events:none
        interceptaba los toques antes de que llegaran a los enlaces.
     2. Los dos bloques duplicados se sobreescribian entre si, dejando
        font-size y margin-top con valores incorrectos.
     3. Los enlaces carecian de un area de toque minima para movil.
--------------------------------------------------------------- */
.footer .credits {
  margin-top: 18px;
  font-size: 13px;
  text-align: center;
  /* display: flex en lugar de inline-block evita que los pipes "|"
     del HTML queden fuera del area clicable en pantallas estrechas */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 0.6rem;
  /* z-index: 3 supera al ::after (z-index: 0) y al ::before (sin z-index) */
  position: relative;
  z-index: 3;
  /* pointer-events: auto garantiza que los eventos de toque lleguen al elemento */
  pointer-events: auto;
}

.footer .credits a {
  /* min de 44px de alto: recomendacion WCAG para area de toque tactil */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px 6px;
  /* z-index explicito sobre el contenedor para reforzar en Safari iOS */
  position: relative;
  z-index: 3;
  pointer-events: auto;
  color: rgba(245, 245, 245, 0.75);
  text-decoration: none;
  transition: color 0.3s ease;
  /* -webkit-tap-highlight-color: transparente pero visible al tocar */
  -webkit-tap-highlight-color: rgba(110, 206, 218, 0.2);
}

.footer .credits a:hover,
.footer .credits a:focus,
.footer .credits a:active {
  color: var(--cosmic-flowing-blue);
  text-decoration: underline;
  outline: none;
}

/* Separadores decorativos entre enlaces: no son interactivos */
.footer .credits-separator {
  color: rgba(245, 245, 245, 0.35);
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

@media (max-width: 575.98px) {
  .footer .credits {
    /* En pantallas muy pequenas se apilan verticalmente para
       maximizar el area de toque de cada enlace */
    flex-direction: column;
    gap: 0.2rem;
  }

  /* Ocultar los separadores "|" en movil: en layout columna no tienen sentido
     visual y ocupan espacio entre los enlaces apilados */
  .footer .credits-separator {
    display: none;
  }

  .footer .credits a {
    min-height: 48px;
    font-size: 14px;
    padding: 6px 12px;
  }
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background-color: var(--background-color);
  transition: all 0.6s ease-out;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid var(--accent-color);
  border-radius: 50%;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader:after {
  animation-delay: -0.5s;
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 25px 0;
  position: relative;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.page-title h1 {
  font-size: 24px;
  font-weight: 400;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "\u2727";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections - Cosmic Experience
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background: var(--background-color);
  padding: 80px 0;
  scroll-margin-top: 100px;
  overflow: clip;
  position: relative;
}

/* Alternating section backgrounds for cosmic depth */
section:nth-child(even),
.section:nth-child(even) {
  background: var(--cosmic-smoke-white);
  color: var(--cosmic-night-blue);
}

section:nth-child(odd),
.section:nth-child(odd) {
  background: linear-gradient(135deg, rgba(46, 45, 77, 0.03) 0%, rgba(201, 182, 228, 0.05) 100%);
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles - Enhanced Cosmic Experience
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding: 20px 20px 30px;
  position: relative;
  margin-bottom: 10px;
  overflow: hidden;
}

/* Celestial backdrop effect */
.section-title::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 150px;
  background: radial-gradient(circle,
    rgba(110, 206, 218, 0.08) 0%,
    rgba(201, 182, 228, 0.06) 30%,
    rgba(168, 195, 184, 0.04) 60%,
    transparent 80%);
  border-radius: 50%;
  z-index: -1;
  animation: cosmic-pulse 4s ease-in-out infinite;
}

/* Flowing star line above title */
.section-title::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--cosmic-soft-gold),
    var(--cosmic-flowing-blue),
    var(--cosmic-lavender),
    transparent);
  opacity: 0.7;
  animation: stellar-flow 3s ease-in-out infinite;
}

.section-title h2 {
  font-size: clamp(26px, 4.5vw, 38px);
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 15px;
  position: relative;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: linear-gradient(135deg,
    var(--cosmic-night-blue) 0%,
    var(--cosmic-flowing-blue) 40%,
    var(--cosmic-lavender) 80%,
    var(--cosmic-soft-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: cosmic-gradient-shift 6s ease-in-out infinite;
  text-shadow: 0 0 30px rgba(110, 206, 218, 0.3);
}

/* Enhanced underline with cosmic energy */
.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg,
    var(--cosmic-flowing-blue),
    var(--cosmic-lavender),
    var(--cosmic-sage-green),
    var(--cosmic-soft-gold));
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 2px;
  box-shadow:
    0 0 12px rgba(110, 206, 218, 0.4),
    0 0 25px rgba(201, 182, 228, 0.25);
  animation: cosmic-glow 2s ease-in-out infinite alternate;
}

/* Floating cosmic particles */
.section-title h2::before {
  content: '✦';
  position: absolute;
  top: -10px;
  left: 20%;
  color: var(--cosmic-soft-gold);
  font-size: 12px;
  opacity: 0.6;
  animation: float-left 3s ease-in-out infinite;
}

/* Additional cosmic elements */
.section-title h2:hover {
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

.section-title h2:hover::after {
  width: 80px;
  box-shadow:
    0 0 20px rgba(110, 206, 218, 0.7),
    0 0 40px rgba(201, 182, 228, 0.5);
  transition: all 0.3s ease;
}

.section-title p {
  margin-bottom: 0;
  color: var(--cosmic-night-blue);
  opacity: 1;
  font-size: 1rem;
  font-style: italic;
  margin-top: 10px;
  position: relative;
  z-index: 1;
  font-weight: 500;
}

/* Enhanced cosmic sparkles for special sections */
.section-title.cosmic-enhanced::before {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle,
    rgba(110, 206, 218, 0.15) 0%,
    rgba(201, 182, 228, 0.12) 25%,
    rgba(168, 195, 184, 0.08) 50%,
    rgba(230, 203, 168, 0.05) 75%,
    transparent 90%);
}

/* Responsive adjustments for cosmic titles */
@media (max-width: 768px) {
  .section-title {
    padding: 15px 15px 25px;
  }

  .section-title::before {
    width: 120px;
    height: 120px;
    top: -15px;
  }

  .section-title::after {
    width: 70px;
    top: 5px;
  }

  .section-title h2 {
    margin-bottom: 12px;
    padding-bottom: 12px;
    letter-spacing: 0.3px;
  }

  .section-title h2::after {
    width: 50px;
    height: 3px;
  }

  .section-title h2::before {
    font-size: 10px;
    top: -8px;
  }
}

@media (max-width: 480px) {
  .section-title {
    padding: 12px 10px 20px;
  }

  .section-title h2 {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .section-title p {
    font-size: 0.95rem;
    margin-top: 8px;
  }
}

/*--------------------------------------------------------------
# Hero Section - Cosmic Experience
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: calc(100vh - 82px);
  position: relative;
  padding: 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cosmic-night-blue) 0%, #1a1933 50%, #0f0d1a 100%);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 30%, rgba(201, 182, 228, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 80% 70%, rgba(110, 206, 218, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 50% 50%, rgba(168, 195, 184, 0.05) 0%, transparent 50%);
  animation: cosmic-drift 15s infinite ease-in-out;
  z-index: 1;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><radialGradient id="star1" cx="50%" cy="50%" r="50%"><stop offset="0%" style="stop-color:%23FFFFFF;stop-opacity:0.9" /><stop offset="100%" style="stop-color:%23FFFFFF;stop-opacity:0" /></radialGradient><radialGradient id="star2" cx="50%" cy="50%" r="50%"><stop offset="0%" style="stop-color:%23C9B6E4;stop-opacity:0.7" /><stop offset="100%" style="stop-color:%23C9B6E4;stop-opacity:0" /></radialGradient></defs><circle cx="20" cy="30" r="0.8" fill="url(%23star1)" /><circle cx="180" cy="40" r="0.6" fill="url(%23star2)" /><circle cx="60" cy="160" r="0.5" fill="url(%23star1)" /><circle cx="150" cy="180" r="0.4" fill="url(%23star2)" /><circle cx="40" cy="100" r="0.3" fill="url(%23star1)" /><circle cx="120" cy="60" r="0.7" fill="url(%23star2)" /><circle cx="100" cy="180" r="0.5" fill="url(%23star1)" /><circle cx="170" cy="120" r="0.4" fill="url(%23star2)" /></svg>') repeat;
  animation: starfield-move 20s linear infinite;
  z-index: 1;
  opacity: 0.4;
}

@keyframes cosmic-drift {
  0%, 100% { transform: translateX(0) scale(1); }
  33% { transform: translateX(-10px) scale(1.02); }
  66% { transform: translateX(10px) scale(0.98); }
}

@keyframes starfield-move {
  from { transform: translateY(0); }
  to { transform: translateY(-200px); }
}

@media (max-width: 1200px) {
  .hero {
    min-height: calc(100vh - 68px);
  }
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero .container {
  position: relative;
  z-index: 3;
  text-align: center;
}

.hero h2 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  color: var(--cosmic-lavender);
  text-shadow: 0 0 20px rgba(201, 182, 228, 0.5);
  margin-bottom: 20px;
  animation: cosmic-glow 3s ease-in-out infinite alternate;
}

@keyframes cosmic-glow {
  from { text-shadow: 0 0 20px rgba(201, 182, 228, 0.5); }
  to { text-shadow: 0 0 30px rgba(201, 182, 228, 0.8), 0 0 40px rgba(110, 206, 218, 0.3); }
}

.hero p {
  margin: 10px 0 0 0;
  font-size: 24px;
  color: var(--cosmic-smoke-white);
  opacity: 0.9;
  text-shadow: 0 1px 3px rgba(46, 45, 77, 0.7);
  margin-bottom: 30px;
}

.hero .btn-get-started {
  color: var(--cosmic-night-blue);
  background: linear-gradient(45deg, var(--cosmic-flowing-blue), var(--cosmic-sage-green));
  font-family: var(--heading-font);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 2px;
  display: inline-block;
  padding: 15px 45px;
  border-radius: 50px;
  transition: all 0.4s ease;
  margin-top: 30px;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(110, 206, 218, 0.3);
}

.hero .btn-get-started::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.hero .btn-get-started:hover::before {
  left: 100%;
}

.hero .btn-get-started:hover {
  background: linear-gradient(45deg, var(--cosmic-sage-green), var(--cosmic-flowing-blue));
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(110, 206, 218, 0.5);
  border-color: var(--cosmic-lavender);
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 32px;
  }

  .hero p {
    font-size: 18px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content .about-story {
  position: relative;
  padding: 3rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(245, 246, 255, 0.88) 55%, rgba(201, 182, 228, 0.45) 100%);
  color: var(--cosmic-night-blue);
  /* Integrated with intro-header above - no top border radius */
  border-radius: 0 0 22px 22px;
  border: 1px solid rgba(230, 203, 168, 0.3);
  border-top: 1px solid rgba(110, 206, 218, 0.3);
  box-shadow: 0 18px 50px rgba(46, 45, 77, 0.14);
  overflow: hidden;
  backdrop-filter: blur(4px);
  /* Negative margin to connect with intro-header */
  margin-top: -2rem;
}

.about .content .about-story::before {
  content: "";
  position: absolute;
  inset: -40% auto auto -30%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(110, 206, 218, 0.16) 0%, rgba(201, 182, 228, 0) 70%);
  filter: blur(0);
  opacity: 0.7;
  z-index: 0;
}

.about .content .about-story::after {
  content: "";
  position: absolute;
  inset: auto -35% -45% auto;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(230, 203, 168, 0.14) 0%, rgba(201, 182, 228, 0) 70%);
  opacity: 0.65;
  z-index: 0;
}

.about .about-story__portrait {
  position: relative;
  padding: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.97) 0%, rgba(245, 246, 255, 0.92) 50%, rgba(201, 182, 228, 0.46) 100%);
  border-radius: 22px;
  border: 1px solid rgba(230, 203, 168, 0.28);
  box-shadow: 0 18px 40px rgba(46, 45, 77, 0.18);
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(4px);
}

.about .about-story__portrait::before {
  content: "";
  position: absolute;
  inset: -55% auto auto -45%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(110, 206, 218, 0.18) 0%, rgba(201, 182, 228, 0) 70%);
  opacity: 0.8;
  z-index: 0;
}

.about .about-story__portrait::after {
  content: "";
  position: absolute;
  inset: auto -50% -50% auto;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(230, 203, 168, 0.16) 0%, rgba(201, 182, 228, 0) 70%);
  opacity: 0.6;
  z-index: 0;
}

.about .about-story__portrait-orb {
  position: absolute;
  top: 12%;
  right: 14%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 206, 218, 0.42) 0%, rgba(201, 182, 228, 0.05) 85%);
  box-shadow: 0 0 25px rgba(110, 206, 218, 0.35);
  z-index: 1;
}

.about .about-story__portrait-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  border-radius: 20px;
  border: 2px solid rgba(201, 182, 228, 0.55);
  box-shadow: 0 18px 38px rgba(46, 45, 77, 0.22);
  object-fit: cover;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.about .about-story__portrait:hover .about-story__portrait-img {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(46, 45, 77, 0.28);
}

.about-story-layout > [class*="col-"] {
  display: flex;
}

.about-story-layout > [class*="col-"] > * {
  flex: 1;
}

.about .content .about-story p,
.about .content .about-story ul {
  position: relative;
  z-index: 1;
}

.about .content .about-story__intro-block {
  display: grid;
  gap: 1rem;
  margin-bottom: 2.3rem;
}

.about .content .about-story__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  background: rgba(110, 206, 218, 0.18);
  color: var(--cosmic-night-blue);
  border: 1px solid rgba(110, 206, 218, 0.38);
  box-shadow: 0 8px 20px rgba(110, 206, 218, 0.22);
  width: fit-content;
}

.about .content .about-story__badge i {
  font-size: 1.1rem;
  color: var(--cosmic-flowing-blue);
}

.about .content .about-story p {
  margin-bottom: 1.1rem;
  line-height: 1.9;
  color: var(--cosmic-night-blue);
}

.about .content .about-story__intro {
  font-family: var(--heading-font);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cosmic-night-blue);
  margin-bottom: 1.5rem;
}

.about .content .about-story__highlight {
  margin-top: 1.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cosmic-flowing-blue);
}

.about .content .about-story__mantra {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 246, 255, 0.9));
  border: 2px solid rgba(110, 206, 218, 0.4);
  border-radius: 16px;
  padding: 1.3rem 1.6rem;
  color: var(--cosmic-night-blue);
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(110, 206, 218, 0.2);
  /* Enhanced readability for spiritual text */
  line-height: 1.6;
  font-size: 1.05rem;
}

.about .content .about-story__focus {
  display: grid;
  gap: 1.4rem;
  margin-bottom: 2.2rem;
}

.about .content .about-story__focus-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(201, 182, 228, 0.35);
  box-shadow: 0 12px 28px rgba(46, 45, 77, 0.12);
}

.about .content .about-story__focus-item i {
  font-size: 1.6rem;
  color: var(--cosmic-flowing-blue);
  align-self: center;
}

.about .content .about-story__focus-item h4 {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cosmic-night-blue);
}

.about .content .about-story__focus-item p {
  margin: 0;
  line-height: 1.6;
  color: var(--cosmic-night-blue);
  opacity: 0.9;
  font-weight: 450;
}

.about .content .about-story__mantra-icon {
  font-size: 1.4rem;
  /* Enhanced visibility for mantra icon */
  color: #1a5c6d;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.about .content .about-story__separator {
  border: none;
  border-top: 1px dashed rgba(110, 206, 218, 0.45);
  margin: 2.5rem auto 2rem;
  max-width: 200px;
  opacity: 0.6;
}

.about .content .about-story__subtitle {
  position: relative;
  z-index: 1;
  font-family: var(--heading-font);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cosmic-night-blue);
  margin-bottom: 1.2rem;
}

.about .content .about-story__values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.2rem;
  margin-top: 2.2rem;
}

.about .content .about-story__value {
  padding: 1.2rem 1.3rem;
  background: rgba(245, 246, 255, 0.85);
  border-radius: 18px;
  border: 1px solid rgba(230, 203, 168, 0.32);
  box-shadow: 0 14px 32px rgba(46, 45, 77, 0.14);
  display: grid;
  gap: 0.6rem;
  text-align: left;
  /* Fix: Smooth transitions to prevent conflict with AOS animations */
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.about .content .about-story__value i {
  font-size: 1.4rem;
  color: var(--cosmic-flowing-blue);
}

.about .content .about-story__value h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.about .content .about-story__value p {
  margin: 0;
  line-height: 1.55;
  color: var(--cosmic-night-blue);
  opacity: 0.9;
  font-weight: 450;
}

.about .content .about-story__subtitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.4rem;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--cosmic-flowing-blue), var(--cosmic-lavender));
  border-radius: 999px;
}

.about .content .about-story__list {
  display: grid;
  gap: 0.75rem;
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}

.about .content .about-story__list li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 500;
  color: var(--cosmic-night-blue);
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(201, 182, 228, 0.32);
  box-shadow: 0 10px 26px rgba(46, 45, 77, 0.1);
}

.about .content .about-story__list i {
  font-size: 1.3rem;
  color: var(--cosmic-flowing-blue);
}

.about .content .about-story__list span {
  flex: 1;
}

/* Enhanced About Story Styles */
.about .content .about-story__focus-icon {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cosmic-flowing-blue), var(--cosmic-lavender));
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(110, 206, 218, 0.3);
  transition: all 0.3s ease;
}

.about .content .about-story__focus-icon i {
  color: var(--cosmic-smoke-white) !important;
  font-size: 1.4rem !important;
}

.about .content .about-story__focus-item:hover .about-story__focus-icon {
  transform: scale(1.1);
  box-shadow: 0 10px 25px rgba(110, 206, 218, 0.5);
}

.about .content .about-story__mission {
  margin: 2rem 0;
}

.about .content .about-story__mission .about-story__mantra {
  /* ENHANCED: Solid white background for maximum text contrast */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.98));
  border: 2px solid rgba(110, 206, 218, 0.5);
  padding: 1.5rem 2rem;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(110, 206, 218, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.about .content .about-story__mission .about-story__mantra::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.about .content .about-story__value-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cosmic-flowing-blue), var(--cosmic-sage-green));
  border-radius: 50%;
  margin: 0 auto 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(110, 206, 218, 0.2);
}

.about .content .about-story__value-icon i {
  color: var(--cosmic-smoke-white) !important;
  font-size: 1.6rem !important;
}

.about .content .about-story__value:hover .about-story__value-icon {
  transform: translateY(-5px) rotate(10deg);
  box-shadow: 0 15px 30px rgba(110, 206, 218, 0.4);
}

.about .content .about-story__value:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 40px rgba(110, 206, 218, 0.25), 0 0 0 1px rgba(110, 206, 218, 0.3);
  border-color: rgba(110, 206, 218, 0.5);
}

/* Ensure smooth hover without interfering with AOS */
.about .content .about-story__value.aos-animate {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.about .content .about-story__credentials {
  margin-top: 3rem;
}

.about .content .about-story__list-container {
  background: rgba(245, 245, 245, 0.6);
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid rgba(230, 203, 168, 0.3);
  backdrop-filter: blur(5px);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.about .content .about-story__list-container:hover {
  background: rgba(245, 245, 245, 0.8);
  border-color: rgba(110, 206, 218, 0.4);
}

.about .content .about-story__list li {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.about .content .about-story__list li:hover {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 15px rgba(110, 206, 218, 0.2);
}

/* Portrait column styling */
.about .about-story__portrait .about-story__intro-block {
  text-align: center;
  margin-top: 1.5rem;
}

.about .about-story__portrait .about-story__intro {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.about .about-story__portrait .about-story__badge {
  margin: 0 auto;
  text-align: center;
  font-size: 0.9rem;
  max-width: 280px;
}

/* Intro Header Styling - Enhanced for maximum visibility */
.about-story__intro-header {
  max-width: 100%;
  margin: 0 0 2rem 0;
  padding: 1.8rem 2.2rem 2rem;
  text-align: center;
  position: relative;
  /* Elegant glassmorphism design - integrated with cosmic-card */
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.98),
    rgba(250, 252, 255, 0.95),
    rgba(245, 247, 255, 0.92)
  );
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 20px 20px 0 0;
  border: 1px solid rgba(110, 206, 218, 0.3);
  border-bottom: none;
  box-shadow:
    0 -5px 20px rgba(110, 206, 218, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Remove hover effect since it's integrated with about-story */

/* Decorative cosmic accent - top of integrated card */
.about-story__intro-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent,
    rgba(110, 206, 218, 0.4) 20%,
    rgba(110, 206, 218, 0.6) 50%,
    rgba(201, 182, 228, 0.6) 50%,
    rgba(201, 182, 228, 0.4) 80%,
    transparent
  );
  border-radius: 20px 20px 0 0;
}

.about-story__intro {
  font-family: var(--heading-font);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  /* ULTRA DARK for maximum contrast on white background */
  background: none !important;
  color: #1a1a2e !important;
  -webkit-text-fill-color: #1a1a2e !important;
  text-shadow: none;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.about-story__description {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cosmic-night-blue);
  opacity: 0.7;
  margin: 0 auto;
  font-style: italic;
}

.about-page .about .content .about-story__mantra span:last-child {
  flex: 1;
  /* Ensure cosmic gradient text is readable in about page with enhanced weight */
  font-weight: 700;
  text-shadow: none;
}

/* Enhanced contrast for cosmic-gradient-text inside mantra cards */
.about-story__mantra .cosmic-gradient-text {
  /* CRITICAL FIX: Ultra dark gradient for maximum contrast on white mantra cards */
  background: linear-gradient(135deg, #1a1a2e 0%, #0f3d4a 50%, #1a1a2e 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25));
  font-size: 1.15rem;
  line-height: 1.8;
}

/* Fallback para navegadores sin soporte de background-clip */
@supports not (-webkit-background-clip: text) {
  .about-story__mantra .cosmic-gradient-text {
    background: none !important;
    color: #1a1a2e !important;
    -webkit-text-fill-color: #1a1a2e !important;
  }
}

.about-page .about .content .about-story__mantra {
  flex-wrap: wrap;
  /* Enhanced background for better text contrast in about page */
  background: rgba(255, 255, 255, 0.98) !important;
  border: 2px solid var(--cosmic-flowing-blue) !important;
}

/* Additional text contrast improvements for about page */
.about-page .cosmic-gradient-text {
  /* Elegant dark color for maximum contrast on white backgrounds */
  background: none !important;
  color: #1a5c6d !important;
  -webkit-text-fill-color: #1a5c6d !important;
  font-weight: 600 !important;
  text-shadow: none;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Specific styling for cosmic-gradient-text inside intro header */
.about-story__intro-header .cosmic-gradient-text {
  display: block;
  margin-top: 0.3rem;
  padding-top: 0.5rem;
  position: relative;
}

/* Decorative separator before cosmic-gradient-text in header */
.about-story__intro-header .cosmic-gradient-text::before {
  content: '✦';
  display: block;
  text-align: center;
  color: rgba(110, 206, 218, 0.5);
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.5rem;
}

.about-page .about-gradient {
  /* Ensure about-gradient text is highly visible */
  font-weight: 500 !important;
}

/* Styling for about-gradient inside intro header */
.about-story__intro-header .about-gradient {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
  font-style: italic;
  opacity: 0.9;
}

/* Specific fix for about-story__subtitle with cosmic-gradient-text */
.about-story__subtitle.cosmic-gradient-text {
  /* CRITICAL CONTRAST FIX: Solid color for maximum readability on white cosmic-card backgrounds */
  background: none !important;
  color: #1a1a2e !important;
  -webkit-text-fill-color: #1a1a2e !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/* Large screens - maintain integration */
@media (min-width: 1400px) {
  .about-story__intro-header {
    max-width: 100%;
    padding: 2rem 2.8rem 2.3rem;
  }

  .about-story__intro {
    font-size: 1.5rem;
    margin-bottom: 0.9rem;
  }

  .about-gradient,
  .about-story__intro-header .cosmic-gradient-text {
    font-size: 1rem;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .about-story__intro-header {
    max-width: 100%;
    padding: 1.9rem 2.5rem 2.2rem;
  }
}

@media (max-width: 991px) {
  .about-story__intro-header {
    padding: 1.5rem 1.8rem 1.8rem;
    border-radius: 18px 18px 0 0;
  }

  .about-story__intro-header::before {
    border-radius: 18px 18px 0 0;
  }

  .about .content .about-story {
    padding: 2.5rem;
    margin-top: -1.8rem;
    border-radius: 0 0 18px 18px;
  }

  .about-story-layout > [class*="col-"] {
    display: block;
  }

  .about-story-layout > [class*="col-"] > * {
    flex: initial;
  }

  .about .content .about-story__focus {
    gap: 1.2rem;
  }
}

@media (max-width: 768px) {
  .about .content .about-story {
    padding: 2rem;
  }

  .about .content .about-story__intro {
    font-size: 1.35rem;
  }

  .about-story__intro-header {
    padding: 1.3rem 1.2rem 1.5rem;
    margin: 0;
    max-width: 100%;
    border-radius: 15px 15px 0 0;
  }

  .about .content .about-story {
    margin-top: -1.5rem;
    border-radius: 0 0 15px 15px;
  }

  .about-story__intro {
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
  }

  .about-gradient {
    font-size: 0.9rem;
  }

  .about-story__intro-header .cosmic-gradient-text {
    font-size: 0.9rem;
    padding-top: 0.3rem;
  }

  .about-story__intro-header::before {
    height: 2px;
    border-radius: 15px 15px 0 0;
  }

  .about-story__intro-header .cosmic-gradient-text::before {
    font-size: 0.7rem;
    margin-bottom: 0.3rem;
  }

  .about .content .about-story__mantra {
    padding: 1.2rem 1.3rem;
    /* Enhanced mobile readability */
    font-size: 1.1rem;
    line-height: 1.7;
  }

  .about .content .about-story__values {
    grid-template-columns: 1fr;
  }

  .about .content .about-story__focus-item {
    grid-template-columns: 1fr;
    text-align: left;
    /* Better mobile text contrast */
    background: rgba(255, 255, 255, 0.98);
  }

  .about .content .about-story__focus-item i {
    justify-self: flex-start;
  }

  /* Mobile-specific text contrast improvements */

  .about-gradient {
    /* Stronger text on mobile */
    font-weight: 600;
    color: var(--cosmic-night-blue);
  }
}

/* Additional small screen optimizations */
@media (max-width: 480px) {
  .cosmic-gradient-text {
    /* Fallback to solid color on very small screens for better readability */
    background: none !important;
    color: var(--cosmic-night-blue) !important;
    -webkit-text-fill-color: var(--cosmic-night-blue) !important;
    font-weight: 700;
  }
}

  .about .about-story__portrait {
    padding: 1.5rem;
  }
}

.about .content h2 {
  font-weight: 700;
  font-size: 24px;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.about .content ul strong {
  margin-right: 10px;
}

.about .content ul i {
  font-size: 16px;
  margin-right: 5px;
  color: var(--accent-color);
  line-height: 0;
}

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .progress {
  height: 60px;
  display: block;
  background: none;
  border-radius: 0;
}

.skills .progress .skill {
  color: var(--heading-color);
  padding: 0;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: var(--heading-font);
}

.skills .progress .skill .val {
  float: right;
  font-style: normal;
}

.skills .progress-bar-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  height: 10px;
}

.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item span {
  color: var(--heading-color);
  font-size: 48px;
  display: block;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.stats .stats-item span:after {
  content: "";
  position: absolute;
  display: block;
  width: 25px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-weight: 500;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .section-header {
  margin-bottom: 40px;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  text-align: center;
}

.testimonials .testimonial-item .testimonial-img {
  width: 120px;
  border-radius: 50%;
  border: 4px solid var(--background-color);
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0 0 15px 0;
}

.testimonials .testimonial-item .stars {
  margin-bottom: 15px;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

@media (min-width: 992px) {
  .testimonials .testimonial-item p {
    width: 80%;
  }
}

/*--------------------------------------------------------------
# Resume Section
--------------------------------------------------------------*/
.resume .resume-title {
  color: var(--heading-color);
  font-size: 26px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
}

.resume .resume-item {
  padding: 0 0 20px 20px;
  margin-top: -2px;
  border-left: 2px solid var(--accent-color);
  position: relative;
}

.resume .resume-item h4 {
  line-height: 18px;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 10px;
}

.resume .resume-item h5 {
  font-size: 16px;
  padding: 5px 15px;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 10px;
}

.resume .resume-item ul {
  padding-left: 20px;
}

.resume .resume-item ul li {
  padding-bottom: 10px;
}

.resume .resume-item:last-child {
  padding-bottom: 0;
}

.resume .resume-item::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50px;
  left: -9px;
  top: 0;
  background: var(--background-color);
  border: 2px solid var(--accent-color);
}

/*--------------------------------------------------------------
# Services Section - Cosmic Therapeutic Theme
--------------------------------------------------------------*/
.services .service-item {
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  box-shadow: 0px 8px 32px rgba(201, 182, 228, 0.2);
  height: 100%;
  padding: 60px 30px;
  text-align: center;
  transition: all 0.4s ease;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}

.services .service-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cosmic-flowing-blue), var(--cosmic-lavender), var(--cosmic-sage-green));
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: left;
}

.services .service-item:hover::before {
  transform: scaleX(1);
}

.badge.bg-soft-cosmic {
  background: linear-gradient(135deg, rgba(110, 206, 218, 0.15), rgba(201, 182, 228, 0.15));
  color: var(--cosmic-night-blue);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 6px 14px;
  border: 1px solid rgba(110, 206, 218, 0.3);
  border-radius: 20px;
}

.services .service-item .icon {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
  position: relative;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(110, 206, 218, 0.1), rgba(201, 182, 228, 0.1));
  border: 2px solid rgba(230, 203, 168, 0.3);
}

.services .service-item .icon::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, var(--cosmic-flowing-blue), transparent, var(--cosmic-lavender), transparent);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: cosmic-rotate 8s linear infinite;
}

.services .service-item:hover .icon::after {
  opacity: 0.7;
}

@keyframes cosmic-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.services .service-item .icon i {
  font-size: 36px;
  transition: all 0.4s ease;
  position: relative;
  color: var(--cosmic-flowing-blue);
  z-index: 2;
}

.services .service-item .icon svg {
  position: absolute;
  top: 0;
  left: 0;
}

.services .service-item .icon svg path {
  transition: 0.5s;
  fill: color-mix(in srgb, var(--default-color), transparent 95%);
}

.services .service-item h3 {
  font-weight: 700;
  margin: 25px 0 15px 0;
  font-size: 22px;
  color: var(--cosmic-night-blue);
  background: linear-gradient(45deg, var(--cosmic-night-blue), var(--cosmic-flowing-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.services .service-item p {
  line-height: 26px;
  font-size: 15px;
  margin-bottom: 0;
  color: var(--cosmic-night-blue);
  opacity: 0.8;
  transition: all 0.3s ease;
}

.services .service-item:hover {
  box-shadow: 0px 15px 45px rgba(201, 182, 228, 0.4);
  transform: translateY(-8px);
  border-color: var(--cosmic-flowing-blue);
}

.services .service-item:hover .icon {
  transform: scale(1.1);
  box-shadow: 0 0 25px rgba(110, 206, 218, 0.4);
}

.services .service-item:hover h3 {
  text-shadow: 0 0 10px rgba(110, 206, 218, 0.3);
}

.services .service-item:hover p {
  opacity: 1;
  color: var(--cosmic-night-blue);
}

/* CONTRAST FIX: Ensure section-title paragraph is readable on light backgrounds */
.services .section-title p,
.contact .section-title p,
.portfolio .section-title p,
.about .section-title p,
.starter-section .section-title p {
  color: #d4c4f0;
  opacity: 1;
}

/* Cosmic Service Item Variants for Different Therapies */
.services .service-item.cosmic-constellation i {
  color: var(--cosmic-flowing-blue);
}

.services .service-item.cosmic-constellation:hover .icon i {
  color: var(--cosmic-smoke-white);
  text-shadow: 0 0 10px rgba(110, 206, 218, 0.8);
}

.services .service-item.cosmic-constellation:hover .icon path {
  fill: var(--cosmic-flowing-blue);
}

.services .service-item.cosmic-akashic i {
  color: var(--cosmic-lavender);
}

.services .service-item.cosmic-akashic:hover .icon i {
  color: var(--cosmic-smoke-white);
  text-shadow: 0 0 10px rgba(201, 182, 228, 0.8);
}

.services .service-item.cosmic-akashic:hover .icon path {
  fill: var(--cosmic-lavender);
}

.services .service-item.cosmic-cleansing i {
  color: var(--cosmic-sage-green);
}

.services .service-item.cosmic-cleansing:hover .icon i {
  color: var(--cosmic-smoke-white);
  text-shadow: 0 0 10px rgba(168, 195, 184, 0.8);
}

.services .service-item.cosmic-cleansing:hover .icon path {
  fill: var(--cosmic-sage-green);
}

.services .service-item.cosmic-ritual i {
  color: var(--cosmic-soft-gold);
}

.services .service-item.cosmic-ritual:hover .icon i {
  color: var(--cosmic-night-blue);
  text-shadow: 0 0 10px rgba(230, 203, 168, 0.8);
}

.services .service-item.cosmic-ritual:hover .icon path {
  fill: var(--cosmic-soft-gold);
}

.services .service-item.cosmic-meditation i {
  color: var(--cosmic-night-blue);
}

.services .service-item.cosmic-meditation:hover .icon i {
  color: var(--cosmic-smoke-white);
  text-shadow: 0 0 10px rgba(46, 45, 77, 0.8);
}

.services .service-item.cosmic-meditation:hover .icon path {
  fill: var(--cosmic-night-blue);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px 10px 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  font-family: var(--heading-font);
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 0 10px 0;
  }
}

.portfolio .portfolio-item {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -100%;
  z-index: 3;
  transition: all ease-in-out 0.5s;
  background: color-mix(in srgb, var(--surface-color), transparent 10%);
  padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 24px;
  top: calc(50% - 14px);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: 0.3s;
  line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0;
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Contact Type Selector
--------------------------------------------------------------*/
.contact-type-selector {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-bottom: 48px;
}

.contact-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 40px;
  background: rgba(255, 255, 255, 0.98);
  border: 2px solid rgba(201, 182, 228, 0.25);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.35s ease;
  flex: 1;
  max-width: 360px;
  box-shadow: 0 4px 20px rgba(46, 45, 77, 0.06);
}

.contact-type-btn:hover {
  border-color: var(--cosmic-flowing-blue);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(110, 206, 218, 0.18);
}

.contact-type-btn.active {
  border-color: var(--cosmic-flowing-blue);
  background: linear-gradient(135deg, rgba(110, 206, 218, 0.08), rgba(201, 182, 228, 0.08));
  box-shadow: 0 8px 30px rgba(110, 206, 218, 0.2);
}

.contact-type-icon {
  font-size: 2.2rem;
  color: var(--cosmic-flowing-blue);
  line-height: 1;
}

.contact-type-btn.active .contact-type-icon {
  filter: drop-shadow(0 0 8px rgba(110, 206, 218, 0.4));
}

.contact-type-label {
  font-family: var(--heading-font);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--cosmic-night-blue);
}

.contact-type-desc {
  font-size: 0.88rem;
  color: #888;
  text-align: center;
  line-height: 1.4;
}

.contact-form-panel {
  animation: fadeInPanel 0.4s ease;
}

@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 576px) {
  .contact-type-selector {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }

  .contact-type-btn {
    max-width: 100%;
    width: 100%;
    padding: 24px 20px;
  }
}

/*--------------------------------------------------------------
# Contact Section - Healing Connection
--------------------------------------------------------------*/
.contact .info-wrap {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  box-shadow: 0px 8px 32px rgba(201, 182, 228, 0.25);
  padding: 40px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}

.contact .info-wrap::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--cosmic-flowing-blue), var(--cosmic-lavender), var(--cosmic-sage-green), var(--cosmic-soft-gold));
  border-radius: 20px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.contact .info-wrap:hover::before {
  opacity: 0.7;
}

.contact .info-wrap:hover {
  transform: translateY(-5px);
  box-shadow: 0px 12px 40px rgba(201, 182, 228, 0.35);
}

@media (max-width: 575px) {
  .contact .info-wrap {
    padding: 20px;
  }
}

.contact .info-item {
  margin-bottom: 40px;
}

.contact .info-item i {
  font-size: 20px;
  color: var(--cosmic-flowing-blue);
  background: linear-gradient(135deg, rgba(110, 206, 218, 0.15), rgba(201, 182, 228, 0.15));
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: all 0.4s ease;
  margin-right: 20px;
  border: 2px solid rgba(230, 203, 168, 0.3);
  position: relative;
}

.contact .info-item i::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--cosmic-flowing-blue), var(--cosmic-lavender), var(--cosmic-sage-green), var(--cosmic-flowing-blue));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: cosmic-rotate 6s linear infinite;
}

.contact .info-item:hover i::before {
  opacity: 0.6;
}

.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--cosmic-night-blue);
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
  color: var(--cosmic-night-blue);
  opacity: 0.8;
}

.contact .info-item:hover i {
  background: linear-gradient(135deg, var(--cosmic-flowing-blue), var(--cosmic-lavender));
  color: var(--cosmic-smoke-white);
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(110, 206, 218, 0.4);
}

.contact .php-email-form {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  height: 100%;
  padding: 40px;
  box-shadow: 0px 8px 32px rgba(201, 182, 228, 0.25);
  border-radius: 20px;
  border: 1px solid var(--border-color);
  transition: all 0.4s ease;
}

.contact .php-email-form:hover {
  transform: translateY(-3px);
  box-shadow: 0px 12px 40px rgba(201, 182, 228, 0.35);
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea,
.contact .php-email-form input[type=date],
.contact .php-email-form input[type=time],
.contact .php-email-form select {
  font-size: 15px;
  padding: 15px 20px;
  box-shadow: none;
  border-radius: 12px;
  color: var(--cosmic-night-blue);
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(110, 206, 218, 0.3);
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  font-weight: 500;
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus,
.contact .php-email-form input[type=date]:focus,
.contact .php-email-form input[type=time]:focus,
.contact .php-email-form select:focus {
  border-color: var(--cosmic-flowing-blue);
  box-shadow: 0 0 15px rgba(110, 206, 218, 0.4);
  background: rgba(255, 255, 255, 1);
  outline: none;
  transform: translateY(-2px);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: rgba(46, 45, 77, 0.6);
  font-weight: 400;
}

.contact .php-email-form button[type=submit] {
  color: var(--cosmic-smoke-white);
  background: linear-gradient(45deg, var(--cosmic-flowing-blue), var(--cosmic-sage-green));
  border: 2px solid transparent;
  padding: 15px 40px;
  transition: all 0.4s ease;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(110, 206, 218, 0.3);
}

.contact .php-email-form button[type=submit]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.contact .php-email-form button[type=submit]:hover::before {
  left: 100%;
}

.contact .php-email-form button[type=submit]:hover {
  background: linear-gradient(45deg, var(--cosmic-sage-green), var(--cosmic-flowing-blue));
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(110, 206, 218, 0.5);
  border-color: var(--cosmic-lavender);
}

.aEnlaceDesarrolladoPor {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.35rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 1.08rem;
  color: var(--cosmic-night-blue);
  background: linear-gradient(120deg, rgba(201, 182, 228, 0.3), rgba(110, 206, 218, 0.32));
  box-shadow:
    inset 0 0 0 1px rgba(110, 206, 218, 0.4),
    0 6px 18px rgba(46, 45, 77, 0.15);
  overflow: hidden;
  transition: all 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(4px);
  cursor: pointer;
  text-decoration: none;
  pointer-events: auto;
  z-index: 1;
}

.aEnlaceDesarrolladoPor::before {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: inherit;
  background: conic-gradient(from 0deg, rgba(110, 206, 218, 0.6), rgba(230, 203, 168, 0.4), rgba(201, 182, 228, 0.5), rgba(110, 206, 218, 0.6));
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

.aEnlaceDesarrolladoPor::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.85) 0%, transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(110, 206, 218, 0.6) 0%, transparent 60%),
    radial-gradient(circle at 50% 95%, rgba(230, 203, 168, 0.6) 0%, transparent 65%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

.aEnlaceDesarrolladoPor span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: linear-gradient(130deg, var(--cosmic-night-blue), var(--cosmic-flowing-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 0.55s ease, text-shadow 0.55s ease;
}

.aEnlaceDesarrolladoPor span::after {
  content: "\u2727";
  font-size: 1rem;
  opacity: 0;
  transform: translateX(-6px) scale(0.6);
  transition: transform 0.55s ease, opacity 0.55s ease;
}

.aEnlaceDesarrolladoPor .credits-icon {
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.aEnlaceDesarrolladoPor .credits-text {
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


.aEnlaceDesarrolladoPor:hover {
  color: var(--cosmic-smoke-white);
  transform: translateY(-3px) scale(1.07);
  box-shadow:
    0 18px 45px rgba(46, 45, 77, 0.25),
    0 0 30px rgba(110, 206, 218, 0.5),
    0 0 55px rgba(201, 182, 228, 0.45);
}

.aEnlaceDesarrolladoPor:hover::before {
  opacity: 1;
  transform: scale(1.05);
  animation: enlace-orbit 2.4s linear infinite;
  pointer-events: none;
}

.aEnlaceDesarrolladoPor:hover::after {
  opacity: 1;
  transform: scale(1.1);
  animation: enlace-pulse 1.6s ease-in-out infinite alternate;
}

.aEnlaceDesarrolladoPor:hover span {
  transform: translateY(-1px);
  letter-spacing: 0.14em;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.85),
    0 0 16px rgba(110, 206, 218, 0.65),
    0 0 22px rgba(201, 182, 228, 0.65);
}


.aEnlaceDesarrolladoPor:hover .credits-icon:first-of-type {
  transform: translateX(-6px) rotate(-12deg) scale(1.12);
  filter: drop-shadow(0 0 8px rgba(110, 206, 218, 0.6));
}

.aEnlaceDesarrolladoPor:hover .credits-icon:last-of-type {
  transform: translateX(6px) rotate(12deg) scale(1.12);
  filter: drop-shadow(0 0 8px rgba(201, 182, 228, 0.6));
}

.aEnlaceDesarrolladoPor:hover .credits-text {
  letter-spacing: 0.16em;
}
.aEnlaceDesarrolladoPor:hover span::after {
  opacity: 1;
  transform: translateX(4px) scale(1);
}

@keyframes enlace-pulse {
  0% {
    opacity: 0.85;
    transform: scale(1.05);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
  }
  100% {
    opacity: 0.95;
    transform: scale(1.08);
  }
}

@keyframes enlace-orbit {
  0% {
    transform: rotate(0deg) scale(1.05);
  }
  100% {
    transform: rotate(360deg) scale(1.05);
  }
}

/* Form Validation Styles */
.contact .php-email-form .is-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
  background-color: rgba(220, 53, 69, 0.05);
}

.contact .php-email-form .is-valid {
  border-color: var(--cosmic-sage-green) !important;
  box-shadow: 0 0 0 0.2rem rgba(168, 195, 184, 0.25) !important;
  background-color: rgba(168, 195, 184, 0.05);
}

.contact .php-email-form .error-message {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.3);
  border-radius: 8px;
  padding: 15px;
  margin-top: 10px;
  color: #721c24;
  font-weight: 500;
}

/*--------------------------------------------------------------
# Resume Section - Simple Starry Transformation Path
--------------------------------------------------------------*/
.resume.section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--cosmic-night-blue) 0%, #1a1933 50%, #0f0d1a 100%);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.resume.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><radialGradient id="star" cx="50%" cy="50%" r="50%"><stop offset="0%" style="stop-color:%23FFFFFF;stop-opacity:0.8" /><stop offset="100%" style="stop-color:%23FFFFFF;stop-opacity:0" /></radialGradient></defs><circle cx="10" cy="20" r="0.5" fill="url(%23star)" /><circle cx="80" cy="15" r="0.3" fill="url(%23star)" /><circle cx="30" cy="80" r="0.4" fill="url(%23star)" /><circle cx="90" cy="70" r="0.2" fill="url(%23star)" /><circle cx="20" cy="50" r="0.3" fill="url(%23star)" /><circle cx="70" cy="30" r="0.5" fill="url(%23star)" /><circle cx="50" cy="90" r="0.4" fill="url(%23star)" /></svg>') repeat;
  opacity: 0.3;
  z-index: 0;
  animation: gentle-twinkle 12s infinite ease-in-out;
  pointer-events: none;
}

.resume .section-title {
  /* UNIFIED: Same spacing as global section-title */
  padding: 20px 20px 30px;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.resume .section-title h2 {
  /* UNIFIED: Same size and spacing as global, adapted colors for dark background */
  font-size: clamp(26px, 4.5vw, 38px);
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 15px;
  letter-spacing: 0.5px;
  text-align: center;
  background: linear-gradient(135deg, #E6E6FA 0%, var(--cosmic-flowing-blue) 50%, #d4c4f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: cosmic-gradient-shift 6s ease-in-out infinite;
  position: relative;
}

/* Unified underline for resume h2 */
.resume .section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg,
    var(--cosmic-flowing-blue),
    var(--cosmic-lavender),
    var(--cosmic-sage-green),
    var(--cosmic-soft-gold));
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 2px;
  box-shadow:
    0 0 12px rgba(110, 206, 218, 0.6),
    0 0 25px rgba(201, 182, 228, 0.4);
  animation: cosmic-glow 2s ease-in-out infinite alternate;
}

.resume .section-title p {
  /* UNIFIED: Same size and spacing as global, adapted colors for dark background */
  text-align: center;
  color: #d4c4f0;
  font-size: 1rem;
  font-style: italic;
  margin-top: 10px;
  margin-bottom: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  opacity: 0.9;
}

/* Container with subtle cosmic effects */
.resume .container {
  position: relative;
  z-index: 2;
  max-width: 1000px;
}

.resume .row {
  position: relative;
}

/* Journey Format Notice */
.journey-format-notice {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 32px 36px;
  margin-bottom: 40px;
  box-shadow: 0 4px 20px rgba(46, 45, 77, 0.06);
  border: 1px solid rgba(201, 182, 228, 0.2);
  border-left: 4px solid var(--cosmic-flowing-blue);
}

.journey-format-icon {
  font-size: 2.4rem;
  color: var(--cosmic-flowing-blue);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 4px;
}

.journey-format-text h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cosmic-night-blue);
  margin-bottom: 10px;
}

.journey-format-text p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.7;
  margin-bottom: 10px;
}

.journey-format-text p:last-of-type {
  margin-bottom: 16px;
}

.journey-format-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--cosmic-flowing-blue);
  background: rgba(110, 206, 218, 0.1);
  border: 1px solid rgba(110, 206, 218, 0.25);
  border-radius: 20px;
  padding: 6px 16px;
}

@media (max-width: 576px) {
  .journey-format-notice {
    flex-direction: column;
    gap: 16px;
    padding: 24px 20px;
    text-align: center;
    align-items: center;
  }
}

/* Simple Journey Items - Clean Cards */
.resume .journey-item {
  background: rgba(245, 245, 245, 0.95);
  border-radius: 20px;
  padding: 20px;
  margin: 10px 0;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.2),
    0 0 40px rgba(110, 206, 218, 0.1);
  border: 2px solid rgba(230, 203, 168, 0.3);
  position: relative;
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
  display: flex;
  align-items: flex-start;
  gap: 25px;
}

.resume .journey-item:hover {
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.18),
    0 0 40px rgba(110, 206, 218, 0.12);
  border-color: rgba(110, 206, 218, 0.5);
}

/* Simple Icon Section */
.resume .journey-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 80px;
  flex-shrink: 0;
}

.resume .star-icon {
  font-size: 2.5rem;
  filter: drop-shadow(0 0 10px rgba(110, 206, 218, 0.4));
  transition: filter 0.3s ease;
}

.resume .journey-item:hover .star-icon {
  filter: drop-shadow(0 0 12px rgba(110, 206, 218, 0.5));
}

/* Stage-specific star colors */
.resume .journey-item:nth-child(1) .star-icon {
  color: var(--cosmic-flowing-blue);
}

.resume .journey-item:nth-child(2) .star-icon {
  color: var(--cosmic-sage-green);
}

.resume .journey-item:nth-child(3) .star-icon {
  color: var(--cosmic-soft-gold);
}

.resume .journey-item:nth-child(4) .star-icon {
  color: var(--cosmic-lavender);
}

/* Simple Stage Numbers */
.resume .stage-number {
  background: linear-gradient(135deg, var(--cosmic-night-blue), var(--cosmic-flowing-blue));
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(46, 45, 77, 0.3);
}

/* Content Area */
.resume .journey-content {
  flex: 1;
}

.resume .journey-content h3 {
  color: var(--cosmic-night-blue);
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 0 20px 0;
  position: relative;
}

.resume .journey-content h3::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, var(--cosmic-flowing-blue), var(--cosmic-sage-green));
  border-radius: 2px;
}

/* Quote Section */
.resume .journey-quote {
  background: rgba(201, 182, 228, 0.15);
  border-left: 4px solid var(--cosmic-sage-green);
  padding: 20px 25px;
  border-radius: 0 12px 12px 0;
  margin: 20px 0;
}

.resume .journey-quote p {
  /* ENHANCED CONTRAST: Using lighter color for better visibility on dark resume background */
  color: #9678c9d4;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
  font-style: italic;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Mantra Section */
.resume .journey-mantra {
  text-align: center;
  margin-top: 25px;
  position: relative;
}

.resume .journey-mantra p {
  /* IMPROVED CONTRAST: Using darker cosmic colors for better readability */
  background: linear-gradient(135deg, #1a5c6d 0%, #5a8073 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  position: relative;
  padding: 10px 15px;
  /* Enhanced definition */
  filter: drop-shadow(0 1px 2px rgba(46, 45, 77, 0.12));
  /* Fallback for browsers without gradient text support */
  @supports not (-webkit-background-clip: text) {
    background: none;
    color: var(--cosmic-night-blue);
  }
}

.resume .journey-mantra p::before,
.resume .journey-mantra p::after {
  content: '"';
  font-size: 1.8rem;
  color: var(--cosmic-soft-gold);
  font-weight: 300;
  position: absolute;
  top: -2px;
}

.resume .journey-mantra p::before {
  left: 0;
}

.resume .journey-mantra p::after {
  right: 0;
}

/* Simple Animation for Stars */
@keyframes gentle-twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.02);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .resume .journey-item {
    flex-direction: column;
    text-align: center;
    padding: 25px 20px;
    gap: 20px;
  }

  .resume .journey-icon {
    min-width: auto;
    gap: 10px;
  }

  .resume .star-icon {
    font-size: 2rem;
  }

  .resume .stage-number {
    width: 35px;
    height: 35px;
    font-size: 1.1rem;
  }

  .resume .section-title {
    padding: 15px 15px 25px;
  }

  .resume .section-title h2 {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }

  .resume .section-title h2::after {
    width: 50px;
    height: 3px;
  }

  .resume .journey-content h3 {
    font-size: 1.4rem;
  }

  .resume .journey-quote {
    border-left: none;
    border-top: 4px solid var(--cosmic-sage-green);
    border-radius: 12px;
    padding: 15px 20px;
  }

  .resume .journey-mantra p {
    font-size: 1.1rem;
  }
}

@media (max-width: 576px) {
  .resume .section-title {
    padding: 12px 10px 20px;
  }

  .resume .section-title h2 {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .resume .section-title p {
    font-size: 0.95rem;
    margin-top: 8px;
  }

  .resume .journey-item {
    margin: 20px 0;
    padding: 20px 15px;
  }

  .resume .star-icon {
    font-size: 1.8rem;
  }

  .resume .journey-content h3 {
    font-size: 1.3rem;
  }

  .resume .journey-quote {
    border-top: 3px solid var(--cosmic-sage-green);
    padding: 12px 15px;
  }

  .resume .journey-mantra p {
    font-size: 1rem;
  }
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Fluir Estelar - Custom Cosmic Elements
--------------------------------------------------------------*/

/* Therapeutic Service Cards Enhancement */
.service-cosmic {
  position: relative;
  overflow: hidden;
}

.service-cosmic::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(110, 206, 218, 0.05) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.service-cosmic:hover::after {
  opacity: 1;
}

/* Healing Energy Flow Animation */
.energy-flow {
  position: relative;
  overflow: hidden;
}

.energy-flow::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(110, 206, 218, 0.1),
    transparent,
    rgba(201, 182, 228, 0.1),
    transparent,
    rgba(168, 195, 184, 0.1),
    transparent
  );
  animation: cosmic-energy 12s linear infinite;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.energy-flow:hover::before {
  opacity: 1;
}

@keyframes cosmic-energy {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Vibrational Text Effect */
.vibrational-text {
  color: var(--cosmic-soft-gold);
  font-weight: 600;
  text-shadow: 0 0 10px rgba(230, 203, 168, 0.5);
  animation: subtle-vibration 3s ease-in-out infinite;
}

@keyframes subtle-vibration {
  0%, 100% { text-shadow: 0 0 10px rgba(230, 203, 168, 0.5); }
  50% { text-shadow: 0 0 15px rgba(230, 203, 168, 0.8), 0 0 20px rgba(230, 203, 168, 0.3); }
}

/* Spiritual Wisdom Quote Styling */
.spiritual-quote {
  font-style: italic;
  color: var(--cosmic-lavender);
  text-align: center;
  padding: 30px;
  margin: 40px 0;
  background: linear-gradient(135deg, rgba(201, 182, 228, 0.1), rgba(110, 206, 218, 0.05));
  border-radius: 20px;
  border-left: 4px solid var(--cosmic-flowing-blue);
  position: relative;
}

.spiritual-quote::before {
  content: '❝';
  font-size: 60px;
  color: var(--cosmic-flowing-blue);
  position: absolute;
  top: -10px;
  left: 20px;
  opacity: 0.3;
}

/* Akashic Records Styling */
.akashic-style {
  background: linear-gradient(135deg, rgba(46, 45, 77, 0.05), rgba(201, 182, 228, 0.1));
  border: 1px solid var(--border-color);
  border-radius: 15px;
  padding: 30px;
  position: relative;
  backdrop-filter: blur(5px);
}

.akashic-style::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cosmic-flowing-blue), var(--cosmic-lavender));
  border-radius: 15px 15px 0 0;
}

/* Constellation Navigation Effect */
.constellation-nav {
  position: relative;
}

.constellation-nav::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--cosmic-flowing-blue);
  border-radius: 50%;
  box-shadow:
    10px 10px 0 var(--cosmic-lavender),
    -10px -10px 0 var(--cosmic-sage-green),
    15px -15px 0 var(--cosmic-soft-gold),
    -15px 15px 0 var(--cosmic-flowing-blue);
  opacity: 0.6;
  animation: constellation-twinkle 4s ease-in-out infinite;
}

@keyframes constellation-twinkle {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* New animations for enhanced section titles */
@keyframes stellar-flow {
  0% {
    opacity: 0.3;
    transform: translateX(-50%) scaleX(0.5);
  }
  50% {
    opacity: 0.8;
    transform: translateX(-50%) scaleX(1.2);
  }
  100% {
    opacity: 0.3;
    transform: translateX(-50%) scaleX(0.5);
  }
}

@keyframes cosmic-gradient-shift {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
  100% { background-position: 0% 50%; }
}

@keyframes float-left {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  33% {
    transform: translateY(-5px) rotate(5deg);
    opacity: 0.9;
  }
  66% {
    transform: translateY(3px) rotate(-3deg);
    opacity: 0.5;
  }
}

/* Meditation Session Card */
.meditation-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: all 0.4s ease;
}

.meditation-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(168, 195, 184, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  transition: all 0.6s ease;
  transform: translate(-50%, -50%);
}

.meditation-card:hover::before {
  width: 300px;
  height: 300px;
}

.meditation-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 45px rgba(168, 195, 184, 0.3);
}

/* Responsive Cosmic Enhancements */
@media (max-width: 768px) {
  .hero h2 {
    font-size: 36px;
  }

  .spiritual-quote {
    padding: 20px;
    margin: 20px 0;
  }

  .meditation-card {
    padding: 30px 20px;
  }

  .services .service-item {
    padding: 40px 20px;
  }

  .contact .info-wrap,
  .contact .php-email-form {
    padding: 30px 20px;
  }
}

/*--------------------------------------------------------------
# Nueva Home - Fluir Estelar
--------------------------------------------------------------*/

/* Hero Home Section */
.hero-home {
  min-height: 90vh;
  display: flex;
  align-items: center;
  position: relative;
  padding: 100px 0 80px;
  overflow: hidden;
}

.hero-home__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,
    rgba(245, 246, 255, 0.95) 0%,
    rgba(250, 252, 255, 0.9) 50%,
    rgba(245, 247, 255, 0.95) 100%
  );
  z-index: -2;
}

.hero-home__background::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(110, 206, 218, 0.15), transparent 70%);
  top: -100px;
  right: -100px;
  border-radius: 50%;
  animation: float-slow 20s ease-in-out infinite;
}

.hero-home__background::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(201, 182, 228, 0.12), transparent 70%);
  bottom: -50px;
  left: -50px;
  border-radius: 50%;
  animation: float-slow 25s ease-in-out infinite reverse;
}

@keyframes float-slow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, 30px); }
}

.hero-home__welcome {
  display: block;
  font-size: 1rem;
  color: var(--cosmic-flowing-blue);
  font-weight: 500;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.hero-home__title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--cosmic-night-blue);
  margin-bottom: 1.5rem;
  line-height: 1.2;
  background: linear-gradient(135deg,
    var(--cosmic-night-blue) 0%,
    var(--cosmic-flowing-blue) 50%,
    var(--cosmic-lavender) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-home__subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--cosmic-night-blue);
  margin-bottom: 1.2rem;
  line-height: 1.6;
  font-weight: 500;
}

.hero-home__description {
  font-size: 1.05rem;
  color: var(--cosmic-night-blue);
  opacity: 0.85;
  margin-bottom: 2rem;
  line-height: 1.8;
}

.hero-home__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-home__image {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cosmic-circle {
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: linear-gradient(135deg,
    rgba(110, 206, 218, 0.2),
    rgba(201, 182, 228, 0.2)
  );
  border: 2px solid rgba(110, 206, 218, 0.3);
  animation: cosmic-pulse 3s ease-in-out infinite;
}

.cosmic-circle::before {
  content: '';
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px dashed rgba(110, 206, 218, 0.4);
  animation: rotate-slow 30s linear infinite;
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-home__icon {
  font-size: 6rem;
  color: var(--cosmic-flowing-blue);
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 10px 20px rgba(110, 206, 218, 0.3));
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { filter: drop-shadow(0 10px 20px rgba(110, 206, 218, 0.3)); }
  50% { filter: drop-shadow(0 10px 30px rgba(110, 206, 218, 0.6)); }
}

/* ============================================================================
   HOME TESTIMONIALS SECTION
   Estilos para la sección de testimonios con temática cósmica y espiritual
   ============================================================================ */

/* Contenedor principal de la sección */
.home-testimonials {
  padding: 5rem 0;
  background: linear-gradient(
    180deg,
    var(--cosmic-smoke-white) 0%,
    rgba(201, 182, 228, 0.08) 50%,
    var(--cosmic-smoke-white) 100%
  );
  position: relative;
  overflow: hidden;
}

/* Efecto de fondo sutil con estrellas */
.home-testimonials::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(110, 206, 218, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(201, 182, 228, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.home-testimonials .container {
  position: relative;
  z-index: 1;
}

/* Título de la sección */
.home-testimonials .section-title {
  margin-bottom: 3.5rem;
}

.home-testimonials .section-title h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--cosmic-night-blue);
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
}

.home-testimonials .section-title h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--cosmic-flowing-blue),
    var(--cosmic-lavender),
    var(--cosmic-soft-gold)
  );
  border-radius: 10px;
}

/* Tarjeta de testimonio */
.testimonial-card {
  background: var(--cosmic-smoke-white);
  border-radius: 20px;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
  box-shadow:
    0 4px 15px rgba(46, 45, 77, 0.08),
    0 0 0 1px rgba(110, 206, 218, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Efecto de brillo en hover */
.testimonial-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    135deg,
    var(--cosmic-flowing-blue),
    var(--cosmic-lavender),
    var(--cosmic-soft-gold)
  );
  border-radius: 20px;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 12px 35px rgba(46, 45, 77, 0.15),
    0 0 0 1px rgba(110, 206, 218, 0.3);
  border-color: transparent;
}

.testimonial-card:hover::before {
  opacity: 1;
}

/* Cabecera del testimonio con avatar e info */
.testimonial-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

/* Avatar circular con gradiente cósmico */
.testimonial-avatar {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--cosmic-flowing-blue) 0%,
    var(--cosmic-lavender) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 12px rgba(110, 206, 218, 0.3),
    inset 0 -2px 8px rgba(255, 255, 255, 0.2);
  position: relative;
}

.testimonial-avatar::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  pointer-events: none;
}

.testimonial-avatar .bi {
  font-size: 2.2rem;
  color: var(--cosmic-smoke-white);
  position: relative;
  z-index: 1;
}

/* Información del cliente */
.testimonial-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.testimonial-info h4 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--cosmic-night-blue);
  margin: 0;
  line-height: 1.3;
}

/* Ubicación del cliente */
.testimonial-location {
  font-size: 0.9rem;
  color: var(--cosmic-night-blue);
  opacity: 0.6;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Estrellas de valoración */
.testimonial-stars {
  display: flex;
  gap: 0.15rem;
  margin-top: 0.2rem;
}

.testimonial-stars .bi-star-fill {
  font-size: 0.9rem;
  color: var(--cosmic-soft-gold);
  filter: drop-shadow(0 1px 2px rgba(230, 203, 168, 0.4));
}

/* Badge del servicio recibido */
.testimonial-service {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(
    135deg,
    rgba(110, 206, 218, 0.12),
    rgba(168, 195, 184, 0.12)
  );
  border: 1px solid rgba(110, 206, 218, 0.25);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cosmic-night-blue);
  margin-bottom: 1.2rem;
  align-self: flex-start;
  transition: all 0.3s ease;
}

.testimonial-service .bi {
  font-size: 1rem;
  color: var(--cosmic-flowing-blue);
}

.testimonial-card:hover .testimonial-service {
  background: linear-gradient(
    135deg,
    rgba(110, 206, 218, 0.2),
    rgba(168, 195, 184, 0.2)
  );
  border-color: rgba(110, 206, 218, 0.4);
  transform: translateX(3px);
}

/* Texto del testimonio */
.testimonial-text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--cosmic-night-blue);
  opacity: 0.85;
  font-style: italic;
  margin: 0;
  padding: 0;
  position: relative;
  flex: 1;
}

/* Comillas decorativas */
.testimonial-text::before {
  content: '\201C';
  font-size: 4rem;
  line-height: 1;
  color: var(--cosmic-lavender);
  opacity: 0.25;
  position: absolute;
  top: -20px;
  left: -10px;
  font-family: Georgia, serif;
  pointer-events: none;
}

/* Call to Action final */
.testimonials-cta {
  margin-top: 4rem;
  padding: 3rem 2rem;
  text-align: center;
  background: linear-gradient(
    135deg,
    rgba(201, 182, 228, 0.15) 0%,
    rgba(110, 206, 218, 0.15) 100%
  );
  border-radius: 24px;
  border: 2px solid rgba(110, 206, 218, 0.2);
  position: relative;
  overflow: hidden;
}

.testimonials-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

.testimonials-cta h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--cosmic-night-blue);
  margin-bottom: 1rem;
}

.testimonials-cta p {
  font-size: 1.05rem;
  color: var(--cosmic-night-blue);
  opacity: 0.75;
  margin-bottom: 1.8rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Botón principal cósmico (si no existe en el CSS) */
.btn-primary-cosmic {
  padding: 0.9rem 2.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cosmic-smoke-white);
  background: linear-gradient(
    135deg,
    var(--cosmic-night-blue) 0%,
    var(--cosmic-flowing-blue) 100%
  );
  border: none;
  border-radius: 30px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 15px rgba(46, 45, 77, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.btn-primary-cosmic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--cosmic-flowing-blue) 0%,
    var(--cosmic-lavender) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.btn-primary-cosmic:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 25px rgba(46, 45, 77, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: var(--cosmic-smoke-white);
}

.btn-primary-cosmic:hover::before {
  opacity: 1;
}

.btn-primary-cosmic .bi {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.btn-primary-cosmic:hover .bi {
  transform: translateX(3px);
}

.btn-primary-cosmic span {
  position: relative;
  z-index: 1;
}

/* Efectos touch para dispositivos móviles */
@media (hover: none) and (pointer: coarse) {
  /* En dispositivos táctiles, usar :active en lugar de :hover */
  .testimonial-card:active {
    transform: translateY(-8px);
    box-shadow:
      0 12px 35px rgba(46, 45, 77, 0.15),
      0 0 0 1px rgba(110, 206, 218, 0.3);
    border-color: transparent;
  }

  .testimonial-card:active::before {
    opacity: 1;
  }

  .btn-primary-cosmic:active {
    transform: translateY(-3px);
    box-shadow:
      0 8px 25px rgba(46, 45, 77, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }

  .btn-primary-cosmic:active::before {
    opacity: 1;
  }

  .btn-primary-cosmic:active .bi {
    transform: translateX(3px);
  }

  .testimonial-service:active {
    transform: translateX(5px);
  }
}

/* Responsive Design */
@media (max-width: 991px) {
  .home-testimonials {
    padding: 4rem 0;
  }

  .testimonial-card {
    margin-bottom: 1.5rem;
  }

  .testimonials-cta {
    margin-top: 3rem;
    padding: 2.5rem 1.5rem;
  }
}

@media (max-width: 767px) {
  .home-testimonials {
    padding: 3rem 0;
  }

  .home-testimonials .section-title {
    margin-bottom: 2.5rem;
  }

  .testimonial-card {
    padding: 1.5rem;
    border-radius: 16px;
  }

  .testimonial-header {
    gap: 1rem;
  }

  .testimonial-avatar {
    width: 60px;
    height: 60px;
  }

  .testimonial-avatar .bi {
    font-size: 1.8rem;
  }

  .testimonial-info h4 {
    font-size: 1.05rem;
  }

  .testimonial-service {
    font-size: 0.8rem;
    padding: 0.4rem 0.9rem;
  }

  .testimonial-text {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .testimonials-cta {
    margin-top: 2.5rem;
    padding: 2rem 1.2rem;
    border-radius: 20px;
  }

  .btn-primary-cosmic {
    padding: 0.8rem 2rem;
    font-size: 0.95rem;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575px) {
  .testimonial-text::before {
    font-size: 3rem;
    top: -15px;
    left: -5px;
  }

  .home-testimonials .section-title h2 {
    font-size: 1.8rem;
  }

  .testimonials-cta h3 {
    font-size: 1.4rem;
  }

  .testimonials-cta p {
    font-size: 0.95rem;
  }
}
}

/*--------------------------------------------------------------
# Journey Item as Link
--------------------------------------------------------------*/
a.journey-item-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.journey-item-link:hover {
  text-decoration: none;
  color: inherit;
}

/*--------------------------------------------------------------
# "Empezar mi proceso" Button on Journey Items
--------------------------------------------------------------*/
.btn-empezar-proceso {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 36px;
  font-family: var(--nav-font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--cosmic-night-blue), var(--cosmic-flowing-blue));
  border: 2px solid var(--cosmic-flowing-blue);
  border-radius: 30px;
  box-shadow: 0 4px 18px rgba(110, 206, 218, 0.3);
  transition: all 0.3s ease;
}

a.journey-item-link:hover .btn-empezar-proceso {
  background: linear-gradient(135deg, var(--cosmic-flowing-blue), var(--cosmic-night-blue));
  border-color: #fff;
  color: #fff;
  box-shadow: 0 6px 25px rgba(110, 206, 218, 0.45);
  transform: translateY(-2px);
}

/*--------------------------------------------------------------
# Process Pages - Hero, Detail, and Form
--------------------------------------------------------------*/

/* ── Detail Section ───────────────────────────────────────── */
.process-detail {
  padding-bottom: 80px;
}

.process-info-card {
  background: white;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 8px 30px rgba(46, 45, 77, 0.08);
  border: 1px solid rgba(201, 182, 228, 0.2);
}

.process-info-card h2 {
  font-size: 1.6rem;
  color: var(--cosmic-night-blue);
  margin-bottom: 20px;
  font-weight: 600;
}

.process-info-card p {
  color: #555;
  line-height: 1.8;
  font-size: 1rem;
  margin-bottom: 16px;
}

.process-ideal-box,
.process-includes-box {
  background: rgba(201, 182, 228, 0.08);
  border-left: 4px solid var(--cosmic-lavender);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  margin: 24px 0;
}

.process-includes-box {
  border-left-color: var(--cosmic-flowing-blue);
  background: rgba(110, 206, 218, 0.06);
}

.process-ideal-box h4,
.process-includes-box h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cosmic-night-blue);
  margin-bottom: 12px;
}

.process-ideal-box ul,
.process-includes-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.process-ideal-box li,
.process-includes-box li {
  padding: 6px 0 6px 20px;
  position: relative;
  color: #555;
  font-size: 0.95rem;
  line-height: 1.6;
}

.process-ideal-box li::before {
  content: '\2727';
  position: absolute;
  left: 0;
  color: var(--cosmic-lavender);
}

.process-includes-box li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--cosmic-flowing-blue);
  font-weight: 700;
}

.process-includes-note {
  margin-top: 16px;
  margin-bottom: 0;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: #856404;
  background: rgba(230, 203, 168, 0.15);
  border: 1px solid rgba(230, 203, 168, 0.35);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.process-includes-note i {
  color: #b8860b;
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* ── Process Form ─────────────────────────────────────────── */
.process-form {
  padding: 0;
}

.process-form-intro {
  text-align: center;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(201, 182, 228, 0.15);
}

.process-form-intro p {
  font-size: 0.95rem;
  color: #888;
  font-style: italic;
  line-height: 1.7;
  margin: 0;
}

.process-form-container {
  background: white;
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 8px 30px rgba(46, 45, 77, 0.08);
  border: 1px solid rgba(201, 182, 228, 0.2);
}

/* Form blocks */
.form-block {
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(201, 182, 228, 0.15);
}

.form-block:last-of-type {
  border-bottom: none;
  margin-bottom: 16px;
  padding-bottom: 0;
}

.form-block-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.form-block-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cosmic-night-blue), var(--cosmic-flowing-blue));
  color: white;
  font-size: 0.95rem;
  font-weight: 600;
  flex-shrink: 0;
}

.form-block-header h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--cosmic-night-blue);
  margin: 0;
}

.form-block-intro {
  font-size: 0.92rem;
  color: #888;
  font-style: italic;
  margin-bottom: 18px;
  line-height: 1.6;
}

/* Form fields */
.process-form-container .form-control {
  border: 1px solid rgba(201, 182, 228, 0.3);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.95rem;
  color: var(--cosmic-night-blue);
  background: rgba(245, 245, 245, 0.5);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.process-form-container .form-control:focus {
  border-color: var(--cosmic-flowing-blue);
  box-shadow: 0 0 0 3px rgba(110, 206, 218, 0.15);
  background: white;
  outline: none;
}

.process-form-container label {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--cosmic-night-blue);
  line-height: 1.5;
}

.required-mark {
  color: var(--cosmic-lavender);
  font-weight: 600;
}

.form-hint {
  display: block;
  font-size: 0.8rem;
  color: #aaa;
  margin-top: 4px;
  font-style: italic;
}

/* Process selection options (checkboxes) */
.process-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.process-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(201, 182, 228, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  background: rgba(245, 245, 245, 0.3);
}

.process-option:hover {
  border-color: var(--cosmic-flowing-blue);
  background: rgba(110, 206, 218, 0.04);
}

.process-option input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--cosmic-flowing-blue);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.process-option input[type="checkbox"]:checked + .process-option-content strong {
  color: var(--cosmic-flowing-blue);
}

.process-option-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.process-option-content strong {
  font-size: 0.95rem;
  color: var(--cosmic-night-blue);
  transition: color 0.2s ease;
}

.process-option-content em {
  font-size: 0.85rem;
  color: #999;
  font-style: italic;
}

/* Submit button */
.btn-process-submit {
  display: inline-block;
  padding: 14px 40px;
  font-family: var(--nav-font);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: white;
  background: linear-gradient(135deg, var(--cosmic-night-blue), var(--cosmic-flowing-blue));
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.btn-process-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(110, 206, 218, 0.35);
  background: linear-gradient(135deg, var(--cosmic-night-blue), rgba(110, 206, 218, 0.9));
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
  .process-info-card {
    padding: 28px;
    margin-bottom: 20px;
  }

  .process-form-container {
    padding: 24px;
  }
}

@media (max-width: 576px) {
  .process-info-card {
    padding: 20px;
  }

  .process-form-container {
    padding: 18px;
  }

  .process-option {
    padding: 12px 14px;
  }
}