/* MIXED CSS PACK */
/* Template: sercaproducciones.com.ar/index.html */
/* Template mtime: 2026-03-06 13:04:55 */

/* external link (no embedded): https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Outfit:wght@500;600;700;800;900&display=swap */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css */
/* external link (no embedded): https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css */

/* ===== INLINE <style> BLOCK #1 ===== */
:root {
      /* Colores principales - respetando tu paleta */
      --violet: #6d28d9;
      --violet-dark: #f6c714;
      --violet-light: rgba(109, 40, 217, 0.08);
      --yellow: #facc15;
      --yellow-dark: #e6b310;
      --yellow-light: rgba(250, 204, 21, 0.1);
      
      /* Sistema de diseño mejorado */
      --text: #111827;
      --text-light: #6b7280;
      --soft: #f8fafc;
      --card: #ffffff;
      --border: rgba(17, 24, 39, 0.08);
      --border-hover: rgba(109, 40, 217, 0.2);
      --radius: 20px;
      --radius-lg: 30px;
      --radius-sm: 12px;
      --shadow: 0 20px 60px rgba(17, 24, 39, 0.08);
      --shadow-lg: 0 30px 80px rgba(109, 40, 217, 0.12);
      --shadow-yellow: 0 20px 50px rgba(250, 204, 21, 0.15);
      
      /* Gradientes premium */
      --gradient-violet: linear-gradient(135deg, var(--violet), var(--violet-dark));
      --gradient-yellow: linear-gradient(135deg, var(--yellow), var(--yellow-dark));
      --gradient-hero: radial-gradient(ellipse at 20% 30%, rgba(109, 40, 217, 0.15) 0%, transparent 60%),
                       radial-gradient(ellipse at 80% 20%, rgba(250, 204, 21, 0.15) 0%, transparent 60%);
      
      /* Transiciones */
      --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      --transition-fast: all 0.25s ease;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 100px;
    }

    body {
      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      color: var(--text);
      background: #fff;
      overflow-x: hidden;
      line-height: 1.6;
    }

    /* Tipografía mejorada */
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
      font-weight: 800;
      letter-spacing: -0.025em;
      line-height: 1.2;
    }

    /* NAVBAR PREMIUM */
    .navbar {
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid var(--border);
      padding: 1rem 0;
      box-shadow: 0 4px 20px rgba(17, 24, 39, 0.04);
      transition: var(--transition-smooth);
    }

    .navbar.scrolled {
      padding: 0.7rem 0;
      box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
    }

    .brand-container {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .brand-badge {
      width: 50px;
      height: 50px;
      border-radius: 16px;
      background: var(--gradient-violet);
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 950;
      font-size: 1.25rem;
      box-shadow: 0 12px 30px rgba(109, 40, 217, 0.25);
      transition: var(--transition-smooth);
      position: relative;
      overflow: hidden;
    }

    .brand-badge::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
      transform: translateX(-100%);
    }

    .brand-badge:hover::after {
      animation: shine 0.8s ease;
    }

    @keyframes shine {
      100% { transform: translateX(100%); }
    }

    .brand-text {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
    }

    .brand-name {
      font-weight: 980;
      font-size: 1.25rem;
      background: var(--gradient-violet);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      letter-spacing: -0.02em;
    }

    .brand-tagline {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--text-light);
    }

    .nav-link {
      font-weight: 650;
      color: var(--text);
      padding: 0.5rem 1rem;
      border-radius: 12px;
      transition: var(--transition-fast);
      position: relative;
    }

    .nav-link:hover {
      color: var(--violet);
      background: var(--violet-light);
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 1rem;
      right: 1rem;
      height: 3px;
      background: var(--gradient-violet);
      border-radius: 3px;
      transform: scaleX(0);
      transition: transform 0.3s ease;
    }

    .nav-link:hover::after {
      transform: scaleX(1);
    }

    .btn-cta {
      background: var(--gradient-yellow);
      border: 0;
      color: var(--text);
      font-weight: 750;
      border-radius: 50px;
      padding: 0.7rem 1.4rem;
      box-shadow: var(--shadow-yellow);
      transition: var(--transition-smooth);
      position: relative;
      overflow: hidden;
    }

    .btn-cta:hover {
      transform: translateY(-3px);
      box-shadow: 0 25px 40px rgba(250, 204, 21, 0.25);
      color: var(--text);
    }

    .btn-cta::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
      transform: translateX(-100%);
    }

    .btn-cta:hover::after {
      animation: shine 0.8s ease;
    }

    /* HERO SECTION - Premium */
    .hero {
      padding: 120px 0 100px;
      background: var(--gradient-hero), #fff;
      border-bottom: 1px solid var(--border);
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 800px;
      height: 800px;
      background: radial-gradient(circle, var(--violet-light) 0%, transparent 70%);
      z-index: 0;
      opacity: 0.5;
    }

    .hero-content {
      position: relative;
      z-index: 2;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 750;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.85rem;
      color: var(--violet);
      background: var(--violet-light);
      border: 1px solid rgba(109, 40, 217, 0.2);
      padding: 0.5rem 1rem;
      border-radius: 50px;
      margin-bottom: 1.5rem;
      transition: var(--transition-fast);
    }

    .eyebrow:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(109, 40, 217, 0.1);
    }

    .hero h1 {
      font-weight: 1000;
      letter-spacing: -0.03em;
      font-size: clamp(2.5rem, 5vw, 4rem);
      margin: 1rem 0 1.5rem;
      line-height: 1.1;
      background: linear-gradient(to right, var(--text), var(--violet));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-subtitle {
      color: var(--text-light);
      font-size: 1.2rem;
      max-width: 680px;
      margin-bottom: 2.5rem;
      font-weight: 450;
    }

    .hero-buttons {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 3rem;
    }

    .btn-primary-custom {
      background: var(--gradient-violet);
      border: 0;
      font-weight: 700;
      border-radius: 50px;
      padding: 0.85rem 2rem;
      color: white;
      box-shadow: 0 20px 40px rgba(109, 40, 217, 0.2);
      transition: var(--transition-smooth);
      position: relative;
      overflow: hidden;
    }

    .btn-primary-custom:hover {
      transform: translateY(-3px);
      box-shadow: 0 30px 50px rgba(109, 40, 217, 0.3);
      color: white;
    }

    .btn-primary-custom::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
      transform: translateX(-100%);
    }

    .btn-primary-custom:hover::before {
      animation: shine 0.8s ease;
    }

    .btn-outline-custom {
      border-radius: 50px;
      padding: 0.85rem 2rem;
      font-weight: 700;
      border: 2px solid var(--border);
      color: var(--text);
      background: white;
      transition: var(--transition-smooth);
    }

    .btn-outline-custom:hover {
      border-color: var(--violet);
      color: var(--violet);
      transform: translateY(-3px);
      box-shadow: 0 15px 30px rgba(109, 40, 217, 0.1);
    }

    .hero-img-container {
      position: relative;
      z-index: 2;
    }

    .hero-img {
      width: 100%;
      height: clamp(320px, 50vh, 520px);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: white;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      box-shadow: var(--shadow-lg);
      transform: perspective(1000px) rotateY(-5deg);
      transition: var(--transition-smooth);
    }

    .hero-img:hover {
      transform: perspective(1000px) rotateY(0deg);
    }

    .hero-img img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      transition: transform 0.6s ease;
    }

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

    .social-links {
      display: flex;
      gap: 1.5rem;
      margin-top: 2rem;
    }

    .social-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 700;
      color: var(--violet);
      text-decoration: none;
      padding: 0.5rem 1rem;
      border-radius: 12px;
      transition: var(--transition-fast);
      background: var(--violet-light);
    }

    .social-link:hover {
      background: var(--violet);
      color: white;
      transform: translateY(-2px);
    }

    /* SECTIONS */
    .section {
      padding: 100px 0;
      position: relative;
    }

    .section.soft {
      background: var(--soft);
      position: relative;
    }

    .section.soft::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--border), transparent);
    }

    .section-title {
      font-weight: 1000;
      letter-spacing: -0.02em;
      font-size: clamp(2rem, 3.5vw, 3.2rem);
      margin: 1.5rem 0 1rem;
      background: linear-gradient(to right, var(--text), var(--violet));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .section-subtitle {
      color: var(--text-light);
      max-width: 800px;
      margin: 0 auto 3rem;
      font-size: 1.1rem;
      line-height: 1.7;
    }

    /* CARDS PREMIUM */
    .pro-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 2rem;
      height: 100%;
      transition: var(--transition-smooth);
      position: relative;
      overflow: hidden;
    }

    .pro-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--gradient-violet);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

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

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

    .icon-pill {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: var(--violet-light);
      border: 1px solid rgba(109, 40, 217, 0.2);
      color: var(--violet);
      font-size: 1.5rem;
      flex: 0 0 auto;
      transition: var(--transition-smooth);
    }

    .pro-card:hover .icon-pill {
      background: var(--gradient-violet);
      color: white;
      transform: scale(1.1) rotate(5deg);
    }

    .mini-muted {
      color: var(--text-light);
      line-height: 1.7;
    }

    /* TABS MEJORADOS */
    .nav-pills {
      gap: 1rem;
      margin-bottom: 3rem;
    }

    .nav-pills .nav-link {
      border-radius: 50px;
      font-weight: 700;
      padding: 0.8rem 1.5rem;
      color: var(--text);
      border: 2px solid var(--border);
      background: white;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      transition: var(--transition-smooth);
    }

    .nav-pills .nav-link:hover {
      border-color: var(--violet);
      transform: translateY(-2px);
    }

    .nav-pills .nav-link.active {
      background: var(--gradient-violet);
      border-color: transparent;
      color: white;
      box-shadow: 0 20px 40px rgba(109, 40, 217, 0.2);
      transform: translateY(-2px);
    }

    /* ACCORDION PREMIUM */
    .accordion-item {
      border: 1px solid var(--border);
      border-radius: var(--radius) !important;
      margin-bottom: 1rem;
      overflow: hidden;
      background: white;
    }

    .accordion-button {
      font-weight: 700;
      padding: 1.5rem;
      border-radius: var(--radius) !important;
      background: white;
      color: var(--text);
      border: none;
      transition: var(--transition-fast);
    }

    .accordion-button:not(.collapsed) {
      background: var(--violet-light);
      color: var(--violet);
      box-shadow: none;
    }

    .accordion-button:focus {
      box-shadow: 0 0 0 0.25rem rgba(109, 40, 217, 0.15);
      border-color: var(--violet);
    }

    .accordion-body {
      padding: 1.5rem;
      color: var(--text-light);
      line-height: 1.7;
    }

    /* CONTACT FORM PREMIUM */
    .contact-wrap {
      background: white;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      padding: 2.5rem;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .contact-wrap::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--gradient-violet);
    }

    .form-control, .form-select {
      border-radius: var(--radius-sm);
      border: 2px solid var(--border);
      padding: 0.9rem 1.2rem;
      font-size: 1rem;
      transition: var(--transition-fast);
      background: white;
    }

    .form-control:focus, .form-select:focus {
      border-color: var(--violet);
      box-shadow: 0 0 0 0.25rem rgba(109, 40, 217, 0.15);
      transform: translateY(-2px);
    }

    .form-label {
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: var(--text);
    }

    /* FOOTER PREMIUM */
    footer {
      background: linear-gradient(135deg, #0b0b12, #1a1a2e);
      color: rgba(255, 255, 255, 0.9);
      padding: 80px 0 40px;
      position: relative;
      overflow: hidden;
    }

    footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--gradient-violet);
    }

    .footer-badge {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 1000;
      font-size: 1.3rem;
      margin-bottom: 1.5rem;
    }

    .footer-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--yellow);
      box-shadow: 0 0 0 8px rgba(250, 204, 21, 0.15);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 8px rgba(250, 204, 21, 0.15); }
      50% { box-shadow: 0 0 0 12px rgba(250, 204, 21, 0.1); }
    }

    footer a {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      transition: var(--transition-fast);
      padding: 0.3rem 0;
      display: inline-block;
      position: relative;
    }

    footer a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--yellow);
      transition: width 0.3s ease;
    }

    footer a:hover {
      color: var(--yellow);
      transform: translateX(5px);
    }

    footer a:hover::after {
      width: 100%;
    }

    .footer-social a {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.05);
      margin-bottom: 0.5rem;
    }

    /* GALERÍA (MANTENIENDO TU CÓDIGO) */
    .gal-gallery .carousel { max-width: 980px; margin-inline: auto; position: relative }
    .gal-frame {
      height: clamp(240px, 50vh, 460px);
      background: #fff; border-radius: 16px; overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.15);
      display: flex; align-items: center; justify-content: center; padding: 8px;
      transition: var(--transition-smooth);
    }
    .gal-frame:hover {
      transform: translateY(-5px);
      box-shadow: 0 30px 80px rgba(0,0,0,0.2);
    }
    .gal-img {
      width: auto !important; max-width: 100%;
      height: auto !important; max-height: 100%;
      object-fit: contain !important; object-position: center; display: block; cursor: zoom-in;
      transition: transform 0.6s ease;
    }
    .gal-frame:hover .gal-img {
      transform: scale(1.05);
    }
    .gal-gallery .carousel-control-prev,
    .gal-gallery .carousel-control-next {
      z-index: 20; width: 50px; height: 50px; top: 50%; transform: translateY(-50%);
      opacity: 1; background: var(--gradient-violet); border-radius: 50%; margin: 0 12px;
      transition: var(--transition-smooth);
    }
    .gal-gallery .carousel-control-prev:hover,
    .gal-gallery .carousel-control-next:hover {
      transform: translateY(-50%) scale(1.1);
    }
    .gal-gallery .carousel-control-prev { left: 0 }
    .gal-gallery .carousel-control-next { right: 0 }
    .gal-gallery .gal-ctrl-icon { width: 2.6rem; height: 2.6rem; background-size: 60% 60% }
    .gal-gallery .carousel-indicators { z-index: 10; bottom: -50px }
    .gal-gallery .carousel-indicators button {
      width: 10px; height: 10px; border-radius: 50%;
      background: rgba(0,0,0,0.5); border: none; transition: var(--transition-fast);
    }
    .gal-gallery .carousel-indicators button:hover { background: var(--violet); }
    .gal-gallery .carousel-indicators button.active { background: var(--violet); }
    .gal-gallery { padding-bottom: 56px }

    #galLightbox .modal-content { background: #000 }
    #galLightboxImg { max-height: 86vh; width: 100%; height: auto; object-fit: contain; background: #000 }
    .gal-lightbox-nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      border: 0; width: 44px; height: 44px; border-radius: 999px;
      background: rgba(255,255,255,.18); color: #fff; font-size: 30px; line-height: 44px; text-align: center; z-index: 5; cursor: pointer;
      transition: var(--transition-fast);
    }
    .gal-lightbox-nav:hover { background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.1); }
    .gal-lightbox-nav.gal-prev { left: 20px }
    .gal-lightbox-nav.gal-next { right: 20px }
    
    @media (max-width: 575.98px) {
      .gal-frame { height: clamp(200px, 40vh, 360px) }
    }

    /* AGENDA SECTION */
    .agenda-img {
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      transition: var(--transition-smooth);
    }

    .agenda-img:hover {
      transform: translateY(-5px);
    }

    .agenda-img img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.6s ease;
    }

    .agenda-img:hover img {
      transform: scale(1.03);
    }

    /* ANIMACIONES */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .fade-in {
      animation: fadeInUp 0.8s ease forwards;
    }

    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.2s; }
    .delay-3 { animation-delay: 0.3s; }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      .section {
        padding: 70px 0;
      }
      
      .hero {
        padding: 100px 0 70px;
      }
      
      .hero h1 {
        font-size: 2.5rem;
      }
      
      .nav-pills {
        flex-wrap: wrap;
        justify-content: center;
      }
      
      .btn-primary-custom,
      .btn-outline-custom {
        padding: 0.7rem 1.5rem;
      }
    }

    /* SCROLLBAR PERSONALIZADA */
    ::-webkit-scrollbar {
      width: 10px;
    }

    ::-webkit-scrollbar-track {
      background: var(--soft);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--gradient-violet);
      border-radius: 5px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--violet-dark);
    }

    /* DECORACIONES */
    .floating-shape {
      position: absolute;
      border-radius: 50%;
      background: var(--violet-light);
      filter: blur(40px);
      z-index: -1;
      animation: float 20s infinite linear;
    }

    @keyframes float {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      33% { transform: translate(30px, -30px) rotate(120deg); }
      66% { transform: translate(-20px, 20px) rotate(240deg); }
    }

    .shape-1 {
      width: 300px;
      height: 300px;
      top: 10%;
      left: 5%;
      background: var(--violet-light);
    }

    .shape-2 {
      width: 200px;
      height: 200px;
      bottom: 20%;
      right: 10%;
      background: var(--yellow-light);
      animation-delay: -5s;
    }

    /* BADGES */
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0.4rem 0.8rem;
      border-radius: 50px;
      font-size: 0.85rem;
      font-weight: 700;
    }

    .badge-violet {
      background: var(--violet-light);
      color: var(--violet);
    }

    .badge-yellow {
      background: var(--yellow-light);
      color: #7a5b00;
    }

    /* SEPARADORES */
    .section-divider {
      height: 4px;
      width: 80px;
      background: var(--gradient-violet);
      margin: 2rem auto;
      border-radius: 2px;
    }
  

