/* ================= RESET ================= */
* { margin:0; padding:0; box-sizing:border-box; }

body{
  font-family:'Montserrat',sans-serif;
  color:#222;
  line-height:1.6;
  background:#f7f9fc;
}

/* ================= UTILIDADES ================= */
.container{ width:90%; max-width:1100px; margin:auto; }
h1,h2{ font-weight:700; }
a{ text-decoration:none; color:inherit; }

/* ================= NAVBAR ================= */
.navbar{
  background:#0f172a;
  padding:15px 0;
  position:sticky;
  top:0;
  z-index:1000;
}
.nav-content{ display:flex; justify-content:space-between; align-items:center; }
.navbar nav a{ color:#fff; margin-left:20px; font-weight:500; }
.logo { color: #38bdf8; font-size: 20px; }
/* ================= HERO ================= */
.hero{
  position:relative;
  color:#fff;
  padding:120px 0;
  text-align:center;
  background-image:
    linear-gradient(rgba(15,23,42,.85), rgba(15,23,42,.85)),
    url('../img/hero-bg.png');
  background-size:cover;
  background-position:80% 45%;
  background-repeat:no-repeat;
}
.hero h1{ font-size:42px; margin-bottom:15px; }
.hero p{ font-size:18px; max-width:700px; margin:auto; }
.hero-buttons{ margin-top:30px; }

.btn{
  display:inline-block;
  padding:12px 26px;
  border-radius:6px;
  font-weight:600;
  transition:all .3s ease;
}
.btn.primary{ background:#38bdf8; color:#0f172a; }
.btn.primary:hover{ background:#0ea5e9; }
.btn.secondary{
  border:2px solid #38bdf8;
  color:#38bdf8;
  margin-left:15px;
}

/* ================= SERVICES ================= */
.services{ padding:80px 0; background:#fff; }
.services h2{ text-align:center; margin-bottom:40px; }

.tabs{ text-align:center; margin-bottom:30px; }
.tab-btn{
  padding:10px 25px;
  border:none;
  background:#e5e7eb;
  margin:0 5px;
  cursor:pointer;
  font-weight:600;
  border-radius:5px;
}
.tab-btn.active{ background:#38bdf8; color:#0f172a; }
.tab-content{ display:none; }
.tab-content.active{ display:block; }

.services-subtitle{
  text-align:center;
  color:#64748b;
  margin-bottom:40px;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:25px;
}
.service-card{
  background:#f8fafc;
  border-radius:14px;
  padding:30px 25px;
  text-align:center;
  transition:all .3s ease;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,0,0,.12);
}
.service-card .icon{ font-size:36px; display:block; margin-bottom:15px; }
.service-card h3{ margin-bottom:10px; font-size:18px; }
.service-card p{ font-size:14px; color:#475569; }

/* ================= CONTACT ================= */
.hidden{ display:none; }

.contact{ padding:80px 0; background:#f7f9fc; }
.contact h2{ text-align:center; margin-bottom:30px; }
.contact-form{ max-width:500px; margin:auto; }
.form-group{ margin-bottom:15px; }

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:12px;
  border-radius:6px;
  border:1px solid #cbd5f5;
  font-size:14px;
}
.contact-form textarea{ resize:vertical; min-height:120px; }

/* ================= FOOTER ================= */
.footer{
  background:#020617;
  color:#cbd5f5;
  padding:50px 0 20px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}
.footer h4{ margin-bottom:15px; color:#38bdf8; }
.footer a{ color:#e0f2fe; font-size:14px; }
.footer a:hover{ text-decoration:underline; }
.footer-brand p{ margin-top:10px; color:#94a3b8; font-size:14px; }
.footer-contact p{ margin-bottom:10px; }
.footer-bottom{
  margin-top:30px;
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.1);
  text-align:center;
  font-size:13px;
  color:#94a3b8;
}
@media (max-width:768px){
  .footer-grid{ grid-template-columns:1fr; text-align:center; }
}

/* ================= WHATSAPP ================= */
.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:20px;
  background:#25d366;
  color:#fff;
  width:55px;
  height:55px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:26px;
  box-shadow:0 4px 10px rgba(0,0,0,.3);
}

/* ================= RESPONSIVE ================= */
@media (max-width:768px){
  .hero h1{ font-size:32px; }
  .btn.secondary{ margin-left:0; margin-top:10px; display:inline-block; }
}

/* ================= GRACIAS ================= */
.thankyou{ padding:90px 0; background:#f7f9fc; }
.thankyou-card{
  max-width:720px;
  margin:auto;
  background:#fff;
  padding:45px 30px;
  border-radius:16px;
  box-shadow:0 18px 45px rgba(0,0,0,.10);
  text-align:center;
}
.thankyou-icon{ font-size:44px; margin-bottom:10px; }
.thankyou-card h1{ font-size:34px; margin-bottom:10px; }
.thankyou-card p{ color:#475569; margin-bottom:18px; }
.thankyou-actions{ margin-top:20px; }
.thankyou-note{ margin-top:18px; font-size:13px; color:#94a3b8; }

/* ================= CHAT WIDGET (PRO) ================= */
#chat-button{
  position:fixed;
  bottom:25px;
  right:25px;
  background:#38bdf8;
  color:#0f172a;
  height:56px;
  padding:0 16px;
  border-radius:999px;            /* pastilla */
  font-size:16px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  z-index:9999;
  border:none;
  box-shadow:0 6px 18px rgba(0,0,0,.30);
}

#chat-button .chat-icon{
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.35);
  font-size:20px;
}

#chat-button .chat-label{
  font-weight:700;
  letter-spacing:.2px;
}

/* En pantallas chicas, que quede solo el círculo */
@media (max-width:520px){
  #chat-button{
    width:60px;
    height:60px;
    padding:0;
    border-radius:50%;
    justify-content:center;
  }
  #chat-button .chat-label{ display:none; }
  #chat-button .chat-icon{
    background:transparent;
    width:auto;
    height:auto;
    font-size:26px;
  }
}

#chat-box{
  position:fixed;
  bottom:100px;
  right:25px;
  width:420px;              /* ⬅️ más ancho */
  height:560px;             /* ⬅️ más alto */
  background:#fff;
  border-radius:14px;
  box-shadow:0 20px 45px rgba(0,0,0,.25);
  overflow:hidden;
  z-index:9999;
  display:flex;
  flex-direction:column;
}

.chat-header{
  background:#0f172a;
  color:#fff;
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.chat-header button{
  background:none;
  border:none;
  color:#fff;
  font-size:18px;
  cursor:pointer;
}

#chat-messages{
  flex:1;
  padding:14px;
  overflow-y:auto;
  background:#f7f9fc;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;    /* clave: no estirar */
}

/* burbujas: tamaño real según contenido */
#chat-messages .chat-msg{
  width:fit-content;         /* clave: se ajusta al texto */
  max-width:78%;
  padding:8px 12px;
  border-radius:16px;
  line-height:1.25;
  font-size:14px;
  white-space:pre-wrap;
  word-break:break-word;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

#chat-messages .chat-msg .meta{ display:none; }

/* cliente (Vos) */
#chat-messages .chat-msg.client{
  align-self:flex-end;
  background:#38bdf8;
  color:#0f172a;
  border-bottom-right-radius:6px;
}

/* agente (Franema) */
#chat-messages .chat-msg.agent{
  align-self:flex-start;
  background:#0f172a;
  color:#fff;
  border-bottom-left-radius:6px;
}

/* form */
#chat-form{
  display:flex;
  flex-direction:column;
  padding:10px;
  gap:8px;
  border-top:1px solid #e2e8f0;
  background:#fff;
}
#chat-form input,
#chat-form textarea{
  font-size:13px;
  padding:10px;
  border-radius:8px;
  border:1px solid #cbd5f5;
  outline:none;
}
#chat-form textarea{
  min-height:80px;
  resize:none;
}
#chat-form button{
  background:#38bdf8;
  border:none;
  padding:10px;
  font-weight:700;
  cursor:pointer;
  border-radius:8px;
}
#chat-form button:hover{ background:#0ea5e9; }

