:root {
      --brand-300: #f4845f;
      --brand-500: #e94e1b;
      --brand-600: #c74217;
      --eci-500: #e94e1b;
      --neutral-100: #f5f5f5;
      --neutral-200: #e5e5e5;
      --neutral-300: #d4d4d4;
      --neutral-500: #737373;
      --neutral-600: #525252;
      --neutral-700: #404040;
      --neutral-800: #1a1a1a;
      --neutral-900: #000000;
      --slate-50: #f8fafc;
      --dark-navy: #000a23;
  }

  .eci-sedes-section *,
  .eci-sedes-section *::before,
  .eci-sedes-section *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }

  .eci-sedes-section {
      font-family: 'Urbanist', sans-serif;
      background-color: var(--slate-50);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      display: block;
      width: 100%;
      padding: 0;
  }

  .eci-sedes-section a {
      text-decoration: none;
      color: inherit;
  }

  @keyframes eci-sedes-fadeInUp {
      from {
          opacity: 0;
          transform: translateY(8px);
      }

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

  @keyframes eci-sedes-ping {

      75%,
      100% {
          transform: scale(1.5);
          opacity: 0;
      }
  }

  .eci-sedes-pulse-badge {
      position: relative;
  }

  .eci-sedes-pulse-badge::before {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 9999px;
      background-color: rgba(233, 78, 27, 0.4);
      animation: eci-sedes-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  .eci-sedes-card-grid {
      display: grid;
      grid-template-columns: 1fr;
      align-items: stretch;
      background: #fff;
      border-radius: 0;
      overflow: hidden;
      box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .2);
      border: 1px solid var(--neutral-200);
  }

  @media (min-width: 1024px) {
      .eci-sedes-card-grid {
          grid-template-columns: 3fr 2fr;
      }
  }

  .eci-sedes-image-side {
      position: relative;
      height: 250px;
      min-height: 250px;
      overflow: hidden;
      background-color: var(--neutral-900);
  }

  @media (min-width: 640px) {
      .eci-sedes-image-side {
          height: 320px;
      }
  }

  @media (min-width: 1024px) {
      .eci-sedes-image-side {
          height: auto;
      }
  }

  .eci-sedes-main-image {
      position: absolute !important;
      inset: 0;
      width: 100% !important;
      max-width: none !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center !important;
      transition: opacity 300ms ease-in-out;
      opacity: 1;
      display: block !important;
      filter: grayscale(20%);
  }

  .eci-sedes-main-image.eci-sedes-fade-out {
      opacity: 0;
  }

  .eci-sedes-gradient-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, .3) 50%, transparent);
      pointer-events: none;
  }

  .eci-sedes-overlay-content {
      position: absolute;
      bottom: 1.5rem;
      left: 1.5rem;
      right: 1.5rem;
      z-index: 10;
      transition: opacity 200ms ease;
  }

  .eci-sedes-overlay-content.eci-sedes-is-hidden {
      opacity: 0;
  }

  .eci-sedes-badge-row {
      display: flex;
      align-items: center;
      gap: .4rem;
      margin-bottom: .5rem;
  }

  .eci-sedes-pulse-dot {
      width: .5rem;
      height: .5rem;
      background: var(--brand-500);
  }

  .eci-sedes-city-badge {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .15em;
      color: #fff;
  }

  .eci-sedes-city-title-overlay {
      font-size: 1.75rem;
      font-weight: 900;
      color: #fff;
      line-height: 1;
      letter-spacing: -.03em;
      text-transform: uppercase;
  }

  @media (min-width: 640px) {
      .eci-sedes-city-title-overlay {
          font-size: 2.25rem;
      }
  }

  .eci-sedes-info-side {
      background: #fff;
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }

  @media (min-width: 640px) {
      .eci-sedes-info-side {
          padding: 1.5rem;
      }
  }

  .eci-sedes-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 1.25rem;
  }

  .eci-sedes-filter-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 1 1 0%;
      gap: 0.5rem;
      padding: 0.625rem 1.25rem;
      border: 2px solid var(--neutral-200);
      background: #fff;
      color: var(--neutral-800);
      font-weight: 800;
      font-size: 0.75rem;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s;
      letter-spacing: 0.03em;
      border-radius: 0;
      font-family: 'Urbanist', sans-serif;
  }

  .eci-sedes-filter-btn:hover {
      border-color: var(--eci-500);
      color: var(--eci-500);
  }

  .eci-sedes-filter-btn.eci-sedes-active {
      background: var(--eci-500);
      border-color: var(--eci-500);
      color: #fff;
  }

  .eci-sedes-filter-btn:focus-visible {
      outline: 2px solid var(--eci-500) !important;
      outline-offset: 2px !important;
  }

  .eci-sedes-dynamic-content {
      min-height: 180px;
  }

  .eci-sedes-tab-pane {
      display: none;
  }

  .eci-sedes-tab-pane.eci-sedes-active {
      display: block;
      animation: eci-sedes-fadeInUp .4s cubic-bezier(.16, 1, .3, 1) forwards;
  }

  .eci-sedes-content-title {
      font-size: 1rem;
      line-height: 1.5rem;
      font-weight: 800;
      color: var(--neutral-900);
      margin-bottom: 1rem;
      text-transform: uppercase;
      letter-spacing: -.01em;
  }

  .eci-sedes-info-list {
      display: flex;
      flex-direction: column;
      gap: .8rem;
  }

  .eci-sedes-info-item {
      display: flex;
      align-items: flex-start;
      gap: .5rem;
  }

  .eci-sedes-info-icon {
      color: var(--brand-500);
      margin-top: .15rem;
      flex-shrink: 0;
  }

  .eci-sedes-info-text {
      font-size: .8125rem;
      line-height: 1.5;
      color: var(--neutral-600);
  }

  .eci-sedes-info-text strong {
      font-weight: 700;
      color: var(--neutral-900);
  }

  .eci-sedes-info-text a {
      transition: color 200ms ease;
      text-decoration: underline;
      text-underline-offset: 2px;
  }

  .eci-sedes-info-text a:hover {
      color: var(--brand-500);
  }

  .eci-sedes-email-col {
      display: flex;
      flex-direction: column;
  }

  .eci-sedes-action-buttons {
      margin-top: 1.5rem;
      padding-top: 1rem;
      border-top: 3px solid var(--neutral-900);
      display: flex;
      flex-direction: column;
      gap: .5rem;
  }

  .eci-sedes-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      width: 100%;
      font-weight: 800;
      padding: .65rem 1rem;
      border-radius: 0;
      font-size: .75rem;
      border: 2px solid transparent;
      cursor: pointer;
      font-family: 'Urbanist', sans-serif;
      text-transform: uppercase;
      letter-spacing: .1em;
      position: relative;
      overflow: hidden;
      z-index: 1;
      transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .eci-sedes-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 100%;
      background: #fff;
      z-index: -1;
      transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .eci-sedes-btn:focus-visible {
      outline: 2px solid var(--brand-500) !important;
      outline-offset: 2px !important;
      box-shadow: none !important;
  }

  /* Refuerzo con !important para evitar conflictos con temas/Elementor */
  .eci-sedes-btn-primary {
      background: var(--brand-500) !important;
      color: #fff !important;
      border-color: var(--brand-500) !important;
  }

  .eci-sedes-btn-primary:hover::before {
      width: 100%;
  }

  .eci-sedes-btn-primary:hover {
      color: var(--brand-500) !important;
  }

  .eci-sedes-btn-secondary {
      background: var(--dark-navy) !important;
      color: #fff !important;
      border-color: var(--dark-navy) !important;
  }

  .eci-sedes-btn-secondary:hover::before {
      width: 100%;
  }

  .eci-sedes-btn-secondary:hover {
      color: var(--dark-navy) !important;
  }

  .eci-sedes-btn-arrow {
      transition: transform 200ms ease;
      font-size: 1.1em;
      line-height: 1;
      position: relative;
      z-index: 2;
  }

  .eci-sedes-btn:hover .eci-sedes-btn-arrow {
      transform: translateX(4px);
  }