/* ============================================================
   DESIGN TOKENS — EMV S.R.L. Mobile-First Redesign 2026
   ============================================================ */
:root {
   --navy-900: #102A43;
   --navy-800: #243B53;
   --navy-700: #334E68;
   --navy-600: #486581;
   --navy-500: #627D98;
   --teal-600: #2A6478;
   --teal-500: #3A8FB7;
   --teal-400: #5AADCC;
   --teal-300: #8DC8DB;
   --teal-200: #B8E0ED;
   --teal-50: #F0F9FF;
   --silver-800: #1E293B;
   --silver-700: #334155;
   --silver-600: #475569;
   --silver-500: #64748B;
   --silver-400: #94A3B8;
   --silver-300: #CBD5E1;
   --silver-200: #E2E8F0;
   --silver-100: #F1F5F9;
   --silver-50: #F8FAFC;
   --gray-50: var(--silver-50);
   --gray-100: var(--silver-100);
   --gray-200: var(--silver-200);
   --gray-800: var(--silver-800);
   --white: #FFFFFF;
   --accent-green: #25D366;
   --success: #10B981;
   --error: #EF4444;
   --warning: #F59E0B;
   --info: #3B82F6;
   --space-1: 8px;
   --space-2: 16px;
   --space-3: 24px;
   --space-4: 32px;
   --space-6: 48px;
   --space-8: 64px;
   --space-10: 80px;
   --space-12: 96px;
   --font-serif: 'Playfair Display', Georgia, serif;
   --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
   --text-h1: clamp(2.2rem, 5vw, 4rem);
   --text-h2: clamp(1.8rem, 4vw, 3rem);
   --text-h3: clamp(1.3rem, 3vw, 2rem);
   --text-body-lg: 1.125rem;
   --text-body: 1rem;
   --text-sm: 0.875rem;
   --text-xs: 0.75rem;
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 24px;
   --radius-pill: 999px;
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 12px rgba(27, 58, 92, 0.06);
   --shadow-lg: 0 4px 24px rgba(27, 58, 92, 0.08);
   --shadow-xl: 0 12px 48px rgba(27, 58, 92, 0.12);
   --shadow-premium: 0 20px 50px -12px rgba(16, 42, 67, 0.12);
   --white-alpha-90: rgba(255, 255, 255, 0.9);
   --white-alpha-80: rgba(255, 255, 255, 0.8);
   --white-alpha-10: rgba(255, 255, 255, 0.1);
   --glass-bg: rgba(255, 255, 255, 0.7);
   --glass-border: rgba(255, 255, 255, 0.3);
   --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
   --duration-fast: 150ms;
   --duration-normal: 300ms;
   --duration-slow: 500ms;
   --container-max: 1280px;
   --container-px: 1rem;
}

/* ============================================================
   RESET & BASE (Mobile-First: 375px default)
   ============================================================ */
*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

body {
   font-family: var(--font-sans);
   font-weight: 400;
   font-size: var(--text-body);
   line-height: 1.7;
   color: var(--silver-800);
   background: var(--white);
   overflow-x: hidden;
}

a {
   color: inherit;
   text-decoration: none;
   transition: color var(--duration-fast) var(--ease-smooth);
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

ul {
   list-style: none;
}

.container {
   width: 100%;
   max-width: var(--container-max);
   margin: 0 auto;
   padding: 0 var(--container-px);
}

.section {
   padding: var(--space-6) 0;
   position: relative;
}

@media (min-width:768px) {
   :root {
      --container-px: 1.5rem;
   }
}

@media (min-width:1024px) {
   .section {
      padding: var(--space-12) 0;
   }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.text-accent {
   color: var(--teal-500);
}

.text-accent-light {
   color: var(--teal-300);
}

.text-soft {
   color: var(--navy-500);
}

.section-header {
   text-align: center;
   max-width: 800px;
   margin: 0 auto var(--space-6);
}

@media (min-width:768px) {
   .section-header {
      margin-bottom: var(--space-8);
   }
}

.section-tag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 0.78rem;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--teal-500);
   background: rgba(58, 143, 183, 0.08);
   padding: 6px 16px;
   border-radius: var(--radius-pill);
   margin-bottom: 16px;
}

.section-tag--light {
   color: var(--teal-300);
   background: var(--white-alpha-10);
}

.section-title {
   font-family: var(--font-serif);
   font-size: clamp(1.6rem, 3.8vw, 2.8rem);
   font-weight: 700;
   line-height: 1.15;
   color: var(--navy-900);
   margin-bottom: var(--space-2);
   letter-spacing: -0.01em;
}

.section-desc {
   font-size: var(--text-body);
   color: var(--silver-600);
   line-height: 1.8;
}

@media (min-width:768px) {
   .section-desc {
      font-size: var(--text-body-lg);
   }
}

/* ============================================================
   BUTTONS (44px min touch target)
   ============================================================ */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-1);
   font-family: var(--font-sans);
   font-weight: 600;
   font-size: var(--text-body);
   padding: 14px 24px;
   border-radius: var(--radius-md);
   border: none;
   cursor: pointer;
   transition: all 0.3s ease;
   white-space: nowrap;
   position: relative;
   overflow: hidden;
   min-height: 48px;
   touch-action: manipulation;
}

.btn:hover {
   transform: translateY(-2px);
   filter: brightness(1.05);
}

.btn:active {
   transform: translateY(0);
}

.btn::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.25) 50%, transparent 60%);
   transform: translateX(-100%);
   transition: transform 0.6s;
}

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

.btn-primary {
   background: linear-gradient(135deg, var(--navy-700), var(--teal-600));
   color: var(--white);
   box-shadow: 0 4px 18px rgba(27, 58, 92, 0.35);
}

.btn-primary:hover {
   box-shadow: 0 8px 28px rgba(27, 58, 92, 0.45);
}

.btn-secondary {
   background: rgba(255, 255, 255, 0.12);
   color: var(--white);
   border: 1.5px solid rgba(255, 255, 255, 0.35);
   backdrop-filter: blur(10px);
}

.btn-secondary:hover {
   background: rgba(255, 255, 255, 0.22);
   border-color: rgba(255, 255, 255, 0.6);
   color: var(--white);
}

