/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background: #121210;
  color: #c8b89a;
  font-family: 'Courier New', Courier, monospace;
  margin: 0px auto;
  padding: 40px;
  text-align: left;
  max-width: 900px;
}


.portada {
  border-bottom: 1px solid #4a483e;
  padding-bottom: 24px;
  margin-bottom: 60px;
}


h1 {
  font-size: 6rem;
  font-weight: normal;
  letter-spacing: -6px;
  margin-top: 0;
  margin-bottom: 5px;
}

h1 .nota-diccionario {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing:0px;
  color:#8e8b7e;
  max-width:250px;
  vertical-align: middle;
  margin-left: 12px;
  line-height: 1.2;
  font-family: arial, sans-serif;
}

h1 .idk-destacado {
  font-family: Georgia, 'Times New Roman', serif; /* La nueva tipografía */
  font-style: italic; /* Le da un toque manual/editorial */
  font-weight: normal;
  margin-left: -25px; /* Este es el imán: el valor negativo lo jala hacia "studio" */
  color: #c8b89a; /* Un tono ligeramente distinto para separarlo más, opcional */
}

.portada p {
  font-style: italic;
  color: #8e8b7e;
  margin-top: 0;
  font-size: 1.1rem;
}



.columna {
  display: inline-block;
  padding: 20px 40px;
  margin-right: 20px;
  vertical-align: top;
  text-align:left;
}


.galeria img {
  width: 220px;
  margin-right: 30px;
  border: 1px solid #4a483e; 
  padding: 5px;
  filter: grayscale(100%) contrast(0.8);
  transition: all 0.4s ease;
  transform: rotate(-3deg);
}

.galeria img:hover {
  filter: grayscale(0%) contrast(1);
  border-color: #d8d3c5;
  transform: rotate(0deg) scale(1.1);
}

.galeria {
  margin-top: 60px;
}

/* La excepción para formatos más grandes */
.galeria .imagen-grande {
  width: 480px; /* Un poco más del doble de las normales */
  max-width: 100%; /* Seguro contra pantallas pequeñas */
}


.columna h2 {
  font-size: 1rem;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #8e8b7e;
  border-bottom: 1px solid #4a483e;
  padding-bottom: 5px;
}

.columna li {
  margin-bottom: 10px;
}

.columna li::before{
  content: "+ ";
  color: #8e8b7e;
  font-weight: bold;
  margin-right: 10px;
}
  
  
a {
  color:#d8d3c5;
  text-decoration:none;
  border-bottom: 1px dotted #8e8b7e;
  transition: all 0.3s ease;
}
  
a:hover {
  color:#ffffff;
  border-bottom: 1px solid #ffffff;
}

.columna ul, columna ol{
  list-style: none;
  padding-left: 0;
}



/* --- BLOG --- */

/* La barra de navegación superior */
.navegacion-fina {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid #4a483e;
  padding-bottom: 15px;
  margin-bottom: 50px;
}

.navegacion-fina .separador {
  color: #4a483e;
  margin: 0 15px;
}

.navegacion-fina .ubicacion-actual {
  color: #8e8b7e;
}

/* El contenedor principal con doble borde estilo etiqueta */
.lienzo-editorial {
  max-width: 600px;         /* Una caja tipográfica estrecha y elegante */
  margin: 0 auto;
  border: 1px solid #4a483e;
  padding: 4px;             /* El primer margen (paspartú pequeño) */
}

/* El marco interno */
.etiqueta-cuarto {
  border: 1px dashed #4a483e; /* La textura de línea punteada */
  padding: 30px 40px;
  text-align: center;
  border-bottom: none;      /* Se fusiona con el contenido de abajo */
}

.etiqueta-cuarto h2 {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  letter-spacing: 4px;
  color: #d8d3c5;
  margin: 0 0 10px 0;
}

.etiqueta-cuarto p {
  font-family: Georgia, 'Times New Roman', serif; /* Letra de libro clásico */
  font-size: 0.9rem;
  font-style: italic;
  color: #8e8b7e;
  margin: 0;
}

