/* =========================================================
   MOTORMAN — tema inspirado en liqui-moly.com.py
   Cargar DESPUÉS de style-liqui-moly-3.css:
   <link href="css/motorman-liqui-theme.css" rel="stylesheet">
   ========================================================= */

/* ---------- 1. Variables de diseño ---------- */
:root {
  --lm-blue: #0056A4;
  --lm-blue-dark: #003B7A;
  --lm-red: #E30613;
  --lm-red-dark: #B0050F;
  --lm-navy: #0D1B2A;
  --lm-ink: #16202C;
  --lm-text: #4A5563;
  --lm-light: #F4F6F9;
  --lm-line: #E3E8EF;
  --lm-radius: 8px;
  --lm-shadow: 0 4px 20px rgba(0, 0, 0, .08);
  --lm-shadow-lg: 0 12px 32px rgba(0, 0, 0, .16);
  --lm-ease: cubic-bezier(.7, 1, .7, 1);
}

/* ---------- 2. Base / tipografía ---------- */
body {
  color: var(--lm-text);
  background: #fff;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Montserrat, sans-serif;
  color: var(--lm-ink);
  letter-spacing: .01em;
}

h2 { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
h3 { font-weight: 700; text-transform: none; }

a { transition: color .25s var(--lm-ease); }
a:hover, a:focus { color: var(--lm-red); }

p { color: var(--lm-text); }

/* Títulos de sección con barra roja (centrados) */
.g-text-center--xs h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}
.g-text-center--xs h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 4px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--lm-red) 0 60%, var(--lm-blue) 60% 100%);
  border-radius: 2px;
}

/* ---------- 3. Barra de navegación ---------- */
.probootstrap_navbar {
  border-top: 4px solid var(--lm-red);
  border-bottom: 0;
}

/* Cinta tricolor plegada (rojo / blanco / azul) a la derecha del menú.
   Es un SVG embebido: sube en diagonal, baja en vertical y vuelve a subir,
   con sombras en los pliegues. Se escala con el alto de la barra. */

   /*
.s-header-v2__navbar::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 130px;
  height: 100%;
  transform: none;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpolygon points='45,100 75,100 120,22 90,22'/%3E%3C/clipPath%3E%3ClinearGradient id='h'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='t' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='.35'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon fill='%23E30613' points='45,100 55,100 100,22 90,22'/%3E%3Cpolygon fill='%23fff' stroke='%23d9dee6' stroke-width='.5' points='55,100 65,100 110,22 100,22'/%3E%3Cpolygon fill='%230056A4' points='65,100 75,100 120,22 110,22'/%3E%3Cpolygon fill='%23E30613' points='0,100 10,100 55,22 45,22'/%3E%3Cpolygon fill='%23fff' stroke='%23d9dee6' stroke-width='.5' points='10,100 20,100 65,22 55,22'/%3E%3Cpolygon fill='%230056A4' points='20,100 30,100 75,22 65,22'/%3E%3Crect x='45' y='22' width='10' height='78' fill='%23E30613'/%3E%3Crect x='55' y='22' width='10' height='78' fill='%23fff'/%3E%3Cline x1='55' y1='22' x2='55' y2='100' stroke='%23d9dee6' stroke-width='.5'/%3E%3Cline x1='65' y1='22' x2='65' y2='100' stroke='%23d9dee6' stroke-width='.5'/%3E%3Crect x='65' y='22' width='10' height='78' fill='%230056A4'/%3E%3Crect x='75' y='22' width='14' height='78' fill='url(%23h)' clip-path='url(%23c)'/%3E%3Cpolygon points='45,22 75,22 45,50' fill='url(%23t)'/%3E%3C/svg%3E") no-repeat right top / auto 100%;
}
*/

