/* ========================================
   VARIABLES GLOBALES ACTUALIZADAS
======================================== */
:root {
  --black: #050608;
  --black2: #0b0d10;
  --red: #d71945;
  --red2: #a80032;
  --gold: #d2a43e;
  --white: #fff;
  --muted: #c7c7c7;

  /* Mapeo a variables existentes */
  --primary: #d71945;
  --primary-dark: #a80032;
  --primary-light: #d2a43e;
  --dark: #050608;
  --dark-2: #0b0d10;
  --gray: #c7c7c7;
  --light: #f8fafc;
  --white: #ffffff;

  --gradient-primary: linear-gradient(135deg, #d71945 0%, #a80032 100%);
  --gradient-dark: linear-gradient(135deg, #050608 0%, #0b0d10 100%);

  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.10);
  --shadow-lg: 0 20px 40px rgba(0,0,0,.15);
  --transition: all .35s cubic-bezier(.4,0,.2,1);
}

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      color: var(--dark);
      overflow-x: hidden;
      line-height: 1.6;
    }

    /* ========================================
       BARRA DE PROGRESO DE SCROLL
    ======================================== */
    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 4px;
      width: 0%;
      background: var(--gradient-primary);
      z-index: 9999;
      transition: width .1s linear;
      box-shadow: 0 0 12px rgba(215, 25, 69, .7);
    }

    /* ========================================
       HEADER / NAVBAR PROFESIONAL
    ======================================== */
.header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 14px 0;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  z-index: 999;
  border-bottom: 1px solid rgba(0, 0, 0, .04);
}

