/* ═══════════════════════════════════════════════════════════════════
   styles.css — sistema de diseño de somosdiga.com (web_v2)

   Aquí vive todo lo que se repite en las 29 rutas: tokens, base,
   tipografía, iconos, cabecera, botones, etiquetas, acordeones, cards
   de proyecto, pie y movimiento. Lo que es de una sola página está en
   pages.css. Ningún valor literal de color, espaciado, radio, tamaño
   de letra o curva entra en un componente: sale de un token.

   Reglas que no se rompen
   1. Espaciado en múltiplos de 8. El 4 solo para foco, subrayados y
      microdesplazamientos. Sin clamp() en espaciados: los saltos son
      discretos y viven en los tokens por breakpoint.
   2. Radio 8 en superficies, 4 en etiquetas. Sin bordes de card: la
      separación se hace con tono (paper → surface → white).
   3. Una escala tipográfica cerrada (§2). Titulares en 400: la
      jerarquía la hacen el tamaño y el tracking, no el peso.
   4. La mono va siempre a 12 px, 400, mayúsculas, en todo tamaño.
   5. Un solo lenguaje de movimiento: --ease para lo que se mueve,
      --ease-sweep para lo que se llena.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0 · Fuentes ─────────────────────────────────────────────────── */
@font-face{font-family:BDO;src:url('/assets/fonts/BDOGrotesk-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:BDO;src:url('/assets/fonts/BDOGrotesk-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ── 1 · Tokens ──────────────────────────────────────────────────── */
:root{
  /* Color · el estudio es el marco: papel neutro, el color lo pone la fotografía */
  --paper:#f7f7f5;          /* fondo de página */
  --surface:#eeefec;        /* cards, acordeones cerrados, formularios */
  --white:#fff;             /* etiquetas, cards blancas, acordeón abierto, texto sobre oscuro */
  --ink:#232225;            /* texto, botón primario, pie */
  --muted:#646369;          /* texto secundario · 5,55:1 sobre paper */
  --muted-on-ink:#c1bbc9;   /* texto secundario sobre ink · 8,6:1 */
  --accent:#ecff47;         /* amarillo Diga: solo acento, nunca fondo de sección */
  --focus:#6250ac;          /* anillo de foco y hover de enlaces de navegación secundaria */
  --line:#d9dad6;           /* filetes de lista (nunca bordes de card) */
  --line-strong:#a5a5a3;    /* subrayado de campos de formulario */
  --error:#922c31;
  --scene:#182430;          /* fondo bajo fotografía mientras carga */
  --diner-blue:#0a38d6;     /* registro cultural (/venir/ y banner de contacto) */
  --diner-blue-dark:#0827a0;/* pie y menú móvil del registro cultural */
  --diner-cream:#fffdf5;    /* papel del registro cultural: cards sobre azul */
  --muted-on-blue:rgba(255,255,255,.78); /* secundario sobre azul · 6,4:1 */

  /* Velos sobre fotografía */
  --shade-dark:linear-gradient(90deg,rgba(7,19,29,.75),rgba(7,19,29,.27) 60%,rgba(7,19,29,.12)),linear-gradient(0deg,rgba(7,19,29,.45),transparent 50%);
  --shade-light:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.08) 58%,transparent),linear-gradient(0deg,rgba(255,255,255,.12),transparent 55%);
  --glass:rgba(247,247,245,.91);   /* cabecera y controles sobre imagen */
  --diner-glass:rgba(10,56,214,.91); /* cabecera del registro cultural */
  --glass-pane:linear-gradient(90deg,rgba(255,255,255,.055),rgba(255,255,255,.005)); /* paneles del hero */
  --glass-tint:rgba(220,236,234,.05);      /* vidrio claro sobre fotografía */
  --glass-tint-dark:rgba(23,38,44,.15);    /* vidrio oscuro sobre fotografía */
  --veil-photo:rgba(7,19,29,.18);          /* velo plano sobre fotografía */
  --backdrop:rgba(23,21,33,.5);            /* fondo del diálogo */
  --shadow-float:0 24px 48px rgba(35,34,37,.09);
  --shadow-drop:0 24px 32px rgba(5,18,29,.33);      /* objetos recortados sobre foto o color */
  --shadow-drop-light:0 24px 32px rgba(35,34,37,.4);
  --line-cartel:3px solid var(--ink);          /* cartel del registro cultural: borde grueso… */
  --shadow-cartel:8px 8px 0 var(--ink);        /* …y desplazamiento sólido, sin difuminar */

  /* Espaciado · retícula de 8 */
  --s-4:4px;--s-8:8px;--s-16:16px;--s-24:24px;--s-32:32px;--s-40:40px;--s-48:48px;
  --s-56:56px;--s-64:64px;--s-80:80px;--s-96:96px;--s-128:128px;
  --gutter:48px;            /* margen lateral del contenido */
  --section:128px;          /* aire entre secciones */
  --inset:8px;              /* separación de los bloques a sangre respecto al borde */
  --container:1760px;       /* ancho máximo incluido el gutter → 1664 útiles */
  --header-h:96px;

  /* Radios */
  --radius:8px;             /* superficies, imágenes, botones, campos */
  --radius-sm:4px;          /* etiquetas */

  /* Tipografía · escala cerrada, 10 pasos + 1 excepción */
  --font-sans:BDO,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --text-mono:12px;         /* etiquetas · nunca cambia */
  --text-small:14px;        /* navegación, pie, legal, consentimiento */
  --text-body:16px;
  --text-lead-sm:18px;      /* lectura destacada: capítulos de caso, notas, ficha */
  --text-lead:20px;         /* entradillas y summaries */
  --text-title:24px;        /* título de elemento: card, caption, summary de servicio */
  --text-title-lg:32px;     /* título de card grande y de bloque secundario */
  --text-h3:clamp(32px,3.4vw,48px);     /* capítulo de caso, enlace editorial */
  --text-h2:clamp(32px,4.2vw,64px);     /* titular de sección */
  --text-display:clamp(48px,6.5vw,96px);/* h1 interior, pieza visual */
  --text-display-xl:clamp(48px,7vw,112px);/* h1 del hero, invitación del pie */
  --text-mega:clamp(72px,9vw,144px);    /* una sola palabra: «¿Y si…?» */
  --track-display:-.055em;  /* ≥ h2 */
  --track-title:-.035em;    /* 20–32 px */
  --track-mono:.04em;
  --lh-display:1.07;
  --lh-title:1.2;
  --lh-body:1.5;
  --lh-copy:1.65;           /* lectura larga */

  /* Movimiento */
  --ease:cubic-bezier(.22,1,.36,1);        /* todo lo que se mueve */
  --ease-sweep:cubic-bezier(.18,.8,.22,1); /* todo lo que se llena: entra rápido, frena */
  --t-fast:.24s;            /* color */
  --t-base:.34s;            /* barridos, iconos, transformaciones cortas */
  --t-slow:.55s;            /* glifos del pie */
  --t-image:.9s;            /* fotografías en hover */

  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
}
@media(max-width:1100px){:root{--gutter:32px;--section:96px}}
@media(max-width:760px){
  :root{
    --gutter:24px;--section:80px;--header-h:80px;
    --text-lead:18px;--text-title:20px;
    --text-display:44px;--text-display-xl:clamp(36px,7.9vw,58px);--text-mega:88px;--text-lead-sm:16px;
  }
}
@media(max-width:380px){:root{--text-display:36px;--text-display-xl:32px}}

