:root{
  --red:#ff0000;

  --dark:#1b1d21;
  --dark-2:#23262c;

  --light:#f3f4f5;
  --light-2:#f8f8f9;
  --white:#ffffff;

  --ink:#22262e;
  --muted:#69707a;
  --muted-dark:#b9bdc4;

  --line:#d9dde2;
  --line-dark:rgba(255,255,255,.11);

  --max:1220px;
  --radius:22px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--light);
  line-height:1.55;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

.container{
  width:min(var(--max),calc(100% - 48px));
  margin:0 auto;
}

.section{
  padding:100px 0;
}

.section-sm{
  padding:76px 0;
}

/* HEADER */

.site-header{
  position:relative;
  z-index:20;
  width:100%;
  background:var(--light);
  border-top:4px solid var(--red);
  border-bottom:1px solid rgba(34,38,46,.07);
}

.site-header-inner{
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.site-logo{
  width:235px;
  height:auto;
}

.header-cta{
  min-height:44px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--red);
  border-radius:11px;
  background:var(--red);
  color:#fff;
  font-size:14px;
  font-weight:750;
  transition:.2s ease;
}

.header-cta:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}

/* TYPOGRAPHY */

h1,h2,h3,p{margin-top:0}

h1{
  max-width:980px;
  margin-bottom:28px;
  font-size:clamp(48px,6vw,78px);
  line-height:1.02;
  letter-spacing:-.047em;
  font-weight:760;
  color:var(--ink);
}

h2{
  max-width:900px;
  margin-bottom:22px;
  font-size:clamp(34px,4.6vw,56px);
  line-height:1.06;
  letter-spacing:-.035em;
}

h3{
  font-size:22px;
  line-height:1.25;
}

.copy{
  color:var(--muted);
  font-size:18px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:22px;
  padding:8px 13px;
  border-radius:999px;
  background:var(--red);
  color:white;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* HERO */

.hero{
  position:relative;
  overflow:hidden;
  padding:86px 0 105px;
  background:
    radial-gradient(circle at 92% 20%, rgba(34,38,46,.05), transparent 28%),
    var(--light);
}

.hero::after{
  content:"";
  position:absolute;
  right:-140px;
  bottom:-220px;
  width:520px;
  height:520px;
  border:1px solid rgba(34,38,46,.07);
  border-radius:50%;
  pointer-events:none;
}

.hero-inner{
  position:relative;
  z-index:2;
}

.hero-copy{
  width:min(930px,100%);
}

.hero h1 span{
  display:block;
}

.hero-line-2{
  margin-top:8px;
  font-weight:520;
}

.hero-intro{
  max-width:820px;
  margin-top:34px;
  color:#4e545e;
  font-size:clamp(19px,2vw,23px);
  line-height:1.62;
}

.hero-intro strong{
  color:var(--ink);
  font-weight:760;
}

.hero-benefits{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  margin-top:28px;
  color:#767c86;
  font-size:14px;
}

.hero-benefit{
  display:flex;
  align-items:center;
  gap:9px;
}

.hero-benefit::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--red);
}

/* BUTTONS */

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:36px;
}

.btn{
  min-height:52px;
  padding:0 23px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  font-weight:750;
  transition:.2s ease;
}

.btn-primary{
  background:var(--red);
  border:1px solid var(--red);
  color:white;
  box-shadow:0 12px 30px rgba(255,0,0,.14);
}

.btn-primary:hover{
  background:var(--ink);
  border-color:var(--ink);
  transform:translateY(-1px);
}

.btn-ghost{
  background:transparent;
  border:1px solid currentColor;
  color:inherit;
}

/* ALTERNATING BACKGROUNDS */

/* Problema */
body > section:nth-of-type(1){
  background:var(--white);
}

/* Cambio paradigma */
body > section:nth-of-type(2){
  background:var(--dark);
  color:white;
}

/* Sistemas */
body > section:nth-of-type(3){
  background:var(--light);
}

/* Herramientas */
body > section:nth-of-type(4){
  background:var(--dark);
  color:white;
}

/* Qué recibes */
body > section:nth-of-type(5){
  background:var(--white);
}

/* Implementación */
body > section:nth-of-type(6){
  background:var(--light);
}

/* Evidencia */
body > section:nth-of-type(7){
  background:var(--dark);
  color:white;
}

/* Testimonios */
body > section:nth-of-type(8){
  background:var(--white);
}

/* Sergio */
body > section:nth-of-type(9){
  background:var(--light);
}

/* Encaje */
body > section:nth-of-type(10){
  background:var(--dark);
  color:white;
}

/* Registro */
body > section:nth-of-type(11){
  background:var(--white);
}

/* DARK SECTION TEXT */

body > section:nth-of-type(2) h2,
body > section:nth-of-type(2) h3,
body > section:nth-of-type(4) h2,
body > section:nth-of-type(4) h3,
body > section:nth-of-type(7) h2,
body > section:nth-of-type(7) h3,
body > section:nth-of-type(10) h2,
body > section:nth-of-type(10) h3{
  color:white;
}

body > section:nth-of-type(2) .copy,
body > section:nth-of-type(4) .copy,
body > section:nth-of-type(7) .copy,
body > section:nth-of-type(10) .copy{
  color:var(--muted-dark);
}

/* GRIDS */

.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:38px;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

/* PROBLEM */

.problem-list{
  display:grid;
}

.problem-item{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:16px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}

.problem-item:last-child{
  border-bottom:0;
}

.num,
.icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,0,0,.07);
  color:var(--red);
  font-size:13px;
  font-weight:800;
}

/* COMPARE */

.compare{
  margin-top:34px;
  overflow:hidden;
  border:1px solid var(--line-dark);
  border-radius:24px;
}

.compare-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
}

.compare-side{
  padding:36px;
}

.compare-side:first-child{
  background:#25282e;
  border-right:1px solid var(--line-dark);
}

.compare-side:last-child{
  background:#1d2025;
}

.compare-label{
  margin-bottom:16px;
  color:#9da1a9;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.compare ul{
  padding-left:20px;
  color:#c7cad0;
}

.compare li{
  margin:12px 0;
}

/* SYSTEMS */

.systems{
  margin-top:38px;
}

.card{
  padding:29px;
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
}

.card p{
  margin-bottom:0;
  color:var(--muted);
}

.system-card{
  min-height:220px;
}

.system-tag{
  display:inline-block;
  margin-bottom:17px;
  padding:7px 10px;
  border-radius:7px;
  background:rgba(255,0,0,.065);
  color:var(--red);
  font-weight:800;
}

.correlation-wrap{
  margin-top:35px;
  padding:31px;
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
}

.flow{
  display:grid;
  grid-template-columns:repeat(7,auto);
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:15px;
  overflow-x:auto;
}

.flow-node{
  min-width:120px;
  padding:15px 18px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fafafb;
  font-weight:750;
}

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

/* TOOLS DARK */

.tools-wrap{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:46px;
  align-items:center;
}

.mockup{
  padding:18px;
  background:#23262c;
  border:1px solid var(--line-dark);
  border-radius:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.18);
}

.mockup-top{
  display:flex;
  gap:7px;
  margin-bottom:14px;
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#555960;
}

.mockup-body{
  display:grid;
  gap:12px;
}

.mock-row{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:12px;
}

.mock-box{
  min-height:92px;
  padding:16px;
  color:white;
  border:1px solid var(--line-dark);
  border-radius:14px;
  background:#1c1f24;
}

.bar{
  height:7px;
  margin-top:10px;
  overflow:hidden;
  border-radius:999px;
  background:#33373e;
}

.bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--red);
}

/* OFFER / TIMELINE / TESTIMONIALS */

.offer-grid,
.timeline,
.testimonials{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:34px;
}

.offer-card,
.timeline-card,
.quote{
  padding:28px;
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
}

.timeline-card span{
  color:var(--red);
  font-weight:800;
}

.quote p{
  color:var(--muted);
}

/* EVIDENCE */

.evidence{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:44px;
  align-items:center;
}

.evidence-note{
  margin-top:24px;
  padding:23px;
  color:#c2c5cb;
  border-left:3px solid var(--red);
  background:#23262c;
}

body > section:nth-of-type(7) .hero-card{
  padding:22px;
  background:#23262c;
  border:1px solid var(--line-dark);
  border-radius:24px;
}

/* PROFILE */

.profile{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:38px;
  align-items:center;
}

.profile-box{
  min-height:390px;
  display:grid;
  place-items:center;
  text-align:center;
  color:#9297a0;
  background:white;
  border:1px solid var(--line);
  border-radius:24px;
}

/* FIT DARK */

.fit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.fit-box{
  padding:30px;
  border:1px solid var(--line-dark);
  border-radius:22px;
  background:#23262c;
}

.fit-box ul{
  padding-left:20px;
  color:#c0c3c9;
}

.fit-box li{
  margin:12px 0;
}

/* REGISTER */

.register{
  padding:44px;
  background:var(--light);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:0 22px 60px rgba(36,40,49,.07);
}

.register-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:38px;
  align-items:center;
}

.form{
  display:grid;
  gap:12px;
}

.input{
  width:100%;
  min-height:52px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:11px;
  background:white;
  color:var(--ink);
  font:inherit;
}

.form-note{
  color:#858a93;
  font-size:13px;
}

/* FOOTER */

footer{
  padding:36px 0 50px;
  background:var(--light);
  color:#888d96;
  font-size:13px;
}

.devbar{
  position:fixed;
  z-index:99;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  padding:8px 13px;
  border-radius:999px;
  background:rgba(24,26,30,.94);
  color:white;
  font-size:12px;
}

/* RESPONSIVE */

@media(max-width:920px){

  .grid-2,
  .tools-wrap,
  .evidence,
  .profile,
  .register-grid,
  .fit-grid,
  .compare-grid{
    grid-template-columns:1fr;
  }

  .grid-3,
  .offer-grid,
  .timeline,
  .testimonials{
    grid-template-columns:1fr;
  }

  .compare-side:first-child{
    border-right:0;
    border-bottom:1px solid var(--line-dark);
  }

  .flow{
    justify-content:start;
  }
}

@media(max-width:640px){

  .container{
    width:min(100% - 28px,var(--max));
  }

  .site-header-inner{
    min-height:72px;
  }

  .site-logo{
    width:190px;
  }

  .header-cta{
    display:none;
  }

  .hero{
    padding:62px 0 78px;
  }

  h1{
    font-size:44px;
  }

  .section{
    padding:72px 0;
  }

  .section-sm{
    padding:62px 0;
  }

  .register{
    padding:25px;
  }
}


/* =========================================================
   V6 · HEADER ROJO + HERO COMPACTO
   ========================================================= */

/* eliminamos la antigua raya superior */
.site-header{
  position:relative !important;
  background:#ff0000 !important;
  border-top:0 !important;
  border-bottom:0 !important;
}

.site-header-inner{
  min-height:78px !important;
}

/*
   El logo actual de color no funciona sobre rojo.
   Lo mostramos en blanco mediante filtro temporal.
   Más adelante podemos usar el wordmark blanco definitivo.
*/
.site-logo{
  filter:grayscale(1) brightness(0) invert(1) !important;
  width:235px !important;
}

.header-cta{
  background:transparent !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.75) !important;
}

.header-cta:hover{
  background:#1b1d21 !important;
  border-color:#1b1d21 !important;
  color:white !important;
}


/* HERO */

.hero{
  min-height:auto !important;
  padding:70px 0 76px !important;
  background:#f3f4f5 !important;
}

.hero::before,
.hero::after{
  display:none !important;
}

.hero-layout{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);

  gap:74px;
  align-items:center;
}

.hero-copy{
  width:auto !important;
  max-width:780px;
}

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

  padding:8px 14px !important;

  background:#ff0000 !important;
  color:#fff !important;

  border-radius:999px !important;
}


/* TITULAR MÁS CONTROLADO */

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

  margin-bottom:27px !important;

  color:#22262e !important;

  font-size:clamp(43px,4.6vw,67px) !important;
  line-height:1.045 !important;
  letter-spacing:-.045em !important;

  font-weight:450 !important;
}

.hero h1 strong{
  display:block;

  margin-bottom:9px;

  font-weight:790;
}

.hero h1 span{
  display:block;
  font-weight:450;
}


/* COPY */

.hero-intro{
  max-width:760px !important;

  margin:0 0 12px !important;

  color:#565c66 !important;

  font-size:19px !important;
  line-height:1.58 !important;
}

.hero-intro strong{
  color:#22262e !important;
}

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


/* CTA DERECHA */

.hero-entry{
  padding:32px;

  background:#fff;

  border:1px solid #daddE2;
  border-radius:22px;

  box-shadow:
    0 20px 55px rgba(30,35,45,.08);
}

.hero-entry-label{
  margin-bottom:16px;

  color:#ff0000;

  font-size:12px;
  font-weight:800;

  letter-spacing:.10em;
  text-transform:uppercase;
}

.hero-entry h2{
  margin:0 0 15px;

  font-size:31px;
  line-height:1.08;
  letter-spacing:-.025em;

  color:#22262e;
}

.hero-entry p{
  margin-bottom:24px;

  color:#69707a;

  font-size:16px;
  line-height:1.55;
}

.hero-entry-btn{
  width:100%;
}

.hero-entry small{
  display:block;

  margin-top:12px;

  text-align:center;

  color:#8b9098;
  font-size:12px;
}


/* BOTÓN */

.btn-primary{
  background:#ff0000 !important;
  border-color:#ff0000 !important;
  color:white !important;
}

.btn-primary:hover{
  background:#1b1d21 !important;
  border-color:#1b1d21 !important;
}


/* MOBILE */

@media(max-width:900px){

  .hero-layout{
    grid-template-columns:1fr;
    gap:38px;
  }

  .hero-entry{
    max-width:560px;
  }
}

@media(max-width:640px){

  .site-header-inner{
    min-height:68px !important;
  }

  .hero{
    padding:48px 0 58px !important;
  }

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

  .hero-entry{
    padding:25px;
  }
}



/* =========================================================
   HERO V7 · PRODUCTO + AUTORIDAD
   ========================================================= */


/* HEADER LIMPIO */

.site-header{
  background:#f3f4f5 !important;
  border-top:0 !important;
  border-bottom:1px solid rgba(34,38,46,.08) !important;
}

.site-header-inner{
  min-height:82px !important;
}

.site-logo{
  width:255px !important;
  filter:none !important;
}

.header-cta{
  background:#ff0000 !important;
  color:#fff !important;
  border:1px solid #ff0000 !important;
}

.header-cta:hover{
  background:#22262e !important;
  border-color:#22262e !important;
}


/* HERO */

.hero-v7{
  min-height:auto !important;
  padding:66px 0 72px !important;
  background:#f3f4f5 !important;
  color:#22262e !important;
}

.hero-v7::before,
.hero-v7::after{
  display:none !important;
}

.hero-v7-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);
  gap:78px;
  align-items:center;
}

.hero-v7-copy{
  max-width:720px;
}

.hero-v7 .eyebrow{
  margin-bottom:24px !important;
  padding:8px 14px !important;

  border-radius:999px !important;

  background:#ff0000 !important;
  color:#fff !important;
}

.hero-v7 h1{
  margin:0 0 27px !important;

  max-width:720px !important;

  color:#22262e !important;

  font-size:clamp(48px,5vw,72px) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
}

.hero-v7 h1 strong{
  display:block;

  font-weight:790 !important;
}

.hero-v7 h1 span{
  display:block;

  margin-top:7px;

  font-weight:470 !important;
}

.hero-v7-description{
  max-width:690px;

  margin:0 0 16px;

  color:#4f5660;

  font-size:20px;
  line-height:1.6;
}

.hero-v7-description strong{
  color:#22262e;
}

.hero-v7-target{
  max-width:680px;

  margin:0;

  color:#707680;

  font-size:16px;
  line-height:1.55;
}

.hero-v7-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:11px;

  margin-top:31px;
}

.hero-main-cta{
  min-width:255px;
}

.hero-v7-micro{
  color:#858a93;
  font-size:12px;
}


/* PRODUCT PREVIEW */

.hero-product-preview{
  overflow:hidden;

  border:1px solid #d5d8de;
  border-radius:25px;

  background:#fff;

  box-shadow:
    0 24px 65px rgba(31,36,47,.10);
}

.preview-top{
  padding:17px 20px;

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

  border-bottom:1px solid #e2e4e8;
}

.preview-kicker{
  color:#ff0000;

  font-size:11px;
  font-weight:850;

  letter-spacing:.10em;
}

.preview-time{
  color:#9297a0;

  font-size:10px;
  font-weight:700;

  letter-spacing:.08em;
}

.preview-screen{
  position:relative;

  min-height:310px;

  padding:28px;

  display:grid;
  place-items:center;

  background:
    linear-gradient(
      145deg,
      #272a31,
      #1c1f24
    );
}

.preview-dashboard{
  width:100%;

  padding:18px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;

  background:#181b20;
}

.preview-dashboard-head{
  display:flex;
  gap:5px;

  margin-bottom:17px;
}

.preview-dashboard-head span{
  width:6px;
  height:6px;

  border-radius:50%;

  background:#565b64;
}

.preview-title{
  margin-bottom:15px;

  color:#f6f6f7;

  font-size:15px;
  font-weight:700;
}

.preview-systems{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:8px;

  margin-bottom:17px;
}

.preview-systems div{
  padding:12px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;

  background:#20232a;
}

.preview-systems small{
  display:block;

  color:#8d929b;

  font-size:9px;
}

.preview-systems strong{
  display:block;

  margin-top:2px;

  color:white;

  font-size:17px;
}

.preview-bars{
  display:grid;
  gap:10px;
}

.preview-bars div{
  position:relative;

  height:27px;

  display:flex;
  align-items:center;

  overflow:hidden;

  border-radius:6px;

  background:#23262d;
}

.preview-bars span{
  position:relative;
  z-index:2;

  width:46px;

  padding-left:9px;

  color:#bbbfc6;

  font-size:9px;
  font-weight:700;
}

.preview-bars i{
  position:absolute;

  left:46px;
  top:0;
  bottom:0;

  display:block;

  background:
    linear-gradient(
      90deg,
      rgba(255,0,0,.23),
      rgba(255,0,0,.45)
    );
}


/* PLAY */

.preview-play{
  position:absolute;

  width:68px;
  height:68px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#ff0000;

  box-shadow:
    0 12px 35px rgba(255,0,0,.30);
}

.preview-play span{
  margin-left:5px;

  width:0;
  height:0;

  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-left:14px solid white;
}


/* FOOT */

.preview-footer{
  padding:20px 21px 22px;

  display:grid;
  gap:4px;
}

.preview-footer strong{
  color:#22262e;
  font-size:15px;
}

.preview-footer span{
  color:#858a93;
  font-size:12px;
}


/* CREDIBILITY */