.btn-light {
   background: var(--white);
   color: var(--navy-700);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.btn-light:hover {
   background: var(--gray-50);
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.btn-block {
   width: 100%;
   max-width: 400px;
}

/* ============================================================
   NAVBAR (Mobile-First)
   ============================================================ */
.navbar {
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1000;
   padding: 0;
   background: var(--glass-bg);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-bottom: 1px solid var(--glass-border);
   transition: all var(--duration-normal);
   box-shadow: var(--shadow-sm);
}

.nav-container {
   max-width: var(--container-max);
   margin: 0 auto;
   padding: 0 var(--container-px);
   display: flex;
   align-items: center;
   justify-content: space-between;
   transition: all var(--duration-normal);
}

.nav-logo-img {
   height: 40px;
   width: auto;
   object-fit: contain;
   display: block;
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
   transition: transform 0.3s ease;
   transform-origin: left center;
}

.nav-logo {
   display: flex;
   align-items: center;
}

@media (min-width:768px) {
   .nav-logo-img {
      height: 60px;
      max-width: none;
   }
}

/* Hamburger - visible by default (mobile-first) */
.nav-toggle {
   display: flex;
   flex-direction: column;
   gap: 5px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 12px;
   z-index: 1001;
   min-width: 44px;
   min-height: 44px;
   align-items: center;
   justify-content: center;
}

.nav-toggle span {
   display: block;
   width: 24px;
   height: 2px;
   background: var(--navy-700);
   border-radius: 2px;
   transition: all var(--duration-fast) var(--ease-smooth);
}

.nav-toggle.active span:nth-child(1) {
   transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
   opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
   transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile menu (default) */
.nav-menu {
   position: fixed;
   top: 0;
   right: -100%;
   width: 100%;
   max-width: 350px;
   height: 100vh;
   background: var(--white);
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   padding: 100px 24px;
   gap: 40px;
   transition: right var(--duration-normal) var(--ease-smooth);
   box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
   z-index: 1000;
   display: flex;
}

.nav-menu.active {
   right: 0;
}

.nav-list {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 4px;
   width: 100%;
}

.nav-link {
   font-weight: 600;
   font-size: 1.15rem;
   color: var(--navy-700);
   padding: 14px 0;
   position: relative;
   transition: color var(--duration-fast);
   width: 100%;
   border-bottom: 1px solid var(--gray-100);
   min-height: 48px;
   display: flex;
   align-items: center;
}

.nav-link::after {
   content: '';
   position: absolute;
   bottom: -4px;
   left: 0;
   width: 0;
   height: 2px;
   background: var(--teal-500);
   transition: width var(--duration-normal);
}

.nav-link:hover,
.nav-link.active {
   color: var(--teal-600);
}

.nav-link:hover::after,
.nav-link.active::after {
   width: 100%;
}

.nav-actions {
   display: flex;
   flex-direction: column;
   width: 100%;
   gap: 12px;
   padding-top: 24px;
   border-top: 1px solid var(--gray-100);
}

.nav-cta,
.nav-portal {
   background: var(--teal-500);
   color: var(--white) !important;
   padding: 14px 24px;
   border-radius: var(--radius-pill);
   box-shadow: 0 4px 15px rgba(58, 143, 183, 0.3);
   font-weight: 700;
   text-align: center;
   min-height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.nav-cta::after,
.nav-portal::after {
   display: none;
}

.nav-cta:hover,
.nav-portal:hover {
   background: var(--teal-600) !important;
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(58, 143, 183, 0.4);
}

/* Desktop navbar */
@media (min-width:992px) {
   .nav-container {
      display: grid;
      grid-template-columns: 280px 1fr 280px;
      height: 120px;
      align-items: center;
      gap: 20px;
      max-width: 1600px;
   }

   .nav-toggle {
      display: none;
   }

   .nav-menu {
      display: contents;
   }

   .nav-list {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-evenly;
      width: 100%;
      justify-self: center;
   }

   .nav-link {
      font-size: 0.95rem;
      padding: 8px 0;
      width: auto;
      border-bottom: none;
      min-height: auto;
      white-space: nowrap;
   }

   .nav-link::after {
      bottom: 0;
   }

   .nav-actions {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: auto;
      gap: 16px;
      padding-top: 0;
      border-top: none;
      justify-self: end;
   }

   .nav-cta,
   .nav-portal {
      padding: 12px 24px;
      font-size: 0.95rem;
      min-height: auto;
   }
}

/* ============================================================
   HERO SECTION (Mobile-First)
   ============================================================ */
.hero-section {
   position: relative;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   background: var(--navy-900);
}

.hero-bg {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 0;
}

.hero-image-bg {
   position: absolute;
   inset: 0;
   background-image: url('../assets/img/reception.jpg');
   background-size: cover;
   background-position: center;
}

.hero-overlay {
   position: absolute;
   inset: 0;
   background: rgba(16, 42, 67, 0.35);
}

.particles {
   display: none !important;
}

.particle {
   position: absolute;
   border-radius: 50%;
   pointer-events: none;
   animation: particleFloat linear infinite;
}

@keyframes particleFloat {
   0% {
      transform: translateY(100vh) rotate(0deg);
      opacity: 0;
   }

   10% {
      opacity: 1;
   }

   90% {
      opacity: 1;
   }

   100% {
      transform: translateY(-10vh) rotate(360deg);
      opacity: 0;
   }
}

.hero-content {
   position: relative;
   z-index: 1;
   text-align: center;
   padding: 120px var(--container-px) 60px;
   max-width: 900px;
   margin: 0 auto;
}

.hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 0.75rem;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--teal-300);
   background: rgba(90, 173, 204, 0.12);
   border: 1px solid rgba(90, 173, 204, 0.25);
   padding: 8px 16px;
   border-radius: var(--radius-pill);
   margin-bottom: 20px;
   animation: fadeInUp 0.8s ease both;
}

@media (min-width:768px) {
   .hero-badge {
      padding: 8px 20px;
      margin-bottom: 28px;
   }
}

.hero-title {
   font-family: var(--font-serif);
   font-size: clamp(2rem, 6vw, 4.5rem);
   font-weight: 700;
   line-height: 1.1;
   color: var(--white);
   margin-bottom: 16px;
   letter-spacing: -0.02em;
   text-shadow: 0 3px 12px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.5);
   animation: fadeInUp 0.8s ease 0.15s both;
}

.hero-accent {
   color: var(--teal-300);
}

.hero-subtitle {
   font-size: clamp(1rem, 2.2vw, 1.3rem);
   color: var(--white);
   line-height: 1.75;
   margin-bottom: 28px;
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
   font-weight: 500;
   animation: fadeInUp 0.8s ease 0.3s both;
}

@media (min-width:768px) {
   .hero-subtitle {
      margin-bottom: 36px;
   }
}

.hero-actions {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   margin-bottom: 40px;
   animation: fadeInUp 0.8s ease 0.45s both;
}

@media (min-width:768px) {
   .hero-actions {
      flex-direction: row;
      justify-content: center;
      gap: 16px;
      margin-bottom: 60px;
   }
}

.hero-stats {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   animation: fadeInUp 0.8s ease 0.6s both;
}

@media (min-width:768px) {
   .hero-stats {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 40px;
   }
}

.stat-item {
   text-align: center;
}

.stat-number {
   display: block;
   font-family: var(--font-serif);
   font-size: 2rem;
   font-weight: 700;
   color: var(--white);
   line-height: 1;
}

@media (min-width:768px) {
   .stat-number {
      font-size: 2.4rem;
   }
}

.stat-suffix {
   font-family: var(--font-serif);
   font-size: 2rem;
   font-weight: 700;
   color: var(--teal-500);
}

@media (min-width:768px) {
   .stat-suffix {
      font-size: 2.4rem;
   }
}

.stat-label {
   display: block;
   font-size: 0.8rem;
   color: var(--silver-500);
   margin-top: 4px;
   font-weight: 500;
   letter-spacing: 0.02em;
}

.stat-divider {
   display: none;
}

@media (min-width:768px) {
   .stat-divider {
      display: block;
      width: 1px;
      height: 40px;
      background: var(--silver-200);
   }
}

.scroll-indicator {
   position: absolute;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2;
   display: none;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   animation: fadeInUp 0.8s ease 0.9s both;
}

@media (min-width:768px) {
   .scroll-indicator {
      display: flex;
      bottom: 30px;
   }
}

.scroll-mouse {
   width: 26px;
   height: 40px;
   border: 2px solid var(--silver-300);
   border-radius: 13px;
   position: relative;
}

.scroll-dot {
   position: absolute;
   top: 8px;
   left: 50%;
   transform: translateX(-50%);
   width: 4px;
   height: 8px;
   background: var(--teal-500);
   border-radius: 2px;
   animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {

   0%,
   100% {
      top: 8px;
      opacity: 1;
   }

   50% {
      top: 22px;
      opacity: 0.3;
   }
}

.scroll-indicator span {
   font-size: 0.72rem;
   color: var(--silver-400);
   font-weight: 500;
   letter-spacing: 0.05em;
   text-transform: uppercase;
}

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

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

/* ============================================================
   ESPECIALIDADES (Mobile-First)
   ============================================================ */
.especialidades-section {
   background: #f4f7f6;
}

.specialties-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
}

.specialties-grid--4col {
   grid-template-columns: 1fr;
   gap: 16px;
}

@media (min-width:480px) {

   .specialties-grid,
   .specialties-grid--4col {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
   }
}

@media (min-width:768px) {
   .specialties-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
   }

   .specialties-grid--4col {
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
   }
}

