:root{--bg:#0A0A12;--panel:#0F1120;--accent:#4D7BFF;--accent2:#FF2EC4;--muted:#9FB9D6}
*{box-sizing:border-box}body{margin:0;font-family:Montserrat,system-ui,-apple-system,'Segoe UI',Roboto,Arial;color:#eaf6ff;background:var(--bg)}
.container{max-width:1100px;margin:0 auto;padding:20px}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.logo{font-weight:800;color:var(--accent);letter-spacing:1px}
.nav-flex {position:relative}
nav a{color:var(--muted);text-decoration:none}
.hero-title{color:var(--accent2);font-size:28px;margin:12px 0;text-align: center}
.controls{display:flex;gap:8px;margin-bottom:16px}
.conf-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.2));padding:16px;border-radius:12px;box-shadow:0 10px 30px rgba(77,123,255,0.08);border:1px solid rgba(77,123,255,0.06)}
.card h3{margin:0;color:#0bb9ff}
.meta{font-size:13px;color:var(--muted);margin:8px 0}
.btn{padding:8px 12px;border-radius:10px;background: linear-gradient(90deg, #0bb9ff, #a63cff);border:0;color:#fff;font-weight:700;cursor:pointer}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);align-items:center;justify-content:center}
.modal-dialog{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.25));padding:18px;border-radius:12px;width:92%;max-width:900px;color:inherit}
.modal-close{float:right;background:transparent;border:0;color:var(--muted);font-size:20px;cursor:pointer}
.categorias-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 30px 0;
}
.categorias-bar button {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 18px;
    border-radius: 25px;
    color: white;
    cursor: pointer;
    font-size: 0.95rem;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.categorias-bar button:hover {
  background: #e6dbff;
  color: #000;
}

.cat-btn{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.3);padding:10px 18px;border-radius:25px;color:white;cursor:pointer;font-size:0.95rem;transition:0.3s}
.cat-btn:hover{background:rgba(255,255,255,0.22)}
.form-page form{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
input,select,textarea{padding:12px;border-radius:8px;border:0;background:rgba(255,255,255,0.08);color:inherit}
.error{color:#ff9b9b}
.site-footer{text-align:center;padding:18px 0;color:var(--muted);margin-top:24px}
.nav-toggle{display:none}
@media(max-width:768px){
  .nav-toggle{display:block}
  nav{position:absolute;top:0;left:0;right:0;background:rgba(25,12,45,0.95);backdrop-filter:blur(6px);width:100%;height:100vh;padding-top:80px;display:flex;flex-direction:column;align-items:center;gap:25px;transform:translateY(-100%);transition:transform .35s;z-index:1000}
  nav.open{transform:translateY(0)}
  nav a{font-size:22px;display:block;margin:auto;width:90%;text-align:center;padding:10px}
}
/*NUEVOS ESTILOS...........................................*/
/* ========== HEADER GENERAL ========== */
.site-header {
  background: #0A0A12;
  border-bottom: 1px solid #000;
  position: sticky;
  top: 0;
  z-index: 999;
}
.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  width: 95%;
}
.logo img {
  height: 46px;
}

/* Desktop Menu */
.main-nav ul {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav ul li a {
  text-decoration: none;
  font-weight: 500;
  color: #9FB9D6;
}
.btn-confiesa {
  background: #7e57c2;
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 8px;
  transition: 0.3s;
}
.btn-confiesa:hover {
  background: #6a44b0;
}

/* ========== MOBILE MENU ========== */
.menu-toggle {
  display: none;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: #fff;
  margin: 5px 0;
  transition: .3s;
}

/* Full screen mobile menu */
.mobile-nav {
    padding-top: 5em;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;  /* Para que cubra toda la pantalla */
  background: rgba(0,0,0,0.92); /* Ajustable */
  transform: translateX(-100%);
  transition: transform .4s ease;
  z-index: 2000;
}

.mobile-nav.open {
  transform: translateX(0);
}
.mobile-nav ul {
  list-style: none;
  padding: 0;
}
.mobile-nav ul li {
  margin-bottom: 24px;
  text-align: center;
}
.mobile-nav ul li a {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
}

/* ========== RESPONSIVE BREAKPOINT ========== */
@media(max-width: 900px){
  .main-nav { display: none; }
  .menu-toggle { display: block; }
}

/* Toggle visible mobile menu */
.mobile-nav.active {
  display: block;
}
/*SELECT DEL FORMULARIO DE CONFESIONES...................*/
select option {
  background: #ffffff;
  color: #333;
}
/*BOTÓN CERRA MENÚ RESPONSIVE....................................*/
.close-menu {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 2rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  z-index: 2000;
  opacity: 0.9;
  transition: opacity .2s ease;
}

.close-menu:hover {
  opacity: 1;
}

/*COLORES........................................................*/
.violeta-txt{
    color: #FF2EC4;
}
/*CATEGORÍAS MEJORADAS...........................................*/
.categorias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 30px 0;
}

.categorias .cat {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 18px;
    border-radius: 25px;
    color: white;
    cursor: pointer;
    font-size: 0.95rem;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.categorias .cat:hover,
.categorias .cat:focus {
  background: #ffd5f8;
  border-color: #b300ff;
  color: #8200c7;
  transform: translateY(-2px);
}
.titulo-home{
    background-image: linear-gradient(90deg, #0bb9ff, #a63cff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Hacer el texto transparente */
    text-align: center;
}
.frase-home{
    margin-bottom: .5em;
    margin-top: .5em;
    text-align: center;
}
.botones-home{
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
}
.botones-home a{
    background: linear-gradient(90deg, #0bb9ff, #a63cff);
    border-radius: 20px;
    color: #fff;
    margin:.25em;
    text-decoration: none;
}
.iconito {
  width: 15px;
  height: 15px;
  color: #fff; /* Cambia este color */
}
.iconote {
  width: 20px;
  height: 20px;
  color: #8c41fd; /* Cambia este color */
}