.credibility-strip{
  padding:0 !important;

  background:#ffffff !important;

  border-top:1px solid #e1e3e7;
  border-bottom:1px solid #e1e3e7;
}

.credibility-grid{
  min-height:116px;

  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.credibility-item{
  padding:24px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  border-right:1px solid #e1e3e7;
}

.credibility-item:last-child{
  border-right:0;
}

.credibility-item strong{
  margin-bottom:4px;

  color:#252932;

  font-size:14px;
}

.credibility-item span{
  color:#858a93;

  font-size:12px;
  line-height:1.45;
}


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

@media(max-width:950px){

  .hero-v7-grid{
    grid-template-columns:1fr;
    gap:42px;
  }

  .hero-product-preview{
    max-width:620px;
  }

  .credibility-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .credibility-item:nth-child(2){
    border-right:0;
  }

  .credibility-item:nth-child(-n+2){
    border-bottom:1px solid #e1e3e7;
  }
}

@media(max-width:640px){

  .hero-v7{
    padding:48px 0 55px !important;
  }

  .hero-v7 h1{
    font-size:43px !important;
  }

  .preview-screen{
    min-height:260px;
    padding:18px;
  }

  .credibility-grid{
    grid-template-columns:1fr;
  }

  .credibility-item{
    border-right:0 !important;
    border-bottom:1px solid #e1e3e7;
  }

  .credibility-item:last-child{
    border-bottom:0;
  }
}


/* HEADER NEGRO */
.site-header{
  background:#1b1d21 !important;
  border-top:0 !important;
  border-bottom:0 !important;
}

.site-header .site-logo{
  filter:brightness(0) invert(1) !important;
}

.site-header .header-cta{
  background:#ff0000 !important;
  border-color:#ff0000 !important;
  color:#fff !important;
}

.site-header .header-cta:hover{
  background:#ffffff !important;
  border-color:#ffffff !important;
  color:#1b1d21 !important;
}


/* =========================================================
   AJUSTES HERO · FASE ACTUAL
   ========================================================= */

/* botón superior */
.site-header .header-cta{
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  font-weight: 800 !important;
}

/* menos hueco debajo de la cabecera */
.hero-v7{
  padding-top: 34px !important;
  padding-bottom: 56px !important;
}

/* layout general un poco más compacto */
.hero-v7-grid{
  align-items: start !important;
}

/* burbuja más arriba y más grande */
.hero-v7 .eyebrow{
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  letter-spacing: .04em !important;
  font-weight: 800 !important;
}

/* copy principal más fiel al original */
.hero-v7 h1{
  max-width: 760px !important;
  margin-bottom: 26px !important;
  font-size: clamp(46px, 5.2vw, 76px) !important;
  line-height: 1.01 !important;
  letter-spacing: -.05em !important;
}

.hero-v7 h1 strong{
  display:block;
  margin-bottom: 8px;
  font-weight: 800 !important;
}

.hero-v7 h1 span{
  display:block;
  font-weight: 430 !important;
}

.hero-v7-description{
  max-width: 760px !important;
  margin: 0 0 14px !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color:#4f5660 !important;
}

.hero-v7-target{
  max-width: 760px !important;
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  color:#4f5660 !important;
}

.hero-v7-description strong,
.hero-v7-target strong{
  color:#22262e !important;
  font-weight: 800 !important;
}

/* CTA principal también en mayúsculas */
.hero-main-cta,
.btn-primary{
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
}

/* móvil */
@media(max-width:640px){

  .hero-v7{
    padding-top: 24px !important;
    padding-bottom: 42px !important;
  }

  .hero-v7 .eyebrow{
    padding: 10px 14px !important;
    font-size: 12px !important;
  }

  .hero-v7 h1{
    font-size: 42px !important;
  }

  .hero-v7-description,
  .hero-v7-target{
    font-size: 17px !important;
  }
}

/* =========================================================
   HERO V8 · TEXTO DOMINANTE + PREVIEW COMPACTO
   ========================================================= */

.hero-v7{
  padding-top: 28px !important;
  padding-bottom: 46px !important;
}

.hero-v7-grid{
  display:grid !important;
  grid-template-columns:minmax(0, 1.6fr) minmax(280px, .6fr) !important;
  gap:52px !important;
  align-items:center !important;
}

/* TEXTO */
.hero-v7-copy{
  max-width:none !important;
}

.hero-v7 h1{
  max-width:100% !important;
  margin-bottom:22px !important;

  font-size:clamp(38px,4vw,58px) !important;
  line-height:1.04 !important;
  letter-spacing:-.035em !important;
}

.hero-v7 h1 strong{
  margin-bottom:5px !important;
}

.hero-v7-description,
.hero-v7-target{
  max-width:920px !important;
  font-size:18px !important;
  line-height:1.58 !important;
}

/* PREVIEW DERECHA */
.hero-product-preview{
  display:block !important;
  width:100% !important;
  max-width:360px !important;
  justify-self:end !important;

  text-decoration:none !important;

  border-radius:18px !important;
  overflow:hidden !important;

  box-shadow:0 14px 36px rgba(31,36,47,.10) !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease !important;
}

.hero-product-preview:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 20px 44px rgba(31,36,47,.14) !important;
}

/* top del preview */
.preview-top{
  padding:12px 14px !important;
}

.preview-kicker{
  font-size:9px !important;
}

.preview-time{
  font-size:9px !important;
}

/* pantalla más compacta */
.preview-screen{
  min-height:210px !important;
  padding:16px !important;
}

.preview-dashboard{
  padding:12px !important;
  border-radius:12px !important;
}

.preview-title{
  font-size:12px !important;
  margin-bottom:10px !important;
}

.preview-systems{
  gap:6px !important;
  margin-bottom:10px !important;
}

.preview-systems div{
  padding:8px !important;
  border-radius:7px !important;
}

.preview-systems small{
  font-size:7px !important;
}

.preview-systems strong{
  font-size:13px !important;
}

.preview-bars{
  gap:6px !important;
}

.preview-bars div{
  height:20px !important;
}

.preview-bars span{
  width:36px !important;
  padding-left:7px !important;
  font-size:7px !important;
}

.preview-bars i{
  left:36px !important;
}

/* play más pequeño */
.preview-play{
  width:52px !important;
  height:52px !important;
}

.preview-play span{
  border-top-width:7px !important;
  border-bottom-width:7px !important;
  border-left-width:11px !important;
}

/* footer del preview */
.preview-footer{
  padding:14px 15px 16px !important;
}

.preview-footer strong{
  font-size:13px !important;
}

.preview-footer span{
  font-size:10px !important;
}

/* CTA DEBAJO DEL PREVIEW */
.preview-cta-wrap{
  width:100%;
  max-width:360px;

  margin-top:14px;
  margin-left:auto;
}

.preview-cta{
  width:100% !important;
  min-height:48px !important;
  font-size:13px !important;
}

/* Quitamos CTA redundante del lado izquierdo */
.hero-v7-actions{
  display:none !important;
}

/* RESPONSIVE */
@media(max-width:980px){

  .hero-v7-grid{
    grid-template-columns:1fr !important;
    gap:34px !important;
  }

  .hero-product-preview,
  .preview-cta-wrap{
    max-width:460px !important;
    justify-self:start !important;
    margin-left:0 !important;
  }
}

@media(max-width:640px){

  .hero-v7{
    padding-top:22px !important;
  }

  .hero-v7 h1{
    font-size:38px !important;
  }

  .hero-v7-description,
  .hero-v7-target{
    font-size:16px !important;
  }

  .hero-product-preview,
  .preview-cta-wrap{
    max-width:100% !important;
  }
}



/* =========================================================
   HERO CLEAN V9
   Estructura reconstruida desde cero
   ========================================================= */


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

.site-header{
  background:#1b1d21 !important;
  border:0 !important;
}

.site-header-inner{
  min-height:78px !important;
}

/* Logo blanco */
.site-header .site-logo{
  width:245px !important;
  filter:brightness(0) invert(1) !important;
}

/* CTA superior más compacto */
.site-header .header-cta{
  min-height:42px !important;
  padding:0 20px !important;

  border-radius:10px !important;

  background:#ff0000 !important;
  border:1px solid #ff0000 !important;

  color:#fff !important;

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

  letter-spacing:.02em !important;
  text-transform:uppercase !important;
}

.site-header .header-cta:hover{
  background:#ffffff !important;
  border-color:#ffffff !important;
  color:#1b1d21 !important;
}


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

.hero-clean{
  position:relative !important;

  min-height:auto !important;

  padding:34px 0 58px !important;

  overflow:hidden !important;

  background:#f3f4f5 !important;
  color:#22262e !important;
}

.hero-clean::before,
.hero-clean::after{
  display:none !important;
}


/* =========================================================
   GRID
   ========================================================= */

.hero-clean-grid{
  display:grid !important;

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

  gap:60px !important;

  align-items:center !important;

  width:min(1320px,calc(100% - 48px)) !important;

  margin:0 auto !important;
}


/* =========================================================
   LEFT
   ========================================================= */

.hero-clean-copy{
  min-width:0 !important;
  max-width:none !important;
}


/* EYEBROW TIPO CODEX */

.hero-eyebrow{
  display:flex !important;
  align-items:center !important;

  gap:11px !important;

  margin:0 0 25px !important;

  padding:0 !important;

  color:#e60000 !important;

  background:none !important;
  border-radius:0 !important;

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

  line-height:1.2 !important;

  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}

.hero-eyebrow-line{
  flex:0 0 24px;

  width:24px;
  height:2px;

  display:block;

  background:#ff0000;
}


/* =========================================================
   TITLE
   ========================================================= */

