/*
Theme Name: Organiza tu Boda
Theme URI: https://organizatuboda.blog/
Author: José Nogales Martínez
Description: Tema editorial propio de Organiza tu Boda. Una sola hoja de estilo, una sola fuente autoalojada, cero JavaScript de terceros, cero constructor.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: organizatuboda
*/

/* ============================================================ tokens
   Única fuente de color y tipografía. Todo lo demás va por variable. */
:root {
  --papel: #faf6ef;
  --papel-2: #f2ebde;
  --papel-3: #e9dfcd;
  --tinta: #24211d;
  --tinta-2: #4a443c;
  --apagado: #7d7468;
  --linea: #e0d6c4;
  --linea-2: #cbbfa8;
  --teja: #a9532e;
  --teja-oscura: #7f3c20;
  --salvia: #6e7d63;
  --salvia-clara: #e6ebe0;
  --oro: #b9975b;
  --blanco: #fffdf9;

  --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-texto: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Times New Roman", serif;
  --f-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ancho: 1180px;
  --lectura: 42rem;   /* ~72 caracteres a 17,5 px */
  --radio: 3px;
  --sombra: 0 1px 0 rgba(36, 33, 29, .06), 0 14px 30px -18px rgba(36, 33, 29, .25);

  --t-0: clamp(.78rem, .74rem + .2vw, .86rem);
  --t-1: clamp(.94rem, .9rem + .2vw, 1rem);
  --t-2: clamp(1.06rem, 1rem + .3vw, 1.125rem);
  --t-3: clamp(1.3rem, 1.15rem + .7vw, 1.6rem);
  --t-4: clamp(1.7rem, 1.4rem + 1.4vw, 2.35rem);
  --t-5: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/fraunces-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  /* grano de papel: un degradado radial repetido, sin imagen, sin petición */
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 20% 10%, rgba(185, 151, 91, .07), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(110, 125, 99, .07), transparent 45%);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teja); text-decoration-color: rgba(169, 83, 46, .35); text-underline-offset: .14em; text-decoration-thickness: 1px; }
a:hover { color: var(--teja-oscura); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--teja); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 500; line-height: 1.12; letter-spacing: -.012em; margin: 0; color: var(--tinta); font-variation-settings: "opsz" 72, "SOFT" 30; }
h1 { font-size: var(--t-5); font-weight: 450; }
h2 { font-size: var(--t-4); }
h3 { font-size: var(--t-3); }
p, ul, ol, table, figure, blockquote { margin: 0 0 1.25em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: .35em; }
strong { font-weight: 700; color: var(--tinta); }
hr { border: 0; border-top: 1px solid var(--linea); margin: 2.5rem 0; }
small { font-size: var(--t-0); }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: .5rem; background: var(--tinta); color: var(--papel); padding: .5rem .9rem; z-index: 100; }
.saltar:focus { left: .5rem; }

.envoltura { width: min(var(--ancho), 100% - 2.5rem); margin-inline: auto; }
.etiqueta {
  font-family: var(--f-ui); font-size: var(--t-0); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--salvia); text-decoration: none;
}
.etiqueta:hover { color: var(--teja); }
.meta { font-family: var(--f-ui); font-size: var(--t-0); color: var(--apagado); letter-spacing: .01em; }
.meta a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linea-2); }
.meta a:hover { color: var(--teja); border-color: var(--teja); }
.meta .sep { margin: 0 .5em; color: var(--linea-2); }

