/* Estilos específicos para la sección FAQ */
/* Este archivo se carga después de ../home/styles.css para sobreescribir lo necesario */

:root{
  --faq-title-color: #ffffff; /* tono morado similar a la referencia */
  --faq-search-height: 64px;
  --faq-search-border: 8px;
}

/* Layout principal */
.faq-inner { padding-top: 18px; padding-bottom: 18px; }
.faq-grid {
  display: grid;
  grid-template-columns: 46% 54%;
  gap: 36px;
  align-items: start;
}

/* LEFT */
.faq-left { padding: 18px 6px; }
.faq-title {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-size: 3.2rem;
  margin: 8px 0 28px 0;
  color: var(--faq-title-color);
  text-transform: uppercase;
  line-height: 0.95;
}

/* Buscador grande con borde grueso rojo y lupa a la izquierda */
.faq-search-wrap { margin-bottom: 18px; }
.faq-search {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.98);
  border-radius: 999px;
  padding-left: calc(var(--faq-search-height) * 0.15 + var(--faq-search-border));
  box-sizing: border-box;
  height: var(--faq-search-height);
  border: var(--faq-search-border) solid var(--rojo);
  width: 100%;
  max-width: 520px;
}
.faq-search-icon {
  position: absolute;
  left: 20px;
  width: 28px;
  height: 28px;
  opacity: 0.95;
  pointer-events: none;
}
.faq-search input[type="search"]{
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 0 20px 0 56px;
  color: var(--offwhite);
  font-size: 1rem;
  font-weight: 600;
}
.faq-search input::placeholder { color: #a9a9a9; font-weight:600; }
.faq-search-hint { margin-top: 10px; color: var(--muted); font-size: 0.95rem; }

 /* RIGHT: lista de preguntas */
.faq-right { padding: 6px 6px; }
.faq-list { width:100%; }
.faq-items { list-style:none; margin:0; padding:0; }
.faq-item { border-bottom: 2px solid rgba(181,108,209,0.06); padding:10px 0; }
.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  background:transparent;
  border:none;
  padding: 18px 6px;
  text-align:left;
  cursor:pointer;
  font-weight:800;
  font-size:1.05rem;
  color: var(--rojo);
  border-radius:6px;
  transition: transform 180ms var(--transition), background 180ms var(--transition);
}
.faq-q:hover{ transform: translateY(-4px); background: rgba(255,255,255,0.01); }

.caret {
  font-size:1.15rem;
  color: var(--rojo);
  width:22px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  transition: transform 180ms var(--transition);
}

/* Respuesta oculta / desplegado */
.faq-a{
  overflow:hidden;
  transition: max-height 260ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
  max-height: 0;
  opacity: 0;
  padding: 0 6px;
}
.faq-item.open .faq-a{
  max-height: 400px; /* suficiente para respuestas */
  opacity: 1;
  margin-top: 10px;
  padding-bottom: 6px;
}
.faq-item.open .caret{
  transform: rotate(180deg);
}

/* respuesta texto */
.faq-a p { margin:0; color:#dcdcdc; line-height:1.6; font-size:0.98rem; }

/* No results */
.faq-noresults { margin-top: 18px; color: var(--muted); font-weight:700; }

/* RESPONSIVE */
@media (max-width:980px){
  .faq-grid{ grid-template-columns: 1fr; }
  .faq-title{ font-size:2.2rem; margin-bottom:12px; }
  .faq-search { max-width:100%; height:56px; border-width:6px; }
  .faq-left { order: 0; }
  .faq-right { order: 1; margin-top: 18px; }
}

/* Mantener consistencia visual con el home: padding top para header fijo ya está en styles.css */

/* Reemplazar la cruz azul con una personalizada */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  width: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><line x1='1' y1='1' x2='13' y2='13' stroke='%238a0100' stroke-width='2'/><line x1='13' y1='1' x2='1' y2='13' stroke='%238a0100' stroke-width='2'/></svg>") no-repeat center;
  cursor: pointer;
}

/* ----------------------------
   Estilos mínimos para shop (añadidos aquí por seguridad)
   Si ../home/styles.css ya los contiene, estas reglas no rompen nada.
   ---------------------------- */
.shop-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--bubble-h);
  height:var(--bubble-h);
  padding:0;
  background:transparent;
  border:0;
  cursor:pointer;
  border-radius:10px;
  transition:transform var(--transition), background-color var(--transition), filter var(--transition);
  flex-shrink:0;
  text-decoration:none;
}
.shop-btn:hover{ transform:scale(1.06); background:rgba(255,255,255,0.06); }
.shop-btn:focus-visible{ outline:2px solid rgba(255,255,255,0.6); outline-offset:2px; }
.shop-icon{ width:24px; height:24px; display:block; }

.terms-link {
    color: #8A0100;
    text-decoration: underline;
    font-weight: 600; /* opcional */
}
.terms-link:hover {
    opacity: 0.8;
}

.privacy-link {
    color: #8A0100;
    text-decoration: underline;
    font-weight: 600; /* opcional */
}
.privacy-link:hover {
    opacity: 0.8;
}