/* Break Point Travel - correccion hero / header - 16-10-2026
   Cargar DESPUES de giftcards.css y hero-diagonal.css (si existe). */

/* Header original: fondo oscuro y menu blanco ANTES del scroll.
   Se conserva el estilo propio del sitio cuando agrega .scrollHeader. */
body:has(.gc) header.header-style1:not(.scrollHeader),
body:has(.gc) header.header-style1:not(.scrollHeader) .navbar-default,
body.gc-page header.header-style1:not(.scrollHeader),
body.gc-page header.header-style1:not(.scrollHeader) .navbar-default {
  background: #353851 !important;
  background-image: none !important;
}
body:has(.gc) header.header-style1:not(.scrollHeader) .navbar-nav > li > a,
body.gc-page header.header-style1:not(.scrollHeader) .navbar-nav > li > a {
  color: #fff !important;
}
body:has(.gc) header.header-style1:not(.scrollHeader) .navbar-nav > li > a:hover,
body.gc-page header.header-style1:not(.scrollHeader) .navbar-nav > li > a:hover {
  color: #ffb7bf !important;
}
/* El logo light del header.inc se mantiene en estado inicial. */

/* Fondo pleno, sin degradados en el hero ni en la columna izquierda. */
.gc .gc-hero,
.gc .gc-hero .gc-copy,
.gc .gc-hero .gc-hero-art {
  background-color: #464a6d !important;
  background-image: none !important;
}
.gc .gc-hero { padding: 0 !important; margin: 0 !important; overflow: hidden; }

@media (min-width: 901px) {
  .gc .gc-hero .gc-hero-inner {
    display: grid !important;
    grid-template-columns: 52% 48% !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: 440px !important;
    height: auto !important;
  }
  .gc .gc-hero .gc-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 88px 34px 88px max(32px, calc((100vw - 1190px) / 2 + 24px)) !important;
    min-width: 0;
  }
  .gc .gc-hero .gc-hero-art {
    position: relative;
    min-height: 440px !important;
    height: auto !important;
    overflow: hidden;
  }
  .gc .gc-hero .gc-photo {
    position: absolute;
    inset: 0 !important;
    border-radius: 0 !important;
    background-image: linear-gradient(90deg, rgba(28,34,57,.08), rgba(28,34,57,.05)), url('img/hero-giftcard.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%) !important;
  }
  .gc .gc-hero .gc-photo::after { display: none !important; }
  .gc .gc-hero .gc-voucher { z-index: 2; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .gc .gc-hero .gc-copy { padding-left: 35px !important; padding-right: 22px !important; }
}
@media (max-width: 900px) {
  .gc .gc-hero .gc-hero-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .gc .gc-hero .gc-copy { padding: 42px 25px 35px !important; }
  .gc .gc-hero .gc-hero-art { min-height: 310px !important; height: 310px !important; width: 100%; max-width: none; }
  .gc .gc-hero .gc-photo {
    inset: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    background-image: url('img/hero-giftcard.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
  }
  .gc .gc-hero .gc-photo::after { display: none !important; }
}
@media (max-width: 600px) {
  .gc .gc-hero .gc-copy { padding: 32px 20px 30px !important; }
  .gc .gc-hero .gc-hero-art { min-height: 265px !important; height: 265px !important; }
}

/* ==========================================
   GIFT CARDS - DESTACAR CARDS DE LOS 3 PASOS
   ========================================== */


/* Cards de los tres pasos */
.gc-step-grid > *,
.gc-steps .gc-step-grid > * {
    background-color: #F0F1F6 !important;
    border: 1px solid #E0E2EC !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 20px rgba(48, 50, 77, 0.08) !important;
}

.gc .gc-field select,
.gc .gc-field select option {
    font-family: 'ClashDisplay-Variable', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #30344e !important;
}