/* Damos en el Blanco — CSS de seccions (generat). */

/* ==== about.css ==== */
/* Damos en el Blanco — pantalla "Nosotros" (about)
   Adaptado de ABOUT_CSS del DS. Usa tokens del tema; clases propias
   prefijadas con deb-about-. Los hooks (.deb-reveal, .deb-splittitle,
   .deb-countup) y los componentes (.deb-kicker, .deb-card) los aporta
   el tema — aquí sólo se estila el layout de la sección. */

.deb-about {
  padding: clamp(3rem, 7vw, 6rem) var(--page-margin) 0;
}

/* Título principal (SplitTitle) */
.deb-about-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: var(--space-6) 0 0;
}

/* Intro */
.deb-about-intro {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 64ch;
  margin: var(--space-8) 0 0;
}

/* Stats — 3 columnas con hairlines */
.deb-about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-block: 1px solid var(--border);
  margin-top: var(--space-16);
}
.deb-about-stat {
  background: var(--bg);
  padding: clamp(2rem, 4vw, 3.4rem) var(--space-6);
}
.deb-about-stat-n {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-strong);
}
.deb-about-stat-l {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 10px;
}

/* Equipo — retratos 3:4 grayscale -> color en hover */
.deb-about-team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: var(--space-16);
}
.deb-about-member {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.deb-about-portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-surface);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-image: repeating-linear-gradient(135deg, transparent 0 13px, rgba(255, 255, 255, 0.03) 13px 14px);
  transition: transform var(--dur) var(--ease-standard);
}
.deb-about-member:hover .deb-about-portrait {
  transform: translateY(-4px);
}
.deb-about-portrait span {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 3.4rem;
  color: var(--text-subtle);
  letter-spacing: 0.04em;
}
.deb-about-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04) brightness(0.94);
  transition: filter var(--dur-slow) var(--ease-standard);
}
.deb-about-member:hover .deb-about-portrait img {
  filter: grayscale(0) contrast(1) brightness(1);
}
.deb-about-member-name {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-xl);
  line-height: 1.05;
  color: var(--text-strong);
  margin: 0;
}
.deb-about-member-role {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 6px 0 0;
}
.deb-about-member-bio {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-muted);
  margin: var(--space-3) 0 0;
}

/* Cita grande */
.deb-about-quote {
  margin: var(--space-24) auto 0;
  max-width: 22ch;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.deb-about-quote-cite {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-top: var(--space-6);
}

/* Cómo trabajamos — 3 principios en cards inset */
.deb-about-how {
  margin-top: var(--space-24);
}
.deb-about-princ {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: var(--space-12);
}
.deb-about-princ .deb-card {
  padding: var(--space-8);
}
.deb-about-princ-t {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-lg);
  line-height: 1.1;
  color: var(--text-strong);
  margin: var(--space-6) 0 var(--space-3);
}
.deb-about-princ-d {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 820px) {
  .deb-about-team,
  .deb-about-princ,
  .deb-about-stats {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .deb-about-team,
  .deb-about-princ,
  .deb-about-stats {
    grid-template-columns: 1fr;
  }
}

/* ==== blog.css ==== */
/* Damos en el Blanco — pantalla BLOG (archive + single + prosa)
   Adaptado del lenguaje del DS (WorkScreen / ProjectScreen). Usa tokens del
   tema (tokens/*.css) y clases de componente .deb-* ya existentes (.deb-kicker,
   .deb-tag, .deb-alink). Aquí solo el CSS específico de la pantalla, con
   prefijos deb-blog- (listado), deb-post- (single) y .deb-prose (cuerpo). */

/* =================================================================== */
/* ARCHIVE — listado de artículos                                       */
/* =================================================================== */
.deb-blog {
  padding: clamp(3rem, 7vw, 6rem) var(--page-margin) 0;
}

/* Título (H1, hook .deb-splittitle) */
.deb-blog__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: .92;
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
  margin: var(--space-5) 0 0;
}

/* Entradilla mono */
.deb-blog__intro {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 52ch;
  margin: var(--space-6) 0 0;
}

/* Rejilla (en producción: Loop Grid) */
.deb-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 28px;
  margin-top: var(--space-16);
}

/* ---- Card de artículo -------------------------------------------- */
.deb-blog-card {
  display: flex;
  flex-direction: column;
  color: var(--text);
}

.deb-blog-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-surface);
  background: var(--surface-raised);
  aspect-ratio: 16 / 9;
}
.deb-blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.05) brightness(.92);
  transition: transform var(--dur-slow) var(--ease-standard),
              filter var(--dur-slow) var(--ease-standard);
}
.deb-blog-card:hover .deb-blog-card__media img {
  transform: scale(1.04);
  filter: grayscale(0) contrast(1) brightness(1);
}

.deb-blog-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

/* Categoría (usa .deb-tag) — sin margen extra, ya lo da el gap */
.deb-blog-card__cat {
  margin-bottom: var(--space-1);
}

.deb-blog-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-xl);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}
.deb-blog-card__title a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.deb-blog-card__title a:hover {
  opacity: .62;
}

.deb-blog-card__excerpt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.deb-blog-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.deb-blog-card__date {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
}

@media (max-width: 900px) {
  .deb-blog__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .deb-blog__grid { grid-template-columns: 1fr; }
}

/* =================================================================== */
/* SINGLE — artículo individual                                         */
/* =================================================================== */
.deb-post {
  padding: clamp(3rem, 7vw, 6rem) var(--page-margin) 0;
}

/* Columna estrecha para cabecera y cuerpo; portada rompe un poco más ancha */
.deb-post__inner {
  max-width: 820px;
  margin-inline: auto;
}

.deb-post__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.1rem, 5.2vw, 4.2rem);
  line-height: 1.0;
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
  text-wrap: balance;
  margin: var(--space-5) 0 0;
}

.deb-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.deb-post__meta time { color: var(--text-muted); }

/* Portada / imagen destacada */
.deb-post__cover {
  max-width: 1080px;
  margin: var(--space-16) auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface-raised);
}
.deb-post__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.92);
}

/* Pie del artículo */
.deb-post__foot {
  max-width: var(--measure);
  margin: var(--space-16) auto 0;
  padding: var(--space-8) 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* =================================================================== */
/* PROSA — cuerpo de lectura (medida 68ch)                              */
/* =================================================================== */
.deb-prose {
  max-width: var(--measure);
  margin: var(--space-16) auto 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--text);
}

/* Entradilla / standfirst */
.deb-prose__lead {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0 0 1.6em;
}

.deb-prose p {
  margin: 0 0 1.4em;
  text-wrap: pretty;
}

.deb-prose h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 1.9em 0 .55em;
}
.deb-prose h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-xl);
  line-height: 1.15;
  color: var(--text-strong);
  margin: 1.6em 0 .5em;
}

.deb-prose strong { color: var(--text-strong); }

.deb-prose a {
  color: var(--text-strong);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--border-strong);
  transition: text-decoration-color var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
}
.deb-prose a:hover {
  text-decoration-color: currentColor;
  opacity: .85;
}
/* Marca de enlace externo */
.deb-prose a[target="_blank"]::after {
  content: " \2197";
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: .85em;
}

