/* =========================================================
   CHULLAPSD — products.css (subpágina Digital Products)
   Usa los tokens, nav, cursor, botones y footer de style.css.
   Referencia de estilo: negro + glow rojo, palabra gigante, servicios numerados.
   ========================================================= */

body[data-page="products"] { background: var(--black); }
.nav__links a.is-current { opacity: 1; }
.nav__links a.is-current::after { display: block; content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); translate: -50% 0; }
.btn--light { background: var(--white); color: var(--black); }
.btn--light:hover { background: var(--accent); color: var(--white); }

/* rejilla LED compartida (desenfoque analógico/digital de la landing) */
.dp-led {
  -webkit-mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, #000 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, #000 1px 4px);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* ---------- 01 · HERO ---------- */
.dp-hero {
  position: relative; min-height: 100svh; padding: 0; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; background: var(--black);
}
.dp-hero__photo { position: absolute; inset: 0; z-index: -2; display: flex; justify-content: center; }
.dp-hero__photo img {
  height: 112%; width: auto; max-width: none; object-fit: cover; margin-top: -2%;
  filter: grayscale(1) contrast(1.15) brightness(.9);
  -webkit-mask-image: radial-gradient(60% 70% at 50% 42%, #000 45%, transparent 85%);
          mask-image: radial-gradient(60% 70% at 50% 42%, #000 45%, transparent 85%);
}
/* glow rojo-naranja que sube desde abajo y tiñe la foto */
.dp-hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% 108%, rgba(255, 90, 20, .95), rgba(var(--accent-rgb), .75) 38%, rgba(var(--accent-rgb), 0) 72%),
    radial-gradient(40% 40% at 50% 40%, rgba(var(--accent-rgb), .25), transparent 70%);
  mix-blend-mode: screen;
}
.dp-hero::after { /* oscurece el borde superior para el header */
  content: ""; position: absolute; inset: 0 0 auto; height: 30%; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,10,.85), transparent); pointer-events: none;
}
.dp-hero__inner {
  position: relative; flex: 1; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr;
  gap: 24px; padding: clamp(110px, 12vw, 150px) var(--gutter) 0;
}
.dp-hero__top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.dp-hero__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.dp-hero__copy { align-self: start; max-width: 560px; margin-top: clamp(12px, 3vw, 48px); }
.dp-hero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 5.4vw, 92px); line-height: .95; letter-spacing: -.045em; }
.dp-line { display: block; overflow: hidden; padding-bottom: .06em; }
.dp-line > span { display: inline-block; will-change: transform; }
.dp-hero__title .serif { font-size: 1.15em; }
.dp-hero__lead { margin-top: 22px; max-width: 40ch; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.5; opacity: .72; }
.dp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.dp-hero__stats { align-self: start; margin-top: clamp(12px, 3vw, 48px); display: grid; gap: 26px; list-style: none; text-align: right; }
.dp-hero__stats b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 4.2vw, 72px); letter-spacing: -.05em; line-height: .9; }
.dp-hero__stats span { display: block; max-width: 22ch; margin-left: auto; margin-top: 8px; font-size: 13px; line-height: 1.4; opacity: .6; }
/* palabra gigante al pie, con el desenfoque analógico/digital */
.dp-hero__word {
  position: relative; z-index: 1; margin: 0 0 -.16em; text-align: center; white-space: nowrap; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; font-size: min(23vw, 46vh); line-height: .8; letter-spacing: -.07em; color: var(--white);
  filter: blur(var(--wb, 0px)); text-shadow: 0 0 40px rgba(255,255,255,var(--wg, .15));
  -webkit-mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,.72) 0 1px, #000 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,.72) 0 1px, #000 1px 4px);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* ---------- 02 · MANIFIESTO ---------- */
.dp-manifesto { display: grid; grid-template-columns: 1fr 3fr; gap: 40px; padding-top: clamp(110px, 12vw, 180px); }
.dp-manifesto__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.dp-manifesto__q p, .dp-card--quote p {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.3vw, 54px); line-height: 1.12; letter-spacing: -.035em;
}
/* palabras que pasan de gris a blanco al hacer scroll (JS) */

.dp-sign { display: flex; align-items: center; gap: 14px; margin-top: 40px; }
.dp-sign img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--accent); }
.dp-sign b { display: block; font-family: var(--font-display); font-size: 16px; }
.dp-sign small { display: block; font-size: 13px; opacity: .55; margin-top: 2px; }

/* ---------- 03 · SERVICIOS ---------- */
.dp-services__head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(40px, 5vw, 80px); }
.dp-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 5vw, 88px); line-height: .95; letter-spacing: -.045em; text-transform: uppercase; }
.dp-h2 .serif { text-transform: none; }
.dp-services__intro { max-width: 40ch; justify-self: end; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.5; opacity: .65; }
.dp-acc { border-top: 1px solid rgba(255,255,255,.12); }
.dp-acc__item { border-bottom: 1px solid rgba(255,255,255,.12); }
.dp-acc__head {
  width: 100%; display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 20px;
  padding: clamp(22px, 2.6vw, 38px) 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer;
}
.dp-acc__n { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; opacity: .5; transition: color .4s var(--ease), opacity .4s; }
.dp-acc__t {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.6vw, 80px); line-height: .95; letter-spacing: -.045em; text-transform: uppercase;
  transition: transform .6s var(--ease), color .4s var(--ease), filter .5s var(--ease);
}
.dp-acc__ic { position: relative; width: clamp(40px, 3.6vw, 56px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); transition: background .4s var(--ease), border-color .4s, transform .6s var(--ease); }
.dp-acc__ic::before, .dp-acc__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 36%; height: 2px; background: currentColor; translate: -50% -50%; transition: rotate .5s var(--ease), opacity .4s; }
.dp-acc__ic::after { rotate: 90deg; }
.dp-acc__item.is-open .dp-acc__ic { background: var(--white); color: var(--black); border-color: var(--white); }
.dp-acc__item.is-open .dp-acc__ic::after { rotate: 0deg; opacity: 0; }
.dp-acc__item.is-open .dp-acc__n { color: var(--accent); opacity: 1; }
@media (hover: hover) {
  .dp-acc__head:hover .dp-acc__t { transform: translateX(14px); color: var(--accent); }
  .dp-acc__head:hover .dp-acc__ic { border-color: var(--accent); }
}
.dp-acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.dp-acc__item.is-open .dp-acc__body { grid-template-rows: 1fr; }
.dp-acc__inner { overflow: hidden; display: grid; grid-template-columns: 90px 1.2fr 1fr auto; gap: 20px 32px; align-items: start; }
.dp-acc__inner > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .7s var(--ease); }
.dp-acc__item.is-open .dp-acc__inner > * { opacity: 1; transform: none; transition-delay: .12s; }
.dp-acc__desc { grid-column: 2; padding-bottom: clamp(26px, 3vw, 44px); font-size: clamp(15px, 1.15vw, 19px); line-height: 1.5; opacity: .75; }
.dp-tags { grid-column: 3; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding-bottom: 26px; }
.dp-tags li { padding: .5em 1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); font-size: 13px; }
.dp-acc__cta { grid-column: 4; }

