/* ===================================
    Seccion Beneficios
====================================== */

/* posiciones tarjetas y background */
.block.a{ top: 0; left: 0;   background: rgba(26, 184, 182, .90); }
.block.b{ top: 0; left: 0; background: rgba(26, 126, 189, .90); }
.block.c{ top: 0; left: 0; background: rgba(26, 136, 74, .90); }
.block.d{ top: 0; left: 0; background: rgba(26, 207, 140, .90); }
.block.e{ top: 0; right: 0;  background: rgba(44, 69, 131, .90); }

/* Background tarjetas hover */
.block.a:hover{background: rgba(26, 184, 182, .70); }
.block.b:hover{background: rgba(26, 126, 189, .70); }
.block.c:hover{background: rgba(26, 136, 74, .70); }
.block.d:hover{background: rgba(26, 207, 140, .70); }
.block.e:hover{background: rgba(44, 69, 131, .70); }


/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {}
/* md  */ @media (min-width: 768px) {



} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

.block.a{ top: 10%; left: 0;}
.block.b{ top: 50%; left: 20%;}
.block.c{ top: 15%; left: 50%;}
.block.d{ top: -5%; left: 70%;}
.block.e{ top: 45%; right: 0;}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {}
/* xxl */ @media (min-width: 1400px) {}


/* ===================================
    Calculadora
====================================== */

/*Periodo*/
.sim-period{
  gap: 15px;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.period-radio{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.period-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100%;
  height: 42px;
  padding: 0 18px;
  border-radius: 10px;              /* botones redondeados */
  border: 1px solid #d0d0d0;
  background: #e6e6e6;
  font-size: 16px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  user-select: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
/* Activo (radio checked + label) */
.period-radio:checked + .period-btn{
  background: #1A7EBD;
  border-color: #1A7EBD;
  color: #fff;
  box-shadow: 0 8px 20px rgba(30,136,193,.30);
}

/* Hover */
.period-btn:hover{
  filter: brightness(0.98);
}

/*Gasto mensual*/

.sim-range-row{
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 10px;
  align-items: flex-start;
}

@media (max-width: 575.98px){
  .sim-range-row{
    grid-template-columns: 1fr;
  }
  .sim-range-value{
    width: 160px;
    justify-self: end;
  }
}

.sim-range-track{
  position: relative;
  padding-top: 8px;
}

.sim-range{
  width: 100%;
  height: 6px;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;

  /* Fondo “pintado” (se actualiza con JS cambiando --p) */
  background: linear-gradient(
    to right,
    #1A7EBD 0%,
    #1A7EBD var(--p, 50%),
    rgba(26, 126, 189,.15) var(--p, 50%),
    rgba(26, 126, 189,.15) 100%
  );
}

/* thumb */
.sim-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #B0B0B0;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  cursor: pointer;
}
.sim-range::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #B0B0B0;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  cursor: pointer;
}

/* escala */

.sim-range-scale{
  position: relative;              /* 👈 necesario */
  height: 22px;                    /* opcional (para que no brinque) */
  margin-top: 8px;
  font-size: 8px;
  color: #333;
  font-weight: 700;
}

.sim-range-scale span{
  position: absolute;              /* 👈 necesario */
  top: 0;
  white-space: nowrap;
}

/* Caja del valor (derecha) */
.sim-range-value{
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.12);
  background: #fff;
  box-shadow: 0 12px 26px rgba(17,24,39,.08);
  overflow: hidden;
}

.sim-range-value .currency{
  display: grid;
  place-items: center;
  height: 100%;
  color: #B0B0B0;
  font-weight: 600;
  background: #f3f5f8;
}

.sim-range-value input{
  border: 0;
  outline: none;
  height: 100%;
  padding: 0 10px;
  font-weight: 600;
  font-size: 16px;
  color: #333333;
}


/* Tooltip opcional sobre el thumb */
.sim-range-bubble{
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 999px;
  background: #1a7ebd;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;                 /* lo mostramos en hover/focus */
  transition: opacity .2s ease;
}

.sim-range-track:hover .sim-range-bubble,
.sim-range:focus + .sim-range-bubble{
  opacity: 1;
}


/* ===== Input group (input + addon $) ===== */
.sim-input-group{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 56px;
  height: 44px;

  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.12);
  box-shadow: 0 12px 26px rgba(17,24,39,.08);
  overflow: hidden;
}

.sim-input{
  border: 0;
  outline: none;
  padding: 0 12px;
  height: 100%;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  background: transparent;
}

.sim-addon{
  display: grid;
  place-items: center;
  height: 100%;
  background: #f3f5f8;
  color: #B0B0B0;
  font-weight: 600;
  border-left: 1px solid rgba(17,24,39,.10);
}

/* Focus ring (cuando el input recibe focus) */
.sim-input-group:focus-within{
  border-color: rgba(255,255,255,.65);
  box-shadow: 0 0 0 4px rgba(43,125,233,.12);
}

/* ===== Select con caret ===== */
.sim-select-wrap{
  position: relative;
  height: 44px;

  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.12);
  box-shadow: 0 12px 26px rgba(17,24,39,.08);
  overflow: hidden;
}

/* flecha */
.sim-select-wrap::after{
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #7b8aa3;
  border-bottom: 2px solid #7b8aa3;
  transform: translateY(-55%) rotate(45deg);
  pointer-events: none;
  opacity: .9;
}

