/* Bestardome — hoja de estilo común */

:root{
  --papel:#f2ebe0;
  --papel-hueso:#e7d9c6;
  --terracota-honda:#4a2c1e;
  --tinta:#241a14;
  --tinta-suave:#6e5b4c;
  --acento:#c05a2b;
  --acento-verde:#6b7a5a;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

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

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

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

.rejilla{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}

.col-texto{grid-column:1 / span 6}
.col-texto-desplazada{grid-column:4 / span 6}
.col-ancha{grid-column:1 / span 8}

section{padding:64px 0}
.banda-hueso{background:var(--papel-hueso)}
.banda-honda{background:var(--terracota-honda);color:var(--papel)}

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

h1,h2,h3{font-family:var(--serif);font-weight:400;text-transform:none;margin:0}

h1{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.14;letter-spacing:-.01em}

h2{font-size:clamp(1.5rem,2.4vw,2.05rem);line-height:1.2;margin-bottom:22px}

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

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

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

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

.banda-honda a{color:#e8a982}
.banda-honda a:focus-visible{outline-color:#e8a982}

.rotulo{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--acento-verde);
  margin:0 0 14px;
}
.banda-honda .rotulo{color:#a9b598}

.secundario{color:var(--tinta-suave)}
.banda-honda .secundario{color:#d8c7b4}

/* separador: línea de 1px con el ancho exacto de 2 columnas */
.filete{
  height:1px;
  border:0;
  background:var(--acento);
  width:calc((100% - 120px) / 6 * 2 + 24px);
  margin:0 0 26px;
}
.filete-verde{background:var(--acento-verde)}

/* ---------- cabecera y navegación ---------- */

.cabecera{padding-top:34px}

.navegacion ul{
  grid-column:1 / span 12;
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 38px;
}
.navegacion a{
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tinta);
  text-decoration:none;
  padding:2px 0;
  display:inline-block;
}
.navegacion a:hover{color:var(--acento)}
.navegacion a[aria-current="page"]{border-bottom:1px solid var(--acento)}

.linea-nav{
  grid-column:1 / span 5;
  height:1px;
  background:var(--acento);
  margin-bottom:56px;
}

/* ---------- portada ---------- */

.portada{padding:0 0 64px}

.titulo-portada{grid-column:1 / span 7}
.titulo-portada .linea-uno{display:block;padding-left:calc((100% - 144px) / 7 * 2 + 48px)}
.titulo-portada .linea-dos{display:block}

.entrada-portada{grid-column:1 / span 6;margin-top:34px}

.indice-portada{grid-column:10 / span 3;align-self:end}
.indice-portada ul{list-style:none;margin:0;padding:0}
.indice-portada li{border-top:1px solid rgba(110,91,76,.4)}
.indice-portada li:last-child{border-bottom:1px solid rgba(110,91,76,.4)}
.indice-portada a{
  display:block;
  padding:9px 0;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--tinta);
  text-decoration:none;
}
.indice-portada a:hover{color:var(--acento)}

/* ---------- imagen principal ---------- */

.bloque-imagen{padding:0 0 64px}

.marco-principal{
  grid-column:8 / span 5;
  padding:8px;
  border:1px solid var(--acento);
}
.marco-principal img{display:block;width:100%;height:auto}

.pie-principal{
  grid-column:1 / span 3;
  align-self:end;
  font-size:13px;
  line-height:1.6;
  color:var(--tinta-suave);
}

/* ---------- sección oscura con imagen de detalle ---------- */

.detalle-figura{grid-column:1 / span 4;margin:0}
.detalle-figura img{display:block;width:100%;height:auto}
.detalle-figura figcaption{
  font-size:13px;
  line-height:1.55;
  color:#d8c7b4;
  margin-top:12px;
}
.detalle-texto{grid-column:6 / span 6}
.banda-honda .filete{background:#e8a982}

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

ul.lista,ol.lista{margin:0 0 20px;padding:0 0 0 22px}
ul.lista{list-style:none;padding-left:20px}
ul.lista li{position:relative;margin-bottom:9px;padding-left:4px}
ul.lista li::before{
  content:"";
  position:absolute;
  left:-20px;
  top:.72em;
  width:9px;
  height:1px;
  background:var(--acento);
}
ol.lista li{margin-bottom:9px;padding-left:4px}
ol.lista li::marker{color:var(--acento-verde);font-size:13px}
.banda-honda ul.lista li::before{background:#e8a982}

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

.bloque-contacto{grid-column:1 / span 6}
.correo{font-family:var(--serif);font-size:1.15rem}

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

.columna-lectura{grid-column:1 / span 6}
.columna-lectura .apartado{margin-top:56px}
.columna-lectura .apartado:first-of-type{margin-top:38px}
.columna-lectura .apartado h2{position:relative;padding-left:38px}
.columna-lectura .apartado h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:24px;
  height:1px;
  background:var(--acento);
}

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

.pie{padding:64px 0 72px;background:var(--papel-hueso)}
.linea-pie{grid-column:1 / span 5;height:1px;background:var(--acento);margin-bottom:34px}

.pie-nombre{grid-column:1 / span 5}
.pie-nav{grid-column:6 / span 3}
.pie-contacto{grid-column:9 / span 4}

.pie h2{font-size:1.35rem;margin-bottom:10px}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:8px}
.pie a{color:var(--tinta);text-decoration:none;font-size:14px}
.pie a:hover{color:var(--acento);text-decoration:underline}
.pie .correo a{color:var(--acento);text-decoration:underline;font-size:1rem}
.pie p{font-size:14px;line-height:1.65;color:var(--tinta-suave)}

/* ---------- adaptación a pantallas medianas ---------- */

@media (max-width:1000px){
  .titulo-portada{grid-column:1 / span 8}
  .entrada-portada{grid-column:1 / span 8}
  .indice-portada{grid-column:9 / span 4}
  .marco-principal{grid-column:6 / span 7}
  .pie-nombre{grid-column:1 / span 6}
  .pie-nav{grid-column:7 / span 3}
  .pie-contacto{grid-column:10 / span 3}
  .col-texto,.col-texto-desplazada,.col-ancha,
  .detalle-texto,.bloque-contacto,.columna-lectura{grid-column:1 / span 9}
  .detalle-figura{grid-column:1 / span 5}
  .filete{width:calc((100% - 192px) / 9 * 2 + 24px)}
}

@media (max-width:760px){
  body{font-size:16.5px}
  .rejilla{padding:0 20px;column-gap:16px}
  section{padding:40px 0}
  .cabecera{padding-top:24px}
  .navegacion ul{gap:6px 22px}
  .linea-nav{grid-column:1 / span 12;margin-bottom:36px}
  .portada{padding-bottom:40px}
  .titulo-portada,.entrada-portada,.indice-portada,
  .col-texto,.col-texto-desplazada,.col-ancha,
  .marco-principal,.pie-principal,
  .detalle-figura,.detalle-texto,
  .bloque-contacto,.columna-lectura,
  .pie-nombre,.pie-nav,.pie-contacto,
  .linea-pie{grid-column:1 / span 12}
  .titulo-portada .linea-uno{padding-left:0}
  .indice-portada{margin-top:34px}
  .marco-principal{margin-bottom:16px}
  .bloque-imagen{padding-bottom:40px}
  .detalle-figura{margin-bottom:28px}
  .filete{width:58%;margin-bottom:22px}
  .columna-lectura .apartado{margin-top:40px}
  .pie{padding:40px 0 48px}
  .pie-nav,.pie-contacto{margin-top:28px}
  .linea-pie{margin-bottom:26px}
}