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

:root{
  --paper:#f0f2e9;
  --paper-alt:#e3e7da;
  --dark:#2b1d1e;
  --ink:#1e2119;
  --muted:#6c7264;
  --red:#8c2f2c;
  --ochre:#8a6f1e;
  --pad-v:72px;
  --pad-h:44px;
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.8;
  overflow-x:hidden;
}

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

h1,h2,h3{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  margin:0;
}

h1{
  font-size:clamp(2.3rem,5.2vw,4.1rem);
  line-height:1.06;
  letter-spacing:-0.01em;
}

h1 .linea{display:block}

h2{
  font-size:clamp(1.35rem,2.2vw,1.85rem);
  line-height:1.25;
  margin:0 0 18px;
}

h3{
  font-size:1.04rem;
  line-height:1.4;
  margin:0 0 10px;
}

p{margin:0 0 18px}
p:last-child{margin-bottom:0}

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

a:focus-visible,
.salto:focus{
  outline:3px solid var(--red);
  outline-offset:3px;
}

.oscuro a{color:var(--paper)}
.oscuro a:focus-visible{outline-color:var(--paper)}
.rojo a{color:var(--paper)}
.rojo a:focus-visible{outline-color:var(--paper)}

.salto{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--paper);
  padding:10px 16px;
  z-index:20;
}
.salto:focus{left:0}

/* ---------- Cabecera ---------- */

.cabecera{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:5px;
  background:var(--dark);
  border-bottom:6px solid var(--dark);
}

.marca{
  grid-column:1/5;
  background:var(--paper-alt);
  padding:20px var(--pad-h);
  display:flex;
  align-items:center;
}

.marca a{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.35rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
}
.marca a:hover{color:var(--red)}

.nav-sitio{
  grid-column:5/13;
  background:var(--paper);
  padding:20px var(--pad-h);
  display:flex;
  align-items:center;
}

.nav-sitio ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
}

.nav-sitio a{
  font-size:0.92rem;
  letter-spacing:0.04em;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
.nav-sitio a:hover{border-bottom-color:var(--red);color:var(--red)}
.nav-sitio a[aria-current="page"]{border-bottom-color:var(--ochre)}

/* ---------- Portada: composición del encabezado ---------- */

.portada{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:5px;
  background:var(--dark);
  border-bottom:6px solid var(--dark);
}

.portada__titulo{
  grid-column:1/8;
  grid-row:1/3;
  background:var(--paper);
  padding:var(--pad-v) var(--pad-h);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.portada__titulo .rotulo{margin-bottom:24px}

.portada__entrada{
  grid-column:8/13;
  grid-row:1/2;
  background:var(--red);
  color:var(--paper);
  padding:var(--pad-h);
  font-size:1.02rem;
}

.portada__campo{
  grid-column:8/13;
  grid-row:2/3;
  background:var(--ochre);
  min-height:120px;
}

.portada__indice{
  grid-column:1/13;
  grid-row:3/4;
  background:var(--paper-alt);
  padding:18px var(--pad-h);
}

.portada__indice ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
}

.portada__indice a{
  font-size:0.9rem;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--ochre);
}
.portada__indice a:hover{color:var(--red);border-bottom-color:var(--red)}

.rotulo{
  font-size:12px;
  line-height:1.6;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ochre);
}

.oscuro .rotulo{color:#c9a94a}
.rojo .rotulo{color:#f3d9c6}

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

.seccion{
  padding:var(--pad-v) var(--pad-h);
  border-bottom:6px solid var(--dark);
  background:var(--paper);
}

.seccion--alt{background:var(--paper-alt)}
.seccion--oscuro{background:var(--dark);color:var(--paper)}
.seccion--oscuro h2,.seccion--oscuro h3{color:var(--paper)}

.rejilla{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--pad-h);
  row-gap:36px;
}

.rejilla>*{min-width:0}

.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}

.num{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1rem;
  color:var(--ochre);
  letter-spacing:0.14em;
  display:block;
  margin-bottom:14px;
  border-bottom:1px solid var(--ochre);
  padding-bottom:10px;
}

