/* Proyectos de A Medida Estudio: el índice y una página por caso.
   Los mismos colores, la misma letra y los mismos marcos que la portada; aquí manda el texto. */
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-latin-wght.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
:root {
  --bg: #ffffff; --ink: #0b0c0c; --ink-2: #565b58; --stone: #eef0ee; --line: #dfe2df;
  --night: #0b0c0c; --on-night: #f3f4f3; --on-night-2: #a3a8a5;
  --accent: #004225; --accent-h: #0a5434; --leaf: #1f7a4f;
  --sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(20px, 4vw, 80px); --max: 1560px;
  --gap-sec: clamp(72px, 8vw, 120px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: #a3a8a5 transparent; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.dark :focus-visible { outline-color: #fff; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Puntero: el mismo de la portada, verde sobre claro y blanco sobre oscuro */
.cursor { --cc: var(--accent); --cl: var(--leaf); --ct: #fff; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0; transition: opacity 300ms; }
.cursor.is-dark { --cc: #fff; --cl: #fff; --ct: var(--accent); }
.cursor.is-ready { opacity: 1; }
.c-dot, .c-ring { position: fixed; top: 0; left: 0; }
.c-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--cc); transition: opacity 200ms, background-color 250ms; }
.c-ring { display: grid; place-items: center; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--cc); transition: scale 350ms var(--ease), background-color 300ms var(--ease), box-shadow 250ms; }
.c-ring b { font: 600 13px/1 var(--sans); color: var(--ct); opacity: 0; scale: 0.43; transition: opacity 200ms; }
.cursor.is-link .c-ring { scale: 1.7; }
.cursor.is-label .c-ring { scale: 2.3; background: var(--cl); box-shadow: none; }
.cursor.is-label .c-ring b { opacity: 1; }
.cursor.is-label .c-dot { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
@media (hover: hover) and (pointer: fine) { html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; } }

/* Menú: claro y fijo arriba; se esconde al bajar y vuelve al subir */
.bar { position: sticky; z-index: 20; top: 0; background: rgb(255 255 255 / 0.9); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); box-shadow: inset 0 -1px 0 var(--line); transition: transform 400ms var(--ease); }
.bar.hide { transform: translateY(-100%); }
.bar-in { max-width: var(--max); height: 68px; margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 20px; letter-spacing: -0.03em; text-decoration: none; }
.logo i { width: 11px; height: 11px; border-radius: 50%; background: var(--leaf); }
.nav { display: flex; gap: 32px; font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; opacity: 0.72; transition: opacity 200ms var(--ease); }
.nav a[aria-current] { opacity: 1; }
.bar .btn { justify-self: end; }
/* Menú del móvil: un botón que abre la lista de secciones debajo de la barra */
.menu-b { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.menu-b i, .menu-b i::before { display: block; width: 16px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform 250ms var(--ease); }
.menu-b i { position: relative; transform: translateY(-3px); }
.menu-b i::before { content: ""; position: absolute; left: 0; top: 6px; }
.menu-b[aria-expanded="true"] i { transform: rotate(45deg); }
.menu-b[aria-expanded="true"] i::before { top: 0; transform: rotate(-90deg); }
.menu-m { position: absolute; top: 100%; left: 0; right: 0; padding: 4px var(--pad) 24px; background: #fff; box-shadow: 0 24px 48px -24px rgb(11 12 12 / 0.35), inset 0 1px 0 var(--line); }
.menu-m[hidden] { display: none; }
.menu-m a { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.menu-m a:last-child { border-bottom: 0; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 200ms var(--ease), transform 160ms var(--ease); }
.btn:active { transform: scale(0.97); }
.btn-lg { min-height: 56px; padding: 0 10px 0 28px; font-size: 17px; }
.btn-lg .ar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgb(11 12 12 / 0.08); transition: transform 300ms var(--ease); }
.btn-lg .ar svg, .ar-s svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-light { background: #fff; color: var(--ink); }
.btn-out { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; font-size: 17px; font-weight: 600; text-decoration: none; transition: background-color 200ms var(--ease), color 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { opacity: 1; }
  .btn:hover { background: var(--accent-h); }
  .btn-light:hover { background: var(--stone); }
  .btn-lg:hover .ar { transform: translate(2px, -2px); }
  .btn-out:hover { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
}

/* Textos comunes */
.fmt { font-size: 15px; font-weight: 600; color: var(--accent); }
.crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.crumb:hover { color: var(--ink); }

/* Marcos: ventana de navegador y móvil, como en la portada */
.browser { border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgb(11 12 12 / 0.08), 0 50px 100px -40px rgb(11 12 12 / 0.45); overflow: hidden; }
.bbar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; background: var(--stone); border-bottom: 1px solid var(--line); }
.bbar i { width: 11px; height: 11px; border-radius: 50%; background: #d3d7d4; }
.bbar span { margin: 0 auto; padding: 4px 16px; border-radius: 8px; background: #fff; font-size: 13px; color: var(--ink-2); }
.bview { aspect-ratio: 1600 / 1000; overflow: hidden; }
.bview.tall { aspect-ratio: 1600 / 2200; }
.bview img { width: 100%; }
:where(.iph) { position: relative; }
.iph { container-type: inline-size; }
.iph::before, .iph::after { content: ""; position: absolute; width: 1.2cqw; border-radius: 1cqw; background: linear-gradient(90deg, #2b2e2d, #4a4e4c); }
.iph::before { right: -0.4cqw; top: 30%; height: 15cqw; }
.iph::after { left: -0.4cqw; top: 24%; height: 11cqw; box-shadow: 0 15cqw 0 #3a3d3c; }
.iph-scr { position: relative; display: flex; flex-direction: column; margin: 4.4cqw; padding-bottom: 6cqw; aspect-ratio: 390 / 844; border-radius: 12.5cqw; overflow: hidden; background: var(--sb, #fff);
  box-shadow: 0 0 0 3.4cqw #0a0b0b, 0 0 0 3.9cqw #55595a, 0 0 0 4.4cqw #1d1f1f, 0 3cqw 6cqw -2cqw rgb(0 0 0 / 0.35), 0 26cqw 44cqw -18cqw rgb(11 12 12 / 0.55); }
.iph-scr::before { content: ""; position: absolute; z-index: 3; top: 2.6cqw; left: 50%; width: 29cqw; height: 8.4cqw; margin-left: -14.5cqw; border-radius: 99px; background: #000; }
.iph-scr::after { content: ""; position: absolute; z-index: 3; bottom: 2.2cqw; left: 50%; width: 34cqw; height: 1.3cqw; margin-left: -17cqw; border-radius: 99px; background: var(--hi, rgb(11 12 12 / 0.55)); }
.iph-sb { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: space-between; height: 13.5cqw; padding: 1.4cqw 7.5cqw 0 10cqw; color: var(--sbc, #0b0c0c); background: var(--sb, #fff); }
.iph-sb b { font-size: 4.3cqw; font-weight: 650; letter-spacing: -0.02em; }
.iph-sb svg { width: 17cqw; height: auto; fill: currentColor; }
.iph-view { position: relative; flex: 1; overflow: hidden; }
.iph-view > img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; }

/* ---------- Índice ---------- */
.x-head { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 8vw, 128px) var(--pad) clamp(32px, 4vw, 56px); }
.x-h1 { font-weight: 650; font-size: clamp(54px, 8vw, 128px); line-height: 0.96; letter-spacing: -0.04em; }
/* Negritas: las frases clave van en tinta plena sobre el gris del texto */
strong { font-weight: 650; color: var(--ink); }
.dark strong { color: #fff; }
.x-lead { margin-top: 24px; max-width: 54ch; font-size: clamp(18px, 1.45vw, 22px); color: var(--ink-2); text-wrap: pretty; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(32px, 3vw, 44px); }
.filter button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: var(--ink-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.filter button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.filter small { margin-left: 6px; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.x-list { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.x-list li:last-child .x-row { border-bottom: 1px solid var(--line); }
.x-list li[hidden] { display: none; }
.x-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 2fr) 40px; gap: 16px clamp(24px, 3vw, 56px); align-items: center; padding: 24px 0; border-top: 1px solid var(--line); text-decoration: none; }
.x-thumb { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--stone); box-shadow: 0 0 0 1px rgb(11 12 12 / 0.06); }
.x-thumb > img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
/* Al pasar el ratón, la pantalla de escritorio deja paso al móvil dentro de un iPhone; sin ratón no se carga */
.x-m { position: absolute; inset: 0; display: grid; place-items: center; background: var(--stone); opacity: 0; transition: opacity 350ms var(--ease); }
.x-m .iph { height: 90%; aspect-ratio: 1 / 2.06; transform: translateY(10%); transition: transform 550ms var(--ease); }
.x-row h2 { margin-top: 6px; font-weight: 650; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; transition: color 200ms var(--ease); }
.x-row p { margin-top: 10px; max-width: 54ch; color: var(--ink-2); text-wrap: pretty; }
.x-meta { display: grid; gap: 4px; font-size: 15px; }
.x-meta span { color: var(--ink-2); }
.ar-s { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); transition: background-color 200ms var(--ease), color 200ms var(--ease), transform 300ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .filter button:hover { color: var(--ink); }
  .filter button[aria-pressed="true"]:hover { color: #fff; }
  .x-row:hover h2 { color: var(--accent); }
  .x-row:hover .x-m, .x-row:focus-visible .x-m { opacity: 1; }
  .x-row:hover .x-m .iph, .x-row:focus-visible .x-m .iph { transform: none; }
  .x-row:hover .ar-s { background: var(--accent); color: #fff; box-shadow: none; transform: translate(2px, -2px); }
}
.x-note { max-width: var(--max); margin: 0 auto; padding: 20px var(--pad) 0; font-size: 15px; color: var(--ink-2); }

/* ---------- Página de cada proyecto ---------- */
.p-head { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 6vw, 96px) var(--pad) 0; }
.p-head .fmt { margin-top: clamp(28px, 3vw, 44px); }
.p-h1 { margin-top: 18px; max-width: 18ch; font-weight: 650; font-size: clamp(40px, 5.2vw, 84px); line-height: 1; letter-spacing: -0.04em; text-wrap: balance; }
.p-lead { margin-top: clamp(20px, 2vw, 28px); max-width: 52ch; font-size: clamp(19px, 1.6vw, 24px); color: var(--ink-2); text-wrap: pretty; }
.p-facts { margin-top: clamp(40px, 4vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 56px); }
.p-facts div { padding-top: 16px; border-top: 1px solid var(--line); }
.p-facts dt { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.p-facts dd { margin-top: 4px; font-size: 17px; font-weight: 600; text-wrap: pretty; overflow-wrap: anywhere; }
.p-facts a { color: var(--accent); text-underline-offset: 3px; }

.p-art { max-width: var(--max); margin: clamp(48px, 5vw, 80px) auto 0; padding: 0 var(--pad); }
.p-art > a { display: block; text-decoration: none; }
/* Portada del caso: ventana grande con el móvil a escala real delante */
.duo { position: relative; padding-bottom: 6%; }
.duo .browser { width: 86%; }
.duo .iph { position: absolute; right: 0; bottom: 0; width: 22%; }
/* Una página de informe, como una hoja sobre la mesa */
.sheet { padding: 64px 7%; border-radius: 24px; background: var(--stone); }
.sheet img { width: 100%; border-radius: 6px; box-shadow: 0 0 0 1px rgb(11 12 12 / 0.06), 0 40px 80px -40px rgb(11 12 12 / 0.45); }

.p-story { max-width: var(--max); margin: var(--gap-sec) auto 0; padding: 0 var(--pad); }
.p-story > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 12px clamp(32px, 5vw, 96px); padding: 40px 0; border-top: 1px solid var(--line); }
.p-story > div:last-child { border-bottom: 1px solid var(--line); }
.p-story dt { font-weight: 650; font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; line-height: 1.3; }
.p-story dd { max-width: 58ch; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

.p-gal { max-width: var(--max); margin: var(--gap-sec) auto 0; padding: 0 var(--pad); }
.p-gal h2 { font-weight: 650; font-size: clamp(30px, 3vw, 46px); line-height: 1.05; letter-spacing: -0.03em; }
.p-grid { margin-top: clamp(28px, 3vw, 44px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) clamp(24px, 3vw, 48px); }
.p-grid figure.wide { grid-column: 1 / -1; }
.p-grid figure.ph { display: grid; place-items: center; padding: 56px 0; border-radius: 20px; background: var(--stone); }
.p-grid figure.ph .iph { width: min(300px, 64%); }
.p-grid figcaption { margin-top: 14px; font-size: 15px; color: var(--ink-2); max-width: 60ch; }
.p-grid figure.ph figcaption { padding: 0 24px; text-align: center; }

.p-next { max-width: var(--max); margin: var(--gap-sec) auto 0; padding: 0 var(--pad); }
.p-next a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; }
.p-next small { display: block; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.p-next b { display: block; margin-top: 8px; font-weight: 650; font-size: clamp(30px, 3.6vw, 56px); line-height: 1.02; letter-spacing: -0.035em; transition: color 200ms var(--ease); }
.p-next .ar-s { width: 56px; height: 56px; }
@media (hover: hover) and (pointer: fine) {
  .p-next a:hover b { color: var(--accent); }
  .p-next a:hover .ar-s { background: var(--accent); color: #fff; box-shadow: none; transform: translate(2px, -2px); }
}
.p-all { max-width: var(--max); margin: 20px auto 0; padding: 0 var(--pad); font-size: 15px; }
.p-all a { color: var(--accent); font-weight: 600; text-underline-offset: 4px; }

/* Cierre: verde inglés, como el contacto de la portada */
.cta { margin-top: var(--gap-sec); padding: 96px 0; background-color: #012e1a; background-image: linear-gradient(160deg, var(--accent) 0%, #012e1a 65%); color: #fff; }
.cta-in { max-width: var(--max); margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(40px, 6vw, 96px); align-items: end; }
/* Mismo margen lateral que el resto de la página (--pad), en escalones */
@media (min-width: 761px) { .cta-in { padding: 0 40px; } }
@media (min-width: 1200px) { .cta-in { padding: 0 56px; } }
@media (min-width: 1800px) { .cta-in { padding: 0 72px; } }
.cta h2 { font-weight: 650; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -0.035em; max-width: 16ch; text-wrap: balance; }
.cta p { margin-top: 18px; max-width: 44ch; font-size: clamp(18px, 1.4vw, 20px); color: rgb(255 255 255 / 0.78); text-wrap: pretty; }
.cta .btn { justify-self: start; }

.foot { padding: 24px max(var(--pad), (100% - var(--max)) / 2 + var(--pad)) 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 15px; background: #012e1a; color: rgb(255 255 255 / 0.72); border-top: 1px solid rgb(255 255 255 / 0.14); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot a { text-decoration: none; color: #fff; }

@media (max-width: 960px) {
  .x-row { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .x-meta { grid-column: 2; grid-auto-flow: column; justify-content: start; gap: 4px 20px; }
  .x-row .ar-s { display: none; }
  .p-facts { grid-template-columns: minmax(0, 1fr); }
  .p-story > div, .cta-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .bar-in { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; height: 60px; }
  .menu-b { display: grid; }
  .logo { white-space: nowrap; }
  .bar .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
  .x-row { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 0; }
  .p-story > div, .p-next a { padding: 28px 0; }
  .cta { padding: 64px 0; }
  .sheet { padding: 24px 16px; }
  .p-grid figure.ph { padding: 36px 0; }
  .x-meta { grid-column: 1; }
  .p-grid { grid-template-columns: minmax(0, 1fr); }
  .duo .browser { width: 100%; }
  .duo .iph { right: 0; width: 30%; bottom: -4%; }
}
@media (hover: none) { .x-m { display: none; } }
@media (prefers-reduced-motion: reduce) { .bar, .x-m, .x-m .iph { transition: none; } }