.s-header-v2__navbar::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 130px;
  height: 100%;
  transform: none;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='l' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='.28'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon fill='%23E30613' points='45.0,0.0 130,0.0 130,33.3 36.7,33.3'/%3E%3Cpolygon fill='%23ffffff' stroke='%23d9dee6' stroke-width='.5' points='36.7,33.3 130,33.3 130,66.7 28.3,66.7'/%3E%3Cpolygon fill='%230056A4' points='28.3,66.7 130,66.7 130,100.0 20.0,100.0'/%3E%3Cpolygon points='45,0 70,0 45,100 20,100' fill='url(%23l)'/%3E%3C/svg%3E") no-repeat right top / 100% 100%;
}



/* En móvil el botón del menú ocupa ese lugar: se oculta la cinta */
@media (max-width: 61.9em) {
  .s-header-v2__navbar::after { display: none; }
}

/* Logo más grande (solo escritorio) */
@media (min-width: 62em) {
  .s-header-v2__navbar-col-width--180 { width: 250px; }
  .s-header-v2__logo-img--default,
  .s-header-v2__logo-img--shrink {
    height: 84px !important;
    max-height: 84px !important;
    width: auto !important;
    max-width: none !important;
    padding-bottom: 0 !important;
  }
}
@media (max-width: 61.9em) {
  .s-header-v2__logo-img--shrink { width: auto !important; height: 58px; max-width: none; }
}

.s-header-v2__nav-link {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .08em;
  border-radius: 6px !important;
}

/* Estado "scrolled": barra blanca y enlaces oscuros */
.probootstrap_navbar.scrolled.probootstrap_scrolled-light {
  background: #fff !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .10);
}
.probootstrap_navbar.scrolled.probootstrap_scrolled-light ul li a {
  color: var(--lm-ink) !important;
}
.probootstrap_navbar.scrolled.probootstrap_scrolled-light ul li a:hover,
.probootstrap_navbar.scrolled.probootstrap_scrolled-light ul li.active a {
  color: var(--lm-red) !important;
}
.probootstrap_navbar.scrolled .s-header-v2__nav-link { line-height: 4.2rem; }

/* ---------- 4. Hero / slider ---------- */
.s-swiper.js__swiper-one-item .swiper-slide h2 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.1;
}
.s-swiper.js__swiper-one-item .swiper-slide h4 {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
}
.s-swiper.js__swiper-one-item .swiper-slide .list-inline-item h4 { margin: 0; }
.s-swiper.js__swiper-one-item .swiper-slide .list-inline-item + .list-inline-item {
  border-left: 2px solid var(--lm-red);
  padding-left: 1rem;
  margin-left: .5rem;
}

/* Panel azul + línea roja: MISMA inclinación (skewX) para que el borde
   derecho del panel quede alineado con la línea roja en cualquier alto.
   Para cambiar el ángulo, modificar --lm-skew (aplica a ambos). */
.s-swiper.js__swiper-one-item { --lm-skew: 18deg; --lm-edge: 20%; --lm-gap: 14px; }

.s-swiper.js__swiper-one-item .swiper-slide { overflow: hidden; }

.s-swiper.js__swiper-one-item .swiper-slide::before {
  clip-path: none;
  left: -40%;
  width: calc(var(--lm-edge) + 40%);   /* borde derecho = var(--lm-edge) */
  transform: skewX(var(--lm-skew));
  transform-origin: top center;
}
.s-swiper.js__swiper-one-item .swiper-slide::after {
  left: calc(var(--lm-edge) + var(--lm-gap));   /* separación entre azul y rojo */
  width: 6px;
  transform: skewX(var(--lm-skew));
  transform-origin: top center;
}

@media (max-width: 768px) {
  .s-swiper.js__swiper-one-item { --lm-skew: 14deg; --lm-edge: 42%; --lm-gap: 10px; }
  .s-swiper.js__swiper-one-item .swiper-slide::before { clip-path: none; width: calc(var(--lm-edge) + 40%); }
  .s-swiper.js__swiper-one-item .swiper-slide::after { left: calc(var(--lm-edge) + var(--lm-gap)); width: 5px; }
}

/* El texto del slide queda por encima del panel azul */
.s-swiper.js__swiper-one-item .swiper-slide > .container { z-index: 4; }

