/* ==========================================================================
   iBlocker – stylesNews (badges del hero + FAQ mejorado)
   Requiere: incluir tras tailwind.min.css (y cualquier patch propio)
   ========================================================================== */

/* ----------------------------- */
/* Badges del HERO (📦 / 🔐 / 📶) */
/* ----------------------------- */

/* Recomendado: si puedes, añade class="badges-row" al contenedor de la grid.
   Aun así, dejamos un fallback que funciona con tu markup actual. */
#home .badges-row > div,
#home .mt-10.grid.text-center > div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: .75rem 1rem;
  border-radius: 9999px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);

  transition: transform .18s ease, background-color .18s ease,
              border-color .18s ease, box-shadow .18s ease, opacity .18s ease;

  /* Glass */
  -webkit-backdrop-filter: saturate(150%) blur(6px);
          backdrop-filter: saturate(150%) blur(6px);

  /* Mejor legibilidad en fondos vivos */
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}

/* Hover/active */
#home .badges-row > div:hover,
#home .mt-10.grid.text-center > div:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 14px 32px -18px rgba(245,61,108,.45);
}

#home .badges-row > div:active,
#home .mt-10.grid.text-center > div:active {
  transform: translateY(0);
  background: rgba(255,255,255,.08);
}

/* Ajuste de tipografía y emoji (que son el primer carácter) */
#home .badges-row > div,
#home .mt-10.grid.text-center > div {
  line-height: 1.35;
  letter-spacing: .005em;
  white-space: nowrap;
}

/* En móviles, que respiren y ocupen ancho completo elegantes */
@media (max-width: 639.98px) {
  #home .badges-row,
  #home .mt-10.grid.text-center {
    gap: .75rem !important;
  }
  #home .badges-row > div,
  #home .mt-10.grid.text-center > div {
    width: 100%;
    border-radius: 9999px;
  }
}

/* Respeto por reduce-motion */
@media (prefers-reduced-motion: reduce) {
  #home .badges-row > div,
  #home .mt-10.grid.text-center > div {
    transition: none !important;
  }
}

/* -------- */
/*  FAQ     */
/* -------- */

#faq details {
  position: relative;
  overflow: hidden; /* para sombras internas suaves */
  border-radius: 0.75rem; /* coincide con rounded-xl */
  transition: border-color .25s ease, background-color .25s ease,
              transform .25s ease, box-shadow .25s ease;
}

#faq details:hover {
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
}

#faq details[open] {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-color: rgba(245,61,108,.45) !important;
  box-shadow: 0 22px 42px -22px rgba(245,61,108,.35);
}

/* Escondemos el marcador nativo y hacemos uno custom (chevron) */
#faq summary::-webkit-details-marker { display: none; }
#faq summary {
  list-style: none;
  position: relative;
  padding-right: 2rem; /* espacio para el chevron */
  outline: none;
  user-select: none;
}

/* Chevron */
#faq summary::after {
  content: "⌄";
  position: absolute;
  right: .25rem;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 1.15rem;
  line-height: 1;
  color: rgba(255,255,255,.8);
  transition: transform .25s ease, color .25s ease, opacity .25s ease;
  opacity: .9;
}

#faq details[open] > summary::after {
  transform: translateY(-50%) rotate(180deg);
  color: #fff;
  opacity: 1;
}

/* Foco accesible en summary */
#faq summary:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(245,61,108,.45);
  border-radius: .5rem;
}

/* Contenido del panel (el <p> que sigue al summary) con transición */
#faq details > p {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .28s ease, opacity .24s ease;
  will-change: max-height, opacity;
}

/* Al abrir, expandimos generosamente */
#faq details[open] > p {
  max-height: 480px; /* suficiente para tus párrafos */
  opacity: .85;
}

/* Pequeño acento superior cuando está abierto */
#faq details[open]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(245,61,108,.0), rgba(245,61,108,.7), rgba(245,61,108,.0));
  opacity: .9;
}

/* Reduce motion para el FAQ */
@media (prefers-reduced-motion: reduce) {
  #faq details,
  #faq summary::after,
  #faq details > p {
    transition: none !important;
  }
}


/* ===========================
   HERO badges: fondo oscuro + centrado + compacto
   =========================== */

/* Contenedor de la fila (añade la clase 'badges-row' a tu div de badges) */
#home .badges-row{
  /* layout */
  max-width: 860px;
  margin: 2rem auto 0;
  justify-items: center;         /* centra el contenido de cada celda */
  align-items: center;
  gap: .75rem !important;

  /* fondo oscuro detrás de TODA la fila */
  background: rgba(6, 8, 15, .65);     /* negro azulado translúcido */
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: .65rem;

  /* glass + sombra */
  -webkit-backdrop-filter: blur(6px) saturate(140%);
          backdrop-filter: blur(6px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
              0 12px 26px -20px rgba(0,0,0,.8);
}

/* Pastillas individuales */
#home .badges-row > div{
  font-weight: 700;               /* negrita */
  font-size: .85rem;              /* compacto */
  letter-spacing: .01em;
  line-height: 1.25;
  color: rgba(255,255,255,.94);

  padding: .5rem .9rem;
  border-radius: 9999px;
  background: rgba(0,0,0,.45);    /* oscuro para cada pastilla */
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06),
              0 6px 16px -10px rgba(0,0,0,.9);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  white-space: nowrap;
  transition: transform .18s ease, background-color .18s ease,
              border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

