:root{
  --navy:#262a7a;
  --navy-dark:#171b68;
  --navy-soft:#eef1ff;
  --navy-soft-2:#f5f6ff;

  --orange:#f28c28;
  --orange-dark:#c9680d;
  --orange-soft:#fff0df;
  --orange-soft-2:#fff8f0;

  --green:#067647;
  --red:#b42318;

  --text:#101828;
  --muted:#667085;
  --line:#e4e7ec;
  --bg:#f6f7fb;
  --white:#fff;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button{
  font:inherit;
}

.shell{
  max-width:1180px;
  margin:0 auto;
  padding:32px 20px 70px;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  margin-bottom:22px;
}

.eyebrow{
  color:var(--navy);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

h1{
  margin:7px 0 8px;
  font-size:37px;
  line-height:1.08;
}

.hero p{
  max-width:820px;
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}


/* =========================================================
   TABS
   ========================================================= */

.tabs{
  display:flex;
  gap:10px;
  margin-bottom:16px;
}

.tab{
  flex:1;
  padding:14px 18px;
  border:2px solid transparent;
  border-radius:13px;
  font-weight:900;
  cursor:pointer;
  transition:.15s ease;
}

.tab[data-strategy="global_macro"]{
  background:var(--navy-soft);
  color:var(--navy);
  border-color:#d9ddff;
}

.tab[data-strategy="global_macro"]:hover{
  background:#e6e9ff;
}

.tab[data-strategy="global_macro"].active{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}

.tab[data-strategy="orca_x3"]{
  background:var(--orange-soft);
  color:#a64c00;
  border-color:#ffd9b0;
}

.tab[data-strategy="orca_x3"]:hover{
  background:#ffe7cc;
}

.tab[data-strategy="orca_x3"].active{
  background:var(--orange);
  color:#fff;
  border-color:var(--orange);
}


/* =========================================================
   SECTION
   ========================================================= */

.section{
  margin-bottom:16px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}

.section-title{
  margin-bottom:16px;
}

.section-title h2{
  margin:0 0 5px;
  font-size:21px;
}

.section-title p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}


/* =========================================================
   STRATEGY HEADER
   ========================================================= */

.strategy-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.strategy-name{
  margin:0;
  font-size:28px;
}

.strategy-description{
  max-width:760px;
  margin:5px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

.badge{
  padding:8px 11px;
  border-radius:999px;
  background:#f2f4f7;
  color:#475467;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}


/* =========================================================
   VIDEO
   ========================================================= */

.video-placeholder{
  display:flex;
  min-height:220px;
  align-items:center;
  justify-content:center;
  padding:20px;
  border:1px dashed #c8ccd5;
  border-radius:14px;
  background:#fafbfc;
  text-align:center;
}

.video-placeholder strong{
  display:block;
  margin-bottom:5px;
  font-size:18px;
}

.video-placeholder span{
  color:var(--muted);
  font-size:13px;
}


/* =========================================================
   PROGRAM SUMMARY
   ========================================================= */

.program-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:16px;
}

.summary-card{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fafbfc;
}

.summary-icon{
  flex:0 0 25px;
  width:25px;
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--navy-soft);
  color:var(--navy);
  font-weight:900;
  font-size:13px;
}

.summary-card.orca .summary-icon{
  background:var(--orange-soft);
  color:#a64c00;
}

.summary-content strong{
  display:block;
  margin-bottom:3px;
  font-size:13px;
}

.summary-content span{
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}


/* =========================================================
   MID CTA
   ========================================================= */

.mid-cta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:16px;
  padding:18px;
  border-radius:14px;
  background:var(--navy-dark);
  color:#fff;
}

.mid-cta h3{
  margin:0 0 4px;
  font-size:17px;
}

.mid-cta p{
  margin:0;
  color:#d6d8f3;
  font-size:12px;
  line-height:1.45;
}

.button{
  display:inline-block;
  padding:11px 15px;
  border:0;
  border-radius:10px;
  background:var(--navy);
  color:#fff;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
}

.button.orange{
  background:var(--orange);
}

.button.white{
  background:#fff;
  color:var(--navy);
}


/* =========================================================
   WARNING
   ========================================================= */

.backtest-warning{
  margin-top:14px;
  padding:13px 15px;
  border-radius:12px;
  background:#fff8eb;
  color:#7a4800;
  font-size:12px;
  line-height:1.55;
}

.backtest-warning strong{
  color:#633a00;
}


/* =========================================================
   KPIS
   ========================================================= */

.kpis{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  margin-top:16px;
}

.kpi{
  padding:13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fafbfc;
}

.kpi-label{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}

.kpi-value{
  margin-top:5px;
  font-size:20px;
  font-weight:900;
}

.kpi-sub{
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}


/* =========================================================
   CHARTS
   ========================================================= */

.chart-card{
  position:relative;
  margin-top:15px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}

.chart-title{
  font-size:16px;
  font-weight:900;
}

.chart-subtitle{
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
}

.chart-wrap{
  position:relative;
}

canvas{
  display:block;
  width:100%;
  height:330px;
  margin-top:12px;
}

.chart-tooltip{
  position:absolute;
  display:none;
  min-width:145px;
  padding:9px 11px;
  border-radius:9px;
  background:rgba(16,24,40,.94);
  color:#fff;
  font-size:11px;
  line-height:1.4;
  pointer-events:none;
  z-index:5;
  box-shadow:0 5px 20px rgba(0,0,0,.18);
}

.chart-tooltip strong{
  display:block;
  margin-bottom:3px;
  font-size:11px;
}


/* =========================================================
   CUTOFF
   ========================================================= */

.cutoff-box{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:20px;
  margin-top:16px;
  padding:17px;
  border:1px solid #cfd5ff;
  border-radius:14px;
  background:var(--navy-soft);
}

.cutoff-title{
  font-size:16px;
  font-weight:900;
}

.cutoff-text{
  margin-top:4px;
  color:#555d7a;
  font-size:12px;
  line-height:1.5;
}


/* =========================================================
   TABLE
   ========================================================= */

.table-wrap{
  overflow-x:auto;
}

table{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
}

th,
td{
  padding:8px 6px;
  border-bottom:1px solid var(--line);
  text-align:right;
  white-space:nowrap;
}

th:first-child,
td:first-child{
  text-align:left;
  font-weight:900;
}

th{
  color:#475467;
  font-size:10px;
  text-transform:uppercase;
}

.positive{
  color:var(--green);
}

.negative{
  color:var(--red);
}

.year-total{
  font-weight:900;
}


/* =========================================================
   FINAL ACTIONS
   ========================================================= */

.actions{
  display:flex;
  gap:10px;
  margin-top:16px;
}

.actions a{
  flex:1;
  text-align:center;
}


/* =========================================================
   DISCLAIMER
   ========================================================= */

