/* Sovozi — hoja de estilos común */

:root {
  --bg: #e9eeeb;
  --bg-alt: #d9e1dd;
  --bg-dark: #1e2a26;
  --ink: #171f1c;
  --ink-soft: #63706b;
  --ink-inv: #e9eeeb;
  --rust: #8f4a28;
  --teal: #3d6f66;
  --gap: 24px;
  --step: 84px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  overflow-x: hidden;
}

/* ---------- rejilla de 12 columnas ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.c1 { grid-column: 1 / span 7; }
.c2 { grid-column: 2 / span 7; }
.c3 { grid-column: 3 / span 7; }
.c4 { grid-column: 4 / span 7; }
.full { grid-column: 1 / -1; }

/* ---------- cruces de registro ---------- */

.reg {
  position: absolute;
  width: 22px;
  height: 22px;
  background: radial-gradient(circle at center, transparent 6px, var(--teal) 6px, var(--teal) 7px, transparent 7.5px);
  pointer-events: none;
}
.reg::before,
.reg::after { content: ""; position: absolute; background: var(--teal); }
.reg::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.reg::after { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }

.reg-rust { background-image: radial-gradient(circle at center, transparent 6px, var(--rust) 6px, var(--rust) 7px, transparent 7.5px); }
.reg-rust::before, .reg-rust::after { background: var(--rust); }
.reg-inv { background-image: radial-gradient(circle at center, transparent 6px, #6f8a82 6px, #6f8a82 7px, transparent 7.5px); }
.reg-inv::before, .reg-inv::after { background: #6f8a82; }

.reg.tl { top: -11px; left: -11px; }
.reg.tr { top: -11px; right: -11px; }
.reg.bl { bottom: -11px; left: -11px; }
.reg.br { bottom: -11px; right: -11px; }

/* ---------- tipografía ---------- */

h1, h2, h3 { font-family: var(--serif); font-weight: 400; }

h1 {
  font-size: clamp(2.05rem, 4.6vw, 3.25rem);
  line-height: 1.16;
  margin: 0;
  letter-spacing: -0.005em;
}

h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.24;
  margin: 0 0 18px;
}

h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.35;
  margin: 32px 0 10px;
}

p { margin: 0 0 20px; max-width: 66ch; }

.lead { font-size: 1.09rem; }

.label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  line-height: 1.5;
  color: var(--teal);
  margin: 0 0 14px;
}

.num {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--teal);
  display: block;
  margin-bottom: 12px;
}

a { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

/* ---------- listas ---------- */

ul.marks { list-style: none; padding: 0; margin: 0 0 20px; max-width: 62ch; }
ul.marks li { position: relative; padding-left: 22px; margin-bottom: 11px; }
ul.marks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.63em;
  width: 7px;
  height: 7px;
  background: var(--rust);
}

ol.steps { padding-left: 0; margin: 0 0 20px; list-style: none; counter-reset: s; max-width: 62ch; }
ol.steps li { position: relative; padding-left: 34px; margin-bottom: 12px; counter-increment: s; }
ol.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.18em;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--teal);
}

/* ---------- cabecera y navegación ---------- */

.site-head { padding: 26px 0 22px; border-bottom: 1px solid rgba(61, 111, 102, 0.34); }
.head-inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px 28px; }

.brand {
  font-family: var(--serif);
  font-size: 1.34rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }

.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; }
.site-nav a { font-size: 15px; color: var(--ink); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--rust); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--rust); color: var(--rust); }

/* ---------- ritmo de secciones ---------- */

