/******************************************************************
  Template Name: DJoz
  Description:  DJoz Music HTML Template
  Author: Colorlib
  Author URI: https://colorlib.com
  Version: 1.0
  Created: Colorlib
******************************************************************/

/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Services Section
6.  Track Section
7.  Countdown Section
8.  Team Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/

/*----------------------------------------*/

/* Template default CSS
/*----------------------------------------*/

/*----------------------------------------*/
/* Design System / CSS Variables
   (djmilobentancor - dark club/electronica theme)
/*----------------------------------------*/

:root {
	/* Brand accent colors */
	--accent-primary: #ff007f;
	--accent-secondary: #00bcd4;
	--accent-success: #4caf50;
	--accent-highlight: #e91e63;

	/* Dark backgrounds */
	--bg-dark-900: #05050b;
	--bg-dark-800: #0f0f1c;
	--bg-dark-700: #111116;
	--bg-overlay-dark: rgba(10, 10, 22, 0.95);
	--bg-panel: rgba(255, 255, 255, 0.05);
	--bg-panel-solid: rgba(0, 0, 0, 0.3);

	/* Text */
	--text-light: #ffffff;
	--text-muted: #b7b7b7;
	--text-dim: #888888;

	/* Typography */
	--font-heading: 'Rajdhani', sans-serif;
	--font-display: 'Rockville Solid Regular';

	/* Motion */
	--transition-base: all 0.3s ease;
}

html,
body {
	height: 100%;
	font-family: "Now Regular";
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	max-width: 100%;
}

/* Páginas secundarias (contacto.html, pack-detalle.html): fondo oscuro
   profundo aplicado directamente al <body>, no solo a las secciones.
   Sin esto, el header--normal semitransparente (rgba(10,10,22,0.85) +
   blur) queda flotando sobre el blanco por defecto del body y el
   blend da un gris/violeta lavado en vez del negro azulado real -
   ese era el "fondo gris" del header. Con el body ya oscuro debajo,
   el glassmorphism del header se ve consistente con index.html. */
body.page-dark {
	background: #0a0a16;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: #111111;
	font-weight: 400;
	font-family: "Rajdhani", sans-serif;
}

h1 {
	font-size: 70px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 15px;
	font-family: "Now Regular";
	color: #444444;
	font-weight: 400;
	line-height: 26px;
	margin: 0 0 15px 0;
}

img {
	max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: none;
}

a:hover,
a:focus {
	text-decoration: none;
	outline: none;
	color: #ffffff;
}

ul,
ol {
	padding: 0;
	margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
	margin-bottom: 40px;
	position: relative;
	z-index: 1;
}

.section-title.center-title {
	text-align: center;
}

.section-title h2 {
	font-size: 42px;
	color: #111111;
	font-weight: 700;
	text-transform: uppercase;
}

.section-title h1 {
	font-size: 100px;
	color: #0e0d0d;
	font-family: "Rockville Solid Regular";
	position: absolute;
	left: 0;
	top: -45px;
	width: 100%;
	z-index: -1;
}

.set-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.spad {
	padding-top: 100px;
	padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
	color: #fff;
}

/* buttons */

.primary-btn {
	display: inline-block;
	font-size: 15px;
	text-transform: uppercase;
	padding: 14px 25px 12px;
	color: #ffffff;
	background: var(--accent-primary);
	letter-spacing: 2px;
	transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.primary-btn.border-btn {
	background: transparent;
	border: 2px solid var(--accent-primary);
	color: #111111;
}

.primary-btn:hover,
.btn-payment:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(255, 0, 127, 0.35);
	opacity: 0.95;
}

.primary-btn:active,
.btn-payment:active {
	transform: translateY(0);
	box-shadow: none;
	opacity: 1;
}

.primary-btn:focus-visible,
.btn-payment:focus-visible,
.radar-nav-btn:focus-visible {
	outline: 2px solid var(--accent-secondary);
	outline-offset: 3px;
}

.site-btn {
	font-size: 15px;
	color: #ffffff;
	background: var(--accent-primary);
	font-weight: 700;
	letter-spacing: 2px;
	border: none;
	text-transform: uppercase;
	display: inline-block;
	padding: 14px 30px;
	width: 100%;
}

/* Preloder */

#preloder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	background: #000;
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

/*---------------------
  Header
-----------------------*/

.header {
	background: rgba(42, 1, 74, 0.5);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 9;
}

/* La usan contacto.html y pack-detalle.html: header en flujo normal (no
   flotando sobre un video como en el home) con vidrio oscuro
   semitransparente, para que combine sin corte de color con el
   breadcrumb y el resto de la página (mismo #0a0a16 de fondo - ver
   body.page-dark arriba). !important porque esta regla necesita ganar
   siempre sobre `.header` base (fondo violeta pensado para flotar
   sobre el video del home), sin depender de orden de carga del CSS. */
.header.header--normal {
	position: relative;
	background: rgba(10, 10, 22, 0.85) !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header__logo {
	padding: 20px 0 25px;
}

.header__logo a {
	display: inline-block;
}

.header__nav {
	text-align: right;
	background: transparent;
}

.header__menu {
	padding: 31px 0 27px;
	display: inline-block;
	/* Antes 45px: estaba pensado para un nav de 5 links. Con "Próximas
	   Fechas" ahora son 6, y a 45px+45px por link "Presupuesta tu fiesta"
	   (el más largo) no entraba en el ancho disponible y se caía a una
	   segunda línea, agrandando el header. */
	margin-right: 25px;
}

.header__menu ul li {
	list-style: none;
	display: inline-block;
	margin-right: 26px;
	position: relative;
}

.header__menu ul li.active a:after {
	opacity: 1;
}

.header__menu ul li:hover a:after {
	opacity: 1;
}

.header__menu ul li:hover .dropdown {
	top: 34px;
	opacity: 1;
	visibility: visible;
}

.header__menu ul li:last-child {
	margin-right: 0;
}

.header__menu ul li .dropdown {
	position: absolute;
	left: 0;
	top: 56px;
	width: 150px;
	background: #111111;
	text-align: left;
	padding: 2px 0;
	z-index: 9;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.header__menu ul li .dropdown li {
	display: block;
	margin-right: 0;
}

.header__menu ul li .dropdown li a {
	font-size: 14px;
	color: #ffffff;
	font-weight: 400;
	padding: 8px 20px;
	text-transform: capitalize;
}

.header__menu ul li .dropdown li a:after {
	display: none;
}

.header__menu ul li a {
	font-size: 15px;
	text-transform: uppercase;
	color: #ffffff;
	display: block;
	padding: 6px 0;
	position: relative;
}

.header__menu ul li a:after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--accent-primary);
	content: "";
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	opacity: 0;
}

.header__right__social {
	display: inline-block;
}

.header__right__social a {
	display: inline-block;
	font-size: 16px;
	color: #ffffff;
	margin-right: 16px;
	transition: color 0.3s ease, transform 0.3s ease;
}

.header__right__social a:hover {
	color: var(--accent-primary);
	transform: translateY(-2px);
}

.header__right__social a:last-child {
	margin-right: 0;
}

.slicknav_menu {
	display: none;
}

/*---------------------
  Hero
-----------------------*/

.hero {
	padding-top: 400px;
	padding-bottom: 295px;
	position: relative;
}

.hero__text {
	text-align: center;
}

.hero__text span {
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 6px;
}

.hero__text h1 {
	font-size: 110px;
	font-family: "Rockville Solid Regular";
	color: #ffffff;
	margin-bottom: 20px;
	margin-top: 22px;
}

.hero__text p {
	color: #ffffff;
	margin-bottom: 20px;
}

.hero__text .play-btn {
	font-size: 26px;
	color: var(--accent-primary);
	height: 90px;
	width: 90px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	display: inline-block;
	line-height: 90px;
	text-align: center;
	position: relative;
	z-index: 1;
}

/* Shared play-btn micro-interaction: applies on top of the size/color
   rules above (hero, youtube, skills), since it targets the bare class. */
.play-btn {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.play-btn:hover {
	transform: scale(1.12);
	box-shadow: 0 0 25px rgba(255, 0, 127, 0.6);
}

.play-btn:active {
	transform: scale(1.02);
}

.play-btn:focus-visible {
	outline: 2px solid var(--accent-secondary);
	outline-offset: 4px;
}

.hero__text .play-btn i {
	position: relative;
	top: 2px;
	left: 2px;
}

.hero__text .play-btn:after {
	position: absolute;
	left: 15px;
	top: 15px;
	height: 60px;
	width: 60px;
	background: #ffffff;
	border-radius: 50%;
	content: "";
	z-index: -1;
}

.linear__icon {
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-left: -16px;
	-webkit-animation: mymove 0.5s infinite alternate;
	animation: mymove 0.5s infinite alternate;
}

.linear__icon i {
	font-size: 50px;
	color: var(--accent-primary);
}

@-webkit-keyframes mymove {
	0% {
		bottom: 0;
	}
	100% {
		bottom: -10px;
	}
}

@keyframes mymove {
	0% {
		bottom: 0;
	}
	100% {
		bottom: -10px;
	}
}

/*---------------------
  Events
-----------------------*/

.event {
	padding-bottom: 60px;
}

.event .section-title {
	margin-bottom: 10px;
	position: relative;
}

.event .section-title:after {
	position: absolute;
	right: 46px;
	top: 25px;
	height: 2px;
	width: 775px;
	background: rgba(225, 225, 225, 0.3);
	content: "";
	z-index: -1;
}

.event__slider .col-lg-4 {
	max-width: 100%;
}

.event__slider.owl-carousel .owl-stage-outer {
	padding-top: 30px;
	padding-bottom: 40px;
}

.event__slider.owl-carousel .owl-nav {
	position: absolute;
	right: 15px;
	top: -50px;
}

.event__slider.owl-carousel .owl-nav button {
	font-size: 22px;
	color: #111111;
	opacity: 0.5;
	margin-right: 10px;
}

.event__slider.owl-carousel .owl-nav button:last-child {
	margin-right: 0;
}

.event__item {
	-webkit-box-shadow: 0px 3px 15px rgba(22, 41, 124, 0.1);
	box-shadow: 0px 3px 15px rgba(22, 41, 124, 0.1);
}

.event__item__pic {
	height: 360px;
	position: relative;
}

.event__item__pic .tag-date {
	position: absolute;
	left: 0;
	bottom: -21px;
	width: 100%;
	text-align: center;
}

.event__item__pic .tag-date span {
	font-size: 15px;
	color: #ffffff;
	display: inline-block;
	background: var(--accent-primary);
	padding: 12px 8px 9px 20px;
}

.event__item__text {
	text-align: center;
	padding: 45px 10px 25px;
}

.event__item__text h4 {
	font-size: 26px;
	font-weight: 700;
	color: #111111;
	margin-bottom: 10px;
}

.event__item__text p {
	color: #888888;
	margin-bottom: 0;
}

.event__item__text p i {
	color: var(--accent-primary);
	margin-right: 8px;
	font-size: 17px;
}

/*---------------------
  Track
-----------------------*/

.track {
	padding-top: 120px;
	padding-bottom: 40px;
	overflow: hidden;
}

.track .section-title {
	margin-bottom: 105px;
}

.track__content {
	height: 502px;
	overflow-y: auto;
}

.track__all {
	text-align: right;
	margin-bottom: 100px;
}

.jp-play {
	position: relative;
	height: 50px;
	width: 50px;
	background: transparent;
	border: 2px solid #e1e1e1;
	border-radius: 50%;
}

.jp-play:after {
	position: absolute;
	display: block;
	left: 17px;
	top: 12px;
	width: 16px;
	height: 20px;
	background: url(../img/play-default.png);
	content: "";
}

.jp-state-playing .jp-play {
	background: var(--accent-primary) !important;
	border-color: var(--accent-primary) !important;
}

.jp-state-playing .jp-play:after {
	background: url(../img/pause.png) !important;
	left: 15px;
	top: 12px;
}

.jp-audio .jp-play:focus {
	background: var(--accent-primary) !important;
	border-color: var(--accent-primary) !important;
}

.jp-audio .jp-play:focus:after {
	background: url(../img/play.png);
}

.jp-seek-bar>div {
	height: 5px;
	background: #e1e1e1;
	cursor: pointer;
	width: 245px;
}

.player_bars {
	width: 350px;
	display: table;
	padding-left: 50px;
	position: relative;
	padding-top: 25px;
	float: left;
	margin-right: 30px;
}

.jp-play-bar {
	position: relative;
	height: 100%;
	background: var(--accent-primary);
	overflow: visible !important;
}

.jp-current-time {
	font-size: 15px;
	color: #111111;
	position: absolute;
	left: -50px;
	top: -9px;
}

.jp-duration {
	font-size: 15px;
	color: #111111;
	position: absolute;
	right: 0;
	top: 16px;
}

.player_controls_box {
	width: 50px;
	float: left;
	margin-right: 20px;
}

.jp-mute {
	font-size: 18px;
	border: none;
	background: none;
	color: #111111;
	position: absolute;
	left: 0;
	top: 13px;
}

.jp-volume-bar {
	height: 5px;
	width: 70px;
	background: #e1e1e1;
	cursor: pointer;
}

.jp-volume-bar-value {
	background: var(--accent-primary);
	height: 100%;
}

.jp-volume-controls {
	position: relative;
	width: 95px;
	float: left;
	padding-left: 30px;
	padding-top: 25px;
}

.single_player_container {
	overflow: hidden;
	margin-bottom: 40px;
}

.single_player_container:last-child {
	margin-bottom: 0;
}

.single_player_container h4 {
	font-size: 26px;
	color: #111111;
	font-weight: 700;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.track__pic {
	position: relative;
	z-index: 1;
}

.track__pic:after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #f5f5f5;
	content: "";
	z-index: -1;
}

.track__pic img {
	position: relative;
	top: -50px;
	width: calc(100% - 40px);
	margin-left: 40px;
	height: 502px;
}

/*---------------------
  Youtube
-----------------------*/

.youtube {
	padding-bottom: 50px;
}

.youtube .section-title {
	text-align: center;
}

.youtube-title-wrap {
	margin-bottom: 80px;
	padding-top: 20px;
}

/* Grilla fluida: no depende de una cantidad fija de columnas de
   Bootstrap, así que 1, 4, 6, 8 (o cualquier cantidad de) videos
   siempre se acomodan bien. Cada tarjeta ocupa un mínimo de 280px y
   crece para llenar el espacio disponible; sin media queries. */
.youtube-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 25px;
}

.youtube-empty-state-wrap {
	grid-column: 1 / -1;
	text-align: center;
}

.youtube-card {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: #ffffff;
	cursor: pointer;
	box-shadow: 0 8px 25px rgba(17, 17, 17, 0.12);
	-webkit-transition: transform 0.35s ease, box-shadow 0.35s ease;
	-o-transition: transform 0.35s ease, box-shadow 0.35s ease;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.youtube-card:hover,
.youtube-card:focus-visible {
	transform: translateY(-6px);
	box-shadow:
		0 0 18px rgba(255, 0, 127, 0.35),
		0 0 34px rgba(0, 188, 212, 0.22),
		0 18px 35px rgba(17, 17, 17, 0.2);
	outline: none;
}

.youtube-card__pic {
	position: relative;
	height: 220px;
	overflow: hidden;
}

.youtube-card__thumb {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.45s ease;
}

.youtube-card:hover .youtube-card__thumb,
.youtube-card:focus-visible .youtube-card__thumb {
	transform: scale(1.04);
}

.youtube-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.youtube-card:hover .youtube-card__overlay,
.youtube-card:focus-visible .youtube-card__overlay {
	opacity: 1;
}

.youtube-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: inline-block;
	background: rgba(5, 5, 11, 0.65);
	color: var(--accent-secondary);
	border: 1px solid var(--accent-secondary);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 4px 10px;
	border-radius: 20px;
	text-shadow: 0 0 8px rgba(0, 188, 212, 0.9);
	box-shadow: 0 0 10px rgba(0, 188, 212, 0.45);
}

.youtube-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.3s ease;
}

.youtube-card__play i {
	position: relative;
	left: 2px;
}

.youtube-card:hover .youtube-card__play,
.youtube-card:focus-visible .youtube-card__play {
	background: var(--accent-primary);
	animation: youtubePlayPulse 1.6s ease-in-out infinite;
}

@keyframes youtubePlayPulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 0, 127, 0.55); }
	70% { box-shadow: 0 0 0 16px rgba(255, 0, 127, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 0, 127, 0); }
}

.youtube-card__text {
	padding: 20px 22px 24px;
}

.youtube-card__text h4 {
	font-size: 22px;
	color: #111111;
	line-height: 1.35;
	font-weight: 700;
	margin: 0;
}

/* Descripción de las tarjetas dinámicas de Videos Recomendados (ver
   js/recommended-videos.js). Solo se muestra si el video cargado en
   /admin trae ese campo completo. La categoría ahora vive como badge
   fluorescente sobre la miniatura (.youtube-card__badge). */
.youtube-item-description {
	color: #888888;
	font-size: 14px;
	line-height: 1.6;
	margin: 8px 0 0;
}

/*---------------------
  Video Lightbox (modal de Videos Recomendados)
-----------------------*/

body.video-lightbox-open {
	overflow: hidden;
}

.video-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-lightbox.is-active {
	opacity: 1;
	visibility: visible;
}

.video-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 5, 11, 0.9);
}

.video-lightbox__dialog {
	position: relative;
	width: 100%;
	max-width: 960px;
	transform: scale(0.96);
	transition: transform 0.3s ease;
}

.video-lightbox.is-active .video-lightbox__dialog {
	transform: scale(1);
}

