/* =========================================================================
   NATTOO.INK — hoja de estilos
   Mobile-first: base = celular (<700px) · tablet (700–1099px) · escritorio (≥1100px)
   En escritorio, --u equivale a 1 px del mockup definitivo (pliego de 1250 px),
   para trasladar sus coordenadas y proporciones de forma directa.
   ========================================================================= */

@font-face { font-family: 'Gloock'; src: url("assets/fonts/gloock-latin.woff2") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url("assets/fonts/instrument-serif-latin.woff2") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url("assets/fonts/archivo-latin-var.woff2") format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  --ink: #141211;          /* negro carbón */
  --ink-soft: #1d1a18;
  --bone: #e8dcc6;         /* hueso envejecido */
  --bone-deep: #d8c8ad;
  --bone-hi: #f1e8d8;
  --plum: #5b1e3b;         /* ciruela oscuro */
  --plum-bright: #8a3560;
  --text: #191614;
  --text-soft: #3b3430;
  --on-dark-soft: #d2c5ae;
  --display: 'Gloock', 'Bodoni 72', Didot, Georgia, serif;
  --serif: 'Instrument Serif', 'Bodoni 72', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --torn: url("assets/textures/mascara-rasgada.png");
  --torn-soft: url("assets/textures/mascara-rasgada-suave.png");
  --torn-sheet: url("assets/textures/mascara-pliego.png");
  --paper: url("assets/textures/papel.png");
  --grain: url("assets/textures/grano-tinta.png");
  --grime: url("assets/textures/suciedad-papel.png");
  --gutter: 16px;
  --header-h: 60px;      /* altura real de la cabecera persistente en celular (igual a la anterior: sin desplazar la portada) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 14px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: #0d0c0b var(--grain);
  color: var(--text);
  font: 400 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
body.dialog-open { overflow: hidden; }
img, video { display: block; max-width: 100%; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -100px; z-index: 100; background: var(--bone); color: var(--ink); padding: 10px 16px; font-weight: 600; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--plum-bright); outline-offset: 3px; }
.panel-dark :focus-visible, .masthead :focus-visible, .footer :focus-visible, .media-dialog :focus-visible, .hero :focus-visible { outline-color: var(--bone-hi); }

/* ---------- Bordes rasgados (mask-border; en navegadores sin soporte queda recto) ---------- */
.torn { -webkit-mask-box-image: var(--torn) 24 fill / 24px round; mask-border: var(--torn) 24 fill / 24px round; }
.sheet { -webkit-mask-box-image: var(--torn-sheet) 32 fill / 32px round; mask-border: var(--torn-sheet) 32 fill / 32px round; }

/* ---------- Tipografía base ---------- */
.eyebrow { font: 600 10.5px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.plum { color: var(--plum); }
h2 { font-family: var(--serif); font-weight: 400; line-height: .9; letter-spacing: -.005em; text-transform: uppercase; }

/* ---------- Botones ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 44px; padding: 12px 22px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font: 600 11px/1.1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.button .arrow { font-size: 1.35em; line-height: .6; letter-spacing: 0; transition: transform .2s; }
.button:hover .arrow { transform: translateX(3px); }
.button.solid { background: var(--ink); color: var(--bone-hi); }
.button.solid:hover { background: var(--plum); border-color: var(--plum); }
.button.light { border-color: var(--bone); color: var(--bone-hi); }
.button.light:hover { background: var(--bone-hi); color: var(--ink); }
.button.solid.bone { background: var(--bone-hi); color: var(--ink); border-color: var(--bone-hi); }
.button.solid.bone:hover { background: var(--plum); color: var(--bone-hi); border-color: var(--plum); }
.button.compact { min-height: 38px; padding: 9px 16px; font-size: 10px; }

/* ---------- Ornamentos ---------- */
.orn { position: absolute; pointer-events: none; user-select: none; height: auto; }
.orn-gouge { display: block; height: 22px; background: url("assets/textures/gubia.png") repeat-x 0 50% / auto 100%; opacity: .55; }

/* =========================================================================
   CELULAR (base)
   ========================================================================= */
.page { max-width: 1480px; margin: 0 auto; position: relative; container-type: inline-size; }

/* Cabecera persistente: sticky dentro de .page (que abarca toda la página, sin overflow ni máscara),
   por encima de pliegos y ornamentos y por debajo de los diálogos, que van en la capa superior. */
.masthead {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  height: var(--header-h); padding: 0 var(--gutter);
  background: var(--ink); color: var(--bone-hi);
  box-shadow: 0 1px 0 #2c2622;
}
.wordmark { font: 400 22px/1 var(--display); letter-spacing: .01em; text-decoration: none; margin-right: auto; }
.menu-toggle { order: 3; width: 44px; height: 44px; margin-right: -10px; display: grid; place-content: center; gap: 6px; background: none; border: 0; cursor: pointer; }
.menu-toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .25s, opacity .2s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.instagram { order: 2; width: 44px; height: 44px; display: grid; place-items: center; }
.instagram svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.instagram .dot { fill: currentColor; stroke: none; }
.navigation {
  position: absolute; left: 0; right: 0; top: 100%;
  display: none; flex-direction: column;
  padding: 8px var(--gutter) 20px;
  background: var(--ink); border-top: 1px solid #3a332e;
  box-shadow: 0 18px 30px rgb(0 0 0 / .45);
}
.navigation.open { display: flex; }
.navigation a { padding: 14px 0; border-bottom: 1px solid #2c2622; font: 600 12px/1.2 var(--sans); letter-spacing: .2em; text-decoration: none; }
.navigation a[aria-current] { color: #e6b9cf; }

/* Pliegos de papel */
.sheet {
  position: relative; overflow: clip;
  margin: 8px;
  background: var(--grime), var(--paper) var(--bone);
  color: var(--text);
}
.poster { padding: 10px 10px 18px; display: grid; gap: 10px; }
.poster > .orn-star-top, .poster > .orn-star-mid, .poster > .orn-gouge { display: none; }

/* Portada (celular: panel oscuro, foto arriba y texto debajo) */
.hero {
  position: relative; isolation: isolate;
  background: var(--ink) var(--grain); color: var(--bone-hi);
  display: flex; flex-direction: column;
  -webkit-mask-box-image: var(--torn) 24 fill / 24px round; mask-border: var(--torn) 24 fill / 24px round;
}
.hero__photo { order: 1; position: relative; aspect-ratio: 960 / 1330; overflow: hidden; -webkit-mask-box-image: none; mask-border: none; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
/* El degradado solo oscurece la zona inferior (espalda del cliente), por debajo de las manos. */
.hero__photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 13%; background: linear-gradient(to bottom, rgb(20 18 17 / 0), var(--ink) 92%); }
.hero__copy { order: 2; position: relative; z-index: 2; margin-top: -58px; padding: 0 18px 20px; }
.hero__copy .eyebrow { color: var(--bone-hi); font-size: 10px; margin-bottom: 8px; }
.hero h1 { font: 400 clamp(34px, 9.6vw, 46px)/.95 var(--display); letter-spacing: -.01em; text-transform: uppercase; }
.hero h1 span { display: inline; }
.hero__lead { margin: 12px 0 18px; font-size: 15px; line-height: 1.35; color: var(--on-dark-soft); }
.hero__lead br { display: none; }
.hero .button.solid { background: transparent; border-color: var(--bone); color: var(--bone-hi); }
.hero .button.solid:hover { background: var(--bone-hi); color: var(--ink); }
.orn-hero-splatter, .orn-hero-sparkle { display: none; }

/* Navegación por capítulos 01 / 04 */
.folio { display: flex; align-items: center; gap: 4px; margin-top: 18px; font: 500 11px/1 var(--sans); letter-spacing: .2em; }
.folio__count { margin-right: auto; }
.folio__arrow { display: grid; place-items: center; width: 40px; height: 40px; font-size: 19px; text-decoration: none; letter-spacing: 0; }
.folio__arrow:hover { color: var(--plum-bright); }
.folio--light .folio__arrow:hover { color: #e6b9cf; }

/* Filas */
.row { display: grid; gap: 10px; position: relative; }

/* Paneles oscuros */
.panel-dark { position: relative; background: var(--ink) var(--grain); color: var(--bone-hi); }
.panel-dark h2 { color: var(--bone-hi); }

/* El proceso */
.process { display: grid; grid-template-columns: 1fr minmax(118px, 40%); grid-template-rows: 1fr auto; min-height: 280px; overflow: hidden; }
.process__copy { position: relative; z-index: 2; padding: 22px 6px 6px 20px; }
.process h2 { font-size: 34px; }
.process .eyebrow { margin: 8px 0 14px; font-size: 10px; }
.process__text { font-size: 13px; line-height: 1.45; color: var(--on-dark-soft); margin-bottom: 18px; }
.process__text br { display: none; }
.process__media { grid-row: 1 / 3; grid-column: 2; position: relative; overflow: hidden; background: #0b0a09; }
.process__ambient { position: absolute; inset: -10%; width: 120%; height: 120%; max-width: none; object-fit: cover; filter: blur(14px) brightness(.45) saturate(.7); transform: scale(1.05); }
/* El video no define la altura del panel: ocupa el área completa y se muestra entero (9:16, sin recorte). */
.process__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.process__media::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 28%; z-index: 1; background: linear-gradient(to right, var(--ink), rgb(20 18 17 / 0)); pointer-events: none; }
.video-toggle {
  position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(20 18 17 / .45); border: 1.5px solid var(--bone-hi); color: var(--bone-hi); cursor: pointer;
  transition: background-color .2s;
}
.video-toggle:hover { background: var(--plum); }
.video-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.video-toggle .i-pause, .video-toggle[data-playing="true"] .i-play { display: none; }
.video-toggle[data-playing="true"] .i-pause { display: block; }
.process > .folio { grid-column: 1; padding: 0 6px 10px 20px; margin-top: 0; }

/* Estilos */
.styles { position: relative; display: grid; grid-template-columns: 1fr 30%; gap: 8px; padding: 22px 14px 22px 18px; }
.styles h2 { font-size: 34px; margin-bottom: 14px; }
.style-list li + li { border-top: 1px solid rgb(25 22 20 / .35); }
.style-list li:first-child { border-top: 1px solid rgb(25 22 20 / .35); }
.style-list li:last-child { border-bottom: 1px solid rgb(25 22 20 / .35); }
.style-list button {
  width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 2px; background: none; border: 0; cursor: pointer; text-align: left;
  font: 500 10.5px/1.2 var(--sans); letter-spacing: .1em; color: var(--text);
}
.style-list button .arrow { font-size: 15px; letter-spacing: 0; transition: transform .2s; }
.style-list button:hover { color: var(--plum); }
.style-list button:hover .arrow { transform: translateX(3px); }
.styles__art { position: relative; min-height: 210px; }
.styles__vase { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 100%; width: auto; max-width: none; }
.styles__star { position: absolute; height: auto; }
.styles__star--a { width: 26px; left: -4px; top: 18%; }
.styles__star--b { width: 20px; right: -6px; top: 4%; }
.styles__star--c { width: 14px; left: 2px; bottom: 16%; }

/* Tarjetas inferiores: estudio y Behind the ink (celular: título sobre la foto) */
.row--low { gap: 10px; }
.orn-sprig { display: none; }
.studio, .behind { display: grid; grid-template-areas: "stack"; overflow: hidden; }
.card__photo { grid-area: stack; position: relative; height: 250px; overflow: hidden; }
.card__photo img { width: 100%; height: 100%; object-fit: cover; }
.studio .card__photo img { object-position: 50% 62%; }
.behind .card__photo img { object-position: 15% 35%; }
.card__photo::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; background: linear-gradient(to bottom, rgb(20 18 17 / .88), rgb(20 18 17 / 0)); pointer-events: none; }
.card__copy { grid-area: stack; position: relative; z-index: 2; align-self: start; padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: start; }
.card__copy .eyebrow { display: none; }
.card__copy h2 { font-size: 30px; grid-column: 1; }
.card__copy h2 br { display: none; }
.card__copy p:not(.eyebrow) { grid-column: 1; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--on-dark-soft); max-width: 30ch; text-shadow: 0 1px 6px rgb(0 0 0 / .7); }
/* Celular: botón cuadrado con flecha, como en el mockup; el texto queda disponible para lectores de pantalla. */
.card__copy .button { grid-column: 2; grid-row: 1; width: 44px; min-height: 44px; padding: 0; gap: 0; }
.card__copy .button .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card__copy .button .arrow { font-size: 18px; }
.behind .folio--photo { position: absolute; z-index: 3; right: 6px; bottom: 4px; left: 14px; margin: 0; color: var(--bone-hi); text-shadow: 0 1px 6px rgb(0 0 0 / .8); }
.orn-behind-splatter { display: none; }

/* Experiencias (avance) */
.experiences { position: relative; padding: 22px 20px 24px; min-height: 200px; }
.experiences h2 { font-size: 32px; position: relative; z-index: 1; }
.experiences p { margin: 10px 0 16px; font-size: 13.5px; line-height: 1.45; color: var(--text-soft); max-width: 19ch; position: relative; z-index: 1; }
.experiences .button { position: relative; z-index: 1; }
.orn-butterfly { width: 92px; right: 12px; bottom: 26px; }

/* ---------- Galería ---------- */
.gallery { padding: 34px 18px 30px; }
.orn-gallery-ornament { width: 150px; left: 50%; top: 10px; translate: -50% 0; opacity: .9; }
.orn-gallery-acanthus { display: none; }
.gallery__head { padding-top: 60px; display: grid; gap: 14px; }
.gallery h2 { font: 400 clamp(38px, 11vw, 54px)/.9 var(--display); letter-spacing: -.01em; margin-top: 8px; }
.gallery__intro { font-size: 14px; line-height: 1.5; color: var(--text-soft); max-width: 46ch; }
.gallery__toolbar { margin: 24px 0 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.gallery__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.gallery__filters button {
  min-height: 38px; padding: 8px 12px; cursor: pointer;
  border: 1px solid rgb(25 22 20 / .55); background: transparent;
  font: 500 11px/1 var(--sans); letter-spacing: .08em; color: var(--text);
}
.gallery__filters button .count { margin-left: 6px; font-size: 10px; color: var(--plum); }
.gallery__filters button[aria-pressed="true"] { background: var(--ink); color: var(--bone-hi); border-color: var(--ink); }
.gallery__filters button[aria-pressed="true"] .count { color: #e6b9cf; }
#gallery-status { font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
.work-card[hidden] { display: none; }
.work-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--ink); cursor: zoom-in; aspect-ratio: 3 / 4; overflow: hidden; -webkit-mask-box-image: var(--torn-soft) 14 fill / 14px round; mask-border: var(--torn-soft) 14 fill / 14px round; }
.work-open img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.work-open:hover img { transform: scale(1.03); }
.work-zoom { position: absolute; right: 8px; bottom: 8px; padding: 6px 8px; background: var(--bone-hi); color: var(--ink); font: 600 9px/1 var(--sans); letter-spacing: .16em; }
.work-photo-count { position: absolute; left: 8px; top: 8px; padding: 5px 7px; background: var(--ink); color: var(--bone-hi); font: 600 9px/1 var(--sans); letter-spacing: .14em; }
.work-card figcaption { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; }
.work-card h3 { font: 400 17px/1.1 var(--serif); }
.work-card figcaption p { margin-top: 4px; font: 500 9.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--plum); }
.work-number { font: 400 14px/1 var(--serif); color: var(--text-soft); }
.gallery__empty { padding: 30px 0; display: grid; gap: 14px; justify-items: start; }
.gallery__cta { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgb(25 22 20 / .35); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.gallery__cta p { font: 400 22px/1.15 var(--serif); }

/* ---------- Eventos ---------- */
.events { padding: 34px 18px 22px; }
.orn-events-vase { width: 92px; right: 12px; top: 22px; }
.events__head { max-width: 640px; padding-right: 96px; }
.events h2 { font: 400 clamp(38px, 11vw, 54px)/.9 var(--display); margin-top: 8px; letter-spacing: -.01em; }
.events__intro { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--text-soft); }
.event-list { margin: 26px 0; display: grid; gap: 10px; }
.event-card { position: relative; padding: 18px 16px 18px 86px; min-height: 92px; border: 1px solid rgb(25 22 20 / .35); background: rgb(241 232 216 / .35); }
.event-card img { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 56px; height: auto; }
.event-card__n { position: absolute; right: 12px; top: 10px; font: 400 14px/1 var(--serif); color: var(--plum); }
.event-card h3 { font: 400 23px/1 var(--serif); text-transform: uppercase; }
.event-card p { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--text-soft); }

/* ---------- Pie ---------- */
.footer { position: relative; overflow: clip; margin: 0 8px; padding: 44px var(--gutter) 40px; text-align: center; color: var(--bone-hi); display: grid; justify-items: center; gap: 10px; }
.orn-footer { position: static; width: 120px; margin-bottom: 4px; filter: invert(.92) sepia(.25); }
.footer__mark { font: 400 30px/1 var(--display); }
.footer__place { font: 600 10.5px/1.4 var(--sans); letter-spacing: .22em; color: var(--on-dark-soft); }
.footer__contact { font-size: 14px; color: var(--on-dark-soft); margin-bottom: 8px; }

/* ---------- Diálogo de medios ---------- */
.media-dialog { width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; background: var(--ink) var(--grain); color: var(--bone-hi); }
.media-dialog::backdrop { background: rgb(8 7 7 / .86); }
.media-dialog__body { padding: 20px 18px 22px; display: grid; gap: 12px; }
.media-dialog h2 { font-size: 30px; padding-right: 44px; }
#media-slot img, #media-slot video { width: auto; max-width: 100%; max-height: calc(100dvh - 210px); margin: 0 auto; object-fit: contain; }
#media-caption { font-size: 13px; color: var(--on-dark-soft); }
.dialog-close { position: absolute; right: 8px; top: 8px; z-index: 2; width: 44px; height: 44px; border: 1px solid #4a423c; background: var(--ink); color: var(--bone-hi); font-size: 26px; line-height: 1; cursor: pointer; }
#work-navigation { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#work-navigation[hidden], #work-views[hidden] { display: none; }
#work-navigation button { min-height: 40px; padding: 8px 14px; border: 1px solid #5a5048; background: none; cursor: pointer; font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
#work-navigation button:disabled { opacity: .35; cursor: default; }
#work-position, #view-position { font: 500 11px/1 var(--sans); letter-spacing: .16em; color: var(--on-dark-soft); }
#view-thumbnails { display: flex; gap: 8px; margin-bottom: 8px; }
.view-thumbnail { display: grid; gap: 4px; padding: 0; border: 1px solid #5a5048; background: none; cursor: pointer; width: 74px; font: 500 9px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding-bottom: 4px; }
.view-thumbnail img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.view-thumbnail[aria-pressed="true"] { border-color: var(--bone-hi); outline: 1px solid var(--bone-hi); }

/* En celulares angostos la maceta decorativa no entra sin tocar el título: se oculta. */
@media (max-width: 559px) {
  .orn-events-vase { display: none; }
  .events__head { padding-right: 0; }
}
@media (max-width: 359px) {
  .work-grid { grid-template-columns: 1fr; }
  .card__copy { grid-template-columns: 1fr; }
  .card__copy .button { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; }
  .process { grid-template-columns: 1fr 42%; }
}

/* =========================================================================
   TABLET (700–1099 px)
   ========================================================================= */
@media (min-width: 700px) {
  :root { --gutter: 28px; }
  :root { --header-h: 66px; }
  /* La cabecera ocupa su lugar sobre el margen superior del pliego (margen negativo = misma posición
     que antes, sin salto ni espacio duplicado) y, al bajar, queda fija arriba con fondo de papel. */
  .masthead {
    margin: 12px 12px calc(-1 * var(--header-h) - 12px);
    padding: 0 36px;
    background: transparent; color: var(--ink); box-shadow: none;
    transition: background-color .2s, box-shadow .2s;
  }
  .masthead.is-stuck { background: var(--paper) var(--bone); box-shadow: 0 1px 0 rgb(20 18 17 / .35), 0 8px 18px rgb(8 7 7 / .28); }
  .wordmark { font-size: 26px; margin-right: 0; }
  .menu-toggle { display: none; }
  .navigation { position: static; display: flex; flex-direction: row; justify-content: center; gap: 4px 18px; flex: 1; flex-wrap: nowrap; padding: 0 12px; background: none; border: 0; box-shadow: none; }
  .navigation a { border: 0; padding: 10px 0 6px; font-size: 10px; letter-spacing: .14em; white-space: nowrap; border-bottom: 2px solid transparent; }
  .navigation a[aria-current] { color: var(--ink); border-bottom-color: var(--plum); }
  .navigation a:hover { color: var(--plum); }
  .instagram { order: 3; margin-right: -10px; }
  .instagram svg { width: 26px; height: 26px; }

  .sheet { margin: 12px; }
  .poster { padding: 78px 18px 24px; gap: 14px; }

  .hero { display: grid; grid-template-columns: 44% 1fr; gap: 0 20px; background: none; color: var(--text); -webkit-mask-box-image: none; mask-border: none; isolation: auto; }
  .hero__copy { order: 0; margin: 0; padding: 24px 0 8px 18px; align-self: center; }
  .hero__copy .eyebrow { color: var(--plum); font-size: 10.5px; margin-bottom: 16px; }
  .hero h1 { font-size: clamp(44px, 6.9vw, 70px); line-height: .86; white-space: nowrap; }
  .hero h1 span { display: block; transform: scaleX(.84); transform-origin: 0 50%; }
  .hero__lead { color: var(--text-soft); font-size: 15px; margin: 18px 0 22px; }
  .hero__lead br { display: inline; }
  .hero .button.solid { background: var(--ink); color: var(--bone-hi); border-color: var(--ink); }
  .hero .button.solid:hover { background: var(--plum); border-color: var(--plum); }
  .hero :focus-visible { outline-color: var(--plum-bright); }
  .hero__photo { order: 1; aspect-ratio: 960 / 1120; -webkit-mask-box-image: var(--torn) 24 fill / 24px round; mask-border: var(--torn) 24 fill / 24px round; }
  .hero__photo img { object-position: 50% 58%; }
  .hero__photo::after { display: none; }
  .folio { margin-top: 28px; max-width: 240px; }
  .orn-hero-splatter { display: block; z-index: -1; width: 120px; right: -24px; bottom: -12px; opacity: .9; }

  .process { grid-template-columns: 1fr 34%; min-height: 330px; }
  .process__copy { padding: 34px 20px 10px 34px; }
  .process h2 { font-size: 46px; }
  .process__text { font-size: 14px; }
  .process__text br { display: inline; }
  .process > .folio { padding: 0 20px 14px 34px; max-width: 280px; }

  .styles { grid-template-columns: 1fr 40%; padding: 30px 28px 30px 34px; }
  .styles h2 { font-size: 46px; margin-bottom: 20px; }
  .style-list button { font-size: 11px; min-height: 44px; }
  .styles__art { min-height: 270px; }
  .styles__star--a { width: 36px; left: 4%; top: 24%; }
  .styles__star--b { width: 28px; right: 6%; top: 2%; }
  .styles__star--c { width: 18px; left: 12%; bottom: 14%; }

  .studio, .behind { grid-template-areas: none; grid-template-columns: 50% 1fr; min-height: 300px; }
  .card__photo { grid-area: auto; height: auto; min-height: 100%; }
  .card__photo img { position: absolute; inset: 0; }
  .card__photo::after { display: none; }
  .card__copy { grid-area: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 26px 26px 26px 28px; }
  .card__copy .eyebrow { display: block; margin-bottom: 10px; }
  .card__copy h2 { font-size: 40px; }
  .card__copy h2 br { display: inline; }
  .card__copy p:not(.eyebrow) { margin: 12px 0 20px; font-size: 13.5px; text-shadow: none; }
  .card__copy .button { width: auto; min-height: 38px; padding: 9px 16px; gap: 14px; }
  .card__copy .button .label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .card__copy .button .arrow { font-size: 1.35em; }
  .behind .folio--photo { left: 18px; right: 10px; bottom: 6px; }
  .orn-behind-splatter { display: block; width: 200px; right: -150px; top: -30px; opacity: .85; z-index: 1; }

  .experiences { padding: 32px 34px; min-height: 230px; }
  .experiences h2 { font-size: 44px; }
  .orn-butterfly { width: 150px; right: 40px; bottom: 34px; }

  .gallery, .events { padding: 44px 34px 36px; }
  .gallery__head { padding-top: 70px; grid-template-columns: 1fr 1fr; align-items: end; }
  .orn-gallery-ornament { width: 190px; top: 14px; }
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 16px; }
  .work-card h3 { font-size: 19px; }
  .event-list { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .orn-events-vase { width: 96px; right: 34px; top: 26px; }
  .events__head { padding-right: 150px; }
  .footer { margin: 0 12px; }
}

/* =========================================================================
   ESCRITORIO (≥1100 px) — composición del mockup en unidades --u
   ========================================================================= */
@media (min-width: 1100px) {
  .page { --u: calc((100cqw - 24px) / 1250); }
  /* Altura de la cabecera en escritorio (58 u) + respiro, para que los títulos no queden debajo. */
  html { scroll-padding-top: calc((min(100vw, 1480px) - 24px) * 58 / 1250 + 18px); }

  /* Cabecera sobre el pliego: misma altura y posición del mockup (58 u), ahora persistente. */
  .masthead { --header-h: calc(58 * var(--u)); padding: 0 calc(70 * var(--u)) 0 calc(90 * var(--u)); }
  .wordmark { font-size: max(24px, calc(33 * var(--u))); letter-spacing: 0; }
  .navigation { gap: calc(36 * var(--u)); padding-left: calc(56 * var(--u)); justify-content: flex-start; flex: 1; }
  .navigation a { font-size: max(10.5px, calc(10.6 * var(--u))); letter-spacing: .17em; padding: 10px 0 5px; }
  .instagram svg { width: max(26px, calc(32 * var(--u))); height: max(26px, calc(32 * var(--u))); stroke-width: 1.9; }

  .sheet { margin: 12px; }

  /* Pliego principal */
  .poster {
    display: grid;
    grid-template-columns: calc(25 * var(--u)) calc(50 * var(--u)) calc(15 * var(--u)) calc(420 * var(--u)) calc(10 * var(--u)) 1fr calc(16 * var(--u));
    grid-template-rows: auto auto auto;
    gap: 0;
    padding: calc(58 * var(--u)) 0 calc(22 * var(--u));
  }
  .poster > .orn-star-top, .poster > .orn-star-mid, .poster > .orn-gouge { display: block; }
  .orn-star-top { width: calc(52 * var(--u)); left: calc(10 * var(--u)); top: calc(16 * var(--u)); }
  .orn-star-mid { width: calc(60 * var(--u)); left: calc(18 * var(--u)); top: calc(360 * var(--u)); }
  .orn-gouge-b { width: calc(200 * var(--u)); right: calc(30 * var(--u)); bottom: calc(2 * var(--u)); transform: rotate(-.8deg); }

  /* Portada */
  .hero { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; background: none; color: var(--text); isolation: isolate; }
  .hero__copy { grid-column: 4; padding: calc(42 * var(--u)) 0 calc(24 * var(--u)); align-self: start; }
  .hero__copy .eyebrow { font-size: max(10.5px, calc(11.6 * var(--u))); letter-spacing: .22em; margin-bottom: calc(18 * var(--u)); }
  .hero h1 { font-size: calc(76 * var(--u)); line-height: .835; letter-spacing: -.012em; white-space: nowrap; }
  .hero h1 span { display: block; transform: scaleX(.84); transform-origin: 0 50%; }
  .hero__lead { font-size: max(14px, calc(15.5 * var(--u))); line-height: 1.22; margin: calc(18 * var(--u)) 0 calc(22 * var(--u)); color: var(--text); }
  .hero .button.solid { min-height: calc(43 * var(--u)); padding: 0 calc(26 * var(--u)); font-size: max(10.5px, calc(11.5 * var(--u))); gap: calc(22 * var(--u)); }
  .folio { margin-top: calc(34 * var(--u)); max-width: calc(220 * var(--u)); font-size: max(10.5px, calc(11.5 * var(--u))); }
  .hero__photo { grid-column: 6; aspect-ratio: 712 / 500; position: relative; z-index: 1; -webkit-mask-box-image: var(--torn) 24 fill / 24px round; mask-border: var(--torn) 24 fill / 24px round; }
  /* Ventana ≈ y 455–1130 del original: conserva rostro, lentes, máquina, lettering y ambas manos. */
  .hero__photo img { object-position: 50% 47%; }
  .orn-hero-splatter { z-index: 0; width: calc(150 * var(--u)); right: calc(-34 * var(--u)); bottom: calc(-56 * var(--u)); top: auto; opacity: .95; }
  .orn-hero-sparkle { display: block; z-index: 2; width: calc(30 * var(--u)); right: calc(48 * var(--u)); top: calc(300 * var(--u)); filter: invert(1) sepia(.3); opacity: .9; }

  /* Fila media */
  .row--mid { grid-column: 1 / -1; display: grid; grid-template-columns: calc(25 * var(--u)) calc(665 * var(--u)) 1fr; gap: 0; margin-top: calc(6 * var(--u)); }
  .process { grid-column: 2; grid-template-columns: calc(300 * var(--u)) 1fr; grid-template-rows: 1fr; min-height: calc(292 * var(--u)); }
  .process__copy { padding: calc(36 * var(--u)) 0 calc(28 * var(--u)) calc(60 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; }
  .process h2 { font-size: calc(50 * var(--u)); letter-spacing: -.01em; }
  .process .eyebrow { margin: calc(10 * var(--u)) 0 calc(24 * var(--u)); font-size: max(10px, calc(11 * var(--u))); }
  .process__text { font-size: max(12.5px, calc(12.8 * var(--u))); line-height: 1.5; margin-bottom: auto; padding-bottom: calc(20 * var(--u)); }
  .process .button { min-height: calc(36 * var(--u)); padding: 0 calc(34 * var(--u)); font-size: max(10px, calc(10.5 * var(--u))); gap: calc(26 * var(--u)); }
  .process__media { grid-row: 1; grid-column: 2; margin: calc(10 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)) 0; }
  .process__media::before { width: 22%; }
  .video-toggle { left: calc(80 * var(--u)); width: calc(52 * var(--u)); height: calc(52 * var(--u)); min-width: 44px; min-height: 44px; }
  .video-toggle svg { width: 42%; height: 42%; }
  .process > .folio { position: absolute; right: calc(26 * var(--u)); bottom: calc(14 * var(--u)); z-index: 3; padding: 0; margin: 0; max-width: none; gap: calc(6 * var(--u)); font-size: max(9.5px, calc(9.5 * var(--u))); text-shadow: 0 1px 4px rgb(0 0 0 / .8); }
  .process > .folio .folio__count { margin-right: calc(18 * var(--u)); }
  .process > .folio .folio__arrow { width: 32px; height: 32px; font-size: 16px; }

  .styles { grid-column: 3; grid-template-columns: calc(250 * var(--u)) 1fr; gap: 0; padding: calc(30 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u)); }
  .styles h2 { font-size: calc(50 * var(--u)); margin-bottom: calc(22 * var(--u)); }
  .style-list li:first-child { border-top: 0; }
  .style-list li:last-child { border-bottom: 0; }
  .style-list button { min-height: calc(33 * var(--u)); padding: calc(6 * var(--u)) calc(4 * var(--u)); font-size: max(10px, calc(11 * var(--u))); letter-spacing: .1em; }
  .style-list button .arrow { font-size: max(13px, calc(14 * var(--u))); }
  .styles__art { min-height: 0; }
  .styles__vase { height: calc(236 * var(--u)); left: auto; right: calc(30 * var(--u)); translate: 0 0; bottom: calc(0 * var(--u)); }
  .styles__star--a { width: calc(38 * var(--u)); left: calc(18 * var(--u)); top: calc(30 * var(--u)); }
  .styles__star--b { width: calc(30 * var(--u)); left: calc(30 * var(--u)); top: calc(140 * var(--u)); right: auto; }
  .styles__star--c { width: calc(18 * var(--u)); right: calc(2 * var(--u)); left: auto; top: calc(-16 * var(--u)); bottom: auto; }

  /* Fila inferior */
  .row--low { grid-column: 1 / -1; display: grid; grid-template-columns: calc(80 * var(--u)) calc(440 * var(--u)) calc(410 * var(--u)) 1fr; gap: 0 calc(8 * var(--u)); margin-top: calc(12 * var(--u)); padding-right: calc(16 * var(--u)); }
  .orn-sprig { display: block; width: calc(150 * var(--u)); left: calc(-62 * var(--u)); bottom: calc(-24 * var(--u)); transform: rotate(-64deg); transform-origin: 50% 50%; }
  .studio { grid-column: 2; }
  .behind { grid-column: 3; }
  .experiences { grid-column: 4; }
  .studio, .behind { min-height: calc(232 * var(--u)); }
  .studio { grid-template-columns: calc(250 * var(--u)) 1fr; }
  .behind { grid-template-columns: calc(226 * var(--u)) 1fr; }
  .card__copy { min-width: 0; padding: calc(22 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u)); justify-content: center; }
  .card__copy .eyebrow { font-size: max(9.5px, calc(9.8 * var(--u))); margin-bottom: calc(8 * var(--u)); }
  .card__copy h2 { font-size: calc(36 * var(--u)); }
  .card__copy p:not(.eyebrow) { font-size: max(12px, calc(12 * var(--u))); line-height: 1.5; margin: calc(12 * var(--u)) 0 calc(18 * var(--u)); }
  .card__copy .button { min-height: max(34px, calc(32 * var(--u))); padding: 0 calc(14 * var(--u)); font-size: max(9.5px, calc(9.6 * var(--u))); letter-spacing: .14em; gap: calc(14 * var(--u)); }
  .behind .card__copy { padding-right: calc(26 * var(--u)); }
  .behind .folio--photo { font-size: max(9.5px, calc(9.5 * var(--u))); left: calc(14 * var(--u)); right: calc(4 * var(--u)); bottom: calc(4 * var(--u)); white-space: nowrap; }
  .behind .folio--photo .folio__arrow { width: 30px; height: 30px; font-size: 15px; }
  .orn-behind-splatter { width: calc(170 * var(--u)); right: calc(-140 * var(--u)); top: calc(-40 * var(--u)); }

  .experiences { padding: calc(30 * var(--u)) 0 calc(20 * var(--u)) calc(26 * var(--u)); min-height: 0; }
  .experiences h2 { font-size: calc(38 * var(--u)); }
  .experiences p { font-size: max(12px, calc(12.4 * var(--u))); margin: calc(16 * var(--u)) 0 calc(22 * var(--u)); }
  .experiences .button { min-height: max(34px, calc(32 * var(--u))); padding: 0 calc(18 * var(--u)); font-size: max(9.5px, calc(9.6 * var(--u))); gap: calc(16 * var(--u)); }
  .orn-butterfly { width: calc(96 * var(--u)); right: calc(0 * var(--u)); top: calc(118 * var(--u)); bottom: auto; transform: rotate(-12deg); }

  /* Galería y eventos */
  .gallery, .events { padding: calc(56 * var(--u)) calc(90 * var(--u)) calc(50 * var(--u)); }
  .gallery__head { padding-top: calc(54 * var(--u)); }
  .gallery h2, .events h2 { font-size: calc(76 * var(--u)); line-height: .86; }
  .orn-gallery-ornament { width: calc(210 * var(--u)); top: calc(18 * var(--u)); }
  .orn-gallery-acanthus { display: block; width: calc(120 * var(--u)); right: calc(18 * var(--u)); bottom: calc(14 * var(--u)); opacity: .9; }
  .work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(34 * var(--u)) calc(22 * var(--u)); }
  .gallery__cta { margin-right: calc(80 * var(--u)); }
  .gallery__cta p { font-size: calc(30 * var(--u)); }
  .events__head { padding-right: 0; max-width: calc(700 * var(--u)); }
  .events__intro { font-size: max(14px, calc(15 * var(--u))); }
  .orn-events-vase { width: calc(118 * var(--u)); right: calc(120 * var(--u)); top: calc(26 * var(--u)); }
  .event-list { grid-template-columns: repeat(4, 1fr); gap: calc(16 * var(--u)); margin: calc(40 * var(--u)) 0 calc(30 * var(--u)); }
  .event-card { padding: calc(92 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u)); min-height: calc(220 * var(--u)); }
  .event-card img { left: calc(20 * var(--u)); top: calc(22 * var(--u)); translate: none; width: auto; height: calc(58 * var(--u)); }
  .event-card h3 { font-size: calc(30 * var(--u)); }
  .event-card p { font-size: max(13px, calc(13.5 * var(--u))); }
}

