:root{
  --bg:#000;
  --card:#3c332f;
  --muted:#ffb400;
  --accent:#f00;
  --accent-2:#ff6000;
  --accent-3:#ffcb00;
  --accent-4:#afff00;
  --glass: rgba(255, 255, 255, 0.05);
  --radius:22px;
  --safe-font: Impact, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

body{
  margin:0; 
  font-family:var(--safe-font); 
  background:radial-gradient(circle at center, rgba(255,183,0,0.08), var(--bg) 80%);
  color:#fff; 
  display:grid; 
  place-items:center; 
  padding:32px;
  animation: bgPulse 8s infinite alternate;
}

/* Marco principal */
.recuadro{
  /*! background:var(--glass); */
  /*! border-radius:var(--radius); */
  padding:20px;
  /*! border:1px solid rgba(255,255,255,0.1); */
  /*! box-shadow:0 0 40px var(--accent-2); */
  /*! animation: cardGlow 4s infinite alternate; */
  /*! width:90%; */
  /*! max-width:1200px; */
  /*! margin:auto; */
}

/* Título */
.titular {
  color: #fff;
   overflow: auto;
  text-align: center;
  margin-top: 0.2rem;
}

.titular h1{
  margin:0 0 16px; 
  font-size: 3rem;
  text-align:center;
    margin: 0;
      font-family: Impact;
  text-shadow:0 0 18px var(--accent), 0 0 28px var(--accent-2);
  animation: glowText 2s infinite alternate;
  animation: rainbold 1.5s linear infinite;
}

main {
  width: 100%;
  min-height: 100%;
  background-color: #00000055;
}

.superior{
  /*
  width: 221.9rem;
  display: block;
  margin:0;
  background:linear-gradient(90deg, var(--accent), var(--accent-3));
padding:14px; border-radius:12px; text-shadow:0 0 12px #000; font-size:20px;
animation: pulseMessage 2.5s infinite alternate;
   transform: skew(-1deg, 1deg) scaleY(1); */
}
.inferior{
  /*
  width: 242.9rem;
  display: block;
   margin:0;
   background:linear-gradient(90deg, var(--accent), var(--accent-3));
padding:14px; border-radius:12px; text-shadow:0 0 12px #000; font-size:20px;
animation: pulseMessage 2.5s infinite alternate;
    transform: skew(1deg, -1deg) scaleY(1); */
}


/* Bloques de contenido */
.textoimg{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.02));
  border-radius:var(--radius); 
  padding:36px;
  border:1px solid rgba(255,255,255,0.05);
  box-shadow:0 0 48px #fff, 0 0 72px #bf0;
  animation: cardGlow 3s infinite alternate;
  width:80%;
  margin:1% auto;
  display:block; 
  flex-direction:column;
  gap:20px;
}

/* Imágenes dentro del bloque */
.textoimg img{
  max-width:100%;
  height: 200px;
  border-radius:12px;
  box-shadow:0 0 20px rgba(255,183,0,0.4); 
  object-fit:cover;
  display:block;
  margin:auto;
}

