/* Réplica del diseño negro de bluecomunicadores.com/2026 — valores medidos de la web actual. */
:root {
  --black: #030303;
  --ink: #0B0B0C;
  --blue: #4EB5EF;
  --blue-ink: #1A6FA8;
  --beige: #F1EFEB;
  --card: #F8F8F8;
  --gray: #C2C2C2;
  --gray-dim: #8C8C8C;
  --line: rgba(255, 255, 255, 0.14);
  --line-dark: rgba(3, 3, 3, 0.12);
  --f-display: 'Clash Display', 'Segoe UI', system-ui, sans-serif;
  --f-caps: 'Six Caps', 'Impact', 'Arial Narrow', sans-serif;
  --f-ui: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Roboto', 'Segoe UI', system-ui, sans-serif;
  --pad: clamp(16px, 4vw, 40px);
  --sec: clamp(4.5rem, 3rem + 6vw, 8.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--black); color: #fff; font: 400 1rem/1.75 var(--f-body); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 500; line-height: 1.1; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: 820px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: .6rem 1rem; background: #fff; color: var(--black); border-radius: 999px; font: 600 .9rem var(--f-ui); }
.skip:focus { top: 12px; }
main > section { position: relative; scroll-margin-top: 90px; }

/* Botones */
.btn { display: inline-flex; align-items: center; gap: .7rem; padding: .95rem 1.6rem; border-radius: 999px; border: 1px solid transparent; font: 700 .85rem/1 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: background-color .3s, color .3s, transform .3s; }
.btn svg { width: 1.2em; height: 1.2em; transition: transform .3s; }
.btn:hover svg { transform: translateX(4px); }
.btn--light { background: #fff; color: var(--black); }
.btn--light:hover { background: var(--blue); }
.btn--outline { border-color: currentColor; color: var(--black); }
.btn--outline:hover { background: var(--black); color: #fff; }

/* Entradas: ocultas solo con JS, visibles si el JS falla */
.js [data-reveal]:not(.is-revealed) { opacity: 0; }
.no-motion [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ---------- Cabecera ---------- */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: .9rem var(--pad); transition: background-color .35s, transform .35s, padding .35s; }
.hd.is-scrolled { background: rgba(3, 3, 3, .92); backdrop-filter: blur(8px); padding-block: .55rem; }
.hd.is-hidden { transform: translateY(-100%); }
.hd__menu { justify-self: start; display: grid; grid-template-columns: repeat(2, 5px); gap: 6px; place-content: center; width: 54px; height: 54px; border: 1px solid var(--line); border-radius: 50%; background: transparent; transition: background-color .3s, border-color .3s; }
.hd__menu span { width: 5px; height: 5px; border-radius: 50%; background: #fff; transition: transform .3s; }
.hd__menu:hover { background: #fff; border-color: #fff; }
.hd__menu:hover span { background: var(--black); }
.hd__menu:hover span:nth-child(1) { transform: translate(-2px, -2px); } .hd__menu:hover span:nth-child(4) { transform: translate(2px, 2px); }
.hd__logo img { width: 60px; height: 60px; object-fit: contain; transition: width .35s, height .35s; }
.hd.is-scrolled .hd__logo img { width: 48px; height: 48px; }
.hd__cta { justify-self: end; display: inline-flex; align-items: center; gap: 1.6rem; padding: .95rem 1.4rem .95rem 1.6rem; border: 1px solid var(--line); border-radius: 999px; font: 700 .85rem/1 var(--f-ui); text-transform: uppercase; text-decoration: none; transition: background-color .3s, color .3s; }
.hd__cta svg { width: 1.1em; height: 1.1em; }
.hd__cta:hover { background: #fff; color: var(--black); }
@media (max-width: 640px) { .hd__cta { gap: .6rem; padding: .8rem 1rem; font-size: .75rem; } .hd__menu { width: 46px; height: 46px; } .hd__logo img { width: 48px; height: 48px; } }

/* ---------- Menú lateral ---------- */
.menu { margin: 0; width: min(520px, 100%); max-width: none; height: 100dvh; max-height: none; padding: clamp(5rem, 10vh, 7rem) clamp(1.5rem, 5vw, 3.5rem) 2rem; border: 0; background: var(--black); color: #fff; overflow-y: auto; }
.menu::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); }
.menu[open] { animation: menu-in .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes menu-in { from { transform: translateX(-100%); } }
.menu__close { position: absolute; top: 1.2rem; right: 1.2rem; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 50%; background: none; }
.menu__close svg { width: 22px; height: 22px; }
.menu__nav a { display: block; padding: .35rem 0; font: 500 clamp(2rem, 1.4rem + 2.6vw, 3.2rem)/1.15 var(--f-display); text-transform: uppercase; text-decoration: none; color: var(--gray-dim); transition: color .25s, padding .25s; }
.menu__nav a:hover, .menu__nav a[aria-current] { color: #fff; padding-left: .6rem; }
.menu__info { margin-top: 2.5rem; padding-top: 1.8rem; border-top: 1px solid var(--line); display: grid; gap: .9rem; color: var(--gray); font-size: .95rem; }
.menu__info p { display: flex; gap: .8rem; align-items: flex-start; }
.menu__info svg { width: 20px; height: 20px; flex: none; margin-top: .2rem; color: var(--blue); }
.menu__info a { text-decoration: none; }
.menu__social, .ft__social { display: flex; gap: .55rem; }
.menu__social a, .ft__social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; transition: background-color .25s, color .25s; }
.menu__social a:hover, .ft__social a:hover { background: #fff; color: var(--black); }
.menu__social svg, .ft__social svg { width: 18px; height: 18px; }

/* ---------- Portada ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 7rem var(--pad) clamp(2rem, 5vw, 4rem); overflow: hidden; background: #d9d9d9 url('../img/hero-poster.webp') center / cover; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 3, 3, .55) 0%, rgba(3, 3, 3, 0) 25%, rgba(3, 3, 3, 0) 55%, rgba(3, 3, 3, .75) 100%); }
.hero__title { position: relative; z-index: 1; font: 600 clamp(2rem, 1.2rem + 3vw, 3.4rem)/1.05 var(--f-display); text-transform: uppercase; }
.hero__aside { position: absolute; z-index: 2; right: var(--pad); bottom: clamp(2rem, 5vw, 4rem); width: min(380px, calc(100% - 2 * var(--pad))); display: grid; gap: 1.5rem; justify-items: start; font-size: 1.1rem; line-height: 1.6; }
.hero__aside p { color: rgba(255, 255, 255, .85); }
.hero__aside strong { color: #fff; font-weight: 500; }
@media (max-width: 760px) {
  /* En el celular el video (horizontal, con textos a los costados) se ve completo a lo ancho,
     y debajo van el título y el texto. Estirado a toda la pantalla se cortaban sus palabras. */
  .hero { min-height: 0; align-content: start; align-items: start; gap: 1.6rem; padding-top: 6.4rem; background: var(--black); }
  .hero__video { position: relative; inset: auto; width: calc(100% + 2 * var(--pad)); max-width: none; height: auto; aspect-ratio: 16 / 9; margin-inline: calc(-1 * var(--pad)); background: var(--black); }
  .hero__shade { display: none; }
  .hero__title { order: 1; }
  .hero__aside { order: 2; position: relative; right: auto; bottom: auto; width: 100%; }
}

/* ---------- Franja celeste ---------- */
.band { background: var(--blue); overflow: hidden; padding-block: .4rem 0; }
.band__track { display: flex; width: max-content; animation: band 28s linear infinite; }
.band__track span { padding-right: 4vw; font: 400 clamp(7rem, 3rem + 16vw, 18rem)/.86 var(--f-caps); text-transform: uppercase; color: var(--black); letter-spacing: .01em; }
@keyframes band { to { transform: translateX(-50%); } }

/* ---------- Manifiesto y clientes ---------- */
.manifesto { padding-block: var(--sec) calc(var(--sec) * .7); }
.manifesto__grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 2.5rem; align-items: start; }
.manifesto__tag { padding-top: .8rem; font: 500 1rem/1.75 var(--f-display); text-transform: uppercase; color: var(--gray); }
.manifesto__text, .clients__title, .news__title, .big-gray, .cta-band h2 { font: 400 clamp(1.7rem, 1.1rem + 2vw, 2.6rem)/1.25 var(--f-display); text-transform: uppercase; color: #fff; }
.js [data-fill] .ch { color: rgba(255, 255, 255, .22); transition: color .15s; }
.js [data-fill] .ch.is-on { color: inherit; }
.manifesto__card { display: grid; background: #fff; color: var(--black); }
.manifesto__card a { display: flex; justify-content: space-between; align-items: center; padding: 1.6rem 1.4rem; font: 500 .95rem/1.2 var(--f-ui); text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--line-dark); transition: background-color .25s; }
.manifesto__card a:last-child { border-bottom: 0; }
.manifesto__card a:hover { background: var(--blue); }
.manifesto__card svg { width: 22px; height: 22px; }
.clients { margin-top: var(--sec); border: 1px solid var(--line); padding: clamp(2rem, 4vw, 3.2rem) 0 clamp(1.8rem, 3vw, 2.6rem); text-align: center; }
.clients__title { font-size: clamp(1.3rem, 1rem + 1vw, 2rem); margin: 0 var(--pad) 2.2rem; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: band 40s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem); padding-inline: clamp(1.25rem, 2.5vw, 2.25rem); }
/* Logos en blanco; al pasar el mouse (o tocar) se ven en sus colores reales sobre una tarjeta blanca, porque varios
   tienen letras oscuras que no se verían sobre el negro. El espacio de la tarjeta está siempre: no mueve la franja. */
.marquee__group li { display: grid; place-items: center; padding: .55rem .85rem; border-radius: 12px; transition: background-color .35s; }
.marquee__group img { width: auto; max-width: 130px; height: 44px; object-fit: contain; filter: brightness(0) invert(1); opacity: .75; transition: filter .35s, opacity .35s; }
.marquee__group li:hover { background: #fff; }
.marquee__group li:hover img { filter: none; opacity: 1; }
@media (max-width: 900px) { .manifesto__grid { grid-template-columns: 1fr; } }

/* ---------- Servicios (beige) ---------- */
.services { background: var(--beige); color: var(--black); padding-block: calc(var(--sec) * .7) var(--sec); }
.services__top, .news__top, .sec-top, .brands__top { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font: 500 .85rem/1.6 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.services__top span:first-child, .brands__top span:first-child, .includes .sec-top span:first-child { color: var(--blue-ink); }
.news__top span:first-child, .sec-top span:first-child { color: var(--blue); }
.services__title { margin: 2.5rem 0 1.5rem; text-align: center; font: 400 clamp(5.5rem, 2rem + 13vw, 12.5rem)/.9 var(--f-caps); }
.services__world { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.4rem); border-radius: 22px; background: var(--card); }
.services__world p { color: #444; max-width: 640px; text-wrap: pretty; }
.services__world strong { color: var(--black); font-weight: 600; }
.services__intro { max-width: 640px; margin: 0 auto clamp(3rem, 6vw, 5rem); text-align: center; color: #444; }
.srow { position: relative; display: grid; grid-template-columns: 56px 1fr minmax(220px, 300px); gap: clamp(1.2rem, 4vw, 4rem); align-items: center; padding-block: 2.6rem; border-top: 1px solid var(--line-dark); color: inherit; text-decoration: none; }
li:last-child > .srow { border-bottom: 1px solid var(--line-dark); }
.srow__icon { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--line-dark); border-radius: 50%; }
.srow__icon svg { width: 26px; height: 26px; }
.srow__name { font: 400 clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem)/1 var(--f-display); text-transform: uppercase; margin-bottom: .9rem; }
.srow__text p { max-width: 520px; color: #444; }
.srow__media { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; }
.srow__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
/* Flecha en la esquina de abajo a la derecha (antes iba al centro y tapaba la foto). */
.srow__go { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgb(0 0 0 / .18); transition: scale .4s, background-color .3s; }
.srow__go svg { width: 22px; height: 22px; }
.srow:hover .srow__media img { transform: scale(1.08); }
.srow:hover .srow__go { scale: 1.15; background: var(--blue); }
.srow:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 6px; }
@media (max-width: 760px) { .srow { grid-template-columns: 48px 1fr; } .srow__media { grid-column: 1 / -1; } }

/* ---------- Clientes: mapa de puntos con burbujas de logos (copiado de la versión clara) ---------- */
.brands { background: var(--beige); color: var(--black); padding-bottom: var(--sec); overflow: clip; }
.brands__stage { position: relative; height: 640px; }
.brands__map { position: absolute; inset: 8% 0 auto; aspect-ratio: 360 / 140; pointer-events: none; }
.brands__map img, .brands__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.brands__map img { filter: brightness(.72) saturate(1.4); }
.brands__map circle { fill: var(--blue); transform-box: fill-box; transform-origin: center; animation: twinkle 4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.brands__map .brands__home { fill: var(--blue-ink); animation: none; }
.brands__map .brands__ring { fill: none; stroke: var(--blue); stroke-width: .5; animation: ring 2.4s ease-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes ring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(4.5); } }
.brands__center { position: absolute; left: 28%; right: 28%; top: 50%; translate: 0 -50%; z-index: 2; display: grid; justify-items: center; gap: 1.2rem; padding: 2rem; text-align: center; background: radial-gradient(closest-side, rgba(241, 239, 235, .97) 62%, rgba(241, 239, 235, 0)); }
.brands__top { margin-top: calc(var(--sec) * -.35); }
/* Las burbujas suben hasta 90 px al hacer scroll: este espacio evita que se corten o tapen "// Clientes". */
.brands__stage { margin-top: 4.5rem; }
.brands__title { font: 600 clamp(2rem, 1.3rem + 2.2vw, 3rem)/1.1 var(--f-display); text-transform: uppercase; }
.brands__center > p { color: #444; max-width: 460px; }
/* La caja central es más grande que su contenido y queda encima de algunas burbujas (Vodanovic, RTG):
   deja pasar el mouse para que esas burbujas muestren su color; solo el botón lo recibe. */
.brands__center { pointer-events: none; }
.brands__center a, .brands__center button { pointer-events: auto; }
.brand-bubble { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: var(--size, 104px); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 14px 34px rgba(3, 3, 3, .08); }
.brand-bubble--lg { --size: 128px; } .brand-bubble--md { --size: 104px; } .brand-bubble--sm { --size: 84px; }
.brand-bubble img { width: 70%; height: 44%; object-fit: contain; filter: brightness(0); opacity: .6; transition: opacity .3s; }
/* Al pasar el mouse, el logo se ve en sus colores reales */
.brand-bubble img { transition: filter .35s, opacity .35s; }
.brand-bubble:hover img { filter: none; opacity: 1; }
@media (max-width: 1023px) {
  .brands__stage { height: auto; margin-top: 2rem; }
  .brands__map { inset: 0 0 auto; width: 100%; opacity: .8; }
  .brands__center { position: relative; left: auto; right: auto; top: auto; translate: none; padding: 3rem 0 0; background: none; }
  .brand-bubbles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 3vw, 1.5rem); margin-top: 2.5rem; }
  .brand-bubble { position: static; width: 100%; max-width: 128px; justify-self: center; }
}

/* ---------- Blog en el inicio ---------- */
.news { padding-block: var(--sec); }
.news__title { margin: 3rem 0 1.4rem; text-align: center; }
.news__intro { max-width: 640px; margin: 0 auto 3rem; text-align: center; color: var(--gray); }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 1.6rem) / 3); gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .5rem; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > li { scroll-snap-align: start; }
.carousel__nav { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2.5rem; }
.carousel__btn { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid var(--line); border-radius: 50%; background: none; transition: background-color .25s, color .25s; }
.carousel__btn:hover { background: #fff; color: var(--black); }
.carousel__btn svg { width: 20px; height: 20px; }
.carousel__btn[data-dir="-1"] svg { transform: scaleX(-1); }
@media (max-width: 900px) { .carousel__track { grid-auto-columns: 78%; } }

/* Tarjeta de artículo */
.pcard { position: relative; display: grid; gap: 1rem; }
.pcard__media { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 731 / 412; background: #151515; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.pcard__noimg { display: grid; place-items: center; height: 100%; font: 400 6rem/1 var(--f-caps); color: var(--blue); }
.pcard:hover .pcard__media img { transform: scale(1.06); }
.pcard__date { position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 54px; padding: .5rem 0; border-radius: 10px; background: var(--black); font: 400 .85rem/1.2 var(--f-display); color: #fff; }
.pcard__date b { font-size: 1.35rem; font-weight: 600; }
.pcard__title { font: 600 1.15rem/1.35 var(--f-display); text-transform: uppercase; }
.pcard__title a { text-decoration: none; }
.pcard__title a::after { content: ''; position: absolute; inset: 0; }
.pcard__excerpt { color: var(--gray); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__more { display: inline-flex; align-items: center; gap: .5rem; font: 700 .8rem/1 var(--f-ui); text-transform: uppercase; }
.pcard__more svg { width: 1.1em; height: 1.1em; }
.pcard:focus-within { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 14px; }

/* ---------- Formulario "Hey!" ---------- */
.hey { padding-block: calc(var(--sec) * .6) var(--sec); }
.hey__lead { text-align: center; color: var(--gray); font-size: 1.25rem; margin-bottom: 2.5rem; }
.hey__card { display: grid; grid-template-columns: 1fr 1.2fr; background: var(--card); color: var(--black); border-radius: 26px; overflow: hidden; max-width: 980px; margin-inline: auto; }
.hey__intro { padding: clamp(2rem, 4vw, 3.2rem); background: #fff; }
.hey__intro h2 { font: 400 2.2rem/1.2 var(--f-ui); margin-bottom: 1rem; }
.hey__intro p { color: #555; }
.hey__form { position: relative; display: grid; align-content: center; gap: 1.4rem; padding: clamp(2rem, 4vw, 3.2rem); }
.hey__step { display: none; margin: 0; padding: 0; border: 0; }
.hey__step.is-active { display: grid; gap: .6rem; animation: step-in .35s ease; }
@keyframes step-in { from { opacity: 0; transform: translateX(20px); } }
.hey__step label { color: #555; font-size: .95rem; }
.hey__step input, .hey__step select, .hey__step textarea { width: 100%; padding: .9rem 0; border: 0; border-bottom: 1px solid #bbb; background: transparent; font: 400 1.05rem var(--f-body); color: var(--black); }
.hey__step input:focus, .hey__step select:focus, .hey__step textarea:focus { outline: none; border-bottom-color: var(--black); }
.hey__error { min-height: 1.2em; color: #B42318; font-size: .9rem; }
.hey__nav { display: flex; align-items: center; gap: .8rem; }
.hey__dots { display: flex; gap: .4rem; margin-right: auto; }
.hey__dots li { width: 8px; height: 8px; border-radius: 50%; background: #ccc; transition: background-color .3s, width .3s; }
.hey__dots li.is-active { width: 22px; border-radius: 4px; background: var(--black); }
.hey__back, .hey__next { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--black); background: var(--black); color: #fff; }
.hey__back { background: transparent; color: var(--black); }
.hey__back svg { transform: scaleX(-1); }
.hey__back[hidden] { display: none; }
.hey__back svg, .hey__next svg { width: 22px; height: 22px; }
@media (max-width: 760px) { .hey__card { grid-template-columns: 1fr; } }

/* ---------- Pie ---------- */
.ft { border-top: 1px solid var(--line); padding-top: clamp(3rem, 6vw, 4.5rem); }
.ft__grid { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 2rem; align-items: center; }
.ft__logo img { width: 64px; height: auto; }
.ft__item { display: flex; gap: 1rem; align-items: center; color: var(--gray); font-size: .95rem; }
.ft__item svg { width: 40px; height: 40px; flex: none; padding: 9px; border: 1px solid var(--line); border-radius: 50%; color: #fff; }
.ft__item a { color: #fff; text-decoration: none; }
.ft__item span { font-size: .85rem; }
address.ft__grid { font-style: normal; }
.ft__services { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.ft__services p { font: 500 .8rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.ft__services ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.ft__services a { display: inline-block; padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; color: var(--gray); text-decoration: none; transition: background-color .25s, color .25s; }
.ft__services a:hover, .ft__services a[aria-current] { background: #fff; color: var(--black); }
.ft__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 3rem; padding-block: 1.6rem; border-top: 1px solid var(--line); }
.ft__links { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: .9rem; color: var(--gray); }
.ft__links a { text-decoration: none; } .ft__links a:hover { color: #fff; }
.ft__follow { display: flex; align-items: center; gap: 1rem; color: var(--gray); font-size: .9rem; }
.ft__copy { padding: 1.4rem var(--pad) 1.6rem; text-align: center; font-size: .85rem; color: var(--gray-dim); border-top: 1px solid var(--line); }
@media (max-width: 900px) { .ft__grid { grid-template-columns: 1fr 1fr; } .ft__logo { grid-column: 1 / -1; } }
@media (max-width: 560px) { .ft__grid { grid-template-columns: 1fr; } .ft__bottom { padding-right: 70px; } }

.wa-float { position: fixed; right: clamp(14px, 2.5vw, 26px); bottom: clamp(14px, 2.5vw, 26px); z-index: 45; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); transition: transform .25s; }
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 30px; height: 30px; }
/* Volver arriba: encima de WhatsApp. El borde se llena de celeste según lo leído. Sin JS siempre visible. */
.to-top { position: fixed; right: calc(clamp(14px, 2.5vw, 26px) + 5px); bottom: calc(clamp(14px, 2.5vw, 26px) + 72px); z-index: 45; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(17, 17, 17, .88); backdrop-filter: blur(6px); color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); transition: opacity .3s, translate .3s, visibility .3s, background-color .3s, color .3s; }
.js .to-top:not(.is-shown) { opacity: 0; translate: 0 14px; visibility: hidden; }
.to-top > svg:not(.to-top__ring) { width: 18px; height: 18px; rotate: -90deg; transition: translate .3s; }
/* Latido: la flecha sube y el botón suelta una onda, para que se entienda que lleva arriba. */
.to-top.is-shown > svg:not(.to-top__ring) { animation: to-top-rise 1.8s ease-in-out infinite; }
.to-top.is-shown::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--blue); pointer-events: none; animation: to-top-beat 1.8s ease-out infinite; }
@keyframes to-top-rise { 0%, 40%, 100% { translate: 0 0; opacity: 1; } 20% { translate: 0 -6px; } 30% { translate: 0 -9px; opacity: 0; } 31% { translate: 0 7px; opacity: 0; } }
@keyframes to-top-beat { 0% { opacity: .9; scale: 1; } 45%, 100% { opacity: 0; scale: 1.55; } }
.to-top:hover { background: var(--blue); color: #030303; }
.to-top:hover > svg:not(.to-top__ring) { animation: none; translate: 0 -3px; }
.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; pointer-events: none; }
.to-top__ring circle { fill: none; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; }
.to-top:hover .to-top__ring { opacity: 0; }

/* ---------- Páginas interiores ---------- */
.phero { padding: clamp(8rem, 14vw, 11rem) 0 clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); text-align: center; }
.phero__kicker { margin-bottom: 1rem; font: 500 .85rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.crumbs { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.6rem; font: 500 .8rem/1.3 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.phero .crumbs { justify-content: center; }
.crumbs__back { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; transition: background-color .3s, border-color .3s, color .3s; }
.crumbs__back svg { width: 18px; height: 18px; rotate: 180deg; transition: translate .3s; }
.crumbs__back:hover { background: var(--blue); border-color: var(--blue); color: #030303; }
.crumbs__back:hover svg { translate: -3px 0; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.crumbs li { display: flex; min-width: 0; }
.crumbs li + li::before { content: '/'; margin-inline: .6rem; opacity: .5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--blue); }
.crumbs [aria-current] { color: var(--blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
@media (max-width: 760px) { .post__head .crumbs li:last-child { display: none; } }
/* padding-top: espacio para las tildes y la Ñ en mayúscula (CONTÁCTANOS, DISEÑO), que suben más que la línea */
.phero__title { padding-top: .14em; font: 400 clamp(4.5rem, 2rem + 10vw, 10rem)/.9 var(--f-caps); text-transform: uppercase; }
.lead-gray { color: var(--gray); margin: 1rem 0 2rem; }
.sec-top { margin-bottom: 2.5rem; color: #fff; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem 1.8rem; }
@media (max-width: 960px) { .grid3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid3 { grid-template-columns: 1fr; } }

/* Nosotros */
.nhero { position: relative; min-height: 70svh; display: grid; align-items: end; padding: 8rem 0 3rem; overflow: hidden; }
.nhero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }
.nhero .wrap { position: relative; }
/* Computadora y tablet: mismo alto que las portadas de Blog y Portafolio (mismo espacio arriba y abajo que .phero),
   con una foto panorámica 3:1 (nosotros-portada-ancha.webp) hecha para esta forma: se ven las 4 personas completas. */
@media (min-width: 701px) { .nhero { min-height: 0; padding: clamp(8rem, 14vw, 11rem) 0 calc(clamp(2.5rem, 5vw, 4rem) + 31px); } .nhero img { object-position: center 25%; } }
.adn { padding-block: var(--sec); text-align: center; }
.adn__title { font: 400 clamp(4rem, 2rem + 8vw, 8.5rem)/.95 var(--f-caps); text-transform: uppercase; margin-bottom: 2rem; }
.adn__text { max-width: 640px; margin-inline: auto; font-size: 1.15rem; color: var(--gray); }
.adn__text strong { color: #fff; font-weight: 500; }
.team { padding-bottom: var(--sec); }
.team__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 1rem; margin-bottom: 2rem; }
.team__grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; filter: grayscale(1); transition: filter .4s; }
.team__grid li:hover img { filter: none; }
.team__group { width: 100%; border-radius: 18px; }
.values { padding-block: var(--sec); border-top: 1px solid var(--line); }
.values .big-gray { max-width: 900px; margin-bottom: 3.5rem; }
.values__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.values__list li { padding-top: 1.6rem; border-top: 1px solid var(--line); }
.values__n { font: 500 .9rem var(--f-display); color: var(--blue); }
.values__list h3 { font-size: 1.5rem; text-transform: uppercase; margin: .8rem 0; }
.values__list p { color: var(--gray); }
@media (max-width: 860px) { .values__list { grid-template-columns: 1fr; } }
.numbers { background: var(--blue); color: var(--black); padding-block: clamp(3rem, 6vw, 5rem); }
.numbers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; }
.numbers b { display: block; margin-bottom: .6rem; font: 400 clamp(5rem, 3rem + 6vw, 8rem)/.9 var(--f-caps); }
.numbers span { font: 500 .95rem/1.4 var(--f-display); text-transform: uppercase; }
@media (max-width: 620px) { .numbers__grid { grid-template-columns: 1fr; } }
.wide-photo img { width: 100%; max-height: 70vh; object-fit: cover; }

/* Servicio */
.shero { padding: clamp(8rem, 13vw, 10rem) 0 var(--sec); }
.shero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.shero__title { font: 400 clamp(4.5rem, 2rem + 9vw, 9rem)/.9 var(--f-caps); text-transform: uppercase; margin-bottom: 1.6rem; }
.shero__text { color: var(--gray); margin-bottom: 1rem; font-size: 1.05rem; }
.shero .btn { margin-top: 1rem; }
.shero__img { width: 100%; border-radius: 22px; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 860px) { .shero__grid { grid-template-columns: 1fr; } }
.benefits { padding-bottom: var(--sec); }
.benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.benefits__grid > div { padding: 2rem; border: 1px solid var(--line); border-radius: 18px; }
.benefits h2 { font-size: 1.4rem; text-transform: uppercase; margin-bottom: .8rem; }
.benefits p { color: var(--gray); }
@media (max-width: 860px) { .benefits__grid { grid-template-columns: 1fr; } }
.works-strip { padding-bottom: var(--sec); }
.works-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.works-strip__grid li { position: relative; border-radius: 16px; overflow: hidden; }
.works-strip__grid a { display: block; color: inherit; text-decoration: none; }
.works-strip__grid a:focus-visible { outline-offset: 4px; }
.works-strip__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s; }
.works-strip__grid li:hover img { transform: scale(1.06); }
.works-strip__grid span { position: absolute; left: .8rem; right: .8rem; bottom: .8rem; width: fit-content; max-width: calc(100% - 1.6rem); padding: .4rem .8rem; border-radius: 999px; background: #fff; color: var(--black); font: 600 .8rem/1.2 var(--f-ui); }
.works-strip__grid small, .work__fotos { position: absolute; top: .8rem; right: .8rem; padding: .3rem .65rem; border-radius: 999px; background: rgba(3, 3, 3, .75); color: #fff; font: 500 .72rem/1 var(--f-ui); letter-spacing: .04em; }
.works-strip__more { margin-top: 2rem; text-align: center; }
@media (max-width: 860px) { .works-strip__grid { grid-template-columns: repeat(2, 1fr); } }
.includes { background: var(--beige); color: var(--black); padding-block: var(--sec); }
.includes .sec-top { color: var(--black); }
.inc { display: grid; grid-template-columns: 60px 1fr auto; gap: 1.5rem; align-items: center; padding-block: 1.8rem; border-top: 1px solid var(--line-dark); }
.inc:last-child { border-bottom: 1px solid var(--line-dark); }
.inc__n { font: 500 1rem var(--f-display); color: var(--blue-ink); }
.inc__title { font: 500 clamp(1.2rem, 1rem + .6vw, 1.5rem)/1.2 var(--f-display); text-transform: uppercase; margin-bottom: .5rem; }
.inc p { color: #444; max-width: 640px; }
.inc__cta { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border: 1px solid var(--black); border-radius: 999px; font: 700 .8rem/1 var(--f-ui); text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .25s, color .25s; }
.inc__cta:hover { background: var(--black); color: #fff; }
.inc__cta svg { width: 1.1em; height: 1.1em; }
@media (max-width: 700px) { .inc { grid-template-columns: 40px 1fr; } .inc__cta { grid-column: 2; justify-self: start; } }
.cta-band { padding-block: var(--sec); border-bottom: 1px solid var(--line); }
.cta-band__grid { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta-band h2 { max-width: 760px; }
.related { padding-block: var(--sec); }
.other-services { padding-bottom: var(--sec); }
.other-services ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; }
/* Entre 961 y 1200 px los 5 nombres no caben en una fila (empujaban la página hacia el costado): 3 por fila. */
@media (max-width: 1200px) { .other-services ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.other-services a { display: flex; align-items: center; gap: .7rem; height: 100%; padding: 1.1rem; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; font: 500 .95rem/1.2 var(--f-display); text-transform: uppercase; transition: background-color .25s, color .25s; }
.other-services a:hover { background: #fff; color: var(--black); }
.other-services svg { width: 22px; height: 22px; flex: none; }
.other-services svg:last-child { margin-left: auto; width: 18px; }
@media (max-width: 960px) { .other-services ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .other-services ul { grid-template-columns: 1fr; } }

/* Portafolio */
.folio { padding-block: calc(var(--sec) * .7) var(--sec); }
.folio__intro { text-align: center; color: var(--gray); margin-bottom: 3rem; }
.folio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-bottom: var(--sec); }
.work figure { margin: 0; position: relative; border-radius: 20px; overflow: hidden; }
.work img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s; }
.work:hover img { transform: scale(1.05); }
.work figcaption { position: absolute; inset: auto 0 0; padding: 5rem 1.3rem 1.2rem; background: linear-gradient(0deg, rgba(3, 3, 3, .95) 0%, rgba(3, 3, 3, .8) 45%, transparent); }
.work figcaption span { font: 500 .8rem var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.work h2 { font-size: clamp(1.2rem, .9rem + .7vw, 1.6rem); text-transform: uppercase; }
.work a { display: block; text-decoration: none; }
.work a:focus-visible { outline-offset: 6px; border-radius: 20px; }
.work figcaption p { margin-top: .4rem; color: var(--gray); font-size: .9rem; max-width: 46ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.work[hidden] { display: none; }
.folio__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 3rem; }
.folio__filters :is(button, a) { display: inline-flex; text-decoration: none; align-items: center; gap: .55rem; padding: .7rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; background: none; font: 500 .85rem/1 var(--f-ui); text-transform: uppercase; color: var(--gray); transition: background-color .25s, color .25s, border-color .25s; }
.folio__filters :is(button, a) { scroll-margin-top: 110px; }
.folio__filters :is(button, a) svg { width: 18px; height: 18px; }
.folio__filters :is(button, a) span { display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding-inline: .35rem; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .75rem; }
.folio__filters :is(button, a):hover { border-color: #fff; color: #fff; }
.folio__filters :is(button[aria-pressed="true"], a[aria-current]) { background: var(--blue); border-color: var(--blue); color: var(--black); }
.folio__filters :is(button[aria-pressed="true"], a[aria-current]) span { background: rgba(3, 3, 3, .15); }
.other-services .other-services__all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .other-services .other-services__all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .other-services .other-services__all { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .folio__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .folio__grid { grid-template-columns: 1fr; } }

/* Vista en grande de un trabajo (portafolio y páginas de servicio) */
.lb { width: min(1180px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--ink); color: #fff; overflow: hidden; }
.lb::backdrop { background: rgba(3, 3, 3, .85); backdrop-filter: blur(6px); }
.lb__box { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); max-height: calc(100dvh - 2rem); }
/* Todas las fotos ocupan el mismo cuadro (el de las fotos cuadradas, las más grandes): la ventana ya no cambia de tamaño.
   Cada foto se ve completa, sin recortes; el espacio que sobra lo llena la misma foto difuminada (--lb-bg). Elegido por José (05/11/2026). */
.lb__media { position: relative; display: grid; place-items: center; min-height: 0; aspect-ratio: 1; max-height: calc(100dvh - 2rem); overflow: hidden; background: var(--black); }
.lb__media::before { content: ""; position: absolute; inset: -40px; background: var(--lb-bg, none) center / cover; filter: blur(28px) brightness(.45) saturate(1.2); }
.lb__img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.lb__arrow { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(3, 3, 3, .7); color: #fff; cursor: pointer; transition: background-color .2s, color .2s; }
.lb__arrow:hover { background: var(--blue); color: var(--black); }
.lb__arrow svg { width: 20px; height: 20px; }
.lb__arrow--prev { left: .8rem; }
.lb__arrow--prev svg { rotate: 180deg; }
.lb__arrow--next { right: .8rem; }
.lb__count { position: absolute; left: 50%; bottom: .8rem; translate: -50% 0; padding: .3rem .7rem; border-radius: 999px; background: rgba(3, 3, 3, .7); font: 500 .75rem/1 var(--f-ui); }
.lb__info { display: flex; flex-direction: column; gap: .8rem; padding: 3.2rem 2rem 2rem; overflow-y: auto; }
.lb__kicker { font: 500 .78rem var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.lb__title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); text-transform: uppercase; line-height: 1.05; }
.lb__what { color: var(--gray); line-height: 1.6; }
.lb__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: 1rem; padding-bottom: 1.2rem; }
.lb__close { position: absolute; top: .8rem; right: .8rem; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--ink); color: #fff; cursor: pointer; }
.lb__close:hover { border-color: var(--blue); color: var(--blue); }
.lb__close svg { width: 18px; height: 18px; }
.lb .btn { padding: .85rem 1.3rem; }
.lb .btn--outline { border-color: var(--line); color: #fff; }
.lb .btn--outline:hover { border-color: #fff; background: #fff; color: var(--black); }
.lb__works { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.lb__work { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: none; color: #fff; font: 600 .78rem/1 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: border-color .2s, color .2s; }
.lb__work:hover { border-color: var(--blue); color: var(--blue); }
.lb__work svg { flex: none; width: 16px; height: 16px; }
.lb__work--prev svg { rotate: 180deg; }
.lb__pos { color: var(--gray-dim); font: 500 .78rem/1.2 var(--f-ui); text-align: center; }
.lb__media { touch-action: pan-y; }
.lb [hidden] { display: none; }
html.lb-open { overflow: hidden; }
/* Celular y tablet: la ventana tiene siempre el mismo alto y la foto un espacio fijo (entra completa, horizontal o
   cuadrada). Antes las fotos cuadradas (desde el trabajo 11) eran el doble de altas: empujaban el texto fuera de la
   pantalla y la ventana cambiaba de tamaño con cada "Siguiente", moviendo el botón bajo el dedo.
   Sin desenfoque detrás: en el celular hacía lento el paso de fotos. */
@media (max-width: 820px) {
  .lb { height: calc(100dvh - 1rem); max-height: calc(100dvh - 1rem); width: calc(100% - 1rem); }
  .lb::backdrop { background: rgba(3, 3, 3, .92); backdrop-filter: none; }
  .lb__box { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: 100%; max-height: none; }
  /* Foto grande (casi cuadrada); el texto baja un poco pero se siguen viendo el cliente (azul) y el título */
  .lb__media { aspect-ratio: auto; max-height: none; height: min(calc(100vw - 1rem), 54dvh); }
  .lb__info { padding: 1.4rem 1.2rem 0; overflow-y: auto; overscroll-behavior: contain; }
  .lb__actions { padding-bottom: .4rem; }
  /* Anterior / Siguiente siempre a la vista, pegados abajo aunque el texto sea largo */
  .lb__works { position: sticky; bottom: 0; margin-inline: -1.2rem; padding: .9rem 1.2rem 1rem; background: var(--ink); }
}

/* Blog */
.pager ul { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: 4rem; }
.pager a, .pager span { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 .6rem; border: 1px solid var(--line); border-radius: 999px; font: 500 .95rem var(--f-ui); text-decoration: none; }
.pager span[aria-current] { background: var(--blue); border-color: var(--blue); color: var(--black); }
.pager a:hover { border-color: #fff; }
.pager__gap { display: none; }

/* Menús en el celular: en vez de una lista larga, una cuadrícula de 4 por fila con la última fila centrada */
@media (max-width: 620px) {
  .folio__filters { gap: .45rem; }
  .folio__filters :is(button, a) { flex: 0 0 calc((100% - 3 * .45rem) / 4); min-width: 0; }
  .folio__filters :is(button, a) { flex-direction: column; justify-content: center; gap: .35rem; min-height: 88px; padding: .7rem .2rem; border-radius: 16px; font-size: .62rem; line-height: 1.15; letter-spacing: 0; text-align: center; }
  .folio__filters :is(button, a) svg { width: 20px; height: 20px; }
  /* Portafolio: en el celular el texto va debajo de la foto (encima la tapaba y chocaba con "N fotos") */
  .work figure { border: 1px solid var(--line); background: #0b0b0b; }
  .work figcaption { position: static; padding: 1rem 1.1rem 1.2rem; background: none; }
  .folio__filters :is(button, a) span { min-width: 1.5rem; height: 1.35rem; font-size: .66rem; }
  /* Paginación compacta: primera, actual y última */
  .pager ul { gap: .35rem; flex-wrap: nowrap; }
  .pager a, .pager span { min-width: 42px; height: 42px; padding: 0 .4rem; }
  .pager__far { display: none; }
  .pager__gap { display: grid; place-items: center; width: 22px; color: var(--gray); }
  /* Servicios del pie: dos columnas parejas */
  .ft__services ul { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .ft__services a { display: block; text-align: center; }
}

/* Artículo */
.post__head { padding-top: clamp(8rem, 13vw, 10rem); }
.post__meta { color: var(--gray); font-size: .9rem; margin-bottom: 1.2rem; }
.post__meta a { color: var(--blue); text-decoration: none; }
.post__title { font: 600 clamp(2rem, 1.3rem + 2.8vw, 3.4rem)/1.12 var(--f-display); text-transform: uppercase; margin-bottom: 2.5rem; }
.post__cover { width: 100%; max-width: 1100px; margin-inline: auto; border-radius: 22px; aspect-ratio: 16 / 9; object-fit: cover; }
.post__body { padding-block: 3rem 1rem; font-size: 1.08rem; color: #DADADA; }
.post__body > * + * { margin-top: 1.2rem; }
.post__body h2, .post__body h3, .post__body h4, .post__body h5, .post__body h6 { margin-top: 2.4rem; color: #fff; font-weight: 600; }
.post__body h2 { font-size: 1.7rem; } .post__body h3 { font-size: 1.35rem; } .post__body h4, .post__body h5, .post__body h6 { font-size: 1.15rem; }
.post__body ul, .post__body ol { padding-left: 1.4rem; display: grid; gap: .5rem; }
.post__body ul { list-style: disc; } .post__body ol { list-style: decimal; }
.post__body li::marker { color: var(--blue); }
.post__body li p { margin: 0; }
.post__body a { color: var(--blue); }
.post__body strong, .post__body b { color: #fff; }
.post__body blockquote { margin-inline: 0; padding-left: 1.4rem; border-left: 3px solid var(--blue); font-style: italic; }
.post__body figure { margin-inline: 0; }
.post__body figure img { border-radius: 14px; }
.post__body .embed { position: relative; aspect-ratio: 16 / 9; }
.post__body .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 14px; }
.post__share { padding-block: 2rem; }
.post__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-block: 2rem var(--sec); border-top: 1px solid var(--line); }
.post__nav a { display: grid; gap: .4rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; font: 500 1rem/1.35 var(--f-display); transition: border-color .25s; }
.post__nav a:last-child { text-align: right; }
.post__nav a:hover { border-color: #fff; }
.post__nav span { font: 500 .8rem var(--f-ui); color: var(--gray); text-transform: uppercase; }
@media (max-width: 620px) { .post__nav { grid-template-columns: 1fr; } .post__nav a:last-child { text-align: left; } }

/* Contacto */
.contact { padding-block: var(--sec) calc(var(--sec) * .5); }
.contact__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact__title { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); text-transform: uppercase; margin-bottom: 1.2rem; }
.contact__grid p { color: var(--gray); margin-bottom: 2rem; }
.contact__info { display: grid; gap: 1.6rem; }
.contact__info li { display: flex; gap: 1rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.contact__info svg { width: 44px; height: 44px; flex: none; padding: 10px; border: 1px solid var(--line); border-radius: 50%; color: var(--blue); }
.contact__info h3 { font-size: 1rem; text-transform: uppercase; margin-bottom: .3rem; }
.contact__info p { margin: 0; }
.contact__info a { color: #fff; text-decoration: none; }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }

/* ---------- Servicio: piezas 3D, "Lo que hacemos" en dos columnas, franja de palabras y "Cómo trabajamos" ---------- */
.btn--dark { background: var(--black); color: #fff; }
.btn--dark:hover { background: #fff; color: var(--black); }
.includes__grid { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.includes__aside { position: sticky; top: 110px; }
.includes__kicker { font: 500 .85rem/1.6 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); }
.includes__title { margin: 1rem 0 1.4rem; font: 400 clamp(4.5rem, 2rem + 6vw, 8rem)/.9 var(--f-caps); text-transform: uppercase; }
.includes__aside > p:last-child { color: #444; max-width: 320px; }
.inc { position: relative; isolation: isolate; padding-inline: 1rem; }
.inc::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--blue); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.inc:hover::after, .inc:focus-within::after { transform: scaleY(1); }
.inc:hover .inc__n, .inc:focus-within .inc__n { color: var(--black); }
@media (max-width: 900px) { .includes__grid { grid-template-columns: 1fr; } .includes__aside { position: static; } }
/* Cintas cruzadas de los servicios: el fondo une la sección beige de arriba con la negra de abajo. */
.ribbons { display: grid; place-items: center; height: clamp(12rem, 8rem + 14vw, 22rem); overflow: hidden; background: linear-gradient(var(--beige) 50%, var(--black) 50%); }
.ribbon { grid-area: 1 / 1; width: 130vw; padding-block: clamp(.8rem, .5rem + .7vw, 1.2rem); }
.ribbon .band__track span { padding-right: 0; font: 600 clamp(1.4rem, .8rem + 2.6vw, 3.2rem)/1.1 var(--f-display); letter-spacing: .02em; }
.ribbon i { font-style: normal; font-size: .6em; vertical-align: .15em; padding-inline: .8em; }
.ribbon--a { z-index: 1; transform: rotate(-4deg); box-shadow: 0 20px 40px rgba(0, 0, 0, .3); }
.ribbon--a i { color: #fff; }
.ribbon--b { margin-bottom: max(0px, 5rem - 2.8vw); transform: rotate(3deg); background: var(--black); border-block: 1px solid var(--line); }
.ribbon--b .band__track span { color: #fff; }
.ribbon--b i { color: var(--blue); }
.process { padding-block: var(--sec); overflow: clip; }
.process__title { margin: 1rem 0 2.5rem; font: 400 clamp(4.5rem, 2rem + 8vw, 9rem)/.9 var(--f-caps); text-transform: uppercase; }
.process__track { display: flex; gap: 1.6rem; padding-inline: max(var(--pad), (100vw - 1320px) / 2 + var(--pad)); }
.step { flex: none; display: grid; align-content: end; gap: 1rem; width: min(78vw, 440px); min-height: clamp(320px, 48vh, 460px); padding: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid var(--line); border-radius: 24px; background: var(--ink); }
.step__n { align-self: start; margin-bottom: auto; font: 400 clamp(6rem, 4rem + 5vw, 9rem)/.8 var(--f-caps); color: var(--blue); }
.step h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); text-transform: uppercase; }
.step p { color: var(--gray); }
.step--cta { align-content: center; justify-items: start; background: var(--blue); color: var(--black); border-color: var(--blue); }
.process__bar { height: 2px; margin-top: 2.5rem; background: var(--line); }
.process__bar span { display: block; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; }
/* Sin pin (celular o sin JS): los pasos se apilan */
.process:not(.is-pinned) .process__track { flex-direction: column; padding-inline: var(--pad); }
.process:not(.is-pinned) .step { width: 100%; min-height: 0; }
.process:not(.is-pinned) .step__n { margin-bottom: 1rem; font-size: 5rem; }
.process:not(.is-pinned) .process__bar { display: none; }

/* ---------- Movimiento ligado al scroll (lo activa main.js; sin JS todo queda visible) ---------- */
.js [data-split-load]:not(.is-split) { visibility: hidden; }
.no-motion [data-split-load] { visibility: visible; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .12em; margin-block: -.12em; }
.w > span { display: inline-block; }
/* Las líneas de las filas se dibujan con --draw (0 a 1) */
.srow, .inc, .values__list li { border-top: 0; background: linear-gradient(var(--row-line), var(--row-line)) 0 0 / calc(var(--draw, 1) * 100%) 1px no-repeat; }
.srow, .inc { --row-line: var(--line-dark); }
.values__list li { --row-line: var(--line); }
.band.is-driven .band__track { animation: none; }
.wide-photo { overflow: hidden; }
.progress { position: fixed; inset: 0 0 auto; z-index: 60; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
  .band__track, .marquee__track { width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee__group[aria-hidden="true"], .band__track span + span { display: none; }
  .js [data-fill] .ch { color: inherit; }
}


/* ---------- Blue, el robot de Mundo Blue (solo inicio) ----------
   Tiras de cuadros de 384 px: la imagen mide N cuadros de ancho y se corre de a un cuadro (100/N %). */
.buddy__frame { position: relative; display: block; aspect-ratio: 1; overflow: hidden; }
.buddy__strip { position: absolute; top: 0; left: 0; width: auto; max-width: none; height: 100%; }
.buddy__strip--wave { animation: buddy-wave 1.3s step-end infinite; }
.buddy__strip--idle { visibility: hidden; animation: buddy-idle 2.6s step-end infinite; }
.is-idle .buddy__strip--wave { visibility: hidden; animation: none; }
.is-idle .buddy__strip--idle { visibility: visible; }
/* Saludo (5 cuadros): sube el brazo, lo mueve de lado a lado dos veces y lo baja */
@keyframes buddy-wave { 0% { transform: none; } 12% { transform: translateX(-20%); } 26% { transform: translateX(-40%); } 40% { transform: translateX(-60%); } 54% { transform: translateX(-40%); } 68% { transform: translateX(-60%); } 82%, 100% { transform: translateX(-80%); } }
/* Reposo (4 cuadros): se balancea con calma y parpadea una vez */
@keyframes buddy-idle { 0% { transform: none; } 35% { transform: translateX(-25%); } 70% { transform: translateX(-75%); } 88% { transform: translateX(-50%); } 94%, 100% { transform: translateX(-75%); } }

/* 1) Saludo: abajo a la izquierda, pequeño, unos segundos */
.buddy { position: fixed; left: clamp(8px, 2vw, 22px); bottom: clamp(6px, 1.6vw, 16px); z-index: 44; width: clamp(104px, 9vw, 128px); pointer-events: none; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .4)); animation: buddy-in .8s cubic-bezier(.3, 1.5, .5, 1) both; }
.buddy[hidden] { display: none; }
.buddy__say { position: absolute; left: 78%; bottom: 74%; width: max-content; max-width: 210px; padding: .7rem .9rem; border: 1px solid rgba(78, 181, 239, .45); border-radius: 16px 16px 16px 4px; background: rgba(12, 12, 13, .94); color: #d6d8dc; font-size: .86rem; line-height: 1.4; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); animation: buddy-pop .4s cubic-bezier(.3, 1.4, .5, 1) .5s both; }
.buddy__say strong { display: block; color: var(--blue); font: 600 .98rem/1.2 var(--f-display); }
/* 2) Se va volando por abajo */
.buddy.is-leaving { animation: buddy-out .75s cubic-bezier(.5, 0, .9, .5) forwards; }
.buddy.is-leaving .buddy__say { display: none; }
/* En vuelo: cuadro quieto, inclinado, con un brillo celeste debajo (propulsor) */
.buddy.is-leaving .buddy__strip { animation: none; }
.buddy.is-leaving .buddy__frame::after, @keyframes buddy-in { from { opacity: 0; transform: translateY(110%) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes buddy-out { 20% { transform: translateY(-12px) rotate(-6deg); } to { opacity: 0; transform: translateY(160%) rotate(14deg); } }
@keyframes buddy-pop { from { opacity: 0; transform: translateY(8px) scale(.85); transform-origin: 0 100%; } to { opacity: 1; transform: none; } }
@keyframes buddy-jet { to { transform: scaleY(1.35); opacity: .7; } }

/* 3) Aterriza en «¿Prefieres explorar?» e invita al recorrido. Queda dentro de la página: no tapa nada.
   Sin JS se ve quieto ahí mismo; con JS espera escondido (data-wait) hasta aterrizar. */
.services__world:has(.world-blue) { position: relative; flex-wrap: nowrap; justify-content: flex-start; margin-top: clamp(6.5rem, 10vw, 8rem); }
.services__world:has(.world-blue) > .btn { margin-left: auto; flex: none; }
/* Blue queda completo dentro del cuadro blanco */
.world-blue { position: relative; flex: none; align-self: center; width: clamp(84px, 7.5vw, 104px); margin: -.6rem 0; }
.world-blue[data-wait]:not(.is-flying) .buddy__frame { visibility: hidden; }
/* En vuelo: vuela su propio lugar (el cuadro va encima de todo), quieto, inclinado y con el propulsor */
.world-blue.is-flying .buddy__frame { z-index: 46; overflow: visible; }
.world-blue.is-flying .buddy__strip--wave { visibility: hidden; animation: none; }
.world-blue.is-flying .buddy__strip--idle { visibility: visible; animation: none; clip-path: inset(0 75% 0 0); }
.world-blue.is-flying .buddy__frame::after { content: ""; position: absolute; left: 34%; right: 34%; top: 86%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(140, 220, 255, .95), rgba(78, 181, 239, .55) 45%, transparent); filter: blur(2px); animation: buddy-jet .12s linear infinite alternate; }
.world-blue.is-here .buddy__frame { animation: buddy-land .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes buddy-land { from { transform: translateY(-10px) scale(.92, 1.08); } 60% { transform: scale(1.06, .94); } }
.services__world .world-blue__say { position: absolute; left: 62%; bottom: 88%; z-index: 1; width: max-content; max-width: min(330px, 62vw); padding: .8rem 1rem; border-radius: 16px 16px 16px 4px; background: var(--black); color: #d6d8dc; font-size: .9rem; line-height: 1.45; box-shadow: 0 14px 34px rgba(3, 3, 3, .22); }
.world-blue__say strong { color: var(--blue); font: 600 1rem/1.2 var(--f-display); margin-right: .25rem; }
.world-blue[data-wait] .world-blue__say { visibility: hidden; opacity: 0; transform: translateY(8px) scale(.9); transform-origin: 0 100%; }
.world-blue .world-blue__say { transition: opacity .35s .35s, transform .45s cubic-bezier(.3, 1.4, .5, 1) .35s, visibility 0s .35s; }
@media (max-width: 700px) {
  .services__world:has(.world-blue) { flex-wrap: wrap; }
  .services__world:has(.world-blue) > .btn { margin-left: 0; }
  .world-blue__say { max-width: calc(100vw - 150px); font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .buddy, .buddy__say, .buddy.is-leaving, .world-blue.is-here .buddy__frame { animation: none; }
  .buddy__strip--wave, .buddy__strip--idle, .buddy__frame::after { animation: none !important; }
}
.buddy.is-leaving .buddy__strip--wave { visibility: hidden; }
.buddy.is-leaving .buddy__strip--idle { visibility: visible; }

/* ---------- Pie: enlaces legales (el Libro de reclamaciones debe estar a la vista) ---------- */
.ft__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; padding: 1.2rem var(--pad) 0; border-top: 1px solid var(--line); font-size: .88rem; }
.ft__legal a { color: var(--gray); text-decoration: none; }
.ft__legal a:hover { color: #fff; }
/* Sello grande arriba a la derecha, en la fila de contacto (columna propia en pantallas anchas) */
.ft__grid { grid-template-columns: auto repeat(3, 1fr) auto; }
.ft__libro { justify-self: end; display: block; }
.ft__libro img { display: block; width: 200px; height: auto; transition: transform .25s ease; }
.ft__libro:hover img { transform: scale(1.04); }
@media (max-width: 1200px) { .ft__grid { grid-template-columns: auto repeat(3, 1fr); } .ft__libro { grid-column: 1 / -1; } }
@media (max-width: 900px) { .ft__grid { grid-template-columns: 1fr 1fr; } .ft__libro { grid-column: auto; justify-self: start; } }
@media (max-width: 560px) { .ft__grid { grid-template-columns: 1fr; } .ft__libro img { width: 210px; } }
@media (prefers-reduced-motion: reduce) { .ft__libro img { transition: none; } .ft__libro:hover img { transform: none; } }
.ft__legal + .ft__copy { border-top: 0; }

/* ---------- Páginas legales y Libro de reclamaciones ---------- */
.legal { padding-bottom: 5rem; }
.legal h4 { font-size: 1.1rem; }
.lr { padding-block: 3rem 6rem; }
.lr__lead { font-size: 1.15rem; color: #DADADA; }
.lr__empresa { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.6rem 0; padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: 16px; }
.lr__empresa dt { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }
.lr__empresa dd { margin: .2rem 0 0; color: #fff; font-weight: 600; }
.lr__pasos { display: grid; gap: .5rem; padding-left: 1.2rem; color: #cfcfcf; }
.lr__form { display: grid; gap: 1.6rem; margin-top: 2.4rem; padding: clamp(1.4rem, 4vw, 2.6rem); border-radius: 22px; background: var(--card); color: var(--black); }
.lr__form fieldset { display: grid; gap: 1rem; margin: 0; padding: 0 0 1.6rem; border: 0; border-bottom: 1px solid #d9d6cf; }
.lr__form legend { margin-bottom: .6rem; font: 600 1.1rem/1.3 var(--f-display); }
.lr__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 1.4rem; }
.lr__f { display: grid; gap: .35rem; }
.lr__f label, .lr__l { font-size: .9rem; color: #444; }
.lr__f span[aria-hidden] { color: #B42318; }
.lr__f input, .lr__f select, .lr__f textarea { width: 100%; padding: .7rem .8rem; border: 1px solid #c9c5bd; border-radius: 10px; background: #fff; font: 400 1rem var(--f-body); color: var(--black); }
.lr__f input:focus, .lr__f select:focus, .lr__f textarea:focus { outline: 2px solid var(--blue-ink, #1d6fa5); outline-offset: 1px; border-color: transparent; }
.lr__ops { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.lr__op { display: inline-flex; align-items: center; gap: .45rem; font-size: 1rem; color: var(--black); }
.lr__op input { width: 18px; height: 18px; accent-color: var(--black); }
.lr__nota { font-size: .88rem; color: #555; }
.lr__nota a, .lr__acepto a { color: inherit; }
/* Datos del apoderado: solo si marca que es menor de edad */
.lr__apoderado { display: none; padding: 1rem; border-radius: 12px; background: #fff; }
.lr__apoderado .lr__nota { grid-column: 1 / -1; }
.lr__form:has(input[name="menor"][value="Sí"]:checked) .lr__apoderado { display: grid; }
.lr__acepto { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: #333; }
.lr__acepto input { flex: none; width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--black); }
.lr__enviar { justify-self: start; background: var(--black) !important; color: #fff !important; }
.lr__hp { position: absolute; left: -9999px; }