/* Plerdugi — hoja de estilo única */

:root{
  --field:#ede5cd;
  --sheet:#f7f2e2;
  --band:#ede5cd;
  --dark:#17191a;
  --ink:#1b1a16;
  --muted:#756f5c;
  --accent:#1f7d78;
  --accent2:#a8721c;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --pad:56px;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  padding:40px 24px 28px;
  background:var(--field);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.65;
}

.sheet{
  max-width:1180px;
  margin:0 auto;
  background:var(--sheet);
  border:1px solid var(--accent);
  padding-bottom:var(--pad);
  overflow:hidden;
}

.wrap{padding-left:var(--pad);padding-right:var(--pad)}

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

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

.topbar{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:16px 32px;
  padding-top:26px;
  padding-bottom:22px;
  border-bottom:1px solid rgba(117,111,92,.4);
}

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

.brand span{
  display:block;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.4;
  letter-spacing:.06em;
  color:var(--muted);
}

.nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  margin:0;
  padding:0;
  list-style:none;
  font-family:var(--sans);
  font-size:13px;
}

.nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.nav a[aria-current="page"]{border-bottom-color:var(--accent2);color:var(--muted)}

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

h1{
  font-size:clamp(2.3rem,5.4vw,4rem);
  line-height:1.04;
  font-weight:400;
  margin:0;
  letter-spacing:-.01em;
}

h2{
  font-size:clamp(1.45rem,2.4vw,1.95rem);
  line-height:1.2;
  font-weight:400;
  margin:0 0 18px;
}

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

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

.lead{font-size:1.12rem;color:var(--ink)}

a{color:var(--accent)}
a:hover{color:var(--accent2)}

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

.dark :focus-visible{outline-color:#8fd3ce}

/* ---------- rejilla de contenido ---------- */

main>*+*{margin-top:88px}

.col-main{grid-column:1/8}
.col-side{grid-column:9/13}
.col-wide{grid-column:1/10}
.col-full{grid-column:1/13}

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

.hero{padding-top:46px}
.hero .grid{row-gap:40px}
.hero h1{grid-column:1/9}

.hero-card{
  grid-column:9/13;
  border:1px solid var(--accent2);
  padding:18px 20px;
  align-self:start;
  font-family:var(--sans);
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}

.hero-card p{margin:0 0 10px;text-indent:0}
.hero-card p:last-child{margin:0}
.hero-card strong{color:var(--ink);font-weight:600}

.hero figure{grid-column:1/6;margin:0}

.hero figure img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--ink);
}

.hero figcaption,
figure figcaption{
  font-family:var(--sans);
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
  margin-top:10px;
}

.hero-text{grid-column:7/13;align-self:center}
.hero-text p:last-child{margin-bottom:0}

/* ---------- separadores ---------- */

.rule{
  position:relative;
  height:1px;
  margin-left:var(--pad);
  margin-right:var(--pad);
  background:rgba(27,26,22,.35);
  border:0;
}

.rule::before,.rule::after{
  content:"";
  position:absolute;
  top:-6px;
  width:1px;
  height:13px;
  background:var(--accent2);
}

.rule::before{left:0}
.rule::after{right:0}

/* ---------- fichas laterales ---------- */

.note{
  border-top:2px solid var(--accent2);
  border-bottom:1px solid rgba(117,111,92,.5);
  padding:14px 0 12px;
  font-family:var(--sans);
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
  align-self:start;
}

.note h3{
  font-family:var(--sans);
  font-style:normal;
  font-size:13px;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--ink);
  margin:0 0 10px;
}

.note dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
.note dt{color:var(--ink)}
.note dd{margin:0;text-align:right}
.note p{margin:0 0 10px;text-indent:0}
.note p:last-child{margin:0}
.note ul{margin:0;padding-left:18px}
.note li{margin-bottom:6px}

.note--float{grid-column:9/13}