.disclaimer{
  margin-top:15px;
  color:#89909d;
  font-size:10px;
  line-height:1.55;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px){

  .kpis{
    grid-template-columns:repeat(3,1fr);
  }

  .program-summary{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:700px){

  .shell{
    padding:22px 12px 50px;
  }

  h1{
    font-size:30px;
  }

  .strategy-head,
  .cutoff-box{
    grid-template-columns:1fr;
    display:grid;
  }

  .kpis,
  .program-summary{
    grid-template-columns:1fr 1fr;
  }

  .actions{
    flex-direction:column;
  }

  .mid-cta{
    flex-direction:column;
    align-items:flex-start;
  }

  canvas{
    height:290px;
  }
}

@media(max-width:520px){

  .program-summary,
  .kpis{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   PROGRAMAS V3
   HERO + SELECTOR + VIDEO + FOOTER
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.programs-hero{
  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    auto !important;

  align-items:end !important;

  gap:65px !important;

  margin-top:30px !important;

  padding:
    54px 58px !important;

  border:
    1px solid #e1e5eb !important;

  border-radius:18px !important;

  background:#f3f4f6 !important;

  box-shadow:none !important;
}


.programs-hero-copy{
  max-width:850px;
}


.programs-hero .eyebrow{
  margin-bottom:11px !important;

  color:#262a7a !important;

  font-size:16px !important;

  font-weight:700 !important;

  letter-spacing:.08em !important;

  text-transform:uppercase;
}


.programs-hero h1{
  max-width:780px !important;

  margin:
    0 0
    17px !important;

  color:#101828 !important;

  font-family:
    "Droid Serif",
    Georgia,
    serif !important;

  font-size:48px !important;

  line-height:1.14 !important;

  font-weight:700 !important;
}


.programs-hero p{
  max-width:850px !important;

  margin:0 !important;

  color:#667085 !important;

  font-size:20px !important;

  line-height:1.65 !important;
}



/* =========================================================
   SELECTOR
   ========================================================= */

.program-selector{
  min-width:305px;

  align-self:center;
}


.program-selector-label{
  margin-bottom:9px;

  color:#667085;

  font-size:12px;

  font-weight:700;

  letter-spacing:.075em;

  text-align:right;
}


.programs-hero .tabs{
  display:inline-flex !important;

  float:right;

  gap:4px !important;

  padding:4px !important;

  border:
    1px solid #d7dce5 !important;

  border-radius:10px !important;

  background:#ffffff !important;

  box-shadow:
    0 2px 7px
    rgba(16,24,40,.04) !important;
}


.programs-hero .tab{
  width:auto !important;

  min-width:135px !important;

  height:42px !important;

  padding:
    0 17px !important;

  border:0 !important;

  border-radius:7px !important;

  background:transparent !important;

  color:#667085 !important;

  font-size:14px !important;

  font-weight:700 !important;

  cursor:pointer !important;

  transition:
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease !important;
}


.programs-hero .tab:hover{
  background:#f3f4f6 !important;

  color:#262a7a !important;
}


/* GLOBAL MACRO activo */

.programs-hero
.tab.active[data-strategy="global_macro"]{
  background:#262a7a !important;

  color:#ffffff !important;

  box-shadow:
    0 2px 6px
    rgba(38,42,122,.18) !important;
}


/* ORCA activo */

.programs-hero
.tab.active[data-strategy="orca_x3"]{
  background:#f58a1f !important;

  color:#ffffff !important;

  box-shadow:
    0 2px 6px
    rgba(245,138,31,.20) !important;
}



/* =========================================================
   PRIMERA SECCIÓN
   ========================================================= */

.programs-hero + .section{
  margin-top:38px !important;
}


.strategy-name{
  font-size:42px !important;

  line-height:1.2 !important;
}


.strategy-description{
  max-width:950px !important;

  font-size:20px !important;

  line-height:1.65 !important;
}



/* =========================================================
   FILOSOFÍA
   ========================================================= */

.section-title h2{
  font-family:
    "Droid Serif",
    Georgia,
    serif;
}


.section-title p{
  font-size:18px;

  line-height:1.65;
}



/* =========================================================
   VIMEO
   ========================================================= */

.strategy-video{
  width:100%;

  margin:
    26px 0
    32px;
}


.video-app-compat{
  display:none !important;
}


.video-frame{
  position:relative;

  width:100%;

  padding-top:56.25%;

  overflow:hidden;

  border-radius:15px;

  background:#07152f;

  box-shadow:
    0 8px 25px
    rgba(16,24,40,.10);
}


.video-frame iframe{
  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:100%;

  border:0;
}



/* =========================================================
   FOOTER
   ========================================================= */

.site-footer-simple{
  width:100%;

  margin-top:78px;

  background:#0b1f46;

  color:#ffffff;
}


.site-footer-simple .shell{
  max-width:1180px;
}


.footer-minimal{
  display:grid;

  grid-template-columns:
    minmax(220px,1fr)
    auto
    44px;

  align-items:center;

  gap:36px;

  padding-top:34px;
  padding-bottom:25px;
}


.footer-minimal-logo-link{
  display:inline-flex;

  align-items:center;

  width:max-content;
}


.footer-minimal-logo{
  display:block;

  width:220px;

  max-width:100%;

  height:auto;
}


.footer-minimal-links{
  display:flex;

  align-items:center;

  justify-content:flex-end;

  gap:28px;

  flex-wrap:wrap;
}


.footer-minimal-links a{
  color:#c6d1e2;

  font-size:13px;

  font-weight:700;

  letter-spacing:.055em;

  text-decoration:none;
}


.footer-minimal-links a:hover{
  color:#ffffff;
}


.footer-minimal-bottom{
  padding-top:18px;
  padding-bottom:23px;

  border-top:
    1px solid
    rgba(255,255,255,.12);

  color:#8f9fb6;

  font-size:13px;
}


.site-footer-simple .back-to-top{
  width:42px;
  height:42px;

  display:flex;

  align-items:center;
  justify-content:center;

  border:
    1px solid
    rgba(255,255,255,.20);

  border-radius:50%;

  background:
    rgba(255,255,255,.07);

  color:#ffffff;

  font-size:21px;

  text-decoration:none;
}


.site-footer-simple .back-to-top:hover{
  background:
    rgba(255,255,255,.14);
}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:950px){

  .programs-hero{
    grid-template-columns:1fr !important;

    align-items:start !important;

    gap:32px !important;
  }


  .program-selector{
    min-width:0;

    width:100%;
  }


  .program-selector-label{
    text-align:left;
  }


  .programs-hero .tabs{
    float:none;

    width:max-content;
  }

}


@media(max-width:700px){

  .programs-hero{
    margin-top:18px !important;

    padding:
      34px 25px !important;
  }


  .programs-hero h1{
    font-size:35px !important;
  }


  .programs-hero p{
    font-size:18px !important;
  }


  .programs-hero .tabs{
    width:100%;
  }


  .programs-hero .tab{
    flex:1;

    min-width:0 !important;
  }


  .strategy-name{
    font-size:33px !important;
  }


  .footer-minimal{
    grid-template-columns:
      1fr
      auto;

    gap:
      24px
      20px;

    padding-top:30px;
  }


  .footer-minimal-links{
    grid-column:
      1 / -1;

    justify-content:flex-start;

    gap:
      12px
      22px;
  }


  .footer-minimal-logo{
    width:195px;
  }

}


/* =========================================================
   PROGRAMAS V4
   SELECTOR + VIDEO + TIPOGRAFÍA + CTA
   ========================================================= */


/* =========================================================
   SELECTOR - INACTIVOS CON COLOR SUAVE
   ========================================================= */

.programs-hero
.tab[data-strategy="global_macro"]:not(.active){
  background:#e9efff !important;
  color:#262a7a !important;
}


.programs-hero
.tab[data-strategy="orca_x3"]:not(.active){
  background:#fff0df !important;
  color:#b85d00 !important;
}


.programs-hero
.tab[data-strategy="global_macro"]:not(.active):hover{
  background:#dde7ff !important;
}


.programs-hero
.tab[data-strategy="orca_x3"]:not(.active):hover{
  background:#ffe5c7 !important;
}



/* =========================================================
   VIDEO MÁS CONTENIDO
   ========================================================= */

.strategy-video{
  max-width:940px;

  margin:
    28px auto
    38px;
}



/* =========================================================
   TIPOGRAFÍA GENERAL
   ========================================================= */

.section{
  font-size:18px;
}


.section-title h2{
  font-size:34px !important;

  line-height:1.25 !important;
}


.section-title p{
  max-width:980px;

  font-size:19px !important;

  line-height:1.68 !important;
}


.section p,
.program-summary,
.disclaimer{
  font-size:18px !important;

  line-height:1.72 !important;
}


.program-summary{
  margin-top:34px;
}


.table-wrap{
  font-size:16px !important;
}


.table-wrap table{
  font-size:16px !important;
}


.table-wrap th{
  font-size:14px !important;
}


.table-wrap td{
  font-size:16px !important;
}


.disclaimer{
  max-width:1060px;

  margin-left:auto;
  margin-right:auto;

  padding:
    24px 28px !important;
}



/* =========================================================
   CTA INTERMEDIO
   ========================================================= */

.mid-cta-v4{
  width:calc(100% + 36px);

  margin:
    46px -18px
    4px !important;

  padding:
    36px 40px !important;

  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    auto !important;

  align-items:center !important;

  gap:42px !important;

  border-radius:16px !important;

  background:#262a7a !important;
}


.mid-cta-copy{
  max-width:760px;
}


.mid-cta-v4 h3{
  margin:
    0 0 10px !important;

  color:#ffffff !important;

  font-family:
    "Droid Serif",
    Georgia,
    serif !important;

  font-size:28px !important;

  line-height:1.28 !important;
}


.mid-cta-v4 p{
  margin:0 !important;

  color:#d6d8f3 !important;

  font-size:18px !important;

  line-height:1.6 !important;
}


.mid-cta-actions{
  min-width:230px;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:13px;
}


.mid-cta-v4 .whatsapp-cta{
  min-width:225px;

  padding:
    15px 22px !important;

  text-align:center;

  font-size:14px !important;

  font-weight:800 !important;
}


.mid-cta-secondary{
  color:#e7e9ff !important;

  font-size:12px !important;

  font-weight:700 !important;

  letter-spacing:.035em;

  text-decoration:underline !important;

  text-underline-offset:4px;
}



/* =========================================================
   CTA FINAL
   ========================================================= */

.final-decision-section{
  margin-top:54px !important;
}


.final-decision-card{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:50px;

  padding:
    46px 48px;

  border-radius:18px;

  background:#f3f4f6;

  border:
    1px solid #e1e5eb;
}


.final-decision-copy{
  max-width:820px;
}


.final-decision-kicker{
  margin-bottom:10px;

  color:#262a7a;

  font-size:14px;

  font-weight:800;

  letter-spacing:.08em;
}


.final-decision-card h2{
  margin:
    0 0 14px;

  color:#101828;

  font-family:
    "Droid Serif",
    Georgia,
    serif;

  font-size:35px;

  line-height:1.25;
}


.final-decision-card p{
  margin:
    0 0 12px;

  color:#667085;

  font-size:19px !important;

  line-height:1.65 !important;
}


.final-decision-links{
  margin-top:16px !important;

  font-size:16px !important;
}


.final-decision-links a{
  color:#262a7a;

  font-weight:700;

  text-decoration:underline;

  text-underline-offset:3px;
}


.final-decision-actions{
  min-width:230px;

  display:flex;

  flex-direction:column;

  gap:11px;
}


.final-decision-actions .button{
  min-width:230px;

  padding:
    15px 20px !important;

  text-align:center;

  font-size:14px !important;

  font-weight:800 !important;
}


.final-whatsapp{
  background:#2176ff !important;

  color:#ffffff !important;
}


.final-contact{
  background:#ffffff !important;

  color:#262a7a !important;

  border:
    1px solid #cfd5df !important;
}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){

  .mid-cta-v4,
  .final-decision-card{
    grid-template-columns:1fr !important;
  }


  .mid-cta-actions,
  .final-decision-actions{
    align-items:flex-start;
  }

}


@media(max-width:700px){

  .strategy-video{
    max-width:100%;
  }


  .section-title h2{
    font-size:29px !important;
  }


  .section-title p,
  .section p,
  .program-summary,
  .disclaimer{
    font-size:17px !important;
  }


  .mid-cta-v4{
    width:100%;

    margin:
      34px 0
      0 !important;

    padding:
      30px 24px !important;
  }


  .mid-cta-v4 h3{
    font-size:25px !important;
  }


  .final-decision-card{
    padding:
      32px 24px;
  }


  .final-decision-card h2{
    font-size:29px;
  }


  .mid-cta-actions,
  .final-decision-actions,
  .mid-cta-v4 .whatsapp-cta,
  .final-decision-actions .button{
    width:100%;

    min-width:0;
  }

}


/* =========================================================
   PROGRAMAS V5
   DETALLES FINALES
   ========================================================= */


/* =========================================================
   SELECTOR
   ========================================================= */

.program-selector-label{
  margin-bottom:11px !important;

  text-align:center !important;

  font-size:14px !important;

  font-weight:800 !important;

  letter-spacing:.08em !important;

  color:#475467 !important;
}


.programs-hero
.tab[data-strategy="global_macro"]:not(.active){
  background:#e4ebff !important;
  color:#262a7a !important;
}


.programs-hero
.tab[data-strategy="orca_x3"]:not(.active){
  background:#ffead2 !important;
  color:#a95100 !important;
}



/* =========================================================
   MÁS PESO AL NOMBRE DEL PROGRAMA
   ========================================================= */

.strategy-name{
  margin-bottom:10px !important;

  color:#101828 !important;

  font-family:
    "Droid Serif",
    Georgia,
    serif !important;

  font-size:46px !important;

  line-height:1.15 !important;

  font-weight:800 !important;
}


.strategy-description{
  font-size:20px !important;

  line-height:1.65 !important;
}



/* =========================================================
   MENOS PESO A FILOSOFÍA DE INVERSIÓN
   ========================================================= */

.philosophy-title{
  margin-top:30px !important;
}


.philosophy-title h2{
  margin-bottom:8px !important;

  font-family:
    "Source Sans Pro",
    Arial,
    sans-serif !important;

  font-size:27px !important;

  line-height:1.3 !important;

  font-weight:700 !important;

  color:#344054 !important;
}


.philosophy-title p{
  font-size:18px !important;

  color:#667085 !important;
}



/* =========================================================
   VIDEO ALGO MÁS PEQUEÑO
   ========================================================= */

.strategy-video{
  max-width:880px !important;

  margin:
    27px auto
    40px !important;
}



/* =========================================================
   FICHAS / PESTAÑAS BAJO EL VIDEO
   ========================================================= */

.program-summary{
  font-size:18px !important;
}


.program-summary *{
  font-size:inherit;
}


.program-summary strong,
.program-summary b{
  font-size:17px !important;

  font-weight:700 !important;
}



/* =========================================================
   WHATSAPP CTA
   ========================================================= */

.whatsapp-cta{
  display:inline-flex !important;

  align-items:center !important;

  justify-content:center !important;

  gap:9px !important;
}


.whatsapp-icon{
  width:20px;

  height:20px;

  display:inline-flex;

  flex:0 0 20px;
}


.whatsapp-icon svg{
  display:block;

  width:100%;

  height:100%;
}



/* =========================================================
   NEWSLETTER FINAL
   MISMA LÓGICA VISUAL QUE HOME
   ========================================================= */

.program-newsletter{
  width:100%;

  margin-top:62px;

  padding:
    58px 0;

  background:#0b1f46;
}


.program-newsletter-inner{
  width:
    min(
      1180px,
      calc(100% - 48px)
    );

  margin:0 auto;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:60px;
}


.program-newsletter-copy{
  max-width:800px;
}


.program-newsletter-kicker{
  margin-bottom:9px;

  color:#8fb4ff;

  font-size:14px;

  font-weight:800;

  letter-spacing:.085em;
}


.program-newsletter h2{
  margin:
    0 0
    12px;

  color:#ffffff;

  font-family:
    "Droid Serif",
    Georgia,
    serif;

  font-size:35px;

  line-height:1.25;

  font-weight:700;
}


.program-newsletter p{
  margin:0;

  max-width:760px;

  color:#c7d1e2;

  font-size:19px !important;

  line-height:1.62 !important;
}


.program-newsletter-action{
  display:flex;

  align-items:center;

  justify-content:center;

  min-width:270px;
}


.program-newsletter-button{
  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:50px;

  padding:
    0 24px;

  border-radius:7px;

  background:#2176ff;

  color:#ffffff !important;

  font-size:14px;

  font-weight:800;

  letter-spacing:.025em;

  text-decoration:none !important;

  white-space:nowrap;
}


.program-newsletter-button:hover{
  background:#1468ed;
}



/* El footer ya lleva su propio margen en V3.
   Al ir después del newsletter no necesitamos un hueco enorme. */

.program-newsletter + .site-footer-simple{
  margin-top:0 !important;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:800px){

  .program-newsletter-inner{
    grid-template-columns:1fr;

    gap:28px;
  }


  .program-newsletter-action{
    justify-content:flex-start;

    min-width:0;
  }

}


@media(max-width:700px){

  .strategy-name{
    font-size:36px !important;
  }


  .strategy-video{
    max-width:100% !important;
  }


  .program-newsletter{
    padding:
      44px 0;
  }


  .program-newsletter-inner{
    width:
      calc(100% - 30px);
  }


  .program-newsletter h2{
    font-size:29px;
  }


  .program-newsletter p{
    font-size:17px !important;
  }


  .program-newsletter-button{
    width:100%;

    white-space:normal;

    text-align:center;
  }

}


/* =========================================================
   PROGRAMAS V6
   NEWSLETTER EXACTO DE HOME
   ========================================================= */

.newsletter-section{
  padding:78px 0;

  background:#fff;
}


.newsletter-section .container{
  width:min(100% - 48px,1180px);

  margin:0 auto;
}


.newsletter{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:34px;

  padding:
    40px 42px;

  border-radius:18px;

  background:#0b1f46;

  color:#fff;
}


.newsletter-kicker{
  color:#8eadff;

  font-size:10px;

  font-weight:800;

  letter-spacing:.10em;
}


.newsletter h2{
  margin:
    8px 0
    9px;

  color:#fff;

  font-family:
    "Droid Serif",
    serif;

  font-size:30px;

  line-height:1.2;
}


.newsletter p{
  max-width:760px;

  margin:0;

  color:#d4ddec;

  font-size:14px !important;

  line-height:1.6 !important;
}


.newsletter-button{
  flex:0 0 auto;

  min-height:48px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  padding:0 22px;

  border-radius:7px;

  background:#2176ff;

  color:#fff !important;

  font-size:12px;

  font-weight:800;

  text-decoration:none !important;
}


.newsletter-button:hover{
  background:#1468ed;
}


/*
 * Anular el newsletter provisional anterior.
 * Ya no se usa.
 */

.program-newsletter{
  display:none !important;
}


/*
 * Newsletter inmediatamente antes del footer:
 * mismo flujo visual que Home.
 */

.newsletter-section + .site-footer-simple{
  margin-top:0 !important;
}


@media(max-width:700px){

  .newsletter-section{
    padding:58px 0;
  }


  .newsletter-section .container{
    width:min(100% - 24px,1180px);
  }


  .newsletter{
    flex-direction:column;

    align-items:flex-start;

    padding:
      29px 23px;
  }


  .newsletter-button{
    width:100%;
  }

}


/* =========================================================
   PROGRAMAS V7
   ARQUITECTURA VISUAL FINAL
   ========================================================= */


/* =========================================================
   CONTEXTO GENERAL
   ========================================================= */

body{
  background:#ffffff !important;
}


/*
 * El contenido mantiene el ancho actual.
 * Los fondos se extienden a todo el viewport mediante
 * box-shadow, sin romper tablas ni JS.
 */

.program-main-block,
.program-history-block{
  position:relative;

  border:0 !important;

  border-radius:0 !important;

  box-shadow:none !important;
}



/* =========================================================
   1. HERO
   ========================================================= */

/*
 * El hero se mantiene como pieza diferenciada,
 * porque su diseño actual está funcionando bien.
 */

.programs-hero{
  margin-bottom:0 !important;
}



/* =========================================================
   2. BLOQUE PROGRAMA
   GLOBAL MACRO / ORCA + VIDEO + CTA
   ========================================================= */

.program-main-block{
  margin-top:0 !important;

  padding-top:68px !important;
  padding-bottom:76px !important;

  background:#ffffff !important;

  box-shadow:
    0 0 0 100vmax #ffffff !important;

  clip-path:
    inset(
      0 -100vmax
    );
}


/*
 * Quitamos sensación de gran tarjeta.
 */

.program-main-block::before,
.program-main-block::after{
  display:none !important;
}


/*
 * Nombre del programa sigue siendo el protagonista.
 */

.program-main-block .strategy-name{
  font-size:46px !important;

  font-weight:800 !important;
}


/*
 * Filosofía queda subordinada.
 */

.program-main-block .philosophy-title h2{
  font-size:27px !important;

  font-weight:600 !important;

  color:#475467 !important;
}


/*
 * Vídeo centrado y contenido.
 */

.program-main-block .strategy-video{
  max-width:880px !important;

  margin:
    28px auto
    42px !important;
}



/* =========================================================
   RESUMEN BAJO EL VIDEO
   ========================================================= */

/*
 * Conservamos pequeñas fichas internas si existen,
 * porque ahí sí son útiles como elementos de lectura.
 * Solo eliminamos la sensación de gran contenedor flotante.
 */

.program-main-block .program-summary{
  margin-top:34px !important;

  font-size:18px !important;

  line-height:1.65 !important;
}


.program-main-block .program-summary strong,
.program-main-block .program-summary b{
  font-size:17px !important;
}



/* =========================================================
   CTA WHATSAPP INTERMEDIO
   ========================================================= */

.program-main-block .mid-cta-v4{
  width:100% !important;

  margin:
    50px 0
    0 !important;

  padding:
    38px 42px !important;

  border-radius:12px !important;

  box-shadow:none !important;
}


.program-main-block .mid-cta-v4 h3{
  font-size:29px !important;
}


.program-main-block .mid-cta-v4 p{
  font-size:18px !important;
}



/* =========================================================
   3. BLOQUE HISTÓRICO COMPLETO
   BACKTEST + DRAWDOWN + RENTABILIDADES
   ========================================================= */

.program-history-block{
  margin-top:0 !important;
  margin-bottom:0 !important;

  padding-top:66px !important;
  padding-bottom:66px !important;

  background:#f3f4f6 !important;

  box-shadow:
    0 0 0 100vmax #f3f4f6 !important;

  clip-path:
    inset(
      0 -100vmax
    );
}


/*
 * Las tres secciones históricas comparten fondo,
 * por lo que visualmente parecen un único gran bloque.
 */

.program-history-block + .program-history-block{
  padding-top:18px !important;
}


/*
 * Separación interna elegante entre subsecciones,
 * no tarjetas.
 */

.program-history-block + .program-history-block{
  border-top:
    1px solid #dde2e9 !important;
}


/*
 * Sin burbuja exterior.
 */

.program-history-block::before,
.program-history-block::after{
  display:none !important;
}



/* =========================================================
   TITULARES DEL HISTÓRICO
   ========================================================= */

.program-history-block .section-title h2{
  font-size:34px !important;

  color:#101828 !important;
}


.program-history-block .section-title p{
  font-size:18px !important;

  line-height:1.65 !important;
}



/* =========================================================
   TABLAS / GRÁFICOS
   ========================================================= */

/*
 * Las tablas sí pueden conservar su propia caja blanca,
 * porque son componentes de datos.
 */

.program-history-block .table-wrap{
  background:#ffffff;

  border:
    1px solid #e0e4eb;

  border-radius:10px;

  overflow:hidden;
}



/* =========================================================
   DISCLAIMER
   ========================================================= */

.disclaimer{
  width:min(1180px,calc(100% - 48px));

  margin:
    0 auto !important;

  padding:
    26px 28px !important;

  border:0 !important;

  border-radius:0 !important;

  background:#f3f4f6 !important;

  box-shadow:
    0 0 0 100vmax #f3f4f6 !important;

  clip-path:
    inset(
      0 -100vmax
    );

  color:#667085 !important;
}



/* =========================================================
   NEWSLETTER
   ========================================================= */

/*
 * Newsletter conserva el diseño copiado de Home.
 * Solo hacemos una transición limpia desde el histórico.
 */

.newsletter-section{
  margin-top:0 !important;

  padding:
    72px 0 !important;

  background:#ffffff !important;
}



/* =========================================================
   FOOTER
   ========================================================= */

.newsletter-section + .site-footer-simple{
  margin-top:0 !important;
}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:700px){

  .program-main-block,
  .program-history-block{
    padding-top:50px !important;
    padding-bottom:50px !important;
  }


  .program-main-block .strategy-name{
    font-size:36px !important;
  }


  .program-main-block .mid-cta-v4{
    padding:
      30px 24px !important;
  }


  .program-history-block + .program-history-block{
    padding-top:34px !important;
  }


  .disclaimer{
    width:calc(100% - 30px);

    padding:
      22px 0 !important;
  }

}