/* ============================================================ cabecera */
.cabecera { border-bottom: 1px solid var(--linea); background: var(--papel); position: relative; }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.6rem; }
.marca { display: inline-flex; align-items: baseline; gap: .45rem; text-decoration: none; color: var(--tinta); }
.marca .isotipo { width: 30px; height: 30px; align-self: center; flex: none; }
.marca .nombre { font-family: var(--f-display); font-size: clamp(1.15rem, 1rem + 1.4vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; font-variation-settings: "opsz" 36, "SOFT" 60; }
.marca .nombre em { font-style: italic; font-weight: 400; color: var(--teja); }
.marca .lema { display: none; }
.nav-principal ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.6rem; align-items: center; }
.nav-principal li { margin: 0; position: relative; }
.nav-principal a { font-family: var(--f-ui); font-size: var(--t-1); color: var(--tinta-2); text-decoration: none; padding: .4rem 0; display: inline-block; border-bottom: 2px solid transparent; }
.nav-principal a:hover, .nav-principal .current-menu-item > a, .nav-principal .current-menu-parent > a { color: var(--tinta); border-color: var(--teja); }
.nav-principal .sub-menu { display: none; position: absolute; top: 100%; left: -1rem; min-width: 15rem; background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); padding: .6rem 0; z-index: 20; flex-direction: column; gap: 0; }
.nav-principal li:hover > .sub-menu, .nav-principal li:focus-within > .sub-menu { display: flex; }
.nav-principal .sub-menu a { display: block; padding: .45rem 1rem; border: 0; }
.nav-principal .sub-menu a:hover { background: var(--papel-2); }
.nav-principal .menu-item-has-children > a::after { content: ""; display: inline-block; width: .38em; height: .38em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.2em) rotate(45deg); margin-left: .45em; opacity: .7; }
.nav-movil { display: none; }
.buscar-cab { position: relative; }
.buscar-cab summary { list-style: none; cursor: pointer; font-family: var(--f-ui); font-size: var(--t-1); color: var(--tinta-2); display: inline-flex; align-items: center; gap: .4rem; padding: .4rem 0; }
.buscar-cab summary::-webkit-details-marker { display: none; }
.buscar-cab summary svg { width: 18px; height: 18px; }
.buscar-cab[open] summary { color: var(--teja); }
.buscar-cab .formulario-busqueda { position: absolute; right: 0; top: calc(100% + .6rem); width: min(24rem, 90vw); background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); padding: .8rem; z-index: 30; }

.formulario-busqueda { display: flex; gap: .5rem; }
.formulario-busqueda input[type="search"] {
  flex: 1; font: inherit; font-size: var(--t-1); padding: .65rem .9rem; border: 1px solid var(--linea-2); border-radius: var(--radio); background: var(--blanco); color: var(--tinta); min-width: 0;
}
.formulario-busqueda input:focus { border-color: var(--teja); outline: none; box-shadow: 0 0 0 3px rgba(169, 83, 46, .15); }
.formulario-busqueda button { font-family: var(--f-ui); font-size: var(--t-1); font-weight: 600; padding: .65rem 1rem; border: 1px solid var(--tinta); background: var(--tinta); color: var(--papel); border-radius: var(--radio); cursor: pointer; }
.formulario-busqueda button:hover { background: var(--teja); border-color: var(--teja); }

@media (max-width: 860px) {
  .nav-principal { display: none; }
  .nav-movil { display: block; }
  .nav-movil summary { list-style: none; cursor: pointer; font-family: var(--f-ui); font-size: var(--t-1); color: var(--tinta-2); padding: .4rem 0; display: inline-flex; gap: .5rem; align-items: center; }
  .nav-movil summary::-webkit-details-marker { display: none; }
  .nav-movil summary svg { width: 20px; height: 20px; }
  .nav-movil ul { list-style: none; margin: 0; padding: .4rem 0 1rem; }
  .nav-movil .sub-menu { padding-left: 1rem; }
  .nav-movil li { margin: 0; }
  .nav-movil a { display: block; padding: .55rem 0; font-family: var(--f-ui); font-size: 1.05rem; color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--linea); }
  .nav-movil .sub-menu a { color: var(--tinta-2); font-size: 1rem; }
  .nav-movil .formulario-busqueda { margin: .6rem 0 .4rem; }
}

/* ============================================================ portada */
.portada-intro { padding: 3.2rem 0 2.2rem; border-bottom: 1px solid var(--linea); }
.portada-intro .claim { font-family: var(--f-display); font-size: var(--t-4); font-weight: 400; line-height: 1.2; max-width: 30ch; letter-spacing: -.015em; font-variation-settings: "opsz" 72, "SOFT" 40; }
.portada-intro .claim em { font-style: italic; color: var(--teja); }
.portada-intro .subclaim { max-width: 56ch; color: var(--tinta-2); margin-top: 1rem; font-size: var(--t-2); }
.portada-intro .formulario-busqueda { max-width: 32rem; margin-top: 1.5rem; }

