:root {
  --pk-orange: #c03;
  --pk-gray-50: #fafafa;
  --pk-gray-100: #eeeeee;
  --pk-gray-200: #dddddd;
  --pk-gray-700: #374151;
  --pk-gray-900: #111827;
  --pk-text: #1f2937;
  --wsp-green: #25D366;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  color: var(--pk-text);
  background: #fff;
  line-height: 1.4;
  margin: 0;
}

.section-pad {
  padding: 4rem 0;
}

.section-title {
  font-weight: 900;
  letter-spacing: -0.3px;
  color: var(--pk-gray-700);
}

.btnPrimary {
  background: var(--pk-gray-700);
  color: #fff !important;
  border: none;
  padding: .8rem 1.25rem;
  border-radius: .7rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.btnPrimary:hover {
  background: var(--pk-gray-900);
  transform: translateY(-1px);
  border-bottom: 3px solid var(--pk-orange);
}

.btnWsp {
  background-color: var(--wsp-green) !important;
  color: #fff !important;
  border: none;
  padding: .6rem 1.25rem;
  border-radius: .7rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.btnWsp:hover {
  background-color: #128C7E !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.hero {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0;
  overflow: hidden;
  background: var(--pk-gray-50);
}

.hero-title {
  font-weight: 800;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1.1;
}

.hero-title .accent {
  color: var(--pk-orange);
}

.hero-sub {
  font-size: 1.05rem;
  color: var(--pk-gray-700);
  max-width: 42ch;
  margin: 1rem 0 1.5rem;
}

.hero-product {
  position: relative;
  min-height: 360px;
}

.hero-product-img {
  position: relative;
  width: min(520px, 90%);
  display: block;
  margin: 0 auto;
  z-index: 2;
  filter: drop-shadow(0 25px 40px rgba(0, 0, 0, .15));
}

.prod-card {
  border: 1px solid var(--pk-gray-100);
  border-radius: 16px;
  padding: 1.2rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color 0.3s ease;
}

.prod-card:hover {
  border-color: var(--pk-orange);
}

.prod-img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  background: var(--pk-gray-50);
  border-radius: 12px;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--pk-gray-100);
}

.prod-card h4 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: .5rem;
  color: var(--pk-gray-700);
}

.prod-desc {
  font-size: .9rem;
  color: var(--pk-gray-700);
  flex-grow: 1;
  margin-bottom: 1rem;
}

.fe-ref {
  background: #fff;
}

.fe-head {
  text-align: center;
  margin-bottom: 2rem;
}

.fe-wrap {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 992px) {
  .fe-wrap {
    grid-template-columns: 1fr 1fr;
  }
}

.fi-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  border-radius: 16px;
  background: var(--pk-gray-50);
  margin-bottom: 10px;
}

.fi-ico {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  border: 1px solid var(--pk-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--pk-gray-700);
  background: #fff;
}

.fi-text h4 {
  margin: 0 0 .3rem;
  font-weight: 800;
  color: var(--pk-gray-700);
}

.posi-cards {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .posi-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.posi-card {
  background: #fff;
  border: 1px solid var(--pk-gray-100);
  border-radius: 16px;
  padding: 1.5rem;
  height: 100%;
}

.posi-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--pk-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pk-orange);
  margin-bottom: 1rem;
}

.bf-box {
  background: #fff;
  border: 1px solid var(--pk-gray-100);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.benefits-list li {
  position: relative;
  padding-left: 42px;
  line-height: 1.5;
  font-size: 0.95rem;
}

.benefits-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  background: var(--pk-gray-700);
  color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

.bf-box.bf-hero {
  background-size: cover;
  color: #fff;
}


.bf-box.bf-hero .section-title {
  color: #111;
}

.bf-box.bf-hero .benefits-list li::before {
  background: var(--pk-orange);
}

.form-compact .form-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--pk-gray-700);
}

.form-compact .form-control,
.form-compact .form-select {
  padding: .5rem;
  border: 1px solid var(--pk-gray-200);
  border-radius: .5rem;
}

