@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Raleway:wght@400;500;600&display=swap");
/* $dark: #24242c; */
/* $info__title: clamp(1.375rem, 2vw + 60%, 26px); */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Archivo", sans-serif;
}

.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
/*Evita que las imágenes se puedan arrastrar (efecto fantasma) */
  img {
    -webkit-user-drag: none;
    user-select: none;
  }
body {
  background-color:#040404;
  color: #ffffff;
  -webkit-user-select: none; /* Chrome / Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Edge / IE */
    user-select: none;
}

.header .shadow, .header .bg {
  position: absolute;
  top: 0;
  left: 0;
}

.header .bg {
  background-image: url("../img/bbg2.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  overflow: hidden;
  opacity: 0.1;
  top:-65px;
}

.header__container {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -hktml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.header {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.header .bg {
  width: 100%;
  height: 100%;
  filter: blur(0.2px);
  transform: scale(1.1);
  z-index: 1;
}
.header .shadow {
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0);
  background: radial-gradient(circle, rgba(0, 0, 0, 0.2) 0%, rgba(96, 96, 96, 0.2) 50%, rgba(0, 0, 0, 0.2) 100%);
  z-index: 2;
}
.header__container {
  position: relative;
  text-align: center;
  color: #fff;
  padding: 0 16px;
  z-index: 10;
}
.header__img {
  width: 160px;
  border: 6px solid #Fff;
  border-radius: 50%;
  margin-bottom: 4px;
  animation:;
  padding:20px;
}
@keyframes around {
  0% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}
.header__title {
  font-family: "Archivo", sans-serif;
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight: 700;
}
.header__paragraph {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.1875rem, 2vw + 50%, 1.25rem);
  font-weight: 600;
  margin-bottom: 16px;
}
.header__btn {
  font-family: "Lato", sans-serif;
  font-size: clamp(1.125rem, 2vw + 50%, 1.3438rem);
  font-weight: 400;
  display: inline-block;
  cursor: pointer;
  color: #fff;
  background-color: #23272a;
  text-decoration: none;
  border-radius: 30px;
  transition: all 210ms;
  padding: 10px 20px;
}
.header__btn:hover {
  background-color: #31313c;
  -webkit-box-shadow: 0px 0px 17px 1px rgba(49, 49, 60, 0.6);
  -moz-box-shadow: 0px 0px 17px 1px rgba(49, 49, 60, 0.6);
  box-shadow: 0px 0px 17px 1px rgba(49, 49, 60, 0.6);
}

.info {
  width: 90%;
  padding-bottom:px;
  margin-bottom:;
}
.info__container {
  width: 100%;
  background-color:;
  margin: 0 auto;
  margin-bottom: 1.125rem;
  text-align: center;
  padding: clamp(0.9375rem, 1vw, 1.375rem) 0;
  box-shadow: 0px 0px 20px 1px rgb(49, 49, 60);
}
.info__title {
  font-family: "Archivo", sans-serif;
  font-size: clamp(19px, 2.5vw + 50%, 22px);
  font-weight: 600;
}

.info__content {
  display: flex;
  justify-content: center;
  background-color: #202020;
  width: 100%;
  max-width: 1360px;
  padding: 20px 10px;
  margin: px;
  border-radius: 10px;
}
.info__paragraph {
  max-width: 800px;
  font-family: "Archivo", sans-serif;
  font-size: clamp(1rem, 2.5vw + 50%, 1.1375rem);
  font-weight: 400;
  text-align: center;
  border-radius: 10px;
}
.info__list {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin:;
  color: #fff;
  list-style: none;
  padding: 1.5rem 22px;
}
.info__item {
  display: grid;
  align-items: center;
  justify-content: none;
  flex-direction: none;
  font-family: "Archivo", sans-serif;
  font-size: clamp(1rem, 2vw, 1.0938rem);
  font-weight: 400;
  min-height: 40px;
  overflow: hidden;
  background-color: #202020;
  border-radius: 10px;
  text-decoration: none;
  padding: clamp(0.5rem, 3vw, 0.875rem);
}
.info__item:hover {
  transform: scale(1.03);
}

.inv {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  width: 100%;
  background-color: #000;
  padding: 15px 0;
}
.inv__title {
  font-family: "Archivo", sans-serif;
  font-size: clamp(19px, 2.5vw + 50%, 26px);
  font-weight: 500;
  margin-bottom: 1.1375rem;
  padding: 0 10px;
}
.inv__btn {
  font-family: "Lato", sans-serif;
  font-size: clamp(1.125rem, 2vw + 50%, 1.3438rem);
  font-weight: 400;
  display: inline-block;
  cursor: pointer;
  color: #DF326E;
  background-color: #23272a;
  text-decoration: none;
  border-radius: 30px;
  transition: all 210ms;
  padding: 10px 20px;
}
.inv__btn:hover {
  background-color: #31313c;
  -webkit-box-shadow: 0px 0px 17px 1px rgba(49, 49, 60, 0.6);
  -moz-box-shadow: 0px 0px 17px 1px rgba(49, 49, 60, 0.6);
  box-shadow: 0px 0px 17px 1px rgba(49, 49, 60, 0.6);
}

.footer {
  width: 100%;
  background-color: #d91c5e;
  min-height: 40px;
}

@media (width >= 450px) {
  .header__img {
    width: 200px;
  }
}
@media (width >= 650px) {
  .header__img {
    width: 220px;
  }
}
/*
Div Info, cuando el viewport horizontal sea menor de 560px el
info__container sera un display flex en vez de un grid.
*/
@media (width <= 560px) {
  .info__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .info__item {
    width: 100%;
    max-width: 560px;
  }
}/*# sourceMappingURL=style.css.map */






}
.slider{width: 100%}
.slider input{display: none;}
.testimonials{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-height: 210px;
	perspective: 1000px;
	overflow: hidden;
}
.testimonials .item{
	width: 300px;
	padding: 5px;
	border-radius: 5px;
	background-color: #21262d;
	position: absolute;
	border:3px solid white;
	top: 0;
	box-sizing: border-box;
	text-align: center;
	transition: transform 0.4s;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	user-select: none;
	cursor: pointer;
}
.testimonials .item h1{font-size: 114px; color: white;}
.dots{display: flex; justify-content: center;align-items: center;}
.dots label{
	height: 5px;
	width: 5px;
	border-radius: 50%;
	cursor: pointer;
	background-color: #413B52;
	margin: 7px;
	transition-duration: 0.2s;
}
#t-1:checked ~ .dots label[for="t-1"],
#t-2:checked ~ .dots label[for="t-2"],
#t-3:checked ~ .dots label[for="t-3"],
#t-4:checked ~ .dots label[for="t-4"],
#t-5:checked ~ .dots label[for="t-5"]{
	transform: scale(2);
	background-color: #fff;
	box-shadow: 0px 0px 0px 3px #dddddd24;
}

