/* Reset básico */

@font-face { 
    /* con Font-Face podemos establecer una fuente incrustada a partir de un archivo tipo fuente */
    font-family: Deltha; 
    src: url('Deltha.ttf'); 
} 
@font-face{
  font-family:Mokoto;
  src:url('MokotoDemo.ttf');
}
@font-face{
  font-family:Automata;
  src: url('AUTOMATA.ttf');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, html {
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: #011226;
  color: #eee;
  overflow: hidden;
}
h1{
  font-family: 'Deltha', Courier New, monospace;
  color: white;
  font-size: 32px;
}
.h2-resaltado{
  border: solid #00eaff 1px;
  margin:0.5em;
  text-align: center;
  font-size: 24px;
  border-radius: 5px;
}
h2{
  font-family: 'Deltha', Courier New, monospace;
  color: white;
  font-size: 24px;
}
h3{
  font-family: 'Deltha', Courier New, monospace;
  color: white;
  font-size: 20px;
}

/* Zona superior (menu_principal) */
#menu_principal {
  height: 10%;
  width: 100%;
  /*background: rgba(20,20,20,0.9);*/
  display: flex;
  left:0%;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  position: relative;
  margin-top:10px;
  z-index: 10;
  overflow-x: auto;    /* activa scroll horizontal */
  white-space: nowrap; /* evita saltos de línea */
  justify-content: center; /* los pone alineados a la izquierda */
  padding: 0.5rem;
}

#menu_principal::-webkit-scrollbar {
  display: none; /* oculta scrollbar en móviles */
}
.btn_header {
  display: inline-block;
}

.btn_header a{
  height: 50px;
  /*margin: 5px;*/
  width: 240px;
  text-align:center;
  background: #333;
  align-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: 'Deltha','Aerospace Regular', Courier New, monospace;
  border: solid #00eaff 1px;
  font-size: 16px;
  -webkit-transition: 500ms;
  transition: 500ms;
  border-radius: 5px;
  background: linear-gradient(145deg, #2e2d2d, #212121);
  -webkit-box-shadow: -1px -5px 15px #5f95ac, 5px 5px 15px #5f95ac,
    inset 5px 5px 10px #212121, inset -5px -5px 10px #212121;
  box-shadow: -1px -5px 15px #5f95ac, 5px 5px 15px #5f95ac,
    inset 5px 5px 10px #212121, inset -5px -5px 10px #212121;
  display: block;
}

#menu_principal a {
  background: transparent;
  border: none;
  color: #eee;
  font-size: 1.2rem;
  /*padding: 0.5rem 1rem;*/
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
  text-decoration: none;
  align-content: center;
  text-align:center;
  margin:0.5rem;
}
#menu_principal a::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  left: 0;
  bottom: -5px;
  background: #00eaff;
  transition: width 0.3s ease;
}
#menu_principal a:hover {
  color: #00eaff;
}
#menu_principal a:hover::after {
  width: 100%;
}

/* Zona lateral izquierda */
#menu_lateral {
  position: absolute;
  top: 10%;
  bottom: 5%;
  left: -10%;
  width: 15%;
  height: 90%;
  z-index: 800; 
  background-image: url(./images/imagen_lateral.jpg);
  background-repeat: no-repeat;     /* se repetirá horizontalmente */
  background-size: cover;          /* adapta la imagen */
  background-position: 0 0;        /* punto inicial */
  padding: 1rem;
  overflow-y: auto;
  transition: left 0.5s ease;
  border-radius: 0 15px 15px 0;
  box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);
}
#menu_lateral:hover {
  left: 0;
}
#sidebar:hover #menu_lateral {
  left: 0; /* se despliega al hacer hover */
}