/* ---------- 04 · BENTO ---------- */
.dp-bento .label { display: block; margin-bottom: 28px; }
.dp-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(220px, 22vw, 340px); gap: clamp(12px, 1.2vw, 18px); }
.dp-card { position: relative; margin: 0; border-radius: 26px; overflow: hidden; background: #111; isolation: isolate; }
.dp-card__k, .dp-card__y { position: absolute; top: 22px; z-index: 3; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.dp-card__k { left: 24px; } .dp-card__y { right: 24px; }
.dp-card--brand { grid-column: span 8; grid-row: span 2;
  background: radial-gradient(90% 70% at 50% 120%, rgba(255,90,20,.95), rgba(var(--accent-rgb), .8) 40%, #0c0c0c 75%); }
.dp-card__ghost {
  position: absolute; left: 50%; top: 42%; translate: -50% -50%; margin: 0; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; font-size: 19vw; letter-spacing: -.06em; line-height: 1; color: rgba(255,255,255,.06);
}
.dp-card__logo { position: absolute; left: 50%; top: 50%; width: min(42%, 380px); height: auto; translate: -50% -50%; filter: drop-shadow(0 20px 50px rgba(0,0,0,.45)); transition: transform 1s var(--ease); }
.dp-card--brand:hover .dp-card__logo { transform: scale(1.05) rotate(-2deg); }
.dp-card--web { grid-column: span 4; background: linear-gradient(160deg, #1b1b1b, #0b0b0b); }
.dp-browser { position: absolute; left: 22px; right: 22px; bottom: 22px; top: 58px; border-radius: 14px; overflow: hidden; background: #0a0a0a; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -20px rgba(0,0,0,.8); }
.dp-browser__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #151515; }
.dp-browser__bar i { width: 8px; height: 8px; border-radius: 50%; background: #2c2c2c; }
.dp-browser__bar span { margin-left: auto; font-family: var(--font-mono); font-size: 9px; opacity: .45; }
.dp-browser__view { position: relative; height: calc(100% - 26px); }
.dp-browser__view img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.dp-browser__view b { position: absolute; left: 0; right: 0; bottom: -4px; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 3.6vw, 56px); letter-spacing: -.06em; line-height: 1; }
.dp-card--web:hover .dp-browser__view img { transform: scale(1.06); }
.dp-card--social { grid-column: span 4; background: linear-gradient(160deg, #1b1b1b, #0b0b0b); }
.dp-phone { position: absolute; left: 50%; top: 56px; translate: -50% 0; width: min(62%, 200px); aspect-ratio: 9 / 17; border-radius: 26px; padding: 10px; background: #050505; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px -20px rgba(0,0,0,.9); transition: transform .9s var(--ease); }
.dp-card--social:hover .dp-phone { transform: translateY(-12px); }
.dp-phone__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 18px; border-radius: 4px; overflow: hidden; }
.dp-phone__grid i { aspect-ratio: 1; background: #1a1a1a center / cover; display: grid; place-items: center; }
.dp-phone__grid i.is-red { background: var(--accent); }
.dp-phone__grid i.is-type { background: var(--white); color: var(--black); }
.dp-phone__grid b { font-family: var(--font-display); font-weight: 900; font-size: 10px; letter-spacing: .02em; }
.dp-card--quote { grid-column: span 12; grid-row: span 1; display: grid; align-items: center; padding: clamp(28px, 4vw, 64px); background: #0f0f0f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* ---------- 05 · PROCESO ---------- */

/* ---------- 06 · CTA ---------- */
.dp-cta { position: relative; overflow: hidden; text-align: center; padding-top: clamp(120px, 14vw, 220px); padding-bottom: clamp(120px, 14vw, 220px); isolation: isolate; }
.dp-cta__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 50% 115%, rgba(255,90,20,.85), rgba(var(--accent-rgb), .55) 40%, transparent 72%); }
.dp-cta .label { display: block; }
.dp-cta__title { margin-top: 18px; font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 8vw, 150px); line-height: .9; letter-spacing: -.055em; }
.dp-cta__lead { margin: 22px auto 0; max-width: 40ch; font-size: clamp(15px, 1.15vw, 19px); opacity: .75; }
.dp-cta .dp-hero__actions { justify-content: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .dp-hero__inner { grid-template-columns: 1fr; }
  .dp-hero__stats { display: none; }
  .dp-manifesto { grid-template-columns: 1fr; gap: 20px; }
  .dp-services__head { grid-template-columns: 1fr; }
  .dp-services__intro { justify-self: start; }
  .dp-acc__inner { grid-template-columns: 1fr; gap: 18px; }
  .dp-acc__desc, .dp-tags, .dp-acc__cta { grid-column: 1; padding-bottom: 0; }
  .dp-acc__cta { justify-self: start; margin-bottom: 30px; }
  .dp-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 260px; }
  .dp-card--brand { grid-column: span 2; grid-row: span 1; }
  .dp-card--web, .dp-card--social { grid-column: span 1; }
  .dp-card--quote { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 700px) {
  .dp-hero__photo img { height: 78%; margin-top: 62%; }
  .dp-hero::after { height: 62%; background: linear-gradient(180deg, rgba(10,10,10,.92) 40%, transparent); } /* el texto se lee sobre la foto */
  .dp-hero__meta { display: none; }
  .dp-hero__word { font-size: 25vw; }
  .dp-acc__head { grid-template-columns: 44px 1fr auto; gap: 12px; }
  .dp-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .dp-card--brand, .dp-card--web, .dp-card--social, .dp-card--quote { grid-column: span 1; }
  .dp-card__ghost { font-size: 34vw; }
}

/* =========================================================
   TEMA Digital Products: blanco y negro minimalista + verde futurista #77FF00
   (sustituye el rojo de la landing solo en esta página)
   ========================================================= */
body[data-page="products"] { --accent: #77FF00; --accent-rgb: 119, 255, 0; }
body[data-page="products"] .btn--red { color: var(--black); box-shadow: 0 10px 30px -12px rgba(var(--accent-rgb), .55); }
body[data-page="products"] .btn--red:hover { background: var(--white); color: var(--black); }
body[data-page="products"] .nav__burger i { background: var(--black); }
body[data-page="products"] .to-top { color: var(--black); }
body[data-page="products"] .nav__logo:hover { color: var(--black); }

/* hero: B/N puro con un glow verde sutil (minimal) */
body[data-page="products"] .dp-hero__photo img { filter: grayscale(1) contrast(1.2) brightness(.95); }
body[data-page="products"] .dp-hero__glow {
  background:
    radial-gradient(60% 34% at 50% 104%, rgba(var(--accent-rgb), .55), rgba(var(--accent-rgb), 0) 70%),
    linear-gradient(0deg, rgba(var(--accent-rgb), .08), transparent 40%);
  mix-blend-mode: screen;
}
body[data-page="products"] .dp-hero__title .serif { color: var(--accent); }
body[data-page="products"] .dp-hero__stats b::after { content: ""; display: inline-block; width: .16em; height: .16em; margin-left: .06em; border-radius: 50%; background: var(--accent); vertical-align: top; box-shadow: 0 0 14px rgba(var(--accent-rgb), .9); }
.dp-hero__top .label::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .9); vertical-align: middle; animation: dpBlink 1.6s steps(1) infinite; }
@keyframes dpBlink { 50% { opacity: .2; } }

/* secciones claras: texto negro; el verde va en rellenos, puntos y subrayados (no como texto sobre blanco) */
[data-fill] .fw { color: inherit; opacity: .2; transition: opacity .3s; }
[data-fill] .fw.is-on { opacity: 1; }
.dp-manifesto .dp-sign img { box-shadow: 0 0 0 2px var(--black), 0 0 0 4px var(--accent); }
.dp-manifesto, .dp-bento, .dp-process { color: var(--black); }
.dp-process .serif, .dp-bento .serif { color: var(--black); background: linear-gradient(transparent 62%, var(--accent) 62% 88%, transparent 88%); padding: 0 .08em; }

/* servicios (negro): número y estado en verde */
.dp-acc__item.is-open .dp-acc__ic { background: var(--accent); border-color: var(--accent); color: var(--black); }
.dp-tags li { transition: background .3s, color .3s, border-color .3s; }
.dp-tags li:hover { background: var(--accent); border-color: var(--accent); color: var(--black); }

/* bento: tarjetas negras sobre blanco con acentos verdes */
.dp-card--brand { background: radial-gradient(80% 60% at 50% 125%, rgba(var(--accent-rgb), .7), rgba(var(--accent-rgb), .12) 45%, #0b0b0b 72%); color: var(--white); }
.dp-card--web, .dp-card--social { color: var(--white); }
.dp-card--quote { background: var(--black); color: var(--white); box-shadow: none; }
.dp-card--quote p::first-letter { color: var(--accent); }
.dp-phone__grid i.is-red { background: var(--accent); color: var(--black); }
.dp-card { transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.dp-card:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .6), 0 40px 80px -30px rgba(0,0,0,.45); }

/* CTA: glow verde */
.dp-cta__glow { background: radial-gradient(55% 55% at 50% 118%, rgba(var(--accent-rgb), .6), rgba(var(--accent-rgb), .12) 45%, transparent 72%); }


/* =========================================================
   PORTADA v2 (composición: nombre gigante detrás + retrato recortado delante)
   ========================================================= */
.dp-hero { min-height: 100svh; display: block; }
.dp-hero__inner, .dp-hero__word, .dp-hero::after { display: none; }
.dp-hero__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body[data-page="products"] .dp-hero__glow {
  background:
    radial-gradient(55% 45% at 50% 62%, rgba(var(--accent-rgb), .16), transparent 70%),
    radial-gradient(70% 30% at 50% 110%, rgba(var(--accent-rgb), .35), transparent 70%);
  mix-blend-mode: normal;
}
/* CALEB: tipografía de firma, verde, desenfoque analógico leve + rejilla LED + glow, a la altura de la cabeza */
.dp-hero__name {
  --pad: 90px; --fade: 40px;
  position: absolute; left: 50%; top: 24%; z-index: 0; margin: 0; padding: var(--pad);
  translate: -50% -50%; will-change: transform, opacity; /* GSAP mueve y/opacity sin repintar */ white-space: nowrap; pointer-events: none;
  font-family: var(--font-script); font-weight: 400; font-size: 40vw; line-height: 1; letter-spacing: 0; /* más ancha que la pantalla: se corta un poco */
  color: var(--accent); filter: blur(9px);
  text-shadow: 0 0 30px rgba(var(--accent-rgb), var(--wg, .6)), 0 0 90px rgba(var(--accent-rgb), calc(var(--wg, .6) * .5));
  -webkit-mask-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 1px, #000 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.5) 0 1px, #000 1px 4px),
    linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
    linear-gradient(0deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
    linear-gradient(90deg, #000 calc(var(--rev, 112) * 1% - 7%), transparent calc(var(--rev, 112) * 1% + 1%)); /* pintado con spray (intro) */
  -webkit-mask-composite: source-in, source-in, source-in, source-in; mask-composite: intersect;
}
/* nube de spray que va delante del trazo mientras se pinta */
.dp-hero__name::after {
  content: ""; position: absolute; top: 18%; bottom: 14%; left: calc(var(--rev, 112) * 1% - 9%); width: 16%;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .9), rgba(var(--accent-rgb), .35) 45%, transparent 75%);
  filter: blur(18px); opacity: var(--spray, 0); pointer-events: none;
}
/* halo verde detrás del retrato (capa propia, sin recortes): integra la foto con la escena */
.dp-hero__halo { position: absolute; left: 50%; top: 52%; z-index: 0; width: min(90vw, 1300px); aspect-ratio: 1.2; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .07) 55%, transparent); }
/* retrato fijo: grande, centrado, cabeza en la parte alta y cuerpo que se funde con el fondo */
.dp-hero__photo { position: absolute; left: 0; right: 0; top: 8svh; bottom: 0; will-change: transform; z-index: 1; display: flex; justify-content: center; align-items: flex-start; pointer-events: none; overflow: hidden; }
.dp-hero__photo img, body[data-page="products"] .dp-hero__photo img {
  height: 134svh; width: auto; max-width: none; margin: 0; object-fit: contain; filter: blur(.5px) contrast(1.05);
  -webkit-mask-image: linear-gradient(180deg, #000 52%, rgba(0,0,0,.6) 64%, rgba(0,0,0,.2) 74%, transparent 82%);
          mask-image: linear-gradient(180deg, #000 52%, rgba(0,0,0,.6) 64%, rgba(0,0,0,.2) 74%, transparent 82%);
}
.dp-hero { overflow: hidden; }
/* textos mínimos (como la referencia) */
.dp-hero__tag { position: absolute; left: var(--gutter); top: clamp(110px, 16vh, 160px); z-index: 2; display: grid; gap: 6px; font-family: var(--font-display); font-size: clamp(16px, 1.3vw, 22px); line-height: 1.2; }
.dp-hero__tag span:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .9); vertical-align: middle; animation: dpBlink 1.6s steps(1) infinite; }
.dp-hero__tag span:last-child { opacity: .55; }
@media (max-width: 700px) {
  .dp-hero__name { font-size: 34vw; top: 15%; --pad: 50px; --fade: 20px; filter: blur(4px); }
  .dp-hero__photo { inset: 22svh 0 0 0; }
  .dp-hero__photo img, body[data-page="products"] .dp-hero__photo img { height: 92svh; width: auto; }
  .dp-hero__tag { top: 96px; }
  }


/* =========================================================
   LLUVIA DE CAJAS (portada): cajas verdes redondeadas que caen flotando, unas detrás del retrato y otras delante.
   Look analógico de "Sobre mí": color pleno + desenfoque + glow, y la rejilla LED fija en la capa (como una pantalla:
   los píxeles no se mueven, las cajas pasan por debajo). Las cajas las crea el JS; solo se anima transform.
   ========================================================= */
.dp-hero { overflow: hidden; z-index: auto; }
.dp-rain { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,.45) 0 1px, #000 1px 5px), repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 1px, #000 1px 5px);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.dp-rain--back { z-index: 1; -webkit-mask-image: none; mask-image: none; }
.dp-rain--back::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* mismas líneas oscuras que la máscara LED; sobre el fondo negro no se ven */
  background: repeating-linear-gradient(0deg, rgba(10,10,10,.5) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, rgba(10,10,10,.5) 0 1px, transparent 1px 5px); }
.dp-hero__photo { z-index: 2; }
.dp-rain--front { z-index: 3; }
/* tira con 3 copias de la composición: baja una altura de portada y vuelve a empezar sin salto. Al moverse toda la
   composición junta, las cajas de una misma capa nunca se juntan. */
.dp-strip { position: absolute; left: 0; right: 0; top: -200%; height: 300%; will-change: transform; }
.dp-tile { position: relative; height: 33.3334%; }
.dp-drop { position: absolute; top: 0; left: 0; width: 20vw; aspect-ratio: var(--ar, .75); opacity: var(--o); will-change: transform; }
.dp-drop b { position: absolute; inset: 0; border-radius: var(--r, 3vw); background: color-mix(in srgb, var(--c) 82%, #fff);
  box-shadow: 0 0 var(--g1, 4vw) color-mix(in srgb, var(--c) 80%, transparent), 0 0 var(--g2, 12vw) color-mix(in srgb, var(--c) 35%, transparent);
  filter: blur(var(--b)); }
/* respirar: copia desenfocada encima que aparece al "inhalar" (solo opacidad + escala: barato) */
body[data-page="products"] .dp-hero__photo img.dp-hero__blur { position: absolute; left: 50%; top: 0; translate: -48% 0; opacity: 0; filter: blur(2.4px) contrast(1.05); will-change: opacity;
  transition: scale 2.4s cubic-bezier(.25, .1, .25, 1), opacity 2.4s cubic-bezier(.25, .1, .25, 1); }
/* desenfoque solo al pasar el cursor por la foto (crece y pierde foco a la vez) */
body[data-page="products"] .dp-hero__photo.is-hover img.dp-hero__blur { opacity: 1; transition-duration: 1.8s; transition-timing-function: cubic-bezier(.33, 0, .2, 1); }
/* fin de la portada: fundido a negro (sin brillo bajo el retrato) */
.dp-hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 4; /* sobre foto y lluvia: todo se funde a negro */ pointer-events: none; background: linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,.6) 45%, var(--black) 88%); }
body[data-page="products"] .dp-hero__glow { background: radial-gradient(40% 36% at 50% 30%, rgba(var(--accent-rgb), .14), transparent 70%); }
.dp-hero__halo { top: 34%; width: min(60vw, 880px); }
/* retrato centrado en la cabeza */
.dp-hero__photo img, body[data-page="products"] .dp-hero__photo img { translate: 2% 0; }
.dp-hero__tag, 
/* firma de fondo: parpadeo de luz averiada (JS) */

@media (max-width: 700px) {
  .dp-hero__photo { top: 20svh; }
  .dp-hero__photo img, body[data-page="products"] .dp-hero__photo img { height: 86svh; }
}

/* sobre la portada: sin el fundido oscuro de la nav (cortaba el brillo de la firma) */
body.dp-hero-on .nav::before { opacity: 0; }
/* variante "apagada" de la foto: capa propia que solo cambia de opacidad (sin repintar las fotos grandes en cada
   parpadeo). Cubre por completo a la encendida (misma silueta), así que esa no hace falta ocultarla. */
body[data-page="products"] .dp-hero__photo img.dp-hero__off { position: absolute; left: 50%; top: 0; translate: -48% 0; opacity: 0; will-change: opacity; }
.dp-hero.is-off .dp-hero__photo img.dp-hero__off { opacity: 1; }
body[data-page="products"] .dp-hero.is-off .dp-hero__photo img.dp-hero__blur { opacity: 0; transition: none; }
.dp-hero__halo, .dp-hero__glow { will-change: opacity; }
.dp-hero.is-off .dp-hero__halo, .dp-hero.is-off .dp-hero__glow { opacity: .12 !important; transition: none; } /* !important: GSAP deja opacidad en línea tras la intro */

/* ---------- portada DP: foto más grande (abarca más; puede cortarse bajo la nav) ---------- */
body[data-page="products"] .dp-hero__photo { top: 3svh; }
.dp-hero__photo img, body[data-page="products"] .dp-hero__photo img { height: 152svh; }
@media (max-width: 700px) {
  body[data-page="products"] .dp-hero__photo { top: 15svh; }
  .dp-hero__photo img, body[data-page="products"] .dp-hero__photo img { height: 98svh; }
}
/* hover: la foto y las cajas se agrandan. Se escala lo que GSAP no anima (las imágenes de la foto y el relleno de la
   caja): GSAP deja `scale: none` en línea en lo que mueve, y eso anulaba el agrandado. */
.dp-hero__photo img { transform-origin: 50% 28%; transition: scale 2.4s cubic-bezier(.25, .1, .25, 1); }
.dp-hero__photo.is-hover img { scale: 1.04; transition-duration: 1.8s; transition-timing-function: cubic-bezier(.33, 0, .2, 1); }
.dp-drop b { transition: scale 1.8s cubic-bezier(.25, .1, .25, 1); }
.dp-drop.is-hover b { scale: 1.08; transition-duration: 1.4s; transition-timing-function: cubic-bezier(.33, 0, .2, 1); }
.dp-hero.is-pick { cursor: pointer; }
.dp-drop b { background-size: cover; background-position: center; }

/* ---------- vista previa de un proyecto ---------- */
.dp-modal {
  position: fixed; inset: 0; margin: auto; padding: 0; width: min(880px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); height: fit-content;
  display: grid; grid-template-columns: minmax(0, auto) minmax(220px, 1fr); align-items: end; gap: clamp(20px, 3vw, 40px);
  border: 1px solid rgba(255,255,255,.08); border-radius: 26px; background: linear-gradient(180deg, #151515, #0e0e0e); color: var(--white);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .18), 0 60px 140px -40px rgba(var(--accent-rgb), .35);
  overflow: hidden; overscroll-behavior: contain; padding: clamp(16px, 2vw, 24px);
}
.dp-modal:not([open]) { display: none; }
.dp-modal::backdrop { background: rgba(0,0,0,.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dp-modal[open] { animation: dpModalIn .55s var(--ease); }
.dp-modal[open]::backdrop { animation: dpFade .4s ease-out; }
@keyframes dpModalIn { from { opacity: 0; transform: translateY(24px) scale(.96); } }
@keyframes dpFade { from { opacity: 0; } }
.dp-modal__media {
  --c: var(--accent); position: relative; height: min(70dvh, 640px); max-width: 52vw; border-radius: 18px; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 35%, color-mix(in srgb, var(--c) 55%, #111), #0b0b0b);
  box-shadow: 0 0 60px color-mix(in srgb, var(--c) 35%, transparent);
}
.dp-modal__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-modal__ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.dp-modal__info { padding: 0 clamp(4px, 1vw, 12px) clamp(8px, 1vw, 14px) 0; display: grid; gap: 10px; }
.dp-modal__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.dp-modal__name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 48px); line-height: 1; letter-spacing: -.03em; }
.dp-modal__client { margin: 6px 0 0; display: grid; gap: 4px; font-size: 16px; }
.dp-modal__client span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .5; }
.dp-modal__x { position: absolute; top: 16px; right: 16px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.4); color: var(--white); font-size: 22px; line-height: 1; cursor: pointer; transition: background .3s, border-color .3s, color .3s; }
.dp-modal__x:hover { background: var(--accent); border-color: var(--accent); color: #000; }
@media (max-width: 700px) {
  .dp-modal { grid-template-columns: 1fr; justify-items: center; }
  .dp-modal__media { height: min(58dvh, 520px); max-width: 100%; }
  .dp-modal__info { justify-self: stretch; padding: 0 4px 6px; }
}

/* =========================================================
   SERVICIOS · índice grande, centrado, con desenfoque analógico (estilo roles de "Sobre mí")
   ========================================================= */
.dp-services { position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(10px, 2vw, 40px); padding-bottom: clamp(70px, 8vw, 130px); } /* pegado a la portada: scroll más continuo */
/* aura: halo verde con rejilla LED, estático */
.dp-services::before { content: ""; position: absolute; inset: -10% -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 42% at 50% 50%, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .06) 55%, transparent 75%);
  -webkit-mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,.45) 0 1px, #000 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 1px, #000 1px 4px);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.dp-acc { border-top: 0; max-width: 1500px; margin: 0 auto; }
.dp-acc__item { border-bottom: 0; }
.dp-acc__head { grid-template-columns: 1fr; justify-items: center; gap: 0; padding: clamp(6px, 1vw, 16px) 0; text-align: center; position: relative; overflow: visible; }
.dp-acc__n { color: var(--accent); opacity: .7; font-size: 12px; margin-bottom: -.2em; position: relative; z-index: 1; }
.dp-acc__ic { position: absolute; right: 0; top: 50%; translate: 0 -50%; }
.dp-acc__t {
  /* aire alrededor (--pad) para que el brillo y el desenfoque no se corten; la máscara LED se apaga hacia los bordes */
  --pad: .42em; --fade: .3em; position: relative; display: inline-block; padding: var(--pad); margin: calc(var(--pad) * -1);
  font-weight: 900; font-size: clamp(56px, 10.5vw, 190px); line-height: .9; letter-spacing: -.04em; color: var(--accent);
  text-shadow: 0 0 22px rgba(var(--accent-rgb), .75), 0 0 70px rgba(var(--accent-rgb), .4);
  -webkit-mask-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.4) 0 1px, #000 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.4) 0 1px, #000 1px 4px),
    linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
    linear-gradient(0deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  -webkit-mask-composite: source-in, source-in, source-in; mask-composite: intersect;
  pointer-events: none; /* el clic lo recibe el botón entero */
}
.dp-acc__head { pointer-events: auto; }
.dp-acc__s { display: block; filter: blur(1.2px); will-change: opacity; }
.dp-acc__b { position: absolute; inset: var(--pad); filter: blur(.11em); will-change: opacity; }
@media (hover: hover) {
  .dp-acc__head:hover .dp-acc__t { transform: none; color: var(--accent); }
  .dp-acc__head:hover .dp-acc__ic { border-color: var(--accent); }
}
/* contenido del servicio abierto, centrado bajo el título */
.dp-acc__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
.dp-acc__desc, .dp-tags, .dp-acc__cta { grid-column: 1; }
.dp-acc__desc { max-width: 52ch; padding-bottom: 0; margin-top: 10px; }
.dp-tags { justify-content: center; max-width: 720px; padding-bottom: 0; }
.dp-acc .dp-acc__cta { justify-self: center; padding: 1.05em 1.7em; margin: 0; } /* una regla antigua de móvil le quitaba el relleno inferior */
.dp-acc__inner { padding: 0; transition: padding .7s var(--ease); }
.dp-acc__item.is-open .dp-acc__inner { padding: 4px 0 clamp(30px, 3.4vw, 50px); } /* solo abierto: si no, los cerrados asomaban */
@media (max-width: 700px) {
  .dp-acc__head { grid-template-columns: 1fr; }
  .dp-acc__t { font-size: 15vw; }
  .dp-acc__ic { display: none; }
}

/* Digital Products sin tramos blancos: todo oscuro y analógico */
.dp-bento, .dp-process { color: var(--white); }
.dp-process .serif, .dp-bento .serif { color: var(--accent); background: none; padding: 0; text-shadow: 0 0 18px rgba(var(--accent-rgb), .6); }
.dp-card:hover { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .6), 0 40px 80px -30px rgba(var(--accent-rgb), .25); }

/* índice: servicios juntos, sin número ni icono, sin desplegable (el clic se asignará más adelante) */
.dp-acc { position: relative; }
.dp-acc__n, .dp-acc__ic, .dp-acc__body { display: none; }
.dp-acc__head { padding: 0; cursor: default; }
.dp-acc__item + .dp-acc__item .dp-acc__head { margin-top: -.06em; }
.dp-acc__t { will-change: transform, opacity; }
.dp-acc__s { filter: blur(.6px); }
.dp-acc__b { filter: blur(.08em); }
/* selección [ ]: dos corchetes sueltos que solo se mueven con transform (cada uno con su brillo ya rasterizado) */
.dp-sel { position: absolute; inset: 0; pointer-events: none; z-index: 2; font-size: clamp(56px, 10.5vw, 190px); color: var(--accent); }
.dp-sel i { position: absolute; left: 0; top: 0; width: .2em; height: 1em; border: .07em solid currentColor; visibility: hidden; will-change: transform;
  filter: blur(.6px) drop-shadow(0 0 10px rgba(var(--accent-rgb), .8)) drop-shadow(0 0 30px rgba(var(--accent-rgb), .4)); }
.dp-sel i:first-child { border-right: 0; }
.dp-sel i:last-child { border-left: 0; }
@media (max-width: 700px) { .dp-sel { font-size: 15vw; } }
/* "????": el pack secreto (como el Unlimited Pack de miniaturas), con un leve corte RGB */
.dp-acc__item--locked .dp-acc__s { text-shadow: 0 0 22px rgba(var(--accent-rgb), .75), 0 0 70px rgba(var(--accent-rgb), .4), -.03em 0 rgba(255,0,60,.55), .03em 0 rgba(0,225,255,.45); }

/* =========================================================
   SERVICIOS · 3 tarjetas simétricas; con el cursor, la tarjeta se ensancha a 4:3 (JS calcula --k)
   ========================================================= */
.dp-trio-head { display: grid; gap: 14px; margin-bottom: clamp(30px, 4vw, 60px); }
.dp-trio { --h: clamp(380px, 36vw, 560px); --k: 2; display: flex; gap: clamp(12px, 1.2vw, 18px); height: var(--h); }
.dp-tcard { flex: 1 1 0; min-width: 0; height: 100%; grid-column: auto; grid-row: auto; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: flex-grow .9s var(--ease), box-shadow .6s var(--ease); }
@media (hover: hover) and (min-width: 901px) {
  .dp-tcard:hover { flex-grow: var(--k); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55), 0 30px 80px -30px rgba(var(--accent-rgb), .35); }
}
.dp-tcard.dp-card:hover { transform: none; } /* el ensanche sustituye al salto de las tarjetas antiguas */
.dp-tcard .dp-card__ghost { font-size: clamp(120px, 14vw, 260px); }
.dp-tcard .dp-card__logo { width: min(48%, 300px); top: 44%; }
.dp-tcard .dp-phone { top: 40px; width: min(52%, 200px); }
.dp-tcard .dp-browser { top: 40px; bottom: 96px; }
/* pie: número + nombre + flecha (la flecha aparece con el cursor) */
.dp-tcard__foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 14px;
  padding: 60px clamp(18px, 1.8vw, 28px) clamp(18px, 1.8vw, 26px); background: linear-gradient(180deg, transparent, rgba(8,8,8,.92) 55%); }