/* Pantallas muy anchas: el pliego no supera 1480 px */
@media (min-width: 1504px) {
  .page { --u: calc((1480px - 24px) / 1250); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .work-open:hover img { transform: none; }
}

/* Presentaciones · fotos documentales y composición editorial */
.team { padding: 36px 22px 30px; }
.team__heading { display: grid; gap: 20px; padding-bottom: 26px; border-bottom: 1px solid rgb(20 18 17 / .3); }
.team__heading .eyebrow { margin-bottom: 12px; }
.team__heading h2 { font-size: clamp(42px, 6vw, 78px); line-height: .92; }
.team__intro { max-width: 39ch; font-size: 14px; line-height: 1.65; color: var(--text-soft); }
.team__profiles { display: grid; gap: 34px; padding-top: 26px; }
.team-profile { min-width: 0; }
.team-profile__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 22px; }
.team-profile h3 { font: 400 56px/1 var(--serif); letter-spacing: -.03em; }
.team-profile__role { max-width: 24ch; text-align: right; color: var(--plum); font: 600 9px/1.6 var(--sans); letter-spacing: .13em; text-transform: uppercase; }
.team-profile__copy { border-top: 1px solid rgb(20 18 17 / .25); margin-top: 14px; padding-top: 17px; font-size: 14px; line-height: 1.75; color: var(--text-soft); }
.team-profile__copy p + p { margin-top: 11px; }
.team__closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgb(20 18 17 / .3); }
.team__closing > p { font: 400 27px/1.1 var(--serif); max-width: 27ch; }
.team__closing .button { white-space: normal; text-align: center; max-width: 100%; }
.behind .team-link { width: auto; grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 12px; min-height: 44px; padding: 10px 14px; }
.behind .team-link .label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
@media (min-width: 700px) {
  .team { padding: 44px 34px 36px; }
  .team__heading { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 40px; padding-bottom: 30px; }
  .team__intro { justify-self: end; }
  .behind .team-link { margin-top: 0; min-height: 38px; }
}
@media (min-width: 1100px) {
  .team { padding: calc(54 * var(--u)) calc(90 * var(--u)) calc(46 * var(--u)); }
  .team-profile h3 { font-size: 68px; }
  .team-profile__role { font-size: 10px; }
  .team-profile__copy { font-size: 15px; }
  .team__closing { margin-top: 38px; }
  .team__closing > p { font-size: 32px; }
}


