:root{
  --red:#ef121d;
  --red2:#9e060d;
  --white:#f6f6f6;
  --muted:#9b9b9b;
  --gray-title:#b7b7b7;
  --black:#050505;
  --panel:#101010;
  --line:rgba(255,255,255,.10);
  --max:1180px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:"Montserrat",system-ui,sans-serif;
  overflow-x:hidden;
}

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

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

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

/* =========================================================
   TEXTURA
========================================================= */

.noise{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:200;
  opacity:.025;

  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

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

.topbar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;

  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.86),
    rgba(0,0,0,0)
  );
}

.nav{
  height:84px;

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

.mini-logo img{
  width:80px;
  height:52px;

  object-fit:contain;
}

.desktop-nav{
  display:flex;
  gap:34px;
}

.desktop-nav a{
  font-size:13px;
  color:#c8c8c8;

  transition:.25s;
}

.desktop-nav a:hover{
  color:#fff;
}

.nav-cta{
  border:1px solid rgba(255,255,255,.25);

  border-radius:999px;

  padding:11px 18px;

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

  transition:.25s;
}

.nav-cta:hover{
  border-color:var(--red);

  background:rgba(239,18,29,.08);
}

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

.hero{
  position:relative;

  min-height:100vh;

  overflow:hidden;

  display:flex;
  align-items:center;

  padding:130px 0 80px;

  background:
    radial-gradient(
      circle at 72% 35%,
      rgba(239,18,29,.11),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #050505,
      #090909
    );
}

.hero-art{
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,.86) 0%,
      rgba(0,0,0,.64) 44%,
      rgba(0,0,0,.15) 100%
    ),
    url("assets/fondo-ikal.png");

  background-size:cover;
  background-position:center top;

  opacity:.78;

  mix-blend-mode:screen;
}

.hero-art:after{
  content:"";

  position:absolute;
  inset:0;

  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.05),
    #050505 96%
  );
}

.hero-grid{
  position:relative;
  z-index:3;

  display:grid;

  grid-template-columns:1.05fr .95fr;

  gap:70px;

  align-items:center;
}

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

.hero-kicker{
  font-size:11px;

  letter-spacing:.24em;

  color:#ff3941;

  font-weight:700;

  margin-bottom:18px;
}

.hero-logo{
  width:255px;
  max-height:150px;

  object-fit:contain;

  margin-bottom:26px;
}

.hero h1{
  font-size:clamp(48px,6vw,86px);

  line-height:.98;

  letter-spacing:-.055em;

  margin:0;

  font-weight:700;

  text-transform:uppercase;
}

.hero h1 span{
  color:var(--red);
}

/* Antes era texto hueco.
   Ahora TRASCIENDEN queda sólido en gris. */

.hero h1 em{
  font-style:normal;

  color:var(--gray-title);

  -webkit-text-stroke:0;

  text-shadow:
    0 2px 18px rgba(255,255,255,.03);
}

.hero-copy > p{
  font-size:18px;

  line-height:1.65;

  color:#c3c3c3;

  max-width:620px;

  margin:26px 0 0;
}

.hero-actions{
  display:flex;

  align-items:center;

  gap:24px;

  flex-wrap:wrap;

  margin-top:34px;
}

.btn-primary{
  display:inline-flex;

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

  min-height:52px;

  padding:0 24px;

  border-radius:999px;

  background:linear-gradient(
    135deg,
    var(--red),
    #ff3038
  );

  color:white;

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

  box-shadow:0 18px 48px rgba(239,18,29,.20);

  transition:.25s;
}

.btn-primary:hover{
  transform:translateY(-2px);

  box-shadow:0 22px 54px rgba(239,18,29,.30);
}

.btn-link{
  font-size:13px;

  color:#d8d8d8;
}

.btn-link span{
  color:var(--red);

  font-size:20px;

  vertical-align:-2px;
}

.hero-tags{
  display:flex;

  gap:9px;

  flex-wrap:wrap;

  margin-top:48px;
}

