:root{
  --bg: #101014;
  --bg-soft: #17181f;
  --orange: #ff6a00;
  --orange-light: #fcb045;
  --gold: #e8ca84;
  --white: #fafafa;
  --muted: #b8bac8;
  --dark-text: #111;
  --border: rgba(255,255,255,.12);
  --radius: 24px;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

body{
  min-height: 100vh;
  background: #101014;
  color: var(--white);
  font-family: "Inter", system-ui, sans-serif;
  overflow-x: hidden;
  position: relative;
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,106,0,.18), transparent 34%),
    radial-gradient(circle at 82% 28%, rgba(232,202,132,.11), transparent 32%),
    radial-gradient(circle at 50% 88%, rgba(47,88,110,.16), transparent 36%),
    linear-gradient(180deg, #101014 0%, #15161d 48%, #101014 100%);
}

body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 78%);
  opacity: .45;
}

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

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

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

.site-header{
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 32px));
  height: 72px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 50;

  background: rgba(15, 16, 22, .72);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
   --nav-y: 0;
  --nav-blur: 0px;

  transform: translateX(-50%) translateY(var(--nav-y));
  opacity: 1;
  filter: blur(var(--nav-blur));

  transition:
    transform .42s cubic-bezier(.22,.61,.36,1),
    opacity .32s ease,
    filter .32s ease;

  will-change: transform, opacity, filter;
}

.site-header.nav-hidden{
  --nav-y: -145%;
  --nav-blur: 10px;

  opacity: 0;
  pointer-events: none;
}

.brand{
  display: flex;
  align-items: center;
  height: 100%;
}

.brand-logo{
  height: 78px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
}

.nav{
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: rgba(250,250,250,.78);
  font-size: .92rem;
}

.nav a{
  transition: color .2s ease;
}

.nav a:hover{
  color: var(--orange-light);
}

.header-btn{
   min-width: 120px;
  height: 54px;
  padding: 0 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  color: #111;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(255,106,0,.25);
}

.mobile-nav-cta{
  display: none;
}

/* ===============================
   NAV MOBILE / HAMBURGER
   =============================== */

.nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.13);
  cursor: pointer;
  position: relative;
  z-index: 80;
}

.nav-toggle span{
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--white);
  transform: translateX(-50%);
  transition:
    top .25s ease,
    transform .25s ease,
    opacity .18s ease;
}

.nav-toggle span:nth-child(1){
  top: 15px;
}

.nav-toggle span:nth-child(2){
  top: 21px;
}

.nav-toggle span:nth-child(3){
  top: 27px;
}

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

.hero{
  position: relative;
  min-height: auto;
  padding: 125px 5vw 0;
  overflow: hidden;
  padding-bottom: 8rem;
}

.hero-bg{
  display: none;
}

.hero-bg::after{
  display: none;
}



.hero-title{
  font-family: "Inter", sans-serif;
  font-size: clamp(3.1rem, 4.7vw, 5.25rem);
  line-height: .96;
  letter-spacing: -.065em;
  max-width: 670px;
}

.hero-copy{
  position: relative;
  z-index: 2;
  padding-top: 24px;
}

.title-line{
  display: block;
}

.title-highlight{
  width: fit-content;
  font-family: "Aldrich", sans-serif;
  letter-spacing: -.04em;
  filter: drop-shadow(0 0 22px rgba(255,106,0,.22));
}

.word{
  display: inline-block;
  opacity: 0;
  transform: translateX(-28px);
  margin-right: .18em;

  background: linear-gradient(90deg, var(--orange), var(--orange-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-description{
  max-width: 540px;
  margin-top: 1.2rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.02vw, 1.08rem);
  line-height: 1.65;
}

.hero-content{
  width: min(1580px, 100%);
  margin: 0 auto;
  display: grid;
  align-items: center;
  grid-template-columns: .9fr 1.1fr;
    gap: clamp(2rem, 3vw, 4rem);
}

.hero-visual{
  position: relative;
  min-height: 880px;
}

.hero-visual::before{
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  right: 30px;
  top: 120px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,106,0,.18) 0%, rgba(255,106,0,.08) 35%, transparent 70%);
  filter: blur(48px);
  z-index: 1;
  pointer-events: none;
}


.mockup{
  position: absolute;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);

  backdrop-filter: blur(16px);
}

.mockup-main{
     width: min(860px, 100%);
    height: 535px;
    right: -10px;
    top: 70px;
  z-index: 3;
}

.mockup-secondary{
   width: 500px;
    height: 310px;
    left: -8px;
    bottom: 205px;
  z-index: 5;
  transform: rotate(-7deg);
}

.mockup-third{
   width: 370px;
    height: 230px;
    right: -8px;
    bottom: 175px;
  z-index: 2;
  transform: rotate(8deg);
  opacity: .98;
}


.mockup-fourth{
   width: 475px;
    height: 275px;
    bottom: 20px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  z-index: 1;
  opacity: .9;
}

.mockup img{
  width: 100%;
  height: calc(100% - 34px);
  object-fit: cover;
  object-position: top center;
}

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

