/* ===================================================================== ESTILO DE LA WEB DE FRANCIS GARCÍA REYES Noche de callejón, vegetación salvaje y un corte granate. - El callejón: casi negro, farola arriba a la derecha, grano de película, números de volumen como placas de portal. - La selva y Vargas: hojas de plátano desgarradas en silueta contra la farola; un poso de barro al fondo de la página. - Redon: rayado de carboncillo, la espiral, el nombre que sale de lo negro. - Adoradores de la carne: «la hendidura se derramó en una perfecta línea granate». Ese corte es el único color de la web. PARA AJUSTAR A MANO: toca solo el bloque :root de abajo. Después ejecuta python3 build.py y sube el contenido de publicar/. ===================================================================== */ /* Fuentes autoalojadas: no se carga nada de Google (RGPD). Licencia SIL OFL 1.1. */ @font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:800;font-display:swap;src:url("/fuentes/big-shoulders-display-latin-800-normal.woff2") format("woff2")} @font-face{font-family:"Literata";font-style:normal;font-weight:400;font-display:swap;src:url("/fuentes/literata-latin-400-normal.woff2") format("woff2")} @font-face{font-family:"Literata";font-style:italic;font-weight:400;font-display:swap;src:url("/fuentes/literata-latin-400-italic.woff2") format("woff2")} @font-face{font-family:"Literata";font-style:normal;font-weight:600;font-display:swap;src:url("/fuentes/literata-latin-600-normal.woff2") format("woff2")} @font-face{font-family:"Literata";font-style:italic;font-weight:600;font-display:swap;src:url("/fuentes/literata-latin-600-italic.woff2") format("woff2")} :root{ /* ---------- COLORES ---------- */ --papel:#121110; /* fondo: negro de carboncillo (no negro puro: cansa menos la vista) */ --tinta:#E6E0D3; /* texto principal: papel bajo la farola */ --tenue:#BDB6A8; /* texto secundario largo (presentación) */ --luz:#FFF6E0; /* lo más iluminado: el nombre, los títulos al pasar el ratón */ --gris:#8F8A80; /* fechas, estados, pie */ --linea:#2B2825; /* separadores: juntas del muro */ --sangre:#A3232B; /* el corte granate. Solo para líneas y detalles, nunca para texto */ --sangre-viva:#C4343C;/* versión más clara para el foco del teclado (contraste 3:1) */ --rojo:var(--sangre); /* (alias usado por el formulario del boletín) */ --azul:var(--tinta); /* (alias: color de los enlaces) */ /* ---------- TIPOGRAFÍA ---------- */ --cartel:"Big Shoulders Display","Arial Narrow",Impact,sans-serif; /* títulos */ --texto:"Literata",Georgia,"Times New Roman",serif; /* lectura */ /* ---------- TAMAÑOS DE LETRA ---------- clamp(mínimo, preferido, máximo): crece con la pantalla sin bajar del mínimo (móvil) ni pasar del máximo. 1rem = 16 px. */ --tam-texto:1.125rem; /* texto normal (18 px) */ --tam-nombre:clamp(2.5rem,6vw,4.75rem); /* tu nombre en la portada */ --tam-epigrafe:clamp(1.3rem,2.4vw,1.7rem); /* la cita de la portada */ --tam-entrada:clamp(1.05rem,1.6vw,1.15rem); /* párrafo de presentación */ --tam-menu:1.15rem; /* menú de arriba */ --tam-pequeno:.95rem; /* fechas, estados, pie */ --tam-h1:clamp(2.6rem,7vw,4.6rem); /* título de cada página interior */ --tam-h2:clamp(1.7rem,3.4vw,2.3rem); /* títulos de sección */ --tam-h3:1.5rem; --tam-obra:clamp(1.9rem,4.6vw,3rem); /* títulos en la lista de obras */ --interlineado:1.5; /* separación entre líneas */ --tam-lectura:1.2rem; /* poemas y textos largos para leer aquí */ --interlineado-lectura:1.6; /* ---------- ATMÓSFERA (0 = apagado, 1 = máximo) ---------- */ --farola:.30; /* halo de la farola arriba a la derecha */ --sombra:.90; /* oscuridad en los bordes de la pantalla */ --follaje:1; /* hojas desgarradas de la portada */ --anillos:.16; /* espiral de carboncillo de la portada */ --trazo:.10; /* rayado de carboncillo en diagonal */ --grano:.28; /* grano de película */ --barro:.30; /* poso de barro al fondo de la página */ /* ---------- MEDIDAS ---------- */ --ancho:72rem; /* ancho máximo de la página */ --columna:40rem; /* ancho máximo de los párrafos (unos 70 caracteres por línea) */ } /* ---------- Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;background:var(--papel);overflow-x:hidden;position:relative;min-height:100%} body{margin:0;min-height:100vh;position:relative;isolation:isolate;overflow-x:hidden;background:transparent; color:var(--tinta);font-family:var(--texto);font-size:var(--tam-texto);line-height:var(--interlineado); font-kerning:normal;text-rendering:optimizeLegibility} img{max-width:100%;height:auto;display:block} /* Capa fija: la farola, la niebla que cae y los bordes en sombra */ html::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(ellipse 55% 50% at 92% -8%,rgba(255,246,224,var(--farola)),rgba(255,246,224,calc(var(--farola)*.33)) 45%,transparent 75%), radial-gradient(ellipse 120% 40% at 70% 0%,rgba(230,224,211,.03),transparent 70%), radial-gradient(ellipse 95% 85% at 62% 38%,transparent 45%,rgba(0,0,0,var(--sombra)) 100%)} /* Al fondo de la página, el barro (la riada de Vargas) */ html::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(80vh,44rem);z-index:-1;pointer-events:none; background:linear-gradient(to bottom,transparent,rgba(78,50,28,calc(var(--barro)*.5)) 55%,rgba(78,50,28,var(--barro)))} /* Rayado de carboncillo en diagonal */ body::before{content:"";position:fixed;inset:-60%;z-index:-1;pointer-events:none;transform:rotate(-24deg);opacity:var(--trazo); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .55' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .89 0 0 0 0 .84 0 0 0 2.6 -1.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E")} /* Grano de película. Todas las capas van por debajo del texto: nunca ensucian la lectura. */ body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grano); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")} /* ---------- Enlaces ---------- */ a{color:var(--azul);text-decoration-color:var(--sangre);text-decoration-thickness:1px;text-underline-offset:.22em;transition:color .2s,text-shadow .2s} a:hover{color:var(--luz);text-shadow:0 0 .6em rgba(255,246,224,.3);text-decoration-thickness:2px} :focus-visible{outline:2px solid var(--sangre-viva);outline-offset:4px} .saltar{position:absolute;left:-999px;top:0;background:var(--tinta);color:var(--papel);padding:.5rem 1rem;z-index:30} .saltar:focus{left:1rem;top:1rem} .contenedor{max-width:var(--ancho);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)} /* ---------- Cabecera (en la portada solo el menú: el nombre ya está abajo) ---------- */ .cabecera{border-bottom:1px solid var(--linea)} .cabecera .contenedor{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;padding-top:1.1rem;padding-bottom:1.1rem} .marca{font-family:var(--cartel);font-weight:800;font-size:1.35rem;line-height:1;color:var(--tinta);text-decoration:none;letter-spacing:.08em;text-transform:uppercase} .marca:hover{color:var(--luz)} .menu{margin-left:auto} .menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.9rem} .menu a{color:var(--tinta);text-decoration:none;font-family:var(--cartel);font-weight:800;font-size:var(--tam-menu);text-transform:uppercase;letter-spacing:.14em;text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.5em;transition:color .2s,text-decoration-color .2s} .menu a:hover{color:var(--luz);text-decoration-color:var(--sangre)} .menu a[aria-current="page"]{color:var(--luz);text-decoration-color:var(--sangre)} /* ---------- Tipografía ---------- */ h1,h2,h3{font-family:var(--cartel);font-weight:800;line-height:1;margin:0;text-wrap:balance} h1{font-size:var(--tam-h1);letter-spacing:.01em} h2{font-size:var(--tam-h2);margin-top:4rem;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.07em} h3{font-size:var(--tam-h3);margin-top:2rem;margin-bottom:.4rem} p{margin:0 0 1.1em} .texto{max-width:var(--columna)} .entrada{font-size:var(--tam-entrada);line-height:1.6;margin-top:1.25rem;max-width:36rem;color:var(--tenue)} .dato{color:var(--gris);font-size:var(--tam-pequeno)} .pendiente{background:#FFE58A;color:#141414;padding:0 .15em} main{padding-bottom:6rem} /* Títulos: la luz entra por arriba a la derecha y el resto se hunde en lo negro */ .pagina-cabecera{padding-top:clamp(2.5rem,7vw,5rem)} .pagina-cabecera h1{text-transform:uppercase;letter-spacing:.05em} .pagina-cabecera h1,.cartel h1{ color:var(--tinta); background:radial-gradient(ellipse 120% 160% at 100% 0%,var(--luz) 0%,var(--tinta) 40%,#857E73 80%,#57524B 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* ---------- Portada ---------- */ /* Hojas de plátano desgarradas, en silueta contra la farola */ .follaje{position:absolute;top:0;right:0;z-index:-1;pointer-events:none;width:min(64rem,100vw);height:min(50rem,100vh); background:url("follaje.svg?v=e4a469c7") right top/cover no-repeat;opacity:var(--follaje);transform-origin:100% 0} .cartel{padding-top:clamp(3rem,9vw,6.5rem);padding-bottom:.5rem;position:relative;isolation:isolate} /* espiral de carboncillo abajo a la izquierda (Redon; el remolino del agua) */ .cartel::before{content:"";position:absolute;z-index:-1;pointer-events:none;opacity:var(--anillos); width:min(46rem,130vw);aspect-ratio:1;left:max(-22rem,-55vw);top:clamp(5rem,14vw,9rem); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='c' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='2' seed='3' result='w'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='w' scale='9' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 -1.1' result='m'/%3E%3CfeComposite in='d' in2='m' operator='in'/%3E%3C/filter%3E%3Cg fill='none' stroke='%23E9E3D6' stroke-linecap='round' filter='url(%23c)'%3E%3Cpath d='M306.0 300.0 L306.5 300.8 L306.9 301.7 L307.2 302.7 L307.3 303.8 L307.2 304.9 L307.0 306.1 L306.6 307.3 L306.0 308.5 L305.2 309.7 L304.2 310.7 L303.0 311.7 L301.6 312.5 L300.1 313.2 L298.5 313.6 L296.8 313.9 L294.9 313.9 L293.0 313.7 L291.1 313.2 L289.3 312.5 L287.4 311.5 L285.7 310.2 L284.1 308.7 L282.6 307.0 L281.4 305.0 L280.4 302.8 L279.7 300.4 L279.2 297.9 L279.1 295.4 L279.2 292.7 L279.8 290.0 L280.6 287.4 L281.9 284.8 L283.5 282.3 L285.4 280.0 L287.6 277.9 L290.1 276.1 L292.9 274.6 L295.9 273.3 L299.1 272.5 L302.5 272.0 L305.9 272.0 L309.4 272.4 L312.9 273.2 L316.3 274.5 L319.6 276.2 L322.7 278.3 L325.6 280.8 L328.1 283.8 L330.4 287.0 L332.3 290.6 L333.7 294.5 L334.7 298.5 L335.2 302.7 L335.1 307.0 L334.6 311.3 L333.4 315.6 L331.8 319.8 L329.6 323.8 L327.0 327.6 L323.8 331.0 L320.2 334.1 L316.2 336.8 L311.8 339.0 L307.2 340.7 L302.3 341.8 L297.2 342.3 L292.1 342.2 L286.9 341.5 L281.8 340.1 L276.8 338.1 L272.1 335.5 L267.6 332.3 L263.6 328.6 L259.9 324.3 L256.8 319.5 L254.3 314.4 L252.3 308.9 L251.0 303.2 L250.5 297.3 L250.6 291.3 L251.5 285.2 L253.1 279.3 L255.4 273.6 L258.5 268.1 L262.2 263.0 L266.6 258.3 L271.5 254.1 L277.0 250.5 L282.9 247.6 L289.2 245.4 L295.8 243.9 L302.5 243.3 L309.4 243.4 L316.2 244.4 L323.0 246.3 L329.5 248.9 L335.8 252.4 L341.6 256.6 L346.9 261.6 L351.6 267.2 L355.7 273.3 L359.0 280.0 L361.5 287.1 L363.2 294.5 L363.9 302.2 L363.8 309.9 L362.6 317.6 L360.6 325.2 L357.6 332.5 L353.8 339.5 L349.1 346.0 L343.5 352.0 L337.3 357.3 L330.4 361.8 L323.0 365.6 L315.1 368.4 L306.8 370.3 L298.4 371.1 L289.8 371.0 L281.2 369.8 L272.8 367.5 L264.7 364.3 L256.9 360.0 L249.6 354.8 L243.0 348.8 L237.1 341.9 L232.1 334.3 L227.9 326.1 L224.8 317.4 L222.7 308.4 L221.7 299.1 L221.8 289.6 L223.1 280.2 L225.5 270.9 L229.0 262.0 L233.6 253.4 L239.3 245.4 L245.9 238.2 L253.4 231.7 L261.6 226.1 L270.6 221.5 L280.0 218.0 L289.9 215.7 L300.1 214.5 L310.4 214.6 L320.7 215.9 L330.8 218.5 L340.6 222.3 L349.9 227.2 L358.6 233.3 L366.6 240.4 L373.7 248.5 L379.8 257.5 L384.9 267.1 L388.7 277.4 L391.3 288.1 L392.7 299.1 L392.6 310.3 L391.3 321.4 L388.6 332.4 L384.6 343.0 L379.3 353.1 L372.8 362.6 L365.1 371.3 L356.4 379.0 L346.8 385.7 L336.5 391.2 L325.4 395.4 L313.9 398.3 L302.0 399.8 L290.0 399.9 L278.0 398.5 L266.2 395.7 L254.7 391.5 L243.8 385.8 L233.6 378.9 L224.2 370.8 L215.8 361.5 L208.6 351.3 L202.6 340.2 L198.0 328.4 L194.7 316.0 L193.0 303.3 L192.9 290.5 L194.2 277.6 L197.2 264.9 L201.6 252.6 L207.5 240.9 L214.8 229.9 L223.5 219.8 L233.3 210.8 L244.2 202.9 L256.0 196.4 L268.5 191.4 L281.7 187.8 L295.2 185.9 L308.9 185.6 L322.7 187.0 L336.2 190.0 L349.4 194.6 L361.9 200.8 L373.7 208.5 L384.5 217.6 L394.2 228.0 L402.6 239.5 L409.7 252.0 L415.1 265.3 L419.0 279.2 L421.2 293.6 L421.6 308.2 L420.3 322.8 L417.3 337.2 L412.5 351.2 L406.0 364.6 L397.9 377.2 L388.4 388.7 L377.5 399.1 L365.3 408.1 L352.1 415.7 L338.1 421.6 L323.4 425.8 L308.2 428.3 L292.7 428.9 L277.2 427.6 L262.0 424.5 L247.1 419.6 L232.9 412.9 L219.5 404.5 L207.2 394.5 L196.1 383.0 L186.5 370.3 L178.4 356.4 L172.0 341.6 L167.4 326.1 L164.7 310.1 L163.9 293.8 L165.0 277.4 L168.2 261.3 L173.3 245.6 L180.2 230.5 L189.0 216.3 L199.4 203.3 L211.3 191.5 L224.7 181.2 L239.2 172.5 L254.7 165.6 L271.0 160.6 L287.8 157.6 L305.0 156.6 L322.2 157.7 L339.2 160.9 L355.8 166.1 L371.7 173.2 L386.7 182.3 L400.6 193.1 L413.1 205.6 L424.0 219.5 L433.3 234.7 L440.6 250.9 L446.0 268.0 L449.4 285.6 L450.6 303.6 L449.6 321.7 L446.5 339.6 L441.2 357.1 L433.8 373.8 L424.5 389.6 L413.3 404.3 L400.3 417.5 L385.8 429.1 L370.0 439.0 L353.1 446.9 L335.2 452.7 L316.8 456.4 L297.9 457.8 L279.0 456.9 L260.2 453.8 L241.9 448.5 L224.2 440.9 L207.6 431.3 L192.2 419.7 L178.2 406.3 L165.9 391.3 L155.4 374.8 L147.0 357.2 L140.7 338.6 L136.7 319.3 L135.0 299.6 L135.7 279.8 L138.8 260.1 L144.2 240.9 L151.9 222.4 L161.8 204.9 L173.8 188.7 L187.6 174.0 L203.2 161.0 L220.3 149.9 L238.6 140.9 L258.0 134.2 L278.0 129.8 L298.6 127.9 L319.2 128.4 L339.8 131.4 L359.9 136.8 L379.2 144.7 L397.6 154.8 L414.6 167.1 L430.1 181.4 L443.8 197.5 L455.5 215.2 L465.1 234.2 L472.3 254.3 L477.0 275.2 L479.3 296.6 L479.0 318.1 L476.0 339.5 L470.6 360.5 L462.6 380.7 L452.2 399.9 L439.6 417.8 L424.9 434.1 L408.2 448.5 L390.0 460.9 L370.3 471.0 L349.4 478.7 L327.8 483.9 L305.6 486.4 L283.2 486.3 L260.9 483.5 L239.0 478.0 L217.9 469.9 L197.9 459.3 L179.2 446.4 L162.1 431.2 L146.9 414.1 L133.9 395.3 L123.2 374.9 L115.0 353.3 L109.4 330.9 L106.5 307.9 L106.4 284.6 L109.1 261.4 L114.5 238.7 L122.7 216.7 L133.5 195.8 L146.7 176.2 L162.3 158.4 L179.9 142.5 L199.3 128.8 L220.3 117.4 L242.6 108.7 L265.8 102.6 L289.7 99.4 L313.8 99.1 L337.8 101.6 L361.5 107.0 L384.4 115.3 L406.2 126.3 L426.5 139.8 L445.2 155.7 L461.9 173.8 L476.3 193.8 L488.2 215.4 L497.5 238.4 L504.0 262.4 L507.6 287.0 L508.2 312.0 L505.8 337.0 L500.5 361.5 L492.2 385.3 L481.0 408.0 L467.3 429.2 L451.0 448.7 L432.4 466.1 L411.9 481.2 L389.6 493.8 L365.9 503.7 L341.2 510.7 L315.7 514.6 L289.9 515.5 L264.1 513.3 L238.6 508.0 L214.0 499.7 L190.4 488.4 L168.3 474.4 L148.0 457.7 L129.8 438.8 L113.9 417.7 L100.7 394.8 L90.2 370.4 L82.8 344.9 L78.4 318.6 L77.2 292.0 L79.2 265.3 L84.4 238.9 L92.8 213.3 L104.2 188.9 L118.4 165.9 L135.4 144.8 L154.8 125.8 L176.4 109.2 L199.9 95.3 L225.0 84.2 L251.2 76.2 L278.3 71.5 L305.8 70.0 L333.4 71.8 L360.6 76.9 L387.1 85.2 L412.5 96.7 L436.3 111.2 L458.3 128.5 L478.1 148.3 L495.5 170.4 L510.1 194.5 L521.7 220.2 L530.2 247.2 L535.4 275.1 L537.3 303.4 L535.7 331.9 L530.7 360.0 L522.4 387.4 L510.8 413.7 L496.1 438.4 L478.6 461.3 L458.3 481.9 L435.7 500.0 L411.1 515.3 L384.7 527.6 L357.0 536.6 L328.3 542.3 L299.1 544.5 L269.8 543.1 L240.7 538.3 L212.4 530.0 L185.3 518.4 L159.6 503.5 L135.9 485.7 L114.5 465.1 L95.6 442.0 L79.6 416.7 L66.7 389.7 L57.1 361.3 L50.9 331.8 L48.4 301.8 L49.4 271.6 L54.1 241.7 L62.3 212.4 L74.0 184.4 L89.0 157.8 L107.1 133.2 L128.1 111.0 L151.7 91.3 L177.5 74.5 L205.1 61.0 L234.3 50.8 L264.5 44.2 L295.4 41.2 L326.4 42.0 L357.3 46.5 L387.4 54.6 L416.4 66.4 L443.8 81.5 L469.3 99.9 L492.4 121.2 L512.9 145.2 L530.4 171.5 L544.6 199.8 L555.4 229.7 L562.5 260.7 L565.9 292.4 L565.4 324.3 L561.2 356.0 L553.1 387.1 L541.3 417.0 L526.1 445.3 L507.5 471.7 L485.8 495.7 L461.4 517.0 L434.5 535.2 L405.6 550.1 L375.0 561.5 L343.3 569.2 L310.8 573.0 L278.0 572.8 L245.4 568.8 L213.4 560.8 L182.6 549.1 L153.3 533.7 L126.0 514.9 L101.2 492.9 L79.1 468.0 L60.1 440.7 L44.4 411.2 L32.4 379.9 L24.3 347.4 L20.0 314.1 L19.8 280.4 L23.6 246.9 L31.4 214.0 L43.1 182.3 L58.6 152.1' stroke-width='5'/%3E%3Cpath d='M291.8 311.3 L290.1 310.7 L288.5 309.7 L286.9 308.6 L285.5 307.2 L284.2 305.6 L283.1 303.8 L282.2 301.8 L281.6 299.7 L281.2 297.4 L281.1 295.0 L281.3 292.6 L281.9 290.1 L282.7 287.7 L283.9 285.4 L285.4 283.1 L287.3 281.1 L289.4 279.2 L291.7 277.5 L294.4 276.2 L297.2 275.1 L300.2 274.4 L303.3 274.1 L306.5 274.1 L309.8 274.6 L313.0 275.4 L316.2 276.7 L319.2 278.4 L322.1 280.5 L324.7 283.0 L327.1 285.8 L329.1 288.9 L330.7 292.4 L332.0 296.0 L332.8 299.9 L333.1 303.9 L332.9 307.9 L332.3 312.0 L331.1 316.1 L329.4 320.0 L327.2 323.7 L324.5 327.2 L321.4 330.4 L317.9 333.2 L314.0 335.6 L309.8 337.6 L305.3 339.0 L300.6 339.9 L295.7 340.3 L290.8 340.0 L285.9 339.1 L281.1 337.7 L276.4 335.6 L271.9 332.9 L267.8 329.7 L264.0 325.9 L260.7 321.7 L257.9 317.1 L255.6 312.0 L253.9 306.7 L252.9 301.2 L252.5 295.5 L252.9 289.7 L253.9 284.0 L255.7 278.3 L258.1 272.9 L261.3 267.7 L265.0 262.9 L269.4 258.5 L274.3 254.7 L279.7 251.4 L285.5 248.8 L291.7 246.9 L298.1 245.7 L304.6 245.3 L311.2 245.8 L317.8 247.0 L324.3 249.0 L330.5 251.8 L336.4 255.4 L341.9 259.7 L346.9 264.6 L351.2 270.2 L354.9 276.4 L357.9 282.9 L360.1 289.9 L361.4 297.2 L361.9 304.6 L361.4 312.0 L360.0 319.5 L357.8 326.8 L354.6 333.8 L350.6 340.4 L345.8 346.6 L340.2 352.2 L334.0 357.1 L327.1 361.2 L319.8 364.6 L312.0 367.0 L303.9 368.5 L295.7 369.1 L287.3 368.6 L279.0 367.1 L270.9 364.6 L263.1 361.1 L255.7 356.7 L248.9 351.4 L242.6 345.3 L237.2 338.4 L232.5 330.8 L228.8 322.6 L226.1 314.1 L224.4 305.1 L223.7 296.0 L224.2 286.8 L225.8 277.7 L228.5 268.8 L232.3 260.1 L237.1 252.0 L242.9 244.4 L249.6 237.5 L257.2 231.5 L265.4 226.4 L274.3 222.2 L283.7 219.2 L293.5 217.3 L303.4 216.5 L313.5 217.0 L323.5 218.7 L333.3 221.6 L342.7 225.6 L351.6 230.8 L359.9 237.1 L367.4 244.4 L374.1 252.6 L379.7 261.5 L384.3 271.2 L387.7 281.4 L389.8 291.9 L390.7 302.8 L390.2 313.7 L388.5 324.5 L385.4 335.2 L381.1 345.4 L375.5 355.1 L368.8 364.1 L361.0 372.3 L352.2 379.6 L342.5 385.7 L332.1 390.7 L321.2 394.5 L309.8 396.9 L298.1 397.9 L286.3 397.5 L274.6 395.7 L263.1 392.5 L252.0 387.9 L241.5 381.9 L231.8 374.8 L222.9 366.4 L215.0 357.0 L208.3 346.7 L202.9 335.6 L198.8 323.8 L196.1 311.6 L194.9 299.1 L195.2 286.4 L197.1 273.8 L200.4 261.5 L205.3 249.6 L211.5 238.3 L219.1 227.8 L228.0 218.2 L238.0 209.7 L249.0 202.5 L260.8 196.6 L273.4 192.1 L286.4 189.1 L299.8 187.7 L313.3 188.0 L326.7 189.8 L339.9 193.3 L352.7 198.4 L364.8 204.9 L376.0 213.0 L386.3 222.3 L395.4 232.9 L403.3 244.5 L409.7 257.1 L414.6 270.4 L417.8 284.3 L419.4 298.5 L419.3 312.8 L417.4 327.2 L413.9 341.2 L408.6 354.8 L401.7 367.7 L393.3 379.8 L383.5 390.8 L372.3 400.5 L360.0 409.0 L346.8 415.9 L332.7 421.2 L318.0 424.8 L303.0 426.6 L287.8 426.6 L272.6 424.7 L257.7 421.1 L243.2 415.6 L229.5 408.5 L216.7 399.7 L204.9 389.3 L194.5 377.7 L185.4 364.7 L178.0 350.8 L172.3 335.9 L168.4 320.5 L166.3 304.6 L166.2 288.5 L168.0 272.5 L171.7 256.7 L177.3 241.4 L184.7 226.8 L193.9 213.2 L204.7 200.7 L216.9 189.6 L230.4 179.9 L245.1 172.0 L260.7 165.8 L276.9 161.5 L293.6 159.2 L310.6 158.9 L327.5 160.6 L344.2 164.4 L360.3 170.2 L375.7 177.8 L390.1 187.4 L403.4 198.6 L415.2 211.3 L425.5 225.5 L434.0 240.8 L440.6 257.1 L445.3 274.2 L447.9 291.7 L448.4 309.5 L446.7 327.3 L442.9 344.8 L437.0 361.9 L429.1 378.1 L419.3 393.3 L407.6 407.3 L394.3 419.9 L379.6 430.8 L363.6 439.9 L346.6 447.0 L328.7 452.1 L310.4 455.0 L291.7 455.6 L273.0 454.1 L254.6 450.3 L236.7 444.3 L219.6 436.1 L203.6 426.0 L188.8 413.9 L175.6 400.1 L164.0 384.8 L154.3 368.1 L146.7 350.4 L141.2 331.8 L138.0 312.6 L137.1 293.1 L138.6 273.5 L142.4 254.2 L148.5 235.5 L156.8 217.5 L167.3 200.7 L179.7 185.1 L194.0 171.1 L209.9 158.9 L227.2 148.6 L245.6 140.4 L265.0 134.5 L285.0 131.0 L305.4 129.9 L325.8 131.2 L346.0 135.0 L365.6 141.1 L384.4 149.7 L402.1 160.4 L418.5 173.2 L433.2 188.0 L446.2 204.4 L457.0 222.4 L465.7 241.5 L472.1 261.7 L476.0 282.5 L477.4 303.7 L476.2 325.0 L472.5 346.0 L466.2 366.6 L457.5 386.2 L446.5 404.8 L433.3 422.0 L418.1 437.5 L401.1 451.1 L382.6 462.6 L362.7 471.8 L341.8 478.6 L320.2 482.9 L298.1 484.6 L276.0 483.6 L254.0 479.9 L232.6 473.6 L212.1 464.8 L192.7 453.5 L174.7 440.0 L158.4 424.3 L144.1 406.8 L131.9 387.6 L122.1 367.1 L114.9 345.4 L110.2 323.0 L108.3 300.1 L109.1 277.1 L112.6 254.3 L118.9 232.0 L127.9 210.6 L139.4 190.3 L153.3 171.5 L169.3 154.4 L187.4 139.4 L207.2 126.6 L228.4 116.2 L250.8 108.4 L274.0 103.3 L297.7 101.1 L321.6 101.7 L345.3 105.2 L368.5 111.5 L390.8 120.5 L412.0 132.2 L431.6 146.4 L449.4 162.9 L465.2 181.5 L478.7 201.8 L489.7 223.7 L498.0 246.8 L503.5 270.9 L506.0 295.4 L505.7 320.2 L502.3 344.8 L496.0 368.8 L486.9 392.0 L475.0 414.1 L460.5 434.5 L443.6 453.2 L424.5 469.7 L403.6 483.9 L381.1 495.5 L357.2 504.3 L332.4 510.2 L307.1 513.2 L281.4 513.0 L256.0 509.8 L231.0 503.5 L206.9 494.3 L184.0 482.2 L162.7 467.5 L143.2 450.2 L125.9 430.7 L111.0 409.2 L98.8 386.0 L89.4 361.4 L83.1 335.9 L79.8 309.7 L79.6 283.2 L82.7 256.8 L88.9 231.0 L98.2 205.9 L110.4 182.2 L125.5 160.0 L143.1 139.7 L163.1 121.6 L185.1 106.0 L209.0 93.2 L234.2 83.2 L260.5 76.4 L287.6 72.7 L314.9 72.3 L342.1 75.2 L368.9 81.3 L394.8 90.6 L419.5 103.0 L442.6 118.3 L463.7 136.3 L482.5 156.7 L498.8 179.3 L512.4 203.8 L522.9 229.7 L530.2 256.8 L534.3 284.6 L535.0 312.8 L532.3 341.0 L526.3 368.6 L516.9 395.5 L504.4 421.0 L488.9 445.0 L470.6 466.9 L449.7 486.6 L426.6 503.6 L401.6 517.8 L374.9 528.9 L347.1 536.8 L318.4 541.3 L289.4 542.3 L260.4 539.8 L231.8 533.9 L204.1 524.6 L177.6 511.9 L152.8 496.2 L130.0 477.6 L109.5 456.3 L91.7 432.7 L76.8 407.0 L65.1 379.7 L56.7 351.1 L51.8 321.7 L50.4 291.8 L52.7 261.9 L58.5 232.4 L67.8 203.8 L80.5 176.4 L96.4 150.7 L115.4 127.0 L137.1 105.7 L161.2 87.1 L187.4 71.6 L215.4 59.2 L244.7 50.3 L275.0 44.9 L305.7 43.2 L336.5 45.2 L366.9 50.8 L396.4 60.1 L424.7 72.9 L451.3 89.0 L475.9 108.2 L498.0 130.3 L517.3 154.9 L533.6 181.7 L546.6 210.4 L556.1 240.4 L561.9 271.4 L564.0 303.0 L562.3 334.7 L556.8 365.9 L547.6 396.4 L534.8 425.6 L518.5 453.1 L499.0 478.6 L476.6 501.5 L451.5 521.7 L424.1 538.7 L394.8 552.3 L364.1 562.4 L332.3 568.8 L299.9 571.2 L267.3 569.8 L235.1 564.5 L203.7 555.3 L173.6 542.5 L145.2 526.1' stroke-width='2.2' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask-image:radial-gradient(circle,#000 30%,rgba(0,0,0,.6) 52%,transparent 71%); mask-image:radial-gradient(circle,#000 30%,rgba(0,0,0,.6) 52%,transparent 71%)} /* ---------- Apartados: cada uno con su silueta y su patrón de carboncillo ---------- Los dibujos están en fuente/sombras/ (sombra-*.svg arriba a la derecha, como las hojas; espiral-*.svg abajo a la izquierda, como la espiral de la portada). */ .seccion-obras{--sombra:url("sombra-obras.svg?v=36390237");--patron:url("espiral-obras.svg?v=0f5b589c")} /* guantes · el ring */ .seccion-textos{--sombra:url("sombra-textos.svg?v=1df92a7f");--patron:url("espiral-textos.svg?v=516dce56")} /* el rostro · huella */ .seccion-podcast{--sombra:url("sombra-podcast.svg?v=b2a9c63b");--patron:url("espiral-podcast.svg?v=07acc09b")} /* cine negro · ondas */ .seccion-sobre-mi{--sombra:url("sombra-sobre-mi.svg?v=bd69b349");--patron:url("espiral-sobre-mi.svg?v=de6c2d7c")} /* la riada · curvas de nivel */ .seccion-boletin{--sombra:url("sombra-boletin.svg?v=25792e08");--patron:url("espiral-boletin.svg?v=a992ce91")} /* humo y fuego · voluta */ .seccion-contacto{--sombra:url("sombra-contacto.svg?v=28839992");--patron:url("espiral-contacto.svg?v=cfaea1da")} /* callejón · alcantarilla */ .seccion .follaje{background-image:var(--sombra)} .seccion .pagina-cabecera{position:relative;isolation:isolate} .seccion .pagina-cabecera::before,.seccion .cartel::before{content:"";position:absolute;z-index:-1;pointer-events:none; opacity:var(--anillos);width:min(46rem,130vw);aspect-ratio:1;left:max(-22rem,-55vw);top:clamp(5rem,14vw,9rem); background:var(--patron) center/contain no-repeat; -webkit-mask-image:radial-gradient(circle,#000 30%,rgba(0,0,0,.6) 52%,transparent 71%); mask-image:radial-gradient(circle,#000 30%,rgba(0,0,0,.6) 52%,transparent 71%)} .cartel h1{font-size:var(--tam-nombre);line-height:1.02;text-transform:uppercase;letter-spacing:.06em;max-width:16em} .cartel h1 span{display:inline-block;margin-right:.28em} .cartel h1 span:last-child{margin-right:0} .cartel h1 .pendiente{background:none;padding:0;color:#FFE58A} /* El corte: una línea granate fina, afilada en la punta, como hecha con una uña */ .corte{width:min(24rem,78%);height:4px;margin:1.6rem 0 1.8rem;background:linear-gradient(90deg,var(--sangre) 0,var(--sangre) 72%,rgba(163,35,43,0)); clip-path:polygon(0 35%,6% 0,100% 45%,100% 55%,6% 100%,0 65%);filter:drop-shadow(0 0 6px rgba(163,35,43,.55))} /* La cita */ .epigrafe{margin:0 0 1.8rem;max-width:34rem} .epigrafe blockquote{margin:0} .epigrafe p{margin:0;font-style:italic;font-size:var(--tam-epigrafe);line-height:1.35;color:var(--tinta)} .epigrafe figcaption{margin-top:.8rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)} .epigrafe figcaption::before{content:"— "} .epigrafe figcaption a{color:var(--gris);text-decoration-color:var(--sangre)} .epigrafe figcaption a:hover{color:var(--tinta)} /* ---------- Lista de obras ---------- */ .obras{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid rgba(230,224,211,.45)} .obras li{border-bottom:1px solid var(--linea)} .obras a{display:grid;grid-template-columns:1fr;gap:.3rem;padding:1.5rem 0;color:var(--tinta);text-decoration:none} .obras a:hover{text-shadow:none} /* al pasar el ratón, el título se ilumina y un corte granate lo atraviesa por debajo */ .obras .titulo{justify-self:start;font-family:var(--cartel);font-weight:800;font-size:var(--tam-obra);line-height:1;text-transform:uppercase;letter-spacing:.05em;color:#B3AC9F; padding-bottom:.18em;background:linear-gradient(var(--sangre),var(--sangre)) no-repeat 0 100%/0 2px;transition:color .25s,background-size .35s cubic-bezier(.3,.8,.2,1)} .obras a:hover .titulo,.obras a:focus-visible .titulo{color:var(--luz);background-size:100% 2px} .obras .linea{max-width:34rem} /* ---------- Sobre mí: retrato ---------- Móvil: la foto va tras el título, antes del texto. Escritorio: el texto a la izquierda (medida de lectura intacta) y la foto a la derecha, a la altura del primer párrafo, en el hueco de la farola. Bajo la foto, el corte granate. */ .sobre-mi-cuerpo{margin-top:1.75rem} .retrato{margin:0 0 2rem;max-width:16rem} .retrato img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--linea); box-shadow:0 1.2rem 3rem rgba(0,0,0,.55)} .retrato::after{content:"";display:block;height:2px;width:42%;margin-top:.9rem; background:linear-gradient(90deg,var(--sangre),rgba(163,35,43,0))} @media (min-width:60rem){ .sobre-mi-cuerpo{display:grid;grid-template-columns:minmax(0,var(--columna)) 20rem; column-gap:clamp(3rem,7vw,6rem);align-items:start} .sobre-mi-cuerpo .texto{grid-column:1;grid-row:1} .retrato{grid-column:2;grid-row:1;margin:.35rem 0 0;max-width:none;position:sticky;top:2rem} } /* subtítulo de una obra (Tito Roque · Himno bestial) */ .subtitulo{font-family:var(--texto);font-style:italic;font-weight:400;color:var(--tenue);text-transform:none;letter-spacing:0} .obras .subtitulo{font-size:var(--tam-epigrafe);line-height:1.2} .pagina-cabecera .subtitulo{font-size:var(--tam-epigrafe);margin:.4rem 0 0} .obras .estado{color:var(--gris);font-size:var(--tam-pequeno);font-style:italic} @media (min-width:52rem){ .obras a{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:baseline;column-gap:2.5rem} .obras .estado{grid-column:2} .obras .linea{grid-column:2;grid-row:1} .obras .subtitulo{grid-column:1;grid-row:2} } /* ---------- Bloques de portada ---------- */ .dos{display:grid;gap:0 3rem} @media (min-width:52rem){.dos{grid-template-columns:1fr 1fr}} .lista{list-style:none;margin:0;padding:0} .lista li{padding:1rem 0;border-bottom:1px solid var(--linea)} .lista li:first-child{border-top:1px solid var(--linea)} .lista .nombre{font-weight:600} .vacio{color:var(--gris);font-style:italic} /* ---------- Página de obra: números como placas de portal («204») ---------- */ .volumenes{list-style:none;margin:0;padding:0;counter-reset:vol} .volumenes li{padding:1.1rem 0 1.1rem 3.6rem;border-bottom:1px solid var(--linea);position:relative;counter-increment:vol} .volumenes li::before{content:counter(vol);position:absolute;left:0;top:1rem;min-width:2.4rem;padding:.25rem .45rem .2rem;text-align:center; font-family:var(--cartel);font-weight:800;font-size:1.6rem;line-height:1;color:var(--luz);border:1px solid rgba(230,224,211,.45)} .volumenes .nombre{font-family:var(--cartel);font-weight:800;font-size:1.6rem;line-height:1;display:block;margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.05em} .preguntas dt{font-weight:600;margin-top:1.3rem} .preguntas dd{margin:.25rem 0 0} /* ---------- Episodios ---------- */ .episodios{list-style:none;margin:0;padding:0} .episodios li{display:grid;grid-template-columns:3.4rem 1fr;gap:0 1rem;padding:1rem 0;border-bottom:1px solid var(--linea)} .episodios .num{align-self:start;text-align:center;padding:.25rem .3rem .2rem;font-family:var(--cartel);font-weight:800;font-size:1.6rem;line-height:1;color:var(--luz);border:1px solid rgba(230,224,211,.45)} /* ---------- Pie ---------- */ .pie{border-top:1px solid var(--linea);font-size:var(--tam-pequeno);color:var(--gris)} .pie .contenedor{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;padding-top:1.5rem;padding-bottom:2rem} .pie ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.2rem} .pie a{color:var(--gris)} .pie a:hover{color:var(--tinta)} /* ---------- Boletín ---------- */ .columna{max-width:var(--columna)} .boletin .accion{margin-top:1.6rem} .boletin-lista li{padding-top:1rem;padding-bottom:1rem} .boletin-lista .nombre{margin-bottom:.25rem} .notas{list-style:none;margin:2rem 0 0;padding:0;max-width:var(--columna)} .notas li{position:relative;padding-left:1.4rem;margin-bottom:.6rem;color:var(--gris);font-size:var(--tam-pequeno)} .notas li::before{content:"";position:absolute;left:0;top:.7em;width:.7rem;height:2px;background:var(--sangre)} .notas a{color:var(--tenue)} /* bloque «Boletín» al final de la portada */ .llamada{margin-top:5rem} .llamada h2{margin-top:0} .llamada .corte{margin:1rem 0 1.4rem;width:min(14rem,60%)} .llamada .boton{margin-top:.4rem} /* ---------- Textos para leer aquí (poemas, ensayos, relatos, fragmentos) ---------- */ .lectura{max-width:38rem} /* en las páginas de lectura, la lluvia de carboncillo se atenúa para no cansar la vista */ body:has(.lectura)::before{opacity:calc(var(--trazo)*.35)} .antetitulo{margin:0 0 .9rem;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)} .antetitulo a{color:var(--gris)} .antetitulo a:hover{color:var(--tinta)} .antetitulo i{font-style:italic;text-transform:none;letter-spacing:.02em;font-size:1.05em} .lectura h1{margin-bottom:2rem} .dedicatoria{font-style:italic;color:var(--tenue);margin:-.8rem 0 1.8rem} .epigrafe-texto{margin:0 0 2.4rem;padding-left:1.2rem;border-left:2px solid var(--sangre);max-width:32rem} .epigrafe-texto blockquote{margin:0} .epigrafe-texto p{margin:0;font-style:italic;color:var(--tenue);font-size:1rem;line-height:1.5} .epigrafe-texto figcaption{margin-top:.5rem;font-size:.85rem;color:var(--gris)} .epigrafe-texto figcaption::before{content:"— "} /* poema: un verso por línea; si no cabe, la continuación entra sangrada */ .poema{font-size:var(--tam-lectura);line-height:var(--interlineado-lectura)} .estrofa{margin:0 0 1.5em} .verso{display:block;padding-left:1.6em;text-indent:-1.6em} .verso.sangria{padding-left:3.2em} /* prosa */ .prosa{font-size:var(--tam-lectura);line-height:var(--interlineado-lectura);hyphens:auto;-webkit-hyphens:auto} .prosa p{margin:0 0 1.15em} .prosa h2{font-size:var(--tam-h3);margin-top:2.6rem} .prosa blockquote{margin:1.6rem 0;padding-left:1.2rem;border-left:2px solid var(--sangre);font-style:italic;color:var(--tenue)} .separador{border:0;height:auto;margin:2.2rem 0;text-align:center;color:var(--sangre)} .separador::before{content:"✶ ✶ ✶";letter-spacing:.6em;font-size:.8rem} /* remate: el corte granate */ .fin{width:5rem;height:3px;margin:3rem 0 1.5rem;background:var(--sangre);clip-path:polygon(0 35%,8% 0,100% 45%,100% 55%,8% 100%,0 65%)} /* ---------- Movimiento (solo si el visitante no lo ha desactivado) ---------- */ @media (prefers-reduced-motion:no-preference){ /* el nombre sale de lo negro */ .cartel h1{animation:emerger 1.6s cubic-bezier(.2,.7,.2,1) both} @keyframes emerger{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}} /* el corte: rápido, de un tajo */ .corte{transform-origin:left;animation:tajo .32s cubic-bezier(.7,0,.2,1) .9s both} @keyframes tajo{from{transform:scaleX(0)}to{transform:scaleX(1)}} .epigrafe{animation:aparecer 1.2s ease-out 1.25s both} @keyframes aparecer{from{opacity:0}to{opacity:1}} /* algo se mueve entre las hojas */ .follaje{animation:viento 11s ease-in-out infinite alternate} @keyframes viento{0%{transform:rotate(0)}60%{transform:rotate(-1.2deg)}100%{transform:rotate(.6deg)}} } @media print{ .cabecera,.pie,.saltar,.follaje,html::before,html::after,body::before,body::after,.cartel::before,.pagina-cabecera::before,.corte{display:none} html,body{background:#fff;color:#000} .pagina-cabecera h1,.cartel h1{background:none;-webkit-text-fill-color:#000;color:#000} } /* ---------- Boletín ---------- */ .formulario{display:grid;gap:.5rem;max-width:30rem;margin:1.5rem 0} .formulario label{font-size:1rem} .formulario input[type=email],.formulario input[type=text]{font:inherit;color:var(--tinta);background:rgba(230,224,211,.04);border:1px solid #4A4640;padding:.65rem .8rem;margin-bottom:.6rem} .formulario input:focus-visible{border-color:var(--sangre-viva)} .casilla{display:flex;gap:.6rem;align-items:flex-start;margin:.4rem 0 .8rem} .casilla input{margin-top:.35rem;accent-color:var(--sangre)} .formulario button,.boton{justify-self:start;display:inline-block;font-family:var(--cartel);font-weight:800;font-size:1.35rem;letter-spacing:.08em;text-transform:uppercase;color:var(--luz);background:#8E1C24;border:0;padding:.6rem 1.5rem;text-decoration:none;cursor:pointer} .formulario button:hover,.boton:hover{background:var(--luz);color:#121110;text-shadow:none} .trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ===================================================================== PIEZAS AÑADIDAS CON EL EDITOR build.py pega este archivo al final de estilo.css al generar la web, así tu estilo.css (y lo que hayas ajustado en su :root) no se toca. Usa los mismos colores y tamaños de estilo.css. ===================================================================== */ /* «Apoya mi escritura»: silueta del mendigo y la tabla de Júpiter (Agrippa, II, 22) */ .seccion-apoyo{--sombra:url("sombra-apoyo.svg?v=deaf14b2");--patron:url("espiral-apoyo.svg?v=c1f1629a")} /* ---------- Imágenes dentro de los textos y páginas ---------- [imagen: archivo.jpg | centro | Pie] → ancho de la columna [imagen: archivo.jpg | izquierda | Pie] / derecha → el texto la rodea [imagen: archivo.jpg | derecha, pequeña, espacio amplio | Pie] → tamaño y espacio con el texto El espacio se mide en líneas del texto (--renglon = tamaño de letra × interlineado), como pide la tipografía clásica: todo lo que interrumpe el texto ocupa líneas enteras o medias, y el texto vuelve a su ritmo después. Junto ½ · normal 1 · amplio 1½ · muy amplio 2 líneas. */ .figura{--renglon:calc(var(--tam-lectura) * var(--interlineado-lectura));--espacio:var(--renglon);margin:var(--espacio) 0} .figura.espacio-junto{--espacio:calc(var(--renglon) * .5)} .figura.espacio-normal{--espacio:var(--renglon)} .figura.espacio-amplio{--espacio:calc(var(--renglon) * 1.5)} .figura.espacio-muy-amplio{--espacio:calc(var(--renglon) * 2)} .figura img{width:100%;height:auto;border:1px solid var(--linea)} .figura figcaption{margin-top:.65rem;font-size:var(--tam-pequeno);line-height:1.45;color:var(--gris);font-style:italic} /* a un lado: arriba casi nada (se alinea con la primera línea del párrafo); al costado y abajo, el espacio elegido */ .figura-izquierda,.figura-derecha{width:min(18rem,46%)} .figura-izquierda{float:left;margin:.4rem var(--espacio) var(--espacio) 0} .figura-derecha{float:right;margin:.4rem 0 var(--espacio) var(--espacio)} /* tamaños en el centro (sin tamaño = completa, el ancho del texto) */ .figura-centro.figura-grande{width:80%;margin-inline:auto} .figura-centro.figura-mediana{width:60%;margin-inline:auto} .figura-centro.figura-pequena{width:40%;margin-inline:auto} /* tamaños a un lado (sin tamaño = mediana) */ .figura-izquierda.figura-grande,.figura-derecha.figura-grande{width:min(21rem,55%)} .figura-izquierda.figura-pequena,.figura-derecha.figura-pequena{width:min(12.5rem,33%)} /* sobre una imagen centrada manda el espacio elegido, no el hueco normal entre párrafos */ .prosa > p:has(+ .figura-centro),.poema > .estrofa:has(+ .figura-centro){margin-bottom:0} .prosa::after,.poema::after{content:"";display:block;clear:both} .prosa h2,.prosa blockquote,.prosa hr,.prosa .botones{clear:both} @media (max-width:36rem){ /* en el móvil nada flota: la imagen va entre párrafos; las pequeñas no ocupan todo el ancho */ .figura-izquierda,.figura-derecha{float:none;margin:var(--espacio) 0} .figura.figura-izquierda,.figura.figura-derecha,.figura.figura-grande{width:auto} .figura.figura-pequena{width:60%;margin-inline:auto} .figura.figura-centro.figura-mediana{width:80%;margin-inline:auto} } /* ---------- Botones: [boton: Texto | dirección] ---------- */ .botones{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.8rem 0 1.2rem} .botones .boton{font-size:1.1rem} /* ---------- Platino: {platino: palabras} ---------- El mismo degradado de los títulos (estilo.css, .pagina-cabecera h1): la luz entra por arriba a la derecha y las letras se hunden hacia el platino oscuro. Cada línea lleva su propio degradado. */ .platino{color:var(--tinta); background:radial-gradient(ellipse 120% 160% at 100% 0%,var(--luz) 0%,var(--tinta) 40%,#857E73 80%,#57524B 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; -webkit-box-decoration-break:clone;box-decoration-break:clone} @media print{.platino{background:none;-webkit-text-fill-color:#000;color:#000}} /* ---------- Poemas: sangría libre ---------- Los espacios al principio de un verso se publican tal cual (span .hueco), así que el verso queda a la misma distancia que en el editor. Anula la sangría fija antigua (.verso.sangria). */ .verso .hueco{white-space:pre} .verso.sangria{padding-left:1.6em} /* ---------- Listas largas: Textos por tipo y archivo del podcast ---------- En Textos, cada tipo enseña sus 5 últimos; el título del tipo y «Todos los… (n) →» llevan a la lista completa, partida por años (/textos/poemas/, /textos/en-medios/, /podcast/episodios/). */ h2 a.enlace-seccion{color:inherit;text-decoration:none} h2 a.enlace-seccion:hover,h2 a.enlace-seccion:focus-visible{color:var(--luz);text-decoration:underline;text-decoration-color:var(--sangre);text-decoration-thickness:2px;text-underline-offset:.18em} .ver-todos{margin:1rem 0 0}