@charset "utf-8";

.titulo-renacentista {
  background-color: #f4eddb; /* pergamino claro */
  color: #463726; /* tinta sepia */
  padding: 18px 30px;
  text-align: center;

  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 2.2rem;
  letter-spacing: 0.8px;

  /* Textura de pergamino */
  background-image:
    url('https://www.transparenttextures.com/patterns/paper.png'),
    linear-gradient(180deg, rgba(255,255,240,0.6) 0%, rgba(180,150,90,0.25) 100%);
  background-size: 700px 700px;
  background-repeat: repeat;
  background-position: center;

  border: 2px solid #b89a6d; /* oro viejo tenue */
  border-radius: 6px;

  /* Sombras suaves alrededor */
  box-shadow:
    0 0 12px rgba(0, 0, 0, 0.25),
    inset 0 0 8px rgba(120, 90, 50, 0.25);

  text-shadow: 0.6px 0.6px 0 rgba(70, 50, 30, 0.35);

  position: relative;
  overflow: hidden;
}

/* --- sello Alef grabado a fuego --- */
.titulo-renacentista::after {
  content: "א";
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-size: 2.9rem;
  font-family: 'Times New Roman', serif;

  /* degradado de quemado: del naranja cálido al negro profundo */
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 180, 60, 0.3) 0%,    /* centro con calor */
    rgba(120, 60, 20, 0.7) 35%,    /* borde carbonizado */
    rgba(50, 30, 10, 0.9) 80%,     /* negruzco */
    rgba(20, 10, 5, 1) 100%);      /* quemado intenso */

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* halo de calor y sombra */
  text-shadow:
    0 0 8px rgba(255, 180, 60, 0.25), /* brillo cálido */
    0 0 14px rgba(150, 80, 20, 0.25), /* resplandor leve */
    1px 1px 3px rgba(0, 0, 0, 0.8);   /* hundimiento */

  opacity: 0.95;
  mix-blend-mode: multiply;
  transform: rotate(-5deg);
  filter: contrast(1.3) brightness(0.9) sepia(0.4);
  pointer-events: none;
}

/* --- relieve negativo con sombras internas y quemadura difusa --- */
.titulo-renacentista::before {
  content: "א";
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-size: 2.9rem;
  color: transparent;

  text-shadow:
    -1px -1px 3px rgba(0, 0, 0, 0.8),   /* profundidad */
    1px 1px 4px rgba(255, 180, 60, 0.15), /* calor residual */
    0 0 12px rgba(80, 40, 10, 0.4);       /* difuminado */

  opacity: 0.8;
  mix-blend-mode: overlay;
  transform: rotate(-5deg);
  pointer-events: none;
}


.menu-botones a {
  display: block;
  margin-bottom: 16px; /* equivalente aprox. a 2 <br> */
}

.menu-botones {
  width: 150px;
}

.menu-lateral td {
  width: 150px;
}

.menu-lateral {
  width: 150px;
  max-width: 150px;
  border: 1px solid #444;
  padding: 4px;
  box-sizing: border-box;
}

/* botones principales */
.menu-botones img {
  width: 150px;
  height: auto;
  display: block;
  object-fit: cover;
}

/* sección legal */
.menu-legal {
  text-align: center;
  margin-top: 15px;
}

.menu-legal img {
  display: block;
  margin: 8px auto;
  max-width: 100%;
  height: auto;
}

/* sección política */
.menu-politico {
  text-align: center;
  margin-top: 20px;
}
/* ======================================
   COLUMNA ÚNICA 150px
====================================== */

.columna-ensayo{

width:150px;

font-size:13px;
line-height:1.35;

font-family: Arial, Helvetica, sans-serif;

text-align:center;

}

/* bloques internos */

.bloque{

padding:8px;

border:1px solid #5a0000;

box-shadow:0 0 6px rgba(200,0,0,0.35);

background:#111;

margin-bottom:14px;

}

/* imagen circular (autor) */

.autor img{

width:85px;
height:85px;

border-radius:50%;

display:block;

margin:auto;

margin-bottom:6px;

border:2px solid #880000;

box-shadow:0 0 6px rgba(255,0,0,0.45);

}

/* imagen de libro */

.libro img{

width:100%;

height:auto;

display:block;

margin-bottom:6px;

box-shadow:0 0 6px rgba(255,0,0,0.35);

}

/* texto */

.bloque p{

margin:0;

text-align:center;

}

/* =====================================
   MASS MEDIA — CYBERFRACTAL CRT
===================================== */

.massmedia-columna{
    width: 147px;
    background: #0a0a0a;
    padding: 2px;
    border-left: 2px solid #550000;
    border-right: 2px solid #550000;
    position: relative;
    overflow: hidden;

}

/* scanlines CRT */

.massmedia-columna::before{

content:"";

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

background: repeating-linear-gradient(
0deg,
rgba(255,255,255,0.03) 0px,
rgba(255,255,255,0.03) 1px,
transparent 2px,
transparent 4px
);

pointer-events:none;

animation:scan 7s linear infinite;

}

/* ruido televisivo */

.massmedia-columna::after{

content:"";

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

background-image:url("images/noise.png");
opacity:0.05;

mix-blend-mode:screen;

pointer-events:none;

animation:noise 0.5s steps(3) infinite;

}

/* imágenes */

.massmedia-columna img{

display:block;
width:100%;
height:auto;

margin:12px 0;

filter:contrast(110%) brightness(92%);

box-shadow:

0 0 8px rgba(180,0,0,0.35),
0 0 14px rgba(120,0,0,0.25);

transition:all 0.35s ease;

animation:fractalPulse 9s ease-in-out infinite;

}

/* glitch RGB */

.massmedia-columna img:hover{

transform:scale(1.05);

filter:
contrast(140%)
brightness(110%)
drop-shadow(-1px 0 red)
drop-shadow(1px 0 cyan);

animation:glitch 0.35s linear;

}

/* pulso fractal */

@keyframes fractalPulse{

0%{filter:contrast(110%) brightness(92%);}
50%{filter:contrast(120%) brightness(100%);}
100%{filter:contrast(110%) brightness(92%);}

}

/* scanlines */

@keyframes scan{

0%{transform:translateY(0);}
100%{transform:translateY(6px);}

}

/* ruido */

@keyframes noise{

0%{opacity:0.04;}
50%{opacity:0.06;}
100%{opacity:0.04;}

}

/* glitch */

@keyframes glitch{

0%{transform:translate(0);}
25%{transform:translate(-2px,1px);}
50%{transform:translate(2px,-1px);}
75%{transform:translate(-1px,-2px);}
100%{transform:translate(0);}

}