#t-1:checked ~ .dots label[for="t-2"],
#t-2:checked ~ .dots label[for="t-1"],
#t-2:checked ~ .dots label[for="t-3"],
#t-3:checked ~ .dots label[for="t-2"],
#t-3:checked ~ .dots label[for="t-4"],
#t-4:checked ~ .dots label[for="t-3"],
#t-4:checked ~ .dots label[for="t-5"],
#t-5:checked ~ .dots label[for="t-4"]{
	transform: scale(1.5);
}

#t-1:checked ~ .testimonials label[for="t-3"],
#t-2:checked ~ .testimonials label[for="t-4"],
#t-3:checked ~ .testimonials label[for="t-5"],
#t-4:checked ~ .testimonials label[for="t-1"],
#t-5:checked ~ .testimonials label[for="t-2"]{
	transform: translate3d(600px, 0, -180px) rotateY(-25deg);
	z-index: 2;
}

#t-1:checked ~ .testimonials label[for="t-2"],
#t-2:checked ~ .testimonials label[for="t-3"],
#t-3:checked ~ .testimonials label[for="t-4"],
#t-4:checked ~ .testimonials label[for="t-5"],
#t-5:checked ~ .testimonials label[for="t-1"]{
	transform: translate3d(300px, 0, -90px) rotateY(-15deg);
	z-index: 3;
}