/* Solo animar en desktop */
@media (min-width: 992px) {
  .header {
    animation: headerSlideDown .8s cubic-bezier(.4,0,.2,1) both;
  }

  @keyframes headerSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
  }
}

    .header.scrolled {
      padding: 8px 0;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 8px 30px rgba(10, 25, 41, .08);
      border-bottom-color: rgba(215, 25, 69, .15);
    }

    .header .logo img {
      height: 52px;
      width: auto;
      transition: height .35s ease;
    }

    .header.scrolled .logo img {
      height: 44px;
    }

    /* ============ NAV MENU ============ */
    .navmenu ul {
      display: flex;
      align-items: center;
      gap: 2px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .nav-item {
      position: relative;
    }

    .nav-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #1e293b;
      text-decoration: none;
      font-weight: 500;
      font-size: .9rem;
      padding: 10px 14px;
      border-radius: 10px;
      position: relative;
      transition: all .3s cubic-bezier(.4, 0, .2, 1);
      white-space: nowrap;
    }

    .nav-link i:first-child {
      font-size: 1rem;
      color: #64748b;
      transition: color .3s ease;
    }

    .nav-link .caret {
      font-size: .7rem;
      margin-left: 2px;
      transition: transform .3s ease;
    }

    /* Línea activa animada */
    .nav-link::before {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, #d71945, #a80032);
      border-radius: 2px;
      transition: width .35s cubic-bezier(.4, 0, .2, 1);
    }

    .nav-link:hover,
    .nav-link.active {
      color: #d71945;
      background: rgba(215, 25, 69, .07);
    }

    .nav-link:hover i:first-child,
    .nav-link.active i:first-child {
      color: #d71945;
    }

    .nav-link:hover::before,
    .nav-link.active::before {
      width: 55%;
    }

    /* ============ DROPDOWN ============ */
    .dropdown {
      position: relative;
    }

    .dropdown-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      min-width: 300px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 20px 50px rgba(10, 25, 41, .15);
      padding: 10px;
      list-style: none;
      border: 1px solid rgba(215, 25, 69, .12);
      opacity: 0;
      visibility: hidden;
      transition: all .35s cubic-bezier(.4, 0, .2, 1);
      z-index: 1000;
      margin: 0;
    }

    .dropdown-menu::before {
      content: '';
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      width: 14px;
      height: 14px;
      background: #fff;
      border-left: 1px solid rgba(215, 25, 69, .12);
      border-top: 1px solid rgba(215, 25, 69, .12);
    }

    .dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    .dropdown:hover .caret {
      transform: rotate(180deg);
    }

    .dropdown-menu li {
      width: 100%;
    }

    .dropdown-menu a {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 14px;
      border-radius: 12px;
      text-decoration: none;
      transition: all .3s ease;
      color: #1e293b;
    }

    .dropdown-menu a i {
      font-size: 1.3rem;
      color: #d71945;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(215, 25, 69, .08);
      border-radius: 10px;
      flex-shrink: 0;
      transition: all .3s ease;
    }

    .dropdown-menu a div {
      display: flex;
      flex-direction: column;
    }

    .dropdown-menu a strong {
      font-size: .9rem;
      font-weight: 600;
      color: #0a1929;
    }

    .dropdown-menu a small {
      font-size: .75rem;
      color: #64748b;
      margin-top: 2px;
    }

    .dropdown-menu a:hover {
      background: rgba(215, 25, 69, .08);
      transform: translateX(4px);
    }

    .dropdown-menu a:hover i {
      background: linear-gradient(135deg, #d71945, #a80032);
      color: #fff;
      transform: scale(1.05);
    }

    /* ============ CTA BUTTON ============ */
    .btn-nav-cta {
      background: linear-gradient(135deg, #d71945, #a80032);
      color: #fff !important;
      padding: 10px 20px !important;
      border-radius: 50px !important;
      box-shadow: 0 6px 18px rgba(215, 25, 69, .35);
      margin-left: 6px;
    }

    .btn-nav-cta i:first-child {
      color: #fff !important;
    }

    .btn-nav-cta::before {
      display: none;
    }

    .btn-nav-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(215, 25, 69, .5);
      background: linear-gradient(135deg, #a80032, #870028);
    }

    /* ============ MOBILE TOGGLE (HAMBURGUESA) ============ */
.mobile-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(215, 25, 69, .08);
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: all .3s ease;
  z-index: 1001;
  flex-shrink: 0;
  margin-left: auto;
  align-self: center;
}

    .mobile-nav-toggle:hover {
      background: rgba(215, 25, 69, .15);
    }

    .mobile-nav-toggle span {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 22px;
      height: 2px;
      background: #0a1929;
      border-radius: 2px;
      transition: all .35s cubic-bezier(.4, 0, .2, 1);
    }

    .mobile-nav-toggle span:nth-child(1) { top: 14px; }
    .mobile-nav-toggle span:nth-child(2) { top: 21px; }
    .mobile-nav-toggle span:nth-child(3) { top: 28px; }

    .mobile-nav-toggle.active span:nth-child(1) {
      top: 21px;
      transform: translateX(-50%) rotate(45deg);
      background: #d71945;
    }

    .mobile-nav-toggle.active span:nth-child(2) {
      opacity: 0;
      transform: translateX(-50%) scaleX(0);
    }

    .mobile-nav-toggle.active span:nth-child(3) {
      top: 21px;
      transform: translateX(-50%) rotate(-45deg);
      background: #d71945;
    }

    /* ============ RESPONSIVE NAV ============ */
    @media (max-width: 1199px) {
      .nav-link {
        padding: 10px 10px;
        font-size: .85rem;
      }
      .nav-link i:first-child {
        font-size: .95rem;
      }
    }

    @media (max-width: 991px) {
      .mobile-nav-toggle {
        display: block;
      }
 .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .header .container > .d-flex {
    align-items: center !important;
    justify-content: space-between !important;
  }

  .header .logo img {
    height: 42px;
  }
      .navmenu ul {
        position: fixed;
        top: 0;
        right: -100%;
        width: 340px;
        max-width: 88vw;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        padding: 90px 20px 30px;
        box-shadow: -20px 0 60px rgba(10, 25, 41, .15);
        transition: right .45s cubic-bezier(.4, 0, .2, 1);
        gap: 4px;
        z-index: 1000;
        overflow-y: auto;
        list-style: none;
      }

      .navmenu ul.active {
        right: 0;
      }

      .nav-item {
        width: 100%;
      }

      .nav-link {
        width: 100%;
        padding: 14px 16px;
        font-size: .95rem;
        border-radius: 12px;
        justify-content: flex-start;
      }

      .nav-link::before {
        display: none;
      }

      .nav-link i:first-child {
        font-size: 1.1rem;
        width: 24px;
      }

      /* Dropdown móvil */
      .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: rgba(215, 25, 69, .04);
        border-radius: 12px;
        padding: 6px;
        margin-top: 4px;
        display: none;
        min-width: 100%;
      }

      .dropdown-menu::before {
        display: none;
      }

      .dropdown.open .dropdown-menu {
        display: block;
        animation: dropdownSlide .35s ease;
      }

      @keyframes dropdownSlide {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
      }

      .dropdown-menu a {
        padding: 10px 12px;
      }

      .dropdown-menu a i {
        width: 32px;
        height: 32px;
        font-size: 1.1rem;
      }

      .dropdown-menu a strong {
        font-size: .85rem;
      }

      .dropdown-menu a small {
        font-size: .72rem;
      }

      .btn-nav-cta {
        margin-left: 0;
        margin-top: 8px;
        justify-content: center;
        padding: 14px 20px !important;
      }

      .dropdown.open .caret {
        transform: rotate(180deg);
      }
    }

    @media (max-width: 576px) {
      .header {
        padding: 10px 0;
      }
      .header .logo img {
        height: 42px;
      }
      .header.scrolled .logo img {
        height: 38px;
      }
      .navmenu ul {
        padding: 80px 16px 24px;
        width: 300px;
      }
    }

    /* ============ OVERLAY ============ */
    .nav-overlay {
      position: fixed;
      inset: 0;
      background: rgba(10, 25, 41, .5);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      opacity: 0;
      visibility: hidden;
      transition: all .4s ease;
      z-index: 997;
    }

    .nav-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    /* Bloqueo de scroll cuando el menú está abierto */
    body.menu-open {
      overflow: hidden;
    }

    /* ========================================
       HERO SECTION
    ======================================== */
    .hero {
      position: relative;
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #000;
    }

    .hero video {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      transform: translate(-50%, -50%);
      object-fit: cover;
      z-index: 0;
      animation: slowZoom 20s ease-in-out infinite alternate;
    }

    @keyframes slowZoom {
      0%   { transform: translate(-50%, -50%) scale(1); }
      100% { transform: translate(-50%, -50%) scale(1.12); }
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        135deg,
        rgba(10,25,41,.75) 0%,
        rgba(10,25,41,.55) 50%,
        rgba(10,25,41,.85) 100%
      );
      z-index: 1;
    }

    .hero::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 200px;
      background: linear-gradient(to top, rgba(10,25,41,.9), transparent);
      z-index: 1;
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      color: #fff;
      padding: 0 20px;
      max-width: 1000px;
      margin: 0 auto;
      transition: transform .3s ease-out;
    }

    .hero-content h1 {
      font-size: clamp(2rem, 5vw, 4rem);
      font-weight: 800;
      margin-bottom: 20px;
      line-height: 1.15;
      letter-spacing: -.02em;
      text-shadow: 0 4px 20px rgba(0,0,0,.4);
      animation: heroFadeUp 1s ease-out .2s both;
    }

    .hero-content h1 strong {
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-content h3 {
      font-size: clamp(1.1rem, 2.2vw, 1.6rem);
      font-weight: 400;
      color: rgba(255,255,255,.9);
      margin-bottom: 40px;
      text-shadow: 0 2px 10px rgba(0,0,0,.3);
      animation: heroFadeUp 1s ease-out .4s both;
    }

    /* Scroll indicator */
    .scroll-indicator {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      color: #fff;
      font-size: 2rem;
      animation: bounceDown 2s infinite, glowPulse 2s ease-in-out infinite;
      cursor: pointer;
      opacity: .8;
      transition: var(--transition);
    }

    .scroll-indicator:hover { opacity: 1; }

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

    @keyframes bounceDown {
      0%, 100% { transform: translate(-50%, 0); }
      50% { transform: translate(-50%, 12px); }
    }

    @keyframes glowPulse {
      0%, 100% { filter: drop-shadow(0 0 4px rgba(255,255,255,.5)); }
      50%      { filter: drop-shadow(0 0 14px rgba(215, 25, 69, .9)); }
    }

    /* ========================================
       SECCIONES GENERALES
    ======================================== */
    section {
      padding: 90px 0;
    }

    .section-title {
      text-align: center;
      margin-bottom: 60px;
    }

    .section-title h2 {
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--dark);
      margin-bottom: 16px;
      position: relative;
      display: inline-block;
      overflow: hidden;
    }

    .section-title h2::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(215, 25, 69, .15), transparent);
      animation: shimmerText 3.5s infinite;
      pointer-events: none;
    }

    @keyframes shimmerText {
      0%   { left: -100%; }
      100% { left: 200%; }
    }

    .section-title h2::after {
      content: '';
      position: absolute;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 4px;
      background: var(--gradient-primary);
      border-radius: 4px;
    }

    .section-title p {
      color: var(--gray);
      font-size: 1.05rem;
      max-width: 700px;
      margin: 20px auto 0;
    }

  

    /* ========================================
       COUNTS SECTION
    ======================================== */
    .counts-section {
      background: linear-gradient(135deg, #f8fafc 0%, #fce7ed 100%);
      position: relative;
      overflow: hidden;
    }

    .counts-section::before {
      content: '';
      position: absolute;
      top: -100px;
      right: -100px;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(215, 25, 69, .15), transparent 70%);
      border-radius: 50%;
    }

    .counts-title {
      font-size: clamp(1.1rem, 2vw, 1.5rem);
      font-weight: 700;
      color: var(--dark);
      letter-spacing: .5px;
      text-transform: uppercase;
      text-align: center;
      max-width: 900px;
      margin: 0 auto 60px;
      line-height: 1.4;
      position: relative;
      overflow: hidden;
    }

    .counts-title::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(215, 25, 69, .15), transparent);
      animation: shimmerText 3.5s infinite;
      pointer-events: none;
    }

    .stats-card {
      background: var(--white);
      border-radius: 20px;
      padding: 40px 24px;
      text-align: center;
      height: 100%;
      box-shadow: var(--shadow-sm);
      transition: transform .5s cubic-bezier(.4,0,.2,1), box-shadow .5s ease;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(215, 25, 69, .1);
    }

    .stats-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--gradient-primary);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .5s ease;
    }

    .stats-card:hover {
      transform: translateY(-10px);
      box-shadow: var(--shadow-lg);
    }

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

    .stats-card .counter {
      display: block;
      font-size: clamp(2.5rem, 5vw, 3.5rem);
      font-weight: 900;
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      margin-bottom: 15px;
      letter-spacing: -.03em;
      transition: transform .5s cubic-bezier(.34,1.56,.64,1);
    }

    .stats-card:hover .counter { transform: scale(1.1); }

    .stats-card p {
      color: var(--gray);
      font-size: .98rem;
      margin: 0;
      font-weight: 500;
    }

    .sectors-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-top: 50px;
    }

    .sector-badge {
      padding: 10px 22px;
      border: 2px solid rgba(215, 25, 69, .3);
      border-radius: 50px;
      font-size: .82rem;
      font-weight: 600;
      color: var(--dark);
      background: rgba(255,255,255,.7);
      backdrop-filter: blur(10px);
      letter-spacing: .5px;
      transition: var(--transition);
      cursor: default;
      position: relative;
      overflow: hidden;
      z-index: 0;
    }

    .sector-badge::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: var(--gradient-primary);
      transform: translate(-50%, -50%);
      transition: width .5s ease, height .5s ease;
      z-index: -1;
    }

    .sector-badge:hover {
      color: #fff;
      border-color: transparent;
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(215, 25, 69, .3);
    }

    .sector-badge:hover::before {
      width: 200%;
      height: 200%;
    }

    /* ========================================
       WHY US
    ======================================== */
    .why-us-section { background: var(--white); }

    .why-box {
      background: var(--gradient-dark);
      color: #fff;
      padding: 50px 40px;
      border-radius: 24px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .why-box::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(215, 25, 69, .3), transparent 70%);
      border-radius: 50%;
    }

    .why-box h3 {
      font-size: 1.8rem;
      font-weight: 800;
      margin-bottom: 20px;
      position: relative;
      letter-spacing: -.02em;
    }

    .why-box p {
      color: rgba(255,255,255,.85);
      margin-bottom: 30px;
      font-size: 1.02rem;
      position: relative;
    }

    .more-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--gradient-primary);
      color: #fff;
      padding: 12px 28px;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 600;
      transition: var(--transition);
      position: relative;
      width: fit-content;
      overflow: hidden;
    }

    .more-btn::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
      transition: left .7s ease;
      pointer-events: none;
    }

    .more-btn:hover::after { left: 150%; }

    .more-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 24px rgba(215, 25, 69, .5);
      color: #fff;
    }

    .more-btn i { transition: transform .3s ease; }
    .more-btn:hover i { transform: translateX(5px); }

    .icon-card {
      background: var(--white);
      border: 2px solid rgba(0,0,0,.04);
      border-radius: 20px;
      padding: 40px 24px;
      text-align: center;
      height: 100%;
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .icon-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--gradient-primary);
      opacity: 0;
      transition: var(--transition);
      z-index: 0;
    }

    .icon-card > * { position: relative; z-index: 1; }

    .icon-card:hover {
      transform: translateY(-10px);
      box-shadow: var(--shadow-lg);
      border-color: transparent;
    }

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

    .icon-card:hover .icon-wrapper i,
    .icon-card:hover h4,
    .icon-card:hover p { color: #fff !important; }

    .icon-wrapper {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      border-radius: 20px;
      background: rgba(215, 25, 69, .1);
      margin-bottom: 24px;
      transition: var(--transition);
    }

    .icon-card:hover .icon-wrapper {
      background: rgba(255,255,255,.2);
    }

    .icon-wrapper i {
      font-size: 2.2rem;
      transition: var(--transition);
      animation: floatIcon 3s ease-in-out infinite;
    }

    @keyframes floatIcon {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-8px); }
    }

    .icon-card:nth-child(2) .icon-wrapper i { animation-delay: .3s; }
    .icon-card:nth-child(3) .icon-wrapper i { animation-delay: .6s; }

    .icon-card h4 {
      font-size: 1.15rem;
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--dark);
      transition: var(--transition);
    }

    .icon-card p {
      color: var(--gray);
      font-size: .95rem;
      margin: 0;
      transition: var(--transition);
    }

    /* ========================================
       PECB CARD
    ======================================== */
    .pecb-section { padding: 60px 0; }

    .pecb-card {
      background: var(--white);
      border-radius: 24px;
      padding: 40px;
      box-shadow: var(--shadow-md);
      border: 1px solid rgba(215, 25, 69, .1);
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .pecb-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 5px;
      height: 100%;
      background: var(--gradient-primary);
    }

    .pecb-card::after {
      content: '';
      position: absolute;
      top: 50%;
      right: -50px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(215, 25, 69, .25), transparent 70%);
      transform: translateY(-50%);
      animation: pulsePECB 3s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes pulsePECB {
      0%, 100% { transform: translateY(-50%) scale(1);   opacity: .6; }
      50%      { transform: translateY(-50%) scale(1.3); opacity: 1; }
    }

    .pecb-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-lg);
    }

    .pecb-card img {
      max-width: 100px;
      height: auto;
      transition: var(--transition);
      position: relative;
      z-index: 1;
    }

    .pecb-card:hover img { transform: scale(1.05); }

    .pecb-card h5 {
      color: var(--primary);
      font-weight: 700;
      font-size: 1.3rem;
      margin-bottom: 15px;
    }

    .pecb-card p {
      color: var(--gray);
      margin: 0;
      line-height: 1.7;
      position: relative;
      z-index: 1;
    }

    /* ========================================
       CONTACT SECTION
    ======================================== */
    .contact-section {
      background: linear-gradient(135deg, #f8fafc 0%, #fce7ed 100%);
    }

    .contact-card {
      background: var(--white);
      border-radius: 20px;
      padding: 32px;
      box-shadow: var(--shadow-sm);
      border-left: 5px solid var(--primary);
      transition: var(--transition);
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .contact-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(215, 25, 69, .05), transparent);
      transition: left .6s ease;
      pointer-events: none;
    }

    .contact-card:hover::after { left: 100%; }

    .contact-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
    }

    .contact-card h3 {
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .contact-card h3 .icon-circle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(215, 25, 69, .1);
      color: var(--primary);
      font-size: 1.1rem;
    }

    .contact-card p {
      color: var(--gray);
      margin: 6px 0;
      font-size: .98rem;
    }

    .contact-card a {
      color: var(--primary);
      text-decoration: none;
      font-weight: 600;
      transition: var(--transition);
      word-break: break-all;
    }

    .contact-card a:hover { color: var(--primary-dark); }

    .btn-whatsapp {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #25D366;
      color: #fff;
      padding: 14px 28px;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 600;
      margin-top: 18px;
      transition: var(--transition);
      box-shadow: 0 8px 20px rgba(37,211,102,.3);
      font-size: .95rem;
      position: relative;
      overflow: hidden;
    }

    .btn-whatsapp::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
      transition: left .7s ease;
      pointer-events: none;
    }

    .btn-whatsapp:hover::after { left: 150%; }

    .btn-whatsapp:hover {
      background: #128C7E;
      color: #fff;
      transform: translateY(-3px);
      box-shadow: 0 12px 28px rgba(37,211,102,.4);
    }

    .qr-wrapper {
      background: var(--white);
      border-radius: 20px;
      padding: 40px 30px;
      box-shadow: var(--shadow-sm);
      height: 100%;
    }

    .qr-item {
      text-align: center;
      padding: 20px;
      border-radius: 16px;
      transition: var(--transition);
    }

    .qr-item:hover {
      background: rgba(215, 25, 69, .05);
      transform: translateY(-5px);
    }

    .qr-item img {
      width: 150px;
      height: 150px;
      object-fit: contain;
      border-radius: 12px;
      box-shadow: 0 6px 20px rgba(0,0,0,.08);
      transition: var(--transition);
      background: #fff;
      padding: 8px;
    }

    .qr-item:hover img { transform: scale(1.06); }

    .qr-item p {
      margin-top: 14px;
      font-weight: 600;
      color: var(--dark);
      font-size: .9rem;
    }

    /* ========================================
       FOOTER
    ======================================== */
    .footer {
      background: var(--gradient-dark);
      color: #fff;
      padding: 80px 0 0;
      position: relative;
      overflow: hidden;
    }

    .footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--gradient-primary);
    }

    .footer::after {
      content: '';
      position: absolute;
      bottom: -120px;
      left: -120px;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(215, 25, 69, .12), transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }

    .footer-logo {
      display: inline-block;
      padding: 20px 25px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 20px;
      backdrop-filter: blur(10px);
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .footer-logo::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(215, 25, 69, .15), transparent 60%);
      opacity: 0;
      transition: opacity .4s ease;
      pointer-events: none;
    }

    .footer-logo:hover {
      transform: translateY(-4px);
      border-color: rgba(215, 25, 69, .4);
      box-shadow: 0 15px 40px rgba(215, 25, 69, .25);
    }

    .footer-logo:hover::before { opacity: 1; }

    .footer-logo img {
      height: 120px;
      width: auto;
      max-width: 100%;
      display: block;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
      transition: transform .4s ease;
    }

    .footer-logo:hover img { transform: scale(1.05); }

    .footer-slogan {
      color: rgba(255,255,255,.85);
      font-size: 1.05rem;
      line-height: 1.7;
      font-style: italic;
      margin-bottom: 28px;
      padding-left: 20px;
      border-left: 4px solid var(--primary);
      position: relative;
      z-index: 1;
    }

    .footer-menu {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px;
      position: relative;
      z-index: 1;
      margin-bottom: 20px;
    }

    .footer-menu a {
      color: rgba(255,255,255,.85);
      text-decoration: none;
      font-size: .98rem;
      font-weight: 500;
      padding: 10px 16px;
      border-radius: 10px;
      transition: var(--transition);
      position: relative;
    }

    .footer-menu a::before {
      content: '';
      position: absolute;
      bottom: 4px;
      left: 50%;
      width: 0;
      height: 2px;
      background: var(--gradient-primary);
      border-radius: 2px;
      transform: translateX(-50%);
      transition: width .35s ease;
    }

    .footer-menu a:hover {
      color: var(--primary);
      background: rgba(215, 25, 69, .1);
      transform: translateY(-2px);
    }

    .footer-menu a:hover::before { width: 60%; }

    .footer-menu span {
      color: rgba(255,255,255,.25);
      font-size: .9rem;
      user-select: none;
    }

    /* ========================================
   FOOTER BOTTOM - COPY IZQUIERDA / CREDITO DERECHA
======================================== */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 60px;
  padding: 28px 0;
  position: relative;
  z-index: 1;
}