.cta-inner {
  background: var(--pk-gray-700);
  color: #fff;
  padding: 3rem;
  border-radius: 20px;
  border-bottom: 5px solid var(--pk-orange);
}

.site-header {
  padding: 1rem 0;
  border-bottom: 1px solid var(--pk-gray-100);
}

.brand-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  .brand-logo {
    height: 32px;
  }
}

.btnWsp {
  background-color: #25D366 !important;
  color: #fff !important;
  border: none;
  padding: .6rem 1.25rem;
  border-radius: .7rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.btnWsp:hover {
  background-color: #128C7E !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* El nuevo icono desde la fuente de Bootstrap Icons */
.btnWsp::before {
  content: "\f618"; /* Código de WhatsApp en Bootstrap Icons */
  font-family: "bootstrap-icons";
  font-size: 1.2rem;
  display: inline-block;
}

.brand-slider {
  border-top: 1px solid var(--pk-gray-100);
  border-bottom: 1px solid var(--pk-gray-100);
}

.brand-row {
  padding: 20px 0;
}

.brand-item {
  max-width: 140px;
  max-height: 60px;
  object-fit: contain;
  filter: grayscale(100%); /* Logos en gris */
  opacity: 0.6;
  transition: all 0.4s ease;
}

.brand-item:hover {
  filter: grayscale(0%); /* Color original al pasar el mouse */
  opacity: 1;
  transform: scale(1.1);
}

/* Ajuste para móviles */
@media (max-width: 768px) {
  .brand-item {
    max-width: 100px;
    margin: 0 10px;
  }
}

/* --- Estilos para la sección Hero --- */
.hero {
  /* Asegura que la sección tenga un relleno superior e inferior para respirar */
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #ffffff; /* O el color de fondo que desees */
  /* Opcional: Centrado vertical si la sección es muy alta (ej. min-vh-100)
     y usas la clase d-flex en el container, pero con align-items-center
     en la row de Bootstrap suele ser suficiente. */
}

/* --- Ajustes del Contenedor de Texto --- */
.hero-title {
  font-weight: 800; /* Super negrita */
  font-size: 3.5rem; /* Tamaño grande, ajústalo según necesites */
  line-height: 1.1;
  color: #000000;
  margin-bottom: 20px;
}

.hero-title .accent {
  color: #C11F4A; /* El color rojo-púrpura del logo y el texto original */
}

.hero-sub {
  font-size: 1.25rem; /* Subtítulo un poco más grande */
  color: #555555;
  margin-bottom: 30px;
  max-width: 550px; /* Evita que el texto se estire demasiado a lo ancho */
}

.benefits-list {
  list-style: none; /* Quitamos los puntos por defecto */
  padding-left: 0;
}

.benefits-list li {
  font-size: 1.1rem;
  color: #333333;
  margin-bottom: 15px;
  position: relative;
  padding-left: 35px; /* Espacio para el icono */
}

/* Iconos de check para la lista (estilo FontAwesome o similar) */
.benefits-list li::before {
  content: '\f00c'; /* Código de icono de check (ej. FontAwesome) */
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
  font-weight: 900;
  color: #fff;
  background-color: #C11F4A; /* Color de fondo del check */
  border-radius: 5px; /* Bordes redondeados */
  padding: 5px;
  font-size: 0.8rem;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* Centrado vertical */
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Estilos de Botones (Opcionales, pero recomendados para el diseño) --- */
.btnPrimary {
  display: inline-block;
  padding: 12px 30px;
  background-color: #2D3E50; /* Color azul oscuro del botón */
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btnPrimary:hover {
  background-color: #1a2530;
  color: #ffffff;
}

.btnWsp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 30px;
  background-color: #25D366; /* Color verde WhatsApp */
  color: #ffffff;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btnWsp::before {
  content: '\f232'; /* Icono de WhatsApp (FontAwesome) */
  font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands', sans-serif;
}

.btnWsp:hover {
  background-color: #1ebe59;
  color: #ffffff;
}

/* --- Ajustes de la Imagen Grande (Aquí está la clave) --- */

.hero-product {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center;    /* Centra verticalmente */
  /* height: 100%; */      /* Se adaptará al contenedor de la fila */
  overflow: visible;      /* Asegura que no se corte */
}

.hero-product-img {
  max-width: 100%;       /* Asegura que no se desborde horizontalmente */
  height: auto;           /* Mantiene la proporción */
  /* width: 100%; */       /* Haz que ocupe todo el ancho disponible si quieres que sea MUY grande */
  /* max-height: 80vh; */   /* Evita que sea más alta que el 80% del visor */
  /* box-shadow: 0 10px 30px rgba(0,0,0,0.1); */ /* Opcional: Una sombra suave para dar profundidad */
}

/* --- Responsive (Para móviles) --- */
@media (max-width: 991.98px) {
  .hero-title {
    font-size: 2.5rem; /* Título más pequeño en móviles */
    text-align: center;
  }
  .hero-sub {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .benefits-list {
    display: inline-block;
    text-align: left;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .d-flex.gap-3.flex-wrap {
    justify-content: center;
  }
  
  .hero-product {
    margin-top: 50px; /* Espacio antes de la imagen en móviles */
    justify-content: center;
  }
  
  .hero-product-img {
    max-width: 80%; /* Imagen no tan gigante en móviles */
  }
}

/* Contenedor de la lista */
.benefits-list {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.benefits-list li {
  display: flex;
  align-items: center;
  gap: 15px; /* Espacio entre icono y texto */
  margin-bottom: 12px;
  font-size: 1.05rem;
  color: #333;
}

.benefits-list li::before {
  content: '✓'; /* Un check simple si no tienes FontAwesome */
  display: flex;
  align-items: center;
  justify-content: center;
  
  background-color: #2D3E50; /* Azul oscuro del botón */
  color: white;
  
  min-width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  
  flex-shrink: 0; 
}

.benefits-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.benefits-list li img, 
.benefits-list li i {
  width: 28px;
  height: 28px;
}

/* Estilo específico para el botón de WhatsApp */
.btnWsp {
  background-color: #25D366; /* Verde oficial */
  color: white !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}

.btnWsp:hover {
  background-color: #1ebe59;
}

/* Si usas un <img> dentro del botón de WhatsApp */
.btnWsp img {
  width: 20px;
  height: 20px;
  display: block;
}

/* Si usas FontAwesome (<i>) dentro del botón */
.btnWsp i {
  font-size: 20px;
  color: white;
}

/* --- BOTÓN WHATSAPP DEFINITIVO --- */
.btnWsp {
  background-color: #25D366 !important;
  color: #fff !important;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.btnWsp:hover {
  background-color: #1ebe59 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

/* Icono de WhatsApp usando un SVG directo (no requiere librerías) */
.btnWsp::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  /* Este es el dibujo del logo de WhatsApp en formato máscara */
  mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-5.5-2.8-23.2-8.5-44.2-27.1-16.4-14.6-27.4-32.7-30.6-38.2-3.2-5.6-.3-8.6 2.4-11.3 2.5-2.4 5.5-6.5 8.3-9.8 2.8-3.2 3.7-5.5 5.5-9.3 1.9-3.7.9-6.9-.5-9.8-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 13.2 5.8 23.5 9.2 31.5 11.8 13.3 4.2 25.4 3.6 35 2.2 10.7-1.5 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-5.5-2.8-23.2-8.5-44.2-27.1-16.4-14.6-27.4-32.7-30.6-38.2-3.2-5.6-.3-8.6 2.4-11.3 2.5-2.4 5.5-6.5 8.3-9.8 2.8-3.2 3.7-5.5 5.5-9.3 1.9-3.7.9-6.9-.5-9.8-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 13.2 5.8 23.5 9.2 31.5 11.8 13.3 4.2 25.4 3.6 35 2.2 10.7-1.5 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}