.hero-tags span{
  font-size:10px;

  letter-spacing:.08em;

  text-transform:uppercase;

  color:#a7a7a7;

  border:1px solid var(--line);

  border-radius:999px;

  padding:8px 12px;

  background:rgba(0,0,0,.25);

  backdrop-filter:blur(8px);
}

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

.hero-stage{
  position:relative;

  min-height:540px;

  display:grid;

  place-items:center;
}

.pulse-core{
  width:280px;
  height:280px;

  border-radius:50%;

  display:grid;

  place-items:center;

  position:relative;

  z-index:2;

  background:radial-gradient(
    circle,
    #272727 0%,
    #0b0b0b 64%,
    #040404 100%
  );

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

  box-shadow:
    0 0 85px rgba(239,18,29,.22),
    inset 0 0 60px rgba(255,255,255,.025);
}

.pulse-ring{
  position:absolute;

  inset:-34px;

  border-radius:50%;

  border:1px solid rgba(239,18,29,.55);

  box-shadow:0 0 40px rgba(239,18,29,.12);
}

.pulse-ring:after{
  content:"";

  position:absolute;

  inset:-55px;

  border-radius:50%;

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

.pulse-center{
  position:relative;

  z-index:3;

  font-size:68px;

  font-weight:800;

  letter-spacing:-.08em;

  white-space:nowrap;
}

.hero-orbit{
  position:absolute;

  border:1px solid rgba(239,18,29,.08);

  border-radius:50%;
}

.orbit-1{
  width:700px;
  height:700px;

  right:-250px;
  top:40px;
}

.orbit-2{
  width:940px;
  height:940px;

  right:-370px;
  top:-80px;
}

.stage-card{
  position:absolute;

  z-index:4;

  padding:16px 18px;

  width:190px;

  background:rgba(12,12,12,.72);

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

  backdrop-filter:blur(14px);

  border-radius:16px;

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

.stage-card span{
  color:var(--red);

  font-size:10px;

  font-weight:800;
}

.stage-card b{
  display:block;

  font-size:15px;

  margin-top:4px;
}

.stage-card small{
  color:#8c8c8c;
}

.stage-card-a{
  left:0;

  top:18%;
}

.stage-card-b{
  right:-110px;

  top:40%;
}

.stage-card-c{
  left:8%;

  bottom:9%;
}

.scroll-indicator{
  position:absolute;

  left:50%;
  bottom:26px;

  transform:translateX(-50%);

  z-index:4;

  color:#7f7f7f;

  font-size:10px;

  letter-spacing:.18em;

  text-transform:uppercase;
}

.scroll-indicator span{
  display:block;

  text-align:center;

  color:var(--red);

  font-size:18px;

  margin-top:4px;
}

/* =========================================================
   STATEMENT
========================================================= */

.statement{
  padding:95px 0;

  border-top:1px solid var(--line);

  background:#080808;
}

.statement-grid{
  max-width:940px;
}

.statement-line{
  width:54px;
  height:2px;

  background:var(--red);

  margin-bottom:24px;
}

.statement p{
  margin:0;

  color:var(--red);

  font-size:12px;

  font-weight:800;

  text-transform:uppercase;

  letter-spacing:.18em;
}

.statement h2{
  font-size:clamp(38px,5vw,64px);

  line-height:1.08;

  letter-spacing:-.04em;

  margin:16px 0 0;

  font-weight:600;
}

.statement h2 span{
  color:#ff2f39;
}

/* =========================================================
   SERVICIOS
========================================================= */

.services{
  padding:120px 0;

  background:linear-gradient(
    180deg,
    #090909,
    #050505
  );
}

.section-head{
  display:grid;

  grid-template-columns:1fr .75fr;

  gap:70px;

  align-items:end;

  margin-bottom:65px;
}

.section-head small{
  color:var(--red);

  font-size:11px;

  font-weight:800;

  letter-spacing:.22em;
}

.section-head h2{
  font-size:clamp(40px,5vw,66px);

  line-height:1.04;

  letter-spacing:-.045em;

  margin:10px 0 0;
}

/* Antes era solo contorno.
   Ahora "crecer una marca"
   y "a la memoria" son sólidos. */

.section-head h2 span{
  color:var(--gray-title);

  -webkit-text-stroke:0;

  text-shadow:
    0 2px 18px rgba(255,255,255,.025);
}

.section-head p{
  color:#9f9f9f;

  line-height:1.7;

  margin:0;

  font-size:16px;
}

.service-stack{
  display:grid;

  gap:18px;
}

.service-card{
  display:grid;

  grid-template-columns:
    80px
    180px
    1fr
    60px;

  gap:28px;

  align-items:center;

  position:relative;

  min-height:230px;

  padding:30px 34px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.02),
      transparent 50%
    ),
    #0d0d0d;

  border:1px solid var(--line);

  border-radius:26px;

  overflow:hidden;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.service-card:before{
  content:"";

  position:absolute;

  inset:0 auto 0 0;

  width:3px;

  background:var(--red);

  opacity:.7;
}

.service-card:hover{
  transform:translateY(-5px);

  border-color:rgba(239,18,29,.32);

  box-shadow:0 24px 60px rgba(0,0,0,.38);
}

.service-red{
  background:
    radial-gradient(
      circle at 13% 50%,
      rgba(239,18,29,.14),
      transparent 20%
    ),
    #0e0e0e;
}

.service-index{
  font-size:13px;

  color:#4a4a4a;

  font-weight:800;

  align-self:start;

  padding-top:6px;
}

/* =========================================================
   LOGOS SERVICIOS
========================================================= */

.service-logo-wrap{
  width:180px;
  height:125px;

  display:flex;

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

  border:1px solid rgba(239,18,29,.28);

  border-radius:18px;

  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,.035),
      transparent 70%
    ),
    #090909;

  padding:18px;

  overflow:hidden;

  transition:
    border-color .3s ease,
    background .3s ease,
    transform .3s ease;
}

