/* ============================================
   2ROCK1 MEDIA — Landing Page Styles
   Design System: Fully Configurable via CSS Custom Properties
   Font: Inter + Raleway
   ============================================ */

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

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   font-size: 16px;
}

body {
   font-family: 'Inter', sans-serif;
   background: #262626;
   color: #FFFFFF;
   overflow-x: hidden;
   line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar__logo,
.stats-item__number,
.walkaway__title,
.founder__name,
.contact-section__title-big {
   font-family: 'Raleway', sans-serif;
}

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

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

ul {
   list-style: none;
}

/* ---------- Variables (Global Fallbacks) ---------- */
:root {
   --dark: #262626;
   --dark-2: #1a1a1a;
   --dark-3: #3A3A3A;
   --accent: #FEA81B;
   --accent-hover: #e69500;
   --white: #FFFFFF;
   --gray: #999999;
   --gray-light: #CCCCCC;
   --section-padding: 80px 0;
   --container-width: 1200px;
}

.container {
   max-width: var(--container-width);
   margin: 0 auto;
   padding: 0 40px;
   width: 100%;
}

/* ============================================
   NAVIGATION
   ============================================ */
.navbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   padding: 16px 0;
   background: rgba(38, 38, 38, 0.9);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   transform: translateY(-100%);
   opacity: 0;
   transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, background 0.3s ease;
}

.navbar.navbar--visible {
   transform: translateY(0);
   opacity: 1;
}

.navbar .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.navbar__logo img {
   height: 48px;
   width: auto;
}

.navbar__links {
   display: flex;
   align-items: center;
   gap: 32px;
}

.navbar__links a {
   font-size: 13px;
   font-weight: 400;
   color: var(--white);
   opacity: 0.8;
   transition: opacity 0.3s ease, color 0.3s ease;
   letter-spacing: 0.3px;
}

.navbar__links a:hover {
   opacity: 1;
   color: var(--accent);
}

.navbar__cta {
   display: flex;
   align-items: center;
   gap: 12px;
}

.btn-talk {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 24px;
   border: 1px solid var(--accent);
   border-radius: 50px;
   background: linear-gradient(90deg, var(--dark-3) 0%, var(--dark) 100%);
   color: var(--white);
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease;
   font-family: 'Poppins', sans-serif;
   letter-spacing: 0.5px;
}

.btn-talk:hover {
   background: var(--accent);
   color: var(--dark);
}

.btn-talk .play-icon {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: var(--accent);
   display: flex;
   align-items: center;
   justify-content: center;
}

.btn-talk .play-icon svg {
   width: 8px;
   height: 8px;
   fill: var(--dark);
}

.navbar__accent-dot {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--accent);
   display: flex;
   align-items: center;
   justify-content: center;
}

.navbar__accent-dot svg {
   width: 16px;
   height: 16px;
   fill: var(--dark);
}

/* ============================================
   HERO — Design System
   ============================================ */
.hero {
   position: relative;
   min-height: var(--hero-min-h, 100vh);
   display: flex;
   align-items: flex-start;
   background: var(--hero-bg, var(--dark));
   overflow: hidden;
   padding-top: 80px;
}

.hero__bg {
   position: absolute;
   top: 60px;
   right: 0;
   width: var(--hero-bg-img-w, 70%);
   height: calc(100% - 60px);
   z-index: 1;
}

@media (max-width: 768px) {
   .hero__bg {
      right: -30%;
      width: 80%;
   }
}

.hero__bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top right;
}