/* =========================================================
   PROGRAMAS V8
   GRANDES BANDAS - ESTILO HOME
   ========================================================= */


/* =========================================================
   1. HERO FULL WIDTH
   ========================================================= */

.programs-hero-full{
  width:min(1180px,calc(100% - 48px)) !important;

  margin:
    0 auto !important;

  padding:
    58px 0
    56px !important;

  border:0 !important;

  border-radius:0 !important;

  background:#f3f4f6 !important;

  box-shadow:
    0 0 0 100vmax #f3f4f6 !important;

  clip-path:
    inset(0 -100vmax) !important;
}


.programs-hero-full h1{
  margin-top:0 !important;
}



/* =========================================================
   2. BLOQUE PRINCIPAL DEL PROGRAMA
   ========================================================= */

.program-main-block{
  width:min(1180px,calc(100% - 48px)) !important;

  margin:
    0 auto !important;

  padding:
    72px 0
    78px !important;

  border:0 !important;

  border-radius:0 !important;

  background:#ffffff !important;

  box-shadow:
    0 0 0 100vmax #ffffff !important;

  clip-path:
    inset(0 -100vmax) !important;
}



/* =========================================================
   3. BLOQUE HISTÓRICO
   BACKTEST + DRAWDOWN + MENSUALES
   ========================================================= */

