/* ============ SISTEMA DE DISEÑO — STATIA & CO. ============
   Colores medidos de los PNG originales de la marca.
   --ink: variante oscura del verde de marca, solo para texto (contraste).
   Tipografía (autoalojada en assets/fonts, sin rizos ni serifs):
     titulares → Manrope · texto → Inter
   Para probar otra dupla basta cambiar --font-head y --font-body.
   Escala: espaciado en múltiplos de 8px; radios 20 / 32 / 40. */
:root {
  --cream: #F9F4EF;
  --sage: #B6CC9E;
  --forest: #267F53;
  --pink: #F296BD;
  --orange: #F5793B;
  --blue: #99B7F5;
  --yellow: #FCCA59;
  --white: #FFFFFF;
  --ink: #12392A;
  --line: rgba(18, 57, 42, .1);
  --sage-t: color-mix(in srgb, var(--sage) 45%, white);

  --font-head: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 5vw, 48px);
  --max: 1120px;
  --r-s: 20px; --r-m: 32px; --r-l: 40px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap; src: url("assets/fonts/manrope-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap; src: url("assets/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url("assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss03"; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--cream); padding: 10px 16px; z-index: 100; border-radius: 10px; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow-wrap { max-width: 720px; margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.section { padding: clamp(80px, 10vw, 136px) 0; }

/* paneles apilados */
.studio, .process, .contact { background: var(--white); border-radius: var(--r-l); margin: 12px; }

/* tipografía */
.display, .display-m, .h2, h3 { font-family: var(--font-head); font-weight: 600; margin: 0; text-wrap: balance; }
.display { font-size: clamp(2.7rem, 6.6vw, 5.75rem); line-height: 1.04; letter-spacing: -.042em; max-width: 13ch; margin: 0 auto 28px; }
.display-m { font-size: clamp(2.1rem, 4.6vw, 3.8rem); line-height: 1.08; letter-spacing: -.038em; max-width: 16ch; }
.h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); line-height: 1.12; letter-spacing: -.035em; margin-bottom: 20px; }
h3 { letter-spacing: -.025em; line-height: 1.2; }
.label, .descriptor { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin: 0 0 24px; color: var(--forest); }
.label::before, .descriptor::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--forest); }
.body-lg { font-size: clamp(1.05rem, 1.5vw, 1.18rem); line-height: 1.65; margin: 0 auto 16px; max-width: 36em; color: color-mix(in srgb, var(--ink) 78%, transparent); text-wrap: pretty; }
.body { margin: 0 auto 12px; max-width: 36em; color: color-mix(in srgb, var(--ink) 78%, transparent); text-wrap: pretty; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 31em; margin: 0 auto 36px; color: color-mix(in srgb, var(--ink) 78%, transparent); text-wrap: pretty; }

/* botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border-radius: 999px; background: var(--ink); color: var(--cream); font-family: var(--font-head); font-weight: 600; font-size: .94rem; letter-spacing: -.01em; border: 0; transition: transform .35s var(--ease), background .3s; }
.btn:hover { transform: translateY(-2px); background: var(--forest); }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }
.btn-small { min-height: 40px; padding: 0 20px; font-size: .84rem; }
.btn-soft { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-soft:hover { background: var(--white); color: var(--forest); }
.btn-light { background: var(--cream); color: var(--ink); }
.btn-light:hover { background: var(--white); }
.btn-outline-light { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(249,244,239,.55); }
.btn-outline-light:hover { background: var(--cream); color: var(--ink); }
.btn-block { width: 100%; min-height: 56px; font-size: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.actions.center { justify-content: center; }

/* header: píldora flotante */
.header { position: fixed; top: 14px; left: 14px; right: 14px; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 8px 8px 24px; border-radius: 999px; max-width: 1120px; margin: 0 auto; }
.header::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 0 0 1px var(--line), 0 10px 30px -14px rgba(18,57,42,.2); z-index: -1; }
.brand img { height: 24px; width: auto; }
.nav { display: flex; gap: 6px; font-family: var(--font-head); font-weight: 600; font-size: .86rem; letter-spacing: -.01em; }
.nav a { padding: 9px 16px; border-radius: 999px; opacity: .7; transition: opacity .25s, background .25s; }
.nav a:hover { opacity: 1; background: rgba(18,57,42,.05); }
.nav a[aria-current="true"] { opacity: 1; background: rgba(18,57,42,.08); }
.header-right { display: flex; align-items: center; gap: 16px; }
.lang { display: inline-flex; gap: 6px; align-items: center; font-family: var(--font-head); font-size: .78rem; font-weight: 700; }
.lang span { opacity: .35; }
.lang a, .lang button { opacity: .45; padding: 4px 2px; transition: opacity .25s; }
.lang a:hover, .lang button:hover { opacity: .8; }
.lang button[aria-pressed="true"], .lang a[aria-current="true"] { opacity: 1; }
.burger { display: none; width: 44px; height: 44px; position: relative; }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .35s var(--ease), top .35s var(--ease); }
.burger span:first-child { top: 17px; } .burger span:last-child { top: 25px; }
.menu-open .burger span:first-child { top: 21px; transform: rotate(45deg); }
.menu-open .burger span:last-child { top: 21px; transform: rotate(-45deg); }