/* ---------- Eventos: presupuesto y términos (información confirmada) ---------- */
.events__info { display: grid; gap: 14px; }
.quote { position: relative; padding: 24px 20px 26px; background: rgb(241 232 216 / .72); border: 1px solid rgb(20 18 17 / .5); }
.quote h3 { margin: 10px 0 14px; font: 400 30px/.95 var(--serif); }
.quote__text { max-width: 60ch; font-size: 14px; line-height: 1.6; color: var(--text-soft); }
.quote__list { margin: 18px 0 22px; padding: 0; list-style: none; counter-reset: dato; border-top: 1px solid rgb(20 18 17 / .3); }
.quote__list li { counter-increment: dato; display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgb(20 18 17 / .3); font: 500 11px/1.35 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.quote__list li::before { content: counter(dato, decimal-leading-zero); min-width: 22px; font: 400 15px/1 var(--serif); letter-spacing: 0; color: var(--plum); }
.quote__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.quote__actions .button { white-space: normal; text-align: center; }
.quote__handle { font-size: 13.5px; color: var(--text-soft); }
.quote__handle a { color: var(--plum); font-weight: 600; text-underline-offset: 3px; }
.terms { padding: 24px 20px 26px; }
.terms h3 { margin-bottom: 16px; font: 400 28px/.95 var(--serif); }
.terms__item { border-top: 1px solid #4a423c; }
.terms__item:last-child { border-bottom: 1px solid #4a423c; }
.terms__item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 0; cursor: pointer; list-style: none; font: 600 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.terms__item summary::-webkit-details-marker { display: none; }
.terms__item summary::after { content: '+'; flex: none; font: 400 22px/1 var(--serif); color: #e6b9cf; }
.terms__item[open] summary::after { content: '–'; }
.terms__item summary:hover { color: #e6b9cf; }
.terms__item p { padding: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--on-dark-soft); }
.terms__note { margin-top: 18px; padding-left: 12px; border-left: 2px solid var(--plum-bright); font-size: 13.5px; line-height: 1.55; color: var(--bone-hi); }
@media (min-width: 700px) {
  .events__info { grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
  .quote, .terms { padding: 30px 30px 32px; }
  .quote h3 { font-size: 36px; }
  .terms h3 { font-size: 32px; }
}
@media (min-width: 1100px) {
  .events__info { gap: calc(22 * var(--u)); }
  .quote, .terms { padding: calc(38 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)); }
  .quote h3 { font-size: calc(42 * var(--u)); }
  .terms h3 { font-size: calc(38 * var(--u)); }
  .quote__text, .terms__note, .terms__item p { font-size: max(14px, calc(14.5 * var(--u))); }
}

/* ---------- Conocenos: retratos en su proporción natural (sin recorte ni deformación) ---------- */
.team-profile__visual { margin: 0; }
.team-profile__visual img { display: block; width: 100%; height: auto; background: var(--ink); }
.team-profile__label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font: 600 10px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--text); }
.team-profile__label span + span { font-weight: 500; letter-spacing: .12em; color: var(--text-soft); }
@media (min-width: 700px) {
  .team__profiles { grid-template-columns: 1fr; gap: 44px; padding-top: 32px; }
  /* Tablet: Nat (vertical) con la imagen al costado del texto; Lucía (horizontal) a todo el ancho. */
  .team-profile--nat { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; column-gap: 30px; }
  .team-profile--nat .team-profile__visual { grid-row: 1 / 3; }
  .team-profile--nat .team-profile__meta { padding-top: 26px; }
}
@media (min-width: 1100px) {
  /* Escritorio: dos columnas de proporción distinta equilibran una imagen vertical y una horizontal;
     las filas compartidas (subgrid) alinean imágenes, nombres y textos. */
  .team__profiles { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); grid-template-rows: auto auto auto; gap: 0 calc(54 * var(--u)); }
  .team-profile, .team-profile--nat { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: none; column-gap: 0; }
  .team-profile--nat .team-profile__visual { grid-row: auto; }
  .team-profile__visual { align-self: end; }
  .team-profile--nat .team-profile__meta { padding-top: 22px; }
  .team-profile--lucia .team-profile__copy { column-count: 2; column-gap: calc(34 * var(--u)); }
  .team-profile--lucia .team-profile__copy p { break-inside: avoid; }
  .team-profile--lucia .team-profile__copy p + p { margin-top: 0; }
}

/* ---------- v5 · Ajustes responsive y táctiles ---------- */
/* Galería ampliada: el diálogo nunca supera la pantalla; la imagen se achica (sin deformarse)
   para que título, miniaturas, Anterior/Siguiente y Cerrar queden siempre a la vista. */
.media-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.media-dialog__body { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; gap: 10px; padding: 16px 16px 18px; }
.media-dialog h2 { flex: none; font-size: clamp(22px, 5vw, 30px); }
#media-slot { flex: 1 1 auto; min-height: 120px; display: flex; justify-content: center; align-items: center; }
#media-slot img, #media-slot video { max-height: 100%; max-width: 100%; height: auto; width: auto; object-fit: contain; }
#work-views, #work-navigation, #media-caption { flex: none; }
#view-thumbnails { margin-bottom: 4px; }
.view-thumbnail { width: 58px; min-height: 44px; }
#work-navigation button { min-height: 44px; }
.dialog-close { right: 6px; top: 6px; }
@media (min-height: 700px) { .view-thumbnail { width: 66px; } }

/* Controles táctiles: al menos 44 × 44 px en celular y en pantallas táctiles. */
.skip-link { padding: 13px 16px; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.gallery__filters button { min-height: 44px; }
.instagram { width: 44px; }
@media (max-width: 1099px) {
  .folio__arrow { width: 44px; height: 44px; }
  .button.compact { min-height: 44px; }
  .style-list button { min-height: 44px; }
  .navigation a { padding-top: 14px; padding-bottom: 12px; }
}
@media (pointer: coarse) {
  .button, .button.compact { min-height: 44px; }
  .folio__arrow, .process > .folio .folio__arrow, .behind .folio--photo .folio__arrow { width: 44px; height: 44px; }
  .style-list button { min-height: 44px; }
  .navigation a { padding-top: 14px; padding-bottom: 12px; }
}
@media (min-width: 1100px) {
  /* Escritorio con mouse: se conservan las medidas del mockup; los enlaces del menú ganan área sin cambiar su aspecto. */
  .navigation a { padding-top: 14px; padding-bottom: 12px; }
}

/* v5 · correcciones de la segunda auditoría */
.media-dialog[open] { height: calc(100dvh - 24px); }
.wordmark, .instagram { flex: none; }
@media (min-width: 700px) and (max-width: 1099px) { .navigation a { padding-top: 16px; padding-bottom: 14px; } }
@media (pointer: coarse) and (min-width: 700px) { .navigation a { padding-top: 16px; padding-bottom: 14px; } }

/* Tablet angosta (700–899 px): los seis destinos no entran en una línea; se usa el menú desplegable
   (misma barra persistente) en lugar de comprimir o desbordar la cabecera. */
@media (min-width: 700px) and (max-width: 899px) {
  .wordmark { margin-right: auto; }
  .instagram { order: 2; margin-right: 0; }
  .menu-toggle { display: grid; order: 3; margin-right: -10px; }
  .navigation { position: absolute; left: 0; right: 0; top: 100%; display: none; flex: none; flex-direction: column; padding: 8px 36px 20px; background: var(--ink); color: var(--bone-hi); box-shadow: 0 18px 30px rgb(0 0 0 / .45); }
  .navigation.open { display: flex; }
  .navigation a { padding: 14px 0; border-bottom: 1px solid #2c2622; font-size: 12px; letter-spacing: .2em; color: var(--bone-hi); }
  .navigation a[aria-current] { color: #e6b9cf; border-bottom-color: #2c2622; }
  .navigation a:hover { color: #e6b9cf; }
  .navigation :focus-visible { outline-color: var(--bone-hi); }
}
.navigation a { min-width: 44px; text-align: center; }
@media (max-width: 899px) { .navigation a { text-align: left; } }

/* Navegación de la galería ampliada en celulares angostos: sin cortes de línea. */
#work-navigation button, #work-position { white-space: nowrap; }
@media (max-width: 420px) { #work-navigation button { padding: 8px 12px; letter-spacing: .08em; } #work-navigation { gap: 6px; } }