/* El panel azul y la línea roja son SOLO del hero (#inicio).
   Cualquier otro swiper (marcas, testimonios, etc.) no los muestra. */
.s-swiper:not(#inicio) .swiper-slide::before,
.s-swiper:not(#inicio) .swiper-slide::after {
  display: none !important;
}

/* Slide de promo: sin panel azul ni línea roja para no tapar el banner.
   Agregar class="slide-promo" al <div class="swiper-slide"> de la promo. */
.s-swiper.js__swiper-one-item .swiper-slide.slide-promo::before,
.s-swiper.js__swiper-one-item .swiper-slide.slide-promo::after {
  display: none;
}

/* Flechas */
.s-swiper__arrow-v1--right,
.s-swiper__arrow-v1--left {
  background: rgba(255, 255, 255, .12) !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}
.s-swiper__arrow-v1--right:hover,
.s-swiper__arrow-v1--left:hover {
  background: var(--lm-red) !important;
  border-color: var(--lm-red) !important;
}

/* ---------- 5. Botones ---------- */
.s-btn {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-radius: 50px;
}
.s-btn--primary-bg,
#botonSubmit {
  background: var(--lm-red) !important;
  border-color: var(--lm-red) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(227, 6, 19, .28);
}
.s-btn--primary-bg:hover,
#botonSubmit:hover {
  background: var(--lm-red-dark) !important;
  border-color: var(--lm-red-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(227, 6, 19, .38);
}

/* ---------- 6. Servicios ---------- */
#servicios .col-sm-6 {
  background: #fff;
  border: 1px solid var(--lm-line);
  border-top: 4px solid var(--lm-blue);
  border-radius: var(--lm-radius);
  padding: 28px 24px;
  margin-bottom: 24px;
  transition: transform .3s var(--lm-ease), box-shadow .3s var(--lm-ease), border-top-color .3s;
}
#servicios .col-sm-6:hover {
  transform: translateY(-4px);
  box-shadow: var(--lm-shadow-lg);
  border-top-color: var(--lm-red);
}
#servicios h3 {
  color: var(--lm-blue);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
#servicios .g-media i { color: var(--lm-blue) !important; }
#servicios .col-sm-6:hover .g-media i { color: var(--lm-red) !important; transform: scale(1.1); }

#servicios ul { list-style: none; }
#servicios ul li { position: relative; padding-left: 18px; margin-bottom: 6px; }
#servicios ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--lm-red);
  font-weight: 700;
}

/* ---------- 7. Logos de marcas / alianzas ---------- */
.s-clients-v0,
.s-clients-v1 {
  filter: grayscale(100%);
  opacity: .75;
  transition: filter .4s ease, opacity .4s ease, transform .4s ease;
}
.s-clients-v0:hover,
.s-clients-v1:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.06);
}

/* ---------- 8. Blog (tarjetas) ---------- */
#blog { margin: 20px; padding: 60px 0; background: var(--lm-light); }

#ultimas-entradas {
  display: flex !important;
  flex-wrap: wrap;
  gap: 24px !important;
  max-width: 1000px;
  margin: 0 auto !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.post-wrapper {
  display: flex;
  flex-direction: column;
  width: calc(50% - 12px) !important;
  flex: 0 0 calc(50% - 12px) !important;
  background: #fff;
  border: 0 !important;
  border-radius: var(--lm-radius);
  overflow: hidden;
  box-shadow: var(--lm-shadow);
  transition: transform .3s var(--lm-ease), box-shadow .3s var(--lm-ease);
}
.post-wrapper:hover { transform: translateY(-4px); box-shadow: var(--lm-shadow-lg); }

.post-thumbnail {
  height: 210px;
  overflow: hidden;
  flex: none;
  background: var(--lm-light) url('../img/logo.png') center / 90px auto no-repeat; /* placeholder si falta la imagen */
}
.post-thumbnail img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: cover;
  transition: transform .5s ease;
}
.post-wrapper:hover .post-thumbnail img { transform: scale(1.07); }