/* hero */
.hero { padding: 12px; }
.hero-panel { position: relative; overflow: hidden; border-radius: var(--r-l); padding: clamp(148px, 18vw, 216px) var(--gutter) 0; text-align: center;
  background:
    radial-gradient(52% 56% at 8% 10%, color-mix(in srgb, var(--sage) 34%, transparent), transparent 72%),
    radial-gradient(50% 56% at 94% 6%, color-mix(in srgb, var(--blue) 40%, transparent), transparent 72%),
    radial-gradient(52% 56% at 92% 98%, color-mix(in srgb, var(--sage) 26%, transparent), transparent 72%),
    radial-gradient(44% 50% at 6% 100%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 72%),
    var(--cream); }
.hero-text { max-width: var(--max); margin: 0 auto; }
.hero-stage { position: relative; max-width: 980px; margin: clamp(48px, 6vw, 72px) auto 0; }
@keyframes grow { from { transform: scaleY(0); } }

/* soluciones: bento sobrio */


/* proceso */

/* proyectos */
.empty { grid-column: 1 / -1; background: var(--white); border-radius: var(--r-m); padding: clamp(48px, 7vw, 88px) 28px; text-align: center; margin: 0; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.05rem, 1.7vw, 1.25rem); letter-spacing: -.02em; box-shadow: 0 0 0 1px var(--line); }

/* marcas */
.solutions .narrow-wrap .h2 { white-space: pre-line; text-align: center; }