/* ── 2 · Base ────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--s-16))}
body{margin:0;font-size:var(--text-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
body,button,a,summary{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;cursor:pointer;color:inherit;background:none;padding:0}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:400}
h1,h2{letter-spacing:var(--track-display);line-height:var(--lh-display);text-wrap:balance}
h2{font-size:var(--text-h2)}
::selection{background:var(--accent);color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:var(--s-4);border-radius:var(--radius)}
.skip{position:fixed;left:var(--s-24);top:-80px;z-index:10;background:var(--ink);color:var(--white);padding:var(--s-16) var(--s-24);border-radius:var(--radius)}
.skip:focus{top:var(--s-16)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── 3 · Tipografía ──────────────────────────────────────────────── */
.lead-copy{font-size:var(--text-title);line-height:var(--lh-body);letter-spacing:-.025em}
/* La mono es una sola voz: 12 px, 400, mayúsculas, en todos los tamaños. Va con candado. */
.mono,.eyebrow,.small-label,.project-caption>span,.hero-caption{
  font-family:var(--font-mono)!important;font-size:var(--text-mono)!important;font-weight:400!important;
  line-height:1.6!important;letter-spacing:var(--track-mono)!important;text-transform:uppercase!important;
}

/* ── 4 · Iconos · Phosphor por máscara: heredan currentColor ─────── */
.icon{display:inline-block;width:var(--s-24);height:var(--s-24);flex-shrink:0;background-color:currentColor;
  -webkit-mask:var(--icon) center/var(--icon-size,contain) no-repeat;mask:var(--icon) center/var(--icon-size,contain) no-repeat}