.video-lightbox__iframe-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* proporción 16:9 */
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 0 40px rgba(255, 0, 127, 0.3), 0 0 70px rgba(0, 188, 212, 0.2);
}

.video-lightbox__iframe-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-lightbox__close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}

.video-lightbox__close:hover {
	background: var(--accent-primary);
	transform: rotate(90deg);
}

@media (max-width: 767px) {
	.video-lightbox__close {
		top: -42px;
		right: 0;
	}
}

/*---------------------
  Countdown
-----------------------*/

.countdown {
	padding-bottom: 560px;
}

.countdown.countdown--page {
	padding-top: 150px;
	padding-bottom: 150px;
}

.countdown__text {
	text-align: center;
	margin-bottom: 36px;
}

.countdown__text h1 {
	font-size: 90px;
	color: #ffffff;
	font-family: "Rockville Solid Regular";
	color: #ffffff;
	margin-bottom: 25px;
}

.countdown__text h4 {
	font-size: 26px;
	font-family: "Now Regular";
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 4px;
}

.countdown__timer {
	text-align: center;
	margin-bottom: 30px;
}

.countdown__item {
	display: inline-block;
	margin-right: 80px;
	margin-bottom: 30px;
}

.countdown__item:last-child {
	margin-right: 0;
}

.countdown__item span {
	font-size: 90px;
	font-family: "Rajdhani", sans-serif;
	font-weight: 700;
	color: #ffffff;
	display: block;
	line-height: 100px;
}

.countdown__item p {
	color: #ffffff;
	letter-spacing: 4px;
	text-transform: uppercase;
	margin-bottom: 0;
}

.buy__tickets {
	text-align: center;
}

/*---------------------
  Discography
-----------------------*/

.discography {
	padding-bottom: 40px;
	padding-top: 120px;
	overflow: hidden;
}

.discography .section-title {
	margin-bottom: 90px;
}

.discography__item {
	margin-bottom: 45px;
	-webkit-box-shadow: 0px 5px 10px rgba(22, 41, 124, 0.1);
	box-shadow: 0px 5px 10px rgba(22, 41, 124, 0.1);
}

.discography__item__pic img {
	min-width: 100%;
}

.discography__item__text {
	padding: 25px 30px 35px;
	text-align: center;
}

.discography__item__text span {
	font-size: 18px;
	color: var(--accent-primary);
	font-weight: 700;
}

.discography__item__text h4 {
	font-size: 22px;
	text-transform: uppercase;
	color: #111111;
	margin-top: 10px;
	margin-bottom: 25px;
}

.discography__item__text a {
	display: inline-block;
	margin-right: 10px;
}

.discography__item__text a:last-child {
	margin-right: 0;
}

.pagination__links {
	text-align: center;
	padding-top: 10px;
}

.pagination__links.blog__pagination {
	text-align: left;
}

.pagination__links a {
	display: inline-block;
	font-size: 15px;
	color: #111111;
	text-transform: uppercase;
	letter-spacing: 2px;
	background: #f2f2f2;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	margin-right: 6px;
	margin-bottom: 5px;
	padding: 14px 22px 12px;
}

.pagination__links a:last-child {
	margin-right: 0;
}

.pagination__links a:hover {
	background: #290849;
	color: #ffffff;
}

/*---------------------
  Footer
-----------------------*/

.footer {
	padding-top: 300px;
	padding-bottom: 60px;
	margin-top: -547px;
	height: 549px;
}

/* Solo la usa contacto.html: sin la imagen de fondo decorativa (ver
   HTML, ya no lleva set-bg/data-setbg) hace falta un fondo sólido
   propio + un padding-top normal, porque los valores base de .footer
   (padding-top:300px, height:549px) están pensados para dejar lugar a
   esa imagen y quedarían como un hueco vacío enorme sin ella. */
.footer.footer--normal {
	margin-top: 0;
	padding-top: 70px;
	height: auto;
	background: #0a0a16;
}

.footer__address {
	margin-bottom: 50px;
}

.footer__address ul li {
	list-style: none;
	padding-left: 70px;
	position: relative;
	margin-bottom: 30px;
}

.footer__address ul li:last-child {
	margin-bottom: 0;
}

.footer__address ul li i {
	font-size: 18px;
	color: var(--accent-primary);
	height: 50px;
	width: 50px;
	background: #ffffff;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
}

.footer__address ul li p {
	color: #ffffff;
	opacity: 0.7;
	margin-bottom: 8px;
}

.footer__address ul li h6 {
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
}

.footer__social {
	text-align: center;
	position: relative;
	margin-bottom: 50px;
}

.footer__social::before {
	position: absolute;
	left: -46px;
	top: 3px;
	width: 1px;
	height: 130px;
	background: rgba(255, 255, 255, 0.2);
	content: "";
}

.footer__social::after {
	position: absolute;
	right: -50px;
	top: 3px;
	width: 1px;
	height: 130px;
	background: rgba(255, 255, 255, 0.2);
	content: "";
}

.footer__social h2 {
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 25px;
}

.footer__social .footer__social__links a {
	font-size: 18px;
	color: var(--accent-primary);
	height: 50px;
	width: 50px;
	background: #ffffff;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	display: inline-block;
	margin-right: 10px;
}

.footer__social .footer__social__links a:last-child {
	margin-right: 0;
}

.footer__newslatter {
	margin-bottom: 50px;
}

.footer__newslatter h4 {
	font-size: 26px;
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 30px;
}

.footer__newslatter form {
	position: relative;
}

.footer__newslatter form input {
	height: 50px;
	font-size: 15px;
	color: #ffffff;
	width: 100%;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding-left: 20px;
}

.footer__newslatter form input::-webkit-input-placeholder {
	color: #ffffff;
}

.footer__newslatter form input::-moz-placeholder {
	color: #ffffff;
}

.footer__newslatter form input:-ms-input-placeholder {
	color: #ffffff;
}

.footer__newslatter form input::-ms-input-placeholder {
	color: #ffffff;
}

.footer__newslatter form input::placeholder {
	color: #ffffff;
}

/* Solo la usa contacto.html: foco con glow cian, en línea con el resto
   de la paleta neón de la página. */
.footer.footer--normal .footer__newslatter form input:focus {
	outline: none;
	border-color: var(--accent-secondary);
	box-shadow: 0 0 10px rgba(0, 188, 212, 0.4);
}

.footer__newslatter form button {
	font-size: 16px;
	color: #ffffff;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	padding: 0 18px;
	background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
	border: none;
	transition: box-shadow 0.3s ease;
}

.footer.footer--normal .footer__newslatter form button:hover,
.footer.footer--normal .footer__newslatter form button:focus-visible {
	box-shadow: 0 0 14px rgba(255, 0, 127, 0.45);
}

/* Mensaje de estado del formulario de newsletter (éxito/error) - ver
   js/newsletter.js. Vive debajo del form, dentro de .footer__newslatter. */
.newsletter-message {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 600;
	border: 1px solid transparent;
}

.newsletter-message--success {
	color: var(--accent-secondary);
	background: rgba(0, 188, 212, 0.1);
	border-color: rgba(0, 188, 212, 0.35);
	text-shadow: 0 0 8px rgba(0, 188, 212, 0.35);
}

.newsletter-message--error {
	color: var(--accent-primary);
	background: rgba(255, 0, 127, 0.1);
	border-color: rgba(255, 0, 127, 0.35);
	text-shadow: 0 0 8px rgba(255, 0, 127, 0.25);
}

.footer__copyright__text {
	text-align: center;
}

.footer__copyright__text p {
	color: #999999;
}

.footer__copyright__text a {
	color: #999999;
	text-decoration: underline;
}

.footer__copyright__text a:hover {
	color: var(--accent-primary);
}

.footer__copyright__text i {
	color: #c11;
}

/*---------------------
  Breadcrumb
-----------------------*/

/* Solo la usa contacto.html (Glassmorphism Dark Studio): fondo oscuro
   unificado con la sección de contacto, sin el bloque blanco que
   quedaba antes por no tener background propio. */
.breadcrumb-option {
	padding-top: 35px;
	padding-bottom: 20px;
	background: #0a0a16;
}

.breadcrumb__links a {
	font-size: 15px;
	color: #b7b7b7;
	margin-right: 18px;
	display: inline-block;
	position: relative;
	transition: color 0.3s ease;
}

.breadcrumb__links a:hover {
	color: var(--accent-primary);
}

.breadcrumb__links a:after {
	position: absolute;
	right: -14px;
	top: 0;
	content: "|";
	color: #444455;
}

.breadcrumb__links a i {
	margin-right: 5px;
}

/* Sección activa (texto plano, no es link) con acento magenta. */
.breadcrumb__links span {
	font-size: 15px;
	color: var(--accent-primary);
	font-weight: 600;
	display: inline-block;
	text-shadow: 0 0 10px rgba(255, 0, 127, 0.45);
}

/*---------------------
  About
-----------------------*/

.about {
	padding-top: 0;
}

.about.about--page {
	padding-top: 80px;
	padding-bottom: 80px;
}

.about.about--page .section-title {
	margin-bottom: 28px;
}

.about.about--page .section-title h2 {
	line-height: 55px;
}

.about.about--page .about__text {
	padding-top: 15px;
}

.about.about--page .about__text p {
	color: #111111;
}

.about__text {
	padding-top: 110px;
}

.about__text p {
	margin-bottom: 35px;
}

/*---------------------
  Skills
-----------------------*/

.skills {
	padding-bottom: 0;
	padding-top: 80px;
}

.skills__content {
	background: var(--accent-primary);
	height: 500px;
	padding: 100px 70px 60px;
}

.skills__content .section-title h2 {
	color: #ffffff;
}

.skills__content .section-title h1 {
	color: #ffffff;
	opacity: 0.1;
	text-align: center;
}

.skills__content p {
	color: #ffffff;
	margin-bottom: 32px;
}

.skill__bar__item {
	margin-bottom: 20px;
}

.skill__bar__item p {
	font-size: 15px;
	font-weight: 500;
	color: #ffffff;
	margin-bottom: 10px;
}

