.elementor-439 .elementor-element.elementor-element-95a30a8{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-opacity:0.16;--overlay-mix-blend-mode:lighten;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:rgba(252, 185, 0, 0.25);--border-color:rgba(252, 185, 0, 0.25);--padding-top:60px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}.elementor-439 .elementor-element.elementor-element-95a30a8:not(.elementor-motion-effects-element-type-background), .elementor-439 .elementor-element.elementor-element-95a30a8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(167deg, #12448E 0%, #12448E 100%);}.elementor-439 .elementor-element.elementor-element-95a30a8::before, .elementor-439 .elementor-element.elementor-element-95a30a8 > .elementor-background-video-container::before, .elementor-439 .elementor-element.elementor-element-95a30a8 > .e-con-inner > .elementor-background-video-container::before, .elementor-439 .elementor-element.elementor-element-95a30a8 > .elementor-background-slideshow::before, .elementor-439 .elementor-element.elementor-element-95a30a8 > .e-con-inner > .elementor-background-slideshow::before, .elementor-439 .elementor-element.elementor-element-95a30a8 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://costamar.club/wp-content/uploads/2026/08/02_0002_Capa-5-copia-3.png");--background-overlay:'';background-position:bottom left;background-repeat:no-repeat;background-size:cover;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-439 .elementor-element.elementor-element-ceefcc2{text-align:center;}.elementor-439 .elementor-element.elementor-element-ceefcc2 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;color:#fcb900;}.elementor-439 .elementor-element.elementor-element-7bd16c8{text-align:center;}.elementor-439 .elementor-element.elementor-element-7bd16c8 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:40px;font-weight:800;line-height:1.2em;color:#ffffff;}.elementor-439 .elementor-element.elementor-element-8264a8d{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:50px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}@media(max-width:1024px){.elementor-439 .elementor-element.elementor-element-95a30a8{--padding-top:45px;--padding-bottom:45px;--padding-left:20px;--padding-right:20px;}}@media(min-width:768px){.elementor-439 .elementor-element.elementor-element-95a30a8{--width:100%;}.elementor-439 .elementor-element.elementor-element-8264a8d{--content-width:1200px;}}@media(max-width:767px){.elementor-439 .elementor-element.elementor-element-95a30a8::before, .elementor-439 .elementor-element.elementor-element-95a30a8 > .elementor-background-video-container::before, .elementor-439 .elementor-element.elementor-element-95a30a8 > .e-con-inner > .elementor-background-video-container::before, .elementor-439 .elementor-element.elementor-element-95a30a8 > .elementor-background-slideshow::before, .elementor-439 .elementor-element.elementor-element-95a30a8 > .e-con-inner > .elementor-background-slideshow::before, .elementor-439 .elementor-element.elementor-element-95a30a8 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-position:-141px 0px;}.elementor-439 .elementor-element.elementor-element-7bd16c8 .elementor-heading-title{font-size:26px;}.elementor-439 .elementor-element.elementor-element-8264a8d{--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}}/* Start custom CSS for container, class: .elementor-element-8264a8d *//* ============================================================================
   COSTAMAR CLUB — CSS "Instrucciones para el registro de compras"
   Pega esto en: Elementor > Personalizar (Site Settings) > CSS adicional,
   AL FINAL, después de costamar-guia-custom.css (este archivo DEPENDE de él:
   reutiliza .cmr-guia__banner, .cmr-guia__banner-title, .cmr-guia__content,
   .cmr-guia__col, .cmr-guia__h2, .cmr-guia__text y .cmr-guia__list — no las
   vuelvas a definir aquí, ya existen).

   El JSON "costamar-instrucciones-elementor.json" trae estas clases NUEVAS
   en "CSS Classes" (pestaña Avanzado):
     .cmr-instr               -> Wrapper exterior
     .cmr-instr__step         -> Fila de cada paso (sección con 2 columnas)
     .cmr-instr__step-icon    -> Columna angosta del ícono
     .cmr-instr__step-icon-i  -> El propio widget Icon
     .cmr-instr__step-body    -> Columna ancha (título + texto del paso)
     .cmr-instr__step-title   -> Modificador sobre .cmr-guia__h2, quita el
                                  margen superior grande para alinear con el ícono
     .cmr-instr__step-title--first -> Modificador SOLO en el título del paso 1
                                  (sin margen superior, es lo primero de la página)
     .cmr-instr__shot         -> Cada captura de pantalla (Image widget)
     .cmr-instr__status-list  -> Lista PENDIENTE/EN BODEGA/PROCESADA (Text Editor)

   Además reutiliza (ya definidas en costamar-guia-custom.css):
     .cmr-guia__banner, .cmr-guia__banner-title, .cmr-guia__content,
     .cmr-guia__col, .cmr-guia__h2, .cmr-guia__text, .cmr-guia__list

   NAMESPACING: prefijo exclusivo "cmr-instr", revisado contra hero.html,
   costamar-bloques / cta-contacto / servicios / guia custom.css — ningún
   nombre se repite.
   ============================================================================ */

:root{
  --cmr-blue:#12448e;
  --cmr-blue-dd:#08213f;
}

/* ---------------------------------------------------------------------------
   1. FILA DE CADA PASO (ícono + título + texto)
   --------------------------------------------------------------------------- */
.cmr-instr__step > .elementor-container{
  align-items:flex-start;
  gap:clamp(14px,2vw,22px);
  margin:2.4rem 0 0 !important;
}
.cmr-instr__step-icon{ padding-top:.2rem !important; }
.cmr-instr__step-icon-i .elementor-icon{
  color:var(--cmr-blue) !important; font-size:clamp(1.8rem,2.4vw,2.3rem) !important;
}
.cmr-instr__step-body > .elementor-widget-wrap{ padding:0 !important; }

/* el título del paso va pegado al ícono: menos margen superior que un h2 normal */
.cmr-instr__step-title .elementor-heading-title{ margin-top:0 !important; margin-bottom:.7rem !important; }
.cmr-instr__step-title--first .elementor-heading-title{ margin-top:0 !important; }

/* ---------------------------------------------------------------------------
   2. CAPTURAS DE PANTALLA
   --------------------------------------------------------------------------- */
.cmr-instr__shot{ margin:1.2rem 0 !important; }
.cmr-instr__shot img{
  display:block; max-width:100%; width:auto; height:auto;
  border:1px solid rgba(18,68,142,.12);
  border-radius:10px;
  box-shadow:0 14px 30px -18px rgba(8,33,63,.35);
}

/* ---------------------------------------------------------------------------
   3. LISTA DE ESTADOS (PENDIENTE / EN BODEGA / PROCESADA)
   --------------------------------------------------------------------------- */
.cmr-instr__status-list ul{ margin:0; padding-left:1.2em; list-style:none; }
.cmr-instr__status-list .elementor-text-editor, .cmr-instr__status-list li{
  font-family:"Inter",sans-serif !important; font-size:15px !important;
  line-height:1.7 !important; color:#33507d !important;
}
.cmr-instr__status-list li{
  position:relative; margin:0 0 .8rem !important; padding-left:.2em;
}
.cmr-instr__status-list li::before{
  content:"•"; color:var(--cmr-blue); font-weight:700; margin-right:.5em;
}
.cmr-instr__status-list strong{ color:var(--cmr-blue-dd); }

/* ---------------------------------------------------------------------------
   4. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width:600px){
  .cmr-instr__step > .elementor-container{ flex-direction:column; align-items:flex-start; }
  .cmr-instr__step-icon{ padding-top:0 !important; margin-bottom:.4rem; }
}/* End custom CSS */