.band { padding: var(--step) 0; }
.band-alt { background: var(--bg-alt); }
.band-dark { background: var(--bg-dark); color: var(--ink-inv); }
.band-dark h2, .band-dark h3 { color: var(--ink-inv); }
.band-dark .num, .band-dark .label { color: #8fa79f; }
.band-dark a { color: #d8a184; }
.band-dark a:focus-visible { outline-color: #d8a184; }
.band-dark ul.marks li::before { background: #d8a184; }

/* separadores: dos líneas desplazadas */
.sep { position: relative; height: 2px; background: var(--rust); margin-bottom: 30px; }
.sep::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 24px;
  right: -24px;
  height: 2px;
  background: var(--teal);
}
.band-dark .sep { background: #d8a184; }
.band-dark .sep::after { background: #6f8a82; }

/* ---------- hero ---------- */

.hero { padding: 62px 0 var(--step); }
.hero-frame { position: relative; grid-column: 1 / -1; border: 1px solid rgba(61, 111, 102, 0.4); padding: 46px 34px 42px; }

.hero-inner { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }

.hero-title { grid-column: 1 / span 9; }
.hero-title .l2 { position: relative; display: inline-block; }
.hero-title .l2::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -26px;
  bottom: 0.14em;
  height: 2px;
  background: var(--rust);
}

.hero-cols { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); margin-top: 40px; }
.hero-intro { grid-column: 1 / span 5; }
.hero-intro p { margin-bottom: 16px; }
.hero-topics { grid-column: 8 / span 4; }
.hero-topics ul { margin-bottom: 0; }
.hero-topics li { font-size: 16px; }

/* ---------- imágenes ---------- */

.figure-main { grid-column: 3 / span 8; position: relative; margin: 0; }
.figure-main .shot { position: relative; display: block; }
.figure-main img { display: block; width: 100%; height: auto; }
figcaption { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin-top: 16px; max-width: 46ch; }

.detail-wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
.figure-detail { grid-column: 1 / span 5; position: relative; margin: 0; }
.figure-detail .shot { position: relative; display: block; }
.figure-detail img { display: block; width: 100%; height: auto; }
.band-dark figcaption { color: #97a8a2; }
.detail-text { grid-column: 7 / span 6; }

/* ---------- páginas interiores ---------- */

.page-head { padding: 58px 0 42px; }
.page-head .inner { position: relative; grid-column: 1 / span 9; }
.page-head h1 { font-size: clamp(1.85rem, 3.8vw, 2.7rem); }
.page-head p { color: var(--ink-soft); margin-top: 18px; }

.doc-sec { position: relative; padding-bottom: 46px; }
.doc-mark { grid-column: 1 / span 1; position: relative; height: 26px; }
.doc-mark .reg { top: 6px; left: 2px; }
.doc-body { grid-column: 3 / span 7; }
.doc-body > h2 { margin-top: -4px; }

.contact-line { font-size: 1.05rem; }

/* ---------- pie ---------- */

.site-foot { background: var(--bg-dark); color: var(--ink-inv); padding: 62px 0 54px; }
.foot-rules { grid-column: 1 / -1; position: relative; height: 2px; background: #d8a184; margin-bottom: 40px; }
.foot-rules::after { content: ""; position: absolute; top: 7px; left: 24px; right: -24px; height: 2px; background: #6f8a82; }
.foot-a { grid-column: 1 / span 7; }
.foot-b { grid-column: 8 / span 5; }
.foot-brand { font-family: var(--serif); font-size: 1.28rem; margin: 0 0 14px; }
.foot-a p { color: #b9c6c0; font-size: 15px; max-width: 52ch; }
.foot-b ul { list-style: none; margin: 0 0 22px; padding: 0; }
.foot-b li { margin-bottom: 8px; }
.foot-b a { color: var(--ink-inv); text-decoration: none; border-bottom: 1px solid rgba(233, 238, 235, 0.35); font-size: 15px; }
.foot-b a:hover { border-bottom-color: #d8a184; }
.foot-mail a { color: #d8a184; }
.foot-note { grid-column: 1 / -1; margin-top: 40px; font-size: 13px; color: #8fa79f; }
.site-foot a:focus-visible { outline: 2px solid #d8a184; outline-offset: 3px; }

/* ---------- adaptación ---------- */

@media (max-width: 980px) {
  :root { --step: 60px; }
  .figure-main { grid-column: 1 / span 10; }
  .hero-intro { grid-column: 1 / span 7; }
  .hero-topics { grid-column: 1 / span 7; margin-top: 34px; }
  .hero-title { grid-column: 1 / span 11; }
  .figure-detail { grid-column: 1 / span 6; }
  .detail-text { grid-column: 1 / span 12; margin-top: 34px; }
  .doc-body { grid-column: 2 / span 11; }
  .page-head .inner { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  :root { --step: 50px; --gap: 16px; }
  body { font-size: 16.5px; }
  .grid { padding: 0 20px; }
  .c1, .c2, .c3, .c4, .hero-title, .hero-intro, .hero-topics,
  .figure-main, .figure-detail, .detail-text, .foot-a, .foot-b,
  .doc-body, .page-head .inner { grid-column: 1 / -1; }
  .doc-mark { grid-column: 1 / -1; }
  .hero { padding-top: 40px; }
  .hero-frame { padding: 34px 20px 32px; }
  .hero-cols { margin-top: 30px; }
  .site-nav ul { gap: 6px 16px; }
  .site-nav a { font-size: 14.5px; }
  .sep::after { right: -12px; left: 16px; }
  .foot-rules::after { right: -12px; }
  .foot-b { margin-top: 34px; }
}