/* /css/spp.css v.5.8.5 / / START OF CODE */

/* 1. FUENTES */ @font-face { font-family: 'Merriweather'; src: url('/font/merriweather-normal-300-900.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto Condensed'; src: url('/font/roboto-condensed-normal-100-900.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

/* 2. VARIABLES Y RESET */ :root { --gap-px: 30px; --maxw: 1300px; --main-w: 970px; --side-w: 300px; --col-w: 470px; --txt: #222; --bg: #fff; }

{ box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 1.017rem; line-height: 1.4; }

body { font-family: 'Roboto Condensed', sans-serif; color: var(--txt); background: var(--bg); overflow-x: hidden; letter-spacing: 0.5px; font-size: 0.88em; /* Definición base para > 767px */ }

/* Forzar herencia en elementos de texto */ p, li, span, div { font-size: inherit; }

h1, h2, h3, h4 {font-family:'Merriweather','Georgia','Times New Roman',serif; letter-spacing: 0.3px; font-weight: 700; line-height: 1.17; margin-bottom: 0.5rem; }

/* 3. ESTRUCTURA EXPLÍCITA (1300px) */ .cont-0 { display: flex; width: 1300px; max-width: 1300px; margin: 0 auto; gap: var(--gap-px); }

#main { width: 970px; flex: 0 0 970px; min-width: 0; } #side-right { width: 300px; flex: 0 0 300px; }

/* 4. NAVEGACIÓN Y HERO */ .nav-row { display: flex; align-items: center; justify-content: space-between; background: #E5FBC0; width: 100%; min-height: 60px; position: relative; } .nav-left { display: flex; align-items: center; gap: 10px; } 
.svg-logo { width: 160px; height: 50px; padding-left: 3px; } .nav-title { font-size: .95rem; font-weight: 600; } .nav-toggle { background: none; border: none; display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; } .nav-toggle span { width: 22px; height: 2px; background: #000; } .nav-menu { list-style: none; margin-top: 8px; padding: 10px 14px; border: 1px solid #ddd; background: #fff; display: none; min-width: 180px; position: absolute; top: 100%; right: 0; z-index: 100; } .nav-menu.show { display: block; } .nav-menu a { text-decoration: none; color: #000; font-size: .9rem; }

.spp-hero { width: 100%; max-width: 970px; aspect-ratio: 970 / 270; overflow: hidden; margin-top: 10px; } .spp-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 5. CITA KAPUSCINSKI */ .cita-kapuscinski { max-width: 920px; margin: 17px auto; padding: 0 1rem; text-align: center; } .cita-contenido { display: flex; flex-direction: column; align-items: center; gap: .75rem; } .cita-texto { font-style: italic; font-size: 1.4em; line-height: 1.3; margin: 0; font-family: 'Merriweather', serif; } .cita-comilla { display: inline-block; vertical-align: middle; width: 35px; height: 35px; color: #B1B4BE; } .cita-comilla.apertura { margin-right: .5em; } .cita-comilla.cierre { margin-left: .5em; } .cita-autor { font-family: Verdana, sans-serif; font-size: 1em; letter-spacing: .7px; } .cita-hr { border: 0; border-top: .4px solid #ff0000; margin: 1.5rem auto; max-width: 60%; }

/* 6. HOME GRID SIMÉTRICO (970px) */ .home { display: grid; grid-template-columns: 470px 470px; gap: 30px; width: 100%; margin: 1rem auto 0 auto; } .home-col { display: flex; flex-direction: column; gap: 30px; width: 470px; overflow: hidden; }

/* 7. COMPONENTES */ .segment {max-width: 470px; } .card { background: #f8f8f8; padding: 14px 9px 14px 14px; border-radius: .5rem; border: .6px solid #d0cfcf; } .h20 { height: 20px; width: 100%; }
.memorial-title {display: block; font-size: 1.17em; font-weight: 700; margin-block-start: 0px; margin-block-end: 12px; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; unicode-bidi: isolate;}
.memorial-card { background: #444; color: #fff; padding: 31px 7px 35px 50px; border-radius: 8px; width: 100%; }
.icon-paloma { width: 30px; height: 30px; margin-right: 6px; vertical-align: -2px; }

/* 8. WHO-VIDEO (16:9) */ .who-video { width: 100%; max-width: 470px; aspect-ratio: 16 / 9; background: #000; position: relative; overflow: hidden; } .who-video-media, .who-video iframe { width: 100%; height: 100%; display: block; object-fit: cover; border: 0; } .who-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #fff; background: rgba(0, 0, 0, .25); }

/* 9. LIBROS (Alternancia) */ .libros { width: 100%; max-width: 470px; display: flex; flex-direction: column; }
.libro { width: 100%; display: flex; gap: 3%; margin-bottom: 17px; padding-bottom: 17px; border-bottom: 1px solid #ccc; }
.libro p { font-size: 0.95em; line-height: 1.1; margin-bottom: 4px; letter-spacing: 0.2px; }
.libro .img { width: 32%; } .libro .img img { width: 100%; height: auto; display: block; }
.libro .txt { width: 65%; text-align: left; font-family: "Roboto Condensed", sans-serif; }

/* Alineación inversa para libros pares */ .libro:nth-child(even) { flex-direction: row-reverse; } .libro:nth-child(even) .txt { text-align: right; }

/* 10. IDENTIDAD Y LISTAS */ .spp-item { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; } 
.svg-icon { width: 32px; height: 32px; flex: 0 0 32px; stroke: #0a3eda; stroke-width: 1.8; fill: none; }
.svg-mic { width: 26px; height: 26px; flex: 0 0 26px; stroke: #0a3eda; stroke-width: 1.8; fill: none; }  
.svg-www { width: 23px; height: 23px; flex: 0 0 23px; } 
.ul-square { list-style: none; padding-left: 1px; padding-top: 1px; margin-top: 1px; } 
.ul-square li { position: relative; padding-left: 20px; } .ul-square li::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 9px; background: #074075; }

/* 11. ADS Y FOOTER */ .footer { margin-top: 2rem; padding: 1rem; text-align: center; background: #eee; font-size: .9rem; width: 100%; }

/* SPP COMPLEMENTOS SANEADOS */
p{hyphens:auto;display:block;line-height:1.15;margin-block-start:0;margin-block-end:.5em;margin-inline-start:0;margin-inline-end:0;unicode-bidi:isolate;}
ol{margin:1px 0 0;padding:1px 0 .5rem 20px;}
.h-117{font-family:'Merriweather',serif;line-height:1.17;padding:1px 0;margin:2px 0;}
.url-rip{font-family:"Roboto Condensed",sans-serif;font-size:.88em;letter-spacing:.4px;}
.ul-rip{list-style:none;margin:0;padding:0;}
.ul-rip li{margin-bottom:14px;position:relative;}
.ul-rip li:last-child{margin-bottom:0;}
.pd-btm{padding-bottom:7px;}


/* 12. RESPONSIVE */ @media (max-width: 1320px) { .cont-0 { width: 98%; max-width: 1300px; } }

@media (max-width: 1024px) { .cont-0 { flex-direction: column; align-items: center; width: 100%; } #main, #side-right { width: 100%; max-width: 970px; flex: 1; } .home { grid-template-columns: 1fr; } .home-col { width: 100%; } }

@media (max-width: 767px) { body { font-size: 1em; } /* Menor a 767px = 1em */ }

/* END OF CODE / / /css/spp.css v.5.8.5 fin */