/* Listas — marcadores propios, mono y sobrios */
.deb-prose ul,
.deb-prose ol {
  margin: 0 0 1.4em;
  padding: 0;
}
.deb-prose ul { list-style: none; }
.deb-prose ul > li {
  position: relative;
  padding-left: 1.4em;
  margin: .5em 0;
}
.deb-prose ul > li::before {
  content: "\2014"; /* em dash */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text-subtle);
  font-family: var(--font-mono);
}
.deb-prose ol {
  list-style: none;
  counter-reset: deb-ol;
}
.deb-prose ol > li {
  position: relative;
  padding-left: 2.1em;
  margin: .7em 0;
  counter-increment: deb-ol;
}
.deb-prose ol > li::before {
  content: counter(deb-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .05em;
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
}
/* Sub-listas dentro del plan */
.deb-prose li > ul {
  margin: .6em 0 .2em;
}
.deb-prose li > ul > li {
  color: var(--text-muted);
}

/* Cita destacada (pull quote) */
.deb-prose blockquote {
  margin: var(--space-10) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  line-height: 1.18;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.deb-prose blockquote cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.deb-prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-12) 0;
}

@media (max-width: 800px) {
  .deb-post__cover { border-radius: var(--radius-md); }
}

/* ==== chrome.css ==== */
/* Damos en el Blanco — CHROME (header + footer)
   Adaptado de NavBar.js (NAV_CSS) y Footer.js (FOOT_CSS) del website-kit del DS.
   Usa tokens del tema (tokens/*.css). NO redefine clases de componente ya
   cargadas por el tema (.deb-btn, .deb-lang, .deb-alink): aquí solo van las
   clases propias del chrome .deb-nav* / .deb-menu* / .deb-foot*.
   Hooks JS (deb.js): scroll → .deb-nav--scrolled; burger → .deb-menu.open;
   .deb-foot-phrase__text[data-deb-rotate] rota el banco de frases. */

/* ============================ HEADER / NAV ============================ */
.deb-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 18px var(--page-margin);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; /* hairline oculta hasta hacer scroll */
  transition: border-color var(--dur) var(--ease-standard);
}
/* deb.js añade --scrolled al bajar → aparece la hairline inferior */
.deb-nav--scrolled { border-bottom-color: var(--border); }

.deb-nav__logo-link {
  display: block;
  line-height: 0;
  flex: none;
}
.deb-nav__logo {
  height: 24px;
  width: auto;
  display: block;
}
.deb-nav__logo-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
  border-radius: 2px;
}

.deb-nav__links {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}
.deb-nav__link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .05em;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 0;
  transition: color var(--dur-fast) var(--ease-standard);
}
.deb-nav__link:hover { color: var(--text-strong); }
/* Activo: clase propia, aria-current, o .current-menu-item que añade WordPress */
.deb-nav__link--active,
.deb-nav__link[aria-current="page"],
.deb-nav__links .current-menu-item > a,
.deb-nav__links .current-menu-item.deb-nav__link { color: var(--text-strong); }

.deb-nav__right {
  display: flex;
  gap: var(--space-5);
  align-items: center;
}

.deb-nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.deb-nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-strong);
  transition: transform var(--dur) var(--ease-standard), opacity var(--dur) var(--ease-standard);
}
.deb-nav__burger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
  border-radius: 4px;
}

@media (max-width: 1120px) {
  .deb-nav { gap: var(--space-5); }
  .deb-nav__links { gap: var(--space-4); }
  .deb-nav__right .deb-lang { display: none; } /* queda disponible en el overlay */
}
@media (max-width: 980px) {
  .deb-nav__links { display: none; }
  .deb-nav__right .deb-btn { display: none; }
  .deb-nav__burger { display: flex; }
}

/* ===================== OVERLAY MÓVIL A PANTALLA COMPLETA ===================== */
.deb-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px var(--page-margin) var(--space-10);
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-standard);
}
.deb-menu.open {
  opacity: 1;
  pointer-events: auto;
}
.deb-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.deb-menu__logo {
  height: 24px;
  width: auto;
  display: block;
}
.deb-menu__x {
  background: none;
  border: 0;
  color: var(--text-strong);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}
.deb-menu__x:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
  border-radius: 4px;
}

.deb-menu__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.deb-menu__link {
  display: block;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  padding: 4px 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.deb-menu.open .deb-menu__link { opacity: 1; transform: none; }
/* Entrada escalonada de los enlaces (equivale al transitionDelay del DS) */
.deb-menu.open .deb-menu__link:nth-child(1) { transition-delay: 80ms; }
.deb-menu.open .deb-menu__link:nth-child(2) { transition-delay: 140ms; }
.deb-menu.open .deb-menu__link:nth-child(3) { transition-delay: 200ms; }
.deb-menu.open .deb-menu__link:nth-child(4) { transition-delay: 260ms; }
.deb-menu.open .deb-menu__link:nth-child(5) { transition-delay: 320ms; }
.deb-menu__link small {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-subtle);
  margin-right: 14px;
  vertical-align: middle;
}

.deb-menu__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.deb-menu__email {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-subtle);
  text-decoration: none;
}
.deb-menu__email:hover { color: var(--text); }

/* ================================ FOOTER ================================ */
.deb-foot {
  border-top: 1px solid var(--border);
  padding: var(--space-20) var(--page-margin) var(--space-10);
  margin-top: var(--space-24);
}

/* Frase rotatoria (deb.js intercambia el texto de .deb-foot-phrase__text) */
.deb-foot-phrase {
  margin: 0 0 var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* "humo" tachado: barra en ángulo, calcada del banco de frases del DS */
.deb-foot-strike {
  position: relative;
  display: inline-block;
  color: var(--text-subtle);
  text-decoration: none;
}
.deb-foot-strike::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -4%;
  top: 47%;
  height: 2px;
  background: var(--text-strong);
  transform: rotate(-2.5deg);
}
.deb-foot-phrase__arrow { display: inline-block; }

/* CTA gigante */
.deb-foot__cta {
  display: inline-flex;
  align-items: center;
  gap: .15em;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: .95;
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.deb-foot__cta:hover { opacity: .6; }
.deb-foot__cta-arrow {
  display: inline-block;
  transition: transform var(--dur) var(--ease-nudge);
}
.deb-foot__cta:hover .deb-foot__cta-arrow { transform: translate(8px, -8px); }
.deb-foot__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
  border-radius: 4px;
}

.deb-foot__grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-top: var(--space-16);
}
.deb-foot__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.deb-foot__contact a {
  color: var(--text);
  text-decoration: none;
}
.deb-foot__contact a:hover { opacity: .6; }
.deb-foot__place { color: var(--text-subtle); }

.deb-foot__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-subtle);
}
.deb-foot__meta a {
  color: var(--text-subtle);
  text-decoration: none;
}
.deb-foot__meta a:hover { color: var(--text); }
.deb-foot__egg { cursor: pointer; }

@media (max-width: 700px) {
  .deb-foot__meta { text-align: left; }
}

/* Respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .deb-menu__link {
    transform: none;
    transition: opacity .01ms;
  }
  .deb-foot__cta-arrow,
  .deb-nav__burger span { transition: none; }
}

/* ==== contact.css ==== */
/* Damos en el Blanco — pantalla CONTACTO
   Adaptado de CONTACT_CSS (ds/templates/website-kit/ContactScreen.js).
   Usa tokens del tema (tokens/*.css) y clases de componente .deb-* ya
   existentes (.deb-kicker, .deb-tag, .deb-field/.deb-input/.deb-textarea,
   .deb-btn). Aquí solo el CSS específico de sección, con prefijo deb-contact-. */

.deb-contact {
  padding: clamp(3rem, 7vw, 6rem) var(--page-margin) 0;
}

/* Título (H1, hook .deb-splittitle) */
.deb-contact-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: .92;
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
  margin: var(--space-5) 0 0;
}

/* Entradilla */
.deb-contact-intro {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--text-muted);
  margin: var(--space-4) 0 0;
  max-width: 46ch;
  line-height: 1.6;
}