.post-content { padding: 22px 26px 26px; flex: 1; }
.post-content h2 { font-size: 1.1rem; text-transform: none; letter-spacing: 0; }
.post-content h2 a { color: var(--lm-blue); }
.post-content h2 a:hover { color: var(--lm-red); }
.post-content p { font-size: .9rem; line-height: 1.7; }
.post-content p a { color: var(--lm-red); font-weight: 700; }

@media (max-width: 768px) {
  .post-wrapper { width: 100% !important; flex: 0 0 100% !important; }
  .post-thumbnail { height: 180px; }
}

/* ---------- 9. Suscripción ---------- */
#subs { position: relative; }
#subs::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 86, 164, .93), rgba(0, 59, 122, .93));
  z-index: 1;
}
#subs .container,
#subs .g-container--sm { position: relative; z-index: 2; }
#subs h2, #subs p { color: #fff !important; }
#subs .form-control {
  background: rgba(255, 255, 255, .12);
  border: 2px solid rgba(255, 255, 255, .35);
  color: #fff;
}
#subs .form-control::placeholder { color: rgba(255, 255, 255, .75); }
#subs .form-control:focus {
  border-color: var(--lm-red);
  box-shadow: 0 0 0 4px rgba(227, 6, 19, .25);
}
#subs .s-btn {
  color: #fff;
  background: var(--lm-red);
  border-color: var(--lm-red);
}
#subs .s-btn:hover { background: var(--lm-red-dark); border-color: var(--lm-red-dark); }

/* ---------- 10. Testimonios ---------- */
#testimonios { position: relative; }
#testimonios::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(244, 246, 249, .94);
  z-index: 1;
}
#testimonios .container { position: relative; z-index: 2; }
#testimonios p i { font-weight: 300; line-height: 1.5; }
#testimonios p i::before {
  content: '“';
  display: block;
  font-size: 4rem;
  line-height: .6;
  color: var(--lm-red);
  font-family: Georgia, serif;
}

/* ---------- 11. Formulario de contacto ---------- */
.contactForm .form-control {
  background: #FAFAFA;
  border: 2px solid var(--lm-line);
  border-radius: var(--lm-radius);
  padding: 14px 20px;
  font-size: .9rem;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.contactForm .form-control:focus {
  background: #fff;
  border-color: var(--lm-blue);
  box-shadow: 0 0 0 4px rgba(0, 86, 164, .12);
}
.contactForm textarea.form-control { border-radius: 12px; }
#botonSubmit { width: auto; padding: 14px 52px; border: 0; }

/* ---------- 12. Footer ---------- */
footer.g-bg-color--dark-light {
  background: var(--lm-navy) !important;
  border-top: 4px solid var(--lm-red);
}
footer h3, footer h4 { text-transform: uppercase; letter-spacing: .08em; }
footer a.g-color--white-opacity { transition: color .25s, padding-left .25s; }
footer a.g-color--white-opacity:hover { color: var(--lm-red) !important; padding-left: 4px; }

/* ---------- 13. Redes sociales (barra lateral) ---------- */
.social-bar .icon { background: var(--lm-blue); transition: all .35s var(--lm-ease); }
.social-bar .icon:nth-child(even) { background: var(--lm-blue-dark); }
.social-bar .icon:hover { background: var(--lm-red) !important; }

/* ---------- 14. Botón WhatsApp flotante ---------- */
.s-back-to-top {
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .3));
}
.s-back-to-top:hover { transform: translateY(-3px) scale(1.06); }

/* ---------- 15. Promo spot dentro del slide ---------- */
.promo-spot a {
  border: 3px solid var(--lm-red);
  border-radius: 10px;
}

/* ---------- 16. Mapa y scrollbar ---------- */
section iframe { filter: grayscale(25%); transition: filter .3s; }
section iframe:hover { filter: none; }

::selection { background: var(--lm-blue); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--lm-light); }
::-webkit-scrollbar-thumb { background: var(--lm-blue); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--lm-blue-dark); }