/* mediaquery */
:root {
  --color-primary: #004cba;
  --color-secondary: #ad123c;
  --color-tertiary: #208fde;
  --color-green: green;
  --color-red: red;
  --color-white: #FFF;
  --color-black: #000;
  --color-grey: #6c757d;
  --color-lightgrey: #fafafa;
  --background-info: #cce5ff;
  --border-info: #b8daff;
  --color-info: #004085;
  --background-error: #f8d7da;
  --border-error: #f5c6cb;
  --color-error: #721c24;
  --background-warning: #fff3cd;
  --border-warning: #ffeeba;
  --color-warning: #856404;
  --background-success: #d4edda;
  --border-success: #c3e6cb;
  --color-success: #155724;
  --font-primary: quicksand;
  --font-secondary: quicksand; }

.menu-moreoptions {
  display: flex;
  justify-content: space-between;
  width: 96%;
  margin: auto;
  gap: 2px;
  position: sticky;
  top: 48px;
  background: #FFF;
  z-index: 9; }
  .menu-moreoptions .btn-options {
    text-align: center;
    display: block;
    flex-grow: 1;
    border-bottom: 2px solid #000;
    padding: 15px 24px;
    position: relative; }
    @media only screen and (max-width: 768px) {
      .menu-moreoptions .btn-options {
        padding: 8px 4px;
        font-size: 14px; } }
    .menu-moreoptions .btn-options:hover {
      cursor: pointer;
      background: #fafafa; }
    .menu-moreoptions .btn-options:after {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      border-top: 5px solid #000;
      border-right: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 5px solid transparent;
      left: 50%;
      right: 50%;
      top: 47px; }
      @media only screen and (max-width: 768px) {
        .menu-moreoptions .btn-options:after {
          top: 30px; } }
    .menu-moreoptions .btn-options.checked {
      font-weight: bold;
      color: #004cba;
      border-color: #004cba; }
      .menu-moreoptions .btn-options.checked:after {
        content: "";
        width: 0;
        height: 0;
        border-top: 5px solid #004cba;
        border-right: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid transparent; }
    .menu-moreoptions .btn-options img {
      width: 15px; }
      @media only screen and (max-width: 768px) {
        .menu-moreoptions .btn-options img {
          width: 10px; } }
.wrap-more-options {
  display: flex;
  flex-wrap: wrap; }
  @media only screen and (max-width: 768px) {
    .wrap-more-options {
      margin: 1% 0; } }
  .wrap-more-options > .box-model {
    width: 48%;
    margin: 1%; }
    @media only screen and (max-width: 768px) {
      .wrap-more-options > .box-model {
        margin: 1% 2%;
        width: 96%; } }
.box-options {
  display: grid;
  grid-template-areas: "ico cobertura detalle";
  grid-template-columns: auto 1fr 1fr;
  gap: 10px; }
  .box-options img {
    grid-area: ico;
    margin: auto 0; }
  .box-options .col-cobertura {
    grid-area: cobertura;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    justify-content: center; }
  .box-options .col-contratar {
    grid-area: detalle;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    justify-content: space-around; }
  @media only screen and (max-width: 768px) {
    .box-options {
      grid-template-areas: "ico cobertura" "detalle detalle";
      grid-template-columns: auto 1fr; } }
.box-options .col-cobertura .c-name {
  font-weight: bold;
  color: #004cba; }

.box-options .col-cobertura .company-name {
  border-radius: 18px;
  border: 1px solid #CCC;
  padding: 10px; }

.box-options .col-cobertura .tool-porc .label-porc {
  font-size: 13px;
  color: #555;
  opacity: 0.7; }

.box-options .col-cobertura .tool-porc .progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: .75rem;
  background-color: #e9ecef;
  border-radius: 0;
  height: 0.15rem; }
  .box-options .col-cobertura .tool-porc .progress .progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #004cba;
    transition: width .6s ease; }

.box-options .col-cobertura .c-features-count {
  display: none; }

.box-options .col-contratar .cuota {
  font-size: 1.6rem;
  font-weight: bold;
  color: #004cba; }
  .box-options .col-contratar .cuota:after {
    content: "/mes";
    font-size: 1rem;
    font-weight: normal; }

.box-options .col-contratar .price {
  font-weight: bold; }

.box-options .col-contratar .suma {
  font-weight: normal; }
  @media only screen and (max-width: 768px) {
    .box-options .col-contratar .suma {
      display: none; } }
.box-options .col-contratar .btn {
  margin: inherit; }