@media (min-width:1024px) {
   .specialties-grid--4col {
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
   }
}

.specialty-card {
   background: var(--white);
   border: 1px solid var(--gray-100);
   border-radius: var(--radius-lg);
   padding: 24px 16px;
   text-align: center;
   transition: all var(--duration-normal) var(--ease-smooth);
   position: relative;
   overflow: hidden;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 160px;
   box-shadow: 0 2px 12px rgba(11, 29, 50, 0.06);
}

@media (min-width:768px) {
   .specialty-card {
      padding: 36px 24px;
      min-height: 200px;
   }
}

.specialty-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--teal-500), var(--navy-500));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform var(--duration-normal);
}

.specialty-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 32px rgba(11, 29, 50, 0.12);
   border-color: transparent;
}

.specialty-card:hover::before {
   transform: scaleX(1);
}

.card-icon {
   width: 56px;
   height: 56px;
   margin: 0 auto 16px;
   background: rgba(58, 143, 183, 0.06);
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--duration-normal);
   flex-shrink: 0;
}

@media (min-width:768px) {
   .card-icon {
      width: 68px;
      height: 68px;
      margin-bottom: 24px;
   }
}

.card-icon svg {
   width: 28px;
   height: 28px;
   color: var(--teal-500);
   transition: color var(--duration-fast);
}

@media (min-width:768px) {
   .card-icon svg {
      width: 32px;
      height: 32px;
   }
}

.specialty-card:hover .card-icon {
   background: linear-gradient(135deg, var(--navy-600), var(--teal-600));
   transform: scale(1.08);
}

.specialty-card:hover .card-icon svg {
   color: var(--white);
}

.specialty-card h3 {
   font-family: var(--font-serif);
   font-size: 0.95rem;
   font-weight: 600;
   color: var(--navy-700);
   margin-bottom: 0;
   transition: margin var(--duration-normal);
}

@media (min-width:768px) {
   .specialty-card h3 {
      font-size: 1.05rem;
   }
}

.specialty-desc {
   max-height: 0;
   opacity: 0;
   overflow: hidden;
   font-size: 0.85rem;
   color: var(--silver-500);
   line-height: 1.5;
   margin-top: 0;
   transition: all var(--duration-normal) var(--ease-smooth);
}

.specialty-card.active {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
   border-color: var(--teal-300);
   padding-bottom: 24px;
}

.specialty-card.active h3 {
   margin-bottom: 12px;
}

.specialty-card.active .specialty-desc {
   max-height: 150px;
   opacity: 1;
   margin-top: 12px;
}

.specialty-card.active .card-icon {
   background: linear-gradient(135deg, var(--teal-500), var(--teal-400));
   transform: scale(0.9);
   margin-bottom: 12px;
}

.specialty-card.active .card-icon svg {
   color: var(--white);
}

/* ============================================================
   QUIÉNES SOMOS (Mobile-First)
   ============================================================ */
.quienes-section {
   background: var(--white);
}

.institucional-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 32px;
   align-items: start;
}

@media (min-width:1024px) {
   .institucional-grid {
      grid-template-columns: 1.15fr 0.85fr;
      gap: 60px;
   }
}

.institucional-texto {
   display: flex;
   flex-direction: column;
   background: var(--silver-50);
   border: 1px solid var(--silver-200);
   padding: var(--space-4);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-sm);
}

@media (min-width:768px) {
   .institucional-texto {
      padding: var(--space-6);
   }
}

.institucional-p {
   font-size: 0.95rem;
   color: var(--gray-800);
   line-height: 1.85;
   margin-bottom: 16px;
}

@media (min-width:768px) {
   .institucional-p {
      font-size: 1.05rem;
      margin-bottom: 20px;
   }
}

.institucional-p strong {
   color: var(--teal-600);
}

.institucional-valores {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   margin-top: 24px;
   padding-top: 24px;
   border-top: 1px solid var(--gray-200);
}

@media (min-width:768px) {
   .institucional-valores {
      margin-top: 32px;
      padding-top: 32px;
   }
}

.valor-item {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 20px;
}

@media (min-width:768px) {
   .valor-item {
      gap: 20px;
      margin-bottom: 24px;
   }
}

.valor-item:last-child {
   margin-bottom: 0;
}

.valor-icon {
   flex-shrink: 0;
   width: 48px;
   height: 48px;
   background: linear-gradient(135deg, var(--navy-800), var(--teal-500));
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--white);
   box-shadow: 0 4px 15px rgba(27, 58, 92, 0.15);
   transition: transform var(--duration-fast);
}

@media (min-width:768px) {
   .valor-icon {
      width: 56px;
      height: 56px;
   }
}

.valor-item:hover .valor-icon {
   transform: scale(1.05);
}

.valor-icon svg {
   width: 24px;
   height: 24px;
}

@media (min-width:768px) {
   .valor-icon svg {
      width: 28px;
      height: 28px;
   }
}

.valor-texto {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.valor-texto strong {
   font-size: 1rem;
   font-weight: 700;
   color: var(--navy-900);
}

@media (min-width:768px) {
   .valor-texto strong {
      font-size: 1.1rem;
   }
}

.valor-texto span {
   font-size: 0.88rem;
   color: var(--silver-500);
   line-height: 1.5;
}

@media (min-width:768px) {
   .valor-texto span {
      font-size: 0.95rem;
   }
}

/* Datos card */
.datos-card {
   background: var(--teal-50);
   border: 1px solid var(--teal-300);
   border-radius: var(--radius-xl);
   padding: 24px 20px;
   box-shadow: var(--shadow-lg);
}

@media (min-width:768px) {
   .datos-card {
      padding: 36px;
   }
}

@media (min-width:1024px) {
   .datos-card {
      position: sticky;
      top: 100px;
   }
}

.datos-header {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 24px;
   padding-bottom: 20px;
   border-bottom: 1px solid var(--gray-200);
}

.datos-header svg {
   width: 22px;
   height: 22px;
   color: var(--teal-500);
   flex-shrink: 0;
}

.datos-header h3 {
   font-family: var(--font-serif);
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--navy-700);
}

.datos-lista {
   display: flex;
   flex-direction: column;
}

.datos-lista li {
   display: grid;
   grid-template-columns: 1fr;
   gap: 4px;
   padding: 12px 0;
   border-bottom: 1px solid var(--gray-200);
   font-size: 0.88rem;
   line-height: 1.5;
}

@media (min-width:768px) {
   .datos-lista li {
      grid-template-columns: 110px 1fr;
      gap: 12px;
   }
}

.datos-lista li:last-child {
   border-bottom: none;
}

.datos-label {
   font-weight: 600;
   color: var(--silver-500);
   text-transform: uppercase;
   font-size: 0.75rem;
   letter-spacing: 0.04em;
}

