.elementor-1116 .elementor-element.elementor-element-5ddffe5e{--display:flex;--min-height:450px;--flex-direction:row-reverse;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.5;--overlay-mix-blend-mode:screen;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-1116 .elementor-element.elementor-element-5ddffe5e:not(.elementor-motion-effects-element-type-background), .elementor-1116 .elementor-element.elementor-element-5ddffe5e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-2c8e402 );background-image:url("https://www.coacet.fin.ec/wp-content/uploads/2025/08/Slider1-min.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1116 .elementor-element.elementor-element-5ddffe5e::before, .elementor-1116 .elementor-element.elementor-element-5ddffe5e > .elementor-background-video-container::before, .elementor-1116 .elementor-element.elementor-element-5ddffe5e > .e-con-inner > .elementor-background-video-container::before, .elementor-1116 .elementor-element.elementor-element-5ddffe5e > .elementor-background-slideshow::before, .elementor-1116 .elementor-element.elementor-element-5ddffe5e > .e-con-inner > .elementor-background-slideshow::before, .elementor-1116 .elementor-element.elementor-element-5ddffe5e > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://www.coacet.fin.ec/wp-content/uploads/2025/08/Fondo-para-franjas.png");--background-overlay:'';background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1116 .elementor-element.elementor-element-1951913d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:5px 5px;--row-gap:5px;--column-gap:5px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1116 .elementor-element.elementor-element-1951913d.e-con{--align-self:center;--order:-99999 /* order start hack */;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-1116 .elementor-element.elementor-element-674254e4{text-align:right;}.elementor-1116 .elementor-element.elementor-element-674254e4 .elementor-heading-title{font-family:var( --e-global-typography-02c9d06-font-family ), Sans-serif;font-size:var( --e-global-typography-02c9d06-font-size );font-weight:var( --e-global-typography-02c9d06-font-weight );color:var( --e-global-color-2c8e402 );}.elementor-1116 .elementor-element.elementor-element-7f9085fe{text-align:right;}.elementor-1116 .elementor-element.elementor-element-7f9085fe .elementor-heading-title{font-family:"CalSans", Sans-serif;font-size:60px;font-weight:400;letter-spacing:1.2px;color:var( --e-global-color-2c8e402 );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1116 .elementor-element.elementor-element-395e030 .elementor-button{background-color:#FAFAFA00;box-shadow:0px 0px 23px 5px rgba(0, 0, 0, 0.25);transition-duration:0.3s;border-style:solid;border-width:3px 3px 3px 3px;border-color:var( --e-global-color-accent );border-radius:15px 15px 15px 15px;padding:15px 30px 15px 30px;}.elementor-1116 .elementor-element.elementor-element-395e030 .elementor-button:hover, .elementor-1116 .elementor-element.elementor-element-395e030 .elementor-button:focus{background-color:var( --e-global-color-accent );}.elementor-1116 .elementor-element.elementor-element-395e030{padding:20px 0px 0px 0px;}.elementor-1116 .elementor-element.elementor-element-19b3ceec{--display:flex;--justify-content:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1116 .elementor-element.elementor-element-19b3ceec.e-con{--align-self:flex-end;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-1116 .elementor-element.elementor-element-51a63321{text-align:right;}.elementor-1116 .elementor-element.elementor-element-51a63321 img{width:100%;}@media(max-width:1024px){.elementor-1116 .elementor-element.elementor-element-1951913d{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-1116 .elementor-element.elementor-element-674254e4 .elementor-heading-title{font-size:var( --e-global-typography-02c9d06-font-size );}.elementor-1116 .elementor-element.elementor-element-7f9085fe{text-align:center;}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}}@media(min-width:768px){.elementor-1116 .elementor-element.elementor-element-1951913d{--width:34%;}.elementor-1116 .elementor-element.elementor-element-19b3ceec{--width:42%;}}@media(max-width:1024px) and (min-width:768px){.elementor-1116 .elementor-element.elementor-element-1951913d{--width:100%;}}@media(max-width:767px){.elementor-1116 .elementor-element.elementor-element-5ddffe5e{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:50px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-1116 .elementor-element.elementor-element-674254e4{text-align:center;}.elementor-1116 .elementor-element.elementor-element-674254e4 .elementor-heading-title{font-size:var( --e-global-typography-02c9d06-font-size );}.elementor-1116 .elementor-element.elementor-element-7f9085fe{text-align:center;}.elementor-1116 .elementor-element.elementor-element-7f9085fe .elementor-heading-title{font-size:40px;}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-1116 .elementor-element.elementor-element-51a63321{text-align:center;}}/* Start custom CSS for container, class: .elementor-element-5ddffe5e *//* Importar tipografías */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600&family=Roboto:wght@400;500&display=swap');

.calculator-form {
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);

  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
    color: #157EC2;
    margin-bottom: 20px;
  }

  .body {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;

    .form-group {
      display: flex;
      flex-direction: column;
      margin-bottom: 15px;

      &.infoPrompt {
        text-align: end;
        color: #76B642;
        font-size: 0.85em;
        font-family: 'Roboto', sans-serif;
      }

      .label {
        font-family: 'Raleway', sans-serif;
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        margin-bottom: 5px;
        color: #333;
      }

      .value {
        font-family: 'Roboto', sans-serif;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
        transition: box-shadow 0.2s ease;

        &:focus-within {
          box-shadow: 0 0 0 3px rgba(21, 126, 194, 0.25);
        }
      }
    }

    .actions {
      display: flex;
      justify-content: center;
      margin-top: 20px;

      .btn {
        border: none;
        border-radius: 10px;
        padding: 12px 24px;
        margin: 8px;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      /* Botón Activar */
      .btn-activate {
        background: #76B642;
        color: #fff;
        box-shadow: 0 4px 12px rgba(118, 182, 66, 0.3);

        &:hover {
          background: #68a53a;
          box-shadow: 0 2px 8px rgba(118, 182, 66, 0.25);
          transform: translateY(-2px);
        }

        &:active {
          transform: translateY(0);
          box-shadow: 0 2px 4px rgba(118, 182, 66, 0.2);
        }
      }

      /* Botón Borrar */
      .btn-reset {
        background: #e74c3c;
        color: #fff;
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);

        &:hover {
          background: #c0392b;
          box-shadow: 0 2px 8px rgba(231, 76, 60, 0.25);
          transform: translateY(-2px);
        }

        &:active {
          transform: translateY(0);
          box-shadow: 0 2px 4px rgba(231, 76, 60, 0.2);
        }
      }
    }
  }
}

.summary {
  padding: 20px;
  max-width: 550px;
  margin: 20px auto;
  border-radius: 12px;
  border: 1px solid #157EC2;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);

  &.hide {
    display: none;
  }

  .header {
    display: flex;
    justify-content: center;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    color: #157EC2;
    margin-bottom: 10px;
  }

  .content {
    .row {
      display: flex;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #157EC2;
      font-family: 'Roboto', sans-serif;

      &:nth-child(2n) {
        background-color: #fff;
      }
      &:nth-child(2n + 1) {
        background-color: #fafafa;
      }

      .left {
        flex: 3;
        text-align: end;
        padding-right: 10px;
        font-weight: 600;
        color: #444;
      }
      .right {
        flex: 3;
        text-align: start;
        padding-left: 10px;
        color: #666;
      }
    }
  }
}

.result-table-container {
  width: 100%;
  overflow-x: auto;

  .warning-info {
    &.hide {
      display: none;
    }
  }
}

.result-table {
  margin-top: 50px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);

  > caption {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    background-color: #157EC2;
    color: #fff;
    padding: 14px;
    font-size: 1.1rem;
  }

  thead {
    tr {
      background-color: rgba(21, 126, 194, 0.15);

      th {
        font-family: 'Raleway', sans-serif;
        font-weight: 600;
        padding: 10px;
        text-align: center;
        color: #333;
      }
    }
  }

  tbody {
    tr {
      font-family: 'Roboto', sans-serif;

      &:nth-child(2n) {
        background-color: #fff;
      }
      &:nth-child(2n + 1) {
        background-color: #fafafa;
      }
      &:hover {
        background-color: rgba(118, 182, 66, 0.15);
        transition: background 0.2s ease;
      }

      td {
        text-align: center;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        color: #444;
      }
    }
  }
}