.service-card:hover .service-logo-wrap{
  border-color:rgba(239,18,29,.55);

  background:
    radial-gradient(
      circle at center,
      rgba(239,18,29,.07),
      transparent 70%
    ),
    #090909;
}

.service-logo-wrap img{
  width:auto;
  height:auto;

  max-width:100%;
  max-height:100%;

  object-fit:contain;

  object-position:center;
}

/* =========================================================
   TEXTO SERVICIOS
========================================================= */

.service-label{
  font-size:10px;

  text-transform:uppercase;

  letter-spacing:.18em;

  color:#ff3039;

  font-weight:800;
}

.service-body h3{
  font-size:32px;

  margin:7px 0 10px;

  text-transform:uppercase;
}

.service-body p{
  max-width:670px;

  color:#aaa;

  line-height:1.6;

  margin:0;
}

.pills{
  display:flex;

  flex-wrap:wrap;

  gap:8px;

  margin-top:18px;
}

.pills span{
  font-size:10px;

  color:#c8c8c8;

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

  border-radius:999px;

  padding:7px 10px;

  background:#111;
}

.service-arrow{
  font-size:27px;

  color:var(--red);

  text-align:center;
}

/* =========================================================
   CRECIMIENTO
========================================================= */

.growth{
  position:relative;

  min-height:630px;

  display:flex;

  align-items:center;

  overflow:hidden;

  background:#060606;

  border-top:1px solid rgba(239,18,29,.28);

  border-bottom:1px solid rgba(239,18,29,.28);
}

.growth-art{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,
      #060606 0%,
      rgba(6,6,6,.82) 42%,
      rgba(20,0,0,.28) 100%
    ),
    url("assets/fondo-ikal.png");

  background-size:cover;

  background-position:center 64%;

  opacity:.9;
}

.growth-grid{
  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:1fr .8fr;

  align-items:center;

  gap:80px;
}

.growth-copy small{
  font-size:11px;

  color:var(--red);

  font-weight:800;

  letter-spacing:.22em;
}

