/* VARIABLES DE MARCA */
	:root {
		/*Fondo*/
		--bg-deep: #00121a;        /* Azul noche profundo */
		--bg-card: #002233;        /* Azul marca */
		--bg-color: #02141a;			/**/
		
		--bg-navbar: rgba(253, 4, 24, 0.75);
		/******/
		--accent: #00FFDD;         /* Cian Neón (Marca) */
		--text-main: #e0e0e0;
		--text-dim: #99abb3;
		
		/*
		rgba(0, 18, 26, 0.95);
		rgba(0, 18, 26, 0.95)
		rgba(2,20,26,0.75);
		*/
	}

	body {
		margin: 0;
		font-family: 'Inter', sans-serif;
		background: var(--bg-deep);
		color: var(--text-main);
		line-height: 1.6;
		padding: 0px;
		
	}

/* NAVBAR CON IDENTIDAD */
	.navbar {
		position: fixed;
		top: 0;
		width: 100%;
		background:--bg-navbar;
		backdrop-filter: blur(10px);
		border-bottom: 1px solid rgba(0, 255, 221, 0.1);
		padding: 10px 0;
		display: flex;
		justify-content: center;
		z-index: 1100;			
	}

	.nav-content {
		width: 90%;
		max-width: 1100px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.nav-links a {
		color: var(--text-dim);
		text-decoration: none;
		margin-left: 20px;
		font-size: 0.9rem;
		font-weight: 500;
		transition: 0.3s;
	}

	.nav-links a:hover {
		color: var(--accent);
	}
	
/* Canvas de partículas */
	#particles{
		position:absolute;
		inset:0;
		width:100%;
		height:100%;
		z-index:0;
	}

/* CAT - HERO */
	.hero{
		padding:80px 20px 40px;
		background: var(--bg-deep);
		max-width: 1100px;
		margin: auto;
		background: red;
	}	
	.hero-museum{
		position:relative;
		min-height:35vh;
		background: var(--bg-deep);
		overflow:hidden;
		padding:80px 20px 40px;
		max-width: 1100px;
		margin: auto;
		
	}
	
/* Contenedor principal hero */
	.hero-inner{
		position:relative;
		z-index:1;
		max-width:1200px;
		margin:0 auto;
		padding:10px 20px 10px;
		text-align:center;		
		
	}

/* Bloque superior derecho hero */
	.hero-top{
		max-width:1200px;
		margin:0 auto 40px;
		display:flex;
		flex-direction:column;
		align-items:flex-end;
		gap:8px;
		
	}

/* Botones */
	.hero-cta{
		display:flex;
		gap:12px;
	}

/* CAT - AUTORIA HUMANA */
	/* Texto institucional */
	.site-cred{
		font-size:0.95rem;
		color:#9fb3b8;
		margin:0;
		
		padding: 0px;
		
	}

	/* Contenido principal */
	.hero-content h1{
		font-size:clamp(2.3rem, 4vw, 3.4rem);
		font-weight:700;
		margin-bottom:18px;
		font-weight:700;
		color:#eaf6f9;
		
		padding: 0px;
	}

	.hero-sub{
		max-width:680px;
		margin:0 auto;
		color:#b8c8cc;
		font-size:1.05rem;
		line-height:1.6;
		
		padding: 0px;
	}
	
/* Botones CAT */
	.btn-primary,
	.btn-secondary{
		transition: all 0.2s ease;
	}

	/* Botón principal */

	.btn-primary{
		background:#00d1ff;
		color:#002027;
		padding:12px 20px;
		border-radius:4px;
		text-decoration:none;
		font-weight:600;
		box-shadow:0 0 0 rgba(0,0,0,0);
	}

	.btn-primary:hover{
		background:#1ed9ff;
		transform:translateY(-2px);
		box-shadow:0 6px 18px rgba(0,209,255,0.25);
	}

	/* Botón secundario */

	.btn-secondary{
		border:2px solid #00d1ff;
		color:#00d1ff;
		padding:10px 18px;
		border-radius:4px;
		text-decoration:none;
		font-weight:600;
		background:transparent;
	}

	.btn-secondary:hover{
		background:#00d1ff;
		color:#002027;
		transform:translateY(-2px);
		box-shadow:0 6px 18px rgba(0,209,255,0.2);
	}