.skill__bar__item .barfiller {
	width: 100%;
	height: 5px;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	margin-bottom: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.skill__bar__item .barfiller .tip {
	margin-top: -32px;
	padding: 0;
	font-size: 15px;
	color: #fff;
	background: transparent;
}

.skill__bar__item .barfiller .tip:after {
	display: none;
}

.skills__video {
	height: 500px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.skills__video .play-btn {
	font-size: 26px;
	color: var(--accent-primary);
	height: 90px;
	width: 90px;
	border-radius: 50%;
	background: rgba(117, 31, 221, 0.3);
	display: inline-block;
	line-height: 90px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.skills__video .play-btn i {
	position: relative;
	top: 2px;
	left: 2px;
}

.skills__video .play-btn:after {
	position: absolute;
	left: 15px;
	top: 15px;
	height: 60px;
	width: 60px;
	background: #ffffff;
	border-radius: 50%;
	content: "";
	z-index: -1;
}

/*---------------------
  About Pic
-----------------------*/

.about-pic {
	overflow: hidden;
}

.about-pic .container-fluid {
	padding-right: 0;
}

.about-pic img {
	min-width: 100%;
	margin-bottom: 10px;
	padding-right: 10px;
}

/*---------------------
  About Services
-----------------------*/

.about-services {
	padding-bottom: 50px;
}

.about-services .section-title {
	margin-bottom: 60px;
}

.about__services__item {
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.about__services__item:hover {
	-webkit-box-shadow: 0px 3px 30px rgba(22, 41, 124, 0.1);
	box-shadow: 0px 3px 30px rgba(22, 41, 124, 0.1);
}

.about__services__item__pic {
	height: 240px;
	position: relative;
}

.about__services__item__pic .icon {
	height: 50px;
	width: 50px;
	background: var(--accent-primary);
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: -25px;
}

.about__services__item__text {
	text-align: center;
	padding: 50px 10px 30px;
}

.about__services__item__text h4 {
	font-size: 26px;
	color: #111111;
	font-weight: 700;
	margin-bottom: 12px;
}

.about__services__item__text p {
	margin-bottom: 0;
}

/*---------------------
  Feature
-----------------------*/

.feature {
	padding-bottom: 70px;
}

.feature.feature--about .section-title span {
	color: #0071e4;
}

.feature.feature--about .feature__item {
	background: #f5f5f5;
}

.feature.feature--about .feature__item h5 {
	color: #111111;
}

.feature__text {
	padding-top: 80px;
}

.feature__text .section-title {
	margin-bottom: 20px;
}

.feature__text p {
	margin-bottom: 26px;
}

.feature__item {
	background: #0c2b4b;
	text-align: center;
	padding: 40px 10px 35px;
	margin-bottom: 30px;
}

.feature__item.right-column {
	margin-top: 120px;
}

.feature__item h5 {
	font-weight: 700;
	text-transform: uppercase;
	color: #ffffff;
	margin-top: 25px;
}

/*---------------------
  Services
-----------------------*/

.services {
	overflow: hidden;
}

.services__left {
	height: 640px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.services__left .play-btn {
	font-size: 26px;
	color: #ffffff;
	height: 90px;
	width: 90px;
	border-radius: 50%;
	background: -webkit-gradient(linear, left top, right top, from(rgba(127, 0, 173, 0.3)), to(rgba(93, 0, 206, 0.3)));
	background: -o-linear-gradient(left, rgba(127, 0, 173, 0.3), rgba(93, 0, 206, 0.3));
	background: linear-gradient(to right, rgba(127, 0, 173, 0.3), rgba(93, 0, 206, 0.3));
	display: inline-block;
	line-height: 90px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.services__left .play-btn i {
	position: relative;
	top: 2px;
	left: 2px;
}

.services__left .play-btn:after {
	position: absolute;
	left: 15px;
	top: 15px;
	height: 60px;
	width: 60px;
	background: -webkit-gradient(linear, left top, right top, from(#7E00AD), to(#5C00CE));
	background: -o-linear-gradient(left, #7E00AD, #5C00CE);
	background: linear-gradient(to right, #7E00AD, #5C00CE);
	border-radius: 50%;
	content: "";
	z-index: -1;
}

.services__list {
	margin: 0;
}

.service__item {
	background: var(--accent-primary);
	height: 320px;
	padding: 70px 40px 40px 70px;
}

.service__item.deep-bg {
	background: #5400BC;
}

.service__item h4 {
	font-size: 26px;
	color: #ffffff;
	font-weight: 700;
	margin-top: 25px;
	margin-bottom: 10px;
}

.service__item p {
	color: #ffffff;
	margin-bottom: 0;
}

/*---------------------
  Tours
-----------------------*/

.tours {
	padding-top: 150px;
	padding-bottom: 60px;
}

.tours__item__text {
	padding-right: 30px;
	margin-bottom: 100px;
}

.tours__item__text.tours__item__text--right {
	padding-left: 30px;
	padding-right: 0;
}

.tours__item__text h2 {
	font-size: 42px;
	color: #111111;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.tours__item__text .tours__text__widget {
	overflow: hidden;
	border-bottom: 2px solid #f2f2f2;
	padding-bottom: 38px;
}

.tours__item__text .tours__text__widget ul {
	float: left;
}

.tours__item__text .tours__text__widget ul li {
	list-style: none;
	font-size: 15px;
	color: #111111;
	padding-left: 35px;
	position: relative;
	margin-bottom: 10px;
}

.tours__item__text .tours__text__widget ul li:last-child {
	margin-bottom: 0;
}

.tours__item__text .tours__text__widget ul li i {
	color: var(--accent-primary);
	position: absolute;
	left: 0;
	top: 3px;
}

.tours__item__text .tours__text__widget ul li span {
	display: inline-block;
	padding-right: 8px;
	position: relative;
	margin-right: 5px;
}

.tours__item__text .tours__text__widget ul li span:last-child {
	padding-right: 0;
	margin-right: 0;
}

.tours__item__text .tours__text__widget ul li span:last-child:after {
	display: none;
}

.tours__item__text .tours__text__widget ul li span:after {
	position: absolute;
	right: 0;
	top: 0;
	content: "|";
}

.tours__item__text .tours__text__widget .price {
	font-size: 18px;
	color: #ffffff;
	font-weight: 700;
	display: inline-block;
	padding: 14px 25px 12px 30px;
	background: var(--accent-primary);
	float: right;
}

.tours__item__text .tours__text__desc {
	padding-top: 40px;
	margin-bottom: 65px;
}

.tours__item__text .tours__text__desc p {
	color: #111111;
	margin-bottom: 20px;
}

.tours__item__text .tours__text__desc p:last-child {
	margin-bottom: 0;
}

.tours__item__pic {
	position: relative;
	z-index: 1;
	padding-right: 50px;
	margin-bottom: 110px;
	padding-left: 30px;
}

.tours__item__pic.tours__item__pic--left {
	padding-left: 50px;
	padding-right: 0;
}

.tours__item__pic.tours__item__pic--left:after {
	left: 0;
}

.tours__item__pic.tours__item__pic--last {
	margin-bottom: 0;
}

.tours__item__pic:after {
	position: absolute;
	left: 50px;
	top: -50px;
	width: calc(100% - 50px);
	height: 100%;
	border: 20px solid rgba(9, 53, 247, 0.1);
	content: "";
	z-index: -1;
}

.tours__item__pic img {
	min-width: 100%;
}

/*---------------------
  Videos
-----------------------*/

.videos {
	padding-bottom: 90px;
}

.videos .section-title {
	margin-bottom: 70px;
}

.videos__large__item {
	height: 585px;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-bottom: 30px;
}

.videos__large__item .play-btn {
	height: 50px;
	width: 50px;
	background: var(--accent-primary);
	border-radius: 50%;
	font-size: 18px;
	line-height: 50px;
	text-align: center;
	display: inline-block;
	color: #ffffff;
}

.videos__large__item__text {
	background: rgba(7, 14, 38, 0.7);
	padding: 25px 30px 25px;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}

.videos__large__item__text h4 {
	color: #ffffff;
	font-weight: 700;
}

.videos__large__item__text ul li {
	font-size: 13px;
	list-style: none;
	display: inline-block;
	margin-right: 18px;
	color: #ffffff;
	position: relative;
}

.videos__large__item__text ul li:after {
	position: absolute;
	right: -12px;
	top: 2px;
	height: 17px;
	width: 1px;
	background: #ffffff;
	content: "";
}

.videos__large__item__text ul li:last-child {
	margin-right: 0;
}

.videos__large__item__text ul li:last-child:after {
	display: none;
}

.videos__item__pic {
	height: 180px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.videos__item__pic .play-btn {
	height: 40px;
	width: 40px;
	background: var(--accent-primary);
	border-radius: 50%;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	display: inline-block;
	color: #ffffff;
}

.videos__item__text {
	padding-top: 20px;
}

.videos__item__text h5 {
	color: #111111;
	font-weight: 700;
	line-height: 26px;
	margin-bottom: 5px;
}

.videos__item__text ul li {
	font-size: 13px;
	list-style: none;
	display: inline-block;
	margin-right: 18px;
	color: var(--accent-primary);
	position: relative;
}

.videos__item__text ul li:after {
	position: absolute;
	right: -12px;
	top: 2px;
	height: 17px;
	width: 1px;
	background: #888888;
	content: "";
}

.videos__item__text ul li:last-child {
	margin-right: 0;
	color: #888888;
}

.videos__item__text ul li:last-child:after {
	display: none;
}

.videos__slider .col-lg-3 {
	max-width: 100%;
}

.videos__slider.owl-carousel .owl-nav button {
	font-size: 18px;
	color: #888888;
	height: 50px;
	width: 25px;
	background: #ffffff;
	line-height: 50px;
	position: absolute;
	left: 15px;
	top: 22%;
}

.videos__slider.owl-carousel .owl-nav button.owl-next {
	left: auto;
	right: 15px;
}

/*---------------------
    Blog
-----------------------*/

.blog {
	padding-bottom: 60px;
}

.blog .section-title {
	margin-bottom: 80px;
}

.blog__large {
	margin-bottom: 45px;
	-webkit-box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1);
	box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1);
	margin-bottom: 50px;
}

.blog__large__pic {
	height: 370px;
	position: relative;
}

.blog__large__pic a {
	font-size: 16px;
	height: 40px;
	width: 40px;
	background: rgba(245, 245, 245, 0.3);
	border-radius: 50%;
	color: #ffffff;
	line-height: 40px;
	text-align: center;
	display: inline-block;
	position: absolute;
	right: 12px;
	bottom: 12px;
}

.blog__large__text {
	background: #ffffff;
	text-align: center;
	padding: 30px 40px 0;
}

.blog__large__text span {
	font-size: 13px;
	text-transform: uppercase;
	color: var(--accent-primary);
}

.blog__large__text h4 {
	color: #111111;
	font-weight: 700;
	line-height: 31px;
	margin-top: 5px;
	margin-bottom: 15px;
}

.blog__large__text p {
	margin-bottom: 40px;
}

.blog__large__widget {
	border-top: 1px solid #f2f2f2;
	padding: 15px 0 20px;
	text-align: left;
	margin: 0 30px;
}

.blog__large__widget .right__widget {
	text-align: right;
}

.blog__large__widget ul li {
	font-size: 13px;
	color: #888888;
	display: inline-block;
	list-style: none;
	margin-right: 20px;
	position: relative;
}

.blog__large__widget ul li span {
	color: #111111;
}

.blog__large__widget ul li:after {
	position: absolute;
	right: -14px;
	top: -2px;
	content: "|";
}

.blog__large__widget ul li:last-child {
	margin-right: 0;
}

.blog__large__widget ul li:last-child:after {
	display: none;
}

.blog__item {
	-webkit-box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1);
	box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1);
	margin-bottom: 50px;
}

.blog__item__pic img {
	min-width: 100%;
}

.blog__item__text {
	text-align: center;
	background: #ffffff;
	padding: 20px 20px 25px;
}

.blog__item__text span {
	font-size: 13px;
	text-transform: uppercase;
	color: var(--accent-primary);
}

.blog__item__text h5 {
	color: #111111;
	font-weight: 700;
	line-height: 26px;
	font-size: 20px;
	margin-top: 10px;
	margin-bottom: 12px;
}

.blog__item__text ul li {
	font-size: 13px;
	color: #888888;
	display: inline-block;
	list-style: none;
	margin-right: 20px;
	position: relative;
}

.blog__item__text ul li span {
	color: #111111;
}

.blog__item__text ul li:after {
	position: absolute;
	right: -14px;
	top: -2px;
	content: "|";
}

.blog__item__text ul li:last-child {
	margin-right: 0;
}

.blog__item__text ul li:last-child:after {
	display: none;
}

/*---------------------
  Blog Sidebar
-----------------------*/

.blog__sidebar__item {
	text-align: center;
	margin-bottom: 65px;
}

.blog__sidebar__item:last-child {
	margin-bottom: 0;
}

.blog__sidebar__item form input {
	height: 50px;
	font-size: 15px;
	color: #444444;
	padding-left: 20px;
	border: 1px solid #e1e1e1;
	width: 100%;
	margin-bottom: 20px;
}

.blog__sidebar__item form input::-webkit-input-placeholder {
	color: #444444;
}

.blog__sidebar__item form input::-moz-placeholder {
	color: #444444;
}

.blog__sidebar__item form input:-ms-input-placeholder {
	color: #444444;
}

.blog__sidebar__item form input::-ms-input-placeholder {
	color: #444444;
}

.blog__sidebar__item form input::placeholder {
	color: #444444;
}

.blog__sidebar__title {
	text-align: center;
	margin-bottom: 35px;
}

.blog__sidebar__title h4 {
	color: #111111;
	font-weight: 700;
	position: relative;
	padding-bottom: 20px;
}

.blog__sidebar__title h4::before {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	width: 70px;
	background: #e1e1e1;
	content: "";
	margin: 0 auto;
}

.blog__sidebar__social a {
	display: inline-block;
	font-size: 18px;
	color: #111111;
	width: 50px;
	height: 50px;
	background: #f2f2f2;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	margin-right: 6px;
	margin-bottom: 5px;
}

.blog__sidebar__social a:last-child {
	margin-right: 6px;
}

.recent__item {
	display: block;
	overflow: hidden;
	margin-bottom: 25px;
	text-align: left;
}

.recent__item__pic {
	float: left;
	margin-right: 25px;
}

.recent__item__text {
	overflow: hidden;
}

.recent__item__text h6 {
	color: #111111;
	line-height: 21px;
	font-weight: 700;
}

.recent__item__text span {
	font-size: 13px;
	color: #888888;
}

/*---------------------
  Blog Details
-----------------------*/

.blog-details {
	padding-bottom: 60px;
	padding-top: 70px;
}

.blog__details__item {
	margin-bottom: 32px;
}

.blog__details__item__pic {
	height: 385px;
	position: relative;
}

.blog__details__item__pic a {
	font-size: 16px;
	height: 40px;
	width: 40px;
	background: rgba(245, 245, 245, 0.3);
	border-radius: 50%;
	color: #ffffff;
	line-height: 40px;
	text-align: center;
	display: inline-block;
	position: absolute;
	right: 12px;
	bottom: 12px;
}

.blog__details__item__text {
	background: #ffffff;
	padding-top: 30px;
}

.blog__details__item__text span {
	font-size: 13px;
	text-transform: uppercase;
	color: var(--accent-primary);
}

.blog__details__item__text h3 {
	color: #111111;
	font-weight: 700;
	line-height: 31px;
	margin-top: 5px;
	margin-bottom: 15px;
}

.blog__details__item__text p {
	margin-bottom: 40px;
}

.blog__details__item__widget {
	border-top: 1px solid #f2f2f2;
	padding-top: 15px;
	text-align: left;
}

.blog__details__item__widget ul li {
	font-size: 13px;
	color: #888888;
	display: inline-block;
	list-style: none;
	margin-right: 20px;
	position: relative;
}

.blog__details__item__widget ul li span {
	color: #111111;
}

.blog__details__item__widget ul li:after {
	position: absolute;
	right: -14px;
	top: -2px;
	content: "|";
}

.blog__details__item__widget ul li:last-child {
	margin-right: 0;
}

.blog__details__item__widget ul li:last-child:after {
	display: none;
}

.blog__details__desc {
	margin-bottom: 54px;
}

.blog__details__desc p {
	margin-bottom: 20px;
}

.blog__details__desc p:last-child {
	margin-bottom: 0;
}

.blog__details__quote {
	border: 1px solid #e1e1e1;
	padding: 35px 40px 35px 40px;
	position: relative;
	margin-bottom: 35px;
}

.blog__details__quote p {
	font-size: 18px;
	color: #111111;
	line-height: 31px;
}

.blog__details__quote h6 {
	font-size: 15px;
	color: #888888;
	text-transform: uppercase;
}

.blog__details__quote i {
	font-size: 36px;
	color: var(--accent-primary);
	position: absolute;
	right: 40px;
	bottom: 35px;
}

.blog__details__tags {
	padding-top: 20px;
	margin-bottom: 60px;
}

.blog__details__tags a {
	display: inline-block;
	font-size: 15px;
	color: #444444;
	padding: 12px 20px 10px;
	background: #f5f5f5;
	margin-right: 10px;
}

.blog__details__tags a:last-child {
	margin-right: 0;
}

.blog__details__option {
	margin-bottom: 60px;
}

.blog__option__btn {
	display: block;
	overflow: hidden;
}

.blog__option__btn.blog__option__btn--next {
	text-align: right;
}

.blog__option__btn.blog__option__btn--next .option__btn__name i {
	margin-right: 0;
	margin-left: 6px;
}

.blog__option__btn.blog__option__btn--next .blog__option__btn__item {
	overflow: hidden;
}

.blog__option__btn.blog__option__btn--next .blog__option__btn__item .blog__option__btn__pic {
	float: right;
	margin-right: 0;
	margin-left: 30px;
}

.blog__option__btn .option__btn__name {
	font-size: 15px;
	color: #444444;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 25px;
}

.blog__option__btn .option__btn__name i {
	font-size: 18px;
	font-weight: 700;
	margin-right: 6px;
}

.blog__option__btn__pic {
	float: left;
	margin-right: 26px;
}

.blog__option__btn__text {
	overflow: hidden;
}

.blog__option__btn__text h6 {
	color: #111111;
	font-weight: 700;
	line-height: 21px;
}

.blog__option__btn__text span {
	color: #888888;
	font-size: 13px;
}

.blog__details__services {
	margin-bottom: 30px;
}

.blog__details__services__title,
.blog__details__form__title {
	text-align: center;
	margin-bottom: 30px;
}

.blog__details__services__title h4,
.blog__details__form__title h4 {
	color: #111111;
	font-weight: 700;
	position: relative;
	padding-bottom: 20px;
	font-size: 26px;
}

.blog__details__services__title h4::before,
.blog__details__form__title h4::before {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	width: 70px;
	background: #e1e1e1;
	content: "";
	margin: 0 auto;
}

.blog__details__services__item {
	-webkit-box-shadow: 0px 5px 15px rgba(0, 61, 85, 0.07);
	box-shadow: 0px 5px 15px rgba(0, 61, 85, 0.07);
	margin-bottom: 30px;
}

.blog__details__services__item__pic img {
	min-width: 100%;
}

.blog__details__services__item__text {
	padding: 15px 20px 10px;
}

.blog__details__services__item__text h6 a {
	font-size: 17px;
	color: #111111;
	font-weight: 700;
	line-height: 22px;
}

.blog__details__services__item__text span {
	color: #888888;
	font-size: 13px;
}

.blog__details__form form .input__list,
.contact__form form .input__list {
	margin-right: -20px;
	overflow: hidden;
}

.blog__details__form form .input__list input,
.contact__form form .input__list input {
	height: 50px;
	font-size: 13px;
	color: #666666;
	padding-left: 20px;
	border: 1px solid #e1e1e1;
	width: calc(33.33% - 20px);
	margin-bottom: 20px;
	margin-right: 16px;
}

.blog__details__form form .input__list input::-webkit-input-placeholder,
.contact__form form .input__list input::-webkit-input-placeholder {
	color: #666666;
}

.blog__details__form form .input__list input::-moz-placeholder,
.contact__form form .input__list input::-moz-placeholder {
	color: #666666;
}

.blog__details__form form .input__list input:-ms-input-placeholder,
.contact__form form .input__list input:-ms-input-placeholder {
	color: #666666;
}

.blog__details__form form .input__list input::-ms-input-placeholder,
.contact__form form .input__list input::-ms-input-placeholder {
	color: #666666;
}

.blog__details__form form .input__list input::placeholder,
.contact__form form .input__list input::placeholder {
	color: #666666;
}

.blog__details__form form textarea,
.contact__form form textarea {
	height: 120px;
	font-size: 13px;
	color: #666666;
	padding-left: 20px;
	padding-top: 12px;
	border: 1px solid #e1e1e1;
	width: 100%;
	margin-bottom: 14px;
	resize: none;
}

.blog__details__form form textarea::-webkit-input-placeholder,
.contact__form form textarea::-webkit-input-placeholder {
	color: #666666;
}

.blog__details__form form textarea::-moz-placeholder,
.contact__form form textarea::-moz-placeholder {
	color: #666666;
}

.blog__details__form form textarea:-ms-input-placeholder,
.contact__form form textarea:-ms-input-placeholder {
	color: #666666;
}

.blog__details__form form textarea::-ms-input-placeholder,
.contact__form form textarea::-ms-input-placeholder {
	color: #666666;
}

.blog__details__form form textarea::placeholder,
.contact__form form textarea::placeholder {
	color: #666666;
}

/*---------------------
  Map
-----------------------*/

.map {
	height: 585px;
	margin-top: 60px;
}

.map iframe {
	width: 100%;
}

/*---------------------
  Contact
-----------------------*/

/* Glassmorphism Dark Studio: toda la sección de contacto vive sobre un
   fondo oscuro unificado (ver también .breadcrumb-option arriba, que
   comparte el mismo color para que no quede un salto/corte visual). */
.contact {
	padding-top: 80px;
	padding-bottom: 50px;
	background: #0a0a16;
	color: #ffffff;
}

.contact__address .section-title {
	margin-bottom: 20px;
}

.contact__address .section-title h2 {
	text-transform: none;
	font-family: 'Rock Salt', cursive;
	font-size: 30px;
	color: #ffffff;
	line-height: 1.5;
	text-shadow: 0 0 16px rgba(255, 0, 127, 0.5), 0 0 30px rgba(255, 0, 127, 0.2);
}

.contact__address p {
	margin-bottom: 34px;
	color: #b7b7b7;
}

.contact__address ul li {
	list-style: none;
	padding-left: 100px;
	position: relative;
	margin-bottom: 30px;
}

.contact__address ul li:last-child {
	margin-bottom: 0;
}

/* Círculos de ícono: antes eran círculos blancos sólidos; ahora son
   contenedores oscuros translúcidos con borde sutil y un resplandor
   (glow) del color de la marca al pasar el mouse. */
.contact__address ul li i {
	font-size: 26px;
	height: 64px;
	width: 64px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	line-height: 62px;
	text-align: center;
	position: absolute;
	left: 0;
	top: -4px;
	transition: var(--transition-base);
}

.contact__address ul li:nth-child(1) i {
	color: var(--accent-primary);
}

.contact__address ul li:nth-child(2) i {
	color: var(--accent-secondary);
}

.contact__address ul li:hover i {
	background: rgba(255, 255, 255, 0.08);
	border-color: currentColor;
	box-shadow: 0 0 18px currentColor;
}

.contact__address ul li h5 {
	font-size: 20px;
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 10px;
}

.contact__address ul li p {
	margin-bottom: 0;
	color: #b7b7b7;
}

.contact__address ul li span {
	font-size: 15px;
	color: #ffffff;
	display: inline-block;
	margin-right: 25px;
	position: relative;
}

.contact__address ul li span:after {
	position: absolute;
	right: -20px;
	top: -1px;
	content: ".";
	font-size: 39px;
	line-height: 0;
	border-radius: 50%;
}

.contact__address ul li span:last-child {
	margin-right: 0;
}

.contact__address ul li span:last-child:after {
	display: none;
}

.contact__form .section-title {
	margin-bottom: 30px;
}

.contact__form .section-title h2 {
	text-transform: none;
	font-family: 'Rock Salt', cursive;
	font-size: 35px;
	color: var(--accent-primary);
	display: inline-block;
	text-shadow: 0 0 16px rgba(255, 0, 127, 0.55), 0 0 32px rgba(0, 188, 212, 0.35);
}

.contact__form p {
	margin-bottom: 34px;
	color: #b7b7b7;
}

/* Tarjeta glassmorphism que envuelve la columna de información de
   contacto (izquierda). */
.contact-info-card {
	background: rgba(255, 255, 255, 0.03);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 30px;
}

/* Botón de contacto rápido por WhatsApp, dentro de la tarjeta de
   información. Abre un chat directo con mensaje prellenado. */
.contact__whatsapp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 30px;
	padding: 16px 20px;
	background: #25d366;
	color: #ffffff;
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: 10px;
	text-decoration: none;
	box-shadow: 0 0 20px rgba(37, 211, 102, 0.35);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact__whatsapp-btn:hover,
.contact__whatsapp-btn:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 0 30px rgba(37, 211, 102, 0.55);
	color: #ffffff;
}

.contact__whatsapp-btn i {
	font-size: 20px;
}

/* Mapa de Google Maps embebido en la tarjeta de contacto. El filtro es
   el truco estándar para aproximar un tema oscuro sin depender de un
   estilo de mapa vía API key. */
.contact-map-frame {
	border-radius: 12px;
	filter: invert(90%) hue-rotate(180deg) contrast(100%);
	margin-top: 15px;
	width: 100%;
	height: 180px;
	border: 0;
	display: block;
}

/* Botón chico bajo el textarea de ubicación del evento (formulario),
   para que el cliente pueda verificar la dirección que escribió antes
   de enviar. Abre Google Maps en una pestaña nueva, no depende del
   iframe de arriba. */
.quote-map-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	background: transparent;
	border: none;
	padding: 0;
	color: var(--accent-secondary);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.3s ease;
}

.quote-map-link:hover,
.quote-map-link:focus-visible {
	color: var(--accent-primary);
}

.quote-submit-btn:disabled {
	opacity: 0.75;
	cursor: not-allowed;
	transform: none;
	animation: none;
}

/* Alerta de resultado del envío (éxito o error), inyectada por JS en
   #quote-alert al terminar de intentar el envío por EmailJS. */
.quote-alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 20px;
	padding: 18px 20px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.6;
	color: #ffffff;
}

.quote-alert i {
	font-size: 20px;
	margin-top: 2px;
	flex-shrink: 0;
}

.quote-alert--success {
	background: rgba(76, 175, 80, 0.1);
	border: 1px solid rgba(76, 175, 80, 0.4);
}

.quote-alert--success i {
	color: var(--accent-success);
}

.quote-alert--error {
	background: rgba(255, 77, 77, 0.08);
	border: 1px solid rgba(255, 77, 77, 0.4);
}

.quote-alert--error i {
	color: #ff4d4d;
}

.quote-alert__whatsapp-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding: 8px 16px;
	background: #25d366;
	color: #ffffff;
	font-weight: 700;
	font-size: 13px;
	border-radius: 8px;
	text-decoration: none;
	box-shadow: 0 0 12px rgba(37, 211, 102, 0.35);
	transition: transform 0.3s ease;
}

.quote-alert__whatsapp-btn:hover,
.quote-alert__whatsapp-btn:focus-visible {
	transform: translateY(-2px);
	color: #ffffff;
}

/* Dropdown de sugerencias de Google Places Autocomplete (#ubicacion_evento).
   Google lo inserta directo en <body>, fuera de #booking-form, así que
   hay que temizarlo aparte para que no rompa el tema oscuro. */
.pac-container {
	background: #14141f;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	margin-top: 4px;
	font-family: "Now Regular";
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.pac-item {
	background: transparent;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	color: #b7b7b7;
	padding: 8px 12px;
	cursor: pointer;
}

.pac-item:hover,
.pac-item-selected {
	background: rgba(255, 255, 255, 0.06);
}

.pac-item-query {
	color: #ffffff;
}

.pac-matched {
	color: var(--accent-secondary);
}

.pac-icon {
	filter: invert(1);
}

/* Link de contingencia "Ver directo en YouTube" dentro del modal del
   video del hero (.video-popup, ver index.html). El CSS del plugin no
   declara position:relative en el scaler, así que lo forzamos acá
   para que el link se ancle correctamente debajo del video. */
.mfp-iframe-scaler {
	position: relative;
}

.video-popup-fallback-link {
	position: absolute;
	bottom: -46px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	background: #ff0000;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	border-radius: 20px;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 0 14px rgba(255, 0, 0, 0.4);
	transition: transform 0.3s ease;
}

.video-popup-fallback-link:hover,
.video-popup-fallback-link:focus-visible {
	transform: translateX(-50%) translateY(-2px);
	color: #ffffff;
}

@media (max-width: 767px) {
	.video-popup-fallback-link {
		bottom: -42px;
		font-size: 12px;
		padding: 7px 14px;
	}
}

/* Formulario de presupuesto (#booking-form). Selectores con el ID del
   formulario para que ganen limpio sin pisar los estilos legacy de
   ".contact__form form textarea" / ".input__list" (esas reglas son de
   un layout viejo que este formulario ya no usa). */
#booking-form label {
	display: block;
	color: var(--accent-secondary);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 8px;
}

#booking-form input,
#booking-form select,
#booking-form textarea {
	width: 100%;
	height: 50px;
	padding: 0 18px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	color: #ffffff;
	font-size: 14px;
	font-family: "Now Regular";
	/* Íconos nativos del navegador (calendario/reloj) en blanco. */
	color-scheme: dark;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

#booking-form textarea {
	height: 130px;
	padding: 15px 18px;
	resize: none;
}

#booking-form input::-webkit-input-placeholder,
#booking-form textarea::-webkit-input-placeholder {
	color: #7d7d8a;
}

#booking-form input::placeholder,
#booking-form textarea::placeholder {
	color: #7d7d8a;
}