.icon[data-icon=arrow-up-right]{--icon:url('/assets/icons/arrow-up-right.svg')}
.icon[data-icon=arrow-up]{--icon:url('/assets/icons/arrow-up.svg')}
.icon[data-icon=arrow-down]{--icon:url('/assets/icons/arrow-down.svg')}
.icon[data-icon=arrow-right]{--icon:url('/assets/icons/arrow-right.svg')}
.icon[data-icon=plus]{--icon:url('/assets/icons/plus.svg')}
.icon[data-icon=minus]{--icon:url('/assets/icons/minus.svg')}
.icon[data-icon=x]{--icon:url('/assets/icons/x.svg')}
.icon[data-icon=list]{--icon:url('/assets/icons/list.svg')}
.icon[data-icon=play]{--icon:url('/assets/icons/play.svg')}
.icon[data-icon=pause]{--icon:url('/assets/icons/pause.svg')}
.icon[data-icon=file-text]{--icon:url('/assets/icons/file-text.svg')}
.icon[data-icon=chats-circle]{--icon:url('/assets/icons/chats-circle.svg')}
.icon[data-icon=aperture]{--icon:url('/assets/icons/aperture.svg')}
.icon[data-icon=cursor]{--icon:url('/assets/icons/cursor.svg')}
.icon[data-icon=intersect]{--icon:url('/assets/icons/intersect.svg')}
.icon--sm{width:var(--s-16);height:var(--s-16)}
.icon--back{transform:rotate(180deg)}
.icon-box{display:inline-flex;align-items:center;justify-content:center;width:var(--s-48);height:var(--s-48);background:var(--surface);border-radius:var(--radius);transition:background var(--t-base) var(--ease),transform var(--t-base) var(--ease)}

/* ── 5 · Retícula ────────────────────────────────────────────────── */
.section{padding:var(--section) var(--gutter);max-width:var(--container);margin:0 auto}
.section-heading{display:flex;justify-content:space-between;gap:var(--s-48);align-items:flex-end;margin-bottom:var(--s-64)}
.section-heading .eyebrow{margin-bottom:var(--s-32)}
.section-heading>p{max-width:280px}
/* Ancho editorial: todo bloque —imagen, card de color o panel— se alinea al contenedor.
   El único elemento que va de borde a borde es el hero (con el inset de 8 px). */
.bleed,.card-wide,.panel{width:calc(100% - var(--gutter) - var(--gutter));max-width:calc(var(--container) - var(--gutter) - var(--gutter));margin:0 auto;border-radius:var(--radius)}
.bleed{overflow:hidden}
/* Panel: sección sobre fondo propio, para separar bloques dentro de una página larga. */
.panel{padding:var(--s-64);background:var(--white);margin-block:0 var(--section)}
.panel--surface{background:var(--surface)}
.panel-heading{margin-bottom:var(--s-48)}
.panel-heading .eyebrow{margin-bottom:var(--s-24)}
.two-column{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-96)}
.two-column h2{max-width:19ch}
.two-column>div>.eyebrow{margin-bottom:var(--s-24)}
.two-column>div>p{max-width:50ch;margin-bottom:var(--s-24)}
.editorial-image{width:100%;height:auto;border-radius:var(--radius)}
@media(min-width:1792px){
  .header,.hero-caption,.site-footer{padding-left:max(var(--s-48),calc((100vw - 1664px)/2));padding-right:max(var(--s-48),calc((100vw - 1664px)/2))}
}

