/* Estilos propios de la pagina de tarifas, tomados de panaca.co.
   Solo se cargan en esta pagina. */


        #shopify-buyer-consent {
  margin-top: 1em;
  display: inline-block;
  width: 100%;
}

#shopify-buyer-consent.hidden {
  display: none;
}

#shopify-subscription-policy-button {
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  font-size: inherit;
  cursor: pointer;
}

#shopify-subscription-policy-button::before {
  box-shadow: none;
}

      

      .topbar {
        display: none;
      }
    

  

  /* Shadow DOM content does not prevent theme-wide :empty rules from matching the host. */
  shopify-agent:defined:empty,
  shopify-chat:defined:empty {
    display: grid;
  }

  :root {
    --shopify-chat-bg-color: #FFFFFF;
    --shopify-agent-bg-color: #FFFFFF;
    --shopify-chat-text-color: #000000;
    --shopify-agent-text-color: #000000;
    --shopify-chat-accent-bg-color: #000000;
    --shopify-agent-accent-bg-color: #000000;
    --shopify-chat-accent-text-color: #FFFFFF;
    --shopify-agent-accent-text-color: #FFFFFF;
    --shopify-chat-activator-offset: 20px;
    --shopify-agent-activator-offset: 20px;

    

    --shopify-chat-border-radius: 16px;
    --shopify-agent-border-radius: 16px;
  }


  .header__logo {
    position: relative;
    z-index: 9999;
    pointer-events: auto;
  }

  .header__logo-img {
    pointer-events: none;
  }


  #modal-validacion-cedula {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.7);
  }

  #modal-validacion-cedula.activo {
    display: flex;
  }

  .modal-cedula__contenido {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #ffffff;
    font-family: sans-serif;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  }

  .modal-cedula__contenido h2 {
    margin: 0 0 10px;
    font-size: 24px;
  }

  .modal-cedula__contenido p {
    margin: 0 0 20px;
    color: #444444;
    line-height: 1.4;
  }

  #input-cedula-empleado {
    width: 100%;
    margin-bottom: 15px;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #cccccc;
    border-radius: 6px;
    font-size: 16px;
  }

  #btn-validar-cedula {
    width: 100%;
    padding: 12px 18px;
    border: 0;
    border-radius: 6px;
    background: #000000;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
  }

  #btn-validar-cedula:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  #mensaje-validacion-cedula {
    min-height: 20px;
    margin-top: 15px;
    margin-bottom: 0;
    color: #d00000;
    font-size: 14px;
  }

  body.modal-cedula-abierto {
    overflow: hidden;
  }


        :root {
          /* Colores PANACA base */
          --color-red: #ea0b2a;
          --color-red-dark: #B5001F;
          --color-yellow: #F1C400;
          --color-yellow-dark: #D38F01;
          --color-orange: #E65301;
          --color-green: #629B3D;
          --color-green-dark: #166D35;
          --color-green-deep: #023D1B;
          --color-blue: #2F5289;
          --color-blue-dark: #102437;
          --color-cafe: #934932;
          --color-cafe-dark: #7F3A1F;
          --color-cafe-deep: #3D1C11;
          --color-coco: #AF8E6D;
          --color-black: #000000;
          --color-white: #ffffff;
          --color-text: #000000;
          --color-text-light: #666666;
          --color-text-muted: #999999;
          --topbar-height: 44px;
          --header-height: 70px;
          --color-cream: #FAF0E6;
          --color-cream-dark: #F5DEB3;
          --color-gray: #EBEAE7;
          --color-gray-light: #f5f5f5;

          /* Paleta Travesía Nocturna */
          --night-deepest: #060810;
          --night-deep: #0A0E1A;
          --night-mid: #111832;
          --night-blue: #1A2545;
          --night-surface: #1E2A4A;
          --night-glow: #2A3A6A;
          --gold: #D4A843;
          --gold-bright: #F1C400;
          --gold-pale: #F5E6B8;
          --gold-dim: #8B7335;
          --ember: #C44B1A;
          --ember-glow: #FF6B35;
          --starlight: rgba(255, 255, 255, 0.85);
          --stardust: rgba(255, 255, 255, 0.45);
          --mist: rgba(255, 255, 255, 0.08);

          /* Fuentes PANACA */
          --font-heading: 'Poleno';
          --font-body: 'Euclid';
          --font-body-bold: 'EuclidBold', 'Euclid';

          /* Espaciado */
          --spacing-xs: 0.5rem;
          --spacing-sm: 1rem;
          --spacing-md: 1.5rem;
          --spacing-lg: 2.5rem;
          --spacing-xl: 4rem;

          /* Sombras */
          --shadow-panaca: 0 0 10px 2px rgba(128, 128, 128, 0.5);
          --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
          --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.18);
          --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.22);
          --shadow-glow: 0 0 40px rgba(212, 168, 67, 0.15);
          --shadow-glow-strong: 0 0 60px rgba(212, 168, 67, 0.3);

          /* Transiciones */
          --transition-fast: 0.2s ease;
          --transition-normal: 0.3s ease;
          --transition-panaca: 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);

          /* Clip-paths PANACA */
          --clip-zigzag-bottom: polygon(0 0, 100% 0, 100% 100%, 95% 91%, 87% 98%, 81% 88%, 76% 96%, 70% 88%, 66% 96%, 61% 91%, 57% 98%, 51% 90%, 47% 96%, 42% 90%, 38% 96%, 33% 87%, 30% 98%, 23% 92%, 17% 94%, 13% 90%, 9% 97%, 4% 94%, 0 100%);
          --clip-zigzag-top: polygon(0% 100%, 0 18%, 6% 38%, 14% 12%, 20% 34%, 31% 8%, 40% 27%, 49% 12%, 56% 29%, 67% 10%, 75% 21%, 83% 0, 92% 24%, 100% 0, 100% 100%);
          --btn-path-1: polygon(100% 100%, 99% 83%, 100% 13%, 94% 0%, 9% 1%, 1% 9%, 0% 77%, 1% 85%, 0% 100%);
          --btn-path-2: polygon(100% 99%, 98% 0, 94% 5%, 0% 2%, 2% 100%, 25% 96%);
          --btn-path-3: polygon(100% 97%, 100% 1%, 70% 3%, 0% 2%, 1% 100%, 21% 97%, 73% 100%);
          --btn-path-4: polygon(100% 96%, 100% 1%, 15% 0, 0 2%, 1% 75%, 0 100%, 96% 100%);
        }

     /* ============================================
         CONTINENTES — VIAJE POR EL MUNDO (ESTILO PANACA)
      ============================================ */
      .continentes {
        position: relative;
        padding: 5rem 0;
        z-index: 2;
        background: linear-gradient(180deg, var(--night-deep) 0%, var(--night-mid) 50%, var(--night-deep) 100%);
      }

      /* Grid */
      .continentes__grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1.1rem;
        margin-top: 2rem;
      }

      /* Tarjeta tipo “recorte” PANACA */
      .continente-card{
        position: relative;
        overflow: hidden;
        aspect-ratio: 3/4;
        cursor: pointer;
        transition: transform .45s cubic-bezier(.25,.1,.25,1), filter .45s;
        border: none;
        border-radius: 0;
        background: rgba(10,14,22,0.55);
        clip-path: var(--btn-path-1);
      }

      /* Textura sutil tipo papel/madera + viñeta */
      .continente-card::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:1;
        pointer-events:none;
        background:
          radial-gradient(120% 90% at 50% 10%, rgba(255,255,255,.10), transparent 55%),
          radial-gradient(100% 80% at 50% 90%, rgba(0,0,0,.55), transparent 60%),
          repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, rgba(0,0,0,.02) 2px 4px);
        mix-blend-mode: overlay;
        opacity:.55;
      }

      /* Línea superior acento PANACA */
      .continente-card::after{
        content:"";
        position:absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        z-index:5;
        pointer-events:none;
        background: linear-gradient(90deg, #F1C400 0%, #ea0b2a 100%);
      }

      .continente-card:hover{
        transform: translateY(-10px) scale(1.03);
        filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(241,196,0,.1));
      }

      .continente-card__bg{
        position:absolute;
        inset:0;
        background-size: cover;
        background-position: center;
        transition: transform .7s ease, filter .7s ease;
        filter: saturate(1.05) contrast(1.05);
      }
      .continente-card:hover .continente-card__bg{
        transform: scale(1.10);
        filter: saturate(1.12) contrast(1.10);
      }

      /* Oscurece como “noche” + realza el foco */
      .continente-card__overlay{
        position:absolute;
        inset:0;
        z-index:1;
        background:
          linear-gradient(180deg, rgba(8,10,18,0.15) 0%, rgba(8,10,18,0.78) 70%, rgba(8,10,18,0.92) 100%);
        transition: background .5s ease, opacity .5s ease;
      }
      .continente-card:hover .continente-card__overlay{
        background:
          linear-gradient(180deg, rgba(8,10,18,0.08) 0%, rgba(8,10,18,0.72) 60%, rgba(8,10,18,0.90) 100%);
      }

      /* Contenido */
      .continente-card__content{
        position:absolute;
        left:0; right:0; bottom:0;
        padding: 1.15rem 1.15rem 1.25rem;
        z-index:3;
      }

      /* Icono como “sticker” */
      .continente-card__icon{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:44px;
        height:44px;
        border-radius: 0;
        background: rgba(241,196,0,.18);
        clip-path: var(--btn-path-2);
        font-size: 1.35rem;
        margin-bottom: .55rem;
      }
      .continente-card__icon img{max-width:44px; border-radius:0;}

      /* Nombre con cinta PANACA — clip-path organico */
      .continente-card__name{
        display:inline-block;
        font-family: var(--font-heading);
        font-size: 1.05rem;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: rgba(12,16,24,0.95);
        background: #F1C400;
        padding: .32rem .75rem .32rem .6rem;
        clip-path: var(--btn-path-4);
        text-shadow: none;
      }

        .section-title span {
            background: linear-gradient(90deg, var(--gold), var(--gold-bright));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .grupos-section .section-title span {
            color: var(--color-yellow) !important;
        }

      .badge-night {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: var(--color-yellow);
        color: var(--color-black);
        padding: 0.6rem 1.4rem;
        font-size: 0.85rem;
        font-weight: 700;
        margin-bottom: 1rem;
        border-radius: 0;
        font-family: var(--font-heading);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        clip-path: var(--btn-path-4);
      }


      /* Descripción (se muestra suave, tipo “susurro”) */
      .continente-card__desc{
        margin-top: .55rem;
        font-size: .82rem;
        color: rgba(255,255,255,0.74);
        line-height: 1.45;
        opacity: 0;
        transform: translateY(10px);
        transition: all .45s .12s;
      }
      .continente-card:hover .continente-card__desc{
        opacity: 1;
        transform: none;
      }

    .continente-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .continente-card__image {
        width: 100%;
        height: 320px;
        background-size: cover;
        background-position: center;
        border-radius: 20px;
      }

      .continente-card__icon-bottom {
        margin-top: -26px;
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        position: relative;
        z-index: 3;

        /* Sin fondo */
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35));
      }

      .continente-card__icon-bottom::before,
      .continente-card__icon-bottom::after {
        content: none;
      }

      .continente-card__text {
        margin-top: 20px;
        max-width: 260px;
      }

      .continente-card__text h3 {
        font-size: 1.2rem;
        margin-bottom: 8px;
        color: white;
      }

      .continente-card__text p {
        font-size: 0.9rem;
        opacity: 0.85;
        color: white;
      }
        /* ============================================
         AVENTURA - Parallax oscuro
      ============================================ */
          .aventura {
            position: relative;
            padding: 5rem 1.5rem;
            overflow: hidden;
            background: var(--color-cream, #F5EDE3);
          }

          .aventura__content {
            position: relative;
            z-index: 2;
            max-width: 1100px;
            margin: 0 auto;
            text-align: center;
          }

          .aventura__title {
            font-family: var(--font-heading);
            font-size: clamp(1.8rem, 3vw, 2.8rem);
            text-transform: uppercase;
            margin: 1rem 0;
            letter-spacing: 2px;
            color: var(--color-black);
          }

          .aventura__text {
            color: var(--color-text-muted);
            line-height: 1.7;
            font-size: 0.95rem;
            max-width: 600px;
            margin: 0 auto;
          }

          .aventura__note {
            color: var(--color-text-muted);
            font-size: 0.8rem;
            margin-top: 1.5rem;
          }

          .aventura__grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin-top: 2.5rem;
          }

          .aventura__card {
            background: #fff;
            border-radius: 0;
            overflow: hidden;
            text-align: left;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            clip-path: polygon(0% 3%, 97% 0%, 100% 96%, 2% 100%);
          }

          .aventura__card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
          }

          .aventura__card-media {
            position: relative;
            width: 100%;
            aspect-ratio: 4/3;
            overflow: hidden;
            background: #111;
            cursor: pointer;
          }

          .aventura__card-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
          }

          .aventura__card-play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 56px;
            height: 56px;
            background: rgba(200, 16, 46, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1.2rem;
            transition: all 0.3s;
            pointer-events: none;
            z-index: 2;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
          }

          .aventura__card-media.playing .aventura__card-play {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.5);
          }

          .aventura__card-tag {
            position: absolute;
            bottom: 10px;
            left: 10px;
            display: inline-block;
            background: var(--color-red);
            color: #fff;
            font-family: var(--font-heading);
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            padding: 5px 12px;
            clip-path: polygon(2% 8%, 98% 0%, 96% 92%, 0% 100%);
            z-index: 2;
          }

          .aventura__card-body {
            padding: 1.2rem 1.4rem 1.5rem;
          }

          .aventura__card-name {
            font-family: var(--font-heading);
            font-size: 1.15rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--color-black);
            margin-bottom: 6px;
          }

          .aventura__card-desc {
            font-size: 0.82rem;
            color: var(--color-text-muted);
            line-height: 1.5;
          }

          @media (max-width: 768px) {
            .aventura__grid {
              grid-template-columns: 1fr;
              gap: 1rem;
            }
          }

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

            .aventura__card {
              clip-path: polygon(0% 2%, 98% 0%, 100% 97%, 1% 100%);
            }
          }

  /* ── Video Modal Carousel ── */
        .vmodal {
          display: none;
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.95);
          z-index: 4000;
          justify-content: center;
          align-items: center;
          flex-direction: column;
        }

        .vmodal.active {
          display: flex;
        }

        .vmodal__close {
          position: absolute;
          top: 16px;
          right: 16px;
          width: 48px;
          height: 48px;
          background: rgba(255, 255, 255, 0.12);
          color: #fff;
          border: none;
          border-radius: 50%;
          font-size: 1.6rem;
          cursor: pointer;
          z-index: 10;
          transition: background 0.2s;
        }

        .vmodal__close:hover {
          background: rgba(255, 255, 255, 0.25);
        }

        .vmodal__video-wrap {
          position: relative;
          width: 90vw;
          max-width: 800px;
          aspect-ratio: 16/9;
          background: #000;
          border-radius: 10px;
          overflow: hidden;
        }

        .vmodal__video {
          width: 100%;
          height: 100%;
          object-fit: contain;
          display: block;
        }

        .vmodal__arrow {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 50px;
          height: 50px;
          background: rgba(255, 255, 255, 0.12);
          color: #fff;
          border: none;
          border-radius: 50%;
          font-size: 1.5rem;
          cursor: pointer;
          transition: background 0.2s;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 10;
        }

        .vmodal__arrow:hover {
          background: rgba(255, 255, 255, 0.25);
        }

        .vmodal__arrow--prev {
          left: max(16px, calc(50% - 430px));
        }

        .vmodal__arrow--next {
          right: max(16px, calc(50% - 430px));
        }

        .vmodal__info {
          text-align: center;
          margin-top: 1.2rem;
          color: #fff;
        }

        .vmodal__title {
          font-family: var(--font-heading);
          font-size: 1.3rem;
          text-transform: uppercase;
          letter-spacing: 1px;
        }

        .vmodal__desc {
          font-size: 0.85rem;
          opacity: 0.7;
          margin-top: 4px;
        }

        .vmodal__dots {
          display: flex;
          gap: 8px;
          justify-content: center;
          margin-top: 1rem;
        }

        .vmodal__dot {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.25);
          border: none;
          cursor: pointer;
          transition: all 0.3s;
          padding: 0;
        }

        .vmodal__dot.active {
          background: var(--color-red);
          transform: scale(1.3);
        }

        .vmodal__progress {
          position: absolute;
          bottom: 0;
          left: 0;
          height: 4px;
          background: var(--color-red);
          transition: width 0.3s linear;
          z-index: 5;
        }

        @media (max-width: 768px) {
          .vmodal__video-wrap {
            width: 96vw;
            border-radius: 6px;
          }

          .vmodal__arrow {
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
          }

          .vmodal__arrow--prev {
            left: 8px;
          }

          .vmodal__arrow--next {
            right: 8px;
          }

          .vmodal__close {
            top: 10px;
            right: 10px;
            width: 42px;
            height: 42px;
          }
        }