.datos-valor {
   color: var(--gray-800);
   font-weight: 500;
}

.datos-valor a {
   color: var(--teal-600);
}

.datos-valor a:hover {
   color: var(--navy-700);
}

/* ============================================================
   EQUIPO MÉDICO (Mobile-First)
   ============================================================ */
.equipo-section {
   background: var(--gray-50);
}

.equipo-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
   margin-bottom: 32px;
}

@media (min-width:480px) {
   .equipo-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
   }
}

@media (min-width:1024px) {
   .equipo-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
   }
}

.medico-card {
   background: var(--white);
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-lg);
   padding: 24px 20px;
   text-align: center;
   transition: all var(--duration-normal);
   box-shadow: var(--shadow-sm);
}

.medico-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-md);
   border-color: var(--teal-300);
}

.medico-avatar {
   width: 80px;
   height: 80px;
   margin: 0 auto 16px;
   border-radius: 50%;
   overflow: hidden;
   border: 3px solid var(--gray-100);
}

@media (min-width:768px) {
   .medico-avatar {
      width: 88px;
      height: 88px;
      margin-bottom: 20px;
   }
}

.medico-avatar svg {
   width: 100%;
   height: 100%;
}

.medico-nombre {
   font-family: var(--font-serif);
   font-size: 1rem;
   font-weight: 700;
   color: var(--navy-700);
   margin-bottom: 6px;
   line-height: 1.3;
}

@media (min-width:768px) {
   .medico-nombre {
      font-size: 1.05rem;
   }
}

.medico-especialidad {
   font-size: 0.85rem;
   font-weight: 600;
   color: var(--teal-600);
   margin-bottom: 10px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
}

.medico-matricula {
   font-size: 0.78rem;
   color: var(--silver-500);
   background: var(--gray-50);
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-sm);
   padding: 5px 12px;
   display: inline-block;
   font-family: 'Courier New', monospace;
   letter-spacing: 0.02em;
}

.equipo-nota {
   text-align: center;
   font-size: 0.82rem;
   color: var(--silver-400);
   font-style: italic;
   padding: 16px;
   background: var(--gray-100);
   border-radius: var(--radius-md);
   border: 1px solid var(--gray-200);
}

/* ============================================================
   FAQ & TESTIMONIALS (Mobile-First)
   ============================================================ */
.faq-reviews-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 40px;
}

@media (min-width:768px) {
   .faq-reviews-grid {
      grid-template-columns: 1fr 1fr;
      gap: 48px;
   }
}

.testimonial-card {
   background: var(--white);
   padding: 28px 24px;
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-md);
   position: relative;
   margin-bottom: 20px;
}

@media (min-width:768px) {
   .testimonial-card {
      padding: 40px;
      margin-bottom: 24px;
   }
}

.testimonial-stars {
   color: #ffc107;
   margin-bottom: 12px;
   letter-spacing: 2px;
}

.testimonial-text {
   font-size: 1rem;
   font-style: italic;
   color: var(--navy-700);
   line-height: 1.7;
   margin-bottom: 20px;
}

@media (min-width:768px) {
   .testimonial-text {
      font-size: 1.1rem;
      margin-bottom: 25px;
   }
}

.author-name {
   display: block;
   font-weight: 700;
   color: var(--navy-800);
   font-size: 0.95rem;
}

.author-meta {
   font-size: 0.82rem;
   color: var(--silver-500);
}

/* FAQ Accordion */
.faq-accordion {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-top: 24px;
}

@media (min-width:768px) {
   .faq-accordion {
      gap: 16px;
      margin-top: 30px;
   }
}

.faq-item {
   background: var(--white);
   border-radius: var(--radius-lg);
   border: 1px solid var(--gray-200);
   overflow: hidden;
   transition: all var(--duration-normal);
}

.faq-trigger {
   width: 100%;
   padding: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: none;
   border: none;
   cursor: pointer;
   font-weight: 600;
   font-size: 1rem;
   color: var(--navy-700);
   text-align: left;
   transition: color var(--duration-fast);
   min-height: 48px;
}

@media (min-width:768px) {
   .faq-trigger {
      padding: 28px 32px;
      font-size: 1.15rem;
   }
}

.faq-trigger svg {
   transition: transform 0.4s;
   color: var(--teal-500);
   width: 20px;
   height: 20px;
   flex-shrink: 0;
}

@media (min-width:768px) {
   .faq-trigger svg {
      width: 24px;
      height: 24px;
   }
}

.faq-content {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s ease;
}

.faq-content p {
   padding: 0 20px 20px;
   font-size: 0.95rem;
   color: var(--silver-600);
   line-height: 1.7;
}

@media (min-width:768px) {
   .faq-content p {
      padding: 0 32px 28px;
      font-size: 1rem;
   }
}

.faq-item.active {
   border-color: var(--teal-400);
   box-shadow: var(--shadow-md);
}

.faq-item.active .faq-trigger {
   color: var(--teal-600);
}

.faq-item.active .faq-trigger svg {
   transform: rotate(180deg);
}

.faq-item.active .faq-content {
   max-height: 200px;
}

/* ============================================================
   FORM SECTION (Mobile-First)
   ============================================================ */
.form-section {
   background: var(--white);
   padding: var(--space-6) 0;
}

@media (min-width:768px) {
   .form-section {
      padding: var(--space-12) 0;
   }
}

.form-wrapper {
   max-width: 900px;
   margin: 0 auto;
   background: var(--teal-50);
   padding: var(--space-4);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-xl);
   border: 1px solid var(--teal-200);
}

@media (min-width:768px) {
   .form-wrapper {
      padding: var(--space-8);
   }
}

.contact-form .form-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
   margin-bottom: 16px;
}

@media (min-width:768px) {
   .contact-form .form-grid {
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 24px;
   }
}

.form-group {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.form-group.no-margin {
   margin-bottom: 0;
}

.form-group label {
   font-size: var(--text-sm);
   font-weight: 600;
   color: var(--navy-800);
}

.form-group input,
.form-group select,
.form-group textarea {
   padding: 14px 16px;
   border: 1.5px solid var(--silver-200);
   border-radius: var(--radius-md);
   font-family: inherit;
   font-size: 16px;
   transition: all var(--duration-fast);
   background: var(--silver-50);
   color: var(--silver-800);
   min-height: 48px;
}

@media (min-width:768px) {

   .form-group input,
   .form-group select,
   .form-group textarea {
      padding: var(--space-2) var(--space-3);
   }
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
   outline: none;
   border-color: var(--teal-500);
   background: var(--white);
   box-shadow: 0 0 0 4px var(--teal-50);
}

.form-group textarea {
   min-height: 100px;
}

.form-footer {
   margin-top: 24px;
   display: flex;
   justify-content: center;
}

@media (min-width:768px) {
   .form-footer {
      margin-top: 35px;
   }
}

/* Global input focus */
input:focus,
select:focus,
textarea:focus {
   outline: none;
   border-color: var(--teal-500) !important;
   box-shadow: 0 0 0 4px rgba(58, 143, 183, 0.15);
}

/* ============================================================
   CONTACT / RESERVAR (Mobile-First)
   ============================================================ */
.reservar-section {
   background: var(--white);
}

.contact-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
}

@media (min-width:480px) {
   .contact-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
   }
}

@media (min-width:768px) {
   .contact-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
   }
}

.contact-card {
   background: var(--gray-50);
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-lg);
   padding: 28px 20px;
   text-align: center;
   transition: all var(--duration-normal);
}

@media (min-width:768px) {
   .contact-card {
      padding: 36px 24px;
   }
}

