html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Inter', sans-serif; transition: background .3s, color .3s; }

/* ---- Modo oscuro ---- */
body.dark-mode { background:#0f172a; color:#e2e8f0; }
body.dark-mode header.scrolled { background-color:rgba(15,23,42,.97) !important; }
body.dark-mode .bg-white { background-color:#1e293b !important; }
body.dark-mode .bg-slate-50 { background-color:#0f172a !important; }
body.dark-mode .bg-teal-50 { background-color:#0f2e2a !important; }
body.dark-mode .text-slate-800,.dark-mode .text-slate-900 { color:#f1f5f9 !important; }
body.dark-mode .text-slate-500,.dark-mode .text-slate-600 { color:#94a3b8 !important; }
body.dark-mode .border-slate-100,.dark-mode .border-slate-200 { border-color:#334155 !important; }
body.dark-mode .shadow-sm { box-shadow:0 1px 8px rgba(0,0,0,.5) !important; }

/* ---- Fade-in ---- */
.fade-in { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ---- Blog & cards ---- */
.blog-card { transition:transform .3s, box-shadow .3s; }
.blog-card:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.1); }
.about-card:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.1); }
.service-card { transition:box-shadow .3s; }
.service-card:hover { box-shadow:0 20px 40px rgba(0,0,0,.09); }

/* ---- Price badge ---- */
.price-badge { transition:all .3s ease; }
.price-badge.animar { transform:scale(1.1); background:#065f46 !important; }

/* ---- FAQ ---- */
.faq-answer { max-height:0; overflow:hidden; transition:max-height .35s ease, margin .35s ease; }
.faq-answer.open { max-height:220px; margin-bottom:16px; }
.faq-icon { display:inline-block; transition:transform .3s; }
.faq-item.open .faq-icon { transform:rotate(45deg); }

/* ---- Team thumb ---- */
.team-thumb { transition:border-color .2s; cursor:pointer; }

/* ---- Range ---- */
input[type=range] { accent-color:#0d9488; }

/* ---- Buscador ---- */
/* ---- Buscador Transparente (Estilo para el Input) ---- */

.buscador-transparente {
  background-color: rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(0, 0, 0, 0.3) !important;
  color: #fdfdfd !important;
}

/* Color del texto de ejemplo (Placeholder) */
.buscador-transparente::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ---- Buscador (Lista de Sugerencias) ---- */
#sugerencias {
  position: absolute; 
  top: 100%; 
  left: 0; 
  right: 0;
  margin-top: 0.25rem; /* Separación sutil del input redondeado */
  background: #ffffff; 
  border: 1px solid #e2e2f0;
  border-radius: .75rem; 
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  z-index: 9999; 
  max-height: 280px; 
  overflow-y: auto;
  padding: 0; /* Limpia espacios internos no deseados de la lista */
}

/* Modo oscuro para la caja de sugerencias */
body.dark-mode #sugerencias { 
  background: #1e293b !important; 
  border-color: #334155 !important; 
}

/* Elementos de la lista individuales (Filas) */
#sugerencias li { 
  list-style: none; 
  padding: .75rem 1rem; 
  cursor: pointer; 
  border-bottom: 1px solid #f1f5f9; 
  color: #0f172a; /* Texto oscuro para que se lea bien sobre fondo blanco */
}

/* Texto claro para las filas en modo oscuro */
body.dark-mode #sugerencias li {
  color: #e2e8f0;
  border-bottom: 1px solid #334155;
}

#sugerencias li:last-child { 
  border-bottom: none; 
}

/* Efectos hover (pasar el cursor por encima) */
#sugerencias li:hover { 
  background: #f0fdfa; 
}
body.dark-mode #sugerencias li:hover { 
  background: #0f2e2a; 
}
/* ========================================== */
/* REGLAS EXCLUSIVAS PARA TELÉFONOS (MÓVILES) */
/* ========================================== */
@media screen and (max-width: 767px) {
  
  /* Forzamos al input del buscador a ser negro transparente en celulares */
  #buscador,
  .w-full.bg-white\/20 {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    background-color: rgba(0, 0, 0, 0.4) !important; /* Fondo negro transparente */
    border: 1px solid rgba(0, 0, 0, 0.25) !important; /* Borde sutil */
    color: #ffffff !important; /* Texto blanco */
  }

  /* Aseguramos que el texto de ejemplo (placeholder) no se opaque en Safari/iOS */
  #buscador::placeholder,
  .w-full.bg-white\/20::placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
    opacity: 1 !important;
  }
}
@media screen and (max-width: 767px) {
  /* Si el bot de Botpress tapa tu WhatsApp, lo empujamos un poco hacia la izquierda */
  iframe#bp-webchat-container {
    bottom: 20px !important;
    right: 90px !important; /* Lo mueve a la izquierda del botón de WhatsApp */
  }
}
/* ---- Scroll top ---- */
#btn-scroll-top {
  position:fixed; bottom:22px; right:22px; z-index:1000;
  width:44px; height:44px; border-radius:50%;
  background:#0d9488; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  box-shadow:0 4px 14px rgba(13,148,136,.4); cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s;
}
#btn-scroll-top.show { opacity:1; pointer-events:all; }
#btn-scroll-top:hover { transform:translateY(-3px); }