/* Rejilla: datos (izq) + formulario (der) */
.deb-contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  margin-top: var(--space-16);
  align-items: start;
}

/* Columna de datos */
.deb-contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.deb-contact-lbl {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 8px;
}
.deb-contact-item a,
.deb-contact-item p {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-xl);
  color: var(--text-strong);
  text-decoration: none;
  margin: 0;
}
.deb-contact-item a {
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.deb-contact-item a:hover {
  opacity: .6;
}

/* Columna de formulario */
.deb-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.deb-contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

@media (max-width: 800px) {
  .deb-contact-grid { grid-template-columns: 1fr; }
  .deb-contact-row  { grid-template-columns: 1fr; }
}

/* ==== home.css ==== */
/* Damos en el Blanco — Home (Inicio) · estilos específicos de pantalla.
   Reutiliza los tokens globales (tokens/*.css) y las clases de componente ya
   cargadas por el tema hijo (.deb-btn, .deb-kicker, .deb-sh, .deb-card,
   .deb-pcard, .deb-tag, .deb-alink, .deb-marquee). Aquí solo viven las reglas
   con scope .deb-home-* y los hooks exclusivos de la home (.deb-svc del claim,
   .deb-rv-layer). El reveal en scroll (.deb-reveal) y el count-up (.deb-countup)
   los aporta deb.js/estilos globales.
   Interacción estrella: al pasar el cursor por un servicio del claim se revela
   ese servicio detrás del texto — deb.js alterna .on/.active/.has-active/.dim. */

.deb-home{--pm:var(--page-margin)}

/* ============================= HERO ============================= */
.deb-home-hero{position:relative;overflow:hidden;min-height:min(88vh,860px);display:flex;flex-direction:column;justify-content:center;gap:var(--space-8);padding:clamp(4rem,9vw,7rem) var(--pm)}
.deb-home-hero__bg{position:absolute;inset:0;z-index:0;background:var(--bg)}

/* Capas de foto reveladas por servicio (hook: .deb-rv-layer[data-svc]) */
.deb-home-hero .deb-rv-layer{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease-standard);pointer-events:none;overflow:hidden}
.deb-home-hero .deb-rv-layer.on{opacity:1}
.deb-home-rv__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04) brightness(.85);transform:scale(1.1);transition:transform 6.5s var(--ease-out)}
.deb-home-hero .deb-rv-layer.on .deb-home-rv__img{transform:scale(1)}
.deb-home-rv__grid{position:absolute;inset:-2px;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:66px 66px;animation:deb-home-rv-drift 20s linear infinite}
@keyframes deb-home-rv-drift{to{background-position:66px 66px}}
.deb-home-rv__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,19,.35) 0%,rgba(20,20,19,.62) 100%)}
.deb-home-rv__num{position:absolute;left:var(--pm);top:clamp(2rem,10vh,7rem);font-family:var(--font-mono);font-size:clamp(.85rem,1.6vw,1.15rem);letter-spacing:.28em;color:rgba(255,255,255,.55)}
.deb-home-rv__word{position:absolute;right:4vw;bottom:3vh;font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(4rem,17vw,16rem);line-height:.78;letter-spacing:-.05em;color:rgba(255,255,255,.055);white-space:nowrap;transform:translateX(70px);transition:transform .7s var(--ease-out)}
.deb-home-hero .deb-rv-layer.on .deb-home-rv__word{transform:none}

.deb-home-hero__row{position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--space-8)}
.deb-home-claim{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(2.1rem,5.3vw,5.1rem);line-height:1.02;letter-spacing:var(--tracking-tighter);color:var(--text-strong);margin:0;max-width:22ch;text-wrap:balance;cursor:default}
.deb-home-claim__t{transition:opacity .35s var(--ease-standard)}
.deb-home-claim .deb-svc{cursor:pointer;position:relative;white-space:nowrap;transition:opacity .35s var(--ease-standard)}
.deb-home-claim.has-active .deb-home-claim__t,
.deb-home-claim.has-active .deb-svc{opacity:.28}
.deb-home-claim.has-active .deb-svc.active{opacity:1}
.deb-home-claim .deb-svc::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.055em;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-standard)}
.deb-home-claim .deb-svc:hover::after,
.deb-home-claim .deb-svc.active::after{transform:scaleX(1)}
.deb-home-hero__sub{font-family:var(--font-mono);font-size:clamp(.9rem,1.4vw,1.05rem);line-height:1.6;color:var(--text-muted);max-width:52ch;margin:0;transition:opacity .4s}
.deb-home-hero.dim .deb-home-hero__sub{opacity:.5}
.deb-home-hero__ctas{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-2)}

/* Cursor "Ver" que sigue al puntero sobre el claim (posición vía JS) */
.deb-home-hero__cursor{position:absolute;z-index:4;top:0;left:0;pointer-events:none;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:7px 11px;border-radius:var(--radius-pill);transform:translate(-50%,-150%);opacity:0;transition:opacity .2s var(--ease-standard);will-change:left,top}
.deb-home-hero__cursor.on{opacity:1}
@media(hover:none){.deb-home-hero__cursor{display:none}}

/* ============================ SECCIONES ============================ */
.deb-home-sec{padding:var(--section-y) var(--pm)}
.deb-home-sec--tight{padding-top:0}

/* Rejilla de servicios (6 tarjetas) */
.deb-home-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:var(--space-12)}
.deb-home-svc-grid>.deb-reveal{display:grid}
.deb-home-service{display:flex;flex-direction:column;gap:var(--space-3);min-height:190px;position:relative;overflow:hidden;padding:var(--space-6);text-decoration:none;color:var(--text)}
.deb-home-service>*{position:relative;z-index:1}
.deb-home-service__ph{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.5);opacity:0;transform:scale(1.06);transition:opacity .45s var(--ease-standard),transform 2.5s var(--ease-out);pointer-events:none}
.deb-home-service:hover .deb-home-service__ph{opacity:.3;transform:scale(1)}
.deb-home-service__spacer{flex:1}
.deb-home-service__t{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-xl);line-height:1.05;letter-spacing:var(--tracking-tight);color:var(--text-strong);margin:0}
.deb-home-service__d{font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.55;color:var(--text-muted);margin:0}

/* Rejilla de proyectos destacados (3 ProjectCard) */
.deb-home-work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:var(--space-12)}

@media(max-width:900px){.deb-home-svc-grid,.deb-home-work-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.deb-home-svc-grid,.deb-home-work-grid{grid-template-columns:1fr}}

/* ======================== LOGOS DE CLIENTES ======================== */
.deb-home-logos{padding:var(--space-10) 0;border-block:1px solid var(--border)}
.deb-home-logos__img{height:30px;width:auto;opacity:.75;filter:grayscale(1) brightness(1.6)}
.deb-home-dupe{display:contents}

/* ============================= STATS ============================= */
.deb-home-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-block:1px solid var(--border)}
.deb-home-stat{background:var(--bg);padding:clamp(2.5rem,5vw,4.5rem) var(--pm)}
.deb-home-stat__n{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(2.4rem,5.5vw,4.6rem);line-height:1;letter-spacing:-.03em;color:var(--text-strong)}
.deb-home-stat__l{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-top:12px;max-width:22ch}
@media(max-width:760px){.deb-home-stats{grid-template-columns:1fr 1fr}}