/* ── 6 · Cabecera ────────────────────────────────────────────────── */
.header{height:var(--header-h);padding:0 var(--gutter);display:flex;align-items:center;gap:var(--s-32);position:sticky;top:0;z-index:5;
  background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.brand{display:inline-flex;align-items:center}
.brand img{width:104px;height:48px;object-fit:contain}
.navigation{display:flex;align-items:center;gap:var(--s-24);margin-left:auto}
.navigation a{position:relative;font-size:var(--text-small)}
.navigation a:after{content:'';position:absolute;bottom:calc(-1 * var(--s-8));left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease)}
.navigation a:hover:after,.navigation a[aria-current=page]:after{transform:scaleX(1)}
.navigation a[aria-current=page]{font-weight:500}

/* ── 7 · Botones y enlaces de acción ─────────────────────────────── */
/* Todo lo que se pulsa se llena de izquierda a derecha con --sweep-color. */
.button{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--s-32);
  padding:var(--s-16) var(--s-24);border-radius:var(--radius);min-height:56px;background-color:var(--ink);color:var(--white);
  --sweep-color:var(--accent);transition:color var(--t-fast) ease,transform var(--t-base) var(--ease)}
.button::before{content:"";position:absolute;inset:-2px;z-index:-1;background:var(--sweep-color);transform:scaleX(0);transform-origin:left center;transition:transform var(--t-base) var(--ease-sweep);pointer-events:none}
.button:hover::before,.button:focus-visible::before{transform:scaleX(1)}
.button:hover,.button:focus-visible{color:var(--ink)}
.button:active{transform:scale(.98)}
.button:disabled{cursor:wait;opacity:.7}
.button--sm{min-height:var(--s-40);padding:var(--s-8) var(--s-16);gap:var(--s-16);font-size:var(--text-small)}
.button--danger{background-color:var(--error);--sweep-color:var(--white)}
.button--danger:hover,.button--danger:focus-visible{background-color:var(--error)}

.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--s-32);min-height:var(--s-48);font-size:var(--text-body);
  border-radius:var(--radius);padding:var(--s-8) var(--s-16);margin-left:calc(-1 * var(--s-16));
  --sweep-color:var(--accent);background-image:linear-gradient(var(--sweep-color),var(--sweep-color));background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  transition:background-size var(--t-base) var(--ease-sweep),color var(--t-fast) ease}
.text-link:hover,.text-link:focus-visible{background-size:100% 100%;color:var(--ink)}
.text-link .icon{transition:transform var(--t-base) var(--ease)}
.text-link:hover .icon{transform:translate(var(--s-4),calc(-1 * var(--s-4)))}

.icon-button{display:flex;align-items:center;justify-content:center;width:var(--s-48);height:var(--s-48);border-radius:var(--radius);
  --sweep-color:var(--accent);background-image:linear-gradient(var(--sweep-color),var(--sweep-color));background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  transition:background-size var(--t-base) var(--ease-sweep),color var(--t-fast) ease}
.icon-button:hover,.icon-button:focus-visible{background-size:100% 100%;background-color:var(--surface);color:var(--ink)}
.menu-toggle{display:none}

/* Conmutador de pastilla (filtros de proyectos, pestañas del panel, modos de la demo): se llena en blanco al pasar y queda amarillo activo.
   Activo por aria-pressed=true o por el radio que lo precede (input:checked + .toggle). */
.toggle{display:inline-flex;align-items:center;min-height:var(--s-48);padding:var(--s-16) var(--s-24);border-radius:var(--radius);background-color:var(--surface);color:var(--ink);cursor:pointer;
  --sweep-color:var(--white);background-image:linear-gradient(var(--sweep-color),var(--sweep-color));background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  transition:background-size var(--t-base) var(--ease-sweep),color var(--t-fast) ease}
.toggle:hover{background-size:100% 100%}
.toggle[aria-pressed=true],input:checked+.toggle{background-color:var(--accent);background-image:none}
.toggle-input,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.toggle-input:focus-visible+.toggle{outline:2px solid var(--focus);outline-offset:var(--s-4)}

