/* =========================================================
   ISAAC ZAPATA PORTFOLIO
   CLEAN CSS
   Premium · Responsive · Stable
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* =========================================================
   RESET / TOKENS
========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

:root{
  --dark:#07162d;
  --dark-2:#040816;
  --white:#ffffff;
  --paper:#f5f5f7;
  --paper-2:#f7f8fb;
  --gray:#5f6673;
  --gray-2:#6b7280;
  --purple:#6d5cff;
  --purple-2:#7c3aed;
  --orange:#ff6a00;
  --cyan:#22d3ee;
  --black:#000000;

  --content-max:1440px;
  --content-wide:1280px;
  --gutter:clamp(24px, 5vw, 80px);

  --radius-xl:38px;
  --radius-lg:30px;
  --radius-md:24px;

  --ease:cubic-bezier(.16,1,.3,1);
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  overflow-x:hidden;
  font-family:"Inter",sans-serif;
  font-weight:400;
  background:var(--paper);
  color:var(--dark);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

img{
  height:auto;
}

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

ul{
  margin:0;
  padding:0;
  list-style:none;
}

button{
  border:0;
  outline:0;
  background:none;
  font-family:inherit;
  cursor:pointer;
}

section{
  position:relative;
}

.container,
.container-fluid{
  width:100%;
}

.container{
  z-index:3;
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 var(--gutter) 2px;
}

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

.header-area{
  position:fixed;
  top:16px;
  left:0;
  width:100%;
  z-index:9999;
  pointer-events:none;
}

.headerfixed{
  position:relative;
  width:calc(100% - 24px);
  max-width:1840px;
  height:64px;
  margin:0 auto;
  padding:0 44px;
  border-radius:999px;
  overflow:visible;
  pointer-events:auto;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg,rgba(15,18,40,.46),rgba(8,12,32,.30));
  backdrop-filter:blur(26px) saturate(190%);
  -webkit-backdrop-filter:blur(26px) saturate(190%);
  box-shadow:
    0 10px 40px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition:
    background 1.15s var(--ease),
    border 1.15s var(--ease),
    box-shadow 1.15s var(--ease),
    backdrop-filter 1.15s var(--ease);
}

.headerfixed.light-nav{
  background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.16));
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(30px) saturate(220%);
  -webkit-backdrop-filter:blur(30px) saturate(220%);
  box-shadow:
    0 10px 40px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.headerfixed .container-fluid,
.headerfixed .row{
  height:100%;
  padding:0;
}

.headerfixed .row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.headerfixed .col-xl-3.col-lg-2{
  position:absolute;
  left:50%;
  top:50%;
  width:auto;
  padding:0;
  transform:translate(-50%,-50%);
  z-index:5;
}

.logo,
.logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}

.logo-wrap{
  gap:0;
  transition:
    gap 1.6s var(--ease),
    transform 1.2s var(--ease);
}

.logoIZM{
  width:48px;
  height:48px;
  object-fit:contain;
  transition:filter .45s ease, transform .45s ease;
}

.logo-name{
  width:0;
  max-width:0;
  overflow:hidden;
  opacity:0;
  white-space:nowrap;
  transform:translateX(-18px);
  color:rgba(255,255,255,.84);
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  transition:
    width 1.8s var(--ease),
    max-width 1.8s var(--ease),
    opacity 1.2s ease,
    transform 1.8s var(--ease),
    color .45s ease;
}

.headerfixed.light-nav .logo-wrap{
  gap:10px;
}

.headerfixed.light-nav .logo-name{
  width:auto;
  max-width:180px;
  opacity:.82;
  transform:translateX(0);
  color:rgba(10,16,35,.72);
}

.headerfixed.light-nav .logoIZM{
  filter:brightness(0);
}

.headerfixed .col-xl-6.col-lg-7{
  width:100%;
  max-width:100%;
  flex:0 0 100%;
  padding:0;
}

.main-menu,
.main-menu nav{
  width:100%;
}

.main-menu ul#navigation{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr 180px 1fr 1fr;
  align-items:center;
}

.main-menu ul#navigation li:nth-child(1){
  grid-column:1;
  justify-self:end;
  margin-right:62px;
}

.main-menu ul#navigation li:nth-child(2){
  grid-column:2;
  justify-self:end;
  margin-right:72px;
}

.main-menu ul#navigation li:nth-child(3){
  grid-column:4;
  justify-self:start;
  margin-left:72px;
}

.main-menu ul#navigation li:nth-child(4){
  grid-column:5;
  justify-self:start;
  margin-left:62px;
}

.main-menu ul#navigation li a{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:64px;
  color:rgba(255,255,255,.94);
  font-size:15px;
  font-weight:700;
  letter-spacing:-.02em;
  transition:opacity .3s ease, color .3s ease;
}

.main-menu ul#navigation li a:hover{
  opacity:.72;
}

.main-menu ul#navigation li a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:18px;
  width:0;
  height:1px;
  background:linear-gradient(90deg,var(--purple-2),var(--cyan));
  transition:width .3s ease;
}

.main-menu ul#navigation li a:hover::after{
  width:100%;
}

.headerfixed.light-nav .main-menu ul#navigation li a{
  color:rgba(10,16,35,.84);
}

/* =========================================================
   MOBILE NAV / SLICKNAV
========================================================= */

.mobile_menu{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  z-index:99999;
}

.slicknav_menu{
  position:relative !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
}

.slicknav_btn{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:46px !important;
  height:46px !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  z-index:100003 !important;
}

.slicknav_menutxt{
  display:none !important;
}

.slicknav_icon{
  position:relative !important;
  width:24px !important;
  height:18px !important;
  margin:0 !important;
}

.slicknav_icon-bar{
  position:absolute !important;
  left:0 !important;
  width:100% !important;
  height:2px !important;
  margin:0 !important;
  border-radius:999px !important;
  background:#fff !important;
  box-shadow:none !important;
  transition:
    transform .35s var(--ease),
    opacity .25s ease,
    top .35s var(--ease);
}

.headerfixed.light-nav .slicknav_icon-bar{
  background:#07162d !important;
}

.slicknav_icon-bar:nth-child(1){top:0 !important;}
.slicknav_icon-bar:nth-child(2){top:8px !important;}
.slicknav_icon-bar:nth-child(3){top:16px !important;}

body.menu-open .slicknav_icon-bar:nth-child(1),
.slicknav_open .slicknav_icon-bar:nth-child(1){
  top:8px !important;
  transform:rotate(45deg) !important;
}

body.menu-open .slicknav_icon-bar:nth-child(2),
.slicknav_open .slicknav_icon-bar:nth-child(2){
  opacity:0 !important;
}

body.menu-open .slicknav_icon-bar:nth-child(3),
.slicknav_open .slicknav_icon-bar:nth-child(3){
  top:8px !important;
  transform:rotate(-45deg) !important;
}

/* Cerrado por defecto */
.slicknav_nav{
  display:none !important;
}

html.menu-lock,
body.menu-lock,
body.modal-open{
  overflow:hidden !important;
}

@media(max-width:991px){
  .main-menu,
  .main-menu ul,
  #navigation{
    display:none !important;
  }

  .header-area{
    position:fixed;
    top:16px;
    left:0;
    right:0;
    width:100%;
    pointer-events:none;
  }

  .headerfixed{
    width:calc(100% - 20px);
    height:56px;
    padding:0 18px;
    pointer-events:auto;
  }

  .headerfixed .container-fluid{
    height:100%;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .headerfixed .row{
    height:100%;
    min-height:56px;
  }

  .headerfixed .col-xl-3.col-lg-2{
    left:50%;
    top:50%;
    width:auto;
    transform:translate(-50%, -50%);
  }

  .mobile_menu{
    display:block !important;
  }

  body.menu-open .slicknav_nav{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;

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

    margin:0 !important;
    padding:110px 24px 40px !important;

    background:
      radial-gradient(
        circle at 50% 18%,
        rgba(35,48,88,.34),
        rgba(3,6,18,.94) 42%,
        rgba(3,6,18,.99) 100%
      ) !important;

    backdrop-filter:blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter:blur(28px) saturate(180%) !important;

    z-index:99990 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  .slicknav_nav ul{
    width:min(100%, 420px) !important;
    height:auto !important;
    margin:0 auto !important;
    padding:0 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
  }

  .slicknav_nav li{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
  }

  .slicknav_nav a{
    width:100% !important;
    min-height:64px !important;

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

    padding:0 18px !important;
    border-radius:22px !important;

    color:#fff !important;
    text-align:center !important;

    font-size:clamp(28px, 8vw, 42px) !important;
    font-weight:800 !important;
    letter-spacing:-.06em !important;
    line-height:1 !important;

    background:transparent !important;
    transform:none !important;
  }

  .slicknav_nav a:hover{
    background:rgba(255,255,255,.07) !important;
  }
}

@media(min-width:992px){
  .slicknav_menu,
  .slicknav_nav,
  .mobile_menu{
    display:none !important;
  }

  html.menu-lock,
  body.menu-lock{
    overflow:auto !important;
  }
}

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

.hero-premium{
  position:relative;
  width:100%;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:var(--dark-2);
  isolation:isolate;
}

.hero-image{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  mask-image:linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.35) 7%,
    rgba(0,0,0,.82) 16%,
    #000 28%,
    #000 68%,
    rgba(0,0,0,.92) 82%,
    rgba(0,0,0,.52) 90%,
    rgba(0,0,0,.12) 96%,
    transparent 100%
  );
  -webkit-mask-image:linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.35) 7%,
    rgba(0,0,0,.82) 16%,
    #000 28%,
    #000 68%,
    rgba(0,0,0,.92) 82%,
    rgba(0,0,0,.52) 90%,
    rgba(0,0,0,.12) 96%,
    transparent 100%
  );
}

.hero-image img{
  position:absolute;
  top:6%;
  right:-10%;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.76;
  transform:scale(1.12);
  filter:contrast(1.04) saturate(1.02);
  transition:transform 1.2s var(--ease);
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(
    90deg,
    rgba(3,5,16,.92) 0%,
    rgba(3,5,16,.74) 32%,
    rgba(3,5,16,.28) 56%,
    rgba(3,5,16,.12) 100%
  );
}

.hero-light{
  position:absolute;
  border-radius:999px;
  filter:blur(120px);
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.42;
  z-index:2;
  animation:ambientFloat 12s ease-in-out infinite;
}

.hero-light-1{
  top:12%;
  left:-8%;
  width:520px;
  height:520px;
  background:radial-gradient(circle,rgba(0,140,255,.26) 0%,rgba(0,140,255,0) 70%);
}

.hero-light-2{
  right:-10%;
  bottom:-8%;
  width:460px;
  height:460px;
  background:radial-gradient(circle,rgba(255,80,0,.18) 0%,rgba(255,80,0,0) 70%);
  animation-delay:-4s;
}

.hero-cursor-glow{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 72%);
  filter:blur(30px);
  pointer-events:none;
  z-index:2;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .4s ease;
}

.hero-container{
  position:relative;
  z-index:3;
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding:120px var(--gutter) 2px;
}

.hero-content{
  width:100%;
  max-width:820px;
}

.hero-tag{
  display:inline-flex;
  margin-bottom:24px;
  color:rgba(255,255,255,.62);
  font-size:12px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.hero-title{
  margin:0;
  color:var(--white);
  font-size:clamp(54px,6vw,92px);
  line-height:.92;
  letter-spacing:-.07em;
  font-weight:700;
  text-wrap:balance;
}

.hero-description{
  max-width:760px;
  margin:34px 0 0;
  color:rgba(255,255,255,.72);
  font-size:18px;
  line-height:1.7;
  font-weight:400;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:42px;
}

.hero-actions .hero-btn-primary,
.hero-actions .hero-btn-primary:link,
.hero-actions .hero-btn-primary:visited,
.hero-actions .hero-btn-primary:hover,
.hero-actions .hero-btn-primary:focus,
.hero-actions .hero-btn-primary:active{
  text-decoration:none !important;
  -webkit-text-decoration:none !important;
}

.hero-actions .hero-btn-primary{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-width:226px;
  height:66px;
  padding:0 16px 0 28px;
  border-radius:999px;
  overflow:hidden;
  isolation:isolate;
  color:rgba(255,255,255,.94);
  font-size:16px;
  font-weight:700;
  letter-spacing:-.02em;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.035) 46%,rgba(255,255,255,.07) 100%);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  box-shadow:
    0 18px 48px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.04);
  transition:
    transform .45s var(--ease),
    background .45s ease,
    border .45s ease,
    box-shadow .45s ease;
}

.hero-actions .hero-btn-primary::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.20),transparent 34%),
    radial-gradient(circle at 88% 70%,rgba(124,58,237,.18),transparent 42%),
    linear-gradient(135deg,rgba(34,211,238,.08),rgba(255,80,80,.06));
  opacity:.85;
  pointer-events:none;
  z-index:0;
}

.hero-actions .hero-btn-primary::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.05) 38%,transparent 100%);
  opacity:.55;
  pointer-events:none;
  z-index:1;
}

.hero-actions .hero-btn-primary:hover{
  transform:translateY(-2px);
  color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.045) 48%,rgba(255,255,255,.09) 100%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    0 24px 60px rgba(0,0,0,.38),
    0 0 32px rgba(124,58,237,.12),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(255,255,255,.06);
}

.hero-actions .hero-btn-primary .btn-text{
  position:relative;
  z-index:3;
  color:inherit;
  text-decoration:none;
}

.hero-actions .hero-btn-primary .btn-icon{
  position:relative;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:
    transform .45s var(--ease),
    background .45s ease,
    border .45s ease;
}

.hero-actions .hero-btn-primary:hover .btn-icon{
  transform:translateX(3px);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
}

/* =========================================================
   EXPERTISE
========================================================= */

.expertise-editorial{
    max-width: 1440px; 
    width: 100%;
    margin: auto;
  position:relative;
  padding:92px 0 70px;
  background:#f5f5f7;
  overflow:hidden;
}

.expertise-editorial .container{
  max-width:var(--content-max);
  margin:0 auto !important;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.expertise-top{
  margin-bottom:40px;
}

.expertise-grid{
  display:grid;
  grid-template-columns:minmax(0,620px) minmax(240px,420px);
  gap:2px;
  align-items:start;
  justify-content:center;
  width:100%;
  max-width:1440px;
  margin:0 auto;
    padding:24px var(--gutter) 2px;
}

.expertise-title{
  margin:0;
  max-width:820px;
  color:var(--dark);
  font-size:clamp(2.6rem,4vw,4rem);
  line-height:.94;
  letter-spacing:-.06em;
  font-weight:800;
  text-wrap:balance;
}

.eyebrow{
  display:block;
  margin-bottom:12px;
  color:#6d5cff;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.32em;
  text-transform:uppercase;
}

.expertise-copy{
  padding-top:8px;
}

.expertise-copy p{
  max-width:520px;
  margin:0;
  color:rgba(7,20,45,.62);
  font-size:1.02rem;
  line-height:1.75;
}

/* =========================================================
   LOGOS SLIDER
========================================================= */

.slider{
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:980px;
  height:52px;
  margin:0 auto;
  mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.25) 6%,
    #000 14%,
    #000 86%,
    rgba(0,0,0,.25) 94%,
    transparent 100%
  );
  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.25) 6%,
    #000 14%,
    #000 86%,
    rgba(0,0,0,.25) 94%,
    transparent 100%
  );
}

.slide-track{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:0;
  width:max-content;
  animation:scrollSlider 20s linear infinite;
}

.slide{
  display:flex;
  align-items:center;
  justify-content:center;
  width:160px;
  min-width:160px;
  height:52px;
  flex:0 0 auto;
}

.logos{
  display:block;
  width:auto;
  max-width:110px;
  max-height:22px;
  height:auto;
  object-fit:contain;
  opacity:.72;
  filter:grayscale(1) brightness(.18) contrast(1.1);
  transition:
    opacity .35s ease,
    transform .35s ease,
    filter .35s ease;
}

.logos:hover{
  opacity:1;
  transform:translateY(-2px);
  filter:grayscale(0) brightness(.05) contrast(1.15);
}

/* =========================================================
   WORK METHOD
========================================================= */

.work-method{
  position:relative;
    max-width: 1440px !important;
    width: 100%;
    margin: auto;
  width:100%;
  padding:clamp(48px, 7vw, 0) 0;
  background:#f5f5f7;
  overflow:hidden;
}

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

.work-method__heading{
  max-width:880px;
  margin-bottom:clamp(28px, 4vw, 40px);
}

.work-method__eyebrow{
  display:inline-block;
  margin-bottom:12px;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#5b53ff;
}

.work-method__title{
  margin:0;
  max-width:820px;
  font-size:clamp(2rem, 4.6vw, 4.25rem);
  line-height:.98;
  letter-spacing:-.04em;
  color:#0d1833;
}

.work-method__intro{
  max-width:720px;
  margin:18px 0 0;
  font-size:clamp(1rem, 1.35vw, 1.1rem);
  line-height:1.75;
  color:#5f687d;
}

.work-method__grid{
   
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(14px, 2vw, 22px);
  align-items:stretch;
}

.work-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:228px;
  padding:22px 76px 22px 22px;
  border-radius:28px;
  background:transparent;
  border:1px solid rgba(13,24,51,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
  overflow:hidden;
}

.work-card:hover{
  transform:translateY(-2px);
  border-color:rgba(13,24,51,.16);
  box-shadow:0 10px 30px rgba(13,24,51,.05);
}

.work-card__top{
  margin-bottom:18px;
}

.work-card__icon{
  display:inline-flex;
  width:24px;
  height:24px;
}

.work-card__icon svg{
  width:100%;
  height:100%;
}

.work-card__icon--violet{color:#7b61ff;}
.work-card__icon--orange{color:#ff6a00;}
.work-card__icon--cyan{color:#16c2df;}

.work-card__content{
  max-width:92%;
}

.work-card__label{
  display:inline-block;
  margin-bottom:8px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#5b53ff;
}

.work-card__title{
  margin:0 0 10px;
  font-size:clamp(1.2rem, 1.8vw, 1.6rem);
  line-height:1.08;
  letter-spacing:-.035em;
  color:#0d1833;
}

.work-card__text{
  margin:0;
  font-size:.99rem;
  line-height:1.7;
  color:#5f687d;
}

.work-card__trigger{
  position:absolute;
  right:18px;
  bottom:18px;
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  background:#0b1a40;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:
    transform .22s ease,
    background-color .22s ease,
    box-shadow .22s ease;
  box-shadow:0 8px 24px rgba(11,26,64,.16);
}

.work-card__trigger:hover{
  transform:scale(1.04);
  background:#132659;
}

.work-card__trigger span{
  display:block;
  font-size:1.7rem;
  line-height:1;
  margin-top:-2px;
}

/* =========================================================
   WORK MODAL
========================================================= */

.work-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  pointer-events:none;
  opacity:0;
  transition:opacity .22s ease;
}

.work-modal.is-open{
  opacity:1;
  pointer-events:auto;
}

.work-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(13,18,32,.36);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.work-modal__dialog{
  position:relative;
  width:min(100% - 32px, 820px);
  max-height:min(84vh, 900px);
  margin:6vh auto 0;
  background:#f5f5f7;
  border:1px solid rgba(13,24,51,.08);
  border-radius:32px;
  overflow:auto;
  box-shadow:0 40px 80px rgba(0,0,0,.18);
  transform:translateY(10px) scale(.985);
  transition:transform .24s ease;
}

.work-modal.is-open .work-modal__dialog{
  transform:translateY(0) scale(1);
}

.work-modal__inner{
  padding:clamp(28px, 5vw, 52px);
}

.work-modal__close{
  position:absolute;
  top:18px;
  right:18px;
  width:46px;
  height:46px;
  border:0;
  border-radius:999px;
  background:#1b1b1f;
  color:#fff;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.work-modal__eyebrow{
  display:inline-block;
  margin-bottom:12px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#5f687d;
}

.work-modal__title{
  margin:0 0 24px;
  font-size:clamp(2rem, 4vw, 4rem);
  line-height:.98;
  letter-spacing:-.045em;
  color:#1b1b1f;
}

.work-modal__content{
  color:#2f3441;
}

.work-modal__content p{
  margin:0 0 18px;
  font-size:clamp(1rem, 1.35vw, 1.12rem);
  line-height:1.65;
}

.work-modal__content p:last-child{
  margin-bottom:0;
}

.work-modal__content strong{
  color:#11131a;
}

/* =========================================================
   PORTFOLIO SLIDER
========================================================= */

.portfolio-slider-section{
    width: 100%;
    margin: auto;
  position:relative;
  overflow:hidden;
  padding:clamp(56px, 7vw, 96px) 0 96px;
  background:#202126;
}

.portfolio-slider-header{
  width:min(var(--content-wide), calc(100% - 48px));
  margin:0 auto 28px;
}

.portfolio-slider-eyebrow{
  display:block;
  margin-bottom:14px;
  color:#6d5cff;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
}

.portfolio-slider-title{
  margin:0;
  color:#fff;
  font-size:clamp(2.6rem, 4.2vw, 4rem);
  line-height:.94;
  letter-spacing:-.07em;
  font-weight:800;
}

.portfolio-slider{
  position:relative;
  width:100%;
  margin:0 auto;
}

.portfolio-slider-viewport{
  position:relative;
  width:100%;
    align-content: flex-start !important;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:0 clamp(56px, 7vw, 150px);
}

.portfolio-slider-viewport::-webkit-scrollbar{
  display:none;
}

.portfolio-slider-track{
  display:flex;
  align-items:stretch;
  gap:24px;
  width:max-content;
}

.portfolio-slide{
  flex:0 0 min(1280px, calc(100vw - clamp(112px, 18vw, 300px)));
  width:min(1280px, calc(100vw - clamp(112px, 18vw, 300px)));
  height:clamp(540px, 66vh, 660px);

  display:grid;
  grid-template-columns:minmax(340px, 42%) minmax(0, 58%);
  align-items:stretch;

  scroll-snap-align:center;

  overflow:hidden;
  border-radius:30px;
  background:#000;
  color:#fff;

  box-shadow:
    0 24px 80px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.portfolio-slide-copy{
  position:relative;
  z-index:2;
  min-width:0;
  padding:clamp(38px, 4vw, 58px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.portfolio-slide-kicker{
  display:block;
  margin-bottom:16px;
  color:coral;
  font-size:.8rem;
  font-weight:700;
  line-height:1.35;
}

.portfolio-slide-title{
  max-width:11ch;
  margin:0 0 24px;
  color:#fff;
  font-size:clamp(3rem, 3vw, 4.7rem);
  line-height:.9;
  letter-spacing:-.06em;
  font-weight:800;
}

.portfolio-slide-text{
  max-width:34ch;
  margin:0 0 18px;
  color:rgba(255,255,255,.76);
  font-size:clamp(1rem, 1.2vw, 1.08rem);
  line-height:1.55;
}

.portfolio-slide-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  width:max-content;
  margin-top:8px;
  color:#fff;
  font-size:.95rem;
  font-weight:700;
}

.portfolio-slide-link span{
  transition:transform .25s ease;
}

.portfolio-slide-link:hover span{
  transform:translateX(4px);
}

.portfolio-slide-media{
  position:relative;
  overflow:hidden;
  min-width:0;
  height:100%;
  background:#000;
}

.portfolio-slide-image,
.portfolio-slide-video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.portfolio-slider-arrow{
  position:absolute;
  top:50%;
  z-index:10;
  width:52px;
  height:52px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.09);
  color:#fff;
  font-size:2.4rem;
  line-height:1;
  transform:translateY(-50%);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:opacity .25s ease, transform .25s ease, background .25s ease;
}

.portfolio-slider-arrow:hover{
  background:rgba(255,255,255,.16);
  transform:translateY(-50%) scale(1.04);
}

.portfolio-slider-arrow-prev{
  left:clamp(20px, 5vw, 72px);
}

.portfolio-slider-arrow-next{
  right:clamp(20px, 5vw, 72px);
}

.portfolio-slider-arrow.is-hidden{
  opacity:0;
  pointer-events:none;
}

.portfolio-slider-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:24px;
}

.portfolio-slider-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.32);
  transition:width .25s ease, background .25s ease;
}