.growth-copy h2{
  font-size:clamp(52px,6vw,84px);

  line-height:.98;

  text-transform:uppercase;

  letter-spacing:-.05em;

  margin:13px 0 20px;
}

.growth-copy h2 span{
  color:var(--red);
}

.growth-copy p{
  max-width:590px;

  color:#c4c4c4;

  line-height:1.7;

  margin-bottom:28px;
}

.growth-metric{
  min-height:390px;

  display:grid;

  place-items:center;

  position:relative;
}

.metric-orbit{
  width:360px;
  height:360px;

  border:1px solid rgba(239,18,29,.32);

  border-radius:50%;

  box-shadow:0 0 80px rgba(239,18,29,.11);
}

.metric-orbit:before,
.metric-orbit:after{
  content:"";

  position:absolute;

  border-radius:50%;

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

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);
}

.metric-orbit:before{
  width:470px;
  height:470px;
}

.metric-orbit:after{
  width:580px;
  height:580px;
}

.metric-core{
  position:absolute;

  width:225px;
  height:225px;

  border-radius:50%;

  display:flex;

  flex-direction:column;

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

  background:radial-gradient(
    circle,
    #161616,
    #070707
  );

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

  box-shadow:0 0 60px rgba(239,18,29,.15);
}

.metric-core b{
  font-size:70px;

  color:var(--red);

  line-height:.9;
}

.metric-core span{
  text-transform:uppercase;

  font-size:14px;

  font-weight:800;

  margin-top:10px;
}

.metric-core small{
  color:#777;

  margin-top:4px;
}

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

.method{
  padding:120px 0;

  background:#080808;
}