.sim-select{
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  padding: 0 40px 0 12px; /* espacio para caret */
  font-size: 14px;
  font-weight: 600;
  color: #24324a;
  background: transparent;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.sim-select-wrap:focus-within{
  border-color: rgba(255,255,255,.65);
  box-shadow: 0 0 0 4px rgba(43,125,233,.12);
}


/*Resultados*/

.content-icon-ahorro svg{
  width: 100px;
}

.content-icon-ahorro path{
  fill:#B0B0B0E5;
}


/* ===== Chips costo ===== */
.sim-costs{
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin-bottom: 15px;
}

.cost-chip{
  text-align: center;
}

.cost-label{
  font-size: 16px;
  font-weight: 600;
  color: #737373;
  margin-bottom: 5px;
}

.cost-pill{
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  color: #fff;

  box-shadow: 0 10px 22px rgba(17,24,39,.14);
  width: 100%;
  height: 42px;
}

/* ===== Litros ===== */
.sim-litros-row{
  display: grid;
  grid-template-columns:1fr;
  gap: 15px;
  align-items: center;
  margin-top: 40px;
}

.litros-badge{
  padding:10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 10px 22px rgba(17,24,39,.20);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: #333;
  min-width: 100px;
  text-align: center;
}

.litros-text{
  display: flex;
  align-items: flex-end;
  height: 100%;
}

.litros-label{
  font-size: 16px;
  font-weight: 600;
  color: #737373;
}

/* ===== Barra de ticks ===== */
.sim-ticks{
  display: flex;
  gap: 4px;
  margin: 12px 0 18px;
}

.sim-ticks span{
  width: 8px;
  height: 45px;
  background: rgba(17,24,39,.10);
}

.sim-ticks span.on{
  background:#1A7EBD; /* cámbialo luego */
}

/* ===== Ahorros ===== */
.sim-savings{
  display: grid;
  gap: 12px;
}

.save-item{
  display: grid;
  grid-template-columns:1fr;
  gap: 10px;
  align-items: center;
}

.save-pill{
  min-height: 42px;
  padding: 6px 16px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 14px 30px rgba(17,24,39,.16);
  min-width: 110px;
  line-height: 100%;
}

.save-pill.is-big{
  font-size: 20px;
}

.save-pill.is-more-big{
  font-size: 30px;
}

.save-meta{
  display: flex;
  align-items: flex-end;
  height: 100%;
}

.save-label{
  font-size: 16px;
  font-weight: 600;
}

.save-pill.is-green + .save-meta .save-label{
  color: #17a34a;
}

/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {

.sim-costs{grid-template-columns: 1fr 1fr;gap: 15px;}
.sim-litros-row{grid-template-columns: auto 1fr;}
.save-item{grid-template-columns: auto 1fr;}
.sim-period{grid-template-columns: 1fr 1fr;}


} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {

.sim-costs{grid-template-columns: 1fr 1fr;gap: 15px;}
.sim-litros-row{grid-template-columns: auto 1fr;}
.save-item{grid-template-columns: auto 1fr;}

.sim-range-scale{font-size: 11px;}


}
/* md  */ @media (min-width: 768px) {

.sim-costs{grid-template-columns: 1fr;gap: 15px;}
.sim-litros-row{grid-template-columns:1fr;}
.save-item{grid-template-columns:1fr;}

.litros-badge{font-size: 40px;}
.save-pill{font-size: 20px;}
.save-pill.is-big{font-size: 30px;}
.save-pill.is-more-big{font-size: 40px;}


} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

.sim-costs{grid-template-columns: 1fr 1fr;gap: 15px;}
.sim-litros-row{grid-template-columns: auto 1fr;}
.save-item{grid-template-columns: auto 1fr;}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {

.sim-costs{grid-template-columns: 1fr 1fr;gap: 15px;}

}
/* xxl */ @media (min-width: 1400px) {}


/*Tarjetas videos*/

.videos-swiper{
  padding-top: 50px;
}

.videos-swiper{
  position: relative;
  overflow: hidden;
}

.video-card{
  display: block;
  text-decoration: none;
}

.video-thumb{
  height: 450px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .18);
    transition: transform .35s ease, box-shadow .35s ease;
}

.video-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  /*background: linear-gradient(180deg,
    rgba(0,0,0,.05) 8%,
    rgba(0,0,0,.25) 45%,
    rgba(0,0,0,.55) 100%);*/
}

.video-thumb:hover{
  transform: translateY(-6px);
  box-shadow: 0 10px 10px rgba(0, 0, 0, .25);
}


.video-text-bottom{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  color:#fff;
}

.video-text-bottom p{
  margin: 0;
  color:#fff;
}



@media (max-width: 991.98px){
  .video-thumb{ height: 330px; }
}

@media (max-width: 575.98px){
  .video-thumb{ height: 300px; }
}


.mp4-popup{ width:auto; max-width:none; }

.mp4-wrap{
  width: min(980px, 92vw);
  max-height: 82vh;
  margin: 0 auto;

  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 26px 80px rgba(0,0,0,.45);
}

/* modo horizontal */
.mp4-wrap.is-landscape{ aspect-ratio: 16 / 9; }

/* modo vertical */
.mp4-wrap.is-portrait{
  width: min(420px, 92vw);
  aspect-ratio: 9 / 16;
}

#mp4Player{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

.mfp-close-btn-in .mfp-close{
  color:#fff!important;
  top:-50px;
  right: 10px;
}