.portfolio-slider-dot.is-active{
  width:28px;
  background:#fff;
}

/* =========================================================
   PROJECT SHOWCASE
========================================================= */

.project-showcaseOK{
  padding:clamp(56px, 1vw, 96px) 0;
  background:#202126;
  color:#fff;
  overflow:hidden;
}

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

.project-showcase-header{
  margin-bottom:clamp(28px, 4vw, 44px);
}

.project-showcase-eyebrow{
  display:block;
  margin-bottom:14px;
  color:#6d5cff;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
}

.project-showcase-title{
  margin:0;
  color:#fff;
    width: 1440px !important;
  font-size:clamp(2.6rem, 4.2vw, 4.6rem);
  line-height:.94;
  letter-spacing:-.07em;
  font-weight:800;
}

.project-showcase-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:32px;
}

.project-showcase-card{
  min-width:0;
}

.project-showcase-media{
  margin:0 0 24px;
  overflow:hidden;
  border-radius:26px;
  background:#1b1c20;
}

.project-showcase-media img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center;
}

.project-showcase-content{
  padding:0 4px;
}

.project-showcase-card-title{
  margin:0 0 14px;
  color:#fff;
  font-size:1.08rem;
  line-height:1.25;
  font-weight:800;
}

.project-showcase-card-text{
  margin:0 0 12px;
  color:rgba(255,255,255,.72);
  font-size:1rem;
  line-height:1.6;
  font-weight:600;
}

/* =========================================================
   CREATIVE SLIDER
========================================================= */

.creative-slider-section{
  background:#1d1d1f;
    max-width: 1440px !impo; 
  color:#f5f5f7;
  padding:clamp(22px, 4vw, 120px) 0;
  overflow:hidden;
}

.creative-slider-container{
  width:min(var(--content-max), 100%);
  margin:0 auto;
}


.creative-slider-eyebrow{
  display:block;
  margin-bottom:14px;
  color:#6d5cff;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
}

.creative-slider-title{
  margin:0;
  max-width:1440px;
  color:#fff;
  font-size:clamp(2.5rem, 5vw, 5rem);
  line-height:.94;
  letter-spacing:-.07em;
  font-weight:800;
}

.creative-slider{
  position:relative;
  width:100%;
}


.creative-slider-track{
  display:flex;
  align-items:stretch;
  gap:24px;
  transform:translate3d(0,0,0);
  transition:transform .72s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}

.creative-card{
  flex:0 0 clamp(320px, 28vw, 420px);
  min-height:560px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  border-radius:28px;
  background:#070707;
  opacity:.34;
  transform:scale(.98);
  transition:
    opacity .45s ease,
    transform .45s ease;
}

.creative-card.is-active{
  opacity:1;
  transform:scale(1);
}

.creative-card-media{
  position:relative;
  width:100%;
  height:370px;
    padding-bottom: 32px;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(255,255,255,.08),
      rgba(0,0,0,0) 56%
    );
}

.creative-card-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform:scale(1.01);
}

.creative-card-copy{
  padding:0 clamp(24px, 2.4vw, 36px) clamp(30px, 3vw, 42px);
}

.creative-card-copy h3{
  margin:0 0 14px;
  color:#f5f5f7;
  font-size:clamp(1.45rem, 2vw, 1.85rem);
  line-height:1;
  letter-spacing:-.045em;
  font-weight:800;
}

.creative-card-copy p{
  margin:0;
  color:rgba(245,245,247,.72);
  font-size:clamp(1rem, 1.1vw, 1.12rem);
  line-height:1.55;
}

.creative-slider-controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:28px;
}

.creative-slider-btn{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  transition:
    background .25s ease,
    opacity .25s ease,
    transform .25s ease;
}

.creative-slider-btn:hover{
  background:rgba(255,255,255,.16);
  transform:scale(1.04);
}

.creative-slider-btn.is-disabled{
  opacity:.28;
  pointer-events:none;
}

/* =========================================================
   ABOUT / COUNTERS / CTA
========================================================= */

.about_area{
  padding:clamp(72px, 8vw, 108px) 0;
  background:#f5f5f7;
}

.section_title{
  max-width:980px;
  margin:0 auto;
  text-align:center;
}

.section_title span{
  display:block;
  margin-bottom:16px;
  color:#6d5cff;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
}

.section_title h2{
  margin:0;
  color:#07162d;
  font-size:clamp(3rem, 6vw, 6rem);
  line-height:.94;
  letter-spacing:-.075em;
  font-weight:800;
}

.section_title p{
  max-width:760px;
  margin:20px auto 0;
  color:rgba(7,22,45,.68);
  font-size:clamp(1.05rem, 1.5vw, 1.25rem);
  line-height:1.7;
}

.counter_area{
  padding:clamp(56px, 7vw, 96px) 0;
  background:#f5f5f7;
}

.single_counter{
  position:relative;
  overflow:hidden;
  padding:38px 34px;
   margin-bottom: 16px;
  border-radius:30px;
  background:linear-gradient(180deg,#ffffff 0%,#fafbfd 100%);
  border:1px solid rgba(7,22,45,.06);
  box-shadow:0 10px 40px rgba(7,22,45,.05);
  transition:
    transform .35s var(--ease),
    box-shadow .35s var(--ease);
}

.single_counter:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 70px rgba(7,22,45,.08);
}

.single_counter h3{
  margin:0 0 14px;
  color:#07162d;
  font-size:clamp(48px,4vw,72px);
  line-height:.9;
  letter-spacing:-.06em;
  font-weight:800;
}

.single_counter p{
  margin:0;
  color:rgba(0,0,0,.62);
  font-size:17px;
  line-height:1.7;
  font-weight:500;
}

.discuss_projects{
padding-bottom: 100px;  background:#f5f5f7;
}

.project_text{
  max-width:980px;
  margin:0 auto;
  text-align:center;
}

.project_text h2{
  margin:0;
  color:#07162d;
  font-size:clamp(2.8rem, 5vw, 5.2rem);
  line-height:.96;
  letter-spacing:-.07em;
  font-weight:800;
}

.project_text p{
  max-width:720px;
  margin:24px auto 0;
  color:rgba(7,22,45,.68);
  font-size:clamp(1rem, 1.4vw, 1.2rem);
  line-height:1.75;
}

.boxed-btn3{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:170px;
  height:54px;
  margin-top:34px;
  padding:0 28px;
  border-radius:999px;
  background:#07162d;
  color:#fff;
  font-size:15px;
  font-weight:700;
  transition:
    transform .35s var(--ease),
    background .35s var(--ease);
}

.boxed-btn3:hover{
  transform:translateY(-2px);
  background:#111f38;
}

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

footer{
  padding:70px 24px 40px;
  background:#061225;
  color:#fff;
  text-align:center;
}