/* ======================== MANIFIESTO CINÉTICO ======================== */
.deb-home-manifesto{padding:clamp(3rem,7vw,6rem) 0;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:10px;overflow:hidden}
.deb-home-mword{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(3rem,9vw,8.5rem);line-height:.92;letter-spacing:-.04em;white-space:nowrap}
.deb-home-mword--fill{color:var(--text-strong)}
.deb-home-mword--line{color:transparent;-webkit-text-stroke:1.2px var(--ink-500)}
.deb-home-mstar{color:var(--text-subtle);font-size:.42em;vertical-align:middle;margin:0 .35em}

/* ============================ SHOWREEL ============================ */
.deb-home-reel{position:relative;display:block;margin:var(--section-y) var(--pm);border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/9;background:var(--surface-raised);text-decoration:none}
.deb-home-reel__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.9)}
.deb-home-reel__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,15,.38),rgba(15,15,15,.12) 42%,rgba(15,15,15,.58));pointer-events:none}
.deb-home-reel__chrome{position:absolute;inset:0;padding:clamp(1.5rem,3vw,3rem);display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.deb-home-reel__k{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.deb-home-reel__play{align-self:center;margin:auto 0;width:clamp(72px,9vw,110px);height:clamp(72px,9vw,110px);border-radius:50%;border:1px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;color:#fff;font-size:clamp(20px,3vw,30px);background:rgba(0,0,0,.15);backdrop-filter:blur(3px)}
.deb-home-reel__t{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(1.6rem,3.4vw,2.8rem);color:#fff;letter-spacing:-.02em;margin:0;max-width:16ch}

/* ===================== MOVIMIENTO REDUCIDO (home) ===================== */
@media(prefers-reduced-motion:reduce){
  .deb-home-rv__img,
  .deb-home-rv__word,
  .deb-home-rv__grid{transition:none;animation:none;transform:none}
}

/* ==== hosting.css ==== */
/* Damos en el Blanco — pantalla HOSTING GESTIONADO
   Adaptado de HOME_CSS / SVCS_CSS (ds/templates/website-kit/) y del componente
   SectionHeading. Usa tokens del tema (tokens/*.css) y clases de componente
   .deb-* ya existentes (.deb-kicker, .deb-btn, .deb-card, .deb-tag, .deb-sh).
   Aquí solo el CSS específico de sección, con prefijo deb-hosting-. */

/* ============================== HERO ============================== */
.deb-hosting-hero {
  padding: clamp(3rem, 7vw, 6rem) var(--page-margin) 0;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.deb-hosting-hero-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

/* Título (H1, hook .deb-splittitle) */
.deb-hosting-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: .94;
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
  margin: 0;
}

/* Entradilla */
.deb-hosting-lead {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 46ch;
  margin: 0;
}

/* CTAs */
.deb-hosting-ctas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Fila de garantías (voz técnica, mono) */
.deb-hosting-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-2) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
  width: 100%;
}
.deb-hosting-trust li {
  display: flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.deb-hosting-trust li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-subtle);
  flex: none;
}

/* Imagen del hero (monocromo, como el resto del site) */
.deb-hosting-hero-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-raised);
}
.deb-hosting-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.85);
}
.deb-hosting-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,20,19,.12) 0%, rgba(20,20,19,.5) 100%);
  pointer-events: none;
}
.deb-hosting-hero-badge {
  position: absolute;
  left: clamp(1rem, 2.5vw, 1.6rem);
  bottom: clamp(1rem, 2.5vw, 1.6rem);
  z-index: 1;
}

/* ============================ SECCIONES ========================== */
.deb-hosting-sec,
.deb-hosting-audience {
  padding: var(--section-y) var(--page-margin);
}
.deb-hosting-audience {
  border-top: 1px solid var(--border);
}

/* ========================== QUÉ INCLUYE ========================== */
.deb-hosting-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: var(--space-12);
}
.deb-hosting-grid > .deb-reveal {
  display: flex;
}
.deb-hosting-feat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  min-height: 210px;
  padding: var(--space-6);
  transition: border-color var(--dur) var(--ease-standard),
              transform var(--dur) var(--ease-standard);
}
.deb-hosting-feat:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}
.deb-hosting-feat-spacer {
  flex: 1;
}
.deb-hosting-feat-t {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-xl);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}
.deb-hosting-feat-d {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* ======================= A QUIÉN VA DIRIGIDO ==================== */
.deb-hosting-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-10) 0 0;
  padding: 0;
  list-style: none;
}
.deb-hosting-tags .deb-tag {
  padding: 9px 16px;
  font-size: var(--text-xs);
}

/* ============================ CTA FINAL ========================= */
.deb-hosting-cta {
  padding: var(--section-y) var(--page-margin);
  border-top: 1px solid var(--border);
}
.deb-hosting-cta-t {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1.9rem, 4.6vw, 3.8rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
}
.deb-hosting-cta-d {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 52ch;
  margin: 0 0 var(--space-8);
}

/* ============================ RESPONSIVE ======================== */
@media (max-width: 900px) {
  .deb-hosting-hero { grid-template-columns: 1fr; }
  .deb-hosting-hero-media { aspect-ratio: 16 / 10; }
  .deb-hosting-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .deb-hosting-grid { grid-template-columns: 1fr; }
}

/* ==== ideas.css ==== */
/* Damos en el Blanco — IDEAS (blog renovado) + plantilla de ARTÍCULO.
   Fuente: DS v2 · IdeasScreen.js (bloque ID_CSS). Las reglas .deb-id__* y
   .deb-art__* de la sección "VERBATIM DS" van tal cual del Design System.
   La sección "Añadidos de sección" cubre lo que el DS deja al implementador
   (título/intro de cabecera, legibilidad del destacado, "Leer" de las cards,
   CTA de newsletter, byline y CTA del artículo); todo con tokens del tema y
   namespaced a deb-id__ / deb-art__ para no chocar con otras pantallas. */

/* ===================== VERBATIM DS (ID_CSS) ===================== */
.deb-id{padding:clamp(3rem,7vw,6rem) var(--page-margin) 0}
.deb-id__feat{position:relative;margin-top:var(--space-12);border-radius:var(--radius-surface);overflow:hidden;aspect-ratio:21/9;cursor:pointer;display:flex;align-items:flex-end}
.deb-id__feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.5);transition:transform var(--dur-slower) var(--ease-standard)}
.deb-id__feat:hover img{transform:scale(1.03)}
.deb-id__feat .in{position:relative;padding:clamp(1.6rem,4vw,3rem);display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.deb-id__feat h2{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(1.9rem,4.6vw,3.8rem);line-height:1;letter-spacing:var(--tracking-tight);color:#fff;margin:0;max-width:22ch}
.deb-id__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border-block:1px solid var(--border);margin-top:var(--space-12)}
.deb-id__card{background:var(--bg);padding:clamp(1.4rem,3vw,2.2rem);display:flex;flex-direction:column;gap:var(--space-4);cursor:pointer;transition:background var(--dur) var(--ease-standard)}
.deb-id__card:hover{background:var(--surface-raised)}
.deb-id__card h3{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-xl);line-height:1.08;letter-spacing:var(--tracking-tight);color:var(--text-strong);margin:0}
.deb-id__meta{font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-subtle)}
.deb-id__ex{font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.65;color:var(--text-muted);margin:0}
.deb-art{padding:clamp(3rem,7vw,6rem) var(--page-margin) 0;max-width:860px}
.deb-art__meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:var(--space-6)}
.deb-art__body{margin-top:var(--space-12);font-family:var(--font-mono);font-size:var(--text-md);line-height:1.8;color:var(--text-muted)}
.deb-art__body p{margin:0 0 1.4em;max-width:62ch}
.deb-art__body b{color:var(--text);font-weight:500}
.deb-art__body h2{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-2xl);line-height:1.1;letter-spacing:var(--tracking-tight);color:var(--text-strong);margin:1.8em 0 .7em}
.deb-art__pull{border-block:1px solid var(--border);padding:var(--space-8) 0;margin:var(--space-10) 0;font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.15;letter-spacing:var(--tracking-tight);color:var(--text-strong)}
@media(max-width:860px){.deb-id__grid{grid-template-columns:1fr}.deb-id__feat{aspect-ratio:4/3}}

