/* ============================================================
   Caso de Éxito — MARVAL Súper Farmacias
   Todo encapsulado bajo #home-section.caso-marval (.cm-*).
   Colores: docs/caso-exito-marval/03-TEXTOS-Y-COLORES.md
   ============================================================ */

#home-section.caso-marval{
   padding: 0 !important;
   display: block;
   overflow: hidden;
   font-size: 18px;
   font-family: "Nunito Sans", sans-serif;
   color: #555;
}
.caso-marval .container{ max-width: 1140px; }

/* Títulos de sección (azul marca) */
.caso-marval .cm-section-title{
   color: #1C6091;
   font-size: 32px;
   font-weight: 700;
   font-family: "Nunito Sans", sans-serif;
}

/* Botón naranja (mismo estilo que .btn-pharmacy de unete; no es global) */
.caso-marval .btn-pharmacy{
   background: #ff6600;
   border-radius: 10px !important;
   padding: 11px 30px !important;
   border: 1px solid #ff6600 !important;
   font-size: 20px;
   color: #fff;
   font-weight: 600;
}
.caso-marval .btn-pharmacy:hover{ border: 1px solid #461343 !important; color: #fff; }

/* ===================== B1 HERO ===================== */
.caso-marval .cm-hero{
   position: relative;
   width: 100%;
   min-height: 505px;
   display: flex;
   align-items: center;
   background: url(../images/casos-de-exito/marval/Caso-de-exito-PharmacyLite-Marval.webp) center right / cover no-repeat;
}
.caso-marval .cm-hero:before{
   content: '';
   position: absolute; top: 0; left: 0; right: 0; bottom: 0;
   background: linear-gradient(90deg, rgba(1,67,150,.94) 0%, rgba(11,91,161,.80) 35%, rgba(11,91,161,.25) 68%, rgba(11,91,161,0) 100%);
}
.caso-marval .cm-hero .content-data-slide{ position: relative; z-index: 2; }
.caso-marval .text-slide{ padding-left: 8%; }
.caso-marval .cm-eyebrow{
   color: #ffffff; font-size: 16px; font-weight: 600; letter-spacing: .03em; margin: 0;
}
.caso-marval .cm-hero-title{
   color: #fff; font-weight: 700; font-size: 40px; line-height: 1.22;
   font-family: "Nunito Sans", sans-serif;
}
.caso-marval .cm-hero-sub{
   color: #e9f2fb; font-size: 20px; line-height: 1.6; max-width: 520px;
   text-shadow: 0 1px 3px rgba(0,0,0,.2); margin: 0;
}

/* ===================== B2 QUOTE ===================== */
.caso-marval .cm-quote{ background: #E8F9FC; padding: 67px 0; }
.caso-marval .cm-quote-text{
   color: #333333; font-size: 30px; font-weight: 700; line-height: 1.45; margin-bottom: 18px;
}
.caso-marval .cm-quote-text-2{ font-weight: 400; }
.caso-marval .cm-quote-author{ color: #1d6fa5; font-weight: 700; font-size: 20px; }
.caso-marval .cm-quote-role{ color: #555; font-size: 20px; margin: 0; }

/* ===================== B3 KPIs ===================== */
.caso-marval .cm-kpis{ background: #fff; padding: 61px 0; }
.caso-marval .cm-kpi{ text-align: center; margin-bottom: 10px; }
.caso-marval .cm-kpi-ico{ height: 62px; width: auto; margin-bottom: 18px; }
.caso-marval .cm-kpi-num{ color: #17AFCB; font-size: 30px; font-weight: 700; margin-bottom: 6px; }
.caso-marval .cm-kpi-num .cm-arrow{ color: #17AFCB; font-weight: 400; }
.caso-marval .cm-kpi-label{ color: #555; font-size: 20px; line-height: 1.4; margin: 0; }

/* ===================== B4 VIDEOS ===================== */
.caso-marval .cm-videos{
   background: linear-gradient(90deg, #EBE2EB 0%, #FCF3ED 100%); padding: 68px 0 70px;
}
.caso-marval .cm-video{ position: relative; border-radius: 8px; overflow: hidden; transition: all .25s ease; }
.caso-marval .cm-video img{ display: block; border-radius: 8px; }
.caso-marval .cm-video:hover{ transform: translateY(-3px); }
.caso-marval .cm-video-name{ color: #1d6fa5; font-weight: 700; font-size: 18px; }
.caso-marval .cm-video-role{ color: #555; font-size: 20px; margin-bottom: 12px; }
.caso-marval .cm-video-quote{ color: #444; font-size: 20px; line-height: 1.5; margin: 0; }

/* ===================== B5 CRECEN ===================== */
.caso-marval .cm-crecen{ background: #fff; padding: 60px 0; }
.caso-marval .cm-block-title{ color: #1C6091; font-size: 32px; font-weight: 700; line-height: 1.25; }
.caso-marval .cm-crecen p{ color: #444; font-size: 20px; line-height: 1.55; }
.caso-marval .cm-crecen img{ border-radius: 8px; }

/* ===================== B6 DESAFÍO ===================== */
.caso-marval .cm-desafio{
   background: linear-gradient(90deg, #E7F3F5 0%, #EDE4ED 100%); padding: 60px 0;
}
.caso-marval .cm-desafio-row{ display: flex; flex-wrap: wrap; justify-content: center; }
.caso-marval .cm-desafio-item{ width: 20%; text-align: center; padding: 0 12px; }
.caso-marval .cm-desafio-item img{ height: 70px; width: auto; margin-bottom: 16px; }
.caso-marval .cm-desafio-item p{ color: #44525c; font-size: 20px; line-height: 1.4; margin: 0; }

/* ===================== B7 ¿POR QUÉ? + MAYORISTAS ===================== */
.caso-marval .cm-porque{ background: #fff; padding: 60px 0; }
.caso-marval .cm-mayoristas-title{ color: #333333; font-weight: 700; font-size: 25px; }
.caso-marval .cm-porque p{ color: #444; font-size: 18px; line-height: 1.55; }

/* ===================== B8 TARJETAS ===================== */
.caso-marval .cm-cards{ background: #fff; padding: 20px 0 55px; }
.caso-marval .cm-card-title{ color: #333333; font-weight: 700; font-size: 24px; margin-bottom: 14px; }
.caso-marval .cm-card-img{ border-radius: 10px; margin-bottom: 18px; }
.caso-marval .cm-card-sub{ color: #444; font-size: 20px; margin-bottom: 16px; line-height: 1.5; }
.caso-marval .cm-card-list{ list-style: none; padding: 0; margin: 0; }
.caso-marval .cm-card-list li{
   position: relative; padding-left: 30px; margin-bottom: 11px; color: #444; font-size: 20px; line-height: 1.45;
}
/* Palomita bicolor del diseño: trazo corto naranja + trazo largo teal */
.caso-marval .cm-card-list li:before{
   content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12 L9 17.5' fill='none' stroke='%23FF6600' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 17.5 L20 6' fill='none' stroke='%231E94B7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ===================== B9 FRASE ===================== */
.caso-marval .cm-frase{ background: #fff; padding: 15px 0 50px; }
.caso-marval .cm-frase p{
   color: #333333; font-size: 22px; font-weight: 700; line-height: 1.5; max-width: 760px; margin: 0 auto;
}

/* ===================== B10 CTA ===================== */
.caso-marval .cm-cta{ background: #fff; padding: 0; }
.caso-marval .cm-cta-box{
   background: url(../images/casos-de-exito/marval/Farmacias-en-Crecimiento-PharmacyLite.webp) center / cover no-repeat;
   padding: 78px 20px;
}
.caso-marval .cm-cta-title{ color: #fff; font-weight: 700; font-size: 30px; }
.caso-marval .cm-cta-sub{ color: #e9f2fb; font-size: 20px; max-width: 620px; margin: 0 auto; line-height: 1.6; }

/* ===================== Carruseles solo-móvil (B6 y B7) ===================== */
/* Neutralizar las reglas genéricas de owl que app.min.css aplica a toda sección
   (stage a 500px, <p> ocultos salvo .active.center, img al 50% !important,
   items con padding 10em, dots absolutos). Mismo patrón que soporte-farmacias. */
.caso-marval .owl-carousel .owl-stage{ height: auto !important; }
.caso-marval .owl-carousel .owl-item,
.caso-marval .owl-carousel .owl-item.active,
.caso-marval .owl-carousel .owl-item.active.center{
   padding: 0; margin: 0; height: auto; border-radius: 0; box-shadow: none;
}
.caso-marval .owl-carousel .owl-item p{ display: block !important; visibility: visible; padding: 0; }
.caso-marval .cm-desafio-carousel .owl-item img{ width: auto !important; margin: 0 auto 16px; }
.caso-marval .cm-porque-carousel .owl-item img{ width: 100% !important; }
.caso-marval .cm-kpis-carousel .owl-item img{ width: auto !important; margin: 0 auto 18px; }

/* Dentro del owl el ancho lo pone .owl-item; anular el width del grid */
.caso-marval .cm-desafio-carousel .cm-desafio-item{ width: 100%; padding: 0 4px; }
.caso-marval .cm-desafio-carousel .cm-desafio-item p{ font-size: 16px; }
.caso-marval .cm-porque-carousel .cm-porque-item{ padding: 0 4px; }
.caso-marval .cm-kpis-carousel .cm-kpi{ padding: 0 4px; margin-bottom: 0; }
.caso-marval .cm-kpis-carousel .cm-kpi-num{ font-size: 30px; }
.caso-marval .cm-kpis-carousel .cm-kpi-label{ font-size: 20px; }
.caso-marval .cm-mayoristas-movil{ margin-bottom: 0; }

/* Bullets de navegación: anular el posicionamiento absoluto de app.css
   (position:absolute + margin-top:-10em) y mostrarlos centrados debajo. */
.caso-marval .owl-carousel .owl-dots{
   display: block !important;
   position: relative; width: 100%; margin-top: 26px; text-align: center; line-height: 0;
}
.caso-marval .owl-carousel .owl-dots .owl-dot{
   display: inline-block; border: 0; padding: 0 !important; margin: 0 5px;
   background: transparent; opacity: 1; border-radius: 0;
}
.caso-marval .owl-carousel .owl-dots .owl-dot span{
   display: block; width: 10px; height: 10px; border-radius: 50%;
   background: #c5c5c5; opacity: .7; transition: background .2s, opacity .2s;
}
.caso-marval .owl-carousel .owl-dots .owl-dot.active span{ background: #1C6091; opacity: 1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 991px){
   .caso-marval .cm-hero-title{ font-size: 34px; }
   .caso-marval .cm-section-title,
   .caso-marval .cm-block-title{ font-size: 28px; }
   .caso-marval .cm-desafio-item{ width: 33.33%; margin-bottom: 24px; }
   .bloqueexpmovil{margin-bottom: 60px !important;}
   .cm-video-name{display: inline-block;}
   .cm-video-role{display: inline-block; margin-left: 8px;border-left: 1px solid #000;padding-left: 8px;}
}

@media screen and (max-width: 767px){
   #home-section.caso-marval{ font-size: 16px; }
   /* Hero móvil: usar la imagen MOVIL (trae el texto integrado) y ocultar el texto HTML */
   .caso-marval .cm-hero{
      background: none; min-height: auto; display: block; padding: 0;
   }
   .caso-marval .cm-hero:before{ display: none; }
   .caso-marval .cm-hero .content-data-slide{ display: none; }

   .caso-marval .cm-quote-text{ font-size: 21px; }
   .caso-marval .cm-section-title,
   .caso-marval .cm-block-title{ font-size: 30px; }
   .caso-marval .cm-block-title{ text-align: center; }
   .caso-marval .cm-crecen .col-md-6:first-child{ text-align: center; margin-bottom: 28px; }
   .caso-marval .cm-frase p{ font-size: 19px; }
   .caso-marval .cm-cta-title{ font-size: 25px; }
   .caso-marval .cm-cta-box{ padding: 40px 18px; background-position: left center; }
   .cm-porque .cm-section-title{margin: 0 10%;}
   .caso-marval .cm-porque p{ font-size: 18px; padding-top: 12px !important; }
   .caso-marval .cm-card-list li{ font-size: 18px; }
}