#t-2:checked ~ .testimonials label[for="t-1"],
#t-3:checked ~ .testimonials label[for="t-2"],
#t-4:checked ~ .testimonials label[for="t-3"],
#t-5:checked ~ .testimonials label[for="t-4"],
#t-1:checked ~ .testimonials label[for="t-5"]{
	transform: translate3d(-300px, 0, -90px) rotateY(15deg);
	z-index: 3;
}

#t-3:checked ~ .testimonials label[for="t-1"],
#t-4:checked ~ .testimonials label[for="t-2"],
#t-5:checked ~ .testimonials label[for="t-3"],
#t-2:checked ~ .testimonials label[for="t-5"],
#t-1:checked ~ .testimonials label[for="t-4"]{
	transform: translate3d(-600px, 0, -180px) rotateY(25deg);

}

#t-1:checked ~ .testimonials label[for="t-1"],
#t-2:checked ~ .testimonials label[for="t-2"],
#t-3:checked ~ .testimonials label[for="t-3"],
#t-4:checked ~ .testimonials label[for="t-4"],
#t-5:checked ~ .testimonials label[for="t-4"],
#t-5:checked ~ .testimonials label[for="t-5"]{

	z-index: 4;
  
}




/* --- INICIA SLIDER "CAJA DE TELEVISIÓN" --- */

.tv-slider {
  display: flex;
  flex-direction: column; /* Apila elementos verticalmente */
  align-items: center; /* Centra todo */
  width: 80%;
  max-width: 800px; /* Ancho máximo para el componente completo */
  
  background-color:; /* Color de la "caja de TV" */
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  position: relative; /* Para el posicionamiento del título */

  flex: 1; /* Permite que el bloque crezca y se encoja */
min-width: 450px; /* Un poco más ancho por los botones laterales */
}

.tv-slider__title {
  color: white;
  font-family: 'Arial Black', sans-serif;
  font-size: 1em;
  text-transform: uppercase;
  margin-bottom: 20px;
  letter-spacing: 2px;
  background-color: #202020;
  padding: 10px 25px;
  border-radius: 8px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
  position: absolute; /* Ajusta la posición del título */
  top: -35px; /* Lo saca un poco de la caja */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* Esconder los radio buttons */
.tv-slider input[type="radio"] {
  display: none;
}

/* --- Contenedor Principal (La "pantalla" grande) --- */
.tv-slider__main-display {
  width: 100%;
  max-width:; /* Ancho de la pantalla principal */
  height:; /* Alto de la pantalla principal */
  background-color: #000; /* Color del borde de la pantalla */
  border: 5px solid #222; /* Borde de la pantalla */
  border-radius: 8px;
  overflow: hidden; /* Oculta las imágenes fuera de vista */
  position: relative;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.7);
  margin-bottom: 20px;
}

.tv-slider__image-wrapper {
  display: flex;
  width: 400%; /* 100% por cada imagen (4 imágenes = 400%) */
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.tv-slider__main-display img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Las imágenes cubrirán el espacio sin deformarse */
}

/* --- Miniaturas ("Botones" de la TV) --- */
.tv-slider__thumbnails {
  display: flex;
  gap: 15px; /* Espacio entre las miniaturas */
  justify-content: center;
  align-items: center;
  width: 100%;
}