.program-history-block{
  width:min(1180px,calc(100% - 48px)) !important;

  margin:
    0 auto !important;

  padding:
    64px 0 !important;

  border:0 !important;

  border-radius:0 !important;

  background:#f3f4f6 !important;

  box-shadow:
    0 0 0 100vmax #f3f4f6 !important;

  clip-path:
    inset(0 -100vmax) !important;
}


/*
 * Como todos pertenecen a la misma gran zona histórica,
 * reducimos la distancia entre ellos.
 */

.program-history-block
+ .program-history-block{
  padding-top:24px !important;

  border-top:
    1px solid #dce2e9 !important;
}



/* =========================================================
   4. FIN DEL BACKTEST
   ========================================================= */

.backtest-end-banner{
  margin:
    34px 0
    18px !important;

  padding:
    24px 28px !important;

  min-height:96px;

  display:flex !important;

  align-items:center !important;

  justify-content:space-between !important;

  gap:28px !important;

  border:
    1px solid #bccbff !important;

  border-radius:13px !important;

  background:#e9edff !important;
}


.backtest-end-banner h3,
.backtest-end-banner strong{
  font-size:22px !important;

  line-height:1.3 !important;

  color:#101828 !important;
}


.backtest-end-banner p{
  margin-top:5px !important;

  margin-bottom:0 !important;

  color:#536382 !important;

  font-size:16px !important;

  line-height:1.5 !important;
}


