@font-face{font-family:"Instrument Sans";font-weight:400;font-display:swap;src:url(fonts/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:500;font-display:swap;src:url(fonts/instrument-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:600;font-display:swap;src:url(fonts/instrument-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:700;font-display:swap;src:url(fonts/instrument-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-weight:500;font-display:swap;src:url(fonts/dm-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:200 800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2")}
/* Concept v3: imprenta amable. Fondos pastel (crema, cielo, menta, melocotón, lila) y los colores
   corporativos solo en adornos: sellos, sombras duras, puntos, banda y botones.
   Todo se mueve un poco: sello giratorio, banda con brillo, ilustraciones animadas. */
:root {
  --navy: #000030;
  --orange: #F07800;
  --green: #2E8B57;
  --green-d: #1F7347;
  --cream: #FFF8F0;
  --sky: #E4EAFA;
  --sky-2: #D3DCF6;
  --mint: #DCF1E6;
  --peach: #FFE6D3;
  --lilac: #E6E2F9;
  --ink: #000030;
  --ink-2: #3A3F73;
  --font-display: 'Bricolage Grotesque', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 1rem/1.6 var(--font-body); overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--cream); }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }

.wrap {
  width: 100%; max-width: 1240px; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: rgba(255, 248, 240, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1.5px solid rgba(0, 0, 48, 0.12); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand svg { width: 42px; height: 42px; flex: none; }
.brand small { display: block; font: 500 0.66rem/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.brand b { display: block; font: 800 1.45rem/1 var(--font-display); letter-spacing: -0.01em; }
.lang { font: 500 0.82rem var(--font-mono); background: #fff; color: var(--ink); border: 2px solid var(--navy); border-radius: 12px; padding: 8px 10px; cursor: pointer; }
.nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
.nav a { flex: none; font: 500 0.78rem var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; padding: 7px 12px; border: 2px solid rgba(0, 0, 48, 0.2); border-radius: 999px; white-space: nowrap; background: #fff; }
.nav a:hover { background: var(--peach); border-color: var(--navy); }
.nav a.hot { background: var(--orange); border-color: var(--navy); font-weight: 500; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center; font: 700 1rem var(--font-body); text-decoration: none; padding: 15px 26px; border-radius: 16px; border: 2.5px solid var(--navy); background: var(--navy); color: #fff; cursor: pointer; box-shadow: 5px 5px 0 var(--orange); transition: transform 0.15s, box-shadow 0.15s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--orange); }
.btn.wa { background: var(--green-d); box-shadow: 5px 5px 0 var(--navy); }
.btn.wa:hover { box-shadow: 8px 8px 0 var(--navy); }
.btn.ghost { background: #fff; color: var(--navy); box-shadow: 5px 5px 0 var(--green); }
.btn.ghost:hover { box-shadow: 8px 8px 0 var(--green); }
.btn svg { width: 22px; height: 22px; flex: none; }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }

/* Hero */
.hero { position: relative; overflow: hidden; background: linear-gradient(160deg, #FFE7D4 0%, #FFF6EB 50%, #DFF3E8 100%); }
.blob { position: absolute; border-radius: 50%; pointer-events: none; animation: drift 14s ease-in-out infinite alternate; }
.b1 { width: 460px; height: 460px; background: var(--sky-2); left: -150px; top: -130px; opacity: 0.75; }
.b2 { width: 420px; height: 420px; background: #BFE6D0; right: -110px; bottom: -150px; opacity: 0.8; animation-duration: 18s; }
.b3 { width: 240px; height: 240px; background: #FFCFA6; right: 36%; top: -90px; opacity: 0.7; animation-duration: 11s; }
.dots { position: absolute; right: 0; top: 0; width: 46%; height: 100%; pointer-events: none; background-image: radial-gradient(rgba(240, 120, 0, 0.5) 22%, transparent 24%); background-size: 22px 22px; opacity: 0.22; -webkit-mask-image: linear-gradient(100deg, transparent, #000 70%); mask-image: linear-gradient(100deg, transparent, #000 70%); }
@keyframes drift { to { transform: translate(40px, 30px) scale(1.08); } }
.hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: clamp(36px, 6vw, 84px) clamp(48px, 7vw, 96px); }
.pill { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 2.5px solid var(--navy); border-radius: 999px; padding: 7px 16px 7px 7px; font: 600 0.92rem/1.25 var(--font-body); text-decoration: none; box-shadow: 4px 4px 0 var(--orange); max-width: 100%; }
.pill:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--orange); }
.pill-new { flex: none; background: var(--orange); border: 2px solid var(--navy); border-radius: 999px; padding: 4px 12px; font: 800 0.76rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; position: relative; overflow: hidden; }
.pill-new::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%); transform: translateX(-120%); animation: sheen 3.2s ease-in-out infinite; }
.arr { flex: none; font-weight: 800; }
h1 { margin-top: 24px; font: 800 clamp(2.6rem, 6.4vw, 5.8rem)/1 var(--font-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.h1a { display: block; }
.h1b { display: inline; padding: 0 0.08em; margin-left: -0.08em; background: linear-gradient(transparent 58%, #FFB56B 58% 92%, transparent 92%) no-repeat; background-size: 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: mark 1s 0.4s both; }
@keyframes mark { from { background-size: 0 100%; } }
.hero p.lead { margin-top: 24px; max-width: 50ch; font-size: clamp(1.05rem, 1.7vw, 1.22rem); color: var(--ink-2); }

.stage { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; margin-inline: auto; }
.disc { position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #fff 0%, #FFE9D6 45%, #CFE0FA 100%); border: 2.5px solid var(--navy); box-shadow: 10px 10px 0 var(--green); }
.ring { position: absolute; inset: 1%; border-radius: 50%; border: 2px dashed rgba(0, 0, 48, 0.28); animation: spin 60s linear infinite reverse; }
.seal svg { display: block; width: 100%; height: auto; }
.spin { transform-origin: 130px 130px; animation: spin 26s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.seal-h { position: absolute; left: 21%; top: 21%; width: 58%; filter: drop-shadow(5px 6px 0 rgba(0, 0, 48, 0.18)); }
.fl { position: absolute; width: clamp(58px, 16%, 88px); aspect-ratio: 1; background: #fff; border: 2.5px solid var(--navy); border-radius: 20px; box-shadow: 5px 5px 0 var(--c, var(--orange)); display: grid; place-items: center; animation: bob var(--t, 6s) ease-in-out infinite; transform: rotate(var(--r, 0deg)); }
.fl svg { width: 74%; height: 74%; }
.f1 { left: 2%; top: 6%; --r: -8deg; --c: var(--orange); --t: 6s; }
.f2 { right: 4%; top: 10%; --r: 7deg; --c: var(--green); --t: 7s; }
.f3 { right: 0; bottom: 18%; --r: -5deg; --c: var(--navy); --t: 5.4s; }
.f4 { left: 8%; bottom: 4%; --r: 6deg; --c: var(--green); --t: 6.6s; }
.f5 { left: -3%; top: 46%; --r: -6deg; --c: var(--orange); --t: 7.4s; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-12px) rotate(calc(var(--r, 0deg) + 4deg)); } }
.spark { position: absolute; width: 26px; height: 26px; animation: twinkle 2.6s ease-in-out infinite; }
.sp1 { left: 46%; top: 0; } .sp2 { right: 18%; bottom: 4%; animation-delay: 0.8s; } .sp3 { left: 0; bottom: 30%; animation-delay: 1.4s; width: 20px; height: 20px; }
@keyframes twinkle { 0%, 100% { transform: scale(0.6) rotate(0deg); opacity: 0.7; } 50% { transform: scale(1.15) rotate(25deg); opacity: 1; } }

/* Marquee: el nombre completo en bucle */
.marquee { position: relative; background: var(--orange); color: var(--navy); overflow: hidden; border-block: 3px solid var(--navy); }
.marquee::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 5.5s ease-in-out infinite; }
@keyframes sheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
.track { display: flex; width: max-content; animation: slide 36s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.track ul { display: flex; flex: none; }
.track li { display: flex; align-items: center; gap: 34px; padding: 14px 0 14px 34px; font: 800 clamp(1.7rem, 4.2vw, 3.1rem)/1 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; }
.track li:nth-child(even) .nm { color: transparent; -webkit-text-stroke: 2px var(--navy); }
.track li::after { content: ""; width: 18px; height: 18px; flex: none; background: var(--navy); border-radius: 4px; transform: rotate(45deg); }
@keyframes slide { to { transform: translateX(-50%); } }

/* Sections */
.sec { position: relative; padding-block: clamp(56px, 8vw, 104px) clamp(84px, 10vw, 128px); scroll-margin-top: 120px; }
.s-cream { background: var(--cream); } .s-sky { background: var(--sky); } .s-mint { background: var(--mint); } .s-peach { background: var(--peach); } .s-lilac { background: var(--lilac); }
.wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(36px, 6vw, 84px); display: block; }
.sec-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 84px); align-items: center; }
.sec.flip .media { order: 2; }
.o { --acc: var(--orange); } .g { --acc: var(--green); }
.sec h2 { font: 800 clamp(2.1rem, 5vw, 3.9rem)/1.02 var(--font-display); letter-spacing: -0.025em; overflow-wrap: anywhere; }
.sec h2::after { content: ""; display: block; width: 76px; height: 9px; border-radius: 9px; background: var(--acc); margin-top: 20px; }
.sec .lead { margin-top: 22px; max-width: 54ch; color: var(--ink-2); font-size: 1.12rem; }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.chips li { min-width: 0; display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 2px solid var(--navy); border-radius: 14px; padding: 11px 14px; font: 600 0.92rem/1.35 var(--font-body); box-shadow: 3px 3px 0 var(--acc); overflow-wrap: anywhere; transition: transform 0.15s; }
.chips li:hover { transform: translate(-2px, -2px) rotate(-0.8deg); }
.chips li::before { content: ""; width: 11px; height: 11px; margin-top: 5px; border-radius: 3px; background: var(--acc); flex: none; }
.chips li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.media { position: relative; min-width: 0; max-width: 100%; }
.card-art { background: #fff; border: 2.5px solid var(--navy); border-radius: 28px; box-shadow: 10px 10px 0 var(--acc); overflow: hidden; }
.card-art svg { display: block; width: 100%; height: auto; }
.media .seal { position: absolute; top: -32px; right: -14px; width: clamp(84px, 11vw, 124px); z-index: 3; filter: drop-shadow(3px 4px 0 rgba(0, 0, 48, 0.2)); }
.sticker { position: absolute; top: -18px; left: -8px; z-index: 4; transform: rotate(-9deg); background: var(--green); color: #fff; font: 800 clamp(1.05rem, 2.2vw, 1.4rem)/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; padding: 11px 22px; border-radius: 999px; border: 3px solid var(--navy); box-shadow: 4px 4px 0 var(--orange); animation: wiggle 3.2s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(-4deg) scale(1.06); } }

/* Ilustraciones animadas */
.disp { font-family: var(--font-display); font-weight: 800; }
.mono { font-family: var(--font-mono); }
.cut { stroke-dasharray: 9 7; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -32; } }
.peel { transform-box: fill-box; transform-origin: 100% 100%; animation: peel 3s ease-in-out infinite; }
@keyframes peel { 50% { transform: rotate(-16deg); } }
.swing { transform-box: fill-box; transform-origin: 50% 0; animation: swing 3.4s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.sheet { animation: rise 4.8s ease-in-out infinite alternate; }
.sheet.s2 { animation-delay: -1.6s; } .sheet.s3 { animation-delay: -3.2s; }
@keyframes rise { from { transform: translateY(46px); } to { transform: translateY(-64px); } }
.blink { animation: blink 1.4s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.sway { transform-box: view-box; animation: sway 4.6s ease-in-out infinite; }
.sway.d2 { animation-delay: -1.5s; animation-duration: 5.2s; } .sway.d3 { animation-delay: -3s; animation-duration: 4s; }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.stitch { stroke-dasharray: 12 9; animation: dash 1.2s linear infinite; }
.sun { animation: sunmove 14s ease-in-out infinite alternate; }
@keyframes sunmove { to { transform: translateX(90px); } }
.waves { animation: waves 5s linear infinite; }
@keyframes waves { to { transform: translateX(-56px); } }
.focus { transform-box: fill-box; transform-origin: center; animation: focus 2.6s ease-in-out infinite; }
@keyframes focus { 50% { transform: scale(1.25); } }
.play { animation: play 9s linear infinite; }
@keyframes play { from { transform: translateX(0); } to { transform: translateX(300px); } }
.drone { animation: hover 3.6s ease-in-out infinite; }
@keyframes hover { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, -10px); } }
.rotor { transform-box: fill-box; transform-origin: center; animation: rotor 0.18s linear infinite; }
@keyframes rotor { 50% { transform: scaleX(0.35); } }
.tgt { transform-box: fill-box; transform-origin: center; animation: spin 18s linear infinite; }

/* Bloque IA */
.ia-stage { position: relative; display: flex; justify-content: center; align-items: center; min-height: 440px; padding: 34px 16px 28px; background: linear-gradient(160deg, #DDF2E8 0%, #E4EAFA 100%); }
.browser { position: absolute; left: 5%; top: 12%; width: 58%; background: #fff; border: 2.5px solid var(--navy); border-radius: 16px; box-shadow: 6px 6px 0 var(--orange); overflow: hidden; animation: bob 7s ease-in-out infinite; --r: -3deg; }
.b-bar { display: flex; gap: 6px; padding: 9px 12px; background: var(--navy); }
.b-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
.b-bar i:nth-child(2) { background: var(--green); } .b-bar i:nth-child(3) { background: #fff; }
.b-body { padding: 14px; display: grid; gap: 8px; }
.b-hero { height: 70px; border-radius: 10px; background: linear-gradient(120deg, #FFD9B8, #FFB56B); }
.b-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.b-row i { height: 40px; border-radius: 8px; background: var(--sky); }
.phone { position: relative; z-index: 2; margin-left: 24%; width: min(290px, 68%); background: #fff; border: 3px solid var(--navy); border-radius: 34px; box-shadow: 8px 8px 0 var(--green), 0 24px 40px rgba(0, 0, 48, 0.18); overflow: hidden; }
.p-head { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: var(--navy); color: #fff; }
.av { width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: var(--navy); display: grid; place-items: center; font: 800 0.8rem var(--font-display); flex: none; }
.p-head b { font: 700 0.95rem/1.2 var(--font-body); }
.on { display: inline-block; width: 9px; height: 9px; margin-left: 8px; border-radius: 50%; background: #5FD08E; }
.p-body { display: flex; flex-direction: column; gap: 9px; padding: 14px 12px; min-height: 270px; background: #F5EFE6; }
.msg { max-width: 86%; padding: 9px 12px; border-radius: 16px; font: 500 0.85rem/1.38 var(--font-body); animation: pop 0.6s both; animation-delay: var(--d, 0s); }
.msg.in { align-self: flex-start; background: #fff; border: 1.5px solid rgba(0, 0, 48, 0.14); border-bottom-left-radius: 4px; }
.msg.out { align-self: flex-end; background: #CDEFD9; border-bottom-right-radius: 4px; }
@keyframes pop { from { transform: translateY(12px) scale(0.95); } }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 11px 13px; background: #fff; border: 1.5px solid rgba(0, 0, 48, 0.14); border-radius: 16px; border-bottom-left-radius: 4px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); animation: typing 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.2s; } .typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-5px); opacity: 1; } }
.p-foot { padding: 8px 12px; text-align: center; font: 500 0.7rem var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); background: #fff; border-top: 1.5px solid rgba(0, 0, 48, 0.1); }
.ia-box { position: relative; margin-top: 30px; background: #fff; border: 2.5px solid var(--navy); border-radius: 22px; padding: 24px 22px 22px; box-shadow: 7px 7px 0 var(--orange); }
.ia-box p { font-weight: 500; color: var(--ink); }
.ia-box .cta-row { margin-top: 18px; gap: 14px; }

/* Contacto */
.c-card { position: relative; background: #fff; border: 2.5px solid var(--navy); border-radius: 32px; box-shadow: 12px 12px 0 var(--orange); padding: clamp(26px, 5vw, 56px); }
.c-card .seal { position: absolute; top: -52px; left: clamp(10px, 4vw, 48px); width: clamp(96px, 13vw, 150px); filter: drop-shadow(3px 4px 0 rgba(0, 0, 48, 0.2)); }
.c-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 5vw, 64px); align-items: center; }
.contact h2 { font: 800 clamp(2.2rem, 5.6vw, 4.4rem)/1 var(--font-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.contact .lead { margin-top: 18px; font-size: 1.15rem; color: var(--ink-2); max-width: 40ch; }
.c-list { display: grid; gap: 14px; }
.cc { min-width: 0; border: 2.5px solid var(--navy); border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.cc:nth-child(1) { background: var(--sky); } .cc:nth-child(2) { background: var(--mint); } .cc:nth-child(3) { background: var(--peach); }
.cc .lab { font: 500 0.74rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.cc .val { font: 800 clamp(1.2rem, 2.4vw, 1.6rem)/1.25 var(--font-display); letter-spacing: -0.01em; overflow-wrap: anywhere; user-select: all; }
.cc .val a { text-decoration: none; }
.cc .val a:hover { text-decoration: underline; }
.mini { align-self: flex-start; margin-top: 4px; font: 500 0.8rem var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; background: #fff; color: var(--ink); border: 2px solid var(--navy); border-radius: 10px; padding: 7px 12px; cursor: pointer; }
.mini:hover { background: var(--orange); }
.mini.done { background: var(--green); color: #fff; }

/* Footer */
footer { background: var(--sky-2); color: var(--ink); }
.stripe { height: 8px; background: linear-gradient(90deg, var(--orange) 0 34%, var(--green) 34% 67%, var(--navy) 67%); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 26px; padding-bottom: max(26px, env(safe-area-inset-bottom, 0px)); font: 500 0.8rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.foot-in b { font-weight: 500; color: #B25400; }

/* Botón flotante de WhatsApp */
.fab { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 35; width: 62px; height: 62px; border-radius: 50%; background: var(--green-d); color: #fff; display: grid; place-items: center; border: 3px solid #fff; box-shadow: 0 8px 24px rgba(0, 0, 48, 0.3); }
.fab svg { width: 32px; height: 32px; }
.fab::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--green); animation: ping 2.4s ease-out infinite; }
@keyframes ping { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.6); opacity: 0; } }

@media (max-width: 900px) {
  .hero-in, .sec-in, .c-grid { grid-template-columns: minmax(0, 1fr); }
  .sec.flip .media { order: 0; }
  .stage { max-width: 380px; }
  .media .seal { right: -4px; }
  .browser { display: none; }
  .phone { margin-left: 0; }
}
@media (max-width: 520px) {
  .chips { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; }
  .card-art { box-shadow: 7px 7px 0 var(--acc); }
  .c-card { box-shadow: 8px 8px 0 var(--orange); }
  .brand small { font-size: 0.58rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .track { width: auto; flex-wrap: wrap; }
  .track ul[aria-hidden="true"] { display: none; }
}

/* ===== v3.1: fondos neutros, botones suaves, cabecera y banda nuevas ===== */
:root { --bg: #FCFAF7; --bg2: #F3F5FB; --soft-o: #F6CFA8; --soft-g: #A9D8BD; --soft-b: #C9D3F2; }
body, .s-cream, .s-peach, .s-lilac { background: var(--bg); }
.s-sky, .s-mint { background: var(--bg2); }
.hero { background: var(--bg); }
.b1 { background: #E4EAFA; opacity: .6; } .b2 { background: #DCF1E6; opacity: .7; } .b3 { background: #FFE6D3; opacity: .6; }
.dots { opacity: .10; }
.o { --acc: var(--soft-o); } .g { --acc: var(--soft-g); }
.sec { padding-block: clamp(56px, 8vw, 96px); }
.top { background: rgba(252, 250, 247, .96); }
body::before { background: var(--bg); }
.btn { box-shadow: 5px 5px 0 var(--soft-b); }
.btn:hover { box-shadow: 8px 8px 0 var(--soft-b); }
.btn.wa { box-shadow: 5px 5px 0 var(--soft-g); }
.btn.wa:hover { box-shadow: 8px 8px 0 var(--soft-g); }
.btn.ghost { box-shadow: 5px 5px 0 var(--soft-b); }
.btn.ghost:hover { box-shadow: 8px 8px 0 var(--soft-b); }
.nav a.hot { background: #DCF1E6; }
.pill { box-shadow: 4px 4px 0 var(--soft-b); } .pill:hover { box-shadow: 6px 6px 0 var(--soft-b); }
.pill-new { background: #FFE6D3; }
.sticker { background: #DCF1E6; color: var(--navy); box-shadow: 4px 4px 0 var(--soft-b); }
.c-card, .ia-box { box-shadow: 8px 8px 0 var(--soft-o); }
.c-card { box-shadow: 10px 10px 0 var(--soft-b); }
.browser { box-shadow: 6px 6px 0 var(--soft-o); }
.phone { box-shadow: 8px 8px 0 var(--soft-g), 0 24px 40px rgba(0,0,48,.14); }
.disc { box-shadow: 10px 10px 0 var(--soft-g); }
.fl { box-shadow: 5px 5px 0 var(--soft-b); }
.h1b { background: linear-gradient(transparent 58%, #FCDCBC 58% 92%, transparent 92%) no-repeat; }
.chips li::before { background: var(--navy); opacity: .35; }
.stripe { display: none; }
footer { background: var(--bg2); border-top: 2px solid rgba(0,0,48,.12); }
.foot-in b { color: var(--navy); }

/* Cabecera: el nombre completo, grande y con movimiento */
.top-in { padding-block: 12px 8px; }
.brand svg { width: 52px; height: 52px; }
.bn { display: block; font: 800 clamp(1.3rem, 3.6vw, 2.35rem)/1.05 var(--font-display); letter-spacing: -.02em; background: linear-gradient(100deg, #000030 0%, #2E8B57 30%, #000030 52%, #6B7FD0 74%, #000030 100%); background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 7s ease-in-out infinite alternate, rise-in 1s both; }
.bn b { font-weight: 800; }
@keyframes shine { to { background-position: 100% 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px) skewX(-6deg); letter-spacing: .12em; } }
.brand { gap: 14px; }

/* Banda de servicios */
.marquee { background: #E9EEFB; border-block: 3px solid var(--navy); }
.marquee::after { background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.8) 50%, transparent 70%); }
.track { animation-duration: 60s; }
.track li { padding-block: 22px; gap: 34px; font-size: clamp(2.1rem, 5.4vw, 4rem); text-transform: uppercase; letter-spacing: -.005em; }
.track li::after { width: 16px; height: 16px; background: var(--soft-o); border: 2.5px solid var(--navy); }
.track li .nm { animation: tint 6s ease-in-out infinite; }
.track li:nth-child(5n+2) .nm { animation-delay: -1.2s; } .track li:nth-child(5n+3) .nm { animation-delay: -2.4s; } .track li:nth-child(5n+4) .nm { animation-delay: -3.6s; } .track li:nth-child(5n) .nm { animation-delay: -4.8s; }
@keyframes tint { 0%, 100% { color: var(--navy); transform: translateY(0); } 50% { color: var(--green); transform: translateY(-4px); } }
.track li:nth-child(even) .nm { animation-name: tint2; }
@keyframes tint2 { 0%, 100% { color: transparent; -webkit-text-stroke: 2px var(--navy); transform: translateY(0); } 50% { color: #A9D8BD; -webkit-text-stroke: 2px var(--navy); transform: translateY(4px); } }
@media (min-width: 700px) { .bn { white-space: nowrap; } }
.brand .bn b { display: inline; font: inherit; letter-spacing: inherit; }

.card-art img.ph { display: block; width: 100%; height: auto; }

.ia-stage { min-height: 520px; justify-content: flex-end; padding-right: clamp(14px, 4vw, 40px); }
.ia-stage img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%; }
.ia-stage .phone { margin-left: 0; }
.card-art video.ph { display: block; width: 100%; height: auto; background: #E4EAFA; }
@media (max-width: 900px) { .ia-stage { justify-content: center; padding-inline: 12px; min-height: 480px; } }
.ia-stage { justify-content: flex-start; padding-left: clamp(14px, 4vw, 36px); padding-right: 14px; }
.ia-stage img.bg { object-position: 85% 50%; }
@media (max-width: 900px) { .ia-stage { justify-content: center; } }

/* Selector de idiomas visible */
.lang { display: none; }
.langbar { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-block: 4px 8px; scrollbar-width: thin; }
.langbar .gl { flex: none; width: 26px; height: 26px; color: var(--navy); }
.langbar button { flex: none; font: 700 0.92rem var(--font-body); color: var(--navy); background: #fff; border: 2px solid var(--navy); border-radius: 999px; padding: 7px 15px; cursor: pointer; transition: transform .15s, background .15s; }
.langbar button:hover { background: #DCF1E6; transform: translateY(-2px); }
.langbar button.cur { background: var(--navy); color: #fff; box-shadow: 3px 3px 0 var(--soft-g); }

.langbar { padding-block: 6px 10px; }
.gl-wrap { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #FFE6D3; border: 2px solid var(--navy); }
.gl-wrap::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--green); animation: ping 2s ease-out infinite; }
.langbar .gl { width: 22px; height: 22px; }
.hint { flex: none; font: 800 0.95rem var(--font-display); color: var(--navy); background: #FFE6D3; border: 2px solid var(--navy); border-radius: 999px; padding: 6px 14px; transition: opacity .26s, transform .26s; min-width: 11.5em; text-align: center; }
.hint.out { opacity: 0; transform: translateY(-6px); }
.arrow { flex: none; font: 800 1.3rem var(--font-display); color: var(--green); animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }

.ia-stage .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 85% 50%; }
.disc { overflow: hidden; }
.disc video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }

.seal-h { left: 56%; top: 60%; width: 40%; z-index: 3; }
.disc video { opacity: 1; }
@media (max-width: 520px) { .seal-h { left: 54%; top: 58%; width: 42%; } }
.f3 { bottom: auto; top: 40%; right: -3%; }

/* v3.2 banderas, etiquetas de la portada y estrellas */
.fg { flex: none; display: inline-block; width: 26px; height: 17px; border-radius: 3px; border: 1px solid rgba(0,0,48,.35); margin-right: 8px; vertical-align: -3px; }
.fg-es { background: linear-gradient(#C60B1E 0 25%, #FFC400 25% 75%, #C60B1E 75%); }
.fg-en { background: linear-gradient(#C8102E,#C8102E) center/100% 4px no-repeat, linear-gradient(#C8102E,#C8102E) center/4px 100% no-repeat, linear-gradient(#fff,#fff) center/100% 8px no-repeat, linear-gradient(#fff,#fff) center/8px 100% no-repeat, #012169; }
.fg-pt { background: linear-gradient(90deg, #006600 0 40%, #FF0000 40%); }
.fg-de { background: linear-gradient(#000 0 33.3%, #DD0000 33.3% 66.6%, #FFCE00 66.6%); }
.fg-fr { background: linear-gradient(90deg, #0055A4 0 33.3%, #fff 33.3% 66.6%, #EF4135 66.6%); }
.fg-it { background: linear-gradient(90deg, #009246 0 33.3%, #fff 33.3% 66.6%, #CE2B37 66.6%); }
.fg-nl { background: linear-gradient(#AE1C28 0 33.3%, #fff 33.3% 66.6%, #21468B 66.6%); }
.langbar button { display: inline-flex; align-items: center; }
.langbar button[data-lang="es"] { background: #FFF1C9; } .langbar button[data-lang="en"] { background: #DDE5F8; } .langbar button[data-lang="pt"] { background: #DDF0E0; } .langbar button[data-lang="de"] { background: #F3EBC8; } .langbar button[data-lang="fr"] { background: #E0E8F8; } .langbar button[data-lang="it"] { background: #E2F2E4; } .langbar button[data-lang="nl"] { background: #FBE0E0; }
.langbar button.cur { background: var(--navy); color: #fff; }

.stage .fl { width: auto; aspect-ratio: auto; gap: 8px; padding: 9px 16px; border-radius: 999px; display: flex; align-items: center; font: 800 clamp(.85rem, 1.7vw, 1.05rem)/1 var(--font-display); white-space: nowrap; }
.stage .fl .d { width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--orange)); border: 2px solid var(--navy); flex: none; }
.f1 { left: -2%; top: 10%; } .f2 { right: -2%; top: 8%; left: auto; } .f3 { right: -6%; top: 36%; bottom: auto; }
.f4 { left: 0; bottom: 16%; right: auto; } .f5 { left: -7%; top: 40%; } .f6 { left: 26%; bottom: -3%; --r: 3deg; --c: var(--orange); --t: 6.2s; }

.btn.stars { position: relative; overflow: visible; }
.btn.stars .st { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; pointer-events: none; opacity: 0; background: #F6B84A; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: burst 2.6s ease-out infinite; animation-delay: var(--dl, 0s); }
.st.s1 { --dx: -90px; --dy: -46px; --dl: 0s; } .st.s2 { --dx: -30px; --dy: -62px; --dl: .3s; background: #A9D8BD; } .st.s3 { --dx: 40px; --dy: -60px; --dl: .6s; } .st.s4 { --dx: 95px; --dy: -40px; --dl: .9s; background: #C9D3F2; }
.st.s5 { --dx: 110px; --dy: 10px; --dl: 1.2s; } .st.s6 { --dx: -110px; --dy: 12px; --dl: 1.5s; background: #A9D8BD; } .st.s7 { --dx: 60px; --dy: 50px; --dl: 1.8s; background: #C9D3F2; } .st.s8 { --dx: -60px; --dy: 52px; --dl: 2.1s; }
@keyframes burst { 0% { opacity: 0; transform: translate(0,0) scale(.3) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.3) rotate(120deg); } }
@media (max-width: 520px) { .f1 { left: 0; } .f2 { right: 0; } .f3 { right: -2%; } .f5 { left: -2%; } .st.s1, .st.s6 { --dx: -60px; } .st.s4, .st.s5 { --dx: 60px; } }
@media (max-width: 700px) { .langbar { flex-wrap: wrap; overflow: visible; gap: 6px; } .langbar button { padding: 6px 11px; font-size: .85rem; } .hint { min-width: 0; font-size: .85rem; padding: 5px 10px; } .fg { width: 22px; height: 15px; margin-right: 6px; } }
@media (max-width: 700px) { .top { position: static; } body::before { display: none; } }

/* v3.2 proceso, faq, formulario */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:34px;padding:0}
.steps li{background:#fff;border:2px solid var(--navy);border-radius:22px;padding:22px 20px;box-shadow:6px 6px 0 rgba(0,0,48,.12)}
.steps .num{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;font:800 1.1rem var(--font-display);margin-bottom:12px}
.steps h3{font:800 1.15rem/1.2 var(--font-display);margin-bottom:6px}.steps p{color:var(--ink-2);font-size:.98rem}
.faq-list{margin-top:30px;display:grid;gap:12px;max-width:820px}
.faq details{background:#fff;border:2px solid var(--navy);border-radius:18px;padding:0 20px}
.faq summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-weight:800;color:var(--green)}
.faq details[open] summary::after{content:"\2212"}.faq details p{padding:0 0 16px;color:var(--ink-2)}
.pform{margin-top:34px;padding-top:28px;border-top:2px dashed rgba(0,0,48,.2);display:grid;gap:14px}
.pform h3{font:800 1.4rem var(--font-display)}
.pform .f-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pform label{display:grid;gap:6px;font-weight:600;font-size:.92rem}
.pform input,.pform select,.pform textarea{font:inherit;padding:12px 14px;border:2px solid rgba(0,0,48,.25);border-radius:14px;background:#fff;color:var(--ink,#000030);width:100%}
.pform input:focus,.pform select:focus,.pform textarea:focus{outline:3px solid rgba(46,139,87,.4);border-color:var(--green)}
.pform .btn{justify-self:start}.f-note{font-size:.88rem;color:var(--ink-2)}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.pform .f-row{grid-template-columns:1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.f-link{font-weight:700;color:var(--green);text-decoration:underline;justify-self:start}.f-link[hidden]{display:none}

/* v3.3 galeria, equipo, logo */
.pk-i{width:52px;height:52px;flex:none;object-fit:contain}
.gal-grid{columns:3 260px;column-gap:16px;margin-top:30px}
.gal-grid figure{break-inside:avoid;margin:0 0 16px}
.zoom{display:block;width:100%;padding:0;border:2.5px solid var(--navy);border-radius:18px;overflow:hidden;background:#fff;cursor:zoom-in;box-shadow:5px 5px 0 rgba(0,0,48,.14);transition:transform .2s}
.zoom:hover{transform:translateY(-3px)}.zoom img{display:block;width:100%;height:auto}
.nelson{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;margin-top:30px;background:#fff;border:2.5px solid var(--navy);border-radius:26px;padding:clamp(16px,3vw,30px);box-shadow:8px 8px 0 rgba(0,0,48,.14)}
.nelson img{width:100%;height:auto;border-radius:18px;display:block}
.nelson h3{font:800 clamp(1.5rem,3vw,2.2rem)/1.1 var(--font-display);margin-bottom:12px}
.nelson h3::after{content:"";display:block;width:56px;height:6px;border-radius:6px;background:var(--green);margin-top:14px}
.nelson p{font-size:1.15rem;color:var(--ink-2);max-width:34ch}
.team-grid{margin-top:34px}
#lb{border:0;padding:0;background:transparent;max-width:min(94vw,1100px);max-height:94vh;overflow:visible}
#lb::backdrop{background:rgba(0,0,30,.82)}
#lb img{display:block;max-width:94vw;max-height:84vh;margin:auto;border-radius:14px;border:3px solid #fff}
.lb-x{display:block;margin:0 auto 10px;background:#fff;color:var(--navy);border:2px solid var(--navy);border-radius:12px;padding:8px 18px;font:700 .95rem var(--font-body);cursor:pointer}
.ban{background:var(--navy);padding:34px 16px}.ban img{display:block;width:min(100%,760px);height:auto;margin:0 auto}
@media(max-width:760px){.nelson{grid-template-columns:1fr}.gal-grid{columns:2 150px;column-gap:12px}.gal-grid figure{margin-bottom:12px}}
.ban-v{display:block;width:min(100%,760px);height:auto;margin:0 auto 26px;border-radius:18px;border:2.5px solid rgba(255,255,255,.25);background:#000}

/* v3.4 videos + intro */
.vid-grid{display:grid;grid-template-columns:minmax(220px,300px) 1fr 1fr;gap:18px;margin-top:30px;align-items:start}
.vid{margin:0;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 8px 26px rgba(0,0,48,.10)}
.vid video{display:block;width:100%;height:auto;background:#000;aspect-ratio:16/9;object-fit:cover}
.vid.tall{grid-row:span 2}.vid.tall video{aspect-ratio:9/16}
.vid figcaption{padding:12px 16px;font-weight:700;color:#000030}
@media(max-width:860px){.vid-grid{grid-template-columns:1fr 1fr}.vid.tall{grid-row:auto;grid-column:1/-1;max-width:320px;margin:0 auto}}
@media(max-width:560px){.vid-grid{grid-template-columns:1fr}}
#intro{position:fixed;inset:0;z-index:9999;background:#fff;display:flex;align-items:center;justify-content:center;transition:opacity .6s}
#intro.out{opacity:0;pointer-events:none}
#intro video{width:min(92vw,900px);height:auto;max-height:80vh;border-radius:18px}
#introx{position:absolute;right:18px;bottom:18px;border:0;border-radius:999px;padding:10px 20px;font:700 15px/1 inherit;background:#F07800;color:#fff;cursor:pointer}

/* v3.5 llamada comercial pie */
.foot-cta{text-align:center;padding-block:34px 8px}
.foot-cta h2{font-size:clamp(1.4rem,3.4vw,2rem);margin:0 0 8px;color:var(--navy)}
.foot-cta p{max-width:640px;margin:0 auto 18px}
.fc-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.fc-row .btn{max-width:100%;overflow-wrap:anywhere}
.fc-where{margin:18px auto 0!important;font-size:.9rem}

/* v3.6 tiendas, legal, accesibilidad */
.sec-in.rev{direction:ltr}
.shop-mock{padding:0;background:#fff}
.sm-bar{display:flex;align-items:center;gap:7px;padding:12px 14px;background:#EEF1FB;border-bottom:2px solid var(--navy)}
.sm-bar i{width:11px;height:11px;border-radius:50%;background:var(--orange)}
.sm-bar i:nth-child(2){background:#F6B84A}.sm-bar i:nth-child(3){background:var(--green)}
.sm-bar span{flex:1;height:14px;border-radius:8px;background:#fff;border:1.5px solid rgba(0,0,48,.25);margin-left:8px}
.sm-bar b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font:700 .8rem var(--font-body)}
.sm-hero{display:grid;gap:8px;padding:18px 16px 6px}
.sm-hero em{display:block;height:14px;border-radius:8px;background:var(--navy);width:62%}
.sm-hero em+em{height:10px;width:40%;background:rgba(0,0,48,.2)}
.sm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px 16px}
.sm-grid div{border:2px solid var(--navy);border-radius:12px;padding:8px;background:#fff;box-shadow:3px 3px 0 var(--soft-b)}
.sm-grid u{display:block;aspect-ratio:1;border-radius:8px;margin-bottom:8px}
.sm-grid .g1{background:linear-gradient(135deg,#F6CFA8,#F07800)}
.sm-grid .g2{background:linear-gradient(135deg,#C9D3F2,#000030)}
.sm-grid .g3{background:linear-gradient(135deg,#A9D8BD,#2E8B57)}
.sm-grid s{display:block;height:8px;border-radius:5px;background:rgba(0,0,48,.25);text-decoration:none;margin-top:5px}
.sm-grid s.sh{width:55%;background:rgba(0,0,48,.12)}
.sm-pay{padding:6px 16px 18px}
.sm-pay span{display:block;height:34px;border-radius:12px;background:var(--green-d);border:2px solid var(--navy)}
.nav a{min-height:44px;display:inline-flex;align-items:center}
.langbar button{min-height:44px}
.lb-x,.leg-x,#introx{min-height:44px}
.leg-link{background:none;border:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-decoration:underline;cursor:pointer;min-height:44px;padding:0 6px}
#legal{border:2.5px solid var(--navy);border-radius:22px;padding:0;max-width:min(92vw,720px);max-height:88vh;background:#fff;color:var(--ink);box-shadow:8px 8px 0 var(--orange)}
#legal::backdrop{background:rgba(0,0,30,.7)}
.leg-in{padding:26px 24px 24px;overflow:auto;max-height:86vh}
.leg-in h2{margin:0 0 10px;font-size:clamp(1.3rem,4vw,1.8rem)}
.leg-in h3{margin:18px 0 4px;font:700 1rem var(--font-body);color:var(--navy)}
.leg-in p{margin:0;font-size:.95rem;line-height:1.55}
.leg-x{display:block;margin:22px auto 0;background:var(--navy);color:#fff;border:2px solid var(--navy);border-radius:12px;padding:8px 22px;font:700 .95rem var(--font-body);cursor:pointer}
.mini{min-height:44px;min-width:64px}
#v-tel a{display:inline-flex;align-items:center;min-height:44px}

/* v3.7 multipágina */
.sec h1{margin:0;font:800 clamp(2.1rem,5vw,3.9rem)/1.02 var(--font-display);letter-spacing:-.025em;overflow-wrap:anywhere}
.hub,.ej{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}
.ej{grid-template-columns:repeat(2,minmax(0,1fr))}
.hub-card,.ej-card{position:relative;display:flex;flex-direction:column;gap:8px;background:#fff;border:2.5px solid var(--navy);border-radius:22px;padding:12px 12px 18px;text-decoration:none;color:var(--ink);box-shadow:6px 6px 0 var(--soft-b);transition:transform .15s,box-shadow .15s}
.hub-card:hover,.ej-card:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--soft-o)}
.hub-card img,.ej-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:#E4EAFA}
.ej-card img{aspect-ratio:11/7.6}
.hub-card h3,.ej-card h3{font:800 1.3rem/1.1 var(--font-display);margin:6px 6px 0;color:var(--navy)}
.hub-card p,.ej-card p{margin:0 6px;font-size:.95rem;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hm{margin:auto 6px 0;padding-top:6px;font:700 .95rem var(--font-body);color:var(--navy)}
.ej-tag{position:absolute;top:22px;left:22px;z-index:2;background:#DCF1E6;color:var(--navy);border:2px solid var(--navy);border-radius:999px;padding:4px 12px;font:700 .75rem var(--font-body);letter-spacing:.04em;text-transform:uppercase}
.ej-note{margin-top:22px;font-size:.92rem;opacity:.8}
.ej+.ej-note+.cta-row,.ej-note+.cta-row{margin-top:18px}
.rel h2{font-size:clamp(1.3rem,3vw,1.8rem)}
.rel-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.chip-l{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:2px solid var(--navy);border-radius:999px;background:#fff;text-decoration:none;font:600 .92rem var(--font-body);color:var(--navy)}
.chip-l:hover{background:var(--peach)}
.nav a[aria-current=page]{background:var(--navy);color:#fff;border-color:var(--navy)}
#tiendas,#rotulacion,#impresion,#textil,#foto-video,#web-redes,#videos,#trabajos,#ejemplos{min-height:60vh}
.stage .f7{right:-7%;top:22%;--r:-4deg;--c:var(--green);--t:6.8s;left:auto;bottom:auto}
.stage .f8{left:-5%;top:62%;--r:5deg;--c:var(--navy);--t:7.2s;right:auto;bottom:auto}
.stage .f9{right:-2%;top:49%;--r:-6deg;--c:var(--orange);--t:5.8s;left:auto;bottom:auto}
.stage .f5{left:-5%;top:28%;right:auto}
.stage .f8{left:-5%;top:46%;right:auto;bottom:auto}
@media(max-width:520px){.stage .f7{right:-3%;top:22%}.stage .f9{right:-2%;top:49%}.stage .f5{left:-2%}.stage .f8{left:-2%}}
/* v3.8 menú destacado */
.navband{position:relative;background:var(--navy);margin-top:2px}
.navband::after{content:"";position:absolute;right:0;top:0;bottom:0;width:34px;background:linear-gradient(90deg,rgba(0,0,48,0),#000030);pointer-events:none}
.navband .nav{padding-block:10px;padding-right:40px;gap:8px}
.navband .nav a{font:700 .88rem var(--font-body);letter-spacing:.02em;text-transform:none;color:var(--navy);background:#fff;border:2px solid #fff;padding:0 18px;min-height:44px;box-shadow:0 3px 0 rgba(240,120,0,.9)}
.navband .nav a:hover,.navband .nav a:focus-visible{background:var(--orange);border-color:var(--orange);color:var(--navy);transform:translateY(-2px)}
.navband .nav a.hot{background:#F6B84A;border-color:#F6B84A}
.navband .nav a.hot:hover{background:var(--orange);border-color:var(--orange)}
@media(max-width:900px){.hub{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.hub,.ej{grid-template-columns:1fr}}