#menu_lateral button {
  display: block;
  font-family: 'Automata','Aerospace Regular', Courier New, monospace;
  background: transparent;
  border: none;
  color: white;
  padding: 1rem;
  text-align: left;
  margin-top:0.8rem;
  margin-bottom: 0.8rem;
  font-size: 1rem;
  cursor: pointer;
  height: 45px;
  width: 90%;
  border: solid #00eaff 1px;
  font-size: 14px;
  -webkit-transition: 500ms;
  transition: 500ms;
  border-radius: 5px;
  background: linear-gradient(145deg, #2e2d2d, #212121);
  -webkit-box-shadow: -1px -5px 10px #5f95ac, 5px 5px 10px #5f95ac,
    inset 5px 5px 5px #212121, inset -5px -5px 5px #212121;
  box-shadow: -1px -5px 10px #5f95ac, 5px 5px 10px #5f95ac,
    inset 5px 5px 5px #212121, inset -5px -5px 5px #212121;
}
.red{
  display: block;
  width: 100%;
  font-family: 'Automata','Aerospace Regular', Courier New, monospace;
  background: transparent;
  border: none;
  color: white;
  padding: 1rem;
  text-align: left;
  margin-top:1rem;
  margin-bottom: 1.2rem;
  font-size: 1rem;
  cursor: pointer;
  height: 50px;
  width: 90%;
  border: solid red 1px;
  font-size: 16px;
  -webkit-transition: 500ms;
  transition: 500ms;
  border-radius: 5px;
  background: linear-gradient(145deg, #2e2d2d, #212121);
  -webkit-box-shadow: -1px -5px 10px #5f95ac, 5px 5px 10px #5f95ac,
    inset 5px 5px 5px #212121, inset -5px -5px 5px #212121;
  box-shadow: -1px -5px 10px #5f95ac, 5px 5px 10px #5f95ac,
    inset 5px 5px 5px #212121, inset -5px -5px 5px #212121;
}
#menu_lateral button:hover {
  color: #00eaff;
  border: solid white 2px;
}

/* Zona principal */

#contenido {
  position: absolute;
  top: 10%;
  left: 0;
  margin-left: 5%;
  width: 95%;
  height: 90%;
  background: rgba(15,15,15,0.9);
  background-image: url(./images/background_TECNO.jpg);
  background-repeat: no-repeat;    /* Evita que se repita */
  background-size: cover;          /* Extiende la imagen cubriendo el contenedor */
  padding: 2rem;
  overflow-y: auto;
}

