:root{
      --orange-600:#f46e23;
      --orange-400:#f4b615;
      --text-900:#1f1f1f;
      --text-600:#6b7280;
      --bg-cream:#fff8f0;
    }

    html,body{height:100%;}
    body{
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color:var(--text-900);
      background: var(--bg-cream);
      overflow-x: hidden;
    }

    /* NAV */
    .navbar{
      transition: transform .28s ease, box-shadow .2s ease, background-color .2s ease;
      background: rgba(255,255,255,.6);
      backdrop-filter: blur(8px);
    }
    .navbar.scrolled{ box-shadow: 0 8px 24px rgba(0,0,0,.06); background:#fff; }
    .navbar.hide{ transform: translateY(-100%); }
    .nav-link{ font-weight: 500; color:#3c3c3c; }
    .nav-link:hover{ color: var(--orange-600); }

    /* HERO */
    .hero{
      position: relative;
      padding-top: 120px;
      padding-bottom: 72px;
      overflow: clip;
      background:
        radial-gradient(60vw 60vw at 85% 25%, rgba(244,110,35,.14), transparent 60%),
        radial-gradient(50vw 50vw at 8% 75%, rgba(244,182,21,.15), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.8));
      will-change: transform;
    }
    .hero::before{
      content:"";
      position:absolute; inset:0;
      background-image:
        linear-gradient(to right, rgba(0,0,0,.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,.04) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.1) 40%, transparent);
      pointer-events:none;
    }
    .blob, .blob-2{
      position:absolute; width:380px; height:380px; border-radius:50%;
      filter: blur(60px); opacity:.25; pointer-events:none;
      transform: translateZ(0);
    }
    .blob{ right: -120px; top: 60px; background: var(--orange-600);}
    .blob-2{ left: -120px; bottom: -60px; background: var(--orange-400);}

    .hero-badge{
      display:inline-flex; align-items:center; gap:.5rem;
      background: #fff; border:1px solid rgba(0,0,0,.08);
      padding:.5rem .85rem; border-radius: 999px;
      box-shadow: 0 2px 8px rgba(0,0,0,.06);
      transform: translateZ(0);
    }

    .hero h1{
      font-size: clamp(36px,6.2vw,72px);
      line-height: 1.04; letter-spacing: -.02em; margin-bottom: .75rem;
    }
    .accent{
      background: linear-gradient(90deg, var(--orange-600), #ff7f2e 40%, var(--orange-400) 80%);
      -webkit-background-clip: text; background-clip:text; color: transparent;
      background-size: 200% 100%;
      animation: accentSlide 6s ease-in-out infinite alternate;
    }
    @keyframes accentSlide { to { background-position: 100% 0; } }

    .lead{ color:var(--text-600); max-width:780px; margin-inline:auto; }
    .cta-primary{ background: var(--orange-600); border: none; position: relative; overflow: hidden; }
    .cta-primary:hover{ background:#df5f17; transform: translateY(-1px); }
    .cta-primary:active{ transform: translateY(0); }
    .cta-ghost{ background:#fff; border:1px solid rgba(0,0,0,.1); }

    /* Ripple effect container */
    .btn{ position: relative; }

    /* STATS */
    .stats .card{
      border: none; border-radius: 18px;
      box-shadow: 0 10px 28px rgba(0,0,0,.06);
      transform: translateY(8px);
    }
    .stat-value{ font-size: clamp(28px,4vw,40px); font-weight:700; color:var(--orange-600); }
    .stat-label{ color:#808192; font-weight:600; }

    /* LOCALES */
    .local-card{
      border:1px solid rgba(0,0,0,.06);
      border-radius:16px; overflow: hidden;
      transition: transform .2s ease, box-shadow .2s ease;
      transform-style: preserve-3d; perspective: 800px;
      will-change: transform;
    }
    .local-card:hover{
      box-shadow: 0 20px 40px rgba(0,0,0,.12);
    }
    .tag{
      background:#fff; border:1px solid rgba(0,0,0,.08); border-radius: 999px;
      padding:.25rem .6rem; font-size:.85rem;
    }

    /* FOOTER */
    footer{ background:#0f0f0f; color:#e5e7eb; }
    footer a{ color:#e5e7eb; text-decoration:none;}
    footer a:hover{ color:#fff; }

    /* Scroll Reveal */
    .reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.show{ opacity:1; transform: none; }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .accent{ animation: none; }
      .navbar, .local-card, .reveal{ transition: none !important; }
      .cta-primary:hover{ transform: none; }
    }

    /* GALERÍA: suavizado + Ken Burns + caption legible */
.carousel-wrapper { box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.carousel-kenburns .carousel-item img{
  transform-origin: center;
  will-change: transform, filter;
  filter: saturate(1.05) contrast(1.03);
}
.carousel-kenburns .carousel-item.active img{
  animation: kenburns 6.5s ease-in-out forwards;
}
@keyframes kenburns{
  from { transform: scale(1.04); }
  to   { transform: scale(1.12); }
}
.carousel-caption{
  text-shadow: 0 6px 22px rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));
  border-radius: 12px;
  padding: .75rem 1rem;
  display: inline-block;
}
.carousel-indicators [data-bs-target]{
  width: 12px; height: 12px; border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
}
.carousel-indicators .active{ background-color:#000000; }




/* Vignette sutil en bordes para dirigir la mirada al centro */
.vignette{
  position:absolute; inset:0; z-index:3;
  pointer-events:none;
  background:#000;                   /* color base para la máscara */
  -webkit-mask-image: radial-gradient(80% 65% at 50% 60%, 
                         rgba(0,0,0,0) 55%, rgba(0,0,0,1) 100%);
  mask-image: radial-gradient(80% 65% at 50% 60%, 
                rgba(0,0,0,0) 55%, rgba(0,0,0,1) 100%);
  opacity:.6;
  mix-blend-mode: normal;            /* ya no multiplicamos */
}


/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .carousel-focus .carousel-item,
  .carousel-focus .carousel-item img{ transition:none !important; transform:none !important; filter:none !important; }
  .vignette{ opacity:.4; }
}

@media (max-width: 576px){
  .carousel-focus .carousel-item:not(.active) img{ filter: blur(1.1px) saturate(0.99) contrast(0.99); }
  .vignette{ opacity:.5; }
}

/* Contacto: estados y utilidades */
#contacto .form-text{ color: var(--text-600); }
#contacto .btn[disabled]{ opacity:.8; cursor:not-allowed; }
#contacto .submit-loading.d-none{ display:none!important; }

/* Mejora foco accesible */
.form-control:focus, .form-select:focus, .form-check-input:focus{
  box-shadow: 0 0 0 .25rem rgba(244,110,35,.15); /* naranja suave */
  border-color: var(--orange-600);
}

/* Chips de contacto */
.contact-chips .chip{
  display: inline-flex; align-items: center; gap:.45rem;
  padding:.55rem .9rem; border-radius: 999px; font-weight: 600;
  border:1px solid rgba(0,0,0,.08); background:#fff; color:#1f1f1f;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.contact-chips .chip i{ font-size: 1rem; line-height: 0; }

/* variantes con identidad de marca */
.chip-call:hover{ border-color: rgba(244,110,35,.35); box-shadow:0 10px 22px rgba(244,110,35,.18); transform: translateY(-1px); }
.chip-wa{ color:#0a7c12; border-color: rgba(10,124,18,.18); }
.chip-wa:hover{ background: rgba(10,124,18,.06); transform: translateY(-1px); }
.chip-mail:hover{ border-color: rgba(0,0,0,.18); transform: translateY(-1px); }
.chip-copy{ cursor: pointer; }
.chip-copy:hover{ background: rgba(0,0,0,.03); transform: translateY(-1px); }

/* Separador puntito en la línea secundaria */
.contact-chips .dot{
  width:6px; height:6px; border-radius:50%; background: rgba(0,0,0,.2); display:inline-block;
}

/* Modo oscuro suave (si activas futuros temas) */
@media (prefers-color-scheme: dark){
  .contact-chips .chip{ background:#111; color:#eaeaea; border-color: rgba(255,255,255,.08); }
  .contact-chips .dot{ background: rgba(255,255,255,.3); }
}

/* Footer nuevo */
.site-footer{
  background:#0f0f0f; color:#e5e7eb;
  border-top: 1px solid rgba(255,255,255,.06);
}
.site-footer a{ text-decoration:none; }

.text-footer-muted{ color:#b3b7c0; }

.footer-links li+li{ margin-top:.35rem; }
.footer-links a{
  color:#e5e7eb; opacity:.9;
  transition: opacity .18s ease, color .18s ease;
}
.footer-links a:hover{
  color:#fff; opacity:1;
}

/* Botones sociales */
.btn-footer-icon{
  --size: 40px;
  width:var(--size); height:var(--size);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:#e5e7eb; border-radius:12px; 
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn-footer-icon:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}

/* Libro de Reclamaciones */
.libro-link{
  color:#fff; font-weight:600;
}
.libro-icon{
  width:38px; height:38px; border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(2px);
}
.libro-icon i{ font-size: 1.1rem; }

/* Variante con color de marca al pasar */
.libro-link:hover .libro-icon{
  border-color: rgba(244,110,35,.65);
  box-shadow: 0 0 0 3px rgba(244,110,35,.18);
}
.libro-link:hover{
  color: var(--orange-600);
}

.footer-hr{
  border:0; height:1px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.18), rgba(255,255,255,.04));
}

/* Responsive tweaks */
@media (max-width: 576px){
  .btn-footer-icon{ --size: 36px; border-radius:10px; }
}

/* Aumenta el tamaño del contenedor y del ícono */
.libro-icon{
  width: 46px; height: 46px;      /* antes 38px */
  border-radius: 12px;
}
.libro-icon i{
  font-size: 1.6rem;              /* ajusta a gusto */
  line-height: 1;
}

/* Teléfono: grid con espacio, sin el estilo “pegado” del input-group */
.phone-grid{
  display: grid;
  grid-template-columns: 1fr 2fr;   /* código / número */
  gap: .6rem;                        /* separación visible */
}

/* Altura y look consistente */
.phone-grid .form-select,
.phone-grid .form-control{
  height: 48px;                      /* sube si quieres 52/56px */
  border-radius: 12px;
}

/* Placeholder y texto más legible */
.phone-grid .form-control::placeholder{ color:#9aa3af; }

/* En móviles: apila vertical con buen gap */
@media (max-width: 576px){
  .phone-grid{ grid-template-columns: 1fr; }
}

/* ancho completo y look elevado */
.iti { width: 100%; }
#phone{
  height: 48px;
  border-radius: 12px;
}

/* botón de bandera más “pill” */
.iti__selected-flag{
  border-radius: 10px;
  padding: 0 10px;
}

/* corrige hover/focus sutil */
.iti__country-list{ border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.iti{ width:100%; }
#phone{ height:48px; border-radius:12px; }
.iti__selected-flag{ border-radius:10px; padding:0 10px; }
.iti__country-list{ border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.12); }

/* intl-tel-input: asegúrate que se vea y ocupe todo el ancho */
.iti { width: 100%; }
.iti--allow-dropdown .iti__flag-container { z-index: 20; }
.iti__country-list { z-index: 3000; }        /* encima de modals/containers */
.iti__country-list--dropup { bottom: 100%; } /* por si estás cerca del footer */


/* ========= Estilos “bonitos” para Teléfono con banderas ========= */

/* Contenedor: que se sienta premium */
#leadForm .input-group {
  border-radius: 14px;
  overflow: hidden;                   /* redondeado real en ambos campos */
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Select de país (banderas) */
#country_select {
  min-width: 190px;                   /* buena base en desktop */
  max-width: 260px;
  font-size: 0.95rem;
  padding-right: 2.25rem;             /* espacio para caret */
  border: 1px solid #e7e7e7;
  border-right: none;                  /* se une al input */
  background:
    linear-gradient(180deg, #ffffff, #fafafa); /* sutil */
}
#country_select:focus {
  outline: none;
  border-color: #f46e23;
  box-shadow: inset 0 0 0 1px #f46e23, 0 0 0 .25rem rgba(244,110,35,.18);
}
#country_select.is-invalid { border-color: #dc3545 !important; }

/* Input del número local */
#telefono_local {
  font-size: 1rem;
  border: 1px solid #e7e7e7;
  border-left: none;                   /* se une al select */
  background-color: #fff;
}
#telefono_local:focus {
  border-color: #f46e23;
  box-shadow: inset 0 0 0 1px #f46e23, 0 0 0 .25rem rgba(244,110,35,.18);
}

/* Altura y radio iguales para ambos */
#country_select,
#telefono_local {
  height: 40px;
  line-height: 40px;
}

/* Placeholder más suave */
#telefono_local::placeholder {
  color: #9aa1a7;
}

/* Estados de validación (verde de tu paleta) */
#telefono_local.is-valid {
  border-color: #66c336 !important;
  box-shadow: inset 0 0 0 1px #66c33633;
}

/* Ayuda y feedback alineados */
#telHelp {
  margin-top: .35rem;
  color: #6b7280;                      /* gris nice */
}
#telInvalidFeedback {
  margin-top: .25rem;
}

/* Hover sutil */
#country_select:hover,
#telefono_local:hover {
  background-color: #fff;
  border-color: #dedede;
}

/* Responsive: en móviles el select no debe ocupar medio ancho */
@media (max-width: 576px) {
  #country_select { min-width: 140px; max-width: 46%; }
  #telefono_local { min-width: 54%; }
}

  

/* Botón de WhatsApp (si lo tienes) alinear con el bloque */
#waLink.btn {
  border-radius: 999px;
  padding-inline: 1.1rem;
}

/* Pequeño ajuste al caret del select en algunos navegadores */
#country_select {
  background-position: right .9rem center;
  background-repeat: no-repeat;
}


.tour-container {
  background: red !important;
  padding: 40px !important;
}

.tour-container iframe {
  border: 10px solid blue !important;
}