/* El contenido (Blog o Galería) */
.contenido-fluido {
  border: 1px dashed #4a483e;
  border-top: 1px solid #4a483e; /* Una línea sólida para separar la cabecera */
  padding: 40px;
  background-color: #161614; /* Un tono microscópicamente más claro que el fondo oscuro para darle volumen */
}

/* Bloques de texto puro */
.bloque-texto {
  margin-bottom: 40px;
}

.micro-fecha {
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.7rem;
  color: #8e8b7e;
  margin-bottom: 10px;
}

.bloque-texto p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.1rem;
  line-height: 1.8;       /* Mucho aire entre las líneas de texto */
  color: #e4dccc;
  margin: 0;
}


/* ==========================================
   6. INTERACTIVIDAD (Lightbox y JS)
   ========================================== */

/* El fondo oscuro del Lente de Aumento */
#lightbox {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(18, 18, 16, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Asegura que flote por encima de todo */
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* La clase que lo esconde */
#lightbox.lightbox-oculto {
  opacity: 0;
  pointer-events: none;
}

/* La imagen expandida */
#lightbox-img {
  max-width: 90%;
  max-height: 90vh;
  border: 1px solid #4a483e;
  box-shadow: 0 0 40px rgba(0,0,0,0.8); /* Sombra dramática */
}

/* La "X" para cerrar */
.lightbox-cerrar {
  position: absolute;
  top: 30px; right: 40px;
  font-size: 3rem; 
  color: #8e8b7e;
  cursor: pointer;
  font-family: monospace;
}

.lightbox-cerrar:hover {
  color: #d8d3c5;
}

/* Un indicador visual de que el texto puede mutar */
.nota-diccionario {
  cursor: pointer;
  transition: color 0.3s;
}

.nota-diccionario:hover {
  color: #c8b89a;
}

.galeria img {
  cursor: pointer; /* Le dice al usuario que la imagen es clickeable */
}


/* ==========================================
   7. PIE DE PÁGINA (Footer)
   ========================================== */
.pie-de-pagina {
  margin-top: 80px;
  padding-top: 40px;
  padding-bottom: 60px;
  border-top: 1px dashed #4a483e; /* La misma línea punteada editorial */
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
}

.pie-info p {
  margin: 5px 0;
  color: #8e8b7e;
  font-size: 0.8rem;
}

.pie-info .advertencia {
  color: #d8d3c5;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 0.9rem;
  margin-bottom: 25px;
}

.pie-enlaces {
  font-size: 0.75rem;
  letter-spacing: 2px;
  margin-bottom: 30px;
}

.pie-enlaces .separador {
  color: #4a483e;
  margin: 0 10px;
}

/* Un toque extra: que el logo de Neocities brille un poco al pasar el mouse */
.pie-de-pagina img {
  transition: opacity 0.3s;
}

.pie-de-pagina img:hover {
  opacity: 1;
}


/* ==========================================
   8. LABORATORIO OCULTO (Experimentos)
   ========================================== */

/* ... (Los estilos del enlace .puerta-secreta-img se quedan igual) ... */

/* La atmósfera del sótano AHORA ES LA CUADRÍCULA */
.sala-experimental {
  width: 100vw;
  position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw; margin-top: 400px;
  min-height: 100vh;
  /* Le damos un poco más de aire a las orillas (5vw) para que el texto no pegue al monitor */
  padding: 40px 5vw; 
  background: #000000;
  border-top: 4px dashed #00FF00; border-bottom: 4px dashed #00FF00;
  box-sizing: border-box;
  
  display: grid;
  /* Aquí controlamos el ancho: 1 fracción (logo) | Centro (máximo 700px) | 1 fracción (texto) */
  grid-template-columns: 1fr minmax(300px, 700px) 1fr;
  gap: 40px;
  align-items: center; 
  overflow: hidden; 
}


