/* Praldarapo — hoja de estilo común
   Paleta: fondo #1a1d15 / #22261c, sección contrastada #efeade
   Texto #e8e4d6, secundario #909486, acentos #c07c3a y #8fa26a */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: #1a1d15;
  color: #e8e4d6;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.65;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a { color: #c07c3a; text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

a:focus-visible,
:focus-visible {
  outline: 2px solid #c07c3a;
  outline-offset: 3px;
}

/* ---------- Rejilla base: 12 columnas ---------- */

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

.col-6 { grid-column: 1 / span 6; }
.col-7 { grid-column: 1 / span 7; }
.col-9 { grid-column: 1 / span 9; }
.col-12 { grid-column: 1 / span 12; }

/* ---------- Tipografía ---------- */

h1, h2, h3 { font-weight: normal; margin: 0; }

h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 34px;
}

.h1-line-2 { display: block; padding-left: 8.333%; }

h2 {
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  line-height: 1.22;
  margin: 0 0 20px;
}

h3 {
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.35;
  margin: 34px 0 12px;
}

p { margin: 0 0 22px; }
p + p { text-indent: 1.6em; }

.lead {
  font-size: 1.16rem;
  line-height: 1.6;
}

.meta {
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: #8fa26a;
}

.secondary { color: #909486; }

.sec-num {
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #8fa26a;
  display: block;
  margin-bottom: 14px;
}

/* ---------- Cabecera y navegación ---------- */

.site-head { border-bottom: 1px solid #2f3427; }

.site-head .wrap {
  align-items: baseline;
  padding-top: 22px;
  padding-bottom: 22px;
  row-gap: 12px;
}

.brand {
  grid-column: 1 / span 4;
  font-size: 1.32rem;
  letter-spacing: 0.06em;
  color: #e8e4d6;
  text-decoration: none;
}

.brand:hover { color: #c07c3a; }

.site-nav { grid-column: 5 / span 8; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 22px;
}

.site-nav a {
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #e8e4d6;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: #c07c3a;
  border-bottom-color: #c07c3a;
}

/* ---------- Hero ---------- */

.hero { padding: 78px 0 24px; }

.hero-frame {
  grid-column: 1 / span 12;
  position: relative;
  padding-left: 36px;
}

.vline {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(143, 162, 106, 0.35);
}

.vline span {
  position: absolute;
  left: -6px;
  width: 13px;
  height: 1px;
  background: #8fa26a;
}

.vline span:first-child { top: 0; }
.vline span:last-child { bottom: 0; }

.hero h1 { max-width: 15ch; }

.dimline {
  display: flex;
  align-items: center;
  margin: 0 0 30px;
  max-width: 760px;
}

.dimline::before,
.dimline::after {
  content: "";
  flex: 1;
  height: 9px;
  border-bottom: 1px solid #c07c3a;
}

.dimline::before { border-left: 1px solid #c07c3a; }
.dimline::after { border-right: 1px solid #c07c3a; }

.dimline span {
  padding: 0 16px;
  transform: translateY(4px);
}

.hero .lead { max-width: 54ch; }

/* ---------- Imagen principal con nota lateral ---------- */

.figure-row { padding: 18px 0 8px; row-gap: 22px; }

.fig-main {
  grid-column: 1 / span 7;
  margin: 0;
}

.fig-main img { width: 100%; }

.fig-note {
  grid-column: 9 / span 4;
  align-self: center;
  position: relative;
  color: #909486;
  font-size: 0.95rem;
  line-height: 1.55;
}

.fig-note::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 0.85em;
  width: 26px;
  height: 1px;
  background: #8fa26a;
}

.fig-note p { margin: 0 0 10px; }
.fig-note p + p { text-indent: 0; }

/* ---------- Ritmo de secciones ---------- */

.section { padding: 72px 0; }
.section:nth-of-type(4n + 2) { padding: 88px 0; background: #22261c; }
.section:nth-of-type(4n + 3) { padding: 104px 0; }
.section:nth-of-type(4n) { padding: 72px 0; background: #22261c; }

.rule {
  grid-column: 1 / span 12;
  margin-bottom: 28px;
}

.rule::before {
  content: "";
  display: block;
  height: 1px;
  background: rgba(232, 228, 214, 0.18);
}

.rule::after {
  content: "";
  display: block;
  height: 3px;
  width: 16.66%;
  background: #c07c3a;
  margin-top: 5px;
}

/* ---------- Listas ---------- */

ul.checklist, ul.plain {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

ul.checklist li, ul.plain li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
}

ul.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 12px;
  height: 1px;
  background: #c07c3a;
}

ul.plain li::before {
  content: "·";
  position: absolute;
  left: 4px;
  top: -0.05em;
  color: #8fa26a;
  font-size: 1.4rem;
}

.defects {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.defects li {
  padding: 16px 0;
  border-top: 1px solid rgba(232, 228, 214, 0.14);
}

.defects li:last-child { border-bottom: 1px solid rgba(232, 228, 214, 0.14); }

.defects b {
  font-weight: normal;
  font-style: italic;
  color: #c07c3a;
  display: block;
}

/* ---------- Sección contrastada ---------- */

.contrast {
  background: #efeade;
  color: #1a1d15;
  padding: 104px 0;
}

.contrast h2, .contrast h3 { color: #1a1d15; }
.contrast .sec-num { color: #6d7b4c; }
.contrast .rule::before { background: rgba(26, 29, 21, 0.2); }
.contrast .defects li { border-color: rgba(26, 29, 21, 0.16); }
.contrast ul.checklist li::before { background: #9a5f24; }
.contrast .secondary { color: #55584a; }

.contrast-grid { row-gap: 34px; align-items: start; }

.fig-detail {
  grid-column: 2 / span 4;
  margin: 0;
}

.fig-detail img { width: 100%; }

.fig-detail figcaption {
  margin-top: 12px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #55584a;
}

.contrast-text { grid-column: 7 / span 6; }

/* ---------- Bloque de contacto ---------- */

.contact-line {
  font-size: 1.1rem;
  margin-top: 6px;
}

/* ---------- Página About: línea vertical continua ---------- */

.about-body {
  grid-column: 1 / span 9;
  position: relative;
  padding-left: 34px;
  border-left: 1px solid rgba(143, 162, 106, 0.4);
}

.about-block { position: relative; margin-bottom: 44px; }

.about-block::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 0.7em;
  width: 16px;
  height: 1px;
  background: #8fa26a;
}

.about-block h2 { margin-bottom: 16px; }
.about-block:last-child { margin-bottom: 0; }

/* ---------- Páginas legales ---------- */

.doc { padding: 62px 0 78px; }
.doc-body { grid-column: 1 / span 9; }
.doc-body h2 { margin-top: 44px; }
.doc-body h2:first-of-type { margin-top: 0; }

.page-head { padding: 60px 0 10px; }
.page-head .hero-frame { padding-left: 36px; }

/* ---------- Pie ---------- */

.site-foot { padding: 64px 0 34px; }

.site-foot .wrap { row-gap: 30px; }

.foot-top {
  grid-column: 1 / span 12;
  border-top: 1px solid rgba(232, 228, 214, 0.2);
  padding-top: 4px;
}

.foot-top::after {
  content: "";
  display: block;
  height: 3px;
  width: 16.66%;
  background: #c07c3a;
}

.foot-brand { grid-column: 1 / span 5; }

.foot-brand p {
  color: #909486;
  font-size: 0.95rem;
  margin: 10px 0 0;
}

.foot-name {
  font-size: 1.5rem;
  letter-spacing: 0.05em;
}

.foot-nav { grid-column: 7 / span 3; }
.foot-contact { grid-column: 10 / span 3; }

.foot-nav h2, .foot-contact h2 {
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fa26a;
  margin-bottom: 14px;
}

.foot-nav ul { list-style: none; margin: 0; padding: 0; }
.foot-nav li { margin-bottom: 9px; }

.foot-nav a, .foot-contact a {
  font-size: 0.98rem;
  color: #e8e4d6;
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 124, 58, 0.6);
  padding-bottom: 2px;
}

.foot-nav a:hover, .foot-contact a:hover { color: #c07c3a; }

.foot-contact p { color: #909486; font-size: 0.95rem; margin: 0 0 10px; }

.foot-bottom {
  grid-column: 1 / span 12;
  border-top: 1px solid rgba(232, 228, 214, 0.14);
  padding-top: 16px;
  color: #909486;
}

.foot-bottom p {
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  margin: 0;
}

/* ---------- Adaptación a pantallas medias ---------- */

@media (max-width: 940px) {
  .fig-main { grid-column: 1 / span 8; }
  .fig-note { grid-column: 9 / span 4; }
  .fig-detail { grid-column: 1 / span 5; }
  .contrast-text { grid-column: 7 / span 6; }
  .col-6, .col-7, .col-9 { grid-column: 1 / span 10; }
  .about-body, .doc-body { grid-column: 1 / span 11; }
  .brand { grid-column: 1 / span 12; }
  .site-nav { grid-column: 1 / span 12; }
  .site-nav ul { justify-content: flex-start; }
}

/* ---------- Móvil ---------- */

@media (max-width: 700px) {
  body { font-size: 17px; }

  .wrap {
    padding: 0 20px;
    column-gap: 0;
    grid-template-columns: 1fr;
  }

  .col-6, .col-7, .col-9, .col-12,
  .hero-frame, .rule, .fig-main, .fig-note,
  .fig-detail, .contrast-text, .about-body, .doc-body,
  .foot-top, .foot-brand, .foot-nav, .foot-contact, .foot-bottom {
    grid-column: 1;
  }

  .h1-line-2 { padding-left: 1.4em; }

  .hero { padding: 46px 0 18px; }
  .section { padding: 50px 0; }
  .section:nth-of-type(4n + 2) { padding: 56px 0; }
  .section:nth-of-type(4n + 3) { padding: 56px 0; }
  .section:nth-of-type(4n) { padding: 50px 0; }
  .contrast { padding: 52px 0; }
  .doc { padding: 40px 0 52px; }
  .page-head { padding: 40px 0 6px; }

  .fig-note { margin-top: 18px; }
  .fig-note::before { position: static; display: block; width: 44px; margin-bottom: 12px; }

  .rule::after, .foot-top::after { width: 84px; }

  .site-foot { padding: 46px 0 28px; }
  .foot-nav h2, .foot-contact h2 { margin-top: 4px; }

  .about-body { padding-left: 22px; }
  .about-block::before { left: -22px; width: 12px; }

  .dimline span { padding: 0 10px; font-size: 11px; }
}