.backtest-end-banner a{
  min-height:48px !important;

  padding:
    0 21px !important;

  display:inline-flex !important;

  align-items:center !important;

  justify-content:center !important;

  border-radius:9px !important;

  background:#2c3192 !important;

  color:#ffffff !important;

  font-size:15px !important;

  font-weight:800 !important;

  text-decoration:none !important;

  white-space:nowrap;
}



/* =========================================================
   5. RENTABILIDADES MENSUALES
   ========================================================= */

.program-history-block
.section-title h2{
  font-size:36px !important;
}


.program-history-block
.section-title p{
  font-size:18px !important;

  line-height:1.65 !important;
}



/* =========================================================
   6. DISCLAIMER DENTRO DE LA ZONA MENSUAL
   ========================================================= */

.monthly-disclaimer{
  width:100% !important;

  margin:
    28px 0
    0 !important;

  padding:
    20px 0
    0 !important;

  border:
    0 !important;

  border-top:
    1px solid #d7dde6 !important;

  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;

  clip-path:none !important;

  color:#667085 !important;

  font-size:15px !important;

  line-height:1.65 !important;
}



/* =========================================================
   7. TABLAS
   ========================================================= */

.program-history-block
.table-wrap{
  margin-top:26px;

  border:
    1px solid #dfe4eb;

  border-radius:10px;

  background:#ffffff;
}



/* =========================================================
   8. NEWSLETTER
   ========================================================= */

.newsletter-section{
  margin-top:0 !important;

  padding:
    72px 0 !important;

  background:#ffffff !important;
}


.newsletter-section
+ .site-footer-simple{
  margin-top:0 !important;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  .programs-hero-full,
  .program-main-block,
  .program-history-block{
    width:
      calc(100% - 30px) !important;
  }


  .programs-hero-full{
    padding:
      42px 0
      40px !important;
  }


  .program-main-block{
    padding:
      52px 0
      56px !important;
  }


  .program-history-block{
    padding:
      48px 0 !important;
  }


  .backtest-end-banner{
    flex-direction:column;

    align-items:flex-start !important;

    padding:
      22px 20px !important;
  }


  .backtest-end-banner a{
    width:100%;
  }


  .program-history-block
  .section-title h2{
    font-size:30px !important;
  }

}



/* =========================================================
   PROGRAMAS V9
   AJUSTES DE CIERRE
   ========================================================= */


/* =========================================================
   SELECTOR DENTRO DEL BLOQUE DEL PROGRAMA
   ========================================================= */

.programs-hero .program-selector{
  display:none !important;
}


.program-main-block{
  padding-top:44px !important;
}


.program-selector-v9{
  width:max-content;

  min-width:305px;

  margin:
    0 0
    34px auto !important;
}


.program-selector-v9 .program-selector-label{
  margin-bottom:10px !important;

  text-align:center !important;

  color:#475467 !important;

  font-size:14px !important;

  font-weight:800 !important;

  letter-spacing:.08em !important;
}


.program-selector-v9 .tabs{
  display:inline-flex !important;

  gap:4px !important;

  padding:4px !important;

  border:
    1px solid #d7dce5 !important;

  border-radius:10px !important;

  background:#ffffff !important;

  box-shadow:
    0 2px 7px
    rgba(16,24,40,.04) !important;
}


.program-selector-v9 .tab{
  min-width:135px !important;

  height:42px !important;

  padding:
    0 17px !important;

  border:0 !important;

  border-radius:7px !important;

  font-size:14px !important;

  font-weight:700 !important;

  cursor:pointer !important;
}


.program-selector-v9
.tab[data-strategy="global_macro"]:not(.active){
  background:#e4ebff !important;

  color:#262a7a !important;
}


.program-selector-v9
.tab[data-strategy="orca_x3"]:not(.active){
  background:#ffead2 !important;

  color:#a95100 !important;
}


.program-selector-v9
.tab.active[data-strategy="global_macro"]{
  background:#2d3192 !important;

  color:#ffffff !important;
}