.hero-clean-title{
  max-width:100% !important;

  margin:0 0 28px !important;

  color:#22262e !important;

  font-size:clamp(41px,4.15vw,62px) !important;
  line-height:1.055 !important;

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

.hero-clean-title strong{
  display:block !important;

  margin-bottom:7px !important;

  font-weight:790 !important;
}

.hero-clean-title span{
  display:block !important;

  font-weight:430 !important;
}


/* =========================================================
   BODY COPY
   ========================================================= */

.hero-clean-text{
  max-width:930px !important;

  margin:0 0 12px !important;

  color:#515863 !important;

  font-size:18px !important;
  line-height:1.6 !important;
}

.hero-clean-text:last-child{
  margin-bottom:0 !important;
}

.hero-clean-text strong{
  color:#22262e !important;
  font-weight:780 !important;
}


/* =========================================================
   RIGHT COLUMN
   ========================================================= */

.hero-clean-side{
  width:100% !important;

  max-width:340px !important;

  justify-self:end !important;
}


/* =========================================================
   PREVIEW CARD
   ========================================================= */

.hero-preview{
  width:100% !important;

  display:block !important;

  overflow:hidden !important;

  background:white !important;

  border:1px solid #d8dbe0 !important;
  border-radius:18px !important;

  text-decoration:none !important;
  color:inherit !important;

  box-shadow:
    0 15px 38px rgba(25,29,37,.09) !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease !important;
}

.hero-preview:hover{
  transform:translateY(-3px) !important;

  box-shadow:
    0 22px 45px rgba(25,29,37,.13) !important;
}


/* TOP */

.hero-preview-top{
  min-height:45px !important;

  padding:0 15px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  background:#ffffff !important;

  border-bottom:1px solid #e0e2e6 !important;
}

.hero-preview-top > span{
  color:#ff0000 !important;

  font-size:10px !important;
  font-weight:850 !important;

  letter-spacing:.11em !important;
}

.hero-preview-top small{
  color:#999ea7 !important;

  font-size:9px !important;
  font-weight:750 !important;

  letter-spacing:.05em !important;
}


/* SCREEN */

.hero-preview-screen{
  position:relative !important;

  min-height:205px !important;

  padding:17px !important;

  display:grid !important;
  place-items:center !important;

  background:#23262c !important;
}


/* PANEL */

.hero-preview-panel{
  width:100% !important;

  padding:13px !important;

  background:#171a1f !important;

  border:1px solid #343840 !important;
  border-radius:13px !important;
}

.hero-preview-dots{
  display:flex !important;
  gap:5px !important;

  margin-bottom:13px !important;
}

.hero-preview-dots i{
  width:6px !important;
  height:6px !important;

  display:block !important;

  border-radius:50% !important;

  background:#5c626c !important;
}

.hero-preview-title{
  margin-bottom:11px !important;

  color:white !important;

  font-size:12px !important;
  font-weight:750 !important;
}


/* SYSTEM BOXES */

.hero-preview-systems{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;

  gap:7px !important;

  margin-bottom:11px !important;
}

.hero-preview-systems div{
  padding:8px !important;

  background:#22252b !important;

  border:1px solid #343840 !important;
  border-radius:7px !important;
}

.hero-preview-systems small{
  display:block !important;

  margin-bottom:2px !important;

  color:#858b95 !important;

  font-size:7px !important;
}

.hero-preview-systems strong{
  color:white !important;

  font-size:13px !important;
}


/* BARS */

.hero-preview-bars{
  display:grid !important;
  gap:6px !important;
}

.hero-preview-bars > div{
  position:relative !important;

  height:21px !important;

  display:flex !important;
  align-items:center !important;

  overflow:hidden !important;

  background:#24272e !important;

  border-radius:5px !important;
}

.hero-preview-bars span{
  position:relative !important;
  z-index:2 !important;

  width:36px !important;

  padding-left:7px !important;

  color:#c1c5cb !important;

  font-size:7px !important;
  font-weight:750 !important;
}

.hero-preview-bars b{
  position:absolute !important;

  left:36px !important;
  top:0 !important;
  bottom:0 !important;

  display:block !important;

  background:rgba(255,0,0,.42) !important;
}


/* PLAY */

.hero-preview-play{
  position:absolute !important;

  left:50% !important;
  top:50% !important;

  transform:translate(-50%,-50%) !important;

  width:52px !important;
  height:52px !important;

  display:grid !important;
  place-items:center !important;

  border-radius:50% !important;

  background:#ff0000 !important;

  box-shadow:
    0 10px 25px rgba(255,0,0,.25) !important;
}

.hero-preview-play span{
  width:0 !important;
  height:0 !important;

  margin-left:4px !important;

  border-top:7px solid transparent !important;
  border-bottom:7px solid transparent !important;
  border-left:11px solid white !important;
}


/* CAPTION */

.hero-preview-caption{
  padding:14px 15px 16px !important;

  display:grid !important;
  gap:3px !important;
}

.hero-preview-caption strong{
  color:#22262e !important;

  font-size:12px !important;
  line-height:1.3 !important;
}

.hero-preview-caption span{
  color:#8b9099 !important;

  font-size:9px !important;
  line-height:1.4 !important;
}


/* =========================================================
   BUTTON BELOW PREVIEW
   ========================================================= */

.hero-preview-cta{
  width:100% !important;

  min-height:45px !important;

  margin-top:11px !important;

  padding:0 16px !important;

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

  background:#ff0000 !important;
  color:white !important;

  border:1px solid #ff0000 !important;
  border-radius:9px !important;

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

  letter-spacing:.025em !important;

  text-transform:uppercase !important;

  transition:.2s ease !important;
}

.hero-preview-cta:hover{
  background:#1b1d21 !important;
  border-color:#1b1d21 !important;
}


/* =========================================================
   VERY IMPORTANT:
   neutralise old hero rules
   ========================================================= */

.hero-v7-grid,
.hero-v7-copy,
.hero-product-preview,
.preview-cta-wrap{
  /* old version no longer exists */
}


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

@media(max-width:1000px){

  .hero-clean-grid{
    grid-template-columns:minmax(0,1.55fr) minmax(270px,.7fr) !important;
    gap:36px !important;
  }

  .hero-clean-title{
    font-size:clamp(40px,5vw,57px) !important;
  }
}


@media(max-width:820px){

  .hero-clean-grid{
    grid-template-columns:1fr !important;
    gap:35px !important;
  }

  .hero-clean-side{
    max-width:420px !important;

    justify-self:start !important;
  }
}


@media(max-width:640px){

  .hero-clean{
    padding:26px 0 45px !important;
  }

  .hero-clean-grid{
    width:min(100% - 28px,1320px) !important;
  }

  .hero-eyebrow{
    font-size:10px !important;
    letter-spacing:.10em !important;
  }

  .hero-clean-title{
    font-size:40px !important;
  }

  .hero-clean-text{
    font-size:16px !important;
  }

  .hero-clean-side{
    max-width:100% !important;
  }
}



/* =========================================================
   AJUSTE HEADER + HERO · NAVEGACIÓN DISCRETA
   ========================================================= */


/* ---------------------------------------------------------
   MISMO ANCHO HEADER / HERO
   --------------------------------------------------------- */

.site-header-inner,
.hero-clean-grid{
  width:min(1320px,calc(100% - 48px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/*
   Si .site-header-inner ya vive dentro de un .container,
   evitamos que el padding/width heredado lo desplace.
*/
.site-header .container{
  width:min(1320px,calc(100% - 48px)) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.site-header-inner{
  min-height:76px !important;
  display:flex !important;
  align-items:center !important;
  gap:28px !important;
}

.site-header .site-logo{
  flex:0 0 auto !important;
  width:245px !important;
}


/* ---------------------------------------------------------
   NAV MUY DISCRETA
   --------------------------------------------------------- */

.header-nav{
  margin-left:auto !important;

  display:flex !important;
  align-items:center !important;
  gap:25px !important;
}

.header-nav a{
  position:relative;

  color:#aeb2ba !important;

  font-size:12px !important;
  font-weight:600 !important;

  letter-spacing:.01em !important;

  white-space:nowrap !important;

  transition:
    color .18s ease !important;
}

.header-nav a:hover{
  color:#ffffff !important;
}

/* pequeña línea inferior al pasar, nada de botones */
.header-nav a::after{
  content:"";

  position:absolute;
  left:0;
  right:100%;
  bottom:-7px;

  height:1px;

  background:#ff0000;

  transition:right .18s ease;
}

.header-nav a:hover::after{
  right:0;
}


/* ---------------------------------------------------------
   CTA HEADER MÁS ESTRECHO
   --------------------------------------------------------- */

.site-header .header-cta{
  flex:0 0 auto !important;

  min-height:40px !important;

  padding:0 17px !important;

  margin-left:5px !important;

  font-size:12px !important;

  border-radius:9px !important;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hero-clean{
  padding-top:30px !important;
}

.hero-clean-grid{
  grid-template-columns:
    minmax(0,2.15fr)
    minmax(270px,.68fr) !important;

  gap:58px !important;
}


/* ---------------------------------------------------------
   TITULAR
   --------------------------------------------------------- */

.hero-clean-title{
  font-size:clamp(40px,4vw,60px) !important;
  line-height:1.055 !important;
}

/* primera frase negra */
.hero-clean-title strong{
  color:#22262e !important;
}

/* prueba controlada de rojo SOLO en segunda frase */
.hero-clean-title span{
  color:#e60000 !important;
  font-weight:520 !important;
}


/* ---------------------------------------------------------
   CTA PRINCIPAL IZQUIERDA
   --------------------------------------------------------- */

.hero-left-cta{
  margin-top:28px !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;

  gap:9px !important;
}

.hero-main-button{
  min-height:52px !important;

  padding:0 28px !important;

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

  background:#ff0000 !important;
  color:white !important;

  border:1px solid #ff0000 !important;
  border-radius:10px !important;

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

  letter-spacing:.035em !important;
  text-transform:uppercase !important;

  box-shadow:
    0 11px 25px rgba(255,0,0,.15) !important;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease !important;
}

.hero-main-button:hover{
  background:#1b1d21 !important;
  border-color:#1b1d21 !important;

  transform:translateY(-2px) !important;
}

.hero-left-cta span{
  color:#858a93 !important;

  font-size:11px !important;
}


/* ---------------------------------------------------------
   PREVIEW DERECHA
   --------------------------------------------------------- */

.hero-clean-side{
  max-width:320px !important;
}

/* ligeramente menos protagonista */
.hero-preview{
  box-shadow:
    0 12px 31px rgba(25,29,37,.08) !important;
}


/* el botón de la derecha deja de existir */
.hero-preview-cta{
  display:none !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:1080px){

  .header-nav{
    gap:17px !important;
  }

  .header-nav a{
    font-size:11px !important;
  }

  .site-header .site-logo{
    width:215px !important;
  }
}


@media(max-width:900px){

  .header-nav{
    display:none !important;
  }

  .site-header .header-cta{
    margin-left:auto !important;
  }

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

  .hero-clean-side{
    max-width:390px !important;
    justify-self:start !important;
  }
}


@media(max-width:640px){

  .site-header-inner,
  .hero-clean-grid,
  .site-header .container{
    width:min(100% - 28px,1320px) !important;
  }

  .site-header .site-logo{
    width:190px !important;
  }

  .hero-clean-title{
    font-size:39px !important;
  }

}



/* =========================================================
   HERO V10
   Producto visual más grande + copy dominante
   ========================================================= */

:root{
  --shark-red:#ff1818;
}


/* HERO */

.hero-v10{
  position:relative !important;

  padding:34px 0 54px !important;

  background:#f3f4f5 !important;
  color:#22262e !important;

  overflow:hidden !important;
}

.hero-v10::before,
.hero-v10::after{
  display:none !important;
}


/* GRID */

.hero-v10-grid{
  width:min(1320px,calc(100% - 48px)) !important;

  margin:0 auto !important;

  display:grid !important;

  grid-template-columns:
    minmax(0,1.12fr)
    minmax(420px,.88fr) !important;

  gap:62px !important;

  align-items:stretch !important;
}


/* LEFT */

.hero-v10-copy{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;

  min-width:0 !important;
}


/* EYEBROW */

.hero-v10-eyebrow{
  display:flex !important;
  align-items:center !important;

  gap:11px !important;

  margin-bottom:25px !important;

  color:var(--shark-red) !important;

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

  line-height:1.2 !important;

  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}

.hero-v10-eyebrow > span{
  width:25px !important;
  height:2px !important;

  flex:0 0 25px !important;

  display:block !important;

  background:var(--shark-red) !important;
}


/* TITLE */

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

  margin:0 0 27px !important;

  color:#22262e !important;

  font-size:clamp(42px,4.25vw,63px) !important;
  line-height:1.035 !important;

  letter-spacing:-.046em !important;

  font-weight:760 !important;
}

.hero-v10-title strong{
  display:block !important;

  margin-bottom:5px !important;

  font-weight:800 !important;

  color:#22262e !important;
}

.hero-v10-title span{
  display:block !important;

  font-weight:620 !important;

  color:#22262e !important;
}


/* BODY */

.hero-v10-text{
  max-width:830px !important;

  margin:0 0 11px !important;

  color:#555c66 !important;

  font-size:18px !important;
  line-height:1.58 !important;
}

.hero-v10-text strong{
  color:#22262e !important;

  font-weight:800 !important;
}


/* BUTTON */

.hero-v10-action{
  margin-top:23px !important;
}

.hero-v10-button{
  min-height:52px !important;

  padding:0 29px !important;

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

  background:var(--shark-red) !important;
  color:#fff !important;

  border:1px solid var(--shark-red) !important;
  border-radius:10px !important;

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

  letter-spacing:.03em !important;
  text-transform:uppercase !important;

  box-shadow:
    0 11px 26px rgba(255,24,24,.16) !important;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease !important;
}

.hero-v10-button:hover{
  transform:translateY(-2px) !important;

  background:#1b1d21 !important;
  border-color:#1b1d21 !important;
}


/* =========================================================
   PRODUCT
   ========================================================= */

.hero-v10-product{
  width:100% !important;
  height:100% !important;

  min-height:505px !important;

  display:flex !important;
  flex-direction:column !important;

  overflow:hidden !important;

  background:#191b20 !important;

  color:#fff !important;
  text-decoration:none !important;

  border-radius:25px !important;

  box-shadow:
    0 22px 60px rgba(18,22,31,.14) !important;

  transition:
    transform .22s ease,
    box-shadow .22s ease !important;
}

.hero-v10-product:hover{
  transform:translateY(-4px) !important;

  box-shadow:
    0 28px 68px rgba(18,22,31,.18) !important;
}


/* PRODUCT HEAD */

.hero-v10-product-head{
  min-height:58px !important;

  padding:0 23px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  color:#b5bbc4 !important;

  font-size:10px !important;
  font-weight:700 !important;

  letter-spacing:.13em !important;
}

.hero-v10-product-head > span{
  color:#d7dbe1 !important;
}

.hero-v10-product-head small{
  position:relative !important;

  padding-left:14px !important;

  color:#bec3ca !important;

  font-size:9px !important;
}

.hero-v10-product-head small::before{
  content:"";

  position:absolute !important;
  left:0 !important;
  top:50% !important;

  transform:translateY(-50%) !important;

  width:7px !important;
  height:7px !important;

  border-radius:50% !important;

  background:#40d184 !important;

  box-shadow:
    0 0 0 5px rgba(64,209,132,.10) !important;
}


/* SCREEN */

.hero-v10-screen{
  position:relative !important;

  flex:1 1 auto !important;

  margin:0 22px !important;

  padding:21px !important;

  display:flex !important;

  background:#202329 !important;

  border:1px solid #363a42 !important;
  border-radius:18px !important;
}

.hero-v10-screen-inner{
  width:100% !important;

  display:flex !important;
  flex-direction:column !important;
}


/* SCREEN TOP */

.hero-v10-screen-top{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;

  gap:16px !important;

  margin-bottom:22px !important;
}

.hero-v10-screen-top small{
  display:block !important;

  margin-bottom:2px !important;

  color:#89909b !important;

  font-size:11px !important;
}

.hero-v10-screen-top h3{
  margin:0 !important;

  color:#fff !important;

  font-size:22px !important;
  line-height:1.15 !important;

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

.hero-v10-badge{
  padding:6px 9px !important;

  border:1px solid rgba(255,24,24,.34) !important;
  border-radius:999px !important;

  background:rgba(255,24,24,.10) !important;

  color:#ff6666 !important;

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

  white-space:nowrap !important;
}


/* SYSTEMS */

.hero-v10-allocation{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;

  gap:10px !important;

  margin-bottom:16px !important;
}

.hero-v10-system{
  padding:13px !important;

  background:#25282f !important;

  border:1px solid #363a42 !important;
  border-radius:11px !important;
}

.hero-v10-system span{
  display:block !important;

  margin-bottom:4px !important;

  color:#818995 !important;

  font-size:9px !important;
}

.hero-v10-system strong{
  color:#fff !important;

  font-size:18px !important;
}


/* BARS */

.hero-v10-bars{
  display:grid !important;

  gap:9px !important;

  margin-bottom:18px !important;
}

.hero-v10-bars > div{
  position:relative !important;

  height:29px !important;

  display:flex !important;
  align-items:center !important;

  overflow:hidden !important;

  border-radius:7px !important;

  background:#292c33 !important;
}

.hero-v10-bars span{
  position:relative !important;
  z-index:2 !important;

  width:48px !important;

  padding-left:10px !important;

  color:#c4c8cf !important;

  font-size:9px !important;
  font-weight:750 !important;
}

.hero-v10-bars i{
  position:absolute !important;

  left:48px !important;
  top:0 !important;
  bottom:0 !important;

  display:block !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,24,24,.28),
      rgba(255,24,24,.55)
    ) !important;
}


/* STATS */

.hero-v10-stats{
  margin-top:auto !important;

  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;

  gap:10px !important;
}

.hero-v10-stats > div{
  padding:13px !important;

  background:#181b20 !important;

  border-radius:10px !important;
}

.hero-v10-stats span{
  display:block !important;

  margin-bottom:4px !important;

  color:#7f8793 !important;

  font-size:8px !important;

  letter-spacing:.08em !important;
}

.hero-v10-stats strong{
  color:#fff !important;

  font-size:13px !important;
}


/* PLAY */

.hero-v10-play{
  position:absolute !important;

  right:-21px !important;
  bottom:38px !important;

  width:70px !important;
  height:70px !important;

  display:grid !important;
  place-items:center !important;

  border:7px solid #f3f4f5 !important;

  border-radius:50% !important;

  background:var(--shark-red) !important;

  box-shadow:
    0 11px 28px rgba(255,24,24,.28) !important;
}

.hero-v10-play span{
  width:0 !important;
  height:0 !important;

  margin-left:5px !important;

  border-top:9px solid transparent !important;
  border-bottom:9px solid transparent !important;
  border-left:14px solid white !important;
}


/* FOOT */

.hero-v10-product-foot{
  min-height:95px !important;

  padding:20px 30px 21px !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;

  gap:5px !important;
}

.hero-v10-product-foot strong{
  color:#fff !important;

  font-size:17px !important;
}

.hero-v10-product-foot span{
  color:#9da4ae !important;

  font-size:12px !important;
}


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

@media(max-width:1050px){

  .hero-v10-grid{
    grid-template-columns:
      minmax(0,1.05fr)
      minmax(370px,.95fr) !important;

    gap:38px !important;
  }

  .hero-v10-title{
    font-size:clamp(40px,4.7vw,58px) !important;
  }
}


@media(max-width:880px){

  .hero-v10-grid{
    grid-template-columns:1fr !important;
    gap:40px !important;
  }

  .hero-v10-product{
    max-width:620px !important;
    min-height:470px !important;
  }
}


@media(max-width:640px){

  .hero-v10{
    padding:27px 0 45px !important;
  }

  .hero-v10-grid{
    width:min(100% - 28px,1320px) !important;
  }

  .hero-v10-title{
    font-size:40px !important;
  }

  .hero-v10-text{
    font-size:16px !important;
  }

  .hero-v10-eyebrow{
    font-size:10px !important;
  }

  .hero-v10-product{
    min-height:auto !important;
  }

  .hero-v10-allocation,
  .hero-v10-stats{
    grid-template-columns:1fr !important;
  }

  .hero-v10-system:nth-child(n+2),
  .hero-v10-stats > div:nth-child(n+2){
    display:none !important;
  }

  .hero-v10-play{
    right:12px !important;
    bottom:26px !important;
  }
}



/* =========================================================
   HERO V11
   Above the fold completo + play superpuesto
   ========================================================= */


/* ---------------------------------------------------------
   HERO MÁS COMPACTO
   --------------------------------------------------------- */

.hero-v10{
  padding-top:22px !important;
  padding-bottom:28px !important;
}

.hero-v10-grid{
  align-items:center !important;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(410px,.85fr) !important;

  gap:54px !important;
}


/* ---------------------------------------------------------
   EYEBROW MÁS CERCA DEL TITULAR
   --------------------------------------------------------- */

.hero-v10-eyebrow{
  margin-bottom:18px !important;
}


/* ---------------------------------------------------------
   TITULAR MÁS COMPACTO
   --------------------------------------------------------- */

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

  margin-bottom:20px !important;

  font-size:clamp(39px,3.72vw,56px) !important;
  line-height:1.025 !important;

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

.hero-v10-title strong{
  margin-bottom:5px !important;

  color:#22262e !important;

  font-weight:800 !important;
}

/* SEGUNDA FRASE EN ROJO */
.hero-v10-title span{
  color:#ff1818 !important;

  font-weight:760 !important;
}


/* ---------------------------------------------------------
   COPY MÁS COMPACTO
   --------------------------------------------------------- */

.hero-v10-text{
  max-width:840px !important;

  margin-bottom:8px !important;

  font-size:17px !important;
  line-height:1.5 !important;
}


/* ---------------------------------------------------------
   CTA IZQUIERDO MÁS CERCA
   --------------------------------------------------------- */

.hero-v10-action{
  margin-top:17px !important;
}

.hero-v10-button{
  min-height:49px !important;

  padding-left:27px !important;
  padding-right:27px !important;
}


/* =========================================================
   PANEL DERECHO
   ========================================================= */

/*
   Importante:
   overflow visible permite que el play salga físicamente
   de la tarjeta, como en la propuesta de Codex.
*/

.hero-v10-product{
  position:relative !important;

  min-height:0 !important;
  height:auto !important;

  overflow:visible !important;

  border-radius:23px !important;
}


/* ---------------------------------------------------------
   HEADER DEL PANEL
   --------------------------------------------------------- */

.hero-v10-product-head{
  min-height:48px !important;

  padding:0 21px !important;
}


/* ---------------------------------------------------------
   PANTALLA
   --------------------------------------------------------- */

.hero-v10-screen{
  flex:none !important;

  min-height:0 !important;

  margin:0 20px !important;

  padding:17px !important;

  border-radius:16px !important;
}

.hero-v10-screen-inner{
  display:block !important;
}


/* ---------------------------------------------------------
   CABECERA INTERNA
   --------------------------------------------------------- */

.hero-v10-screen-top{
  margin-bottom:15px !important;
}

.hero-v10-screen-top small{
  font-size:10px !important;
}

.hero-v10-screen-top h3{
  font-size:20px !important;
}


/* ---------------------------------------------------------
   SISTEMAS
   --------------------------------------------------------- */

.hero-v10-allocation{
  gap:8px !important;

  margin-bottom:12px !important;
}

.hero-v10-system{
  padding:10px 11px !important;
}

.hero-v10-system strong{
  font-size:16px !important;
}


/* ---------------------------------------------------------
   BARRAS
   --------------------------------------------------------- */

.hero-v10-bars{
  gap:7px !important;

  margin-bottom:13px !important;
}

.hero-v10-bars > div{
  height:25px !important;
}


/* ---------------------------------------------------------
   STATS
   Quitar el espacio negro enorme
   --------------------------------------------------------- */

.hero-v10-stats{
  margin-top:12px !important;

  gap:8px !important;
}

.hero-v10-stats > div{
  padding:10px 11px !important;
}

.hero-v10-stats span{
  font-size:7px !important;
}

.hero-v10-stats strong{
  font-size:12px !important;
}


/* ---------------------------------------------------------
   FOOT PANEL
   --------------------------------------------------------- */

.hero-v10-product-foot{
  min-height:72px !important;

  padding:15px 28px 17px !important;

  border-radius:0 0 23px 23px !important;

  background:#191b20 !important;
}

.hero-v10-product-foot strong{
  font-size:15px !important;
}

.hero-v10-product-foot span{
  font-size:11px !important;
}


/* =========================================================
   PLAY SUPERPUESTO
   ========================================================= */

.hero-v10-play{
  /*
    Sale parcialmente del borde derecho.
  */

  right:-27px !important;
  bottom:24px !important;

  width:67px !important;
  height:67px !important;

  border:6px solid #f3f4f5 !important;

  z-index:20 !important;

  transition:
    transform .2s ease,
    background .2s ease !important;
}

.hero-v10-product:hover .hero-v10-play{
  transform:scale(1.07) !important;
  background:#e50000 !important;
}


/* =========================================================
   EVITAR QUE EL HOVER DESPLACE TODO EL PANEL
   ========================================================= */

.hero-v10-product:hover{
  transform:none !important;

  box-shadow:
    0 28px 68px rgba(18,22,31,.18) !important;
}


/* =========================================================
   ALTURA VISUAL
   ========================================================= */

/*
   El objetivo es que en monitores normales de escritorio
   aparezcan dentro del primer viewport:

   - eyebrow
   - titular
   - los dos párrafos
   - CTA
   - panel entero
*/

@media(min-width:1051px) and (max-height:850px){

  .site-header-inner{
    min-height:70px !important;
  }

  .hero-v10{
    padding-top:18px !important;
    padding-bottom:22px !important;
  }

  .hero-v10-title{
    font-size:clamp(38px,3.55vw,53px) !important;
  }

  .hero-v10-text{
    font-size:16px !important;
  }

  .hero-v10-eyebrow{
    margin-bottom:15px !important;
  }

  .hero-v10-action{
    margin-top:14px !important;
  }

}


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

@media(max-width:1050px){

  .hero-v10-grid{
    grid-template-columns:
      minmax(0,1.05fr)
      minmax(370px,.95fr) !important;

    gap:36px !important;
  }

  .hero-v10-title{
    font-size:clamp(38px,4.5vw,53px) !important;
  }

}


@media(max-width:880px){

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

  .hero-v10-product{
    max-width:580px !important;
  }

  .hero-v10-play{
    right:-15px !important;
  }

}


@media(max-width:640px){

  .hero-v10-title{
    font-size:38px !important;
  }

  .hero-v10-title span{
    font-weight:730 !important;
  }

  .hero-v10-play{
    right:10px !important;
    bottom:20px !important;
  }

}


/* =========================================================
   AJUSTES V12
   Navegación + ancho global + rojo suavizado
   ========================================================= */

/* -----------------------------------------
   ROJO MÁS SOFISTICADO EN EL TITULAR
   ----------------------------------------- */

.hero-v10-title span{
  color:#e3262e !important;
}

/* eyebrow igual, para coherencia */
.hero-v10-eyebrow{
  color:#e3262e !important;
}

.hero-v10-eyebrow > span{
  background:#e3262e !important;
}


/* -----------------------------------------
   NAV EN MAYÚSCULAS
   ----------------------------------------- */

.header-nav a{
  text-transform:uppercase !important;
  letter-spacing:.035em !important;
  font-size:11px !important;
  font-weight:700 !important;
}


/* -----------------------------------------
   CTA HEADER EN MISMA LÍNEA VISUAL
   ----------------------------------------- */

.site-header .header-cta{
  text-transform:uppercase !important;
  letter-spacing:.035em !important;
  font-size:11px !important;
  font-weight:800 !important;
}


/* -----------------------------------------
   ANCHO GLOBAL
   Unificamos todo con hero/header
   ----------------------------------------- */

:root{
  --page-max:1320px;
}

.container,
.wrap,
.site-header .container,
.site-header-inner,
.hero-v10-grid{
  width:min(var(--page-max),calc(100% - 48px)) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* -----------------------------------------
   PROOF / CREDIBILITY STRIP
   ----------------------------------------- */

.credibility-grid,
.proofs{
  width:min(var(--page-max),calc(100% - 48px)) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* -----------------------------------------
   SECCIONES
   ----------------------------------------- */

section > .container,
section > .wrap{
  width:min(var(--page-max),calc(100% - 48px)) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* -----------------------------------------
   EVITAR BLOQUES INTERNOS DEMASIADO ESTRECHOS
   ----------------------------------------- */

.section-head{
  max-width:860px !important;
}

.problem-grid,
.tools-wrap,
.evidence,
.profile,
.register-grid,
.fit-grid,
.compare-grid{
  width:100% !important;
}


/* -----------------------------------------
   ANCLAS: evitar que header tape títulos
   ----------------------------------------- */

#problema,
#como-funciona,
#incluye,
#evidencia,
#sobre-shark{
  scroll-margin-top:92px !important;
}


/* -----------------------------------------
   RESPONSIVE
   ----------------------------------------- */

@media(max-width:640px){

  .container,
  .wrap,
  .site-header .container,
  .site-header-inner,
  .hero-v10-grid,
  .credibility-grid,
  .proofs,
  section > .container,
  section > .wrap{
    width:min(100% - 28px,var(--page-max)) !important;
  }

}


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

/* navegación superior eliminada */
.header-nav{
  display:none !important;
}

/* el CTA vuelve a colocarse naturalmente a la derecha */
.site-header .header-cta{
  margin-left:auto !important;
}

/* énfasis del último concepto */
.hero-v10-text strong{
  font-weight:800 !important;
  color:#22262e !important;
}


/* =========================================================
   CORRECCIÓN NAVEGACIÓN + ELIMINAR FRANJA INFERIOR
   ========================================================= */

.header-nav{
  margin-left:auto !important;

  display:flex !important;
  align-items:center !important;
  gap:26px !important;
}

.header-nav a{
  position:relative !important;

  color:#b7bbc3 !important;

  font-size:11px !important;
  font-weight:700 !important;

  letter-spacing:.035em !important;
  text-transform:uppercase !important;

  white-space:nowrap !important;

  transition:color .18s ease !important;
}

.header-nav a:hover{
  color:#ffffff !important;
}

.header-nav a::after{
  content:"";

  position:absolute !important;

  left:0 !important;
  right:100% !important;
  bottom:-7px !important;

  height:1px !important;

  background:#ff1818 !important;

  transition:right .18s ease !important;
}

.header-nav a:hover::after{
  right:0 !important;
}

.site-header .header-cta{
  margin-left:4px !important;
}

/* La franja inferior queda fuera */
.credibility-strip,
.proof-strip{
  display:none !important;
}


/* responsive */
@media(max-width:900px){

  .header-nav{
    display:none !important;
  }

  .site-header .header-cta{
    margin-left:auto !important;
  }

}


/* =========================================================
   LANDING V13
   4 GRANDES ÁREAS
   ========================================================= */


/* ---------------------------------------------------------
   HEADER STICKY
   --------------------------------------------------------- */

.site-header{
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;

  background:#1b1d21 !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.04) !important;
}


/* ---------------------------------------------------------
   NAV
   --------------------------------------------------------- */

.header-nav{
  margin-left:auto !important;

  display:flex !important;
  align-items:center !important;

  gap:26px !important;
}

.header-nav a{
  position:relative !important;

  color:#b9bdc5 !important;

  font-size:11px !important;
  font-weight:700 !important;

  letter-spacing:.045em !important;
  text-transform:uppercase !important;

  white-space:nowrap !important;

  transition:color .18s ease !important;
}

.header-nav a:hover{
  color:#ffffff !important;
}

.header-nav a::after{
  content:"";

  position:absolute !important;

  left:0 !important;
  right:100% !important;
  bottom:-8px !important;

  height:1px !important;

  background:#e3262e !important;

  transition:right .18s ease !important;
}

.header-nav a:hover::after{
  right:0 !important;
}


/* ---------------------------------------------------------
   CHAPTER STARTS
   --------------------------------------------------------- */

.chapter-start{
  scroll-margin-top:78px !important;
}


/* ---------------------------------------------------------
   UN SOLO LENGUAJE DE LABEL
   Línea roja + texto
   --------------------------------------------------------- */

.chapter-start .eyebrow{
  display:flex !important;
  align-items:center !important;

  gap:11px !important;

  margin:0 0 16px !important;

  padding:0 !important;

  background:none !important;

  border:0 !important;
  border-radius:0 !important;

  color:#e3262e !important;

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

  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

.chapter-start .eyebrow::before{
  content:"";

  width:25px !important;
  height:2px !important;

  flex:0 0 25px !important;

  display:block !important;

  background:#e3262e !important;
}


/* ---------------------------------------------------------
   DISTANCIA LABEL -> TITULAR
   --------------------------------------------------------- */

.chapter-start .eyebrow + h2,
.chapter-start .eyebrow + h1,
.chapter-start .section-head h2{
  margin-top:0 !important;
}


/* ---------------------------------------------------------
   GRANDES ÁREAS
   --------------------------------------------------------- */

/*
   MÉTODO
   Empieza claro y contiene problema + cambio de paradigma.
*/

.chapter-method{
  background:#f6f6f7 !important;
}


/*
   QUÉ INCLUYE
*/

.chapter-includes{
  background:#ffffff !important;
}


/*
   RESULTADOS
*/

.chapter-results{
  background:#1b1d21 !important;
  color:#ffffff !important;
}


/*
   SOBRE SHARK
*/

.chapter-about{
  background:#f6f6f7 !important;
}


/* ---------------------------------------------------------
   TITULARES DE CAPÍTULO
   --------------------------------------------------------- */

.chapter-start h2{
  max-width:900px !important;

  font-size:clamp(35px,4vw,52px) !important;
  line-height:1.08 !important;

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


/* ---------------------------------------------------------
   RESULTADOS EN FONDO OSCURO
   --------------------------------------------------------- */

.chapter-results h2,
.chapter-results h3{
  color:#ffffff !important;
}

.chapter-results p{
  color:#b8bdc5 !important;
}


/* ---------------------------------------------------------
   ELIMINAR FAQ SI QUEDARA ALGÚN RESTO
   --------------------------------------------------------- */

.faq,
section:has(.faq){
  display:none !important;
}


/* ---------------------------------------------------------
   RESPONSIVE NAV
   --------------------------------------------------------- */

@media(max-width:900px){

  .header-nav{
    display:none !important;
  }

}


/* =========================================================
   ESTRUCTURA 4 CAPÍTULOS
   ========================================================= */


/* ---------------------------------------------------------
   HEADER STICKY
   --------------------------------------------------------- */

.site-header{
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
}


/* ---------------------------------------------------------
   ANCLAS
   La barra sticky no debe tapar el inicio del capítulo.
   --------------------------------------------------------- */

.chapter-anchor{
  position:relative;
  display:block;
  height:0;
  scroll-margin-top:76px;
}


/* ---------------------------------------------------------
   NAV
   --------------------------------------------------------- */

.header-nav{
  margin-left:auto !important;

  display:flex !important;
  align-items:center !important;

  gap:25px !important;
}

.header-nav a{
  position:relative !important;

  color:#b9bdc5 !important;

  font-size:11px !important;
  font-weight:700 !important;

  letter-spacing:.045em !important;
  text-transform:uppercase !important;

  white-space:nowrap !important;

  transition:color .18s ease !important;
}

.header-nav a:hover{
  color:#ffffff !important;
}

.header-nav a::after{
  content:"";

  position:absolute !important;

  left:0 !important;
  right:100% !important;
  bottom:-8px !important;

  height:1px !important;

  background:#d92b32 !important;

  transition:right .18s ease !important;
}

.header-nav a:hover::after{
  right:0 !important;
}


/* ---------------------------------------------------------
   LABELS DE LAS SECCIONES
   Quitamos aspecto burbuja y usamos lenguaje editorial.
   --------------------------------------------------------- */

section .eyebrow{
  display:flex !important;
  align-items:center !important;

  gap:11px !important;

  width:auto !important;

  margin:0 0 15px !important;
  padding:0 !important;

  border:0 !important;
  border-radius:0 !important;

  background:none !important;

  color:#d92b32 !important;

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

  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

section .eyebrow::before{
  content:"";

  width:24px !important;
  height:2px !important;

  flex:0 0 24px !important;

  display:block !important;

  background:#d92b32 !important;
}


/* Menos hueco entre label y titular */

section .eyebrow + h2,
section .eyebrow + h3{
  margin-top:0 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:900px){

  .header-nav{
    display:none !important;
  }

}


/* =========================================================
   JERARQUÍA VISUAL V14
   HERO LIMPIO + 4 GRANDES CAPÍTULOS
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hero-v10{
  padding-top:38px !important;
}

/* ya no hay eyebrow arriba */
.hero-v10-eyebrow{
  display:none !important;
}

/* damos un poco más de aire al título */
.hero-v10-title{
  margin-top:0 !important;
}


/* ---------------------------------------------------------
   ESPACIADO GLOBAL DE CAPÍTULOS
   --------------------------------------------------------- */

section{
  padding-top:82px !important;
  padding-bottom:82px !important;
}

/* evitar huecos excesivos en el primer capítulo */
#metodo + section,
#metodo{
  scroll-margin-top:76px !important;
}


/* ---------------------------------------------------------
   LABEL PRINCIPAL DE CAPÍTULO
   SOLO PARA MÉTODO / QUÉ INCLUYE / RESULTADOS / SOBRE SHARK
   --------------------------------------------------------- */

.chapter-label,
.chapter-start .eyebrow{
  display:flex !important;
  align-items:center !important;

  gap:11px !important;

  margin:0 0 12px !important;
  padding:0 !important;

  background:none !important;
  border:0 !important;
  border-radius:0 !important;

  color:#d92b32 !important;

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

  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

.chapter-label::before,
.chapter-start .eyebrow::before{
  content:"";

  width:25px !important;
  height:2px !important;

  flex:0 0 25px !important;

  display:block !important;

  background:#d92b32 !important;
}


/* ---------------------------------------------------------
   SUBTÍTULOS INTERNOS
   --------------------------------------------------------- */

.section-kicker{
  margin:0 0 8px !important;

  color:#4f5660 !important;

  font-size:14px !important;
  font-weight:700 !important;

  letter-spacing:.015em !important;
  text-transform:none !important;
}


/* ---------------------------------------------------------
   TITULARES
   --------------------------------------------------------- */

.section-kicker + h2,
.chapter-label + .section-kicker + h2{
  margin-top:0 !important;
}

section h2{
  margin-top:0 !important;
}


/* ---------------------------------------------------------
   ESPACIADO ENTRE PIEZAS INTERNAS
   --------------------------------------------------------- */

.section-head{
  margin-bottom:34px !important;
}

.section-head p{
  margin-top:16px !important;
}


/* ---------------------------------------------------------
   REDUCIR EL HUECO DEL BLOQUE PROBLEMA
   --------------------------------------------------------- */

#metodo + section,
section:has(.problem-grid){
  padding-top:72px !important;
}

.problem-grid{
  align-items:start !important;
}


/* ---------------------------------------------------------
   CAMBIO DE PARADIGMA
   Que se sienta parte del mismo capítulo
   --------------------------------------------------------- */

.paradigm{
  margin-top:0 !important;
}

.paradigm .section-kicker{
  color:#aeb4be !important;
}


/* ---------------------------------------------------------
   UNIFICAR DISTANCIAS DE TODAS LAS ETIQUETAS
   --------------------------------------------------------- */

section .eyebrow{
  margin-bottom:12px !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:640px){

  .hero-v10{
    padding-top:28px !important;
  }

  section{
    padding-top:64px !important;
    padding-bottom:64px !important;
  }

  .section-kicker{
    font-size:13px !important;
  }

}



/* =========================================================
   LANDING V15 · 4 CAPÍTULOS
   ========================================================= */

:root{
  --chapter-red:#d92b32;
  --chapter-dark:#1b1d21;
  --chapter-dark-2:#22252b;
  --chapter-light:#f5f6f7;
  --chapter-white:#ffffff;
  --chapter-ink:#22262e;
  --chapter-muted:#68707b;
  --chapter-line:#dde0e5;
}


/* =========================================================
   HEADER / ANCLAS
   ========================================================= */

.site-header{
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
}

#metodo,
#incluye,
#resultados,
#sobre-shark{
  scroll-margin-top:75px !important;
}


/* =========================================================
   GLOBAL CAPÍTULOS
   ========================================================= */

.chapter{
  padding:86px 0 !important;
}

.chapter > .container{
  width:min(1320px,calc(100% - 48px)) !important;
  max-width:none !important;
  margin:0 auto !important;
}

.chapter-light{
  background:var(--chapter-light) !important;
  color:var(--chapter-ink) !important;
}

.chapter-dark{
  background:var(--chapter-dark) !important;
  color:white !important;
}


/* LABEL PRINCIPAL */

.chapter-label{
  display:flex;
  align-items:center;
  gap:11px;

  margin-bottom:16px;

  color:var(--chapter-red);

  font-size:11px;
  font-weight:800;

  letter-spacing:.14em;
  text-transform:uppercase;
}

.chapter-label > span{
  width:25px;
  height:2px;

  flex:0 0 25px;

  background:var(--chapter-red);
}


/* SUB-LABEL */

.sub-label{
  margin-bottom:8px;

  color:#535a64;

  font-size:14px;
  font-weight:700;
}

.dark-sub{
  color:#aeb4bd !important;
}


/* TITLES */

.chapter h2{
  max-width:900px;

  margin:0 0 20px;

  font-size:clamp(36px,4vw,53px);
  line-height:1.07;

  letter-spacing:-.038em;
}

.chapter-dark h2{
  color:white !important;
}

.chapter-lead{
  max-width:800px;

  margin:0;

  color:var(--chapter-muted);

  font-size:18px;
  line-height:1.65;
}

.chapter-dark .chapter-lead{
  color:#b5bac2;
}


/* =========================================================
   MÉTODO
   ========================================================= */

.chapter-method{
  background:#ffffff !important;
}


/* PROBLEMA */

.method-problem{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:90px;

  align-items:start;
}

.problem-points{
  border-top:1px solid var(--chapter-line);
}

.problem-points article{
  display:grid;
  grid-template-columns:45px 1fr;
  gap:17px;

  padding:21px 0;

  border-bottom:1px solid var(--chapter-line);
}

.problem-points article > span{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#fff1f1;
  color:var(--chapter-red);

  font-size:10px;
  font-weight:800;
}

.problem-points h3{
  margin:0 0 5px;

  font-size:20px;
}

.problem-points p{
  margin:0;

  color:var(--chapter-muted);
}


/* DIVIDER */

.method-divider,
.results-divider,
.about-divider{
  height:1px;

  margin:76px 0;

  background:var(--chapter-line);
}

.chapter-dark .about-divider{
  background:rgba(255,255,255,.11);
}


/* TRANSITION */

.method-transition{
  max-width:1180px;
}

.before-after{
  display:grid;
  grid-template-columns:1fr 75px 1fr;

  align-items:center;

  margin-top:40px;
}

.ba-card{
  padding:30px;

  border:1px solid var(--chapter-line);
  border-radius:19px;

  background:#fafafb;
}

.ba-after{
  border-color:rgba(217,43,50,.30);
}

.ba-card small{
  color:#8a9099;

  font-size:10px;
  font-weight:800;

  letter-spacing:.11em;
}

.ba-card h3{
  margin:8px 0 20px;

  font-size:25px;
}

.ba-card ul{
  margin:0;
  padding:0;

  list-style:none;
}

.ba-card li{
  padding:9px 0;

  color:#656c76;

  border-bottom:1px solid #e6e8eb;
}

.ba-card li:last-child{
  border-bottom:0;
}

.ba-arrow{
  text-align:center;

  color:var(--chapter-red);

  font-size:29px;
}


/* ARCHITECTURE */

.system-row{
  display:grid;

  grid-template-columns:
    1fr 35px
    1fr 35px
    1fr;

  align-items:center;

  margin-top:38px;
}

.system-box{
  min-height:190px;

  padding:27px;

  background:#f7f7f8;

  border:1px solid var(--chapter-line);
  border-radius:18px;
}

.system-box > span{
  color:var(--chapter-red);

  font-size:20px;
  font-weight:850;
}

.system-box h3{
  margin:16px 0 7px;

  font-size:21px;
}

.system-box p{
  margin:0;

  color:var(--chapter-muted);
}

.system-plus{
  text-align:center;

  color:#aaaeb5;

  font-size:24px;
}

.portfolio-result{
  width:min(530px,100%);

  margin:27px auto 0;

  display:grid;

  text-align:center;
}

.portfolio-result > span{
  color:var(--chapter-red);

  font-size:23px;
}

.portfolio-result strong{
  font-size:20px;
}

.portfolio-result small{
  margin-top:3px;

  color:#858b94;
}


/* =========================================================
   QUÉ INCLUYE
   ========================================================= */

.chapter-includes{
  background:#1b1d21 !important;
}

.include-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:15px;

  margin-top:46px;
}

.include-item{
  min-height:250px;

  padding:27px;

  background:#22252b;

  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
}

.include-number{
  color:#e45258;

  font-size:11px;
  font-weight:850;

  letter-spacing:.10em;
}

.include-item h3{
  margin:35px 0 10px;

  color:white;

  font-size:21px;
}

.include-item p{
  margin:0;

  color:#aeb4bd;
}

.include-secondary{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:60px;

  margin-top:68px;
  padding-top:50px;

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

.include-secondary h3{
  margin:0 0 10px;

  color:white;

  font-size:25px;
}

.include-secondary p{
  max-width:530px;

  margin:0;

  color:#aeb4bd;
}


/* =========================================================
   RESULTADOS
   ========================================================= */

.chapter-results{
  background:#f5f6f7 !important;
}

.results-grid{
  display:grid;
  grid-template-columns:1fr .88fr;

  gap:80px;

  align-items:center;
}

.results-list{
  margin:30px 0 0;
  padding:0;

  list-style:none;
}

.results-list li{
  position:relative;

  padding:11px 0 11px 28px;

  border-bottom:1px solid var(--chapter-line);

  color:#5f6670;
}

.results-list li::before{
  content:"✓";

  position:absolute;
  left:0;

  color:var(--chapter-red);

  font-weight:850;
}


/* EVIDENCE PANEL */

.evidence-panel{
  padding:28px;

  background:#1b1d21;

  color:white;

  border-radius:22px;

  box-shadow:
    0 18px 50px rgba(20,24,31,.10);
}

.evidence-panel-head{
  padding-bottom:18px;

  display:flex;
  justify-content:space-between;
  gap:20px;

  border-bottom:1px solid rgba(255,255,255,.11);
}

.evidence-panel-head strong{
  font-size:13px;
}

.evidence-panel-head span{
  color:#e45258;

  font-size:9px;
  font-weight:850;

  letter-spacing:.09em;
}

.evidence-line{
  padding:17px 0;

  display:flex;
  justify-content:space-between;
  gap:20px;

  border-bottom:1px solid rgba(255,255,255,.09);
}

.evidence-line span{
  color:#969da8;

  font-size:13px;
}

.evidence-line strong{
  font-size:13px;
}

.risk-note{
  margin:17px 0 0;

  color:#858c96;

  font-size:11px;
  line-height:1.55;
}


/* TESTIMONIALS */

.testimonials-placeholder h2{
  max-width:820px;
}

.testimonial-grid{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:20px;

  margin-top:35px;
}

.testimonial-grid blockquote{
  margin:0;
  padding:28px;

  background:white;

  border:1px solid var(--chapter-line);
  border-radius:18px;
}

.testimonial-grid blockquote p{
  margin:0 0 18px;

  color:#333840;

  font-size:17px;
  line-height:1.6;
}

.testimonial-grid blockquote footer{
  padding:0;

  background:none;

  color:#8a9099;

  font-size:10px;
}


/* =========================================================
   SOBRE SHARK
   ========================================================= */

.chapter-about{
  background:#1b1d21 !important;
}


/* FIT */

.fit-columns{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:18px;

  margin-top:37px;
}

.fit-column{
  padding:29px;

  border-radius:18px;

  background:#22252b;

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

.fit-column small{
  color:#a3a9b2;

  font-size:10px;
  font-weight:850;

  letter-spacing:.10em;
}

.fit-column ul{
  margin:21px 0 0;
  padding:0;

  list-style:none;
}

.fit-column li{
  position:relative;

  padding:10px 0 10px 26px;

  color:#bec3ca;

  border-bottom:1px solid rgba(255,255,255,.08);
}

.fit-column li:last-child{
  border-bottom:0;
}

.fit-yes li::before,
.fit-no li::before{
  position:absolute;
  left:0;

  font-weight:850;
}

.fit-yes li::before{
  content:"✓";
  color:#e45258;
}

.fit-no li::before{
  content:"×";
  color:#858b94;
}


/* ABOUT */

.about-shark-grid{
  display:grid;
  grid-template-columns:.7fr 1.3fr;

  gap:65px;

  align-items:center;
}

.about-portrait{
  min-height:380px;

  padding:28px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  background:
    linear-gradient(
      145deg,
      #272a30,
      #111317
    );

  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
}

.about-initials{
  width:60px;
  height:60px;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.26);
  border-radius:50%;

  color:#e45258;

  font-weight:850;
}

.about-portrait strong{
  display:block;

  color:white;

  font-size:25px;
}

.about-portrait span{
  color:#aeb4bd;
}

.about-shark-copy > p{
  max-width:760px;

  color:#aeb4bd;

  font-size:16px;
}

.shark-proof{
  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:0;

  margin-top:32px;

  border-top:1px solid rgba(255,255,255,.10);
  border-left:1px solid rgba(255,255,255,.10);
}

.shark-proof > div{
  padding:20px;

  border-right:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}

.shark-proof strong{
  display:block;

  color:white;

  font-size:14px;
}

.shark-proof span{
  display:block;

  margin-top:3px;

  color:#8f969f;

  font-size:11px;
}


/* FINAL CTA */

.final-cta{
  margin-top:78px;
  padding:62px 35px;

  text-align:center;

  background:#d92b32;

  border-radius:23px;
}

.final-cta > span{
  color:rgba(255,255,255,.75);

  font-size:10px;
  font-weight:850;

  letter-spacing:.12em;
}

.final-cta h2{
  max-width:780px;

  margin:13px auto 27px;

  color:white !important;
}

.final-cta-button{
  min-height:51px;

  padding:0 28px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:white;
  color:#1b1d21;

  border-radius:10px;

  font-size:12px;
  font-weight:850;

  letter-spacing:.035em;
  text-transform:uppercase;

  transition:.2s ease;
}

.final-cta-button:hover{
  background:#1b1d21;
  color:white;
}


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

@media(max-width:950px){

  .method-problem,
  .results-grid,
  .about-shark-grid{
    grid-template-columns:1fr;
    gap:45px;
  }

  .include-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .system-row{
    grid-template-columns:1fr;
    gap:12px;
  }

  .system-plus{
    transform:rotate(90deg);
  }

}


@media(max-width:700px){

  .chapter{
    padding:65px 0 !important;
  }

  .chapter > .container{
    width:min(100% - 28px,1320px) !important;
  }

  .before-after,
  .include-grid,
  .include-secondary,
  .testimonial-grid,
  .fit-columns,
  .shark-proof{
    grid-template-columns:1fr;
  }

  .ba-arrow{
    transform:rotate(90deg);
    padding:10px;
  }

  .about-portrait{
    min-height:300px;
  }

  .final-cta{
    padding:45px 22px;
  }

}



/* =========================================================
   CUERPO CODEX
   Scoped para NO tocar hero/header
   ========================================================= */

.codex-body{
  --cd-red:#ff1717;
  --cd-red2:#d90f16;
  --cd-ink:#17191e;
  --cd-muted:#626976;
  --cd-line:#e3e5e9;
  --cd-soft:#f4f5f7;
  --cd-paper:#fff;
  --cd-dark:#17191d;
  --cd-dark2:#202329;

  background:#fff;
  color:var(--cd-ink);
}

.codex-wrap{
  width:min(1320px,calc(100% - 48px));
  margin:auto;
}


/* PROOF */

.codex-body .proof-strip{
  border-bottom:1px solid var(--cd-line);
  background:#fff;
}

.codex-body .proofs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:27px 0;
}

.codex-body .proof{
  padding:0 26px;
  border-right:1px solid var(--cd-line);
}

.codex-body .proof:first-child{
  padding-left:0;
}

.codex-body .proof:last-child{
  border:0;
}

.codex-body .proof b{
  display:block;
  font-size:15px;
}

.codex-body .proof span{
  font-size:13px;
  color:var(--cd-muted);
}


/* GLOBAL SECTION */

.codex-section{
  padding:92px 0 !important;
}

.codex-body .section-head{
  max-width:760px;
}

.codex-body .section-head.center{
  text-align:center;
  margin:0 auto;
}

.codex-body .section-head h2,
.codex-body .evidence-title{
  font-size:clamp(37px,4.2vw,56px);
  line-height:1.08;
  letter-spacing:-.04em;
  margin:14px 0 17px;
}

.codex-body .section-head p,
.codex-body .evidence-copy{
  color:var(--cd-muted);
  font-size:18px;
}


/* EYEBROW EDITORIAL */

.codex-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;

  color:var(--cd-red2);

  font-size:11px;
  font-weight:800;

  letter-spacing:.12em;
  text-transform:uppercase;
}

.codex-eyebrow::before{
  content:"";

  width:23px;
  height:2px;

  background:var(--cd-red);
}


/* PROBLEM */

.codex-body .problem-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;

  gap:95px;
  align-items:start;
}

.codex-body .problem-list{
  border-top:1px solid var(--cd-line);
}

.codex-body .problem-row{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:18px;

  padding:23px 0;

  border-bottom:1px solid var(--cd-line);
}

.codex-body .num{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#fff0f0;
  color:var(--cd-red);

  font-weight:800;
  font-size:11px;
}

.codex-body .problem-row h3{
  margin:0;
  font-size:21px;
}

.codex-body .problem-row p{
  color:var(--cd-muted);
  margin:5px 0 0;
}


/* PARADIGM */

.codex-body .paradigm{
  background:var(--cd-dark);
  color:#fff;
  position:relative;
  overflow:hidden;
}

.codex-body .paradigm .section-head p{
  color:#aeb4bd;
}

.codex-body .compare{
  display:grid;
  grid-template-columns:1fr 90px 1fr;

  align-items:center;

  margin-top:55px;
}

.codex-body .compare-card{
  padding:31px;

  border:1px solid #343840;
  border-radius:20px;

  background:#1c1f24;
}

.codex-body .compare-card.to{
  border-color:rgba(255,23,23,.55);
  background:linear-gradient(145deg,#211d21,#1a1c21);
}

.codex-body .compare-card label{
  color:#838a96;

  font-size:11px;
  font-weight:800;

  letter-spacing:.13em;
  text-transform:uppercase;
}

.codex-body .compare-card h3{
  font-size:27px;
  margin:10px 0 22px;
}

.codex-body .check{
  display:flex;
  gap:11px;

  margin:12px 0;

  color:#c3c7ce;
}

.codex-body .check::before{
  content:"×";
  color:#747b86;
  font-weight:700;
}

.codex-body .to .check::before{
  content:"✓";
  color:#ff6262;
}

.codex-body .arrow{
  text-align:center;

  color:var(--cd-red);

  font-size:32px;
}


/* FEATURES */

.codex-body .cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:18px;

  margin-top:50px;
}

.codex-body .feature{
  padding:29px;

  border:1px solid var(--cd-line);
  border-radius:18px;

  transition:.2s;
}

.codex-body .feature:hover{
  border-color:#b9bdc5;
  transform:translateY(-3px);
}

.codex-body .icon{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border-radius:11px;

  background:#fff0f0;
  color:var(--cd-red);

  font-weight:800;
}

.codex-body .feature h3{
  margin:20px 0 8px;
  font-size:22px;
}

.codex-body .feature p{
  margin:0;
  color:var(--cd-muted);
}


/* STEPS */

.codex-body .steps-bg{
  background:var(--cd-soft);
}

.codex-body .steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:22px;

  margin-top:48px;

  counter-reset:steps;
}

.codex-body .step{
  padding:29px;

  background:#fff;

  border:1px solid var(--cd-line);
  border-radius:18px;
}

.codex-body .step::before{
  counter-increment:steps;
  content:"0" counter(steps);

  display:block;

  color:var(--cd-red);

  font-size:12px;
  font-weight:800;

  letter-spacing:.1em;
}

.codex-body .step h3{
  margin:35px 0 9px;
  font-size:22px;
}

.codex-body .step p{
  color:var(--cd-muted);
  margin:0;
}


/* EVIDENCE */

.codex-body .evidence-grid{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:75px;

  align-items:center;
}

.codex-body .evidence-box{
  padding:29px;

  background:var(--cd-dark);
  color:#fff;

  border-radius:24px;
}

.codex-body .evidence-head{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding-bottom:20px;

  border-bottom:1px solid #333740;
}

.codex-body .evidence-head strong{
  font-size:17px;
}

.codex-body .evidence-head span{
  color:#ff7b7b;

  font-size:10px;
  font-weight:800;

  letter-spacing:.1em;
}

.codex-body .evidence-row{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;

  gap:12px;

  padding:16px 0;

  border-bottom:1px solid #2d3138;

  align-items:center;
}

.codex-body .evidence-row:last-of-type{
  border:0;
}

.codex-body .evidence-row span{
  color:#9ca3ae;
  font-size:13px;
}

.codex-body .evidence-row b{
  text-align:right;
  font-size:13px;
}

.codex-body .evidence-note{
  margin-top:17px;

  color:#777f8b;

  font-size:11px;
}

.codex-body .bullets{
  margin:28px 0 0;
  padding:0;

  list-style:none;
}

.codex-body .bullets li{
  position:relative;

  padding:11px 0 11px 30px;

  border-bottom:1px solid var(--cd-line);
}

.codex-body .bullets li::before{
  content:"✓";

  position:absolute;
  left:0;

  color:var(--cd-red);

  font-weight:800;
}


/* FIT */

.codex-body .fit{
  background:#f5f6f7;
}

.codex-body .fit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:20px;

  margin-top:48px;
}

.codex-body .fit-card{
  padding:32px;

  background:#fff;

  border:1px solid var(--cd-line);
  border-radius:20px;
}

.codex-body .fit-card.no{
  background:#202328;
  color:#fff;

  border-color:#202328;
}

.codex-body .fit-card h3{
  font-size:25px;
}

.codex-body .fit-card ul{
  padding:0;
  margin:20px 0 0;

  list-style:none;
}

.codex-body .fit-card li{
  display:flex;
  gap:12px;

  padding:10px 0;

  border-bottom:1px solid var(--cd-line);
}

.codex-body .fit-card.no li{
  border-color:#343840;
  color:#c3c8cf;
}

.codex-body .fit-card li::before{
  content:"✓";

  color:var(--cd-red);

  font-weight:800;
}

.codex-body .fit-card.no li::before{
  content:"×";
  color:#858c96;
}


/* ABOUT */

.codex-body .about-grid{
  display:grid;
  grid-template-columns:.72fr 1.28fr;

  gap:70px;

  align-items:center;
}

.codex-body .portrait{
  min-height:400px;

  padding:28px;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  position:relative;
  overflow:hidden;

  border-radius:24px;

  background:linear-gradient(145deg,#23262c,#111318);

  color:#fff;
}

.codex-body .portrait .seal{
  width:58px;
  height:58px;

  position:absolute;
  left:28px;
  top:28px;

  display:grid;
  place-items:center;

  border:1px solid #525761;
  border-radius:50%;

  color:#ff6060;

  font-weight:800;
}

.codex-body .portrait h3{
  margin:0;
  font-size:30px;
}

.codex-body .portrait p{
  margin:3px 0;
  color:#a8aeb8;
}

.codex-body .about-copy h2{
  font-size:clamp(37px,4vw,55px);
  line-height:1.08;

  margin:15px 0 23px;
}

.codex-body .about-copy p{
  color:var(--cd-muted);
  font-size:17px;
}

.codex-body .about-meta{
  display:flex;
  gap:35px;

  margin-top:28px;
  padding-top:23px;

  border-top:1px solid var(--cd-line);
}

.codex-body .about-meta b{
  display:block;
  font-size:22px;
}

.codex-body .about-meta span{
  font-size:12px;
  color:var(--cd-muted);
}


/* FINAL */

.codex-final{
  padding:82px 0;

  background:var(--cd-red);

  color:#fff;

  text-align:center;
}

.codex-final h2{
  max-width:840px;

  margin:0 auto 22px;

  font-size:clamp(38px,4.7vw,60px);
  line-height:1.05;
}

.codex-final p{
  max-width:650px;

  margin:0 auto 28px;

  color:rgba(255,255,255,.82);

  font-size:18px;
}

.codex-final-btn{
  min-height:51px;

  padding:0 25px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:#fff;
  color:#181a1e;

  border-radius:10px;

  font-size:13px;
  font-weight:800;

  text-transform:uppercase;
}


/* RESPONSIVE */

@media(max-width:920px){

  .codex-body .problem-grid,
  .codex-body .evidence-grid,
  .codex-body .about-grid{
    grid-template-columns:1fr;
    gap:48px;
  }

  .codex-body .compare{
    grid-template-columns:1fr;
  }

  .codex-body .arrow{
    transform:rotate(90deg);
    padding:12px;
  }

  .codex-body .steps{
    grid-template-columns:1fr;
  }

  .codex-body .proofs{
    grid-template-columns:repeat(2,1fr);
    gap:22px;
  }

}


@media(max-width:650px){

  .codex-wrap{
    width:min(100% - 28px,1320px);
  }

  .codex-section{
    padding:68px 0 !important;
  }

  .codex-body .cards,
  .codex-body .fit-grid{
    grid-template-columns:1fr;
  }

  .codex-body .proofs{
    grid-template-columns:1fr;
  }

  .codex-body .proof{
    padding:15px 0;
    border-right:0;
    border-bottom:1px solid var(--cd-line);
  }

  .codex-body .about-meta{
    flex-wrap:wrap;
    gap:20px;
  }

}


/* =========================================================
   ALINEACIÓN GLOBAL V16
   Todo el cuerpo usa el mismo carril que el HERO
   ========================================================= */

:root{
  --site-max:1320px;
  --site-gutter:48px;
}

/* HERO / HEADER */
.site-header .container,
.site-header-inner,
.hero-v10-grid{
  width:min(var(--site-max),calc(100% - var(--site-gutter))) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* CUERPO CODEX */
.codex-wrap,
.codex-body .codex-wrap{
  width:min(var(--site-max),calc(100% - var(--site-gutter))) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* BLOQUES INTERNOS */
.codex-body .problem-grid,
.codex-body .compare,
.codex-body .cards,
.codex-body .steps,
.codex-body .evidence-grid,
.codex-body .fit-grid,
.codex-body .about-grid,
.codex-body .proofs{
  width:100% !important;
  max-width:none !important;
}

/* encabezados de sección:
   permitimos que el bloque esté alineado con el hero,
   aunque el texto tenga un ancho legible */
.codex-body .section-head{
  margin-left:0 !important;
  margin-right:0 !important;
}

/* si es center, solo centra el texto,
   no reduce el carril general */
.codex-body .section-head.center{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* franja superior de credibilidad */
.codex-body .proof-strip{
  width:100% !important;
}

/* evitar anchos viejos heredados */
.container,
.wrap{
  max-width:none !important;
}

/* MOBILE */
@media(max-width:650px){

  :root{
    --site-gutter:28px;
  }

  .site-header .container,
  .site-header-inner,
  .hero-v10-grid,
  .codex-wrap,
  .codex-body .codex-wrap{
    width:min(100% - var(--site-gutter),var(--site-max)) !important;
  }

}


/* =========================================================
   ALINEACIÓN REAL CON HERO
   ========================================================= */

:root{
  --hero-page-width:1320px;
  --hero-page-gutter:48px;
}

/* MISMO CARRIL EXACTO */
.hero-v10-grid,
.site-header-inner,
.site-header .container,
.codex-wrap,
.codex-body .codex-wrap,
.codex-body .proofs{
  width:min(
    var(--hero-page-width),
    calc(100% - var(--hero-page-gutter))
  ) !important;

  max-width:none !important;

  margin-left:auto !important;
  margin-right:auto !important;
}


/* =========================================================
   QUITAR LIMITACIONES INTERNAS
   ========================================================= */

.codex-body .problem-grid,
.codex-body .compare,
.codex-body .cards,
.codex-body .steps,
.codex-body .evidence-grid,
.codex-body .fit-grid,
.codex-body .about-grid{
  width:100% !important;
  max-width:none !important;
}


/* =========================================================
   PROBLEMA
   Más ancho y alineado con el hero
   ========================================================= */

.codex-body .problem-grid{
  grid-template-columns:
    minmax(0,.82fr)
    minmax(0,1.18fr) !important;

  gap:70px !important;
}

.codex-body .problem-grid .section-head{
  max-width:100% !important;
}


/* =========================================================
   PARADIGMA
   ========================================================= */

.codex-body .paradigm .section-head{
  max-width:900px !important;
}

.codex-body .compare{
  grid-template-columns:
    minmax(0,1fr)
    80px
    minmax(0,1fr) !important;
}


/* =========================================================
   QUÉ ES QSC
   ========================================================= */

.codex-body #incluye .section-head{
  max-width:900px !important;
}

.codex-body .cards{
  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;
}


/* =========================================================
   CÓMO FUNCIONA
   ========================================================= */

.codex-body .steps{
  grid-template-columns:
    repeat(3,minmax(0,1fr)) !important;
}


/* =========================================================
   RESULTADOS
   ========================================================= */

.codex-body .evidence-grid{
  grid-template-columns:
    minmax(0,.95fr)
    minmax(0,1.05fr) !important;

  gap:70px !important;
}


/* =========================================================
   ENCAJE
   ========================================================= */

.codex-body .fit-grid{
  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;
}


/* =========================================================
   SOBRE SHARK
   ========================================================= */

.codex-body .about-grid{
  grid-template-columns:
    minmax(320px,.72fr)
    minmax(0,1.28fr) !important;

  gap:70px !important;
}


/* =========================================================
   SECTION HEAD CENTER
   Solo centramos texto, no estrechamos excesivamente
   ========================================================= */

.codex-body .section-head.center{
  max-width:900px !important;
}


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

@media(max-width:920px){

  .codex-body .problem-grid,
  .codex-body .evidence-grid,
  .codex-body .about-grid{
    grid-template-columns:1fr !important;
  }

}

@media(max-width:650px){

  :root{
    --hero-page-gutter:28px;
  }

}


/* =========================================================
   FIX DEFINITIVO DE ALINEACIÓN
   Los grids que también son codex-wrap deben conservar
   exactamente el mismo carril horizontal que el hero.
   ========================================================= */

/* MISMA GEOMETRÍA QUE EL HERO */
.hero-v10-grid,
.codex-body .codex-wrap,
.codex-body .codex-wrap.problem-grid,
.codex-body .codex-wrap.evidence-grid,
.codex-body .codex-wrap.about-grid,
.codex-body .codex-wrap.proofs{
    width:min(1320px, calc(100% - 48px)) !important;
    max-width:1320px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/*
   IMPORTANTÍSIMO:
   anulamos las reglas anteriores que estaban poniendo
   width:100% sobre estos grids.
*/
.codex-body .problem-grid,
.codex-body .evidence-grid,
.codex-body .about-grid{
    width:min(1320px, calc(100% - 48px)) !important;
    max-width:1320px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}


/* Los elementos INTERNOS sí ocupan todo el ancho disponible */
.codex-body .problem-list,
.codex-body .compare,
.codex-body .cards,
.codex-body .steps,
.codex-body .fit-grid{
    width:100% !important;
}


/* =========================================================
   SECCIONES QUE TIENEN .codex-wrap COMO PADRE
   ========================================================= */

.codex-body .paradigm > .codex-wrap,
.codex-body #incluye > .codex-wrap,
.codex-body .steps-bg > .codex-wrap,
.codex-body .fit > .codex-wrap,
.codex-final > .codex-wrap{
    width:min(1320px, calc(100% - 48px)) !important;
    max-width:1320px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}


/* MOBILE */
@media(max-width:650px){

    .hero-v10-grid,
    .codex-body .codex-wrap,
    .codex-body .codex-wrap.problem-grid,
    .codex-body .codex-wrap.evidence-grid,
    .codex-body .codex-wrap.about-grid,
    .codex-body .codex-wrap.proofs,
    .codex-body .problem-grid,
    .codex-body .evidence-grid,
    .codex-body .about-grid,
    .codex-body .paradigm > .codex-wrap,
    .codex-body #incluye > .codex-wrap,
    .codex-body .steps-bg > .codex-wrap,
    .codex-body .fit > .codex-wrap,
    .codex-final > .codex-wrap{
        width:calc(100% - 28px) !important;
        max-width:none !important;
    }

}


/* =========================================================
   V17 · BODY ALINEADO CON LA GEOMETRÍA REAL DEL HERO
   ========================================================= */

.codex-body .codex-wrap{
    box-sizing:border-box !important;
}

/*
   Estas variables las calcula JS leyendo el hero real.
   No dependemos ya de 1320px ni de márgenes estimados.
*/
.codex-body .codex-wrap,
.codex-final .codex-wrap{
    width:var(--hero-real-width, auto) !important;
    max-width:var(--hero-real-width, none) !important;
    margin-left:var(--hero-real-left, auto) !important;
    margin-right:auto !important;
}


/* Los grids internos nunca pueden escapar de ese carril */
.codex-body .problem-grid,
.codex-body .evidence-grid,
.codex-body .about-grid,
.codex-body .proofs{
    width:var(--hero-real-width, auto) !important;
    max-width:var(--hero-real-width, none) !important;
    margin-left:var(--hero-real-left, auto) !important;
    margin-right:auto !important;
}


/* Elementos que viven DENTRO del wrap */
.codex-body .compare,
.codex-body .cards,
.codex-body .steps,
.codex-body .fit-grid{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
}


/* En móvil volvemos al gutter normal */
@media(max-width:700px){

    .codex-body .codex-wrap,
    .codex-final .codex-wrap,
    .codex-body .problem-grid,
    .codex-body .evidence-grid,
    .codex-body .about-grid,
    .codex-body .proofs{
        width:calc(100% - 28px) !important;
        max-width:none !important;
        margin-left:14px !important;
        margin-right:14px !important;
    }

}


/* =========================================================
   V18 · RITMO VERTICAL DE SECCIONES
   Más cerca del corte anterior + más aire antes del título
   ========================================================= */

/* Antes: 92px.
   Ahora acercamos el contenido al inicio de cada bloque. */
.codex-section{
  padding-top:64px !important;
  padding-bottom:86px !important;
}


/* El titulillo rojo gana presencia y separación */
.codex-eyebrow{
  margin-bottom:18px !important;
}


/* Evitamos que el h2 vuelva a pegarse al eyebrow */
.codex-eyebrow + h2,
.section-head .codex-eyebrow + h2,
.codex-eyebrow + .evidence-title{
  margin-top:0 !important;
}


/* En los section-head originales había margen propio en el h2.
   Lo normalizamos para que todos sigan el mismo patrón. */
.codex-body .section-head h2{
  margin-top:0 !important;
}


/* Caso específico de resultados */
.codex-body .evidence-title{
  margin-top:0 !important;
}


/* Un poco más de aire entre título y texto */
.codex-body .section-head h2 + p,
.codex-body .evidence-title + .evidence-copy{
  margin-top:20px !important;
}


/* El primer bloque después del hero:
   ligeramente más cerca todavía */
.codex-body #metodo{
  padding-top:58px !important;
}


/* Responsive */
@media(max-width:650px){

  .codex-section{
    padding-top:50px !important;
    padding-bottom:66px !important;
  }

  .codex-body #metodo{
    padding-top:46px !important;
  }

  .codex-eyebrow{
    margin-bottom:14px !important;
  }

}


/* =========================================================
   MÉTODO V20
   Copy definitivo provisional
   ========================================================= */


/* Énfasis final del diagnóstico */

.codex-body .problem-emphasis{
  margin-top:22px !important;

  color:#17191e !important;

  font-size:17px !important;
  font-weight:800 !important;
  line-height:1.45 !important;
}


/* El segundo párrafo del cambio de paradigma
   no debe quedar demasiado pegado al primero */

.codex-body .paradigm .section-head p + p{
  margin-top:15px !important;
}


/* Bold dentro del bloque oscuro */

.codex-body .paradigm .section-head p strong{
  color:#ffffff !important;
  font-weight:750 !important;
}


/* Frase de cierre del capítulo MÉTODO */

.codex-body .paradigm-statement{
  max-width:900px !important;

  margin:50px auto 0 !important;
  padding-top:32px !important;

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

  text-align:center !important;
}

.codex-body .paradigm-statement strong{
  color:#ffffff !important;

  font-size:clamp(22px,2.1vw,30px) !important;
  line-height:1.3 !important;
  letter-spacing:-.02em !important;
}


/* La lista derecha del problema conserva buena respiración */

.codex-body .problem-row h3{
  line-height:1.22 !important;
}

.codex-body .problem-row p{
  line-height:1.55 !important;
}


/* MOBILE */

@media(max-width:650px){

  .codex-body .problem-emphasis{
    font-size:16px !important;
  }

  .codex-body .paradigm-statement{
    margin-top:36px !important;
    padding-top:25px !important;
  }

}


/* =========================================================
   V21 · CAMBIO DE PARADIGMA
   Fondo más claro + solución en verde suave
   ========================================================= */

/* Fondo general menos pesado */
.codex-body .paradigm{
  background:#2b2f35 !important;
}


/* Tarjeta izquierda: neutral */
.codex-body .paradigm .compare-card{
  background:#262a30 !important;
  border-color:rgba(255,255,255,.10) !important;
}


/* Tarjeta derecha: solución */
.codex-body .paradigm .compare-card.to{
  background:#30363a !important;

  border-color:rgba(91,185,140,.42) !important;

  box-shadow:
    0 0 0 1px rgba(91,185,140,.04),
    0 18px 45px rgba(0,0,0,.10) !important;
}


/* Label derecha */
.codex-body .paradigm .compare-card.to label{
  color:#7dcea5 !important;
}


/* Checks izquierda: neutros */
.codex-body .paradigm .compare-card:not(.to) .check::before{
  color:#858b94 !important;
}


/* Checks derecha: verde */
.codex-body .paradigm .compare-card.to .check::before{
  color:#5bb98c !important;
}


/* Flecha central:
   quitamos rojo para que no parezca advertencia */
.codex-body .paradigm .arrow{
  color:#8f969f !important;
}


/* Título panel derecho ligeramente más luminoso */
.codex-body .paradigm .compare-card.to h3{
  color:#ffffff !important;
}


/* Texto de checks */
.codex-body .paradigm .compare-card.to .check{
  color:#d7dbdf !important;
}


/* Mantener rojo solo como identidad editorial */
.codex-body .paradigm .codex-eyebrow{
  color:#e45258 !important;
}

.codex-body .paradigm .codex-eyebrow::before{
  background:#e45258 !important;
}


/* Frase final: integración con el nuevo fondo */
.codex-body .paradigm-statement{
  border-top-color:rgba(255,255,255,.13) !important;
}


/* =========================================================
   QUÉ INCLUYE V22
   ========================================================= */


/* ---------------------------------------------------------
   ALINEACIÓN IZQUIERDA
   --------------------------------------------------------- */

.codex-body #incluye .section-head,
.codex-body #incluye .section-head.center,
.codex-body .qsc-head{
  max-width:900px !important;
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:left !important;
}


/* ---------------------------------------------------------
   TEXTO INTRO
   --------------------------------------------------------- */

.codex-body .qsc-head p{
  max-width:820px !important;
}

.codex-body .qsc-head p + p{
  margin-top:14px !important;
}

.codex-body .qsc-head strong{
  color:#1a1d22 !important;
  font-weight:750 !important;
}


/* ---------------------------------------------------------
   PILARES
   --------------------------------------------------------- */

.codex-body .qsc-pillars{
  margin-top:44px !important;
}

.codex-body .qsc-pillars .feature{
  min-height:245px !important;
}


/* ---------------------------------------------------------
   FRASE CIERRE QSC
   --------------------------------------------------------- */

.codex-body .qsc-closing{
  max-width:900px !important;

  margin:46px 0 0 !important;
  padding-top:28px !important;

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

.codex-body .qsc-closing strong{
  display:block !important;

  color:#1b1d21 !important;

  font-size:clamp(21px,2vw,28px) !important;
  line-height:1.35 !important;
  letter-spacing:-.02em !important;
}


/* ---------------------------------------------------------
   CÓMO FUNCIONA
   --------------------------------------------------------- */

.codex-body .steps-bg .section-head{
  max-width:900px !important;
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:left !important;
}


/* ---------------------------------------------------------
   FRANJA IMPLEMENTACIÓN
   --------------------------------------------------------- */

.codex-body .implementation-strip{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:0 !important;

  margin-top:42px !important;

  border:1px solid #dfe2e6 !important;
  border-radius:18px !important;

  overflow:hidden !important;

  background:#ffffff !important;
}

.codex-body .implementation-strip > div{
  padding:25px 28px !important;
}

.codex-body .implementation-strip > div + div{
  border-left:1px solid #dfe2e6 !important;
}

.codex-body .implementation-strip span{
  display:block !important;

  margin-bottom:8px !important;

  color:#d92b32 !important;

  font-size:10px !important;
  font-weight:850 !important;

  letter-spacing:.11em !important;
}

.codex-body .implementation-strip strong{
  display:block !important;

  color:#25282d !important;

  font-size:15px !important;
  line-height:1.5 !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:700px){

  .codex-body .implementation-strip{
    grid-template-columns:1fr !important;
  }

  .codex-body .implementation-strip > div + div{
    border-left:0 !important;
    border-top:1px solid #dfe2e6 !important;
  }

}


/* =========================================================
   V23 · CIERRES CENTRADOS + 4 PILARES EN UNA LÍNEA
   ========================================================= */


/* ---------------------------------------------------------
   FRASE DE CIERRE DE QUANT SPREAD CORE
   Misma lógica visual que Cambio de Paradigma
   --------------------------------------------------------- */

.codex-body .qsc-closing{
  max-width:980px !important;

  margin:54px auto 0 !important;
  padding-top:32px !important;

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

  text-align:center !important;
}

.codex-body .qsc-closing strong{
  display:block !important;

  max-width:900px !important;
  margin:0 auto !important;

  color:#1b1d21 !important;

  font-size:clamp(22px,2.1vw,30px) !important;
  line-height:1.30 !important;
  letter-spacing:-.025em !important;
}


/* ---------------------------------------------------------
   CUATRO PILARES EN UNA ÚNICA FILA
   --------------------------------------------------------- */

.codex-body .qsc-pillars{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;

  gap:14px !important;

  margin-top:42px !important;
}


/* Tarjetas más compactas */
.codex-body .qsc-pillars .feature{
  min-height:220px !important;

  padding:24px !important;
}


/* Número más compacto */
.codex-body .qsc-pillars .icon{
  width:42px !important;
  height:42px !important;

  border-radius:10px !important;

  font-size:12px !important;
}


/* Títulos */
.codex-body .qsc-pillars .feature h3{
  margin:25px 0 8px !important;

  font-size:20px !important;
  line-height:1.22 !important;
}


/* Texto */
.codex-body .qsc-pillars .feature p{
  font-size:15px !important;
  line-height:1.55 !important;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media(max-width:1050px){

  .codex-body .qsc-pillars{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:650px){

  .codex-body .qsc-pillars{
    grid-template-columns:1fr !important;
  }

  .codex-body .qsc-pillars .feature{
    min-height:0 !important;
  }

  .codex-body .qsc-closing{
    margin-top:40px !important;
    padding-top:26px !important;
  }

}


/* =========================================================
   V24 · AUDITORÍA TIPOGRÁFICA BASE
   ========================================================= */


/* ---------------------------------------------------------
   PÁRRAFOS GENERALES DEL CUERPO
   --------------------------------------------------------- */

.codex-body .section-head p,
.codex-body .evidence-copy,
.codex-body .about-copy p{
  font-size:18px !important;
  line-height:1.62 !important;
}


/* ---------------------------------------------------------
   CARDS / FEATURES
   --------------------------------------------------------- */

.codex-body .feature h3,
.codex-body .step h3,
.codex-body .problem-row h3{
  font-size:22px !important;
  line-height:1.25 !important;
}

.codex-body .feature p,
.codex-body .step p,
.codex-body .problem-row p{
  font-size:16px !important;
  line-height:1.6 !important;
}


/* ---------------------------------------------------------
   CÓMO FUNCIONA
   --------------------------------------------------------- */

.codex-body .steps{
  gap:20px !important;
}

.codex-body .step{
  padding:31px !important;
}

.codex-body .step::before{
  font-size:12px !important;
}

.codex-body .step h3{
  margin-top:30px !important;
  font-size:23px !important;
}

.codex-body .step p{
  font-size:17px !important;
  line-height:1.62 !important;
}


/* ---------------------------------------------------------
   ACCESO PERMANENTE / 12 SEMANAS
   --------------------------------------------------------- */

.codex-body .implementation-strip span{
  margin-bottom:10px !important;

  font-size:11px !important;
  line-height:1.3 !important;
}

.codex-body .implementation-strip strong{
  font-size:17px !important;
  line-height:1.55 !important;
}

.codex-body .implementation-strip > div{
  padding:29px 30px !important;
}


/* ---------------------------------------------------------
   EYEBROWS / LABELS
   --------------------------------------------------------- */

.codex-body .codex-eyebrow{
  font-size:12px !important;
}


/* ---------------------------------------------------------
   SMALL TEXT GENERAL
   Evitar microtipografía demasiado pequeña
   --------------------------------------------------------- */

.codex-body .about-meta span,
.codex-body .evidence-row span,
.codex-body .evidence-row b{
  font-size:13px !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:650px){

  .codex-body .section-head p,
  .codex-body .evidence-copy,
  .codex-body .about-copy p{
    font-size:17px !important;
  }

  .codex-body .feature p,
  .codex-body .step p,
  .codex-body .problem-row p{
    font-size:16px !important;
  }

  .codex-body .implementation-strip strong{
    font-size:16px !important;
  }

}


/* =========================================================
   V25 · RESULTADOS
   ========================================================= */


/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.codex-body .results-head{
  max-width:950px !important;
  margin-left:0 !important;
}

.codex-body .results-head p{
  max-width:850px !important;
}

.codex-body .results-head p + p{
  margin-top:14px !important;
}

.codex-body .results-head strong{
  color:#1b1d21 !important;
}


/* ---------------------------------------------------------
   CURVA HISTÓRICA
   --------------------------------------------------------- */

.codex-body .trackrecord-visual{
  margin-top:46px !important;

  padding:20px !important;

  background:#0b192b !important;

  border:1px solid #233d59 !important;
  border-radius:22px !important;

  box-shadow:0 20px 50px rgba(11,25,43,.10) !important;
}

.codex-body .trackrecord-topline{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;

  padding:3px 5px 18px !important;
}

.codex-body .trackrecord-topline span{
  display:block !important;

  color:#45d0bf !important;

  font-size:10px !important;
  font-weight:850 !important;

  letter-spacing:.11em !important;
}

.codex-body .trackrecord-topline strong{
  display:block !important;

  margin-top:4px !important;

  color:#ffffff !important;

  font-size:19px !important;
}

.codex-body .trackrecord-topline small{
  color:#92a6ba !important;
  font-size:12px !important;
}

.codex-body .trackrecord-image-wrap{
  overflow:hidden !important;

  border:1px solid #213a55 !important;
  border-radius:15px !important;

  background:#091629 !important;
}

.codex-body .trackrecord-image-wrap img{
  width:100% !important;
  height:auto !important;

  display:block !important;
}

.codex-body .trackrecord-caption{
  margin:13px 5px 1px !important;

  color:#91a6ba !important;

  font-size:12px !important;
  line-height:1.5 !important;
}


/* ---------------------------------------------------------
   CONFIGURACIONES
   --------------------------------------------------------- */

.codex-body .configurations{
  margin-top:68px !important;
}

.codex-body .configurations-head{
  display:grid !important;
  grid-template-columns:1.05fr .95fr !important;
  gap:70px !important;

  align-items:end !important;
}

.codex-body .sub-result-label{
  margin-bottom:8px !important;

  color:#d92b32 !important;

  font-size:11px !important;
  font-weight:850 !important;

  letter-spacing:.10em !important;
  text-transform:uppercase !important;
}

.codex-body .configurations-head h3{
  max-width:720px !important;

  margin:0 !important;

  font-size:clamp(27px,2.8vw,39px) !important;
  line-height:1.14 !important;
  letter-spacing:-.03em !important;
}

.codex-body .configurations-head > p{
  margin:0 !important;

  color:#656c76 !important;

  font-size:16px !important;
  line-height:1.6 !important;
}


/* ---------------------------------------------------------
   TABLA
   --------------------------------------------------------- */

.codex-body .results-table-wrap{
  margin-top:31px !important;

  overflow:hidden !important;

  border:1px solid #dde1e6 !important;
  border-radius:17px !important;

  background:#ffffff !important;
}

.codex-body .results-table{
  width:100% !important;

  border-collapse:collapse !important;
}

.codex-body .results-table th{
  padding:15px 18px !important;

  background:#f3f4f6 !important;

  color:#6e7580 !important;

  text-align:left !important;

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

  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}

.codex-body .results-table td{
  padding:18px !important;

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

  color:#353a42 !important;

  font-size:16px !important;
}

.codex-body .results-table tbody tr:hover{
  background:#fafafa !important;
}

.codex-body .results-table td:nth-child(3){
  color:#15856d !important;
  font-weight:750 !important;
}

.codex-body .results-table td:nth-child(4),
.codex-body .results-table td:nth-child(5){
  color:#b54848 !important;
}


/* ---------------------------------------------------------
   CONCLUSIÓN CENTRADA
   --------------------------------------------------------- */

.codex-body .results-statement{
  max-width:980px !important;

  margin:50px auto 0 !important;
  padding-top:31px !important;

  text-align:center !important;

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

.codex-body .results-statement strong{
  display:block !important;

  color:#1b1d21 !important;

  font-size:clamp(22px,2vw,29px) !important;
  line-height:1.35 !important;
}

.codex-body .results-statement span{
  display:block !important;

  max-width:800px !important;

  margin:10px auto 0 !important;

  color:#69707a !important;

  font-size:16px !important;
  line-height:1.55 !important;
}


/* =========================================================
   TRANSPARENCIA
   ========================================================= */

.codex-body .transparency-v25{
  background:#2b2f35 !important;
  color:#ffffff !important;
}

.codex-body .transparency-v25 .section-head{
  max-width:940px !important;
  margin-left:0 !important;
}

.codex-body .transparency-v25 .section-head h2{
  color:#ffffff !important;
}

.codex-body .transparency-v25 .section-head p{
  color:#b6bbc3 !important;
}

.codex-body .transparency-v25 .transparency-emphasis{
  margin-top:17px !important;

  color:#ffffff !important;

  font-weight:750 !important;
}


/* dos paneles */

.codex-body .transparency-grid{
  display:grid !important;
  grid-template-columns:1fr 70px 1fr !important;

  align-items:center !important;

  margin-top:44px !important;
}

.codex-body .transparency-grid article{
  min-height:220px !important;

  padding:30px !important;

  background:#24282e !important;

  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:19px !important;
}

.codex-body .transparency-grid article span{
  color:#e45258 !important;

  font-size:11px !important;
  font-weight:850 !important;

  letter-spacing:.11em !important;
}

.codex-body .transparency-grid article h3{
  margin:25px 0 10px !important;

  color:#ffffff !important;

  font-size:23px !important;
}

.codex-body .transparency-grid article p{
  margin:0 !important;

  color:#aeb4bd !important;

  font-size:16px !important;
  line-height:1.6 !important;
}

.codex-body .transparency-divider{
  text-align:center !important;

  color:#7d858f !important;

  font-size:27px !important;
}


/* disclaimer */

.codex-body .results-disclaimer{
  margin-top:34px !important;
  padding-top:22px !important;

  border-top:1px solid rgba(255,255,255,.11) !important;

  color:#8e959e !important;

  font-size:12px !important;
  line-height:1.5 !important;
}


/* =========================================================
   FIT / SOBRE SHARK
   El encabezado se alinea a la izquierda
   ========================================================= */

.codex-body .fit .section-head.center{
  max-width:1000px !important;

  margin-left:0 !important;
  margin-right:0 !important;

  text-align:left !important;
}


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

@media(max-width:850px){

  .codex-body .configurations-head{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  .codex-body .transparency-grid{
    grid-template-columns:1fr !important;
    gap:15px !important;
  }

  .codex-body .transparency-divider{
    transform:rotate(90deg) !important;
  }

  .codex-body .results-table-wrap{
    overflow-x:auto !important;
  }

  .codex-body .results-table{
    min-width:780px !important;
  }

}


@media(max-width:650px){

  .codex-body .trackrecord-visual{
    padding:11px !important;
  }

  .codex-body .trackrecord-topline{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

}


/* =========================================================
   V27 · RESULTADOS COMPACTO
   Curva izquierda + tabla derecha
   ========================================================= */


/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.codex-body .results-v27-head{
  max-width:980px !important;

  margin-left:0 !important;
  margin-right:0 !important;
}

.codex-body .results-v27-head p{
  max-width:850px !important;
}

.codex-body .results-v27-head p + p{
  margin-top:14px !important;
}

.codex-body .results-v27-head strong{
  color:#1b1d21 !important;
}


/* ---------------------------------------------------------
   COMPOSICIÓN PRINCIPAL
   --------------------------------------------------------- */

.codex-body .results-v27-showcase{
  display:grid !important;

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(390px,.92fr) !important;

  gap:24px !important;

  margin-top:46px !important;

  align-items:stretch !important;
}


/* =========================================================
   CURVA
   ========================================================= */

.codex-body .results-v27-chart{
  padding:17px !important;

  display:flex !important;
  flex-direction:column !important;

  background:#0b192b !important;

  border:1px solid #233d59 !important;
  border-radius:19px !important;

  box-shadow:
    0 15px 38px rgba(11,25,43,.09) !important;
}


.codex-body .results-v27-minihead{
  display:flex !important;
  justify-content:space-between !important;

  padding:2px 3px 13px !important;
}


.codex-body .results-v27-minihead span{
  display:block !important;

  color:#45d0bf !important;

  font-size:9px !important;
  font-weight:850 !important;

  letter-spacing:.11em !important;
}


.codex-body .results-v27-minihead strong{
  display:block !important;

  margin-top:4px !important;

  color:white !important;

  font-size:17px !important;
}


.codex-body .results-v27-image{
  overflow:hidden !important;

  background:#091629 !important;

  border:1px solid #213a55 !important;
  border-radius:11px !important;
}


.codex-body .results-v27-image img{
  width:100% !important;
  height:auto !important;

  display:block !important;
}


.codex-body .results-v27-caption{
  margin:11px 3px 0 !important;

  color:#91a6ba !important;

  font-size:11px !important;
  line-height:1.45 !important;
}


/* =========================================================
   CONFIGURACIONES
   ========================================================= */

.codex-body .results-v27-config{
  padding:25px !important;

  display:flex !important;
  flex-direction:column !important;

  background:#f7f8f9 !important;

  border:1px solid #dfe2e6 !important;
  border-radius:19px !important;
}


.codex-body .results-v27-config-head > span{
  display:block !important;

  margin-bottom:8px !important;

  color:#d92b32 !important;

  font-size:10px !important;
  font-weight:850 !important;

  letter-spacing:.10em !important;
}


.codex-body .results-v27-config-head h3{
  margin:0 0 8px !important;

  color:#1d2025 !important;

  font-size:25px !important;
  line-height:1.15 !important;

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


.codex-body .results-v27-config-head p{
  margin:0 !important;

  color:#68707a !important;

  font-size:14px !important;
  line-height:1.55 !important;
}


/* ---------------------------------------------------------
   TABLA COMPACTA
   --------------------------------------------------------- */

.codex-body .results-v27-table-wrap{
  margin-top:21px !important;

  overflow:hidden !important;

  background:#ffffff !important;

  border:1px solid #dde1e5 !important;
  border-radius:12px !important;
}


.codex-body .results-v27-table{
  width:100% !important;

  border-collapse:collapse !important;
}


.codex-body .results-v27-table th{
  padding:11px 12px !important;

  background:#f0f2f4 !important;

  color:#777e87 !important;

  text-align:left !important;

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

  line-height:1.2 !important;

  text-transform:uppercase !important;
}


.codex-body .results-v27-table td{
  padding:13px 12px !important;

  color:#33383f !important;

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

  font-size:14px !important;
}


.codex-body .results-v27-table td:nth-child(2){
  color:#15856d !important;

  font-weight:750 !important;
}


.codex-body .results-v27-table td:nth-child(3){
  color:#b54848 !important;
}


.codex-body .results-v27-note{
  margin-top:auto !important;
  padding-top:18px !important;
}


.codex-body .results-v27-note strong{
  display:block !important;

  color:#444a52 !important;

  font-size:14px !important;
  line-height:1.5 !important;
}


/* =========================================================
   FRASE FINAL
   ========================================================= */

.codex-body .results-v27-closing{
  max-width:930px !important;

  margin:49px auto 0 !important;
  padding-top:30px !important;

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

  text-align:center !important;
}


.codex-body .results-v27-closing strong{
  display:block !important;

  color:#1b1d21 !important;

  font-size:clamp(22px,2vw,29px) !important;
  line-height:1.35 !important;

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


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

@media(max-width:1050px){

  .codex-body .results-v27-showcase{
    grid-template-columns:1fr !important;
  }

}


@media(max-width:650px){

  .codex-body .results-v27-chart{
    padding:11px !important;
  }

  .codex-body .results-v27-config{
    padding:20px !important;
  }

  .codex-body .results-v27-table-wrap{
    overflow-x:auto !important;
  }

  .codex-body .results-v27-table{
    min-width:540px !important;
  }

}


/* =========================================================
   V28 · EXPERIENCIA DE ALUMNOS
   ========================================================= */

.codex-body .testimonials-v28{
  background:#2b2f35 !important;
  color:#ffffff !important;
}


/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.codex-body .testimonials-head{
  max-width:950px !important;

  margin-left:0 !important;
  margin-right:0 !important;
}

.codex-body .testimonials-head h2{
  color:#ffffff !important;
}

.codex-body .testimonials-head p{
  max-width:810px !important;

  color:#b8bdc5 !important;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.codex-body .testimonials-v28-grid{
  display:grid !important;

  grid-template-columns:
    minmax(0,1.15fr)
    minmax(0,.85fr)
    minmax(0,.85fr) !important;

  gap:16px !important;

  margin-top:46px !important;
}


/* ---------------------------------------------------------
   TARJETA
   --------------------------------------------------------- */

.codex-body .testimonial-v28{
  min-height:260px !important;

  padding:27px !important;

  display:flex !important;
  flex-direction:column !important;

  background:#23272d !important;

  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:18px !important;
}


.codex-body .testimonial-v28-featured{
  grid-row:span 2 !important;

  min-height:536px !important;

  padding:34px !important;

  background:#31363d !important;

  border-color:rgba(91,185,140,.32) !important;
}


/* ---------------------------------------------------------
   COMILLAS
   --------------------------------------------------------- */

.codex-body .testimonial-v28-mark{
  color:#5bb98c !important;

  font-size:42px !important;
  line-height:.8 !important;

  font-family:Georgia,serif !important;
}


/* ---------------------------------------------------------
   TEXTO
   --------------------------------------------------------- */

.codex-body .testimonial-v28 blockquote{
  margin:24px 0 30px !important;
  padding:0 !important;

  color:#e1e4e8 !important;

  font-size:17px !important;
  line-height:1.62 !important;

  border:0 !important;
}


.codex-body .testimonial-v28-featured blockquote{
  margin-top:30px !important;

  color:#ffffff !important;

  font-size:21px !important;
  line-height:1.58 !important;

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


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.codex-body .testimonial-v28 footer{
  margin-top:auto !important;
  padding:19px 0 0 !important;

  background:none !important;

  border-top:1px solid rgba(255,255,255,.09) !important;
}


.codex-body .testimonial-v28 footer strong{
  display:block !important;

  color:#ffffff !important;

  font-size:13px !important;
  font-weight:750 !important;
}


.codex-body .testimonial-v28 footer span{
  display:block !important;

  margin-top:4px !important;

  color:#858c96 !important;

  font-size:11px !important;
}


/* ---------------------------------------------------------
   FRASE FINAL
   --------------------------------------------------------- */

.codex-body .testimonials-v28-closing{
  max-width:980px !important;

  margin:52px auto 0 !important;
  padding-top:31px !important;

  text-align:center !important;

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


.codex-body .testimonials-v28-closing strong{
  display:block !important;

  color:#ffffff !important;

  font-size:clamp(22px,2vw,29px) !important;
  line-height:1.35 !important;

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


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

@media(max-width:1050px){

  .codex-body .testimonials-v28-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .codex-body .testimonial-v28-featured{
    grid-column:1 / -1 !important;
    grid-row:auto !important;

    min-height:auto !important;
  }

}


@media(max-width:650px){

  .codex-body .testimonials-v28-grid{
    grid-template-columns:1fr !important;
  }

  .codex-body .testimonial-v28,
  .codex-body .testimonial-v28-featured{
    min-height:0 !important;

    padding:24px !important;
  }

  .codex-body .testimonial-v28-featured blockquote{
    font-size:19px !important;
  }

}


/* =========================================================
   V29 · TESTIMONIOS MÁS LIMPIOS
   ========================================================= */

/* Testimonio en cursiva, pero sin exagerar */
.codex-body .testimonial-v28 blockquote{
  font-style:italic !important;
  font-weight:400 !important;
}


/* Principal: más aire */
.codex-body .testimonial-v28-featured blockquote{
  line-height:1.68 !important;
}


/* Ya no necesitamos reservar espacio para footer */
.codex-body .testimonial-v28{
  justify-content:flex-start !important;
}


/* Fuente general de los testimonios */
.codex-body .testimonials-v28-source{
  margin-top:22px !important;

  color:#858c96 !important;

  font-size:11px !important;
  line-height:1.5 !important;

  text-align:right !important;

  font-style:italic !important;
}


/* Mantener la frase final separada */
.codex-body .testimonials-v28-closing{
  margin-top:38px !important;
}


/* Mobile */
@media(max-width:650px){

  .codex-body .testimonials-v28-source{
    text-align:left !important;
  }

}


/* =========================================================
   V30 · SOBRE SHARK + ENCAJE
   ========================================================= */


/* =========================================================
   SOBRE SHARK
   ========================================================= */

.codex-body .about-v30{
  background:#ffffff !important;
  color:#1b1d21 !important;
}


/* GRID FOTO + COPY */

.codex-body .about-v30-grid{
  display:grid !important;

  grid-template-columns:
    minmax(340px,.82fr)
    minmax(0,1.18fr) !important;

  gap:74px !important;

  align-items:center !important;

  margin-top:27px !important;
}


/* FOTO */

.codex-body .about-v30-image{
  overflow:hidden !important;

  border-radius:20px !important;

  background:#eceef0 !important;

  box-shadow:
    0 18px 45px rgba(20,24,30,.09) !important;
}

.codex-body .about-v30-image img{
  display:block !important;

  width:100% !important;
  height:auto !important;

  object-fit:cover !important;
}


/* COPY */

.codex-body .about-v30-copy h2{
  max-width:780px !important;

  margin:0 0 27px !important;

  color:#1b1d21 !important;

  font-size:clamp(38px,4vw,55px) !important;
  line-height:1.08 !important;

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


.codex-body .about-v30-copy p{
  max-width:790px !important;

  margin:0 0 18px !important;

  color:#59616c !important;

  font-size:17px !important;
  line-height:1.66 !important;
}


.codex-body .about-v30-copy p:first-of-type{
  color:#25292f !important;

  font-size:19px !important;
}


.codex-body .about-v30-copy strong{
  color:#1b1d21 !important;
  font-weight:750 !important;
}


/* BANDA DE AUTORIDAD */

.codex-body .about-v30-proof{
  display:grid !important;

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

  margin-top:60px !important;

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


.codex-body .about-v30-proof > div{
  min-height:105px !important;

  padding:21px 23px !important;

  border-right:1px solid #dfe2e6 !important;
  border-bottom:1px solid #dfe2e6 !important;
}


.codex-body .about-v30-proof strong{
  display:block !important;

  color:#1d2025 !important;

  font-size:15px !important;
}


.codex-body .about-v30-proof span{
  display:block !important;

  margin-top:5px !important;

  color:#747b85 !important;

  font-size:12px !important;
  line-height:1.45 !important;
}


/* FRASE FINAL */

.codex-body .about-v30-closing{
  max-width:980px !important;

  margin:49px auto 0 !important;
  padding-top:31px !important;

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

  text-align:center !important;
}


.codex-body .about-v30-closing strong{
  display:block !important;

  color:#1b1d21 !important;

  font-size:clamp(22px,2vw,29px) !important;
  line-height:1.35 !important;

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


/* =========================================================
   FIT
   ========================================================= */

.codex-body .fit-v30{
  background:#f4f5f6 !important;
}


/* CABECERA ALINEADA IZQUIERDA */

.codex-body .fit-v30-head{
  max-width:1000px !important;

  margin-left:0 !important;
  margin-right:0 !important;

  text-align:left !important;
}


.codex-body .fit-v30-head p{
  max-width:820px !important;
}


/* DOS TARJETAS */

.codex-body .fit-v30-grid{
  display:grid !important;

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

  gap:18px !important;

  margin-top:43px !important;
}


/* BASE */

.codex-body .fit-v30-grid .fit-card{
  padding:31px !important;

  border-radius:19px !important;

  min-height:315px !important;
}


/* ---------------------------------------------------------
   NO ES PARA TI
   --------------------------------------------------------- */

.codex-body .fit-v30-no{
  background:#25292f !important;
  color:white !important;

  border:1px solid #25292f !important;
}


.codex-body .fit-v30-no .fit-v30-label{
  color:#a5abb4 !important;
}


/* ---------------------------------------------------------
   PUEDE ENCAJAR
   --------------------------------------------------------- */

.codex-body .fit-v30-yes{
  background:#ffffff !important;

  border:1px solid rgba(91,185,140,.55) !important;

  box-shadow:
    0 12px 35px rgba(91,185,140,.06) !important;
}


.codex-body .fit-v30-yes .fit-v30-label{
  color:#37946d !important;
}


/* LABEL */

.codex-body .fit-v30-label{
  margin-bottom:23px !important;

  font-size:11px !important;
  font-weight:850 !important;

  letter-spacing:.10em !important;
}


/* LISTAS */

.codex-body .fit-v30-grid ul{
  margin:0 !important;
  padding:0 !important;

  list-style:none !important;
}


.codex-body .fit-v30-grid li{
  position:relative !important;

  padding:14px 0 14px 31px !important;

  font-size:16px !important;
  line-height:1.5 !important;
}


/* NO */

.codex-body .fit-v30-no li{
  color:#c4c8ce !important;

  border-bottom:1px solid rgba(255,255,255,.09) !important;
}


.codex-body .fit-v30-no li::before{
  content:"×" !important;

  position:absolute !important;
  left:0 !important;

  color:#858c96 !important;

  font-size:18px !important;
  font-weight:800 !important;
}


/* SÍ */

.codex-body .fit-v30-yes li{
  color:#3e444c !important;

  border-bottom:1px solid #e2e5e8 !important;
}


.codex-body .fit-v30-yes li::before{
  content:"✓" !important;

  position:absolute !important;
  left:0 !important;

  color:#5bb98c !important;

  font-size:17px !important;
  font-weight:850 !important;
}


.codex-body .fit-v30-grid li:last-child{
  border-bottom:0 !important;
}


/* FRASE FINAL */

.codex-body .fit-v30-closing{
  max-width:950px !important;

  margin:47px auto 0 !important;
  padding-top:29px !important;

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

  text-align:center !important;
}


.codex-body .fit-v30-closing strong{
  display:block !important;

  color:#1b1d21 !important;

  font-size:clamp(21px,1.9vw,27px) !important;
  line-height:1.38 !important;

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


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

@media(max-width:1000px){

  .codex-body .about-v30-grid{
    grid-template-columns:1fr !important;

    gap:42px !important;
  }

  .codex-body .about-v30-image{
    max-width:620px !important;
  }

  .codex-body .about-v30-proof{
    grid-template-columns:repeat(2,1fr) !important;
  }

}


@media(max-width:700px){

  .codex-body .fit-v30-grid{
    grid-template-columns:1fr !important;
  }

  .codex-body .about-v30-proof{
    grid-template-columns:1fr !important;
  }

}


/* =========================================================
   V31 · SOBRE SHARK SIMPLIFICADO
   ========================================================= */


/* Título bastante más pequeño */
.codex-body .about-v30-copy h2{
  font-size:clamp(30px,3vw,42px) !important;
  line-height:1.10 !important;

  margin-bottom:24px !important;
}


/* Primer párrafo */
.codex-body .about-v30-copy p:first-of-type{
  font-size:18px !important;
}


/* Copy general */
.codex-body .about-v30-copy p{
  font-size:17px !important;
  line-height:1.68 !important;
}


/* Última frase destacada */
.codex-body .about-v30-emphasis{
  margin-top:26px !important;
}

.codex-body .about-v30-emphasis strong{
  color:#1b1d21 !important;

  font-size:19px !important;
  line-height:1.55 !important;
}


/* Ya no reservamos aire para bloques eliminados */
.codex-body .about-v30-grid{
  margin-bottom:0 !important;
}


/* Ocultar restos por si alguna regla anterior quedó viva */
.codex-body .about-v30-proof,
.codex-body .about-v30-closing{
  display:none !important;
}


/* =========================================================
   V32 · ANTES DE AVANZAR
   FIX REAL EN CSS EXTERNO
   ========================================================= */


/* ---------------------------------------------------------
   SECCIÓN COMPLETA
   --------------------------------------------------------- */

.codex-body .fit-check-section,
.fit-check-section{
  width:100% !important;

  background:#343940 !important;
  color:#ffffff !important;

  padding:0 !important;
  margin:0 !important;
}


/* ---------------------------------------------------------
   MISMO CARRIL QUE EL HERO / RESTO DE LA WEB
   --------------------------------------------------------- */

.codex-body .fit-check-section .section-shell,
.fit-check-section .section-shell{
  width:var(--hero-real-width, min(1320px, calc(100% - 48px))) !important;
  max-width:1320px !important;

  margin-left:var(--hero-real-left, auto) !important;
  margin-right:auto !important;

  padding:64px 0 78px !important;

  box-sizing:border-box !important;
}


/* ---------------------------------------------------------
   ANTES DE AVANZAR
   --------------------------------------------------------- */

.codex-body .fit-check-section .section-kicker,
.fit-check-section .section-kicker{
  display:flex !important;
  align-items:center !important;

  gap:12px !important;

  margin:0 0 22px !important;
  padding:0 !important;

  color:#e45258 !important;

  font-size:12px !important;
  font-weight:850 !important;

  line-height:1 !important;

  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}


.codex-body .fit-check-section .section-kicker::before,
.fit-check-section .section-kicker::before{
  content:"" !important;

  display:block !important;

  width:25px !important;
  height:2px !important;

  flex:0 0 25px !important;

  background:#e45258 !important;
}


/* ---------------------------------------------------------
   TITULAR
   --------------------------------------------------------- */

.codex-body .fit-check-section .fit-title,
.fit-check-section .fit-title{
  max-width:980px !important;

  margin:0 0 21px !important;

  color:#ffffff !important;

  font-size:clamp(40px,4.2vw,58px) !important;
  line-height:1.05 !important;

  letter-spacing:-.04em !important;

  font-weight:750 !important;
}


/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.codex-body .fit-check-section .fit-intro,
.fit-check-section .fit-intro{
  max-width:900px !important;

  margin:0 0 42px !important;

  color:#bcc2ca !important;

  font-size:18px !important;
  line-height:1.62 !important;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.codex-body .fit-check-grid,
.fit-check-grid{
  display:grid !important;

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

  gap:18px !important;

  width:100% !important;

  margin:0 !important;
  padding:0 !important;
}


/* ---------------------------------------------------------
   TARJETAS
   --------------------------------------------------------- */

.codex-body .fit-check-grid .fit-card,
.fit-check-grid .fit-card{
  min-height:320px !important;

  padding:30px 31px !important;

  border-radius:19px !important;

  box-sizing:border-box !important;

  box-shadow:none !important;
}


/* NO */

.codex-body .fit-check-grid .fit-card.bad,
.fit-check-grid .fit-card.bad{
  background:#292d33 !important;

  border:1px solid rgba(255,255,255,.10) !important;
}


/* SÍ */

.codex-body .fit-check-grid .fit-card.good,
.fit-check-grid .fit-card.good{
  background:#30373a !important;

  border:1px solid rgba(91,185,140,.48) !important;

  box-shadow:
    0 12px 32px rgba(0,0,0,.08) !important;
}


/* ---------------------------------------------------------
   TÍTULO TARJETA
   --------------------------------------------------------- */

.codex-body .fit-card-title,
.fit-card-title{
  margin:0 0 25px !important;

  color:#ffffff !important;

  font-size:23px !important;
  font-weight:750 !important;

  line-height:1.2 !important;

  letter-spacing:-.02em !important;

  text-transform:none !important;
}


/* ---------------------------------------------------------
   LISTA
   --------------------------------------------------------- */

.codex-body .fit-list,
.fit-list{
  display:grid !important;

  gap:0 !important;

  margin:0 !important;
  padding:0 !important;

  list-style:none !important;
}


.codex-body .fit-list li,
.fit-list li{
  position:relative !important;

  display:flex !important;
  align-items:flex-start !important;

  gap:13px !important;

  margin:0 !important;
  padding:13px 0 !important;

  border-bottom:1px solid rgba(255,255,255,.08) !important;

  color:#d2d6dc !important;

  font-size:16px !important;
  line-height:1.5 !important;

  list-style:none !important;
}


.codex-body .fit-list li:last-child,
.fit-list li:last-child{
  border-bottom:0 !important;
}


/* eliminar bullets del navegador */
.codex-body .fit-list li::marker,
.fit-list li::marker{
  content:"" !important;
}


/* ---------------------------------------------------------
   ICONOS
   --------------------------------------------------------- */

.codex-body .fit-icon,
.fit-icon{
  width:26px !important;
  height:26px !important;

  min-width:26px !important;

  margin-top:0 !important;

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

  border-radius:50% !important;

  font-size:13px !important;
  font-weight:900 !important;

  line-height:1 !important;
}


/* CRUZ */
.codex-body .fit-icon.bad,
.fit-icon.bad{
  color:#ef6262 !important;

  background:rgba(239,98,98,.11) !important;

  border:1px solid rgba(239,98,98,.22) !important;
}


/* CHECK */
.codex-body .fit-icon.good,
.fit-icon.good{
  color:#5bb98c !important;

  background:rgba(91,185,140,.11) !important;

  border:1px solid rgba(91,185,140,.24) !important;
}


/* ---------------------------------------------------------
   FRASE FINAL
   --------------------------------------------------------- */

.codex-body .fit-conclusion,
.fit-conclusion{
  max-width:960px !important;

  margin:45px auto 0 !important;
  padding-top:29px !important;

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

  color:#c8cdd4 !important;

  text-align:center !important;

  font-size:19px !important;
  line-height:1.55 !important;
}


.codex-body .fit-conclusion strong,
.fit-conclusion strong{
  color:#ffffff !important;
  font-weight:750 !important;
}


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

@media(max-width:950px){

  .codex-body .fit-check-grid,
  .fit-check-grid{
    grid-template-columns:1fr !important;
  }

}


@media(max-width:700px){

  .codex-body .fit-check-section .section-shell,
  .fit-check-section .section-shell{
    width:calc(100% - 28px) !important;

    margin-left:14px !important;
    margin-right:14px !important;

    padding:50px 0 62px !important;
  }

  .codex-body .fit-check-section .fit-title,
  .fit-check-section .fit-title{
    font-size:38px !important;
  }

  .codex-body .fit-check-section .fit-intro,
  .fit-check-section .fit-intro{
    font-size:17px !important;
  }

}


/* =========================================================
   V33 · AJUSTE VISUAL FINAL
   ========================================================= */

/* bloque ANTES DE AVANZAR: gris más claro */
.fit-check-section{
  background:#464c53 !important;
  color:#ffffff !important;
}

.fit-check-section .section-shell{
  padding:64px 0 78px !important;
}

.fit-check-section .section-kicker{
  color:#e45258 !important;
}

.fit-check-section .section-kicker::before{
  background:#e45258 !important;
}

.fit-check-section .fit-title{
  color:#ffffff !important;
}

.fit-check-section .fit-intro{
  color:#d6dbe1 !important;
}

.fit-check-grid .fit-card.bad{
  background:#353a40 !important;
  border:1px solid rgba(255,255,255,.10) !important;
}

.fit-check-grid .fit-card.good{
  background:#3a4045 !important;
  border:1px solid rgba(91,185,140,.35) !important;
}

.fit-card-title{
  color:#ffffff !important;
}

.fit-list li{
  color:#d9dee4 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.fit-icon.bad{
  color:#ef6b6b !important;
  background:rgba(239,107,107,.10) !important;
  border:1px solid rgba(239,107,107,.22) !important;
}

.fit-icon.good{
  color:#66c393 !important;
  background:rgba(102,195,147,.10) !important;
  border:1px solid rgba(102,195,147,.24) !important;
}

.fit-conclusion{
  color:#d2d8de !important;
}

.fit-conclusion strong{
  color:#ffffff !important;
}

/* sección final de formulario: carbón oscuro */
.final-cta-section,
.registration-section,
.form-section,
#registro{
  scroll-margin-top:110px;
}


/* =========================================================
   V34 · ANTES DE AVANZAR MÁS CLARO
   ========================================================= */

.fit-check-section{
  background:#4a5057 !important;
}

.fit-check-grid .fit-card.bad{
  background:#3f454c !important;
  border-color:rgba(255,255,255,.10) !important;
}

.fit-check-grid .fit-card.good{
  background:#424a4d !important;
  border-color:rgba(91,185,140,.42) !important;
}

.fit-check-section .fit-intro{
  color:#e0e4e8 !important;
}

.fit-list li{
  color:#e2e6ea !important;
}

.fit-conclusion{
  color:#d8dde2 !important;
}


/* =========================================================
   V35 · ANTES DE AVANZAR · GRIS CLARO
   Igual lenguaje visual que CÓMO FUNCIONA
   ========================================================= */

.fit-check-section{
  background:#f4f5f7 !important;
  color:#1b1d21 !important;
}

/* etiqueta */
.fit-check-section .section-kicker{
  color:#d92b32 !important;
}

.fit-check-section .section-kicker::before{
  background:#d92b32 !important;
}

/* título */
.fit-check-section .fit-title{
  color:#1b1d21 !important;
}

/* intro */
.fit-check-section .fit-intro{
  color:#646b75 !important;
}

/* tarjetas */
.fit-check-grid .fit-card.bad{
  background:#ffffff !important;
  border:1px solid #dfe2e6 !important;
  box-shadow:none !important;
}

.fit-check-grid .fit-card.good{
  background:#ffffff !important;
  border:1px solid rgba(91,185,140,.52) !important;

  box-shadow:
    0 10px 30px rgba(40,70,55,.05) !important;
}

/* títulos de tarjetas */
.fit-card-title{
  color:#22262c !important;
}

/* textos */
.fit-list li{
  color:#4d545d !important;
  border-bottom:1px solid #e4e6e9 !important;
}

/* cruces */
.fit-icon.bad{
  color:#d95555 !important;
  background:#fff0f0 !important;
  border:1px solid #f1cccc !important;
}

/* checks */
.fit-icon.good{
  color:#45a978 !important;
  background:#edf8f2 !important;
  border:1px solid #c6e8d5 !important;
}

/* conclusión */
.fit-conclusion{
  border-top:1px solid #dadddf !important;
  color:#646b75 !important;
}

.fit-conclusion strong{
  color:#22262c !important;
}


/* =========================================================
   V37 · REGISTRO FINAL
   ========================================================= */

.registration-v37{
  width:100% !important;

  padding:0 !important;

  background:#1b1d21 !important;
  color:#ffffff !important;

  scroll-margin-top:72px !important;
}


.registration-v37-shell{
  width:var(
    --hero-real-width,
    min(1320px,calc(100% - 48px))
  ) !important;

  max-width:1320px !important;

  margin-left:var(--hero-real-left,auto) !important;
  margin-right:auto !important;

  padding:78px 0 82px !important;

  display:grid !important;

  grid-template-columns:
    minmax(0,.94fr)
    minmax(420px,1.06fr) !important;

  gap:80px !important;

  align-items:center !important;

  box-sizing:border-box !important;
}


/* =========================================================
   COPY
   ========================================================= */

.registration-v37-eyebrow{
  display:flex !important;

  align-items:center !important;

  gap:11px !important;

  margin:0 0 22px !important;

  color:#e45258 !important;

  font-size:12px !important;
  font-weight:850 !important;

  line-height:1 !important;

  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}


.registration-v37-eyebrow::before{
  content:"" !important;

  display:block !important;

  width:25px !important;
  height:2px !important;

  background:#e45258 !important;
}


.registration-v37-copy h2{
  max-width:640px !important;

  margin:0 0 20px !important;

  color:#ffffff !important;

  font-size:clamp(40px,4vw,57px) !important;

  line-height:1.04 !important;

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


.registration-v37-copy p{
  max-width:650px !important;

  margin:0 !important;

  color:#aeb4bd !important;

  font-size:18px !important;
  line-height:1.62 !important;
}


/* =========================================================
   FORM BOX
   ========================================================= */

.registration-v37-formbox{
  padding:32px !important;

  background:#24272d !important;

  border:1px solid rgba(255,255,255,.10) !important;

  border-radius:20px !important;

  box-shadow:
    0 18px 45px rgba(0,0,0,.14) !important;
}


.registration-v37-fields{
  display:grid !important;

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

  gap:13px !important;
}


.registration-v37-form label{
  display:block !important;
}


.registration-v37-form label > span{
  display:block !important;

  margin-bottom:8px !important;

  color:#aeb4bd !important;

  font-size:12px !important;
  font-weight:700 !important;
}


.registration-v37-form input{
  width:100% !important;
  height:52px !important;

  padding:0 15px !important;

  box-sizing:border-box !important;

  background:#17191d !important;

  color:#ffffff !important;

  border:1px solid #3b3f47 !important;
  border-radius:9px !important;

  outline:none !important;

  font:inherit !important;
  font-size:15px !important;

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


.registration-v37-form input::placeholder{
  color:#6f7680 !important;
}


.registration-v37-form input:focus{
  border-color:#e45258 !important;

  box-shadow:
    0 0 0 3px rgba(228,82,88,.10) !important;
}


/* =========================================================
   BUTTON
   ========================================================= */

.registration-v37-button{
  width:100% !important;
  height:54px !important;

  margin-top:15px !important;

  display:flex !important;

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

  border:0 !important;
  border-radius:9px !important;

  background:#d92b32 !important;
  color:#ffffff !important;

  cursor:pointer !important;

  font-size:12px !important;
  font-weight:850 !important;

  letter-spacing:.045em !important;
  text-transform:uppercase !important;

  transition:
    transform .18s ease,
    background .18s ease !important;
}


.registration-v37-button:hover{
  background:#c9232a !important;

  transform:translateY(-1px) !important;
}


/* =========================================================
   NOTA
   ========================================================= */

.registration-v37-note{
  margin:13px 3px 0 !important;

  color:#777e88 !important;

  font-size:11px !important;
  line-height:1.5 !important;
}


.registration-v37-message{
  margin-top:10px !important;

  color:#e45258 !important;

  font-size:12px !important;
}


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

.registration-v37 + footer{
  background:#111317 !important;

  border-top:1px solid rgba(255,255,255,.07) !important;

  color:#747b84 !important;
}


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

@media(max-width:950px){

  .registration-v37-shell{
    grid-template-columns:1fr !important;

    gap:40px !important;
  }

}


@media(max-width:700px){

  .registration-v37-shell{
    width:calc(100% - 28px) !important;

    margin-left:14px !important;
    margin-right:14px !important;

    padding:60px 0 64px !important;
  }


  .registration-v37-fields{
    grid-template-columns:1fr !important;
  }


  .registration-v37-formbox{
    padding:23px !important;
  }

}


/* =========================================================
   V38 · FLUENT FORM REAL
   ========================================================= */

.registration-v38-fluent{
  padding:0 !important;
  overflow:hidden !important;

  background:#24272d !important;

  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:20px !important;
}


.qsc-fluent-frame{
  display:block !important;

  width:100% !important;
  height:250px !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;

  background:transparent !important;

  overflow:hidden !important;
}


/* evitamos un bloque excesivamente alto */
@media(max-width:700px){

  .qsc-fluent-frame{
    height:270px !important;
  }

}