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

:root{
  --bg:#f3eeea;
  --bg-alt:#e6ddd6;
  --bg-dark:#3b2029;
  --ink:#241b1d;
  --ink-soft:#7b6a68;
  --ink-inv:#f3eeea;
  --accent:#8b2f45;
  --accent-2:#a8642e;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --maxw: 1120px;
}

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

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

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

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

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}

a:focus-visible,
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

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

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 28px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  row-gap:0;
}

/* ---------- cabecera ---------- */

.site-head{
  border-bottom:1px solid rgba(123,106,104,.28);
  background:var(--bg);
}

.site-head .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap:10px 28px;
  padding-top:22px;
  padding-bottom:20px;
}

.brand{
  font-family:var(--serif);
  font-size:20px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--accent);
  padding-bottom:2px;
}

.brand:hover{border-bottom-width:2px;}

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

.site-nav a{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.05em;
  color:var(--ink-soft);
  text-decoration:none;
  padding:3px 0;
  border-bottom:1px solid transparent;
}

.site-nav a:hover{color:var(--ink);border-bottom-color:var(--accent);}

/* ---------- portada (eje central) ---------- */

.hero{
  position:relative;
  padding:80px 0 64px;
}

.hero .wrap{position:relative;}

.hero .wrap::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:linear-gradient(to bottom,rgba(139,47,69,0),var(--accent) 18%,var(--accent) 82%,rgba(139,47,69,0));
  opacity:.55;
}

.hero-kicker{
  grid-column:1 / -1;
  text-align:center;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin:0 0 26px;
}

h1{
  grid-column:2 / 12;
  text-align:center;
  font-size:clamp(32px,4.6vw,54px);
  line-height:1.16;
  font-weight:400;
  letter-spacing:-.005em;
  margin:0 0 28px;
}

.hero-lead{
  grid-column:4 / 10;
  text-align:center;
  margin:0 0 48px;
  font-size:19px;
}

.hero-note{
  grid-column:2 / 5;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-soft);
}

.hero-note:last-of-type{grid-column:8 / 11;}

.hero-note h2{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin:0 0 10px;
  padding:0;
  border:0;
  text-align:left;
}

.hero-note p{margin:0;}

/* ---------- figura principal ---------- */

.figure-main{
  margin:0;
  padding:56px 0 8px;
}

.figure-main img{
  width:100%;
  max-width:680px;
  margin:0 auto;
}

figcaption{
  font-family:var(--sans);
  font-size:12.5px;
  line-height:1.55;
  color:var(--ink-soft);
  text-align:center;
  margin-top:14px;
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}

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

main > section{padding:64px 0;}
main > section:nth-of-type(4n+2){padding:80px 0;}
main > section:nth-of-type(4n+3){padding:96px 0;}
main > section.band{background:var(--bg-alt);}

h2{
  font-size:clamp(24px,2.6vw,31px);
  line-height:1.25;
  font-weight:400;
  margin:0 0 22px;
}

h3{
  font-style:italic;
  font-size:20px;
  font-weight:400;
  margin:34px 0 10px;
}

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

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

/* secciones simétricas: 4 + 4 a ambos lados del eje */
.pair{row-gap:32px;}
.pair .col-l{grid-column:2 / 6;}
.pair .col-r{grid-column:8 / 12;}
.pair .head{grid-column:3 / 11;text-align:center;margin-bottom:12px;}

/* secciones narrativas: texto a la izquierda, margen derecho vacío */
.narrow{grid-column:1 / 8;}
.centered{grid-column:4 / 10;text-align:center;}
.wide{grid-column:2 / 12;}

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

ul.marks,ol.steps{
  margin:0 0 22px;
  padding:0 0 0 22px;
}

ul.marks{list-style:none;padding-left:0;}

ul.marks li{
  position:relative;
  padding-left:24px;
  margin-bottom:11px;
}

ul.marks li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:9px;
  height:1px;
  background:var(--accent);
}

ol.steps li{margin-bottom:11px;padding-left:4px;}
ol.steps li::marker{color:var(--accent-2);font-family:var(--sans);font-size:14px;}

.note{
  font-size:16px;
  color:var(--ink-soft);
  line-height:1.6;
}

/* ---------- separador en arco ---------- */

.arc-row{grid-template-columns:repeat(12,1fr);}

.arc{
  grid-column:5 / 9;
  height:46px;
  border:1px solid transparent;
  border-top-color:var(--accent-2);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  opacity:.75;
}

/* ---------- sección en contraste ---------- */

