/* ===== SECCIÓN ¿QUÉ HACEMOS? ===== */
.que-hacemos {padding: 40px 20px; background: #fff}
.qh-container {max-width: 1120px; margin: 0 auto;}
.qh-header {text-align: center; margin-bottom: 30px;}
.qh-header h2 {font-family: "Montserrat", sans-serif; font-size: 36px; font-weight: 700; color: #383838; margin-bottom: 5px; }
.qh-divider {width: 96px; height: 4px; background-color: #383838; margin: 0 auto; border-radius: 4px; }
.qh-list {max-width: 768px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px;}
.qh-card {background-color: #525252; padding: 28px; border-radius: 18px; outline: 1px solid #cbd5e1; outline-offset: -1px; border-left: 6px solid #C2C2C2; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.10); margin-bottom: 14px;}
.qh-card:hover {box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15); transform: translateY(-2px);}
.qh-card h3 {font-family: "Montserrat", sans-serif; font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 12px;}
.qh-card p {font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 1.6; color: #fff;}


/* ===== IMPORTACIÓN A PEDIDO ===== */
.import-section {padding: 50px 20px 20px 20px; background: #383838;}
.import-container {max-width: 1280px; margin: 0 auto;}
.import-title {font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 700; text-align: center; color: #fff; margin-bottom: 48px; text-shadow: 0 3px 8px rgba(40, 40, 40, 1);}
.import-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;}
.import-card {background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 32px; transition: all 0.3s ease;}
.import-card:hover {box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12); transform: translateY(-4px);}
.import-icon {width: 48px; height: 48px; background: #383838; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; margin-bottom: 16px;}
.import-card h3 {font-size: 18px; font-weight: 700; color: #111827; margin-bottom: 8px;}
.import-card p {font-size: 14px; color: #4b5563; line-height: 1.6;}
.import-card strong {color: #111827;}
.icon {width: 32px; height: 32px; fill: currentColor; flex-shrink: 0;}
.importacion-footer {color:#fff;margin-top: 40px; text-align: center; font-weight: 600;}
.importacion-footer a {text-decoration: none; color: inherit;}


@media (max-width: 1024px) {
  .import-grid {grid-template-columns: 1fr;}
}


/* ===== SOLUCIONES ===== */
.soluciones {background: #fff;}
.soluciones-container {max-width: 1200px; margin: 0 auto;}
.soluciones-header {text-align: center; margin-bottom: 50px;}
.soluciones-header h2 {font-size: 2.5rem; font-weight: 800; margin-bottom: 10px;}
.soluciones-header p {color: #555; max-width: 700px; margin: 0 auto;}
.soluciones-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.solucion-card {position: relative; height: 500px; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.3); display: block; text-decoration: none; color: inherit; cursor: pointer;}
.solucion-card img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease;}
.solucion-card:hover img {transform: scale(1.1);}
.solucion-overlay {position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.6), rgba(0,0,0,0)); padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff;}
.solucion-overlay h3 { position: absolute; top: 60%; font-size: 1.6rem; font-weight: 700; margin-bottom: 15px;}
.solucion-overlay ul { position: absolute; top: 70%; list-style: none; padding: 0; margin-bottom: 20px; font-size: 0.95rem;}
.solucion-overlay li {margin-bottom: 8px;}
.solucion-overlay button {background: #fff; color: #111; border: none; padding: 10px; font-weight: 700; border-radius: 6px; cursor: pointer; transition: background 0.3s ease;}
.solucion-overlay button:hover {background: #e5e5e5;}
.soluciones-footer {margin-top: 40px; text-align: center; color: #000; font-weight: 500;}
.item-check {display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; font-size: 0.95rem; color: #e5e7eb;}
.icon-check {width: 16px; height: 16px; min-width: 16px; fill: #fbbf24; margin-top: 2px;}
.soluciones-footer {padding-bottom:30px;}
@media (max-width: 1024px) {
  .soluciones-grid {grid-template-columns: 1fr;}
}


/* ===== PORQUE ELEGIR PRASSO ===== */
.why-prasso {padding: 40px 20px 0px 20px; background-color: #383838;}
.container-why-prasso {max-width: 1200px; margin: 0 auto;}
.section-header {text-align: center; margin-bottom: 60px;}
.section-header h2 {font-family: 'Montserrat', sans-serif; font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 16px;}
.section-header .divider {width: 96px; height: 4px; background-color: #fff; margin: 0 auto; border-radius: 4px;}
.features-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;}
@media (max-width: 992px) {
  .features-grid {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 600px) {
    .features-grid {grid-template-columns: 1fr;}
}
.feature-card {display: flex; gap: 16px; padding: 24px; background-color: #fff; border: 1px solid #e5e7eb; border-radius: 16px; transition: border-color 0.3s ease, transform 0.3s ease;}
.feature-card:hover {border-color: #fbbf24; transform: translateY(-2px);}
.icon-box {width: 48px; height: 48px; background-color: #383838; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 12px; flex-shrink: 0;}
.icon-box span {font-size: 28px;}
.feature-card h3 {font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 700; color: #383838; margin-bottom: 8px;}
.feature-card p {font-size: 14px; line-height: 1.6; color: #383838;}



/* ===== FAQS ===== */
.faq-section {padding: 80px 20px; background: #383838;}
.faq-container {max-width: 900px; margin: 0 auto;}
.faq-header {text-align: center; margin-bottom: 50px;}
.faq-header h2 {font-size: 36px; margin-bottom: 10px; color: #fff;}
.faq-header p {color: #fff;}
.faq-list {display: flex; flex-direction: column; gap: 16px;}
.faq-item {background: #ffffff; border-radius: 16px; border: 1px solid #e5e7eb; overflow: hidden;}
.faq-item summary {display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 24px; list-style: none;}
.faq-item summary::-webkit-details-marker {display: none;}
.faq-item h3 {font-size: 18px; margin: 0;}
.faq-item .icon {font-size: 24px; transition: transform 0.3s ease;}
.faq-item[open] .icon {transform: rotate(180deg);}
.faq-content {padding: 0 24px 24px; border-top: 1px solid #e5e7eb;}
.faq-content p {margin: 16px 0 0; color: #4b5563; line-height: 1.6;}

/* ===== QUIÉNES SOMOS ===== */
.about-section {padding: 40px 20px 0px 20px; background: #fff; border-top: 1px solid #e5e7eb;}
.about-container {max-width: 1280px; margin: 0 auto; display: flex; gap: 48px; align-items: center;}
.about-content {flex: 1;}
.about-title {font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 700; color: #111827; margin-bottom: 24px;}
.about-text {color: #363636; line-height: 1.7; margin-bottom: 24px;}
.about-highlight {margin-top: 24px; font-weight: 500; color: #111827;}
.about-image {flex: 0.6;}
.image-wrapper {position: relative; background: #ffffff; padding: 8px; border-radius: 24px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); transform: rotate(-1deg); transition: transform 0.5s ease; overflow: hidden;}
.image-wrapper:hover {transform: rotate(0deg);}
.image-wrapper img {width: 100%; border-radius: 16px; filter: grayscale(100%); transition: filter 0.7s ease;}
.image-wrapper:hover img {filter: grayscale(0%);}
@media (max-width: 1024px) {
  .about-container {flex-direction: column;}
  .about-image {width: 100%;}
}

.media-card {position: relative;}
.about-more-btn {position: absolute; right: -40%; top: 50%; transform: translateY(-50%); background: #111827; color: #fff; border: none; padding: 14px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); transition: all 0.3s ease;}
.about-more-btn:hover {background: #10b981; transform: translateY(-50%) scale(1.05);}
.about-more-btn .arrow {font-size: 16px; transition: transform 0.3s ease;}
.about-more-btn:hover .arrow {transform: translateX(4px);}
.video-wrapper {display: none; border-radius: 24px; overflow: hidden; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);}
.video-wrapper iframe {width: 100%; height: 420px; border-radius: 16px;}
.media-card.active .image-wrapper {display: none;}
.media-card.active .video-wrapper {display: block;}
@media (max-width: 1024px) {
  .about-container {flex-direction: column;}
  .about-image {width: 100%;}
  .about-more-btn {position: static; transform: none; margin: 20px auto 0 auto; display: flex; justify-content: center; width: fit-content;}
  .media-card {display: flex; flex-direction: column;}
  .image-wrapper {order: 1;}
  .about-more-btn {order: 2;}
  .video-wrapper iframe {height: 260px;}
}



/* ===== CLIENTES ===== */
.clientes {padding: 80px 20px; background: #ffffff;}
.clientes-container {max-width: 1200px; margin: 0 auto;}
.clientes-header {text-align: center; margin-bottom: 48px;}
.clientes-header h2 {font-family: "Montserrat", sans-serif; font-size: 32px; font-weight: 700; color: #111827; margin-bottom: 12px;}
.clientes-divider {width: 64px; height: 4px; background: #111827; margin: 0 auto; border-radius: 4px;}
.carousel-wrapper {position: relative; display: flex; align-items: center;}
.carousel {overflow: hidden; width: 100%;}
.carousel-track {display: flex; gap: 24px; transition: transform 0.6s ease; will-change: transform;}
.carousel-item {flex: 0 0 auto;
  width: 220px; min-width: 200px; height: 120px; background: #f9fafb; border-radius: 16px; display: flex; align-items: center; justify-content: center; filter: grayscale(1); opacity: 0.6; transition: all 0.3s ease; border: 1px solid #e5e7eb;}
.carousel-item:hover {filter: grayscale(0); opacity: 1; transform: scale(1.05);}
.carousel-item img {max-width: 80%; max-height: 70%; object-fit: contain;}
.carousel-btn {background: #ffffff; border: 1px solid #e5e7eb; width: 42px; height: 42px; border-radius: 50%; font-size: 24px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: transform 0.2s ease;}
.carousel-btn:hover { transform: scale(1.1);}
.carousel-btn.prev {margin-right: 12px;}
.carousel-btn.next {margin-left: 12px;}


@media (max-width: 640px) {
  .carousel-item {
    width: 60vw; /* clave para mobile */
  }
}