/* Variables de color */
:root {
  --so-naranja:  #f2AA1F;
  --so-cab:      #2c3e50;
  --so-cab-act:  #1a3a5c;
  --so-fondo:    #f5f5f5;
  --so-blanco:   #ffffff;
  --so-borde:    #dde0e6;
  --so-oscuro:   #1a1a2e;
  --so-gris:     #4a4a6a;
  --so-trans:    0.3s ease;
}


/* Contenedor principal */
.so-contenido {
  background: var(--so-fondo);

  max-width: 1120px;
  width: 100%;

  margin-inline: auto;

  padding-top: 45px;
  padding-bottom: 40px;
  margin-bottom: 350px;

  padding-inline: clamp(20px, 5vw, 64px);

  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  box-sizing: border-box;
}

/* Título "Soporte" con icono */
.so-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--so-naranja);
}
.so-titulo h1 { font-size: 3.0rem; 
  font-weight: 800; 
  color: var(--so-oscuro); 
  margin: 0; 
}

.so-titulo i   { 
  font-size: 2rem; 
  color: var(--so-oscuro); }

/* Acordeón — lista de items */
.so-acordeon { 
  display: flex; 
  flex-direction: column; 
  gap: 10px;
  width: 100%;

 }

/* Item individual */
.so-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}

/* Cabecera (botón clickeable) */
.so-cab {
  width: 100%;
  display: flex;
  align-items: center;
  background: var(--so-cab);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition: background var(--so-trans);
}
.so-cab.activo { 
  background: var(--so-cab-act); }

/* Caja naranja con el icono */
.so-icono-caja {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--so-naranja);
  color: #fff;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  font-size: 1.2rem;
}

/* Texto de la cabecera */
.so-cab-titulo {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  padding: 0 16px;
}

/* Flecha — rota 180° cuando está activo */
.so-flecha {
  font-size: 1rem;
  padding-right: 20px;
 
}


/* Panel de preguntas */
.so-cuerpo {
  background: var(--so-fondo);
  padding: 10px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.so-cuerpo[hidden] { display: none; }

/* Animación de apertura */
.so-cuerpo:not([hidden]) { 
  animation: soAbrir .25s ease forwards;
}

@keyframes soAbrir {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tarjeta de pregunta */
.so-pregunta {
  background: var(--so-blanco);
  border: 1px solid var(--so-borde);
  border-radius: 6px;
  padding: 10px 16px;
}
.so-pregunta h3 { font-size: .88rem;
   font-weight: 700; 
   color: var(--so-oscuro); 
   margin-bottom: 6px; 
  }
.so-pregunta p  { font-size: .82rem; 
  color: var(--so-gris); line-height: 1.55; 
  margin-bottom: 4px;
 }
.so-pregunta p:last-child { margin-bottom: 0; }