:root{
  --brand:#b22222;
  --brand-dark:#8b1d1a;
  --ink:#0f172a;
  --paper:#fff;
  --muted:#6b7280;
  --soft:#f6f7fb;
  --shadow:0 18px 40px rgba(15,23,42,.12);
  --radius:14px;
}


*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body
{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Arial,sans-serif;
  color:var(--ink);
  background:var(--soft);
}
img{ max-width:100%; height:auto; display:block }


.page{
  max-width:1280px;
  margin: clamp(80px,10vw,110px) auto 60px;
  padding:0 clamp(12px,3vw,20px);
}


.page > .hero.hero-mini{
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
}


.hero.hero-mini{
  position:relative;
  height: clamp(160px, 18vw, 260px);
  margin-bottom:18px;
}


.hero .hero-bg,
.hero .hero-bg img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 35%;
}


.hero .hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.55) 85%
  );
}

.hero .hero-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  padding: clamp(16px,3vw,32px);
  padding-left: clamp(16px,6vw,64px);
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

.hero .hero-content h1{
  margin:0 0 6px;
  font-size: clamp(28px,4.2vw,46px);
  font-weight:900;
  line-height:1.05;
}
.hero .hero-content p{
  margin:0;
  font-size: clamp(12px,1.6vw,16px);
  font-weight:700;
  max-width:620px;
  opacity:.95;
}

/* móvil */
@media (max-width:600px){
  .hero.hero-mini{
    height: clamp(180px, 40vw, 240px);
  }
  .hero .hero-bg img{ object-position:center 25%; }
  .hero .hero-content{
    padding-left:16px;
  }
}

/* tablet */
@media (min-width:601px) and (max-width:1024px){
  .hero.hero-mini{
    height: clamp(200px, 30vw, 280px);
  }
  .hero .hero-bg img{ object-position:center 30%; }
}


.faq-wrap{
  display:grid;
  grid-template-columns:320px 1fr;
  gap: clamp(14px,2vw,22px);
  margin-top: clamp(12px,2vw,18px);
  align-items: stretch;
}
@media (max-width:1100px){
  .faq-wrap{ grid-template-columns:280px 1fr }
}
@media (max-width:980px){
  .faq-wrap{ grid-template-columns:1fr }
}

.faq-side{
  background:var(--paper);
  border:1px solid #e5e7eb;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;

  height: 700px;
    display: flex;
    flex-direction: column;
}
.faq-side h3{
  margin:0 0 10px;
  font-size:18px;
}
.faq-side h3 i{
  color:var(--brand);
  margin-right:8px;
}

.cat-list{
  display:grid;
  gap:10px;
}
.pill-cat{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  font-weight:800;
  cursor:pointer;
}
.pill-cat:hover{ background:#fff }

.kb-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}


.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:10px;
  border:0;
  cursor:pointer;
  font-weight:900;
}
.btn-primary{ background:var(--brand); color:#fff }
.btn-secondary{ background:#111827; color:#fff }
.btn-ghost{ background:#e5e7eb; color:#111 }
.btn-wide{ width:100%; justify-content:center }


.chat-card{
  background:var(--paper);
  border:1px solid #e5e7eb;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:grid;
  /* Mantiene la estructura de filas */
    grid-template-rows: auto 1fr auto auto;

/* CAMBIOS CLAVE: */
    height: 700px;     /* Altura fija para que no crezca más */
    overflow: hidden;  /* Obliga al contenido interno a respetar el límite */
}

.chat-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  border-bottom:1px solid #e5e7eb;
  gap:10px;
  flex-wrap:wrap;
}

.agent{
  display:flex;
  align-items:center;
  gap:10px;
}
.avatar{
  width:40px;
  height:40px;
  border-radius:10px;
  background:#111;
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
}

.chat-body{
  padding:14px;
  background: linear-gradient(180deg,#fdfdfd,#f7f8fb);

    /*scoll chat*/
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.msg{
  display:flex;
  gap:10px;
  margin:10px 0;
}
.msg.user{ justify-content:flex-end }
.msg .bubble{
  max-width:70%;
  padding:10px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid #eee;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.msg.user .bubble{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}

.suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid #e5e7eb;
  background:#fafafa;
}
.suggestions .sg{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-weight:800;
  cursor:pointer;
  font-size:12px;
}

.chat-input{
  display:flex;
  gap:10px;
  padding:10px;
  border-top:1px solid #e5e7eb;
}
.chat-input input{
  flex:1;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #d1d5db;
}


@media (prefers-reduced-motion: reduce){
  *{
    animation:none !important;
    transition:none !important;
  }
}

.page{
  margin-top: 0 !important;
}

.hero.hero-mini{
  height: 380px !important;
  min-height: 380px !important;
  max-height: 380px !important;
}

/* móvil */
@media (max-width:600px){
  .hero.hero-mini{
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
  }
}

/* tablet */
@media (min-width:601px) and (max-width:1024px){
  .hero.hero-mini{
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }
}
/* Contenedor que agrupa los dos botones a la derecha */
.input-actions {
    display: flex;
    align-items: center;
    gap: 12px; /* Espacio entre Enviar y Limpiar chat */
    padding-left: 15px;
    border-left: 1px solid #eee;
    flex-shrink: 0;
}

/* BOTÓN ENVIAR: Rectangular, negro y con texto */
#sendBtn {
    all: unset; /* Resetea estilos heredados que puedan estar molestando */
    background: #000;
    color: #fff;
    padding: 8px 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    transition: background 0.2s;
    /* Quitamos cualquier rastro del diseño circular anterior */
    width: auto;
    height: auto;
}

#sendBtn:hover {
    background: #333;
}

/* BOTÓN LIMPIAR: Solo texto en negrita, sin fondo */
.btn-clear-link {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    padding: 0;
    white-space: nowrap;
}

.btn-clear-link strong {
    font-weight: 800; /* Aquí forzamos la negrita */
    color: #444;
}

.btn-clear-link:hover,
.btn-clear-link:hover strong {
    color: #e74c3c; /* Cambia a rojo al pasar el mouse */
}
/*para responsivo celular */
@media (max-width: 980px) {
    .chat-card {
        height: 600px;
    }
}