/* ==========================================
   9. GRAPHIC DESIGN IS MY PASSION & ZONAS NEGRAS
   ========================================== */

/* El cartel central */
.graphic-design-passion {
  background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
  background-size: 400% 400%;
  animation: fondoArcoiris 5s ease infinite;
  
  width: 100%;
  padding: 40px 20px;
  text-align: center;
  font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif;
  border: 10px ridge #00FF00;
  box-shadow: inset 0 0 50px #000;
  box-sizing: border-box;
}

/* --- RECUPERAMOS EL MOBILIARIO INTERIOR --- */
.titulo-arcoiris {
  font-size: 3.5rem;
  color: #0000ff;
  text-shadow: 3px 3px 0px #ffff00, 6px 6px 0px #ff0000;
  margin: 20px 0;
  letter-spacing: -2px;
}

.texto-corredizo {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: bold;
  background-color: #000000; /* Regresa la franja negra */
  padding: 5px;
}

.zona-gifs img {
  width: 250px;
  margin: 20px 0;
  filter: contrast(1.5) saturate(2); 
}

.lista-passion {
  list-style: none; /* Quita los puntitos de la izquierda */
  padding: 0;
  font-size: 2.2rem;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 2px 2px 4px #000000;
}

.lista-passion li {
  margin: 15px 0;
  animation: parpadeo 1s linear infinite;
}
.lista-passion li:nth-child(2) { animation-delay: 0.2s; }
.lista-passion li:nth-child(3) { animation-delay: 0.4s; }
.lista-passion li:nth-child(4) { animation-delay: 0.6s; }

/* --- LOS ELEMENTOS LATERALES --- */
/* El logo a la izquierda */
.logo-iglesia {
  width: 100%;
  max-width: 200px;
  display: block;
  margin: 0 auto;
}

/* El contenedor del texto a la derecha */
.caja-mensaje-externa {
  width: 100%;
  display: flex;
  justify-content: center; /* Lo centra horizontalmente en su tercio de pantalla */
}

/* El texto estilo terminal hacker */
.caja-mensaje-externa p {
  color: #00FF00; 
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1rem;
  line-height: 1.6;
  border-left: 2px solid #00FF00;
  padding-left: 15px;
  text-align: left;
  
  /* EL CORSÉ: Lo obligamos a no medir más de 250px de ancho. 
     Esto forzará a las palabras a saltar de línea, dándole altura al bloque. */
  max-width: 250px; 
}

/* ----------------------------------------------------
   10. RESPONSIVE: EL TRUCO PARA EL CELULAR
   ---------------------------------------------------- */
@media (max-width: 950px) {
  .sala-experimental {
    grid-template-columns: 1fr; /* Colapsa la autopista a un solo carril vertical */
    padding: 60px 20px;
    height: auto; /* Permite que el cuarto crezca hacia abajo sin límite */
  }
  
  /* El orden de aparición en el celular */
  .graphic-design-passion {
    order: 1; /* El cartel brillante tiene prioridad y va hasta arriba */
  }
  
  .caja-mensaje-externa {
    order: 2; /* El texto va en medio */
    margin-top: 20px;
  }
  
  /* Le quitamos el corsé al texto para que no quede tan apretado en el cel */
  .caja-mensaje-externa p {
    max-width: 100%; 
  }

  .logo-iglesia-contenedor {
    order: 3; /* El logo se despide hasta el fondo de la página */
    margin-top: 40px;
  }
}

/* ==========================================
   11. RASTRO DEL CURSOR (Experimento JS)
   ========================================== */
.rastro-cursor {
  position: absolute;
  pointer-events: none; /* El fantasma: permite hacer clics a través del rastro */
  z-index: 9999; /* Asegura que flote por encima de absolutamente todo */
  font-size: 1.5rem; /* Tamaño del sello */
  
  /* El motor de evaporación: dura 0.8 segundos y se desvanece */
  animation: desvanecerRastro 0.8s ease-out forwards;
}