.contact-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-md);
   border-color: var(--teal-400);
}

.contact-icon {
   width: 48px;
   height: 48px;
   margin: 0 auto 12px;
   background: linear-gradient(135deg, rgba(58, 143, 183, 0.15), rgba(58, 143, 183, 0.08));
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--duration-normal);
}

@media (min-width:768px) {
   .contact-icon {
      width: 56px;
      height: 56px;
      margin-bottom: 16px;
   }
}

.contact-icon svg {
   width: 22px;
   height: 22px;
   color: var(--teal-500);
}

@media (min-width:768px) {
   .contact-icon svg {
      width: 24px;
      height: 24px;
   }
}

.contact-icon--wa {
   background: linear-gradient(135deg, rgba(37, 211, 102, 0.12), rgba(37, 211, 102, 0.06));
}

.contact-icon--wa svg {
   color: var(--accent-green);
}

.contact-card:hover .contact-icon {
   transform: scale(1.1);
}

.contact-card h3 {
   font-family: var(--font-serif);
   font-size: 1rem;
   font-weight: 600;
   color: var(--navy-700);
   margin-bottom: 8px;
}

@media (min-width:768px) {
   .contact-card h3 {
      font-size: 1.1rem;
      margin-bottom: 10px;
   }
}

.contact-detail {
   font-size: 0.85rem;
   color: var(--silver-500);
   line-height: 1.6;
}

@media (min-width:768px) {
   .contact-detail {
      font-size: 0.9rem;
   }
}

.contact-detail a {
   color: var(--teal-600);
   font-weight: 500;
   transition: color var(--duration-fast);
}

.contact-detail a:hover {
   color: var(--teal-400);
}

/* ============================================================
   MAP (Mobile-First)
   ============================================================ */
.map-section {
   background: var(--gray-50);
   padding-bottom: 0;
}

.map-wrapper {
   display: grid;
   grid-template-columns: 1fr;
   gap: 0;
   background: var(--white);
   border-radius: var(--radius-xl) var(--radius-xl) 0 0;
   overflow: hidden;
   box-shadow: var(--shadow-lg);
}

@media (min-width:768px) {
   .map-wrapper {
      grid-template-columns: 1fr 1fr;
   }
}

.map-info {
   padding: 32px 20px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

@media (min-width:768px) {
   .map-info {
      padding: 60px 48px;
   }
}

.map-title {
   font-family: var(--font-serif);
   font-size: clamp(1.4rem, 3vw, 2.2rem);
   font-weight: 700;
   color: var(--navy-700);
   margin-bottom: 16px;
}

.map-address {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 0.95rem;
   color: var(--silver-500);
   margin-bottom: 24px;
}

.map-address svg {
   flex-shrink: 0;
   color: var(--teal-500);
}

.map-schedule {
   background: var(--gray-50);
   border-radius: var(--radius-md);
   padding: 20px;
   margin-bottom: 24px;
}

@media (min-width:768px) {
   .map-schedule {
      padding: 24px 28px;
      margin-bottom: 28px;
   }
}

.map-schedule h4 {
   font-family: var(--font-serif);
   font-size: 1rem;
   font-weight: 600;
   color: var(--navy-700);
   margin-bottom: 12px;
}

.map-schedule ul {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.map-schedule li {
   display: flex;
   justify-content: space-between;
   font-size: 0.88rem;
   color: var(--silver-500);
}

.map-schedule li span:last-child {
   font-weight: 600;
   color: var(--navy-700);
}

.map-embed {
   min-height: 300px;
   background: var(--gray-200);
}

@media (min-width:768px) {
   .map-embed {
      min-height: 400px;
   }
}

.map-embed iframe {
   display: block;
}

/* ============================================================
   FOOTER (Mobile-First)
   ============================================================ */
.footer {
   background: var(--navy-700);
   color: var(--silver-100);
   padding: var(--space-6) 0 0;
   position: relative;
   overflow: hidden;
}

.footer::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--teal-300), transparent);
}

.footer-wave {
   position: relative;
   top: -1px;
}

.footer-wave svg {
   display: block;
   width: 100%;
   height: 40px;
}

@media (min-width:768px) {
   .footer-wave svg {
      height: 60px;
   }
}

.footer-wave path {
   fill: var(--navy-700);
}

.footer-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-6);
   text-align: center;
   padding: 40px 0;
}

@media (min-width:768px) {
   .footer-grid {
      grid-template-columns: 2fr 1fr 1.5fr;
      gap: var(--space-8);
      text-align: left;
      padding: 60px 0 40px;
   }
}

.footer-logo-img {
   width: 100%;
   max-width: 220px;
   height: auto;
   max-height: 80px;
   object-fit: contain;
   margin: 0 auto 20px;
   filter: brightness(0) invert(1);
   opacity: 0.9;
}

@media (min-width:768px) {
   .footer-logo-img {
      max-width: 280px;
      max-height: 100px;
      margin: 0 0 24px;
   }
}

.footer-brand p {
   margin: var(--space-3) auto;
   font-size: var(--text-sm);
   line-height: 1.8;
   color: var(--silver-400);
   max-width: 320px;
}

@media (min-width:768px) {
   .footer-brand p {
      margin: var(--space-3) 0;
   }
}

.footer-title {
   font-family: var(--font-serif);
   font-size: 1.2rem;
   color: var(--white);
   margin-bottom: var(--space-3);
}

@media (min-width:768px) {
   .footer-title {
      font-size: var(--text-h3);
      margin-bottom: var(--space-4);
   }
}

.footer-list {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
}

.footer-list a {
   color: var(--silver-400);
   font-size: var(--text-sm);
   transition: color var(--duration-fast);
}

.footer-list a:hover {
   color: var(--teal-300);
}

.footer-contact-item {
   display: flex;
   gap: var(--space-2);
   margin-bottom: var(--space-3);
   font-size: var(--text-sm);
   justify-content: center;
}

@media (min-width:768px) {
   .footer-contact-item {
      justify-content: flex-start;
   }
}

.footer-contact-item svg {
   color: var(--teal-500);
   flex-shrink: 0;
}

.footer-bottom {
   background: rgba(0, 0, 0, 0.2);
   padding: var(--space-3) 0;
   text-align: center;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom p {
   font-size: var(--text-xs);
   color: var(--silver-500);
}

/* ============================================================
   WHATSAPP FLOAT (Mobile-First)
   ============================================================ */
.whatsapp-float {
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 56px;
   height: 56px;
   background: var(--accent-green);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
   z-index: 999;
   transition: all var(--duration-normal);
   animation: waPulse 3s ease-in-out infinite;
}

@media (min-width:768px) {
   .whatsapp-float {
      bottom: 28px;
      right: 28px;
      width: 60px;
      height: 60px;
   }
}

.whatsapp-float svg {
   width: 28px;
   height: 28px;
   color: var(--white);
}

@media (min-width:768px) {
   .whatsapp-float svg {
      width: 30px;
      height: 30px;
   }
}

.whatsapp-float:hover {
   transform: scale(1.1);
   box-shadow: 0 8px 32px rgba(37, 211, 102, 0.5);
}

.wa-tooltip {
   position: absolute;
   right: 64px;
   white-space: nowrap;
   background: var(--white);
   color: var(--gray-800);
   font-size: 0.85rem;
   font-weight: 500;
   padding: 10px 18px;
   border-radius: var(--radius-sm);
   box-shadow: var(--shadow-md);
   opacity: 0;
   pointer-events: none;
   transform: translateX(8px);
   transition: all var(--duration-fast);
   display: none;
}

@media (min-width:768px) {
   .wa-tooltip {
      display: block;
      right: 72px;
   }
}

.wa-tooltip::after {
   content: '';
   position: absolute;
   right: -6px;
   top: 50%;
   transform: translateY(-50%);
   border: 6px solid transparent;
   border-left-color: var(--white);
}

.whatsapp-float:hover .wa-tooltip {
   opacity: 1;
   transform: translateX(0);
}

@keyframes waPulse {

   0%,
   100% {
      box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
   }

   50% {
      box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4), 0 0 0 12px rgba(37, 211, 102, 0.1);
   }
}

