/* sitio.css — identidad y maquetación de Alberto Sepúlveda Arquitecto.
   Las mecánicas de animación viven en forja-motion.css y no se tocan. */

@font-face { font-family: "Manrope"; src: url("../fonts/manrope.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

/* respaldo con el ancho de Instrument Serif: el texto no salta cuando llega la fuente */
@font-face { font-family: "Serif Respaldo"; src: local("Georgia"), local("Times New Roman"); size-adjust: 80%; }

:root {
  /* color: paleta del brief (marfil, grafito, piedra, oliva profundo) */
  --marfil: #f2f0ea;
  --grafito: #252725;
  --piedra: #c7c3b8;
  --oliva: #3e4942;
  --noche: #050608;   /* el negro del fondo del retrato */
  --bronce: #a8824f;
  --bg: var(--marfil);
  --fg: var(--grafito);
  --accent: var(--oliva);
  --accent-fg: var(--marfil);
  /* tipografía: una sola familia, fluida entre 360 px y 1600 px */
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Instrument Serif", "Serif Respaldo", Georgia, serif;
  --t-xs: clamp(.74rem, .71rem + .14vw, .84rem);
  --t-sm: clamp(.9rem, .86rem + .2vw, 1rem);
  --t-md: clamp(1rem, .95rem + .3vw, 1.18rem);
  --t-lg: clamp(1.3rem, 1.1rem + .9vw, 1.9rem);
  --t-xl: clamp(2.3rem, 1.4rem + 3.6vw, 5rem);
  --t-2xl: clamp(2.7rem, 1.2rem + 6.2vw, 7.6rem);
  /* espacio */
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --section: clamp(4.5rem, 11vw, 10rem);
  --max: 92rem;
  --radius: 3px;
  /* puente con forja-motion */
  --fm-radius: var(--radius);
  --fm-ambient: var(--piedra);
  --fm-glow: var(--accent);
  --fm-cursor-bg: var(--marfil);
  --fm-cursor-fg: var(--grafito);
}
[data-theme="claro"], [data-fm-theme="claro"] { --bg: var(--marfil); --fg: var(--grafito); --accent: var(--oliva); --accent-fg: var(--marfil); }
[data-theme="oscuro"], [data-fm-theme="oscuro"] { --bg: var(--noche); --fg: var(--marfil); --accent: var(--marfil); --accent-fg: var(--grafito); }
[data-theme="oliva"], [data-fm-theme="oliva"] { --bg: var(--oliva); --fg: var(--marfil); --accent: var(--marfil); --accent-fg: var(--grafito); }
[data-theme="piedra"], [data-fm-theme="piedra"] { --bg: var(--piedra); --fg: var(--grafito); --accent: var(--grafito); --accent-fg: var(--marfil); }
/* derivados: se recalculan en cada bloque con tema propio */
:root, [data-theme], [data-fm-theme], .footer {
  --muted: color-mix(in srgb, var(--fg) 76%, transparent);
  --line: color-mix(in srgb, var(--fg) 20%, transparent);
  --surface: color-mix(in srgb, var(--fg) 6%, transparent);
}
/* cada sección pinta su propio fondo: el sitio se lee igual sin JavaScript */
[data-fm-theme] { background: var(--bg); color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 var(--t-md)/1.6 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 500; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
h1, h2, .footer__nombre { font-family: var(--font-display); font-weight: 400; letter-spacing: -.012em; line-height: 1; }
h1 em, h2 em, p em { font-style: italic; }
h3 { font-family: var(--font); }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 3000; background: var(--marfil); color: var(--grafito); padding: .6rem 1rem; }

/* ---------- utilidades ---------- */
.wrap { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.eyebrow { font-size: var(--t-xs); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.eyebrow b { font-weight: 600; color: var(--bronce); margin-right: .9em; padding-right: .9em; border-right: 1px solid var(--line); }
[data-fm-theme="claro"] .eyebrow b, [data-fm-theme="piedra"] .eyebrow b { color: #7a5c33; }
.rotulo { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.t-2xl { font-size: var(--t-2xl); }
.t-xl { font-size: var(--t-xl); }
.t-lg { font-size: var(--t-lg); line-height: 1.2; }
.muted { color: var(--muted); }
.note { font-size: var(--t-xs); color: var(--muted); max-width: 44rem; line-height: 1.6; }
.head { display: grid; gap: 1.4rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); max-width: 60rem; }
.head > p:not(.eyebrow) { max-width: 40rem; color: var(--muted); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3rem; padding: .8rem 1.6rem; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-fg); font: 600 var(--t-sm)/1.2 var(--font); text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
}
.btn--ghost { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 40%, transparent); transition: border-color .3s, background-color .3s; }
.btn--ghost:hover { border-color: currentColor; }
.row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

/* ---------- cabecera ---------- */
.header { padding: .9rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; color: var(--fg); }
.header.is-scrolled { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.header__logo { text-decoration: none; display: grid; line-height: 1.15; margin-right: auto; }
.header__logo strong { font-weight: 600; letter-spacing: -.02em; font-size: var(--t-md); }
.header__logo span { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.header__nav { display: none; gap: 2rem; font-size: var(--t-sm); }
.header__nav a { text-decoration: none; }
.header > .btn { display: none; min-height: 2.75rem; padding: .55rem 1.1rem; }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; min-height: 2.75rem; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--t-sm); font-weight: 600; display: flex; align-items: center; }
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { border-color: currentColor; }
.menu nav { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 15rem; background: var(--marfil); color: var(--grafito); border-radius: var(--radius); padding: .5rem; display: grid; box-shadow: 0 18px 50px rgb(0 0 0 / .28); }
.menu nav a { padding: .85rem 1rem; text-decoration: none; font-size: var(--t-sm); font-weight: 500; border-bottom: 1px solid rgb(37 39 37 / .12); }
.menu nav a:last-child { border-bottom: 0; font-weight: 700; }
@media (min-width: 560px) { .header > .btn { display: inline-flex; } }
@media (min-width: 960px) { .header__nav { display: flex; } .menu { display: none; } }

/* ---------- 1. portada ---------- */
.hero { position: relative; width: 100%; min-height: 100svh; display: grid; align-items: end; color: var(--marfil); background: var(--noche); isolation: isolate; overflow: clip; }
.hero__media { position: absolute; z-index: -1; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(5 6 8 / .94) 0%, rgb(5 6 8 / .72) 34%, rgb(5 6 8 / .12) 62%), linear-gradient(to bottom, rgb(5 6 8 / .6), transparent 20%); }
.hero__body { padding: 7rem var(--gutter) clamp(1.5rem, 4vw, 3rem); display: grid; gap: 1.2rem; }
.hero__body .eyebrow { color: rgb(242 240 234 / .86); }
.hero__body h1 { font-size: clamp(3.2rem, 1.4rem + 8.4vw, 9.6rem); letter-spacing: -.025em; line-height: .92; }
.hero__frase { font-family: var(--font-display); font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.15; color: rgb(242 240 234 / .94); max-width: 22ch; }
.hero .rotulo { color: rgb(242 240 234 / .82); margin-top: .8rem; padding-top: 1rem; border-top: 1px solid rgb(242 240 234 / .24); }
@media (min-width: 900px) {
  .hero__media::after { background: linear-gradient(to right, rgb(5 6 8 / .86) 0%, rgb(5 6 8 / .5) 38%, transparent 66%), linear-gradient(to top, rgb(5 6 8 / .82), transparent 42%), linear-gradient(to bottom, rgb(5 6 8 / .55), transparent 18%); }
  .hero__body { grid-template-columns: 1fr auto; align-items: end; column-gap: 3rem; }
  .hero__body > * { grid-column: 1; }
  .hero .rotulo { grid-column: 2; grid-row: 4; align-self: end; margin: 0; padding: 0 0 .9rem; border: 0; text-align: right; max-width: 22rem; }
  .hero__frase { max-width: none; }
  .hero__body h1 { white-space: nowrap; }
}
.hero__next { text-align: left; padding-inline: var(--gutter); display: grid; gap: 1.6rem; width: 100%; max-width: var(--max); margin-inline: auto; }
.hero__next h2 { display: grid; gap: .08em; }
.hero__next h2 span:nth-child(2) { color: color-mix(in srgb, var(--fg) 66%, transparent); }
.hero__next h2 span:nth-child(3) { color: color-mix(in srgb, var(--fg) 44%, transparent); }
.hero__next p { max-width: 36rem; color: var(--muted); }
html:not(.fm-motion) .hero__next { padding-block: var(--section); }

/* ---------- 2. del plano a la atmósfera ---------- */
.lab .fm-steps { gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 860px) { .lab .fm-steps { grid-template-columns: 5fr 7fr; } }
.lab .fm-step__btn { font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.8rem); font-weight: 400; letter-spacing: -.01em; }
.lab .fm-step.is-active .fm-step__btn { color: var(--fg); }
.lab .fm-step.is-active { border-bottom-color: #7a5c33; }
.lab .fm-step__body p { color: var(--muted); max-width: 30rem; }
.lab .fm-step__body a { font-size: var(--t-sm); font-weight: 600; text-decoration: none; display: inline-block; padding-block: .5rem; color: var(--fg); }
.lab__lamina { display: grid; gap: .9rem; }
.lab .fm-steps__media { aspect-ratio: 1; border-radius: var(--radius); background: #f1ece1; box-shadow: 0 30px 80px -40px rgb(37 39 37 / .45), 0 0 0 1px rgb(37 39 37 / .08); }
.lab .fm-steps__media > img { object-fit: contain; }
.lab .rotulo { text-align: right; }
.lab .note { margin-top: 2.5rem; }
@media (max-width: 859px) { .lab__lamina { order: -1; } .lab .fm-steps__media { aspect-ratio: 1; } }

/* ---------- 3. trayectoria ---------- */
.bio { display: grid; gap: clamp(2.5rem, 6vw, 6rem); }
.bio__foto { aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--noche); }
.bio__foto img { object-position: 50% 8%; }
.bio__texto { display: grid; gap: 1.6rem; align-content: start; }
.bio__texto > p:not(.eyebrow) { max-width: 36rem; color: var(--muted); }
.hitos { border-top: 1px solid var(--line); margin-top: 1rem; }
.hitos div { display: grid; gap: .3rem 2rem; padding-block: 1.3rem; border-bottom: 1px solid var(--line); }
.hitos dt { font-size: var(--t-xs); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--bronce); }
.hitos dd { color: var(--muted); font-size: var(--t-sm); max-width: 34rem; }
@media (min-width: 620px) { .hitos div { grid-template-columns: 10rem 1fr; } }
@media (min-width: 900px) {
  .bio { grid-template-columns: 5fr 6fr; align-items: start; }
  .bio__foto { position: sticky; top: 6rem; }
}
/* archivo profesional: secundario y pequeño (fotografías originales de baja resolución) */
.archivo { margin-top: 1.5rem; display: grid; gap: 1rem; }
.archivo ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 13rem)); gap: 1rem; }
.archivo a { display: block; text-decoration: none; }
.archivo figure { display: grid; gap: .6rem; }
.archivo .fm-zoom { aspect-ratio: 1; border-radius: var(--radius); overflow: clip; background: var(--surface); }
.archivo .fm-zoom img { width: 100%; height: 100%; object-fit: cover; display: block; }
.archivo figcaption { font-size: var(--t-xs); color: var(--muted); }