main > section.dark{
  background:var(--bg-dark);
  color:var(--ink-inv);
  padding:96px 0;
}

.dark h2,.dark h3{color:var(--ink-inv);}
.dark .sec-num{color:var(--accent-2);}
.dark .note,.dark figcaption{color:rgba(243,238,234,.68);}
.dark a{color:#e8b8a4;}
.dark ul.marks li::before{background:var(--accent-2);}
.dark .grid{row-gap:40px;align-items:start;}

.dark .fig-detail{grid-column:2 / 6;margin:0;}
.dark .fig-detail img{width:100%;}
.dark .fig-detail figcaption{text-align:left;margin-left:0;max-width:none;}
.dark .dark-text{grid-column:7 / 12;}

/* ---------- bloques de contacto / índice ---------- */

.index-list{
  grid-column:3 / 11;
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:36px;
}

.index-list li{
  border-top:1px solid rgba(123,106,104,.3);
  padding:14px 0;
  font-size:17px;
}

.contact-box{
  grid-column:4 / 10;
  text-align:center;
}

.contact-box .mail{
  font-size:21px;
  display:inline-block;
  margin-bottom:6px;
}

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

.page-head{padding:72px 0 8px;position:relative;}
.page-head .wrap{position:relative;}

.page-head .wrap::before{
  content:"";
  position:absolute;
  top:0;
  bottom:-10px;
  left:50%;
  width:1px;
  background:var(--accent);
  opacity:.4;
}

.page-head h1{grid-column:3 / 11;margin-bottom:20px;}
.page-head .hero-lead{grid-column:4 / 10;margin-bottom:10px;}

.prose{grid-column:4 / 10;}
.prose h2{margin-top:8px;text-align:center;}
.prose h3{text-align:left;}

.facts{row-gap:28px;margin-top:8px;}
.facts .f-l{grid-column:2 / 6;}
.facts .f-r{grid-column:8 / 12;}

.facts h3{
  font-style:normal;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin:0 0 10px;
}

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

.site-foot{
  background:var(--bg-alt);
  padding:0 0 56px;
  margin-top:0;
}

.foot-arc{padding-top:0;}

.site-foot .arc{margin-bottom:34px;}

.foot-inner{text-align:center;}

.foot-name{
  font-size:20px;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin:0 0 18px;
}

.foot-nav ul{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 0;
}

.foot-nav li{display:flex;align-items:center;}

.foot-nav li + li::before{
  content:"";
  width:1px;
  height:12px;
  background:var(--accent-2);
  margin:0 16px;
  opacity:.6;
}

.foot-nav a{
  font-family:var(--sans);
  font-size:13px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.foot-nav a:hover{border-bottom-color:var(--accent);}

.foot-mail{margin:0 0 10px;font-size:17px;}

.foot-line{
  font-family:var(--sans);
  font-size:12.5px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:560px;
  margin:0 auto;
}

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

@media (max-width:900px){
  .hero{padding:56px 0 40px;}
  .hero .wrap::before,.page-head .wrap::before{display:none;}
  h1,.hero-lead,.hero-note,.hero-note:last-of-type,
  .pair .col-l,.pair .col-r,.pair .head,
  .narrow,.centered,.wide,.prose,
  .facts .f-l,.facts .f-r,
  .index-list,.contact-box,
  .dark .fig-detail,.dark .dark-text,
  .page-head h1,.page-head .hero-lead{
    grid-column:1 / -1;
  }
  .hero-note{margin-bottom:22px;}
  .hero-lead{margin-bottom:30px;}
  .arc{grid-column:4 / 10;height:38px;}
  main > section,
  main > section:nth-of-type(4n+2),
  main > section:nth-of-type(4n+3){padding:48px 0;}
  main > section.dark{padding:56px 0;}
  .figure-main{padding:36px 0 4px;}
  .dark .fig-detail{max-width:520px;}
  .index-list{grid-template-columns:1fr;}
  .prose h2{text-align:left;}
  .facts h3{text-align:left;}
}

@media (max-width:560px){
  body{font-size:17px;}
  .wrap{padding:0 20px;}
  .grid{column-gap:0;}
  main > section,
  main > section:nth-of-type(4n+2),
  main > section:nth-of-type(4n+3){padding:40px 0;}
  .site-head .wrap{padding-top:18px;padding-bottom:16px;}
  .site-nav ul{gap:6px 16px;}
  .arc{grid-column:3 / 11;}
  .foot-nav li + li::before{margin:0 11px;}
}