/* CTA de cabecera: un gradiente al 200 % que se desplaza; sin ::before para no dejar rebabas en las esquinas */
.header-contact{font-size:var(--text-small);padding:var(--s-8) var(--s-16);gap:var(--s-8);min-height:var(--s-48);
  background-image:linear-gradient(90deg,var(--accent) 50%,var(--ink) 50%);background-size:200% 100%;background-position:right center;
  transition:background-position var(--t-base) var(--ease-sweep),color var(--t-fast) ease,transform var(--t-base) var(--ease)}
.header-contact::before{content:none}
.header-contact:hover,.header-contact:focus-visible{background-position:left center}

/* ── 8 · Etiquetas editoriales ───────────────────────────────────── */
/* Píldora blanca, radio 4, poco padding. Nombra: no se pulsa. */
.eyebrow,.small-label,.project-caption>span,.service-output>span,.contact-step-number{
  display:inline-flex;align-items:center;gap:var(--s-16);width:max-content;max-width:100%;
  padding:var(--s-4) var(--s-8);border-radius:var(--radius-sm);background:var(--white);color:var(--ink)}
.brand-dot{display:inline-block;width:var(--s-8);height:var(--s-8);border-radius:50%;background:var(--accent);flex-shrink:0}

/* Trío: tres columnas sobre una línea, sin card (por qué importa, qué te llevas). */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-48)}
.trio>article{padding-top:var(--s-24);border-top:1px solid var(--line-strong)}
.trio>article>.mono{color:var(--muted)}
.trio h3{font-size:var(--text-title-lg);letter-spacing:var(--track-title);line-height:1.12;margin:var(--s-24) 0 var(--s-16);max-width:14ch}
.trio p{max-width:36ch}

/* ── 9 · Acordeones ──────────────────────────────────────────────── */
/* Nativos (<details>): superficie que se llena de arriba abajo en blanco y, abierta, se queda blanca. */
.service,.reading-disclosure,.method-steps details{
  border:0;border-radius:var(--radius);background-color:var(--surface);
  --sweep-color:var(--white);background-image:linear-gradient(var(--sweep-color),var(--sweep-color));background-repeat:no-repeat;background-position:center top;background-size:100% 0%;
  transition:background-size var(--t-base) var(--ease-sweep),color var(--t-fast) ease}
.service:hover,.service:focus-within,.reading-disclosure:hover,.reading-disclosure:focus-within,.method-steps details:hover,.method-steps details:focus-within{background-size:100% 100%}
.service[open],.reading-disclosure[open],.method-steps details[open]{background-color:var(--white);background-image:none}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
.disclosure-icon{margin-left:auto;transition:transform var(--t-base) var(--ease)}
details[open] .disclosure-icon{transform:rotate(45deg)}

.service{padding:var(--s-32)}
.service summary{display:flex;align-items:center;gap:var(--s-24);min-height:var(--s-48);font-size:var(--text-title);letter-spacing:var(--track-title)}
.service-icon{width:var(--s-32);height:var(--s-32)}
.service summary>.disclosure-icon{width:var(--s-32);height:var(--s-32);--icon-size:var(--s-24)}
.service-body{padding:var(--s-24) 0 0 var(--s-56);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-24)}
.service-body p{max-width:39ch}
.service-body .small-label{color:var(--muted);margin-left:calc(-1 * var(--s-8))}
.service-body .text-link{background-color:var(--paper)}

.reading-list{display:flex;flex-direction:column;gap:var(--s-16)}
.reading-disclosure{padding:var(--s-24) var(--s-32)}
.reading-disclosure summary{display:flex;align-items:center;gap:var(--s-24);min-height:var(--s-40);font-size:var(--text-lead);letter-spacing:-.025em}
.reading-disclosure summary>.icon{margin-left:auto;width:var(--s-32);height:var(--s-32);--icon-size:var(--s-24);transition:transform var(--t-base) var(--ease)}
.reading-disclosure[open] summary>.icon{transform:rotate(45deg)}
.disclosure-body{padding-top:var(--s-24);display:flex;flex-direction:column;gap:var(--s-16);max-width:56ch}
.disclosure-body h3{font-size:var(--text-title);letter-spacing:-.02em}
.disclosure-body p{line-height:1.7}

