/* ============================================================
   MEJORAS DE ESTILO — Romar Lorenzo (2026) — PASE 3
   ------------------------------------------------------------
   Archivo ADITIVO: se carga DESPUÉS del CSS del template.
   Moderniza tipografía, cards, about, testimonios, equipo,
   botones y el botón flotante de WhatsApp.
   Paleta: violeta #592a51 / verde petróleo #2a5159 / WhatsApp #25d366.
   Para REVERTIR: quitar el <link> de mejoras.css en el HTML.
   ============================================================ */

/* ---------- Acento de marca (reemplaza el verde fluor) ---------- */
:root {
  --acento: #c79bbf; /* lila suave, sobre fondos violeta */
}

/* ---------- Transiciones parejas ---------- */
a, .btn, button, .service-item, .readmore,
.btn-get-started, .btn-get-started2, .btn-cta,
.team-member, .testimonial-content {
  transition: all 0.25s ease;
}

/* ============================================================
   1) TIPOGRAFÍA MODERNA en títulos (Inter en vez de serif Cardo)
      — el hero se deja con su serif elegante.
   ============================================================ */
.page-header h2,
.section-header p,
.services-multi .service-item h3,
.services .service-item h4,
.team .team-member .member-info h4,
.testimonials .testimonial-item h3,
.about .content h2,
.faq h3 {
  font-family: "Inter", sans-serif !important;
  letter-spacing: -0.5px;
  font-weight: 700 !important;
}

/* títulos de sección un poco más contenidos y con aire */
.page-header h2 {
  font-size: 46px !important;
  line-height: 1.15 !important;
}
@media (max-width: 768px) {
  .page-header h2 { font-size: 32px !important; }
}

/* menos espacio vacío en las bandas de título de sección
   (esto achica el hueco grande entre el hero y el título del about) */
.page-header {
  padding: 55px 0 25px 0 !important;
  min-height: auto !important;
}

/* ============================================================
   2) HERO INTERNO — a pantalla (casi) completa
   ============================================================ */
.hero2 {
  min-height: 92vh !important;
  padding: 120px 0 60px 0 !important;
}

/* ============================================================
   3) MÁS AIRE entre secciones (se sentía todo apretado)
   ============================================================ */
.services-multi { padding: 80px 0 !important; }
.about { padding: 0 0 60px 0 !important; }
.team  { padding: 40px 0 70px 0 !important; }

/* ============================================================
   4) CARDS BLANCAS (.services-multi) — modernas y prolijas
   ============================================================ */
.services-multi .service-item {
  padding: 46px 36px !important;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.services-multi .service-item:hover {
  background-color: #fff;
  transform: translateY(-10px);
  box-shadow: 0 24px 55px rgba(42, 81, 89, 0.28);
}

/* iconos/ilustraciones unificados (antes 200px = toscos) */
.services-multi .service-item img {
  height: auto !important;
  max-height: 110px;
  width: auto;
  display: block;
  margin: 0 auto 26px auto;
  transition: transform 0.4s ease;
}
.services-multi .service-item:hover img {
  transform: scale(1.08);
}

/* título limpio, SIN el subrayado pesado anterior */
.services-multi .service-item h3 {
  border-bottom: none !important;
  display: block !important;
  padding-bottom: 0 !important;
  margin: 0 0 16px 0 !important;
  font-size: 21px !important;
  color: #2a5159 !important;
  line-height: 1.35 !important;
}

/* texto más liviano y legible (antes negro/negrita = tosco) */
.services-multi .service-item p {
  font-size: 15.5px !important;
  line-height: 1.8 !important;
  font-weight: 400 !important;
  color: #555 !important;
}

/* botón de la card tipo "pill" */
.services-multi .service-item .readmore {
  margin-top: 22px;
  padding: 11px 28px;
  border-radius: 30px;
  font-weight: 600;
}

/* ============================================================
   5) CARDS OSCURAS (.services del home) — también elevan
   ============================================================ */
.services .service-item {
  border-radius: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.services .service-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.30);
}

/* ============================================================
   6) ABOUT — texto más grande, aireado, sin itálica ni justificado
   ============================================================ */
/* columna de la imagen más ancha en desktop para que no quede chica */
@media (min-width: 992px) {
  .about > .container > .row > .col-lg-4 {
    flex: 0 0 auto;
    width: 42%;
  }
  .about > .container > .row > .col-lg-5.content {
    flex: 0 0 auto;
    width: 50%;
  }
}