/* CONTENIDO */
	.container {
		padding: 5px 0px 0px;
		max-width: 1100px; /*1100px;*/
		margin: auto;
	}

	h1 {
		font-family: 'JetBrains Mono', monospace;
		font-size: 2.5rem;
		color: #fff;
		text-align: center;
		margin-bottom: 10px;
	}

	.hero-p {
		text-align: center;
		color: var(--text-dim);
		max-width: 700px;
		margin: 0 auto 50px;
	}

	h2 {
		border-left: 4px solid var(--accent);
		padding-left: 15px;
		font-size: 1.4rem;
		margin-top: 40px;
		color: #fff;
		
	}

/* GRID MEJORADO */
	.grid {
		display: grid; /* Mantenemos solo grid */
		gap: 20px; /* Aumentamos un poco el espacio para mejor respiro */
		width: 100%;
		padding: 30px 0;
		/* Esta línea es la que hace la magia del auto-ajuste */
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
		align-items: stretch; /* Asegura que todas las cards midan lo mismo de alto */
		
	}

	.card {
		background: var(--bg-card);
		border: 1px solid rgba(0, 255, 221, 0.05);
		padding: 20px;
		border-radius: 12px;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		
	}

	.card::before {
		content: "";
		position: absolute;
		top: 0; left: 0; width: 100%; height: 2px;
		background: var(--accent);
		transform: scaleX(0);
		transition: 0.3s;
	}

	.card:hover {
		transform: translateY(-5px);
		border-color: rgba(0, 255, 221, 0.3);
		box-shadow: 0 10px 30px rgba(0,0,0,0.3);
	}

	.card:hover::before {
		transform: scaleX(1);
	}

	.card a {
		color: var(--accent);
		text-decoration: none;
		font-weight: 600;
		display: block;
	}
	
/* FOOTER */
	footer {
		text-align: center;
		border-top: 1px solid rgba(255,255,255,0.05);
		margin-top: 40px;
		background: #000a0f;
		
		padding: 10px;
	}

	footer nav a {
		color: var(--text-dim);
		text-decoration: none;
		margin: 0 10px;
		font-size: 0.85rem;
	}

	footer p {
		margin-top: 20px;
		font-size: 0.8rem;
		color: #555;
	}

/* Responsive */
	@media (max-width:768px){

		.hero-top{
			align-items:center;
		}

		.hero-cta{
			flex-direction:column;
			width:100%;
		}

		.hero-cta a{
			text-align:center;
		}
	}
	


/*+++++++++++++++++++ HTML del navbar responsivo +++++++++++++++++++*/
/* Navbar base */
	.navbar {
		position: fixed;
		top: 0;
		width: 100%;
		background: --bg-navbar;
		backdrop-filter: blur(10px);
		border-bottom: 1px solid rgba(0, 255, 221, 0.1);
		padding: 10px 0;
		display: flex;
		justify-content: center;
		z-index: 1100;			
	}

	.nav-container {
		width: 90%;
		max-width: 1100px; /*1100px;*/
		display: flex;
		justify-content: space-between;
		align-items: center;
	}


/* Logo */

	.logo{
		color:#00d1ff;
		font-weight:700;
		font-size:1.2rem;
	}

/* Menú desktop */

	.nav-menu{
		list-style:none;
		display:flex;
		gap:28px;
		right:-100%;
		transition:right 0.3s ease;
		z-index:1000;
	}

	.nav-menu a{
		text-decoration:none;
		color:#eaf6f9;
		font-weight:500;
		right:-100%;
		transition:right 0.3s ease;
		z-index:1000;
	}

	.nav-menu a:hover {
		color: var(--accent);
		right:-100%;
		transition:right 0.3s ease;
	}

/* Botón hamburguesa */
	.hamburger{
		display:none;
		flex-direction:column;
		gap:5px;
		background:none;
		border:none;
		cursor:pointer;
	}

	.hamburger span{
		width:26px;
		height:3px;
		background:#00d1ff;
		display:block;
		transition:0.3s;
	}