.method-grid{
  display:grid;

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

  border-top:1px solid var(--line);

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

.method-step{
  padding:32px 24px 34px;

  border-right:1px solid var(--line);

  min-height:230px;
}

.method-step:last-child{
  border-right:0;
}

.method-step span{
  font-size:11px;

  color:var(--red);

  font-weight:800;
}

.method-step h3{
  font-size:25px;

  margin:45px 0 12px;
}

.method-step p{
  color:#8e8e8e;

  font-size:13px;

  line-height:1.6;

  margin:0;
}

/* =========================================================
   MANIFIESTO
========================================================= */

.manifesto{
  padding:90px 0;

  background:#050505;
}

.manifesto-card{
  position:relative;

  overflow:hidden;

  padding:70px;

  border-radius:30px;

  background:
    radial-gradient(
      circle at 85% 30%,
      rgba(239,18,29,.34),
      transparent 23%
    ),
    linear-gradient(
      135deg,
      #121212,
      #070707 64%
    );

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

.manifesto-glow{
  position:absolute;

  right:-70px;
  top:-80px;

  width:310px;
  height:310px;

  border:50px solid rgba(239,18,29,.12);

  border-radius:50%;
}

.manifesto-card small{
  color:var(--red);

  font-weight:800;

  letter-spacing:.18em;
}

.manifesto-card h2{
  font-size:clamp(43px,5vw,68px);

  line-height:1.04;

  letter-spacing:-.045em;

  max-width:920px;

  margin:18px 0 28px;
}

.manifesto-card h2 span{
  color:var(--red);
}

.manifesto-card a{
  font-size:13px;

  font-weight:800;

  color:#ddd;
}

.manifesto-card a b{
  color:var(--red);

  font-size:20px;

  margin-left:8px;
}

/* =========================================================
   CONTACTO
========================================================= */

.contact{
  padding:110px 0;

  background:#0a0a0a;
}

.contact-grid{
  display:grid;

  grid-template-columns:.85fr 1.15fr;

  gap:80px;

  align-items:start;
}

.contact-copy small{
  color:var(--red);

  font-size:11px;

  font-weight:800;

  letter-spacing:.2em;
}

.contact-copy h2{
  font-size:clamp(50px,6vw,82px);

  line-height:.94;

  letter-spacing:-.055em;

  text-transform:uppercase;

  margin:15px 0 24px;
}

.contact-copy h2 span{
  color:var(--red);
}

.contact-copy p{
  color:#999;

  line-height:1.7;

  max-width:430px;
}

.contact-links{
  display:grid;

  margin-top:34px;

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

.contact-links a{
  display:flex;

  justify-content:space-between;

  padding:15px 0;

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

  color:#d2d2d2;

  font-size:13px;
}

.contact-links a span{
  color:var(--red);
}

/* =========================================================
   PANEL REDES
========================================================= */

.contact-panel{
  border:1px solid var(--line);

  border-radius:26px;

  padding:30px;

  background:#0d0d0d;
}

.contact-panel-top{
  font-size:11px;

  letter-spacing:.18em;

  color:#868686;

  margin-bottom:20px;

  font-weight:800;
}

.social-grid{
  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:12px;
}

.social-grid a{
  min-height:110px;

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

  border-radius:16px;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  padding:17px;

  background:#101010;

  transition:.25s;
}

.social-grid a:hover{
  border-color:rgba(239,18,29,.35);

  transform:translateY(-3px);

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(239,18,29,.08),
      transparent 55%
    ),
    #101010;
}

.social-grid b{
  font-size:12px;
}

/* =========================================================
   ICONOS REDES
========================================================= */

.social-icon{
  width:34px;
  height:34px;

  color:var(--red);

  display:block;

  transition:transform .25s ease;
}

.social-icon svg{
  width:100%;
  height:100%;

  display:block;

  fill:currentColor;
}

.social-grid a:hover .social-icon{
  transform:scale(1.08);
}

/* =========================================================
   LOGOS INFERIORES
========================================================= */

.partner-logos{
  display:grid;

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

  gap:24px;

  align-items:center;

  margin-top:34px;

  padding-top:30px;

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

.partner-logos img{
  width:100%;
  height:76px;

  object-fit:contain;

  object-position:center;

  padding:8px 12px;

  opacity:.94;

  transition:
    opacity .25s ease,
    transform .25s ease;
}

.partner-logos img:hover{
  opacity:1;

  transform:translateY(-2px);
}

.partner-logos img:nth-child(1){
  max-width:170px;

  margin:auto;
}

.partner-logos img:nth-child(2){
  max-width:135px;

  margin:auto;
}

.partner-logos img:nth-child(3){
  max-width:150px;

  margin:auto;
}

.partner-logos img:nth-child(4){
  max-width:115px;

  margin:auto;
}

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

footer{
  border-top:1px solid var(--line);

  background:#050505;

  padding:24px 0;

  color:#747474;

  font-size:11px;
}

.footer-grid{
  display:flex;

  justify-content:space-between;

  gap:20px;

  flex-wrap:wrap;
}

footer a{
  color:#d1d1d1;

  font-weight:700;
}

footer a:hover{
  color:var(--red);
}

/* =========================================================
   ANIMACIONES
========================================================= */

.reveal{
  opacity:0;

  transform:translateY(24px);

  transition:.75s ease;
}

.reveal.show{
  opacity:1;

  transform:none;
}

.delay-1{
  transition-delay:.12s;
}

.delay-2{
  transition-delay:.22s;
}

.delay-3{
  transition-delay:.32s;
}

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

@media(max-width:960px){

  .hero-grid,
  .growth-grid,
  .section-head,
  .contact-grid{
    grid-template-columns:1fr;
  }

  .hero-stage{
    min-height:440px;

    margin-top:15px;
  }

  .stage-card-b{
    right:-20px;

    top:40%;
  }

  .service-card{
    grid-template-columns:
      60px
      170px
      1fr;
  }

  .service-arrow{
    display:none;
  }

  .growth-grid{
    gap:15px;
  }

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

  .method-step:nth-child(2){
    border-right:0;
  }

  .method-step:nth-child(-n+2){
    border-bottom:1px solid var(--line);
  }

  .partner-logos{
    grid-template-columns:repeat(2,1fr);

    gap:28px 20px;
  }

  .partner-logos img{
    height:72px;
  }
}

/* =========================================================
   MÓVIL
========================================================= */

@media(max-width:720px){

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

  .desktop-nav{
    display:none;
  }

  .nav{
    height:70px;
  }

  .mini-logo img{
    width:66px;
    height:44px;

    object-fit:contain;
  }

  /* HERO */

  .hero{
    padding:110px 0 72px;
  }

  .hero-art{
    background-position:58% top;

    opacity:.6;
  }

  .hero-logo{
    width:210px;

    max-height:120px;

    object-fit:contain;
  }

  .hero h1{
    font-size:48px;
  }

  .hero h1 em{
    color:#bdbdbd;

    -webkit-text-stroke:0;
  }

  .hero-copy > p{
    font-size:15px;
  }

  .hero-stage{
    min-height:390px;
  }

  .pulse-core{
    width:215px;
    height:215px;
  }

  .pulse-center{
    font-size:52px;
  }

  .stage-card{
    width:155px;

    padding:12px;
  }

  .stage-card-a{
    left:0;

    top:16%;
  }

  .stage-card-b{
    right:-10px;

    top:40%;
  }

  .stage-card-c{
    left:5%;

    bottom:5%;
  }

  /* STATEMENT */

  .statement{
    padding:72px 0;
  }

  /* GENERALES */

  .services,
  .method,
  .contact{
    padding:82px 0;
  }

  .section-head{
    gap:22px;

    margin-bottom:42px;
  }

  .section-head h2{
    font-size:43px;
  }

  .section-head h2 span{
    color:#bdbdbd;

    -webkit-text-stroke:0;
  }

  /* SERVICIOS */

  .service-card{
    grid-template-columns:1fr;

    padding:30px 22px;

    text-align:center;
  }

  .service-index{
    position:absolute;

    right:20px;
    top:18px;
  }

  .service-logo-wrap{
    width:min(230px,80%);

    height:130px;

    margin:auto;

    border-radius:18px;

    padding:18px;
  }

  .service-logo-wrap img{
    width:auto;
    height:auto;

    max-width:100%;
    max-height:100%;

    object-fit:contain;
  }

  .pills{
    justify-content:center;
  }

  /* CRECIMIENTO */

  .growth{
    min-height:760px;
  }

  .growth-copy{
    text-align:left;
  }

  .growth-copy h2{
    font-size:52px;
  }

  .growth-metric{
    min-height:330px;
  }

  .metric-orbit{
    width:260px;
    height:260px;
  }

  .metric-orbit:before{
    width:330px;
    height:330px;
  }

  .metric-orbit:after{
    width:400px;
    height:400px;
  }

  .metric-core{
    width:185px;
    height:185px;
  }

  /* MÉTODO */

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

  .method-step{
    border-right:0;

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

  .method-step:last-child{
    border-bottom:0;
  }

  .method-step h3{
    margin-top:24px;
  }

  /* MANIFIESTO */

  .manifesto{
    padding:65px 0;
  }

  .manifesto-card{
    padding:42px 24px;
  }

  /* REDES */

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

  /* LOGOS INFERIORES */

  .partner-logos{
    grid-template-columns:repeat(2,1fr);

    gap:24px 16px;

    margin-top:30px;

    padding-top:24px;
  }

  .partner-logos img{
    height:68px;

    padding:8px;
  }

  .partner-logos img:nth-child(1){
    max-width:150px;
  }

  .partner-logos img:nth-child(2){
    max-width:120px;
  }

  .partner-logos img:nth-child(3){
    max-width:135px;
  }

  .partner-logos img:nth-child(4){
    max-width:105px;
  }
}

/* =========================================================
   MÓVILES PEQUEÑOS
========================================================= */

@media(max-width:480px){

  .hero h1{
    font-size:39px;
  }

  .hero-actions{
    align-items:flex-start;

    flex-direction:column;
  }

  .hero-stage{
    min-height:350px;
  }

  .stage-card{
    width:135px;
  }

  .stage-card-b{
    right:-5px;
  }

  .service-body h3{
    font-size:26px;
  }

  .growth-copy h2{
    font-size:44px;
  }

  .contact-copy h2{
    font-size:48px;
  }

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

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