/* ========================= */
/* BASE */
/* ========================= */

body{

background:#f5f6f8;

}

/* ========================= */
/* HEADER */
/* ========================= */

.ayuda-header{

background:#fff;

padding:60px 0 45px;

text-align:center;

border-bottom:1px solid #eee;

}

.ayuda-header h1{

font-size:40px;

font-weight:700;

color:#222;

margin-bottom:10px;

}

.ayuda-header p{

font-size:16px;

color:#777;

margin-bottom:25px;

}

/* ========================= */
/* BUSCADOR */
/* ========================= */

.buscador-ayuda{

display:flex;

justify-content:center;

max-width:520px;

margin:0 auto;

}

.buscador-ayuda input{

width:100%;

height:50px;

padding:0 16px;

border:1px solid #ddd;

border-radius:10px 0 0 10px;

font-size:15px;

outline:none;

background:#fff;

}

.buscador-ayuda button{

width:65px;

border:none;

background:#b720eb;

color:#fff;

border-radius:0 10px 10px 0;

font-size:17px;

}

/* ========================= */
/* CARDS */
/* ========================= */

.ayuda-cards-section{

padding-top:35px;

}

.ayuda-card-horizontal{

background:#fff;

border:1px solid #ececec;

border-radius:8px;

padding:20px 24px;

display:flex;

align-items:center;

gap:18px;

text-decoration:none;

transition:.2s;

height:100%;

min-height:120px;

}

.ayuda-card-horizontal:hover{

transform:translateY(-3px);

box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.icono-ayuda{

width:58px;

height:58px;

min-width:58px;

border-radius:50%;

background:#f5f5f5;

display:flex;

align-items:center;

justify-content:center;

}

.icono-ayuda i{

font-size:22px;

color:#b720eb;

}

.contenido-ayuda{

display:flex;

flex-direction:column;

}

.contenido-ayuda h4{

font-size:20px;

font-weight:600;

color:#333;

margin-bottom:4px;

}

.contenido-ayuda span{

font-size:15px;

color:#0d6efd;

}

/* ========================= */
/* FAQ */
/* ========================= */

.faq-section{

margin-top:70px;

}

.faq-section h3{

font-size:32px;

font-weight:700;

margin-bottom:30px;

color:#222;

}

.accordion-item{

border:none;

margin-bottom:14px;

border-radius:12px;

overflow:hidden;

box-shadow:0 6px 18px rgba(0,0,0,.05);

}

.accordion-button{

padding:18px 22px;

font-weight:600;

font-size:15px;

background:#fff;

box-shadow:none;

}

.accordion-button:not(.collapsed){

background:#b720eb;

color:#fff;

}

.accordion-body{

padding:18px 22px;

font-size:14px;

color:#666;

}

/* ========================= */
/* CONTACTO */
/* ========================= */

.contacto-rapido{

margin-top:70px;

background:#fff;

padding:60px 0;

text-align:center;

}

.contacto-rapido h4{

font-size:32px;

font-weight:700;

margin-bottom:10px;

color:#222;

}

.contacto-rapido p{

font-size:15px;

color:#777;

margin-bottom:24px;

}

.contacto-rapido .btn{

background:#b720eb;

border:none;

padding:13px 28px;

border-radius:30px;

font-size:15px;

font-weight:600;

}

.contacto-rapido .btn:hover{

background:#9d16cc;

}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media(max-width:768px){

.ayuda-header{

padding:45px 20px 35px;

}

.ayuda-header h1{

font-size:30px;

}

.buscador-ayuda{

flex-direction:column;

gap:10px;

}

.buscador-ayuda input{

border-radius:10px;

}

.buscador-ayuda button{

width:100%;

height:50px;

border-radius:10px;

}

.ayuda-card-horizontal{

padding:18px;

}

.contenido-ayuda h4{

font-size:18px;

}

.faq-section h3,
.contacto-rapido h4{

font-size:26px;

}

}