/* ===================== Añadidos de sección (tokens DS) ===================== */

/* Cabecera IDEAS: kicker → SplitTitle → intro */
.deb-id__head{max-width:var(--content-max)}
.deb-id__title{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--display-2);line-height:1.02;letter-spacing:var(--tracking-tighter);color:var(--text-strong);margin:var(--space-5) 0 0;text-wrap:balance}
.deb-id__intro{font-family:var(--font-mono);font-size:var(--text-md);line-height:1.6;color:var(--text-muted);max-width:var(--measure);margin:var(--space-5) 0 0}

/* Destacado: el <a> envuelve toda la card 21:9; scrim para legibilidad del texto */
a.deb-id__feat{text-decoration:none}
.deb-id__feat::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.08) 52%,rgba(0,0,0,0));pointer-events:none}
.deb-id__feat .in{z-index:2}
.deb-id__feat .in .deb-id__meta{color:rgba(255,255,255,.72)}
.deb-id__feat .in .deb-alink{color:#fff}

/* Cards del Loop: el <a> es toda la card; "Leer" anclado abajo y alineado */
a.deb-id__card{text-decoration:none;color:inherit}
.deb-id__more{margin-top:auto}

/* CTA newsletter → /recursos/ */
.deb-id__cta{margin-top:var(--space-16);padding:var(--space-12) 0 var(--space-20);border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5)}
.deb-id__cta-q{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--display-3);line-height:1.05;letter-spacing:var(--tracking-tight);color:var(--text-strong);margin:0;max-width:20ch;text-wrap:balance}
.deb-id__cta-note{font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6;color:var(--text-muted);margin:0;max-width:54ch}

/* ARTÍCULO: título (SplitTitle) + byline en la meta + CTA de cierre */
.deb-art__title{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--display-2);line-height:1.02;letter-spacing:var(--tracking-tighter);color:var(--text-strong);margin:var(--space-5) 0 0;text-wrap:balance}
.deb-art__byline{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-mono);color:var(--text-subtle)}
.deb-art__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-12);padding:var(--space-10) 0 var(--space-20);border-top:1px solid var(--border)}

/* ==== kit-digital.css ==== */
/* Damos en el Blanco — pantalla KIT DIGITAL (rebuild oficial · FONT DS v2)
   Fuente autorizada: ds2/KitDigitalScreen.js (KD_CSS). El bloque marcado
   "VERBATIM" es el CSS del Design System copiado tal cual (prefijo .deb-kd,
   sin colisiones). Debajo, solo el "glue" mínimo y basado en tokens para las
   piezas que el snippet del DS delega a estilos globales (título, intro, ritmo
   de sección, estado de éxito del comprobador). No se redefine ningún valor
   del bloque verbatim. */

/* ===================== VERBATIM — DS KitDigitalScreen.js ===================== */
.deb-kd{padding:clamp(3rem,7vw,6rem) var(--page-margin) 0}
.deb-kd__strike{position:relative;display:inline-block;color:var(--ink-500)}
.deb-kd__strike::after{content:"";position:absolute;left:-3%;right:-5%;top:47%;height:.06em;background:var(--accent);transform:rotate(-2.5deg)}
.deb-kd__zero{color:var(--text-strong)}
.deb-kd__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:var(--space-10)}
.deb-kd__step{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-7);display:flex;flex-direction:column;gap:12px;min-height:190px}
.deb-kd__step b{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-subtle);font-weight:400}
.deb-kd__step h3{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-xl);color:var(--text-strong);margin:auto 0 0}
.deb-kd__step p{font-family:var(--font-mono);font-size:var(--text-2xs);line-height:1.6;color:var(--text-muted);margin:0}
.deb-kd__seg{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border-block:1px solid var(--border);margin-top:var(--space-6)}
.deb-kd__seg>div{background:var(--bg);padding:var(--space-8) var(--space-6)}
.deb-kd__seg .n{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(2rem,4.4vw,3.4rem);line-height:1;letter-spacing:-.03em;color:var(--text-strong)}
.deb-kd__seg .l{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-top:10px;line-height:1.6}
.deb-kd__form{max-width:520px;display:flex;flex-direction:column;gap:var(--space-5);margin-top:var(--space-8)}
.deb-kd__note{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-subtle);line-height:1.6;margin:var(--space-8) 0 var(--space-16);max-width:70ch}
@media(max-width:860px){.deb-kd__steps,.deb-kd__seg{grid-template-columns:1fr}}

/* ===================== GLUE — token-based, DS deja a globales ===================== */
/* Define el único escalón que el padding verbatim de .deb-kd__step usa y que no
   existe en tokens/spacing.css (space-6 = 24px, space-8 = 32px → space-7 = 28px).
   Se define localmente para no tocar el bloque verbatim. */
.deb-kd{--space-7:1.75rem}

/* Título (la global h1 ya lo dimensiona como display-2; aquí solo ritmo y medida) */
.deb-kd__title{margin:var(--space-6) 0 0;max-width:20ch}
.deb-kd__zero sup{font-size:.34em;vertical-align:super;color:var(--text-muted)}

/* Intro — voz mono, tenue */
.deb-kd__intro{font-family:var(--font-mono);font-size:var(--text-md);line-height:1.65;color:var(--text-muted);max-width:60ch;margin:var(--space-5) 0 0}
.deb-kd__intro b{color:var(--text-strong);font-weight:var(--fw-medium)}

/* Encabezado de la banda de segmentos (kicker es inline → margen en bloque) */
.deb-kd__seg-head{margin-top:var(--space-16)}

/* Comprobador — regla superior que separa la sección */
.deb-kd__check{margin-top:var(--space-16);padding-top:var(--space-12);border-top:1px solid var(--border)}
.deb-kd__fine{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-subtle);line-height:1.6;margin:0}

/* Estado de éxito — oculto hasta que deb.js lo revela al enviar el form */
.deb-kd__success{max-width:520px;margin-top:var(--space-8)}
.deb-kd__success[hidden]{display:none}
.deb-kd__success-t{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--text-2xl);line-height:1.02;letter-spacing:var(--tracking-tight);color:var(--text-strong);margin:0}
.deb-kd__success-d{font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.7;color:var(--text-muted);margin:var(--space-3) 0 0;max-width:52ch}

/* ==== notfound.css ==== */
/* Damos en el Blanco — 404 / notfound (canalla).
   Scoped to .deb-notfound-*. Component classes (.deb-btn, .deb-kicker) and JS
   hooks (.deb-reveal, .deb-splittitle / .deb-ln) come from the theme's global
   CSS + deb.js — they are NOT redefined here. */

.deb-notfound {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-8);
  padding: clamp(3rem, 7vw, 6rem) var(--page-margin);
  position: relative;
  overflow: hidden;
}

/* Concentric target (bullseye) bleeding off the right edge */
.deb-notfound__rings {
  position: absolute;
  right: -16vw;
  top: 50%;
  transform: translateY(-50%);
  width: 44vw;
  aspect-ratio: 1;
  pointer-events: none;
}
.deb-notfound__rings span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border);
}
.deb-notfound__rings span:nth-child(2) { inset: 12%; }
.deb-notfound__rings span:nth-child(3) { inset: 24%; }
.deb-notfound__rings span:nth-child(4) { inset: 36%; }
.deb-notfound__rings b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-strong);
  transform: translate(-50%, -50%);
}