.dp-tcard__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--accent); }
.dp-tcard__t { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.2vw, 36px); letter-spacing: -.035em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.dp-tcard__go { margin-left: auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--black); font-weight: 700; opacity: 0; transform: translateX(-10px) scale(.8); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.dp-tcard:hover .dp-tcard__go { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .dp-trio { flex-direction: column; height: auto; }
  .dp-tcard { flex: none; height: clamp(300px, 80vw, 420px); }
  .dp-tcard__go { opacity: 1; transform: none; }
}

/* ---------- índice v2: la rejilla LED va en todo el bloque (fija), no en cada palabra ----------
   Con la máscara en cada palabra, al crecer la seleccionada (scale) la rejilla se partía en franjas (cortes verticales)
   y el brillo se recortaba en su caja. Ahora la máscara es una sola, estática, con desvanecimiento en los bordes. */
.dp-acc { --apad: clamp(40px, 6vw, 110px); max-width: none; padding: var(--apad) var(--gutter); margin: calc(var(--apad) * -1) calc(var(--gutter) * -1);
  -webkit-mask-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.4) 0 1px, #000 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.4) 0 1px, #000 1px 4px),
    linear-gradient(0deg, transparent, #000 var(--apad), #000 calc(100% - var(--apad)), transparent),
    linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  -webkit-mask-composite: source-in, source-in, source-in; mask-composite: intersect; } /* se apaga por los 4 lados: sin recuadro */
