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
================================================================ */

/* ── Hasta 1440px: nativo ── */
@media screen and (max-width: 1440px) {
  html { zoom: 1; }
  .main-container, body { width: 100%; overflow-x: hidden; }
}

/* ── Full HD 1920px ── */
@media screen and (min-width: 1441px) and (max-width: 1920px) {
  html { zoom: 1.33; }
  /* El body ocupa el ancho REAL dividido por el zoom */
  body {
    width: calc(100vw / 1.33);
    overflow-x: hidden;
  }
  /* Secciones de fondo completo se estiran al ancho real */
  #inicio, footer, header, #navbar,
  section, .site-footer, .portada {
    width: calc(100vw / 1.33) !important;
    max-width: none !important;
  }
}

/* ── TV 21:9 / Ultra-wide 2560px ── */
@media screen and (min-width: 1921px) and (max-width: 2560px) {
  html { zoom: 1.78; }
  body {
    width: calc(100vw / 1.78);
    overflow-x: hidden;
  }
  #inicio, footer, header, #navbar,
  section, .site-footer, .portada {
    width: calc(100vw / 1.78) !important;
    max-width: none !important;
  }
}

/* ── TV 21:9 4K / 3440px ── */
@media screen and (min-width: 2561px) and (max-width: 3440px) {
  html { zoom: 2.39; }
  body {
    width: calc(100vw / 2.39);
    overflow-x: hidden;
  }
  #inicio, footer, header, #navbar,
  section, .site-footer, .portada {
    width: calc(100vw / 2.39) !important;
    max-width: none !important;
  }
}

/* ── 4K UHD / Cinema 4K hasta 4096px ── */
@media screen and (min-width: 3441px) and (max-width: 4096px) {
  html { zoom: 2.84; }
  body {
    width: calc(100vw / 2.84);
    overflow-x: hidden;
  }
  #inicio, footer, header, #navbar,
  section, .site-footer, .portada {
    width: calc(100vw / 2.84) !important;
    max-width: none !important;
  }
}

/* ── 4K UHD 3840px — 4097 a 7679px ── */
@media screen and (min-width: 4097px) and (max-width: 7679px) {
  html { zoom: 2.67; }
  body {
    width: calc(100vw / 2.67);
    overflow-x: hidden;
  }
  #inicio, footer, header, #navbar,
  section, .site-footer, .portada {
    width: calc(100vw / 2.67) !important;
    max-width: none !important;
  }
}

/* ── 8K UHD — 7680px y superior ── */
@media screen and (min-width: 7680px) {
  html { zoom: 5.33; }
  body {
    width: calc(100vw / 5.33);
    overflow-x: hidden;
  }
  #inicio, footer, header, #navbar,
  section, .site-footer, .portada {
    width: calc(100vw / 5.33) !important;
    max-width: none !important;
  }
}

/* ================================================================== */
/* 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 */
  }
}