.footer-bottom-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-bottom p {
  margin: 0;
  font-size: .92rem;
  color: rgba(255,255,255,.7);
}

.footer-copy {
  text-align: left;
}

.footer-credit {
  text-align: right;
}

.footer-bottom a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-bottom a:hover {
  color: var(--primary-light);
}

.cat-icon {
  font-size: 1.1rem;
  display: inline-block;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}

.footer-bottom a:hover .cat-icon {
  transform: scale(1.25) rotate(-8deg);
}

/* Responsive: en móvil se apilan centrados */
@media (max-width: 768px) {
  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
  }
  .footer-copy,
  .footer-credit {
    text-align: center;
  }
}

    /* ========================================
       SCROLL TOP
    ======================================== */
    .scroll-top {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
      background: var(--gradient-primary);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      text-decoration: none;
      box-shadow: 0 8px 24px rgba(215, 25, 69, .4);
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      transition: var(--transition);
      z-index: 998;
    }

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

    .scroll-top:hover {
      background: var(--primary-dark);
      color: #fff;
      transform: translateY(-5px);
      box-shadow: 0 12px 32px rgba(215, 25, 69, .55);
    }

    /* ========================================
       FLOATING SOCIAL SIDEBAR
    ======================================== */
    .floating-social {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 996;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 12px 0;
    }

    .social-btn {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      border-radius: 50% 0 0 50%;
      text-decoration: none;
      color: #fff;
      box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.15);
      transition: all .45s cubic-bezier(.4, 0, .2, 1);
      overflow: hidden;
      margin-left: auto;
      opacity: 0;
      transform: translateX(80px);
      animation: slideInSocial .6s cubic-bezier(.4, 0, .2, 1) forwards;
    }

    .social-btn:nth-child(1) { animation-delay: .2s; }
    .social-btn:nth-child(2) { animation-delay: .4s; }
    .social-btn:nth-child(3) { animation-delay: .6s; }

    @keyframes slideInSocial {
      to { opacity: 1; transform: translateX(0); }
    }

    .social-btn.whatsapp::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #25D366;
      transform: translate(-50%, -50%) scale(1);
      opacity: 0;
      animation: pulseWhatsApp 2.5s infinite;
      z-index: -1;
    }

    @keyframes pulseWhatsApp {
      0%   { transform: translate(-50%, -50%) scale(1); opacity: .6; }
      100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
    }

    .social-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      font-size: 1.5rem;
      transition: all .4s cubic-bezier(.4, 0, .2, 1);
      z-index: 2;
      position: relative;
    }

    .social-label {
      position: absolute;
      right: 100%;
      top: 50%;
      transform: translateY(-50%) translateX(20px);
      background: var(--dark);
      color: #fff;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: .85rem;
      font-weight: 600;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: all .4s cubic-bezier(.4, 0, .2, 1);
      pointer-events: none;
      margin-right: 12px;
      box-shadow: 0 4px 16px rgba(0,0,0,.2);
    }

    .social-label::after {
      content: '';
      position: absolute;
      right: -6px;
      top: 50%;
      transform: translateY(-50%);
      border-left: 6px solid var(--dark);
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
    }

    .social-btn.linkedin  { background: #0A66C2; }
    .social-btn.linkedin:hover  { background: #004182; width: 68px; box-shadow: -6px 6px 28px rgba(10, 102, 194, .5); }

    .social-btn.facebook  { background: #1877F2; }
    .social-btn.facebook:hover  { background: #0d5bcd; width: 68px; box-shadow: -6px 6px 28px rgba(24, 119, 242, .5); }

    .social-btn.whatsapp  { background: #25D366; }
    .social-btn.whatsapp:hover  { background: #128C7E; width: 68px; box-shadow: -6px 6px 28px rgba(37, 211, 102, .5); }

    .social-btn:hover .social-icon { transform: scale(1.15) rotate(8deg); }
    .social-btn:hover .social-label { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }

    /* ========================================
       RESPONSIVE GENERAL
    ======================================== */
    @media (max-width: 991px) {
      section { padding: 60px 0; }
      .hero { min-height: 90vh; }

      .floating-social {
        top: auto;
        bottom: 100px;
        right: 15px;
        transform: none;
        flex-direction: column;
        gap: 10px;
        padding: 0;
      }

      .social-btn {
        width: 46px;
        height: 46px;
        border-radius: 50%;
      }

      .social-btn:hover { width: 46px; }

      .social-icon { font-size: 1.2rem; }

      .social-label { display: none; }

      .scroll-top {
        bottom: 30px;
        right: 20px;
        width: 44px;
        height: 44px;
      }
    }

    @media (max-width: 768px) {
      .qr-item img { width: 130px; height: 130px; }
    }

    @media (max-width: 991px) {
      .footer { padding: 60px 0 0; }

      .footer-logo {
        padding: 15px 20px;
        display: inline-block;
      }

      .footer-logo img { height: 100px; }

      .footer-slogan {
        text-align: center;
        border-left: none;
        border-top: 3px solid var(--primary);
        padding-left: 0;
        padding-top: 20px;
        margin-top: 20px;
      }

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

    @media (max-width: 576px) {
      .footer-logo img { height: 80px; }

      .footer-menu a {
        padding: 8px 12px;
        font-size: .9rem;
      }

      .footer-menu span { display: none; }
    }

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