/* Acabado editorial, firma gráfica e interacciones de la identidad personal. */
#site-header{transition:box-shadow .3s,border-color .3s}
#site-header.is-scrolled{box-shadow:0 8px 32px #241b330c;border-color:#c5c7dc}
body.cm-growth .btn{transition:background-color .25s,border-color .25s,box-shadow .25s,translate .25s;box-shadow:0 0 0 0 #6236de00}
.btn .cmg-button-arrow{display:inline-block;flex:none;transition:translate .3s cubic-bezier(.2,.7,.2,1)}
body.cm-growth .btn:active{translate:0 1px}
body.cm-growth .btn:focus-visible{outline:3px solid #6236de;outline-offset:5px}
body.cm-growth .btn:disabled{cursor:wait;opacity:.65;translate:none}
@media(hover:hover) and (pointer:fine){
 body.cm-growth .btn:hover{translate:0 -2px;box-shadow:0 7px 18px #241b3318}
 .btn:hover .cmg-button-arrow{translate:3px -3px}
 .home-featured-project:hover,.project-tile:hover{transform:translateY(-5px);box-shadow:0 16px 34px #130d271c}
 .home-featured-project:hover .home-featured-photo,.project-tile:hover .project-cover{transform:scale(1.045) translateY(-3px)}
 .home-featured-project:hover .home-featured-more{color:#241b33}
 .mega-card:hover .mega-art>img{transform:scale(1.055)}
 .mega-card:hover{border-color:#b69de9;background:#ffffff0d}
 .mega-card:hover .mega-card-arrow{translate:3px -3px}
}
.hero .hero-note::after{content:'';display:inline-block;width:28px;height:28px;margin-left:12px;vertical-align:middle;background:url('assets/brand-arrow-ascent.svg') center/contain no-repeat}
body.cm-growth #contenido>.hero .art-sign{box-shadow:0 9px 26px #241b3322}
main :is(.section-head,.about-subheading,.projects-intro) .eyebrow{display:flex;align-items:center;gap:12px}
main :is(.section-head,.about-subheading,.projects-intro) .eyebrow::before{content:'';display:block;width:23px;height:23px;flex:none;background:url('assets/brand-arrow-ascent.svg') center/contain no-repeat}
.home-client-proof .eyebrow::before{filter:brightness(0) saturate(100%) invert(88%) sepia(43%) saturate(622%) hue-rotate(27deg)}
.home-client-proof{position:relative;isolation:isolate}
.home-client-proof>.wrap{position:relative;z-index:1}
.home-client-proof::before{content:'';position:absolute;top:28px;right:5%;width:82px;height:82px;background:url('assets/brand-arrow-ascent.svg') center/contain no-repeat;opacity:.2;filter:brightness(0) invert(1);pointer-events:none}
.home-featured-grid{gap:28px}
.home-featured-project,.project-tile{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;border:1px solid #ffffff24}
.home-featured-art{height:235px;background:#e3e6f6}
.home-featured-photo,.project-cover{transition:transform .65s cubic-bezier(.2,.7,.2,1);object-position:center}
.web-preview .home-featured-photo,.web-preview .project-cover{object-position:top}
.home-featured-art .home-featured-brand{position:absolute;bottom:16px;left:16px;width:142px;height:64px;padding:12px;border:1px solid #e5deed;box-shadow:0 4px 15px #241b3312}
.home-featured-art .home-featured-brand img{height:39px;max-width:118px;object-fit:contain}
.home-featured-arrow,.project-arrow{transition:transform .3s,background-color .3s}
.home-featured-copy h4{font-weight:700}
.home-featured-more{display:flex;align-items:center;justify-content:space-between}
.visual-caption{position:absolute;right:12px;bottom:12px;padding:5px 8px;border-radius:6px;background:#241b33e8;color:#fff;font-size:9px;line-height:1.4;letter-spacing:.015em;max-width:calc(100% - 185px);text-align:right;z-index:2}
.project-tile-art .visual-caption{font-size:8px}
.home-featured-project:focus-within,.project-tile:focus-within{outline:3px solid #b99aff;outline-offset:4px}

/* Megamenú: cada servicio tiene imagen, número y una lectura clara del reto. */
#services-mega:not([hidden]){animation:cmg-menu-in .3s cubic-bezier(.2,.7,.2,1) both}
body.cm-growth:has(#services-mega:not([hidden])) .gt_float_switcher{visibility:hidden}
body.cm-growth:has(#cmg-contact-form :focus) .gt_float_switcher{visibility:hidden}
#services-mega .mega-inner{gap:40px;padding-top:28px;padding-bottom:22px;grid-template-columns:.8fr 2.6fr}
#services-mega .mega-intro strong{font-size:31px;letter-spacing:-.045em;line-height:1.08;max-width:240px;display:block}
#services-mega .mega-intro>p{font-size:13px;color:#cec5dc;max-width:230px;margin-top:20px;line-height:1.65}
#services-mega .mega-intro>a{display:inline-block;font-size:12px;color:#d3fc74;margin-top:22px}
.mega-intro .mega-signature{width:49px;height:49px;margin-top:25px;background:url('assets/brand-arrow-ascent.svg') center/contain no-repeat;filter:brightness(0) invert(1);opacity:.65}
#services-mega .mega-grid{gap:14px;align-items:stretch}
#services-mega .mega-card{padding:9px 9px 12px;border:1px solid #ffffff22;border-radius:12px;min-width:0;transition:background-color .25s,border-color .25s}
#services-mega .mega-card .mega-art{display:block;position:relative;overflow:hidden;border-radius:7px;background:#eeeaf8}
#services-mega .mega-art>img{height:119px;width:100%;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.2,.7,.2,1);border-radius:0}
#services-mega .service-motion{display:block;width:100%;background:#21182f}
#services-mega .service-motion img{display:block;width:100%;height:140px;object-fit:contain;object-position:center;border-radius:0;transition:transform .6s}
#services-mega .mega-art .mega-image-label{display:none}
#services-mega .mega-art .mega-number{position:absolute;top:7px;left:7px;display:flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:50%;background:#231938;color:#d3fc74;font-size:10px;letter-spacing:.03em;margin:0}
#services-mega .mega-art .mega-image-label{position:absolute;right:0;bottom:0;left:0;margin:0;padding:15px 8px 6px;background:linear-gradient(transparent,#231938db);font-size:9px;color:#fff;line-height:1.3}
#services-mega .mega-card strong{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;font-size:14px;font-weight:700;margin:11px 3px 5px;line-height:1.2;letter-spacing:-.01em;color:#fff}
#services-mega .mega-card .mega-card-arrow{display:inline-block;color:#d3fc74;font-size:17px;line-height:1;transition:translate .3s;margin:0}
#services-mega .mega-card>.mega-description{display:block;color:#c9bfd7;font-size:11px;line-height:1.45;margin:0 3px}
#services-mega .mega-card:focus-visible{outline:3px solid #d3fc74;outline-offset:3px}
#services-mega .mega-bottom{padding-top:16px;padding-bottom:18px}
@keyframes cmg-menu-in{from{opacity:.4;translate:0 -8px}to{opacity:1;translate:0 0}}

/* El método conecta sus pasos; el estado estático sigue siendo comprensible. */
#metodo .process{position:relative;isolation:isolate;--method-progress:0%}
#metodo .process::before,#metodo .process::after{content:'';position:absolute;top:32px;left:33px;width:calc(66.6667% + 23.333px);height:2px;background:#b9bbd1;z-index:-1}
#metodo .process::after{background:#6236de;transform-origin:left;scale:var(--method-scale,0) 1;transition:scale .28s linear}
#metodo .step{border:0;padding-top:0;position:relative;min-width:0}
#metodo .step b{display:inline-flex;align-items:center;justify-content:center;width:66px;height:66px;border:1px solid #b7b5cb;border-radius:50%;background:var(--paper);font-size:24px;font-weight:600;transition:background-color .4s,border-color .4s,color .4s,box-shadow .4s}
#metodo .step.is-current b{background:#241b33;border-color:#241b33;color:#c9fa60;box-shadow:0 0 0 7px #6236de10}
#metodo .step.is-complete b{border-color:#6236de;color:#6236de}
#metodo .step h3{font-size:26px;margin-top:24px}

/* Contacto: una conversación concreta y un formulario con lectura sencilla. */
#contacto .contact-grid{align-items:start;gap:70px}
.contact-next{margin-top:33px;padding-top:25px;border-top:1px solid #241b3330}
.contact-person{display:flex;align-items:center;gap:13px;margin-bottom:27px}
.contact-person img{width:54px;height:54px;object-fit:cover;object-position:50% 25%;border-radius:50%;border:2px solid #fff}
.contact-person strong{display:block;font-size:16px;line-height:1.4}
.contact-person span{display:block;font-size:11px;margin-top:3px;color:#3c4931}
body.cm-growth #contacto .contact-next h3{font-size:20px;line-height:1.2;letter-spacing:-.025em;margin-bottom:19px}
.contact-after summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.contact-after summary::-webkit-details-marker{display:none}
.contact-after summary::after{content:'+';font-size:22px;font-weight:400;line-height:1}
.contact-after[open] summary::after{content:'−'}
.contact-after summary:focus-visible{outline:2px solid #6236de;outline-offset:4px}
.contact-next ol{list-style:none;margin:0;padding:0;display:grid;gap:19px}
.contact-next li{display:flex;gap:13px;align-items:flex-start}
.contact-next li>span{font-size:11px;font-weight:700;display:grid;place-items:center;width:27px;height:27px;flex:none;border:1px solid #241b3350;border-radius:50%}
.contact-next li strong{display:block;font-size:14px;line-height:1.4}
.contact-next li p{font-size:13px;line-height:1.5;margin-top:3px;color:#3c4931;max-width:42ch}
.contact-form-shell{background:#fafbff;border:1px solid #ffffffa0;border-radius:24px;padding:33px;box-shadow:0 18px 50px #3b491514}
.contact-form-heading{padding-bottom:23px;border-bottom:1px solid #dce0ed;margin-bottom:23px;container-type:inline-size}
.contact-form-heading .eyebrow{font-size:10px;letter-spacing:.12em;color:#6236de;margin-bottom:13px}
body.cm-growth .contact-form-heading h3{font-size:27px;line-height:1.12;letter-spacing:-.04em;max-width:380px}
body.cm-growth .contact-form-heading h3.contact-invitation{font-family:'Space Grotesk','DM Sans',sans-serif;font-size:clamp(48px,4.8vw,68px);font-size:clamp(32px,13.5cqi,68px);font-weight:700;letter-spacing:-.065em;line-height:1.08;max-width:none;display:flex;align-items:center;gap:18px}
.contact-invitation-arrow{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:#d3fc74;color:#6236de;box-shadow:0 0 0 7px #d3fc7426;transition:background-color .35s,box-shadow .35s,color .35s}
.contact-invitation-arrow::before{content:none}
.contact-invitation-arrow>svg{width:30px;height:30px;display:block}
.contact-invitation.cmg-title-visible .contact-invitation-arrow{animation:cmg-form-invite 1.6s cubic-bezier(.2,.65,.25,1) .6s both}
.contact-form-shell:focus-within .contact-invitation-arrow{background:#6236de;color:#fff;box-shadow:0 0 0 7px #6236de13}
@keyframes cmg-form-invite{from{opacity:.3;transform:translateY(-10px) rotate(-15deg) scale(.85)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
.contact-form-heading p{font-size:13px;line-height:1.65;color:#625c6a;margin-top:13px;max-width:43ch}
body.cm-growth .contact-form-shell .cmg-contact-form{padding:0;background:transparent;border-radius:0}
.contact-form-shell .cmg-contact-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.contact-form-shell .field-company,.contact-form-shell .field:has(textarea),.contact-form-shell :is(.form-privacy,.check,.form-status,button[type=submit]){grid-column:1/-1}
.contact-form-shell .field{font-size:12px;margin-bottom:16px}
.contact-form-shell .field input,.contact-form-shell .field select,.contact-form-shell .field textarea{border:1px solid #cdd1e0;border-radius:9px;background:#fff;padding:12px 13px;transition:border-color .2s,box-shadow .2s}
.contact-form-shell .field :is(input,select,textarea):focus{border-color:#6236de;box-shadow:0 0 0 3px #6236de13;outline:none}
.contact-form-shell .form-privacy{font-size:12px;line-height:1.55;margin-bottom:20px}
.contact-form-shell .check{font-size:11px;line-height:1.6;margin-bottom:24px}
.contact-form-shell input[type=checkbox]{accent-color:#6236de}
.contact-form-shell .form-status:empty{margin:0;padding:0}

/* Las imágenes permanecen visibles sin JavaScript; la entrada se activa al verlas. */
.cmg-image-enter{animation:cmg-image-in 1.45s cubic-bezier(.2,.65,.25,1) both}
@keyframes cmg-image-in{from{opacity:.25;translate:0 18px;scale:1.035}to{opacity:1;translate:0 0;scale:1}}
@media(max-width:1000px){
 #services-mega .mega-inner{display:block;padding-top:17px}
 #services-mega .mega-intro strong{font-size:22px;max-width:none;margin-bottom:16px}
 #services-mega .mega-intro strong br{display:block}
 #services-mega .mega-intro .mega-signature,#services-mega .mega-intro>p,#services-mega .mega-intro>a{display:none}
 #services-mega .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 #services-mega .mega-art>img{height:100px}
 #services-mega .service-motion img{height:100px}
 #services-mega .mega-card>.mega-description{display:block;font-size:10px}
 #services-mega .mega-card .mega-image-label{display:none}
 #contacto .contact-grid{gap:38px}
}
@media(max-width:760px){
 body.cm-growth.is-contact-visible .mobile-cta{display:none}
 body.cm-growth.is-contact-visible .gt_float_switcher{display:none!important}
 #metodo .process{gap:28px;grid-template-columns:1fr}
 #metodo .process::before,#metodo .process::after{top:32px;left:27px;width:2px;height:calc(100% - 100px)}
 #metodo .process::after{scale:1 var(--method-scale,0);transform-origin:top}
 #metodo .step{padding-left:77px;min-height:130px}
 #metodo .step b{position:absolute;left:0;top:0;width:56px;height:56px;font-size:20px}
 #metodo .step h3{font-size:25px;margin-top:0}
 #metodo .step p{font-size:14px;max-width:40ch}
 #services-mega .mega-card strong{font-size:12px;gap:4px}
 #services-mega .mega-art>img{height:86px}
 #services-mega .service-motion img{height:90px}
 .contact-form-shell{padding:25px;border-radius:20px}
 .contact-form-shell .cmg-contact-form{grid-template-columns:1fr}
 body.cm-growth .contact-form-heading h3{font-size:25px}
 body.cm-growth .contact-form-heading h3.contact-invitation{font-size:clamp(32px,10.7vw,48px);font-size:clamp(32px,13.5cqi,54px);gap:12px}
 .contact-invitation-arrow{width:37px;height:37px;box-shadow:0 0 0 5px #d3fc7426}
 .contact-invitation-arrow>svg{width:25px;height:25px}
 .home-featured-art{height:240px}
}
@media(max-width:390px){
 #services-mega .mega-card{padding:7px 7px 10px}
 #services-mega .mega-art>img{height:75px}
 #services-mega .service-motion img{height:82px}
 #services-mega .mega-card strong{font-size:11px}
 .contact-form-shell{padding:22px}
 .visual-caption{font-size:8px;max-width:calc(100% - 172px)}
}

/* Onda desde el cursor, elevación y flecha: una respuesta visible y consistente. */
body.cm-growth .cmg-interactive{position:relative;isolation:isolate;overflow:hidden;transition:translate .25s,box-shadow .3s,color .25s,border-color .25s}
body.cm-growth .cmg-interactive::before{content:'';position:absolute;inset:0;background:#c9fa60;clip-path:circle(0% at var(--hover-x,50%) var(--hover-y,50%));transition:clip-path .65s cubic-bezier(.2,.7,.2,1);z-index:0;pointer-events:none}
.cmg-interactive>.cmg-button-label,.cmg-interactive>span,.cmg-interactive>h3{position:relative;z-index:1}
.cmg-button-label{display:inline-block}
header .nav-trigger.cmg-interactive{border-radius:30px;padding:8px 12px;margin:-8px -12px}
#site-header .nav-trigger>.cmg-button-label{transform:none!important}
main summary.cmg-interactive{border-radius:10px}
.contact-after summary.cmg-interactive::after{position:relative;z-index:1}
body.cm-growth .cmg-interactive:focus-visible::before{clip-path:circle(150% at 50% 50%)}
body.cm-growth .cmg-interactive:focus-visible{color:#241b33!important;outline:3px solid #6236de;outline-offset:4px}
@media(hover:hover) and (pointer:fine){
 body.cm-growth .cmg-interactive:not(:disabled):hover::before{clip-path:circle(150% at var(--hover-x,50%) var(--hover-y,50%))}
 body.cm-growth .cmg-interactive:not(:disabled):hover{color:#241b33!important;translate:0 -3px;box-shadow:0 8px 20px #241b3320}
 .cmg-interactive:hover .cmg-button-arrow{translate:5px -5px}
 #services-mega .mega-card:hover .service-motion img{transform:scale(1.04)}
}
@media(prefers-reduced-motion:reduce){body.cm-growth .cmg-interactive,body.cm-growth .cmg-interactive::before,#services-mega .service-motion img{transition:none!important;translate:none!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){
 body.cm-growth *,body.cm-growth *::before,body.cm-growth *::after{scroll-behavior:auto!important}
 .cmg-image-enter,#services-mega:not([hidden]){animation:none!important;opacity:1!important;translate:none!important;scale:none!important}
 #metodo .process::after{scale:1!important}
 body.cm-growth .btn,.btn .cmg-button-arrow,.home-featured-project,.project-tile,.home-featured-photo,.project-cover,#services-mega .mega-card,#services-mega .mega-art>img,.mega-card-arrow,#metodo .step b{transition:none!important;transform:none!important;translate:none!important}
}

/* Un mismo lenguaje para los cinco accesos; Hablemos conserva su diseño. */
#site-header #main-navigation{gap:7px}
#site-header #main-navigation>:is(a:not(.btn),button.nav-trigger){
 display:inline-flex;align-items:center;justify-content:center;gap:6px;
 min-height:44px;padding:10px 14px;margin:0;border:1px solid #c3c6db;
 border-radius:999px;background:transparent;color:#241b33;
 font-size:14px;font-weight:500;line-height:1.3;text-decoration:none;white-space:nowrap;
}
#site-header #main-navigation>.nav-trigger>span{margin-left:0}
#site-header #main-navigation>.nav-trigger[aria-expanded=true]{border-color:#6236de;background:#e3e6f6}
@media(hover:hover) and (pointer:fine){
 #site-header #main-navigation>:is(a:not(.btn),button.nav-trigger):hover{border-color:#a8b58c}
}
@media(max-width:1000px){
 #site-header #main-navigation.mobile-open{gap:8px}
 #site-header #main-navigation.mobile-open>:is(a:not(.btn),button.nav-trigger){margin:0;font-size:13px;padding:10px 14px}
}

/* Una superficie viva: relieve orgánico y luz, siempre detrás del contenido. */
body.cm-growth #contacto.contact{position:relative;isolation:isolate;overflow:hidden;background:var(--lime)}
#contacto.contact>.wrap{position:relative;z-index:1}
#contacto.contact::before,#contacto.contact::after{content:'';position:absolute;inset:-20%;z-index:0;pointer-events:none}
#contacto.contact::before{
 background:radial-gradient(ellipse at 14% 24%,#739e192c,transparent 43%),radial-gradient(ellipse at 74% 70%,#f9ffd980,transparent 46%),radial-gradient(ellipse at 82% 12%,#87b52238,transparent 39%);
 animation:cmg-contact-breathe 22s ease-in-out -7s infinite alternate paused;
}
#contacto.contact::after{
 background:url('assets/contact-flow.svg') repeat center/640px 640px;
 opacity:.16;mask-image:linear-gradient(115deg,#000 5%,#0009 48%,#000 100%);
 animation:cmg-contact-flow 32s ease-in-out -11s infinite alternate paused;
}
body.is-contact-visible #contacto.contact::before,body.is-contact-visible #contacto.contact::after{animation-play-state:running}
#contacto.contact::before{translate:var(--contact-shift-x,0px) var(--contact-shift-y,0px);transition:translate 1s cubic-bezier(.2,.65,.25,1)}
#contacto.contact::after{translate:var(--contact-shift-x,0px) var(--contact-shift-y,0px);transition:translate .85s cubic-bezier(.2,.65,.25,1),opacity .6s}
#contacto.contact.is-pointer-active::after{opacity:.22}
.contact-cursor-light{
 position:absolute;top:0;left:0;width:620px;height:620px;z-index:0;pointer-events:none;
 border-radius:50%;background:radial-gradient(circle,#f8ffd6b3 0%,#edffb940 38%,transparent 70%);
 translate:calc(var(--contact-pointer-x,0px) - 50%) calc(var(--contact-pointer-y,0px) - 50%);
 opacity:0;transition:translate .45s cubic-bezier(.2,.65,.25,1),opacity .65s;
}
#contacto.is-pointer-active .contact-cursor-light{opacity:1}
@keyframes cmg-contact-breathe{from{transform:translate3d(-3%,2%,0) scale(1)}to{transform:translate3d(4%,-3%,0) scale(1.09)}}
@keyframes cmg-contact-flow{from{transform:translate3d(-22px,-18px,0) rotate(-2deg) scale(1.02)}to{transform:translate3d(34px,30px,0) rotate(2deg) scale(1.06)}}
@media(max-width:760px){
 #contacto.contact::after{background-size:480px 480px;opacity:.12}
}
@media(prefers-reduced-motion:reduce){
 #contacto.contact::before,#contacto.contact::after{animation:none!important;transform:none!important;translate:none!important;transition:none!important}
 .contact-cursor-light{display:none}
}
@media(hover:none),(pointer:coarse){.contact-cursor-light{display:none}}
@media(prefers-reduced-motion:reduce){.contact-invitation-arrow,.contact-invitation-arrow::before{animation:none!important;transition:none!important;transform:none!important}}

/* Flechas de autor: un trazo con bucle asciende de suroeste a noreste. */
.cmg-arrow-mark{display:inline-flex;align-items:center;justify-content:center;width:1.35em;height:1.35em;flex:none;vertical-align:-.25em;line-height:0;white-space:nowrap}
.cmg-arrow-mark>svg{display:block;width:100%;height:100%;overflow:visible}
.cmg-arrow-trail{stroke-dasharray:1;stroke-dashoffset:0}
.btn .cmg-arrow-mark{font-size:18px}
.cmg-gradient .cmg-arrow-mark{color:var(--cmg-title-ink,#241b33)}
.project-arrow .cmg-arrow-mark,.home-featured-arrow .cmg-arrow-mark{width:27px;height:27px}
.home-featured-project:hover .home-featured-arrow{transform:none}
#services-mega .mega-card .cmg-arrow-mark{display:inline-flex;width:21px;height:21px;margin:0;color:inherit}
.home-client-logo .cmg-arrow-mark{position:static;display:inline-flex;width:15px;height:15px;opacity:1;transform:none}
.home-client-logo:hover .cmg-arrow-mark{transform:none}
@media(hover:hover) and (pointer:fine){
 a:hover .cmg-arrow-trail,button:hover .cmg-arrow-trail,.contact-form-shell:hover .contact-invitation-arrow .cmg-arrow-trail{animation:cmg-arrow-draw .75s cubic-bezier(.2,.65,.25,1) both}
}
a:focus-visible .cmg-arrow-trail,button:focus-visible .cmg-arrow-trail{animation:cmg-arrow-draw .75s cubic-bezier(.2,.65,.25,1) both}
@keyframes cmg-arrow-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.cmg-arrow-trail{animation:none!important;stroke-dashoffset:0!important}}