/* ── 10 · Card de proyecto ───────────────────────────────────────── */
.project-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-64) var(--s-32)}
.project{grid-column:span 5;min-width:0}
.project-wide{grid-column:span 7}
.project-offset{padding-top:var(--s-128)}
.project-image{position:relative;aspect-ratio:1.12;overflow:hidden;border-radius:var(--radius);background:var(--surface)}
.project-wide .project-image{aspect-ratio:1.4}
.project-image>img{width:100%;height:100%;object-fit:cover;filter:blur(0);transition:transform var(--t-image) var(--ease),filter .32s var(--ease)}
.project:hover .project-image>img{transform:scale(1.035);filter:blur(6px);transition:transform var(--t-image) var(--ease),filter var(--t-slow) var(--ease)}
.project-open{position:absolute;bottom:var(--s-24);right:var(--s-24);width:var(--s-48);height:var(--s-48);display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:var(--glass);transition:transform var(--t-base) var(--ease),background var(--t-fast) ease}
.project:hover .project-open{transform:translate(var(--s-4),calc(-1 * var(--s-4)));background:var(--accent);color:var(--ink)}
.project-caption{display:flex;justify-content:space-between;align-items:center;gap:var(--s-24);margin-top:var(--s-24)}
.project-caption h3{font-size:var(--text-title);letter-spacing:-.03em}
.project>p{margin-top:var(--s-8);color:var(--muted);max-width:46ch}
.work-footer{display:flex;justify-content:space-between;align-items:center;gap:var(--s-32);margin-top:var(--s-64)}
.work-footer>p{color:var(--muted)}

/* ── 11 · Intro de página y vuelta atrás ─────────────────────────── */
.page-path.section{padding-top:var(--s-16);padding-bottom:0}
.back-link{display:flex;width:fit-content;align-items:center;gap:var(--s-16);min-height:var(--s-40);margin:0}
.back-link>.icon{width:var(--s-16);height:var(--s-16);transform:rotate(-135deg);order:-1}
.back-link:hover{color:var(--focus)}
.page-intro{padding-top:var(--s-80);padding-bottom:var(--s-64)}
.page-path+.page-intro{padding-top:var(--s-48)}
.page-intro>.eyebrow{margin-bottom:var(--s-32)}
.page-intro h1{font-size:var(--text-display);max-width:17ch;line-height:1.08}
.page-intro .page-lead{margin-top:var(--s-32);max-width:54ch;font-size:var(--text-lead);line-height:1.6}

/* ── 12 · Siguiente conversación (card de cierre) ────────────────── */
.next-case{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-64);align-items:center;background:var(--surface);border-radius:var(--radius);
  margin:var(--s-64) auto;padding:var(--s-64) var(--s-48);
  width:calc(100% - var(--gutter) - var(--gutter));max-width:calc(var(--container) - var(--gutter) - var(--gutter))}
.next-case>div>.eyebrow{margin-bottom:var(--s-24)}
.next-case p:not(.eyebrow){margin-top:var(--s-24);max-width:40ch}
.next-case .text-link{margin-top:var(--s-24)}
.next-case img.editorial-image{width:100%;height:360px;object-fit:cover}
.next-case a:hover>img{filter:brightness(1.04)}

/* ── 13 · Formulario ─────────────────────────────────────────────── */
.contact-form{background:var(--white);border-radius:var(--radius);padding:var(--s-32);display:flex;flex-direction:column;gap:var(--s-24);align-self:start}
.contact-form .consent{display:flex;align-items:flex-start;gap:var(--s-16);font-size:var(--text-small);margin-top:var(--s-8);line-height:var(--lh-body)}
.contact-form .consent input{appearance:auto;width:var(--s-24);height:var(--s-24);min-height:var(--s-24);flex-shrink:0;margin:0;accent-color:var(--ink)}
.consent a{text-decoration:underline;text-underline-offset:var(--s-4)}
.contact-form .button{align-self:flex-start}
.form-status:empty{display:none}
.form-status{font-size:var(--text-body)}
.form-status[data-error=true]{color:var(--error)}
.honeypot{display:none!important}
dialog{border:0;border-radius:var(--radius);padding:var(--s-40);background:var(--paper);color:var(--ink);max-width:560px;width:calc(100% - var(--s-32))}
dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(8px)}
dialog form{display:flex;flex-direction:column;gap:var(--s-24)}
dialog h2{font-size:var(--text-title-lg)}
dialog .button{align-self:flex-start}