.calculator-form {
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);

  /* Franja aplicada solo aquí */
  background-image: url("http://proyectosmkt.top/wp-content/uploads/2025/08/FondoFranjaCOACET.png");
  background-repeat: no-repeat;
  background-position: 150px center; /* desplazado 50px desde la izquierda */
  background-size: auto 80%; /* ocupa el 80% de la altura del contenedor */
}

//* adaptado para movil **//

/* Estilo normal (desktop) */
.calculator-form {
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);

  background-image: url("http://proyectosmkt.top/wp-content/uploads/2025/08/FondoFranjaCOACET.png");
  background-repeat: no-repeat;
  background-position: 50px center; /* 50px desde la izquierda */
  background-size: auto 80%; /* 80% de la altura */
}

/* Adaptación para tablets */
@media (max-width: 991px) {
  .calculator-form {
    background-position: 20px center; /* un poco más cerca del borde */
    background-size: auto 70%;        /* más pequeño para que no tape */
  }
}

/* Adaptación para móviles */
@media (max-width: 600px) {
  .calculator-form {
    background-position: center top;  /* se mueve arriba, centrada */
    background-size: 60% auto;        /* se reduce el tamaño */
    padding-top: 120px;               /* deja espacio al contenido */
  }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'CalSans';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://www.coacet.fin.ec/wp-content/uploads/2025/08/CalSans-Regular.ttf') format('truetype');
}
/* End Custom Fonts CSS */