.seccion { padding: 3rem 0 1rem; }
.seccion-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 3px double var(--linea-2); padding-top: 1rem; margin-bottom: 1.6rem; }
.seccion-cab h2 { font-size: var(--t-3); }
.seccion-cab .todo { font-family: var(--f-ui); font-size: var(--t-0); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.seccion-cab p { margin: .3rem 0 0; color: var(--apagado); font-size: var(--t-1); max-width: 60ch; }

.empieza { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0 2.5rem; }
.empieza li { counter-increment: paso; margin: 0; display: grid; grid-template-columns: 3.4rem 1fr; gap: .6rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--linea); align-items: start; }
.empieza li::before { content: counter(paso, decimal-leading-zero); font-family: var(--f-display); font-size: 2.3rem; font-weight: 300; line-height: 1; color: var(--oro); grid-row: 1 / span 3; padding-top: .1rem; font-variation-settings: "opsz" 144, "SOFT" 0; font-variant-numeric: lining-nums; }
.empieza .etiqueta { grid-column: 2; }
.empieza h3 { grid-column: 2; font-size: var(--t-2); font-weight: 600; line-height: 1.28; }
.empieza h3 a { color: var(--tinta); text-decoration: none; }
.empieza h3 a:hover { color: var(--teja); }
.empieza .resumen { grid-column: 2; margin: 0; color: var(--tinta-2); font-size: var(--t-1); line-height: 1.5; }
.empieza .meta { grid-column: 2; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 2rem 1.75rem; }

.tarjeta { display: flex; flex-direction: column; gap: .55rem; }
.tarjeta .foto { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radio); background: var(--papel-3); border: 1px solid var(--linea); }
.tarjeta .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tarjeta:hover .foto img { transform: scale(1.025); }
.tarjeta .foto-vacia { display: grid; place-items: center; color: var(--oro); font-family: var(--f-display); font-size: 3rem; font-weight: 300; font-variation-settings: "opsz" 144; }
.tarjeta h3 { font-size: var(--t-2); font-weight: 600; line-height: 1.28; }
.tarjeta h3 a { color: var(--tinta); text-decoration: none; }
.tarjeta h3 a:hover { color: var(--teja); }
.tarjeta .resumen { margin: 0; color: var(--tinta-2); font-size: var(--t-1); line-height: 1.5; }

.autor-banda { margin: 3rem 0 0; padding: 2rem; background: var(--salvia-clara); border-radius: var(--radio); display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; }
.autor-banda img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--blanco); }
.autor-banda h2 { font-size: var(--t-3); margin-bottom: .3rem; }
.autor-banda p { margin: 0 0 .5rem; color: var(--tinta-2); }
@media (max-width: 600px) { .autor-banda { grid-template-columns: 1fr; } }

/* ============================================================ artículo */
.articulo-cab { padding: 2.2rem 0 1.5rem; max-width: 52rem; }
.crumbs, .crumbs a, .breadcrumbs, .breadcrumbs a { font-family: var(--f-ui); font-size: var(--t-0); color: var(--apagado); text-decoration: none; }
.crumbs a:hover, .breadcrumbs a:hover { color: var(--teja); }
.crumbs { margin-bottom: 1.4rem; }
.articulo-cab .etiqueta { display: inline-block; margin-bottom: .8rem; }
.articulo-cab h1 { max-width: 20ch; }
.articulo-cab .entradilla { font-size: var(--t-2); color: var(--tinta-2); margin: 1.1rem 0 0; max-width: 60ch; line-height: 1.55; }
.articulo-cab .firma { margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 0; }
.firma img { width: 40px; height: 40px; border-radius: 50%; margin-right: .7rem; object-fit: cover; }
.firma .quien { font-family: var(--f-ui); font-size: var(--t-1); color: var(--tinta); }
.firma .quien a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linea-2); }
.firma .quien a:hover { color: var(--teja); border-color: var(--teja); }
.firma .fechas { flex-basis: 100%; }