footer .social_icon,
footer .menu{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

footer a{
  color:rgba(255,255,255,.82);
  font-weight:600;
  transition:color .3s ease;
}

footer a:hover{
  color:#fff;
}

footer p{
  margin:0;
  color:rgba(255,255,255,.58);
  font-size:14px;
  line-height:1.6;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes scrollSlider{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}

@keyframes ambientFloat{
  0%{
    transform:translate3d(0,0,0) scale(1);
  }

  50%{
    transform:translate3d(20px,-18px,0) scale(1.08);
  }

  100%{
    transform:translate3d(0,0,0) scale(1);
  }
}

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

@media(max-width:1200px){
  .portfolio-slide{
    height:clamp(500px, 62vh, 620px);
  }

  .project-showcase-grid{
    gap:24px;
  }
}

@media(max-width:1100px){
  .work-method__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .work-card{
    min-height:240px;
  }
}

@media(max-width:991px){
  .logoIZM{
    width:36px;
    height:36px;
  }

  .logo-name{
    display:none;
  }

  .hero-container{
    padding:140px 42px 64px;
  }

  .hero-title{
    font-size:clamp(52px,9vw,76px);
  }

  .expertise-editorial{
    padding:72px 0 64px;
  }

  .expertise-grid{
    grid-template-columns:1fr;
    gap:34px;
    max-width:100%;
    margin:0;
  }

  

  .expertise-copy{
    max-width:620px;
    padding-top:0;
  }

  .expertise-copy p{
    max-width:620px;
    font-size:1rem;
  }

  .portfolio-slider-section{
    padding-bottom:72px;
  }

  .portfolio-slider-header{
    width:min(var(--content-wide), calc(100% - 40px));
  }

  .portfolio-slider-viewport{
    padding:0 44px;
  }

  .portfolio-slide{
    flex-basis:calc(100vw - 88px);
    width:calc(100vw - 88px);
    height:auto;
    min-height:620px;
    grid-template-columns:1fr;
  }

  .portfolio-slide-copy{
    padding:34px;
  }

  .portfolio-slide-title{
    font-size:clamp(2.8rem, 9vw, 4.6rem);
  }

  .portfolio-slide-media{
    height:380px;
  }

  .portfolio-slider-arrow{
    width:44px;
    height:44px;
    font-size:2rem;
  }

  .project-showcase-grid{
    grid-template-columns:1fr;
  }

  .creative-slider-viewport{
    padding:0 40px;
  }

  .creative-slider-track{
    gap:20px;
  }

  .creative-card{
    flex-basis:clamp(280px, 58vw, 360px);
    min-height:500px;
    border-radius:26px;
  }

  .creative-card-media{
    height:230px;
  }

  .creative-card-copy{
    padding:0 28px 34px;
  }
}

@media(max-width:768px){
  .hero-premium{
    min-height:100svh;
  }

  .hero-image{
    mask-image:linear-gradient(
      to right,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.92) 18%,
      rgba(0,0,0,.72) 42%,
      rgba(0,0,0,.34) 72%,
      transparent 100%
    );
    -webkit-mask-image:linear-gradient(
      to right,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.92) 18%,
      rgba(0,0,0,.72) 42%,
      rgba(0,0,0,.34) 72%,
      transparent 100%
    );
  }

  .hero-image img{
    top:0;
    right:-48%;
    width:178%;
    height:100%;
    object-fit:cover;
    object-position:78% center;
    transform:scale(1.08);
    opacity:.82;
  }

  .hero-overlay{
    background:linear-gradient(
      180deg,
      rgba(3,5,16,.78) 0%,
      rgba(3,5,16,.62) 38%,
      rgba(3,5,16,.78) 100%
    );
  }

  .hero-container{
    padding:130px 24px 42px;
  }

  .hero-title{
    font-size:clamp(42px,11vw,58px);
    line-height:.96;
  }

  .hero-description{
    max-width:100%;
    margin-top:26px;
    font-size:15px;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-actions .hero-btn-primary{
    width:100%;
  }

  .slide{
    width:120px;
    min-width:120px;
  }

  .logos{
    max-width:96px;
  }

  .work-method{
    padding:52px 0 64px;
  }

  .work-method__container{
    width:min(100% - 24px, var(--content-max));
  }

  .work-method__heading{
    margin-bottom:24px;
  }

  .work-method__title{
    max-width:12ch;
  }

  .work-method__intro{
    margin-top:14px;
    font-size:.98rem;
    line-height:1.7;
  }

  .work-method__grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .work-card{
    min-height:auto;
    padding:18px 72px 18px 18px;
    border-radius:22px;
  }

  .work-card__top{
    margin-bottom:14px;
  }

  .work-card__label{
    margin-bottom:6px;
    font-size:.72rem;
  }

  .work-card__title{
    font-size:1.12rem;
    line-height:1.12;
    margin-bottom:8px;
  }

  .work-card__text{
    font-size:.95rem;
    line-height:1.6;
  }

  .work-card__trigger{
    right:16px;
    bottom:16px;
    width:40px;
    height:40px;
  }

  .work-modal__dialog{
    width:min(100% - 20px, 820px);
    max-height:88vh;
    margin-top:4vh;
    border-radius:24px;
  }

  .work-modal__inner{
    padding:22px 20px 24px;
  }

  .work-modal__close{
    top:12px;
    right:12px;
    width:40px;
    height:40px;
    font-size:1.8rem;
  }

  .work-modal__title{
    padding-right:42px;
    margin-bottom:18px;
  }

  .work-modal__content p{
    font-size:.98rem;
    line-height:1.65;
  }

  .portfolio-slider-viewport{
    padding:0 20px;
  }

  .portfolio-slide{
    flex-basis:calc(100vw - 40px);
    width:calc(100vw - 40px);
    min-height:auto;
  }

  .portfolio-slide-copy{
    padding:28px 24px;
  }

  .portfolio-slide-text{
    max-width:100%;
  }

  .portfolio-slide-media{
    height:320px;
  }

  .portfolio-slider-arrow{
    display:none;
  }

  .project-showcase-container,
  .portfolio-slider-header,
  .creative-slider-header{
    width:calc(100% - 40px);
  }

  .creative-slider-title{
    font-size:clamp(2.2rem, 10vw, 3.2rem);
  }

  .creative-slider-viewport{
    padding:0 90px;
  }

  .creative-slider-track{
    gap:18px;
  }

  .creative-card{
    flex:0 0 calc(100vw - 180px);
    min-height:493px;
    border-radius:24px;
  }

  .creative-card-media{
    height:210px;
  }

  .creative-card-copy{
    padding:0 28px 34px;
  }

  .creative-card-copy h3{
    font-size:1.35rem;
  }

  .creative-card-copy p{
    font-size:.98rem;
    line-height:1.5;
  }

  .creative-slider-controls{
    margin-top:22px;
  }

  .creative-slider-btn{
    width:40px;
    height:40px;
    font-size:30px;
  }

  .project_text h2{
    font-size:clamp(2.4rem, 10vw, 3.8rem);
  }
}

@media(max-width:600px){
  .container,
  .container-fluid{
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .headerfixed .container-fluid{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .expertise-editorial .container{
    padding-left:24px;
    padding-right:24px;
  }

  .expertise-title{
    font-size:clamp(2.6rem,11vw,3.8rem);
    line-height:.94;
  }

  .expertise-copy p{
    font-size:1rem;
    line-height:1.65;
  }

  .portfolio-slider-title,
  .project-showcase-title{
    font-size:clamp(2.2rem, 10vw, 3.5rem);
  }

  .project-showcase-media{
    border-radius:22px;
  }

  .project-showcase-card-text{
    font-size:.95rem;
  }
}

@media(max-width:430px){
  .creative-slider-viewport{
    padding:0 76px;
  }

  .creative-card{
    flex-basis:calc(100vw - 152px);
  }

  .hero-actions .hero-btn-primary{
    min-width:0;
  }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:4px;
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* =========================================================
   FIX ALINEACIÓN EXPERTISE CON HERO
   Mantiene el mismo ancho/gutter y evita columnas centradas
========================================================= */

.expertise-editorial .container{
  max-width:1440px !important;
  width:100% !important;

  margin:0 auto !important;

  padding-left:var(--gutter) !important;
  padding-right:var(--gutter) !important;
}

.expertise-grid{
  width:100% !important;
  max-width:none !important;

  margin:0 !important;

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

  gap:clamp(48px, 7vw, 96px) !important;

  justify-content:stretch !important;
  align-items:start !important;
}

.expertise-copy{
  max-width:420px !important;
  justify-self:end !important;
}

/* TABLET */
@media(max-width:991px){

  .expertise-editorial .container{
    padding-left:var(--gutter) !important;
    padding-right:var(--gutter) !important;
  }

  .expertise-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  .expertise-copy{
    max-width:680px !important;
    justify-self:start !important;
  }
}

/* MOBILE */
@media(max-width:600px){

  .expertise-editorial .container{
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .expertise-grid{
    gap:22px !important;
  }

  .expertise-title{
    max-width:100% !important;
  }

  .expertise-copy{
    max-width:100% !important;
  }
}


/* =========================================================
   FIX EXPERTISE: alineado al hero, pero columnas juntas
========================================================= */

.expertise-editorial .container{
  max-width:1440px !important;
  width:100% !important;
  margin:0 auto !important;

  padding-left:var(--gutter) !important;
  padding-right:var(--gutter) !important;
}

/* El bloque empieza en la misma línea izquierda, pero NO se estira completo */
.expertise-grid{
  width:100% !important;
  max-width:1120px !important;

  margin:0 !important;

  display:grid !important;
  grid-template-columns:
    minmax(0, 620px)
    minmax(280px, 420px) !important;

  gap:clamp(42px, 5vw, 72px) !important;

  justify-content:start !important;
  align-items:start !important;
}


.expertise-copy{
  max-width:420px !important;
  justify-self:start !important;
}

/* Para pantallas intermedias donde todavía caben 2 columnas */
@media(min-width:992px) and (max-width:1280px){

  .expertise-grid{
    max-width:1040px !important;

    grid-template-columns:
      minmax(0, 560px)
      minmax(280px, 400px) !important;

    gap:48px !important;
  }

  .expertise-title{
    max-width:560px !important;
  }

  .expertise-copy{
    max-width:400px !important;
  }
}

/* Tablet: ya no forces dos columnas si se empieza a apretar */
@media(max-width:991px){

  .expertise-grid{
    max-width:760px !important;

    grid-template-columns:1fr !important;
    gap:24px !important;

    margin:0 !important;
  }

  .expertise-title,
  .expertise-copy{
    max-width:100% !important;
    justify-self:start !important;
  }
}

/* Mobile */
@media(max-width:600px){

  .expertise-editorial .container{
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .expertise-grid{
    max-width:100% !important;
    gap:20px !important;
  }
}



/* =========================================================
   FIX DEFINITIVO EXPERTISE
   Crece con el mismo sistema del HERO: 1440px + gutter
========================================================= */

.expertise-editorial{
  padding: clamp(88px, 4vw, 128px) 0 72px !important;
}

.expertise-editorial .container{
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;

  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

/* 
   El grid ahora usa TODO el ancho disponible del container,
   igual que el hero. Ya no se queda chiquito en desktop.
*/
.expertise-grid{
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;

  display: grid !important;
  grid-template-columns:
    minmax(520px, 0.95fr)
    minmax(360px, 0.55fr) !important;

  column-gap: clamp(64px, 4vw, 140px) !important;

  justify-content: stretch !important;
  align-items: start !important;
}

/* El título puede crecer más, pero sin desbordarse */
.expertise-title{
  width: 100% !important;
  max-width: 860px !important;

  justify-self: start !important;

  font-size: clamp(3.2rem, 4vw, 5.4rem) !important;
  line-height: .92 !important;
  letter-spacing: -.075em !important;
}

/* La columna derecha queda alineada, no pegada al centro raro */
.expertise-copy{
  width: 100% !important;
  max-width: 520px !important;

  justify-self: start !important;
  padding-top: clamp(6px, 1vw, 14px) !important;
}

.expertise-copy p{
  max-width: 520px !important;
}

/* Logos alineados al mismo sistema visual */
.expertise-editorial .slider{
  max-width: 1120px !important;
  margin-top: 54px !important;
}

/* =========================================================
   DESKTOP MEDIO
========================================================= */

@media (min-width: 992px) and (max-width: 1280px){

  .expertise-grid{
    grid-template-columns:
      minmax(440px, .95fr)
      minmax(340px, .6fr) !important;

    column-gap: clamp(48px, 6vw, 88px) !important;
  }

  .expertise-title{
    max-width: 680px !important;
    font-size: clamp(3rem, 5vw, 4.6rem) !important;
  }

  .expertise-copy{
    max-width: 460px !important;
  }

  .expertise-copy p{
    max-width: 460px !important;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px){

  .expertise-editorial{
    padding: 72px 0 64px !important;
  }

  .expertise-editorial .container{
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }

  .expertise-grid{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .expertise-title{
    max-width: 760px !important;
    font-size: clamp(2.8rem, 8vw, 4.6rem) !important;
  }

  .expertise-copy{
    max-width: 680px !important;
    justify-self: start !important;
  }

  .expertise-copy p{
    max-width: 680px !important;
  }
}

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

@media (max-width: 600px){

  .expertise-editorial .container{
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .expertise-grid{
    gap: 22px !important;
  }

  .expertise-title{
    max-width: 100% !important;
    font-size: clamp(2.6rem, 11vw, 3.8rem) !important;
  }

  .expertise-copy,
  .expertise-copy p{
    max-width: 100% !important;
  }
}



/* =========================================================
   EXPERTISE 50/50
   Dos columnas balanceadas con padding editorial
========================================================= */

.expertise-editorial .container{
  width:100% !important;
  max-width:1440px !important;
  margin:0 auto !important;
  padding-left:var(--gutter) !important;
  padding-right:var(--gutter) !important;
}

.expertise-grid{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;

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

  column-gap:clamp(48px, 7vw, 112px) !important;

  align-items:start !important;
  justify-content:stretch !important;
}

/* Columna izquierda */
.expertise-title{
  width:100% !important;
  max-width:1160px !important;
  justify-self:start !important;
  font-size:clamp(3rem, 4vw, 4rem) !important;
  line-height:.94 !important;
  letter-spacing:-.07em !important;
}

/* Columna derecha */
.expertise-copy{
  width:100% !important;
  max-width:620px !important;

  justify-self:start !important;

  /* padding visual para que no quede pegado */
  padding-top:clamp(8px, 1vw, 16px) !important;
  padding-left:clamp(0px, 1vw, 16px) !important;
}

.expertise-copy p{
  width:100% !important;
  max-width:620px !important;

  font-size:clamp(1.02rem, 1.22vw, 1.18rem) !important;
  line-height:1.72 !important;
}

/* Mantiene el eyebrow bien alineado */
.expertise-copy .eyebrow,
.expertise-copy span{
  margin-bottom:14px !important;
}

/* =========================================================
   DESKTOP MEDIO
========================================================= */

@media(min-width:992px) and (max-width:1280px){

  .expertise-grid{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap:clamp(40px, 5vw, 72px) !important;
  }

  .expertise-title{
    max-width:680px !important;
    font-size:clamp(2.8rem, 4.7vw, 4.4rem) !important;
  }

  .expertise-copy{
    max-width:560px !important;
    padding-left:0 !important;
  }

  .expertise-copy p{
    max-width:560px !important;
  }
}

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

@media(max-width:991px){

  .expertise-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  .expertise-title,
  .expertise-copy,
  .expertise-copy p{
    max-width:100% !important;
  }

  .expertise-copy{
    padding-top:0 !important;
    padding-left:0 !important;
  }
}


/* =========================================================
   CREATIVE SLIDER - RESPONSIVE FIX FINAL
   Mantiene título, cards y carrusel alineados y estables
========================================================= */

.creative-slider-section{
  width:100% !important;
  background:#1d1d1f !important;
  overflow:hidden !important;

  padding:
    clamp(64px, 7vw, 112px)
    0
    clamp(72px, 8vw, 120px) !important;
}

.creative-slider-container{
  width:100% !important;
  max-width:none !important;
  margin:0 auto !important;
}

/* Header alineado al mismo sistema visual */
.creative-slider-header{
  width:100% !important;
  width:1440px !important;

  margin:
    0
    auto
    clamp(36px, 5vw, 64px) !important;

  padding-left:var(--gutter) !important;
  padding-right:var(--gutter) !important;
}

.creative-slider-eyebrow{
  display:block !important;

  margin-bottom:14px !important;

  color:#6d5cff !important;

  font-size:.78rem !important;
  font-weight:700 !important;
  letter-spacing:.34em !important;
  text-transform:uppercase !important;
}

/* Evita que el título se desborde en desktop grande */
.creative-slider-title{
  max-width:1480px !important;

  margin:0 !important;

  color:#fff !important;

  font-size:clamp(3.2rem, 5.2vw, 5.9rem) !important;
  line-height:.9 !important;
  letter-spacing:-.075em !important;
  font-weight:800 !important;

  text-wrap:balance !important;
}

/* Slider */
.creative-slider{
  position:relative !important;
  width:100% !important;
}

/* El viewport controla el carrusel sin mochar feo */
.creative-slider-viewport{
  width:100% !important;

  overflow:hidden !important;

  padding-left:clamp(48px, 12vw, 280px) !important;
  padding-right:clamp(48px, 12vw, 280px) !important;
}

/* Track estable */
.creative-slider-track{
  display:flex !important;
  align-items:stretch !important;

  gap:clamp(18px, 2vw, 28px) !important;

  transform:translate3d(0,0,0);
  transition:transform .72s cubic-bezier(.22,1,.36,1) !important;
  will-change:transform !important;
}

/* Card más controlada */
.creative-card{
  flex:0 0 clamp(320px, 24vw, 420px) !important;

  min-height:clamp(500px, 52vw, 590px) !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;

  overflow:hidden !important;

  border-radius:28px !important;

  background:#070707 !important;

  opacity:.34 !important;
  transform:scale(.98) !important;

  transition:
    opacity .45s ease,
    transform .45s ease !important;
}

.creative-card.is-active{
  opacity:1 !important;
  transform:scale(1) !important;
}

.creative-card-media{
  width:100% !important;

  height:clamp(230px, 21vw, 300px) !important;

  padding-bottom:0 !important;

  overflow:hidden !important;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(255,255,255,.08),
      rgba(0,0,0,0) 56%
    ) !important;
}

.creative-card-media img{
  width:100% !important;
  height:100% !important;

  object-fit:cover !important;
  object-position:center !important;
}

.creative-card-copy{
  padding:
    0
    clamp(24px, 2.2vw, 34px)
    clamp(28px, 3vw, 40px) !important;
}

.creative-card-copy h3{
  margin:0 0 14px !important;

  color:#f5f5f7 !important;

  font-size:clamp(1.35rem, 1.75vw, 1.75rem) !important;
  line-height:1 !important;
  letter-spacing:-.045em !important;
  font-weight:800 !important;
}

.creative-card-copy p{
  margin:0 !important;

  color:rgba(245,245,247,.72) !important;

  font-size:clamp(.96rem, 1.05vw, 1.08rem) !important;
  line-height:1.55 !important;
}

/* Controles */
.creative-slider-controls{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;

  gap:12px !important;

  margin-top:28px !important;
}

.creative-slider-btn{
  width:42px !important;
  height:42px !important;

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

  border-radius:999px !important;

  background:rgba(255,255,255,.10) !important;
  color:#fff !important;

  font-size:32px !important;
  line-height:1 !important;
}

.creative-slider-btn.is-disabled{
  opacity:.28 !important;
  pointer-events:none !important;
}

/* =========================================================
   DESKTOP GRANDE
========================================================= */

@media(min-width:1600px){

  .creative-slider-viewport{
    padding-left:clamp(180px, 18vw, 360px) !important;
    padding-right:clamp(180px, 18vw, 360px) !important;
  }

  .creative-card{
    flex-basis:420px !important;
    min-height:590px !important;
  }

  .creative-card-media{
    height:300px !important;
  }
}

/* =========================================================
   LAPTOP / TABLET HORIZONTAL
========================================================= */

@media(max-width:1200px){

  .creative-slider-title{
    max-width:980px !important;

    font-size:clamp(2.8rem, 6vw, 4.7rem) !important;
    line-height:.92 !important;
  }

  .creative-slider-viewport{
    padding-left:clamp(56px, 9vw, 120px) !important;
    padding-right:clamp(56px, 9vw, 120px) !important;
  }

  .creative-card{
    flex-basis:clamp(300px, 34vw, 360px) !important;
    min-height:520px !important;
  }

  .creative-card-media{
    height:240px !important;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:991px){

  .creative-slider-header{
    padding-left:32px !important;
    padding-right:32px !important;
  }

  .creative-slider-title{
    max-width:760px !important;

    font-size:clamp(2.5rem, 8vw, 4rem) !important;
    line-height:.94 !important;
  }

  .creative-slider-viewport{
    padding-left:72px !important;
    padding-right:72px !important;
  }

  .creative-card{
    flex-basis:clamp(300px, 56vw, 360px) !important;
    min-height:500px !important;
    border-radius:26px !important;
  }

  .creative-card-media{
    height:230px !important;
  }
}

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

@media(max-width:640px){

  .creative-slider-section{
    padding:
      56px
      0
      72px !important;
  }

  .creative-slider-header{
    padding-left:20px !important;
    padding-right:20px !important;

    margin-bottom:28px !important;
  }

  .creative-slider-title{
    max-width:100% !important;

    font-size:clamp(2.15rem, 11vw, 3.2rem) !important;
    line-height:.94 !important;
    letter-spacing:-.065em !important;
  }

  /* deja ver cachito de la siguiente card */
  .creative-slider-viewport{
    padding-left:44px !important;
    padding-right:44px !important;
  }

  .creative-slider-track{
    gap:16px !important;
  }

  .creative-card{
    flex-basis:calc(100vw - 88px) !important;

    min-height:500px !important;

    border-radius:24px !important;
  }

  .creative-card-media{
    height:220px !important;
  }

  .creative-card-copy{
    padding:
      0
      24px
      30px !important;
  }

  .creative-card-copy h3{
    font-size:1.35rem !important;
  }

  .creative-card-copy p{
    font-size:.98rem !important;
    line-height:1.5 !important;
  }

  .creative-slider-controls{
    margin-top:22px !important;
  }

  .creative-slider-btn{
    width:40px !important;
    height:40px !important;
    font-size:30px !important;
  }
}

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

@media(max-width:430px){

  .creative-slider-viewport{
    padding-left:28px !important;
    padding-right:28px !important;
  }

  .creative-card{
    flex-basis:calc(100vw - 56px) !important;
  }
}




/* =========================================================
   PROJECT SHOWCASE FULL BACKGROUND FIX
   Fondo negro full + contenido centrado max 1440px
========================================================= */

.project-showcase{
  width:100% !important;
  max-width:none !important;

  margin:0 !important;

  background:#000 !important;

  padding:
    clamp(72px, 8vw, 120px)
    0 !important;

  overflow:hidden !important;
}

.project-showcase-container{
  width:100% !important;
  max-width:1440px !important;

  margin:0 auto !important;

  padding:
    0
    clamp(24px, 5vw, 80px) !important;
}

.project-showcase-header{
  max-width:980px !important;

  margin:
    0
    0
    clamp(36px, 5vw, 58px) !important;
}

.project-showcase-grid{
  width:100% !important;

  display:grid !important;

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

  gap:
    clamp(24px, 2vw, 32px) !important;
}

.project-showcase-card{
  min-width:0 !important;
}

.project-showcase-media{
  width:100% !important;

  aspect-ratio:1 / 1 !important;

  margin:
    0
    0
    24px !important;

  border-radius:28px !important;

  overflow:hidden !important;

  background:#1d1d1f !important;
}

.project-showcase-media img{
  width:100% !important;
  height:100% !important;

  display:block !important;

  object-fit:cover !important;
  object-position:center !important;
}

/* TABLET */
@media(max-width:991px){

  .project-showcase-container{
    padding:
      0
      32px !important;
  }

  .project-showcase-grid{
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      38px
      22px !important;
  }
}

/* MOBILE */
@media(max-width:640px){

  .project-showcase{
    padding:
      64px
      0 !important;
  }

  .project-showcase-container{
    padding:
      0
      20px !important;
  }

  .project-showcase-grid{
    grid-template-columns:1fr !important;

    gap:46px !important;
  }

  .project-showcase-media{
    border-radius:24px !important;

    margin-bottom:18px !important;
  }
}



/* =========================================================
   FLOATING WHATSAPP CTA - SCROLL
========================================================= */

.floating-whatsapp-cta{
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:9998;

  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;

  width:min(520px, calc(100vw - 32px));
  height:72px;

  padding:0 12px 0 32px;

  border-radius:999px;

  color:#1d1d1f;
  background:rgba(245,245,247,.78);

  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);

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

  box-shadow:
    0 22px 70px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.65);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translate3d(-50%, 24px, 0) scale(.96);

  transition:
    opacity .42s cubic-bezier(.16,1,.3,1),
    visibility .42s cubic-bezier(.16,1,.3,1),
    transform .42s cubic-bezier(.16,1,.3,1),
    background .28s ease,
    box-shadow .28s ease;
}





/* =========================================================
   FINAL PATCH - MOBILE MENU + WHATSAPP CTA
   Pegar hasta abajo del CSS
========================================================= */

.izm-mobile-header{
  display:none;
}

@media (max-width:1000px){

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

  .izm-mobile-header{
    display:block !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:99999 !important;
    pointer-events:none !important;
  }

  .izm-mobile-nav{
    width:100% !important;
    height:64px !important;
    min-height:64px !important;
    margin:0 !important;
    padding:0 24px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    pointer-events:auto !important;
    background:rgba(245,245,247,.86) !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:
      0 1px 0 rgba(0,0,0,.05),
      0 12px 32px rgba(7,22,45,.04) !important;
    backdrop-filter:blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter:blur(24px) saturate(180%) !important;
  }

  .izm-mobile-brand,
  .izm-mobile-brand:link,
  .izm-mobile-brand:visited,
  .izm-mobile-brand:hover,
  .izm-mobile-brand:active{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    color:#1d1d1f !important;
    text-decoration:none !important;
    pointer-events:auto !important;
  }

  .izm-mobile-logo{
    width:28px !important;
    height:28px !important;
    display:block !important;
    object-fit:contain !important;
    filter:brightness(0) !important;
    flex:0 0 28px !important;
  }

  .izm-mobile-name{
    color:#1d1d1f !important;
    font-size:12px !important;
    font-weight:800 !important;
    letter-spacing:.18em !important;
    line-height:1 !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
  }

  .izm-menu-toggle{
    position:relative !important;
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:999px !important;
    background:transparent !important;
    cursor:pointer !important;
    pointer-events:auto !important;
    z-index:100002 !important;
  }

  .izm-menu-toggle span{
    position:absolute !important;
    left:50% !important;
    width:26px !important;
    height:2px !important;
    display:block !important;
    border-radius:999px !important;
    background:#1d1d1f !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:translateX(-50%) !important;
    transition:
      top .28s cubic-bezier(.16,1,.3,1),
      transform .28s cubic-bezier(.16,1,.3,1),
      opacity .18s ease !important;
  }

  .izm-menu-toggle span:nth-child(1){
    top:15px !important;
  }

  .izm-menu-toggle span:nth-child(2){
    top:22px !important;
  }

  .izm-menu-toggle span:nth-child(3){
    top:29px !important;
  }

  .izm-mobile-header.is-open .izm-menu-toggle span{
    background:#1d1d1f !important;
  }

  .izm-mobile-header.is-open .izm-menu-toggle span:nth-child(1){
    top:22px !important;
    transform:translateX(-50%) rotate(45deg) !important;
  }

  .izm-mobile-header.is-open .izm-menu-toggle span:nth-child(2){
    opacity:0 !important;
  }

  .izm-mobile-header.is-open .izm-menu-toggle span:nth-child(3){
    top:22px !important;
    transform:translateX(-50%) rotate(-45deg) !important;
  }

  .izm-mobile-panel{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    padding:98px 46px 40px !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    background:#f5f5f7 !important;
    backdrop-filter:blur(22px) saturate(180%) !important;
    -webkit-backdrop-filter:blur(22px) saturate(180%) !important;
    z-index:99998 !important;
    transition:
      opacity .28s cubic-bezier(.16,1,.3,1),
      visibility .28s cubic-bezier(.16,1,.3,1) !important;
  }

  .izm-mobile-header.is-open .izm-mobile-panel{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .izm-mobile-menu{
    width:100% !important;
    max-width:620px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:18px !important;
  }

  .izm-mobile-link,
  .izm-mobile-link:link,
  .izm-mobile-link:visited,
  .izm-mobile-link:hover,
  .izm-mobile-link:active{
    display:inline-flex !important;
    align-items:center !important;
    width:auto !important;
    padding:0 !important;
    margin:0 !important;
    color:#2b2c31 !important;
    text-decoration:none !important;
    font-size:clamp(2.8rem, 8vw, 4.2rem) !important;
    font-weight:800 !important;
    line-height:1.05 !important;
    letter-spacing:-.055em !important;
    opacity:0 !important;
    transform:translateY(14px) !important;
    transition:
      opacity .36s cubic-bezier(.16,1,.3,1),
      transform .36s cubic-bezier(.16,1,.3,1),
      color .24s ease !important;
  }

  .izm-mobile-header.is-open .izm-mobile-link{
    opacity:1 !important;
    transform:translateY(0) !important;
  }

  .izm-mobile-header.is-open .izm-mobile-link:nth-child(1){ transition-delay:.04s !important; }
  .izm-mobile-header.is-open .izm-mobile-link:nth-child(2){ transition-delay:.08s !important; }
  .izm-mobile-header.is-open .izm-mobile-link:nth-child(3){ transition-delay:.12s !important; }
  .izm-mobile-header.is-open .izm-mobile-link:nth-child(4){ transition-delay:.16s !important; }
  .izm-mobile-header.is-open .izm-mobile-link:nth-child(5){ transition-delay:.20s !important; }

  .izm-mobile-link--cta,
  .izm-mobile-link--cta:link,
  .izm-mobile-link--cta:visited,
  .izm-mobile-link--cta:hover,
  .izm-mobile-link--cta:active{
    position:relative !important;
    margin-top:32px !important;
    width:min(100%, 520px) !important;
    min-height:76px !important;
    padding:0 92px 0 28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    border-radius:999px !important;
    color:#07162d !important;
    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,.90),
        rgba(255,255,255,.52)
      ) !important;
    border:1px solid rgba(255,255,255,.86) !important;
    box-shadow:
      0 24px 70px rgba(7,22,45,.14),
      inset 0 1px 0 rgba(255,255,255,.96),
      inset 0 -1px 0 rgba(255,255,255,.26) !important;
    backdrop-filter:blur(26px) saturate(190%) !important;
    -webkit-backdrop-filter:blur(26px) saturate(190%) !important;
    font-size:clamp(1.18rem, 4.6vw, 1.55rem) !important;
    font-weight:800 !important;
    letter-spacing:-.04em !important;
    line-height:1 !important;
  }

  .izm-mobile-link--cta::after{
    content:"🚀" !important;
    position:absolute !important;
    right:12px !important;
    top:50% !important;
    width:56px !important;
    height:56px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    background:
      radial-gradient(circle at 35% 25%, #ffffff 0%, #eef7ff 42%, #d9ecff 100%) !important;
    box-shadow:
      0 12px 34px rgba(0,122,255,.15),
      inset 0 1px 0 rgba(255,255,255,.95) !important;
    transform:translateY(-50%) !important;
    font-size:1.95rem !important;
    line-height:1 !important;
  }

  body.izm-menu-open{
    overflow:hidden !important;
    touch-action:none !important;
  }
}

@media (max-width:430px){

  .izm-mobile-nav{
    height:58px !important;
    min-height:58px !important;
    padding:0 20px !important;
  }

  .izm-mobile-panel{
    padding:88px 36px 36px !important;
  }

  .izm-mobile-link,
  .izm-mobile-link:link,
  .izm-mobile-link:visited{
    font-size:clamp(2.65rem, 12vw, 3.6rem) !important;
  }

  .izm-mobile-link--cta,
  .izm-mobile-link--cta:link,
  .izm-mobile-link--cta:visited{
    min-height:70px !important;
    padding-left:24px !important;
    padding-right:82px !important;
    font-size:1.18rem !important;
  }

  .izm-mobile-link--cta::after{
    width:52px !important;
    height:52px !important;
    font-size:1.75rem !important;
  }
}

@media (min-width:1001px){
  .izm-mobile-header{
    display:none !important;
  }
}

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

.floating-whatsapp-cta{
  position:fixed;
  left:80% !important;
  right:auto !important;
  bottom:28px !important;
  z-index:9998;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  width:min(320px, calc(100vw - 32px)) !important;
  height:72px;
  min-width:0 !important;
  padding:0 12px 0 32px;
  border-radius:999px;
  color:#1d1d1f;
  background:rgba(245,245,247,.78);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 22px 70px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.65);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(-50%,24px,0) scale(.96) !important;
  transition:
    opacity .42s cubic-bezier(.16,1,.3,1),
    visibility .42s cubic-bezier(.16,1,.3,1),
    transform .42s cubic-bezier(.16,1,.3,1),
    background .28s ease,
    box-shadow .28s ease;
}



.floating-whatsapp-cta:hover{text-decoration: none !important;}




.floating-whatsapp-cta.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate3d(-50%,0,0) scale(1) !important;
}

.floating-whatsapp-cta__text{
  flex:1;
  text-align:center;
  font-size:clamp(1rem,1vw,1rem);
  font-weight:800;
  letter-spacing:-.035em;
  white-space:nowrap;
}

.floating-whatsapp-cta__icon{
  width:54px;
  height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 54px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 25%, #ffffff 0%, #eef7ff 42%, #d9ecff 100%);
  font-size:2rem;
  line-height:1;
  box-shadow:
    0 12px 34px rgba(0,122,255,.15),
    inset 0 1px 0 rgba(255,255,255,.95);
}

@media(max-width:640px){

    .floating-whatsapp-cta{
  position:fixed;
        left:50% !important;
    
    
    }
    
    
    
  .floating-whatsapp-cta{
    bottom:18px !important;
    width:calc(100vw - 28px) !important;
    max-width:420px !important;
    height:64px !important;
    padding:0 9px 0 22px !important;
  }

  .floating-whatsapp-cta__text{
    font-size:1rem !important;
  }

  .floating-whatsapp-cta__icon{
    width:48px !important;
    height:48px !important;
    flex-basis:48px !important;
    font-size:1.75rem !important;
  }
}






/* =========================================================
   ABOUT / SOBRE MI - EDITORIAL FIX
   Chips + copy premium
   Pegar hasta abajo del CSS
========================================================= */

.about_area{
  position:relative !important;
  padding:clamp(88px, 8vw, 140px) 0 clamp(84px, 8vw, 132px) !important;
  background:#f5f5f7 !important;
  color:#07162d !important;
  overflow:hidden !important;
    background:
    radial-gradient(circle at 18% 20%, rgba(109,92,255,.07), transparent 34%),
    radial-gradient(circle at 82% 34%, rgba(34,211,238,.06), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.48)) !important;
}

.about_area::before{
  content:"" !important;
  position:absolute !important;
  inset:auto 0 0 0 !important;
  height:55% !important;
  pointer-events:none !important;
  
}

.about_area .container{
  position:relative !important;
  z-index:2 !important;
  max-width:1440px !important;
  margin:0 auto !important;
  padding-left:var(--gutter) !important;
  padding-right:var(--gutter) !important;
}

.about_area .section_title{
  text-align:center !important;
  max-width:1280px !important;
  margin:0 auto !important;
}

.about_area .section_title > span{
  display:block !important;
  margin-bottom:18px !important;

  color:#6d5cff !important;

  font-size:.82rem !important;
  font-weight:800 !important;
  letter-spacing:.42em !important;
  text-transform:uppercase !important;
}

.about_area .section_title h2{
  margin:0 auto !important;
  max-width:1180px !important;

  color:#07162d !important;

  font-size:clamp(4.2rem, 7.6vw, 8.8rem) !important;
  line-height:.86 !important;
  letter-spacing:-.09em !important;
  font-weight:800 !important;

  text-wrap:balance !important;
}

/* Chips */
.about-pills{
  width:min(100%, 980px) !important;
  margin:34px auto 0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:12px !important;
}

.about-pills span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-height:42px !important;
  padding:0 18px !important;

  border-radius:999px !important;

  color:#07162d !important;
  background:rgba(255,255,255,.58) !important;

  border:1px solid rgba(7,22,45,.07) !important;

  box-shadow:
    0 16px 38px rgba(7,22,45,.045),
    inset 0 1px 0 rgba(255,255,255,.78) !important;

  backdrop-filter:blur(18px) saturate(170%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(170%) !important;

  font-size:.92rem !important;
  font-weight:750 !important;
  letter-spacing:-.02em !important;

  transition:
    transform .24s cubic-bezier(.16,1,.3,1),
    background .24s ease,
    box-shadow .24s ease !important;
}

.about-pills span:hover{
  transform:translateY(-2px) !important;
  background:rgba(255,255,255,.78) !important;
  box-shadow:
    0 20px 48px rgba(7,22,45,.07),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

/* Texto */
.QuienSoy{
  position:relative !important;
  z-index:2 !important;

  width:min(100% - 48px, 1080px) !important;
  margin:26px auto 0 !important;

  color:rgba(7,22,45,.72) !important;

  font-size:clamp(1.08rem, 1.32vw, 1.28rem) !important;
  line-height:1.72 !important;
  letter-spacing:-.022em !important;
  font-weight:500 !important;

  text-align:center !important;
  text-wrap:pretty !important;
}

.QuienSoy::first-line{
  color:#07162d !important;
}

/* Tablet */
@media(max-width:991px){

  .about_area{
    padding:clamp(76px, 10vw, 112px) 0 clamp(78px, 10vw, 112px) !important;
  }

  .about_area .section_title h2{
    max-width:820px !important;
    font-size:clamp(3.4rem, 10vw, 6.2rem) !important;
    line-height:.9 !important;
    letter-spacing:-.075em !important;
  }

  .about-pills{
    margin-top:28px !important;
    gap:10px !important;
  }

  .QuienSoy{
    width:min(100% - 40px, 760px) !important;
    margin-top:42px !important;
    font-size:1.08rem !important;
    line-height:1.72 !important;
  }
}

/* Mobile */
@media(max-width:520px){

  .about_area{
    padding:72px 0 84px !important;
  }

  .about_area .container{
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .about_area .section_title > span{
    margin-bottom:14px !important;
    font-size:.72rem !important;
    letter-spacing:.34em !important;
  }

  .about_area .section_title h2{
    font-size:clamp(3rem, 15vw, 4.7rem) !important;
    line-height:.92 !important;
    letter-spacing:-.075em !important;
  }

  .about-pills{
    justify-content:flex-start !important;
    margin-top:26px !important;
    gap:9px !important;
  }

  .about-pills span{
    min-height:38px !important;
    padding:0 14px !important;
    font-size:.82rem !important;
  }

  .QuienSoy{
    width:calc(100% - 48px) !important;
    margin-top:34px !important;

    text-align:left !important;
    font-size:1rem !important;
    line-height:1.68 !important;
  }
}




/* =========================================================
   CREATIVE SLIDER FINAL PATCH
   Desktop: cards desde la izquierda
   Mobile: carrusel tipo Apple, card grande + siguiente visible
   Pegar hasta abajo del CSS
========================================================= */

.creative-slider-section{
  position:relative !important;
  background:#1f2024 !important;
  color:#fff !important;
  overflow:hidden !important;
}

.creative-slider-container{
  width:min(100% - 48px, 1440px) !important;
  max-width:1440px !important;
  margin:0 auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.creative-slider-header{
  width:100% !important;
  max-width:1180px !important;
  margin:0 0 clamp(42px, 5vw, 76px) 0 !important;
  padding:0 !important;
  text-align:left !important;
}

.creative-slider-eyebrow{
  display:block !important;
  margin-bottom:16px !important;

  color:#6d5cff !important;

  font-size:.82rem !important;
  font-weight:800 !important;
  letter-spacing:.38em !important;
  text-transform:uppercase !important;
}

.creative-slider-title{
  margin:0 !important;
  max-width:1860px !important;

  color:#fff !important;

  font-size:clamp(3.3rem, 4vw, 7.4rem) !important;
  line-height:.88 !important;
  letter-spacing:-.085em !important;
  font-weight:800 !important;

  text-align:left !important;
  text-wrap:balance !important;
}

/* Viewport */
.creative-slider{
  position:relative !important;
  width:100% !important;
  overflow:visible !important;
}

.creative-slider-viewport{
  position:relative !important;

 max-width: 1440px !important;
    width: 100% !important;
    margin: auto;
 
  padding-right:48px !important;

  overflow:hidden !important;
}

/* Track: importante, desde izquierda */
.creative-slider-track{
  display:flex !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:32px !important;

  width:max-content !important;
  padding:0 0 42px 0 !important;
  margin:0 !important;

  transform:translate3d(0,0,0) !important;

  transition:transform .72s cubic-bezier(.16,1,.3,1) !important;
  will-change:transform !important;
}

/* Cards */
.creative-card{
  position:relative !important;

  flex:0 0 clamp(360px, 28vw, 460px) !important;
  width:clamp(360px, 28vw, 460px) !important;
  min-height:620px !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;

  overflow:hidden !important;

  border-radius:32px !important;

  background:#070707 !important;

  opacity:.36 !important;
  transform:scale(.96) !important;

  box-shadow:
    0 24px 80px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  transition:
    opacity .46s ease,
    transform .46s cubic-bezier(.16,1,.3,1),
    box-shadow .46s ease !important;
}

.creative-card.is-active{
  opacity:1 !important;
  transform:scale(1) !important;
  box-shadow:
    0 34px 110px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.creative-card-media{
  position:relative !important;

  width:100% !important;
  height:300px !important;

  overflow:hidden !important;

  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.08), transparent 42%),
    #111 !important;
}

.creative-card-media img{
  width:100% !important;
  height:100% !important;

  display:block !important;

  object-fit:cover !important;
  object-position:center !important;
}

.creative-card-copy{
  padding:42px 42px 48px !important;
  margin:0 !important;
}

.creative-card-copy h3{
  margin:0 0 18px 0 !important;

  color:#fff !important;

  font-size:clamp(1.65rem, 2vw, 2.25rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.06em !important;
  font-weight:800 !important;
}

.creative-card-copy p{
  margin:0 !important;

  color:rgba(255,255,255,.70) !important;

  font-size:clamp(1rem, 1.18vw, 1.22rem) !important;
  line-height:1.48 !important;
  letter-spacing:-.025em !important;
}

/* Controls */
.creative-slider-controls{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;

  margin-top:8px !important;
  padding-left:0 !important;
}

.creative-slider-btn{
  width:52px !important;
  height:52px !important;

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

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

  color:#fff !important;
  background:rgba(255,255,255,.10) !important;

  font-size:2.35rem !important;
  line-height:1 !important;

  cursor:pointer !important;

  transition:
    background .24s ease,
    transform .24s cubic-bezier(.16,1,.3,1),
    opacity .24s ease !important;
}

.creative-slider-btn:hover{
  background:rgba(255,255,255,.18) !important;
  transform:translateY(-1px) !important;
}

.creative-slider-btn.is-disabled{
  opacity:.28 !important;
  pointer-events:none !important;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1199px){

  .creative-slider-container{
    width:min(100% - 40px, 960px) !important;
  }

  .creative-slider-viewport{
    width:100vw !important;
    margin-left:calc((100vw - min(100vw - 40px, 960px)) / -2) !important;
    padding-left:calc((100vw - min(100vw - 40px, 960px)) / 2) !important;
    padding-right:40px !important;
  }

  .creative-slider-track{
    gap:26px !important;
  }

  .creative-card{
    flex-basis:clamp(320px, 42vw, 420px) !important;
    width:clamp(320px, 42vw, 420px) !important;
    min-height:560px !important;
  }

  .creative-card-media{
    height:270px !important;
  }

  .creative-card-copy{
    padding:36px 36px 42px !important;
  }
}

/* =========================================================
   MOBILE
   Estilo Apple: card grande, siguiente card se asoma
========================================================= */

@media(max-width:767px){

  .creative-slider-section{
    padding-top:72px !important;
    padding-bottom:72px !important;
  }

  .creative-slider-container{
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
    margin:0 !important;
  }

  .creative-slider-header{
    width:100% !important;
    margin:0 0 34px 0 !important;
    padding:0 28px !important;
  }

  .creative-slider-eyebrow{
    margin-bottom:14px !important;
    font-size:.72rem !important;
    letter-spacing:.32em !important;
  }

  .creative-slider-title{
    max-width:100% !important;

    font-size:clamp(2.9rem, 13vw, 4.6rem) !important;
    line-height:.92 !important;
    letter-spacing:-.075em !important;
  }

  .creative-slider-viewport{
    width:100vw !important;
    margin-left:0 !important;
    padding-left:28px !important;
    padding-right:28px !important;
    overflow:hidden !important;
  }

  .creative-slider-track{
    gap:20px !important;
    padding-bottom:34px !important;
  }

  .creative-card{
    flex:0 0 calc(100vw - 86px) !important;
    width:calc(100vw - 86px) !important;
    min-height:560px !important;

    border-radius:28px !important;
  }

  .creative-card-media{
    height:260px !important;
  }

  .creative-card-copy{
    padding:34px 30px 38px !important;
  }

  .creative-card-copy h3{
    font-size:clamp(1.65rem, 8vw, 2.15rem) !important;
  }

  .creative-card-copy p{
    font-size:1rem !important;
    line-height:1.5 !important;
  }

  .creative-slider-controls{
    justify-content:center !important;
    margin-top:0 !important;
    padding-left:0 !important;
  }

  .creative-slider-btn{
    width:50px !important;
    height:50px !important;
  }
}

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

@media(max-width:430px){

  .creative-slider-header{
    padding-left:22px !important;
    padding-right:22px !important;
  }

  .creative-slider-viewport{
    padding-left:22px !important;
    padding-right:22px !important;
  }

  .creative-card{
    flex-basis:calc(100vw - 68px) !important;
    width:calc(100vw - 68px) !important;
    min-height:530px !important;
    border-radius:26px !important;
  }

  .creative-card-media{
    height:230px !important;
  }

  .creative-card-copy{
    padding:30px 26px 34px !important;
  }
}


/* =========================================================
   CREATIVE SLIDER CONTROLS - CENTER FIX
========================================================= */

.creative-slider-controls{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;

  margin:8px auto 0 !important;
  padding:0 !important;
}

.creative-slider-btn{
  margin:0 !important;
}
/* =========================================================
   CREATIVE SLIDER - UNLOCK MOVEMENT
   El track debe poder recibir transform desde JS
========================================================= */

.creative-slider-track{
  transform:none !important;
  transition:transform .52s cubic-bezier(.16,1,.3,1) !important;
  will-change:transform !important;
}

.creative-slider-track.is-moving{
  transition:transform .52s cubic-bezier(.16,1,.3,1) !important;
}








/* =========================================================
   MOBILE MENU FINAL PATCH
   Tache visible + z-index + panel limpio + WhatsApp CTA
   Pegar hasta abajo del CSS
========================================================= */

@media (max-width:1000px){

  /* Header mobile siempre arriba */
  .izm-mobile-header{
    display:block !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:999999 !important;
    pointer-events:none !important;
  }

  .izm-mobile-nav{
    position:relative !important;
    z-index:1000002 !important;

    width:100% !important;
    height:64px !important;
    min-height:64px !important;

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

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

    pointer-events:auto !important;

    background:rgba(245,245,247,.88) !important;
    border:0 !important;
    border-radius:0 !important;

    box-shadow:
      0 1px 0 rgba(0,0,0,.05),
      0 12px 32px rgba(7,22,45,.04) !important;

    backdrop-filter:blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter:blur(24px) saturate(180%) !important;

    overflow:visible !important;
  }

  .izm-mobile-brand{
    position:relative !important;
    z-index:1000003 !important;

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

    color:#1d1d1f !important;
    text-decoration:none !important;
    pointer-events:auto !important;
  }

  .izm-mobile-logo{
    width:28px !important;
    height:28px !important;
    display:block !important;
    object-fit:contain !important;
    filter:brightness(0) !important;
    flex:0 0 28px !important;
  }

  .izm-mobile-name{
    color:#1d1d1f !important;
    font-size:12px !important;
    font-weight:800 !important;
    letter-spacing:.18em !important;
    line-height:1 !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
  }

  /* Botón hamburguesa */
  .izm-menu-toggle{
    position:relative !important;
    z-index:1000005 !important;

    width:48px !important;
    height:48px !important;
    flex:0 0 48px !important;

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

    padding:0 !important;
    margin:0 !important;

    border:0 !important;
    border-radius:999px !important;
    background:transparent !important;

    cursor:pointer !important;
    pointer-events:auto !important;

    overflow:visible !important;
  }

  /* Líneas de hamburguesa */
  .izm-menu-toggle span{
    position:absolute !important;
    left:50% !important;

    width:28px !important;
    height:2.5px !important;

    display:block !important;

    border-radius:999px !important;
    background:#1d1d1f !important;

    opacity:1 !important;
    visibility:visible !important;

    transform:translateX(-50%) !important;

    transition:
      top .28s cubic-bezier(.16,1,.3,1),
      transform .28s cubic-bezier(.16,1,.3,1),
      opacity .18s ease,
      background .18s ease !important;
  }

  .izm-menu-toggle span:nth-child(1){
    top:15px !important;
  }

  .izm-menu-toggle span:nth-child(2){
    top:23px !important;
  }

  .izm-menu-toggle span:nth-child(3){
    top:31px !important;
  }

  /* Panel abierto */
  .izm-mobile-panel{
    position:fixed !important;
    inset:0 !important;

    width:100vw !important;
    height:100dvh !important;

    padding:112px 46px 40px !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    background:#f5f5f7 !important;

    z-index:999998 !important;

    transition:
      opacity .28s cubic-bezier(.16,1,.3,1),
      visibility .28s cubic-bezier(.16,1,.3,1) !important;
  }

  .izm-mobile-header.is-open .izm-mobile-panel{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  /* Menú links */
  .izm-mobile-menu{
    position:relative !important;
    z-index:2 !important;

    width:100% !important;
    max-width:620px !important;

    margin:0 !important;
    padding:0 !important;

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

    gap:22px !important;
  }

  .izm-mobile-link,
  .izm-mobile-link:link,
  .izm-mobile-link:visited,
  .izm-mobile-link:hover,
  .izm-mobile-link:active{
    display:inline-flex !important;
    align-items:center !important;

    width:auto !important;

    padding:0 !important;
    margin:0 !important;

    color:#2b2c31 !important;
    text-decoration:none !important;

    font-size:clamp(3.25rem, 8.5vw, 4.6rem) !important;
    font-weight:800 !important;
    line-height:1.05 !important;
    letter-spacing:-.065em !important;

    opacity:0 !important;
    transform:translateY(14px) !important;

    transition:
      opacity .36s cubic-bezier(.16,1,.3,1),
      transform .36s cubic-bezier(.16,1,.3,1),
      color .24s ease !important;
  }

  .izm-mobile-header.is-open .izm-mobile-link{
    opacity:1 !important;
    transform:translateY(0) !important;
  }

  .izm-mobile-header.is-open .izm-mobile-link:nth-child(1){ transition-delay:.04s !important; }
  .izm-mobile-header.is-open .izm-mobile-link:nth-child(2){ transition-delay:.08s !important; }
  .izm-mobile-header.is-open .izm-mobile-link:nth-child(3){ transition-delay:.12s !important; }
  .izm-mobile-header.is-open .izm-mobile-link:nth-child(4){ transition-delay:.16s !important; }
  .izm-mobile-header.is-open .izm-mobile-link:nth-child(5){ transition-delay:.20s !important; }

  /* Estado abierto: tache negro arriba de todo */
  .izm-mobile-header.is-open .izm-menu-toggle{
    background:transparent !important;
    z-index:1000006 !important;
  }

  .izm-mobile-header.is-open .izm-menu-toggle span{
    background:#1d1d1f !important;
    background-color:#1d1d1f !important;
    z-index:1000007 !important;
  }

  .izm-mobile-header.is-open .izm-menu-toggle span:nth-child(1){
    top:23px !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:translateX(-50%) rotate(45deg) !important;
  }

  .izm-mobile-header.is-open .izm-menu-toggle span:nth-child(2){
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateX(-50%) scaleX(.2) !important;
  }

  .izm-mobile-header.is-open .izm-menu-toggle span:nth-child(3){
    top:23px !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:translateX(-50%) rotate(-45deg) !important;
  }

  /* WhatsApp CTA dentro del menú */
  .izm-mobile-link--cta,
  .izm-mobile-link--cta:link,
  .izm-mobile-link--cta:visited,
  .izm-mobile-link--cta:hover,
  .izm-mobile-link--cta:active{
    position:relative !important;

    margin-top:42px !important;

    width:min(100%, 520px) !important;
    min-height:76px !important;

    padding:0 92px 0 28px !important;

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

    border-radius:999px !important;

    color:#07162d !important;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,.94),
        rgba(255,255,255,.58)
      ) !important;

    border:1px solid rgba(255,255,255,.9) !important;

    box-shadow:
      0 26px 72px rgba(7,22,45,.14),
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -1px 0 rgba(255,255,255,.28) !important;

    backdrop-filter:blur(26px) saturate(190%) !important;
    -webkit-backdrop-filter:blur(26px) saturate(190%) !important;

    font-size:clamp(1.18rem, 4.6vw, 1.55rem) !important;
    font-weight:800 !important;
    letter-spacing:-.04em !important;
    line-height:1 !important;
  }

  .izm-mobile-link--cta::after{
    content:"🚀" !important;

    position:absolute !important;
    right:12px !important;
    top:50% !important;

    width:56px !important;
    height:56px !important;

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

    border-radius:50% !important;

    background:
      radial-gradient(
        circle at 35% 25%,
        #ffffff 0%,
        #eef7ff 42%,
        #d9ecff 100%
      ) !important;

    box-shadow:
      0 12px 34px rgba(0,122,255,.15),
      inset 0 1px 0 rgba(255,255,255,.95) !important;

    transform:translateY(-50%) !important;

    font-size:1.95rem !important;
    line-height:1 !important;
  }

  body.izm-menu-open{
    overflow:hidden !important;
    touch-action:none !important;
  }
}

/* Mobile más chico */
@media (max-width:430px){

  .izm-mobile-nav{
    height:58px !important;
    min-height:58px !important;
    padding:0 20px !important;
  }

  .izm-mobile-panel{
    padding:96px 36px 36px !important;
  }

  .izm-mobile-menu{
    gap:20px !important;
  }

  .izm-mobile-link,
  .izm-mobile-link:link,
  .izm-mobile-link:visited{
    font-size:clamp(2.95rem, 13vw, 3.8rem) !important;
  }

  .izm-mobile-link--cta,
  .izm-mobile-link--cta:link,
  .izm-mobile-link--cta:visited{
    min-height:70px !important;
    padding-left:24px !important;
    padding-right:82px !important;
    font-size:1.18rem !important;
  }

  .izm-mobile-link--cta::after{
    width:52px !important;
    height:52px !important;
    font-size:1.75rem !important;
  }
}




/* =========================================================
   WORK MODAL IMAGE
   Imagen dinámica dentro del modal
========================================================= */

.work-modal__media{
  width:100% !important;
  margin:0 0 26px !important;
  border-radius:24px !important;
  overflow:auto visible;
  background:#fff !important;

  
}

.work-modal__media img{
    display:block !important;
    height: 100%;
    width: 100% !important;
    object-fit:scale-down !important;
    object-position:center !important;
}

@media(max-width:768px){

  .work-modal__media{
    height:180px !important;
    margin-bottom:22px !important;
    border-radius:12px !important;
  }
}

@media(max-width:480px){

  .work-modal__media{
      
    margin-bottom:12px !important;
    border-radius:12px !important;
  }
}


/* =========================================================
   WORK MODAL BELOW MOBILE NAV FIX
   El modal baja debajo del menú responsive y no se corta
========================================================= */

@media (max-width:1000px){

  .work-modal{
    align-items:flex-start !important;
    padding-top:88px !important;
    padding-left:18px !important;
    padding-right:18px !important;
    padding-bottom:28px !important;
    overflow-y:auto !important;
    z-index:99990 !important;
  }

  .work-modal__overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:1 !important;
  }

  .work-modal__dialog{
    position:relative !important;
    z-index:2 !important;

    width:100% !important;
    max-width:1220px !important;

    margin:0 auto !important;

    max-height:calc(100dvh - 116px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;

    border-radius:34px !important;
  }

  .work-modal__inner{
    padding-top:clamp(34px, 6vw, 64px) !important;
    padding-bottom:clamp(34px, 6vw, 64px) !important;
  }

  

  .work-modal__media{
    margin-top:0 !important;
  }
}




/* =========================================================
   WORK MODAL TITLE SIZE FIX
   Baja tamaño de "Entendimiento", "Explorar", etc.
========================================================= */



.ModalImage{
    display: flex !important;
    margin: auto;
    margin-bottom: -50px !important;
}

.work-modal__title{
  font-size:28px !important;
  line-height:.95 !important;
    color: blueviolet;
  letter-spacing:-.075em !important;
}

/* Tablet */
@media(max-width:1000px){
  .work-modal__title{
    font-size:clamp(3.2rem, 1vw, 5rem) !important;
    line-height:.96 !important;
  }
}

/* Mobile */
@media(max-width:520px){
  .work-modal__title{
    font-size:clamp(2.8rem, 1vw, 4rem) !important;
    line-height:1 !important;
    letter-spacing:-.065em !important;
  }
}



/* =========================================================
   WORK MODAL CLOSE FIX
   El tache queda fijo en la esquina del modal
   y solo scrollea el contenido interno
========================================================= */

.work-modal.is-open{
  position:fixed !important;
  inset:0 !important;
    display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;


  overflow:hidden !important;
  z-index:99990 !important;
}

/* El que scrollea ahora es el contenido, NO el dialog */
.work-modal__inner{
  max-height:calc(100dvh - 130px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;

  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
}

/* Tache fijo dentro de la esquina del modal */
.work-modal__close{
  position:absolute !important;

  top:24px !important;
  right:24px !important;
  left:auto !important;
  bottom:auto !important;

  z-index:50 !important;

  margin:0 !important;
  transform:none !important;

  flex:none !important;
}

/* Para que el contenido no choque contra el tache */
.work-modal__inner{
  padding-top:clamp(56px, 6vw, 84px) !important;
}

/* Mobile */
@media(max-width:1000px){

  .work-modal.is-open{
    padding-top:84px !important;
    padding-left:14px !important;
    padding-right:14px !important;
    padding-bottom:20px !important;
  }

  .work-modal__dialog{
    max-height:calc(100dvh - 104px) !important;
  }

  .work-modal__inner{
    max-height:calc(100dvh - 104px) !important;
  }

  .work-modal__close{
    top:16px !important;
    right:16px !important;
  }
}

/* Mobile chico */
@media(max-width:520px){

  .work-modal.is-open{
    padding-top:76px !important;
    padding-left:10px !important;
    padding-right:10px !important;
    padding-bottom:16px !important;
  }

  .work-modal__dialog{
    max-height:calc(100dvh - 92px) !important;
  }

  .work-modal__inner{
    max-height:calc(100dvh - 92px) !important;
    padding-top:64px !important;
  }

  .work-modal__close{
    top:12px !important;
    right:12px !important;
    width:56px !important;
    height:56px !important;
  }
}

/* Ocultar scrollbar sin bloquear scroll */
.work-modal__inner{
  scrollbar-width:none !important; /* Firefox */
  -ms-overflow-style:none !important; /* IE / Edge viejo */
}

.work-modal__inner::-webkit-scrollbar{
  display:none !important; /* Chrome, Safari, Edge */
  width:0 !important;
  height:0 !important;
}



html,
body{
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}





/* =========================================================
   WORK MODAL IMAGE UP FIX
   Sube la imagen dentro del modal
========================================================= */


.work-modal__media{
  margin-top:-38px !important;
  margin-bottom:34px !important;
   
}

/* Mobile / tablet */
@media(max-width:1000px){

  .work-modal__inner{
    padding-top:28px !important;
  }

  .work-modal__media{
    margin-top:-12px !important;
  }
}

/* Mobile chico */
@media(max-width:520px){

  .work-modal__inner{
    padding-top:26px !important;
  }

  .work-modal__media{
    margin-top:-8px !important;
    margin-bottom:26px !important;
  }
}


/* =========================================================
   WORK MODAL TITLE MOBILE SIZE FIX
   Baja "Entendimiento", "Explorar", "Materializar"
========================================================= */


@media(max-width:520px){

  .work-modal__title{
    font-size:clamp(2.6rem, 20px, 3.6rem) !important;
    line-height:.98 !important;
    letter-spacing:-.06em !important;
    margin-bottom:22px !important;
  }
}

@media(max-width:390px){

  .work-modal__title{
    font-size:1rem !important;
    line-height:1 !important;
  }
}




/* =========================================================
   WORK MODAL IMAGE MOBILE 300x300
========================================================= */

@media(max-width:520px){

  .work-modal__media{
    width:390px !important;
    height:300px !important;

    max-width:100% !important;

    margin-left:auto !important;
    margin-right:auto !important;
    margin-bottom:28px !important;

    border-radius:12px !important;
    overflow:hidden !important;
  }

  .work-modal__media img{
    width:100% !important;
    height:100% !important;

    display:block !important;

    object-fit:cover !important;
    object-position:center !important;
  }
}


/* =========================================================
   HERO MOBILE IMAGE FIX
   Evita que la imagen de fondo se vea cortada raro en mobile
========================================================= */

@media (max-width: 768px){

  .hero-premium{
    position: relative !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    background: #030814 !important;
  }

  .hero-image{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    overflow: hidden !important;
  }

  .hero-image img{
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
    object-position: 68% center !important;

    opacity: .72 !important;
    transform: scale(1.02) !important;
  }

  .hero-overlay{
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;

    background:
      linear-gradient(
        90deg,
        rgba(3, 8, 20, .96) 0%,
        rgba(3, 8, 20, .86) 36%,
        rgba(3, 8, 20, .52) 68%,
        rgba(3, 8, 20, .78) 100%
      ),
      linear-gradient(
        180deg,
        rgba(3, 8, 20, .20) 0%,
        rgba(3, 8, 20, .18) 42%,
        rgba(3, 8, 20, .92) 100%
      ) !important;
  }

  .hero-container{
    position: relative !important;
    z-index: 2 !important;

    min-height: 100svh !important;

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

    padding-top: 96px !important;
    padding-bottom: 72px !important;
  }

  .hero-content{
    position: relative !important;
    z-index: 3 !important;

    width: 100% !important;
    max-width: 100% !important;
  }
}


/* =========================================================
   HERO MOBILE VISIBILITY FIX
   Hace visible la imagen sin perder contraste del texto
========================================================= */

@media (max-width: 768px){

  .hero-image img{
    opacity: 1 !important;
    object-position: 72% center !important;
    filter: brightness(.82) contrast(1.08) saturate(1.05) !important;
    transform: scale(1.04) !important;
  }

  .hero-overlay{
  background:
    linear-gradient(
      90deg,
      rgba(3, 8, 20, .78) 0%,
      rgba(3, 8, 20, .52) 38%,
      rgba(3, 8, 20, .18) 66%,
      rgba(3, 8, 20, .24) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 8, 20, .06) 0%,
      rgba(3, 8, 20, .06) 42%,
      rgba(3, 8, 20, .68) 100%
    ) !important;
}

  .hero-content{
    text-shadow: 0 18px 60px rgba(0,0,0,.55) !important;
  }
}


/* =========================================================
   HERO MOBILE - REMOVE HARD CUT / OVERLAY SEAM
   Corrige línea vertical y recorte visual
========================================================= */

@media (max-width: 768px){

  .hero-premium{
    isolation:isolate !important;
    background:#030814 !important;
    overflow:hidden !important;
  }

  .hero-image{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    z-index:0 !important;
    overflow:hidden !important;
  }

  .hero-image::before,
  .hero-image::after,
  .hero-premium::before,
  .hero-premium::after{
    display:none !important;
    content:none !important;
  }

  .hero-image img{
    width:100% !important;
    height:100% !important;
    display:block !important;

    object-fit:cover !important;
    object-position:68% center !important;

    opacity:1 !important;
    transform:scale(1) !important;
    filter:brightness(.92) contrast(1.08) saturate(1.05) !important;
  }

  .hero-overlay{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;

    background:
      linear-gradient(
        90deg,
        rgba(3,8,20,.86) 0%,
        rgba(3,8,20,.58) 34%,
        rgba(3,8,20,.28) 58%,
        rgba(3,8,20,.36) 100%
      ),
      linear-gradient(
        180deg,
        rgba(3,8,20,.10) 0%,
        rgba(3,8,20,.08) 45%,
        rgba(3,8,20,.78) 100%
      ) !important;
  }

  .hero-container,
  .hero-content{
    position:relative !important;
    z-index:2 !important;
  }
}




/* =========================================================
   CV PAGE / PROFESSIONAL PROFILE
   Página de perfil profesional para portafolio Isaac Zapata
========================================================= */

.cv-page{
  background:#030814 !important;
  color:#f5f5f7 !important;
}

.cv-main{
  position:relative !important;
  width:100% !important;
  overflow:hidden !important;
  background:#030814 !important;
}

.cv-shell{
  width:min(100% - 48px, 1440px) !important;
  margin:0 auto !important;
}

.cv-eyebrow{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;

  margin-bottom:24px !important;

  color:#8b7cff !important;
  font-size:.78rem !important;
  font-weight:850 !important;
  letter-spacing:.42em !important;
  text-transform:uppercase !important;
}

/* HERO */
.cv-hero{
  position:relative !important;
  min-height:100svh !important;
  padding:clamp(1020px, 5vw, 20px) 0 clamp(84px, 8vw, 132px) !important;
   margin-top: -100px !important; 
width: 1440px;
    margin: auto;
  display:flex !important;
  align-items:left !important;

  overflow:hidden !important;

  background:
    radial-gradient(circle at 72% 24%, rgba(109,92,255,.22), transparent 32%),
    radial-gradient(circle at 18% 78%, rgba(34,211,238,.10), transparent 34%),
    linear-gradient(135deg, #030814 0%, #050716 48%, #090a14 100%) !important;
}

.cv-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;

  background:
    linear-gradient(90deg, rgba(3,8,20,.95) 0%, rgba(3,8,20,.78) 48%, rgba(3,8,20,.92) 100%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 42%) !important;
}

.cv-hero__noise{
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  opacity:.22 !important;
  mix-blend-mode:soft-light !important;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) !important;
  background-size:72px 72px !important;
}

.cv-hero__grid{
  position:relative !important;
  z-index:2 !important;

  display:grid !important;
  grid-template-columns:minmax(0, 1.12fr) minmax(360px, .58fr) !important;
  gap:clamp(48px, 7vw, 112px) !important;
  align-items:center !important;
}

.cv-hero__content h1{
  max-width:980px !important;
  margin:0 !important;

  color:#ffffff !important;
  font-size:clamp(4.5rem, 4vw, 10.4rem) !important;
  line-height:.86 !important;
  letter-spacing:-.095em !important;
  font-weight:850 !important;
  text-wrap:balance !important;
}

.cv-hero__content p{
  max-width:780px !important;
  margin:38px 0 0 !important;

  color:rgba(245,245,247,.72) !important;
  font-size:clamp(1.08rem, 1.45vw, 1.38rem) !important;
  line-height:1.7 !important;
  letter-spacing:-.025em !important;
}

.cv-hero__actions{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:14px !important;

  margin-top:44px !important;
}

.cv-btn{
  min-height:60px !important;
  padding:0 24px !important;

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

  border-radius:999px !important;
  text-decoration:none !important;

  font-size:1rem !important;
  font-weight:800 !important;
  letter-spacing:-.025em !important;

  transition:
    transform .28s cubic-bezier(.16,1,.3,1),
    box-shadow .28s ease,
    background .28s ease !important;
}

.cv-btn span{
  width:42px !important;
  height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
}

.cv-btn--primary{
  color:#ffffff !important;
  background:
    linear-gradient(135deg, rgba(109,92,255,.95), rgba(134,90,255,.72)) !important;
  box-shadow:
    0 24px 64px rgba(109,92,255,.24),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.cv-btn--primary span{
  background:rgba(255,255,255,.18) !important;
}

.cv-btn--ghost{
  color:#f5f5f7 !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  backdrop-filter:blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(160%) !important;
}

.cv-btn:hover{
  transform:translateY(-3px) !important;
}

.cv-hero__card{
  position:relative !important;
  padding:34px !important;
  border-radius:36px !important;

  background:
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055)) !important;

  border:1px solid rgba(255,255,255,.14) !important;

  box-shadow:
    0 36px 110px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.18) !important;

  backdrop-filter:blur(28px) saturate(170%) !important;
  -webkit-backdrop-filter:blur(28px) saturate(170%) !important;
}

.cv-hero__card > span{
  color:#8b7cff !important;
  font-size:.72rem !important;
  font-weight:850 !important;
  letter-spacing:.34em !important;
  text-transform:uppercase !important;
}

.cv-hero__card h2{
  margin:18px 0 0 !important;
  color:#ffffff !important;
  font-size:clamp(2.2rem, 3.2vw, 4rem) !important;
  line-height:.96 !important;
  letter-spacing:-.065em !important;
  font-weight:850 !important;
}

.cv-hero__card p{
  margin:22px 0 0 !important;
  color:rgba(245,245,247,.72) !important;
  font-size:1rem !important;
  line-height:1.68 !important;
  letter-spacing:-.02em !important;
}

.cv-stats{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
  margin-top:32px !important;
}

.cv-stats div{
  padding:18px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.09) !important;
}

.cv-stats strong{
  display:block !important;
  color:#ffffff !important;
  font-size:2rem !important;
  line-height:1 !important;
  letter-spacing:-.05em !important;
}

.cv-stats span{
  display:block !important;
  margin-top:8px !important;
  color:rgba(245,245,247,.62) !important;
  font-size:.9rem !important;
  line-height:1.4 !important;
}

/* SECTIONS */
.cv-section{
  position:relative !important;
  padding:clamp(88px, 9vw, 150px) 0 !important;
}

.cv-section--light{
  background:#f5f5f7 !important;
  color:#07162d !important;
}

.cv-section--dark{
  background:#030814 !important;
  color:#f5f5f7 !important;
}

.cv-section__header{
  max-width:1480px !important;
  margin-bottom:56px !important;
}

.cv-section__header h2,
.cv-education-grid h2,
.cv-final-cta h2{
  margin:0 !important;
  color:#07162d !important;
  font-size:clamp(3.4rem, 4vw, 7.8rem) !important;
  line-height:.88 !important;
  letter-spacing:-.085em !important;
  font-weight:850 !important;
  text-wrap:balance !important;
}

.cv-section__header--dark h2{
  color:#ffffff !important;
}

/* SKILLS */
.cv-skills-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:18px !important;
}

.cv-skill-card{
  min-height:300px !important;
  padding:32px !important;
  border-radius:34px !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;

  background:rgba(255,255,255,.58) !important;
  border:1px solid rgba(7,22,45,.08) !important;
  box-shadow:
    0 26px 70px rgba(7,22,45,.055),
    inset 0 1px 0 rgba(255,255,255,.86) !important;

  backdrop-filter:blur(20px) saturate(170%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(170%) !important;
}

.cv-skill-card span{
  color:#8b7cff !important;
  font-size:.85rem !important;
  font-weight:850 !important;
}

.cv-skill-card h3{
  margin:auto 0 16px !important;
  color:#07162d !important;
  font-size:clamp(1.9rem, 2.2vw, 2.75rem) !important;
  line-height:1 !important;
  letter-spacing:-.06em !important;
}

.cv-skill-card p{
  margin:0 !important;
  color:rgba(7,22,45,.66) !important;
  font-size:1rem !important;
  line-height:1.62 !important;
  letter-spacing:-.02em !important;
}

/* TIMELINE */
.cv-timeline{
  display:flex !important;
  flex-direction:column !important;
  gap:22px !important;
}

.cv-role{
  display:grid !important;
  grid-template-columns:340px minmax(0, 1fr) !important;
  gap:42px !important;

  padding:34px !important;
  border-radius:36px !important;

  background:
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045)) !important;

  border:1px solid rgba(255,255,255,.11) !important;

  box-shadow:
    0 34px 90px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.cv-role__meta span{
  display:block !important;
  margin-bottom:18px !important;

  color:#8b7cff !important;
  font-size:.76rem !important;
  font-weight:850 !important;
  letter-spacing:.26em !important;
  text-transform:uppercase !important;
}

.cv-role__meta h3{
  margin:0 !important;
  color:#ffffff !important;
  font-size:clamp(2rem, 2.6vw, 3.2rem) !important;
  line-height:.96 !important;
  letter-spacing:-.065em !important;
}

.cv-role__meta p{
  margin:12px 0 0 !important;
  color:rgba(245,245,247,.58) !important;
  font-size:1rem !important;
  line-height:1.5 !important;
}

.cv-role__content ul{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;

  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
}

.cv-role__content li{
  position:relative !important;
  padding-left:28px !important;

  color:rgba(245,245,247,.74) !important;
  font-size:1.02rem !important;
  line-height:1.7 !important;
  letter-spacing:-.02em !important;
}

.cv-role__content li::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:.72em !important;

  width:8px !important;
  height:8px !important;
  border-radius:50% !important;

  background:#8b7cff !important;
  box-shadow:0 0 24px rgba(139,124,255,.8) !important;
}

/* IMPACT */
.cv-impact-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:18px !important;
}

.cv-impact-grid article{
  min-height:300px !important;
  padding:30px !important;
  border-radius:34px !important;

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

  background:
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.42)) !important;
  border:1px solid rgba(7,22,45,.08) !important;

  box-shadow:
    0 24px 64px rgba(7,22,45,.055),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.cv-impact-grid strong{
  display:block !important;
  color:#8b7cff !important;
  font-size:clamp(3.2rem, 4vw, 6.4rem) !important;
  line-height:.85 !important;
  letter-spacing:-.08em !important;
}