#home .badges-row > div:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.6);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 14px 26px -18px rgba(245,61,108,.45);
}
#home .badges-row > div:active{
  transform: translateY(0);
}

/* Ajustes por tamaño */
@media (min-width: 640px){
  #home .badges-row > div{
    padding: .55rem 1rem;
    font-size: .875rem; /* ~14px */
  }
}

/* En móvil, que ocupen el ancho para verse prolijas */
@media (max-width: 639.98px){
  #home .badges-row{
    grid-template-columns: 1fr !important;
    gap: .65rem !important;
  }
  #home .badges-row > div{
    width: 100%;
  }
}

/* Respeto a reduce-motion */
@media (prefers-reduced-motion: reduce){
  #home .badges-row > div{
    transition: none !important;
  }
}



/* Wrap y subtítulo */
.badges-wrap{
  max-width: 980px;
  margin: 0 auto;
}
.badges-kicker{
  margin-top: .25rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.6);
  text-align: center;
}

/* Contenedor: fondo oscuro + glass + grid auto-fit */
#home .badges-row{
  margin-top: 1rem;                /* mantiene el spacing de la sección */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  justify-items: center;
  align-items: center;
  gap: .75rem !important;

  background: rgba(6, 8, 15, .65);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: .65rem;

  -webkit-backdrop-filter: blur(6px) saturate(140%);
          backdrop-filter: blur(6px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
              0 12px 26px -20px rgba(0,0,0,.8);
}

/* Badge */
#home .badges-row .badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  font-weight: 700;
  font-size: .85rem;
  line-height: 1.25;
  color: rgba(255,255,255,.94);

  padding: .5rem .9rem;
  border-radius: 9999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06),
              0 6px 16px -10px rgba(0,0,0,.9);

  transition: transform .18s ease, background-color .18s ease,
              border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
  will-change: transform;
}

/* Icono dentro del badge */
#home .badges-row .badge-ico{
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,.92);
  opacity: .95;
}

/* Hover/active */
#home .badges-row .badge:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.6);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 14px 26px -18px rgba(245,61,108,.45);
}
#home .badges-row .badge:active{
  transform: translateY(0);
}

/* Tooltips simples con data-tip */
#home .badges-row .badge[data-tip]{
  position: relative;
}
#home .badges-row .badge[data-tip]::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  pointer-events: none;

  white-space: nowrap;
  font-weight: 500;
  font-size: .72rem;
  color: rgba(255,255,255,.95);
  background: rgba(10,10,14,.92);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: .45rem .6rem;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.6);
  transition: opacity .18s ease, transform .18s ease;
}
#home .badges-row .badge[data-tip]:hover::after{
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Animación de entrada con ligero “stagger” */
@keyframes ibadgeIn{
  from{opacity:0; transform: translateY(6px);}
  to{opacity:1; transform: translateY(0);}
}
#home .badges-row .badge{
  animation: ibadgeIn .35s ease both;
}
#home .badges-row .badge:nth-child(2){ animation-delay: .05s; }
#home .badges-row .badge:nth-child(3){ animation-delay: .10s; }
#home .badges-row .badge:nth-child(4){ animation-delay: .15s; }
#home .badges-row .badge:nth-child(5){ animation-delay: .20s; }
#home .badges-row .badge:nth-child(6){ animation-delay: .25s; }

/* Ajustes por tamaño */
@media (min-width: 640px){
  #home .badges-row{
    padding: .7rem .8rem;
    gap: .8rem !important;
  }
  #home .badges-row .badge{
    padding: .55rem 1rem;
    font-size: .875rem;
  }
}

/* En móvil, que ocupen ancho completo para prolijidad */
@media (max-width: 639.98px){
  #home .badges-row{
    grid-template-columns: 1fr !important;
    gap: .65rem !important;
  }
  #home .badges-row .badge{
    width: 100%;
  }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  #home .badges-row .badge{
    transition: none !important;
    animation: none !important;
  }
  #home .badges-row .badge[data-tip]::after{
    transition: none !important;
  }
}



/* --- Partículas hero --- */
#home { overflow: hidden; } /* recorte limpio del canvas en el héroe */

.hero-particles{
  position:absolute;
  inset:0;            /* full-bleed dentro del contenedor relativo del héroe */
  z-index:0;          /* por debajo de las estrellas y del contenido */
  pointer-events:none;
  opacity:.45;
  mix-blend-mode:screen;  /* se integra con el gradiente; quítalo si no te gusta */
}

@media (max-width: 767.98px){
  .hero-particles{ opacity:.28; }
}
@media (prefers-reduced-motion: reduce){
  .hero-particles{ display:none; }
}




/* Evitar selección (activado en modo HARD desde el JS) */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Evitar arrastrar imágenes (refuerzo) */
img, svg {
  -webkit-user-drag: none;
}

/* Overlay cuando se detecta DevTools */
.protect-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
}
body.devtools-open .protect-overlay { display: flex; }

.protect-overlay .box {
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-weight: 700;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
  text-align: center;
}