/* ---------- pausa: imagen conceptual a sangre ---------- */
.pausa { position: relative; display: grid; align-items: end; min-height: min(92svh, 62rem); isolation: isolate; color: var(--marfil); overflow: clip; }
.pausa__img { position: absolute; inset: 0; z-index: -1; }
.pausa__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(5 6 8 / .82), rgb(5 6 8 / .1) 55%); }
.pausa__texto { padding-block: clamp(2rem, 5vw, 4rem); display: grid; gap: 1.2rem; }
.pausa__frase { font-family: var(--font-display); font-size: var(--t-2xl); line-height: 1; letter-spacing: -.02em; }
.pausa .rotulo { color: rgb(242 240 234 / .82); }
@media (min-width: 900px) { .pausa__texto { grid-template-columns: 1fr auto; align-items: end; } .pausa .rotulo { text-align: right; max-width: 22rem; padding-bottom: .8rem; } }

.contacto__tel { display: grid; gap: .4rem; justify-items: start; }
.contacto__tel a { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1; text-decoration: none; }

/* ---------- 4. servicios ---------- */
.servicios { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.servicio { display: grid; gap: 1.2rem; padding-block: clamp(1.8rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.servicio__n { font-size: var(--t-xs); letter-spacing: .2em; color: var(--muted); font-weight: 600; }
.servicio h3 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.6rem); }
.servicio dl { display: grid; gap: 1rem; font-size: var(--t-sm); }
.servicio dt { font-size: var(--t-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .25rem; }
.servicio dd { color: var(--muted); max-width: 30rem; }
.servicio__titulo { display: grid; gap: 1rem; justify-items: start; align-content: start; }
.servicio a { font-size: var(--t-sm); font-weight: 600; text-decoration: none; padding-block: .6rem; }
@media (min-width: 900px) {
  .servicio { grid-template-columns: 4rem 5fr 6fr; align-items: start; column-gap: 2rem; }
  .servicio dl { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ---------- 5. proceso ---------- */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem 2rem; counter-reset: paso; }
@media (min-width: 640px) { .pasos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pasos { grid-template-columns: repeat(4, 1fr); } }
.paso { border-top: 1px solid var(--fg); padding-top: 1.2rem; display: grid; gap: .9rem; align-content: start; counter-increment: paso; }
.paso::before { content: "0" counter(paso); font-size: var(--t-xs); letter-spacing: .2em; font-weight: 600; color: var(--muted); }
.paso h3 { font-size: var(--t-lg); }
.paso p { font-size: var(--t-sm); color: var(--muted); }
.paso p strong { color: var(--fg); font-weight: 600; }
.proceso .note { margin-top: 3rem; }

/* ---------- 6. escena de principios ---------- */
.principles { text-align: center; }
.principles .fm-scene__stage > h2 { max-width: 14ch; padding-inline: var(--gutter); font-weight: 400; }
.principles .fm-orbit > * { font-size: var(--t-xs); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
html:not(.fm-motion) .principles { padding-block: var(--section); }
html:not(.fm-motion) .principles .fm-scene__stage { display: grid; gap: 1.5rem; justify-items: center; }
html:not(.fm-motion) .principles .fm-orbit { display: none; }
@media (max-width: 700px) { .principles { --fm-orbit: 96vmin; } }

/* ---------- 7. preguntas ---------- */
.faq-grid { display: grid; gap: 2rem clamp(2rem, 6vw, 6rem); }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 4fr 7fr; align-items: start; } .faq-grid .head { margin-bottom: 0; position: sticky; top: 6rem; } }
.faq .fm-faq:first-of-type { border-top: 1px solid var(--line); }
.faq .fm-faq > summary { min-height: 3rem; }
.faq p { color: var(--muted); max-width: 42rem; }

/* ---------- 8. contacto ---------- */
.contacto { display: grid; gap: clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 900px) { .contacto { grid-template-columns: 1fr 1fr; align-items: start; } }
.contacto__texto { display: grid; gap: 1.6rem; }
.contacto__texto > p:not(.eyebrow) { color: var(--muted); max-width: 32rem; }
.form { display: grid; gap: 1.2rem; }
.form label { display: grid; gap: .45rem; font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.form input, .form select, .form textarea {
  font: 400 1rem/1.5 var(--font); letter-spacing: 0; text-transform: none; color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; min-height: 3rem; width: 100%;
}
.form select option { color: var(--grafito); background: var(--marfil); }
.form input::placeholder { color: color-mix(in srgb, var(--fg) 55%, transparent); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.form textarea { resize: vertical; min-height: 8.5rem; }
.form__dos { display: grid; gap: 1.2rem; }
@media (min-width: 560px) { .form__dos { grid-template-columns: 1fr 1fr; } }
.form [aria-live] { font-size: var(--t-sm); min-height: 1.6em; }

/* ---------- pie ---------- */
.footer { --bg: var(--grafito); --fg: var(--marfil); background: var(--bg); color: var(--fg); padding-block: clamp(3rem, 7vw, 6rem) 2rem; font-size: var(--t-sm); }
.footer__top { display: grid; gap: 2.5rem; }
@media (min-width: 800px) { .footer__top { grid-template-columns: 2fr 1fr 1fr; } }
.footer__nombre { font-size: var(--t-xl); font-weight: 400; letter-spacing: -.035em; line-height: 1; }
.footer h2 { font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.footer li a { display: inline-block; padding-block: .35rem; text-decoration: none; }
.footer__legal { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; color: var(--muted); font-size: var(--t-xs); }

/* ---------- visor de imágenes (modo presentación) ---------- */
.visor { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: var(--noche); color: var(--marfil); }
.visor::backdrop { background: var(--noche); }
.visor[open] { display: grid; grid-template-rows: auto 1fr auto; }
.visor__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem var(--gutter); font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; }
.visor__img { min-height: 0; display: grid; place-items: center; padding-inline: var(--gutter); }
.visor__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.visor__pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem var(--gutter) 1.4rem; font-size: var(--t-sm); }
.visor button { all: unset; cursor: pointer; min-width: 3rem; min-height: 3rem; padding-inline: 1rem; display: inline-grid; place-items: center; border: 1px solid rgb(242 240 234 / .3); border-radius: var(--radius); box-sizing: border-box; font-size: var(--t-sm); letter-spacing: 0; text-transform: none; }
.visor button:hover { border-color: var(--marfil); }
.visor button:focus-visible { outline: 2px solid var(--marfil); outline-offset: 3px; }
.visor__nav { display: flex; gap: .5rem; }

/* ---------- 404 ---------- */
.error { min-height: 100svh; display: grid; place-content: center; justify-items: start; gap: 1.4rem; padding: var(--gutter); }
.error h1 { font-size: var(--t-xl); max-width: 16ch; font-weight: 400; }