/* La física de la evaporación */
@keyframes desvanecerRastro {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    /* Se hace pequeñito y flota un poco hacia arriba como humo */
    transform: scale(0.2) translateY(-20px); 
  }
}

/* ==========================================
   12. COLAPSO GRAVITACIONAL (Experimento JS 3)
   ========================================== */

/* El botón del pánico Y2K */
#btn-gravedad {
  background-color: #ff0000;
  color: #ffff00;
  font-family: 'Comic Sans MS', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 10px 20px;
  margin-top: 40px;
  border: 5px outset #cc0000; /* Borde en relieve 3D viejo */
  cursor: pointer;
  box-shadow: 5px 5px 0px #000;
  transition: all 0.1s;
}

/* Efecto al presionar el botón físicamente */
#btn-gravedad:active {
  border-style: inset; /* Se hunde el borde */
  transform: translate(3px, 3px); /* Se mueve hacia abajo */
  box-shadow: 2px 2px 0px #000;
}

/* La clase que inyectará JS para tirar los elementos */
.pieza-rota {
  /* Usamos una curva bezier para simular que empieza lento y acelera al caer */
  transition: transform 1.5s cubic-bezier(0.55, 0.085, 0.68, 0.53), opacity 1.5s ease-in !important;
  pointer-events: none; /* Para que no estorben mientras caen */
}


/* ==========================================
   13. FRUTIGER AERO EXPERIMENTS (Caos 2000s)
   ========================================== */

.aero-zone {
  width: 100vw;
  position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  /* El fondo de escritorio clásico: Cielo azul brillante arriba, césped verde abajo */
  background: linear-gradient(to bottom, #00BFFF 0%, #87CEFA 40%, #7CFC00 60%, #1E90FF 100%);
  padding: 80px 20px;
  font-family: Arial, Helvetica, sans-serif; /* Tipografía oficial de la época */
  overflow: hidden;
  box-shadow: inset 0 20px 50px rgba(255,255,255,0.8);
}

/* --- DECORACIONES CAÓTICAS --- */
.aero-deco {
  position: absolute;
  pointer-events: none; /* Para no bloquear los clics */
  filter: drop-shadow(0 10px 15px rgba(0,0,50,0.4));
}

/* Burbujas animadas */
.burbuja {
  position: absolute;
  bottom: -50px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(100,200,255,0.2));
  border: 2px solid rgba(255,255,255,0.6);
  box-shadow: 0 5px 10px rgba(0,100,200,0.2), inset -5px -5px 15px rgba(0,100,255,0.3);
  animation: flotarBurbuja infinite ease-in;
  pointer-events: none;
  z-index: 20;
}

@keyframes flotarBurbuja {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-1000px) scale(1.5); opacity: 0; }
}

/* Contenedores Principales */
.aero-container { max-width: 900px; margin: 0 auto 80px; }

.aero-header-title {
  text-align: center; margin-bottom: 40px;
  /* Títulos con contorno blanco exagerado */
  text-shadow: 
    -2px -2px 0 #fff, 2px -2px 0 #fff, 
    -2px 2px 0 #fff, 2px 2px 0 #fff,
    0px 5px 10px rgba(0,0,0,0.3);
}

.aero-header-title h2 { color: #0000CD; font-size: 2.5rem; letter-spacing: -1px; }

.aero-tag {
  display: inline-block;
  background: linear-gradient(to bottom, #fff, #87CEFA);
  padding: 6px 16px; border-radius: 20px;
  font-size: 0.8rem; font-weight: bold; color: #00008B;
  border: 2px solid #fff; box-shadow: 0 4px 8px rgba(0,0,100,0.3);
  margin-bottom: 10px;
}

/* --- EL EFECTO CAJA DE CRISTAL (GLOSSY BOX) --- */
.glossy-box {
  background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(150,220,255,0.3));
  border: 3px solid rgba(255,255,255,0.8);
  border-radius: 12px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 
    inset 0 0 20px rgba(255,255,255,1), 
    0 15px 30px rgba(0,0,100,0.3),
    0 0 0 1px rgba(0,150,255,0.3); /* Contorno cian brillante */
  position: relative;
  overflow: hidden;
}

/* El destello curvo de cristal en la parte superior */
.glass-glare {
  position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0));
  border-radius: 12px 12px 50% 50%;
  pointer-events: none; z-index: 1;
}