#booking-form input:focus,
#booking-form select:focus,
#booking-form textarea:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--accent-primary);
	box-shadow: 0 0 12px rgba(255, 0, 127, 0.4);
}

/* Validación básica: se agrega esta clase por JS a los campos
   requeridos que quedaron vacíos al intentar enviar. */
#booking-form input.field-invalid,
#booking-form select.field-invalid,
#booking-form textarea.field-invalid {
	border-color: #ff4d4d;
	box-shadow: 0 0 10px rgba(255, 77, 77, 0.5);
}

.quote-send-options {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

.quote-send-options .quote-submit-btn,
.quote-send-options .quote-email-btn {
	flex: 1 1 220px;
}

.quote-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 20px;
	border: none;
	border-radius: 8px;
	background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
	color: #ffffff;
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 0 20px rgba(255, 0, 127, 0.25);
}

.quote-submit-btn:hover,
.quote-submit-btn:focus-visible {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 0 22px rgba(255, 0, 127, 0.5), 0 0 36px rgba(0, 188, 212, 0.35);
}

.quote-email-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 20px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	color: #ffffff;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: var(--transition-base);
}

.quote-email-btn:hover,
.quote-email-btn:focus-visible {
	background: rgba(255, 255, 255, 0.09);
	border-color: var(--accent-secondary);
	box-shadow: 0 0 12px rgba(0, 188, 212, 0.35);
}

@media only screen and (max-width: 767px) {
	.contact-info-card {
		padding: 24px;
	}
}

/*----------------------------------------*/
/* Selecta - Video Hero Showcase (Premium)
/*----------------------------------------*/

.video-hero-container {
	background: linear-gradient(135deg, var(--bg-dark-800) 0%, var(--bg-dark-900) 100%);
	border: 2px solid var(--accent-primary);
	border-radius: 15px;
	overflow: hidden;
	margin-bottom: 80px;
	margin-left: 0;
	margin-right: 0;
	box-shadow: 0px 10px 30px rgba(255, 0, 127, 0.2);
}

/* No align-items-center here on purpose: with default (stretch) cross-axis
   alignment, the video column receives a definite height equal to the row's
   height, which lets height:100% on the <video> resolve correctly. Forcing
   center alignment left the column's height ambiguous (min/max only), which
   made the video fall back to its intrinsic size and get hard-clipped by
   overflow:hidden - that was the cause of the cropped/flush-to-edge look. */
.video-hero-video-col {
	position: relative;
	min-height: 320px;
	overflow: hidden;
	display: flex;
	background: #000;
}

.video-hero-video {
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	object-position: center;
	filter: contrast(110%);
	display: block;
}

/* Below 991px the columns stack (video on top, content below). Forcing a
   fixed-height box here and keeping object-fit:cover was cropping the
   flyer's own title/subtitle text baked into the video. Once stacked, let
   the box follow the video's natural aspect ratio instead: full width,
   auto height, contain (nothing gets cut off), rounded on top only since
   it now sits at the top of the card. */
@media only screen and (max-width: 991px) {
	.video-hero-video-col {
		height: auto;
		min-height: 0;
		max-height: none;
		display: block;
		border-radius: 13px 13px 0 0;
	}

	.video-hero-video {
		height: auto;
		min-height: 0;
		object-fit: contain;
		border-radius: 13px 13px 0 0;
	}
}

.video-hero-video-fade {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(0, 0, 0, 0) 70%, var(--bg-dark-800) 100%);
	pointer-events: none;
}

/* Estado "sin portada" del slide de fallback genérico de la Colección
   Premium (ver index.html): un ícono discreto en vez de una caja negra. */
.video-hero-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 320px;
	color: rgba(255, 255, 255, 0.15);
	font-size: 64px;
}

.video-hero-content {
	padding: 40px 50px;
}

.video-hero-eyebrow {
	color: var(--accent-primary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
	display: block;
	margin-bottom: 10px;
}

.video-hero-title {
	color: var(--text-light);
	font-size: 42px;
	font-weight: 800;
	margin-bottom: 15px;
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.video-hero-pricing {
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

.price-old {
	color: var(--text-dim);
	font-size: 20px;
	text-decoration: line-through;
	font-weight: 600;
}

.price-new {
	color: var(--text-light);
	font-size: 28px;
	font-weight: 800;
	font-family: var(--font-heading);
}

.price-new-value {
	color: var(--accent-success);
}

.price-badge {
	background: var(--accent-primary);
	color: var(--text-light);
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 4px;
	letter-spacing: 1px;
}

.video-hero-description {
	color: #d1d1e0;
	font-size: 16px;
	line-height: 1.8;
	margin-bottom: 25px;
}

.video-hero-buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 350px;
	font-family: 'Helvetica Neue', Arial, sans-serif;
}

.btn-payment {
	padding: 12px 20px;
	font-size: 13px;
	letter-spacing: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	width: 100%;
	border-radius: 4px;
	text-decoration: none;
	font-weight: bold;
	box-sizing: border-box;
	transition: var(--transition-base);
}

.btn-payment--mercadopago {
	background: #009ee3;
	border-color: #009ee3;
	color: #ffffff;
}

.btn-payment--paypal {
	background: #FFD140;
	border-color: #FFD140;
	color: #000000;
}

.btn-payment--whatsapp {
	background: #25d366;
	border-color: #25d366;
	color: #ffffff;
}

.btn-payment--vermas {
	background: transparent;
	border: 2px solid var(--accent-secondary);
	color: var(--accent-secondary);
}

.btn-payment--vermas:hover,
.btn-payment--vermas:focus-visible {
	background: var(--accent-secondary);
	color: var(--bg-dark-900);
}

.btn-payment--whatsapp i {
	font-size: 16px;
}

.btn-payment-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
}

.paypal-badges {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin-top: 2px;
}

.paypal-badge-img {
	height: 16px;
}

.paypal-badge-text {
	font-size: 10px;
	color: #666;
}

.paypal-badge-logo {
	height: 10px;
	vertical-align: middle;
	display: inline-block;
	margin-left: 2px;
}

/*----------------------------------------*/
/* El Radar Musical
/*----------------------------------------*/

.radar-section {
	position: relative;
	background-attachment: fixed;
	padding-bottom: 80px;
}

.radar-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bg-overlay-dark);
	z-index: 1;
}

.radar-content {
	position: relative;
	z-index: 2;
}

.radar-title-col {
	margin-bottom: 40px;
}

.radar-title-wrap {
	position: relative;
	display: inline-block;
	width: 100%;
}

