/* Reseteo básico y estilos generales */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
  font-family: 'Essays 1743';
  /* Asegúrate de que la ruta sea correcta */
  src: url('fonts/Essays1743.ttf') format('truetype');
}


@font-face {
  font-family: 'Essays 1743itali';
  /* Asegúrate de que la ruta sea correcta */
  src: url('fonts/Essays1743-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Essays 1743bol';
  /* Asegúrate de que la ruta sea correcta */
  src: url('onts/Essays1743-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Essays 1743italibol';
  /* Asegúrate de que la ruta sea correcta */
  src: url('fonts/Essays1743-BoldItalic.ttf') format('truetype');
}





body {
    font-family: "Essays 1743",'Essays 1743itali','Essays 1743bol','Essays 1743italibol'; /* Fallback añadido */
    background-image: url("images/gilbert-bg.jpeg");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Estilos del Contenedor Principal Fijo --- */
.main-container {
    /* Tamaño fijo según el diseño */
   /* width: 1000px;
    height: 650px; */
    width: 70%;
    height: 70%;
    background-color: #fff;
    border: 3px solid #214011; /* Borde simulando el dibujo */
    border-radius: 25px; /* Esquinas redondeadas */
    padding: 25px;
    /* Flexbox para organizar el contenido interno verticalmente */
    display: flex;
    flex-direction: column;
}

/* --- Sección Superior (Izquierda + Derecha Scrollable) --- */
.top-section {
    display: flex;
    /* Ocupa todo el espacio vertical disponible menos el que usen las imágenes de abajo */
    flex: 1; 
    gap: 30px; /* Espacio entre columna izquierda y derecha */
    /* Es IMPORTANTE limitar la altura aquí para que el scroll funcione dentro */
    overflow: hidden; 
    margin-bottom: 20px; /* Espacio antes de las imágenes inferiores */
}

/* Columna Izquierda */
.left-column {
    flex: 0 0 250px; /* Ancho fijo para la columna de la foto */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.go-home {
  font-family: "Essays 1743itali";
  position: fixed; top: 22px; left: 35px; 
  z-index: 99991;
  color: white;
  font-size: 1.3rem; 
  }


.photo-placeholder {
    width: 100%;
    height: 300px; /* Altura de la foto */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.main-title {
  font-family: "Essays 1743itali";
    margin-top: -60px;
    margin-left: 8px;
    font-size: 3rem;
    color: #222;
    line-height: 0.9;
    text-transform: capitalize;
    padding-bottom: 10px;
}

.subtitle-text {
  line-height: 1.3;
  }


/* Columna Derecha (SCROLLABLE) */
.right-scrollable-area {
    flex: 1; /* Ocupa el resto del ancho */
    /* ESTA ES LA CLAVE DEL SCROLL: */
    overflow-y: auto; /* Muestra barra de scroll vertical si el contenido se pasa */
    padding-right: 15px; /* Espacio para que el texto no toque la barra de scroll */
    padding-left: 20px;
}

/* Estilizar la barra de scroll (opcional, para navegadores modernos) */
.right-scrollable-area::-webkit-scrollbar {
    width: 8px;
}
.right-scrollable-area::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 4px;
}

.text-block {
    margin-bottom: 25px;
}

.secondary-title {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: #444;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.right-scrollable-area p {
    line-height: 1.6;
    color: #555;
    text-align: justify;
}

/* --- Sección Inferior (3 Imágenes Cuadradas) --- */
.bottom-images-container {
    display: flex;
    justify-content: center; /* Distribuye el espacio entre las imágenes */
    align-items: center;
    height: 130px; /* Altura fija para esta sección */
    padding-top: 20px;
}

.square-image {
    width: 200px;
    height: 150px;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Imágenes Flotantes en las Esquinas (Fijas y por encima) --- */
.floating-corner {
    position: fixed; /* Se queda fijo en la pantalla, ignora el flujo normal */
    width: 80px;
    background-color: transparent; /* Color llamativo para destacar */
    color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    font-size: 0.8rem;
    z-index: 999; /* Asegura que estén por encima de TODO */
}

.bottom-left {
    bottom: 50px;
    /* Calculamos para que se alineen con el borde del contenedor de 900px */
    left: calc(50% - 450px - 50px);
    height:120px;
}

.bottom-right {
    bottom: 0px;
    /* Calculamos para que se alineen con el borde derecho del contenedor */
    right: calc(50% - 450px - 60px);
    height: 500px;
}

/* Estilos generales para todos los bordes */
.encaje-borde {
  position: fixed; /* Se queda fijo en la pantalla aunque hagas scroll */
  z-index: 9999; /* Asegura que esté por encima de todo el contenido */
  pointer-events: none; /* ¡CRUCIAL! Permite hacer clic "a través" de la imagen en los botones o enlaces que queden debajo */
}

/* --- Bordes Horizontales (Arriba y Abajo) --- */
.encaje-arriba, .encaje-abajo {
  left: 0;
  right: 0; /* Al poner left 0 y right 0, obligamos a que ocupe todo el ancho */
  height: 30px; /* ⚠️ CAMBIA ESTO por el grosor real de tu imagen de encaje horizontal */
  background-repeat: repeat-x; /* Hace que la imagen se repita solo de izquierda a derecha */
  background-size: contain; /* Ajusta la imagen al alto sin deformarla */
}

.encaje-arriba {
  top: 0;
  background-image: url('images/Photoroom_20260220_073312.png');
}

.encaje-abajo {
  bottom: 0;
  background-image: url('images/Photoroom_20260220_073312.png');
  /* Si usas la misma imagen de arriba pero quieres girarla, puedes añadir: */
  transform: rotate(180deg); 
}

/* --- Bordes Verticales (Izquierda y Derecha) --- */
.encaje-izq, .encaje-der {
  top: 0;
  bottom: 0; /* Al poner top 0 y bottom 0, obligamos a que ocupe todo el alto */
  width: 30px; /* ⚠️ CAMBIA ESTO por el grosor real de tu imagen de encaje vertical */
  background-repeat: repeat-y; /* Hace que la imagen se repita solo de arriba a abajo */
  background-size: contain;
}

.encaje-izq {
  left: 0;
  background-image: url('images/Photoroom_20260220_073556.png');
}

.encaje-der {
  right: 0;
  background-image: url('images/Photoroom_20260220_073556.png');
  /* Igual que antes, puedes girar la imagen de la izquierda si no tienes una específica para la derecha: */
  transform: scaleX(-1);
}

/* ENLACES */
.go-home a {
  color:white;
  text-decoration: none;
}

a {
  color:#214011;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  font-style: italic;
}

.go-home a:visited {
  text-decoration: none;
  color: white;
}

a:visited {
  text-decoration: underline;
  color: #214011;
}

/* Texto bajo el título */
.subtitle-text {
    font-size: 0.9rem;
    color: #666;
    margin-top: 5px
    
}

.imgtxt {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.imgtxt span {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  font-size: 2.5rem;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 black) 
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.imgtxt:hover span, .imgtxt:focus span {
  opacity: 1;
}
.imgtxt:hover img, .imgtxt:focus img {
  /* add hover effects like transform or filter to your images here! */
}