/* contacto */
.form { display: grid; gap: 14px; text-align: left; align-content: center; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-family: var(--font-head); font-weight: 700; font-size: .82rem; letter-spacing: -.005em; }
.field label em { font-family: var(--font-body); font-style: normal; font-weight: 400; opacity: .55; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--cream); border: 1.5px solid transparent; border-radius: 12px; padding: 12px 15px; transition: border-color .25s, background .25s; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none' stroke='%2312392A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--forest); background-color: var(--white); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--orange); }
.err { font-weight: 600; font-size: .8rem; }
.err:not(:empty)::before { content: "! "; color: var(--orange); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
.form-status { margin: 0; font-weight: 600; text-align: center; }
.form-status.ok { background: var(--sage-t); padding: 16px 20px; border-radius: 16px; }
.form-status.bad { background: var(--cream); box-shadow: inset 0 0 0 2px var(--orange); padding: 16px 20px; border-radius: 16px; }

/* footer */
.footer { background: none; margin: 12px; border-radius: 0; }
.foot-card { position: relative; overflow: hidden; background: var(--ink); color: var(--cream); border-radius: var(--r-l); padding: clamp(36px, 5vw, 64px) clamp(24px, 5vw, 64px) 0; }
.foot-top { display: grid; grid-template-columns: 1.3fr .6fr 1fr .9fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.foot-title { margin: 0 0 24px; max-width: 12em; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.1; letter-spacing: -.035em; }
.foot-col { display: grid; gap: 9px; align-content: start; font-size: .92rem; font-weight: 500; }
.foot-col a { color: rgba(249,244,239,.86); width: fit-content; }
.foot-col a:hover { color: var(--yellow); text-decoration: none; }
.foot-h { margin: 0 0 6px; font: 600 .72rem/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: rgba(249,244,239,.5); }
.lang-foot { margin-top: 8px; color: var(--cream); }
.foot-mark { display: flex; align-items: flex-end; gap: clamp(10px, 2vw, 28px); margin-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(8px, 1.4vw, 20px); }
.fm-word { flex: 1 1 auto; min-width: 0; width: 100%; height: auto; display: block; }
.fm-iso { flex: none; width: clamp(54px, 15vw, 216px); height: auto; margin-bottom: clamp(4px, 1.5vw, 22px); animation: isoSpin 40s linear infinite; }
.foot-mark:hover .fm-iso { animation-play-state: paused; }
@keyframes isoSpin { to { transform: rotate(360deg); } }
.foot-bottom { position: relative; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0 22px; border-top: 1px solid rgba(249,244,239,.14); font-size: .78rem; color: rgba(249,244,239,.55); }
.foot-bottom p { margin: 0; }
.foot-bottom a:hover { color: var(--cream); }
@media (prefers-reduced-motion: reduce) { .fm-iso { animation: none; } }

/* animación de entrada */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.hero .reveal:nth-child(2) { transition-delay: .08s; } .hero .reveal:nth-child(3) { transition-delay: .16s; } .hero .reveal:nth-child(4) { transition-delay: .24s; }

/* responsive */
@media (max-width: 960px) {
}
@media (max-width: 860px) {
  .burger { display: block; }
  .header { padding-left: 20px; }
  .header-right .btn { display: none; }
  .nav { position: fixed; inset: 0; background: var(--cream); flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 var(--gutter); gap: 4px; font-size: 2.2rem; letter-spacing: -.035em; transform: translateY(-100%); transition: transform .6s var(--ease); z-index: -1; }
  .nav a { opacity: 1; padding: 8px 0; background: none !important; }
  .nav a[aria-current="true"] { color: var(--forest); }
  .menu-open .nav { transform: none; }
  .row { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-lead { grid-column: 1 / -1; }
    }
@media (max-width: 640px) {
  .actions .btn { width: 100%; }
  .studio, .process, .contact, .footer { margin: 8px; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-top .foot-contact { grid-column: 1 / -1; }
  .hero { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}


/* fondo animado del hero (líneas que crecen y florecen) */
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero-text, .hero-stage { position: relative; z-index: 1; }
@media (max-width: 640px) { .hero-art { opacity: .65; } }

/* ===== Armador de solución (hero) ===== */
.builder { background: var(--white); border-radius: 28px 28px 0 0; text-align: left; box-shadow: 0 0 0 1px var(--line), 0 -12px 60px -24px rgba(18,57,42,.28); overflow: hidden; }
.b-bar { display: flex; align-items: center; gap: 7px; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.b-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.b-title { margin-left: 10px; font: 600 13px/1 var(--font-head); letter-spacing: .02em; color: var(--ink); opacity: .7; }
.b-body { display: grid; grid-template-columns: 300px 1fr; }
.b-side { padding: 26px 24px 28px 26px; border-right: 1px solid var(--line); }
.b-q { margin: 0; font: 700 19px/1.25 var(--font-head); color: var(--ink); letter-spacing: -.01em; }
.b-hint { margin: 6px 0 18px; font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--ink) 68%, white); }
.b-goals { display: grid; gap: 8px; }
.b-goal { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--white);
  font: 500 14px/1.3 var(--font-body); color: var(--ink); text-align: left; cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.b-goal:hover { border-color: color-mix(in srgb, var(--forest) 45%, white); transform: translateY(-1px); }
.b-goal:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.b-goal .tick { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ink) 30%, white); display: grid; place-items: center; transition: all .25s var(--ease); }
.b-goal .tick::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .25s var(--ease); }
.b-goal[aria-pressed="true"] { background: var(--sage-t); border-color: color-mix(in srgb, var(--forest) 55%, white); }
.b-goal[aria-pressed="true"] .tick { background: var(--forest); border-color: var(--forest); }
.b-goal[aria-pressed="true"] .tick::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.b-out { padding: 22px 26px 26px; display: flex; flex-direction: column; background: linear-gradient(180deg, color-mix(in srgb, var(--cream) 70%, white), var(--white)); }
.b-head { display: flex; justify-content: space-between; align-items: baseline; font: 600 12px/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--forest); }
.b-head b { font-weight: 600; letter-spacing: .04em; text-transform: none; color: color-mix(in srgb, var(--ink) 60%, white); }
.b-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 18px; align-content: start; min-height: 168px; }
.b-mod { display: none; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 12px 12px 14px; }
.b-mod.on { display: block; animation: bpop .6s var(--ease) both; }
.b-mod svg { display: block; width: 100%; height: auto; margin-bottom: 10px; }
.b-mod span { display: block; font: 600 13px/1.3 var(--font-head); color: var(--ink); }
@keyframes bpop { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
.b-empty { margin: 0; padding: 48px 0; text-align: center; color: color-mix(in srgb, var(--ink) 60%, white); font-size: 14.5px; }
.b-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); }
.b-foot p { margin: 0; font-size: 13.5px; color: color-mix(in srgb, var(--ink) 70%, white); max-width: 30ch; line-height: 1.45; }
/* mini visuales */
.v-ln { stroke: var(--ink); stroke-opacity: .35; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.v-bg { fill: color-mix(in srgb, var(--cream) 80%, white); }
.v-f { fill: var(--forest); } .v-s { fill: var(--sage); } .v-b { fill: var(--blue); } .v-p { fill: var(--pink); } .v-o { fill: var(--orange); } .v-y { fill: var(--yellow); }
.v-flow { stroke: var(--forest); stroke-width: 1.6; fill: none; stroke-dasharray: 4 5; animation: vflow 1.4s linear infinite; }
@keyframes vflow { to { stroke-dashoffset: -18; } }
.b-mod.on .v-bar { transform-box: fill-box; transform-origin: bottom; animation: grow 1.1s var(--ease) both; }
.b-mod.on .v-bar:nth-of-type(2) { animation-delay: .1s; } .b-mod.on .v-bar:nth-of-type(3) { animation-delay: .2s; }
@media (max-width: 860px) {
  .b-body { grid-template-columns: 1fr; }
  .b-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .b-grid { grid-template-columns: repeat(2, 1fr); min-height: 0; }
}
@media (max-width: 640px) {
  .b-out { padding: 18px 18px 22px; } .b-side { padding: 22px 18px; }
  .b-foot .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .b-mod.on, .v-flow, .b-mod.on .v-bar { animation: none; } }


/* ===== Recorrido del proceso (camino que se dibuja al hacer scroll) ===== */
.journey { position: relative; --r: 104px; margin-top: clamp(48px, 6vw, 80px); padding-bottom: calc(var(--r) * .7); text-align: left; }
.j-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.j-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.j-steps li { position: relative; height: calc(var(--r) * 2); }
.j-text { position: absolute; top: 50%; left: var(--tx, 0); width: min(340px, var(--tw, 340px)); transform: translateY(calc(-50% + 14px)); opacity: .2; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.j-steps li.on .j-text { opacity: 1; transform: translateY(-50%); }
.j-text h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); margin: 0 0 8px; }
.j-text p { margin: 0; font-size: .97rem; color: color-mix(in srgb, var(--ink) 76%, transparent); }
.j-base { fill: none; stroke: var(--ink); stroke-opacity: .14; stroke-width: 3; stroke-linecap: round; }
.j-prog { fill: none; stroke: var(--forest); stroke-width: 3; stroke-linecap: round; }
.j-c { opacity: .2; transform-box: fill-box; transform-origin: center; transform: scale(.88); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.j-c.on { opacity: 1; transform: none; }
.j-c text { font-family: var(--font-head); font-weight: 700; text-anchor: middle; dominant-baseline: central; letter-spacing: -.02em; }
.j-dot { fill: var(--orange); stroke: #fff; stroke-width: 3; }
.journey.is-m { --r: 0px; margin-top: 36px; padding-bottom: 8px; }
.journey.is-m .j-steps li { height: auto; padding: 26px 0 26px 84px; min-height: 120px; display: flex; align-items: center; }
.journey.is-m .j-steps li.m-r { padding: 26px 84px 26px 0; text-align: right; justify-content: flex-end; }
.journey.is-m .j-text { position: static; width: auto; transform: translateY(10px); }
.journey.is-m .j-steps li.on .j-text { transform: none; }
.journey.is-m .j-text h3 { font-size: 1.15rem; margin-bottom: 6px; }
.journey.is-m .j-text p { font-size: .9rem; line-height: 1.5; }
.journey.is-m .j-base { stroke-width: 2.5; } .journey.is-m .j-prog { stroke-width: 2.5; }
@media (prefers-reduced-motion: reduce) { .j-text, .j-c { opacity: 1 !important; transform: none !important; transition: none; } }

/* ===== Soluciones: "¿Qué necesitas?" interactivo ===== */
.svc { margin-top: clamp(40px, 5vw, 64px); text-align: left; }
.sq-pick { margin: 0 0 18px; text-align: center; font: 700 1.05rem/1.3 var(--font-head); letter-spacing: -.01em; }
.sq-pick span { display: block; margin-top: 4px; font: 400 .9rem/1.4 var(--font-body); color: color-mix(in srgb, var(--ink) 62%, white); }
.sq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sq-card { position: relative; overflow: hidden; display: grid; align-content: start; gap: 6px; min-height: 168px; padding: 18px 18px 16px; border-radius: 22px; background: var(--white); box-shadow: 0 0 0 1px var(--line); text-align: left; color: var(--ink); cursor: pointer; transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease); }
.sq-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--forest) 35%, white), 0 18px 34px -22px rgba(18,57,42,.45); }
.sq-card:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.sq-shape { position: absolute; right: -14px; bottom: -14px; width: 76px; height: auto; opacity: .95; transition: transform .6s var(--ease); }
.sq-card:hover .sq-shape, .sq-card[aria-selected="true"] .sq-shape { transform: scale(1.12) rotate(-6deg); }
.sq-n { font: 700 11px/1 var(--font-head); letter-spacing: .12em; color: var(--forest); }
.sq-q { position: relative; z-index: 1; font: 600 1.05rem/1.25 var(--font-head); letter-spacing: -.02em; max-width: 11em; }
.sq-name { position: relative; z-index: 1; font-size: .78rem; line-height: 1.3; color: color-mix(in srgb, var(--ink) 58%, white); max-width: 11em; }
.sq-card[aria-selected="true"] { background: var(--ink); color: var(--cream); box-shadow: 0 22px 40px -24px rgba(18,57,42,.7); }
.sq-card[aria-selected="true"] .sq-n { color: var(--sage); }
.sq-card[aria-selected="true"] .sq-name { color: rgba(249,244,239,.7); }
.sq-stage { margin-top: 14px; }
.sq-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: clamp(26px, 4vw, 52px); border-radius: var(--r-m); box-shadow: 0 0 0 1px var(--line); background:
    radial-gradient(55% 80% at 0% 0%, color-mix(in srgb, var(--g1, var(--sage)) 38%, transparent), transparent 70%),
    radial-gradient(55% 80% at 100% 100%, color-mix(in srgb, var(--g2, var(--blue)) 32%, transparent), transparent 70%), var(--white);
  animation: svcIn .55s var(--ease) both; }