/* ── 14 · Pie ────────────────────────────────────────────────────── */
.site-footer{background:var(--ink);color:var(--white);margin-top:var(--s-80);padding:var(--s-96) var(--gutter) var(--s-32)}
.site-footer .brand img{filter:brightness(0) invert(1)}
.footer-invitation{min-height:320px;margin-bottom:var(--s-96)}
.footer-invitation>.eyebrow{background:transparent;color:var(--muted-on-ink);padding:0;margin-bottom:var(--s-24)}
.footer-invitation>a{font-size:var(--text-display-xl);letter-spacing:-.05em;line-height:1.15;display:flex;align-items:center;justify-content:space-between;gap:var(--s-32);max-width:100%;padding:var(--s-16) 0}
/* El color viaja solo por los glifos */
.footer-invitation>a>span:first-child{display:inline-block;background-image:linear-gradient(90deg,var(--accent) 50%,var(--white) 50%);background-size:200% 100%;background-position:right center;
  background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;transition:background-position var(--t-slow) var(--ease-sweep)}
.footer-invitation>a:hover>span:first-child,.footer-invitation>a:focus-visible>span:first-child{background-position:left center}
.footer-invitation-arrow{width:var(--s-64);height:var(--s-64);transition:background-color var(--t-base) ease}
.footer-invitation>a:hover>.footer-invitation-arrow,.footer-invitation>a:focus-visible>.footer-invitation-arrow{background-color:var(--accent)}
.footer-invitation-note{margin:var(--s-32) 0 0 auto;max-width:36ch;color:var(--muted-on-ink);font-size:var(--text-lead-sm);line-height:1.55}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-32)}
.footer-top p{font-size:var(--text-small);line-height:1.8}
.footer-top nav{display:flex;flex-direction:column;gap:var(--s-16)}
.footer-top>div{display:flex;flex-direction:column;gap:var(--s-16)}
.footer-top a:not(.brand){display:inline-flex;gap:var(--s-16);align-items:center}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--s-32);font-size:var(--text-small);color:var(--muted-on-ink);margin-top:var(--s-64)}
.footer-bottom>div{display:flex;gap:var(--s-24)}
.footer-bottom>a{display:inline-flex;align-items:center;gap:var(--s-16)}
.footer-top .icon,.footer-bottom .icon{width:var(--s-16);height:var(--s-16)}
.site-footer a:hover{color:var(--accent)}
.burger-footer{color:var(--white)}