.radar-eyebrow {
	color: var(--accent-primary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
	display: block;
	margin-bottom: 10px;
	position: relative;
	z-index: 5;
}

.radar-title {
	color: var(--text-light);
	font-size: 60px;
	font-family: 'Rock Salt', cursive;
	margin: 0;
	line-height: 1.2;
	text-transform: none;
	position: relative;
	z-index: 4;
}

.radar-carousel-wrapper {
	position: relative;
	padding: 0 45px;
}

.radar-carousel {
	display: flex !important;
	align-items: stretch !important;
}

.radar-card {
	height: auto;
	padding: 10px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.radar-card-inner {
	background: var(--bg-panel);
	padding: 25px;
	border-radius: 8px;
	border-top: 3px solid var(--accent-primary);
	height: 100%;
	display: flex;
	flex-direction: column;
	backdrop-filter: blur(5px);
	transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.radar-card:hover .radar-card-inner {
	transform: translateY(-5px);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 15px 30px rgba(255, 0, 127, 0.25);
}

.radar-card:hover .radar-card-inner--cyan {
	box-shadow: 0 15px 30px rgba(0, 188, 212, 0.25);
}

.radar-card:hover .radar-card-inner--green {
	box-shadow: 0 15px 30px rgba(76, 175, 80, 0.25);
}

.radar-card:hover .radar-card-inner--magenta {
	box-shadow: 0 15px 30px rgba(233, 30, 99, 0.25);
}

.radar-card-inner--cyan {
	border-top-color: var(--accent-secondary);
}

.radar-card-inner--green {
	border-top-color: var(--accent-success);
}

.radar-card-inner--magenta {
	border-top-color: var(--accent-highlight);
}

.radar-card-title {
	color: var(--text-light);
	font-weight: 700;
	margin-bottom: 20px;
}

/* Tarjetas dinámicas (Supabase, ver js/radar-supabase.js) que traigan
   link_url envuelven el título en un <a>; mantiene el mismo look que el
   texto plano y solo se distingue en hover. */
.radar-card-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.radar-card-title a:hover {
	color: var(--accent-secondary);
}

.radar-card-title i {
	color: var(--accent-primary);
	margin-right: 10px;
}

.radar-card-inner--cyan .radar-card-title i {
	color: var(--accent-secondary);
}

.radar-card-inner--green .radar-card-title i {
	color: var(--accent-success);
}

.radar-card-inner--magenta .radar-card-title i {
	color: var(--accent-highlight);
}

.radar-card-subtitle {
	color: var(--text-muted);
	font-size: 14px;
	margin-bottom: 15px;
}

.radar-event-image-wrap {
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 15px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.radar-event-image {
	width: 100%;
	height: 200px;
	object-fit: cover;
	object-position: center;
	display: block;
}

.radar-event-info {
	margin-top: auto;
}

.radar-event-location {
	color: var(--text-light);
	font-weight: bold;
	margin-bottom: 5px;
}

.radar-event-desc {
	color: var(--text-muted);
	font-size: 14px;
	margin: 0;
}

.radar-news-scroll {
	overflow-y: auto;
	flex-grow: 1;
	padding-right: 5px;
}

.radar-news-entry {
	margin-bottom: 15px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 10px;
}

.radar-news-entry:last-child {
	margin-bottom: 0;
	border-bottom: none;
	padding-bottom: 0;
}

.radar-news-label {
	color: var(--accent-secondary);
	font-size: 13px;
	display: block;
	text-transform: uppercase;
}

.radar-news-text {
	color: var(--text-light);
	margin: 5px 0 0 0;
	font-size: 13px;
	line-height: 1.5;
}

.radar-highlight-box {
	background: var(--bg-panel-solid);
	padding: 15px;
	border-radius: 6px;
	overflow-y: auto;
	flex-grow: 1;
}

.radar-highlight-label {
	color: var(--accent-success);
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
}

.radar-highlight-text {
	color: var(--text-light);
	margin: 5px 0 0 0;
	font-size: 13px;
	line-height: 1.5;
}

.radar-opinion-text {
	color: var(--text-light);
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
}

.radar-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: var(--bg-dark-700);
	border: 2px solid var(--accent-primary);
	color: var(--accent-primary);
	width: 45px;
	height: 45px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	box-shadow: 0 0 10px rgba(255, 0, 127, 0.4);
	transition: var(--transition-base);
}

.radar-nav-btn:hover {
	background: var(--accent-primary);
	color: var(--text-light);
	box-shadow: 0 0 20px rgba(255, 0, 127, 0.8);
}

.radar-nav-btn i {
	font-size: 24px;
	font-weight: bold;
}

.radar-nav-btn--prev {
	left: -15px;
}

.radar-nav-btn--next {
	right: -15px;
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media only screen and (min-width: 1200px) {
	.container {
		max-width: 1170px;
	}
}

/* Medium Device = 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.header__menu ul li {
		margin-right: 18px;
	}
	.header__menu {
		margin-right: 30px;
	}
	.service__item {
		padding: 40px 30px 30px 40px;
	}
	.skills__content {
		padding: 60px 40px 40px;
	}
	.discography__item__text a {
		margin-right: 0;
		text-align: center;
		margin-bottom: 10px;
	}
}

/* Tablet Device = 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.header__right__social {
		display: none;
	}
	.header__menu {
		margin-right: 0;
	}
	.header__menu ul li {
		margin-right: 15px;
	}
	.event .section-title:after {
		width: 560px;
	}
	.track__all {
		text-align: left;
		margin-bottom: 60px;
	}
	.track__content {
		margin-bottom: 120px;
	}
	.track__pic img {
		height: auto;
	}
	.footer {
		height: auto;
	}
	.about.about--page .about__text {
		padding-top: 30px;
	}
	.discography__item__text a {
		margin-right: 0;
		text-align: center;
		margin-bottom: 10px;
	}
	.blog__sidebar {
		padding-top: 50px;
	}
	.contact__address {
		margin-bottom: 40px;
	}
	.footer__social::before {
		display: none;
	}
	.footer__social::after {
		display: none;
	}
	.tours__item__pic {
		margin-bottom: 50px;
	}
	.tours__item__text {
		padding-right: 0;
	}
	.countdown {
		padding-bottom: 776px;
	}
	.footer {
		margin-top: -740px;
		background-position: top 0 left 19%;
	}
}

/* Wide Mobile = 480px */

@media only screen and (max-width: 767px) {
	.hero {
		padding-top: 190px;
		padding-bottom: 200px;
	}
	.event .section-title:after {
		display: none;
	}
	.track__all {
		text-align: left;
		margin-bottom: 60px;
	}
	.track__content {
		margin-bottom: 120px;
	}
	.track .p-0 {
		padding: 0 15px !important;
	}
	.track__pic img {
		height: auto;
	}
	.discography__item__text a {
		margin-right: 0;
		text-align: center;
		margin-bottom: 10px;
	}
	.blog__sidebar {
		padding-top: 50px;
	}
	.contact__address {
		margin-bottom: 40px;
	}
	.footer {
		height: auto;
	}
	.footer__social::before {
		display: none;
	}
	.footer__social::after {
		display: none;
	}
	.player_bars {
		width: 240px;
		margin-right: 20px;
	}
	.jp-seek-bar>div {
		width: 140px;
	}
	.countdown__item {
		margin-right: 0;
		margin-bottom: 30px;
		width: 50%;
		float: left;
	}
	.footer__social {
		text-align: left;
	}
	.skills__content {
		height: auto;
	}
	.about.about--page .about__text {
		padding-top: 30px;
	}
	.tours__item__pic {
		margin-bottom: 50px;
	}
	.blog__large__widget ul {
		text-align: center;
	}
	.blog__large__widget .right__widget {
		text-align: center;
	}
	.blog__option__btn {
		margin-bottom: 30px;
	}
	.blog__details__form form .input__list,
	.contact__form form .input__list {
		margin-right: 0;
		overflow: visible;
	}
	.blog__details__form form .input__list input,
	.contact__form form .input__list input {
		width: 100%;
		margin-right: 0;
	}
	.header__nav {
		display: none;
	}
	.header .container {
		position: relative;
	}
	.slicknav_btn {
		position: absolute;
		right: 15px;
		top: 25px;
		margin: 0;
		border-radius: 0;
		padding: 12px 15px;
		float: none;
		background: var(--accent-primary);
	}
	.slicknav_nav {
		position: absolute;
		left: 0;
		top: 90px;
		background: #222;
		width: 100%;
	}
	.slicknav_menu {
		background: transparent;
		padding: 0;
		display: block;
	}
	.slicknav_nav ul {
		margin: 0;
		padding: 5px 0;
	}
	.slicknav_nav .slicknav_row,
	.slicknav_nav a {
		padding: 10px 28px;
		margin: 0;
	}
	.slicknav_nav a:hover {
		border-radius: 0;
		background: var(--accent-primary);
		color: #ffffff;
	}
	.slicknav_nav .slicknav_row:hover {
		border-radius: 0;
		background: var(--accent-primary);
		color: #ffffff;
	}
	.service__item {
		height: auto;
	}
	.tours__item__text {
		padding-right: 0;
	}
	.countdown {
		padding-bottom: 940px;
	}
	.footer {
		margin-top: -940px;
		background-position: top 0 left 19%;
	}
}

/* Small Device = 320px */

@media only screen and (max-width: 479px) {
	.section-title h1 {
		top: -40px;
		font-size: 79px;
		line-height: 0.8;
	}
	.hero__text h1 {
		font-size: 70px;
	}
	.videos {
		padding-bottom: 0;
	}
	.countdown__text h1 {
		font-size: 50px;
	}
	.single_player_container h4 {
		font-size: 16px;
	}
	.player_bars {
		width: 150px;
		margin-right: 10px;
	}
	.player_controls_box {
		margin-right: 10px;
	}
	.jp-volume-controls {
		width: 68px;
		padding-left: 23px;
	}
	.jp-volume-bar {
		width: 42px;
	}
	.jp-seek-bar>div {
		width: 55px;
	}
	.service__item {
		height: auto;
		padding: 40px 40px 40px 40px;
	}
	.skills__content {
		height: auto;
		padding: 80px 25px 40px;
	}
	.tours__item__text .tours__text__widget ul {
		float: none;
		margin-bottom: 30px;
	}
	.tours__item__text .tours__text__widget .price {
		float: none;
	}
	.tours__item__pic {
		padding-left: 0;
	}
	.tours__item__text.tours__item__text--right {
		padding-left: 0;
	}
	.blog__large__text {
		padding: 30px 20px 0;
	}
	.blog__large__widget {
		margin: 0;
	}
	.blog__details__tags a {
		margin-bottom: 10px;
	}
	.countdown {
		padding-bottom: 980px;
	}
	.footer {
		margin-top: -970px;
		background-position: top 0 left 19%;
	}
}

/*--------------------------------- Mobile Hardening: Selecta & Radar Musical -----------------------------*/

@media only screen and (max-width: 767px) {
	.video-hero-content {
		padding: 30px 22px;
	}

	.video-hero-title {
		font-size: 30px;
	}

	.video-hero-description {
		font-size: 14px;
	}

	.video-hero-pricing {
		gap: 10px;
	}

	.video-hero-buttons {
		max-width: 100%;
	}

	.radar-title {
		font-size: 38px;
	}

	.radar-eyebrow {
		font-size: 12px;
		letter-spacing: 2px;
	}

	.radar-carousel-wrapper {
		padding: 0 30px;
	}

	.radar-card-inner {
		padding: 18px;
	}

	.radar-nav-btn {
		width: 34px;
		height: 34px;
	}

	.radar-nav-btn i {
		font-size: 18px;
	}

	.radar-nav-btn--prev {
		left: -6px;
	}

	.radar-nav-btn--next {
		right: -6px;
	}
}

@media only screen and (max-width: 480px) {
	.radar-title {
		font-size: 30px;
	}
}

/*--------------------------------- Mobile Hardening: Sobre Mi & Videos Recomendados -----------------------------*/

@media only screen and (max-width: 768px) {
	/* La sección se renombró de #bio a #sobre-mi (nav "Sobre Mí") - separación
	   limpia respecto a la imagen del show que queda arriba en mobile
	   (columnas apiladas), tanto en el contenedor de la sección como en
	   el título watermark en sí. */
	#sobre-mi {
		padding-top: 40px;
	}

	/* El título "Sobre Mi" es un watermark absolutamente posicionado
	   (top: -100px inline) que queda bien en desktop, donde la columna de
	   imagen es alta, pero en mobile las columnas se apilan y termina
	   pegado justo debajo de la imagen. margin-top sigue desplazando una
	   caja absolutamente posicionada (se suma al "top" resuelto), así que
	   esto lo empuja hacia abajo sin tocar el position/top inline. */
	#sobre-mi .watermark-title {
		margin-top: 30px;
		margin-bottom: 20px;
	}

	/* Cualquier <h1> suelto dentro de .section-title (Videos Recomendados,
	   Sets, Packs del Mes...) hereda el estilo watermark decorativo de
	   escritorio: posición absoluta, top negativo, 100px, z-index -1,
	   pensado para quedar DETRÁS de un <h2> visible que en estos casos no
	   existe. En mobile eso lo deja flotando fuera de su caja (colapsada
	   a 0 de alto) y termina superpuesto encima del contenido siguiente
	   (ej. la primera tarjeta de "Videos Recomendados"). Se lo saca del
	   flujo absoluto para que fluya normal, con tamaño fluido en vez del
	   fijo de escritorio.
	   (No afecta a #sobre-mi .watermark-title: ese elemento trae su
	   propio position/top inline, que siempre gana por sobre esta regla -
	   solo hereda el tamaño de fuente fluido, que también le conviene).

	   !important a propósito: existe OTRA regla ".section-title h1" en un
	   @media (max-width: 479px) más abajo en el archivo (top: -40px;
	   font-size: 79px;, herencia del theme original) que compite con esta
	   por exactamente la misma especificidad - sin !important, en
	   viewports angostos (<480px, la mayoría de los celulares) esa otra
	   regla puede terminar ganando y el título vuelve a superponerse. */
	.section-title h1 {
		position: relative !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		z-index: 2 !important;
		font-size: clamp(2rem, 6vw, 3rem) !important;
		line-height: 1.1 !important;
		margin-bottom: 20px !important;
	}

	.youtube {
		padding-top: 40px;
	}

	.youtube-title-wrap {
		margin-bottom: 20px;
	}

	.youtube .section-title {
		padding: 0 15px;
		margin-bottom: 0;
	}
}

/*--------------------------------- Colección Premium: carrusel -----------------------------*/

.premium-carousel-wrapper {
	position: relative;
	padding: 0 40px;
}

.premium-carousel .video-hero-container {
	margin-bottom: 80px;
}

/* Owl posiciona en absoluto los items durante la transición de fade;
   sin esto el slide saliente y el entrante se ven apilados/rotos un
   instante en vez de superpuestos prolijamente. */
.premium-carousel.owl-carousel .owl-item {
	backface-visibility: hidden;
}

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

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

.premium-carousel .premiumFadeIn {
	animation: premiumFadeIn 0.45s ease both;
}

.premium-carousel .premiumFadeOut {
	animation: premiumFadeOut 0.45s ease both;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.premium-carousel .owl-dots {
	text-align: center;
	margin-top: -60px;
	position: relative;
	z-index: 4;
}

.premium-carousel .owl-dot span {
	width: 10px;
	height: 10px;
	margin: 5px;
	background: rgba(255, 255, 255, 0.3);
	display: block;
	border-radius: 50%;
	transition: var(--transition-base);
}

.premium-carousel .owl-dot.active span,
.premium-carousel .owl-dot:hover span {
	background: var(--accent-primary);
}

/* Flechas custom del carrusel Premium: mismo lenguaje visual que
   .radar-nav-btn pero más grandes/con más glow, a propósito, para que
   resalten por encima de los packs gratuitos que siguen debajo. */
.premium-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: var(--bg-dark-700);
	border: 2px solid var(--accent-primary);
	color: var(--accent-primary);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 20;
	box-shadow: 0 0 18px rgba(255, 0, 127, 0.55);
	transition: var(--transition-base);
}

.premium-nav-btn:hover {
	background: var(--accent-primary);
	color: var(--text-light);
	box-shadow: 0 0 28px rgba(255, 0, 127, 0.9);
	transform: translateY(-50%) scale(1.06);
}

.premium-nav-btn:focus-visible {
	outline: 2px solid var(--accent-secondary);
	outline-offset: 3px;
}

.premium-nav-btn i {
	font-size: 26px;
	font-weight: bold;
}

.premium-nav-btn--prev {
	left: 0;
}

.premium-nav-btn--next {
	right: 0;
}

@media only screen and (max-width: 991px) {
	.premium-carousel-wrapper {
		padding: 0 30px;
	}

	.premium-nav-btn {
		width: 42px;
		height: 42px;
	}

	.premium-nav-btn i {
		font-size: 20px;
	}
}

@media only screen and (max-width: 767px) {
	.premium-carousel-wrapper {
		padding: 0 8px;
	}

	.premium-nav-btn {
		width: 36px;
		height: 36px;
		top: auto;
		bottom: -18px;
		transform: none;
	}

	.premium-nav-btn:hover {
		transform: scale(1.06);
	}

	.premium-nav-btn--prev {
		left: 50%;
		margin-left: -50px;
	}

	.premium-nav-btn--next {
		right: 50%;
		margin-right: -50px;
	}

	.premium-carousel .owl-dots {
		margin-top: 10px;
	}
}

/*--------------------------------- Sets Gratis: tarjetas dinámicas -----------------------------*/

/* Usada por js/free-services.js para las portadas inyectadas por JS
   (equivalente al patrón que las tarjetas estáticas resuelven con
   data-setbg + main.js, que no llega a procesar nodos agregados
   después de su propia inicialización). */
.event-item-pic-cover {
	height: 340px;
	background-size: contain !important;
	background-position: center center !important;
	background-color: #f7b4ee !important;
}

.event-tag {
	display: inline-block;
	padding: 5px 12px;
	font-size: 12px;
	border-radius: 4px;
	margin-right: 5px;
	color: #ffffff;
}

.event-tag--gratis {
	background: var(--accent-success);
}

.event-tag--mp3 {
	background: var(--accent-secondary);
}

.event-tag--mp4 {
	background: var(--accent-highlight);
}

.event__tags {
	margin-bottom: 20px;
}

.event-item-description {
	margin-bottom: 15px;
	color: #b7b7b7;
}

.youtube-empty-state {
	max-width: 520px;
	margin: 0 auto;
	padding: 20px 0;
}

.youtube-empty-state h4 {
	color: #111111;
	margin-bottom: 10px;
}

/* ============================================================
   Radar de Noticias (index.html) - feed automático de noticias
   musicales/DJ/eventos de Uruguay. Se alimenta de public.noticias_radar
   (ver supabase/noticias_radar.sql): scripts/fetch_music_news.js corre
   todos los días vía GitHub Actions e inserta hasta 3 noticias nuevas,
   y también se puede cargar/editar a mano desde /admin.
   Tarjetas glassmorphism oscuro (fondo #0a0a16, bordes cian/magenta que
   alternan por posición) siguiendo el mismo lenguaje visual que el
   resto del sitio (radar-card, pack-detalle).
   ============================================================ */

.noticias-radar-section {
	background: #0a0a16;
	color: #ffffff;
	padding: 100px 0;
}

.noticias-radar-title-wrap {
	position: relative;
	display: inline-block;
	width: 100%;
	margin-bottom: 50px;
}

.noticias-radar-eyebrow {
	color: var(--accent-secondary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
	display: block;
	margin-bottom: 10px;
}

.noticias-radar-title {
	color: var(--text-light);
	font-size: 48px;
	font-family: var(--font-heading);
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
	text-transform: uppercase;
}

.noticias-radar-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 28px;
}

/* Mismo lenguaje visual que las tarjetas de "El Radar Musical" (ver
   .radar-card-inner más arriba): panel translúcido + acento de color
   arriba en vez de un borde completo, para que las dos secciones de
   "radar" se sientan parte del mismo sistema en vez de dos estilos
   distintos pegados uno debajo del otro. El color de acento cambia
   según la categoría (ver CATEGORIA_CLASE en js/noticias-radar.js),
   con cyan como default/fallback. */
.noticia-card {
	background: var(--bg-panel);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-top: 3px solid var(--accent-secondary);
	border-radius: 10px;
	overflow: hidden;
	text-align: left;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.noticia-card:hover {
	transform: translateY(-6px);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 15px 30px rgba(0, 188, 212, 0.25);
}

.noticia-card--green {
	border-top-color: var(--accent-success);
}

.noticia-card--green:hover {
	box-shadow: 0 15px 30px rgba(76, 175, 80, 0.25);
}

.noticia-card--magenta {
	border-top-color: var(--accent-primary);
}

.noticia-card--magenta:hover {
	box-shadow: 0 15px 30px rgba(255, 0, 127, 0.25);
}

.noticia-card--pink {
	border-top-color: var(--accent-highlight);
}

.noticia-card--pink:hover {
	box-shadow: 0 15px 30px rgba(233, 30, 99, 0.25);
}

.noticia-card-image-wrap {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
}

.noticia-card-image-wrap--sin-imagen {
	display: flex;
	align-items: center;
	justify-content: center;
}

.noticia-card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.noticia-card-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(10, 10, 22, 0.75);
	border: 1px solid rgba(0, 188, 212, 0.4);
	color: var(--accent-secondary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 30px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.noticia-card-badge i {
	margin-right: 6px;
}

/* La medallita de categoría toma el mismo color que el acento superior
   de su tarjeta (ver .noticia-card--* más arriba). */
.noticia-card--green .noticia-card-badge {
	border-color: rgba(76, 175, 80, 0.4);
	color: var(--accent-success);
}

.noticia-card--magenta .noticia-card-badge {
	border-color: rgba(255, 0, 127, 0.4);
	color: var(--accent-primary);
}

.noticia-card--pink .noticia-card-badge {
	border-color: rgba(233, 30, 99, 0.4);
	color: var(--accent-highlight);
}

.noticia-card-body {
	padding: 22px 24px 26px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.noticia-card-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: var(--text-dim);
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.noticia-card-fuente {
	color: var(--text-muted);
	font-weight: 600;
}

.noticia-card-titulo {
	color: var(--text-light);
	/* 21px en vez de 19px: se acerca más al tamaño de .radar-card-title
	   (24px, "El Radar Musical") para que las dos grillas se sientan de
	   la misma familia. Se queda un poco por debajo porque esta tarjeta
	   además tiene meta + resumen + link abajo (más contenido en el
	   mismo alto de tarjeta). */
	font-size: 21px;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 12px;
}

.noticia-card-resumen {
	color: var(--text-muted);
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 18px;
	flex-grow: 1;
}

.noticia-card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--accent-secondary);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	transition: var(--transition-base);
}

.noticia-card-link:hover {
	color: var(--accent-primary);
	text-decoration: none;
}

.noticia-card-link i {
	transition: transform 0.3s ease;
}

.noticia-card-link:hover i {
	transform: translateX(4px);
}

.noticias-radar-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--text-muted);
}

.noticias-radar-empty i {
	font-size: 32px;
	color: var(--accent-secondary);
	margin-bottom: 16px;
	display: block;
}

@media only screen and (max-width: 767px) {
	.noticias-radar-section {
		padding: 70px 0;
	}

	.noticias-radar-title {
		font-size: 34px;
	}

	.noticias-radar-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Pack Detalle (pack-detalle.html) - vista extendida de un pack
   Premium: hero, descripción extendida y reproductor de demos.
   ============================================================ */

/* Fondo oscuro unificado de toda la sección (mismo criterio que
   .contact más arriba): sin esto, el texto claro de las tarjetas
   glassmorphism (pensado para vivir sobre #0a0a16) queda casi
   invisible sobre el fondo claro por defecto de .spad. */
.pack-detalle {
	background: #0a0a16;
	color: #ffffff;
}

/* Títulos de sección ("Detalle del Pack", "Demos de Audio"): por
   defecto .section-title h2 es oscuro (#111111, pensado para fondos
   claros) - acá se fuerza blanco + glow neon magenta para que
   combine con el resto del tema oscuro de la página. */
.pack-detalle .section-title h2 {
	color: #ffffff;
	font-weight: 800;
	text-transform: uppercase;
	text-shadow: 0 0 12px rgba(255, 0, 127, 0.6);
	margin-bottom: 30px;
}

.pack-detalle-status {
	text-align: center;
	padding: 100px 20px;
	color: var(--text-muted);
	font-size: 18px;
}

.pack-detalle-status--error a {
	color: var(--accent-secondary);
	text-decoration: underline;
}

.pack-hero-cover-col {
	position: relative;
	min-height: 380px;
	overflow: hidden;
	display: flex;
	background: #000;
}

.pack-hero-cover {
	width: 100%;
	height: 100%;
	min-height: 380px;
	object-fit: cover;
	object-position: center;
	display: block;
}

@media only screen and (max-width: 991px) {
	.pack-hero-cover-col {
		height: auto;
		min-height: 0;
		display: block;
		border-radius: 13px 13px 0 0;
	}

	.pack-hero-cover {
		height: auto;
		min-height: 0;
		object-fit: contain;
		border-radius: 13px 13px 0 0;
	}
}

.pack-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 15px;
}

.pack-badge {
	display: inline-block;
}

.pack-release-date {
	color: var(--text-dim);
	font-size: 14px;
	margin-bottom: 15px;
}

.pack-release-date i {
	margin-right: 6px;
	color: var(--accent-secondary);
}

/* Tarjetas de descripción extendida y demos: mismo glassmorphism que
   .contact-info-card, con animación de entrada suave. Se ajustan blur
   y padding a la especificación puntual de esta vista (12px / 28px). */
.pack-detalle-description-card,
.pack-demos-card {
	margin-top: 40px;
	animation: pack-fade-up 0.6s ease both;
	background: rgba(255, 255, 255, 0.03);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 28px;
}

@keyframes pack-fade-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.pack-description-content {
	color: #d1d1e0;
	font-size: 16px;
	line-height: 1.9;
}

.pack-description-content p {
	color: #d1d1e0;
	margin-bottom: 15px;
}

.pack-description-content ul {
	margin: 0 0 15px 0;
	padding-left: 22px;
}

.pack-description-content li {
	margin-bottom: 8px;
	color: #d1d1e0;
}

.pack-description-content li::marker {
	color: var(--accent-primary);
}

/* Banner de "Total: N archivos" - detectado y separado del resto del
   texto por js/pack-detalle.js (ver renderDescripcionDetallada). Va
   primero, antes de la grilla de carpetas, como resumen destacado. */
.pack-total-banner {
	background: linear-gradient(135deg, #ff007f 0%, #00bcd4 100%);
	color: #ffffff;
	font-weight: 800;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 16px;
	padding: 16px 20px;
	border-radius: 12px;
	margin-bottom: 24px;
	box-shadow: 0 8px 25px rgba(255, 0, 127, 0.3);
}

/* Grilla de carpetas/géneros - cada línea "Nombre — N archivos" del
   texto se convierte en una tarjeta con el nombre a la izquierda y una
   píldora cian con la cantidad a la derecha. 2 columnas en desktop,
   1 columna en pantallas chicas (auto-fit ya lo resuelve solo, el
   media query de abajo es un refuerzo explícito). */
.pack-folder-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}

.pack-folder-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 14px 16px;
	transition: var(--transition-base);
}