/*+++++++++++++++++++ CSS completo (desktop + móvil) +++++++++++++++++++*/
/*+++++++++++++++++++ Estilos RESPONSIVE (móvil) +++++++++++++++++++*/
	@media (max-width:768px){
		/* Mostrar hamburguesa */
		.hamburger{ display:flex; }
		
		/* Ocultar menú normal */
		.nav-menu{
			position:fixed;
			top:70px;
			right:-100%;
			width:280px;
			height:calc(100vh - 70px);

			display:flex;
			flex-direction:column;
			gap:18px;

			padding:24px 18px;
			margin:0;
			list-style:none;

			background:--bg-color;
			border-left:1px solid rgba(0,209,255,0.15);

			transition:right 0.28s ease;
			z-index:1000;
		}

		.nav-menu a{
			color:#eaf6f9;
			text-decoration:none;
			font-weight:600;
			padding:10px 10px;
			border-radius:6px;
		}

		.nav-menu a:hover{
			background:rgba(0,209,255,0.10);
		}
		/* Menú abierto */
		.nav-menu.active{
			right:0;
		}

		/* CSS — overlay moderno */
		.menu-overlay{
			position:fixed;
			inset:0;
			background:rgba(0,0,0,0.55);
			backdrop-filter:blur(2px);
			opacity:0;
			visibility:hidden;
			transition:0.28s ease;
			z-index:900;
		}

		.menu-overlay.active{
			opacity:1;
			visibility:visible;
		}
		
		/* Bloquear scroll del fondo (muy importante) */
		body.menu-open{
			overflow:hidden;
		}
	}
	
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Efecto Glass*/
@media (max-width:768px){

  .nav-menu{
      position:fixed;
      top:70px;
      right:-100%;
      width:280px;
      height:calc(100vh - 70px);

      display:flex;
      flex-direction:column;
      gap:18px;

      padding:24px 18px;
      margin:0;
      list-style:none;

      /* GLASS EFFECT */

      background:rgba(2,20,26,0.75);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);

      border-left:1px solid rgba(0,209,255,0.25);
      box-shadow:-10px 0 30px rgba(0,0,0,0.4);

      transition:right 0.28s ease;
      z-index:1000;
  }

  .nav-menu.active{
      right:0;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Mejora estetica de los enlaces*/
@media (max-width:768px){

  .nav-menu a{
      color:#eaf6f9;
      text-decoration:none;
      font-weight:600;
      padding:12px 12px;
      border-radius:8px;

      transition:0.2s;
  }

  .nav-menu a:hover{
      background:rgba(0,209,255,0.15);
      color:#00d1ff;
  }
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* overlay un poco más suave para que el blur destaque*/

/*
	Scroll ↓ → navbar se oculta
	Scroll ↑ → navbar reaparece
	
	Paso A — Ajuste CSS del navbar
	--Add al .navbar:
*/
.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1100;

    transition:transform 0.3s ease;
}

/* Estado oculto */

.navbar.hide{
    transform:translateY(-100%);
}

/* Evitar que el contenido quede debajo */
.hero-museum{
    padding-top:25px; /* ajusta al alto real del navbar */
	padding-bottom:20px;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Submenú */
	/*Solo si es movil se muestra la flecha del submenu*/
	@media (min-width:769px){
		.submenu-toggle{
			display:block;
			color:#eaf6f9;
			text-decoration:none;
			font-weight:500;
			padding:8px 6px;
		}
		.submenu-toggle:hover{
			color:#00d1ff;
		}
	}



/*Submenu para cuando NO ES MOVIL*/
	@media (min-width:769px){
		.has-submenu{
			position:relative;
		}
		
		/* El enlace principal visible en desktop */
		.has-submenu > a{
			cursor:pointer;
		}
		
		/* Submenú oculto */
		.submenu{
			position:absolute;
			top:100%;
			left:0;

			background:--bg-color;
			border:1px solid rgba(0,209,255,0.25);
			border-radius:8px;

			padding:8px;
			list-style:none;

			min-width:220px;

			opacity:0;
			visibility:hidden;
			transform:translateY(10px);

			transition:0.2s;
			z-index:1200;
		}

		/* Mostrar al pasar el mouse */
		.has-submenu:hover .submenu{
			opacity:1;
			visibility:visible;
			transform:translateY(0);
		}

		.submenu a{
			display:block;
			padding:8px 12px;
			color:#eaf6f9;
			text-decoration:none;
			border-radius:6px;
		}

		.submenu a:hover{
			background:rgba(0,209,255,0.15);
			color:#00d1ff;
		}

		.nav-menu{
			display:flex;
			align-items:center;   /* ← CLAVE */
			gap:40px;
			height:40px;          /* misma altura que navbar */
		}
	}
	
	
	

/*Submenu para cuando SI ES MOVIL*/
	@media (max-width:768px){
		.has-submenu{
			display:flex;
			flex-direction:column;
		}
		.submenu-toggle{
			background:none;
			border:none;
			color:#eaf6f9;
			font-weight:600;
			padding:12px;
			text-align:left;
			cursor:pointer;

			display:flex;
			justify-content:space-between;
			align-items:center;

			border-radius:8px;
		}

		.submenu-toggle:hover{
			background:rgba(0,209,255,0.12);
		}

		.arrow{
			transition:0.25s;
		}

		/* Submenú oculto */
		.submenu{
			max-height:0;
			overflow:hidden;
			list-style:none;
			padding-left:10px;
			margin:0;

			transition:max-height 0.3s ease;
		}

		/* Submenú visible */
		.has-submenu.open .submenu{
			max-height:300px;
		}

		.has-submenu.open .arrow{
			transform:rotate(90deg);
		}

		.submenu a{
			display:block;
			padding:10px 12px;
			color:#bcd3d8;
			text-decoration:none;
			font-weight:500;
			border-radius:6px;

			color:#eaf6f9;
			text-decoration:none;
			font-weight:600;
			padding:12px 12px;
			border-radius:8px;

		}

		.submenu a:hover{
			background:rgba(0,209,255,0.12);
			color:#00d1ff;
		}

		.nav-menu{
			display:flex;
			align-items:right;   /* ← CLAVE */
			gap:20px;
		}
	}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Reajustes por sobre escritura*/

/*FIJAR el navbar a la parte superior*/
	.navbar{
		position:fixed;
		top:0;
		left:0;
		width:100%;
		z-index:1100;
		transition:transform 0.3s ease;
	}
/* ocultarlo cuando se hace scroll*/
	.navbar.hide{
		transform:translateY(-100%);
	}

/*Para ocultar debajo del navbar el contenido*/
	body{
		padding-top:70px; /* usa la altura real del navbar */
	}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/



/*Agregar indicador elegante con CSS*/
/* Indicador de submenú en desktop */
/*Esto para que el efecto visual del menu tenga el mismo diseño*/

@media (min-width:769px){
  .has-submenu > .submenu-toggle::after{
      content:"";
      display:inline-block;
      margin-left:6px;
      width:6px;
      height:6px;

      border-right:2px solid currentColor;
      border-bottom:2px solid currentColor;

      transform:rotate(45deg);
      vertical-align:middle;
  }

}
@media (min-width:769px){

  .has-submenu:hover > .submenu-toggle::after{
      transform:rotate(225deg);
  }

}

/*Para movil*/
@media (max-width:768px){

  .has-submenu > .submenu-toggle::after{
      content:"›";
      margin-left:auto;
      font-size:18px;
      opacity:0.8;
  }

}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*NAVBAR PREMIUN*/

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1100;

    /* Fondo museo tecnológico */

    background:
        linear-gradient(
            to bottom,
            rgba(2,20,26,0.95),
            rgba(2,20,26,0.88)
        );

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Línea inferior sutil */

    border-bottom:1px solid rgba(0,209,255,0.18);

    /* Sombra ligera */

    box-shadow:0 4px 20px rgba(0,0,0,0.35);

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}
/*Contenedor interno refinado*/
.nav-container{
    max-width:1100px; /*1100px;*/
    margin:0 auto;
    padding:0 24px;
    height:70px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

	/*Logo PREMIUN */
	.logo-area{
		display:flex;
		align-items:center;
		gap:10px;

		text-decoration:none;
		user-select:none;

		transition:0.2s ease;
	}
	
	/*ISOTIPO*/
	.logo-icon{
		width:30px;
		height:30px;
		object-fit:contain;

		filter:drop-shadow(0 0 4px rgba(0,209,255,0.25));

		transition:0.25s ease;
	}

	/*Logo con presencia institucional*/
	/*Texto MARCA*/
	.logo-text{
		font-weight:700;
		letter-spacing:0.08em;
		font-size:1.05rem;

		color:#eaf6f9;

		transition:0.25s ease;
	}
	
	/*Hover premium (muy sutil)*/
	.logo-area:hover .logo-icon{
		transform:scale(1.06);
		filter:drop-shadow(0 0 8px rgba(0,209,255,0.45));
	}

	.logo-area:hover .logo-text{
		color:#00d1ff;
	}

	/*Responsive inteligente*/
	@media (max-width:480px){
		.logo-text{
			display:none;
		}
		.logo-icon{
			width:34px;
			height:34px;
		}
	}
	.nav-container{
		display:flex;
		align-items:center;
	}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*fondo (blur + transparencia).*/
.navbar{
    background:--bg-navbar;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

/*estado ACTIVO del menú*/
.navbar{
    background:rgba(2,20,26,0.75);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}	

/*consistencia de brillo/contraste entre hero y navbar*/
.navbar{
    border-bottom:1px solid rgba(0,209,255,0.18);
}

/* fondo integrarse mejor con el sistema.*/
.logo-icon{
    filter:drop-shadow(0 0 6px rgba(0,209,255,0.35));
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* Estilos internos de la Card */
.card-category {
    display: block;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent); /* Cian neón para la categoría */
    margin-bottom: 8px;
    font-family: 'JetBrains Mono', monospace;
}

.card-title {
    margin: 0;
    font-size: 1.25rem;
    color: #ffffff; /* Blanco puro para el título principal */
    line-height: 1.3;
    font-weight: 700;
}

.card-footer {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(0, 255, 221, 0.1);
    padding-top: 10px;
}

.card-year {
    font-size: 0.85rem;
    color: var(--text-dim);
}

.card-tag {
    font-size: 0.7rem;
    background: rgba(0, 255, 221, 0.1);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(0, 255, 221, 0.2);
}

/* Ajuste al hover para que el título también brille */
.card:hover .card-title {
    color: var(--accent);
    transition: 0.3s;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* Bloque base para anuncios - OPTIMIZADO PARA ADSENSE */
.ad {
    background: --bg-color;
    border: 1px dashed rgba(0, 209, 255, 0.4); 
    text-align: center;
    /* Aumentamos el padding interno para que el texto de Google no toque los bordes */
    padding: 25px; 
    /* Margen de seguridad obligatorio: mínimo 30px para evitar clics accidentales */
    margin: 30px 0; 
    color: #7aa;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px;
    /* Asegura que el anuncio no se desborde */
    overflow: hidden; 
}

/* Variante superior: espacio extra respecto a la Navbar */
.ad-top {
    margin-top: 20px;
    margin-bottom: 40px; /* Separación clara del título de la animación */
}

/* Variante intermedia: separa el reproductor de la descripción */
.ad-mid {
    margin: 50px 0; /* Mayor respiro para que el contenido "respire" */
}

/* Variante sidebar: centrada y con espacio vertical */
.sidebar-ad {
    margin: 25px 0;
    padding: 15px;
    border-style: solid; /* Diferenciamos un poco el estilo en la barra lateral */
    border-width: 1px;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* ***** Poupo para instalar */
	.install-banner {
		position: fixed;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
		background: rgba(2, 20, 26, 0.95);
		border: 2px solid #00d1ff; /* Tu color Cian */
		box-shadow: 0 0 20px rgba(0, 209, 255, 0.3);
		padding: 15px 25px;
		border-radius: 15px;
		z-index: 10000;
		width: 90%;
		max-width: 450px;
		animation: slideDown 0.5s ease;
		background: GrayText;
	}

	@keyframes slideDown {
		from { top: -100px; }
		to { top: 20px; }
	}

	.btn-install-confirm { background: #00d1ff; color: #000; border: none; padding: 10px 15px; border-radius: 8px; font-weight: bold; cursor: pointer; }
	.btn-install-cancel { background: transparent; color: #fff; border: 1px solid #444; padding: 10px 15px; border-radius: 8px; cursor: pointer; margin-left: 10px; }
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.catalog-header {
    display: flex;
    justify-content: space-between; /* Empuja el título a la izq y el link a la der */
    align-items: baseline; /* Alinea los textos por su base */
    border-bottom: 1px solid #1a2a2f; /* Línea sutil divisoria */
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.btn-view-all-small {
    color: #00d1ff;
    text-decoration: none;
    font-size: 0.85rem; /* Letras pequeñas */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: opacity 0.3s;
}

.btn-view-all-small:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* Ajuste para móviles: si no caben, se pone uno bajo el otro */
@media (max-width: 600px) {
    .catalog-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* Contenedor principal del título */
.anim-header-wrapper {
    display: flex;
    justify-content: space-between; /* Título a la izquierda, Botón a la derecha */
    align-items: baseline; /* Alinea los textos por la parte de abajo */
    border-bottom: 1px solid #1a2a2f;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

/* Estilo del botón pequeño de X */
.btn-contact-mini {
    color: #00d1ff; /* Tu cian XelWap */
    text-decoration: none;
    font-size: 0.85rem; /* Letra pequeña estilo subtítulo */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: opacity 0.3s;
    opacity: 0.8;
}

.btn-contact-mini:hover {
    opacity: 1;
    text-shadow: 0 0 8px rgba(0, 209, 255, 0.6);
    text-decoration: underline;
}

/* Ajuste para móviles */
@media (max-width: 600px) {
    .anim-header-wrapper {
        flex-direction: column; /* En móvil se pone uno debajo del otro */
        align-items: flex-start;
        gap: 8px;
    }
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.anim-description {
    margin: 30px 0;
    line-height: 1.6;
}

.anim-description h2 {
    color: #00d1ff;
    font-size: 1.4rem;
    border-left: 4px solid #00d1ff;
    padding-left: 15px;
    margin-bottom: 20px;
}

.description-content p {
    margin-bottom: 15px;
    color: #ccc; /* Texto legible sobre fondo oscuro */
}

.preservation-note {
    background: rgba(0, 209, 255, 0.05);
    border: 1px dashed #00d1ff;
    padding: 15px;
    margin-top: 25px;
    font-size: 0.9rem;
    border-radius: 8px;
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#player {
    touch-action: manipulation; /* Evita el zoom de doble clic y mejora la respuesta táctil */
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* Contenedor de la meta-información */
.anim-meta {
    display: flex;
    justify-content: space-between; /* Empuja el texto a la izquierda y el botón a la derecha */
    align-items: center;           /* Centra verticalmente ambos elementos */
    margin-top: 10px;
    padding: 5px 0;
    flex-wrap: wrap;               /* Si el móvil es muy pequeño, baja el botón suavemente */
    gap: 10px;
}

/* Estilo para el botón de compartir */
.btn-share {
    background-color: #00d1ff;     /* Tu color cian XelWap */
    color: #02141a;                /* Fondo oscuro para contraste */
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-share:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0, 209, 255, 0.5);
}
.btn-share {
  display: block;
  margin: 10px 0 0 0;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.submenu{
  background: linear-gradient(
    180deg,
    rgba(3,26,33,0.98) 0%,
    rgba(2,20,26,0.98) 100%
  );
  border: 1px solid rgba(0,209,255,0.25);
  border-radius: 12px;
  backdrop-filter: blur(4px);
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.card{
  border-radius: 16px;
  padding: 18px;
}

.container{
  max-width: 1100px; /*1100px;*/
  margin: 50px auto 0;
  padding: 0 16px;
  box-sizing: border-box;
}