/* Flentendo — hoja de estilos general
   Dirección visual: "woven-grid" (lino, rubia y oliva) */

:root{
  --bg:#efeae1;
  --bg-alt:#e3dbce;
  --bg-dark:#2c3a5c;
  --tx:#2b2822;
  --tx2:#6f6759;
  --tx-inv:#efeae1;
  --a1:#a83b2c;
  --a2:#6e7a47;
  --line:#c6bcab;
  --line-dark:#5b6683;
  --sec-bg:var(--bg);
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

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

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

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

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

a{color:var(--a1);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(--a1);outline-offset:3px;}

.container{width:100%;max-width:1180px;margin:0 auto;padding:0 24px;}

/* ---------- tipografía ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;}
h1{
  font-size:clamp(2.3rem,6.2vw,4.15rem);
  line-height:1.04;
  letter-spacing:-.015em;
}
h2{
  font-size:clamp(1.35rem,2.5vw,1.85rem);
  line-height:1.25;
  margin-bottom:.6em;
}
h3{font-size:1.06rem;line-height:1.4;margin-bottom:.4em;}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}
.lead{font-size:1.06rem;}
.cap,figcaption{
  font-size:12px;
  line-height:1.65;
  color:var(--tx2);
  letter-spacing:.02em;
}
.tag{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--a2);
  margin:0 0 14px;
  display:block;
}

/* ---------- retícula ---------- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0;}
.cells{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.cells > *{background:var(--sec-bg);padding:26px 24px;}
.c3{grid-column:span 3;}
.c4{grid-column:span 4;}
.c5{grid-column:span 5;}
.c6{grid-column:span 6;}
.c7{grid-column:span 7;}
.c8{grid-column:span 8;}
.c9{grid-column:span 9;}
.c12{grid-column:span 12;}
.pause{background:var(--sec-bg);}

/* ---------- separadores de hilo ---------- */
.thread{
  border:0;
  height:2px;
  background:var(--a1);
  margin:0 0 9px;
  position:relative;
  overflow:visible;
}
.thread::after{
  content:"";
  position:absolute;
  left:0;right:0;top:8px;
  height:1px;
  background:var(--a2);
}

/* ---------- cabecera ---------- */
.site-head{padding:22px 0 16px;}
.head-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 28px;
}
.brand{
  font-family:var(--serif);
  font-size:1.32rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tx);
  text-decoration:none;
}
.brand:hover{color:var(--a1);}
.site-head nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  margin:0;padding:0;
}
.site-head nav a{
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tx2);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.site-head nav a:hover{color:var(--a1);border-bottom-color:var(--a1);}
.site-head nav a[aria-current="page"]{color:var(--tx);border-bottom-color:var(--a2);}

/* ---------- héroe ---------- */
.hero{padding:26px 0 0;}
.hero .rule{height:1px;background:var(--tx);}
.hero .rule.thin{background:var(--line);}
.hero h1{grid-column:span 9;padding:34px 0 40px;}
.hero-cells{margin-top:34px;}
.hero-cells .intro{grid-column:span 5;}
.hero-cells .topics{grid-column:span 4;}
.hero-cells .pause{grid-column:span 3;}
.topics ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.75;}
.topics li{padding-left:18px;position:relative;color:var(--tx2);}
.topics li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:7px;height:7px;background:var(--a2);
}

/* ---------- secciones ---------- */
.sec{padding:72px 0;}
.sec.alt{background:var(--bg-alt);--sec-bg:var(--bg-alt);}
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);gap:0;}
.sec-head .num{grid-column:span 3;}
.sec-head .ttl{grid-column:span 9;}
.num{
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.2em;
  color:var(--a2);
  padding-top:.55em;
}
.body-8{grid-column:4 / span 8;}
.body-9{grid-column:4 / span 9;}
.two-col{display:grid;grid-template-columns:repeat(12,1fr);gap:0 40px;}
.two-col .a{grid-column:1 / span 6;}
.two-col .b{grid-column:7 / span 6;}

/* imagen principal */
.plate{align-items:stretch;}
.plate .shot{grid-column:span 6;padding:14px;}
.plate .note{grid-column:span 4;display:flex;flex-direction:column;justify-content:flex-end;}
.plate .pause{grid-column:span 2;}
.plate img{width:100%;}