/* Lift the content above the decorative rings; keep the rings absolute */
.deb-notfound > *:not(.deb-notfound__rings) { position: relative; }

.deb-notfound__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.2rem, 5.6vw, 4.8rem);
  line-height: .98;
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
  margin: 0;
}

.deb-notfound__sub {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 52ch;
  margin: 0;
}
.deb-notfound__sub b {
  color: var(--text);
  font-weight: 500;
}

.deb-notfound__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ==== project.css ==== */
/* Damos en el Blanco — Single de proyecto / caso de estudio.
   Adaptado de CASE_CSS (ProjectScreen.js del Design System).
   Clases con prefijo .deb-project-* para no chocar con otras pantallas.
   Los hooks de deb.js (.deb-reveal, .deb-splittitle/.deb-ln, .deb-countup) y
   los componentes (.deb-btn, .deb-tag, .deb-kicker) YA los define el tema:
   NO se redefinen aquí. */

.deb-project { padding: clamp(3rem, 7vw, 6rem) var(--page-margin) 0; }

/* Título — H1 (el split-title lo revela deb.js vía .deb-splittitle) */
.deb-project-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.6rem, 7vw, 6.4rem);
  line-height: .95;
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
  margin: var(--space-5) 0 0;
}

/* Meta / tags */
.deb-project-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

/* Portada 21:9 */
.deb-project-cover {
  position: relative;
  margin-top: var(--space-12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--surface-raised);
}
.deb-project-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.92);
}
.deb-project-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 15, 15, .2), rgba(15, 15, 15, .45));
  pointer-events: none;
}

/* Narrativa a 2 columnas (encargo / qué hicimos) */
.deb-project-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  margin-top: var(--space-20);
  align-items: start;
}
.deb-project-lbl {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--space-4);
}
.deb-project-p {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 1.2em;
  max-width: 56ch;
}
.deb-project-p b { color: var(--text); font-weight: 500; }

/* Stats — números con .deb-countup */
.deb-project-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-block: 1px solid var(--border);
  margin-top: var(--space-20);
}
.deb-project-stat {
  background: var(--bg);
  padding: clamp(2rem, 4vw, 3.2rem) var(--space-6);
}
.deb-project-n {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
}
.deb-project-l {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 10px;
}

/* Galería 2 columnas */
.deb-project-shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: var(--space-20);
}
.deb-project-shot {
  position: relative;
  border-radius: var(--radius-surface);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-raised);
}
.deb-project-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.92);
  transition: filter var(--dur-slow) var(--ease-standard);
}
.deb-project-shot:hover img { filter: grayscale(0); }

/* Cita */
.deb-project-quote {
  margin: var(--space-24) auto 0;
  max-width: 26ch;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.deb-project-quote small {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-top: var(--space-6);
}

/* Siguiente proyecto */
.deb-project-next {
  margin-top: var(--space-24);
  border-top: 1px solid var(--border);
  padding: var(--space-16) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.deb-project-nextlink {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
  text-decoration: none;
}
.deb-project-nextlink:hover { opacity: .6; }
.deb-project-next-cta { margin-top: var(--space-6); }

@media (max-width: 800px) {
  .deb-project-grid   { grid-template-columns: 1fr; }
  .deb-project-stats  { grid-template-columns: 1fr; }
  .deb-project-shots  { grid-template-columns: 1fr; }
}

/* ==== proposal.css ==== */
/* Damos en el Blanco — Propuesta (single, plantilla privada)
   Adaptado de ProposalScreen.js (PROP_CSS). Usa las variables de token del tema.
   Las clases de componente (.deb-btn / .deb-tag / .deb-kicker / .deb-card) y los
   hooks globales (.deb-reveal / .deb-splittitle) ya los carga el tema; aquí solo
   va el CSS específico de la pantalla. */

.deb-prop{padding:clamp(3rem,7vw,6rem) var(--page-margin) 0}

/* Título del encabezado (antes estilo inline en <SplitTitle>) */
.deb-prop__title{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(2.2rem,5.6vw,5rem);line-height:.97;letter-spacing:var(--tracking-tighter);color:var(--text-strong);margin:var(--space-5) 0 0}

/* Meta strip (ref / fecha / válida / contacto) */
.deb-prop__meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:var(--space-8);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
.deb-prop__meta b{color:var(--text-subtle);font-weight:400;display:block;font-size:var(--text-3xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;margin-bottom:5px}

/* Secciones y párrafos */
.deb-prop__sec{margin-top:var(--space-20)}
.deb-prop__p{font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.7;color:var(--text-muted);margin:var(--space-5) 0 0;max-width:62ch}
.deb-prop__p b{color:var(--text);font-weight:500}
.deb-prop__p--sm{font-size:var(--text-xs)}

/* Fases */
.deb-prop__fases{margin-top:var(--space-8)}
.deb-fase{display:grid;grid-template-columns:88px 1fr auto;gap:var(--space-6);align-items:baseline;padding:clamp(1.2rem,2.6vw,1.8rem) 0;border-bottom:1px solid var(--border)}
.deb-fase:first-of-type{border-top:1px solid var(--border)}
.deb-fase__n{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-subtle)}
.deb-fase__t{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.05;color:var(--text-strong);margin:0}
.deb-fase__d{font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.6;color:var(--text-muted);margin:8px 0 0;max-width:56ch}
.deb-fase__w{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-subtle);white-space:nowrap}

/* Presupuesto */
.deb-budget{max-width:880px;margin-top:var(--space-8);font-family:var(--font-mono);font-size:var(--text-sm)}
.deb-budget__row{display:flex;justify-content:space-between;gap:var(--space-8);padding:14px 0;border-bottom:1px solid var(--border);color:var(--text-muted)}
.deb-budget__row span:last-child{color:var(--text);white-space:nowrap}
.deb-budget__total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-8);padding:var(--space-6) 0 0}
.deb-budget__meta{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-subtle)}
.deb-budget__total .n{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.02em;color:var(--text-strong)}

/* Calendario de pago */
.deb-pay{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:var(--space-8);max-width:880px}
.deb-pay__n{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(2rem,4vw,3rem);line-height:1;letter-spacing:-.02em;color:var(--text-strong);margin:var(--space-4) 0 var(--space-2)}
.deb-pay__d{font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.6;color:var(--text-muted);margin:0}

/* Padding de las tarjetas de scope/pago (antes inline en <Card padding>) */
.deb-scope .deb-card,.deb-pay .deb-card{padding:var(--space-6)}

/* Alcance: incluye / no incluye */
.deb-scope{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;margin-top:var(--space-8)}
.deb-scope ul{font-family:var(--font-mono);font-size:var(--text-xs);line-height:2.1;color:var(--text-muted);margin:var(--space-4) 0 0;padding:0;list-style:none}
.deb-scope .inc li::before{content:"→ ";color:var(--text-subtle)}
.deb-scope .exc li::before{content:"✕ ";color:var(--text-subtle)}

/* Condiciones (letra pequeña) */
.deb-cond{font-family:var(--font-mono);font-size:var(--text-2xs);line-height:1.9;color:var(--text-subtle);max-width:70ch;margin:var(--space-5) 0 0}