.hero { margin: 1.5rem 0 2.5rem; }
.hero img { width: 100%; border-radius: var(--radio); aspect-ratio: 16 / 9; object-fit: cover; }
.hero figcaption, .credito { font-family: var(--f-ui); font-size: var(--t-0); color: var(--apagado); margin-top: .5rem; }

.cuerpo { max-width: var(--lectura); }
.cuerpo > p:first-of-type::first-letter { font-family: var(--f-display); font-size: 3.6em; float: left; line-height: .78; padding: .1em .12em 0 0; color: var(--teja); font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 60; }
.cuerpo h2 { margin: 2.6rem 0 1rem; padding-top: 1.2rem; border-top: 1px solid var(--linea); scroll-margin-top: 1.5rem; }
.cuerpo h3 { margin: 1.9rem 0 .7rem; font-size: var(--t-2); font-weight: 600; }
.cuerpo p, .cuerpo li { color: var(--tinta-2); }
.cuerpo li::marker { color: var(--oro); }
.cuerpo blockquote { margin: 1.6rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid var(--oro); font-style: italic; color: var(--tinta-2); }
.cuerpo em { font-style: italic; }
.cuerpo figure { margin: 2rem 0; }
.cuerpo figure img { border-radius: var(--radio); }
.cuerpo figcaption { font-family: var(--f-ui); font-size: var(--t-0); color: var(--apagado); margin-top: .5rem; }
.cuerpo .vigencia { font-size: var(--t-1); font-style: italic; color: var(--apagado); border-left: 2px solid var(--linea-2); padding-left: .8rem; }
.cuerpo .pendiente { color: var(--tinta-2); border-bottom: 1px dotted var(--linea-2); cursor: help; }

.tabla { overflow-x: auto; margin: 1.6rem 0 2rem; -webkit-overflow-scrolling: touch; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }
.tabla:focus-visible { outline-offset: 0; }
.cuerpo table { width: 100%; border-collapse: collapse; margin: 0; font-size: var(--t-1); line-height: 1.45; font-variant-numeric: tabular-nums; }
.cuerpo th, .cuerpo td { padding: .65rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.cuerpo th { font-family: var(--f-ui); font-size: var(--t-0); letter-spacing: .06em; text-transform: uppercase; color: var(--salvia); background: var(--papel-2); font-weight: 600; }
.cuerpo tbody tr:last-child td { border-bottom: 0; }
.cuerpo tbody tr:nth-child(even) td { background: rgba(242, 235, 222, .45); }

.toc { margin: 1.8rem 0 2.2rem; padding: 1.1rem 1.3rem 1.1rem; background: var(--papel-2); border-radius: var(--radio); border: 1px solid var(--linea); font-family: var(--f-ui); }
.toc strong { display: block; font-size: var(--t-0); letter-spacing: .1em; text-transform: uppercase; color: var(--salvia); margin-bottom: .6rem; }
.toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; font-size: var(--t-1); }
.toc li { break-inside: avoid; margin-bottom: .3rem; }
.toc a { color: var(--tinta-2); text-decoration: none; }
.toc a:hover { color: var(--teja); }
@media (max-width: 640px) { .toc ol { columns: 1; } }

.faq h3 { font-family: var(--f-texto); font-size: var(--t-2); font-weight: 700; color: var(--tinta); margin-top: 1.5rem; }

.articulo-pie { max-width: var(--lectura); margin-top: 3rem; padding-top: 1.5rem; border-top: 3px double var(--linea-2); }
.etiquetas-post a { display: inline-block; font-family: var(--f-ui); font-size: var(--t-0); padding: .25rem .65rem; border: 1px solid var(--linea-2); border-radius: 999px; text-decoration: none; color: var(--tinta-2); margin: 0 .4rem .5rem 0; }
.etiquetas-post a:hover { border-color: var(--teja); color: var(--teja); }