/* ficha que sustituye a un separador */
.rule-note{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:28px;
}

.rule-note .note{grid-column:8/13}

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

ul.list,ol.list{margin:0 0 20px;padding-left:22px}
ul.list li,ol.list li{margin-bottom:10px}
ul.list li::marker{color:var(--accent)}
ol.list li::marker{color:var(--accent2)}

dl.faults{margin:0}
dl.faults dt{
  font-style:italic;
  margin-top:18px;
  color:var(--ink);
}
dl.faults dd{margin:4px 0 0;color:var(--ink)}
dl.faults dt:first-child{margin-top:0}

/* ---------- secciones alternas ---------- */

.band{
  background:var(--band);
  padding-top:56px;
  padding-bottom:56px;
  border-top:1px solid rgba(117,111,92,.35);
  border-bottom:1px solid rgba(117,111,92,.35);
}

.dark{
  background:var(--dark);
  color:var(--sheet);
  padding-top:64px;
  padding-bottom:64px;
}

.dark h2,.dark h3{color:var(--sheet)}
.dark a{color:#8fd3ce}
.dark .note{color:#cfc8b2;border-bottom-color:rgba(247,242,226,.35)}
.dark .note h3{color:var(--sheet)}
.dark figcaption{color:#b3ab94}
.dark ul.list li::marker{color:#8fd3ce}

.dark figure{grid-column:8/13;margin:0}
.dark figure img{display:block;width:100%;height:auto;border:1px solid rgba(247,242,226,.45)}
.dark .dark-text{grid-column:1/7}
.dark .dark-text p:last-child{margin-bottom:0}

/* ---------- contacto ---------- */

.contact p{margin-bottom:12px}
.mail{font-family:var(--sans);font-size:1rem;letter-spacing:.01em}

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

.site-footer{
  max-width:1180px;
  margin:40px auto 0;
  padding:0 4px;
  font-family:var(--sans);
  font-size:13px;
  color:var(--muted);
}

.footer-top{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  justify-content:space-between;
  align-items:baseline;
  padding-bottom:14px;
}

.footer-name{
  font-family:var(--serif);
  font-size:1.15rem;
  color:var(--ink);
}

.footer-line{height:1px;background:rgba(117,111,92,.5);margin-bottom:14px}

.footer-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  margin:0 0 12px;
  padding:0;
  list-style:none;
}

.footer-nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.footer-nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}

.footer-note{max-width:62ch;margin:0;line-height:1.55}

/* ---------- responsive ---------- */

@media (max-width:1000px){
  :root{--pad:36px}
  .grid{gap:22px}
  .hero h1{grid-column:1/13}
  .hero-card{grid-column:1/13}
  .hero figure{grid-column:1/7}
  .hero-text{grid-column:7/13}
  .col-main{grid-column:1/9}
  .col-side,.note--float{grid-column:9/13}
  .col-wide{grid-column:1/13}
  .rule-note .note{grid-column:6/13}
  .dark figure{grid-column:7/13}
  .dark .dark-text{grid-column:1/7}
}

@media (max-width:760px){
  :root{--pad:20px}
  body{padding:16px 12px 20px;font-size:17px}
  .grid,.rule-note{grid-template-columns:minmax(0,1fr);gap:26px}
  .hero{padding-top:30px}
  .hero h1,.hero-card,.hero figure,.hero-text,
  .col-main,.col-side,.col-wide,.col-full,
  .note--float,.rule-note .note,
  .dark figure,.dark .dark-text{grid-column:1}
  .hero figure{max-width:420px}
  main>*+*{margin-top:52px}
  .band{padding-top:38px;padding-bottom:38px}
  .dark{padding-top:42px;padding-bottom:42px}
  .rule{margin-left:var(--pad);margin-right:var(--pad)}
  .topbar{padding-top:20px;padding-bottom:16px}
  .footer-top{flex-direction:column;gap:4px}
}