.tv-slider__thumbnail-item {
  width: 100px; /* Ancho de cada miniatura */
  height: 70px; /* Alto de cada miniatura */
  border: 3px solid #555; /* Borde por defecto de la miniatura */
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.7; /* Ligeramente opacas por defecto */
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.tv-slider__thumbnail-item:hover {
  opacity: 0.9;
  border-color: #888;
}

.tv-slider__thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Lógica para mostrar la imagen principal y marcar la miniatura --- */

/* 1. Mover la imagen principal */
#tv-img-1:checked ~ .tv-slider__main-display .tv-slider__image-wrapper { transform: translateX(0%); }
#tv-img-2:checked ~ .tv-slider__main-display .tv-slider__image-wrapper { transform: translateX(-25%); }
#tv-img-3:checked ~ .tv-slider__main-display .tv-slider__image-wrapper { transform: translateX(-50%); }
#tv-img-4:checked ~ .tv-slider__main-display .tv-slider__image-wrapper { transform: translateX(-75%); }

/* 2. Marcar la miniatura activa */
#tv-img-1:checked ~ .tv-slider__thumbnails label[for="tv-img-1"],
#tv-img-2:checked ~ .tv-slider__thumbnails label[for="tv-img-2"],
#tv-img-3:checked ~ .tv-slider__thumbnails label[for="tv-img-3"],
#tv-img-4:checked ~ .tv-slider__thumbnails label[for="tv-img-4"] {
  border-color: #00bcd4; /* Color de realce para la miniatura activa (un azul turquesa) */
  opacity: 1;
  box-shadow: 0 0 15px rgba(0,188,212,0.6); /* Sombra luminosa */
  transform: scale(1.05); /* Ligeramente más grande */
}

/* --- FIN SLIDER "CAJA DE TELEVISIÓN" --- */

/* --- INICIA CUADRO DE INFORMACIÓN --- */

.info-box {
  display: flex;
  flex-direction: column;
  align-items: center; 
  width: 90%;
  max-width: 90%; /* Mismo ancho que el slider para consistencia */
  margin: 0px auto 0px auto; /* Margen superior e inferior para separar */
  background-color:; /* Mismo color de la "caja" */
  border-radius: 15px;
  padding: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  position: relative; 

  flex: 1; /* Permite que el bloque crezca y se encoja */
min-width: 400px; /* Ancho mínimo antes de que se apile */
}

/* La "pantalla" de texto */
.info-box__content {
  width: 100%;
  min-height:; /* Alto mínimo, crecerá si hay más texto */
  background-color: #222; /* Fondo interior oscuro */
  border: 5px solid #222; /* Mismo borde que la pantalla */
  border-radius: 8px;
  padding: 15px 25px;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.7);
  color: #f0f0f0; /* Color de texto claro */
  font-family: Arial, sans-serif;
  font-size: 1em;
  line-height: 1.6;
  overflow-y: auto; /* Scroll si el contenido es muy largo */
  text-align: justify;
}

/* Estilos para el texto dentro del cuadro */
.info-box__content h3 {
  color: #00bcd4; /* Mismo color turquesa de realce */
  border-bottom: 1px solid #444;
  padding-bottom: 5px;
  margin-top:;
  margin-bottom: 10px;
}
.info-box__content p {
  margin-bottom: 15px;
}
.info-box__content ul {
  margin-left: 20px;
  margin-bottom: 15px;
}
.info-box__content li {
  margin-bottom: 5px;
}

/* --- FIN CUADRO DE INFORMACIÓN --- */

/* --- INICIA CÓDIGO PARA LAYOUT "LADO A LADO" --- */

.dashboard-container {
  display: flex;            /* ¡La magia! Pone los hijos en fila */
  flex-direction: row;      /* (Opcional, es el por defecto) */
  justify-content: center;  /* Centra los dos bloques horizontalmente */
  align-items: flex-start;  /* Los alinea en la parte superior */
  flex-wrap: wrap;          /* IMPORTANTE: Si no caben, se apilarán */
  
  gap: ;                /* Espacio entre los dos bloques */
  
  width: 100%;
  padding:;       /* Espacio arriba/abajo y en los bordes */
  box-sizing: border-box;   /* Para que el padding no afecte el ancho */
}

