.elementor-2062 .elementor-element.elementor-element-6b9e0eb{--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;--overflow:hidden;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-2062 .elementor-element.elementor-element-6b9e0eb:not(.elementor-motion-effects-element-type-background), .elementor-2062 .elementor-element.elementor-element-6b9e0eb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-2e4937f );}.elementor-2062 .elementor-element.elementor-element-56af2ea > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2062 .elementor-element.elementor-element-56af2ea{text-align:center;}.elementor-2062 .elementor-element.elementor-element-56af2ea img{width:11%;}.elementor-2062 .elementor-element.elementor-element-59cd21c{--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;--overflow:hidden;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-2062 .elementor-element.elementor-element-21a6488{--display:flex;--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-2062 .elementor-element.elementor-element-73c8ae1{--display:flex;--flex-direction:row;--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;--justify-content:flex-start;--align-items:stretch;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--flex-wrap:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:70px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}.elementor-2062 .elementor-element.elementor-element-73c8ae1:not(.elementor-motion-effects-element-type-background), .elementor-2062 .elementor-element.elementor-element-73c8ae1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#14295A;}.elementor-2062 .elementor-element.elementor-element-dcb40b0{--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;--align-items:flex-start;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:0px;--margin-bottom:0px;--margin-left:30px;--margin-right:0px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-2062 .elementor-element.elementor-element-dcb40b0.e-con{--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:0;}.elementor-2062 .elementor-element.elementor-element-7f6ee3a > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2062 .elementor-element.elementor-element-7f6ee3a{text-align:start;}.elementor-2062 .elementor-element.elementor-element-7f6ee3a img{width:40%;}.elementor-2062 .elementor-element.elementor-element-4161bdc .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(11px/2);}.elementor-2062 .elementor-element.elementor-element-4161bdc .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(11px/2);}.elementor-2062 .elementor-element.elementor-element-4161bdc .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(11px/2);}.elementor-2062 .elementor-element.elementor-element-4161bdc .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-11px/2);}.elementor-2062 .elementor-element.elementor-element-4161bdc .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-11px/2);}.elementor-2062 .elementor-element.elementor-element-4161bdc .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-2062 .elementor-element.elementor-element-4161bdc .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-2062 .elementor-element.elementor-element-4161bdc{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-2062 .elementor-element.elementor-element-4161bdc .elementor-icon-list-item > .elementor-icon-list-text, .elementor-2062 .elementor-element.elementor-element-4161bdc .elementor-icon-list-item > a{font-family:"Karla", Sans-serif;font-size:16px;font-weight:400;text-transform:none;font-style:normal;text-decoration:none;line-height:22px;letter-spacing:0.76px;word-spacing:0px;}.elementor-2062 .elementor-element.elementor-element-4161bdc .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-2062 .elementor-element.elementor-element-dda47fc{--grid-template-columns:repeat(0, auto);--icon-size:26px;--grid-column-gap:0px;--grid-row-gap:0px;}.elementor-2062 .elementor-element.elementor-element-dda47fc .elementor-widget-container{text-align:left;}.elementor-2062 .elementor-element.elementor-element-dda47fc > .elementor-widget-container{margin:0px 0px 0px -14px;}.elementor-2062 .elementor-element.elementor-element-dda47fc .elementor-social-icon{background-color:#FFFFFF00;border-style:none;}.elementor-2062 .elementor-element.elementor-element-dda47fc .elementor-social-icon i{color:#FFFFFF;}.elementor-2062 .elementor-element.elementor-element-dda47fc .elementor-social-icon svg{fill:#FFFFFF;}.elementor-2062 .elementor-element.elementor-element-ad34ac6{--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;--align-items:flex-start;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:0px;--margin-bottom:0px;--margin-left:30px;--margin-right:0px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-2062 .elementor-element.elementor-element-ad34ac6.e-con{--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:0;}.elementor-2062 .elementor-element.elementor-element-e43ed12 .elementor-heading-title{font-family:"Outfit", Sans-serif;font-size:18px;font-weight:700;font-style:normal;text-decoration:none;line-height:19px;letter-spacing:1px;word-spacing:0px;color:#FFFFFF;}.elementor-2062 .elementor-element.elementor-element-1e20a4a{font-family:"Karla", Sans-serif;font-size:16px;font-weight:400;color:#FFFFFF;}.elementor-2062 .elementor-element.elementor-element-dc89b84{--display:flex;--flex-direction:row;--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;--align-items:flex-end;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--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-2062 .elementor-element.elementor-element-57ff272{text-align:start;}.elementor-2062 .elementor-element.elementor-element-57ff272 img{max-width:197px;}.elementor-2062 .elementor-element.elementor-element-8b0ba60.elementor-element{--align-self:flex-end;}.elementor-2062 .elementor-element.elementor-element-8b0ba60{text-align:start;font-family:"Karla", Sans-serif;font-size:16px;font-weight:400;line-height:0.9em;color:#FFFFFF;}.elementor-2062 .elementor-element.elementor-element-6839e16{--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;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-2062 .elementor-element.elementor-element-6839e16.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-2062 .elementor-element.elementor-element-a765028 > .elementor-widget-container{margin:0% 0% 0% 0%;}.elementor-2062 .elementor-element.elementor-element-a765028 .elementor-heading-title{font-family:"Outfit", Sans-serif;font-size:18px;font-weight:700;font-style:normal;text-decoration:none;line-height:19px;letter-spacing:1px;word-spacing:0px;color:#FFFFFF;}.elementor-2062 .elementor-element.elementor-element-3db047e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(11px/2);}.elementor-2062 .elementor-element.elementor-element-3db047e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(11px/2);}.elementor-2062 .elementor-element.elementor-element-3db047e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(11px/2);}.elementor-2062 .elementor-element.elementor-element-3db047e .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-11px/2);}.elementor-2062 .elementor-element.elementor-element-3db047e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-11px/2);}.elementor-2062 .elementor-element.elementor-element-3db047e .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-2062 .elementor-element.elementor-element-3db047e .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-2062 .elementor-element.elementor-element-3db047e{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-2062 .elementor-element.elementor-element-3db047e .elementor-icon-list-item > .elementor-icon-list-text, .elementor-2062 .elementor-element.elementor-element-3db047e .elementor-icon-list-item > a{font-family:"Karla", Sans-serif;font-size:16px;font-weight:400;text-transform:none;font-style:normal;text-decoration:none;line-height:22px;letter-spacing:0.76px;word-spacing:0px;}.elementor-2062 .elementor-element.elementor-element-3db047e .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-2062 .elementor-element.elementor-element-03eeb53{--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;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-2062 .elementor-element.elementor-element-03eeb53.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-2062 .elementor-element.elementor-element-c9d2fbe{--divider-border-style:solid;--divider-color:#FFFFFF;--divider-border-width:1.2px;}.elementor-2062 .elementor-element.elementor-element-c9d2fbe .elementor-divider-separator{width:100%;margin:0 auto;margin-center:0;}.elementor-2062 .elementor-element.elementor-element-c9d2fbe .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-2062 .elementor-element.elementor-element-3b6123e{text-align:center;font-family:"Karla", Sans-serif;font-size:12px;font-weight:400;color:#FFFFFF;}@media(max-width:1024px){.elementor-2062 .elementor-element.elementor-element-56af2ea img{width:20%;}.elementor-2062 .elementor-element.elementor-element-73c8ae1{--justify-content:space-between;--flex-wrap:wrap;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-2062 .elementor-element.elementor-element-dcb40b0{--margin-top:0%;--margin-bottom:5%;--margin-left:0%;--margin-right:0%;}.elementor-2062 .elementor-element.elementor-element-ad34ac6{--margin-top:0%;--margin-bottom:5%;--margin-left:0%;--margin-right:0%;}.elementor-2062 .elementor-element.elementor-element-e43ed12 .elementor-heading-title{font-size:14px;}.elementor-2062 .elementor-element.elementor-element-6839e16{--margin-top:0%;--margin-bottom:5%;--margin-left:0%;--margin-right:0%;}.elementor-2062 .elementor-element.elementor-element-a765028 .elementor-heading-title{font-size:14px;}.elementor-2062 .elementor-element.elementor-element-03eeb53{--margin-top:0%;--margin-bottom:5%;--margin-left:0%;--margin-right:0%;}}@media(max-width:767px){.elementor-2062 .elementor-element.elementor-element-56af2ea img{width:34%;}.elementor-2062 .elementor-element.elementor-element-59cd21c{--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-2062 .elementor-element.elementor-element-73c8ae1{--gap:40px 40px;--row-gap:40px;--column-gap:40px;--margin-top:0%;--margin-bottom:5%;--margin-left:0%;--margin-right:0%;--padding-top:70px;--padding-bottom:70px;--padding-left:30px;--padding-right:30px;}.elementor-2062 .elementor-element.elementor-element-dcb40b0{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2062 .elementor-element.elementor-element-4161bdc .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(5px/2);}.elementor-2062 .elementor-element.elementor-element-4161bdc .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(5px/2);}.elementor-2062 .elementor-element.elementor-element-4161bdc .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(5px/2);}.elementor-2062 .elementor-element.elementor-element-4161bdc .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-5px/2);}.elementor-2062 .elementor-element.elementor-element-4161bdc .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-5px/2);}.elementor-2062 .elementor-element.elementor-element-4161bdc .elementor-icon-list-item > .elementor-icon-list-text, .elementor-2062 .elementor-element.elementor-element-4161bdc .elementor-icon-list-item > a{font-size:14px;}.elementor-2062 .elementor-element.elementor-element-ad34ac6{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2062 .elementor-element.elementor-element-e43ed12 .elementor-heading-title{font-size:18px;}.elementor-2062 .elementor-element.elementor-element-1e20a4a{font-size:14px;}.elementor-2062 .elementor-element.elementor-element-57ff272 img{max-width:187px;}.elementor-2062 .elementor-element.elementor-element-6839e16{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2062 .elementor-element.elementor-element-a765028 .elementor-heading-title{font-size:18px;}.elementor-2062 .elementor-element.elementor-element-3db047e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(5px/2);}.elementor-2062 .elementor-element.elementor-element-3db047e .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(5px/2);}.elementor-2062 .elementor-element.elementor-element-3db047e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(5px/2);}.elementor-2062 .elementor-element.elementor-element-3db047e .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-5px/2);}.elementor-2062 .elementor-element.elementor-element-3db047e .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-5px/2);}.elementor-2062 .elementor-element.elementor-element-3db047e .elementor-icon-list-item > .elementor-icon-list-text, .elementor-2062 .elementor-element.elementor-element-3db047e .elementor-icon-list-item > a{font-size:14px;}.elementor-2062 .elementor-element.elementor-element-03eeb53{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}@media(min-width:768px){.elementor-2062 .elementor-element.elementor-element-6b9e0eb{--content-width:1300px;}.elementor-2062 .elementor-element.elementor-element-59cd21c{--content-width:1300px;}.elementor-2062 .elementor-element.elementor-element-21a6488{--width:86%;}.elementor-2062 .elementor-element.elementor-element-73c8ae1{--content-width:1300px;}.elementor-2062 .elementor-element.elementor-element-dcb40b0{--width:25%;}.elementor-2062 .elementor-element.elementor-element-ad34ac6{--width:36%;}.elementor-2062 .elementor-element.elementor-element-6839e16{--width:29%;}.elementor-2062 .elementor-element.elementor-element-03eeb53{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-2062 .elementor-element.elementor-element-dcb40b0{--width:50%;}.elementor-2062 .elementor-element.elementor-element-ad34ac6{--width:45%;}.elementor-2062 .elementor-element.elementor-element-6839e16{--width:100%;}.elementor-2062 .elementor-element.elementor-element-03eeb53{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-bab4eb8 *//* === Imagen/banner firma: nunca recortar en móvil === */
/* Si usas un banner superior */
.banner {
  display:block;
  width:100%;
  height:auto !important;     /* clave: altura automática */
  max-height:none;
  object-fit: contain;        /* muestra TODO, sin cortar */
}

/* Si usas foto tipo avatar */
.cover-photo { height:auto !important; }  /* elimina alturas fijas del contenedor */
.avatar, .firma-foto img {
  display:block;
  max-width:100%;
  width: 120px;               /* desktop */
  height:auto !important;     /* evita recorte */
  object-fit: contain;        /* sin recortes */
  border-radius: 10px;
  border: 2px solid #dbe8ff;
}

/* En móviles: reduce aún más para que entre todo en la fila */
@media (max-width: 640px){
  .avatar, .firma-foto img { width: 64px !important; }
  .firma-datos { font-size: .58em; line-height: 1.08; }
  /* Si tu cabecera está en grid/cover, apílala para evitar cortes horizontales */
  .cover { grid-template-columns: 1fr !important; gap:10px; }
}

/* Canvas fluido en móvil (evita recorte del lienzo) */
.chart-container canvas{
  max-width:100%;
  height:auto !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bab4eb8 */<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Calculadora de Inversión Inmobiliaria</title>

  <!-- Librerías -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>

  <style>
    :root{
      --ink:#0f1b2d; --muted:#5a6b85; --blue:#1a2a4a; /* azul marino */
      --line:#e6eefc; --bg:#ffffff; --card:#fff;
      --shadow:0 10px 30px rgba(18,38,63,.08);
    }
    *{box-sizing:border-box}
    body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink); background:#fff}
    #gm-shell{background:#fff}

    /* ===== Portada (banner) ===== */
    .cover-wrap{ padding:14px 18px; border-bottom:1px solid var(--line); background:#fff; }
    .banner{
      width:100%; aspect-ratio:16/4; max-height:300px; border-radius:14px;
      border:1px solid var(--line); object-fit:cover; display:block;
      box-shadow:var(--shadow); background:#000;
    }

    /* ===== Botones en azul marino ===== */
    .gm-actions{ position:sticky; top:0; background:#fff; padding:10px 0 0; display:flex; gap:8px; justify-content:flex-end; z-index:5; }
    .gm-actions button,
    .btn-primary{
      appearance:none;
      border:1px solid var(--blue);
      background:var(--blue);
      color:#fff;
      padding:11px 16px;
      font-weight:800;
      border-radius:10px;
      letter-spacing:.2px;
      transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
      cursor:pointer;
    }
    .gm-actions button:hover,
    .btn-primary:hover{
      background:#0d1d35;
      transform:translateY(-1px);
      box-shadow:0 2px 6px rgba(0,0,0,.2);
    }

    /* ===== Formulario tipo MBS ===== */
    .aff-card{
      margin:18px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow);
    }
    .aff-head{
      display:flex; align-items:center; gap:10px; margin-bottom:16px;
    }
    .aff-title{ font-size:28px; font-weight:700; letter-spacing:.2px; }
    .segmented{
      margin-left:auto; display:inline-flex; border:1px solid #dbe6ff; border-radius:10px; overflow:hidden; background:#f5f9ff;
    }
    .segmented button{
      border:0; padding:8px 14px; font-weight:600; cursor:pointer; background:transparent; color:#324e86;
    }
    .segmented button.active{ background:var(--blue); color:#fff; }

    .aff-grid{
      display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
    }
    .aff-field{ position:relative; }
    .aff-label{ display:block; font-size:.82rem; color:#4b6bb2; margin:0 0 6px; font-weight:600; }
    .aff-input{
      width:100%; height:44px; border:1px solid #dbe6ff; border-radius:10px; padding:0 12px 0 40px;
      font-size:16px; outline:none; background:#fff;
    }
    .aff-input:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,42,74,.2); }
    .aff-prefix, .aff-suffix{
      position:absolute; top:50%; transform:translateY(-50%); font-weight:700; color:#5a6b85; pointer-events:none;
    }
    .aff-prefix{ left:12px; }
    .aff-suffix{ right:12px; }

    .aff-cta{ display:flex; gap:10px; justify-content:flex-end; margin-top:10px; }

    /* Avanzado */
    .adv-card{
      margin:0 18px 12px; padding:14px; border:1px dashed #dbe6ff; border-radius:12px; background:#fbfdff;
      display:none;
    }
    .adv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
    .adv-field .aff-input{ height:40px; }

    /* ===== Contenido ===== */
    .gm-content{ padding:0 18px 18px; }
    .section-title{ margin:18px 0 8px; font-size:22px; }

    .results{ margin-bottom:24px; display:flex; flex-wrap:wrap; gap:12px; }
    .result-box{ flex:1 1 calc(33% - 12px); background:#eef4ff; border:1px solid var(--line); padding:14px; border-radius:10px; text-align:center; }
    .result-box h3{ margin:0; font-size:1.02em; color:var(--blue); font-weight:700; }
    .result-box p{ margin:6px 0 0; font-size:1.18em; color:#1b3f99; font-weight:700; }

    .chart-container{ margin-bottom:32px; position:relative; }
    .table-wrapper{ width:100%; overflow-x:auto; }
    table{ width:100%; border-collapse:collapse; margin-bottom:28px; border-radius:10px; overflow:hidden; }
    th, td{ border:1px solid var(--line); padding:8px; text-align:right; }
    th{ background:#eef4ff; color:var(--blue); font-size:.9em; }
    td:first-child, th:first-child{ text-align:center }

    /* Responsive */
    @media (max-width:1200px){ .aff-grid{ grid-template-columns:repeat(3,1fr);} }
    @media (max-width:980px){
      .banner{ aspect-ratio:16/6; max-height:200px; }
      .aff-grid{ grid-template-columns:repeat(2,1fr); }
      .adv-grid{ grid-template-columns:repeat(2,1fr); }
      .result-box{ flex:1 1 100%; }
      table{ min-width:640px; }
    }
    @media (max-width:600px){
      .aff-grid{ grid-template-columns:1fr; }
      .adv-grid{ grid-template-columns:1fr; }
    }
  </style>
</head>
<body>
  <div id="gm-shell">
    <!-- ===== Portada: Banner ===== -->
    <section class="cover-wrap">
      <img
        id="topBanner"
        class="banner"
        src="http://gastonmortgage.com/wp-content/uploads/2025/08/Banner-calculadora.png"
        alt="Gaston Mortgage - Calculadora Inmobiliaria"
        crossorigin="anonymous"
        referrerpolicy="no-referrer"
      />
    </section>

    <!-- ===== Acciones (PDF) ===== -->
    <div class="gm-actions">
      <button id="downloadPDF" title="Descargar resultados como PDF">⬇️ PDF</button>
    </div>

    <!-- ===== FORM tipo MBS ===== -->
    <section class="aff-card">
      <div class="aff-head">
        <div class="aff-title">Investment Property Calculator</div>
        <div class="segmented">
          <button id="tabSimple" class="active" type="button">Simple</button>
          <button id="tabAvanzado" type="button">Avanzado</button>
        </div>
      </div>

      <!-- SIMPLE -->
      <div class="aff-grid">
        <div class="aff-field">
          <label class="aff-label" for="monthlyRent">Renta mensual</label>
          <span class="aff-prefix">$</span>
          <input class="aff-input" type="number" id="monthlyRent" value="2000" />
        </div>

        <div class="aff-field">
          <label class="aff-label" for="interestRate">Tasa de interés</label>
          <input class="aff-input" type="number" id="interestRate" value="4.5" step="0.01" />
          <span class="aff-suffix">%</span>
        </div>

        <div class="aff-field">
          <label class="aff-label" for="termYears">Plazo del préstamo</label>
          <input class="aff-input" type="number" id="termYears" value="30" />
          <span class="aff-suffix">años</span>
        </div>

        <div class="aff-field">
          <label class="aff-label" for="loanAmount">Monto del préstamo</label>
          <span class="aff-prefix">$</span>
          <input class="aff-input" type="number" id="loanAmount" value="240000" />
        </div>
      </div>

      <div class="aff-cta">
        <button id="calculate" class="btn-primary" type="button">Calcular</button>
      </div>
    </section>

    <!-- ===== RESULTADOS ===== -->
    <main class="gm-content">
      <h2 class="section-title">Desglose de ingresos y gastos (Año 1)</h2>
      <div id="breakdown" class="results"></div>

      <h2 class="section-title">Métricas resumen</h2>
      <div id="summary" class="results"></div>

      <h2 class="section-title">Gráfico de flujo de efectivo anual</h2>
      <div class="chart-container"><canvas id="cashFlowChart"></canvas></div>

      <h2 class="section-title">Retorno anual total sobre la inversión</h2>
      <div class="chart-container"><canvas id="totalReturnChart"></canvas></div>

      <!-- Pie pequeño -->
      <h2 class="section-title">Distribución de gastos (Año 1)</h2>
      <div class="chart-container" style="max-width:400px; margin:0 auto;">
        <canvas id="pieExpenses"></canvas>
      </div>
    </main>
  </div>

  <!-- Scripts: lógica de cálculo y gráficos (idéntica a lo anterior con ajustes verticales y pie) -->
  <!-- ... (usa el mismo JS de la versión previa que ya te pasé, no cambió la lógica) ... -->
</body>
</html>/* End custom CSS */