.dp-acc__t { -webkit-mask-image: none; mask-image: none; font-size: clamp(46px, 7.6vw, 140px); }
.dp-sel { font-size: clamp(46px, 7.6vw, 140px); }
/* posiciones escalonadas: izquierda · algo a la derecha · casi al centro · derecha */
.dp-acc__head { display: flex; justify-content: flex-start; }
.dp-acc__item:nth-child(1) .dp-acc__head { padding-left: 2%; }
.dp-acc__item:nth-child(2) .dp-acc__head { padding-left: 22%; }
.dp-acc__item:nth-child(3) .dp-acc__head { padding-left: 38%; }
.dp-acc__item:nth-child(4) .dp-acc__head { justify-content: flex-end; padding-right: 4%; }
@media (max-width: 700px) {
  .dp-acc__t, .dp-sel { font-size: 12.5vw; }
  .dp-acc__item:nth-child(1) .dp-acc__head { padding-left: 4%; }
  .dp-acc__item:nth-child(2) .dp-acc__head { padding-left: 14%; }
  .dp-acc__item:nth-child(3) .dp-acc__head { padding-left: 22%; }
  .dp-acc__item:nth-child(4) .dp-acc__head { padding-right: 6%; }
}

/* ---------- tarjetas v2: título en dos bloques, tarjetas altas (9:19), el resto se apaga al pasar ---------- */
.dp-trio-title { display: grid; gap: .05em; font-size: clamp(48px, 7.2vw, 132px); line-height: .9; }
.dp-trio-title__a, .dp-trio-title__b { display: block; }
.dp-trio-title__b { padding-left: .9em; }
.dp-trio { --h: min(calc((100vw - var(--gutter) * 2 - 36px) / 3 * 19 / 9), 90svh); } /* 9:19 (con tope a la altura de pantalla) */
.dp-tcard { transition: flex-grow .9s var(--ease), box-shadow .6s var(--ease), filter .6s var(--ease), opacity .6s var(--ease); }
@media (hover: hover) and (min-width: 901px) {
  .dp-trio:hover .dp-tcard:not(:hover) { filter: blur(4px) brightness(.55); opacity: .6; } /* como los planes de miniaturas */
}
@media (max-width: 900px) { .dp-tcard { height: min(calc((100vw - var(--gutter) * 2) * 19 / 9), 72svh); } }

/* tarjeta con portada propia (PORTADA.png en la carpeta del servicio): sustituye al mockup */
.dp-tcard__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 1.2s var(--ease); }
.dp-tcard.has-cover:hover .dp-tcard__cover { transform: scale(1.04); }

/* ---------- v17: índice desordenado en X, título de servicios centrado (como CTA/recientes), tarjetas 4:5 ---------- */
.dp-acc__item:nth-child(1) .dp-acc__head { justify-content: flex-start; padding: 0 0 0 16%; }
.dp-acc__item:nth-child(2) .dp-acc__head { justify-content: flex-end; padding: 0 2% 0 0; }
.dp-acc__item:nth-child(3) .dp-acc__head { justify-content: flex-start; padding: 0; }
.dp-acc__item:nth-child(4) .dp-acc__head { justify-content: flex-start; padding: 0 0 0 54%; }
@media (max-width: 700px) {
  .dp-acc__item:nth-child(1) .dp-acc__head { padding-left: 10%; }
  .dp-acc__item:nth-child(4) .dp-acc__head { padding-left: 46%; }
}
.dp-trio-head { justify-items: center; text-align: center; gap: 18px; margin-bottom: clamp(36px, 4.5vw, 70px); }
.dp-trio-title { justify-items: center; }
.dp-trio-title__b { padding-left: 0; }
.dp-trio-sub { max-width: 46ch; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.5; opacity: .7; }
.dp-trio-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.dp-trio { --h: calc((100vw - var(--gutter) * 2 - 36px) / 3 * 5 / 4); } /* 4:5 */
@media (max-width: 900px) { .dp-tcard { height: calc((100vw - var(--gutter) * 2) * 5 / 4); } }

/* =========================================================
   v18 · ÍNDICE en parejas (2 palabras por línea, sin huecos) + "#@$%&!" censurado
   ========================================================= */
.dp-acc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3vw; align-items: center; }
.dp-acc__item .dp-acc__head { padding: 0 !important; justify-content: flex-start !important; }
.dp-acc__item:nth-child(1) { grid-column: 1; justify-self: start; }
.dp-acc__item:nth-child(2) { grid-column: 2; justify-self: end; }
.dp-acc__item:nth-child(3) { grid-column: 1; justify-self: start; margin-left: 9%; }
.dp-acc__item:nth-child(4) { grid-column: 2; justify-self: end; margin-right: 6%; }
.dp-acc__item:nth-child(5) { grid-column: 1 / -1; justify-self: center; margin-left: 18%; }
.dp-acc__t, .dp-sel { font-size: clamp(40px, 5.8vw, 112px); }
.dp-acc__item + .dp-acc__item .dp-acc__head { margin-top: 0; }
@media (max-width: 700px) {
  .dp-acc { grid-template-columns: 1fr; }
  .dp-acc__item:nth-child(n) { grid-column: 1; margin: 0; }
  .dp-acc__item:nth-child(odd) { justify-self: start; margin-left: 7%; }
  .dp-acc__item:nth-child(even) { justify-self: end; margin-right: 7%; } /* aire para los corchetes */
  .dp-acc__item:nth-child(5) { justify-self: center; }
  .dp-acc__t, .dp-sel { font-size: 11vw; }
}

/* título de servicios en una sola línea */
.dp-trio-title { display: block; text-align: center; }

/* =========================================================
   Tarjetas: portada desde SERVICIOS/<servicio>/PORTADA_*  (1 = encuadrada · verticales = abanico · apaisadas = franjas)
   ========================================================= */