.hero-pill{
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .75rem;
  margin-bottom: 1.4rem;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(250,250,250,.82);
  font-size: .9rem;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

.hero-pill span{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #42ff8b;
  box-shadow: 0 0 18px rgba(66,255,139,.7);
}


body.is-loaded .word{
  animation: wordIn .55s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(var(--i) * .12s + .45s);
}

@keyframes wordIn{
  to{
    opacity: 1;
    transform: translateX(0);
  }
}



.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.1rem;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.35rem;
  border-radius: 14px;
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn:hover{
  transform: translateY(-3px);
}

.btn-primary{
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  color: #111;
  box-shadow: 0 18px 36px rgba(255,106,0,.25);
}

.btn-secondary{
  background: rgba(255,255,255,.06);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover{
  background: rgba(255,255,255,.12);
}

.hero-proof{
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.15rem;
  color: rgba(250,250,250,.74);
  font-size: .92rem;
}

.proof-avatars{
  display: flex;
  align-items: center;
}

.proof-avatars img{
  width: 36px;
  height: 36px;
  border-radius: 50%;

  object-fit: contain;
  padding: 5px;

  background: rgba(255,255,255,.92);
  border: 2px solid rgba(255,255,255,.18);

  box-shadow:
    0 8px 20px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.proof-avatars img:not(:first-child){
  margin-left: -10px;
}

/* ================= MOCKUPS ================= */



.browser-bar{
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  background: rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.browser-bar span{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.38);
}


.mockup-main{
  animation: mockFloatMain 6s ease-in-out infinite;
}

.mockup-secondary{
  animation: mockFloatSecondary 5.5s ease-in-out infinite;
}

.mockup-third{
  animation: mockFloatThird 6.5s ease-in-out infinite;
}

.reveal-mockup-delay-3{
  opacity: 0;
  transform: translateX(-50%) translateY(70px) scale(.94) rotate(-2.5deg);
}

body.is-loaded .reveal-mockup-delay-3{
  animation: mockupInFourth .95s cubic-bezier(.22,.61,.36,1) 1.35s forwards;
}

@keyframes mockupInFourth{
  to{
    opacity: .98;
    transform: translateX(-50%) translateY(0) scale(1) rotate(-2.5deg);
  }
}

@keyframes mockFloatMain{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

@keyframes mockFloatSecondary{
  0%,100%{ transform: rotate(-7deg) translateY(0); }
  50%{ transform: rotate(-7deg) translateY(-7px); }
}

@keyframes mockFloatThird{
  0%,100%{ transform: rotate(7deg) translateY(0); }
  50%{ transform: rotate(7deg) translateY(-5px); }
}

.floating-logo{
  position: absolute;
  z-index: 8;
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter:
    drop-shadow(0 14px 28px rgba(0,0,0,.42))
    drop-shadow(0 0 10px rgba(255,106,0,.14));
  opacity: 0;
}

.floating-logo-wordpress{
  left: 118px;
  top: 680px;
}

.floating-logo-js{
  right: -18px;
  top: 45px;
}

body.is-loaded .floating-logo{
  animation:
    logoIn .75s cubic-bezier(.22,.61,.36,1) forwards,
    logoFloat 4.5s ease-in-out infinite;
}

body.is-loaded .floating-logo-wordpress{
  animation-delay: 1.2s, 2.1s;
}

body.is-loaded .floating-logo-js{
  animation-delay: 1.4s, 2.25s;
}

@keyframes logoIn{
  from{
    opacity: 0;
    transform: scale(.88) translateY(18px);
  }
  to{
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes logoFloat{
  0%,100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-6px);
  }
}



/* ================= ANIMACIONES DE ENTRADA ================= */

.reveal-down,
.reveal-up,
.reveal-mockup,
.reveal-mockup-delay,
.reveal-mockup-delay-2,
.floating-card{
  opacity: 0;
}

.reveal-down{
  transform: translateY(-34px);
}

.reveal-up{
  transform: translateY(34px);
}

body.is-loaded .reveal-down{
  animation: revealDown .75s cubic-bezier(.22,.61,.36,1) forwards;
}

body.is-loaded .reveal-up{
  animation: revealUp .75s cubic-bezier(.22,.61,.36,1) forwards;
}

body.is-loaded .hero-description{
  animation-delay: .85s;
}

body.is-loaded .hero-actions{
  animation-delay: 1.05s;
}

body.is-loaded .hero-proof{
  animation-delay: 1.25s;
}

body.is-loaded .projects-marquee{
  animation-delay: 1.45s;
}

@keyframes revealDown{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes revealUp{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estado inicial */
.reveal-mockup,
.reveal-mockup-delay,
.reveal-mockup-delay-2,
.reveal-mockup-delay-3{
  opacity: 0;
}

/* Keyframes generales */
@keyframes mockupIn{
  from{
    opacity: 0;
    transform: translateY(60px) scale(.94);
  }

  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mockupInSecondary{
  from{
    opacity: 0;
    transform: translateY(60px) scale(.94) rotate(-7deg);
  }

  to{
    opacity: 1;
    transform: translateY(0) scale(1) rotate(-7deg);
  }
}

@keyframes mockupInThird{
  from{
    opacity: 0;
    transform: translateY(60px) scale(.94) rotate(7deg);
  }

  to{
    opacity: .98;
    transform: translateY(0) scale(1) rotate(7deg);
  }
}

@keyframes mockupInFourth{
  from{
    opacity: 0;
    transform: translateX(-50%) translateY(70px) scale(.94) rotate(-2deg);
  }

  to{
    opacity: .96;
    transform: translateX(-50%) translateY(0) scale(1) rotate(-2deg);
  }
}

body.is-loaded .reveal-mockup{
    animation: mockupIn .85s cubic-bezier(.22,.61,.36,1) .35s both;
  }

  body.is-loaded .reveal-mockup-delay{
    animation: mockupInSecondary .9s cubic-bezier(.22,.61,.36,1) .55s both;
  }

  body.is-loaded .reveal-mockup-delay-2{
    animation: mockupInThird .9s cubic-bezier(.22,.61,.36,1) .7s both;
  }

  body.is-loaded .reveal-mockup-delay-3{
    animation: mockupInFourth .9s cubic-bezier(.22,.61,.36,1) .85s both;
  }



/* ===============================
   SECCIÓN SERVICIOS PRINCIPALES
   =============================== */

.services-section{
  position: relative;
  overflow: hidden;
  padding: 2rem 5vw 1rem;
  color: var(--white);
  background: transparent;
}

/* Fade inferior para que las tarjetas se pierdan en el fondo */
.services-section::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px;
  pointer-events: none;
  z-index: 4;
}

/* CARRUSEL SUPERIOR */
/* CARRUSEL SUPERIOR LIMPIO */
.services-marquee{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: transparent;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.services-marquee-track{
  display: flex;
  align-items: center;
  width: max-content;
  gap: 2.4rem;
  padding: 4rem 0; /* más alto */
  animation: servicesMarquee 26s linear infinite;
}

.marquee-logo{
  flex: 0 0 auto;
  width: 120px;
  height: 72px; /* doble de alto aprox */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .82;
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}

.marquee-logo img{
  max-width: 78px;
  max-height: 46px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;

  /* para que queden más premium sobre fondo dark */
  filter: grayscale(100%) brightness(1.1) contrast(1.05);
  opacity: .92;
}

.marquee-logo:hover{
  transform: translateY(-3px);
  opacity: 1;
}

.marquee-logo:hover img{
  filter: grayscale(0%) brightness(1.05);
  opacity: 1;
}

@keyframes servicesMarquee{
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(-50%);
  }
}

/* CONTENEDOR */
.services-container{
  position: relative;
  z-index: 2;
  width: min(1450px, 100%);
  margin: 0 auto;
}

.services-heading{
  max-width: 900px;
  margin-bottom: 3.2rem;
}

.services-kicker{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  color: rgba(250,250,250,.7);
  font-size: .88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.services-kicker::before{
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(255,106,0,.5);
}

.services-heading h2{
  font-family: "Inter", sans-serif;
  font-size: clamp(2.8rem, 5.2vw, 5.8rem);
  line-height: .95;
  letter-spacing: -.065em;
  margin-bottom: 1rem;
}

.services-heading h2 span{
  position: relative;
  display: inline-block;
  font-family: "Aldrich", sans-serif;
  background: linear-gradient(90deg, var(--orange), var(--orange-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.services-heading h2 span::after{
  content: "";
  display: inline-block;
  width: .08em;
  height: .82em;
  margin-left: .12em;
  translate: 0 .08em;
  border-radius: 999px;
  background: var(--orange-light);
  box-shadow: 0 0 16px rgba(255,106,0,.55);
  animation: typingCursorBlink .85s steps(1) infinite;
}

@keyframes typingCursorBlink{
  0%, 45%{
    opacity: 1;
  }

  46%, 100%{
    opacity: 0;
  }
}

.services-heading p{
  max-width: 720px;
  color: rgba(250,250,250,.68);
  font-size: 1.08rem;
  line-height: 1.7;
}

/* TARJETAS */
.services-grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.service-card{
  position: relative;
  min-height: 530px;
  overflow: hidden;
  border-radius: 28px;
  padding: 1.45rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background:
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.025)),
    rgba(20,21,28,.92);

  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 28px 80px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(16px);
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.service-card:hover{
  transform: translateY(-10px);
  border-color: rgba(255,106,0,.36);
  box-shadow:
    0 34px 100px rgba(0,0,0,.55),
    0 0 34px rgba(255,106,0,.12),
    inset 0 1px 0 rgba(255,255,255,.1);
}

.service-card-featured{
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(145deg, #ff6a00 0%, #f0821a 48%, #d86a0a 100%);
  color: #111;
  border-color: rgba(255,255,255,.2);
}

.service-number{
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  font-family: "Aldrich", sans-serif;
  font-size: 4rem;
  line-height: 1;
  color: rgba(255,255,255,.055);
  pointer-events: none;
}

.service-card-featured .service-number{
  color: rgba(17,17,17,.12);
}

.service-card-content{
  position: relative;
  z-index: 2;
  max-width: 95%;
}

.service-label{
  display: inline-flex;
  margin-bottom: 1rem;
  padding: .4rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(250,250,250,.72);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .78rem;
  font-weight: 800;
}

.service-card-featured .service-label{
  background: rgba(17,17,17,.12);
  color: rgba(17,17,17,.78);
  border-color: rgba(17,17,17,.12);
}

.service-card h3{
  max-width: 360px;
  font-family: "Inter", sans-serif;
  font-size: clamp(1.9rem, 2.6vw, 3rem);
  line-height: .98;
  letter-spacing: -.055em;
  margin-bottom: .9rem;
}

.service-card p{
  color: rgba(250,250,250,.66);
  font-size: .98rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.service-card-featured p{
  color: rgba(17,17,17,.72);
}

.service-card ul{
  display: grid;
  gap: .55rem;
  list-style: none;
  color: rgba(250,250,250,.72);
  font-size: .9rem;
}

.service-card-featured ul{
  color: rgba(17,17,17,.72);
}

.service-card li{
  position: relative;
  padding-left: 1.05rem;
}

.service-card li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 12px rgba(255,106,0,.45);
}

.service-card-featured li::before{
  background: #111;
  box-shadow: none;
}

/* VISUALES DECORATIVOS */
.service-visual{
  position: absolute;
  left: 50%;
  bottom: -80px;
  width: 270px;
  height: 270px;
  transform: translateX(-50%);
  opacity: .9;
  pointer-events: none;
}

.landing-visual{
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255,106,0,.78), rgba(252,176,69,.28)),
    linear-gradient(45deg, transparent 42%, rgba(255,255,255,.18) 43%, transparent 44%);
  filter: blur(.1px);
}

.corporate-visual{
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 45%, rgba(255,255,255,.7), transparent 22%),
    radial-gradient(circle, rgba(17,17,17,.18), rgba(17,17,17,.04) 50%, transparent 70%);
  border: 38px solid rgba(17,17,17,.12);
}

.ecommerce-visual{
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255,106,0,.45), rgba(255,255,255,.08)),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.14) 0 12px,
      transparent 12px 24px
    );
}

/* ANIMACIÓN ON SCROLL */
.service-reveal{
  opacity: 0;
  transform: translateY(42px);
  filter: blur(14px);
  transition:
    opacity .85s ease,
    transform .85s cubic-bezier(.22,.61,.36,1),
    filter .85s ease;
}

.service-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.services-heading .service-reveal:nth-child(1){
  transition-delay: .05s;
}

.services-heading .service-reveal:nth-child(2){
  transition-delay: .16s;
}

.services-heading .service-reveal:nth-child(3){
  transition-delay: .28s;
}

.services-grid .service-card:nth-child(1){
  transition-delay: .12s;
}

.services-grid .service-card:nth-child(2){
  transition-delay: .24s;
}

.services-grid .service-card:nth-child(3){
  transition-delay: .36s;
}

/* ===============================
   SECCIÓN PORTFOLIO
   =============================== */

.portfolio-section{
  position: relative;
  overflow: hidden;
  padding: 0 5vw 8rem;
  color: var(--white);
  background: transparent;
}


.portfolio-container{
  position: relative;
  z-index: 2;
  width: min(1450px, 100%);
  margin: 0 auto;
}

/* HEADER */

.portfolio-heading{
  max-width: 900px;
  margin-bottom: 4rem;
}

.portfolio-kicker{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  color: rgba(250,250,250,.7);
  font-size: .88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.portfolio-kicker::before{
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-light));
  box-shadow: 0 0 16px rgba(255,106,0,.5);
}

.portfolio-heading h2{
  font-family: "Inter", sans-serif;
  font-size: clamp(2.8rem, 5.2vw, 5.8rem);
  line-height: .95;
  letter-spacing: -.065em;
  margin-bottom: 1rem;
}

.portfolio-heading h2 span{
  position: relative;
  display: inline-block;
  font-family: "Aldrich", sans-serif;
  background: linear-gradient(90deg, var(--orange), var(--orange-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.portfolio-heading h2 span::after{
  content: "";
  display: inline-block;
  width: .08em;
  height: .82em;
  margin-left: .12em;
  translate: 0 .08em;
  border-radius: 999px;
  background: var(--orange-light);
  box-shadow: 0 0 16px rgba(255,106,0,.55);
  animation: typingCursorBlink .85s steps(1) infinite;
}

.portfolio-heading p{
  max-width: 760px;
  color: rgba(250,250,250,.68);
  font-size: 1.08rem;
  line-height: 1.7;
}
/* GRID NUEVO:
   1 grande izquierda + 2 chicas derecha */

.portfolio-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.portfolio-card{
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  height: 100%;

  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0), rgba(255,255,255,.018)),
    rgba(18,19,26,.62);

  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 30px 90px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(16px);
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
     display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.portfolio-card:hover{
  transform: translateY(-10px);
  border-color: rgba(255,106,0,.36);
  box-shadow:
    0 38px 110px rgba(0,0,0,.58),
    0 0 34px rgba(255,106,0,.12),
    inset 0 1px 0 rgba(255,255,255,.1);
}

/* Card grande izquierda */
.portfolio-card-featured{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  min-height: 640px;
}



.portfolio-card::after{
  content: "↗";
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(250,250,250,.8);
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1;
  z-index: 3;
  opacity: 0;
  transform: translateY(6px) rotate(-45deg);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.portfolio-card:hover::after{
  opacity: 1;
  transform: translateY(0);
  background: rgba(255, 106, 0, 0.644);
}



.portfolio-meta-row{
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}



.portfolio-card-top{
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.portfolio-card-bottom{
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

/* IMÁGENES */

.portfolio-image{
  position: relative;
  overflow: hidden;
}

.portfolio-card-featured .portfolio-image{
  height: 390px;
}

.portfolio-card-small .portfolio-image{
  height: 165px;
}

.portfolio-image::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 35%, rgba(0,0,0,.62) 100%),
    linear-gradient(90deg, rgba(255,106,0,.16), transparent 45%);
  pointer-events: none;
}

.portfolio-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: brightness(.82) contrast(1.05) saturate(1.04);
  transition: transform .6s ease, filter .6s ease;
}

.portfolio-card:hover .portfolio-image img{
  transform: scale(1.045);
  filter: brightness(.95) contrast(1.08) saturate(1.08);
}

/* CONTENIDO */

.portfolio-content{
  position: relative;
  z-index: 2;
    background:
    linear-gradient(
      180deg,
      rgba(18,19,26,.66) 0%,
      rgba(18,19,26,.46) 100%
    );
  backdrop-filter: blur(10px);
}

.portfolio-card-featured .portfolio-content{
  padding: 1.45rem 1.55rem 1.6rem;
}

.portfolio-card-small .portfolio-content{
  padding: 1rem 1.1rem 1.1rem;
}

.portfolio-type{
  display: inline-flex;
  margin-bottom: .75rem;
  padding: .36rem .66rem;
  border-radius: 999px;
  background: rgba(255,106,0,.12);
  color: var(--orange-light);
  border: 1px solid rgba(255,106,0,.22);
  font-size: .76rem;
  font-weight: 800;
}

.portfolio-content h3{
  line-height: 1;
  letter-spacing: -.05em;
}

.portfolio-card-featured h3{
  font-size: clamp(2rem, 2.6vw, 2.65rem);
  margin-bottom: .65rem;
}

.portfolio-card-small h3{
  margin-bottom: .5rem;
}

.portfolio-card-small p{
  margin-bottom: 0;
}

.portfolio-content p{
  color: rgba(250,250,250,.66);
}

.portfolio-card-featured p{
  max-width: 680px;
  line-height: 1.6;
  margin-bottom: .9rem;
}

.portfolio-card-small::after{
  content: "↗";
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(250,250,250,.8);
  font-weight: 900;
  z-index: 3;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.portfolio-card-small:hover::after{
  opacity: 1;
  transform: translateY(0);
  background: rgba(255, 106, 0, 0.644);
}

.portfolio-tags{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.portfolio-card-featured .portfolio-tags{
  margin-bottom: 1rem;
}

.portfolio-card-small .portfolio-type{
  margin-bottom: 0;
}

.portfolio-card-small .portfolio-tags{
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 0;
}

.portfolio-tags span{
  padding: .32rem .58rem;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: rgba(250,250,250,.76);
  border: 1px solid rgba(255,255,255,.11);
  font-size: .76rem;
  font-weight: 700;
}

.portfolio-card-small .portfolio-tags span{
  font-size: .68rem;
  padding: .26rem .48rem;
}

.portfolio-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 1rem;
  border-radius: 13px;
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  color: #111;
  font-weight: 900;
  box-shadow: 0 16px 34px rgba(255,106,0,.20);
  transition: transform .18s ease, box-shadow .18s ease;
}

.portfolio-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(255,106,0,.28);
}



/* Número decorativo sutil */

.portfolio-card::before{
  position: absolute;
  right: 1rem;
  bottom: .8rem;
  font-family: "Aldrich", sans-serif;
  line-height: 1;
  color: rgba(255,255,255,.035);
  pointer-events: none;
  z-index: 1;
}

.portfolio-card-featured::before{
  content: "01";
  font-size: 5rem;
}

.portfolio-card-top::before{
  content: "02";
  font-size: 3.2rem;
}

.portfolio-card-bottom::before{
  content: "03";
  font-size: 3.2rem;
}


/* ANIMACIONES */

.portfolio-reveal{
  opacity: 0;
  filter: blur(14px);
  transform: translateY(42px);
  transition:
    opacity .85s ease,
    transform .85s cubic-bezier(.22,.61,.36,1),
    filter .85s ease;
}

.portfolio-reveal.is-visible{
  opacity: 1;
  filter: blur(0);
  transform: translate(0, 0);
}

.portfolio-card-featured.portfolio-reveal{
  transform: translateX(-90px) translateY(28px);
}

.portfolio-card-top.portfolio-reveal{
  transform: translateX(90px) translateY(22px);
}

.portfolio-card-bottom.portfolio-reveal{
  transform: translateX(90px) translateY(70px);
}

.portfolio-card-featured.portfolio-reveal.is-visible,
.portfolio-card-top.portfolio-reveal.is-visible,
.portfolio-card-bottom.portfolio-reveal.is-visible{
  transform: translate(0, 0);
}

.portfolio-heading .portfolio-reveal:nth-child(1){
  transition-delay: .05s;
}

.portfolio-heading .portfolio-reveal:nth-child(2){
  transition-delay: .16s;
}

.portfolio-heading .portfolio-reveal:nth-child(3){
  transition-delay: .28s;
}

.portfolio-card-featured{
  transition-delay: .12s;
}

.portfolio-card-top{
  transition-delay: .26s;
}

.portfolio-card-bottom{
  transition-delay: .40s;
}
.portfolio-card::before{
  position: absolute;
  right: 1.2rem;
  bottom: 1rem;
  font-family: "Aldrich", sans-serif;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1;
  color: rgba(255,255,255,.035);
  pointer-events: none;
  z-index: 1;
}

.portfolio-card-featured::before{
  content: "01";
}

.portfolio-card-top::before{
  content: "02";
  font-size: 3.4rem;
}

.portfolio-card-bottom::before{
  content: "03";
  font-size: 3.4rem;
}

/* ===============================
   PORTFOLIO STATS
   =============================== */

.portfolio-stats{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 3.5rem;
}

.stat-card{
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: 1.35rem;
  border-radius: 26px;

  background:
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.022)),
    rgba(18,19,26,.62);

  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 24px 70px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(16px);
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.stat-card::before{
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -55px;
  top: -55px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,106,0,.22), transparent 70%);
  opacity: .8;
  pointer-events: none;
}

.stat-card::after{
  content: "";
  position: absolute;
  inset: auto 1.2rem 1rem auto;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(135deg, rgba(255,106,0,.18), rgba(255,255,255,.03));
  opacity: .45;
  transform: rotate(10deg);
}

.stat-card:hover{
  transform: translateY(-8px);
  border-color: rgba(255,106,0,.34);
  box-shadow:
    0 32px 90px rgba(0,0,0,.48),
    0 0 30px rgba(255,106,0,.10),
    inset 0 1px 0 rgba(255,255,255,.09);
}

.stat-number{
  position: relative;
  z-index: 2;
  display: inline-flex;
  margin-bottom: .9rem;
  font-family: "Aldrich", sans-serif;
  font-size: clamp(2.6rem, 4.2vw, 4.5rem);
  line-height: 1;
  background: linear-gradient(90deg, var(--orange), var(--orange-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-card h3{
  position: relative;
  z-index: 2;
  font-size: 1.2rem;
  line-height: 1.1;
  margin-bottom: .65rem;
}

.stat-card p{
  position: relative;
  z-index: 2;
  color: rgba(250,250,250,.64);
  font-size: .94rem;
  line-height: 1.55;
  max-width: 95%;
}

/* Animación de aparición izquierda -> derecha */
.stats-reveal{
  opacity: 0;
  filter: blur(14px);
  transform: translateX(-38px) translateY(28px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22,.61,.36,1),
    filter .8s ease;
}

.stats-reveal.is-visible{
  opacity: 1;
  filter: blur(0);
  transform: translate(0, 0);
}

.portfolio-stats .stat-card:nth-child(1){
  transition-delay: .06s;
}

.portfolio-stats .stat-card:nth-child(2){
  transition-delay: .18s;
}

.portfolio-stats .stat-card:nth-child(3){
  transition-delay: .30s;
}

.portfolio-stats .stat-card:nth-child(4){
  transition-delay: .42s;
}

/* ===============================
   SECCIÓN CLIENTES / RESEÑAS
   =============================== */

.clients-section{
  position: relative;
  overflow: hidden;
  padding: 1rem 5vw 10rem;
  color: var(--white);
  background: transparent;
}

.clients-container{
  width: min(1450px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

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

.clients-heading{
  max-width: 920px;
  margin: 0 0 3.8rem;
  text-align: left;
}

.clients-kicker{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  color: rgba(250,250,250,.7);
  font-size: .88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.clients-kicker::before{
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-light));
  box-shadow: 0 0 16px rgba(255,106,0,.5);
}

.clients-heading h2{
  font-family: "Inter", sans-serif;
  font-size: clamp(2.8rem, 5.2vw, 5.8rem);
  line-height: .95;
  letter-spacing: -.065em;
  margin-bottom: 1rem;
}

.clients-heading h2 span{
  position: relative;
  display: inline-block;
  font-family: "Aldrich", sans-serif;
  background: linear-gradient(90deg, var(--orange), var(--orange-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.clients-heading h2 span::after{
  content: "";
  display: inline-block;
  width: .08em;
  height: .82em;
  margin-left: .12em;
  translate: 0 .08em;
  border-radius: 999px;
  background: var(--orange-light);
  box-shadow: 0 0 16px rgba(255,106,0,.55);
  animation: typingCursorBlink .85s steps(1) infinite;
}

.clients-heading p{
  margin-left: 0;
  margin-right: 0;
}

/* ===============================
   LAYOUT GOOGLE + REVIEWS
   =============================== */

.clients-proof-row{
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 1.2rem;
  align-items: stretch;
}

/* ===============================
   GOOGLE SIDE CARD NUEVO
   =============================== */

.google-side-card{
  position: relative;
  min-height: 285px;
  padding: 1.55rem 1.35rem;
  border-radius: 26px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;


}

.google-brand{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  margin-bottom: 1.25rem;
}

.google-word{
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(3.2rem, 4vw, 4.5rem);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.6rem;
}

.g-blue{ color:#4285F4; }
.g-red{ color:#EA4335; }
.g-yellow{ color:#FBBC05; }
.g-green{ color:#34A853; }

.google-reviews-line{
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}

.google-reviews-text{
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 900;
  line-height: 1;
  color: rgba(250,250,250,.72);
  letter-spacing: -.04em;
}

.google-stars{
  color: #fbbc05;
  font-size: 1.2rem;
  letter-spacing: .14em;
  line-height: 1;
  text-shadow: 0 0 18px rgba(251,188,5,.35);
}

.google-review-btn{
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: 0 1rem;
  border-radius: 14px;

  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  color: var(--white);
  font-weight: 900;

  box-shadow:
    0 18px 50px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08);

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

.google-review-btn span{
  color: var(--orange-light);
  transition: transform .2s ease;
  font-size: 1.2rem;
  font-weight: 800;
}

.google-review-btn:hover{
  transform: translateY(-3px);
  border-color: rgba(255,106,0,.34);
  background: rgba(255,106,0,.10);
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    0 0 28px rgba(255,106,0,.10);
}

.google-review-btn:hover span{
  transform: translateX(3px);
  
}

/* ===============================
   REVIEWS
   =============================== */

.reviews-wrapper{
  min-width: 0;
}

.reviews-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

.review-card{
  position: relative;
  min-height: 235px;
  padding: 1.35rem;
  border-radius: 26px;

  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.025)),
    rgba(18,19,26,.62);

  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 24px 70px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(16px);
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.review-card::before{
  content: "“";
  position: absolute;
  right: 1rem;
  bottom: -.25rem;
  font-family: Georgia, serif;
  font-size: 7rem;
  line-height: 1;
  color: rgba(255,255,255,.035);
  pointer-events: none;
}

.review-card:hover{
  transform: translateY(-8px);
  border-color: rgba(255,106,0,.32);
  box-shadow:
    0 32px 90px rgba(0,0,0,.48),
    0 0 30px rgba(255,106,0,.10),
    inset 0 1px 0 rgba(255,255,255,.09);
}

.review-head{
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
}

.review-avatar{
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-light));
  color: #111;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(255,106,0,.22);
}

.review-head h3{
  font-size: 1.05rem;
  line-height: 1.1;
  margin-bottom: .18rem;
}

.review-head span{
  color: rgba(250,250,250,.52);
  font-size: .82rem;
  font-weight: 700;
}

.review-stars{
  color: #fbbc05;
  letter-spacing: .12em;
  font-size: .95rem;
  margin-bottom: .9rem;
  text-shadow: 0 0 14px rgba(251,188,5,.28);
}

.review-card p{
  position: relative;
  z-index: 2;
  color: rgba(250,250,250,.72);
  font-size: .98rem;
  line-height: 1.62;
}

/* ===============================
   ANIMACIÓN CLIENTES
   =============================== */

.clients-reveal{
  opacity: 0;
  filter: blur(14px);
  transform: translateY(42px);
  transition:
    opacity .85s ease,
    transform .85s cubic-bezier(.22,.61,.36,1),
    filter .85s ease;
}

.clients-reveal.is-visible{
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.google-side-card.clients-reveal{
  transition-delay: .08s;
}

.reviews-grid .review-card:nth-child(1){
  transition-delay: .12s;
}

.reviews-grid .review-card:nth-child(2){
  transition-delay: .22s;
}

.reviews-grid .review-card:nth-child(3){
  transition-delay: .32s;
}

.reviews-grid .review-card:nth-child(4){
  transition-delay: .42s;
}


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

.pricing-section{
  position: relative;
  padding: 0 0 7rem;
  overflow: hidden;
  background: transparent;
}

.pricing-container{
  width: min(1280px, 92%);
  margin: 0 auto;
  position: relative;
}

.pricing-heading{
  max-width: 920px;
  margin: 0 0 2.5rem;
  text-align: left;
}

.pricing-kicker{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1rem;
  color: rgba(250,250,250,.7);
  text-transform: uppercase;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .05em;
}

.pricing-kicker::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 14px rgba(255,106,0,.55);
}

.pricing-heading h2{
  font-size: clamp(4rem, 6vw, 6rem);
  line-height: .95;
  letter-spacing: -.05em;
  margin-bottom: 1rem;
  color: var(--white);
}

.pricing-heading h2 span{
  background: linear-gradient(90deg, var(--orange), var(--orange-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  font-family: "Aldrich", sans-serif;
  color: transparent;
}

.pricing-heading h2 span::after{
  content: "";
  display: inline-block;
  width: .08em;
  height: .82em;
  margin-left: .12em;
  translate: 0 .08em;
  border-radius: 999px;
  background: var(--orange-light);
  box-shadow: 0 0 16px rgba(255,106,0,.55);
  animation: typingCursorBlink .85s steps(1) infinite;
}

.pricing-heading p{
  max-width: 760px;
  margin-left: 0;
  margin-right: 0;
  color: rgba(250,250,250,.72);
  line-height: 1.7;
  font-size: 1.02rem;
}

.pricing-bg-word{
  position: absolute;
  left: 50%;
  top: 6.5rem;
  transform: translateX(-50%);
  z-index: 1;
  font-size: clamp(7rem, 17vw, 16rem);
  line-height: .85;
  letter-spacing: -.07em;
  font-weight: 900;
  color: rgba(255,255,255,.045);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* ===============================
   PRICING GRID DESKTOP GRANDE
   =============================== */

.pricing-grid{
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: .92fr 1.04fr .92fr;
  gap: 0;
  align-items: start;
  margin-top: 3.1rem;
}

.price-card{
  --card-rest-transform: translateY(0) scale(1);
  --card-hover-transform: translateY(-10px) scale(1);

  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 1.5rem 1.4rem 1.25rem;

  background:
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
    rgba(14,15,22,.52);

  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 24px 70px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(18px);
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    opacity .8s ease,
    filter .8s ease;
}

/* Card izquierda: más chica y debajo */
.pricing-grid .price-card:nth-child(1){
  --card-rest-transform: translateX(48px) translateY(42px) scale(.91);
  --card-hover-transform: translateX(48px) translateY(30px) scale(.925);
  z-index: 1;
}

/* Card central: protagonista */
.pricing-grid .price-card:nth-child(2){
  --card-rest-transform: translateY(0) scale(1);
  --card-hover-transform: translateY(-14px) scale(1.01);
  z-index: 4;
}

/* Card derecha: más chica y debajo */
.pricing-grid .price-card:nth-child(3){
  --card-rest-transform: translateX(-32px) translateY(42px) scale(.91);
  --card-hover-transform: translateX(-32px) translateY(30px) scale(.925);
  z-index: 1;
}

.price-card::before{
  content: "";
  position: absolute;
  inset: auto -60px -60px auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,106,0,.16), transparent 70%);
  pointer-events: none;
   opacity: .55;
}

.price-card:hover{
  border-color: rgba(255,106,0,.34);
  box-shadow:
    0 36px 90px rgba(0,0,0,.42),
    0 0 30px rgba(255,106,0,.08),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.pricing-grid .price-card.pricing-reveal.is-visible:hover{
  transform: var(--card-hover-transform);
}

.price-card-featured{
    background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.018)
    ),
    rgba(14,15,22,.34);

  border-color: rgba(255,106,0,.34);

  box-shadow:
    0 34px 95px rgba(0,0,0,.38),
    0 0 34px rgba(255,106,0,.10),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(11px);
}

.price-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .42rem .8rem;
  border-radius: 999px;
  margin-bottom: 1rem;
  background: rgba(255,106,0,.12);
  color: var(--orange-light);
  border: 1px solid rgba(255,106,0,.26);
  font-size: .78rem;
  font-weight: 800;
}

.price-badge-featured{
  background: linear-gradient(90deg, rgba(255,106,0,.18), rgba(232,202,132,.14));
}

.price-card h3{
  font-size: clamp(2rem, 3vw, 3.4rem);
  line-height: .94;
  letter-spacing: -.05em;
  margin-bottom: .85rem;
  color: rgba(250,250,250,.88);
}

.price-card h3 span{
  display: block;
  background: linear-gradient(90deg, var(--orange), var(--orange-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.price-subtitle{
  color: rgba(250,250,250,.62);
  margin-bottom: 1.4rem;
  line-height: 1.45;
  min-height: 42px;
}

.price-value{
  font-size: clamp(2.3rem, 3vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  margin-bottom: 1.5rem;
  color: var(--white);
}

.price-features{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .82rem;
  margin-bottom: 1.8rem;
}

.price-features li{
  position: relative;
  padding-left: 1.55rem;
  color: rgba(250,250,250,.82);
  line-height: 1.45;
}

.price-features li::before{
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange-light);
  font-weight: 900;
}

.price-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0 1rem;
  border-radius: 16px;
  margin-bottom: 1rem;

  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  color: #111;
  font-weight: 900;
  box-shadow: 0 18px 36px rgba(255,106,0,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}

.price-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(255,106,0,.30);
}

.price-card small{
  display: block;
  color: rgba(250,250,250,.46);
  text-align: center;
  line-height: 1.45;
  font-size: .82rem;
}

.pricing-note{
  max-width: 850px;
  margin: 4.8rem auto 0;
  text-align: center;
  color: rgba(250,250,250,.62);
  line-height: 1.7;
}

/* ===============================
   REVEAL ANIMATION
   =============================== */

.pricing-reveal{
  opacity: 0;
  transform: translateY(50px);
  filter: blur(12px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22,.61,.36,1),
    filter .8s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.pricing-reveal.is-visible{
  opacity: 1;
  transform: var(--card-rest-transform, translateY(0));
  filter: blur(0);
}

.pricing-grid .price-card:nth-child(1).pricing-reveal{
  transition-delay: .06s;
}

.pricing-grid .price-card:nth-child(2).pricing-reveal{
  transition-delay: .16s;
}

.pricing-grid .price-card:nth-child(3).pricing-reveal{
  transition-delay: .26s;
}



/* ============================= */
/* WHATSAPP FLOTANTE */
/* ============================= */

.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;

  width: 64px;
  height: 64px;

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

  border-radius: 50%;
  text-decoration: none;

  background: #25d366;
  color: #fff;

  font-size: 2rem;

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.35),
    0 0 0 0 rgba(37, 211, 102, 0.55);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;

  animation: whatsappPulse 2.4s infinite;
}

.whatsapp-float:hover {
  transform: translateY(-4px) scale(1.05);
  filter: brightness(1.05);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(37, 211, 102, 0.45);
}


/* Por si antes usabas imagen */
.whatsapp-float img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
}

@keyframes whatsappPulse {
  0% {
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.35),
      0 0 0 0 rgba(37, 211, 102, 0.55);
  }

  70% {
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.35),
      0 0 0 16px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.35),
      0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* ===============================
   CONTACTO + HUBSPOT FORM
   =============================== */

.contact-section{
  position: relative;
  overflow: hidden;
  padding: 5rem 5vw 7rem;
  color: var(--white);
  background: transparent;
}

.contact-section::before{
  content: "";
  position: absolute;
  right: -240px;
  top: 10%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,106,0,.18), transparent 68%);
  filter: blur(42px);
  pointer-events: none;
}

.contact-container{
  width: min(1280px, 92%);
  margin: 0 auto;
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.contact-copy{
  max-width: 560px;
}

.contact-kicker{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;

  color: rgba(250,250,250,.7);
  font-size: .88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.contact-kicker::before{
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-light));
  box-shadow: 0 0 16px rgba(255,106,0,.5);
}

.contact-copy h2{
  font-size: clamp(2.8rem, 6vw, 6rem);
  line-height: .95;
  letter-spacing: -.06em;
  margin-bottom: 1rem;
}

.contact-copy h2 span{
  font-family: "Aldrich", sans-serif;
  background: linear-gradient(90deg, var(--orange), var(--orange-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-copy h2 span{
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, var(--orange), var(--orange-light), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-copy h2 span::after{
  content: "";
  display: inline-block;
  width: .08em;
  height: .82em;
  margin-left: .12em;
  translate: 0 .08em;
  border-radius: 999px;
  background: var(--orange-light);
  box-shadow: 0 0 16px rgba(255,106,0,.55);
  animation: typingCursorBlink .85s steps(1) infinite;
}

.contact-copy p{
  color: rgba(250,250,250,.68);
  font-size: 1.05rem;
  line-height: 1.7;
}

.contact-benefits{
  display: grid;
  gap: .8rem;
  margin-top: 1.6rem;
}

.contact-benefits p{
  width: fit-content;
  padding: .75rem 1rem;
  border-radius: 999px;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(250,250,250,.82);

  font-size: .92rem;
  font-weight: 700;
}

/* CARD DEL FORM */

.contact-form-card{
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: clamp(1.25rem, 3vw, 2rem);

  background:
    linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.025)),
    rgba(18,19,26,.78);

  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 30px 90px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter: blur(16px);
}

.contact-form-card::before{
  content: "";
  position: absolute;
  left: -120px;
  top: -120px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,106,0,.22), transparent 70%);
  pointer-events: none;
}

.contact-form-card > *{
  position: relative;
  z-index: 2;
}

/* ===============================
   ESTILOS HUBSPOT
   =============================== */

.contact-form-card .hs-form{
  width: 100%;
  font-family: "Inter", system-ui, sans-serif;
}

.contact-form-card .hs-form fieldset{
  max-width: 100% !important;
}

.contact-form-card .hs-form-field{
  margin-bottom: 1rem;
}

.contact-form-card .hs-form label{
  display: block;
  margin-bottom: .45rem;

  color: rgba(250,250,250,.82);
  font-size: .88rem;
  font-weight: 700;
}

.contact-form-card .hs-form .hs-input{
  width: 100% !important;
  min-height: 52px;
  padding: 0 1rem;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.13);

  background: rgba(255,255,255,.07);
  color: var(--white);

  font-family: "Inter", system-ui, sans-serif;
  font-size: .95rem;

  outline: none;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.contact-form-card .hs-form textarea.hs-input{
  min-height: 135px;
  padding: 1rem;
  resize: vertical;
}

.contact-form-card .hs-form .hs-input::placeholder{
  color: rgba(250,250,250,.38);
}

.contact-form-card .hs-form .hs-input:focus{
  border-color: rgba(255,106,0,.72);
  background: rgba(255,255,255,.095);
  box-shadow:
    0 0 0 4px rgba(255,106,0,.12),
    0 0 22px rgba(255,106,0,.12);
}

/* Selects / teléfono */

.contact-form-card .hs-form select.hs-input{
  cursor: pointer;
  color: var(--white);
}

.contact-form-card .hs-form option{
  color: #111;
}

/* Checkboxes privacidad */

.contact-form-card .hs-form .inputs-list{
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
}

.contact-form-card .hs-form .inputs-list li{
  margin: 0;
}

.contact-form-card .hs-form input[type="checkbox"]{
  width: 16px;
  height: 16px;
  margin-right: .5rem;
  accent-color: var(--orange);
}

.contact-form-card .hs-form .legal-consent-container,
.contact-form-card .hs-form .hs-richtext{
  color: rgba(250,250,250,.62);
  font-size: .82rem;
  line-height: 1.55;
}

.contact-form-card .hs-form .legal-consent-container a,
.contact-form-card .hs-form .hs-richtext a{
  color: var(--orange-light);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Errores */

.contact-form-card .hs-error-msgs{
  list-style: none;
  padding: 0;
  margin: .35rem 0 0;
}

.contact-form-card .hs-error-msgs label{
  color: #ff8b8b;
  font-size: .78rem;
  font-weight: 700;
}

/* Botón */

.contact-form-card .hs_submit{
  margin-top: 1.4rem;
}

.contact-form-card .hs_submit .actions{
  margin: 0;
  padding: 0;
}

.contact-form-card .hs-button{
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 16px;

  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  color: #111;

  font-family: "Inter", system-ui, sans-serif;
  font-size: .98rem;
  font-weight: 900;

  cursor: pointer;
  box-shadow: 0 18px 36px rgba(255,106,0,.25);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.contact-form-card .hs-button:hover{
  transform: translateY(-3px);
  filter: brightness(1.04);
  box-shadow: 0 22px 46px rgba(255,106,0,.34);
}

/* Mensaje enviado */

.contact-form-card .submitted-message{
  padding: 1.2rem;
  border-radius: 20px;

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

  color: rgba(250,250,250,.82);
  font-size: 1rem;
  line-height: 1.6;
}

.contact-reveal{
  opacity: 0;
  filter: blur(14px);
  transform: translateY(48px);
  transition:
    opacity .85s ease,
    transform .85s cubic-bezier(.22,.61,.36,1),
    filter .85s ease;
}

.contact-reveal.is-visible{
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Texto entra primero */
.contact-copy.contact-reveal{
  transition-delay: .08s;
}

/* Formulario entra después */
.contact-form-card.contact-reveal{
  transition-delay: .24s;
}

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

@media (max-width: 920px){
  .contact-section{
    padding: 4rem 5vw 5.5rem;
  }

  .contact-container{
    grid-template-columns: 1fr;
  }

  .contact-copy{
    max-width: 100%;
  }

  .contact-form-card{
    border-radius: 24px;
  }
}

@media (max-width: 520px){
  .contact-container{
    width: min(100%, 100%);
  }

  .contact-copy h2{
    font-size: clamp(2.55rem, 15vw, 4rem);
  }

  .contact-benefits p{
    width: 100%;
    border-radius: 16px;
  }

  .contact-form-card{
    padding: 1rem;
  }

  .contact-form-card .hs-form .hs-input{
    min-height: 50px;
    border-radius: 13px;
  }

  .contact-form-card .hs-button{
    min-height: 54px;
    border-radius: 14px;
  }
}



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

.site-footer{
  position: relative;
  overflow: hidden;
  padding: 7rem 5vw 0;
  color: var(--white);
  background: transparent;
}

.site-footer::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -260px;
  width: 900px;
  height: 520px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,106,0,.13), transparent 68%);
  filter: blur(40px);
  pointer-events: none;
}

.footer-container{
  position: relative;
  z-index: 2;
  width: min(1450px, 100%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.25fr .65fr .75fr 1.25fr;
  gap: 1.4rem;
  align-items: stretch;
}

/* BRAND */

.footer-brand,
.footer-links,
.footer-cta{
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.022)),
    rgba(18,19,26,.58);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 24px 70px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
}

.footer-brand{
  padding: 1.45rem;
}

.footer-logo{
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.15rem;
}

.footer-logo img{
  width: 280px;
  height: auto;
  object-fit: contain;
}

.footer-brand p{
  max-width: 380px;
  color: rgba(250,250,250,.68);
  font-size: .98rem;
  line-height: 1.65;
  margin-bottom: 1.35rem;
}

.footer-contact-pills{
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.footer-contact-pills a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 .9rem;
  border-radius: 999px;

  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(250,250,250,.84);

  font-size: .84rem;
  font-weight: 800;

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

.footer-contact-pills a:hover{
  transform: translateY(-3px);
  background: rgba(255,106,0,.12);
  border-color: rgba(255,106,0,.34);
  color: var(--white);
}

/* LINKS */

.footer-links{
  padding: 1.45rem;
}

.footer-links h3{
  margin-bottom: 1rem;
  font-family: "Aldrich", sans-serif;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--orange-light);
}

.footer-links a{
  display: block;
  width: fit-content;
  margin-bottom: .75rem;
  color: rgba(250,250,250,.68);
  font-size: .93rem;
  font-weight: 700;
  transition: color .18s ease, transform .18s ease;
}

.footer-links a:hover{
  color: var(--orange-light);
  transform: translateX(4px);
}

/* CTA */

.footer-cta{
  padding: 1.55rem;
  position: relative;
  overflow: hidden;
}

.footer-cta::before{
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,106,0,.22), transparent 70%);
  pointer-events: none;
}

.footer-kicker{
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .85rem;
  color: rgba(250,250,250,.68);
  font-size: .8rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.footer-kicker::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-light));
  box-shadow: 0 0 14px rgba(255,106,0,.55);
}