.caja-autor { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; padding: 1.6rem; margin: 2rem 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.caja-autor img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.caja-autor .etiqueta { display: block; margin-bottom: .3rem; }
.caja-autor h2 { font-size: var(--t-3); }
.caja-autor h2 a { color: var(--tinta); text-decoration: none; }
.caja-autor p { margin: .5rem 0 0; color: var(--tinta-2); font-size: var(--t-1); }
@media (max-width: 520px) { .caja-autor { grid-template-columns: 1fr; } }

.relacionados { margin-top: 3rem; }
.relacionados h2 { font-size: var(--t-3); margin-bottom: 1.2rem; }

.nav-post { display: flex; justify-content: space-between; gap: 1.5rem; margin: 2.5rem 0 0; font-family: var(--f-ui); font-size: var(--t-1); }
.nav-post a { text-decoration: none; color: var(--tinta-2); max-width: 48%; }
.nav-post a span { display: block; font-size: var(--t-0); letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); margin-bottom: .2rem; }
.nav-post a:hover { color: var(--teja); }
.nav-post .sig { text-align: right; margin-left: auto; }

/* páginas fijas */
.pagina .cuerpo > p:first-of-type::first-letter { all: unset; }
.pagina .cuerpo h2 { border-top: 0; padding-top: 0; margin-top: 2.2rem; }
.pagina-cab { padding: 2.4rem 0 1rem; max-width: 52rem; }
.pagina-cab h1 { font-size: var(--t-4); max-width: 24ch; }
.aviso-borrador { font-family: var(--f-ui); font-size: var(--t-1); background: #fbf1d8; border: 1px solid #ead9a6; padding: .8rem 1rem; border-radius: var(--radio); color: #5b4a17; margin: 1.5rem 0; }

/* archivos */
.archivo-cab { padding: 2.6rem 0 1.4rem; border-bottom: 1px solid var(--linea); margin-bottom: 2rem; max-width: 52rem; }
.archivo-cab h1 { font-size: var(--t-4); }
.archivo-cab .descripcion { color: var(--tinta-2); font-size: var(--t-2); max-width: 60ch; margin: .8rem 0 0; }
.archivo-cab .cuenta { margin-top: .6rem; }
.paginacion { margin: 3rem 0 1rem; font-family: var(--f-ui); }
.paginacion .nav-links { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.paginacion .page-numbers { padding: .5rem .85rem; border: 1px solid var(--linea-2); border-radius: var(--radio); text-decoration: none; color: var(--tinta-2); }
.paginacion .page-numbers.current { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.paginacion a.page-numbers:hover { border-color: var(--teja); color: var(--teja); }

/* autor */
.autor-cab { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: start; padding: 2.6rem 0 2rem; border-bottom: 1px solid var(--linea); margin-bottom: 2rem; }
.autor-cab img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 4px solid var(--blanco); box-shadow: var(--sombra); }
.autor-cab h1 { font-size: var(--t-4); }
.autor-cab .bio { max-width: 60ch; color: var(--tinta-2); margin-top: .8rem; }
.autor-cab .bio p { margin-bottom: .8em; }
@media (max-width: 600px) { .autor-cab { grid-template-columns: 1fr; } .autor-cab img { width: 100px; height: 100px; } }

/* 404 / búsqueda */
.vacio { padding: 3rem 0; max-width: 40rem; }
.vacio h1 { font-size: var(--t-4); margin-bottom: 1rem; }
.vacio ul { columns: 2; column-gap: 2rem; }
@media (max-width: 600px) { .vacio ul { columns: 1; } }

/* ============================================================ pie */
.pie { margin-top: 5rem; border-top: 1px solid var(--linea); background: var(--papel-2); color: var(--tinta-2); font-family: var(--f-ui); font-size: var(--t-1); }
.pie-fila { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding: 3rem 0 2rem; }
.pie .marca .nombre { font-size: 1.35rem; }
.pie .quien-somos { margin-top: .8rem; max-width: 40ch; font-family: var(--f-texto); }
.pie h2 { font-family: var(--f-ui); font-size: var(--t-0); letter-spacing: .12em; text-transform: uppercase; color: var(--salvia); margin-bottom: .9rem; font-weight: 600; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .45rem; }
.pie a { color: var(--tinta-2); text-decoration: none; }
.pie a:hover { color: var(--teja); text-decoration: underline; }
.pie-legal { border-top: 1px solid var(--linea); padding: 1.2rem 0 1.6rem; font-size: var(--t-0); color: var(--apagado); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.pie-legal a { color: inherit; }
@media (max-width: 760px) { .pie-fila { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ============================================================ movimiento, con respeto */
@media (prefers-reduced-motion: no-preference) {
  .articulo-cab, .portada-intro, .empieza li { animation: aparecer .55s ease both; }
  .empieza li:nth-child(2) { animation-delay: .05s; } .empieza li:nth-child(3) { animation-delay: .1s; }
  .empieza li:nth-child(4) { animation-delay: .15s; } .empieza li:nth-child(5) { animation-delay: .2s; }
  .empieza li:nth-child(6) { animation-delay: .25s; }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media print {
  .cabecera, .pie, .toc, .relacionados, .nav-post, .caja-autor { display: none; }
  body { background: #fff; color: #000; }
}

/* ================================================================== *
 * Desbordamiento horizontal en móvil — dos defectos, medidos el
 * 2026-09-15 sobre el sitio en producción, viewport de 375 px.
 *
 * (1) LA CABECERA DEL PROPIO TEMA. `.cabecera-fila` es un flex con
 *     `gap: 1.5rem` y la marca lleva `white-space: nowrap`, así que no
 *     puede encoger: marca + buscador + menú sumaban 406 px dentro de
 *     375. El `<details class="nav-movil">` —el botón de menú— quedaba
 *     en right=406, o sea 31 px FUERA de la pantalla, en TODAS las
 *     páginas. Eso es «navegación difícil» y es lo que estiraba el
 *     lienzo a 407 px de ancho.
 *
 * (2) EL BANNER DE COOKIES. Complianz lo sirve con `width: 406px` y lo
 *     centra con `left: 203px; right: -203px`. Los tres botones se
 *     cortaban 12 px por la derecha y el aspa de cerrar quedaba entera
 *     fuera. Un banner cuyo «Rechazar» no se ve completo no cumple el
 *     criterio de la AEPD de que rechazar sea tan accesible como
 *     aceptar.
 *
 * ⚠️ El arreglo del banner NO usa `width: auto` con `left`/`right`:
 *     probado, daba 390 px porque el contenedor de referencia heredaba
 *     el lienzo desbordado de (1). `calc(100vw - 1rem)` mide contra el
 *     viewport y es inmune a que algo vuelva a desbordar.
 *
 * Medido después: scrollWidth 407 → 375 y cero elementos fuera.
 * ================================================================== */

@media (max-width: 520px) {
  .cabecera-fila { gap: .75rem; }
  .marca { min-width: 0; }
  .marca .nombre { font-size: 1.1rem; }
}

.cmplz-cookiebanner { box-sizing: border-box; }

@media (max-width: 480px) {
  .cmplz-cookiebanner,
  .cmplz-cookiebanner.cmplz-bottom,
  .cmplz-cookiebanner.cmplz-bottom-right,
  .cmplz-cookiebanner.cmplz-bottom-left,
  .cmplz-cookiebanner.cmplz-center {
    width: calc(100vw - 1rem) !important;
    max-width: none !important;
    left: .5rem !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
  .cmplz-cookiebanner .cmplz-divider { width: auto !important; }
  .cmplz-cookiebanner .cmplz-close { right: .75rem !important; left: auto !important; }
  /* Tres botones a lo alto y del mismo ancho: rechazar cuesta lo mismo que aceptar. */
  .cmplz-cookiebanner .cmplz-buttons { width: auto !important; flex-direction: column; }
  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { width: 100% !important; max-width: none !important; }
}

/* El panel del menú móvil sale del flujo del flex y se ancla a la cabecera.
   Medido el 2026-09-15: suelto, al abrirlo el <details> crecía a lo ancho
   desde su posición (left 289) hasta right=421 sobre un viewport de 375, o
   sea el menú entero —todos sus enlaces— quedaba fuera de pantalla y la
   página recuperaba el scroll horizontal. Es el defecto de navegación que
   un revisor encuentra en cuanto pulsa «Menú» en el móvil. */
@media (max-width: 860px) {
  .nav-movil { position: static; }
  .nav-movil-panel {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra);
    padding: .2rem 1.25rem 1.1rem;
    z-index: 40;
    max-height: calc(100dvh - 4.6rem);
    overflow-y: auto;
  }
}