.sq-panel[hidden] { display: none; }
.sq-panel[data-key="platform"] { --g1: var(--blue); --g2: var(--sage); }
.sq-panel[data-key="inventory"] { --g1: var(--orange); --g2: var(--yellow); }
.sq-panel[data-key="audit"] { --g1: var(--yellow); --g2: var(--sage); }
.sq-panel[data-key="graphic"] { --g1: var(--pink); --g2: var(--blue); }
@keyframes svcIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sq-label { margin: 0 0 14px; font: 700 11.5px/1.3 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--forest); }
.sq-kid { margin: 0 0 16px; font: 600 clamp(1.5rem, 2.8vw, 2.2rem)/1.15 var(--font-head); letter-spacing: -.035em; max-width: 15em; }
.sq-desc { margin: 0 0 22px; max-width: 32em; font-size: 1rem; line-height: 1.65; color: color-mix(in srgb, var(--ink) 76%, transparent); }
.sq-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; font-size: .84rem; }
.sq-ex span { color: color-mix(in srgb, var(--ink) 60%, white); margin-right: 2px; }
.sq-ex a { padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px var(--line); font: 600 .82rem/1 var(--font-head); transition: background .25s, transform .25s var(--ease); }
.sq-ex a:hover { background: var(--white); transform: translateY(-1px); }
.sq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.sq-learn { font: 600 .92rem/1 var(--font-head); color: var(--forest); }
.sq-learn:hover { text-decoration: underline; text-underline-offset: 4px; }
.sq-right { display: grid; gap: 16px; align-content: start; min-width: 0; }
.sq-toggle { justify-self: start; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px var(--line); }
.sq-toggle button { padding: 9px 20px; border-radius: 999px; font: 700 .86rem/1 var(--font-head); color: color-mix(in srgb, var(--ink) 65%, white); cursor: pointer; transition: background .3s var(--ease), color .3s; }
.sq-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.sq-compare { position: relative; display: grid; border-radius: 22px; overflow: hidden; }
.sq-ba { grid-area: 1 / 1; padding: 22px 22px 20px; border-radius: 22px; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.sq-ba.is-before { background: color-mix(in srgb, var(--cream) 88%, #cfc8bf); }
.sq-ba.is-after { background: var(--forest); color: var(--cream); opacity: 0; transform: translateY(10px); pointer-events: none; }
.sq-compare.is-after .is-before { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.sq-compare.is-after .is-after { opacity: 1; transform: none; pointer-events: auto; }
.sq-ba-t { margin: 0 0 14px; font: 700 11.5px/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.sq-ba ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sq-ba li { display: flex; gap: 12px; align-items: flex-start; font: 500 1rem/1.35 var(--font-head); letter-spacing: -.01em; }
.sq-ba li i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 800; }
.is-before li i { background: rgba(18,57,42,.1); color: color-mix(in srgb, var(--ink) 60%, white); }
.is-after li i { background: var(--sage); color: var(--ink); }
.sq-compare.is-after .is-after li { animation: liIn .5s var(--ease) both; animation-delay: var(--d); }
@keyframes liIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.sq-more { border-radius: 16px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px var(--line); }
.sq-more summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; font: 600 .9rem/1.2 var(--font-head); cursor: pointer; }
.sq-more summary::-webkit-details-marker { display: none; }
.sq-more summary::after { content: "+"; font-size: 1.2rem; line-height: 1; color: var(--forest); transition: transform .3s var(--ease); }
.sq-more[open] summary::after { transform: rotate(45deg); }
.sq-list { list-style: none; margin: 0; padding: 2px 18px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.sq-list li { position: relative; padding-left: 22px; font-size: .88rem; line-height: 1.35; }
.sq-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--sage); }
@media (max-width: 960px) {
  .sq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sq-panel { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 560px) {
  .sq-card { min-height: 142px; padding: 14px 14px 12px; border-radius: 18px; }
  .sq-q { font-size: .95rem; }
  .sq-name { display: none; }
  .sq-shape { width: 60px; }
  .sq-list { grid-template-columns: 1fr; }
  .sq-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .sq-panel, .sq-compare.is-after .is-after li { animation: none; } .sq-ba, .sq-card, .sq-shape { transition: none; } }

/* ===== Portafolio: índice + vista del sitio ===== */
.pf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(40px, 5vw, 64px); text-align: left; align-items: start; }
.pf-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pf-item { border-bottom: 1px solid var(--line); }
.pf-head { display: grid; grid-template-columns: 40px 1fr 28px; align-items: center; gap: 12px; width: 100%; padding: 26px 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); font-family: var(--font-head); }
.pf-n { font-size: 12px; font-weight: 600; letter-spacing: .1em; color: color-mix(in srgb, var(--ink) 45%, white); transition: color .3s; font-variant-numeric: tabular-nums; }
.pf-name { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; color: color-mix(in srgb, var(--ink) 55%, white); transition: color .3s; }
.pf-name small { display: block; margin-top: 6px; font: 500 13px/1.3 var(--font-body); letter-spacing: 0; color: color-mix(in srgb, var(--ink) 55%, white); }
.pf-ico { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); transition: background .3s, border-color .3s; }
.pf-ico::before, .pf-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .35s var(--ease), background .3s; }
.pf-ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.pf-head:hover .pf-name, .pf-item.on .pf-name { color: var(--ink); }
.pf-item.on .pf-n { color: var(--forest); }
.pf-item.on .pf-ico { background: var(--ink); border-color: var(--ink); }
.pf-item.on .pf-ico::before, .pf-item.on .pf-ico::after { background: var(--cream); }
.pf-item.on .pf-ico::after { transform: translate(-50%, -50%) rotate(0deg); }
.pf-head:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; border-radius: 8px; }
.pf-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.pf-item.on .pf-detail { grid-template-rows: 1fr; }
.pf-detail-in { overflow: hidden; padding-left: 52px; }
.pf-item.on .pf-detail-in { padding-bottom: 30px; }
.pf-detail dl { margin: 0 0 22px; }
.pf-detail dt { margin-top: 14px; font: 700 11px/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--forest); }
.pf-detail dd { margin: 6px 0 0; font-size: .96rem; line-height: 1.6; color: color-mix(in srgb, var(--ink) 78%, transparent); max-width: 34em; }
.pf-stage { position: sticky; top: 100px; padding: clamp(18px, 2.6vw, 34px); border-radius: var(--r-m); background: color-mix(in srgb, var(--sage) 26%, var(--cream)); }
.pf-stage.swap .pf-browser { animation: pfIn .6s var(--ease) both; }
@keyframes pfIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pf-browser { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(18,57,42,.08), 0 30px 60px -30px rgba(18,57,42,.5); }
.pf-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.pf-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(18,57,42,.14); }
.pf-bar em { flex: 1; margin: 0 8px 0 10px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--cream) 70%, white); font: 500 12px/1.2 var(--font-body); font-style: normal; color: color-mix(in srgb, var(--ink) 65%, white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-bar a { font: 600 12px/1 var(--font-head); color: var(--forest); white-space: nowrap; }
.pf-bar a:hover { text-decoration: underline; }
.pf-screen { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream); }
.pf-layer { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; background: var(--c, #fff); overscroll-behavior: contain; scrollbar-width: thin; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.pf-layer.on { visibility: visible; opacity: 1; pointer-events: auto; }
.pf-layer.is-live, .pf-layer.fit { overflow: hidden; }
.pf-img { position: relative; display: block; width: 100%; min-height: 100%; height: auto; object-fit: cover; object-position: top; }
.pf-layer.fit .pf-img, .is-live .pf-img { position: absolute; inset: 0; height: 100%; }
.pf-frame { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; opacity: 0; transition: opacity .6s var(--ease); }
.pf-frame.ready { opacity: 1; }
.pf-fb { position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(1.8rem, 4vw, 3rem)/1 var(--font-head); letter-spacing: -.04em; color: var(--ink); }
.pf-hint { margin: 14px 0 0; text-align: center; font-size: 12.5px; letter-spacing: .02em; color: color-mix(in srgb, var(--ink) 60%, white); min-height: 1.2em; }
@media (max-width: 860px) {
  .pf { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pf-stage { position: static; order: -1; padding: 14px; }
}
@media (max-width: 560px) {
  .pf-head { grid-template-columns: 30px 1fr 28px; padding: 20px 0; }
  .pf-detail-in { padding-left: 42px; }
  .pf-detail .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .pf-stage.swap .pf-browser { animation: none; } .pf-detail { transition: none; } }


.projects { padding-top: clamp(40px, 6vw, 80px); }

/* formulario compacto (tarjeta dividida) */
.cform { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; max-width: 1040px; margin: 0 auto; background: var(--white); border-radius: var(--r-l); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(18,57,42,.35); padding: 12px; }
.cform-side { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(28px, 4vw, 44px); border-radius: calc(var(--r-l) - 10px); background: var(--forest); color: var(--cream); min-height: 440px; }
.cform-side::after { content: ""; position: absolute; inset: auto -20% -12% -20%; height: 46%; background: radial-gradient(60% 70% at 30% 100%, rgba(252,202,89,.55), transparent 70%), radial-gradient(55% 60% at 75% 100%, rgba(242,150,189,.55), transparent 70%), radial-gradient(50% 55% at 55% 100%, rgba(182,204,158,.5), transparent 70%); filter: blur(18px); pointer-events: none; }
.cform-side > * { position: relative; z-index: 1; }
.cform-title { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.08; letter-spacing: -.035em; }
.cform-sub { margin: 14px 0 0; font-size: .98rem; line-height: 1.55; color: rgba(249,244,239,.8); max-width: 22em; }
.cform-meta { display: grid; gap: 22px; }
.cform-world { display: grid; gap: 14px; padding: 16px; border-radius: 18px; background: rgba(249,244,239,.1); box-shadow: inset 0 0 0 1px rgba(249,244,239,.16); }
.cw-head { display: flex; align-items: center; gap: 12px; }
.cw-globe { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(249,244,239,.18); color: var(--cream); }
.cw-globe svg { width: 20px; height: 20px; }
.cform-global { margin: 0; font-size: .88rem; line-height: 1.4; color: rgba(249,244,239,.92); }
.cw-langs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(249,244,239,.16); padding-top: 12px; }
.cw-langs li { display: grid; gap: 1px; justify-items: center; text-align: center; }
.cw-langs li + li { border-left: 1px solid rgba(249,244,239,.16); }
.cw-langs b { font-family: var(--font-head); font-weight: 600; font-size: .84rem; letter-spacing: -.005em; }
.cw-langs small { font-size: .68rem; color: rgba(249,244,239,.6); }
.cw-langs small:empty { display: none; }
.cform-reach { display: grid; gap: 6px; justify-items: start; padding-left: 2px; }
.cr-wa { display: inline-flex; align-items: center; gap: 10px; font: 600 .95rem/1 var(--font-head); color: var(--cream); }
.cr-wa svg { width: 22px; height: 22px; color: var(--sage); }
.cr-wa:hover svg { color: var(--yellow); }
.cr-mail { font-size: .84rem; color: rgba(249,244,239,.7); }
.cr-mail:hover, .cr-wa:hover { text-decoration: underline; text-underline-offset: 4px; }
.cform .form { padding: clamp(22px, 3.4vw, 40px); }
.cform .btn-block { min-height: 50px; }
@media (max-width: 860px) {
  .cform { grid-template-columns: 1fr; }
  .cform-side { min-height: 0; gap: 28px; padding-bottom: 120px; }
}
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } .cform .form { padding: 22px 10px 14px; } }