/* =========================
   FIX MOBILE OVERFLOW / COLAPSE
   - Evita scroll horizontal (hamburguesa fuera de pantalla)
   - Social links del hero: wrap en mobile (TikTok/IG/FB)
   ========================= */
html, body { max-width: 100%; overflow-x: hidden; }

/* Navbar brand: permitir achique sin empujar el toggler */
.brand-container { min-width: 0; }
.brand-text { min-width: 0; }
@media (max-width: 420px){
  .brand-container{ gap:10px; }
  .brand-badge{ width:44px; height:44px; }
  .brand-name{ font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 180px; }
  .brand-tagline{ display:none; }
}

/* Social links hero: que no se corten en phone */
.social-links{ flex-wrap: wrap; }
.social-link{ max-width:100%; }
@media (max-width: 576px){
  .social-links{ gap:.75rem; }
  .social-link{
    flex: 1 1 calc(50% - .75rem);
    justify-content:center;
  }
}
@media (max-width: 420px){
  .social-link{ flex: 1 1 100%; }
}
/* ===== Viaje destacado teaser ===== */
.viaje-teaser-card{
  background:
    radial-gradient(circle at 20% 20%, rgba(250,204,21,.12), transparent 35%),
    radial-gradient(circle at 80% 25%, rgba(109,40,217,.18), transparent 35%),
    radial-gradient(circle at 30% 80%, rgba(109,40,217,.10), transparent 30%),
    linear-gradient(135deg, #0b1220 0%, #0f1d35 45%, #12233f 100%);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.viaje-teaser-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(250,204,21,.18), transparent 18%),
    radial-gradient(circle at bottom right, rgba(109,40,217,.22), transparent 22%);
  pointer-events:none;
}

.viaje-teaser-inner{
  position:relative;
  z-index:2;
}

.viaje-logo{
  width: 110px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.35));
}

