:root {
     /* Paleta basada en el logotipo de Juli Comunica */
     --ink: #23122F;
     --ink-soft: #5F5271;
     --rose: #E01E7B;
     --rose-dark: #A3115C;
     --plum: #4A1048;
     --gold: #FFB547;
     --cream: #FFF6FA;
     --cream-2: #FDEEF6;
     --white: #ffffff;
     --line: rgba(35, 18, 47, .09);
     --grad: linear-gradient(120deg, #E01E7B 0%, #FF5FA2 48%, #FFB547 100%);
     --shadow-sm: 0 6px 18px -10px rgba(35, 18, 47, .25);
     --shadow-md: 0 22px 50px -28px rgba(35, 18, 47, .45);
     --radius: 24px;
     --container: min(1160px, 92%);
     /* Tipografías de marca */
     --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
     --font-brand: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
     --font-body: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
 }

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

 html {
     scroll-behavior: smooth;
     -webkit-text-size-adjust: 100%
 }

 body {
     margin: 0;
     font-family: var(--font-body);
     color: var(--ink);
     background: var(--white);
     line-height: 1.65;
     overflow-x: hidden;
 }

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

 a {
     color: inherit
 }

 /* ENCABEZADOS Y MENSAJES PRINCIPALES — Space Grotesk */
 h1,
 h2,
 h3,
 h4,
 .display {
     font-family: var(--font-display);
     line-height: 1.12;
     letter-spacing: -.02em;
     margin: 0;
     font-weight: 700;
 }

 p {
     margin: 0
 }

 .container {
     width: var(--container);
     margin-inline: auto
 }

 .section {
     padding: clamp(64px, 9vw, 118px) 0;
     position: relative
 }

 /* MARCA Y SUBTÍTULOS — Montserrat */
 .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     font-family: var(--font-brand);
     font-weight: 600;
     font-size: .78rem;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: var(--rose);
     margin-bottom: 1rem;
 }

 .eyebrow::before {
     content: "";
     width: 26px;
     height: 2px;
     border-radius: 2px;
     background: var(--grad)
 }

 .section-title {
     font-size: clamp(1.9rem, 4.6vw, 3rem);
     max-width: 22ch
 }

 .section-lead {
     margin-top: 1.1rem;
     color: var(--ink-soft);
     font-family: var(--font-brand);
     font-size: clamp(1rem, 1.6vw, 1.09rem);
     font-weight: 400;
     line-height: 1.7;
     max-width: 62ch;
 }

 /* ---------- Buttons ---------- */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: .6rem;
     padding: 1rem 1.7rem;
     border-radius: 999px;
     font-family: var(--font-brand);
     font-weight: 600;
     font-size: 1rem;
     text-decoration: none;
     border: 1.5px solid transparent;
     cursor: pointer;
     transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s, background .35s, color .35s, border-color .35s;
     white-space: nowrap;
 }

 .btn svg {
     width: 18px;
     height: 18px;
     flex: none
 }

 .btn--primary {
     background: var(--grad);
     color: #fff;
     box-shadow: 0 16px 34px -16px rgba(224, 30, 123, .75)
 }

 .btn--primary:hover {
     transform: translateY(-4px);
     box-shadow: 0 24px 44px -16px rgba(255, 181, 71, .65)
 }

 .btn--ghost {
     border-color: rgba(255, 255, 255, .55);
     color: #fff;
     backdrop-filter: blur(6px);
     background: rgba(255, 255, 255, .06)
 }

 .btn--ghost:hover {
     background: #fff;
     color: var(--ink);
     border-color: #fff;
     transform: translateY(-4px)
 }

 .btn--outline {
     border-color: var(--rose);
     color: var(--rose);
     background: transparent
 }

 .btn--outline:hover {
     background: var(--rose);
     color: #fff;
     transform: translateY(-4px)
 }

 /* ---------- Header ---------- */
 .header {
     position: fixed;
     inset: 0 0 auto 0;
     z-index: 100;
     padding: .9rem 0;
     transition: background .4s ease, box-shadow .4s ease, padding .4s ease, backdrop-filter .4s;
 }

 .header .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem
 }

 .brand {
     display: flex;
     align-items: center;
     gap: .7rem;
     text-decoration: none;
     flex: none
 }

 .brand__logo {
     height: 50px;
     width: 50px;
     object-fit: cover;
     border-radius: 15px;
     background: #fff;
     padding: 3px;
     box-shadow: 0 0 0 1px rgba(255, 255, 255, .38), var(--shadow-sm);
     transition: height .4s ease, width .4s ease, box-shadow .4s ease;
 }

 .brand__name {
     font-family: var(--font-brand);
     font-weight: 700;
     font-size: 1.16rem;
     color: #fff;
     letter-spacing: -.01em;
     transition: color .4s;
     line-height: 1.15;
 }

 .brand__name span {
     color: var(--gold);
     font-weight: 500
 }

 .header.scrolled .brand__name {
     color: var(--ink)
 }

 .header.scrolled .brand__logo {
     height: 44px;
     width: 44px;
     box-shadow: 0 0 0 1px rgba(224, 30, 123, .18), var(--shadow-sm);
 }

 .nav {
     display: none
 }

 .nav a {
     text-decoration: none;
     font-family: var(--font-brand);
     font-size: .9rem;
     font-weight: 500;
     letter-spacing: .01em;
     color: rgba(255, 255, 255, .88);
     position: relative;
     padding: .35rem 0;
     transition: color .3s;
 }

 .nav a::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -2px;
     height: 2px;
     width: 0;
     border-radius: 2px;
     background: var(--grad);
     transition: width .35s ease;
 }

 .nav a:hover {
     color: #fff
 }

 .nav a:hover::after {
     width: 100%
 }

 .header.scrolled .nav a {
     color: var(--ink-soft)
 }

 .header.scrolled .nav a:hover {
     color: var(--rose)
 }

 .header__cta {
     display: none
 }

 .nav-toggle {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 46px;
     height: 46px;
     border-radius: 14px;
     border: 1.5px solid rgba(255, 255, 255, .4);
     background: rgba(255, 255, 255, .08);
     cursor: pointer;
     padding: 0;
     transition: .3s;
 }

 .nav-toggle span {
     display: block;
     width: 20px;
     height: 2px;
     background: #fff;
     border-radius: 2px;
     position: relative;
     transition: .3s
 }

 .nav-toggle span::before,
 .nav-toggle span::after {
     content: "";
     position: absolute;
     left: 0;
     width: 20px;
     height: 2px;
     background: #fff;
     border-radius: 2px;
     transition: .3s;
 }

 .nav-toggle span::before {
     top: -6px
 }

 .nav-toggle span::after {
     top: 6px
 }

 .header.scrolled .nav-toggle {
     border-color: var(--line);
     background: #fff
 }

 .header.scrolled .nav-toggle span,
 .header.scrolled .nav-toggle span::before,
 .header.scrolled .nav-toggle span::after {
     background: var(--ink)
 }

 body.nav-open .nav-toggle span {
     background: transparent !important
 }

 body.nav-open .nav-toggle span::before {
     transform: translateY(6px) rotate(45deg);
     background: #fff !important
 }

 body.nav-open .nav-toggle span::after {
     transform: translateY(-6px) rotate(-45deg);
     background: #fff !important
 }

 body.nav-open .nav-toggle {
     border-color: rgba(255, 255, 255, .4);
     background: rgba(255, 255, 255, .08)
 }

 .header.scrolled {
     background: rgba(255, 255, 255, .93);
     backdrop-filter: blur(14px);
     box-shadow: 0 8px 30px -22px rgba(35, 18, 47, .6);
     padding: .55rem 0
 }

 /* Mobile menu panel */
 @media (max-width:919px) {
     .nav {
         display: flex;
         flex-direction: column;
         gap: .4rem;
         position: fixed;
         inset: 0;
         z-index: 99;
         background: linear-gradient(160deg, #2A0E2E 0%, #5C1450 55%, #8A1B5A 100%);
         padding: 7.5rem 8% 3rem;
         opacity: 0;
         visibility: hidden;
         transform: translateY(-12px);
         transition: opacity .35s ease, transform .35s ease, visibility .35s;
     }

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

     body.nav-open {
         overflow: hidden
     }

     .nav a {
         font-family: var(--font-brand);
         font-size: 1.3rem;
         font-weight: 600;
         letter-spacing: 0;
         color: #fff !important;
         padding: .85rem 0;
         border-bottom: 1px solid rgba(255, 255, 255, .12);
     }

     .nav a::after {
         display: none
     }

     .nav .nav__whats {
         margin-top: 2rem;
         border-bottom: none;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         background: #fff;
         color: var(--ink) !important;
         border-radius: 999px;
         padding: 1rem 1.6rem;
         font-size: 1rem;
     }

     .nav .nav__logo {
         align-self: flex-start;
         margin-bottom: 1.4rem;
         display: inline-flex;
         align-items: center;
         gap: .7rem;
         border-bottom: none !important;
         padding: 0 !important;
     }

     .nav .nav__logo img {
         width: 54px;
         height: 54px;
         border-radius: 16px;
         background: #fff;
         padding: 3px;
         object-fit: cover
     }
 }

 @media (min-width:920px) {
     .nav {
         display: flex;
         align-items: center;
         gap: 2rem
     }

     .header__cta {
         display: inline-flex
     }

     .nav__whats,
     .nav__logo {
         display: none
     }
 }

 /* ---------- Hero ---------- */
 .hero {
     position: relative;
     min-height: 100svh;
     display: flex;
     align-items: center;
     padding: 9rem 0 5rem;
     overflow: hidden;
     isolation: isolate;
 }

 .hero__media {
     position: absolute;
     top: -12%;
     left: 0;
     width: 100%;
     height: 126%;
     z-index: -2;
     background-image: url('https://backend.klansites.tech/storage/question-files/01a0aa77-95fe-7153-9f2f-d53216771227/Q61/vuGvwvAW9APtt5O75ovBfjVHAi21y9A462Rqmj0Y.png');
     background-size: cover;
     background-position: center;
     transform: translate3d(0, 0, 0) scale(1.06);
     will-change: transform;
 }

 .hero__overlay {
     position: absolute;
     inset: 0;
     z-index: -1;
     background:
         radial-gradient(120% 90% at 12% 15%, rgba(224, 30, 123, .88) 0%, rgba(224, 30, 123, .34) 42%, rgba(224, 30, 123, 0) 70%),
         linear-gradient(180deg, rgba(30, 10, 36, .86) 0%, rgba(35, 12, 42, .78) 45%, rgba(24, 8, 30, .92) 100%);
 }

 .hero__inner {
     position: relative;
     max-width: 780px;
     color: #fff
 }

 .hero__badge {
     display: inline-flex;
     align-items: center;
     gap: .7rem;
     padding: .45rem 1.05rem .45rem .5rem;
     border-radius: 999px;
     background: rgba(255, 255, 255, .12);
     border: 1px solid rgba(255, 255, 255, .22);
     backdrop-filter: blur(8px);
     font-family: var(--font-brand);
     font-size: .78rem;
     font-weight: 500;
     letter-spacing: .03em;
     margin-bottom: 1.6rem;
 }

 .hero__badge img {
     width: 30px;
     height: 30px;
     border-radius: 9px;
     object-fit: cover;
     background: #fff;
     padding: 2px;
     flex: none;
     box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6);
 }

 .hero__badge i {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #4ADE80;
     box-shadow: 0 0 0 4px rgba(74, 222, 128, .22);
     display: block;
     flex: none;
     margin-left: .15rem
 }

 .hero h1 {
     font-family: var(--font-display);
     font-size: clamp(2.15rem, 6.4vw, 4.15rem);
     font-weight: 700;
     letter-spacing: -.03em;
     line-height: 1.06;
     text-wrap: balance;
 }

 .hero h1 em {
     font-style: normal;
     background: linear-gradient(100deg, #FFD1E4, #FF9CC2 45%, #FFD9A0);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .hero__sub {
     margin-top: 1.4rem;
     font-family: var(--font-brand);
     font-size: clamp(1.02rem, 1.9vw, 1.16rem);
     font-weight: 400;
     color: rgba(255, 255, 255, .86);
     max-width: 60ch;
     line-height: 1.75;
 }

 .hero__actions {
     display: flex;
     flex-wrap: wrap;
     gap: .9rem;
     margin-top: 2.3rem
 }

 .hero__trust {
     margin-top: 3.2rem;
     padding-top: 1.8rem;
     border-top: 1px solid rgba(255, 255, 255, .16);
     display: grid;
     gap: 1rem;
     grid-template-columns: 1fr;
     max-width: 640px;
 }

 .hero__trust div {
     display: flex;
     gap: .7rem;
     align-items: flex-start;
     font-size: .92rem;
     color: rgba(255, 255, 255, .82)
 }

 .hero__trust svg {
     width: 20px;
     height: 20px;
     flex: none;
     margin-top: .15rem;
     color: #FFC88F
 }

 @media (min-width:640px) {
     .hero__trust {
         grid-template-columns: repeat(3, 1fr)
     }
 }

 .hero__scroll {
     position: absolute;
     bottom: 1.6rem;
     left: 50%;
     transform: translateX(-50%);
     color: rgba(255, 255, 255, .6);
     font-family: var(--font-brand);
     font-size: .7rem;
     letter-spacing: .22em;
     text-transform: uppercase;
     display: none;
 }

 @media (min-width:920px) {
     .hero__scroll {
         display: block
     }
 }

 /* ---------- Logos / marquee strip ---------- */
 .strip {
     background: var(--ink);
     color: #fff;
     padding: 1.1rem 0;
     overflow: hidden
 }

 .strip__track {
     display: flex;
     gap: 3rem;
     white-space: nowrap;
     animation: slide 26s linear infinite;
     width: max-content
 }

 .strip span {
     font-family: var(--font-brand);
     font-weight: 500;
     font-size: .88rem;
     letter-spacing: .04em;
     color: rgba(255, 255, 255, .7);
     display: inline-flex;
     align-items: center;
     gap: .7rem;
 }

 .strip span::after {
     content: "";
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: var(--gold);
     display: block
 }

 @keyframes slide {
     to {
         transform: translateX(-50%)
     }
 }

 /* ---------- Franja de marca con el logo en grande ---------- */
 .brandband {
     position: relative;
     overflow: hidden;
     background: linear-gradient(150deg, #FFF6FA 0%, #FDEEF6 52%, #FFF3E6 100%);
     padding: clamp(52px, 7vw, 86px) 0;
 }

 .brandband::before {
     content: "";
     position: absolute;
     width: 460px;
     height: 460px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(224, 30, 123, .14), transparent 68%);
     top: -230px;
     right: -140px;
     pointer-events: none;
 }

 .brandband::after {
     content: "";
     position: absolute;
     width: 380px;
     height: 380px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(255, 181, 71, .22), transparent 70%);
     bottom: -210px;
     left: -120px;
     pointer-events: none;
 }

 .brandband__inner {
     position: relative;
     z-index: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
 }

 .brandband__logo {
     width: clamp(126px, 20vw, 176px);
     height: auto;
     aspect-ratio: 1/1;
     object-fit: cover;
     border-radius: 34px;
     background: #fff;
     padding: 12px;
     border: 1px solid rgba(224, 30, 123, .14);
     box-shadow: 0 34px 64px -32px rgba(35, 18, 47, .55);
     transition: transform .55s cubic-bezier(.2, .7, .3, 1), box-shadow .55s ease;
 }

 .brandband__logo:hover {
     transform: translateY(-8px) scale(1.03);
     box-shadow: 0 44px 76px -32px rgba(224, 30, 123, .5)
 }

 .brandband__name {
     margin-top: 1.4rem;
     font-family: var(--font-brand);
     font-weight: 700;
     font-size: clamp(1.7rem, 4.4vw, 2.5rem);
     letter-spacing: -.015em;
     color: var(--ink);
     line-height: 1.15;
 }

 .brandband__name span {
     color: var(--rose)
 }

 .brandband__tag {
     margin-top: .55rem;
     font-family: var(--font-brand);
     font-weight: 500;
     font-size: clamp(.95rem, 1.9vw, 1.1rem);
     color: var(--ink-soft);
     max-width: 54ch;
     line-height: 1.7;
 }

 .brandband__meta {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: .6rem;
     margin-top: 1.8rem
 }

 .brandband__meta span {
     font-family: var(--font-brand);
     font-size: .74rem;
     font-weight: 600;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--rose-dark);
     background: #fff;
     border: 1px solid rgba(224, 30, 123, .18);
     padding: .52rem 1rem;
     border-radius: 999px;
     box-shadow: 0 8px 20px -14px rgba(35, 18, 47, .35);
 }

 /* ---------- Nosotros ---------- */
 .about {
     background: var(--white)
 }

 .about__grid {
     display: grid;
     gap: clamp(2.4rem, 5vw, 4.5rem);
     align-items: center;
     grid-template-columns: 1fr
 }

 @media (min-width:980px) {
     .about__grid {
         grid-template-columns: 1.05fr 1fr
     }
 }

 .about__text p+p {
     margin-top: 1.1rem
 }

 .about__text p {
     color: var(--ink-soft);
     font-family: var(--font-body)
 }

 .about__text strong {
     color: var(--ink);
     font-weight: 600
 }

 .about__list {
     list-style: none;
     padding: 0;
     margin: 2rem 0 0;
     display: grid;
     gap: .85rem
 }

 .about__list li {
     display: flex;
     gap: .75rem;
     align-items: flex-start;
     font-size: .96rem;
     color: var(--ink-soft);
     font-family: var(--font-body)
 }

 .about__list svg {
     width: 20px;
     height: 20px;
     flex: none;
     color: var(--rose);
     margin-top: .15rem
 }

 .about__media {
     position: relative;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem
 }

 .about__media img {
     border-radius: 20px;
     object-fit: cover;
     width: 100%;
     height: 100%;
     box-shadow: var(--shadow-md);
     background: var(--cream-2)
 }

 .about__media .tall {
     grid-row: span 2;
     height: 100%;
     width: 100%;
     object-position: 80%;
 }

 .about__media .short {
     aspect-ratio: 1/1
 }

 .about__quote {
     position: absolute;
     bottom: -1.4rem;
     left: -.6rem;
     right: 2rem;
     background: #fff;
     border-radius: 18px;
     padding: 1.1rem 1.3rem;
     box-shadow: var(--shadow-md);
     border-left: 4px solid var(--gold);
     font-size: .9rem;
     color: var(--ink-soft);
     font-family: var(--font-body);
 }

 .about__quote b {
     display: block;
     color: var(--ink);
     font-family: var(--font-brand);
     font-weight: 700;
     font-size: .98rem;
     margin-bottom: .15rem;
     letter-spacing: 0;
 }

 @media (max-width:520px) {
     .about__quote {
         position: static;
         margin-top: 1rem;
         left: 0;
         right: 0
     }
 }

 /* ---------- Servicios ---------- */
 .services {
     background: var(--cream);
     position: relative
 }

 .services__head {
     max-width: 720px
 }

 .cards {
     display: grid;
     gap: 1.3rem;
     margin-top: 3.2rem;
     grid-template-columns: 1fr
 }

 @media (min-width:640px) {
     .cards {
         grid-template-columns: repeat(2, 1fr)
     }
 }

 @media (min-width:1024px) {
     .cards {
         grid-template-columns: repeat(4, 1fr)
     }
 }

 .card {
     background: #fff;
     border-radius: var(--radius);
     padding: 2rem 1.6rem;
     border: 1px solid var(--line);
     position: relative;
     overflow: hidden;
     transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s, border-color .4s;
 }

 .card::before {
     content: "";
     position: absolute;
     inset: auto 0 0 0;
     height: 3px;
     background: var(--grad);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .45s ease;
 }

 .card:hover {
     transform: translateY(-8px);
     box-shadow: var(--shadow-md);
     border-color: transparent
 }

 .card:hover::before {
     transform: scaleX(1)
 }

 .card__icon {
     width: 54px;
     height: 54px;
     border-radius: 16px;
     display: grid;
     place-items: center;
     margin-bottom: 1.3rem;
     background: linear-gradient(140deg, rgba(224, 30, 123, .12), rgba(255, 181, 71, .18));
     color: var(--rose);
     transition: .4s;
 }

 .card:hover .card__icon {
     background: var(--grad);
     color: #fff;
     transform: rotate(-6deg) scale(1.05)
 }

 .card__icon svg {
     width: 26px;
     height: 26px
 }

 .card h3 {
     font-family: var(--font-display);
     font-size: 1.14rem;
     margin-bottom: .6rem;
     font-weight: 600;
     letter-spacing: -.01em
 }

 .card p {
     color: var(--ink-soft);
     font-family: var(--font-body);
     font-size: .94rem
 }

 /* ---------- Proceso ---------- */
 .process {
     background: #fff
 }

 .steps {
     display: grid;
     gap: 1.1rem;
     margin-top: 3.2rem;
     grid-template-columns: 1fr
 }

 @media (min-width:640px) {
     .steps {
         grid-template-columns: repeat(2, 1fr)
     }
 }

 @media (min-width:1080px) {
     .steps {
         grid-template-columns: repeat(5, 1fr)
     }
 }

 .step {
     background: var(--cream-2);
     border-radius: 20px;
     padding: 1.8rem 1.4rem;
     border: 1px solid rgba(224, 30, 123, .1);
     position: relative;
     transition: transform .4s ease, background .4s ease, box-shadow .4s ease;
 }

 .step:hover {
     transform: translateY(-7px);
     background: #fff;
     box-shadow: var(--shadow-md)
 }

 .step__num {
     font-family: var(--font-display);
     font-weight: 700;
     font-size: 2.05rem;
     line-height: 1;
     background: var(--grad);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     display: block;
     margin-bottom: .9rem;
 }

 .step h3 {
     font-family: var(--font-brand);
     font-size: 1rem;
     text-transform: uppercase;
     letter-spacing: .09em;
     margin-bottom: .5rem;
     font-weight: 700;
 }

 .step p {
     font-size: .9rem;
     color: var(--ink-soft);
     font-family: var(--font-body)
 }

 /* ---------- Cifras ---------- */
 .stats {
     background: linear-gradient(150deg, #230A28 0%, #4A1048 48%, #7A1A4E 100%);
     color: #fff;
     position: relative;
     overflow: hidden;
 }

 .stats::after {
     content: "";
     position: absolute;
     width: 520px;
     height: 520px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(255, 181, 71, .32), transparent 68%);
     right: -180px;
     top: -200px;
     pointer-events: none;
 }

 .stats__grid {
     display: grid;
     gap: 2.2rem;
     grid-template-columns: 1fr;
     margin-top: 2.8rem;
     position: relative;
     z-index: 1
 }

 @media (min-width:640px) {
     .stats__grid {
         grid-template-columns: repeat(2, 1fr)
     }
 }

 @media (min-width:1024px) {
     .stats__grid {
         grid-template-columns: repeat(4, 1fr)
     }
 }

 .stat {
     border-left: 2px solid rgba(255, 255, 255, .18);
     padding-left: 1.3rem
 }

 .stat__num {
     font-family: var(--font-display);
     font-weight: 700;
     font-size: clamp(2.6rem, 5.5vw, 3.4rem);
     line-height: 1;
     letter-spacing: -.03em;
     background: linear-gradient(100deg, #FFD9A0, #FF9CC2 55%, #FFC2E2);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .stat__label {
     margin-top: .7rem;
     font-family: var(--font-brand);
     font-size: .9rem;
     font-weight: 400;
     line-height: 1.6;
     color: rgba(255, 255, 255, .78);
     max-width: 24ch;
 }

 .stats h2 {
     font-size: clamp(1.8rem, 4vw, 2.6rem);
     max-width: 20ch
 }

 .stats p.lead {
     margin-top: 1rem;
     font-family: var(--font-body);
     color: rgba(255, 255, 255, .75);
     max-width: 56ch;
 }

 .stats__logo {
     width: 60px;
     height: 60px;
     border-radius: 18px;
     object-fit: cover;
     background: #fff;
     padding: 3px;
     box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 14px 30px -14px rgba(0, 0, 0, .6);
     margin-bottom: 1.2rem;
 }

 /* ---------- Galería ---------- */
 .gallery {
     background: #fff
 }

 .gallery__grid {
     display: grid;
     gap: 1rem;
     margin-top: 3rem;
     grid-template-columns: 1fr
 }

 @media (min-width:600px) {
     .gallery__grid {
         grid-template-columns: repeat(2, 1fr)
     }
 }

 @media (min-width:960px) {
     .gallery__grid {
         grid-template-columns: repeat(3, 1fr)
     }
 }

 .gitem {
     position: relative;
     border-radius: 22px;
     overflow: hidden;
     background: var(--ink);
     aspect-ratio: 4/3;
 }

 .gitem img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .7s cubic-bezier(.2, .7, .3, 1), opacity .5s;
     opacity: .92;
 }

 .gitem:hover img {
     transform: scale(1.08);
     opacity: 1
 }

 .gitem__cap {
     position: absolute;
     inset: auto 0 0 0;
     padding: 1.4rem 1.2rem 1.1rem;
     background: linear-gradient(to top, rgba(30, 10, 36, .92), rgba(30, 10, 36, 0));
     color: #fff;
     font-family: var(--font-brand);
     font-weight: 600;
     font-size: .98rem;
     transition: transform .45s ease;
 }

 .gitem__cap small {
     display: block;
     font-family: var(--font-body);
     font-weight: 400;
     font-size: .8rem;
     opacity: .78;
     margin-top: .15rem;
 }

 @media (min-width:960px) {
     .gitem--wide {
         grid-column: span 2;
         aspect-ratio: 8/4.55
     }
 }

 /* ---------- CTA final ---------- */
 .cta {
     position: relative;
     overflow: hidden;
     background: var(--cream)
 }

 .cta__box {
     position: relative;
     border-radius: 32px;
     overflow: hidden;
     padding: clamp(2.6rem, 6vw, 4.6rem) clamp(1.5rem, 5vw, 4rem);
     background: linear-gradient(135deg, #2A0E2E 0%, #8A1550 45%, #E01E7B 125%);
     color: #fff;
     text-align: center;
 }

 .cta__box::before {
     content: "";
     position: absolute;
     width: 420px;
     height: 420px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(255, 181, 71, .42), transparent 65%);
     top: -180px;
     left: -120px;
 }

 .cta__box::after {
     content: "";
     position: absolute;
     width: 360px;
     height: 360px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(255, 156, 196, .35), transparent 68%);
     bottom: -160px;
     right: -100px;
 }

 .cta__box>* {
     position: relative;
     z-index: 1
 }

 .cta__logo {
     width: 88px;
     height: 88px;
     border-radius: 26px;
     object-fit: cover;
     background: #fff;
     padding: 5px;
     margin: 0 auto 1.5rem;
     box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 22px 44px -20px rgba(0, 0, 0, .65);
 }

 .cta h2 {
     font-size: clamp(1.85rem, 4.6vw, 3rem);
     max-width: 24ch;
     margin-inline: auto;
     text-wrap: balance
 }

 .cta p {
     margin: 1.3rem auto 0;
     max-width: 60ch;
     font-family: var(--font-body);
     color: rgba(255, 255, 255, .85)
 }

 .cta__actions {
     display: flex;
     flex-wrap: wrap;
     gap: .9rem;
     justify-content: center;
     margin-top: 2.2rem
 }

 .cta .btn--primary {
     background: #fff;
     color: var(--ink);
     box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6)
 }

 .cta .btn--primary:hover {
     color: var(--rose)
 }

 .cta__mail {
     display: inline-block;
     margin-top: 1.6rem;
     color: rgba(255, 255, 255, .72);
     font-family: var(--font-brand);
     font-size: .88rem;
     text-decoration: none;
     border-bottom: 1px solid rgba(255, 255, 255, .3);
     padding-bottom: 2px;
     transition: .3s;
 }

 .cta__mail:hover {
     color: #fff;
     border-color: #fff
 }

 /* ---------- Footer ---------- */
 .footer {
     background: var(--ink);
     color: rgba(255, 255, 255, .72);
     padding: clamp(3.4rem, 7vw, 5rem) 0 1.6rem
 }

 .footer__grid {
     display: grid;
     gap: 2.6rem;
     grid-template-columns: 1fr
 }

 @media (min-width:760px) {
     .footer__grid {
         grid-template-columns: 1.4fr 1fr 1fr
     }
 }

 .footer .brand__name {
     color: #fff
 }

 .footer .brand__logo {
     height: 64px;
     width: 64px;
     border-radius: 20px;
     box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 14px 30px -16px rgba(0, 0, 0, .65);
 }

 .footer .brand__name {
     font-size: 1.32rem
 }

 .footer__about {
     margin-top: 1.3rem;
     font-family: var(--font-body);
     font-size: .93rem;
     max-width: 38ch;
     line-height: 1.75
 }

 .footer h4 {
     font-size: .78rem;
     letter-spacing: .16em;
     text-transform: uppercase;
     color: #fff;
     font-family: var(--font-brand);
     font-weight: 600;
     margin-bottom: 1.1rem;
 }

 .footer ul {
     list-style: none;
     padding: 0;
     margin: 0;
     display: grid;
     gap: .75rem
 }

 .footer a {
     text-decoration: none;
     font-family: var(--font-body);
     font-size: .93rem;
     transition: color .3s, transform .3s;
     display: inline-block;
 }

 .footer a:hover {
     color: #FFC88F;
     transform: translateX(3px)
 }

 .socials {
     display: flex;
     gap: .75rem;
     margin-top: 1.4rem
 }

 .socials a {
     width: 44px;
     height: 44px;
     border-radius: 14px;
     display: grid;
     place-items: center;
     background: rgba(255, 255, 255, .07);
     border: 1px solid rgba(255, 255, 255, .12);
     transition: .35s;
     transform: none !important;
 }

 .socials a:hover {
     background: var(--grad);
     border-color: transparent;
     transform: translateY(-4px) !important
 }

 .socials svg {
     width: 20px;
     height: 20px;
     color: #fff
 }

 .footer__bottom {
     margin-top: 3rem;
     padding-top: 1.6rem;
     border-top: 1px solid rgba(255, 255, 255, .1);
     display: flex;
     flex-direction: column;
     gap: .7rem;
     align-items: center;
     justify-content: space-between;
     font-family: var(--font-body);
     font-size: .82rem;
     text-align: center;
 }

 @media (min-width:700px) {
     .footer__bottom {
         flex-direction: row;
         text-align: left
     }
 }

 /* Floating WhatsApp */
 .wa-float {
     position: fixed;
     right: 1rem;
     bottom: 1rem;
     z-index: 90;
     width: 58px;
     height: 58px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     background: #25D366;
     color: #fff;
     box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .75);
     transition: transform .35s ease, box-shadow .35s ease;
 }

 .wa-float:hover {
     transform: translateY(-5px) scale(1.05)
 }

 .wa-float svg {
     width: 30px;
     height: 30px
 }

 @media (min-width:920px) {
     .wa-float {
         right: 1.6rem;
         bottom: 1.6rem
     }
 }

 @media (prefers-reduced-motion:reduce) {
     * {
         animation-duration: .001ms !important;
         transition-duration: .001ms !important
     }

     html {
         scroll-behavior: auto
     }

     .hero__media {
         transform: none !important
     }
 }