/* formas de marca detrás del formulario */
.contact { position: relative; overflow: hidden; }
.contact .wrap { position: relative; z-index: 1; }
.c-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cd { position: absolute; height: auto; opacity: .8; animation: cdFloat 11s ease-in-out infinite; will-change: transform; }
.cd-blue   { width: clamp(96px, 15vw, 230px); left: 2.5%; top: 9%;  --r: -8deg; }
.cd-yellow { width: clamp(90px, 14vw, 210px); right: 3%; top: 7%;  --r: 10deg; animation-delay: -3s; animation-duration: 13s; }
.cd-pink   { width: clamp(100px, 16vw, 240px); right: 1%; bottom: 9%; --r: -12deg; animation-delay: -6s; animation-duration: 12s; }
.cd-orange { width: clamp(64px, 9vw, 136px); left: 5%; bottom: 7%; --r: 6deg; animation-delay: -8s; animation-duration: 14s; }
.cd-sage   { width: clamp(80px, 11vw, 170px); left: 50%; bottom: -4%; margin-left: 10%; --r: 0deg; animation-delay: -2s; }
@keyframes cdFloat { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-12px) rotate(calc(var(--r, 0deg) + 4deg)); } }
@media (max-width: 860px) {
  .cd { opacity: .75; }
  .cd-blue { width: 84px; left: -14px; top: 2%; }
  .cd-yellow { width: 92px; right: -18px; top: 1%; }
  .cd-pink { width: 100px; right: -20px; bottom: 1%; }
  .cd-orange { width: 56px; left: 6px; bottom: 1%; }
  .cd-sage { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cd { animation: none; transform: rotate(var(--r, 0deg)); } }

/* ===== Páginas de servicio (SEO) ===== */
.sp { padding-top: 96px; }
.sp-hero { position: relative; overflow: hidden; margin: 12px; padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 80px) clamp(44px, 6vw, 84px); border-radius: var(--r-l); background:
    radial-gradient(60% 90% at 0% 0%, color-mix(in srgb, var(--g1) 38%, transparent), transparent 72%),
    radial-gradient(60% 90% at 100% 100%, color-mix(in srgb, var(--g2) 40%, transparent), transparent 72%), var(--white); }
