/* ===========================================================
   Chatea.mx — Tema moderno con colores mexicanos
   Verde bandera #006847 · Blanco #ffffff · Rojo bandera #ce1126
   =========================================================== */
:root{
  --mx-green:#006847;
  --mx-green-dark:#00502f;
  --mx-green-light:#0a8a5f;
  --mx-red:#ce1126;
  --mx-red-dark:#a50d1e;
  --mx-bg:#f5f7f6;
  --mx-text:#1f2d27;
  --mx-muted:#5b6b63;
  --mx-radius:18px;
  --mx-shadow:0 12px 32px rgba(0,0,0,.10);
  --mx-shadow-sm:0 4px 14px rgba(0,0,0,.06);
}

*{box-sizing:border-box}

body{
  background:var(--mx-bg);
  color:var(--mx-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{font-weight:700;color:var(--mx-text)}
a{color:var(--mx-green);text-decoration:none;transition:color .15s ease}
a:hover,a:focus{color:var(--mx-red)}
a:visited{color:var(--mx-green)}

/* ---------- Navbar ---------- */
.navbar.bg-dark{
  background-color:var(--mx-green-dark)!important;
  box-shadow:0 2px 14px rgba(0,0,0,.18);
  padding-top:.6rem;padding-bottom:.6rem;
}
.navbar .navbar-brand{font-weight:800;letter-spacing:-.03rem;color:#fff;font-size:1.4rem}
.navbar .navbar-brand .accent{color:#ffd7db}
.navbar .nav-link{font-weight:500;opacity:.92;transition:opacity .15s ease}
.navbar .nav-link:hover{opacity:1}

/* ---------- Hero / Header ---------- */
.header{
  background:linear-gradient(135deg,var(--mx-green-light) 0%,var(--mx-green) 45%,var(--mx-green-dark) 100%);
  color:#fff;
  padding:96px 0 64px;
  margin-bottom:0;
  position:relative;
  overflow:hidden;
}
.header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 82% -10%,rgba(255,255,255,.14),transparent 45%),
             radial-gradient(circle at 0% 115%,rgba(206,17,38,.20),transparent 42%);
}
.header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:linear-gradient(90deg,var(--mx-green) 0 33.333%,#fff 33.333% 66.666%,var(--mx-red) 66.666% 100%);
}
.header>.container{position:relative;z-index:1}
.header h1{color:#fff;text-align:center;font-weight:800;letter-spacing:-.03rem;line-height:1.12;margin-bottom:.6rem}
.header .lead,.header p{color:rgba(255,255,255,.92)}
.header a,.header a:visited{color:#fff}
.header a:hover{color:#ffd7db}

/* Tarjeta de ingreso (nick) */
.header .card.card-sm{border:none;border-radius:50px;box-shadow:var(--mx-shadow);overflow:hidden}
.header .card.card-sm .card-body{padding:.4rem .5rem .4rem 1.2rem}
.header .card .fa-slack-hash{color:var(--mx-green);font-size:1.2rem}

.form-control-borderless{border:none;background:transparent}
.form-control-borderless:hover,.form-control-borderless:active,.form-control-borderless:focus{border:none;outline:none;box-shadow:none}

/* ---------- Botones (paleta mexicana vía variables de Bootstrap 5) ---------- */
.btn{border-radius:50px;font-weight:600;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.btn-lg{padding:.7rem 1.9rem}
.btn:hover{transform:translateY(-2px)}
.btn-success{
  --bs-btn-bg:var(--mx-green);--bs-btn-border-color:var(--mx-green);
  --bs-btn-hover-bg:var(--mx-green-dark);--bs-btn-hover-border-color:var(--mx-green-dark);
  --bs-btn-active-bg:var(--mx-green-dark);--bs-btn-active-border-color:var(--mx-green-dark);
  --bs-btn-disabled-bg:var(--mx-green);--bs-btn-disabled-border-color:var(--mx-green);
  box-shadow:0 6px 18px rgba(0,104,71,.32)
}
.btn-danger{
  --bs-btn-bg:var(--mx-red);--bs-btn-border-color:var(--mx-red);
  --bs-btn-hover-bg:var(--mx-red-dark);--bs-btn-hover-border-color:var(--mx-red-dark);
  --bs-btn-active-bg:var(--mx-red-dark);--bs-btn-active-border-color:var(--mx-red-dark)
}
.btn-primary{
  --bs-btn-bg:var(--mx-green-dark);--bs-btn-border-color:var(--mx-green-dark);
  --bs-btn-hover-bg:var(--mx-green);--bs-btn-hover-border-color:var(--mx-green);
  --bs-btn-active-bg:var(--mx-green);--bs-btn-active-border-color:var(--mx-green)
}
.btn-warning{
  --bs-btn-bg:var(--mx-red);--bs-btn-border-color:var(--mx-red);--bs-btn-color:#fff;
  --bs-btn-hover-bg:var(--mx-red-dark);--bs-btn-hover-border-color:var(--mx-red-dark);--bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--mx-red-dark);--bs-btn-active-color:#fff
}
.btn-outline-success{
  --bs-btn-color:#fff;--bs-btn-border-color:rgba(255,255,255,.55);
  --bs-btn-hover-bg:#fff;--bs-btn-hover-color:var(--mx-green-dark);--bs-btn-hover-border-color:#fff;
  --bs-btn-active-bg:#fff;--bs-btn-active-color:var(--mx-green-dark)
}

/* ---------- Contenido ---------- */
.content{background:transparent;position:relative;z-index:1;margin-bottom:40px}
.content .lead{color:var(--mx-text)}
.space-before{padding-top:28px}
.space-after{padding-bottom:28px}

/* Encabezados de sección con acento rojo */
.content h2{font-weight:800;letter-spacing:-.02rem}
.content section>h2:not(.lead){position:relative;display:inline-block;padding-bottom:.4rem;margin-bottom:1rem}
.content section>h2:not(.lead)::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:4px;border-radius:4px;background:var(--mx-red)}

/* Featurettes */
.featurette-divider{margin:3.5rem 0;border-top:1px solid rgba(0,0,0,.08)}
.featurette-heading{font-weight:800;color:var(--mx-green-dark);letter-spacing:-.03rem}
.img-feature{
  border:6px solid #fff;margin:0 auto;border-radius:50%;
  box-shadow:var(--mx-shadow);max-width:100%;height:auto;transition:transform .25s ease
}
.img-feature:hover{transform:scale(1.04)}

/* Lista de salas relacionadas */
.list-group{gap:.4rem}
.list-group-item{
  border:none!important;border-left:3px solid transparent!important;border-radius:12px!important;
  background:#fff;box-shadow:var(--mx-shadow-sm);transition:transform .15s ease,border-color .15s ease
}
.list-group-item:hover{border-left-color:var(--mx-red)!important;transform:translateX(4px)}
.list-group-item a{color:var(--mx-green-dark);font-weight:600}
.list-group-item a:hover{color:var(--mx-red)}

/* Paginación */
.pagination{
  --bs-pagination-color:var(--mx-green);
  --bs-pagination-hover-color:var(--mx-green-dark);
  --bs-pagination-hover-bg:#e8f1ed;
  --bs-pagination-focus-color:var(--mx-green-dark);
  --bs-pagination-focus-box-shadow:0 0 0 .2rem rgba(0,104,71,.2);
  --bs-pagination-active-bg:var(--mx-green);
  --bs-pagination-active-border-color:var(--mx-green)
}
.page-link{border-radius:8px!important;margin:0 2px;border:1px solid rgba(0,0,0,.08)}

/* Panel "well" (portada de salas) */
.well{background:#fff;border-radius:var(--mx-radius);box-shadow:var(--mx-shadow);padding:2rem}
.customBtn2{
  display:inline-block;background:var(--mx-green);color:#fff!important;border-radius:50px;
  padding:.55rem 1.6rem;margin:.25rem;font-weight:600;transition:background .15s ease,transform .15s ease
}
.customBtn2:hover{background:var(--mx-green-dark);color:#fff!important;transform:translateY(-2px)}

/* Tarjetas genéricas */
.card{border:none;border-radius:var(--mx-radius)}

/* Breadcrumb */
.breadcrumb{background:transparent;padding-left:0}
.breadcrumb-item a{color:var(--mx-green)}
.breadcrumb-item.active{color:var(--mx-muted)}

/* Alertas (crear-chat) */
.alert-success{--bs-alert-color:var(--mx-green-dark);--bs-alert-bg:#e6f2ec;--bs-alert-border-color:#bfe0d0}
.alert-danger{--bs-alert-color:var(--mx-red-dark);--bs-alert-bg:#fbe6e9;--bs-alert-border-color:#f3c2c9}

/* Footer */
#footer{background:var(--mx-green-dark)!important}
#footer h5{font-weight:700}
#footer a.text-secondary{color:rgba(255,255,255,.72)!important;transition:color .15s ease}
#footer a.text-secondary:hover{color:#fff!important}

/* Chips de salas populares (estilo chatealo) */
.room-chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:.2rem 0 1.4rem;padding:0;list-style:none}
.room-chips a{
  display:inline-block;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.34);
  color:#fff;padding:.35rem .95rem;border-radius:50px;font-size:.85rem;font-weight:600;transition:transform .15s ease,background .15s ease,color .15s ease
}
.room-chips a:hover{background:#fff;color:var(--mx-green-dark);transform:translateY(-2px)}

/* Barra de estadísticas del hero */
.stats-bar{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem 2.8rem;
  margin-top:2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.2)
}
.stats-bar .stat{text-align:center;color:#fff}
.stats-bar .num{display:block;font-size:1.9rem;font-weight:800;line-height:1}
.stats-bar .lbl{display:block;font-size:.78rem;opacity:.85;text-transform:uppercase;letter-spacing:.06em;margin-top:.3rem}

/* Rejilla de tarjetas de ciudades / categorías (estilo chatealo) */
.city-card{
  background:#fff;border-radius:var(--mx-radius);box-shadow:var(--mx-shadow-sm);
  padding:1.6rem;height:100%;transition:transform .18s ease,box-shadow .18s ease;
  border-top:4px solid var(--mx-green);text-align:left
}
.city-card:hover{transform:translateY(-5px);box-shadow:var(--mx-shadow)}
.city-card:nth-child(3n+2){border-top-color:var(--mx-red)}
.city-card .emoji{font-size:1.9rem;display:block;margin-bottom:.4rem;line-height:1}
.city-card h3{font-size:1.18rem;font-weight:800;color:var(--mx-green-dark);margin-bottom:.5rem}
.city-card h3 a{color:inherit}
.city-card h3 a:hover{color:var(--mx-red)}
.city-card p{color:var(--mx-muted);font-size:.92rem;margin-bottom:1rem}
.city-card .btn-sm{font-size:.82rem;padding:.4rem 1.15rem}

/* Encabezado de sección centrado */
.section-head{text-align:center;margin-bottom:1.8rem}
.section-head h2{display:inline-block;font-weight:800;letter-spacing:-.02rem;position:relative;padding-bottom:.5rem}
.section-head h2::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:54px;height:4px;border-radius:4px;background:var(--mx-red)}
.section-head p{color:var(--mx-muted);max-width:680px;margin:.8rem auto 0}

/* Panel intro que se monta sobre el hero */
.intro-panel{
  background:#fff;border-radius:var(--mx-radius);box-shadow:var(--mx-shadow);
  padding:2.2rem 2rem;margin-top:-46px;position:relative;z-index:3
}
.intro-panel .lead{color:var(--mx-text)}

/* Tarjetas de categoría (Gay / México / Hot) */
.cat-card{
  background:#fff;border-radius:var(--mx-radius);box-shadow:var(--mx-shadow-sm);
  padding:1.8rem 1.5rem;text-align:center;height:100%;
  transition:transform .18s ease,box-shadow .18s ease;border-top:4px solid var(--mx-green)
}
.cat-card:nth-child(3n+2){border-top-color:var(--mx-red)}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--mx-shadow)}
.cat-card img{width:128px;height:128px;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:var(--mx-shadow-sm);margin-bottom:1rem}
.cat-card h3{font-weight:800;color:var(--mx-green-dark);font-size:1.2rem;margin-bottom:.6rem}
.cat-card p{color:var(--mx-muted);font-size:.93rem;margin-bottom:1.1rem}

/* Grid "¿Por qué elegir?" con iconos */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.why-item{background:#fff;border-radius:14px;box-shadow:var(--mx-shadow-sm);padding:1.25rem;display:flex;gap:.85rem;align-items:flex-start}
.why-item .ico{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#e6f2ec;color:var(--mx-green);font-size:1.1rem}
.why-item:nth-child(2n) .ico{background:#fbe6e9;color:var(--mx-red)}
.why-item h4{font-size:1rem;font-weight:700;margin:0 0 .25rem}
.why-item p{margin:0;color:var(--mx-muted);font-size:.9rem}

/* Tarjetas de información (seguro / dispositivos) */
.info-card{background:#fff;border-radius:var(--mx-radius);box-shadow:var(--mx-shadow-sm);padding:1.8rem;height:100%}
.info-card .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.35rem;background:#e6f2ec;color:var(--mx-green);margin-bottom:1rem}
.info-card h2{font-size:1.3rem;margin-bottom:.6rem}
.info-card p{color:var(--mx-muted);margin-bottom:0}

/* Acordeón FAQ con paleta mexicana */
.faq-accordion{
  --bs-accordion-border-color:rgba(0,0,0,.06);
  --bs-accordion-active-bg:#e6f2ec;
  --bs-accordion-active-color:var(--mx-green-dark);
  --bs-accordion-btn-focus-box-shadow:0 0 0 .2rem rgba(0,104,71,.2);
  border-radius:var(--mx-radius);overflow:hidden;box-shadow:var(--mx-shadow-sm)
}
.faq-accordion .accordion-button{font-weight:600}
.faq-accordion .accordion-item:first-of-type{border-top-left-radius:var(--mx-radius);border-top-right-radius:var(--mx-radius)}

/* Etiquetas de salas (página "salas de chat") */
.sala-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin:1.4rem 0}
.sala-tag{
  display:inline-block;padding:.5rem 1.15rem;border-radius:50px;background:#e6f2ec;
  color:var(--mx-green-dark)!important;font-weight:600;font-size:.9rem;border:1px solid transparent;
  text-decoration:none;transition:transform .15s ease,background .15s ease,color .15s ease
}
.sala-tag:hover{background:var(--mx-green);color:#fff!important;transform:translateY(-2px)}
.sala-tag:nth-child(4n+3){background:#fbe6e9;color:var(--mx-red-dark)!important}
.sala-tag:nth-child(4n+3):hover{background:var(--mx-red);color:#fff!important}

/* Página pre-chat */
.prechat-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;background:linear-gradient(135deg,var(--mx-green-light) 0%,var(--mx-green) 55%,var(--mx-green-dark) 100%)}
.prechat-card{background:#fff;border-radius:var(--mx-radius);box-shadow:var(--mx-shadow);max-width:660px;width:100%;padding:2.4rem 2rem;text-align:center}
.prechat-brand{font-weight:800;font-size:1.4rem;color:var(--mx-green-dark);text-decoration:none;display:inline-block;margin-bottom:1rem}
.prechat-brand span{color:var(--mx-red)}
.prechat-card .spinner-border{color:var(--mx-green)}
.prechat-rules{text-align:left;background:#f5f7f6;border-radius:14px;padding:1.2rem 1.4rem;margin-top:1.5rem}
.prechat-rules ul{margin:.6rem 0 0;padding-left:1.1rem}
.prechat-rules li{margin-bottom:.45rem;color:var(--mx-muted);font-size:.92rem}

/* Tarjetas de reglas (página términos) */
.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.rule-card{
  background:#fff;border-radius:14px;box-shadow:var(--mx-shadow-sm);padding:1.4rem;height:100%;
  display:flex;gap:.9rem;align-items:flex-start;border-left:3px solid var(--mx-green)
}
.rule-card:nth-child(2n){border-left-color:var(--mx-red)}
.rule-card .ico{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#e6f2ec;color:var(--mx-green);font-size:1.05rem}
.rule-card:nth-child(2n) .ico{background:#fbe6e9;color:var(--mx-red)}
.rule-card h3{font-size:1rem;font-weight:700;margin:0 0 .25rem}
.rule-card p{margin:0;color:var(--mx-muted);font-size:.92rem}

/* Pasos numerados (crear chat) */
.step-card{
  background:#fff;border-radius:var(--mx-radius);box-shadow:var(--mx-shadow-sm);padding:1.9rem 1.4rem;
  text-align:center;height:100%;transition:transform .18s ease,box-shadow .18s ease
}
.step-card:hover{transform:translateY(-5px);box-shadow:var(--mx-shadow)}
.step-num{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 1rem;font-size:1.35rem;font-weight:800;color:#fff;background:var(--mx-green)}
.step-card h3{font-size:1.12rem;font-weight:800;color:var(--mx-green-dark);margin-bottom:.5rem}
.step-card p{color:var(--mx-muted);font-size:.92rem;margin:0}

/* Tarjeta de formulario montada sobre el hero */
.form-panel{margin-top:-46px;position:relative;z-index:3;box-shadow:var(--mx-shadow)}

/* ---------- Responsive ---------- */
@media(max-width:767px){
  h1,h2,h3,h4{text-align:center}
  .header{padding:84px 0 56px}
  .form-panel{margin-top:-28px}
  .content section>h2:not(.lead)::after{left:50%;transform:translateX(-50%)}
  .city-card{text-align:center}
  .stats-bar{gap:1.2rem 1.8rem}
  .stats-bar .num{font-size:1.6rem}
  .intro-panel{margin-top:-30px;padding:1.6rem 1.2rem}
  .why-item{text-align:left}
}
@media(min-width:768px){
  .header h1{font-size:2.8rem}
}
@media(min-width:992px){
  .header h1{font-size:3.4rem}
  .space-before{padding-top:48px}
  .space-after{padding-bottom:48px}
}