.footer-cta h3{
  position: relative;
  z-index: 2;
  font-size: clamp(1.8rem, 2.2vw, 2.6rem);
  line-height: .98;
  letter-spacing: -.05em;
  margin-bottom: .8rem;
}

.footer-cta p{
  position: relative;
  z-index: 2;
  color: rgba(250,250,250,.68);
  font-size: .98rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.footer-cta-actions{
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.footer-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1rem;
  border-radius: 14px;
  font-weight: 900;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.footer-btn-primary{
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  color: #111;
  box-shadow: 0 18px 36px rgba(255,106,0,.22);
}

.footer-btn-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(255,106,0,.30);
}

.footer-btn-secondary{
  background: rgba(255,255,255,.07);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.13);
}

.footer-btn-secondary:hover{
  transform: translateY(-3px);
  background: rgba(255,106,0,.10);
  border-color: rgba(255,106,0,.34);
}

/* BOTTOM */

.footer-bottom{
  position: relative;
  z-index: 2;

  margin-top: 3rem;
  padding: 1.15rem 5vw;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  flex-wrap: wrap;

  border-top: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.16);
  color: rgba(250,250,250,.56);
  text-align: center;
}

.footer-bottom p,
.footer-bottom span{
  font-size: .88rem;
}

.footer-bottom strong{
  color: var(--white);
}