.sp-hero-shape { position: absolute; right: clamp(-60px, -3vw, -20px); bottom: clamp(-70px, -4vw, -30px); width: clamp(150px, 26vw, 340px); height: auto; opacity: .9; }
.sp-hero > *:not(.sp-hero-shape) { position: relative; z-index: 1; }
.sp-crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 22px; font-size: .84rem; color: color-mix(in srgb, var(--ink) 62%, white); }
.sp-crumb a:hover { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.sp-crumb b { font-weight: 600; color: var(--ink); }
.sp-kicker { margin: 0 0 16px; font: 700 12px/1.2 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--forest); }
.sp-hero h1 { margin: 0 0 20px; max-width: 14em; font: 600 clamp(2rem, 5vw, 3.8rem)/1.06 var(--font-head); letter-spacing: -.04em; }
.sp-lead { margin: 0 0 32px; max-width: 30em; font: 500 clamp(1.05rem, 1.6vw, 1.3rem)/1.45 var(--font-head); color: color-mix(in srgb, var(--ink) 78%, transparent); }
.sp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.sp-link { font: 600 .94rem/1 var(--font-head); color: var(--forest); }
.sp-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.sp-sec { margin: 12px; padding: clamp(32px, 5vw, 64px) clamp(24px, 6vw, 80px); border-radius: var(--r-l); background: var(--white); }
.sp-sec h2 { margin: 0 0 clamp(20px, 3vw, 32px); font: 600 clamp(1.5rem, 2.8vw, 2.2rem)/1.15 var(--font-head); letter-spacing: -.035em; }
.sp-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.sp-intro p { margin: 0 0 16px; max-width: 34em; line-height: 1.65; color: color-mix(in srgb, var(--ink) 76%, transparent); }
.sp-intro .sp-kid { font: 600 clamp(1.15rem, 1.8vw, 1.45rem)/1.35 var(--font-head); letter-spacing: -.02em; color: var(--ink); }
.sp-ba { display: grid; gap: 12px; }
.sp-ba > div { padding: 20px 22px; border-radius: 20px; }
.sp-ba-b { background: color-mix(in srgb, var(--cream) 88%, #cfc8bf); }
.sp-ba-a { background: var(--forest); color: var(--cream); }
.sp-ba p { margin: 0 0 12px !important; font: 700 11.5px/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; opacity: .65; color: inherit !important; }
.sp-ba ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sp-ba li { display: flex; gap: 12px; align-items: flex-start; font: 500 1rem/1.35 var(--font-head); }
.sp-ba li i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 800; }
.sp-ba-b li i { background: rgba(18,57,42,.1); color: color-mix(in srgb, var(--ink) 60%, white); }
.sp-ba-a li i { background: var(--sage); color: var(--ink); }
.sp-incl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; }
.sp-incl li { position: relative; padding: 14px 0 14px 30px; border-top: 1px solid var(--line); line-height: 1.4; }
.sp-incl li::before { content: ""; position: absolute; left: 0; top: 17px; width: 18px; height: 18px; border-radius: 50%; background: var(--sage); }
.sp-incl li::after { content: ""; position: absolute; left: 5px; top: 22px; width: 8px; height: 4px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.sp-who { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sp-who li { padding: 22px; border-radius: 20px; background: var(--cream); font: 600 1.05rem/1.35 var(--font-head); letter-spacing: -.015em; }
.sp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.sp-steps li { padding: 22px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); }
.sp-steps span { font: 700 12px/1 var(--font-head); letter-spacing: .12em; color: var(--forest); }
.sp-steps h3 { margin: 12px 0 8px; font: 600 1.2rem/1.2 var(--font-head); letter-spacing: -.025em; }
.sp-steps p { margin: 0; font-size: .92rem; line-height: 1.55; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.sp-faq details { border-top: 1px solid var(--line); }
.sp-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.sp-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font: 600 1.05rem/1.35 var(--font-head); letter-spacing: -.015em; cursor: pointer; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; color: var(--forest); transition: transform .3s var(--ease); }
.sp-faq details[open] summary::after { transform: rotate(45deg); }
.sp-faq details p { margin: 0 0 22px; max-width: 46em; line-height: 1.65; color: color-mix(in srgb, var(--ink) 76%, transparent); }
.sp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sp-card { position: relative; overflow: hidden; display: grid; gap: 6px; align-content: start; min-height: 150px; padding: 20px; border-radius: 20px; background: var(--cream); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.sp-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(18,57,42,.45); }
.sp-card img { position: absolute; right: -12px; bottom: -12px; width: 70px; height: auto; }
.sp-card span { position: relative; max-width: 11em; font: 600 1.05rem/1.25 var(--font-head); letter-spacing: -.02em; }
.sp-card small { position: relative; max-width: 14em; font-size: .8rem; color: color-mix(in srgb, var(--ink) 60%, white); }
.sp-cta { margin: 12px; padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 80px); border-radius: var(--r-l); background: var(--forest); color: var(--cream); text-align: center; }
.sp-cta h2 { margin: 0 0 10px; font: 600 clamp(1.7rem, 3.6vw, 2.8rem)/1.1 var(--font-head); letter-spacing: -.04em; }
.sp-cta p { margin: 0 0 28px; color: rgba(249,244,239,.82); }
@media (max-width: 960px) {
  .sp-intro { grid-template-columns: 1fr; }
  .sp-incl, .sp-who, .sp-cards { grid-template-columns: 1fr 1fr; }
  .sp-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sp { padding-top: 80px; }
  .sp-hero, .sp-sec, .sp-cta { margin: 8px; }
  .sp-incl, .sp-who, .sp-cards, .sp-steps { grid-template-columns: 1fr; }
  .sp-actions .btn { width: 100%; }
}