.program-selector-v9
.tab.active[data-strategy="orca_x3"]{
  background:#f58a1f !important;

  color:#ffffff !important;
}


/*
 * Al estar ahora selector y título en la misma sección,
 * acercamos Global Macro / ORCA al selector.
 */

.program-selector-v9
+ .section-title{
  margin-top:0 !important;
}


.program-main-block .strategy-name{
  margin-top:0 !important;

  margin-bottom:10px !important;
}



/* =========================================================
   FIN DEL BACKTEST MÁS IMPORTANTE
   ========================================================= */

.backtest-end-banner{
  min-height:118px !important;

  margin:
    42px 0
    30px !important;

  padding:
    29px 30px !important;

  border-radius:14px !important;
}


.backtest-end-banner h3,
.backtest-end-banner strong{
  font-size:24px !important;

  line-height:1.25 !important;

  font-weight:800 !important;
}


.backtest-end-banner p{
  margin-top:7px !important;

  font-size:17px !important;

  line-height:1.55 !important;
}


.backtest-end-banner a{
  min-width:230px !important;

  min-height:52px !important;

  padding:
    0 25px !important;

  border-radius:9px !important;

  font-size:16px !important;

  font-weight:800 !important;
}



/* =========================================================
   NEWSLETTER + FOOTER
   MISMA COMPACTACIÓN QUE HOME
   ========================================================= */

.newsletter-section{
  margin:
    0 !important;

  padding:
    78px 0 !important;

  min-height:0 !important;

  height:auto !important;

  background:#ffffff !important;
}


.newsletter-section .newsletter{
  margin:
    0 !important;
}


/*
 * Esta es la regla importante:
 * anteriormente site-footer-simple conservaba
 * margin-top:78px de una versión anterior.
 */

.site-footer-simple{
  margin-top:0 !important;
}


.newsletter-section
~ .site-footer-simple{
  margin-top:0 !important;
}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:700px){

  .program-selector-v9{
    width:100%;

    min-width:0;

    margin:
      0 0
      28px !important;
  }


  .program-selector-v9 .tabs{
    width:100%;
  }


  .program-selector-v9 .tab{
    flex:1;

    min-width:0 !important;
  }


  .backtest-end-banner{
    min-height:0 !important;
  }


  .backtest-end-banner a{
    min-width:0 !important;
  }

}



/* =========================================================
   PROGRAMAS V10
   AJUSTES FINALES DE LAYOUT
   ========================================================= */


/* ---------------------------------------------------------
   1) BLOQUE PRINCIPAL DEL PROGRAMA
   Selector en la misma zona visual que el titulo.
   --------------------------------------------------------- */

main.shell > section:first-of-type,
.program-main-block{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    column-gap:40px !important;
    row-gap:18px !important;
    align-items:start !important;
    padding-top:34px !important;
}


/* Selector del programa */
main.shell > section:first-of-type > .program-selector,
main.shell > section:first-of-type > .program-selector-v9,
main.shell > section:first-of-type > .program-selector-v10,
.program-main-block > .program-selector,
.program-main-block > .program-selector-v9,
.program-main-block > .program-selector-v10{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:start !important;
    justify-self:end !important;
    margin:4px 0 0 0 !important;
    min-width:340px !important;
}


/* etiqueta ELIGE UN PROGRAMA */
.program-selector-label{
    margin:0 0 10px 0 !important;
    text-align:center !important;
    font-size:15px !important;
    font-weight:800 !important;
    letter-spacing:.08em !important;
    color:#42526b !important;
}


/* tabs */
.program-selector .tabs,
.program-selector-v9 .tabs,
.program-selector-v10 .tabs{
    display:inline-flex !important;
    gap:4px !important;
    padding:4px !important;
    border:1px solid #d8deea !important;
    border-radius:12px !important;
    background:#ffffff !important;
    box-shadow:0 2px 8px rgba(16,24,40,.05) !important;
}

.program-selector .tab,
.program-selector-v9 .tab,
.program-selector-v10 .tab{
    min-width:168px !important;
    min-height:54px !important;
    padding:0 18px !important;
    border:0 !important;
    border-radius:9px !important;
    font-size:15px !important;
    font-weight:800 !important;
    cursor:pointer !important;
}


/* Global / ORCA inactivos */
.tab[data-strategy="global_macro"]:not(.active){
    background:#e6edff !important;
    color:#262a7a !important;
}

.tab[data-strategy="orca_x3"]:not(.active){
    background:#ffecd7 !important;
    color:#b36100 !important;
}


/* Global / ORCA activos */
.tab.active[data-strategy="global_macro"]{
    background:#2d3192 !important;
    color:#ffffff !important;
}

.tab.active[data-strategy="orca_x3"]{
    background:#f58a1f !important;
    color:#ffffff !important;
}


/* Primer section-title = nombre del programa */
main.shell > section:first-of-type > .section-title:nth-of-type(2),
.program-main-block > .section-title:nth-of-type(2){
    grid-column:1 !important;
    grid-row:1 !important;
    margin:0 !important;
    max-width:980px !important;
}


/* Segundo section-title = Filosofía */
main.shell > section:first-of-type > .section-title:nth-of-type(3),
.program-main-block > .section-title:nth-of-type(3){
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    margin-top:0 !important;
}


/* Resto del bloque principal */
main.shell > section:first-of-type > .video-placeholder,
.program-main-block > .video-placeholder{
    grid-column:1 / -1 !important;
    grid-row:3 !important;
    margin-top:0 !important;
}

main.shell > section:first-of-type > .program-summary,
.program-main-block > .program-summary{
    grid-column:1 / -1 !important;
    grid-row:4 !important;
}

main.shell > section:first-of-type > .mid-cta,
.program-main-block > .mid-cta{
    grid-column:1 / -1 !important;
    grid-row:5 !important;
}


/* Título y texto */
.strategy-name{
    margin:0 0 14px 0 !important;
    font-size:64px !important;
    line-height:1.02 !important;
    font-weight:700 !important;
    letter-spacing:-.02em !important;
}

.strategy-description{
    margin:0 !important;
    max-width:900px !important;
    font-size:21px !important;
    line-height:1.65 !important;
    color:#5f6f88 !important;
}


/* Filosofía de inversión un poco menos protagonista */
main.shell > section:first-of-type > .section-title:nth-of-type(3) h2,
.program-main-block > .section-title:nth-of-type(3) h2{
    font-size:28px !important;
    line-height:1.2 !important;
    margin-bottom:10px !important;
}

main.shell > section:first-of-type > .section-title:nth-of-type(3) p,
.program-main-block > .section-title:nth-of-type(3) p{
    font-size:18px !important;
    line-height:1.65 !important;
}


/* ---------------------------------------------------------
   2) BANNER FIN DEL BACKTEST
   --------------------------------------------------------- */

.backtest-end-banner,
.backtest-track-banner,
.track-record-banner{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    gap:24px !important;
    align-items:center !important;

    margin:44px 0 34px !important;
    padding:30px 34px !important;

    min-height:126px !important;
    border-radius:16px !important;
}

.backtest-end-banner h3,
.backtest-end-banner strong,
.backtest-track-banner h3,
.backtest-track-banner strong,
.track-record-banner h3,
.track-record-banner strong{
    font-size:28px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
}

.backtest-end-banner p,
.backtest-track-banner p,
.track-record-banner p{
    margin-top:8px !important;
    font-size:18px !important;
    line-height:1.55 !important;
}

.backtest-end-banner a,
.backtest-track-banner a,
.track-record-banner a{
    min-width:260px !important;
    min-height:56px !important;
    padding:0 24px !important;
    border-radius:10px !important;
    font-size:17px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
}


/* ---------------------------------------------------------
   3) CURVA TRACK RECORD SEGUN PROGRAMA
   El JS pondrá data-active-strategy en html
   --------------------------------------------------------- */