.bloque-p{
    background-color: #00000022; /* Fondo semi-transparente */
    color: #ffffff; /* Texto blanco */
    text-shadow: 2px 2px black;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    border-radius: 8px;
}
.bloque-texto{
    width: 80%;
    background-color: #00000011; /* Fondo semi-transparente */
    color: #ffffff; /* Texto blanco */
    text-shadow: 2px 2px black;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    padding: 20px;
    border-radius: 8px;
    line-height: 1.6;
}
.texto-corpo {
  position: fixed;    /* Posición fija en la pantalla */
  top: 22%;          /* Distancia desde el borde superior */
  margin-left:2%;
  margin-right: 2%;
  z-index: 500;      /* Asegura que esté por encima del contenido */
  width: 45%;      /* Ancho del div */
  padding: 20px;
  max-height: 700px;       /* Altura automática */
  background-color: #ffffff11; /* Color de fondo */
  border: 1px solid #00eaff;   /* Borde opcional */
  border-radius: 4px;       /* Esquinas redondeadas */
  line-height: 1.2;
  text-shadow: 2px 2px black;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Sombra */
  overflow-y: auto;
}
.texto-corpo2 {
  position: fixed;    /* Posición fija en la pantalla */
  top: 22%;          /* Distancia desde el borde superior */
  left: 55%;
  margin-left:2%;
  margin-right: 2%;
  z-index: 500;      /* Asegura que esté por encima del contenido */
  width: 25%;      /* Ancho del div */
  padding: 20px;
  max-height: 700px;       /* Altura automática */
  background-color: #ffffff11; /* Color de fondo */
  border: 1px solid #00eaff;   /* Borde opcional */
  border-radius: 4px;       /* Esquinas redondeadas */
  line-height: 1.2;
  text-shadow: 2px 2px black;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Sombra */
  overflow-y: auto;
}
.logo-corporation {
    position: fixed;    /* Posición fija en la pantalla */
    top: 22%;          /* Distancia desde el borde superior */
    right: 5%;        /* Distancia desde el borde derecho */
    z-index: 500;      /* Asegura que esté por encima del contenido */
    background-color: #ffffff11; /* Color de fondo */
    border: 4px solid #ddd;   /* Borde opcional */
    border-radius: 4px;       /* Esquinas redondeadas */
}
.texto-cliente {
  position: fixed;    /* Posición fija en la pantalla */
  top: 17%;          /* Distancia desde el borde superior */
  left: 25%;        /* Distancia desde el borde izquierdo */
  z-index: 500;      /* Asegura que esté por encima del contenido */
  width: 50%;      /* Ancho del div */
  padding: 20px;
  max-height: 700px;       /* Altura automática */
  background-color: #ffffff11; /* Color de fondo */
  border: 1px solid #00eaff;   /* Borde opcional */
  border-radius: 4px;       /* Esquinas redondeadas */
  line-height: 1.2;
  text-shadow: 2px 2px black;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Sombra */
  overflow-y: auto;
}
.texto-cliente2 {
  position: fixed;    /* Posición fija en la pantalla */
  top: 17%;          /* Distancia desde el borde superior */
  right:3%;
  margin-left:30px;
  z-index: 600;      /* Asegura que esté por encima del contenido */
  width:20%;      /* Ancho del div */
  padding: 20px;
  max-height: 700px;       /* Altura automática */
  background-color: #ffffff11; /* Color de fondo */
  border: 1px solid #00eaff;   /* Borde opcional */
  border-radius: 4px;       /* Esquinas redondeadas */
  line-height: 1.2;
  text-shadow: 2px 2px black;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Sombra */
  overflow-y: auto;
}
.apodo-cliente {
  position: absolute;    /* Posición fija en la pantalla */
  top:20px;         /* Distancia desde el borde superior */
  left:10px;
  font-style:normal;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
  font-size: small;
  text-shadow: 2px 2px black;
  margin-left:1%;
  z-index:800;
}
.frase-cliente {
  position: absolute;    /* Posición fija en la pantalla */
  bottom:10px;         /* Distancia desde el borde superior */
  right:10px;
  font-style: italic;
  font-family: 'Courier New', Courier, monospace;
  font-size: smaller;
  text-shadow: 2px 2px black;
  margin-left:1%;
  z-index:400;
}
.foto-cliente {
    position: fixed;    /* Posición fija en la pantalla */
    top: 17%;          /* Distancia desde el borde superior */
    z-index: 500;      /* Asegura que esté por encima del contenido */
    width: 300px;       /* Ancho del div */
    height: 700px;       /* Altura automática */
    background-color: #ffffff11; /* Color de fondo */
    border: 1px solid #00eaff;   /* Borde opcional */
    border-radius: 4px;       /* Esquinas redondeadas */
    padding: 2px;            /* Espaciado interno */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Sombra */
}
.year-fixed{
  position:fixed;
  bottom:10px;
  right:20px;
  border-radius:2px;
  padding:0.5em;
  padding-left:1em;
  padding-right:1em;
  z-index:1000;
}
.elemento-fixed{
  position:fixed;
}
.elemento-sticky {
    position: sticky;
    top: 0;
    z-index: 1000;
}
.container{
    position: relative; /* Necesario para el centrado absoluto */
    min-height: 100vh; /* Asegura que ocupe toda la altura de la ventana */
}/*
.container-redacted {
      position: relative;
      display: inline-block;
}*/
 .container-redacted {
            position: relative;
            margin: 25px 0;
            background: rgba(22, 27, 34, 0.8);
            border-radius: 8px;
            padding: 15px;
            border: 1px solid #30363d;
        }
        
        .redacted-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .redacted-overlay {
            position: relative;
            background: linear-gradient(45deg, #0d1117, #161b22);
            color: white;
            padding: 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.6s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            margin-top: 10px;
        }
        
        .redacted-overlay:hover {
            background: linear-gradient(45deg, #161b22, #1c2128);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
        }
        
        .redacted-overlay.hidden {
            opacity: 0;
            height: 0;
            padding: 0;
            margin: 0;
            pointer-events: none;
        }
        
        .texto-secreto {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.8s ease;
            font-style: italic;
            font-size: 0.95rem;
            line-height: 1.5;
        }
        
        .texto-secreto.revealed {
            max-height: 500px;
        }
        
        .token {
            width: 64px;
            height: auto;
            margin-right: 15px;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(79, 140, 201, 0.5);
        }

.foto-cliente img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-foto {
  text-align: center;
  margin: 20px 0; /* opcional, para que respire */
}
.main-foto img {
  max-width: 100%; /* para que no desborde en pantallas pequeñas */
  height: auto;
  box-shadow: 0 6px 12px rgba(130, 203, 246, 0.4);
}


.fade-out {
  opacity: 1; /* empieza visible */
  animation: fadeOut 20s forwards;
  animation-delay: 5s; /* espera 5s antes de empezar fade */
}

/* Imagen 2 */
.fade-in {
  opacity: 0; /* empieza oculta */
  animation: fadeIn 20s forwards;
  animation-delay: 15s; /* espera 15s antes de aparecer */
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}

/*
Parte del Timeline
/////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////
/* Timeline Container */
.timeline {
  background: var(--primary-color);
  margin: 20px auto;
  padding: 20px;
}

/* Card container */
.card {
  position: relative;
  max-width: 500px;
}

/* setting padding based on even or odd */
.card:nth-child(odd) {
  padding: 30px 0 30px 30px;
}
.card:nth-child(even) {
  padding: 30px 30px 30px 0;
}
/* Global ::before */
.card::before {
  content: "";
  position: absolute;
  width: 50%;
  border: solid #00eaff;
 
    
}

/* Setting the border of top, bottom, left */
.card:nth-child(odd)::before {
  left: 0px;
  top: -4.5px;
  bottom: -4.5px;
  border-width: 5px 0 5px 5px;
  border-radius: 50px 0 0 50px;
}

/* Setting the top and bottom to "-5px" because earlier it was out of a pixel in mobile devices */
@media only screen and (max-width: 400px) {
  .card:nth-child(odd)::before {
    top: -5px;
    bottom: -5px;
  }
}

/* Setting the border of top, bottom, right */
.card:nth-child(even)::before {
  right: 0;
  top: 0;
  bottom: 0;
  border-width: 5px 5px 5px 0;
  border-radius: 0 50px 50px 0;
}

/* Removing the border if it is the first card */
.card:first-child::before {
  border-top: 0;
  border-top-left-radius: 0;
}

/* Removing the border if it is the last card  and it's odd */
.card:last-child:nth-child(odd)::before {
  border-bottom: 0;
  border-bottom-left-radius: 0;
}

/* Removing the border if it is the last card  and it's even */
.card:last-child:nth-child(even)::before {
  border-bottom: 0;
  border-bottom-right-radius: 0;
}

/* Information about the timeline */
.info {
  display: flex;
  flex-direction: column;
  background: #333;
  color: rgb(194, 194, 194);
  border-radius: 10px;
  padding: 10px;
  font-size:smaller;
  text-shadow: 1px 1px black;
}

/* Title of the card */
.title {
  color: white;
  position: relative;
}

/* Timeline dot  */
.title::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 999px;
  border: 3px solid orangered;
}
.title:hover::before {
  background: orangered;   /* cambia el relleno */
  transform: scale(1.2);   /* un pequeño zoom */
  transition: transform 0.2s ease, background 0.2s ease;
  cursor:pointer;
}

/* text right if the card is even  */
.card:nth-child(even) > .info > .title {
  text-align: right;
}

/* setting dot to the left if the card is odd */
.card:nth-child(odd) > .info > .title::before {
  left: -45px;
}

/* setting dot to the right if the card is odd */
.card:nth-child(even) > .info > .title::before {
  right: -45px;
}

/*
Parte para la imagen que se carga como modal
*/
/* Modal (fondo oscuro) */
.modal {
  display: none; /* oculto por defecto */
  position: fixed;
  z-index: 9999;
  inset: 0; /* top, right, bottom, left = 0 */
  background-color: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
}

/* Imagen dentro del modal */
.modal-content {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 25px rgba(0,0,0,0.8);
}

/* Botón cerrar */
.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover {
  color: orangered;
}
/* Flechas del carrusel */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 12px;
  color: white;
  font-weight: bold;
  font-size: 35px;
  user-select: none;
  transition: 0.3s;
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

.prev:hover, .next:hover {
  color: orangered;
}

.slideshow-js {
  overflow: hidden;
  position: fixed;
  top: 17%;
  z-index: 500;
  width: 300px;
  height: 700px;
  background-color: #ffffff11;
  border: 1px solid #00eaff;
  border-radius: 4px;
  padding: 2px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
  align-items: center;
 
}

.slideshow-js img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 5s ease-in-out; /* ← duración del fade */
  z-index: 0;
}