/* firma sutil + ubicación (Estudio) */
.sign { display: grid; justify-items: center; gap: 12px; margin-top: clamp(36px, 5vw, 60px); }
.sign-img { width: clamp(120px, 13vw, 168px); height: auto; opacity: .3; }
.sign-loc { margin: 0; font: 500 .82rem/1 var(--font-body); letter-spacing: .04em; color: color-mix(in srgb, var(--ink) 52%, white); }

/* ===== Móvil: ritmo y coherencia (solo ≤640px; escritorio no cambia) ===== */
@media (max-width: 640px) {
  :root { --gutter: 22px; }
  .section { padding: 60px 0; }
  .studio, .process, .contact, .footer { margin: 8px; border-radius: 28px; }
  .display { font-size: clamp(2.35rem, 11vw, 2.9rem); margin-bottom: 20px; }
  .display-m { font-size: 2rem; line-height: 1.12; }
  .h2 { font-size: 1.85rem; margin-bottom: 14px; }

  /* constructor del inicio: compacto */
  .b-bar { padding: 12px 18px; }
  .b-side { padding: 20px 18px 18px; }
  .b-q { font-size: 17px; }
  .b-hint { margin: 4px 0 14px; font-size: 13px; }
  .b-goals { display: flex; flex-wrap: wrap; gap: 8px; }
  .b-goal { width: auto; padding: 9px 14px 9px 10px; gap: 8px; font-size: 14px; border-radius: 999px; }
  .b-goal .tick { width: 18px; height: 18px; }
  .b-out { padding: 16px 18px 20px; }
  .b-head { font-size: 11px; }
  .b-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 14px; }
  .b-mod { padding: 8px 8px 10px; border-radius: 14px; }
  .b-mod svg { margin-bottom: 6px; }
  .b-mod span { font-size: 11.5px; line-height: 1.25; }
  .b-empty { padding: 28px 0; }
  .b-foot { padding-top: 14px; }
  .b-foot p { display: none; }

  /* formulario de contacto: formas más discretas y sin huecos */
  .cform-side { gap: 22px; padding-bottom: 28px; }
  .cd { opacity: .45; }
  .cd-blue { width: 70px; } .cd-yellow { width: 76px; } .cd-pink { width: 84px; } .cd-orange { display: none; }
}

