/* Casa de las Dos Torres · Plasencia
   Paleta heráldica: oro y sable (Carvajal), gules (Monroy), azur, sobre cal y granito. */
@font-face{font-family:"Ibarra Real Nova";src:url("../fonts/ibarra-real-nova.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Ibarra Real Nova";src:url("../fonts/ibarra-real-nova-italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --cal:#f2f1ed; --papel:#fbfaf7; --sable:#1d1b18; --piedra:#625d55; --granito:#d6d2c9;
  --pizarra:#23262b; --oro:#946e1c; --oro-claro:#d9b45a; --gules:#7d2222; --azur:#2f4a5e;
  --serif:"Ibarra Real Nova",Georgia,"Times New Roman",serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ancho:72rem; --medida:41rem;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:112.5%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1.5rem}
body{margin:0;background:var(--cal);color:var(--sable);font-family:var(--serif);font-size:1.12rem;line-height:1.62;font-feature-settings:"onum","liga";text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--oro);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{color:var(--oro)}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px;border-radius:2px}
.salto{position:absolute;left:-999px;top:0;background:var(--sable);color:#fff;padding:.6rem 1rem;font-family:var(--sans);font-size:.85rem;z-index:50}
.salto:focus{left:1rem;top:1rem}

h1,h2,h3,h4{font-weight:600;line-height:1.12;margin:0 0 .6em;text-wrap:balance}
h1{font-size:clamp(2.5rem,6.2vw,4.7rem);font-weight:500;letter-spacing:-.012em;line-height:1.02}
h2{font-size:clamp(1.75rem,3.2vw,2.35rem);margin-top:2.2em}
h3{font-size:1.38rem;margin-top:1.9em}
h4{font-size:1.12rem;font-family:var(--sans);font-weight:600;margin-top:1.6em}
p{margin:0 0 1.1em}
.entrada{font-size:1.32rem;line-height:1.5;color:#33302b}
small,.nota{font-family:var(--sans);font-size:.78rem;line-height:1.5;color:var(--piedra)}
hr{border:0;border-top:1px solid var(--granito);margin:3rem 0}

.contenedor{max-width:var(--ancho);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}
.medida{max-width:var(--medida)}

/* Cabecera */
.cabecera{border-bottom:1px solid var(--granito);background:var(--cal)}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.9rem}
.marca img{height:3.1rem;width:auto}
.nav ul{display:flex;gap:1.35rem;list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:.82rem;font-weight:500}
.nav a{text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--sable);border-color:var(--granito)}
.nav a[aria-current="page"]{border-color:var(--oro)}
.boton-menu{display:none;font-family:var(--sans);font-size:.82rem;font-weight:600;background:none;border:1px solid var(--sable);padding:.5rem .9rem;border-radius:2px;color:var(--sable);cursor:pointer}
@media (max-width:62rem){
  .boton-menu{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--papel);border-bottom:1px solid var(--granito);z-index:30}
  .nav.abierta{display:block}
  .nav ul{flex-direction:column;gap:0;padding:.5rem clamp(1.1rem,4vw,2.5rem) 1rem}
  .nav a{display:block;padding:.75rem 0;font-size:.95rem;border-bottom:1px solid var(--granito)}
  .cabecera{position:relative}
}

/* Migas */
.migas{font-family:var(--sans);font-size:.76rem;color:var(--piedra);padding-top:1.4rem}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.migas li+li::before{content:"/";margin-right:.4rem;color:var(--granito)}
.migas a{text-decoration:none}.migas a:hover{text-decoration:underline}