.pack-folder-item:hover {
	border-color: rgba(0, 188, 212, 0.4);
	transform: translateY(-2px);
}

.pack-folder-name {
	color: #ffffff;
	font-weight: 600;
	font-size: 15px;
}

.pack-folder-badge {
	flex: 0 0 auto;
	background: rgba(0, 188, 212, 0.15);
	color: #00bcd4;
	border: 1px solid rgba(0, 188, 212, 0.3);
	border-radius: 20px;
	padding: 4px 12px;
	font-weight: bold;
	font-size: 13px;
	white-space: nowrap;
}

@media only screen and (max-width: 575px) {
	.pack-folder-grid {
		grid-template-columns: 1fr;
	}
}

/* Reproductor de demos: lista de pistas oscuras, cada una con su propio
   botón play/pause + barra de progreso. Un único <audio> compartido hace
   el trabajo real (ver js/pack-detalle.js); acá solo se maneja el estado
   visual (.is-playing) de la fila activa. */
.pack-demos-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pack-demo-row {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 14px 18px;
	background: var(--bg-panel-solid);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	transition: var(--transition-base);
}

.pack-demo-row.is-playing {
	border-color: var(--accent-primary);
	box-shadow: 0 0 20px rgba(255, 0, 127, 0.2);
}

.pack-demo-play-btn {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 2px solid var(--accent-primary);
	background: transparent;
	color: var(--accent-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: var(--transition-base);
	font-size: 14px;
}

.pack-demo-play-btn:hover,
.pack-demo-play-btn:focus-visible {
	background: var(--accent-primary);
	color: var(--text-light);
}

.pack-demo-row.is-playing .pack-demo-play-btn {
	background: var(--accent-primary);
	color: var(--text-light);
}

.pack-demo-info {
	flex: 1 1 auto;
	min-width: 0;
}

.pack-demo-title {
	color: var(--text-light);
	font-size: 15px;
	font-weight: 600;
	font-family: var(--font-heading);
	margin-bottom: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pack-demo-progress-track {
	position: relative;
	height: 4px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	cursor: pointer;
}

.pack-demo-progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
	border-radius: 2px;
	transition: width 0.1s linear;
}

.pack-demo-time {
	flex: 0 0 auto;
	color: var(--text-dim);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	min-width: 40px;
	text-align: right;
}

@media only screen and (max-width: 575px) {
	.pack-demo-row {
		flex-wrap: wrap;
	}

	.pack-demo-time {
		order: 3;
		width: 100%;
		text-align: left;
		margin-left: 57px;
	}
}

/* Link "Ver más" sobre la portada de cada tarjeta del carrusel Premium
   (index.html), agregado en js/premium-collections.js. */
.pack-cover-link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.pack-cover-view-more {
	position: absolute;
	bottom: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: rgba(10, 10, 22, 0.75);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 30px;
	color: var(--text-light);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	z-index: 2;
	transition: var(--transition-base);
}

.pack-cover-link:hover .pack-cover-view-more {
	background: var(--accent-primary);
	border-color: var(--accent-primary);
}

/* ============================================================
   Presupuestos Digitales (presupuesto.html) - vista pública con
   Glassmorphism Dark Studio: gate de PIN, header/hero del evento,
   desglose de equipamiento por categoría, caja de precio y CTAs.
   ============================================================ */

:root {
	--accent-whatsapp: #25d366;
}

/* ---- Gate de PIN --------------------------------------------------- */

.pin-gate {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px 20px;
}

.pin-gate-card {
	width: 100%;
	max-width: 420px;
	text-align: center;
	background: rgba(255, 255, 255, 0.03);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 40px 30px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.pin-gate-logo {
	max-width: 64px;
	margin: 0 auto 18px;
	display: block;
}

.pin-gate-eyebrow {
	display: block;
	color: var(--accent-secondary);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom: 10px;
}

.pin-gate-title {
	color: #ffffff;
	font-size: 30px;
	font-weight: 800;
	text-transform: uppercase;
	font-family: var(--font-heading);
	text-shadow: 0 0 12px rgba(255, 0, 127, 0.6);
	margin-bottom: 12px;
}

.pin-gate-text {
	color: var(--text-muted);
	font-size: 14px;
	line-height: 1.7;
	margin-bottom: 24px;
}

.pin-gate-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pin-gate-input {
	width: 100%;
	box-sizing: border-box;
	background: var(--bg-panel-solid);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 16px;
	color: #ffffff;
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	letter-spacing: 14px;
	font-family: var(--font-heading);
}

.pin-gate-input:focus {
	outline: none;
	border-color: var(--accent-primary);
	box-shadow: 0 0 0 3px rgba(255, 0, 127, 0.2);
}

.pin-gate-submit {
	width: 100%;
	border: none;
	cursor: pointer;
}

.pin-gate-submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.pin-gate-error {
	margin-top: 18px;
	padding: 12px 16px;
	background: rgba(233, 30, 99, 0.15);
	border: 1px solid var(--accent-highlight);
	color: #ffb8d1;
	border-radius: 8px;
	font-size: 13px;
}

/* ---- Barra superior (solo logo, sin nav completo) ------------------- */

.presupuesto-topbar {
	padding: 20px 0;
	text-align: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.presupuesto-topbar-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.presupuesto-topbar-logo img {
	max-width: 40px;
}

.presupuesto-topbar-logo span {
	color: #ffffff;
	font-family: var(--font-heading);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 15px;
}

/* ---- Header del presupuesto ------------------------------------------ */

.presupuesto-header {
	padding: 50px 0 30px;
	text-align: center;
}

.presupuesto-eyebrow {
	display: block;
	color: var(--accent-secondary);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom: 12px;
}

.presupuesto-titulo {
	color: #ffffff;
	font-size: 52px;
	font-weight: 800;
	text-transform: uppercase;
	font-family: var(--font-heading);
	letter-spacing: 1px;
	text-shadow: 0 0 20px rgba(255, 0, 127, 0.55);
	margin-bottom: 10px;
}

.presupuesto-cliente {
	color: var(--text-muted);
	font-size: 16px;
	margin-bottom: 24px;
}

.presupuesto-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.presupuesto-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 30px;
	padding: 8px 16px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
}

.presupuesto-badge i {
	color: var(--accent-secondary);
}

/* ---- Hero / imagen destacada ------------------------------------------ */

.presupuesto-hero {
	position: relative;
	max-width: 1000px;
	margin: 0 auto 40px;
	padding: 0 20px;
}

.presupuesto-hero-img {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	object-position: center 30%;
	border-radius: 16px;
	display: block;
	border: 2px solid rgba(255, 0, 127, 0.35);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.presupuesto-hero-fade {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 0;
	height: 90px;
	border-radius: 0 0 16px 16px;
	background: linear-gradient(to bottom, rgba(10, 10, 22, 0) 0%, rgba(10, 10, 22, 0.9) 100%);
	pointer-events: none;
}

/* ---- Texto de introducción -------------------------------------------- */

.presupuesto-intro {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 20px 40px;
	text-align: center;
}

.presupuesto-intro .container {
	min-width: 0 !important;
}

.presupuesto-intro-text {
	color: #d1d1e0;
	font-size: 18px;
	line-height: 1.9;
	white-space: pre-line;
}

/* ---- Desglose de equipamiento ------------------------------------------ */

.presupuesto-equipamiento {
	padding: 20px 0 50px;
}

.presupuesto-equipamiento .section-title {
	text-align: center;
	margin-bottom: 30px;
}

.presupuesto-equipamiento .section-title h2 {
	color: #ffffff;
	font-weight: 800;
	text-shadow: 0 0 12px rgba(0, 188, 212, 0.5);
}

.presupuesto-categorias {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.presupuesto-categoria-card {
	background: rgba(255, 255, 255, 0.03);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 24px;
}

.presupuesto-categoria-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.presupuesto-categoria-header i {
	font-size: 20px;
}

.presupuesto-categoria-header h3 {
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
}

.presupuesto-categoria-header.is-green i {
	color: var(--accent-whatsapp);
}

.presupuesto-categoria-header.is-cyan i {
	color: var(--accent-secondary);
}

.presupuesto-categoria-header.is-magenta i {
	color: var(--accent-primary);
}

.presupuesto-categoria-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.presupuesto-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.presupuesto-item-nombre {
	color: #d1d1e0;
	font-size: 14px;
	position: relative;
	padding-left: 16px;
}

.presupuesto-item-nombre::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent-primary);
}

.presupuesto-item-qty {
	flex: 0 0 auto;
	background: rgba(0, 188, 212, 0.15);
	color: var(--accent-secondary);
	border: 1px solid rgba(0, 188, 212, 0.3);
	border-radius: 20px;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: bold;
}

/* ---- Caja de precio ------------------------------------------------- */

.presupuesto-precio-section {
	padding: 10px 0 50px;
}

.presupuesto-precio-box {
	max-width: 480px;
	margin: 0 auto;
	text-align: center;
	background: linear-gradient(135deg, rgba(255, 0, 127, 0.15) 0%, rgba(0, 188, 212, 0.15) 100%);
	border: 2px solid var(--accent-primary);
	border-radius: 16px;
	padding: 30px;
	box-shadow: 0 0 40px rgba(255, 0, 127, 0.25);
}

.presupuesto-precio-label {
	display: block;
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 10px;
}

.presupuesto-precio-value {
	display: block;
	color: #ffffff;
	font-size: 48px;
	font-weight: 800;
	font-family: var(--font-heading);
	text-shadow: 0 0 20px rgba(255, 0, 127, 0.6);
}

/* ---- Botones de acción (CTA) ------------------------------------------ */

.presupuesto-cta {
	padding: 0 0 60px;
}

.presupuesto-cta .container {
	max-width: 500px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.presupuesto-cta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 24px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: var(--transition-base);
}

.presupuesto-cta-btn--accept {
	background: var(--accent-whatsapp);
	color: #ffffff;
	box-shadow: 0 0 30px rgba(37, 211, 102, 0.4);
}

.presupuesto-cta-btn--accept:hover,
.presupuesto-cta-btn--accept:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 0 40px rgba(37, 211, 102, 0.6);
	color: #ffffff;
}

.presupuesto-cta-btn--print {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

.presupuesto-cta-btn--print:hover,
.presupuesto-cta-btn--print:focus-visible {
	border-color: var(--accent-secondary);
	color: var(--accent-secondary);
}

/* ---- Sección de reserva: datos de pago + subir comprobante -----------
   Solo se muestra (ver renderReserva() en js/presupuesto.js) cuando el
   presupuesto está en estado "Aceptado" (todavía sin comprobante) o ya
   "Confirmado" (comprobante recibido). ------------------------------- */

.presupuesto-reserva {
	padding: 0 0 50px;
}

.presupuesto-reserva .container {
	max-width: 560px;
}

.presupuesto-reserva-box {
	background: rgba(255, 255, 255, 0.04);
	border: 2px solid var(--accent-secondary);
	border-radius: 16px;
	padding: 30px;
}

.presupuesto-reserva-title {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #ffffff;
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 8px;
}

.presupuesto-reserva-title i {
	color: var(--accent-secondary);
}

.presupuesto-reserva-text {
	color: var(--text-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 20px;
}

.presupuesto-medios-pago {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 24px;
}

.presupuesto-medio-pago {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	padding: 14px 16px;
}

.presupuesto-medio-pago-nombre {
	display: block;
	color: var(--accent-secondary);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 4px;
}

.presupuesto-medio-pago-detalle {
	display: block;
	color: var(--text-light);
	font-size: 14px;
	line-height: 1.5;
}

.presupuesto-medio-pago-recargo {
	display: inline-block;
	color: var(--text-muted);
	font-size: 11px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	margin-left: 4px;
}

/* ---- Medio de pago tipo "whatsapp" (ej. "Otros medios de pago",
   "Cuotas con Mercado Pago") - en vez de datos de cuenta, muestra un
   botón que abre WhatsApp con un mensaje precargado. Ver
   buildMediosPagoHtml() en js/presupuesto.js y la tabla medios_pago
   (supabase/medios_pago.sql). ------------------------------------- */

.presupuesto-medio-pago--whatsapp {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.presupuesto-medio-pago-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	align-self: flex-start;
	background: var(--accent-whatsapp);
	color: #ffffff;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	transition: var(--transition-base);
}

.presupuesto-medio-pago-btn:hover,
.presupuesto-medio-pago-btn:focus-visible {
	transform: translateY(-2px);
	color: #ffffff;
}

.presupuesto-comprobante-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.presupuesto-comprobante-form input[type="file"] {
	background: rgba(255, 255, 255, 0.05);
	border: 1px dashed rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	padding: 12px;
	color: var(--text-light);
	font-size: 13px;
	width: 100%;
	box-sizing: border-box;
}

.presupuesto-comprobante-error {
	color: #ffb8d1;
	font-size: 13px;
	margin: 0;
}

.presupuesto-comprobante-confirmado {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(76, 175, 80, 0.12);
	border: 1px solid var(--accent-success);
	border-radius: 10px;
	padding: 16px;
}

.presupuesto-comprobante-confirmado i {
	color: var(--accent-success);
	font-size: 22px;
	margin-top: 2px;
}

.presupuesto-comprobante-confirmado p {
	color: #d7f5d9;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

/* ---- Footer ------------------------------------------------------------ */

.presupuesto-footer {
	padding: 24px 0 40px;
	text-align: center;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.presupuesto-footer p {
	color: var(--text-dim);
	font-size: 13px;
	margin: 0;
}

@media only screen and (max-width: 575px) {
	.presupuesto-titulo {
		font-size: 34px;
	}

	.presupuesto-precio-value {
		font-size: 36px;
	}

	.presupuesto-hero-img {
		max-height: 260px;
	}
}

/* ---- Impresión / PDF: versión clara, sin fondos oscuros ni CTAs ------- */

@media print {

	@page {
		size: auto;
		margin: 14mm 12mm;
	}

	/* Bootstrap 4 fuerza body/.container a min-width:992px!important en su
	   propio @media print (ver css/bootstrap.min.css). min-width siempre le
	   gana a max-width en el mismo box sin importar la especificidad, asi
	   que sin esto cualquier wrapper mas angosto (ej: .presupuesto-intro,
	   .presupuesto-header) puede desbordarse/recortarse en paginas mas
	   angostas que 992px. Lo neutralizamos en todos lados como red de
	   seguridad, no solo donde ya lo habiamos detectado. */
	body,
	.container {
		min-width: 0 !important;
	}

	.presupuesto-topbar,
	.presupuesto-cta,
	.presupuesto-reserva,
	.presupuesto-detalles-fiesta,
	.presupuesto-pagos,
	#pin-gate,
	#presupuesto-error {
		display: none !important;
	}

	body,
	body.page-dark,
	#presupuesto-content.presupuesto--formal {
		background: #ffffff !important;
		color: #111111 !important;
	}

	.presupuesto-titulo,
	.presupuesto-eyebrow,
	.presupuesto-equipamiento .section-title h2 {
		text-shadow: none !important;
		color: #111111 !important;
	}

	.presupuesto-cliente,
	.presupuesto-intro-text,
	.presupuesto-item-nombre,
	.presupuesto-badge,
	.presupuesto-footer p {
		color: #333333 !important;
	}

	/* Sin esto el ícono de cada badge (fecha/horas/invitados/lugar) queda
	   con el color que le toque en pantalla (cian en Fiesta, dorado en
	   Formal) - visible pero un poco apagado sobre el fondo claro forzado
	   mas abajo; se fuerza un dorado mas oscuro, legible en ambos temas. */
	.presupuesto-badge i {
		color: #8a6d1a !important;
	}

	.presupuesto-badge,
	.presupuesto-categoria-card,
	.presupuesto-precio-box {
		background: #f5f5f7 !important;
		border: 1px solid #dddddd !important;
		box-shadow: none !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	.presupuesto-precio-label {
		color: #555555 !important;
	}

	.presupuesto-precio-value {
		color: #111111 !important;
		text-shadow: none !important;
	}

	.presupuesto-categoria-header h3 {
		color: #111111 !important;
	}

	/* La imagen del hero siempre imprime como <img> real, nunca como
	   background-image: los navegadores no imprimen background-image de
	   forma confiable (toggle "graficos de fondo" del dialogo + timing de
	   carga). En Formal, css/style.css la oculta en pantalla a favor del
	   background-image con el overlay - ver aplicarTema() en
	   js/presupuesto.js, que ahora carga el <img> real SIEMPRE. Aca se
	   anula ese background/hueco reservado y se fuerza el <img> visible. */

	.presupuesto-hero {
		background-image: none !important;
		min-height: 0 !important;
	}

	.presupuesto-hero-img {
		display: block !important;
		border: 1px solid #dddddd !important;
		box-shadow: none !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	.presupuesto-hero-fade {
		display: none !important;
	}
}

/* ============================================================
   Descarga directa de PDF (.pdf-export-mode) - ver descargarPDF()
   en js/presupuesto.js.
   El boton "Descargar en PDF / Imprimir" dejo de usar window.print():
   despues de mucho pelear con bugs de impresion nativa de Chrome/Edge
   (el header entero desaparecia del PDF real en varias combinaciones
   de navegador/SO, reproducible pero nunca explicado del todo), ahora
   renderiza #presupuesto-content a un PDF directamente en el navegador
   con html2canvas + jsPDF (ver CDN en presupuesto.html) - no depende
   del motor de impresion del sistema operativo en absoluto.
   Esta clase se agrega momentaneamente a #presupuesto-content justo
   antes de capturar el canvas (y se saca enseguida despues): son
   básicamente los mismos overrides que @media print de arriba, pero
   como clase normal en vez de media query, porque html2canvas
   fotografia el DOM tal cual se ve en pantalla - nunca dispara
   @media print.
   ============================================================ */

.pdf-export-mode .presupuesto-topbar,
.pdf-export-mode .presupuesto-cta,
.pdf-export-mode .presupuesto-reserva,
.pdf-export-mode .presupuesto-detalles-fiesta,
.pdf-export-mode .presupuesto-pagos {
	display: none !important;
}

.pdf-export-mode,
.pdf-export-mode.presupuesto--formal {
	background: #ffffff !important;
	color: #111111 !important;
}

.pdf-export-mode .presupuesto-titulo,
.pdf-export-mode .presupuesto-eyebrow,
.pdf-export-mode .presupuesto-equipamiento .section-title h2 {
	text-shadow: none !important;
	color: #111111 !important;
}

.pdf-export-mode .presupuesto-cliente,
.pdf-export-mode .presupuesto-intro-text,
.pdf-export-mode .presupuesto-item-nombre,
.pdf-export-mode .presupuesto-badge,
.pdf-export-mode .presupuesto-footer p {
	color: #333333 !important;
}

.pdf-export-mode .presupuesto-badge i {
	color: #8a6d1a !important;
}

.pdf-export-mode .presupuesto-badge,
.pdf-export-mode .presupuesto-categoria-card,
.pdf-export-mode .presupuesto-precio-box {
	background: #f5f5f7 !important;
	border: 1px solid #dddddd !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.pdf-export-mode .presupuesto-precio-label {
	color: #555555 !important;
}

.pdf-export-mode .presupuesto-precio-value {
	color: #111111 !important;
	text-shadow: none !important;
}

.pdf-export-mode .presupuesto-categoria-header h3 {
	color: #111111 !important;
}

.pdf-export-mode .presupuesto-hero {
	background-image: none !important;
	min-height: 0 !important;
}

.pdf-export-mode .presupuesto-hero-img {
	display: block !important;
	border: 1px solid #dddddd !important;
	box-shadow: none !important;
}

.pdf-export-mode .presupuesto-hero-fade {
	display: none !important;
}

/* ============================================================
   Modo Formal / Gala (.presupuesto--formal) - capa de overrides
   sobre la plantilla Fiesta/Club de arriba (que queda igual, ahora
   scopeada implicitamente como default/.presupuesto--fiesta).
   Paleta grafito + dorado/champagne, tipografia editorial (Playfair
   Display/Cinzel + Montserrat), tarjetas con vidrio esmerilado y
   bordes finos dorados en vez de badges/bordes neon. Activada por
   js/presupuesto.js segun presupuesto.es_formal (ver aplicarTema()).
   ============================================================ */

#presupuesto-content.presupuesto--formal {
	background: #0d0d12;
}

#presupuesto-content.presupuesto--formal .presupuesto-topbar {
	border-bottom-color: rgba(212, 175, 55, 0.18);
}

#presupuesto-content.presupuesto--formal .presupuesto-topbar-logo span {
	color: #f5f5f7;
	font-family: 'Playfair Display', 'Cinzel', serif;
}

#presupuesto-content.presupuesto--formal .presupuesto-eyebrow {
	color: #d4af37;
}

#presupuesto-content.presupuesto--formal .presupuesto-titulo {
	color: #f5f5f7;
	font-family: 'Playfair Display', 'Cinzel', serif;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0.4px;
	text-shadow: 0 2px 18px rgba(212, 175, 55, 0.35);
}