/* Barra de aceptación */
.deb-accept{margin-top:var(--space-20);border-top:1px solid var(--border);padding:var(--space-16) 0 var(--space-8);display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap}
.deb-accept__t{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(2rem,5vw,4rem);line-height:.98;letter-spacing:var(--tracking-tighter);color:var(--text-strong);margin:0}
.deb-accept__actions{display:flex;gap:var(--space-3);flex-wrap:wrap}

@media(max-width:760px){
  .deb-fase{grid-template-columns:52px 1fr}
  .deb-fase__w{grid-column:2}
  .deb-pay,.deb-scope{grid-template-columns:1fr}
}

/* ==== recursos.css ==== */
/* Damos en el Blanco — pantalla RECURSOS (lead magnets)
   Bloque de rejilla/tarjetas/formulario: VERBATIM de RC_CSS
   (ds/templates/website-kit/ResourcesScreen.js), solo formateado.
   Cabecera y CTA final: clases de sección deb-rc-* adaptadas al idioma del DS,
   usando tokens del tema (tokens/*.css) y componentes .deb-* ya existentes
   (.deb-kicker, .deb-tag, .deb-btn). Nada de valores nuevos: solo variables. */

/* ---- Sección + cabecera ------------------------------------------------- */
.deb-rc {
  padding: clamp(3rem, 7vw, 6rem) var(--page-margin) 0;
}

/* Título (H1, hook .deb-splittitle — cada .deb-ln es una línea) */
.deb-rc-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.6rem, 7vw, 6rem);
  line-height: .94;
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
  margin: var(--space-5) 0 0;
}

/* Entradilla */
.deb-rc-intro {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-muted);
  margin: var(--space-5) 0 0;
  max-width: 52ch;
}

/* ---- Rejilla de recursos — VERBATIM del Design System (RC_CSS) ----------- */
.deb-rc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: var(--space-12);
}
.deb-rc__card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--dur) var(--ease-standard), transform var(--dur) var(--ease-standard);
}
.deb-rc__card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}
.deb-rc__type {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.deb-rc__card h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}
.deb-rc__card p {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}
.deb-rc__form {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--space-4);
}
.deb-rc__form input {
  flex: 1;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 11px 14px;
  outline: none;
  transition: border-color var(--dur-fast);
}
.deb-rc__form input:focus {
  border-color: #fff;
  box-shadow: var(--ring-focus);
}
.deb-rc__form button {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast);
}
.deb-rc__form button:hover {
  background: var(--accent-hover);
}

/* ---- CTA final (borde superior) ----------------------------------------- */
.deb-rc-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid var(--border);
}
.deb-rc-cta-t {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
  max-width: 22ch;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 860px) {
  .deb-rc__grid { grid-template-columns: 1fr; } /* VERBATIM RC_CSS */
  .deb-rc-cta  { align-items: flex-start; }
}

/* ==== sectores.css ==== */
/* Damos en el Blanco — Pantalla SECTORES (Sectores)
   Adaptat de SEC_CSS (ds2/SectorsScreen.js). El bloc de la llista/files/fons és
   VERBATIM del Design System: només s'ha reanomenat el prefix .deb-sec → .deb-sec2
   (deb-sec ja està reservat) i .deb-sec__bg → .deb-sec2-bg (nom de la capa fixa que
   demana el contracte). Els components (.deb-kicker, .deb-tag, .deb-btn) i els hooks
   (.deb-reveal, .deb-splittitle) són globals del tema.
   Capçalera/CTA (deb-sec2-head, -title, -intro, -outro) són propis d'aquesta secció. */

/* ── Bloc VERBATIM del DS (prefix reanomenat) ──────────────────────────────── */

.deb-sec2 {
  padding: clamp(3rem, 7vw, 6rem) var(--page-margin) 0;
}

.deb-sec2__list {
  position: relative;
  margin-top: var(--space-12);
}

/* Foto de fons FIXA a tota la pantalla — buida fins que deb.js hi injecta la <img> */
.deb-sec2-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s var(--ease-standard);
}
.deb-sec2-bg.on { opacity: 1; }
.deb-sec2-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.3);
}

.deb-sec2__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: var(--space-6);
  padding: clamp(1.6rem, 3.6vw, 2.8rem) 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: padding-left var(--dur) var(--ease-standard);
}
.deb-sec2__row:first-child { border-top: 1px solid var(--border); }
.deb-sec2__row:hover { padding-left: var(--space-4); }

.deb-sec2__n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-subtle);
  padding-top: 10px;
}

.deb-sec2__row h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1.9rem, 4.8vw, 4rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-400);
  margin: 0;
  transition: color .3s var(--ease-standard);
}
.deb-sec2__row:hover h2 { color: var(--text-strong); }

.deb-sec2__row .sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.65;
  color: var(--text-muted);
  margin: 12px 0 0;
  max-width: 60ch;
}

.deb-sec2__row .who {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* ── Capçalera + CTA (propi de la secció) ──────────────────────────────────── */

/* z-index:1 manté capçalera i CTA per damunt de la foto de fons fixa (z-index:0)
   quan s'activa al hover; les files ja porten z-index:1 al bloc verbatim. */
.deb-sec2-head { position: relative; z-index: 1; }

.deb-sec2-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: .98;
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
  margin: var(--space-5) 0 0;
}

.deb-sec2-intro {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 60ch;
  margin: var(--space-6) 0 0;
}

.deb-sec2-outro {
  position: relative;
  z-index: 1;
  padding: var(--space-20) 0 var(--space-16);
  border-top: 1px solid var(--border);
  margin-top: var(--space-16);
}
.deb-sec2-outro-q {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1.9rem, 4.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0 0 var(--space-8);
  max-width: 22ch;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .deb-sec2__row { grid-template-columns: 44px 1fr; }
}

/* ── Reduce motion ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .deb-sec2__row,
  .deb-sec2__row h2,
  .deb-sec2-bg { transition: none; }
}

/* ==== services.css ==== */
/* Damos en el Blanco — Pantalla SERVICES (Servicios)
   Adaptat de SVCS_CSS (ds/templates/website-kit/ServicesScreen.js).
   Només layout específic de la secció; els components (.deb-kicker, .deb-tag,
   .deb-btn) i els hooks (.deb-reveal, .deb-splittitle) són globals del tema.
   L'acordió original (React state + grid-rows) es reprodueix amb <details>
   natiu; l'obertura anima l'inner amb un keyframe scoped. Classes prefixades
   amb deb-svcs-. */

.deb-svcs {
  padding: clamp(3rem, 7vw, 6rem) var(--page-margin) 0;
}

/* Títol principal (SplitTitle) — el reveal emmascarat l'aporta .deb-splittitle */
.deb-svcs-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: .98;
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
  margin: var(--space-5) 0 0;
}

/* Intro */
.deb-svcs-intro {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 60ch;
  margin: var(--space-6) 0 0;
}

/* Llista d'acordions */
.deb-svcs-list {
  margin-top: var(--space-16);
  border-top: 1px solid var(--border);
}

/* Acordió — <details> natiu (name compartit = només un obert alhora) */
.deb-svcs-acc {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

/* Capçalera clicable (<summary>) — sense marcador natiu */
.deb-svcs-acc-head {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: var(--space-6);
  align-items: baseline;
  padding: clamp(1.4rem, 3.2vw, 2.4rem) 0;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: padding-left var(--dur) var(--ease-standard);
}
.deb-svcs-acc-head::-webkit-details-marker { display: none; }
.deb-svcs-acc-head:hover { padding-left: var(--space-4); }

.deb-svcs-acc-n {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-subtle);
}