/* --- EXP 1: CAPAS --- */
.aero-layers-workspace { display: flex; gap: 20px; height: 400px; }
.aero-canvas { flex: 1; }
.aero-panel { width: 220px; padding: 20px; }

.aero-layer {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.4s ease; z-index: 2;
}

.layer-content { color: #00008B; font-size: 2rem; font-weight: bold; opacity: 0.5; text-shadow: 0 0 10px white; }

.aero-slider-wrap { display: flex; gap: 20px; height: 100%; position: relative; z-index: 2; }

/* Tubo de líquido */
.aero-vtrack {
  width: 16px; background: rgba(0,0,50,0.2); border-radius: 10px;
  position: relative; cursor: pointer; border: 1px solid rgba(255,255,255,0.5);
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
}

.aero-vtrack-fill {
  position: absolute; bottom: 0; left: 0; width: 100%;
  background: linear-gradient(to right, #00BFFF, #00FA9A); /* Líquido radioactivo azul/verde */
  border-radius: 10px; transition: height 0.1s;
  box-shadow: 0 0 15px #00FA9A;
}

/* La perilla de burbuja */
.aero-vtrack-thumb {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #1E90FF);
  border: 3px solid white; box-shadow: 0 5px 10px rgba(0,0,50,0.5);
  cursor: grab;
}

.aero-layer-list { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.aero-ll-item { font-size: 0.9rem; font-weight: bold; color: #0000CD; cursor: pointer; text-shadow: 0 1px 0 #fff; transition: 0.2s; }
.aero-ll-item.off { opacity: 0.3; filter: grayscale(100%); }

/* --- EXP 2: WIDGETS FLOTANTES ESTILO VISTA --- */
.aero-floor-space { height: 600px; }
.aero-hint {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: #fff; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  pointer-events: none; z-index: 2;
}

.aero-widget {
  position: absolute;
  background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(240,250,255,0.8));
  border: 1px solid #fff; border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0,50,150,0.4), inset 0 0 0 1px rgba(100,200,255,0.5);
  overflow: hidden; z-index: 10;
}

/* La barra estilo Windows */
.widget-drag-handle {
  background: linear-gradient(to bottom, #87CEFA, #1E90FF);
  padding: 6px 10px; display: flex; justify-content: space-between; align-items: center;
  cursor: grab; border-bottom: 1px solid rgba(255,255,255,0.5);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.8);
}
.widget-drag-handle:active { cursor: grabbing; }
.widget-drag-handle span { color: white; font-weight: bold; font-size: 0.8rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
.win-btn { 
  background: #ff4d4d; color: white; width: 16px; height: 16px; 
  border-radius: 3px; border: 1px solid #cc0000;
  display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: bold;
}

.widget-content { padding: 15px; color: #000080; }

.polaroid { width: 160px; text-align: center; }
.polaroid-img { height: 120px; background: rgba(0,100,200,0.1); border: 2px solid rgba(255,255,255,0.5); margin-bottom: 10px; display: flex; align-items: center; justify-content: center; }
.glossy-note { width: 220px; }
.glossy-note h4, .bubble-palette h4 { margin: 0 0 10px 0; border-bottom: 1px dashed #87CEFA; padding-bottom: 5px; }
.bubble-palette { width: 180px; }
.bubble-swatches { display: flex; gap: 8px; }
.bubble-swatches span { width: 25px; height: 25px; border-radius: 50%; border: 2px solid white; box-shadow: inset -3px -3px 5px rgba(0,0,0,0.2), 0 3px 5px rgba(0,0,0,0.3); }