/* ANIMACIÓN */

.footer-reveal{
  opacity: 0;
  filter: blur(14px);
  transform: translateY(42px);
  transition:
    opacity .85s ease,
    transform .85s cubic-bezier(.22,.61,.36,1),
    filter .85s ease;
}

.footer-reveal.is-visible{
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.footer-container .footer-reveal:nth-child(1){
  transition-delay: .08s;
}

.footer-container .footer-reveal:nth-child(2){
  transition-delay: .18s;
}

.footer-container .footer-reveal:nth-child(3){
  transition-delay: .28s;
}

.footer-container .footer-reveal:nth-child(4){
  transition-delay: .38s;
}



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



@media (max-width: 1420px){
    .site-header{
    height: 64px;
    top: 14px;
    padding: 0 10px 0 14px;
  }

  .brand-logo{
    height: 36px;
  }

  .nav-toggle{
    display: grid;
  }
  .header-btn{
  display: none;
}

  .nav{
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .4rem;

    padding: .75rem;
    border-radius: 24px;
    background: rgba(15,16,22,.94);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 24px 70px rgba(0,0,0,.5);
    backdrop-filter: blur(18px);

    opacity: 0;
    transform: translateY(-10px) scale(.98);
    pointer-events: none;
    visibility: hidden;

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

  .nav a{
    width: 100%;
    padding: .95rem 1rem;
    border-radius: 16px;
    color: rgba(250,250,250,.86);
    font-size: .95rem;
    font-weight: 700;
  }

 

    .mobile-nav-cta{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 54px;
    margin-top: .4rem;
    padding: 0 1.2rem;

    border-radius: 16px;
    background: linear-gradient(90deg, var(--orange), var(--orange-light));
    color: #111 !important;

    font-weight: 900;
    text-align: center;

    box-shadow: 0 18px 36px rgba(255,106,0,.22);

    transition:
      transform .18s ease,
      box-shadow .18s ease,
      filter .18s ease;
  }

  .mobile-nav-cta:hover{
    transform: translateY(-3px);
    filter: brightness(1.04);
    box-shadow: 0 22px 46px rgba(255,106,0,.30);
  }

  body.nav-open .nav{
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
  }

body.nav-open .nav-toggle span:nth-child(1){
  top: 21px;
  transform: translateX(-50%) rotate(45deg);
}

body.nav-open .nav-toggle span:nth-child(2){
  opacity: 0;
}

body.nav-open .nav-toggle span:nth-child(3){
  top: 21px;
  transform: translateX(-50%) rotate(-45deg);
}

  .hero{
    padding: 120px 5vw 80px;
    min-height: auto;
  }

  .hero-content{
    width: min(920px, 100%);
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
  }

  .hero-copy{
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }

  .hero-pill,
  .hero-actions,
  .hero-proof{
       justify-content: center;
    text-align: center;
    width: 100%;
  }

  .hero-description{
    margin-left: auto;
    margin-right: auto;
  }

  .hero-title{
    max-width: 720px;
    margin: 0 auto;
    font-size: clamp(3rem, 8vw, 5rem);
  }

  .title-highlight{
    margin-left: auto;
    margin-right: auto;
  }

  .hero-visual{
    width: 100%;
    max-width: 920px;
    min-height: 680px;
    margin: 0 auto;
  }

  .hero-visual::before{
    width: 520px;
    height: 520px;
    right: 50%;
    top: 120px;
    transform: translateX(50%);
    filter: blur(42px);
  }

  .mockup-main{
    width: 86%;
    height: 420px;
    left: 7%;
    right: auto;
    top: 20px;
    z-index: 3;
  }

  .mockup-secondary{
    width: 56%;
    height: 300px;
    left: 0;
    bottom: 150px;
    z-index: 5;
    transform: rotate(-7deg);
  }

  .mockup-third{
    width: 40%;
    height: 215px;
    right: 2%;
    bottom: 135px;
    z-index: 2;
    transform: rotate(7deg);
  }

  .mockup-fourth{
    width: 48%;
    height: 245px;
    left: 50%;
    bottom: 0;
    z-index: 2;
    transform: translateX(-50%) rotate(-2deg);
  }

  .floating-logo{
    width: 52px;
    height: 52px;
  }

  .floating-logo-wordpress{
    left: 3%;
    top: 530px;
  }

  .floating-logo-js{
    right: 5%;
    top: 0;
  }

 /* El principal de Compramos Antigüedades aparece con el hero */
  body.is-loaded .reveal-mockup{
    animation: mockupIn .85s cubic-bezier(.22,.61,.36,1) .35s both;
  }

  /* Los otros 3 quedan ocultos hasta que el JS agrega la clase */
  body.is-loaded .hero-visual:not(.mockups-extra-visible) .reveal-mockup-delay,
  body.is-loaded .hero-visual:not(.mockups-extra-visible) .reveal-mockup-delay-2,
  body.is-loaded .hero-visual:not(.mockups-extra-visible) .reveal-mockup-delay-3{
    animation: none !important;
    opacity: 0;
  }

  /* Cuando entran en pantalla, aparecen */
  .hero-visual.mockups-extra-visible .reveal-mockup-delay{
    animation: mockupInSecondary .95s cubic-bezier(.22,.61,.36,1) .05s both;
  }

  .hero-visual.mockups-extra-visible .reveal-mockup-delay-2{
    animation: mockupInThird .95s cubic-bezier(.22,.61,.36,1) .22s both;
  }

  .hero-visual.mockups-extra-visible .reveal-mockup-delay-3{
    animation: mockupInFourth .95s cubic-bezier(.22,.61,.36,1) .38s both;
  }

  .clients-section{
    padding: 0 5vw 7rem;
  }

  .clients-proof-row{
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .google-side-card{
    min-height: auto;
    padding: 1.35rem 1.25rem;
    align-items: flex-start;
  }

  .google-brand{
    margin-bottom: 1rem;
  }

  .google-word{
    font-size: clamp(2.8rem, 5vw, 4rem);
  }

  .google-reviews-text{
    font-size: 1.55rem;
  }

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

  .portfolio-stats{
    gap: 1rem;
    margin-top: 3rem;
  }

  .stat-card{
    min-height: 190px;
    padding: 1.2rem;
    border-radius: 24px;
  }

  .stat-number{
    font-size: clamp(2.4rem, 4vw, 4rem);
    margin-bottom: .75rem;
  }

  .stat-card h3{
    font-size: 1.05rem;
    margin-bottom: .55rem;
  }

  .stat-card p{
    font-size: .88rem;
    line-height: 1.5;
  }
/* ===============================
   RESPONSIVE PRICING - MAX 1570px
   =============================== */


  .pricing-section{
    padding: 0 0 6rem;
  }

  .pricing-container{
    width: min(1180px, 92%);
  }

  .pricing-heading{
    margin-bottom: 2.2rem;
  }

  .pricing-heading h2{
    font-size: clamp(3rem, 7vw, 6.5rem);
  }

  .pricing-heading p{
    font-size: .98rem;
  }

  .pricing-bg-word{
    top: 7rem;
    font-size: clamp(6rem, 16vw, 13rem);
  }

  .pricing-grid{
    grid-template-columns: .93fr 1.04fr .93fr;
    gap: 0;
    margin-top: 2.6rem;
  }

  .pricing-grid .price-card:nth-child(1){
    --card-rest-transform: translateX(30px) translateY(32px) scale(.93);
    --card-hover-transform: translateX(30px) translateY(22px) scale(.94);
  }

  .pricing-grid .price-card:nth-child(2){
    --card-rest-transform: translateY(0) scale(1);
    --card-hover-transform: translateY(-10px) scale(1.01);
  }

  .pricing-grid .price-card:nth-child(3){
    --card-rest-transform: translateX(-20px) translateY(32px) scale(.93);
    --card-hover-transform: translateX(-20px) translateY(22px) scale(.94);
  }

  .price-card{
    padding: 1.25rem 1rem 1.1rem;
    border-radius: 26px;
  }

  .price-card h3{
    font-size: clamp(1.8rem, 2.5vw, 2.8rem);
  }

  .price-subtitle{
    font-size: .92rem;
    min-height: 42px;
  }

  .price-value{
    font-size: clamp(1.95rem, 2.6vw, 3rem);
  }

  .price-features{
    gap: .7rem;
  }

  .price-features li{
    font-size: .9rem;
    line-height: 1.4;
  }

  .price-btn{
    min-height: 52px;
  }

  .price-card small{
    font-size: .76rem;
  }

  .pricing-note{
    margin-top: 4rem;
  }


   .footer-container{
    width: min(1180px, 100%);
    grid-template-columns: 1.2fr .7fr .75fr 1.2fr;
    gap: 1rem;
  }

  .footer-brand,
  .footer-links,
  .footer-cta{
    border-radius: 24px;
  }

  .footer-logo img{
    width: 150px;
  }

  .footer-brand p,
  .footer-cta p{
    font-size: .92rem;
  }
}

/* Hasta 1100px: mejor 2 columnas */
@media (max-width: 1100px){

  .portfolio-stats{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .stat-card{
    min-height: 180px;
  }

}

@media (max-width: 820px){
  

  .header-btn{
    padding: .7rem .9rem;
    font-size: .85rem;
  }

  .hero{
    padding: 112px 18px 36px;
  }

   .hero-copy{
    text-align: center;
  }

  .hero-pill,
  .hero-actions,
  .hero-proof,
  .hero-description{
    margin-left: auto;
    margin-right: auto;
  }

  .hero-title{
    margin: 0 auto;
  }

  .title-highlight{
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions{
    justify-content: center;
    width: 100%;
  }

  .hero-actions .btn{
    width: auto;
  }

  .hero-proof{
    justify-content: center;
    text-align: center;
  }

  .hero-visual{
    width: 100%;
    max-width: 720px;
    min-height: 620px;
    margin: 0 auto;
    overflow: visible;
  }

  .hero-visual::before{
    width: 420px;
    height: 420px;
    right: 50%;
    top: 120px;
    transform: translateX(50%);
    filter: blur(40px);
  }

  .mockup-main{
    width: 92%;
    height: 345px;
    left: 4%;
    right: auto;
    top: 35px;
    z-index: 3;
  }

  .mockup-secondary{
    width: 64%;
    height: 205px;
    left: 2%;
    bottom: 155px;
    z-index: 5;
    transform: rotate(-7deg);
  }

  .mockup-third{
    width: 48%;
    height: 155px;
    right: 3%;
    bottom: 150px;
    z-index: 2;
    transform: rotate(7deg);
  }

  .mockup-fourth{
    width: 62%;
    height: 175px;
    left: 50%;
    bottom: 28px;
    z-index: 2;
    transform: translateX(-50%) rotate(-2deg);
  }

  .floating-logo{
    width: 42px;
    height: 42px;
  }

  .floating-logo-js{
    right: 7%;
    top: 12px;
  }

  .floating-logo-wordpress{
    left: 4%;
    top: 465px;
  }

  @keyframes mockupIn{
    to{
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes mockupInSecondary{
    to{
      opacity: 1;
      transform: translateY(0) scale(1) rotate(-7deg);
    }
  }

  @keyframes mockupInThird{
    to{
      opacity: .96;
      transform: translateY(0) scale(1) rotate(7deg);
    }
  }

  @keyframes mockupInFourth{
    to{
      opacity: .96;
      transform: translateX(-50%) translateY(0) scale(1) rotate(-2deg);
    }
  }

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

  .service-card{
    min-height: 430px;
  }

  .services-heading{
    text-align: left;
  }

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

.portfolio-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .portfolio-card-featured,
  .portfolio-card-top,
  .portfolio-card-bottom{
    grid-column: auto;
    grid-row: auto;
    min-height: auto;
  }

  .portfolio-card-featured .portfolio-image,
  .portfolio-card-small .portfolio-image{
    height: 300px;
  }

  .portfolio-card-featured.portfolio-reveal,
  .portfolio-card-top.portfolio-reveal,
  .portfolio-card-bottom.portfolio-reveal{
    transform: translateY(42px);
  }

  .portfolio-card-featured.portfolio-reveal.is-visible,
  .portfolio-card-top.portfolio-reveal.is-visible,
  .portfolio-card-bottom.portfolio-reveal.is-visible{
    transform: translateY(0);
  }

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

  .clients-section{
    padding: 5.5rem 18px 6rem;
  }

  .clients-heading{
    text-align: left;
    margin-bottom: 2.4rem;
  }

  .clients-heading h2{
    font-size: clamp(2.5rem, 12vw, 4.3rem);
  }

  .clients-heading p{
    font-size: .98rem;
  }

  .clients-proof-row{
    display: block;
  }

  .google-side-card{
    min-height: auto;
    margin-bottom: 1.3rem;
    padding: 1.2rem;
    align-items: flex-start;
  }

  .google-brand{
    margin-bottom: 1rem;
  }

  .google-word{
    font-size: clamp(2.6rem, 13vw, 4rem);
  }

  .google-reviews-line{
    gap: .55rem;
  }

  .google-reviews-text{
    font-size: 1.35rem;
  }

  .google-stars{
    font-size: 1rem;
    letter-spacing: .1em;
  }

  .google-review-btn{
    width: 100%;
  }

  .reviews-wrapper{
    width: 100%;
    overflow: hidden;
  }

  .reviews-grid{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    grid-template-columns: none;
    gap: 1rem;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    padding-bottom: 1.15rem;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
    scrollbar-color: rgba(255,106,0,.65) rgba(255,255,255,.08);
  }

  .reviews-grid .review-card{
    scroll-snap-align: start;
    min-height: 260px;
  }

  .reviews-grid::-webkit-scrollbar{
    height: 5px;
  }

  .reviews-grid::-webkit-scrollbar-track{
    background: rgba(255,255,255,.08);
    border-radius: 999px;
  }

  .reviews-grid::-webkit-scrollbar-thumb{
    background: linear-gradient(90deg, var(--orange), var(--orange-light));
    border-radius: 999px;
  }

  .review-card:hover{
    transform: none;
  }
    .portfolio-stats{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2.5rem;
    gap: .9rem;
  }

  .stat-card{
    min-height: 170px;
    padding: 1.05rem;
    border-radius: 22px;
  }

  .stat-number{
    font-size: clamp(2.3rem, 8vw, 3.6rem);
    margin-bottom: .65rem;
  }

  .stat-card h3{
    font-size: 1rem;
  }

  .stat-card p{
    font-size: .84rem;
    line-height: 1.45;
  }

  .stat-card::after{
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }
    .pricing-section{
    padding: 0 0 4rem;
  }

  .pricing-container{
    width: min(720px, calc(100% - 36px));
  }

  .pricing-heading{
    text-align: left;
    margin-bottom: 2rem;
  }

  .pricing-heading h2{
    font-size: clamp(2.8rem, 12vw, 5rem);
  }

  .pricing-heading p{
    font-size: .98rem;
    margin-left: 0;
  }

  .pricing-bg-word{
    top: 9rem;
    left: 0;
    transform: none;
    font-size: clamp(5rem, 22vw, 9rem);
    opacity: .8;
  }

  .pricing-grid{
    grid-template-columns: 1fr;
    max-width: 620px;
    margin: 2.4rem auto 0;
    gap: 1.25rem;
  }

  .pricing-grid .price-card:nth-child(1),
  .pricing-grid .price-card:nth-child(2),
  .pricing-grid .price-card:nth-child(3){
    --card-rest-transform: translateY(0) scale(1);
    --card-hover-transform: translateY(-8px) scale(1);
    z-index: auto;
  }

  .price-card{
    border-radius: 26px;
    padding: 1.35rem 1.2rem 1.15rem;
  }

  .price-card h3{
    font-size: clamp(2.4rem, 10vw, 4rem);
  }

  .price-subtitle{
    min-height: auto;
    font-size: .98rem;
  }

  .price-value{
    font-size: clamp(2.3rem, 10vw, 3.5rem);
  }

  .price-features{
    gap: .75rem;
  }

  .price-features li{
    font-size: .96rem;
  }

  .price-btn{
    min-height: 54px;
  }

  .pricing-note{
    margin-top: 2rem;
    text-align: left;
  }

   .contact-copy h2{
    font-size: clamp(2.55rem, 15vw, 4rem);
  }

    .site-footer{
    padding: 5rem 18px 0;
  }

  .footer-container{
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .footer-brand,
  .footer-links,
  .footer-cta{
    padding: 1.25rem;
  }

  .footer-logo img{
    width: 150px;
  }

  .footer-brand p{
    max-width: 100%;
  }

  .footer-contact-pills{
    gap: .55rem;
  }

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

  .footer-links a{
    margin-bottom: .65rem;
  }

  .footer-cta h3{
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .footer-cta-actions{
    flex-direction: column;
  }

  .footer-btn{
    width: 100%;
  }

  .footer-bottom{
    margin-top: 2rem;
    padding: 1rem 18px;
  }
}



@media (max-width: 480px){

  .hero{
    padding: 98px 16px 46px;
  }

  .site-header{
    width: calc(100% - 28px);
    height: 62px;
  }

  .brand-logo{
    height: 32px;
  }

  .hero-copy{
    text-align: center;
  }

  .hero-pill{
    font-size: .76rem;
    padding: .42rem .65rem;
    margin-bottom: 1.15rem;
  }

  .hero-title{
    font-size: clamp(2.45rem, 13vw, 3.45rem);
    line-height: .98;
    letter-spacing: -.055em;
    max-width: 390px;
  }

  .hero-description{
    max-width: 360px;
    font-size: .95rem;
    line-height: 1.6;
    margin-top: 1.15rem;
  }

  .hero-actions{
    width: 100%;
    max-width: 360px;
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin-top: 1.65rem;
  }

  .hero-actions .btn{
    width: 100%;
    min-height: 54px;
  }

  .hero-proof{
    max-width: 360px;
    justify-content: center;
    align-items: center;
    gap: .65rem;
    font-size: .86rem;
    line-height: 1.35;
    margin-top: 1.1rem;
  }

  .proof-avatars span{
    width: 30px;
    height: 30px;
  }

  /* MOCKUPS */
  .hero-visual{
    max-width: 390px;
    min-height: 430px;
    margin-top: 1.8rem;
  }

  .hero-visual::before{
    width: 310px;
    height: 310px;
    top: 90px;
    right: 50%;
    transform: translateX(50%);
    filter: blur(34px);
  }

  .mockup{
    border-radius: 18px;
  }

  .browser-bar{
    height: 28px;
    padding: 0 10px;
  }

  .browser-bar span{
    width: 8px;
    height: 8px;
  }

  .mockup img{
    height: calc(100% - 28px);
  }

  .mockup-main{
    width: 96%;
    height: 220px;
    left: 2%;
    top: 18px;
    z-index: 3;
  }

  .mockup-secondary{
    width: 72%;
    height: 140px;
    left: -2%;
    bottom: 105px;
    z-index: 5;
    transform: rotate(-7deg);
  }

  .mockup-third{
    width: 50%;
    height: 105px;
    right: -1%;
    bottom: 102px;
    z-index: 2;
    transform: rotate(7deg);
  }

  .mockup-fourth{
    width: 70%;
    height: 125px;
    left: 50%;
    bottom: 10px;
    z-index: 2;
    transform: translateX(-50%) rotate(-2deg);
  }

  .floating-logo{
    width: 34px;
    height: 34px;
  }

  .floating-logo-js{
    right: 4%;
    top: 6px;
  }

  .floating-logo-wordpress{
    left: 0;
    top: 330px;
  }

  /* CARRUSEL DE TECNOLOGÍAS */
  .services-marquee-track{
    padding: 2.3rem 0 1.7rem;
    gap: 1.7rem;
  }

  .marquee-logo{
    width: 86px;
    height: 58px;
  }

  .marquee-logo img{
    max-width: 54px;
    max-height: 34px;
  }

  
  .portfolio-section{
    padding: 5rem 18px 6rem;
  }

  .portfolio-heading{
    margin-bottom: 2.6rem;
  }

  .portfolio-heading h2{
    font-size: clamp(2.5rem, 13vw, 4rem);
  }

  .portfolio-heading p{
    font-size: .98rem;
  }

  .portfolio-card{
    border-radius: 24px;
  }

  .portfolio-card-featured .portfolio-image,
  .portfolio-card-small .portfolio-image{
    height: 230px;
  }

  .portfolio-card-featured .portfolio-content,
  .portfolio-card-small .portfolio-content{
    padding: 1.2rem;
  }

  .portfolio-card-featured h3,
  .portfolio-card-small h3{
    font-size: 1.85rem;
  }

  .portfolio-btn{
    width: 100%;
  }

    .clients-section{
    padding: 5rem 18px 6rem;
  }

  .clients-heading{
    text-align: left;
    margin-bottom: 2.6rem;
  }

  .google-badge{
    margin-left: 0;
  }

  .clients-heading h2{
    font-size: clamp(2.5rem, 13vw, 4rem);
  }

  .clients-heading p{
    font-size: .98rem;
  }

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

  .review-card{
    min-height: auto;
  }

  .google-review-btn{
    width: 100%;
  }

   .clients-section{
    padding: 5rem 18px 5.5rem;
  }

  .clients-heading h2{
    font-size: clamp(2.35rem, 13vw, 3.6rem);
  }

  .reviews-grid{
    grid-auto-columns: 92%;
  }

  .review-card{
    padding: 1.25rem;
    min-height: 245px;
  }

  .review-card p{
    font-size: .95rem;
  }

  .review-avatar{
    width: 42px;
    height: 42px;
  }

    .portfolio-stats{
    grid-template-columns: 1fr;
    margin-top: 2.2rem;
    gap: .9rem;
  }

  .stat-card{
    min-height: 165px;
    padding: 1.1rem;
  }

  .stat-number{
    font-size: clamp(2.8rem, 15vw, 4rem);
  }

  .stat-card h3{
    font-size: 1.08rem;
  }

  .stat-card p{
    font-size: .9rem;
    max-width: 92%;
  }

    .pricing-section{
    padding: 0 0 3.5rem;
  }

  .pricing-container{
    width: calc(100% - 32px);
  }

  .pricing-heading h2{
    font-size: clamp(2.45rem, 14vw, 4rem);
  }

  .pricing-heading p{
    font-size: .94rem;
    line-height: 1.65;
  }

  .pricing-kicker{
    font-size: .78rem;
  }

  .pricing-bg-word{
    top: 9.5rem;
    font-size: clamp(4.4rem, 24vw, 6.5rem);
  }

  .pricing-grid{
    margin-top: 2rem;
    gap: 1rem;
  }

  .price-card{
    border-radius: 24px;
    padding: 1.15rem .95rem 1rem;
  }

  .price-badge{
    font-size: .72rem;
    padding: .34rem .64rem;
    margin-bottom: .9rem;
  }

  .price-card h3{
    font-size: clamp(2rem, 12vw, 3.25rem);
  }

  .price-subtitle{
    font-size: .9rem;
    margin-bottom: 1.15rem;
  }

  .price-value{
    font-size: clamp(2rem, 12vw, 3rem);
    margin-bottom: 1.2rem;
  }

  .price-features{
    gap: .65rem;
    margin-bottom: 1.45rem;
  }

  .price-features li{
    font-size: .9rem;
    padding-left: 1.35rem;
  }

  .price-btn{
    min-height: 52px;
    border-radius: 14px;
    font-size: .94rem;
  }

  .price-card small{
    font-size: .74rem;
  }

  .pricing-note{
    font-size: .9rem;
    margin-top: 1.6rem;
  }

    .whatsapp-float{
    width: 58px;
    height: 58px;
    right: 18px;
    bottom: 18px;
  }

  .whatsapp-float img{
    width: 31px;
    height: 31px;
  }


  .site-footer{
    padding: 4.5rem 16px 0;
  }

  .footer-brand,
  .footer-links,
  .footer-cta{
    border-radius: 22px;
  }

  .footer-logo img{
    width: 140px;
  }

  .footer-contact-pills a{
    flex: 1 1 auto;
    min-width: calc(50% - .5rem);
  }

  .footer-cta h3{
    font-size: clamp(1.9rem, 11vw, 2.7rem);
  }

  .footer-bottom p,
  .footer-bottom span{
    font-size: .78rem;
  }
}