/* ============================================================
   ANIMATIONS (AOS)
   ============================================================ */
[data-aos] {
   opacity: 0;
   transform: translateY(30px) scale(0.97);
   transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
   will-change: opacity, transform;
}

[data-aos].aos-visible {
   opacity: 1;
   transform: translateY(0) scale(1);
}

.aos-visible .card-icon {
   animation: softPop 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes softPop {
   from {
      opacity: 0;
      transform: scale(0.7) translateY(10px);
   }

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

/* ============================================================
   SUMATE AL EQUIPO (Mobile-First)
   ============================================================ */
.seccion-equipo {
   padding: var(--space-6) 0;
   background: linear-gradient(135deg, #1b3a5c 0%, #2d5a8e 100%);
   color: white;
}

@media (min-width:768px) {
   .seccion-equipo {
      padding: 80px 0;
   }
}

.seccion-equipo .seccion-badge {
   background: rgba(255, 255, 255, 0.15);
   color: white;
}

.seccion-equipo h2 {
   color: white;
}

.seccion-equipo .seccion-divider {
   background: #3a8fb7;
}

.seccion-equipo .seccion-subtitulo {
   color: rgba(255, 255, 255, 0.8);
}

.seccion-equipo .section-title {
   color: white;
}

.seccion-equipo .equipo-grid {
   grid-template-columns: 1fr;
   gap: 20px;
   margin-top: 32px;
}

@media (min-width:768px) {
   .seccion-equipo .equipo-grid {
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      margin-top: 48px;
   }
}

.equipo-busquedas,
.equipo-contacto {
   background: rgba(255, 255, 255, 0.08);
   border-radius: var(--radius-lg);
   padding: 24px;
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.15);
}

@media (min-width:768px) {

   .equipo-busquedas,
   .equipo-contacto {
      padding: 32px;
   }
}

.equipo-busquedas h3,
.equipo-contacto h3 {
   font-size: 1.05rem;
   font-weight: 600;
   color: white;
   margin-bottom: 20px;
   display: flex;
   align-items: center;
   gap: 10px;
}

.equipo-busquedas h3 i,
.equipo-contacto h3 i {
   color: #5aadb7;
}

.busquedas-lista {
   list-style: none;
   padding: 0;
   margin: 0 0 20px;
}

.busquedas-lista li {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.9);
   font-size: 0.9rem;
   font-weight: 500;
}

.busquedas-lista li i {
   color: #5aadb7;
   font-size: 1rem;
   flex-shrink: 0;
}

.equipo-desc {
   color: rgba(255, 255, 255, 0.7);
   font-size: 0.88rem;
   line-height: 1.7;
   margin-top: 12px;
}

.equipo-contacto-item {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 12px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.9);
   font-size: 0.88rem;
}

.equipo-contacto-item i {
   color: #5aadb7;
   width: 18px;
   text-align: center;
   flex-shrink: 0;
}

.equipo-contacto-item a {
   color: rgba(255, 255, 255, 0.9);
   text-decoration: none;
   transition: color 0.2s;
}

.equipo-contacto-item a:hover {
   color: #5aadb7;
}

.btn-equipo-postular {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: 20px;
   background: #3a8fb7;
   color: white;
   padding: 14px 28px;
   border-radius: var(--radius-md);
   text-decoration: none;
   font-weight: 600;
   font-size: 0.95rem;
   transition: all 0.2s ease;
   width: 100%;
   justify-content: center;
   min-height: 48px;
}

.btn-equipo-postular:hover {
   background: #2d7a9e;
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(58, 143, 183, 0.4);
}

.seccion-header.text-center {
   text-align: center;
}

.seccion-tag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 0.78rem;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--teal-500);
   background: rgba(58, 143, 183, 0.08);
   padding: 6px 16px;
   border-radius: var(--radius-pill);
   margin-bottom: 16px;
}

.seccion-divider {
   width: 60px;
   height: 3px;
   background: var(--teal-500);
   margin: 16px auto;
   border-radius: 2px;
}

/* ============================================================
   PORTAL / DASHBOARD SHARED (Mobile-First)
   ============================================================ */
.status-badge {
   display: inline-flex;
   align-items: center;
   padding: 6px 12px;
   border-radius: 20px;
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.status-badge.pendiente {
   background: #FFFBEB;
   color: #D97706;
   border: 1px solid #FEF3C7;
}

.status-badge.confirmado {
   background: #ECFDF5;
   color: #059669;
   border: 1px solid #D1FAE5;
}

.status-badge.cancelado {
   background: #FEF2F2;
   color: #DC2626;
   border: 1px solid #FEE2E2;
}

.status-badge.finalizado {
   background: #F8FAFC;
   color: #64748B;
   border: 1px solid #E2E8F0;
}

.modern-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
}

.modern-table th {
   background: #F1F5F9;
   color: var(--navy-700);
   padding: 14px 16px;
   text-align: left;
   font-size: 0.82rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.modern-table td {
   padding: 14px 16px;
   border-bottom: 1px solid #F1F5F9;
   transition: background 0.2s;
}

.modern-table tr:hover td {
   background: #F8FAFC;
}

.kpi-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
   margin-bottom: 24px;
}

@media (min-width:480px) {
   .kpi-grid {
      grid-template-columns: 1fr 1fr;
   }
}

@media (min-width:768px) {
   .kpi-grid {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 24px;
      margin-bottom: 32px;
   }
}

.kpi-card {
   background: var(--white);
   padding: 20px;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
   border: 1px solid var(--silver-200);
   display: flex;
   flex-direction: column;
   gap: 8px;
}

@media (min-width:768px) {
   .kpi-card {
      padding: 24px;
   }
}

.kpi-label {
   font-size: 0.8rem;
   font-weight: 600;
   color: var(--silver-500);
   text-transform: uppercase;
}

.kpi-value {
   font-size: 1.6rem;
   font-weight: 700;
   color: var(--navy-900);
}

@media (min-width:768px) {
   .kpi-value {
      font-size: 1.8rem;
   }
}

/* Modals */
.modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(16, 42, 67, 0.4);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   display: none;
   align-items: flex-end;
   justify-content: center;
   z-index: 2000;
   padding: 0;
}

@media (min-width:768px) {
   .modal-overlay {
      align-items: center;
      padding: 20px;
   }
}

.modal-content {
   background: #ffffff;
   width: 100%;
   max-width: 100%;
   border-radius: 20px 20px 0 0;
   padding: 24px 20px;
   position: relative;
   box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
   animation: modalSlideUp 0.3s ease-out;
   border: 1px solid rgba(0, 0, 0, 0.05);
   max-height: 95vh;
   overflow-y: auto;
}

@media (min-width:768px) {
   .modal-content {
      max-width: 550px;
      border-radius: 20px;
      padding: 45px;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
      animation: zoomInPortal 0.3s ease-out;
   }
}