.dp-tcard__collage { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.dp-tcard__collage img { position: absolute; display: block; object-fit: cover; transition: transform 1s var(--ease), translate 1s var(--ease), rotate 1s var(--ease); }
.dp-tcard__collage--one img { inset: 0; width: 100%; height: 100%; object-position: center; }
.dp-tcard:hover .dp-tcard__collage--one img { transform: scale(1.05); }
/* abanico: piezas verticales superpuestas que se abren al pasar el cursor */
.dp-tcard__collage--fan { background: radial-gradient(70% 60% at 50% 45%, #1d1d1d, #0b0b0b); }
.dp-tcard__collage--fan img {
  --off: calc(var(--i) - (var(--n) - 1) / 2);
  left: 50%; top: 9%; height: 70%; aspect-ratio: 9 / 16; width: auto; border-radius: 14px;
  translate: calc(-50% + var(--off) * 34%) 0; rotate: calc(var(--off) * 7deg); transform-origin: 50% 120%;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08);
}
.dp-tcard__collage--fan img:nth-child(2) { z-index: 2; }
.dp-tcard:hover .dp-tcard__collage--fan img { translate: calc(-50% + var(--off) * 62%) -3%; rotate: calc(var(--off) * 10deg); }
/* franjas: piezas apaisadas apiladas */
.dp-tcard__collage--rows { display: grid; grid-template-rows: repeat(var(--n), 1fr); gap: 6px; padding: 0; }
.dp-tcard__collage--rows img { position: static; width: 100%; height: 100%; }
.dp-tcard:hover .dp-tcard__collage--rows img { transform: scale(1.04); }
.dp-tcard.has-cover > :not(.dp-tcard__collage):not(.dp-tcard__foot) { display: none; }
.dp-tcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* =========================================================
   PORTAFOLIO (capa a pantalla completa)
   ========================================================= */
html.is-port { overflow: hidden; }
.dp-port { position: fixed; inset: 0; z-index: 95; background: #0a0a0a; color: var(--white); display: flex; flex-direction: column; }
.dp-port[hidden] { display: none; }
.dp-port::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; /* aura verde con rejilla */
  background: radial-gradient(60% 40% at 50% 0%, rgba(var(--accent-rgb), .12), transparent 70%);
  -webkit-mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,.45) 0 1px, #000 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 1px, #000 1px 4px);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.dp-port__bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; padding: 18px var(--gutter); border-bottom: 1px solid rgba(255,255,255,.08); }
.dp-port__tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.dp-port__tab { flex: none; padding: .7em 1.2em; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: none; color: inherit;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .35s, color .35s, border-color .35s; }
.dp-port__tab sup { margin-left: 6px; font-family: var(--font-mono); font-size: 10px; opacity: .6; vertical-align: super; }
.dp-port__tab:hover { border-color: var(--accent); }
.dp-port__tab.is-on { background: var(--accent); border-color: var(--accent); color: var(--black); }
.dp-port__x { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: none; color: inherit; font-size: 24px; line-height: 1; cursor: pointer; transition: background .3s, color .3s, transform .5s var(--ease); }
.dp-port__x:hover { background: var(--accent); color: var(--black); transform: rotate(90deg); }
.dp-port__scroll { position: relative; z-index: 1; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: clamp(30px, 4vw, 60px) var(--gutter) clamp(60px, 7vw, 110px); }
.dp-port__head { margin-bottom: clamp(26px, 3.4vw, 50px); }
.dp-port__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.dp-port__title { margin: 10px 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(42px, 7vw, 120px); line-height: .9; letter-spacing: -.045em; text-transform: uppercase;
  text-shadow: 0 0 30px rgba(var(--accent-rgb), .25); }
.dp-port__meta { margin-top: 14px; font-size: clamp(14px, 1.1vw, 17px); opacity: .6; max-width: 60ch; }
/* collage de proyectos: cada portada con su proporción real, en columnas */
.dp-port__grid { columns: 3 320px; column-gap: clamp(12px, 1.4vw, 20px); }
.dp-port__tile { position: relative; display: block; width: 100%; margin: 0 0 clamp(12px, 1.4vw, 20px); padding: 0; border: 0; border-radius: 20px; overflow: hidden;
  aspect-ratio: var(--r); background: #141414; color: inherit; cursor: pointer; break-inside: avoid; text-align: left; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.dp-port__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease), filter .6s var(--ease); }
.dp-port__tinfo { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 50px 20px 18px; background: linear-gradient(180deg, transparent, rgba(8,8,8,.9) 60%); }
.dp-port__tinfo b { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 1.8vw, 30px); letter-spacing: -.03em; text-transform: uppercase; line-height: 1; }
.dp-port__tinfo small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.dp-port__tgo { position: absolute; top: 16px; right: 16px; padding: .55em 1em; border-radius: 999px; background: var(--accent); color: var(--black); font-family: var(--font-display); font-weight: 700; font-size: 13px;
  opacity: 0; transform: translateY(-8px); transition: opacity .4s, transform .5s var(--ease); }
.dp-port__tile:hover img { transform: scale(1.05); }
.dp-port__tile:hover .dp-port__tgo, .dp-port__tile:focus-visible .dp-port__tgo { opacity: 1; transform: none; }
.dp-port__grid:hover .dp-port__tile:not(:hover) img { filter: brightness(.55) blur(2px); }
.dp-port__empty { column-span: all; display: grid; justify-items: start; gap: 14px; padding: clamp(30px, 5vw, 70px); border-radius: 22px; border: 1px dashed rgba(255,255,255,.18); }
.dp-port__empty b { font-family: var(--font-display); font-size: clamp(28px, 3vw, 48px); letter-spacing: -.03em; color: var(--accent); }
.dp-port__empty p { opacity: .7; max-width: 48ch; }
/* presentación del proyecto */
.dp-port__back { margin-bottom: 20px; padding: .6em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: none; color: inherit; font-family: var(--font-display); font-weight: 600; cursor: pointer; transition: background .3s, color .3s; }
.dp-port__back:hover { background: var(--white); color: var(--black); }
.dp-port__block + .dp-port__block { margin-top: clamp(40px, 5vw, 80px); }
.dp-port__bt { margin: 0 0 16px; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.dp-port__it { margin: 0; border-radius: 16px; overflow: hidden; background: #141414; aspect-ratio: var(--r); }
.dp-port__it img, .dp-port__it video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-port__it video.is-center { object-position: center; }
.dp-port__lay--v { display: grid; gap: clamp(10px, 1.2vw, 18px); max-width: 1200px; margin: 0 auto; }
.dp-port__lay--grid { columns: 3 260px; column-gap: clamp(10px, 1.2vw, 18px); }
.dp-port__lay--grid .dp-port__it { margin-bottom: clamp(10px, 1.2vw, 18px); break-inside: avoid; }
.dp-port__lay--grid .dp-port__it.is-full { column-span: all; }
.dp-port__hwrap { position: relative; }
.dp-port__lay--h { display: flex; gap: clamp(10px, 1.2vw, 18px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 10px; }
.dp-port__lay--h .dp-port__it { flex: none; height: min(72vh, 760px); width: auto; scroll-snap-align: start; }
.dp-port__arrow { position: absolute; top: calc(50% - 30px); z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--accent); color: var(--black); font-size: 20px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(var(--accent-rgb), .8); transition: transform .4s var(--ease); }
.dp-port__arrow[data-d="-1"] { left: 10px; } .dp-port__arrow[data-d="1"] { right: 10px; }
.dp-port__arrow:hover { transform: scale(1.1); }
.dp-port__next { display: grid; gap: 6px; justify-items: start; width: 100%; margin-top: clamp(50px, 6vw, 100px); padding: clamp(26px, 3vw, 40px) 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.12); background: none; color: inherit; text-align: left; cursor: pointer; }
.dp-port__next small { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.dp-port__next b { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 4.6vw, 80px); letter-spacing: -.04em; text-transform: uppercase; line-height: 1; transition: color .3s, transform .6s var(--ease); }
.dp-port__next:hover b { color: var(--accent); transform: translateX(10px); }
@media (max-width: 700px) {
  .dp-port__lay--h .dp-port__it { height: 58vh; }
  .dp-port__arrow { display: none; }
  .dp-port__tgo { opacity: 1; transform: none; }
}

/* ---------- v19 · tarjetas: verticales una al lado de otra (collage) ---------- */
.dp-tcard__collage--cols { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; background: #0b0b0b; }
.dp-tcard__collage--cols img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.dp-tcard:hover .dp-tcard__collage--cols img { transform: scale(1.03); }
.dp-tcard__collage--rows { background: #0b0b0b; }
.dp-trio { --h: calc((100vw - var(--gutter) * 2 - (var(--n, 3) - 1) * 18px) / var(--n, 3) * 5 / 4); }

/* ---------- portafolio como ventana emergente (85% de la pantalla, fondo desenfocado) ---------- */
.dp-port { display: grid; place-items: center; background: rgba(6,6,6,.55); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }
.dp-port::before { display: none; }
.dp-port__panel { position: relative; width: 85vw; height: 85vh; height: 85dvh; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 28px; background: linear-gradient(180deg, #131313, #0b0b0b); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 0 1px rgba(var(--accent-rgb), .12), 0 60px 160px -40px rgba(0,0,0,.9), 0 0 120px -40px rgba(var(--accent-rgb), .35); }
.dp-port__panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(70% 40% at 50% 0%, rgba(var(--accent-rgb), .12), transparent 70%);
  -webkit-mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,.45) 0 1px, #000 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 1px, #000 1px 4px);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.dp-port__bar { padding: 16px clamp(18px, 2.4vw, 34px); }
.dp-port__scroll { padding: clamp(24px, 3vw, 44px) clamp(18px, 2.4vw, 34px) clamp(40px, 5vw, 70px); }
.dp-port__title { font-size: clamp(36px, 5.6vw, 96px); }
.dp-port__grid { columns: 3 280px; }
@media (max-width: 700px) {
  .dp-port__panel { width: 94vw; height: 88dvh; border-radius: 22px; }
}

/* =========================================================
   v20 · pulido de tarjetas y portafolio
   ========================================================= */
/* Social Media: con 3 flyers, el del medio se ve más (al ensancharse la tarjeta se ven completos) */
.dp-tcard__collage--cols[style*="--n: 3"], .dp-tcard__collage--cols[style*="--n:3"] { grid-template-columns: 1fr 1.7fr 1fr; }
/* el oscurecido solo cuando el cursor está DE VERDAD sobre otra tarjeta/proyecto (antes bastaba con estar en el hueco
   entre ellas, y al hacer scroll se oscurecía todo) */
@media (hover: hover) and (min-width: 901px) {
  .dp-trio:hover .dp-tcard:not(:hover) { filter: none; opacity: 1; }
  .dp-trio:has(.dp-tcard:hover) .dp-tcard:not(:hover) { filter: blur(4px) brightness(.55); opacity: .6; }
}
.dp-port__grid:hover .dp-port__tile:not(:hover) img { filter: none; }
.dp-port__grid:has(.dp-port__tile:hover) .dp-port__tile:not(:hover) img { filter: brightness(.55) blur(2px); }
/* portadas apaisadas (branding): toda la línea, en 16:9 */
.dp-port__tile.is-wide { column-span: all; aspect-ratio: 16 / 9; }
.dp-port__tile.is-wide .dp-port__tinfo b { font-size: clamp(26px, 3vw, 52px); }

/* color de la ventana según el proyecto: los detalles usan --accent (lo cambia el JS), con transición suave */
.dp-port__panel { transition: box-shadow .8s var(--ease); }
.dp-port__k, .dp-port__bt, .dp-port__title { transition: color .6s var(--ease), text-shadow .6s var(--ease); }
.dp-port__tab.is-on, .dp-port__arrow, .dp-port__tgo { transition: background .6s var(--ease), border-color .6s var(--ease), color .35s; }

/* slide infinito: cinta duplicada que avanza sola (horizontal) o sube (vertical) */
.dp-port__lay--slide-h, .dp-port__lay--slide-v { position: relative; overflow: hidden; border-radius: 18px; }
.dp-port__lay--slide-h { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.dp-port__lay--slide-h .dp-port__track { display: flex; gap: clamp(10px, 1.2vw, 18px); width: max-content; will-change: transform; }
.dp-port__lay--slide-h .dp-port__it { flex: none; height: min(62vh, 640px); width: auto; cursor: zoom-in; }
.dp-port__lay--slide-v { height: min(74vh, 820px); max-width: 1100px; margin: 0 auto;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); }
.dp-port__lay--slide-v .dp-port__track { display: grid; gap: clamp(10px, 1.2vw, 18px); will-change: transform; }
.dp-port__lay--slide-v .dp-port__it { width: 100%; cursor: zoom-in; }
.dp-port__lay--slide-v .dp-port__track { padding-bottom: clamp(10px, 1.2vw, 18px); } /* hueco igual en la unión del bucle */
.dp-port__lay--slide-h .dp-port__track { padding-right: clamp(10px, 1.2vw, 18px); }
.dp-port__it { cursor: zoom-in; transition: box-shadow .4s var(--ease); }
.dp-port__it:hover { box-shadow: 0 0 0 2px var(--accent), 0 20px 50px -20px rgba(var(--accent-rgb), .6); }
.dp-port__hint { margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .45; text-align: center; }

/* vista previa de una pieza (dentro del portafolio) */
.dp-lb { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: clamp(14px, 3vw, 40px);
  background: rgba(5,5,5,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dp-lb[hidden] { display: none; }
.dp-lb__fig { margin: 0; height: 100%; display: grid; place-items: center; min-width: 0; }
.dp-lb__fig img, .dp-lb__fig video { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 14px; box-shadow: 0 30px 90px -20px rgba(0,0,0,.9), 0 0 60px -20px rgba(var(--accent-rgb), .4); }
.dp-lb__nav, .dp-lb__x { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.4); color: var(--white); font-size: 20px; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.dp-lb__nav:hover, .dp-lb__x:hover { background: var(--accent); border-color: var(--accent); color: var(--black); }
.dp-lb__x { position: absolute; top: 16px; right: 16px; font-size: 24px; }
.dp-lb__n { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; opacity: .7; }
@media (max-width: 700px) {
  .dp-lb { grid-template-columns: 1fr; }
  .dp-lb__nav { position: absolute; bottom: 10px; } .dp-lb__nav[data-d="-1"] { left: 16px; } .dp-lb__nav[data-d="1"] { right: 16px; }
  .dp-port__lay--slide-h .dp-port__it { height: 48vh; }
}

/* =========================================================
   v21 · portafolio: barra con flecha atrás + pastilla central; diseños primero, info abajo
   ========================================================= */
.dp-port__bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.dp-port__tabs { display: none; }
.dp-port__backbtn, .dp-port__x { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .3s, color .3s, border-color .3s, transform .5s var(--ease); }
.dp-port__backbtn:hover { background: var(--accent); border-color: var(--accent); color: var(--black); transform: translateX(-3px); }
.dp-port__pill { justify-self: center; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: .6em 1.3em; border-radius: 999px;
  background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .45); color: var(--accent);
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 0 24px -6px rgba(var(--accent-rgb), .5); transition: color .6s, background .6s, border-color .6s, box-shadow .6s; }
.dp-port__pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; flex: none; }
/* proyecto: diseños arriba (sliders + galería justificada) y la info debajo */
.dp-port__proj { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.dp-port__blocks { display: grid; gap: 12px; }
.dp-port__just { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.dp-port__just .dp-port__it { position: relative; flex: none; aspect-ratio: auto; margin: 0; }
.dp-port__it figcaption { position: absolute; left: 12px; top: 12px; padding: .4em .8em; border-radius: 999px; background: rgba(8,8,8,.7); font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); pointer-events: none; }
.dp-port__info { display: grid; gap: 0; margin-top: clamp(20px, 2.6vw, 40px); padding-top: clamp(20px, 2.6vw, 36px); border-top: 1px solid rgba(255,255,255,.1); }
.dp-port__info .dp-port__head { margin-bottom: 0; }
.dp-port__info .dp-port__title { font-size: clamp(32px, 4.6vw, 80px); }
.dp-port__info .dp-port__next { margin-top: clamp(30px, 3.6vw, 60px); }
/* sliders infinitos: siempre en marcha; rueda y arrastre para moverlos */
.dp-port__slide { position: relative; overflow: hidden; border-radius: 18px; cursor: grab; touch-action: pan-y; user-select: none; }
.dp-port__slide.is-drag { cursor: grabbing; }
.dp-port__slide img { -webkit-user-drag: none; pointer-events: none; }
.dp-port__slide--h { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.dp-port__slide--h .dp-port__track { display: flex; gap: 12px; width: max-content; padding-right: 12px; will-change: transform; }
.dp-port__slide--h .dp-port__it { flex: none; height: min(60vh, 620px); width: auto; aspect-ratio: var(--r); }
.dp-port__slide--v { height: min(68vh, 760px); touch-action: pan-x;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); }
.dp-port__slide--v .dp-port__track { display: grid; gap: 12px; padding-bottom: 12px; will-change: transform; }
.dp-port__slide--v .dp-port__it { width: 100%; aspect-ratio: var(--r); } /* ocupan todo el ancho de la ventana */
.dp-port__hint { margin: 2px 0 0; }
@media (max-width: 700px) { .dp-port__slide--h .dp-port__it { height: 46vh; } .dp-port__pill { font-size: 11px; } }

/* =========================================================
   v22 · ajustes: menos aire arriba en los proyectos, sliders sin fundido, índice más grande, servicios más cerca
   ========================================================= */
.dp-port__scroll:has(.dp-port__proj:not([hidden])) { padding-top: clamp(12px, 1.4vw, 20px); }
.dp-port__slide--h, .dp-port__slide--v { -webkit-mask-image: none; mask-image: none; }
/* índice: letras más grandes y palabras más juntas (con sitio para los corchetes) */
.dp-acc { column-gap: 1.2vw; }
.dp-acc__t, .dp-sel { font-size: clamp(52px, 7vw, 140px); }
.dp-acc__item:nth-child(1) { margin-left: .5em; }
.dp-acc__item:nth-child(2) { margin-right: .5em; }
.dp-acc__item:nth-child(3) { margin-left: 1.6em; }
.dp-acc__item:nth-child(4) { margin-right: .5em; }
.dp-acc__item:nth-child(5) { margin-left: 2em; }
.dp-acc__item[data-sec] .dp-acc__head { cursor: pointer; }
@media (max-width: 700px) { .dp-acc__t, .dp-sel { font-size: 12.5vw; } }
/* "¿Por dónde empezamos?" más cerca del índice */
.dp-services { padding-bottom: clamp(10px, 2vw, 34px); }
.dp-trio-sec { padding-top: clamp(30px, 4vw, 70px); }
.dp-acc { grid-template-columns: max-content max-content; justify-content: space-between; }
.dp-acc__s, .dp-acc__b { white-space: nowrap; }
@media (max-width: 700px) { .dp-acc { grid-template-columns: 1fr; } .dp-acc__s, .dp-acc__b { white-space: normal; } }
.dp-acc__item:nth-child(1) { margin-left: .8em; }
.dp-acc__item:nth-child(2), .dp-acc__item:nth-child(4) { margin-right: .8em; } /* sitio para el corchete derecho */
@media (max-width: 700px) { .dp-acc__item:nth-child(n) { margin-left: 7%; margin-right: 7%; } }
/* dentro de la ventana no aplica el relleno general de las <section> de la web (era el aire de arriba) */
.dp-port__list, .dp-port__proj { padding: 0; }
.dp-port__proj[hidden] { display: none; }

/* =========================================================
   v23 · reglas de composición unificadas
   ========================================================= */
/* filas de diseños / portadas / slider vertical al ~76% del ancho de la ventana, centradas */
.dp-port__panel { --pw: 85vw; }
.dp-port__just, .dp-port__slide--v, .dp-port__grid, .dp-port__list .dp-port__head { width: min(100%, calc(var(--pw) * .76)); margin-inline: auto; }
.dp-port__just { justify-content: center; }
/* Branding: portadas de proyecto en 5:4, 2 por fila ajustadas al ancho */
.dp-port__grid--duo { columns: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dp-port__grid--duo .dp-port__tile { margin: 0; aspect-ratio: 5 / 4; }
@media (max-width: 700px) {
  .dp-port__panel { --pw: 94vw; }
  .dp-port__grid--duo { grid-template-columns: 1fr; }
}
/* índice: tamaño calculado por JS (--ifs) para llenar el ancho; separaciones justas para los corchetes */
.dp-acc__t, .dp-sel { font-size: var(--ifs, 7vw); }
.dp-acc { column-gap: calc(var(--ifs, 7vw) * .52); }
.dp-acc__item:nth-child(n) { margin-left: 0; margin-right: 0; }
.dp-acc__item:nth-child(odd) { margin-left: calc(var(--ifs, 7vw) * .52); }
.dp-acc__item:nth-child(even) { margin-right: calc(var(--ifs, 7vw) * .52); }
.dp-acc__item:nth-child(5) { margin-left: 0; }
.dp-acc__item:nth-child(3) { margin-left: calc(var(--ifs, 7vw) * 1.2); }
.dp-sel i { width: .16em; }
@media (max-width: 700px) {
  .dp-acc__t, .dp-sel { font-size: 12.5vw; }
  .dp-acc__item:nth-child(n) { margin-left: 7%; margin-right: 7%; }
}
/* índice aún más grande: el bloque usa casi todo el ancho y las letras van un poco más juntas */
@media (min-width: 701px) {
  .dp-acc { padding-left: 14px; padding-right: 14px; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); column-gap: calc(var(--ifs, 7vw) * .46);
    -webkit-mask-image:
      repeating-linear-gradient(0deg, rgba(0,0,0,.4) 0 1px, #000 1px 4px),
      repeating-linear-gradient(90deg, rgba(0,0,0,.4) 0 1px, #000 1px 4px),
      linear-gradient(0deg, transparent, #000 var(--apad), #000 calc(100% - var(--apad)), transparent),
      linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent); }
  .dp-acc__t { letter-spacing: -.055em; }
  .dp-acc__item:nth-child(odd) { margin-left: calc(var(--ifs, 7vw) * .46); }
  .dp-acc__item:nth-child(even) { margin-right: calc(var(--ifs, 7vw) * .46); }
  .dp-acc__item:nth-child(5) { margin-left: 0; }
}

/* =========================================================
   v24 · ventana de proyectos: 85% de ancho, nombre gigante de fondo, productos separados, hover con destello
   ========================================================= */
.dp-port__just, .dp-port__slide--v, .dp-port__grid, .dp-port__list .dp-port__head, .dp-port__gh, .dp-port__info { width: min(100%, calc(var(--pw) * .85)); margin-inline: auto; }
.dp-port__scroll { padding-left: clamp(12px, 1.6vw, 24px); padding-right: clamp(12px, 1.6vw, 24px); }
/* nombre del servicio / proyecto detrás de todo: en el color del proyecto, heavy, con rejilla LED y desenfoque leve */
.dp-port__ghost { position: absolute; left: 50%; top: 54%; z-index: 0; margin: 0; translate: -50% -50%; white-space: nowrap; pointer-events: none;
  font-family: var(--font-display); font-weight: 900; line-height: .8; letter-spacing: -.06em; text-transform: uppercase;
  color: var(--accent); opacity: .14; filter: blur(2px); transition: color .8s var(--ease);
  -webkit-mask-image: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, #000 1px 4px), repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, #000 1px 4px);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.dp-port__scroll { position: relative; z-index: 1; }
/* cada producto de un proyecto: su cabecera y aire suficiente para leerlo como algo distinto */
.dp-port__blocks { gap: clamp(34px, 4vw, 60px); }
.dp-port__group { display: grid; gap: 14px; }
.dp-port__gh { display: flex; align-items: center; gap: 14px; }
.dp-port__gh b { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.dp-port__gh i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--accent-rgb), .5), rgba(255,255,255,.06)); }
.dp-port__gh small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .45; }
/* piezas y portadas: recorte con clip-path (sin el filo de color en el borde inferior que dejaba overflow+radius) */
.dp-port__it, .dp-port__tile { overflow: visible; clip-path: inset(0 round 16px); isolation: isolate; }
.dp-port__tile { clip-path: inset(0 round 20px); }
.dp-port__tinfo { bottom: -1px; background: linear-gradient(180deg, transparent, rgba(8,8,8,.92) 60%, #080808); }
.dp-port__it { position: relative; transition: transform .7s var(--ease), filter .5s var(--ease), opacity .5s var(--ease); will-change: transform; }
.dp-port__it::before, .dp-port__tile::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #fff; opacity: 0; }
.dp-port__it:hover::before, .dp-port__tile:hover::before { animation: citemFlash .55s ease-out; }
.dp-port__it:hover { transform: scale(1.025); z-index: 2; box-shadow: none; }
.dp-port__tile { transition: transform .7s var(--ease); }
.dp-port__tile:hover { transform: scale(1.015); z-index: 2; }
/* lo demás se apaga solo cuando el cursor está sobre otra pieza */
.dp-port__blocks:has(.dp-port__it:hover) .dp-port__it:not(:hover) { filter: brightness(.45) blur(2px); }
.dp-port__grid:has(.dp-port__tile:hover) .dp-port__tile:not(:hover) img { filter: brightness(.45) blur(2px); }
.dp-port__slide .dp-port__it:hover { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) { .dp-port__it:hover::before, .dp-port__tile:hover::before { animation: none; } }
@media (hover: none) { .dp-port__it:hover, .dp-port__tile:hover { transform: none; } }

/* =========================================================
   v25 · ventana: nombre grande ARRIBA (pegado a la barra, las piezas se montan sobre su parte baja), filas al 90%
   ========================================================= */
.dp-port__scroll { padding-top: 0 !important; }
.dp-port__ghost { position: relative; left: auto; top: auto; translate: none; display: block; z-index: 0; text-align: center;
  margin: -.06em calc(clamp(12px, 1.6vw, 24px) * -1) -.42em; line-height: .82; opacity: .24; filter: blur(1.5px); }
.dp-port__list, .dp-port__proj { position: relative; z-index: 1; }
.dp-port__list .dp-port__title, .dp-port__list .dp-port__k { display: none; }
.dp-port__list .dp-port__head { margin-bottom: 14px; }
.dp-port__list .dp-port__meta { margin-top: 0; }
.dp-port__just, .dp-port__slide--v, .dp-port__grid, .dp-port__list .dp-port__head, .dp-port__gh, .dp-port__info { width: min(100%, calc(var(--pw) * .9)); }
.dp-port__blocks { gap: clamp(22px, 2.4vw, 34px); } /* productos de un mismo proyecto: separados, pero cerca */
.dp-port__group { gap: 10px; }

/* índice tipo cartel: filas de igual ancho (tamaños por palabra con JS) */
@media (min-width: 701px) {
  .dp-acc { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 0; row-gap: 0; }
  .dp-acc__item:nth-child(n) { order: 0; justify-self: auto; grid-column: auto; }
  .dp-acc__item:nth-child(3) { order: 1; } /* Branding */
  .dp-acc__item:nth-child(2) { order: 2; } /* Websites */
  .dp-acc__item:nth-child(1) { order: 3; flex-basis: 100%; display: flex; justify-content: center; } /* Social Media: fila propia */
  .dp-acc__item:nth-child(5) { order: 4; } /* #@$%&! */
  .dp-acc__item:nth-child(4) { order: 5; } /* Contacto */
  .dp-acc__t { line-height: .86; }
}

/* barrido de la firma: cortina oscura con borde de spray verde que se desliza (solo transform) */
.dp-hero__wipe { position: absolute; left: -10%; width: 125%; z-index: 0; pointer-events: none; will-change: transform;
  background: linear-gradient(90deg, rgba(10,10,10,0) 0, var(--black) 9%); }
.dp-hero__wipe::before { content: ""; position: absolute; left: -2%; top: 8%; bottom: 8%; width: 14%;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .75), rgba(var(--accent-rgb), .25) 50%, transparent 78%); filter: blur(16px); }
.dp-hero__name { --rev: 112; }

/* =========================================================
   Websites EN CONSTRUCCIÓN: dos cintas de "PRÓXIMAMENTE" cruzadas que corren (solo transform)
   ========================================================= */
.dp-tcard.is-soon { cursor: not-allowed; }
.dp-tcard.is-soon > .dp-browser { filter: grayscale(.6) brightness(.45) blur(1px); }
.dp-tape { position: absolute; left: -30%; right: -30%; z-index: 3; overflow: hidden; pointer-events: none;
  background: var(--accent); color: var(--black); box-shadow: 0 10px 30px -8px rgba(0,0,0,.8), 0 0 30px rgba(var(--accent-rgb), .35);
  font-family: var(--font-display); font-weight: 900; font-size: clamp(14px, 1.2vw, 20px); letter-spacing: .14em; line-height: 1; padding: .7em 0; }
.dp-tape span { display: inline-block; white-space: nowrap; animation: dpTape 18s linear infinite; }
.dp-tape i { font-style: normal; margin: 0 .6em; opacity: .7; }
.dp-tape--a { top: 34%; rotate: -14deg; }
.dp-tape--b { top: 52%; rotate: 9deg; background: #0d0d0d; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent), 0 10px 30px -8px rgba(0,0,0,.8); }
.dp-tape--b span { animation-direction: reverse; animation-duration: 22s; }
@keyframes dpTape { to { transform: translateX(-50%); } }
.dp-tcard__soon { display: block; margin-top: 6px; font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .dp-tape span { animation: none; } }
@media (min-width: 701px) { .dp-acc { justify-content: center; } }
@media (min-width: 701px) {
  .dp-acc__item .dp-acc__head { width: auto; }
  .dp-acc__item:nth-child(1) .dp-acc__head { justify-content: center !important; margin: 0 auto; }
}
.dp-port__ghost { margin-bottom: -.58em; } /* las piezas se montan sobre la mitad baja del nombre (boceto) */

/* =========================================================
   v26 · ventana: sin nombre de fondo, poco aire arriba; los grupos no heredan el relleno general de <section>
   ========================================================= */
.dp-port__ghost { display: none; }
.dp-port__group { padding: 0; }
.dp-port__scroll { padding-top: clamp(14px, 1.6vw, 22px) !important; }
.dp-port__list .dp-port__title { display: block; font-size: clamp(30px, 4vw, 64px); }
.dp-port__list .dp-port__k { display: block; }
.dp-port__list .dp-port__head { margin-bottom: clamp(14px, 1.6vw, 22px); }

/* índice: bloque compacto centrado (boceto) — filas del mismo ancho, juntas, con aire a los lados */
@media (min-width: 701px) {
  .dp-acc { justify-content: center; row-gap: .04em; }
  .dp-acc__item:nth-child(1) { flex-basis: 100%; }
}
/* Websites en construcción: más oscura y cintas grandes */
.dp-tcard.is-soon > :not(.dp-tape):not(.dp-tcard__foot) { filter: grayscale(.8) brightness(.22) blur(2px); }
.dp-tcard.is-soon::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(80% 70% at 50% 45%, rgba(0,0,0,.25), rgba(0,0,0,.7)); }
.dp-tape { font-size: clamp(22px, 2.2vw, 38px); padding: .55em 0; letter-spacing: .1em; left: -40%; right: -40%; }
.dp-tape--a { top: 30%; rotate: -16deg; }
.dp-tape--b { top: 50%; rotate: 11deg; }
.dp-tcard.is-soon .dp-tcard__foot { z-index: 4; }
.dp-tcard.has-cover > .dp-tape { display: block !important; } /* las cintas siguen aunque el servicio ya tenga portada */

/* =========================================================
   v27 · vista previa simétrica con la ventana + zoom (rueda / clic / arrastre)
   ========================================================= */
.dp-lb { display: block; padding: 0; }
.dp-lb__fig { position: absolute; inset: clamp(56px, 7vh, 80px) clamp(70px, 6vw, 96px); /* mismo margen a izquierda y derecha, arriba y abajo */
  display: grid; place-items: center; overflow: hidden; border-radius: 14px; cursor: zoom-in; touch-action: none; user-select: none; }
.dp-lb__fig img, .dp-lb__fig video { max-width: 100%; max-height: 100%; width: auto; height: auto; -webkit-user-drag: none; will-change: transform; }
.dp-lb__fig.is-zoom { cursor: grab; }
.dp-lb__fig.is-pan { cursor: grabbing; }
.dp-lb__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; }
.dp-lb__nav[data-d="-1"] { left: clamp(10px, 1.4vw, 22px); }
.dp-lb__nav[data-d="1"] { right: clamp(10px, 1.4vw, 22px); }
.dp-lb__x { z-index: 2; top: clamp(10px, 1.4vh, 16px); right: clamp(10px, 1.4vw, 22px); }
.dp-lb__n { bottom: clamp(16px, 2.4vh, 26px); }
.dp-lb__n::after { content: "  ·  rueda o clic para hacer zoom · doble clic para volver"; opacity: .6; }
@media (max-width: 700px) {
  .dp-lb__fig { inset: 64px 14px 70px; }
  .dp-lb__nav { top: auto; bottom: 12px; translate: none; }
  .dp-lb__n::after { content: none; }
}
.dp-lb__fig { height: auto; min-width: 0; } /* la altura la marcan top/bottom: márgenes iguales arriba y abajo */
.dp-lb__fig img, .dp-lb__fig video { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; border-radius: 0; box-shadow: none; }
.dp-lb__fig { display: block; }
.dp-lb__fig img, .dp-lb__fig video { position: absolute; inset: 0; } /* ocupa el marco exacto; contain la centra */
/* con el portafolio abierto, las animaciones CSS decorativas de detrás se detienen */
html.is-port .dp-tape span, html.is-port .grain, html.is-port .dot { animation-play-state: paused; }

/* v28 · cursor: dentro de la ventana solo el cursor personalizado (sin el nativo de zoom/mano encima) */
@media (hover: hover) and (pointer: fine) {
  html.has-cursor .dp-port, html.has-cursor .dp-port *, html.has-cursor .dp-lb__fig, html.has-cursor .dp-lb__fig.is-zoom,
  html.has-cursor .dp-lb__fig.is-pan, html.has-cursor .dp-port__slide, html.has-cursor .dp-port__it { cursor: none; }
}
.dp-lb__n::after { content: "  ·  rueda para hacer zoom · arrastra para moverte · doble clic para volver"; }
@media (max-width: 700px), (hover: none) { .dp-lb__n::after { content: none; } }

/* v29 · iconos: SVG centrados ópticamente; botones a la misma distancia de los bordes de la ventana */
.dp-port__backbtn, .dp-port__x, .dp-lb__x, .dp-lb__nav, .dp-modal__x { display: grid; place-items: center; padding: 0; font-size: 0; line-height: 0; }
.dp-port__backbtn svg, .dp-port__x svg, .dp-lb__x svg, .dp-lb__nav svg, .dp-modal__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.dp-port__bar { padding: 16px; } /* mismo margen arriba que a los lados: el botón no se acerca a la esquina redondeada */
.dp-port__x:hover { transform: rotate(90deg); }
.dp-lb__x { top: 16px; right: 16px; }
.dp-lb__nav[data-d="-1"] { left: 16px; } .dp-lb__nav[data-d="1"] { right: 16px; }

/* v30 · "Siguiente proyecto": miniatura de su portada + nombre + flecha; sin selección de texto */
.dp-port__next { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(14px, 2vw, 26px); user-select: none; -webkit-user-select: none; }
.dp-port__nthumb { width: clamp(70px, 8vw, 120px); aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #161616; clip-path: inset(0 round 12px); }
.dp-port__nthumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.dp-port__ntxt { display: grid; gap: 6px; min-width: 0; }
.dp-port__ntxt b { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 4.2vw, 72px); letter-spacing: -.04em; text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s, transform .6s var(--ease); }
.dp-port__ngo { display: grid; place-items: center; width: clamp(48px, 4.4vw, 64px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); transition: background .35s, border-color .35s, color .35s, transform .6s var(--ease); }
.dp-port__ngo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dp-port__next:hover .dp-port__ntxt b { color: var(--accent); transform: translateX(8px); }
.dp-port__next:hover .dp-port__nthumb img { transform: scale(1.08); }
.dp-port__next:hover .dp-port__ngo { background: var(--accent); border-color: var(--accent); color: var(--black); transform: translateX(6px); }
.dp-port__next b { transform: none; }

/* v31 · "Siguiente proyecto" con el color del siguiente proyecto */
.dp-port__next small { color: var(--nc, inherit); opacity: .8; }
.dp-port__next:hover .dp-port__ntxt b { color: var(--nc, var(--accent)); }
.dp-port__next:hover .dp-port__ngo { background: var(--nc, var(--accent)); border-color: var(--nc, var(--accent)); }
.dp-port__nthumb { box-shadow: 0 0 0 1px rgba(var(--nc-rgb, 255,255,255), .25); transition: box-shadow .4s; }
.dp-port__next:hover .dp-port__nthumb { box-shadow: 0 0 0 2px var(--nc, var(--accent)), 0 10px 30px -8px rgba(var(--nc-rgb, 255,255,255), .6); }
.dp-port__nthumb { clip-path: none; overflow: hidden; isolation: isolate; } /* para que se vea el borde de color */

/* =========================================================
   v33 · Vista previa de la portada enlazada con su proyecto + cursor sin mano nativa
   ========================================================= */
/* el cuadrado personalizado es el único cursor de la página (nada de mano / zoom / prohibido del sistema) */
@media (hover: hover) and (pointer: fine) { html.has-cursor, html.has-cursor * { cursor: none !important; } }
/* pista "Hazme click": texto pequeño junto al cuadrado tras 1,3 s sobre una interacción de la portada */
.cursor .cursor__label { position: absolute; left: calc(100% + 10px); top: 50%; transform: translate(-4px, -50%); white-space: nowrap;
  font-size: 10px; letter-spacing: .14em; color: var(--white); opacity: 0; transition: opacity .3s, transform .4s var(--ease); }
.cursor.is-hint .cursor__label { opacity: 1; transform: translate(0, -50%); }

.dp-modal [hidden] { display: none !important; }
.dp-modal { width: fit-content; max-width: calc(100vw - 32px); }
@media (min-width: 701px) {
  .dp-modal { grid-template-columns: auto clamp(240px, 24vw, 320px); align-items: stretch; }
  .dp-modal__info { align-content: end; padding-top: 56px; }
}
.dp-modal__media img { object-fit: contain; }
.dp-modal__more { margin-top: 14px; display: grid; gap: 10px; }
.dp-modal__mk { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .55; }
.dp-modal__col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 260px; }
.dp-modal__th { position: relative; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #161616;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .45s var(--ease), box-shadow .35s, opacity .35s; }
.dp-modal__th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-modal__th b { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55);
  font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--white); }
.dp-modal__col:has(.dp-modal__th:hover) .dp-modal__th:not(:hover) { opacity: .5; }
.dp-modal__th:hover { transform: scale(1.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.dp-modal__th.is-on { box-shadow: inset 0 0 0 2px var(--accent); }
.dp-modal__go { justify-self: start; margin-top: 14px; }
@media (max-width: 700px) {
  .dp-modal { overflow-y: auto; align-items: start; }
  .dp-modal__info { padding-top: 0; }
  .dp-modal__col { grid-template-columns: repeat(6, 1fr); gap: 6px; }
}

/* =========================================================
   v36 · TODO EL PORTAFOLIO: 2 sliders (9:16 y 16:9) tras los servicios. Solo se anima transform (GSAP en la pista).
   ========================================================= */
.dp-reel { padding: clamp(20px, 3vw, 50px) 0 clamp(60px, 7vw, 110px); overflow: hidden; }
.dp-reel[hidden], .dp-reel__row[hidden] { display: none; }
.dp-reel__head { padding: 0 var(--gutter); }
.dp-reel__row { --gap: clamp(10px, 1.1vw, 16px); margin-top: clamp(26px, 3vw, 46px); }
.dp-reel__row--v { --h: clamp(320px, 54vh, 560px); --ar: 9 / 16; }
.dp-reel__row--h { --h: clamp(190px, 31vh, 340px); --ar: 16 / 9; }
.dp-reel__tag { display: flex; align-items: center; gap: 12px; margin: 0 var(--gutter) 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.dp-reel__tag b { color: var(--accent); font-weight: 500; }
.dp-reel__tag i { flex: 1; height: 1px; background: rgba(255,255,255,.14); }
.dp-reel__tag span { opacity: .5; }
.dp-reel__slide { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; padding: 6px 0; margin: -6px 0; }
.dp-reel__slide.is-drag { cursor: grabbing; }
.dp-reel__track { display: flex; gap: var(--gap); width: max-content; padding-left: var(--gap); will-change: transform; }
.dp-reel__it { position: relative; flex: none; height: var(--h); aspect-ratio: var(--ar); padding: 0; border: 0; border-radius: 16px;
  background: #141414; clip-path: inset(0 round 16px); isolation: isolate; color: inherit;
  transition: transform .6s var(--ease), opacity .45s var(--ease); }
.dp-reel__it img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .8s var(--ease); pointer-events: none; }
.dp-reel__it::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #fff; opacity: 0; }
.dp-reel__it:hover, .dp-reel__it:focus-visible { transform: scale(1.03); z-index: 2; }
.dp-reel__it:hover img, .dp-reel__it:focus-visible img { scale: 1.07; }
.dp-reel__it:hover::before { animation: citemFlash .55s ease-out; }
.dp-reel__it:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* el resto se apaga solo cuando el cursor está de verdad sobre una pieza */
.dp-reel__slide:has(.dp-reel__it:hover) .dp-reel__it:not(:hover) { opacity: .4; }
.dp-reel .dp-trio-actions { margin-top: clamp(30px, 3.5vw, 54px); }
@media (max-width: 700px) {
  .dp-reel__row--v { --h: clamp(300px, 52vh, 440px); }
  .dp-reel__row--h { --h: clamp(150px, 24vh, 220px); }
}
@media (prefers-reduced-motion: reduce) { .dp-reel__it, .dp-reel__it img { transition: none; } .dp-reel__it:hover::before { animation: none; } }

/* v37 · sliders: fila vertical con 4 a la vista (se agranda); sección más pegada a las tarjetas de servicios */
@media (min-width: 701px) {
  .dp-reel__row--v { --h: min(calc((100vw - 5 * var(--gap)) / 4 * 16 / 9), 84vh); }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .dp-reel__row--v { --h: min(calc((100vw - 4 * var(--gap)) / 3 * 16 / 9), 84vh); }
}
.dp-trio-sec { padding-bottom: clamp(20px, 2.4vw, 36px); }
.dp-reel { padding-top: clamp(24px, 3vw, 48px); }
.dp-reel__head { margin-bottom: clamp(22px, 2.6vw, 40px); }
.dp-reel__row { margin-top: clamp(16px, 2vw, 30px); }
/* fila con pocos diseños: quieta, más grande y centrada */
.dp-reel__row.is-static .dp-reel__track { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); width: auto; max-width: min(100%, calc(var(--n, 2) * 760px)); margin-inline: auto; padding: 0 var(--gutter); }
.dp-reel__row.is-static .dp-reel__it { height: auto; width: 100%; }
.dp-reel__row.is-static .dp-reel__slide { cursor: default; }
@media (max-width: 700px) { .dp-reel__row.is-static .dp-reel__track { grid-template-columns: 1fr; } }

/* v38 · texto al pasar el cursor: título del diseño + proyecto, con un degradado a oscuro abajo (solo opacidad) */
.dp-reel__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; gap: 3px; padding: 56px 16px 15px; text-align: left; pointer-events: none;
  background: linear-gradient(to top, rgba(6,6,6,.88), rgba(6,6,6,.55) 45%, transparent); opacity: 0; transform: translateY(6px);
  transition: opacity .45s var(--ease), transform .55s var(--ease); }
.dp-reel__cap b { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.25vw, 20px); letter-spacing: -.02em; line-height: 1.1; color: var(--white); }
.dp-reel__cap small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.dp-reel__it:hover .dp-reel__cap, .dp-reel__it:focus-visible .dp-reel__cap { opacity: 1; transform: none; }
.dp-reel__it img { position: relative; z-index: 0; }
@media (hover: none) { .dp-reel__cap { display: none; } } /* en pantallas táctiles no hay "pasar el cursor": el texto sale en la vista previa */

/* =========================================================
   v38 · CÓMO TRABAJO: mapa de ruta (4 pasos con icono sobre una línea que se llena con el scroll)
   ========================================================= */
.dp-process { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(70px, 8vw, 120px); }
.dp-road { --ic: clamp(60px, 5vw, 76px); --p: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; max-width: 1180px; margin: 0 auto; }
.dp-road__line { position: absolute; z-index: 0; top: calc(var(--ic) / 2 - 1px); left: 12.5%; right: 12.5%; height: 2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 8px, transparent 8px 14px); overflow: hidden; }
.dp-road__fill { position: absolute; inset: 0; background: var(--accent); box-shadow: 0 0 14px rgba(var(--accent-rgb), .9); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.dp-road__step { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 0 clamp(8px, 1.4vw, 22px); text-align: center; }
.dp-road__ic { display: grid; place-items: center; width: var(--ic); height: var(--ic); border-radius: 50%; background: #0d0d0d; color: rgba(255,255,255,.7);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); transition: color .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease), transform .6s var(--ease); }
.dp-road__ic svg { width: 38%; height: 38%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dp-road__n { margin-top: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; opacity: .5; transition: color .5s, opacity .5s; }
.dp-road__step b { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -.03em; line-height: 1.05; }
.dp-road__step p { max-width: 24ch; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5; opacity: .66; }
/* paso alcanzado por la línea: se enciende */
.dp-road__step.is-on .dp-road__ic { color: var(--accent); background: #0d0d0d; box-shadow: inset 0 0 0 2px var(--accent), 0 0 28px -4px rgba(var(--accent-rgb), .75); }
.dp-road__step.is-on .dp-road__n { color: var(--accent); opacity: 1; }
.dp-road__step:hover .dp-road__ic { transform: translateY(-4px) scale(1.06); color: var(--black); background: var(--accent); box-shadow: 0 0 34px -2px rgba(var(--accent-rgb), .85); }
.dp-road__end { margin-top: clamp(40px, 5vw, 70px); }
@media (max-width: 760px) { /* móvil: ruta vertical, icono a la izquierda */
  .dp-road { grid-template-columns: 1fr; gap: 34px; max-width: 460px; }
  .dp-road__line { top: calc(var(--ic) / 2); bottom: calc(var(--ic) / 2); left: calc(var(--ic) / 2 - 1px); right: auto; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.2) 0 8px, transparent 8px 14px); }
  .dp-road__fill { transform-origin: 50% 0; transform: scaleY(var(--p)); }
  .dp-road__step { grid-template-columns: var(--ic) 1fr; justify-items: start; text-align: left; column-gap: 20px; row-gap: 4px; padding: 0; }
  .dp-road__ic { grid-row: 1 / span 3; }
  .dp-road__n { margin-top: 2px; }
  .dp-road__step p { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .dp-road__ic, .dp-road__n { transition: none; } .dp-road__step:hover .dp-road__ic { transform: none; } }

/* =========================================================
   v39 · Colores: botón verde = texto negro (en todos los estados) · pie de página · sliders · mapa de ruta
   ========================================================= */
/* botón principal de contacto: texto negro; al pasar el cursor, blanco con texto negro (no rojo) */
body[data-page="products"] .cta__btn { color: var(--black); box-shadow: 0 16px 40px -14px rgba(var(--accent-rgb), .7); }
body[data-page="products"] .cta__btn:hover { background: var(--white); color: var(--black); }
body[data-page="products"] .cta__btn-go { background: var(--black); color: var(--accent); }
/* pie: el parpadeo del nombre gigante deja el texto del color del fondo (transparencia, como en Miniaturas) y no blanco.
   Botón de subir: sobre el pie verde pasa a negro con la flecha verde (antes flecha negra sobre negro: se perdía). */
body[data-page="products"] .to-top:hover { background: var(--white); color: var(--black); }
body[data-page="products"] .to-top.on-footer { background: var(--black); color: var(--accent); box-shadow: 0 14px 34px -12px rgba(0,0,0,.6), 0 0 0 2px var(--accent); }
body[data-page="products"] .to-top.on-footer:hover { background: var(--white); color: var(--black); }
/* barra de navegación y redes: fondo verde al pasar el cursor = texto/iconos negros */
body[data-page="products"] .nav__logo:hover, body[data-page="products"] .nav__links:hover, body[data-page="products"] .nav__links:hover a { color: var(--black); }
body[data-page="products"] .socials a:hover svg { fill: var(--black); }
body[data-page="products"] .btn--light:hover { color: var(--black); }

/* slider horizontal: 3 diseños a la vista (grandes); tablet 2; móvil como antes */
@media (min-width: 1101px) { .dp-reel__row--h { --h: min(calc((100vw - 4 * var(--gap)) / 3 * 9 / 16), 72vh); } }
@media (min-width: 701px) and (max-width: 1100px) { .dp-reel__row--h { --h: calc((100vw - 3 * var(--gap)) / 2 * 9 / 16); } }

/* mapa de ruta: iconos más grandes e interactivos */
.dp-road { --ic: clamp(92px, 8.4vw, 128px); }
.dp-road__step { cursor: pointer; outline: none; }
.dp-road__ic { position: relative; }
.dp-road__ic svg { width: 42%; height: 42%; }
.dp-road__step b { font-size: clamp(22px, 2.1vw, 34px); transition: color .4s var(--ease); }
.dp-road__step p { max-width: 22ch; font-size: clamp(15px, 1.15vw, 18px); }
/* onda que sale del icono al encenderse y al pulsar */
.dp-road__ic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .95); opacity: 0; pointer-events: none; }
.dp-road__step.is-ping .dp-road__ic::after { animation: dpRoadPing .9s ease-out; }
@keyframes dpRoadPing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }
/* hover / foco: el icono sube y crece, se llena de verde y su trazo se vuelve a dibujar */
.dp-road__step:hover .dp-road__ic, .dp-road__step:focus-visible .dp-road__ic { transform: translateY(-8px) scale(1.1); color: var(--black); background: var(--accent); box-shadow: 0 0 44px -2px rgba(var(--accent-rgb), .9); }
.dp-road__step:hover .dp-road__ic svg *, .dp-road__step:focus-visible .dp-road__ic svg * { stroke-dasharray: 1; animation: dpRoadDraw .9s var(--ease) both; }
@keyframes dpRoadDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.dp-road__step:hover b, .dp-road__step:focus-visible b { color: var(--accent); }
.dp-road__step:hover p, .dp-road__step:focus-visible p { opacity: .95; }
.dp-road__step:active .dp-road__ic { transform: translateY(-4px) scale(.96); }
@media (max-width: 760px) { .dp-road { --ic: 84px; } }
@media (prefers-reduced-motion: reduce) { .dp-road__step.is-ping .dp-road__ic::after, .dp-road__step:hover .dp-road__ic svg * { animation: none; } }

/* =========================================================
   v40 · Revisión final (móvil, accesibilidad táctil)
   ========================================================= */
/* "Siguiente proyecto": en móvil el nombre baja de línea en vez de cortarse con "…" */
@media (max-width: 700px) {
  .dp-port__ntxt b { white-space: normal; overflow: visible; text-overflow: clip; font-size: clamp(24px, 7.4vw, 34px); line-height: 1.02; overflow-wrap: anywhere; }
}

/* =========================================================
   v41 · RENDIMIENTO (GPU): ningún desenfoque, sombra-filtro ni máscara vive en una capa que se mueve o se funde.
   Regla: la capa (will-change) solo se mueve / cambia de opacidad; el efecto va en un hijo sin capa propia, que se
   pinta UNA vez dentro de su textura. Antes la GPU recalculaba esos filtros en cada fotograma (scroll, parpadeos, hover).
   ========================================================= */
/* firma CALEB: la capa (p) solo se mueve y parpadea; desenfoque, brillo y máscara LED van en el texto (span) */
.dp-hero__name { filter: none; text-shadow: none; -webkit-mask-image: none; mask-image: none; padding: 0; color: transparent; }
.dp-hero__name > span { display: block; padding: var(--pad); color: var(--accent); filter: blur(9px);
  text-shadow: 0 0 30px rgba(var(--accent-rgb), var(--wg, .6)), 0 0 90px rgba(var(--accent-rgb), calc(var(--wg, .6) * .5));
  -webkit-mask-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 1px, #000 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.5) 0 1px, #000 1px 4px),
    linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent),
    linear-gradient(0deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  -webkit-mask-composite: source-in, source-in, source-in; mask-composite: intersect; }
@media (max-width: 700px) { .dp-hero__name { filter: none; } .dp-hero__name > span { filter: blur(4px); } }

/* foto: el agrandado al pasar el cursor lo hace un contenedor (una capa); las imágenes ya no escalan cada una.
   Variantes "desenfocada" y "apagada": desenfoque, contraste y fundido ya horneados en el archivo (AVIF) */
.dp-hero__zoom { position: relative; display: flex; justify-content: center; align-items: flex-start; transform-origin: 50% 28%; will-change: transform;
  transition: scale 2.4s cubic-bezier(.25, .1, .25, 1); }
.dp-hero__photo.is-hover .dp-hero__zoom { scale: 1.04; transition-duration: 1.8s; transition-timing-function: cubic-bezier(.33, 0, .2, 1); }
.dp-hero__photo .dp-hero__zoom img { scale: none !important; }
body[data-page="products"] .dp-hero__photo img.dp-hero__blur, body[data-page="products"] .dp-hero__photo img.dp-hero__off:not(.is-raw) {
  filter: none; -webkit-mask-image: none; mask-image: none; }
body[data-page="products"] .dp-hero__photo img.dp-hero__blur { transition: opacity 2.4s cubic-bezier(.25, .1, .25, 1); }
body[data-page="products"] .dp-hero__photo.is-hover img.dp-hero__blur { transition: opacity 1.8s cubic-bezier(.33, 0, .2, 1); }

/* cajas que caen: el agrandado lo hace GSAP en la capa de la caja (ver script.js); el relleno ya no escala */
.dp-drop b, .dp-drop.is-hover b { scale: none; transition: none; }

/* corchetes del índice: la capa (i) solo se mueve; borde, desenfoque y brillo van en su ::before */
.dp-sel i { border: 0; filter: none; }
.dp-sel i::before { content: ""; position: absolute; inset: 0; border: .07em solid currentColor;
  filter: blur(.6px) drop-shadow(0 0 10px rgba(var(--accent-rgb), .8)) drop-shadow(0 0 30px rgba(var(--accent-rgb), .4)); }
.dp-sel i:first-child::before { border-right: 0; }
.dp-sel i:last-child::before { border-left: 0; }

/* índice: las capas nítida / desenfocada solo cambian de opacidad; el desenfoque va en su hijo .fx */
.dp-acc__s, .dp-acc__b { filter: none !important; }
.dp-acc__s > .fx, .dp-acc__b > .fx { display: block; }
.dp-acc__s > .fx { filter: blur(.6px); }
.dp-acc__b > .fx { filter: blur(.08em); }

/* tarjetas de servicio: las demás se atenúan solo con opacidad (antes desenfoque + brillo animados mientras la tarjeta
   cambiaba de ancho: la GPU tenía que redesenfocar dos tarjetas grandes en cada fotograma). Sombra sin transición. */
.dp-tcard { transition: flex-grow .9s var(--ease), opacity .5s var(--ease); }
.dp-trio:hover .dp-tcard:not(:hover), .dp-trio:has(.dp-tcard:hover) .dp-tcard:not(:hover) { filter: none; opacity: .42; }
.dp-tcard { contain: layout; } /* el cambio de ancho no recalcula el resto de la página */

/* v42 · portafolio: el oscurecimiento del resto al pasar el cursor SE MANTIENE, pero el scroll (y entrar a una
   lista/proyecto) lo reinicia: .is-still lo apaga hasta que el cursor se mueve y se pone sobre otro diseño (JS: rearm). */
.dp-port.is-still .dp-port__blocks:has(.dp-port__it:hover) .dp-port__it:not(:hover) { filter: none; }
.dp-port.is-still .dp-port__grid:has(.dp-port__tile:hover) .dp-port__tile:not(:hover) img { filter: none; }