/* ---- Price info in form ---- */
#precio-seleccionado { transition:all .3s; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.animate-pulse { animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite; }

/* ---- Imágenes siempre responsivas ---- */
img { max-width:100%; height:auto; }

/* ================================================================
   ZOOM AUTOMÁTICO PARA PANTALLAS GRANDES Y TVs
   ---------------------------------------------------------------
   Técnica: zoom en html + contraescalar el viewport para que
   las secciones de fondo completo (hero, header) siempre
   cubran el 100% del ancho visible real.

   Fórmula zoom:  resolución / 1440
   Fórmula width: 100vw / zoom  → llena la pantalla real

   Resoluciones:
     ≤ 1440px  → zoom 1     (nativo)
     1920px    → zoom 1.33
     2560px    → zoom 1.78
     3440px    → zoom 2.39
     3840px    → zoom 2.67
     4096px    → zoom 2.84
     7680px    → zoom 5.33
================================================================ */

/* ================================================================== */
/* AJUSTE PARA QUE BOTPRESS NO TAPE EL BOTÓN DE VOLVER ARRIBA        */
/* ================================================================== */

/* Cuando la burbuja de Botpress se inyecta, se genera dentro de un contenedor iframe */
#bp-webchat-container, 
#bp-webchat-container-div {
  z-index: 99999 !important; /* Le da prioridad al chat */
}

/* Movemos tu botón de subir para que quede justo por encima de la burbuja */
#btn-scroll-top {
  position: fixed !important;
  bottom: 100px !important; /* Lo subimos a 100px del borde (el chat suele usar de 20px a 40px) */
  right: 22px !important;   /* Lo mantenemos alineado a la derecha */
  z-index: 99998 !important; /* Un nivel por debajo del chat para evitar conflictos extraños */
  
  /* Tus estilos de transición se mantienen intactos */
  transition: opacity .3s, transform .3s, background-color .3s !important;
}

/* En teléfonos móviles, si se ve muy amontonado, le damos un extra de separación */
@media screen and (max-width: 767px) {
  #btn-scroll-top {
    bottom: 120px !important; /* Lo subimos un poco más en pantallas táctiles */
  }
}

/* Evita que el hero (#inicio) se estire demasiado en monitores grandes */
@media (min-width: 1800px) {
  #inicio {
    min-height: auto !important;
    height: 800px!important;
    max-height: 1100px !important;
  }
}

@media (min-width: 3400px) { /* 4K */
  #inicio {
    max-height: 1250px;
  }
}

@media (min-width: 7000px) { /* 8K */
  #inicio {
    max-height: 1400px;
  }
}



.break-all {
  overflow-wrap: break-word;
}

  :root {
    --whatsapp-green: #25d366;
    --whatsapp-green-hover: #128c7e;
    --whatsapp-icon-size: 34px;
    --whatsapp-button-size: 60px;
  }

  .whatsapp-btn-float {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 9999;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--whatsapp-button-size);
    height: var(--whatsapp-button-size);

    color: #ffffff;
    background-color: var(--whatsapp-green);
    border-radius: 50%;
    box-shadow: 2px 2px 10px rgb(0 0 0 / 25%);
    text-decoration: none;

    transition:
      background-color 0.3s ease,
      box-shadow 0.3s ease,
      transform 0.3s ease;
  }

  .whatsapp-btn-float:hover {
    background-color: var(--whatsapp-green-hover);
    box-shadow: 2px 4px 15px rgb(0 0 0 / 35%);
    transform: scale(1.1);
  }

  .whatsapp-btn-float:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
  }

  .whatsapp-btn-float__icon {
    width: var(--whatsapp-icon-size);
    height: var(--whatsapp-icon-size);
    fill: currentColor;
  }

  @media (max-width: 480px) {
    .whatsapp-btn-float {
      right: 16px;
      bottom: 16px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .whatsapp-btn-float {
      transition: none;
    }
  }