/* --- FIN CÓDIGO LAYOUT --- */

/* 4. Las imágenes (Clase única) */
  .slide-item-2 img {
    width: 140%;
    height: 100%;
    object-fit: cover;
    margin-left: -20%;
    transform: skewX(15deg);
    transition: transform 0.3s;
    
    /* --- AGREGA ESTAS 3 LÍNEAS --- */
    pointer-events: none;      /* Hace que el mouse 'traspase' la imagen (evita click y arrastre) */
    user-select: none;         /* Evita que se pueda seleccionar como texto azul */
    -webkit-user-drag: none;   /* Fuerza bruta para bloquear el arrastre en Chrome/Safari */
  }

  /* 4. Las imágenes (Clase única) */
  .slide-item img {
    width: 140%;
    height: 100%;
    object-fit: cover;
    margin-left: -20%;
    transform: skewX(15deg);
    transition: transform 0.3s;
    
    /* --- AGREGA ESTAS 3 LÍNEAS --- */
    pointer-events: none;      /* Hace que el mouse 'traspase' la imagen (evita click y arrastre) */
    user-select: none;         /* Evita que se pueda seleccionar como texto azul */
    -webkit-user-drag: none;   /* Fuerza bruta para bloquear el arrastre en Chrome/Safari */
  }

  /*AAAAAAAAAAAAAAAAAAA1
  /* 1. La ventana que recorta el contenido */
  .skew-carousel-wrapper {
    width: 100%;
    height: 150px; /* Altura del carrusel */
    overflow: hidden;
    background: #000;
    position: relative;
    display: flex;
    align-items: center;
  }
  /* 2. La pista larga que se mueve */
  .skew-track {
    display: flex;
    /* El ancho debe ser suficiente para todas las fotos. 
       La animación mueve la pista hacia la izquierda */
    animation: scroll-left 20s linear infinite;
  }
  /* La animación matemática */
  @keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Se mueve hasta la mitad (donde se repiten las fotos) */
  }
  /* Pausar la animación si pasas el mouse por encima */
  .skew-track:hover {
    animation-play-state: paused;
  }
  /* 3. Cada tarjeta individual */
  .slide-item {
    width: 300px; /* Ancho fijo de cada foto */
    height: 150px;
    flex-shrink: 0; /* Evita que se aplasten */
    position: relative;
    margin: 0 -10px; /* Un margen negativo para juntarlas más debido a la inclinación */
    
    /* La inclinación del marco */
    transform: skewX(-15deg); 
    border-right: 5px solid white; /* Borde blanco estilo "corte" */
    overflow: hidden;
  }
  /* 4. La imagen dentro */
  .slide-item img {
    width: 140%; /* Más ancha para compensar la inclinación */
    height: 100%;
    object-fit: cover;
    margin-left: -20%; /* Centrar la imagen expandida */
    /* Contrarrestar la inclinación para que la foto se vea recta */
    transform: skewX(15deg);
    transition: transform 0.3s;
  }
  /* Efecto al pasar el mouse sobre una foto específica */
  .slide-item:hover img {
    transform: skewX(15deg) scale(1.1); /* Zoom suave */
    filter: brightness(1.2);
  }
  /* --- MÓVIL (Responsive) --- */
  @media (max-width: 768px) {
    .skew-carousel-wrapper { height: 250px; }
    .slide-item { width: 150px; height: 250px; border-right: 2px solid white; }
  }

  /* --- ESTILOS DEL SLIDER 2 (INVERSO) --- */
  /* 1. La ventana (Clase única) */
  .skew-carousel-wrapper-2 {
    width: 100%;
    height: 150px;
    overflow: hidden;
    background: #000;
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 20px; /* Separación por si pones uno debajo del otro */
  }
  /* 2. La pista (Clase única y animación única) */
  .skew-track-2 {
    display: flex;
    /* Usamos una animación con nombre nuevo: 'scroll-right-2' */
    animation: scroll-right-2 20s linear infinite;
  }
  /* DEFINICIÓN DE LA ANIMACIÓN INVERSA */
  @keyframes scroll-right-2 {
    0% { transform: translateX(-50%); } /* Arranca desde la mitad (donde está el duplicado) */
    100% { transform: translateX(0); }   /* Se mueve hacia el principio (Derecha) */
  }
  /* Pausa al pasar el mouse */
  .skew-track-2:hover {
    animation-play-state: paused;
  }
  /* 3. Las tarjetas (Clase única) */
  .slide-item-2 {
    width: 300px;
    height: 400px;
    flex-shrink: 0;
    position: relative;
    margin: 0 -10px;
    /* Aquí puedes cambiar la inclinación SOLO de este slider si quieres */
    transform: skewX(-15deg); 
    border-right: 5px solid rgb(0, 0, 0);
    overflow: hidden;
  }
  /* 4. Las imágenes (Clase única) */
  .slide-item-2 img {
    width: 140%;
    height: 100%;
    object-fit: cover;
    margin-left: -20%;
    /* Contrarrestar inclinación */
    transform: skewX(15deg);
    transition: transform 0.3s;
  }
  .slide-item-2:hover img {
    transform: skewX(15deg) scale(1.1);
    filter: brightness(1.2);
  }
  /* Responsive para el Slider 2 */
  @media (max-width: 768px) {
    .skew-carousel-wrapper-2 { height: 250px; }
    .slide-item-2 { width: 150px; height: 250px; border-right: 2px solid rgb(0, 0, 0); }
  }

   /* Contenedor principal */
  .accordion-gallery {
    display: flex;
    width: 100%;
    height: 200px; /* Altura del slider */
    overflow: hidden;
    margin: 0 auto;
  }
  /* Cada tira de imagen */
  .accordion-item {
    position: relative;
    flex: 1; /* Todas empiezan con el mismo ancho (ancho = 1 unidad) */
    overflow: hidden;
    transition: all 0.5s ease-in-out; /* La magia de la animación suave */
    cursor: pointer;
    border-right: 1px solid #fff; /* Pequeña línea blanca separadora */
  }
  /* La imagen dentro */
  .accordion-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene la proporción sin deformar la foto */
    transition: all 0.5s ease;
    filter: brightness(0.8); /* Un poco oscuras por defecto para resaltar la activa */
  }
  /* --- LA MAGIA AL PASAR EL MOUSE --- */
  /* Cuando pasas el mouse sobre un item, este crece */
  .accordion-item:hover {
    flex: 3; /* Se vuelve 5 veces más grande que los otros */
  }
  /* La imagen se aclara al activarse */
  .accordion-item:hover img {
    filter: brightness(1);
    transform: scale(1.05); /* Un ligero zoom para dar vida */
  }
  /* --- TEXTO OPCIONAL (Si quieres poner títulos) --- */
  .accordion-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.3s 0.2s; /* Tarda un poco en aparecer */
    white-space: nowrap; /* Evita que el texto se rompa en líneas */
  }
  .accordion-item:hover .accordion-content {
    opacity: 1; /* Aparece al pasar el mouse */
  }
  h3 { margin: 0; font-size: 1.5rem; text-shadow: 1px 1px 5px rgba(0,0,0,0.8); }
  /* --- RESPONSIVE (Móviles) --- */
  @media (max-width: 768px) {
    .accordion-gallery {
      flex-direction: column; /* En celular se ponen verticales (uno sobre otro) */
      height: 600px;
    }
    .accordion-item:hover {
      flex: 3; /* Crecen un poco menos en vertical */
    }
    .accordion-item { border-right: none; border-bottom: 1px solid #fff; }
  }