@keyframes modalSlideUp {
   from {
      opacity: 0;
      transform: translateY(100%);
   }

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

.modal-close {
   position: absolute;
   top: 16px;
   right: 16px;
   background: #eee;
   border: none;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background 0.3s;
   min-width: 44px;
   min-height: 44px;
}

@media (min-width:768px) {
   .modal-close {
      top: 25px;
      right: 25px;
      width: 32px;
      height: 32px;
      min-width: auto;
      min-height: auto;
   }
}

.modal-header {
   padding: 0 0 20px 0;
   border-bottom: 1px solid var(--gray-200);
}

@media (min-width:768px) {
   .modal-header {
      background: linear-gradient(90deg, var(--navy-800), var(--navy-700));
      color: var(--white);
      padding: 24px !important;
      border-bottom: none;
   }
}

.modal-header h2 {
   font-family: var(--font-serif);
   margin: 0;
   font-size: 1.3rem;
   color: var(--navy-900);
}

@media (min-width:768px) {
   .modal-header h2 {
      font-size: 1.5rem;
      color: var(--white);
   }
}

/* Status messages */
.status-msg {
   padding: 12px 20px;
   border-radius: 12px;
   margin-bottom: 20px;
   font-size: 0.9rem;
   font-weight: 600;
   display: none;
   animation: fadeInPortal 0.3s;
}

.status-msg.error {
   background: #fee2e2;
   color: #991b1b;
   border: 1px solid #fecaca;
}

.status-msg.success {
   background: #ecfdf5;
   color: #065f46;
   border: 1px solid #d1fae5;
}

/* Auth */
.login-container {
   width: 95%;
   max-width: 480px;
   background: var(--white);
   padding: var(--space-4);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-xl);
   border: 1px solid var(--silver-200);
   text-align: center;
   margin: var(--space-4);
   animation: fadeInPortal 0.8s var(--ease-smooth);
}

@media (min-width:768px) {
   .login-container {
      padding: var(--space-8) var(--space-6);
   }
}

.login-logo {
   width: 100%;
   max-width: 150px;
   height: auto;
   max-height: 80px;
   object-fit: contain;
   margin: 0 auto 80px;
   display: block;
}

@media (min-width:768px) {
   .login-logo {
      max-width: 180px;
      max-height: 100px;
      margin-bottom: 120px;
   }
}

.login-header h1 {
   font-family: var(--font-serif);
   color: var(--navy-900);
   font-size: 1.6rem;
   margin-bottom: 12px;
   font-weight: 700;
}

@media (min-width:768px) {
   .login-header h1 {
      font-size: 2rem;
   }
}

.login-header p {
   color: var(--silver-500);
   margin-bottom: 32px;
   font-size: 1rem;
}

@media (min-width:768px) {
   .login-header p {
      margin-bottom: 40px;
      font-size: 1.1rem;
   }
}

/* Portal form groups */
.form-portal-group {
   text-align: left;
   margin-bottom: 24px;
}

.form-portal-group label {
   display: block;
   font-size: 0.85rem;
   font-weight: 700;
   color: var(--navy-900);
   margin-bottom: 10px;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.form-portal-group input,
.form-portal-group select,
.form-portal-group textarea {
   width: 100%;
   padding: 16px 18px;
   border: 2px solid var(--silver-200);
   border-radius: 14px;
   background: var(--white);
   color: var(--silver-800);
   font-size: 16px;
   transition: all 0.3s;
   min-height: 48px;
}

@media (min-width:768px) {

   .form-portal-group input,
   .form-portal-group select,
   .form-portal-group textarea {
      padding: 18px 22px;
      font-size: 1.1rem;
   }
}

.form-portal-group input:focus {
   outline: none;
   border-color: var(--teal-500);
   box-shadow: 0 0 0 5px rgba(58, 143, 183, 0.15);
}

/* Dashboard nav */
.dash-nav,
.admin-nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   background: rgba(255, 255, 255, 0.7);
   backdrop-filter: blur(15px);
   -webkit-backdrop-filter: blur(15px);
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   padding: 10px var(--container-px);
   display: flex;
   flex-direction: column;
   align-items: stretch;
   z-index: 1000;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
   gap: 8px;
}

@media (min-width:768px) {

   .dash-nav,
   .admin-nav {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 15px 5%;
      gap: 0;
   }
}

.dash-content,
.admin-content {
   margin-top: 120px;
   padding: 0 var(--container-px) 50px;
   max-width: 1400px;
   margin-left: auto;
   margin-right: auto;
   width: 100%;
}

@media (min-width:768px) {

   .dash-content,
   .admin-content {
      margin-top: 100px;
      padding: 0 5% 50px;
   }
}

.dash-user {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding-top: 8px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   gap: 12px;
}

@media (min-width:768px) {
   .dash-user {
      width: auto;
      padding-top: 0;
      border-top: none;
      gap: 20px;
   }
}

/* Tabs */
.nav-tabs,
.dash-tabs {
   width: 100%;
   overflow-x: auto;
   display: flex;
   padding-bottom: 8px;
   justify-content: flex-start;
   gap: 8px;
   -webkit-overflow-scrolling: touch;
}

.tab-btn {
   white-space: nowrap;
   padding: 10px 14px;
   font-size: 0.82rem;
   flex-shrink: 0;
   min-height: 44px;
}

@media (min-width:768px) {
   .tab-btn {
      padding: 10px 18px;
      font-size: 0.88rem;
   }
}

/* Portal buttons */
.btn-portal,
.btn-pro,
.btn-login {
   width: 100%;
   padding: 14px var(--space-4);
   background: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-500) 100%);
   color: var(--white);
   border: none;
   border-radius: var(--radius-pill);
   font-family: var(--font-sans);
   font-weight: 700;
   font-size: 1rem;
   cursor: pointer;
   transition: all var(--duration-normal);
   box-shadow: var(--shadow-md);
   min-height: 52px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-1);
}

@media (min-width:768px) {

   .btn-portal,
   .btn-pro,
   .btn-login {
      font-size: var(--text-body-lg);
      min-height: 56px;
   }
}

.btn-portal:hover,
.btn-pro:hover,
.btn-login:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-lg);
   filter: brightness(1.1);
}

/* Utilities */
.hidden {
   display: none !important;
}

.flex {
   display: flex !important;
}

.p-card {
   padding: 32px;
}

.m-gap {
   gap: 24px;
}

/* Skeleton */
.skeleton {
   background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
   background-size: 200% 100%;
   animation: skeletonLoading 1.5s infinite;
   border-radius: 4px;
}

@keyframes skeletonLoading {
   from {
      background-position: 200% 0;
   }

   to {
      background-position: -200% 0;
   }
}