#presupuesto-content.presupuesto--formal .presupuesto-cliente,
#presupuesto-content.presupuesto--formal .presupuesto-intro-text,
#presupuesto-content.presupuesto--formal .presupuesto-item-nombre,
#presupuesto-content.presupuesto--formal .presupuesto-footer p {
	color: #c9c9d1;
	font-family: 'Montserrat', 'Inter', sans-serif;
}

/* ---- Hero: imagen_portada como fondo con overlay en degrade (lo pinta
   aplicarTema() via background-image inline sobre esta misma seccion) --- */

#presupuesto-content.presupuesto--formal .presupuesto-hero {
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
	border-radius: 16px;
	min-height: 420px;
}

#presupuesto-content.presupuesto--formal .presupuesto-hero-img,
#presupuesto-content.presupuesto--formal .presupuesto-hero-fade {
	display: none;
}

/* ---- Tarjetas de detalles: reemplazan las badges redondeadas por una
   grilla minimalista con bordes finos dorados y vidrio esmerilado ----- */

#presupuesto-content.presupuesto--formal .presupuesto-badges {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	max-width: 720px;
	margin: 0 auto;
}

#presupuesto-content.presupuesto--formal .presupuesto-badge {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: rgba(245, 245, 247, 0.03);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(212, 175, 55, 0.2);
	border-radius: 8px;
	padding: 16px 12px;
	font-family: 'Montserrat', 'Inter', sans-serif;
	text-transform: none;
	letter-spacing: normal;
}

#presupuesto-content.presupuesto--formal .presupuesto-badge i {
	color: #d4af37;
	font-size: 18px;
}

#presupuesto-content.presupuesto--formal .presupuesto-equipamiento .section-title h2 {
	color: #f5f5f7;
	font-family: 'Playfair Display', 'Cinzel', serif;
	text-transform: none;
	text-shadow: none;
}

#presupuesto-content.presupuesto--formal .presupuesto-categoria-card {
	background: rgba(245, 245, 247, 0.03);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(212, 175, 55, 0.2);
	border-radius: 8px;
}

#presupuesto-content.presupuesto--formal .presupuesto-categoria-header {
	border-bottom-color: rgba(212, 175, 55, 0.18);
}

#presupuesto-content.presupuesto--formal .presupuesto-categoria-header.is-green i,
#presupuesto-content.presupuesto--formal .presupuesto-categoria-header.is-cyan i,
#presupuesto-content.presupuesto--formal .presupuesto-categoria-header.is-magenta i {
	color: #d4af37;
}

#presupuesto-content.presupuesto--formal .presupuesto-categoria-header h3 {
	color: #f5f5f7;
	font-family: 'Playfair Display', 'Cinzel', serif;
	text-transform: none;
	letter-spacing: 0.3px;
}

#presupuesto-content.presupuesto--formal .presupuesto-item-nombre::before {
	background: #d4af37;
}

#presupuesto-content.presupuesto--formal .presupuesto-item-qty {
	background: rgba(212, 175, 55, 0.12);
	color: #d4af37;
	border-color: rgba(212, 175, 55, 0.3);
}

/* ---- Caja de precio: tarjeta dorada esmerilada ----------------------- */

#presupuesto-content.presupuesto--formal .presupuesto-precio-box {
	background: linear-gradient(135deg, rgba(212, 175, 55, 0.16) 0%, rgba(245, 245, 247, 0.04) 100%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid #d4af37;
	box-shadow: 0 0 40px rgba(212, 175, 55, 0.18);
}

#presupuesto-content.presupuesto--formal .presupuesto-precio-label {
	color: #c9c9d1;
	font-family: 'Montserrat', 'Inter', sans-serif;
}

#presupuesto-content.presupuesto--formal .presupuesto-precio-value {
	color: #d4af37;
	font-family: 'Playfair Display', 'Cinzel', serif;
	text-shadow: none;
}

/* ---- Botones de accion: solidos dorados, tipografia sobria ----------- */

#presupuesto-content.presupuesto--formal .presupuesto-cta-btn {
	font-family: 'Montserrat', 'Inter', sans-serif;
	text-transform: none;
	letter-spacing: 0.3px;
	border-radius: 6px;
}

#presupuesto-content.presupuesto--formal .presupuesto-cta-btn--accept {
	background: linear-gradient(135deg, #d4af37 0%, #b8912b 100%);
	color: #0d0d12;
	font-weight: 700;
	box-shadow: 0 12px 30px rgba(212, 175, 55, 0.3);
}

#presupuesto-content.presupuesto--formal .presupuesto-cta-btn--accept:hover,
#presupuesto-content.presupuesto--formal .presupuesto-cta-btn--accept:focus-visible {
	box-shadow: 0 14px 36px rgba(212, 175, 55, 0.45);
	color: #0d0d12;
}

#presupuesto-content.presupuesto--formal .presupuesto-cta-btn--print {
	border-color: rgba(212, 175, 55, 0.4);
	color: #f5f5f7;
}

#presupuesto-content.presupuesto--formal .presupuesto-cta-btn--print:hover,
#presupuesto-content.presupuesto--formal .presupuesto-cta-btn--print:focus-visible {
	border-color: #d4af37;
	color: #d4af37;
}

#presupuesto-content.presupuesto--formal .presupuesto-footer {
	border-top-color: rgba(212, 175, 55, 0.15);
}

/* ---- Sección de reserva: paleta grafito + dorado ---------------------- */

#presupuesto-content.presupuesto--formal .presupuesto-reserva-box {
	background: rgba(245, 245, 247, 0.04);
	border: 1px solid #d4af37;
	border-radius: 6px;
}

#presupuesto-content.presupuesto--formal .presupuesto-reserva-title {
	font-family: 'Playfair Display', 'Cinzel', serif;
	color: #f5f5f7;
}

#presupuesto-content.presupuesto--formal .presupuesto-reserva-title i,
#presupuesto-content.presupuesto--formal .presupuesto-medio-pago-nombre {
	color: #d4af37;
}

#presupuesto-content.presupuesto--formal .presupuesto-reserva-text,
#presupuesto-content.presupuesto--formal .presupuesto-medio-pago-detalle {
	font-family: 'Montserrat', 'Inter', sans-serif;
}

#presupuesto-content.presupuesto--formal .presupuesto-medio-pago {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(212, 175, 55, 0.25);
	border-radius: 4px;
}

#presupuesto-content.presupuesto--formal .presupuesto-medio-pago-btn {
	border-radius: 3px;
}

#presupuesto-content.presupuesto--formal .presupuesto-comprobante-form input[type="file"] {
	border-color: rgba(212, 175, 55, 0.4);
	border-radius: 4px;
}

#presupuesto-content.presupuesto--formal .presupuesto-comprobante-confirmado {
	border-color: #d4af37;
	background: rgba(212, 175, 55, 0.1);
	border-radius: 4px;
}

#presupuesto-content.presupuesto--formal .presupuesto-comprobante-confirmado i {
	color: #d4af37;
}

@media only screen and (max-width: 575px) {
	#presupuesto-content.presupuesto--formal .presupuesto-hero {
		min-height: 260px;
	}

	#presupuesto-content.presupuesto--formal .presupuesto-badges {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =====================================================================
   Próximas Fechas / Agenda (index.html) - Glassmorphism Dark Studio
   Grid dinámico de tarjetas (imagen o video) alimentado por
   agenda_fechas vía js/agenda.js. Ubicada justo debajo del Hero, en el
   lugar de mayor protagonismo de la home.
   ===================================================================== */

.agenda-section {
	background: #0a0a16;
	position: relative;
}

.agenda-title-wrap {
	margin-bottom: 20px;
}

.agenda-eyebrow {
	color: var(--accent-secondary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
	display: block;
	margin-bottom: 10px;
}

.agenda-title {
	color: var(--text-light);
	/* Tipografía fluida: crece con el viewport pero nunca invade la
	   pantalla en mobile ni queda enano en desktop. */
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	font-weight: 700;
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0 0 30px;
	position: relative;
	z-index: 2;
	text-shadow: 0 0 18px rgba(255, 0, 127, 0.55), 0 0 36px rgba(0, 188, 212, 0.25);
}

/* Filas horizontales centradas (no una grilla rígida): con pocas
   fechas cargadas, esto evita que una sola tarjeta quede estirada a
   todo el ancho del contenedor - se mantiene en su tamaño natural,
   centrada, y el resto de las fechas se acomodan al lado o debajo. */
.agenda-grid {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 10px;
}

.agenda-card {
	position: relative;
	/* Ancho fluido con techo: nunca desborda un viewport angosto (width:
	   100%) pero tampoco crece más allá del tamaño pensado para un flyer
	   formato Historia de IG (9:16). */
	width: 100%;
	max-width: 320px;
	background: var(--bg-panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	overflow: hidden;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
	display: flex;
	flex-direction: column;
}

.agenda-card:hover {
	transform: translateY(-8px);
	border-color: rgba(0, 188, 212, 0.4);
	box-shadow: 0 20px 40px rgba(255, 0, 127, 0.22);
}

.agenda-card--featured {
	border-color: rgba(255, 0, 127, 0.5);
	box-shadow: 0 0 0 1px rgba(255, 0, 127, 0.3), 0 20px 40px rgba(255, 0, 127, 0.18);
}

.agenda-card-flyer {
	position: relative;
	width: 100%;
	/* Los flyers que suben desde el admin suelen ser formato Historia de
	   IG (9:16, vertical). Fijar el aspect-ratio acá (en vez de dejar que
	   la imagen imponga su alto real) es lo que evita que un flyer
	   vertical "explote" la tarjeta a pantalla completa.
	   OJO: no combinar max-width con un max-height fijo acá - si los dos
	   valores no resuelven a exactamente 9:16 entre sí, el navegador
	   termina achicando la caja a una proporción distinta de la real, y
	   object-fit:cover recorta de más para rellenarla ("flyer cortado").
	   Con solo max-width + aspect-ratio, el alto se calcula solo y la
	   caja SIEMPRE queda en 9:16 exacto. */
	max-width: 320px;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: 16px;
	margin: 0 auto;
	background: #05050f;
}

.agenda-card-flyer img,
.agenda-card-flyer video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease, filter 0.5s ease, box-shadow 0.5s ease;
}

.agenda-card:hover .agenda-card-flyer img {
	transform: scale(1.08);
	filter: brightness(1.15);
}

.agenda-card:hover .agenda-card-flyer video {
	box-shadow: inset 0 0 0 2px var(--accent-secondary);
}

.agenda-date-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(10, 10, 22, 0.85);
	border: 1px solid var(--accent-primary);
	border-radius: 8px;
	padding: 6px 12px;
	text-align: center;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 2;
	box-shadow: 0 0 14px rgba(255, 0, 127, 0.35);
}

.agenda-date-day {
	display: block;
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}