.cv-impact-grid span{
  display:block !important;
  margin-top:22px !important;
  color:#07162d !important;
  font-size:1.05rem !important;
  font-weight:850 !important;
  line-height:1.2 !important;
  letter-spacing:-.035em !important;
}

.cv-impact-grid p{
  margin:14px 0 0 !important;
  color:rgba(7,22,45,.62) !important;
  font-size:.96rem !important;
  line-height:1.55 !important;
}

/* KEYWORDS */
.cv-keywords-section{
  background:
    radial-gradient(circle at 78% 20%, rgba(109,92,255,.20), transparent 30%),
    #030814 !important;
}

.cv-keywords{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
}

.cv-keywords span{
  min-height:44px !important;
  padding:0 18px !important;

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

  border-radius:999px !important;

  color:rgba(245,245,247,.82) !important;
  background:rgba(255,255,255,.075) !important;
  border:1px solid rgba(255,255,255,.11) !important;

  font-size:.92rem !important;
  font-weight:750 !important;
  letter-spacing:-.015em !important;
}

/* EDUCATION */
.cv-education-grid{
  display:grid !important;
  grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr) !important;
  gap:42px !important;
  align-items:start !important;
}

.cv-education-card{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:18px !important;
}

.cv-education-card article{
  padding:32px !important;
  border-radius:34px !important;
  background:rgba(255,255,255,.62) !important;
  border:1px solid rgba(7,22,45,.08) !important;
  box-shadow:
    0 24px 64px rgba(7,22,45,.05),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.cv-education-card span{
  display:block !important;
  margin-bottom:16px !important;
  color:#8b7cff !important;
  font-size:.78rem !important;
  font-weight:850 !important;
  letter-spacing:.26em !important;
  text-transform:uppercase !important;
}

.cv-education-card h3{
  margin:0 !important;
  color:#07162d !important;
  font-size:clamp(1.7rem, 2.2vw, 2.8rem) !important;
  line-height:1 !important;
  letter-spacing:-.055em !important;
}

.cv-education-card p{
  margin:16px 0 0 !important;
  color:rgba(7,22,45,.62) !important;
  font-size:1rem !important;
  line-height:1.62 !important;
}

/* FINAL CTA */
.cv-final-cta{
  position:relative !important;
  padding:clamp(100px, 11vw, 180px) 0 !important;
  text-align:center !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(109,92,255,.30), transparent 34%),
    linear-gradient(135deg, #030814, #080a18) !important;
}

.cv-final-cta h2{
  max-width:1120px !important;
  margin:0 auto !important;
  color:#ffffff !important;
}

.cv-final-cta p{
  max-width:740px !important;
  margin:32px auto 0 !important;
  color:rgba(245,245,247,.70) !important;
  font-size:clamp(1.08rem, 1.4vw, 1.3rem) !important;
  line-height:1.7 !important;
  letter-spacing:-.025em !important;
}

.cv-final-cta .cv-btn{
  margin-top:42px !important;
}

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

  .cv-hero__grid,
  .cv-education-grid{
    grid-template-columns:1fr !important;
  }

  .cv-hero__card{
    max-width:680px !important;
  }

  .cv-skills-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .cv-impact-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .cv-role{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
}

@media(max-width:768px){

  .cv-shell{
    width:calc(100% - 40px) !important;
  }

  .cv-hero{
    min-height:auto !important;
    padding:118px 0 78px !important;
  }

  .cv-hero__content h1{
    font-size:clamp(3.55rem, 13vw, 5.8rem) !important;
    line-height:.9 !important;
    letter-spacing:-.075em !important;
  }

  .cv-hero__content p{
    margin-top:28px !important;
    font-size:1.04rem !important;
    line-height:1.66 !important;
  }

  .cv-hero__actions{
    margin-top:34px !important;
  }

  .cv-btn{
    width:100% !important;
    min-height:62px !important;
  }

  .cv-hero__card{
    padding:28px !important;
    border-radius:30px !important;
  }

  .cv-section{
    padding:76px 0 !important;
  }

  .cv-section__header{
    margin-bottom:36px !important;
  }

  .cv-section__header h2,
  .cv-education-grid h2,
  .cv-final-cta h2{
    font-size:clamp(3rem, 12vw, 4.8rem) !important;
    line-height:.92 !important;
    letter-spacing:-.075em !important;
  }

  .cv-skills-grid,
  .cv-impact-grid{
    grid-template-columns:1fr !important;
  }

  .cv-skill-card,
  .cv-impact-grid article{
    min-height:240px !important;
    padding:28px !important;
    border-radius:30px !important;
  }

  .cv-role{
    padding:28px !important;
    border-radius:30px !important;
  }

  .cv-role__content li{
    font-size:.98rem !important;
    line-height:1.66 !important;
  }

  .cv-keywords span{
    min-height:40px !important;
    padding:0 14px !important;
    font-size:.82rem !important;
  }
}

@media(max-width:430px){

  .cv-shell{
    width:calc(100% - 32px) !important;
  }

  .cv-eyebrow{
    font-size:.68rem !important;
    letter-spacing:.28em !important;
    line-height:1.6 !important;
  }

  .cv-hero__content h1{
    font-size:4rem !important;
  }

  .cv-hero__card,
  .cv-role,
  .cv-skill-card,
  .cv-impact-grid article,
  .cv-education-card article{
    border-radius:26px !important;
  }
}


/* =========================================================
   CV DESKTOP HEADER FIX
   Header visible en la página CV
========================================================= */

.cv-site-header{
  position:fixed !important;
  top:18px !important;
  left:50% !important;
  z-index:99999 !important;

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

  transform:translateX(-50%) !important;

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

  border-radius:999px !important;
  background:rgba(8, 12, 25, .62) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.16) !important;

  backdrop-filter:blur(26px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(26px) saturate(180%) !important;
}

.cv-site-header .site-header__inner{
  width:100% !important;
  height:100% !important;

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

  padding:0 18px 0 24px !important;
}

.cv-site-header .site-logo{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;

  color:#ffffff !important;
  text-decoration:none !important;
}

.cv-site-header .site-logo img{
  width:28px !important;
  height:28px !important;
  object-fit:contain !important;
  display:block !important;
  filter:brightness(0) invert(1) !important;
}

.cv-site-header .site-logo span{
  color:#ffffff !important;
  font-size:.82rem !important;
  font-weight:850 !important;
  letter-spacing:.24em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

.cv-site-header .site-nav{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
}

.cv-site-header .site-nav a{
  min-height:42px !important;
  padding:0 16px !important;

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

  border-radius:999px !important;

  color:rgba(255,255,255,.66) !important;
  text-decoration:none !important;

  font-size:.9rem !important;
  font-weight:750 !important;
  letter-spacing:-.015em !important;

  transition:
    color .22s ease,
    background .22s ease,
    transform .22s cubic-bezier(.16,1,.3,1) !important;
}

.cv-site-header .site-nav a:hover,
.cv-site-header .site-nav a.is-active{
  color:#ffffff !important;
  background:rgba(255,255,255,.10) !important;
}

.cv-site-header .site-header__cta{
  min-height:46px !important;
  padding:0 20px !important;

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

  border-radius:999px !important;

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

  background:linear-gradient(135deg, rgba(109,92,255,.95), rgba(134,90,255,.70)) !important;
  box-shadow:0 16px 42px rgba(109,92,255,.22) !important;

  font-size:.92rem !important;
  font-weight:850 !important;
  letter-spacing:-.02em !important;
}

/* Da aire al hero para que no se meta debajo del header */
.cv-page .cv-hero{
  padding-top:clamp(160px, 16vw, 230px) !important;
}

/* En mobile se oculta este header y queda tu menú mobile */
@media(max-width:1000px){

  .cv-site-header{
    display:none !important;
  }

  .cv-page .cv-hero{
    padding-top:118px !important;
  }
}
/* =========================================================
   CV HERO RESPONSIVE FINAL FIX
   Corrige hero CV en mobile: título, texto, card y stats
========================================================= */

@media (max-width: 1000px){

  .cv-page .cv-hero{
    min-height:auto !important;
    padding:112px 0 72px !important;
    overflow:hidden !important;
  }

  .cv-page .cv-hero__grid{
    width:calc(100% - 40px) !important;
    max-width:720px !important;

    display:grid !important;
    grid-template-columns:1fr !important;
    gap:36px !important;

    align-items:start !important;
    margin:0 auto !important;
  }

  .cv-page .cv-hero__content,
  .cv-page .cv-hero__card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    transform:none !important;
  }

  .cv-page .cv-eyebrow{
    max-width:100% !important;
    margin-bottom:18px !important;

    display:block !important;

    font-size:.68rem !important;
    line-height:1.7 !important;
    letter-spacing:.28em !important;

    white-space:normal !important;
    overflow-wrap:break-word !important;
  }

  .cv-page .cv-hero__content h1{
    max-width:100% !important;
    margin:0 !important;

    font-size:clamp(3.1rem, 13vw, 5rem) !important;
    line-height:.9 !important;
    letter-spacing:-.075em !important;

    white-space:normal !important;
    overflow-wrap:normal !important;
    text-wrap:balance !important;
  }

  .cv-page .cv-hero__content p{
    max-width:100% !important;
    margin-top:26px !important;

    font-size:1.05rem !important;
    line-height:1.62 !important;
    letter-spacing:-.025em !important;

    color:rgba(245,245,247,.72) !important;

    white-space:normal !important;
    overflow-wrap:break-word !important;
  }

  .cv-page .cv-hero__card{
    padding:28px !important;
    border-radius:32px !important;

    overflow:hidden !important;
  }

  .cv-page .cv-hero__card h2{
    max-width:100% !important;

    font-size:clamp(2.65rem, 10.5vw, 4.2rem) !important;
    line-height:.95 !important;
    letter-spacing:-.07em !important;

    white-space:normal !important;
    overflow-wrap:break-word !important;
  }

  .cv-page .cv-hero__card p{
    max-width:100% !important;

    font-size:1rem !important;
    line-height:1.6 !important;

    white-space:normal !important;
    overflow-wrap:break-word !important;
  }

  .cv-page .cv-stats{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;

    width:100% !important;
    margin-top:28px !important;
  }

  .cv-page .cv-stats div{
    width:100% !important;
    min-width:0 !important;

    padding:22px !important;
    border-radius:24px !important;
  }

  .cv-page .cv-stats strong{
    font-size:clamp(2rem, 9vw, 3rem) !important;
    line-height:1 !important;

    white-space:normal !important;
  }

  .cv-page .cv-stats span{
    max-width:100% !important;

    font-size:.98rem !important;
    line-height:1.45 !important;

    white-space:normal !important;
    overflow-wrap:break-word !important;
  }
}

/* Mobile chico */
@media (max-width: 520px){

  .cv-page .cv-hero{
    padding:96px 0 64px !important;
  }

  .cv-page .cv-hero__grid{
    width:calc(100% - 32px) !important;
    gap:30px !important;
  }

  .cv-page .cv-eyebrow{
    font-size:.62rem !important;
    letter-spacing:.24em !important;
    line-height:1.65 !important;
  }

  .cv-page .cv-hero__content h1{
    font-size:clamp(2.85rem, 15vw, 4.15rem) !important;
    line-height:.91 !important;
    letter-spacing:-.07em !important;
  }

  .cv-page .cv-hero__content p{
    margin-top:22px !important;
    font-size:1rem !important;
    line-height:1.58 !important;
  }

  .cv-page .cv-hero__card{
    padding:24px !important;
    border-radius:28px !important;
  }

  .cv-page .cv-hero__card > span{
    font-size:.66rem !important;
    letter-spacing:.28em !important;
  }

  .cv-page .cv-hero__card h2{
    margin-top:16px !important;

    font-size:clamp(2.35rem, 12vw, 3.5rem) !important;
    line-height:.95 !important;
    letter-spacing:-.065em !important;
  }

  .cv-page .cv-hero__card p{
    margin-top:18px !important;

    font-size:.98rem !important;
    line-height:1.58 !important;
  }

  .cv-page .cv-stats{
    margin-top:24px !important;
    gap:12px !important;
  }

  .cv-page .cv-stats div{
    padding:20px !important;
    border-radius:22px !important;
  }

  .cv-page .cv-stats strong{
    font-size:2.25rem !important;
  }

  .cv-page .cv-stats span{
    font-size:.92rem !important;
  }
}

/* Mobile ultra chico */
@media (max-width: 390px){

  .cv-page .cv-hero__content h1{
    font-size:2.75rem !important;
  }

  .cv-page .cv-hero__card h2{
    font-size:2.35rem !important;
  }

  .cv-page .cv-hero__content p,
  .cv-page .cv-hero__card p{
    font-size:.95rem !important;
  }
}


/* =========================================================
   CV MOBILE HERO HARD FIX
   Corrige contenido desplazado hacia la derecha
========================================================= */

@media (max-width:1000px){

  html,
  body,
  .cv-page,
  .cv-main{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .cv-page .cv-hero{
    width:100% !important;
    max-width:100% !important;

    min-height:auto !important;
    padding:210px 0 72px !important;

    display:block !important;
    overflow:hidden !important;
  }

  /* Esta es la clave: tu grid también tiene clase cv-shell */
  .cv-page .cv-shell.cv-hero__grid,
  .cv-page .cv-hero__grid{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 24px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:32px !important;

    transform:none !important;
    overflow:hidden !important;
  }

  .cv-page .cv-hero__content,
  .cv-page .cv-hero__card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;

    transform:none !important;
    overflow:hidden !important;
  }

  .cv-page .cv-hero__content{
    order:1 !important;
  }

  .cv-page .cv-hero__card{
    order:2 !important;

    padding:26px !important;
    border-radius:30px !important;
  }

  .cv-page .cv-eyebrow{
    width:100% !important;
    max-width:100% !important;

    display:block !important;

    font-size:.64rem !important;
    line-height:1.6 !important;
    letter-spacing:.24em !important;

    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
  }

  .cv-page .cv-hero__content h1{
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    font-size:clamp(2.85rem, 13vw, 4.4rem) !important;
    line-height:.92 !important;
    letter-spacing:-.075em !important;

    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    text-wrap:balance !important;
  }

  .cv-page .cv-hero__content p{
    width:100% !important;
    max-width:100% !important;

    margin:22px 0 0 !important;

    font-size:1rem !important;
    line-height:1.58 !important;

    white-space:normal !important;
    overflow-wrap:break-word !important;
  }

  .cv-page .cv-hero__card > span{
    display:block !important;
    font-size:.64rem !important;
    letter-spacing:.26em !important;
  }

  .cv-page .cv-hero__card h2{
    width:100% !important;
    max-width:100% !important;

    font-size:clamp(2.35rem, 11vw, 3.45rem) !important;
    line-height:.95 !important;
    letter-spacing:-.065em !important;

    white-space:normal !important;
    overflow-wrap:break-word !important;
  }

  .cv-page .cv-hero__card p{
    width:100% !important;
    max-width:100% !important;

    font-size:.98rem !important;
    line-height:1.58 !important;

    white-space:normal !important;
    overflow-wrap:break-word !important;
  }

  .cv-page .cv-stats{
    width:100% !important;
    max-width:100% !important;

    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;

    margin-top:24px !important;
  }

  .cv-page .cv-stats div{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    padding:20px !important;
    border-radius:22px !important;
  }

  .cv-page .cv-stats strong{
    font-size:2.3rem !important;
    line-height:1 !important;
  }

  .cv-page .cv-stats span{
    font-size:.92rem !important;
    line-height:1.45 !important;

    white-space:normal !important;
    overflow-wrap:break-word !important;
  }
}





/* =========================================================
   MOBILE MENU CTA BOTTOM FIX
   Manda WhatsApp hasta abajo del menú responsivo
========================================================= */

@media (max-width:1000px){

  .izm-mobile-panel{
    display:flex !important;
    flex-direction:column !important;

    height:100dvh !important;
    min-height:100dvh !important;

    padding:112px 32px 28px !important;
    overflow:hidden !important;
  }

  .izm-mobile-menu{
    width:100% !important;
    max-width:100% !important;
    min-height:calc(100dvh - 140px) !important;

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

    gap:22px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .izm-mobile-link:not(.izm-mobile-link--cta){
    width:auto !important;
    flex:0 0 auto !important;
  }

  .izm-mobile-link--cta,
  .izm-mobile-link--cta:link,
  .izm-mobile-link--cta:visited{
    margin-top:auto !important;
    margin-bottom:0 !important;

    width:100% !important;
    min-height:82px !important;

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

    padding:0 12px 0 28px !important;

    border-radius:999px !important;

    font-size:clamp(1.35rem, 5vw, 2.4rem) !important;
    line-height:1 !important;
    letter-spacing:-.055em !important;
    font-weight:850 !important;

    color:#07162d !important;
    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,.96),
        rgba(255,255,255,.68)
      ) !important;

    border:1px solid rgba(255,255,255,.9) !important;

    box-shadow:
      0 28px 80px rgba(7,22,45,.16),
      inset 0 1px 0 rgba(255,255,255,.96),
      inset 0 -1px 0 rgba(255,255,255,.32) !important;

    backdrop-filter:blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter:blur(28px) saturate(190%) !important;
  }

  .izm-mobile-link--cta::after{
    content:"🚀" !important;

    position:static !important;
    transform:none !important;

    width:58px !important;
    height:58px !important;
    min-width:58px !important;

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

    border-radius:50% !important;

    background:
      radial-gradient(
        circle at 35% 25%,
        #ffffff 0%,
        #eef7ff 42%,
        #d9ecff 100%
      ) !important;

    box-shadow:
      0 12px 34px rgba(0,122,255,.15),
      inset 0 1px 0 rgba(255,255,255,.95) !important;

    font-size:2rem !important;
    line-height:1 !important;
  }
}