/* Portada */
.portada{padding-block:clamp(2.2rem,6vw,4.5rem) 0}
.portada-rejilla{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:end}
.portada h1{margin-bottom:.35em}
.portada .entrada{max-width:33rem}
.acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.boton{display:inline-block;font-family:var(--sans);font-size:.86rem;font-weight:600;text-decoration:none;padding:.85rem 1.35rem;border-radius:2px;border:1px solid var(--sable);background:var(--sable);color:var(--papel);cursor:pointer}
.boton:hover{background:var(--oro);border-color:var(--oro);color:#fff}
.boton.linea{background:transparent;color:var(--sable)}
.boton.linea:hover{background:var(--sable);color:var(--papel);border-color:var(--sable)}
@media (max-width:52rem){.portada-rejilla{grid-template-columns:1fr}}

/* Alzado */
.alzado{margin:clamp(2rem,5vw,3.5rem) 0 0}
.alzado-marco{overflow-x:auto;border-block:1px solid var(--granito);background:var(--papel)}
.alzado svg{min-width:50rem;width:100%}
.alzado .piedra{fill:#e6e2d8;stroke:var(--sable);stroke-width:1.6}
.alzado .hueco{fill:var(--pizarra)}
.alzado .trazo{fill:none;stroke:var(--sable);stroke-width:1.3}
.alzado .fantasma{fill:none;stroke:var(--oro);stroke-width:2;stroke-dasharray:7 5}
.alzado .num circle{fill:var(--sable)} .alzado .num text{fill:#fff;font-family:var(--sans);font-size:15px;font-weight:600;text-anchor:middle}
.alzado .num.oro circle{fill:var(--oro)}
.alzado .guia{stroke:var(--sable);stroke-width:1}
@media (prefers-reduced-motion:no-preference){
  .alzado .fantasma{stroke-dashoffset:600;animation:trazar 2.4s .5s ease-out forwards;opacity:0}
  @keyframes trazar{to{stroke-dashoffset:0;opacity:1}}
}
.leyenda{list-style:none;counter-reset:l;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.5rem 2rem;margin:1.2rem 0 0;padding:0;font-family:var(--sans);font-size:.82rem;line-height:1.45}
.leyenda li{counter-increment:l;display:grid;grid-template-columns:1.6rem 1fr;gap:.5rem}
.leyenda li::before{content:counter(l);width:1.45rem;height:1.45rem;border-radius:50%;background:var(--sable);color:#fff;font-size:.72rem;font-weight:600;display:grid;place-items:center}
.leyenda li.oro::before{background:var(--oro)}

/* Secciones */
.seccion{padding-block:clamp(2.8rem,7vw,5rem)}
.seccion>.contenedor>h2:first-child,.seccion h2.primero{margin-top:0}
.oscura{background:var(--pizarra);color:#ece9e2}
.oscura a{text-decoration-color:var(--oro-claro)} .oscura a:hover{color:var(--oro-claro)}
.oscura .nota,.oscura small,.oscura figcaption{color:#b9b5ab}
.papel{background:var(--papel);border-block:1px solid var(--granito)}

/* Épocas: el color identifica al linaje propietario */
[data-epoca]{--epoca:var(--piedra)}
[data-epoca="monroy"]{--epoca:var(--gules)} [data-epoca="carvajal"]{--epoca:var(--oro)}
[data-epoca="declive"]{--epoca:var(--piedra)} [data-epoca="ocana"]{--epoca:var(--azur)}
.epoca-fecha{display:flex;align-items:center;gap:.55rem;font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--epoca);margin:0 0 .5rem}
.epoca-fecha::before{content:"";width:.7rem;height:.7rem;background:var(--epoca);flex:none}
.epocas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--granito);margin-top:2rem}
.epocas article{padding:1.4rem 1.4rem 1.4rem 0;border-top:4px solid var(--epoca);margin-top:-1px}
.epocas article+article{padding-left:1.4rem;border-left:1px solid var(--granito)}
.epocas h3{margin-top:0;font-size:1.3rem}
.epocas p{font-size:1rem;line-height:1.55}
@media (max-width:60rem){.epocas{grid-template-columns:1fr 1fr}.epocas article:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:36rem){.epocas{grid-template-columns:1fr}.epocas article+article{padding-left:0;border-left:0}}

/* Figuras */
figure{margin:0}
figure img{background:#e3dfd6}
figcaption{font-family:var(--sans);font-size:.76rem;line-height:1.45;color:var(--piedra);padding-top:.55rem}
figcaption .credito{display:block;opacity:.85}
.prosa figure{margin:2.2rem 0}
.prosa figure.ancha{margin-inline:0;max-width:none}
.par{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:2.2rem 0}
.par figure{margin:0}
@media (max-width:36rem){.par{grid-template-columns:1fr}}

/* Artículo con índice lateral */
.articulo{display:grid;grid-template-columns:14rem minmax(0,var(--medida));gap:clamp(2rem,5vw,4.5rem);padding-block:2rem 4rem}
.indice{font-family:var(--sans);font-size:.8rem;line-height:1.4}
.indice nav{position:sticky;top:1.5rem}
.indice p{font-weight:600;margin-bottom:.6rem}
.indice ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--granito)}
.indice a{display:block;padding:.38rem 0 .38rem .9rem;text-decoration:none;color:var(--piedra);border-left:2px solid transparent;margin-left:-1px}
.indice a:hover{color:var(--sable);border-color:var(--oro)}
@media (max-width:58rem){.articulo{grid-template-columns:1fr}.indice nav{position:static}.indice ol{columns:2}}
.cabecera-pagina{padding-block:1.6rem 0}
.cabecera-pagina h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.prosa h2{padding-top:.2em}
.prosa blockquote{margin:2rem 0;padding:0 0 0 1.4rem;border-left:3px solid var(--epoca,var(--oro));font-style:italic;font-size:1.12rem;line-height:1.55}
.prosa blockquote footer{font-family:var(--sans);font-style:normal;font-size:.76rem;color:var(--piedra);margin-top:.7rem}
.prosa ul,.prosa ol{padding-left:1.2rem;margin:0 0 1.2em}
.prosa li{margin-bottom:.4em}
.aviso{font-family:var(--sans);font-size:.84rem;line-height:1.55;background:var(--papel);border:1px solid var(--granito);border-left:4px solid var(--oro);padding:1rem 1.2rem;margin:2rem 0}
.aviso strong{font-weight:600}

/* Cronología */
.crono{width:100%;border-collapse:collapse;font-size:1rem;margin:1.5rem 0 2.5rem}
.crono th,.crono td{text-align:left;vertical-align:top;padding:.7rem .8rem .7rem 0;border-bottom:1px solid var(--granito)}
.crono th{font-family:var(--sans);font-size:.85rem;font-weight:600;white-space:nowrap;width:6.5rem;color:var(--epoca)}
.crono th::before{content:"";display:inline-block;width:.55rem;height:.55rem;background:var(--epoca);margin-right:.5rem}

/* Personajes */
.retratos{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:2rem 1.4rem;margin-top:2rem;list-style:none;padding:0}
.retratos a{text-decoration:none;display:block}
.retratos h3{font-size:1.28rem;margin:.8rem 0 .15rem}
.retratos a:hover h3{color:var(--oro)} .oscura .retratos a:hover h3{color:var(--oro-claro)}
.retratos p{font-family:var(--sans);font-size:.8rem;line-height:1.45;color:var(--piedra);margin:0}
.oscura .retratos p{color:#b9b5ab}
.retrato{position:relative;aspect-ratio:4/5;overflow:hidden;background:#2c3036}
.retrato>svg{position:absolute;inset:0;width:100%;height:100%}
.retrato>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.ficha{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,var(--medida));gap:clamp(2rem,5vw,4rem);padding-block:2rem 4rem;align-items:start}
.ficha aside{position:sticky;top:1.5rem}
.ficha dl{font-family:var(--sans);font-size:.82rem;line-height:1.45;margin:1.2rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem}
.ficha dt{color:var(--piedra)} .ficha dd{margin:0}
@media (max-width:52rem){.ficha{grid-template-columns:1fr}.ficha aside{position:static;max-width:20rem}}
.otros{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;list-style:none;padding:0;font-family:var(--sans);font-size:.86rem}

/* Galería */
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 2rem}
.filtros button{font-family:var(--sans);font-size:.82rem;font-weight:500;padding:.5rem 1rem;border:1px solid var(--sable);background:transparent;color:var(--sable);border-radius:2px;cursor:pointer}
.filtros button[aria-pressed="true"]{background:var(--sable);color:var(--papel)}
.galeria{columns:3 17rem;column-gap:1.2rem}
.galeria figure{break-inside:avoid;margin:0 0 1.6rem}
.galeria button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.galeria [hidden]{display:none}
dialog.visor{border:0;padding:0;background:transparent;max-width:min(94vw,80rem);max-height:94vh;color:#fff}
dialog.visor::backdrop{background:rgba(20,21,24,.93)}
dialog.visor img{max-height:80vh;width:auto;margin-inline:auto}
dialog.visor figcaption{color:#d5d1c8;text-align:center;max-width:46rem;margin-inline:auto}
dialog.visor .cerrar{position:fixed;top:1rem;right:1rem;font-family:var(--sans);font-size:.85rem;font-weight:600;background:#fff;color:var(--sable);border:0;padding:.6rem 1rem;border-radius:2px;cursor:pointer}

/* Tres detalles */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
.trio img{aspect-ratio:4/3;object-fit:cover;width:100%}
@media (max-width:46rem){.trio{grid-template-columns:1fr}}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
@media (max-width:52rem){.dos-col{grid-template-columns:1fr}}

/* Heráldica */
.blasones{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:2rem;margin:2rem 0}
.blasones svg{width:7.5rem;margin-bottom:.8rem}
.blasones h3{margin:0 0 .3rem;font-size:1.2rem}
.blasones p{font-size:.98rem;line-height:1.5;margin:0}

/* Glosario y preguntas */
.glosario{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:.2rem 2.5rem;margin:1.5rem 0}
.glosario dt{font-weight:600;margin-top:1rem}.glosario dd{margin:0;font-size:1rem;line-height:1.5}
details{border-bottom:1px solid var(--granito);padding:1rem 0}
details summary{cursor:pointer;font-weight:600;font-size:1.18rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:var(--sans);font-weight:400;color:var(--oro)}
details[open] summary::after{content:"–"}
details p{margin:.8rem 0 0;max-width:var(--medida)}

/* Mapa y contacto */
.mapa{border:1px solid var(--granito);background:var(--papel)}
.mapa iframe{display:block;width:100%;height:min(70vh,30rem);border:0}
.datos{font-family:var(--sans);font-size:.9rem;line-height:1.6}
.datos dt{font-weight:600;margin-top:1rem}.datos dd{margin:0}
form.contacto{display:grid;gap:1.2rem;max-width:36rem}
.campo label{display:block;font-family:var(--sans);font-size:.84rem;font-weight:600;margin-bottom:.35rem}
.campo input,.campo select,.campo textarea{width:100%;font:inherit;font-family:var(--sans);font-size:.95rem;padding:.75rem .85rem;border:1px solid #8e897f;border-radius:2px;background:#fff;color:var(--sable)}
.campo textarea{min-height:10rem;resize:vertical}
.campo .ayuda{font-family:var(--sans);font-size:.76rem;color:var(--piedra);margin-top:.3rem}
.acepto{display:grid;grid-template-columns:auto 1fr;gap:.7rem;font-family:var(--sans);font-size:.84rem;line-height:1.5;align-items:start}
.acepto input{margin-top:.25rem;width:1.1rem;height:1.1rem}
.trampa{position:absolute;left:-9999px}
.error-campo{font-family:var(--sans);font-size:.78rem;color:var(--gules);margin-top:.3rem}

/* Pie */
.pie{background:var(--pizarra);color:#d9d5cc;padding-block:3.5rem 2rem;font-family:var(--sans);font-size:.84rem;line-height:1.6}
.pie-rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.pie img{height:3.4rem;width:auto;margin-bottom:1.2rem}
.pie h2{font-family:var(--sans);font-size:.84rem;font-weight:600;color:#fff;margin:0 0 .8rem}
.pie ul{list-style:none;margin:0;padding:0}.pie li{margin-bottom:.35rem}
.pie a{text-decoration:none}.pie a:hover{color:var(--oro-claro);text-decoration:underline}
.pie .legal{border-top:1px solid #3a3e45;margin-top:2.5rem;padding-top:1.3rem;color:#a5a196;font-size:.76rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}
@media (max-width:46rem){.pie-rejilla{grid-template-columns:1fr}}
@media print{.cabecera .nav,.boton-menu,.pie,.filtros,.indice{display:none}body{background:#fff}}

.retratos.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:52rem){.retratos.tres{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.retratos:not(.tres){grid-template-columns:repeat(4,minmax(0,1fr))}}
.par.igual img{aspect-ratio:4/5;object-fit:cover;width:100%}