/* ── 15 · Responsive del sistema ─────────────────────────────────── */
@media(max-width:1100px){
  .panel{padding:var(--s-48)}
  .trio{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-32)}
  .header{gap:var(--s-24)}
  .navigation{gap:var(--s-16)}
  .service{padding:var(--s-24)}
  .service summary{font-size:var(--text-lead);gap:var(--s-16)}
  .service-body{padding-left:0}
  .project-offset{padding-top:var(--s-96)}
  .project-caption{align-items:flex-start;flex-direction:column;gap:var(--s-8)}
  .two-column{gap:var(--s-48)}
  .next-case{gap:var(--s-40)}
  .footer-bottom{flex-wrap:wrap;gap:var(--s-24)}
}
@media(max-width:860px) and (min-width:761px){
  .header{padding-left:var(--s-24);padding-right:var(--s-24);gap:var(--s-16)}
  .brand img{width:80px}
  .navigation a{font-size:var(--text-mono)}
  .header-contact{font-size:var(--text-mono);padding:var(--s-8)}
}
@media(max-width:760px){
  .panel{padding:var(--s-32) var(--s-24)}
  .panel-heading{margin-bottom:var(--s-32)}
  .trio{grid-template-columns:1fr}
  .header{gap:var(--s-16);padding:0 var(--s-24)}
  .brand img{width:88px;height:40px}
  .header-contact{margin-left:auto;font-size:var(--text-body)}
  .header-contact .icon{width:var(--s-16);height:var(--s-16)}
  .menu-toggle{display:flex;background-color:var(--surface);flex-shrink:0}
  .navigation{display:none;position:absolute;top:var(--header-h);left:var(--s-16);right:var(--s-16);background:var(--paper);border-radius:var(--radius);padding:var(--s-24);box-shadow:var(--shadow-float);gap:var(--s-8)}
  .navigation.is-open{display:flex;flex-direction:column;align-items:stretch}
  .navigation a{padding:var(--s-16);font-size:var(--text-body)}
  .section-heading{display:block;margin-bottom:var(--s-40)}
  .section-heading .eyebrow{margin-bottom:var(--s-24)}
  .section-heading>p{margin-top:var(--s-24)}
  .two-column{grid-template-columns:1fr;gap:var(--s-40);padding-top:var(--s-64);padding-bottom:var(--s-64)}
  .lead-copy{font-size:var(--text-lead)}
  .project-grid{display:flex;flex-direction:column;gap:var(--s-40)}
  .project-offset{padding-top:0}
  .project .project-image{aspect-ratio:1.14}
  .project-caption{flex-direction:row;align-items:center;gap:var(--s-16);margin-top:var(--s-16)}
  .project>p{font-size:var(--text-small)}
  .work-footer{margin-top:var(--s-40);display:block}
  .work-footer>.text-link{margin-top:var(--s-16)}
  .work-footer>p{font-size:var(--text-small)}
  .service{padding:var(--s-24)}
  .service summary{font-size:var(--text-lead);gap:var(--s-16)}
  .service-icon{width:var(--s-24);height:var(--s-24)}
  .service-body{gap:var(--s-16)}
  .service-body .text-link{font-size:var(--text-small);gap:var(--s-16)}
  .reading-disclosure{padding:var(--s-24)}
  .reading-disclosure summary{font-size:var(--text-lead);gap:var(--s-16)}
  .disclosure-body{padding-top:var(--s-16)}
  .page-intro{padding-top:var(--s-56);padding-bottom:var(--s-40)}
  .page-path+.page-intro{padding-top:var(--s-40)}
  .page-intro>.eyebrow{margin-bottom:var(--s-24)}
  .page-intro h1{max-width:none;overflow-wrap:normal}
  .page-intro .page-lead{margin-top:var(--s-24)}
  .next-case{grid-template-columns:1fr;margin:var(--s-40) auto;padding:var(--s-40) var(--s-24);gap:var(--s-32)}
  .next-case img.editorial-image{height:264px}
  .contact-form{padding:var(--s-24)}
  .contact-form .button{width:100%}
  .site-footer{margin-top:var(--s-64);padding-top:var(--s-64)}
  .footer-invitation{min-height:0;margin-bottom:var(--s-80)}
  .footer-invitation>a{gap:var(--s-24)}
  .footer-invitation-arrow{width:var(--s-40);height:var(--s-40)}
  .footer-invitation-note{margin:var(--s-24) 0 0;font-size:var(--text-body)}
  .footer-top{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-32) var(--s-24)}
  .footer-top>p{margin:0;font-size:var(--text-mono)}
  .footer-top>nav,.footer-top>div{font-size:var(--text-small)}
  .footer-top .brand{align-self:start}
  .footer-bottom{margin-top:var(--s-48);gap:var(--s-24);font-size:var(--text-mono)}
  .footer-bottom>div{gap:var(--s-16)}
  .footer-bottom>a{width:100%;font-size:var(--text-mono);line-height:1.8}
}
@media(max-width:380px){
  .header{padding:0 var(--s-16);gap:var(--s-8)}
  .header-contact{gap:var(--s-8)}
  .service{padding:var(--s-16)}
  .service summary{font-size:var(--text-lead);gap:var(--s-8)}
  .project-caption{flex-direction:column;align-items:flex-start;gap:var(--s-8)}
  .reading-disclosure{padding:var(--s-16)}
  .reading-disclosure summary{gap:var(--s-8)}
  .contact-form{padding:var(--s-16)}
  .footer-top{grid-template-columns:1fr}
  .footer-invitation-arrow{width:var(--s-32);height:var(--s-32)}
}

/* ── 16 · Movimiento reducido ────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-image,.project-image>img{transform:none!important}
  .project .project-image>img,.project:hover .project-image>img{filter:none}
}