/* Mobile chico */
@media (max-width:430px){

  .izm-mobile-panel{
    padding:96px 24px 22px !important;
  }

  .izm-mobile-menu{
    min-height:calc(100dvh - 118px) !important;
    gap:20px !important;
  }

  .izm-mobile-link--cta,
  .izm-mobile-link--cta:link,
  .izm-mobile-link--cta:visited{
    min-height:74px !important;
    padding-left:22px !important;
    padding-right:9px !important;

    font-size:clamp(1.22rem, 6vw, 1.72rem) !important;
  }

  .izm-mobile-link--cta::after{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    font-size:1.72rem !important;
  }
}


/* =========================================================
   MOBILE HEADER CLEAN DARK GLASS
   Sin outline, sin círculo, logo/texto blanco
========================================================= */

@media (max-width:1000px){

  .izm-mobile-header{
    position:fixed !important;
    top:18px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:999999 !important;
    padding:0 18px !important;
    pointer-events:none !important;
    background:transparent !important;
  }

  .izm-mobile-nav{
    position:relative !important;
    z-index:1000002 !important;

    width:100% !important;
    max-width:calc(100vw - 36px) !important;
    height:70px !important;
    min-height:70px !important;

    margin:0 auto !important;
    padding:0 26px !important;

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

    border-radius:999px !important;

    background:
      linear-gradient(
        135deg,
        rgba(7, 12, 28, .78) 0%,
        rgba(8, 12, 32, .54) 48%,
        rgba(10, 14, 34, .72) 100%
      ) !important;

    border:1px solid rgba(255,255,255,.08) !important;
    outline:none !important;

    box-shadow:
      0 24px 80px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.10) !important;

    backdrop-filter:blur(28px) saturate(170%) !important;
    -webkit-backdrop-filter:blur(28px) saturate(170%) !important;

    pointer-events:auto !important;
    overflow:hidden !important;
  }

  .izm-mobile-nav::before,
  .izm-mobile-nav::after{
    display:none !important;
    content:none !important;
  }

  .izm-mobile-brand{
    position:relative !important;
    z-index:2 !important;

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

    color:#ffffff !important;
    text-decoration:none !important;
  }

  .izm-mobile-logo{
    width:27px !important;
    height:27px !important;
    display:block !important;
    object-fit:contain !important;

    filter:brightness(0) invert(1) !important;
  }

  .izm-mobile-name{
    color:#ffffff !important;
    font-size:.82rem !important;
    font-weight:850 !important;
    letter-spacing:.24em !important;
    line-height:1 !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
  }

  .izm-menu-toggle{
    position:relative !important;
    z-index:3 !important;

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

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

    padding:0 !important;
    margin:0 !important;

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

    background:transparent !important;
    box-shadow:none !important;

    cursor:pointer !important;
    overflow:visible !important;
  }

  .izm-menu-toggle::before,
  .izm-menu-toggle::after{
    display:none !important;
    content:none !important;
  }

  .izm-menu-toggle span{
    position:absolute !important;
    left:50% !important;

    width:30px !important;
    height:3px !important;

    display:block !important;

    border-radius:999px !important;
    background:#ffffff !important;

    opacity:1 !important;
    visibility:visible !important;

    transform:translateX(-50%) !important;

    transition:
      top .28s cubic-bezier(.16,1,.3,1),
      transform .28s cubic-bezier(.16,1,.3,1),
      opacity .18s ease !important;
  }

  .izm-menu-toggle span:nth-child(1){
    top:16px !important;
  }

  .izm-menu-toggle span:nth-child(2){
    top:25px !important;
  }

  .izm-menu-toggle span:nth-child(3){
    top:34px !important;
  }

  .izm-mobile-header.is-open .izm-mobile-nav{
    background:
      linear-gradient(
        135deg,
        rgba(7, 12, 28, .88) 0%,
        rgba(8, 12, 32, .70) 48%,
        rgba(10, 14, 34, .86) 100%
      ) !important;

    border-color:rgba(255,255,255,.10) !important;
    outline:none !important;

    box-shadow:
      0 24px 90px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.12) !important;
  }

  .izm-mobile-header.is-open .izm-menu-toggle{
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
    outline:none !important;
  }

  .izm-mobile-header.is-open .izm-menu-toggle span{
    background:#ffffff !important;
  }

  .izm-mobile-header.is-open .izm-menu-toggle span:nth-child(1){
    top:25px !important;
    transform:translateX(-50%) rotate(45deg) !important;
  }

  .izm-mobile-header.is-open .izm-menu-toggle span:nth-child(2){
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateX(-50%) scaleX(.2) !important;
  }

  .izm-mobile-header.is-open .izm-menu-toggle span:nth-child(3){
    top:25px !important;
    transform:translateX(-50%) rotate(-45deg) !important;
  }
}