/* Shared animations */
@keyframes fadeInPortal {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

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

@keyframes zoomInPortal {
   from {
      opacity: 0;
      transform: scale(0.95);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

/* Mobile table-to-card conversion */
@media (max-width:767px) {
   table thead {
      display: none;
   }

   table,
   tbody,
   tr,
   td {
      display: block;
      width: 100%;
   }

   table tr {
      margin-bottom: 16px;
      border: 1px solid var(--gray-200);
      border-radius: 12px;
      background: white;
      padding: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   }

   table td {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #f0f0f0;
      font-size: 0.88rem;
      text-align: right;
   }

   table td:last-child {
      border-bottom: none;
   }

   table td::before {
      content: attr(data-label);
      font-weight: 700;
      color: var(--navy-800);
      text-align: left;
      margin-right: 15px;
      flex-shrink: 0;
   }

   .audit-filters {
      flex-direction: column !important;
      align-items: stretch !important;
   }

   .audit-filters>div {
      width: 100% !important;
   }

   .audit-filters select,
   .audit-filters button {
      width: 100% !important;
   }

   .charts-grid {
      grid-template-columns: 1fr !important;
   }
}

/* Performance & a11y */
.specialty-card,
.btn,
.faq-item {
   will-change: transform, opacity;
}

@media (prefers-reduced-motion:reduce) {
   * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}

/* Legacy compat */
.seccion-quienes-somos {
   padding: var(--space-6) 0;
   background: #ffffff;
}

@media (min-width:768px) {
   .seccion-quienes-somos {
      padding: 80px 0;
   }
}

.quienes-somos-texto {
   max-width: 800px;
   margin: 0 auto 48px;
   text-align: center;
   color: #4a5568;
   line-height: 1.8;
}

.quienes-somos-texto p {
   margin-bottom: 16px;
   font-size: 1.05rem;
}

.valores-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 20px;
}

@media (min-width:768px) {
   .valores-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
   }
}

.valor-card {
   background: #f4f7fb;
   border-radius: var(--radius-lg);
   padding: 28px 20px;
   text-align: center;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   border-top: 3px solid #3a8fb7;
}

.valor-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 8px 32px rgba(27, 58, 92, 0.12);
}

.valor-card h3 {
   font-size: 1.05rem;
   font-weight: 600;
   color: #1b3a5c;
   margin-bottom: 10px;
}

.valor-card p {
   color: #6b7f99;
   font-size: 0.9rem;
   line-height: 1.6;
}

/* ============================================================
   INSTALACIONES CARRUSEL
   ============================================================ */
.instalaciones-section {
   background: var(--navy-50);
}

.instalaciones-carousel {
   position: relative;
   max-width: 1100px;
   margin: 40px auto 0;
   border-radius: var(--radius-xl);
   overflow: hidden;
   box-shadow: 0 20px 50px rgba(16, 42, 67, 0.3);
   background: var(--navy-900);
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.carousel-track-container {
   padding: 0;
   margin: 0;
   position: relative;
   height: 450px;
   overflow: hidden;
}

@media (min-width: 768px) {
   .carousel-track-container {
      height: 650px;
   }
}

.carousel-track {
   padding: 0;
   margin: 0;
   list-style: none;
   position: relative;
   height: 100%;
   transition: transform 0.5s ease-in-out;
}

.carousel-slide {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
}

.inst-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.inst-caption {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(to top, rgba(16, 42, 67, 0.9) 0%, rgba(16, 42, 67, 0) 100%);
   color: var(--white);
   padding: 40px 20px 20px;
   text-align: center;
   font-size: 1.1rem;
   font-weight: 600;
   font-family: var(--font-serif);
   transform: translateY(10px);
   opacity: 0;
   transition: all 0.3s ease 0.2s;
}

.carousel-slide.current-slide .inst-caption {
   transform: translateY(0);
   opacity: 1;
}

.carousel-button {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(255, 255, 255, 0.2);
   border: none;
   border-radius: 50%;
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: var(--white);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   transition: all 0.3s ease;
   z-index: 10;
}

.carousel-button:hover {
   background: var(--teal-500);
}

.carousel-button svg {
   width: 20px;
   height: 20px;
}

.carousel-button--left {
   left: 15px;
}

.carousel-button--right {
   right: 15px;
}

.carousel-button.is-hidden {
   display: none;
}

.carousel-nav {
   display: flex;
   justify-content: center;
   gap: 8px;
   padding: 15px 0;
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 10;
}

.carousel-indicator {
   border: 0;
   border-radius: 50%;
   width: 10px;
   height: 10px;
   background: rgba(255, 255, 255, 0.4);
   cursor: pointer;
   transition: background 0.3s ease;
}

.carousel-indicator.current-indicator {
   background: var(--teal-400);
}

/* ZOOM & LIGHTBOX */
.btn-zoom {
   position: absolute;
   top: 20px;
   right: 20px;
   background: rgba(16, 42, 67, 0.6);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: white;
   width: 44px;
   height: 44px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 15;
   transition: all 0.3s ease;
   opacity: 0;
   transform: translateY(-5px);
}

.carousel-slide.current-slide .btn-zoom {
   opacity: 1;
   transform: translateY(0);
}

.btn-zoom:hover {
   background: var(--teal-500);
   transform: scale(1.05);
}

.btn-zoom svg {
   width: 20px;
   height: 20px;
}

.lightbox-overlay {
   display: none;
   position: fixed;
   z-index: 9999;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: radial-gradient(circle at center, rgba(16, 42, 67, 0.95) 0%, rgba(10, 25, 41, 1) 100%);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   overflow: hidden;
}

.lightbox-container {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 20px;
}

.lightbox-content-wrapper {
   position: relative;
   max-width: 90%;
   max-height: 80vh;
   border-radius: 16px;
   box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
   overflow: hidden;
   cursor: zoom-in;
   background: #000;
}

.lightbox-content {
   display: block;
   width: 100%;
   height: 100%;
   max-height: 80vh;
   object-fit: contain;
   transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
   pointer-events: none;
}

.lightbox-content-wrapper.zoomed {
   cursor: zoom-out;
}

.lightbox-content-wrapper.zoomed .lightbox-content {
   transform: scale(2.5);
}

.lightbox-caption {
   margin-top: 25px;
   color: white;
   font-size: 1.5rem;
   font-family: var(--font-serif);
   font-weight: 600;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
   position: absolute;
   top: 20px;
   right: 30px;
   color: white;
   font-size: 50px;
   font-weight: 300;
   cursor: pointer;
   transition: 0.3s;
   line-height: 1;
}

.lightbox-close:hover {
   color: var(--teal-400);
}

.lightbox-close {
   position: absolute;
   top: 30px;
   right: 30px;
   width: 60px;
   height: 60px;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   color: white;
   font-size: 35px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 10001;
   transition: all 0.3s ease;
}

.lightbox-close:hover {
   background: #ff4d4d !important;
   transform: rotate(90deg) !important;
}

.lightbox-hint {
   position: absolute;
   bottom: 30px;
   color: rgba(255, 255, 255, 0.4);
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 2px;
}

/* ============================================================
   SKELETON LOADING (UX PREMIUM)
   ============================================================ */
.skeleton {
   position: relative;
   overflow: hidden !important;
   background-color: #e2e8f0 !important;
   /* var(--silver-200) */
   border-radius: 12px !important;
   border: none !important;
   color: transparent !important;
}

.skeleton::after {
   content: "" !important;
   position: absolute !important;
   top: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   left: 0 !important;
   transform: translateX(-100%) !important;
   background-image: linear-gradient(90deg,
         rgba(255, 255, 255, 0) 0%,
         rgba(255, 255, 255, 0.3) 20%,
         rgba(255, 255, 255, 0.6) 60%,
         rgba(255, 255, 255, 0) 100%) !important;
   animation: skeleton-shimmer 2s infinite !important;
}

@keyframes skeleton-shimmer {
   100% {
      transform: translateX(100%);
   }
}

.skeleton-text {
   height: 14px;
   margin-bottom: 8px;
   width: 100%;
}

.skeleton-text.short {
   width: 60%;
}

.skeleton-title {
   height: 20px;
   margin-bottom: 12px;
   width: 45%;
}

.skeleton-card {
   padding: 24px;
   background: white;
   border-radius: 16px;
   border: 1px solid #e2e8f0;
   margin-bottom: 16px;
   display: flex;
   flex-direction: column;
   gap: 8px;
}