.slideshow-js img.active {
  opacity: 1;
  z-index: 1;
}
/* ===========================================================
   RESPONSIVE + GRID SOLO PARA LA PÁGINA DE CLIENTE
   (sin romper tu diseño original: mismas fuentes, fondos y botones)
   =========================================================== */

/* Desktop/Tablet: tres columnas: foto | texto1 | texto2 (fila única) */
#contenido .container {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1.5fr 1fr; /* FOTO | TEXTO1 | TEXTO2 */
  grid-template-areas: "foto texto texto2";
  gap: 1rem;
  align-items: start;
}

/* Recolocación no intrusiva: solo dentro del container del contenido */
#contenido .container .foto-cliente {
  position: relative !important;         /* deja de ser fixed SOLO aquí */
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 7;        /* similar a 300x700 */
  min-height: 320px;          /* asegura presencia en pantallas estrechas */
}

#contenido .container .texto-cliente,
#contenido .container .texto-cliente2,
#contenido .container .apodo-cliente {
  position: relative !important;         /* dejan de ser fixed SOLO aquí */
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-height: none;
  margin: 0;                  /* controlado por el grid */
  z-index: auto !important;
}

/* Áreas del grid */
#contenido .container .foto-cliente   { grid-area: foto; }
#contenido .container .texto-cliente  { grid-area: texto; }
#contenido .container .texto-cliente2 { grid-area: texto2; }
/* Si quieres que el apodo vaya en toda la anchura bajo todo, descomenta: */
/* #contenido .container .apodo-cliente { grid-column: 1 / -1; } */

/* Mantener la superposición de imágenes (ya la tienes con absolute) */
#contenido .container .foto-cliente img {
  position: absolute;
  top: 0;
  left: 0;
}

/* Tablet mediana */
@media (max-width: 1024px) {
  #contenido .container {
    grid-template-columns: minmax(200px, 260px) 1fr 1fr;
  }
}

/* Móvil: apilar en orden lógico: foto -> texto -> texto2 */
@media (max-width: 768px) {
  #contenido .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "foto"
      "texto"
      "texto2";
  }
  #contenido .container .foto-cliente {
    aspect-ratio: 3 / 4;   /* un poco menos alta en móvil */
    min-height: 260px;
  }
  /* Si quieres centrar el apodo en móvil: */
  #contenido .container .apodo-cliente {
    text-align: center;
    margin: .5rem 0;
  }
}

/* Micro-móvil */
@media (max-width: 420px) {
  #contenido {
    padding: 1rem;
  }
  #menu_principal {
    gap: 1rem;
  }
  .btn_header a {
    width: auto;
    min-width: 100px;
    font-size: 10px;
  }
}