.hidden{ display:none !important; }

/* responsive chat */
@media (max-width:520px){
  #chat-box{
    right:12px;
    left:12px;
    width:auto;
    height:70vh;
    bottom:90px;
  }
  #chat-button{
    right:18px;
    bottom:18px;
  }
}


/* ================= RESPONSIVE MOBILE (mejoras) ================= */

/* Tablets y abajo */
@media (max-width: 900px) {
  .hero { padding: 90px 0; }
  .hero h1 { font-size: 34px; }
  .hero p { font-size: 16px; }
}

/* Celulares */
@media (max-width: 600px) {
  /* contenedor un poco más ancho */
  .container { width: 92%; }

  /* Navbar en 2 filas (logo arriba, menú abajo) */
  .nav-content {
    flex-direction: column;
    gap: 10px;
  }
  .navbar nav a {
    margin-left: 0;
    margin: 0 10px;
    display: inline-block;
  }

  /* Hero */
  .hero { padding: 70px 0; }
  .hero h1 { font-size: 28px; line-height: 1.15; }
  .hero p { font-size: 15px; padding: 0 6px; }

  /* Botones del hero apilados */
  .hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .btn { width: 100%; max-width: 320px; text-align: center; }
  .btn.secondary { margin-left: 0; }

  /* Servicios: un poco menos padding */
  .services { padding: 60px 0; }
  .service-card { padding: 22px 16px; }

  /* Footer a una columna (por las dudas) */
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  /* WhatsApp flotante: un toque más chico */
  .whatsapp-float {
    width: 50px;
    height: 50px;
    font-size: 24px;
    right: 16px;
    bottom: 16px;
  }
}

/* Chat widget responsive (si no lo tenías ya) */
@media (max-width: 520px) {
  #chat-box {
    right: 12px;
    left: 12px;
    width: auto;
    height: 70vh;
    bottom: 90px;
  }

  /* el botón del chat ya lo tenías: en mobile queda solo icono */
  #chat-button { right: 18px; bottom: 18px; }
}