.hero__overlay-left {
   position: absolute;
   top: 0;
   left: 0;
   width: 55%;
   height: 100%;
   background: linear-gradient(90deg, var(--hero-bg, #262626) 0%, var(--hero-bg, #262626) 35%, rgba(38, 38, 38, var(--hero-overlay-l, 0.85)) 55%, rgba(38, 38, 38, 0.4) 75%, rgba(38, 38, 38, 0) 100%);
   z-index: 2;
}

.hero__overlay-bottom {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 25%;
   background: linear-gradient(0deg, var(--hero-bg, #262626) 0%, rgba(38, 38, 38, var(--hero-overlay-b, 0.8)) 40%, rgba(38, 38, 38, 0) 100%);
   z-index: 2;
}

.hero .container {
   position: relative;
   z-index: 3;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: calc(100vh - 80px);
   padding-top: 32px;
   padding-bottom: 40px;
}

.hero__content {
   max-width: 900px;
}

.hero__logo-banner {
   width: var(--hero-logo-w, 180px);
   height: auto;
   background: var(--hero-logo-bg, #FFFFFF);
   padding: var(--hero-logo-pad, 24px);
   margin-top: -112px;
   margin-bottom: 48px;
   position: relative;
   border-radius: var(--hero-logo-br, 0 0 12px 12px);
}

.hero__logo-banner img {
   width: 100%;
   height: auto;
   display: block;
}

.hero__title {
   font-family: var(--hero-ta-family, 'Raleway', sans-serif);
   font-size: var(--hero-ta-size, 64px);
   font-weight: var(--hero-ta-weight, 700);
   line-height: var(--hero-ta-lh, 1.15);
   margin-bottom: 20px;
   color: var(--hero-ta-color, var(--white));
}

.hero__title span,
.hero__title .hero__title-accent {
   color: var(--hero-ta-color, var(--accent));
   display: block;
   font-family: var(--hero-ta-family, 'Raleway', sans-serif);
   font-size: var(--hero-ta-size, 64px);
   font-weight: var(--hero-ta-weight, 700);
   letter-spacing: var(--hero-ta-ls, normal);
   text-transform: var(--hero-ta-tt, none);
}

.hero__title strong {
   color: var(--hero-tb-color, var(--white));
   font-family: var(--hero-tb-family, 'Raleway', sans-serif);
   font-size: var(--hero-tb-size, 64px);
   font-weight: var(--hero-tb-weight, 800);
   display: block;
   letter-spacing: var(--hero-tb-ls, normal);
   text-transform: var(--hero-tb-tt, none);
}

.hero__description {
   font-family: var(--hero-desc-family, 'Inter', sans-serif);
   font-size: var(--hero-desc-size, 16px);
   font-weight: var(--hero-desc-weight, 300);
   color: var(--hero-desc-color, var(--gray-light));
   margin-bottom: 0;
   max-width: var(--hero-desc-maxw, 480px);
   line-height: var(--hero-desc-lh, 1.7);
}

.hero__bottom-cta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
   background: var(--hero-cta-bg, #262626);
   border: 1px solid var(--hero-cta-bc, rgba(254, 168, 27, 0.6));
   border-radius: var(--hero-cta-br, 12px);
   padding: 0 32px;
   width: var(--hero-cta-w, 480px);
   height: var(--hero-cta-h, 40px);
   z-index: 2;
   overflow: visible;
}

.hero__bottom-text {
   font-size: var(--hero-ct-size, 14px);
   font-weight: var(--hero-ct-weight, 500);
   color: var(--hero-ct-color, var(--white));
   letter-spacing: var(--hero-ct-ls, 0.3px);
   display: flex;
   align-items: center;
   z-index: 2;
}

.hero__bottom-icon {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: var(--hero-cta-icon-s, 90px);
   height: var(--hero-cta-icon-s, 90px);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 3;
}

.hero__bottom-icon img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.hero__bottom-wrapper {
   position: relative;
   margin-top: auto;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.hero__bottom-line {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: var(--hero-dl-width, 1120px);
   max-width: 90vw;
   height: 0;
   border-top: 2px dashed var(--hero-dl-color, rgba(255, 255, 255, 0.2));
   z-index: 1;
}

/* ============================================
   STATS — Design System
   ============================================ */
.stats-section {
   position: relative;
   padding: var(--ss-pt, 80px) 0 var(--ss-pb, 100px);
   background: var(--ss-bg, var(--dark));
   overflow: hidden;
}

.stats-section__bg {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   opacity: var(--ss-bg-op, 0.15);
   z-index: 0;
}

.stats-section__bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.stats-section .container {
   position: relative;
   z-index: 1;
}

.stats-section__header {
   text-align: center;
   margin-bottom: 32px;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.stats-section__services-row {
   display: flex;
   justify-content: center;
   gap: var(--ss-svc-gap, 16px);
   margin-bottom: 16px;
   flex-wrap: wrap;
}

.stats-section__services-row span {
   font-size: var(--ss-sl-size, 15px);
   font-weight: var(--ss-sl-wt, 500);
   color: var(--ss-sl-col, var(--white));
   letter-spacing: var(--ss-sl-ls, 0.5px);
}

.stats-section__vertical-dash {
   height: var(--ss-vd-h, 40px);
   width: 1px;
   border-left: 1px dashed var(--ss-vd-col, rgba(255, 255, 255, 0.4));
   margin-bottom: 24px;
}

.stats-section__title {
   font-family: var(--ss-t-fam, 'Raleway', sans-serif);
   font-size: var(--ss-t-size, 44px);
   font-weight: var(--ss-t-wt, 700);
   color: var(--ss-t-col, var(--white));
   text-align: center;
   margin-bottom: 20px;
}

.stats-section__title span {
   font-weight: var(--ss-t-wt, 700);
   color: var(--ss-ta-col, var(--accent));
}

.stats-section__subtitle {
   font-family: var(--ss-st-fam, 'Inter', sans-serif);
   font-size: var(--ss-st-size, 16px);
   font-weight: var(--ss-st-wt, 300);
   color: var(--ss-st-col, var(--gray));
   text-align: center;
   max-width: var(--ss-st-maxw, 700px);
   margin: 0 auto 56px;
   line-height: var(--ss-st-lh, 1.8);
}

.stats-cards {
   display: grid;
   grid-template-columns: repeat(var(--ss-c-cols, 4), 1fr);
   gap: var(--ss-c-gap, 24px);
}

.stat-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
   height: 100%;
}

.stat-card {
   width: 100%;
   height: 100%;
   background: linear-gradient(180deg, var(--ss-c-bg1, rgba(255, 255, 255, 0.08)) 0%, transparent 100%);
   border: 1px solid transparent;
   /* Keeps layout size stable for hover */
   border-bottom: none;
   border-radius: var(--ss-c-br, 12px);
   padding: 40px 24px 40px;
   text-align: center;
   transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
   display: flex;
   flex-direction: column;
}

.stat-item:hover .stat-card {
   transform: translateY(-4px);
   border-color: var(--ss-c-bc, rgba(255, 255, 255, 0.05));
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.stat-card__content {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   margin-bottom: 24px;
}

.stat-card__line {
   height: var(--ss-al-h, 3px);
   background: var(--ss-al-col, var(--accent));
   width: var(--ss-al-w, 90%);
   margin: 0 auto;
   border-radius: 2px;
   opacity: 0.9;
}

.stat-card__value {
   font-family: var(--ss-cv-fam, 'Raleway', sans-serif);
   font-size: var(--ss-cv-size, 48px);
   font-weight: var(--ss-cv-wt, 800);
   color: var(--ss-cv-col, var(--white));
   line-height: 1;
   margin-bottom: 12px;
}

.stat-card__label {
   font-family: var(--ss-clb-fam, 'Inter', sans-serif);
   font-size: var(--ss-clb-sz, 13px);
   font-weight: var(--ss-clb-wt, 400);
   color: var(--ss-clb-col, var(--gray-light));
   line-height: var(--ss-clb-lh, 1.4);
}

.stat-card__complex-top {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   margin-bottom: 12px;
}

.stat-card__complex-top .stat-card__value {
   margin-bottom: 0;
   font-size: 56px;
}

.stat-card__complex-label {
   font-size: 13px;
   font-weight: 500;
   color: var(--white);
   text-align: left;
   line-height: 1.3;
}

.stat-card__label--small {
   font-size: 11px;
   color: var(--gray);
}

.stat-icon-wrapper {
   width: var(--ss-ic-s, 64px);
   height: var(--ss-ic-s, 64px);
   min-width: var(--ss-ic-s, 64px);
   min-height: var(--ss-ic-s, 64px);
   flex-shrink: 0;
   background: var(--ss-ic-bg, var(--accent));
   border-radius: 50%;
   border: 2px solid var(--ss-ic-bc, rgba(255, 255, 255, 0.1));
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 0px;
   position: relative;
   z-index: 2;
   box-shadow: 0 4px 15px rgba(254, 168, 27, 0.3);
}

.stat-icon-wrapper img {
   width: var(--ss-ic-is, 32px);
   height: var(--ss-ic-is, 32px);
   object-fit: contain;
   filter: brightness(0) saturate(100%) invert(13%) sepia(5%) saturate(19%) hue-rotate(314deg) brightness(98%) contrast(90%);
}

.stats-section__bottom-dashed {
   margin-top: var(--ss-bd-mt, 60px);
   border-top: 1px dashed var(--ss-bd-col, rgba(255, 255, 255, 0.2));
   width: 100%;
}

.stats-cta-wrapper {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translate(-50%, calc(50% - 15px));
   z-index: 10;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
}

.stats-cta__label {
   color: var(--ss-ctl-col, #CCCCCC);
   font-size: var(--ss-ctl-sz, 13px);
   margin-bottom: 16px;
}

.stats-cta__btn {
   background: var(--ss-btn-bg, #FEA81B) !important;
   color: var(--ss-btn-cl, #262626) !important;
   border-radius: var(--ss-btn-br, 40px) !important;
   padding: var(--ss-btn-pd, 12px 32px) !important;
   font-weight: var(--ss-btn-fw, 600) !important;
   font-size: var(--ss-btn-fs, 14px) !important;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 12px;
   border: none;
   transition: background 0.25s ease, color 0.25s ease;
}

.stats-cta__btn:hover {
   background: var(--ss-btn-hb, #e69500) !important;
   color: var(--ss-btn-hc, #262626) !important;
}

.stats-cta__divider {
   width: 1px;
   height: 24px;
   background: rgba(38, 38, 38, 0.3);
   margin: 0 4px;
}

.stats-cta__icon-img {
   width: 28px;
   height: 28px;
   object-fit: contain;
}

/* ============================================
   PORTFOLIO — Design System
   ============================================ */
.portfolio-section {
   position: relative;
   padding: 0px 0 var(--ps-pb, 80px);
   background: var(--ps-bg, var(--dark));
   z-index: 5;
}

.portfolio-section::before {
   content: '';
   position: absolute;
   top: -2px;
   left: 0;
   right: 0;
   height: 80px;
   background: var(--ps-bg, var(--dark));
   z-index: 1;
}

.portfolio-section .container {
   position: relative;
   z-index: 2;
   max-width: 960px;
}

.portfolio-section__header {
   text-align: center;
   margin-bottom: 48px;
}

.portfolio-section__title {
   font-family: 'Raleway', sans-serif;
   font-size: var(--ps-t1-sz, 36px);
   font-weight: var(--ps-t1-wt, 400);
   color: var(--ps-t1-col, var(--white));
   margin-bottom: 4px;
}

.portfolio-section__title-bold {
   font-family: 'Raleway', sans-serif;
   font-size: var(--ps-t2-sz, 36px);
   font-weight: var(--ps-t2-wt, 700);
   color: var(--ps-t2-col, var(--accent));
}

.portfolio-carousel {
   position: relative;
   overflow: hidden;
   width: 100%;
   padding: 20px 0;
   margin: -20px 0;
   touch-action: pan-y;
   cursor: grab;
}

.portfolio-carousel__track {
   display: flex;
   gap: var(--ps-cgap, 24px);
   transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   align-items: stretch;
}

.portfolio-card {
   position: relative;
   flex: 0 0 calc((100% - var(--ps-cgap, 24px) * 2) / 2.5);
   min-width: 0;
   border-radius: var(--ps-cbr, 20px);
   overflow: hidden;
   border: 2px solid transparent;
   transition: border-color 0.4s ease, box-shadow 0.4s ease;
   cursor: pointer;
}

.portfolio-card:hover {
   border-color: rgba(254, 168, 27, 0.4);
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.portfolio-card--active {
   border-color: var(--ps-cab, var(--accent)) !important;
   box-shadow: 0 12px 40px rgba(254, 168, 27, 0.15), 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

.portfolio-card__image {
   width: 100%;
   height: var(--ps-cih, 380px);
   object-fit: cover;
   object-position: top center;
}

.portfolio-card__overlay {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: linear-gradient(0deg, rgba(38, 38, 38, 0.95) 0%, rgba(38, 38, 38, 0.8) 40%, rgba(38, 38, 38, 0) 100%);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 20px 18px;
}

.portfolio-card__multiplier {
   font-family: var(--ps-m-fam, 'Raleway', sans-serif);
   font-size: var(--ps-m-sz, 44px);
   font-weight: var(--ps-m-wt, 800);
   color: var(--ps-m-col, var(--accent));
   line-height: 1;
   margin-bottom: 2px;
}

.portfolio-card__subtitle {
   font-size: var(--ps-cs-sz, 10px);
   font-weight: 400;
   color: var(--ps-cs-col, var(--accent));
   margin-bottom: 16px;
}

.portfolio-card__testimonial {
   font-size: var(--ps-t-sz, 10px);
   color: var(--ps-t-col, var(--gray-light));
   line-height: var(--ps-t-lh, 1.5);
   margin-bottom: 20px;
   font-weight: var(--ps-t-wt, 300);
}

.portfolio-card__signature {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 10px;
   text-align: right;
}

.portfolio-card__client {
   font-size: var(--ps-cn-sz, 12px);
   font-weight: var(--ps-cn-wt, 700);
   color: var(--ps-cn-col, var(--white));
   margin-bottom: 2px;
}

.portfolio-card__client-role {
   font-size: var(--ps-cr-sz, 10px);
   color: var(--ps-cr-col, var(--gray-light));
   margin-bottom: 2px;
}

.portfolio-card__client-link {
   font-size: var(--ps-cl-sz, 9px);
   color: var(--ps-cl-col, var(--accent));
}

.portfolio-card__signature-dot {
   width: var(--ps-sd-sz, 10px);
   height: var(--ps-sd-sz, 10px);
   border-radius: 50%;
   background-color: var(--ps-sd-col, var(--accent));
   flex-shrink: 0;
}

.portfolio-card__dot {
   display: none;
}

.portfolio-carousel-outer {
   position: relative;
   padding: 0 60px;
}

.portfolio-arrow {
   display: none;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 10;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: 2px solid rgba(255,255,255,0.2);
   background: rgba(38,38,38,0.85);
   color: #ffffff;
   cursor: pointer;
   align-items: center;
   justify-content: center;
   transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
   backdrop-filter: blur(4px);
}

.portfolio-arrow svg {
   width: 20px;
   height: 20px;
   display: block;
}

.portfolio-arrow:hover {
   background: var(--ps-cab, #FEA81B);
   border-color: var(--ps-cab, #FEA81B);
   color: #262626;
   transform: translateY(-50%) scale(1.08);
}

.portfolio-arrow--prev {
   left: 0;
}

.portfolio-arrow--next {
   right: 0;
}

@media (min-width: 769px) {
   .portfolio-arrow {
      display: flex;
   }
}

.portfolio-dots {
   display: flex;
   justify-content: center;
   gap: var(--ps-do-gap, 10px);
   margin-top: 32px;
}

.portfolio-dots__dot {
   width: var(--ps-do-sz, 10px);
   height: var(--ps-do-sz, 10px);
   border-radius: 50%;
   background: var(--ps-do-col, var(--accent));
   opacity: var(--ps-do-op, 0.3);
   cursor: pointer;
   transition: opacity 0.3s ease;
}

.portfolio-dots__dot--active {
   opacity: 1;
}

.portfolio-section__topo-bottom {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 500px;
   height: 250px;
   background: url('https://2rock1.com/wp-content/uploads/2026/04/background-sect3-cards.png') no-repeat bottom left;
   background-size: contain;
   z-index: 1;
   pointer-events: none;
}

.portfolio-cta-wrapper {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translate(-50%, calc(50% - 15px));
   z-index: 10;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
}

.portfolio-cta__label {
   color: var(--ps-ctl-col, var(--gray-light));
   font-size: var(--ps-ctl-sz, 13px);
   margin-bottom: 16px;
}

.portfolio-cta__btn {
   background: var(--ps-btn-bg, var(--accent)) !important;
   color: var(--ps-btn-cl, var(--dark)) !important;
   border-radius: var(--ps-btn-br, 40px) !important;
   padding: var(--ps-btn-pd, 12px 32px) !important;
   font-weight: var(--ps-btn-fw, 600) !important;
   font-size: var(--ps-btn-fs, 14px) !important;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 12px;
   border: none;
}

.portfolio-cta__btn:hover {
   background: var(--ps-btn-hb, var(--accent-hover)) !important;
   color: var(--ps-btn-hc, var(--dark)) !important;
}

.portfolio-cta__divider {
   width: 1px;
   height: 24px;
   background: rgba(38, 38, 38, 0.3);
   margin: 0 4px;
}

.portfolio-cta__icon-img {
   width: 28px;
   height: 28px;
   object-fit: contain;
}

.portfolio-cta__arrow {
   background: transparent !important;
   border: 1px solid var(--ps-btn-cl, var(--dark)) !important;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.portfolio-cta__arrow svg {
   width: var(--ps-arr-sz, 12px);
   height: var(--ps-arr-sz, 12px);
}

.portfolio-card__overlay--scale-0 {
   padding-bottom: 70px;
   background: linear-gradient(0deg, rgba(38, 38, 38, 0.95) 0%, rgba(38, 38, 38, 0.95) 10%, rgba(38, 38, 38, 0.8) 50%, rgba(38, 38, 38, 0) 100%);
}

.portfolio-card__overlay--scale-1 {
   padding-bottom: 40px;
   background: linear-gradient(0deg, rgba(38, 38, 38, 0.95) 0%, rgba(38, 38, 38, 0.9) 10%, rgba(38, 38, 38, 0.7) 45%, rgba(38, 38, 38, 0) 90%);
}

.portfolio-card__overlay--scale-2 {
   padding-bottom: 20px;
   background: linear-gradient(0deg, rgba(38, 38, 38, 0.95) 0%, rgba(38, 38, 38, 0.8) 10%, rgba(38, 38, 38, 0.6) 40%, rgba(38, 38, 38, 0) 80%);
}

.portfolio-card__overlay--scale-3 {
   padding-bottom: 20px;
   background: linear-gradient(0deg, rgba(38, 38, 38, 0.95) 0%, rgba(38, 38, 38, 0.8) 10%, rgba(38, 38, 38, 0.6) 40%, rgba(38, 38, 38, 0) 80%);
}

/* ============================================
   FOUNDER — Design System
   ============================================ */
.founder-section {
   position: relative;
   padding: var(--fs-pt, 60px) 0 var(--fs-pb, 60px);
   background-color: var(--fs-bg, var(--white));
   color: var(--dark);
   overflow: hidden;
}

.founder-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 60%;
   background: url('https://2rock1.com/wp-content/uploads/2026/04/background-aron-2.png') no-repeat top center;
   background-size: 100% auto;
   opacity: 0.5;
   pointer-events: none;
   z-index: 0;
}

.founder-section__dashed-line {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   /* Centrado perfecto */
   height: var(--fs-dl-h, 60px);
   border-left: 2px dashed var(--fs-dl-col, rgba(0, 0, 0, 0.15));
   z-index: 0;
}

.founder-section .container {
   max-width: var(--fs-cw, 1300px) !important;
   width: 95% !important;
   display: flex;
   align-items: center;
   gap: var(--fs-gap, 80px);
   position: relative;
   z-index: 1;
}

.founder__image-wrapper {
   position: relative;
   flex-shrink: 0;
}

.founder__image {
   position: relative;
   z-index: 1;
   width: var(--fs-pw, 440px);
   height: var(--fs-ph, 440px);
   border-radius: var(--fs-pbr, 50%);
   object-fit: var(--fs-pof, cover);
}

.founder__info {
   flex: 1;
   position: relative;
}

.founder__pre-title {
   font-size: var(--fs-pt-sz, 14px);
   color: var(--fs-pt-col, var(--accent));
   font-weight: var(--fs-pt-wt, 500);
   margin-bottom: 8px;
}

.founder__name {
   font-family: var(--fs-n-fam, 'Raleway', sans-serif);
   font-size: var(--fs-n-sz, 56px);
   font-weight: var(--fs-n-wt, 800);
   color: var(--fs-n-col, #1a1a1a);
   margin-bottom: 0;
   letter-spacing: var(--fs-n-ls, -1px);
   line-height: var(--fs-n-lh, 1);
}

.founder__separator {
   position: absolute;
   height: var(--fs-sp-h, 1px);
   background: var(--fs-sp-col, rgba(254, 168, 27, 0.4));
   left: -80px;
   right: -200px;
   margin-top: var(--fs-sp-mt, 16px);
   margin-bottom: 16px;
}

.founder__role {
   font-size: var(--fs-r-sz, 20px);
   font-weight: var(--fs-r-wt, 700);
   color: var(--fs-r-col, #333);
   margin-top: var(--fs-r-mt, 32px);
   margin-bottom: 24px;
}

.founder__bio p {
   font-family: var(--fs-b-fam, 'Inter', sans-serif);
   font-size: var(--fs-b-sz, 15px);
   font-weight: var(--fs-b-wt, 300);
   color: var(--fs-b-col, #555);
   line-height: var(--fs-b-lh, 1.6);
   margin-bottom: 16px;
}

.founder__stats-strip {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   margin-top: var(--fs-bl-mt, 32px);
   border-radius: 16px;
   overflow: hidden;
   background: #ffffff;
}

.founder-stat {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 20px 14px;
   transition: background 0.25s ease;
}

.founder-stat:hover {
   background: #f9f9f9;
}

/* Metric card (has counter) */
.founder-stat--metric {
   justify-content: center;
}

.founder-stat--metric .founder-stat__value {
   color: #FEA81B;
}

.founder-stat--metric .founder-stat__label {
   color: #333333;
}

.founder-stat--metric .founder-stat__sublabel {
   color: rgba(38, 38, 38, 0.55);
}

.founder-stat__value {
   font-family: 'Raleway', sans-serif;
   font-size: 36px;
   font-weight: 800;
   color: #FEA81B;
   line-height: 1;
   display: block;
   margin-bottom: 8px;
   letter-spacing: -1px;
}

/* Icon card */
.founder-stat__icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   border-radius: 10px;
   background: rgba(179, 179, 179, 0.12);
   margin-bottom: 10px;
   color: #FEA81B;
   flex-shrink: 0;
}

.founder-stat__label {
   font-size: 11px;
   font-weight: 700;
   color: #262626;
   line-height: 1.35;
   display: block;
   margin-bottom: 5px;
}

.founder-stat__sublabel {
   font-size: 9.5px;
   font-weight: 400;
   color: rgba(38, 38, 38, 0.55);
   letter-spacing: 0.02em;
   display: block;
   line-height: 1.4;
}

/* ============================================
   WALKAWAY — Design System
   ============================================ */
.walkaway-section {
   position: relative;
   padding: var(--ws-pt, 80px) 0 var(--ws-pb, 200px);
   background-color: var(--ws-bg, #F8A51D);
   z-index: 1;
   margin-bottom: 0;
}

.walkaway-transition-wrapper {
   width: 100%;
   position: relative;
   z-index: 1;
   line-height: 0;
   margin-top: -18vw;
}

.walkaway-transition-img {
   width: 100%;
   height: auto;
   display: block;
   opacity: var(--ws-ti-op, 0.4);
}

.walkaway__horizontal-dash {
   position: absolute;
   top: 60%;
   left: 0;
   right: 0;
   border-top: 3px dashed var(--ws-pa-col, rgba(0, 0, 0, 0.12));
   z-index: 0;
}

.walkaway__vertical-dash {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   /* Centrado perfecto */
   height: 60px;
   border-left: 2px dashed var(--ws-pa-col, rgba(0, 0, 0, 0.15));
   /* Cambiado a 2px */
   z-index: 0;
}

.walkaway-section .container {
   position: relative;
   z-index: 2;
}

.walkaway__header {
   text-align: center;
   margin-bottom: 72px;
}

.walkaway__title {
   font-family: var(--ws-tt-fam, 'Raleway', sans-serif);
   font-size: var(--ws-tt-sz, 46px);
   font-weight: var(--ws-tt-wt, 800);
   color: var(--ws-tt-col, #1a1a1a);
   margin-bottom: 8px;
}

.walkaway__subtitle {
   font-size: var(--ws-st-sz, 18px);
   font-weight: var(--ws-st-wt, 400);
   color: var(--ws-st-col, #444);
}

.walkaway-cards {
   display: grid;
   grid-template-columns: repeat(var(--ws-cc, 3), 1fr);
   gap: var(--ws-cgap, 32px);
   position: relative;
   padding-top: 40px;
}

.walkaway-path {
   display: none;
   /* SVG approach disabled — using CSS borders */
}

.walkaway-path__svg {
   display: none;
}

.walkaway-card__container {
   position: relative;
   height: 100%;
}

.walkaway-card__dashed-bg {
   position: absolute;
   top: -40px;
   bottom: -24px;
   left: -16px;
   right: -16px;
   border-top: 3px dashed var(--ws-pa-col, rgba(0, 0, 0, 0.2));
   border-left: 3px dashed var(--ws-pa-col, rgba(0, 0, 0, 0.2));
   border-right: 3px dashed var(--ws-pa-col, rgba(0, 0, 0, 0.2));
   border-bottom: none;
   border-radius: 14px 14px 0 0;
   z-index: 1;
   pointer-events: none;
}

.walkaway-card__container:nth-child(3) .walkaway-card__dashed-bg {
   display: none;
}

.walkaway-cards::after {
   content: '';
   position: absolute;
   bottom: -24px;
   left: calc(33.33% + 0px);
   right: calc(33.33% + 0px);
   height: 0;
   border-bottom: 3px dashed var(--ws-pa-col, rgba(0, 0, 0, 0.2));
   z-index: 1;
   pointer-events: none;
}

.walkaway-card {
   background: var(--ws-c-bg, var(--white));
   border-radius: var(--ws-c-br, 20px);
   padding: var(--ws-c-pad, 40px 32px);
   height: 100%;
   position: relative;
   z-index: 2;
   box-shadow: 0 10px 40px rgba(0, 0, 0, var(--ws-c-sh, 0.1));
   display: flex;
   flex-direction: column;
}

.walkaway-card__dot {
   position: absolute;
   top: 24px;
   right: 24px;
   width: var(--ws-do-sz, 14px);
   height: var(--ws-do-sz, 14px);
   background-color: var(--ws-do-col, var(--accent));
   border-radius: 50%;
}

.walkaway-card__title {
   font-size: var(--ws-ct-sz, 20px);
   font-weight: var(--ws-ct-wt, 700);
   color: var(--ws-ct-col, var(--dark));
   margin-top: 10px;
   margin-bottom: 16px;
   line-height: var(--ws-ct-lh, 1.3);
}

.walkaway-card__text {
   font-family: var(--ws-cx-fam, 'Inter', sans-serif);
   font-size: var(--ws-cx-sz, 14px);
   font-weight: var(--ws-cx-wt, 400);
   color: var(--ws-cx-col, #555);
   line-height: var(--ws-cx-lh, 1.6);
   margin-bottom: 40px;
   flex-grow: 1;
}

.walkaway-card__bar {
   height: var(--ws-ba-h, 6px);
   width: 100%;
   background-color: var(--ws-ba-col, var(--accent));
   border-radius: var(--ws-ba-br, 4px);
   margin-top: auto;
}

/* ============================================
   CONTACT — Design System
   ============================================ */
.contact-section {
   position: relative;
   z-index: 6;
   padding: var(--cs-pt, 10px) 0 var(--cs-pb, 60px);
   background: var(--cs-bg, var(--dark));
   margin-top: -1px;
}

.contact-section .container {
   max-width: var(--cs-cmw, 900px);
}

.contact-section__header {
   text-align: center;
   margin-bottom: 24px;
   margin-top: -70px;
}

.contact-section__label {
   font-size: var(--cs-l-sz, 14px);
   font-weight: var(--cs-l-wt, 500);
   color: var(--cs-l-col, var(--accent));
   margin-bottom: 8px;
   letter-spacing: var(--cs-l-ls, 1px);
}

.contact-section__title {
   font-size: var(--cs-t-sz, 36px);
   font-weight: var(--cs-t-wt, 700);
   color: var(--cs-t-col, var(--white));
   margin-bottom: 4px;
}

.contact-section__title-big {
   font-family: var(--cs-tb-fam, 'Raleway', sans-serif);
   font-size: var(--cs-tb-sz, 44px);
   font-weight: var(--cs-tb-wt, 800);
   color: var(--cs-tb-col, var(--accent));
   line-height: var(--cs-tb-lh, 1.2);
   margin-bottom: 20px;
}

.contact-section__description {
   font-family: var(--cs-d-fam, 'Inter', sans-serif);
   font-size: var(--cs-d-sz, 13px);
   font-weight: var(--cs-d-wt, 300);
   color: var(--cs-d-col, var(--gray));
   max-width: var(--cs-d-mw, 600px);
   margin: 0 auto;
   line-height: var(--cs-d-lh, 1.8);
}

.contact-section__bottom-line {
   margin-top: var(--cs-bl-mt, 60px);
   border-top: 1px dashed var(--cs-bl-c, rgba(255, 255, 255, 0.15));
   width: 100%;
}

.contact-form {
   max-width: 700px;
   margin: 0 auto;
}

.contact-form__row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-bottom: 16px;
}

.contact-form__field {
   display: flex;
   flex-direction: column;
}

.contact-form__field--full {
   margin-bottom: 16px;
}

.contact-form__textarea {
   resize: vertical;
   min-height: 100px;
   font-family: 'Inter', sans-serif;
}

.contact-form__input {
   background: var(--cs-i-bg, transparent);
   border: 1px solid var(--cs-i-bc, rgba(255, 255, 255, 0.15));
   border-radius: var(--cs-i-br, 8px);
   padding: var(--cs-i-pad, 14px 16px);
   color: var(--cs-i-tc, var(--white));
   font-size: var(--cs-i-fsz, 14px);
   font-family: 'Inter', sans-serif;
   transition: border-color 0.3s ease;
   outline: none;
}

.contact-form__input::placeholder {
   color: var(--cs-i-pc, rgba(255, 255, 255, 0.3));
}

.contact-form__input:focus {
   border-color: var(--cs-i-fb, var(--accent));
}

.contact-form__services {
   margin-top: 40px;
   margin-bottom: 40px;
}

.contact-form__services-title {
   font-size: var(--cs-sn-sz, 15px);
   font-weight: 600;
   color: var(--cs-sn-cl, var(--white));
   margin-bottom: 4px;
}

.contact-form__services-subtitle {
   font-size: var(--cs-sd-sz, 12px);
   color: var(--cs-sd-cl, var(--gray));
   margin-bottom: 24px;
}

.contact-form__service-option {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 20px 0;
   border-top: 1px solid var(--accent);
   cursor: pointer;
   transition: background 0.2s ease;
}

.contact-form__service-option:last-child {
   border-bottom: 1px solid var(--accent);
}

.contact-form__service-option input[type="checkbox"] {
   display: none;
}

.contact-form__service-check {
   width: var(--cs-ck-sz, 24px);
   height: var(--cs-ck-sz, 24px);
   min-width: var(--cs-ck-sz, 24px);
   border: 1px solid var(--accent);
   border-radius: var(--cs-ck-br, 4px);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
}

.contact-form__service-check svg {
   width: 14px;
   height: 14px;
   opacity: 0;
   transition: opacity 0.2s ease;
}

.contact-form__service-option input[type="checkbox"]:checked~.contact-form__service-check {
   background: var(--cs-ck-cb, var(--accent));
   border-color: var(--cs-ck-cb, var(--accent));
}

.contact-form__service-option input[type="checkbox"]:checked~.contact-form__service-check svg {
   opacity: 1;
   stroke: var(--dark);
}

.contact-form__service-info {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.contact-form__service-info strong {
   font-size: var(--cs-sn-sz, 14px);
   font-weight: var(--cs-sn-wt, 700);
   color: var(--cs-sn-cl, var(--white));
}

.contact-form__service-info span {
   font-size: var(--cs-sd-sz, 12px);
   font-weight: var(--cs-sd-wt, 300);
   color: var(--cs-sd-cl, var(--gray));
}

.contact-form__service-icon {
   width: var(--cs-si-sz, 40px);
   height: var(--cs-si-sz, 40px);
   opacity: 0.5;
}

.contact-form__service-icon img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.contact-form__bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   margin-top: 32px;
}

.contact-form__privacy {
   font-size: var(--cs-pr-sz, 10px);
   font-weight: var(--cs-pr-wt, 300);
   color: var(--cs-pr-cl, rgba(255, 255, 255, 0.35));
   line-height: var(--cs-pr-lh, 1.6);
   max-width: var(--cs-pr-mw, 360px);
}

.btn-submit {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: var(--cs-bt-pd, 14px 36px);
   background: var(--cs-bt-bg, var(--accent));
   color: var(--cs-bt-cl, var(--dark));
   border: none;
   border-radius: var(--cs-bt-br, 40px);
   font-size: var(--cs-bt-fs, 16px);
   font-weight: var(--cs-bt-fw, 700);
   font-family: 'Raleway', sans-serif;
   cursor: pointer;
   transition: background 0.3s ease, transform 0.2s ease;
   letter-spacing: 0.5px;
   white-space: nowrap;
}

.btn-submit:hover {
   background: var(--cs-bt-hb, var(--accent-hover));
   color: var(--cs-bt-hc, var(--dark));
   transform: translateY(-1px);
}

.btn-submit svg {
   width: 18px;
   height: 18px;
}

/* ============================================
   FOOTER — Design System
   ============================================ */
.footer {
   padding: var(--ft-pad, 32px 0);
   background: var(--ft-bg, var(--dark));
}

.footer__inner {
   display: flex;
   align-items: center;
   gap: var(--ft-gap, 16px);
   justify-content: var(--ft-align, flex-start);
}

.footer__logo-img {
   height: var(--ft-lh, 36px);
   width: auto;
   opacity: var(--ft-lop, 0.7);
}

.footer__text {
   font-size: var(--ft-t-sz, 12px);
   color: var(--ft-t-col, rgba(255, 255, 255, 0.4));
   font-weight: var(--ft-t-wt, 300);
}

.footer__link {
   color: var(--ft-l-col, var(--accent));
   text-decoration: none;
   font-weight: var(--ft-l-fw, 400);
}

.footer__link:hover {
   text-decoration: underline;
   color: var(--ft-l-hcol, var(--accent-hover));
}

.footer__tagline {
   color: var(--ft-tg-col, rgba(255, 255, 255, 0.4));
   font-style: var(--ft-tg-it, normal);
}

/* ============================================
   ANIMATIONS & TRANSITIONS
   ============================================ */
@keyframes heroFadeDown {
   from {
      opacity: 0;
      transform: translateY(-40px);
   }

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

@keyframes heroFadeLeft {
   from {
      opacity: 0;
      transform: translateX(-50px);
   }

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

@keyframes heroFadeUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }

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

@keyframes heroBgFade {
   from {
      opacity: 0;
      transform: scale(1.05);
   }

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

.hero__bg {
   animation: heroBgFade 2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.hero__logo-banner {
   animation: heroFadeDown 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.hero__title {
   animation: heroFadeLeft 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both;
}

.hero__description {
   animation: heroFadeLeft 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.2s both;
}

.hero__bottom-wrapper {
   animation: heroFadeUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.5s both;
}

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }

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

.animate-on-scroll {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
   opacity: 1;
   transform: translateY(0);
}

.animate-delay-1 {
   transition-delay: 0.1s;
}

.animate-delay-2 {
   transition-delay: 0.2s;
}

.animate-delay-3 {
   transition-delay: 0.3s;
}

.animate-delay-4 {
   transition-delay: 0.4s;
}

.fade-section {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-section--visible {
   opacity: 1;
   transform: translateY(0);
}

.stats-cards .stat-item:nth-child(2) {
   transition-delay: 0.08s;
}

.stats-cards .stat-item:nth-child(3) {
   transition-delay: 0.16s;
}

.stats-cards .stat-item:nth-child(4) {
   transition-delay: 0.24s;
}

.walkaway-cards .walkaway-card__container:nth-child(2) {
   transition-delay: 0.1s;
}

.walkaway-cards .walkaway-card__container:nth-child(3) {
   transition-delay: 0.2s;
}

@keyframes spin {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

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

   .hero__title,
   .hero__title .hero__title-accent,
   .hero__title strong {
      font-size: 44px;
   }

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

   .portfolio-carousel {
      overflow: hidden;
   }

   .portfolio-card {
      flex: 0 0 calc((100% - 30px) / 1.5);
   }

   .benefits-cards {
      grid-template-columns: 1fr;
      max-width: 500px;
      margin: 0 auto;
   }

   .founder-section .container {
      flex-direction: column;
      text-align: center;
   }

   .founder__bio {
      margin: 0 auto;
      text-align: left;
   }

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

   .founder-stat:nth-child(2) {
      border-right: none;
   }

   .founder-stat:nth-child(1),
   .founder-stat:nth-child(2) {
      border-bottom: 1px solid rgba(254, 168, 27, 0.12);
   }

   .walkaway-cards {
      grid-template-columns: 1fr;
      max-width: 400px;
      margin: 0 auto;
      gap: 48px;
      padding-top: 24px;
   }

   /* 1. Eliminamos la caja global que se montaba sobre las cards */
   .walkaway-cards::after {
      display: none !important;
   }

   /* 2. Le damos a CADA card su propia línea punteada simétrica por los 4 lados */
   .walkaway-card__dashed-bg {
      display: block !important;
      top: -16px !important;
      bottom: -16px !important;
      left: -16px !important;
      right: -16px !important;
      border: 3px dashed var(--ws-pa-col, rgba(0, 0, 0, 0.15)) !important;
      border-radius: var(--ws-db-br, 14px) !important;
   }

   /* Aseguramos que la 3ra card también tenga su línea punteada en móvil */
   .walkaway-card__container:nth-child(3) .walkaway-card__dashed-bg {
      display: block !important;
   }

   .walkaway-path,
   .walkaway__horizontal-dash {
      display: none;
   }
}

@media (max-width: 768px) {

   /* ===================================================
      1. CORRECCIONES CRÍTICAS ANTI-DESBORDAMIENTO
      =================================================== */
   body,
   html {
      overflow-x: hidden !important;
      width: 100%;
      position: relative;
   }

   .portfolio-section {
      padding-left: 0;
      padding-right: 0;
      overflow: visible !important;
      max-width: 100vw !important;
   }

   .portfolio-section__topo-bottom {
      width: 100% !important;
      max-width: 100vw !important;
      background-position: bottom center !important;
   }

   .portfolio-carousel-outer {
      padding: 0;
   }

   .portfolio-carousel {
      margin: 0;
      padding: 0;
      overflow: hidden;
   }

   .portfolio-carousel__track {
      gap: 12px;
   }

   .portfolio-card {
      flex: 0 0 auto !important;
      width: 100%;
      max-width: calc(100vw - 40px) !important;
      margin: 0 auto;
      box-sizing: border-box !important;
   }

   .portfolio-card__image {
      height: 360px;
   }

   .portfolio-cta-wrapper {
      position: absolute;
      bottom: 2%;
      left: 50%;
      transform: translate(-50%, 50%);
      z-index: 20;
   }

   .founder-section {
      padding-top: 80px !important;
   }


   /* ===================================================
      2. TUS ESTILOS MÓVILES ORIGINALES RESTANTES
      =================================================== */
   .container {
      padding: 0 20px;
   }

   .navbar__links {
      display: none;
   }

   .hero__title,
   .hero__title .hero__title-accent,
   .hero__title strong {
      font-size: 41px;
   }

   .hero__bg {
      width: 100%;
      opacity: 0.3;
   }

   .hero__bottom-wrapper {
      margin-bottom: 70px;
   }

   .hero__bottom-cta {
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      justify-content: center !important;
      gap: 75px !important;
      padding: 0 12px !important;
      height: 48px !important;
      width: 100% !important;
      max-width: 100% !important;
   }

   .hero__bottom-icon {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      width: 60px !important;
      height: 60px !important;
      margin: 0 !important;
      order: 0 !important;
      flex: none !important;
      display: block !important;
   }

   .hero__bottom-text {
      font-size: 10px !important;
      white-space: nowrap !important;
      flex: 0 1 auto !important;
      display: block !important;
   }

   .stats-cards {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
   }

   .stat-card {
      padding: 24px 12px 20px;
   }

   .stat-card__content {
      margin-bottom: 16px;
   }

   .stat-card__value {
      font-size: 28px;
      margin-bottom: 6px;
   }

   .stat-card__label {
      font-size: 11px;
   }

   .stat-card__complex-top {
      flex-direction: column;
      gap: 4px;
   }

   .stat-card__complex-top .stat-card__value {
      font-size: 36px;
   }

   .stat-card__complex-label {
      font-size: 11px;
      text-align: center;
   }

   .stat-card__label--small {
      font-size: 9px;
   }

   .stat-icon-wrapper {
      width: 48px;
      height: 48px;
      min-width: 48px;
      min-height: 48px;
      margin-top: 5px;
   }

   .stat-icon-wrapper img {
      width: 22px;
      height: 22px;
   }

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

   .contact-section__title-big {
      font-size: 32px;
   }

   .portfolio-section__title,
   .portfolio-section__title-bold {
      font-size: 28px;
   }

   .founder__image {
      width: 200px;
      height: 200px;
   }

   /* Hacemos que el background de transición abarque mucha más altura en ambas secciones */
   .walkaway-transition-wrapper {
      margin-top: -75vw !important;
      position: relative;
      z-index: 1;
      overflow: hidden;
   }

   .walkaway-transition-img {
      width: 350% !important;
      max-width: none !important;
      margin-left: -75% !important;
      opacity: 0.5 !important;
   }
}

@media (max-width: 480px) {

   .hero__title,
   .hero__title .hero__title-accent,
   .hero__title strong {
      font-size: 28px;
   }

   .hero__services {
      flex-direction: column;
      gap: 8px;
   }

   .hero__service-pill::after {
      display: none;
   }

   .stats-section__title {
      font-size: 24px;
   }
}

/* ============================================
   GRAVITY FORMS OVERRIDES
   ============================================ */
.gform_wrapper {
   position: relative !important;
   z-index: 10 !important;
}

.gform_wrapper form {
   max-width: 700px !important;
   margin: 0 auto !important;
}

.gform_wrapper .gform_fields {
   display: flex !important;
   flex-wrap: wrap !important;
   gap: 16px !important;
   margin: 0 !important;
   padding: 0 !important;
}

.gform_wrapper .gfield {
   width: 100% !important;
   padding: 0 !important;
   margin: 0 !important;
   clear: none !important;
}

.gform_wrapper .ginput_complex.ginput_container_name,
.gf_stylespro .ginput_complex.ginput_container_name {
   display: flex !important;
   gap: 16px !important;
   width: 100% !important;
   margin-bottom: 0 !important;
   margin-top: 0 !important;
}

.gform_wrapper .ginput_complex.ginput_container_name span {
   flex: 1 1 0% !important;
   width: auto !important;
   min-width: 0 !important;
   padding: 0 !important;
   margin: 0 !important;
   box-sizing: border-box !important;
}

.gform_wrapper .ginput_complex.ginput_container_name span input {
   width: 100% !important;
   box-sizing: border-box !important;
   min-width: 0 !important;
}

.gform_wrapper .ginput_complex.ginput_container_name span label {
   display: none !important;
}

.gform_wrapper .gfield_label {
   display: none !important;
}

.gform_wrapper input[type='text'],
.gform_wrapper input[type='email'],
.gform_wrapper input[type='tel'],
.gform_wrapper input[type='url'],
.gform_wrapper textarea,
.gform_wrapper select {
   width: 100% !important;
   background: var(--cs-i-bg, transparent) !important;
   border: 1px solid var(--cs-i-bc, rgba(255, 255, 255, 0.15)) !important;
   color: var(--cs-i-tc, #fff) !important;
   border-radius: var(--cs-i-br, 8px) !important;
   padding: var(--cs-i-pad, 14px 16px) !important;
   font-size: var(--cs-i-fsz, 14px) !important;
   font-family: 'Inter', sans-serif !important;
   transition: border-color 0.3s ease !important;
   outline: none !important;
   box-shadow: none !important;
   pointer-events: auto !important;
   position: relative !important;
   z-index: 5 !important;
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus {
   border-color: var(--cs-i-fb, var(--accent)) !important;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
   color: var(--cs-i-pc, rgba(255, 255, 255, 0.3)) !important;
}

.gform_wrapper .gfield_checkbox {
   margin-top: 10px !important;
}

.gform_wrapper .gfield_checkbox li {
   display: flex !important;
   align-items: center !important;
   gap: 16px !important;
   padding: 20px 0 !important;
   border-top: 1px solid var(--accent) !important;
   margin: 0 !important;
}

.gform_wrapper .gfield_checkbox li:last-child {
   border-bottom: 1px solid var(--accent) !important;
}

.gform_wrapper .gfield_checkbox input[type='checkbox'] {
   appearance: none !important;
   -webkit-appearance: none !important;
   width: var(--cs-ck-sz, 24px) !important;
   height: var(--cs-ck-sz, 24px) !important;
   min-width: var(--cs-ck-sz, 24px) !important;
   border: 1px solid var(--accent) !important;
   border-radius: var(--cs-ck-br, 4px) !important;
   background: transparent !important;
   cursor: pointer !important;
   position: relative !important;
}

.gform_wrapper .gfield_checkbox input[type='checkbox']:checked {
   background: var(--cs-ck-cb, var(--accent)) !important;
   border-color: var(--cs-ck-cb, var(--accent)) !important;
}

.gform_wrapper .gfield_checkbox input[type='checkbox']:checked::after {
   content: '✓' !important;
   position: absolute !important;
   top: 50% !important;
   left: 50% !important;
   transform: translate(-50%, -50%) !important;
   color: var(--dark) !important;
   font-weight: 800 !important;
   font-size: 14px !important;
}

.gform_wrapper .gfield_checkbox label {
   color: var(--cs-sn-cl, var(--white)) !important;
   font-size: var(--cs-sn-sz, 14px) !important;
   font-weight: var(--cs-sn-wt, 700) !important;
   cursor: pointer !important;
}

.gform_wrapper .gform_footer {
   width: 100% !important;
   padding: 0 !important;
   margin-top: 32px !important;
   display: flex !important;
   justify-content: flex-end !important;
}

.gform_wrapper .gform_button,
.gform_wrapper input[type='submit'] {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   background: var(--cs-bt-bg, var(--accent)) !important;
   color: var(--cs-bt-cl, var(--dark)) !important;
   border: none !important;
   border-radius: var(--cs-bt-br, 40px) !important;
   padding: var(--cs-bt-pd, 14px 36px) !important;
   font-weight: var(--cs-bt-fw, 700) !important;
   font-family: 'Raleway', sans-serif !important;
   font-size: var(--cs-bt-fs, 16px) !important;
   cursor: pointer !important;
   transition: background 0.3s ease, transform 0.2s ease !important;
   letter-spacing: 0.5px !important;
   white-space: nowrap !important;
   width: auto !important;
   min-width: 160px !important;
}

.gform_wrapper .gform_button:hover {
   background: var(--cs-bt-hb, var(--accent-hover)) !important;
   transform: translateY(-1px) !important;
}