/* ============================================================
   KodingRD.com — soluciones.css
   Estilos exclusivos de la página de Soluciones (pilares, proceso,
   stack y preguntas frecuentes). No modifica style.css.
   ============================================================ */

/* ---------- HERO de la página ---------- */
.page-hero .hero-tags{ justify-content:center; margin:1.2rem 0 1.6rem; }

/* ---------- Imagen de cabecera de cada pilar ---------- */
.sol-pillar-img{
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:1rem;
  margin-bottom:1.1rem;
  background:var(--card-2);
  border:1px solid var(--border);
}

/* ---------- 4 pilares ---------- */
.sol-pillars{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.5rem;
}
.sol-pillar{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--card);
  padding:1.6rem;
  display:flex;
  flex-direction:column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sol-pillar:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:rgba(27,156,255,.6);
}
.sol-pillar.featured-pillar{
  border-color:rgba(27,156,255,.5);
  box-shadow:0 0 0 1px rgba(27,156,255,.28), var(--shadow);
}
.sol-pillar-head{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
}
.sol-pillar-head .card-icon{ margin-bottom:0; flex:0 0 auto; }
.sol-pillar-head h3{ font-size:1.1rem; line-height:1.25; }
.sol-pillar p{ font-size:.92rem; opacity:.88; margin-bottom:.9rem; }
.sol-pillar ul{ font-size:.88rem; opacity:.92; margin-bottom:1.1rem; }
.sol-pillar ul li{ margin-bottom:.45rem; padding-left:1.1rem; position:relative; }
.sol-pillar ul li::before{
  content:"▹";
  color:var(--cyan-text);
  position:absolute;
  left:0;
  font-weight:700;
}
.sol-deliver{
  margin-top:auto;
  padding-top:.85rem;
  border-top:1px dashed var(--border-2);
  font-size:.82rem;
  opacity:.9;
}
.sol-deliver span{ color:var(--cyan-text); font-weight:600; }

/* ---------- Proceso ---------- */
.sol-steps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1.2rem;
}
.sol-step{
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--card);
  padding:1.4rem;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sol-step:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:rgba(27,156,255,.6);
}
.sol-step-num{
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-.02em;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:.6rem;
}
.sol-step h3{ font-size:1rem; margin-bottom:.5rem; }
.sol-step p{ font-size:.88rem; opacity:.87; }

/* ---------- Stack ---------- */
.sol-stack{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  justify-content:center;
  max-width:52rem;
  margin:0 auto;
}

/* ---------- Preguntas frecuentes ---------- */
.sol-faq{ max-width:52rem; margin:0 auto; }
.sol-faq-item{
  border-radius:1rem;
  border:1px solid var(--border);
  background:var(--card);
  padding:1rem 1.2rem;
  margin-bottom:.75rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.sol-faq-item[open]{
  border-color:rgba(27,156,255,.55);
  box-shadow:var(--shadow);
}
.sol-faq-item summary{
  cursor:pointer;
  font-weight:600;
  font-size:.95rem;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.sol-faq-item summary::-webkit-details-marker{ display:none; }
.sol-faq-item summary::after{
  content:"+";
  color:var(--cyan-text);
  font-size:1.2rem;
  font-weight:700;
  line-height:1;
  flex:0 0 auto;
}
.sol-faq-item[open] summary::after{ content:"–"; }
.sol-faq-item p{
  font-size:.9rem;
  opacity:.88;
  margin-top:.7rem;
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .sol-steps{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:900px){
  .sol-pillars{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .sol-steps{ grid-template-columns:1fr; }
  .sol-pillar, .sol-step{ padding:1.2rem; }
}