.agenda-date-month {
	display: block;
	color: var(--accent-secondary);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-top: 2px;
}

.agenda-featured-tag {
	position: absolute;
	top: 14px;
	right: 14px;
	background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 5px 10px;
	border-radius: 20px;
	z-index: 2;
}

.agenda-card-body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.agenda-card-title {
	color: var(--text-light);
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 10px;
	line-height: 1.3;
}

.agenda-card-place,
.agenda-card-time {
	color: var(--text-muted);
	font-size: 14px;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.agenda-card-place i,
.agenda-card-time i {
	color: var(--accent-secondary);
	width: 14px;
	text-align: center;
}

.agenda-card-btn {
	margin-top: auto;
	padding-top: 14px;
}

.agenda-card-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	padding: 12px 16px;
	border-radius: 6px;
	text-decoration: none;
	text-align: center;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.agenda-card-btn a:hover {
	box-shadow: 0 10px 24px rgba(255, 0, 127, 0.4);
	transform: translateY(-2px);
	color: #ffffff;
}

/* Estado vacío / carga - misma tarjeta reutilizada para ambos casos,
   ver js/agenda.js. */
.agenda-empty-card {
	width: 100%;
	text-align: center;
	background: var(--bg-panel);
	border: 1px dashed rgba(255, 255, 255, 0.15);
	border-radius: 14px;
	padding: 60px 30px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.agenda-empty-card i {
	font-size: 40px;
	color: var(--accent-secondary);
	margin-bottom: 18px;
	display: block;
}

.agenda-empty-card h4 {
	color: var(--text-light);
	font-size: 20px;
	margin-bottom: 10px;
}

.agenda-empty-card p {
	color: var(--text-muted);
	margin-bottom: 20px;
}

@media (max-width: 768px) {
	.agenda-grid {
		gap: 20px;
	}

	.agenda-card {
		max-width: 320px;
	}

	.agenda-card-flyer {
		max-width: 280px;
		width: 85%;
		aspect-ratio: 9 / 16;
	}
}
/* ============================================================
   Módulo "Detalles de la Fiesta" (presupuestos Confirmados) - ver
   renderDetallesFiesta()/wireDetallesFiestaHandlers() en
   js/presupuesto.js. Reutiliza las variables de tema ya definidas
   arriba (--accent-secondary, --text-muted, --font-heading, etc.) y
   sigue el mismo patrón visual que .presupuesto-reserva-box. El bloque
   de overrides para el tema Formal/Gala va al final de esta sección.
   ============================================================ */

.presupuesto-detalles-fiesta {
	padding: 0 0 60px;
}

.presupuesto-detalles-fiesta .container {
	max-width: 680px;
}

.presupuesto-detalles-fiesta-box {
	background: rgba(255, 255, 255, 0.04);
	border: 2px solid var(--accent-secondary);
	border-radius: 16px;
	padding: 30px;
}

.presupuesto-detalles-gate-form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 6px;
}

.presupuesto-detalles-gate-form input {
	flex: 1 1 200px;
	box-sizing: border-box;
	background: var(--bg-panel-solid);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 12px 14px;
	color: #ffffff;
	font-size: 15px;
}

.presupuesto-detalles-gate-form input:focus {
	outline: none;
	border-color: var(--accent-primary);
	box-shadow: 0 0 0 3px rgba(255, 0, 127, 0.2);
}

.presupuesto-detalles-gate-form .pin-gate-submit {
	flex: 1 1 100%;
}

.presupuesto-detalles-locked-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(233, 30, 99, 0.12);
	border: 1px solid var(--accent-highlight);
	color: #ffb8d1;
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 13px;
	line-height: 1.6;
	margin-bottom: 20px;
}

.presupuesto-detalles-empty {
	color: var(--text-muted);
	font-size: 13px;
	margin: 0 0 12px;
}

.presupuesto-detalles-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 20px;
	margin-top: 20px;
}

.presupuesto-detalles-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.presupuesto-detalles-field--full {
	grid-column: 1 / -1;
}

.presupuesto-detalles-field label {
	color: var(--text-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.presupuesto-detalles-field input,
.presupuesto-detalles-field textarea {
	box-sizing: border-box;
	width: 100%;
	background: var(--bg-panel-solid);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 10px 12px;
	color: #ffffff;
	font-size: 14px;
	font-family: inherit;
	resize: vertical;
}

.presupuesto-detalles-field input:disabled,
.presupuesto-detalles-field textarea:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.presupuesto-detalles-field input:focus,
.presupuesto-detalles-field textarea:focus {
	outline: none;
	border-color: var(--accent-primary);
	box-shadow: 0 0 0 3px rgba(255, 0, 127, 0.2);
}

.presupuesto-detalles-field--checkbox {
	flex-direction: row;
	align-items: center;
}

.presupuesto-detalles-form-subtitle {
	grid-column: 1 / -1;
	margin: 10px 0 -4px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--accent-primary);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

.presupuesto-detalles-form-subtitle:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.presupuesto-detalles-counter {
	align-self: flex-end;
	color: var(--text-muted);
	font-size: 11px;
}

.presupuesto-detalles-autosave-hint {
	margin: 4px 0 0;
	color: var(--text-muted);
	font-size: 12px;
	font-style: italic;
}

.presupuesto-detalles-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.presupuesto-detalles-last-saved {
	color: var(--text-muted);
	font-size: 12px;
}

.presupuesto-detalles-checkbox-label {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #ffffff;
	font-size: 14px;
	cursor: pointer;
}

.presupuesto-detalles-checkbox-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	accent-color: var(--accent-primary);
	cursor: pointer;
}

.presupuesto-detalles-checkbox-label input[type="checkbox"]:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.presupuesto-detalles-playlists {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 10px;
}

.presupuesto-detalles-playlist-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

.presupuesto-detalles-playlist-row select,
.presupuesto-detalles-playlist-row input {
	box-sizing: border-box;
	background: var(--bg-panel-solid);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 9px 10px;
	color: #ffffff;
	font-size: 13px;
}

.presupuesto-detalles-playlist-row select {
	flex: 0 0 130px;
}

.presupuesto-detalles-playlist-row input {
	flex: 1 1 auto;
	min-width: 0;
}

.presupuesto-detalles-remove-btn,
.presupuesto-detalles-timing-item-acciones button {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 6px;
	color: var(--text-muted);
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.presupuesto-detalles-remove-btn:hover,
.presupuesto-detalles-timing-item-acciones button:hover {
	border-color: var(--accent-highlight);
	color: var(--accent-highlight);
}

.presupuesto-detalles-add-btn {
	background: transparent;
	border: 1px dashed rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	color: var(--text-muted);
	padding: 8px 14px;
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.presupuesto-detalles-add-btn:hover {
	border-color: var(--accent-secondary);
	color: var(--accent-secondary);
}

.presupuesto-detalles-timing,
.presupuesto-detalles-comentarios {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.presupuesto-detalles-timing h3,
.presupuesto-detalles-comentarios h3 {
	color: #ffffff;
	font-family: var(--font-heading);
	font-size: 17px;
	margin: 0 0 14px;
}

.presupuesto-detalles-timing-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.presupuesto-detalles-timing-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 10px 14px;
}

.presupuesto-detalles-timing-horario {
	flex: 0 0 auto;
	color: var(--accent-secondary);
	font-weight: 700;
	font-size: 13px;
}

.presupuesto-detalles-timing-actividad {
	flex: 1 1 auto;
	color: #ffffff;
	font-size: 14px;
}

.presupuesto-detalles-timing-thumb {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 6px;
	flex: 0 0 auto;
}

.presupuesto-detalles-timing-item-acciones {
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
}

.presupuesto-detalles-timing-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.presupuesto-detalles-timing-form input[type="text"] {
	flex: 1 1 160px;
	box-sizing: border-box;
	background: var(--bg-panel-solid);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 9px 12px;
	color: #ffffff;
	font-size: 13px;
}

.presupuesto-detalles-timing-form input[type="file"] {
	flex: 1 1 160px;
	color: var(--text-muted);
	font-size: 12px;
}

.presupuesto-detalles-comentarios-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
	max-height: 320px;
	overflow-y: auto;
}

.presupuesto-detalles-comentario {
	background: rgba(255, 255, 255, 0.03);
	border-left: 3px solid rgba(255, 255, 255, 0.15);
	border-radius: 4px;
	padding: 10px 14px;
}

.presupuesto-detalles-comentario--admin {
	border-left-color: var(--accent-secondary);
}

.presupuesto-detalles-comentario--cliente {
	border-left-color: var(--accent-primary);
}

.presupuesto-detalles-comentario-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 4px;
}

.presupuesto-detalles-comentario-head strong {
	color: #ffffff;
	font-size: 13px;
}

.presupuesto-detalles-comentario-head span {
	color: var(--text-muted);
	font-size: 11px;
	white-space: nowrap;
}

.presupuesto-detalles-comentario p {
	color: var(--text-muted);
	font-size: 13px;
	line-height: 1.6;
	margin: 0;
}

.presupuesto-detalles-comentario-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.presupuesto-detalles-comentario-form textarea {
	flex: 1 1 100%;
	box-sizing: border-box;
	background: var(--bg-panel-solid);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 10px 12px;
	color: #ffffff;
	font-size: 13px;
	font-family: inherit;
	resize: vertical;
}

.presupuesto-detalles-status {
	margin-top: 16px;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 13px;
	background: rgba(76, 175, 80, 0.15);
	border: 1px solid #4caf50;
	color: #b9f6ca;
}

.presupuesto-detalles-status--error {
	background: rgba(233, 30, 99, 0.15);
	border-color: var(--accent-highlight);
	color: #ffb8d1;
}

@media (max-width: 600px) {
	.presupuesto-detalles-form {
		grid-template-columns: 1fr;
	}
}

/* ---- Tema Formal/Gala: paleta grafito + dorado ------------------------- */

#presupuesto-content.presupuesto--formal .presupuesto-detalles-fiesta-box {
	background: rgba(245, 245, 247, 0.04);
	border: 1px solid #d4af37;
	border-radius: 6px;
}

#presupuesto-content.presupuesto--formal .presupuesto-detalles-timing h3,
#presupuesto-content.presupuesto--formal .presupuesto-detalles-comentarios h3 {
	font-family: 'Playfair Display', 'Cinzel', serif;
	color: #f5f5f7;
}

#presupuesto-content.presupuesto--formal .presupuesto-detalles-form-subtitle {
	font-family: 'Playfair Display', 'Cinzel', serif;
	color: #d4af37;
	border-top-color: rgba(212, 175, 55, 0.35);
}

#presupuesto-content.presupuesto--formal .presupuesto-detalles-timing-horario,
#presupuesto-content.presupuesto--formal .presupuesto-detalles-add-btn:hover {
	color: #d4af37;
}

#presupuesto-content.presupuesto--formal .presupuesto-detalles-comentario--admin {
	border-left-color: #d4af37;
}

#presupuesto-content.presupuesto--formal .presupuesto-detalles-checkbox-label input[type="checkbox"] {
	accent-color: #d4af37;
}

#presupuesto-content.presupuesto--formal .presupuesto-detalles-field input:focus,
#presupuesto-content.presupuesto--formal .presupuesto-detalles-field textarea:focus,
#presupuesto-content.presupuesto--formal .presupuesto-detalles-gate-form input:focus {
	border-color: #d4af37;
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

/* ============================================================
   Desglose financiero: total / abonado / saldo + barra de progreso +
   historial de entregas - ver renderPagos()/pintarPagos() en
   js/presupuesto.js. Mismo patrón visual que .presupuesto-reserva-box.
   ============================================================ */

.presupuesto-pagos {
	padding: 0 0 40px;
}

.presupuesto-pagos .container {
	max-width: 560px;
}

.presupuesto-pagos-box {
	background: rgba(255, 255, 255, 0.04);
	border: 2px solid var(--accent-secondary);
	border-radius: 16px;
	padding: 30px;
}

.presupuesto-pagos-resumen {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 20px;
}

.presupuesto-pagos-resumen-item {
	flex: 1 1 140px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.presupuesto-pagos-resumen-item--saldo {
	flex-basis: 100%;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.presupuesto-pagos-resumen-label {
	color: var(--text-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.presupuesto-pagos-resumen-value {
	color: #ffffff;
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 700;
}

.presupuesto-pagos-resumen-value--abonado {
	color: #66bb6a;
}

.presupuesto-pagos-resumen-item--saldo .presupuesto-pagos-resumen-value {
	font-size: 30px;
	color: #ffb74d;
}

.presupuesto-pagos-resumen-value--saldado {
	color: #66bb6a !important;
	font-size: 24px !important;
}

.presupuesto-pagos-barra {
	position: relative;
	width: 100%;
	height: 26px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 13px;
	overflow: hidden;
	margin-bottom: 24px;
}

.presupuesto-pagos-barra-relleno {
	height: 100%;
	background: linear-gradient(90deg, var(--accent-secondary), var(--accent-primary));
	border-radius: 13px;
	transition: width 0.4s ease;
}

.presupuesto-pagos-barra-texto {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.presupuesto-pagos-historial {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.presupuesto-pagos-empty {
	color: var(--text-muted);
	font-size: 13px;
	margin: 0;
}

.presupuesto-pagos-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	background: rgba(255, 255, 255, 0.03);
	border-left: 3px solid var(--accent-secondary);
	border-radius: 4px;
	padding: 8px 14px;
}

.presupuesto-pagos-item-fecha {
	color: var(--text-muted);
	font-size: 12px;
	flex: 0 0 auto;
}

.presupuesto-pagos-item-monto {
	color: #ffffff;
	font-weight: 700;
	font-size: 14px;
	flex: 0 0 auto;
}

.presupuesto-pagos-item-nota {
	color: var(--text-muted);
	font-size: 12px;
	flex: 1 1 auto;
}

/* ---- Tema Formal/Gala: paleta grafito + dorado ------------------------- */

#presupuesto-content.presupuesto--formal .presupuesto-pagos-box {
	background: rgba(245, 245, 247, 0.04);
	border: 1px solid #d4af37;
	border-radius: 6px;
}

#presupuesto-content.presupuesto--formal .presupuesto-pagos-resumen-value {
	font-family: 'Playfair Display', 'Cinzel', serif;
	color: #f5f5f7;
}

#presupuesto-content.presupuesto--formal .presupuesto-pagos-item {
	border-left-color: #d4af37;
}

#presupuesto-content.presupuesto--formal .presupuesto-pagos-barra-relleno {
	background: linear-gradient(90deg, #8a6d1a, #d4af37);
}


/* =====================================================================
   DJ & Discoteca Profesional (index.html #dj-discoteca) - spec Miguel
   2026-09. Reusa al máximo tokens/clases ya existentes (video-hero-*,
   agenda-eyebrow/agenda-title, var(--accent-*)) para mantener consistencia
   visual con el resto del sitio; solo se agrega lo que no existía.
   ===================================================================== */

/* Fondo oscuro propio de la sección (spec Miguel 2026-09b): sin esto,
   el fondo caía en el blanco por defecto del body y el título/textos
   claros (pensados para fondo oscuro, mismo criterio que .agenda-section)
   quedaban ilegibles. Mismo color que .agenda-section (justo arriba en
   la página) para que la transición entre ambas secciones sea prolija. */
#dj-discoteca {
	background: #0a0a16;
}

.fiesta-pro-intro {
	max-width: 760px;
	margin: 0 auto 50px;
}

.fiesta-pro-intro p {
	color: #d1d1e0;
	font-size: 17px;
	line-height: 1.8;
}

/* Grid de servicios - tarjeta vidrio esmerilado, mismo criterio que
   .agenda-card pero pensada para ícono + texto en vez de flyer. */
.fiesta-service-card {
	background: var(--bg-panel);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 32px 26px;
	margin-bottom: 30px;
	height: calc(100% - 30px);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.fiesta-service-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 0, 127, 0.35);
}

.fiesta-service-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #ffffff;
	margin-bottom: 18px;
}

.fiesta-service-card h4 {
	color: var(--text-light);
	font-family: var(--font-heading);
	font-size: 19px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 10px;
}

.fiesta-service-card p {
	color: var(--text-muted);
	font-size: 14.5px;
	line-height: 1.7;
	margin-bottom: 0;
}

/* Variante cyan de .video-hero-container - se reusa esa clase entera
   (gradiente + sombra + tipografía del bloque) para el diferencial "una
   sola fiesta a la vez", solo cambia el color de borde/sombra a cyan
   para distinguirlo del magenta que ya usa la Colección Premium. */
.video-hero-container--cyan {
	border-color: var(--accent-secondary);
	box-shadow: 0px 10px 30px rgba(0, 188, 212, 0.2);
	margin-bottom: 40px;
}

.video-hero-container--pedilo {
	margin-bottom: 40px;
}

.fiesta-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 10px;
}

.fiesta-stat {
	flex: 1 1 160px;
}

.fiesta-stat strong {
	display: block;
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 800;
	color: var(--accent-secondary);
	margin-bottom: 4px;
}

.fiesta-stat span {
	color: var(--text-muted);
	font-size: 13.5px;
	line-height: 1.5;
}

.fiesta-pedilo-features {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 24px;
}

.fiesta-pedilo-features li {
	color: #d1d1e0;
	font-size: 14.5px;
	line-height: 1.6;
}

.fiesta-pedilo-features li i {
	color: var(--accent-primary);
	margin-right: 8px;
}

.fiesta-cta {
	margin-top: 10px;
}

@media only screen and (max-width: 767px) {
	.fiesta-pedilo-features {
		grid-template-columns: 1fr;
	}

	.video-hero-container--cyan .video-hero-content,
	.video-hero-container--pedilo .video-hero-content {
		padding: 35px 28px;
	}
}