/* Mobile chico */
@media (max-width:430px){

  .izm-mobile-header{
    top:14px !important;
    padding:0 14px !important;
  }

  .izm-mobile-nav{
    max-width:calc(100vw - 28px) !important;
    height:64px !important;
    min-height:64px !important;
    padding:0 22px !important;
  }

  .izm-mobile-logo{
    width:24px !important;
    height:24px !important;
  }

  .izm-mobile-name{
    font-size:.72rem !important;
    letter-spacing:.22em !important;
  }

  .izm-menu-toggle{
    width:46px !important;
    height:46px !important;
  }

  .izm-menu-toggle span{
    width:28px !important;
    height:2.6px !important;
  }

  .izm-menu-toggle span:nth-child(1){
    top:14px !important;
  }

  .izm-menu-toggle span:nth-child(2){
    top:22px !important;
  }

  .izm-menu-toggle span:nth-child(3){
    top:30px !important;
  }

  .izm-mobile-header.is-open .izm-menu-toggle span:nth-child(1),
  .izm-mobile-header.is-open .izm-menu-toggle span:nth-child(3){
    top:22px !important;
  }
}


/* =========================================================
   CV MOBILE HEADLINES MAX 4REM
   Limita titulares grandes en mobile
========================================================= */

@media (max-width: 768px){

  .cv-page .cv-section__header h2,
  .cv-page .cv-education-grid h2,
  .cv-page .cv-final-cta h2{
    font-size: clamp(2.8rem, 11vw, 4rem) !important;
    line-height: .92 !important;
    letter-spacing: -.07em !important;
  }
}


@media (max-width: 768px){

  .cv-page .cv-hero__content h1{
    font-size: clamp(2.8rem, 11vw, 4rem) !important;
    line-height: .92 !important;
    letter-spacing: -.07em !important;
  }
}





/* =========================================================
   IMPACT COMPACT DARK GLASS
   Bloque compacto debajo del carrusel, max 1440px
========================================================= */

.impact-compact-section{
  position:relative !important;
  width:100% !important;

  padding:clamp(72px, 4vw, 112px) 0 !important;

  background:
    radial-gradient(circle at 18% 18%, rgba(139,124,255,.14), transparent 32%),
    radial-gradient(circle at 88% 40%, rgba(34,211,238,.08), transparent 34%),
    linear-gradient(180deg, #030814 0%, #050816 100%) !important;

  color:#ffffff !important;
  overflow:hidden !important;
}

.impact-compact-section::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025) 0%,
      rgba(255,255,255,0) 34%,
      rgba(255,255,255,.018) 100%
    ) !important;
}

.impact-compact-shell{
  position:relative !important;
  z-index:2 !important;

  width:min(100% - 48px, 1440px) !important;
  margin:0 auto !important;
}

.impact-compact-header{
  width:100% !important;
  max-width:980px !important;
  margin:0 0 clamp(34px, 4vw, 56px) !important;
}

.impact-compact-eyebrow{
  display:block !important;
  margin-bottom:18px !important;

  color:#8b7cff !important;
  font-size:.78rem !important;
  font-weight:850 !important;
  letter-spacing:.42em !important;
  text-transform:uppercase !important;
}