.viaje-teaser-title{
  color: var(--yellow);
  font-weight: 900;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -.02em;
  text-shadow: 0 8px 20px rgba(0,0,0,.28);
}

.viaje-teaser-card .mini-muted{
  color: rgba(255,255,255,.86);
}

.viaje-teaser-boxes{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.viaje-pill{
  border: 2px solid rgba(255,255,255,.7);
  color: #fff;
  border-radius: 999px;
  padding: .9rem 1.1rem;
  text-align: center;
  font-weight: 800;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}

.viaje-teaser-card .btn-outline-custom{
  background: transparent;
  border-color: rgba(255,255,255,.5);
  color: #fff;
}

.viaje-teaser-card .btn-outline-custom:hover{
  background: rgba(255,255,255,.08);
  border-color: #fff;
  color: #fff;
}

@media (max-width: 767.98px){
  .viaje-logo{
    width: 90px;
  }

  .viaje-pill{
    font-size: .95rem;
    padding: .85rem 1rem;
  }
}

/* ===== INLINE <style> BLOCK #2 ===== */
.comp-imgbox{
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
    }
  
    .comp-img{
      width:100%;
      height:auto;
      max-height:380px;
      object-fit:contain;
    }
  
    @media (max-width:991px){
      .comp-img{ max-height:320px; }
    }
  
    @media (max-width:575px){
      .comp-img{ max-height:260px; }
    }

/* ===== INLINE <style> BLOCK #3 ===== */
/* Imagen competencia: completa (contain) pero con altura máxima responsiva */
  .comp-imgbox{
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .comp-img{
    width:100%;
    height:auto;
    max-height: 380px;          /* desktop */
    object-fit: contain;        /* NO corta */
    object-position: center;
    display:block;
  }

  @media (max-width: 991.98px){
    .comp-img{ max-height: 320px; }
  }
  @media (max-width: 575.98px){
    .comp-img{ max-height: 260px; }
  }

/* ===== INLINE <style> BLOCK #4 ===== */
/* Stack flotante */
  .float-stack{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:9999;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
    font-family:inherit;
  }

  .float-btn{
    width:54px;
    height:54px;
    border-radius:999px;
    border:none;
    display:grid;
    place-items:center;
    cursor:pointer;
    text-decoration:none;
    color:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,.22);
    transition:transform .25s, box-shadow .25s, filter .25s;
    font-size:22px;
  }
  .float-btn:hover{
    transform:translateY(-3px) scale(1.04);
    box-shadow:0 18px 44px rgba(0,0,0,.28);
    filter:saturate(1.1);
  }

  /* Colores redes */
  .float-btn.wa{ background:linear-gradient(135deg,#25D366,#128C7E); }
  .float-btn.insta{ background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4); }
  .float-btn.fb{ background:linear-gradient(135deg,#1877f2,#0f5cc5); }
  .float-btn.tiktok{ background:linear-gradient(135deg,#111,#333); }

  /* Card WhatsApp */
  .wa-card{
    position:absolute;
    right:0;
    bottom:72px;
    width:min(360px,92vw);
    background:#fff;
    border-radius:18px;
    border:1px solid rgba(0,0,0,.10);
    box-shadow:0 18px 60px rgba(0,0,0,.25);
    overflow:hidden;
    transform:translateY(10px);
    opacity:0;
    transition:.25s ease;
  }
  .wa-card[aria-modal="true"]{ transform:none; opacity:1; }

  .wa-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    background:linear-gradient(135deg,#6d28d9,#4c1d95);
    color:#fff;
  }
  .wa-avatar{
    width:40px;height:40px;border-radius:12px;
    background:rgba(255,255,255,.18);
    display:grid;place-items:center;
    font-weight:900;
  }
  .wa-title{ font-weight:900; }
  .wa-status{ font-size:.85rem; opacity:.9; }

  .wa-close{
    margin-left:auto;
    border:none;
    background:transparent;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    line-height:1;
  }

  .wa-body{
    padding:14px;
    max-height:40vh;
    overflow:auto;
    background:#f6f7fb;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .wa-bubble{
    max-width:88%;
    padding:10px 12px;
    border-radius:14px;
    font-size:.95rem;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
  }
  .wa-bot{
    background:#fff;
    border:1px solid rgba(0,0,0,.10);
    align-self:flex-start;
  }
  .wa-user{
    background:rgba(109,40,217,.10);
    border:1px solid rgba(109,40,217,.22);
    align-self:flex-end;
  }

  .wa-compose{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    padding:10px;
    border-top:1px solid rgba(0,0,0,.10);
    background:#fff;
  }
  .wa-compose textarea{
    resize:none;
    border-radius:12px;
    padding:10px;
    border:1px solid rgba(0,0,0,.12);
    font-family:inherit;
    outline:none;
  }
  .wa-send{
    background:linear-gradient(135deg,#6d28d9,#4c1d95);
    color:#fff;
    border:none;
    border-radius:12px;
    padding:0 16px;
    cursor:pointer;
  }
  .wa-send:hover{ filter:brightness(1.05); }

  @media (max-width:480px){
    .float-stack{ right:14px; bottom:14px; }
    .wa-card{ width:calc(100vw - 24px); }
  }