/* Fáctica — estilos compartidos del sitio (tokens del sistema de diseño Fáctica / Vicia Estudio) */
@font-face { font-family: "BackBone Melavita"; src: url("/fonts/BackBoneMelavita-Italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "BackBone Melavita"; src: url("/fonts/BackBoneMelavita-Regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }

:root {
  --azul: #3b39fe; --naranja: #e35726; --carbon: #1e1e1e; --arena: #f0e7de; --blanco: #ffffff;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "BackBone Melavita", "Playfair Display", Georgia, serif;
  --mono: "Monoblock", "DM Mono", ui-monospace, monospace;
}
[data-theme="blanco"] { --surface:#ffffff; --ink:#1e1e1e; --ink-muted:#5c5650; --heading:#3b39fe; --enfasis:#e35726; --accion:#3b39fe; --on-accion:#ffffff; --forma:#3b39fe; --forma-acento:#e35726; --line:#1e1e1e; --line-soft:#b3aca4; --focus:#3b39fe; }
[data-theme="arena"]  { --surface:#f0e7de; --ink:#1e1e1e; --ink-muted:#5c5650; --heading:#3b39fe; --enfasis:#e35726; --accion:#3b39fe; --on-accion:#ffffff; --forma:#3b39fe; --forma-acento:#e35726; --line:#1e1e1e; --line-soft:#8a8580; --focus:#3b39fe; }
[data-theme="azul"]   { --surface:#3b39fe; --ink:#ffffff; --ink-muted:#e4e3ff; --heading:#ffffff; --enfasis:#ffffff; --accion:#ffffff; --on-accion:#3b39fe; --forma:#ffffff; --forma-acento:#ffffff; --line:#ffffff; --line-soft:#8f8dff; --focus:#ffffff; }
[data-theme="carbon"] { --surface:#1e1e1e; --ink:#ffffff; --ink-muted:#b3aca4; --heading:#ffffff; --enfasis:#e35726; --accion:#ffffff; --on-accion:#1e1e1e; --forma:#ffffff; --forma-acento:#ffffff; --line:#ffffff; --line-soft:#5c5650; --focus:#ffffff; }
[data-theme] { background: var(--surface); color: var(--ink); }

.site { font-family: var(--sans); font-size: 18px; line-height: 1.5; letter-spacing: -0.025em; -webkit-font-smoothing: antialiased; }
.site * { box-sizing: border-box; }
.sec { position: relative; overflow: hidden; padding: 128px 0; }
.sec-s { position: relative; overflow: hidden; padding: 72px 0; }
.wrap { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 56px; }
.stack { display: flex; flex-direction: column; }

.display { margin: 0; font-size: clamp(46px, 6.1vw, 88px); line-height: 1.02; font-weight: 500; letter-spacing: -0.025em; color: var(--heading); }
.h1 { margin: 0; font-size: clamp(40px, 4.5vw, 64px); line-height: 1.05; font-weight: 500; letter-spacing: -0.025em; color: var(--heading); }
.h2 { margin: 0; font-size: clamp(32px, 3.1vw, 44px); line-height: 1.1; font-weight: 500; letter-spacing: -0.025em; color: var(--heading); }
.h3 { margin: 0; font-size: clamp(26px, 2.25vw, 32px); line-height: 1.15; font-weight: 500; letter-spacing: -0.025em; }
.h4 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -0.025em; }
.display em, .h1 em, .h2 em, .h3 em, .h4 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.05em; }
.lead { margin: 0; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.4; }
.p { margin: 0; }
.strong { font-weight: 600; }
.small { margin: 0; font-size: 15px; letter-spacing: -0.01em; color: var(--ink-muted); }
.muted { color: var(--ink-muted); }
.enfasis { color: var(--enfasis); }
.folio { font-family: var(--mono); font-weight: 300; font-size: 12px; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; }
.num { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.05em; color: var(--enfasis); font-size: 32px; line-height: 1.15; }
.num-xl { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.05em; color: var(--enfasis); font-size: clamp(48px, 4.5vw, 64px); line-height: 1; }

.etq { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; line-height: 1.2; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.etq-n { background: var(--naranja); border-color: var(--naranja); color: #ffffff; }
.etqs { display: flex; flex-wrap: wrap; gap: 8px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--accion); font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-p { background: var(--accion); color: var(--on-accion); }
.btn-o { background: transparent; color: var(--ink); border-color: var(--line); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.link { color: var(--accion); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.site a:focus-visible, .site button:focus-visible, .site input:focus-visible, .site select:focus-visible, .site textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.blob { position: absolute; border-radius: 50%; background: var(--forma); z-index: 0; pointer-events: none; }
.blob-n { background: var(--forma-acento); }

.list { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.item { padding: 32px 0; border-top: 1px solid var(--line-soft); }
.item:first-child { border-top: 0; }

.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; }
.row-num { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 24px; }
.case { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr); gap: 48px; }

.card { background: #ffffff; color: #1e1e1e; border-radius: 18px; padding: 48px 40px; display: flex; flex-direction: column; gap: 16px; }
.card .h3 { color: #3b39fe; }
.card .muted { color: #5c5650; }

.ph { display: flex; align-items: center; justify-content: center; text-align: center; background: #d9cfc4; color: #4a4540; font-family: var(--mono); font-weight: 300; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; padding: 24px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 15px; font-weight: 600; }
.field input, .field select, .field textarea { font-family: var(--sans); font-size: 18px; letter-spacing: -0.025em; color: #1e1e1e; background: #ffffff; border: 1px solid #1e1e1e; border-radius: 0; padding: 14px 16px; min-height: 52px; }
.field textarea { min-height: 140px; resize: vertical; }

@media (max-width: 960px) {
  .g2, .g3, .split, .case { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec { padding: 80px 0; }
  .wrap { padding: 0 20px; }
  .hide-m { display: none; }
  .card { padding: 32px 24px; }
}
@media (max-width: 560px) {
  .g4 { grid-template-columns: minmax(0, 1fr); }
  .row-num { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
}

/* Fotos y bloque de contacto */
.photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.cblock { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 640px; }
.cblock-photo { min-height: 420px; }
.cblock-solo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.strip img { height: 380px; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.duo img { height: 440px; }
@media (max-width: 960px) {
  .cblock { grid-template-columns: minmax(0, 1fr); }
  .strip, .duo { grid-template-columns: minmax(0, 1fr); }
  .strip img, .duo img { height: 280px; }
}