.impact-compact-header h2{
  max-width:980px !important;
  margin:0 !important;

  color:#ffffff !important;
  font-size:clamp(3.2rem, 5vw, 6rem) !important;
  line-height:.9 !important;
  letter-spacing:-.08em !important;
  font-weight:850 !important;

  text-wrap:balance !important;
}

.impact-compact-grid{
  width:100% !important;

  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:16px !important;
}

.impact-compact-card{
  position:relative !important;

  min-height:220px !important;
  padding:26px !important;

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

  border-radius:30px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.105) 0%,
      rgba(255,255,255,.045) 52%,
      rgba(255,255,255,.075) 100%
    ) !important;

  border:1px solid rgba(255,255,255,.105) !important;

  box-shadow:
    0 26px 80px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.045) !important;

  backdrop-filter:blur(26px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(26px) saturate(180%) !important;

  overflow:hidden !important;
}

.impact-compact-card::before{
  content:"" !important;
  position:absolute !important;
  inset:1px !important;
  border-radius:inherit !important;
  pointer-events:none !important;

  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(255,255,255,.18),
      transparent 38%
    ),
    radial-gradient(
      circle at 92% 110%,
      rgba(139,124,255,.20),
      transparent 42%
    ) !important;

  opacity:.8 !important;
}

.impact-compact-card::after{
  content:"" !important;
  position:absolute !important;
  left:26px !important;
  top:26px !important;

  width:36px !important;
  height:3px !important;
  border-radius:999px !important;

  background:rgba(139,124,255,.85) !important;
  box-shadow:0 0 24px rgba(139,124,255,.45) !important;
}

.impact-compact-card strong,
.impact-compact-card span,
.impact-compact-card p{
  position:relative !important;
  z-index:2 !important;
}

.impact-compact-card strong{
  display:block !important;

  color:#8b7cff !important;
  font-size:clamp(3rem, 4vw, 5rem) !important;
  line-height:.85 !important;
  letter-spacing:-.075em !important;
  font-weight:850 !important;

  margin-bottom:22px !important;
}

.impact-compact-card span{
  display:block !important;

  color:#ffffff !important;
  font-size:1.02rem !important;
  line-height:1.2 !important;
  letter-spacing:-.035em !important;
  font-weight:850 !important;

  margin-bottom:12px !important;
}

.impact-compact-card p{
  margin:0 !important;

  color:rgba(245,245,247,.62) !important;
  font-size:.95rem !important;
  line-height:1.55 !important;
  letter-spacing:-.018em !important;
}

/* Hover sutil */
@media (hover:hover){

  .impact-compact-card{
    transition:
      transform .32s cubic-bezier(.16,1,.3,1),
      border-color .32s ease,
      box-shadow .32s ease,
      background .32s ease !important;
  }

  .impact-compact-card:hover{
    transform:translateY(-6px) !important;
    border-color:rgba(255,255,255,.16) !important;

    box-shadow:
      0 34px 100px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 0 rgba(255,255,255,.055) !important;
  }
}

/* Tablet */
@media (max-width:1100px){

  .impact-compact-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .impact-compact-card{
    min-height:210px !important;
  }
}

/* Mobile */
@media (max-width:768px){

  .impact-compact-section{
    padding:72px 0 !important;
  }

  .impact-compact-shell{
    width:calc(100% - 36px) !important;
  }

  .impact-compact-header{
    margin-bottom:34px !important;
  }

  .impact-compact-eyebrow{
    font-size:.68rem !important;
    letter-spacing:.32em !important;
    margin-bottom:14px !important;
  }

  .impact-compact-header h2{
    font-size:clamp(2.8rem, 11vw, 4rem) !important;
    line-height:.92 !important;
    letter-spacing:-.07em !important;
  }

  .impact-compact-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .impact-compact-card{
    min-height:190px !important;
    padding:24px !important;
    border-radius:26px !important;
  }

  .impact-compact-card::after{
    left:24px !important;
    top:22px !important;
  }

  .impact-compact-card strong{
    font-size:3.6rem !important;
    margin-bottom:18px !important;
  }

  .impact-compact-card span{
    font-size:1rem !important;
  }

  .impact-compact-card p{
    font-size:.94rem !important;
  }
}

/* Mobile chico */
@media (max-width:430px){

  .impact-compact-shell{
    width:calc(100% - 28px) !important;
  }

  .impact-compact-header h2{
    font-size:3.25rem !important;
  }

  .impact-compact-card{
    min-height:176px !important;
    padding:22px !important;
  }

  .impact-compact-card strong{
    font-size:3.25rem !important;
  }
}


/* =========================================================
   MOBILE TITLES FIX
   Corrige títulos grandes en Otros proyectos y Exploración creativa
========================================================= */

@media (max-width: 768px){

  .project-showcase-header,
  .creative-slider-section .project-showcase-header{
    width:100% !important;
    max-width:100% !important;

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

    overflow:hidden !important;
  }

  .project-showcase-eyebrow,
  .creative-slider-section .project-showcase-eyebrow{
    display:block !important;

    margin-bottom:16px !important;

    font-size:.68rem !important;
    line-height:1.45 !important;
    letter-spacing:.32em !important;

    white-space:normal !important;
    overflow-wrap:break-word !important;
  }

  .project-showcase-title,
  .project-showcase-title.black,
  .creative-slider-section .project-showcase-title,
  .creative-slider-section .project-showcase-title.black{
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    font-size:clamp(2.8rem, 11vw, 4rem) !important;
    line-height:.92 !important;
    letter-spacing:-.07em !important;

    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    text-wrap:balance !important;

    color:#ffffff !important;
  }

  .project-showcase-container,
  .creative-slider-container{
    width:100% !important;
    max-width:100% !important;

    padding-left:22px !important;
    padding-right:22px !important;

    overflow:hidden !important;
  }
}


.wraper14{
    display: block;
    margin-top: 40px !important;
    position: relative;
    margin: auto;
    width: 1300px !important;
    
}





/* =========================================================
   IMPACT COMPACT MOBILE FIX
   Corrige cards de impacto en mobile
========================================================= */

@media (max-width: 768px){
    .wraper14{
        
        width:100% !important;
    max-width:100% !important;

    padding:64px 20px !important;

    overflow:hidden !important;
        
    }
  .impact-compact-section{
    width:100% !important;
    max-width:100% !important;

    padding:64px 0 !important;

    overflow:hidden !important;
    background:#030814 !important;
  }

  .impact-compact-shell{
    width:100% !important;
    max-width:100% !important;

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

    overflow:hidden !important;
  }

  .impact-compact-header{
    width:100% !important;
    max-width:100% !important;

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

    overflow:hidden !important;
  }

  .impact-compact-eyebrow{
    display:block !important;

    margin-bottom:14px !important;

    font-size:.68rem !important;
    line-height:1.4 !important;
    letter-spacing:.32em !important;

    color:#8b7cff !important;

    white-space:normal !important;
    overflow-wrap:break-word !important;
  }

  .impact-compact-header h2{
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    font-size:clamp(2.65rem, 11vw, 3.8rem) !important;
    line-height:.94 !important;
    letter-spacing:-.065em !important;

    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    text-wrap:balance !important;
  }

  .impact-compact-grid{
    width:100% !important;
    max-width:100% !important;

    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }

  .impact-compact-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    min-height:auto !important;

    padding:24px 24px 26px !important;

    border-radius:26px !important;

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

    overflow:hidden !important;
  }

  .impact-compact-card::after{
    left:24px !important;
    top:22px !important;

    width:36px !important;
    height:3px !important;
  }

  .impact-compact-card strong{
    width:100% !important;
    max-width:100% !important;

    margin:34px 0 18px !important;

    font-size:clamp(3rem, 18vw, 4.8rem) !important;
    line-height:.85 !important;
    letter-spacing:-.075em !important;

    white-space:normal !important;
  }

  .impact-compact-card span{
    width:100% !important;
    max-width:100% !important;

    margin:0 0 10px !important;

    font-size:1.05rem !important;
    line-height:1.22 !important;
    letter-spacing:-.035em !important;

    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }

  .impact-compact-card p{
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    color:rgba(245,245,247,.68) !important;

    font-size:.96rem !important;
    line-height:1.5 !important;
    letter-spacing:-.018em !important;

    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }
}



/* =========================================================
   IMPACT CARD TEXT OVERFLOW SAFETY
========================================================= */

@media (max-width: 768px){

  .impact-compact-card,
  .impact-compact-card *{
    box-sizing:border-box !important;
    max-width:100% !important;
  }

  .impact-compact-card p,
  .impact-compact-card span{
    overflow:hidden !important;
    text-overflow:clip !important;
  }
}


.MiPerfil{
    display: block;
    position: flex;
    width: 240px;
    margin: left;
    padding: 20px;
}















/* =========================================================
   CASE STUDY: HUB DE PAGOS
   Dark premium · liquid glass · responsive
========================================================= */

.case-page{
  margin:0 !important;
  background:#030814 !important;
  color:#f5f5f7 !important;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.case-page *{
  box-sizing:border-box !important;
}

.case-main{
  width:100% !important;
  overflow:hidden !important;
  background:#030814 !important;
}

.case-shell{
  width:min(100% - 48px, 1440px) !important;
  margin:0 auto !important;
}

.case-eyebrow{
  display:block !important;
  margin-bottom:18px !important;

  color:#8b7cff !important;
  font-size:.78rem !important;
  font-weight:850 !important;
  letter-spacing:.38em !important;
  line-height:1.4 !important;
  text-transform:uppercase !important;
}

.case-section-header{
  max-width:980px !important;
  margin-bottom:clamp(36px, 4vw, 64px) !important;
}

.case-section-header h2,
.case-statement h2,
.case-problem h2,
.case-validation h2,
.case-outcome-card h2,
.case-contribution h2,
.case-final h2{
  margin:0 !important;
  color:#ffffff !important;
  font-size:clamp(3.5rem, 4vw, 7.4rem) !important;
  line-height:.88 !important;
  letter-spacing:-.085em !important;
  font-weight:850 !important;
  text-wrap:balance !important;
}

.case-section-header p{
  max-width:720px !important;
  margin:24px 0 0 !important;
  color:rgba(245,245,247,.66) !important;
  font-size:1.08rem !important;
  line-height:1.62 !important;
}

/* DESKTOP HEADER */
.case-desktop-header{
  position:fixed !important;
  top:18px !important;
  left:50% !important;
  z-index:99990 !important;

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

  transform:translateX(-50%) !important;

  border-radius:999px !important;
  background:rgba(6,10,24,.58) !important;
  border:1px solid rgba(255,255,255,.10) !important;

  box-shadow:
    0 24px 80px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10) !important;

  backdrop-filter:blur(28px) saturate(170%) !important;
  -webkit-backdrop-filter:blur(28px) saturate(170%) !important;
}

.case-desktop-header__inner{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:0 24px !important;
}

.case-desktop-header__brand{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  text-decoration:none !important;
}

.case-desktop-header__brand img{
  width:28px !important;
  height:28px !important;
  filter:brightness(0) invert(1) !important;
}

.case-desktop-header__brand span{
  color:#ffffff !important;
  font-size:.82rem !important;
  font-weight:850 !important;
  letter-spacing:.24em !important;
}

.case-desktop-header__nav{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.case-desktop-header__nav a{
  min-height:42px !important;
  padding:0 16px !important;
  display:inline-flex !important;
  align-items:center !important;
  border-radius:999px !important;
  color:rgba(255,255,255,.68) !important;
  text-decoration:none !important;
  font-size:.92rem !important;
  font-weight:750 !important;
}

.case-desktop-header__nav a:hover{
  color:#ffffff !important;
  background:rgba(255,255,255,.08) !important;
}

/* HERO */
.case-hero{
  position:relative !important;
  min-height:100svh !important;
  padding:clamp(150px, 16vw, 230px) 0 clamp(80px, 8vw, 130px) !important;
  display:flex !important;
  align-items:center !important;

  background:
    radial-gradient(circle at 78% 18%, rgba(139,124,255,.20), transparent 34%),
    radial-gradient(circle at 18% 82%, rgba(34,211,238,.10), transparent 34%),
    linear-gradient(135deg, #030814 0%, #050816 52%, #080a18 100%) !important;
}

.case-hero__grid{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(360px, .72fr) !important;
  gap:clamp(48px, 7vw, 112px) !important;
  align-items:center !important;
}

.case-hero__content h1{
  max-width:980px !important;
  margin:0 !important;
  color:#ffffff !important;
  font-size:clamp(4.5rem, 6vw, 6rem) !important;
  line-height:.86 !important;
  letter-spacing:-.075em !important;
  font-weight:850 !important;
}

.case-hero__content p{
  max-width:760px !important;
  margin:34px 0 0 !important;
  color:rgba(245,245,247,.72) !important;
  font-size:clamp(1.08rem, 1.45vw, 1.34rem) !important;
  line-height:1.68 !important;
  letter-spacing:-.025em !important;
}

.case-hero__meta{
  margin-top:34px !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}

.case-hero__meta span{
  min-height:40px !important;
  padding:0 14px !important;
  display:inline-flex !important;
  align-items:center !important;
  border-radius:999px !important;
  color:rgba(255,255,255,.78) !important;
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  font-size:.84rem !important;
  font-weight:750 !important;
}

.case-hero__mockup{
  margin:0 !important;
  min-height:620px !important;
  border-radius:42px !important;
  overflow:hidden !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 40px 110px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.case-hero__mockup img,
.case-wide-image img,
.case-gallery-grid img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
}

/* NOTE */
.case-note-section{
  padding:28px 0 !important;
  background:#030814 !important;
}

.case-note{
  padding:22px 26px !important;
  border-radius:24px !important;
  display:flex !important;
  gap:18px !important;
  align-items:flex-start !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.09) !important;
}

.case-note strong{
  color:#ffffff !important;
  white-space:nowrap !important;
}

.case-note p{
  margin:0 !important;
  color:rgba(245,245,247,.62) !important;
  line-height:1.55 !important;
}

/* STATEMENT */
.case-statement{
  padding:clamp(90px, 10vw, 160px) 0 !important;
  background:#030814 !important;
}

.case-statement p{
  max-width:760px !important;
  margin:30px 0 0 !important;
  color:rgba(245,245,247,.68) !important;
  font-size:clamp(1.16rem, 1.6vw, 1.45rem) !important;
  line-height:1.62 !important;
}

/* IMPACT */
.case-impact,
.case-objectives,
.case-roadmap,
.case-process,
.case-problem,
.case-principles,
.case-architecture,
.case-gallery-section,
.case-validation,
.case-outcome,
.case-contribution,
.case-final{
  padding:clamp(88px, 9vw, 150px) 0 !important;
}

.case-impact{
  background:
    radial-gradient(circle at 18% 20%, rgba(139,124,255,.14), transparent 32%),
    linear-gradient(180deg, #030814 0%, #060817 100%) !important;
}

.case-impact-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:16px !important;
}

.case-impact-card,
.case-objective-card,
.case-roadmap-card,
.case-process-card,
.case-principles-grid article,
.case-architecture-card,
.case-validation-card,
.case-outcome-card,
.case-contribution-grid article{
  position:relative !important;
  border-radius:32px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.105),
      rgba(255,255,255,.045)
    ) !important;

  border:1px solid rgba(255,255,255,.105) !important;

  box-shadow:
    0 28px 88px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.14) !important;

  backdrop-filter:blur(26px) saturate(175%) !important;
  -webkit-backdrop-filter:blur(26px) saturate(175%) !important;
}

.case-impact-card{
  min-height:250px !important;
  padding:28px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
}

.case-impact-card strong{
  display:block !important;
  margin-bottom:22px !important;
  color:#8b7cff !important;
  font-size:clamp(2.8rem, 4.2vw, 5rem) !important;
  line-height:.86 !important;
  letter-spacing:-.075em !important;
}

.case-impact-card span{
  display:block !important;
  color:#ffffff !important;
  font-size:1.04rem !important;
  font-weight:850 !important;
  margin-bottom:10px !important;
}

.case-impact-card p{
  margin:0 !important;
  color:rgba(245,245,247,.62) !important;
  font-size:.95rem !important;
  line-height:1.52 !important;
}

/* TWO COLUMNS */
.case-two-columns{
  display:grid !important;
  grid-template-columns:minmax(0, .86fr) minmax(0, 1.14fr) !important;
  gap:clamp(32px, 6vw, 90px) !important;
  align-items:start !important;
}

.case-objectives{
  background:#050816 !important;
}

.case-objective-card{
  padding:34px !important;
}

.case-objective-card h3,
.case-validation-card h3,
.case-principles-grid h3,
.case-architecture-card h3,
.case-contribution-grid h3,
.case-roadmap-card h3,
.case-process-card h3{
  margin:0 0 18px !important;
  color:#ffffff !important;
  font-size:clamp(1.7rem, 2.4vw, 3rem) !important;
  line-height:1 !important;
  letter-spacing:-.06em !important;
}

.case-objective-card ul,
.case-text-block ul,
.case-validation-card ul{
  margin:24px 0 0 !important;
  padding:0 !important;
  list-style:none !important;
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
}

.case-objective-card li,
.case-text-block li,
.case-validation-card li{
  position:relative !important;
  padding-left:24px !important;
  color:rgba(245,245,247,.70) !important;
  line-height:1.55 !important;
}

.case-objective-card li::before,
.case-text-block li::before,
.case-validation-card li::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:.65em !important;
  width:7px !important;
  height:7px !important;
  border-radius:50% !important;
  background:#8b7cff !important;
}

/* ROADMAP */
.case-roadmap{
  background:#030814 !important;
}

.case-roadmap-grid,
.case-process-grid,
.case-principles-grid,
.case-architecture-grid,
.case-contribution-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:16px !important;
}

.case-roadmap-card,
.case-process-card,
.case-architecture-card,
.case-principles-grid article,
.case-contribution-grid article{
  padding:30px !important;
}

.case-roadmap-card span,
.case-process-card span,
.case-architecture-card span{
  display:block !important;
  margin-bottom:42px !important;
  color:#8b7cff !important;
  font-size:.82rem !important;
  font-weight:850 !important;
}

.case-roadmap-card p,
.case-process-card p,
.case-principles-grid p,
.case-architecture-card p,
.case-contribution-grid p,
.case-text-block p,
.case-validation-card p{
  margin:0 !important;
  color:rgba(245,245,247,.64) !important;
  line-height:1.58 !important;
  font-size:1rem !important;
}

/* IMAGES */
.case-wide-image{
  width:100% !important;
  height:clamp(420px, 52vw, 760px) !important;
  margin:40px 0 0 !important;
  border-radius:38px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 34px 100px rgba(0,0,0,.30) !important;
}

/* PROCESS */
.case-process{
  background:
    radial-gradient(circle at 82% 20%, rgba(139,124,255,.14), transparent 32%),
    #050816 !important;
}

.case-process-grid{
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
}

.case-process-card{
  min-height:260px !important;
}

/* PROBLEM */
.case-problem{
  background:#030814 !important;
}

/* PRINCIPLES */
.case-principles{
  background:#050816 !important;
}

.case-principles-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
}

/* ARCHITECTURE */
.case-architecture{
  background:#030814 !important;
}

.case-architecture-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
}

/* GALLERY */
.case-gallery-section{
  background:#050816 !important;
}

.case-gallery-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:18px !important;
}

.case-gallery-grid figure{
  margin:0 !important;
  padding:14px !important;
  border-radius:34px !important;
  background:rgba(255,255,255,.065) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}

.case-gallery-grid img{
  height:520px !important;
  border-radius:24px !important;
  background:#111827 !important;
}

.case-gallery-grid figcaption{
  padding:18px 6px 4px !important;
  color:rgba(245,245,247,.66) !important;
  font-size:.95rem !important;
  line-height:1.45 !important;
}

/* VALIDATION */
.case-validation{
  background:#030814 !important;
}

.case-validation-card{
  padding:34px !important;
}

/* OUTCOME */
.case-outcome{
  background:#050816 !important;
}

.case-outcome-card{
  padding:clamp(34px, 5vw, 70px) !important;
}

.case-outcome-card p{
  max-width:760px !important;
  margin:28px 0 0 !important;
  color:rgba(245,245,247,.68) !important;
  font-size:clamp(1.08rem, 1.45vw, 1.28rem) !important;
  line-height:1.64 !important;
}

/* CONTRIBUTION */
.case-contribution{
  background:#030814 !important;
}

.case-contribution-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
}

/* FINAL */
.case-final{
  text-align:center !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(139,124,255,.20), transparent 34%),
    #050816 !important;
}

.case-final h2{
  max-width:1180px !important;
  margin:0 auto !important;
}

.case-back-link{
  margin-top:42px !important;
  min-height:58px !important;
  padding:0 24px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  color:#ffffff !important;
  text-decoration:none !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important;
}

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

  .case-impact-grid,
  .case-principles-grid,
  .case-architecture-grid,
  .case-contribution-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .case-process-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .case-hero__grid,
  .case-two-columns{
    grid-template-columns:1fr !important;
  }

  .case-hero__mockup{
    min-height:520px !important;
  }
}

@media(max-width:1000px){

  .case-desktop-header{
    display:none !important;
  }

  .case-hero{
    padding-top:118px !important;
  }
}