.seccion--oscuro .num{color:#c9a94a;border-bottom-color:#6e5a20}

.lista{
  list-style:none;
  margin:0;
  padding:0;
}

.lista li{
  position:relative;
  padding-left:22px;
  margin-bottom:12px;
}

.lista li::before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  width:10px;
  height:3px;
  background:var(--red);
}

.seccion--oscuro .lista li::before{background:#c9a94a}

.apunte{
  font-size:0.95rem;
  color:var(--muted);
  border-left:3px solid var(--ochre);
  padding-left:18px;
}

.seccion--oscuro .apunte{color:#c6c9bd}

/* ---------- Imágenes ---------- */

.figura{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--pad-h);
  row-gap:24px;
  margin:0;
  align-items:end;
}

.figura img{
  grid-column:1/8;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border:5px solid var(--dark);
}

.figura figcaption{
  grid-column:9/13;
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
  border-top:1px solid var(--ochre);
  padding-top:12px;
}

.detalle{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--pad-h);
  row-gap:28px;
  margin:0;
}

.detalle__texto{grid-column:1/7}

.detalle__marco{grid-column:8/13}

.detalle__marco img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border:5px solid #4a3231;
}

.detalle__marco figcaption{
  font-size:12px;
  line-height:1.7;
  color:#c6c9bd;
  margin-top:12px;
}

/* ---------- Página About: panel vertical ---------- */

.panel{border-bottom:6px solid var(--dark)}

.panel__campo{
  padding:var(--pad-v) var(--pad-h);
  border-bottom:6px solid var(--dark);
}

.panel__campo:last-child{border-bottom:0}

.panel__campo--claro{background:var(--paper)}
.panel__campo--oscuro{background:var(--dark);color:var(--paper);padding-top:84px;padding-bottom:84px}
.panel__campo--oscuro h2{color:var(--paper)}
.panel__campo--medio{background:var(--paper-alt);padding-top:56px;padding-bottom:56px}

.panel__interior{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--pad-h);
}

.panel__interior>*{grid-column:span 7;min-width:0}

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

.pie{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:5px;
  background:var(--dark);
  border-top:6px solid var(--dark);
}

.pie__celda{padding:36px var(--pad-h)}

.pie__nombre{
  grid-column:1/5;
  background:var(--paper-alt);
}

.pie__nombre .titular{
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.3rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  display:block;
  margin-bottom:12px;
}

.pie__nav{
  grid-column:5/9;
  background:var(--paper);
}

.pie__nav ul{list-style:none;margin:0;padding:0}
.pie__nav li{margin-bottom:8px}
.pie__nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ochre);font-size:0.95rem}
.pie__nav a:hover{color:var(--red);border-bottom-color:var(--red)}

.pie__contacto{
  grid-column:9/13;
  background:var(--dark);
  color:var(--paper);
}

.pie__contacto a{color:var(--paper)}
.pie__contacto p{font-size:0.95rem}
.pie__contacto .rotulo{color:#c9a94a;margin-bottom:10px}

/* ---------- Comportamiento adaptativo ---------- */

@media (max-width:1080px){
  :root{--pad-v:56px;--pad-h:32px}

  .rejilla>*,
  .panel__interior>*{grid-column:1/-1}

  .figura img,
  .figura figcaption,
  .detalle__texto,
  .detalle__marco{grid-column:1/-1}

  .detalle__marco{max-width:460px}

  .portada__titulo{grid-column:1/13;grid-row:auto}
  .portada__entrada{grid-column:1/13;grid-row:auto}
  .portada__campo{grid-column:1/13;grid-row:auto;min-height:70px}
  .portada__indice{grid-column:1/13;grid-row:auto}

  .marca{grid-column:1/13}
  .nav-sitio{grid-column:1/13}

  .pie__nombre,
  .pie__nav,
  .pie__contacto{grid-column:1/13}
}

@media (max-width:640px){
  :root{--pad-v:44px;--pad-h:20px}

  body{font-size:16px;line-height:1.75}

  .portada__titulo{padding:48px 20px}

  .nav-sitio ul{gap:10px 18px}

  .figura img{aspect-ratio:5/4}

  .pie__celda{padding:28px 20px}
}