/* ============================================================
   SurLibrary — Capa rústica: papel, curvas de nivel, camuflaje,
   cuerda, costuras, sellos de tampón y etiquetas de cartón.
   Todo es decoración de bajo contraste (01-MARCA: el camuflaje
   nunca va detrás de texto largo ni de pasos de emergencia).
   ============================================================ */

/* Grano de papel sobre el fondo arena. */
body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24  0 0 0 0 .2  0 0 0 0 .1  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .site-footer { position: relative; z-index: 1; }

/* Curvas de nivel topográficas. */
.topo, .topo-bg::before {
    position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400' fill='none' stroke='%23687A4D' stroke-opacity='.22' stroke-width='1.2'%3E%3Cpath d='M-20 80c60-40 140-30 200 0s150 50 230 10 140-40 210-10'/%3E%3Cpath d='M-20 110c70-35 140-25 205 5s145 45 225 8 140-35 210-5'/%3E%3Cpath d='M-20 145c75-30 150-20 210 10s140 40 220 5 145-30 210 0'/%3E%3Cpath d='M180 230c40-40 120-45 160-10s20 90-40 100-150-40-120-90z'/%3E%3Cpath d='M205 235c30-28 90-30 118-5s12 62-30 70-108-30-88-65z'/%3E%3Cpath d='M232 240c20-16 55-16 72 0s5 36-18 40-66-18-54-40z'/%3E%3Cpath d='M-20 330c80-30 160-10 230 15s160 30 230 0 120-30 180-20'/%3E%3Cpath d='M-20 365c90-25 160-5 235 18s150 25 225-5 120-25 180-15'/%3E%3C/svg%3E");
    background-size: 600px 400px;
}
.topo-bg { position: relative; }
.topo-bg::before { content: ""; }
.topo-bg > .wrap { position: relative; }
.topo--footer { opacity: .35; filter: invert(1) brightness(1.6); }

/* Manchas de camuflaje del logo como formas grandes en los bordes del hero. */
.hero__camo {
    position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
    background:
        radial-gradient(38% 30% at 6% 92%, var(--camo-1) 0 58%, transparent 60%),
        radial-gradient(26% 22% at 96% 12%, var(--camo-2) 0 58%, transparent 60%),
        radial-gradient(30% 26% at 88% 96%, var(--camo-3) 0 58%, transparent 60%);
}

/* Cuerda trenzada como separador de secciones. */
.rope {
    position: relative; z-index: 1; height: 14px; max-width: var(--wrap); margin: 0 auto; width: calc(100% - 2 * var(--gutter));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 10c5-8 9-8 14 0' stroke='%238A6A3E' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M14 4c5 8 9 8 14 0' stroke='%23B08A55' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: repeat-x; opacity: .55;
}

/* Sello de tampón. */
.stamp {
    --c: var(--pino);
    display: inline-flex; align-items: center; gap: .4em;
    font: 600 .72rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
    color: var(--c); padding: 6px 9px; border: 2px solid var(--c); border-radius: 6px;
    box-shadow: inset 0 0 0 2px var(--arena), inset 0 0 0 3px var(--c);
    transform: rotate(-2deg); white-space: nowrap;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23g)'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23g)'/%3E%3C/svg%3E");
}
.stamp .ico { width: 1.15em; height: 1.15em; }
.stamp--amber { --c: var(--senal-dk); }
.stamp--olive { --c: var(--oliva); }
.stamp--clay  { --c: var(--arcilla); }
.stamp--big { font-size: .95rem; padding: 10px 14px; margin-bottom: 18px; }

/* Etiqueta de cartón kraft con ojal. */
.tag {
    position: relative; display: inline-flex; align-items: center; gap: .45em;
    padding: 5px 12px 5px 22px; border-radius: 4px 12px 12px 4px;
    background: linear-gradient(180deg, #D8C29C, var(--kraft)); color: var(--kraft-ink);
    font-size: .8rem; font-weight: 650; text-decoration: none;
    box-shadow: inset 0 -1px 0 rgba(91, 66, 32, .25), 0 1px 2px rgba(91, 66, 32, .2);
}
.tag::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--arena); box-shadow: inset 0 1px 1px rgba(91, 66, 32, .4); }
a.tag:hover { color: var(--kraft-ink); filter: brightness(1.05); text-decoration: none; }
.tag--plain { background: var(--arena-2); color: var(--musgo); box-shadow: inset 0 0 0 1px var(--line); }
.tag--plain::before { display: none; }
.tag--plain { padding-left: 12px; }
.tag--big { font-size: .92rem; padding: 9px 16px 9px 26px; }
.tag--big::before { left: 10px; }

/* Costura: borde discontinuo cosido. */
.stitch { border: 1.5px dashed var(--line-2); }

/* Marcador de foto pendiente: camuflaje del logo con el nombre del fichero. */
.media { width: 100%; height: auto; object-fit: cover; background: var(--oliva); }
.media--ph {
    position: relative; display: flex; align-items: flex-end; justify-content: flex-end; overflow: hidden;
    background:
        radial-gradient(40% 50% at 18% 28%, var(--camo-1) 0 60%, transparent 62%),
        radial-gradient(34% 44% at 86% 18%, var(--oliva) 0 60%, transparent 62%),
        radial-gradient(46% 40% at 72% 96%, var(--camo-3) 0 60%, transparent 62%),
        radial-gradient(30% 36% at 6% 96%, var(--camo-2) 0 60%, transparent 62%),
        var(--bosque);
}
.media--ph::after {
    content: ""; position: absolute; inset: 0; opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 160 160'%3E%3Cpath d='M80 27 62 56h10L54 81h12l-19 28h28v21h10v-21h28L94 81h12L88 56h10L80 27Z' fill='%23F7F4E9' fill-opacity='.08'/%3E%3C/svg%3E");
}
.media__file {
    position: relative; z-index: 1; margin: 10px; display: inline-flex; align-items: center; gap: 6px;
    font: 500 .7rem/1.2 var(--f-mono); color: rgba(247, 244, 233, .8);
    background: rgba(0, 0, 0, .18); padding: 4px 8px; border-radius: 6px;
}
.framed { border-radius: var(--r-lg); box-shadow: 0 0 0 6px var(--blanco), 0 0 0 7px var(--arena-3), 0 24px 40px -24px rgba(33, 59, 45, .6); transform: rotate(1deg); }