/* imagen que llena su columna y acompaña la altura del texto */
.about img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 460px;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.40);
}
@media (max-width: 991px) {
  .about img { min-height: 280px; }
}

.about .content h2 {
  font-size: 30px !important;
  line-height: 1.3 !important;
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 6px;
}
.about .content h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  height: 4px;
  background: var(--acento);
  border-radius: 4px;
}

.about .content p {
  font-size: 16.5px !important;
  line-height: 1.9 !important;
  font-style: normal !important;
  text-align: left !important;
  color: #f3eef2 !important;
}

/* ============================================================
   7) "POR QUÉ ELEGIRNOS" (testimonials) — tarjeta de verdad
   ============================================================ */
.testimonials { padding: 70px 0 !important; }

.testimonials .testimonial-item .testimonial-content {
  background: rgba(255, 255, 255, 0.08);
  border-left: 5px solid var(--acento);
  border-radius: 0 16px 16px 0;
  padding: 34px 36px !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
}
.testimonials .testimonial-item .testimonial-content h3 {
  letter-spacing: 1px;
  margin-bottom: 14px;
  font-size: 22px !important;
}
.testimonials .testimonial-item .testimonial-content p {
  line-height: 1.8;
  font-size: 15.5px;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.45) !important;
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--acento) !important;
}

/* ============================================================
   8) EQUIPO — tarjetas blancas, foto con zoom, nombres legibles
   ============================================================ */
/* las columnas del equipo quedan a igual altura */
.team .row > [class*="col-"] { display: flex; }

.team .team-member {
  background: #fff !important;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.team .team-member:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.38);
}

/* foto con alto fijo y recorte parejo, así todas quedan iguales */
.team .team-member .member-img {
  max-height: none !important;
  height: 300px;
  overflow: hidden;
}
.team .team-member .member-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s ease;
}
.team .team-member:hover .member-img img { transform: scale(1.06); }

/* el bloque de texto crece para alinear el fondo de todas las cards */
.team .team-member .member-info {
  padding: 24px 20px 30px !important;
  flex: 1 1 auto;
}
.team .team-member .member-info h4 {
  color: #2a5159 !important;
  font-size: 21px !important;
  margin-bottom: 8px !important;
}
.team .team-member .member-info span {
  color: #555 !important;
  font-size: 14px !important;
  line-height: 1.6;
}

/* ============================================================
   9) BOTONES — con vida; los de WhatsApp en verde
   ============================================================ */
.btn-get-started, .btn-get-started2,
.hero .btn-get-started, .hero2 .btn-get-started {
  box-shadow: 0 4px 14px rgba(89, 42, 81, 0.30);
  border-radius: 30px;
}
.btn-get-started:hover, .btn-get-started2:hover,
.hero .btn-get-started:hover, .hero2 .btn-get-started:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(42, 81, 89, 0.40);
  color: #fff;
}
.readmore { border-radius: 30px; }
.readmore:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(42, 81, 89, 0.35);
}

/* (Los botones de WhatsApp vuelven al color de marca del template:
   violeta/verde petróleo. Sin verde fluor.) */

/* ============================================================
   10) HEADER — sombra sutil
   ============================================================ */
.header { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18); }

/* ============================================================
   10b) REDES EN EL FOOTER — visibles también en mobile
   ============================================================ */
.footer-social {
  text-align: center;
  margin-bottom: 16px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 0 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 19px;
  transition: all 0.25s ease;
}
.footer-social a:hover {
  background: #fff;
  color: #592a51;
  transform: translateY(-3px);
}

/* ============================================================
   11) BOTÓN FLOTANTE DE WHATSAPP — verde, siempre visible + pulso
   ============================================================ */
.scroll-top:has(.bi-whatsapp) {
  visibility: visible !important;
  opacity: 1 !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 58px !important;
  height: 58px !important;
  background: #25d366 !important;
  display: flex !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  animation: wa-pulse 2.2s infinite;
}
.scroll-top:has(.bi-whatsapp):hover {
  background: #1ebe5d !important;
  transform: scale(1.06);
  animation: none;
}
.scroll-top:has(.bi-whatsapp) i { font-size: 30px; }

@keyframes wa-pulse {
  0%   { box-shadow: 0 6px 20px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.45); }
  70%  { box-shadow: 0 6px 20px rgba(37,211,102,.45), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 6px 20px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,0); }
}

@media (max-width: 575px) {
  .scroll-top:has(.bi-whatsapp) {
    width: 52px !important; height: 52px !important;
    bottom: 16px !important; right: 16px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-top:has(.bi-whatsapp) { animation: none; }
}