@media(max-width:768px){

  .case-shell{
    width:calc(100% - 36px) !important;
  }

  .case-hero{
    min-height:auto !important;
    padding:112px 0 72px !important;
  }

  .case-hero__grid{
    gap:34px !important;
  }

  .case-hero__content h1,
  .case-section-header h2,
  .case-statement h2,
  .case-problem h2,
  .case-validation h2,
  .case-outcome-card h2,
  .case-contribution h2,
  .case-final h2{
    font-size:clamp(2.8rem, 11vw, 4rem) !important;
    line-height:.92 !important;
    letter-spacing:-.07em !important;
  }

  .case-hero__content p,
  .case-statement p{
    font-size:1.02rem !important;
    line-height:1.58 !important;
  }

  .case-hero__mockup{
    min-height:360px !important;
    border-radius:30px !important;
  }

  .case-note{
    flex-direction:column !important;
    gap:8px !important;
  }

  .case-impact,
  .case-objectives,
  .case-roadmap,
  .case-process,
  .case-problem,
  .case-principles,
  .case-architecture,
  .case-gallery-section,
  .case-validation,
  .case-outcome,
  .case-contribution,
  .case-final,
  .case-statement{
    padding:72px 0 !important;
  }

  .case-impact-grid,
  .case-roadmap-grid,
  .case-process-grid,
  .case-principles-grid,
  .case-architecture-grid,
  .case-gallery-grid,
  .case-contribution-grid{
    grid-template-columns:1fr !important;
  }

  .case-impact-card,
  .case-objective-card,
  .case-roadmap-card,
  .case-process-card,
  .case-principles-grid article,
  .case-architecture-card,
  .case-validation-card,
  .case-outcome-card,
  .case-contribution-grid article{
    padding:24px !important;
    border-radius:26px !important;
  }

  .case-impact-card{
    min-height:190px !important;
  }

  .case-impact-card strong{
    font-size:3.6rem !important;
  }

  .case-wide-image{
    height:320px !important;
    border-radius:28px !important;
  }

  .case-gallery-grid img{
    height:340px !important;
  }

  .case-process-card{
    min-height:auto !important;
  }

  .case-roadmap-card span,
  .case-process-card span,
  .case-architecture-card span{
    margin-bottom:28px !important;
  }
}

@media(max-width:430px){

  .case-shell{
    width:calc(100% - 28px) !important;
  }

  .case-hero__content h1,
  .case-section-header h2,
  .case-statement h2,
  .case-problem h2,
  .case-validation h2,
  .case-outcome-card h2,
  .case-contribution h2,
  .case-final h2{
    font-size:3.25rem !important;
  }

  .case-eyebrow{
    font-size:.64rem !important;
    letter-spacing:.28em !important;
  }

  .case-gallery-grid img{
    height:280px !important;
  }
}





/* =========================================================
   CASE STATEMENT LIGHT VERSION
   Fondo blanco + letras oscuras
========================================================= */

.case-statement{
  background:#f5f5f7 !important;
  color:#07162d !important;
}

.case-statement .case-eyebrow{
  color:#8b7cff !important;
}

.case-statement h2{
  color:#07162d !important;
}

.case-statement p{
  color:rgba(7,22,45,.68) !important;
}






/* ===============================
   Objetivos en fondo claro
================================= */

.case-objectives,
.case-goals,
.objectives-grid {
  background: #f5f5f7 !important;
}

.case-objectives .objective-card,
.case-goals .objective-card,
.objectives-grid .objective-card {
  background: linear-gradient(180deg, #ffffff 0%, #f7f7fa 100%) !important;
  border: 1px solid rgba(7, 22, 45, 0.10) !important;
  box-shadow: 0 14px 40px rgba(7, 22, 45, 0.08) !important;
  color: #07162d !important;
}

.case-objectives .objective-card .eyebrow,
.case-objectives .objective-card .card-eyebrow,
.case-goals .objective-card .eyebrow,
.case-goals .objective-card .card-eyebrow,
.objectives-grid .objective-card .eyebrow,
.objectives-grid .objective-card .card-eyebrow {
  color: #7c6cff !important;
}

.case-objectives .objective-card h3,
.case-objectives .objective-card h4,
.case-goals .objective-card h3,
.case-goals .objective-card h4,
.objectives-grid .objective-card h3,
.objectives-grid .objective-card h4 {
  color: #07162d !important;
}

.case-objectives .objective-card p,
.case-objectives .objective-card li,
.case-goals .objective-card p,
.case-goals .objective-card li,
.objectives-grid .objective-card p,
.objectives-grid .objective-card li {
  color: rgba(7, 22, 45, 0.72) !important;
}

.case-objectives .objective-card ul li::marker,
.case-goals .objective-card ul li::marker,
.objectives-grid .objective-card ul li::marker {
  color: #7c6cff !important;
}



/* =========================================================
   CASE OBJECTIVES LIGHT FIX
   Corrige texto oscuro en cards de objetivos
========================================================= */

.case-objectives{
  background:#f5f5f7 !important;
  color:#07162d !important;
}

.case-objectives .case-objective-card{
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f7fa 100%) !important;

  border:1px solid rgba(7,22,45,.08) !important;

  box-shadow:
    0 24px 70px rgba(7,22,45,.08),
    inset 0 1px 0 rgba(255,255,255,.92) !important;

  color:#07162d !important;
}

.case-objectives .case-objective-card .case-eyebrow{
  color:#8b7cff !important;
}

.case-objectives .case-objective-card h3{
  color:#07162d !important;
}

.case-objectives .case-objective-card ul,
.case-objectives .case-objective-card li{
  color:rgba(7,22,45,.72) !important;
}

.case-objectives .case-objective-card li::before{
  background:#8b7cff !important;
}

.btn{
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.btn:hover .btn-text{
  text-decoration: none;
}


/* =========================================================
   LIQUID GLASS CTA BUTTON
========================================================= */

.liquid-case-btn{
  position:relative !important;

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

  width:max-content !important;
  min-height:46px !important;
  padding:0 18px 0 20px !important;

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

  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) !important;

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

  font-size:.95rem !important;
  line-height:1 !important;
  font-weight:750 !important;
  letter-spacing:-.015em !important;

  box-shadow:
    0 18px 44px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.22) !important;

  backdrop-filter:blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%) !important;

  overflow:hidden !important;
  cursor:pointer !important;

  opacity:1 !important;
  visibility:visible !important;

  transition:
    transform .24s cubic-bezier(.16,1,.3,1),
    border-color .24s ease,
    background .24s ease,
    box-shadow .24s ease !important;
}

.liquid-case-btn::before{
  content:"" !important;
  position:absolute !important;
  inset:1px !important;

  border-radius:inherit !important;

  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.28), transparent 34%),
    radial-gradient(circle at 82% 100%, rgba(139,124,255,.18), transparent 42%) !important;

  opacity:.9 !important;
  pointer-events:none !important;
}

.liquid-case-btn span,
.liquid-case-btn i{
  position:relative !important;
  z-index:1 !important;
  color:inherit !important;
  -webkit-text-fill-color:currentColor !important;
}

.liquid-case-btn i{
  font-style:normal !important;
  font-size:1.05rem !important;
  transform:translateY(-1px) !important;
  transition:transform .24s cubic-bezier(.16,1,.3,1) !important;
}

.liquid-case-btn:hover{
  transform:translateY(-2px) !important;

  border-color:rgba(255,255,255,.32) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08)) !important;

  box-shadow:
    0 22px 54px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}

.liquid-case-btn:hover i{
  transform:translate(4px, -1px) !important;
}

.liquid-case-btn:active{
  transform:translateY(0) scale(.98) !important;
}

.liquid-case-btn.liquid-case-btn--light{
  color:#07162d !important;
  border-color:rgba(7,22,45,.10) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.56)) !important;
  box-shadow:
    0 18px 44px rgba(7,22,45,.08),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}


/* =========================================================
   LIQUID CASE BUTTON ALWAYS VISIBLE FIX
========================================================= */

.liquid-case-btn,
a.liquid-case-btn,
.hero .liquid-case-btn,
.hero a.liquid-case-btn{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;

  opacity:1 !important;
  visibility:visible !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.07)) !important;

  border:1px solid rgba(255,255,255,.24) !important;

  box-shadow:
    0 18px 44px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.28) !important;

  backdrop-filter:blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(145%) !important;
}

.liquid-case-btn span,
.liquid-case-btn i,
a.liquid-case-btn span,
a.liquid-case-btn i{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
  visibility:visible !important;
}

.liquid-case-btn:hover,
a.liquid-case-btn:hover{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.10)) !important;

  border-color:rgba(255,255,255,.36) !important;
}



/* =========================================================
   IMPACT METRICS · FINAL LOOK COMO REFERENCIA
   4 columnas, fondo oscuro, números compactos con degradado
========================================================= */

.hpc-impact-grid{
  width: min(100% - 48px, 1440px) !important;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(32px, 5vw, 88px) !important;

  align-items: start !important;

  background: transparent !important;
}

/* Fondo de la sección / contenedor padre */
.ux-switchcase .hpc-shell:has(.hpc-impact-grid),
.hpc-impact-grid{
  background: transparent !important;
}

/* Si el fondo oscuro lo necesitas en toda esa franja */
.ux-switchcase{
  background: #1f1f21 !important;
}

/* Limpia completamente cada item */
.hpc-impact-grid article{
  padding: 0 !important;
  margin: 0 !important;

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

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;

  text-align: center !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Número / métrica */
.hpc-impact-grid article strong{
  display: block !important;
  margin: 0 0 10px !important;

  font-size: clamp(2rem, 3.2vw, 3.1rem) !important;
  line-height: .9 !important;
  letter-spacing: -.065em !important;
  font-weight: 900 !important;

  background: linear-gradient(
    90deg,
    #ff8748 0%,
    #ff4f93 40%,
    #c458ff 72%,
    #8b7cff 100%
  ) !important;

  background-size: 420% 100% !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;

  white-space: normal !important;
}

/* Degradado continuo por columna */
.hpc-impact-grid article:nth-child(1) strong{
  background-position: 0% 50% !important;
}

.hpc-impact-grid article:nth-child(2) strong{
  background-position: 35% 50% !important;
}

.hpc-impact-grid article:nth-child(3) strong{
  background-position: 68% 50% !important;
}

.hpc-impact-grid article:nth-child(4) strong{
  background-position: 100% 50% !important;
}

/* Texto debajo */
.hpc-impact-grid article p{
  max-width: 310px !important;
  margin: 0 auto !important;

  color: #f5f5f7 !important;

  font-size: clamp(.95rem, 1.12vw, 1.15rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -.02em !important;
  font-weight: 750 !important;
}

/* Quita spans vacíos o basura visual */
.hpc-impact-grid article span:empty{
  display: none !important;
}

/* Eyebrow de arriba */
.hpc-eyebrow.center{
  display: block !important;
  width: 100% !important;
  margin: 0 auto clamp(32px, 4vw, 52px) !important;

  text-align: center !important;

  background: linear-gradient(
    90deg,
    #ff8748 0%,
    #ff4f93 45%,
    #8b7cff 100%
  ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;

  font-size: .78rem !important;
  line-height: 1.2 !important;
  letter-spacing: .34em !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
}



/* =========================================================
   INDEX IMPACT · APPLE SPECS STYLE
   Convierte las cards de impacto en métricas limpias
========================================================= */

.cv-section:has(.cv-impact-grid){
  background:#1f1f21 !important;
  color:#f5f5f7 !important;
  padding:clamp(72px, 7vw, 104px) 0 !important;
}

.cv-section:has(.cv-impact-grid) .cv-shell{
  width:min(100% - 48px, 1440px) !important;
  margin:0 auto !important;
}

/* Header */
.cv-section:has(.cv-impact-grid) .cv-section__header{
  margin:0 0 clamp(44px, 5vw, 68px) !important;
  text-align:left !important;
}

.cv-section:has(.cv-impact-grid) .cv-eyebrow{
  color:#8b7cff !important;
  font-size:.78rem !important;
  line-height:1.2 !important;
  letter-spacing:.34em !important;
  font-weight:850 !important;
  text-transform:uppercase !important;
}

.cv-section:has(.cv-impact-grid) .cv-section__header h2{
  display:none !important;
}

/* Grid */
.cv-impact-grid{
  width:100% !important;
  margin:0 auto !important;

  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:clamp(34px, 5vw, 92px) !important;

  align-items:start !important;
}

/* Quita look de card */
.cv-impact-grid article{
  padding:0 !important;
  margin:0 !important;

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

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

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

  text-align:center !important;
}

/* Quita rayita/decoración superior */
.cv-impact-grid article::before,
.cv-impact-grid article::after{
  display:none !important;
  content:none !important;
}

/* Número principal */
.cv-impact-grid article strong{
  display:block !important;
  margin:0 0 10px !important;

  font-size:clamp(2rem, 3.4vw, 3.2rem) !important;
  line-height:.92 !important;
  letter-spacing:-.065em !important;
  font-weight:900 !important;

  background:linear-gradient(
    90deg,
    #ff8748 0%,
    #ff4f93 40%,
    #c458ff 72%,
    #8b7cff 100%
  ) !important;

  background-size:420% 100% !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}

/* Degradado continuo por columna */
.cv-impact-grid article:nth-child(1) strong{
  background-position:0% 50% !important;
}

.cv-impact-grid article:nth-child(2) strong{
  background-position:35% 50% !important;
}

.cv-impact-grid article:nth-child(3) strong{
  background-position:68% 50% !important;
}

.cv-impact-grid article:nth-child(4) strong{
  background-position:100% 50% !important;
}

/* Título debajo del número */
.cv-impact-grid article span{
  display:block !important;
  max-width:310px !important;
  margin:0 auto 4px !important;

  color:#f5f5f7 !important;

  font-size:clamp(.98rem, 1.15vw, 1.16rem) !important;
  line-height:1.2 !important;
  letter-spacing:-.02em !important;
  font-weight:800 !important;
}

/* Descripción */
.cv-impact-grid article p{
  max-width:320px !important;
  margin:0 auto !important;

  color:#f5f5f7 !important;

  font-size:clamp(.92rem, 1.05vw, 1.08rem) !important;
  line-height:1.24 !important;
  letter-spacing:-.015em !important;
  font-weight:650 !important;
}



/* =========================================================
   IMPACT COMPACT · APPLE SPECS STYLE
   Para el HTML:
   .wraper14
   .impact-compact-eyebrow
   .impact-compact-grid
   .impact-compact-card
========================================================= */

.wraper14{
  width:min(100% - 48px, 1440px) !important;
  margin:0 auto !important;
  padding:clamp(72px, vw, 104px) 0 !important;

  background:transparent !important;
  color:#f5f5f7 !important;
}

.impact-compact-eyebrow{
  display:block !important;
  margin:0 0 clamp(42px, 5vw, 68px) !important;

  color:#8b7cff !important;

  font-size:.78rem !important;
  line-height:1.2 !important;
  letter-spacing:.34em !important;
  font-weight:850 !important;
  text-transform:uppercase !important;
}

/* Grid principal */
.impact-compact-grid{
  width:100% !important;

  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:clamp(34px, 5vw, 92px) !important;

  align-items:start !important;
}

/* Quitar estilo de card */
.impact-compact-card{
  padding:0 !important;
  margin:0 !important;

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

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;

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

  text-align:center !important;
}

/* Número */
.impact-compact-card strong{
  display:block !important;
  margin:0 0 10px !important;

  font-size:clamp(2rem, 3.4vw, 3.2rem) !important;
  line-height:.92 !important;
  letter-spacing:-.065em !important;
  font-weight:900 !important;

  background:linear-gradient(
    90deg,
    #ff8748 0%,
    #ff4f93 40%,
    #c458ff 72%,
    #8b7cff 100%
  ) !important;

  background-size:420% 100% !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}

/* Degradado continuo por columna */
.impact-compact-card:nth-child(1) strong{
  background-position:0% 50% !important;
}

.impact-compact-card:nth-child(2) strong{
  background-position:35% 50% !important;
}

.impact-compact-card:nth-child(3) strong{
  background-position:68% 50% !important;
}

.impact-compact-card:nth-child(4) strong{
  background-position:100% 50% !important;
}

/* Título */
.impact-compact-card span{
  display:block !important;
  max-width:310px !important;
  margin:0 auto 4px !important;

  color:#f5f5f7 !important;

  font-size:clamp(.98rem, 1.15vw, 1.16rem) !important;
  line-height:1.2 !important;
  letter-spacing:-.02em !important;
  font-weight:800 !important;
}

/* Descripción */
.impact-compact-card p{
  max-width:320px !important;
  margin:0 auto !important;

  color:#f5f5f7 !important;

  font-size:clamp(.92rem, 1.05vw, 1.08rem) !important;
  line-height:1.24 !important;
  letter-spacing:-.015em !important;
  font-weight:650 !important;
}

/* Mata fondos raros o selección heredada */
.impact-compact-card *,
.impact-compact-card strong,
.impact-compact-card span,
.impact-compact-card p{
  background-color:transparent !important;
}


/* =========================================================
   IMPACT COMPACT · RESPONSIVE
========================================================= */

@media(max-width:1024px){

  .impact-compact-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:48px 64px !important;
    max-width:860px !important;
    margin:0 auto !important;
  }

  .impact-compact-card strong{
    font-size:clamp(2.25rem, 6vw, 3.1rem) !important;
  }
}


/* =========================================================
   IMPACT COMPACT · CLEAN FINAL FIX
   Centra "Impacto", reduce aire y elimina backgrounds
========================================================= */

/* Contenedor */
.wraper14{
  padding: clamp(88px, 2vw, 72px) 0 !important;
}

/* Centrar IMPACTO y acercarlo a las métricas */
.impact-compact-eyebrow{
  display: block !important;
  width: 100% !important;

  margin: 0 auto clamp(28px, 3vw, 40px) !important;

  text-align: center !important;

  color: #8b7cff !important;

  font-size: .78rem !important;
  line-height: 1.2 !important;
  letter-spacing: .34em !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
}

/* Grid más compacto y alineado */
.impact-compact-grid{
  width: 100% !important;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(28px, 4vw, 72px) !important;

  align-items: start !important;
}

/* Elimina TODOS los backgrounds de las cards */
.impact-compact-card{
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;

  padding: 0 !important;
  margin: 0 !important;

  min-height: 0 !important;

  text-align: center !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Mata cualquier pseudo-elemento que esté metiendo el recuadro */
.impact-compact-card::before,
.impact-compact-card::after{
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* También limpia hijos */
.impact-compact-card *,
.impact-compact-card strong,
.impact-compact-card span,
.impact-compact-card p{
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Número */
.impact-compact-card strong{
  margin: 0 0 10px !important;

  font-size: clamp(2rem, 3.1vw, 3rem) !important;
  line-height: .9 !important;
  letter-spacing: -.065em !important;
  font-weight: 900 !important;

  background: linear-gradient(
    90deg,
    #ff8748 0%,
    #ff4f93 40%,
    #c458ff 72%,
    #8b7cff 100%
  ) !important;

  background-size: 420% 100% !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Degradado continuo */
.impact-compact-card:nth-child(1) strong{ background-position: 0% 50% !important; }
.impact-compact-card:nth-child(2) strong{ background-position: 35% 50% !important; }
.impact-compact-card:nth-child(3) strong{ background-position: 68% 50% !important; }
.impact-compact-card:nth-child(4) strong{ background-position: 100% 50% !important; }

/* Título */
.impact-compact-card span{
  max-width: 320px !important;
  margin: 0 auto 4px !important;

  color: #f5f5f7 !important;
  -webkit-text-fill-color: #f5f5f7 !important;

  font-size: clamp(.98rem, 1.1vw, 1.12rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -.02em !important;
  font-weight: 800 !important;
}

/* Descripción */
.impact-compact-card p{
  max-width: 330px !important;
  margin: 0 auto !important;

  color: #f5f5f7 !important;
  -webkit-text-fill-color: #f5f5f7 !important;

  font-size: clamp(.9rem, 1vw, 1.02rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -.015em !important;
  font-weight: 650 !important;
}

@media(max-width:560px){

  .wraper14{
    width:calc(100% - 28px) !important;
    padding:60px 0 !important;
  }

  .impact-compact-eyebrow{
    text-align:center !important;
    font-size:.68rem !important;
    letter-spacing:.24em !important;
    margin-bottom:36px !important;
  }

  .impact-compact-grid{
    grid-template-columns:1fr !important;
    gap:36px !important;
    max-width:340px !important;
  }

  .impact-compact-card strong{
    font-size:2.55rem !important;
  }

  .impact-compact-card span{
    font-size:1.05rem !important;
  }

  .impact-compact-card p{
    font-size:.98rem !important;
    line-height:1.28 !important;
  }
}







/* =========================================================
   IMPACT COMPACT · REDUCE BOTTOM SPACE
========================================================= */

.wraper14{
  padding-top: clamp(48px, 5vw, 72px) !important;
  padding-bottom: clamp(24px, 2.5vw, 36px) !important;
}

/* Por si el aire viene del section padre */
section:has(.impact-compact-grid){
  padding-bottom: clamp(44px, 3.5vw, 56px) !important;
}

/* Por si hay margin extra abajo del grid */
.impact-compact-grid{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================================================
   PROJECT SHOWCASE · LIGHT MODE
   Fondo blanco + textos oscuros
========================================================= */

.project-showcaseOK{
  background:#ffffff !important;
  color:#07162d !important;
}

/* Contenedor */
.project-showcaseOK .project-showcase-container{
  background:transparent !important;
}

/* Header */
.project-showcaseOK .project-showcase-header{
  color:#07162d !important;
}

.project-showcaseOK .project-showcase-eyebrow{
  color:#8b7cff !important;
}

.project-showcaseOK .project-showcase-title,
.project-showcaseOK .project-showcase-title.black{
  color:#07162d !important;
}

/* Grid */
.project-showcaseOK .project-showcase-grid{
  background:transparent !important;
}

/* Cards */
.project-showcaseOK .project-showcase-card{
  background:transparent !important;
  color:#07162d !important;
}

/* Imagen */
.project-showcaseOK .project-showcase-media{
  background:#f5f5f7 !important;
}

.project-showcaseOK .project-showcase-media img{
  display:block !important;
}

/* Contenido */
.project-showcaseOK .project-showcase-content{
  color:#07162d !important;
}

.project-showcaseOK .project-showcase-card-title,
.project-showcaseOK .project-showcase-card-title.black{
  color:#07162d !important;
}

.project-showcaseOK .project-showcase-card-text,
.project-showcaseOK .project-showcase-card-text.black{
  color:rgba(7,22,45,.68) !important;
}