/* listas y comprobaciones */
.check{list-style:none;margin:0;padding:0;}
.check li{position:relative;padding-left:22px;margin-bottom:.55em;}
.check li::before{
  content:"";position:absolute;left:0;top:.68em;
  width:8px;height:8px;background:var(--a1);
}
.check li:last-child{margin-bottom:0;}
.check-grid{margin-top:26px;}
.check-grid > li{grid-column:span 6;list-style:none;}
ul.check-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  margin:26px 0 0;padding:0;
}
ul.check-grid > li{background:var(--sec-bg);padding:20px 22px;position:relative;}
ul.check-grid > li b{font-weight:600;}
ul.check-grid > li::before{
  content:"";position:absolute;left:22px;top:26px;
  width:8px;height:8px;background:var(--a1);
}
ul.check-grid > li .txt{display:block;padding-left:20px;font-size:15px;line-height:1.7;}

/* tabla de definiciones */
.defs{margin:26px 0 0;}
.defs > div{grid-column:span 4;}
.defs h3{margin-bottom:.3em;}
.defs p{font-size:15px;line-height:1.7;color:var(--tx2);}

/* ---------- sección contrastada ---------- */
.dark{
  background:var(--bg-dark);
  color:var(--tx-inv);
  --sec-bg:var(--bg-dark);
  --line:var(--line-dark);
}
.dark h2,.dark h3{color:var(--tx-inv);}
.dark .num{color:#a9b57e;}
.dark .cap,.dark figcaption{color:#b9c1d6;}
.dark a{color:#e2a99c;}
.dark .check li::before{background:#d9705f;}
.dark .thread{background:#d9705f;}
.dark .thread::after{background:#a9b57e;}
.dark-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 44px;align-items:start;margin-top:34px;}
.dark-grid figure{grid-column:1 / span 5;margin:0;border:1px solid var(--line-dark);padding:12px;}
.dark-grid figure img{width:100%;}
.dark-grid figcaption{padding-top:12px;}
.dark-grid .txt{grid-column:7 / span 6;}

/* ---------- página about ---------- */
.about-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0;margin-top:34px;}
.about-grid .side{
  grid-column:1 / span 3;
  border-right:1px solid var(--line);
  padding-right:28px;
}
.about-grid .main-col{grid-column:5 / span 8;}
.side ul{list-style:none;margin:0;padding:0;}
.side li{position:relative;padding-left:20px;margin-bottom:1em;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx2);line-height:1.5;}
.side li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--a2);}
.main-col h2{margin-top:1.6em;}
.main-col h2:first-child{margin-top:0;}

/* ---------- páginas de texto ---------- */
.doc{padding:56px 0 72px;}
.doc h2{margin-top:1.9em;}
.doc h3{margin-top:1.5em;}
.doc .body-8 > h2:first-child{margin-top:0;}

/* ---------- pie ---------- */
.site-foot{padding:0 0 56px;}
.foot-cells{margin-top:0;}
.foot-cells > *{grid-column:span 3;}
.foot-cells h2{font-size:1.1rem;margin-bottom:.5em;}
.foot-cells ul{list-style:none;margin:0;padding:0;font-size:14px;}
.foot-cells li{margin-bottom:.35em;}
.foot-cells p{font-size:13px;line-height:1.7;color:var(--tx2);}
.foot-note{font-size:12px;color:var(--tx2);padding-top:18px;}

/* ---------- adaptación ---------- */
@media (max-width:900px){
  .sec{padding:44px 0;}
  .doc{padding:36px 0 44px;}
  .hero h1{grid-column:span 12;padding:26px 0 30px;}
  .hero-cells .intro,.hero-cells .topics{grid-column:span 12;}
  .hero-cells .pause{display:none;}
  .sec-head .num,.sec-head .ttl{grid-column:span 12;}
  .num{padding-top:0;margin-bottom:8px;}
  .body-8,.body-9{grid-column:1 / span 12;}
  .two-col .a,.two-col .b{grid-column:span 12;}
  .two-col .b{margin-top:1.15em;}
  .plate .shot,.plate .note{grid-column:span 12;}
  .plate .pause{display:none;}
  .plate .note{justify-content:flex-start;}
  ul.check-grid > li{grid-column:span 12;}
  .defs > div{grid-column:span 12;}
  .dark-grid figure{grid-column:1 / span 12;}
  .dark-grid .txt{grid-column:1 / span 12;margin-top:28px;}
  .about-grid .side{grid-column:1 / span 12;border-right:0;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:20px;margin-bottom:26px;}
  .about-grid .main-col{grid-column:1 / span 12;}
  .side ul{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
  .foot-cells > *{grid-column:span 12;}
}

@media (max-width:520px){
  .container{padding:0 18px;}
  body{font-size:16px;}
  .cells > *{padding:20px 18px;}
  .side ul{grid-template-columns:1fr;}
}