:root{
    --program-accent:#2d3192;
}

html[data-active-strategy="global_macro"]{
    --program-accent:#2d3192;
}

html[data-active-strategy="orca_x3"]{
    --program-accent:#f58a1f;
}


/* fallback si el gráfico usa estas clases */
html[data-active-strategy="global_macro"] .strategy-path{
    stroke:#2d3192 !important;
}

html[data-active-strategy="orca_x3"] .strategy-path{
    stroke:#f58a1f !important;
}

html[data-active-strategy="global_macro"] .equity-line{
    stroke:#2d3192 !important;
}

html[data-active-strategy="orca_x3"] .equity-line{
    stroke:#f58a1f !important;
}


/* ---------------------------------------------------------
   4) NEWSLETTER FINAL
   Misma distancia arriba y abajo
   --------------------------------------------------------- */

.newsletter-section{
    margin:0 !important;
    padding:54px 0 54px !important;
    background:#ffffff !important;
}

.newsletter-section .newsletter{
    margin:0 auto !important;
}

.newsletter-section + .site-footer-simple,
.newsletter-section ~ .site-footer-simple,
.site-footer-simple{
    margin-top:0 !important;
}


/* ---------------------------------------------------------
   5) TABLA / DISCLAIMER
   --------------------------------------------------------- */

.disclaimer{
    margin-top:16px !important;
    font-size:15px !important;
    line-height:1.6 !important;
}


/* ---------------------------------------------------------
   6) RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:1100px){

    main.shell > section:first-of-type,
    .program-main-block{
        grid-template-columns:1fr !important;
    }

    main.shell > section:first-of-type > .program-selector,
    main.shell > section:first-of-type > .program-selector-v9,
    main.shell > section:first-of-type > .program-selector-v10,
    .program-main-block > .program-selector,
    .program-main-block > .program-selector-v9,
    .program-main-block > .program-selector-v10{
        grid-column:1 !important;
        grid-row:1 !important;
        justify-self:start !important;
        margin:0 0 16px 0 !important;
        min-width:0 !important;
    }

    main.shell > section:first-of-type > .section-title:nth-of-type(2),
    .program-main-block > .section-title:nth-of-type(2){
        grid-column:1 !important;
        grid-row:2 !important;
    }

    main.shell > section:first-of-type > .section-title:nth-of-type(3),
    .program-main-block > .section-title:nth-of-type(3){
        grid-row:3 !important;
    }

    .strategy-name{
        font-size:52px !important;
    }
}

@media(max-width:700px){

    .program-selector .tabs,
    .program-selector-v9 .tabs,
    .program-selector-v10 .tabs{
        width:100% !important;
    }

    .program-selector .tab,
    .program-selector-v9 .tab,
    .program-selector-v10 .tab{
        flex:1 !important;
        min-width:0 !important;
    }

    .strategy-name{
        font-size:38px !important;
    }

    .strategy-description{
        font-size:18px !important;
    }

    .backtest-end-banner,
    .backtest-track-banner,
    .track-record-banner{
        grid-template-columns:1fr !important;
        min-height:0 !important;
    }

    .backtest-end-banner a,
    .backtest-track-banner a,
    .track-record-banner a{
        min-width:0 !important;
        width:100% !important;
    }

    .newsletter-section{
        padding:42px 0 42px !important;
    }
}



/* =========================================================
   PROGRAMAS V12
   FIN DEL BACKTEST MÁS ANCHO
   ========================================================= */

.backtest-end-banner{
    width:100% !important;

    min-height:132px !important;

    margin:
        40px 0
        36px !important;

    padding:
        32px 38px !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        280px !important;

    align-items:center !important;

    gap:34px !important;

    border-radius:15px !important;
}


.backtest-end-banner h3,
.backtest-end-banner strong{
    margin:0 !important;

    font-size:25px !important;

    line-height:1.25 !important;

    font-weight:800 !important;
}


.backtest-end-banner p{
    margin:
        7px 0
        0 !important;

    font-size:17px !important;

    line-height:1.55 !important;
}


.backtest-end-banner a{
    width:280px !important;

    min-width:280px !important;

    min-height:58px !important;

    padding:
        0 28px !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    border-radius:10px !important;

    font-size:16px !important;

    font-weight:800 !important;

    white-space:nowrap !important;
}


@media(max-width:700px){

    .backtest-end-banner{
        grid-template-columns:1fr !important;

        min-height:0 !important;

        padding:
            26px 22px !important;
    }


    .backtest-end-banner a{
        width:100% !important;

        min-width:0 !important;
    }

}



/* =========================================================
   PROGRAMAS V13
   BANNER REAL: FIN DEL BACKTEST
   ========================================================= */

.cutoff-box{
    width:calc(100% + 36px) !important;

    max-width:none !important;

    margin:
        38px -18px
        34px !important;

    padding:
        27px 32px !important;

    min-height:108px !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        270px !important;

    align-items:center !important;

    gap:32px !important;

    border-radius:14px !important;
}


.cutoff-title{
    margin:0 0 6px !important;

    font-size:22px !important;

    line-height:1.25 !important;

    font-weight:800 !important;
}


.cutoff-text{
    margin:0 !important;

    font-size:16px !important;

    line-height:1.55 !important;
}


/* botón real dentro del banner */

.cutoff-box a{
    width:270px !important;

    min-width:270px !important;

    min-height:54px !important;

    padding:
        0 24px !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    justify-self:end !important;

    border-radius:9px !important;

    font-size:15px !important;

    font-weight:800 !important;

    white-space:nowrap !important;
}


@media(max-width:700px){

    .cutoff-box{
        width:100% !important;

        margin:
            30px 0
            28px !important;

        padding:
            24px 20px !important;

        grid-template-columns:1fr !important;
    }


    .cutoff-box a{
        width:100% !important;

        min-width:0 !important;

        justify-self:stretch !important;
    }

}



/* =========================================================
   PROGRAMAS V14
   CUTOFF DEFINITIVO
   ========================================================= */

.program-history-block .cutoff-box{
    width:calc(100% + 80px) !important;
    max-width:none !important;

    margin:
        34px -40px
        36px !important;

    padding:
        30px 38px !important;

    min-height:116px !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        320px !important;

    align-items:center !important;

    gap:38px !important;

    box-sizing:border-box !important;
}


.program-history-block .cutoff-box > a.button{
    width:320px !important;
    min-width:320px !important;
    max-width:320px !important;

    min-height:58px !important;

    padding:
        0 30px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    justify-self:end !important;

    font-size:16px !important;
    font-weight:800 !important;

    white-space:nowrap !important;

    box-sizing:border-box !important;
}


@media(max-width:1250px){

    .program-history-block .cutoff-box{
        width:100% !important;

        margin:
            34px 0
            36px !important;
    }

}


@media(max-width:700px){

    .program-history-block .cutoff-box{
        grid-template-columns:1fr !important;

        padding:
            24px 20px !important;
    }


    .program-history-block .cutoff-box > a.button{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;

        justify-self:stretch !important;
    }

}



/* =========================================================
   PROGRAMAS V15
   AJUSTE FINAL DEL BANNER FIN DEL BACKTEST
   - mismo ancho que el bloque de drawdown
   - menos separación hacia rentabilidades mensuales
   ========================================================= */

.cutoff-box{
    width:100% !important;
    max-width:100% !important;

    margin:
        24px 0
        24px !important;

    padding:
        28px 32px !important;

    min-height:108px !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        300px !important;

    align-items:center !important;

    gap:28px !important;

    box-sizing:border-box !important;
}


.cutoff-title{
    margin:0 0 6px !important;
    font-size:22px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
}


.cutoff-text{
    margin:0 !important;
    font-size:16px !important;
    line-height:1.5 !important;
}


