:root {
  --papel: #FFFFFF;
  --campo: #E9C440;
  --tinta: #29291E;
  --recorte: #087C71;
  --apoyo: #E2E6DF;
  --margen: clamp(24px, 5.55vw, 88px);
  --lectura: "Amethysta", Georgia, serif;
  --rotulo: "Redressed", Georgia, serif;
  --nombre-tamano: clamp(108px, 12.5vw, 180px);
  --altura-marca: calc(var(--nombre-tamano) * .88 + 50px);
  --altura-cabecera: calc(var(--altura-marca) + 72px);
}
* { box-sizing: border-box; }
html { color: var(--tinta); background: var(--papel); scroll-padding-top: 28px; }
body { margin: 0; font-family: var(--lectura); font-size: 18px; line-height: 1.8; }
a { color: var(--recorte); text-underline-offset: .23em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--recorte); outline-offset: 5px; text-decoration: none; }
main:focus { outline: none; }
::selection { background: var(--campo); color: var(--tinta); }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1.4em; }
h1, h2, h3 { font-weight: 400; margin: 0; }
h1, h2 { font-family: var(--rotulo); line-height: 1.08; text-wrap: pretty; }
h1 { font-size: clamp(56px, 6.4vw, 92px); max-width: 1100px; }
h2 { font-size: clamp(40px, 3.8vw, 58px); }
h3 { font-size: 23px; }
.pp-salto { position: absolute; left: var(--margen); top: 12px; z-index: 5; padding: 12px 20px; background: var(--papel); transform: translateY(-180%); }
.pp-salto:focus { transform: none; }
.pp-cabecera { width: 100%; }
.pp-marca { position: relative; background: var(--campo); padding: 37px var(--margen) 13px; height: var(--altura-marca); }
.pp-firma { color: var(--tinta); font-family: var(--rotulo); font-size: var(--nombre-tamano); line-height: .88; text-decoration: none; display: inline-block; }
.pp-firma span + span::before { content: " "; }
.pp-firma:hover { color: var(--recorte); }
.pp-acento { position: absolute; width: 44px; height: 28px; left: var(--margen); top: 9px; }
.pp-navegar { display: flex; justify-content: flex-start; gap: clamp(44px, 6.2vw, 100px); padding: 12px var(--margen) 16px; font-size: 20px; line-height: 1.4; height: 72px; }
.pp-navegar a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: var(--tinta); }
.pp-navegar a:hover, .pp-navegar a[aria-current="page"] { color: var(--recorte); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.pp-nav-icono, .pp-enlace-icono { display: inline-block; flex: 0 0 auto; width: 21px; height: 21px; color: var(--recorte); }
.pp-nav-icono { stroke-width: 1.6; }
.pp-inicio { min-height: calc(100svh - var(--altura-cabecera)); display: flex; flex-direction: column; }
.pp-definicion { padding: 48px var(--margen) 58px; background: var(--papel); }
.pp-inicio .pp-definicion { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 30px; padding-bottom: 40px; }
.pp-inicio h1 { font-size: clamp(76px, 7.4vw, 112px); max-width: 1150px; line-height: 1.02; }
.pp-incluye, .pp-excluye { display: block; }
.pp-excluye { color: var(--recorte); }
.pp-entrada { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.65; max-width: 760px; margin: 28px 0 0; }
.pp-inicio .pp-entrada { max-width: 720px; }
/* El hueco es una sustracción recta; no es una tarjeta sobre una fotografía. */
.pp-hueco { height: 11svh; min-height: 96px; max-height: 118px; flex-shrink: 0; position: relative; background: var(--campo); }
.pp-hueco::before { content: ""; position: absolute; background: var(--recorte); width: 83%; height: 78%; bottom: 0; left: 6%; }
.pp-hueco::after { content: ""; position: absolute; width: 24%; height: 46%; right: 11%; bottom: 0; background: var(--campo); }
/* Una imagen grande, sin texto encima; el pie ocupa su propio espacio. */
.pp-foto { margin: 0; padding: 0 var(--margen); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; background: var(--papel); }
.pp-home .pp-foto { padding-left: calc(var(--margen) * .5); }
.pp-foto img { grid-column: 1 / -1; width: 100%; aspect-ratio: 5 / 3; object-fit: cover; background: var(--apoyo); color: var(--tinta); }
.pp-foto figcaption { position: relative; grid-column: 2; font-size: 16px; line-height: 1.7; margin: 0; padding: 24px 0 28px 45px; max-width: 620px; }
.pp-foto figcaption::before { content: ""; position: absolute; left: 0; top: 28px; width: 27px; height: 19px; background: url("acento.svg") center / contain no-repeat; }
.pp-foto-interna { padding-left: calc(var(--margen) * 1.5); padding-right: calc(var(--margen) * .5); }
.pp-foto-interna img { aspect-ratio: 16 / 5; object-position: center 46%; }
/* Conservamos la silla, el cuaderno y la lectura completa en las nuevas fotos. */
@media (min-width: 701px) {
  .pp-foto-interna img[src$="/atencion.webp"],
  .pp-foto-interna img[src$="/acerca.webp"] { aspect-ratio: 16 / 9; object-position: center; }
  .pp-foto-interna img[src$="/agua.webp"] { aspect-ratio: 8 / 3; object-position: center; }
}
.pp-foto-interna figcaption { grid-column: 1 / -1; justify-self: start; }
.pp-migas { padding: 20px var(--margen) 0; font-size: 16px; }
.pp-migas ol { padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; }
.pp-migas a { display: inline-block; padding-block: 6px; }
.pp-migas li + li { color: var(--tinta); align-self: center; }
.pp-despliegues { padding: 32px 0 0; }
.pp-pliego { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.4fr); gap: 40px clamp(56px, 7.5vw, 112px); padding: 74px var(--margen) 100px; align-items: start; }
.pp-epigrafe { position: sticky; top: 32px; padding-top: 57px; align-self: start; max-width: 460px; }
.pp-epigrafe::before { content: ""; position: absolute; width: 57px; height: 39px; top: 0; left: 0; background: url("acento.svg") left top / contain no-repeat; }
.pp-prosa { max-width: 740px; }
.pp-prosa > p:first-child { font-size: 23px; line-height: 1.65; }
.pp-prosa p:last-child { margin-bottom: 0; }
.pp-icono { display: inline-block; width: 30px; height: 30px; margin-right: 10px; color: var(--recorte); vertical-align: -.05em; stroke-width: 1.5; }
/* Una pausa de color, con la columna de lectura desplazada hacia abajo. */
.pp-pliego:nth-child(2) { background: var(--recorte); color: var(--papel); padding-top: 92px; padding-bottom: 106px; }
.pp-pliego:nth-child(2) .pp-prosa { padding-top: 50px; }
.pp-pliego:nth-child(2) .pp-epigrafe { margin-left: -18px; max-width: 490px; }
.pp-pliego:nth-child(2) .pp-epigrafe::before { filter: brightness(0) invert(1); }
.pp-pliego:nth-child(2) a, .pp-pliego:nth-child(2) .pp-icono, .pp-pliego:nth-child(2) .pp-enlace-icono { color: var(--papel); }
.pp-pliego:nth-child(2) a:focus-visible { outline-color: var(--campo); }
.pp-pliego:nth-child(2) ::selection { background: var(--papel); color: var(--recorte); }
.pp-pliego:nth-child(3) { padding-top: 106px; }
.pp-pliego:nth-child(3) .pp-epigrafe { margin-top: 26px; }
.pp-siguientes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 30px; margin: 40px 0 0; padding: 0; list-style: none; }
.pp-siguientes li { padding: 18px 0 0; border-top: 1px solid currentColor; }
.pp-siguientes a { font-size: 19px; line-height: 1.5; }
.pp-enlace-icono { width: 18px; height: 18px; vertical-align: -.14em; margin-left: 7px; stroke-width: 1.6; }
.pp-siguientes p { margin: 12px 0 0; font-size: 16px; line-height: 1.75; }
/* Dos límites sin recuadros, de medidas distintas y con un vacío en el borde. */
.pp-limites { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 38px 12%; padding: 92px var(--margen) 100px; align-items: end; background: var(--campo); }
.pp-limites::before { content: ""; position: absolute; top: 0; right: var(--margen); width: 15%; height: 22px; background: var(--papel); }
.pp-limites p { font-size: clamp(23px, 2.25vw, 32px); line-height: 1.5; margin: 0; }
.pp-limites p:first-child { font-family: var(--rotulo); font-size: clamp(36px, 3.55vw, 53px); line-height: 1.1; max-width: 360px; }
.pp-limites p:last-child { max-width: 740px; }
.pp-pie { padding: 58px var(--margen) 32px; background: var(--apoyo); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px 12%; }
.pp-pie p { max-width: 640px; font-size: 20px; line-height: 1.65; margin: 0; }
.pp-pie nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; font-size: 16px; align-content: start; }
.pp-pie nav a { padding-block: 8px; }
.pp-pie small { grid-column: 1 / -1; display: block; font-size: 15px; padding-top: 18px; }
.pp-error .pp-definicion { padding-block: 72px; }
.pp-volver { display: inline-block; font-size: 22px; padding-block: 10px; }
@media (min-width: 1600px) {
  :root { --margen: max(88px, calc((100vw - 1424px) / 2)); }
}
@media (max-width: 1000px) and (min-width: 701px) {
  .pp-pliego { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); column-gap: 42px; }
  .pp-siguientes { grid-template-columns: 1fr; }
  .pp-inicio h1 { font-size: 76px; }
  .pp-pie { gap: 30px 42px; }
}
@media (max-width: 700px) {
  :root {
    --nombre-tamano: clamp(78px, 22vw, 110px);
    --altura-marca: calc(var(--nombre-tamano) * 1.7 + 46px);
    --altura-cabecera: calc(var(--altura-marca) + 104px);
  }
  body { font-size: 17px; line-height: 1.8; }
  h1 { font-size: clamp(42px, 12.3vw, 62px); line-height: 1.08; }
  h2 { font-size: 41px; }
  .pp-marca { padding-top: 32px; padding-bottom: 14px; }
  .pp-firma { line-height: .85; }
  .pp-firma span { display: block; }
  .pp-firma span + span::before { content: none; }
  .pp-acento { width: 28px; height: 19px; top: 10px; }
  .pp-navegar { display: grid; grid-template-columns: 1fr 1fr; justify-content: start; gap: 0 30px; font-size: 18px; padding-top: 8px; padding-bottom: 8px; height: 104px; }
  .pp-navegar a { gap: 10px; }
  .pp-navegar a:last-child { grid-column: 1 / 3; justify-self: start; }
  .pp-nav-icono { width: 20px; height: 20px; }
  .pp-definicion { padding-top: 30px; padding-bottom: 38px; }
  .pp-inicio .pp-definicion { padding-top: 24px; padding-bottom: 30px; }
  .pp-inicio h1 { font-size: clamp(42px, 12.8vw, 60px); line-height: 1.06; }
  .pp-entrada { font-size: 18px; line-height: 1.65; margin-top: 20px; }
  .pp-hueco { height: 12svh; min-height: 90px; max-height: 110px; }
  .pp-hueco::before { width: calc(100% - 48px); left: 24px; height: 76%; }
  .pp-hueco::after { right: 24px; width: 27%; height: 39%; }
  .pp-foto, .pp-home .pp-foto, .pp-foto-interna { padding-inline: var(--margen); display: block; }
  .pp-foto img { aspect-ratio: 4 / 3; object-position: 50% 50%; }
  .pp-foto-interna img { aspect-ratio: 8 / 5; }
  .pp-foto figcaption { font-size: 15px; padding: 20px 0 8px 37px; }
  .pp-foto figcaption::before { width: 24px; height: 17px; top: 24px; }
  .pp-despliegues { padding-top: 10px; }
  .pp-pliego { display: block; padding-top: 54px; padding-bottom: 58px; }
  .pp-epigrafe { position: relative; top: auto; padding-top: 40px; margin-bottom: 27px; }
  .pp-epigrafe::before { width: 40px; height: 28px; }
  .pp-icono { width: 25px; height: 25px; margin-right: 8px; }
  .pp-prosa > p:first-child { font-size: 20px; line-height: 1.7; }
  .pp-pliego:nth-child(2) { padding-top: 56px; padding-bottom: 60px; }
  .pp-pliego:nth-child(2) .pp-epigrafe { margin-left: 0; }
  .pp-pliego:nth-child(2) .pp-prosa { padding-top: 0; }
  .pp-pliego:nth-child(3) { padding-top: 60px; }
  .pp-pliego:nth-child(3) .pp-epigrafe { margin-top: 0; }
  .pp-siguientes { grid-template-columns: 1fr; gap: 25px; margin-top: 28px; }
  .pp-siguientes a { font-size: 20px; }
  .pp-limites { grid-template-columns: 1fr; gap: 32px; padding-top: 62px; padding-bottom: 64px; }
  .pp-limites::before { width: 27%; height: 15px; }
  .pp-limites p { font-size: 24px; }
  .pp-limites p:first-child { max-width: 78%; font-size: 42px; }
  .pp-limites p:last-child { max-width: 96%; }
  .pp-pie { display: block; padding-top: 36px; }
  .pp-pie p { font-size: 19px; }
  .pp-pie nav { margin: 28px 0; gap: 9px 20px; }
  .pp-pie small { padding-top: 0; }
  .pp-error .pp-definicion { padding-block: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}