/* ===== Móvil: footer limpio, mismo orden que escritorio ===== */
@media (max-width: 640px) {
  .foot-card { padding: 30px 22px 0; }
  .foot-title { font-size: 1.55rem; margin-bottom: 18px; max-width: 11em; }
  .foot-top { gap: 28px 18px; }
  .foot-col { gap: 7px; font-size: .84rem; }
  .foot-col a { color: rgba(249,244,239,.78); line-height: 1.3; }
  .foot-h { font-size: .66rem; margin-bottom: 4px; }
  .foot-top .foot-contact { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-top: 22px; border-top: 1px solid rgba(249,244,239,.12); }
  .foot-contact .foot-h { flex-basis: 100%; }
  .lang-foot { display: none; }
  .foot-mark { margin-top: 44px; gap: 10px; }
  .fm-iso { width: 17vw; margin-bottom: 2px; }
  .foot-bottom { padding: 14px 0 18px; font-size: .74rem; }
}

/* ===== Móvil: portafolio (vista previa arriba del título) y tamaños de texto ===== */
@media (max-width: 860px) {
  .pf-item { scroll-margin-top: 92px; }
  .pf-item > .pf-stage { position: static; margin: 18px 0 4px; padding: 12px; border-radius: 22px; }
}
@media (max-width: 640px) {
  .pf { margin-top: 28px; }
  .pf-head { grid-template-columns: 28px 1fr 30px; gap: 10px; padding: 18px 0; }
  .pf-name { font-size: 1.3rem; }
  .pf-name small { font-size: .85rem; }
  .pf-detail-in { padding-left: 38px; }
  .pf-detail dt { font-size: .72rem; margin-top: 16px; }
  .pf-detail dd { font-size: 1rem; line-height: 1.55; }
  .pf-bar { padding: 9px 12px; }
  .pf-bar em { font-size: .78rem; }
  .pf-bar a { font-size: .78rem; }
  .pf-hint { font-size: .8rem; }
  .body-lg { font-size: 1.05rem; line-height: 1.6; }
}

/* ===== Móvil: footer aún más limpio (contacto en filas) ===== */
@media (max-width: 640px) {
  .foot-title { font-size: 1.45rem; }
  .foot-top { gap: 26px 16px; }
  .foot-top .foot-contact { display: grid; gap: 0; padding-top: 20px; }
  .foot-contact .foot-h { margin-bottom: 4px; }
  .foot-contact a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 0; font-size: .95rem; color: var(--cream); border-bottom: 1px solid rgba(249,244,239,.1); }
  .foot-contact a:last-of-type { border-bottom: 0; }
  .foot-contact a::after { content: "↗"; font-size: .85rem; opacity: .45; }
  .foot-contact a[hidden] { display: none; }
  .foot-mark { margin-top: 36px; }
}

.pf-fb { text-decoration: none; text-align: center; align-content: center; justify-items: center; gap: 10px; }
.pf-fb small { font: 600 .8rem/1 var(--font-head); letter-spacing: 0; opacity: .7; }