.cutoff-box > a.button{
    width:300px !important;
    min-width:300px !important;
    max-width:300px !important;

    min-height:56px !important;

    padding:
        0 28px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    justify-self:end !important;

    font-size:16px !important;
    font-weight:800 !important;

    white-space:nowrap !important;
    box-sizing:border-box !important;
}


@media(max-width:700px){

    .cutoff-box{
        grid-template-columns:1fr !important;
        margin:
            22px 0
            22px !important;
        padding:
            22px 20px !important;
        gap:18px !important;
    }

    .cutoff-box > a.button{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        justify-self:stretch !important;
    }

}



/* =========================================================
   PROGRAMAS V16
   OVERRIDE REAL SOBRE V14
   ========================================================= */


/* MISMA ESPECIFICIDAD QUE V14, PERO POSTERIOR */

.program-history-block .cutoff-box{
    width:100% !important;
    max-width:100% !important;

    margin:
        24px 0
        12px !important;

    padding:
        27px 32px !important;

    min-height:108px !important;

    grid-template-columns:
        minmax(0,1fr)
        300px !important;

    gap:28px !important;

    box-sizing:border-box !important;
}


/* BOTÓN: misma especificidad que V14 */

.program-history-block .cutoff-box > a.button{
    width:300px !important;
    min-width:300px !important;
    max-width:300px !important;

    min-height:56px !important;

    padding:
        0 28px !important;

    justify-self:end !important;

    box-sizing:border-box !important;
}


/* =========================================================
   ACERCAR RENTABILIDADES MENSUALES AL CUTOFF
   ========================================================= */

/*
 * El siguiente program-history-block es precisamente
 * Rentabilidades mensuales.
 */

.program-history-block + .program-history-block{
    padding-top:18px !important;
}


/* Evitamos una separación adicional provocada por márgenes */

.program-history-block + .program-history-block .section-title{
    margin-top:0 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    .program-history-block .cutoff-box{
        width:100% !important;
        max-width:100% !important;

        margin:
            22px 0
            12px !important;

        grid-template-columns:1fr !important;

        padding:
            22px 20px !important;
    }


    .program-history-block .cutoff-box > a.button{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;

        justify-self:stretch !important;
    }

}



/* =========================================================
   PROGRAMAS V18
   NEWSLETTER MÁS CERCA DEL FOOTER
   ========================================================= */


/*
 * Conservamos el aire superior del bloque,
 * pero reducimos claramente el inferior.
 */

.newsletter-section{
    margin:0 !important;

    padding:
        54px 0
        32px !important;

    min-height:0 !important;

    height:auto !important;

    background:#ffffff !important;
}


.newsletter-section .newsletter{
    margin:
        0 auto !important;
}


/*
 * El footer empieza inmediatamente al acabar
 * el padding inferior del newsletter.
 */

.site-footer-simple,
.newsletter-section + .site-footer-simple,
.newsletter-section ~ .site-footer-simple{
    margin-top:0 !important;
}


/*
 * Por si alguna versión anterior dejó padding/margen
 * en el wrapper inmediato antes del footer.
 */

.newsletter-section + footer,
.newsletter-section ~ footer{
    margin-top:0 !important;
}


@media(max-width:700px){

    .newsletter-section{
        padding:
            42px 0
            28px !important;
    }

}



/* =========================================================
   SHARK HERO BACKGROUND
   PROGRAMAS - FONDO 2
   ========================================================= */

.programs-hero,
.programs-hero-full{
    position:relative !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(243,244,246,.96) 0%,
            rgba(243,244,246,.91) 44%,
            rgba(243,244,246,.65) 72%,
            rgba(243,244,246,.42) 100%
        ),
        url("https://sharkinversiones.com/wp-content/uploads/2026/08/fondo2.png") !important;

    background-size:cover !important;

    background-position:center center !important;

    background-repeat:no-repeat !important;
}


/*
 * Mantener el contenido por encima.
 */

.programs-hero > *,
.programs-hero-full > *{
    position:relative;
    z-index:1;
}


/*
 * Mantener el corte full-width que ya tenemos.
 */

.programs-hero-full{
    box-shadow:
        0 0 0 100vmax
        rgba(243,244,246,1) !important;

    clip-path:
        inset(0 -100vmax) !important;
}


/*
 * Como el box-shadow anterior sería liso,
 * añadimos una banda de fondo real usando pseudo-elemento.
 */

.programs-hero-full::after{
    content:"";

    position:absolute;

    top:0;
    bottom:0;

    left:50%;

    width:100vw;

    transform:translateX(-50%);

    z-index:-1;

    background-image:
        linear-gradient(
            90deg,
            rgba(243,244,246,.96) 0%,
            rgba(243,244,246,.91) 44%,
            rgba(243,244,246,.65) 72%,
            rgba(243,244,246,.42) 100%
        ),
        url("https://sharkinversiones.com/wp-content/uploads/2026/08/fondo2.png");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;
}


/* MOBILE */

@media(max-width:700px){

    .programs-hero,
    .programs-hero-full{
        background-image:
            linear-gradient(
                rgba(243,244,246,.92),
                rgba(243,244,246,.92)
            ),
            url("https://sharkinversiones.com/wp-content/uploads/2026/08/fondo2.png") !important;
    }

    .programs-hero-full::after{
        background-image:
            linear-gradient(
                rgba(243,244,246,.92),
                rgba(243,244,246,.92)
            ),
            url("https://sharkinversiones.com/wp-content/uploads/2026/08/fondo2.png");
    }

}



/* =========================================================
   PROGRAMAS - HERO TIPOGRAFIA SINCRONIZADA
   CON PLANIFICADOR
   ========================================================= */


/* PROGRAMAS DE INVERSIÓN */

.programs-hero-kicker-sync{
    font-size:
        12px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .11em !important;

    text-transform:
        uppercase !important;
}


/* TÍTULO PRINCIPAL */

.programs-hero-title-sync{
    max-width:
        850px !important;

    font-size:
        clamp(38px,4vw,46px) !important;

    line-height:
        1.08 !important;

    letter-spacing:
        -.018em !important;
}


@media(max-width:700px){

    .programs-hero-kicker-sync{
        font-size:
            11px !important;
    }


    .programs-hero-title-sync{
        font-size:
            36px !important;
    }

}


@media(max-width:520px){

    .programs-hero-title-sync{
        font-size:
            34px !important;
    }

}



/* =========================================================
   PROGRAMAS - AJUSTE FINAL KICKER
   ========================================================= */

.programs-hero-kicker-sync{
    font-size:10px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.11em !important;
}

@media(max-width:700px){
    .programs-hero-kicker-sync{
        font-size:9px !important;
    }
}



/* =========================================================
   PROGRAMAS - TIPOGRAFIA HERO DEFINITIVA
   GANA A LAS REGLAS ANTIGUAS DE .programs-hero .eyebrow
   ========================================================= */


/* Etiqueta igual que PLANIFICADOR PATRIMONIAL */

.programs-hero .eyebrow.programs-hero-kicker-sync{
    margin-bottom:11px !important;

    font-size:12px !important;

    line-height:1 !important;

    font-weight:900 !important;

    letter-spacing:.11em !important;

    text-transform:uppercase !important;

    color:#262a7a !important;
}


/* Título igual de escala que Planificador */

.programs-hero h1.programs-hero-title-sync{
    max-width:850px !important;

    font-size:clamp(38px,4vw,46px) !important;

    line-height:1.08 !important;

    letter-spacing:-.018em !important;
}


@media(max-width:700px){

    .programs-hero .eyebrow.programs-hero-kicker-sync{
        font-size:11px !important;
    }

    .programs-hero h1.programs-hero-title-sync{
        font-size:36px !important;
    }

}


@media(max-width:520px){

    .programs-hero h1.programs-hero-title-sync{
        font-size:34px !important;
    }

}