.miniatura {

  border: 2px solid #0A0A0B55;

  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* Centrado y legibilidad de texto */
.textoimg h2, 
.textoimg p{
  text-align:center;
}

.right{
  display: inline-block;
  width: 49.5%;
  background:linear-gradient(90deg, #0028ff, #38ff00, #f00);
padding:14px; border-radius:12px; text-shadow:0 0 12px #000; font-size:20px;
animation: pulseMessage 2.5s infinite alternate;
  margin-left: 5px;
  padding: .09113rem;
  
 /*  transform: skew(-2deg, 2deg) scaleY(1);
   transition: 2s; */
}
.right img, .left img{
  height:auto;
  border-radius:12px;
  box-shadow:0 0 20px rgba(255,183,0,0.4); 
  object-fit:cover;
  display:block;

   margin: 10px auto auto;
   clear: both;
  border: none;
 
}

 /* .right:active{
        transform: skew(-10deg, 30deg) scaleY(.66667); 
} */

.left{
  display: inline-block;
  width: 49.5%;
  background:linear-gradient(90deg, #00f3ff, #38ff00, #fffb00, #ff6000, #f00);
padding:14px; border-radius:12px; text-shadow:0 0 12px #000; font-size:20px;
animation: pulseMessage 2.5s infinite alternate;
  /*   transform: skew(2deg, -2deg) scaleY(1);
	 transition: 2s; */
}

/* Botonera */
.botonera{
  display:flex; 
  flex-wrap:wrap;
  gap:12px; 
  margin:20px 0;
  justify-content:center;
}

.boton{
  padding:12px 18px; 
  border-radius:12px; 
  cursor:pointer;
  font-weight:900; 
  background:linear-gradient(90deg,#d3ff00,var(--accent-2));
  color:#1b0e0b; 
  text-align:center;
  transition: transform 160ms ease;
  animation: buttonGlow 2s infinite alternate;
}
.boton:active{ transform:scale(0.95); }
.boton.activo{ background:linear-gradient(90deg,var(--accent-3),var(--accent-4)); }

/* Contenido dinámico */
.contenido{
  background:linear-gradient(90deg, #8bff00, #ffb300);
  border-radius:12px;
  text-shadow:0 0 12px #000; 
  font-size:18px;
  margin-bottom:20px;
      border:1px solid #00000022;
        margin-top:15px;
    padding:20px;
    display:none;
}

.trabajo{
  display: inline-block;
background-color:#0A0A0B55;
border: 1px #0A0A0B55;
min-width: 250px; 
height: 250px;
margin: 30px;
padding: 5px;
  border-radius:12px;
    box-shadow:0 0 20px rgba(255,183,0,0.4); 
  object-fit:cover;
text-align: center;
}


.trabajo:hover{
  transform:scale(1.2, 1.2);
}

.videos{
    width: 50%;
    height: 315px;
}

/* Formularios */
input, textarea{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(0,0,0,0.4);
  color:#fff;
  font-family:var(--safe-font);
}

label{ font-weight:600; margin-top:10px; display:block; }

button{
  padding:12px 18px; 
  border-radius:12px; 
  border:none;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#1b0e0b; 
  font-weight:900; 
  cursor:pointer;
  transition: transform 160ms ease;
  animation: buttonGlow 2s infinite alternate; 
  margin-top:18px;
}
button:active{ transform:scale(0.95); }

/* Animaciones */
@keyframes glowText {
  0%{ text-shadow:0 0 18px var(--accent), 0 0 28px var(--accent-2); color:var(--accent); }
  50%{ text-shadow:0 0 28px var(--accent-3), 0 0 42px var(--accent-4); color:var(--accent-3); }
  100%{ text-shadow:0 0 18px var(--accent), 0 0 28px var(--accent-2); color:var(--accent); }
}

@keyframes pulseMessage {
  0%{ transform:scale(1); box-shadow:0 0 10px var(--accent), 0 0 20px var(--accent-3); }
  50%{ transform:scale(1.05); box-shadow:0 0 20px var(--accent-2), 0 0 40px var(--accent-4); }
  100%{ transform:scale(1); box-shadow:0 0 10px var(--accent), 0 0 20px var(--accent-3); }
}

@keyframes buttonGlow {
  0%{ box-shadow:0 0 10px var(--accent), 0 0 20px var(--accent-2); }
  50%{ box-shadow:0 0 20px var(--accent-3), 0 0 40px var(--accent-4); }
  100%{ box-shadow:0 0 10px var(--accent), 0 0 20px var(--accent-2); }
}

@keyframes cardGlow {
  0%{ box-shadow:0 0 48px var(--accent), 0 0 72px var(--accent-2); }
  50%{ box-shadow:0 0 60px var(--accent-3), 0 0 90px var(--accent-4); }
  100%{ box-shadow:0 0 48px var(--accent), 0 0 72px var(--accent-2); }
}

@keyframes bgPulse {
  0%{ background:radial-gradient(circle at center, rgba(255,183,0,0.06), var(--bg) 80%); }
  50%{ background:radial-gradient(circle at center, rgba(255,183,0,0.12), var(--bg) 80%); }
  100%{ background:radial-gradient(circle at center, rgba(255,183,0,0.06), var(--bg) 80%); }
}