.deb-svcs-acc-t {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1.9rem, 4.6vw, 3.8rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-subtle);
  margin: 0;
  transition: color .35s var(--ease-standard), transform .35s var(--ease-standard);
}
.deb-svcs-acc:hover .deb-svcs-acc-t,
.deb-svcs-acc[open] .deb-svcs-acc-t { color: var(--text-strong); }

.deb-svcs-acc-x {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--text-strong);
  transition: transform .4s var(--ease-nudge);
}
.deb-svcs-acc[open] .deb-svcs-acc-x { transform: rotate(45deg); }

/* Cos desplegable */
.deb-svcs-acc-inner { overflow: hidden; }
.deb-svcs-acc[open] .deb-svcs-acc-inner {
  animation: deb-svcs-acc-reveal .45s var(--ease-out) both;
}
@keyframes deb-svcs-acc-reveal {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.deb-svcs-acc-grid {
  display: grid;
  grid-template-columns: 88px 1fr 1fr;
  gap: var(--space-6);
  padding: 0 0 clamp(1.6rem, 3.4vw, 2.8rem);
}

.deb-svcs-acc-d {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  max-width: 46ch;
  grid-column: 2;
}

.deb-svcs-acc-side {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-end;
}

.deb-svcs-acc-photo {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-surface);
  filter: grayscale(1) contrast(1.05) brightness(.85);
}

.deb-svcs-acc-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Tancament / CTA */
.deb-svcs-outro {
  padding: var(--space-20) 0 var(--space-16);
  border-top: 1px solid var(--border);
  margin-top: var(--space-16);
}
.deb-svcs-outro-q {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1.9rem, 4.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
}
.deb-svcs-outro-note {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 var(--space-8);
  max-width: 52ch;
  line-height: 1.65;
}

/* Responsive */
@media (max-width: 760px) {
  .deb-svcs-acc-head { grid-template-columns: 52px 1fr auto; }
  .deb-svcs-acc-grid { grid-template-columns: 1fr; padding-left: 52px; }
  .deb-svcs-acc-d { grid-column: 1; }
  .deb-svcs-acc-side { grid-column: 1; align-items: flex-start; }
  .deb-svcs-acc-tags { justify-content: flex-start; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .deb-svcs-acc-head,
  .deb-svcs-acc-t,
  .deb-svcs-acc-x { transition: none; }
  .deb-svcs-acc[open] .deb-svcs-acc-inner { animation: none; }
}

/* ==== test.css ==== */
/* Damos en el Blanco — pantalla TEST ("¿Tu web da pena?")
   Fuente autorizada: ds2/TestScreen.js (TEST_CSS). El bloque .deb-test / .deb-test__*
   se reproduce VERBATIM del Design System (usa tokens del tema tokens/*.css). El
   prefijo deb-test no colisiona con ninguna otra pantalla, así que se deja tal cual.
   Los estilos de los hooks .deb-reveal / .deb-splittitle son globales (deb.js/tema);
   aquí no se redefinen. Solo se añade la cabecera .deb-test-title y la fila de
   acciones del veredicto .deb-test__res-actions (no vienen del bloque del DS). */

/* ===== VERBATIM — Design System (ds2/TestScreen.js · TEST_CSS) ===== */
.deb-test{padding:clamp(3rem,7vw,6rem) var(--page-margin) var(--space-16);min-height:62vh;max-width:1000px}
.deb-test__prog{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--text-subtle);margin-bottom:var(--space-6)}
.deb-test__bar{height:2px;background:var(--surface-hover);margin:var(--space-4) 0 var(--space-10)}
.deb-test__bar span{display:block;height:100%;background:var(--accent);transition:width .4s var(--ease-out)}
.deb-test__q{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(1.9rem,5vw,3.8rem);line-height:1.02;letter-spacing:var(--tracking-tighter);color:var(--text-strong);margin:0 0 var(--space-4)}
.deb-test__hint{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-subtle);margin:0 0 var(--space-8)}
.deb-test__opts{display:flex;gap:12px;flex-wrap:wrap}
.deb-test__opt{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.06em;color:var(--text);background:transparent;border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:16px 34px;cursor:pointer;transition:all var(--dur-fast) var(--ease-standard)}
.deb-test__opt:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.deb-test__res-n{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(4rem,12vw,9rem);line-height:.9;letter-spacing:-.04em;color:var(--text-strong);margin:0}
.deb-test__res-t{font-family:var(--font-display);font-weight:var(--fw-medium);font-size:clamp(1.6rem,4vw,3rem);line-height:1.05;letter-spacing:var(--tracking-tight);color:var(--text-strong);margin:var(--space-6) 0 var(--space-3);max-width:22ch}
.deb-test__res-d{font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.7;color:var(--text-muted);margin:0 0 var(--space-8);max-width:52ch}

/* ===== Sección — no forma parte del bloque verbatim del DS ===== */

/* Título de cabecera (H1). initTest alterna su texto entre "¿Tu web da pena?"
   y "Seguimos." mientras avanzas por las preguntas. */
.deb-test-title{
  font-family:var(--font-display);
  font-weight:var(--fw-medium);
  font-size:clamp(2.6rem,7vw,5rem);
  line-height:.98;
  letter-spacing:var(--tracking-tighter);
  color:var(--text-strong);
  margin:var(--space-5) 0 var(--space-10);
  max-width:18ch;
}

/* Fila de acciones del veredicto (Button primary + ghost) que pinta initTest. */
.deb-test__res-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

/* ==== work.css ==== */
/* Damos en el Blanco — Pantalla WORK (Proyectos)
   Adaptat de WORK_CSS (ds/templates/website-kit/WorkScreen.js).
   Només layout específic de la secció; components (.deb-pcard, .deb-tag,
   .deb-kicker, .deb-alink) i hooks (.deb-reveal, .deb-splittitle) són globals.
   Classes scoped amb prefix deb-work-. */

.deb-work {
  padding: clamp(3rem, 7vw, 6rem) var(--page-margin) 0;
}

.deb-work-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: .98;
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
  margin: var(--space-5) 0 0;
}

.deb-work-intro {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 60ch;
  margin: var(--space-6) 0 0;
}

/* Pills de filtre */
.deb-work-filter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--space-10);
}

.deb-work-filter button {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
}

.deb-work-filter button:hover {
  color: var(--text-strong);
  border-color: var(--border-strong);
}

.deb-work-filter button.on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* Graella de projectes */
.deb-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 26px;
  margin-top: var(--space-12);
}

.deb-work-grid .deb-pcard {
  cursor: pointer;
}

@media (max-width: 900px) {
  .deb-work-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .deb-work-grid { grid-template-columns: 1fr; }
}

/* ==== chrome v2: footer status + newsletter + overlay secundari ==== */
.deb-foot__status{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle);margin-top:8px}
.deb-foot__news{display:flex;gap:8px;margin-top:var(--space-5);flex-wrap:wrap}
.deb-foot__news input{background:transparent;border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:11px 18px;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text);outline:none;min-width:230px}
.deb-foot__news input:focus{border-color:var(--accent);box-shadow:var(--ring-focus)}
.deb-foot__news button{background:var(--accent);color:var(--accent-ink);border:0;border-radius:var(--radius-pill);padding:11px 22px;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.deb-foot__news button:hover{opacity:.85}
.deb-foot__newsnote{font-family:var(--font-mono);font-size:var(--text-3xs);color:var(--text-subtle)}
.deb-menu__secondary{display:flex;gap:18px;flex-wrap:wrap;margin-top:var(--space-6)}
.deb-menu__seclink{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;color:var(--text-muted);text-decoration:none;padding:4px 0}
.deb-menu__seclink:hover{color:var(--text-strong)}