/* Estilos específicos para la sección de seguridad */
.lang-menu-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.lang-label {
	color: #fff;
	font-size: 0.95rem;
}

.lang-select {
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 6px;
	background: rgba(34, 15, 23, 0.85);
	color: #fff;
	padding: 4px 8px;
	font-size: 0.85rem;
}

.lang-select:focus {
	outline: 2px solid #f7931a;
	outline-offset: 1px;
}

#security .phrase p {
		font-size: clamp(1.8rem, 2vw + 2rem, 2.4rem) !important;
		font-weight: 500;
		text-align: left;
		color: #39ff14;
		font-family: 'Fira Mono', 'Consolas', 'Menlo', 'Monaco', 'monospace';
		font-style: normal;
		text-shadow: 0 0 8px #39ff14, 0 2px 18px rgba(0, 255, 80, 0.18);
		background: none;
		margin: 0;
		letter-spacing: 0.04em;
		transition: text-shadow 0.3s, color 0.3s;
}
@media (max-width: 700px) {
	.card.feature-explainer,
	.map-card.map-card--map {
		max-width: 100vw !important;
		width: 100% !important;
		padding-left: 2vw !important;
		padding-right: 2vw !important;
		box-sizing: border-box;
		margin-top: 10px !important;
		margin-bottom: 10px !important;
	}
	.accordion-answer {
		padding-left: 2vw !important;
		padding-right: 2vw !important;
		padding-bottom: 10px !important;
		box-sizing: border-box;
	}
	/* Elimina margen extra entre tarjetas consecutivas */
	.features-grid > .card.feature-explainer + .card.feature-explainer,
	.features-grid > .card.feature-explainer + .map-card.map-card--map,
	.features-grid > .map-card.map-card--map + .card.feature-explainer {
		margin-top: 0 !important;
	}
}
@media (max-width: 600px) {
	p, .accordion-answer p {
		word-break: break-word !important;
		overflow-wrap: anywhere !important;
		white-space: normal !important;
		font-size: 1.08em !important;
	}
}
@media (max-width: 600px) {
	.video video {
		max-height: 180px !important;
		width: auto !important;
		height: auto !important;
		object-fit: contain !important;
		display: block;
		margin: 0 auto;
	}
}
/* Separación extra entre el video y el elemento superior */
.video {
	margin-top: 40px !important;
}
/* Ajuste de altura para la imagen del dashboard en la sección de features */
.features-grid img[alt="BlocksWine dashboard"] {
	height: 420px !important;
	min-height: 320px;
	max-width: 100%;
	width: auto;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	display: block;
	margin: 0 auto;
	}

	@media (max-width: 600px) {
		.features-grid img[alt="BlocksWine dashboard"],
		.video-container img[alt="BlocksWine dashboard"] {
			max-height: 160px !important;
			height: auto !important;
			min-height: unset !important;
			object-fit: contain !important;
			width: auto !important;
		}
}
.card.feature-explainer {
	padding-left: 32px !important;
	padding-right: 32px !important;
	box-sizing: border-box;
	width: 100%;
	 max-width: 1400px;
	margin-left: auto !important;
	margin-right: auto !important;
	}

	.card.feature-explainer > .accordion,
	.card.feature-explainer > .accordion-item,
	.card.feature-explainer > .accordion > .accordion-item {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
}
.features-grid > .feature-explainer,
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box;
}
.metrics-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 12px;
	padding-bottom: 24px;
	justify-items: center;
	width: 100%;
}

@media (max-width: 700px) {
	.metrics-grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.metrics-grid .metric {
		min-width: 120px;
		flex: 0 0 auto;
	}
}

@media (max-width: 600px) {
	.metrics-grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.metrics-grid .metric {
		min-width: 120px;
		flex: 0 0 auto;
	}
}
/* Reducir el ancho de los div.metric dentro de metrics-grid */
.metrics-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 12px;
	justify-items: center;
}
.metrics-grid .metric {
	min-width: 90px;
	max-width: 120px;
	flex: 1 1 90px;
	text-align: center;
	padding: 8px 0;
}
@media (max-width: 700px) {
	.map-card.map-card--map {
		min-height: 380px !important;
		height: 420px !important;
		max-width: 98vw !important;
	}
}
/* Add top margin to the .feature-explainer containing the map card for better spacing */
.feature-explainer .map-card.map-card--map {
	margin-top: 0;
}
/* Borde naranja para map-card--map igual que feature-explainer */
.map-card.map-card--map {
	border: 3px solid #ff7a00;
	background: linear-gradient(135deg, #fff7f0 60%, #ffe0c2 100%);
	box-shadow: 0 2px 12px 0 rgba(255, 122, 0, 0.08);
	border-radius: 18px;
	margin: 0 auto;
	width: 100%;
	max-width: 600px;
	min-width: 320px;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
/* Evitar scroll horizontal en móviles */
html, body {
	width: 100vw !important;
	max-width: 100vw !important;
	overflow-x: hidden !important;
	touch-action: pan-y; /* allow vertical scrolling on touch */
	-webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
}

@media (max-width: 700px) {
	   .container, .features-grid {
		   width: 100% !important;
		   max-width: 100% !important;
		   overflow-x: hidden !important;
		   box-sizing: border-box;
		   padding-left: 0 !important;
		   padding-right: 0 !important;
		   margin-left: 0 !important;
		   margin-right: 0 !important;
		   touch-action: pan-y;
	   }
	.card.feature-explainer {
		margin-left: auto !important;
		margin-right: auto !important;
		float: none !important;
		display: block !important;
	}
}
/* Estilo para el botón de cerrar (X) en el modal */
.close {
	color: #f7931a;
	float: right;
	font-size: 32px;
	font-weight: bold;
	cursor: pointer;
	position: absolute;
	top: 15px;
	right: 20px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.3s ease;
	background-color: rgba(247, 147, 26, 0.1);
}
/* Unificar estilos de modal-content para el waitlist */
.modal-content {
		background-color: #1B0710;
		margin: 5% auto;
		padding: 30px;
		border: 3px solid #f7931a;
		border-radius: 15px;
		width: 80%;
		max-width: 600px;
		min-width: 320px;
		box-shadow: 0 8px 32px rgba(247, 147, 26, 0.3);
		position: relative;
		animation: slideIn 0.3s ease-out;
		backdrop-filter: blur(10px);
}
@keyframes slideIn {
	from { transform: translateY(-40px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
@media (max-width: 700px) {
	.footer-nav {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
		justify-items: center;
		text-align: center;
	}
	.footer-nav > div {
		text-align: center;
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.footer-nav ul {
		display: block;
		margin: 0 auto;
		padding: 0;
		text-align: center;
	}
	.footer-nav a {
		font-size: 0.92em;
		padding: 2px 0;
		white-space: nowrap;
		text-align: center;
		margin: 0 auto;
	}
}
@media (max-width: 700px) {
	.footer-nav a {
		font-size: 0.98em;
		letter-spacing: 0.01em;
		padding-left: 2px;
		padding-right: 2px;
		white-space: nowrap;
	}
}
/* Centrar texto en la navegación del footer */
.footer-nav > div {
	text-align: center;
}
.footer-nav ul {
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	text-align: left;
}
.footer-nav li {
	list-style: none;
	margin-bottom: 8px;
}
.footer-nav a {
	display: block;
	text-align: center;
}
/* Mejorar visibilidad del logo en el footer */
.footer-logo {
	background: #fff;
	border-radius: 8px;
	padding: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
@media (max-width: 700px) {
	   .map-card.map-card--map,
	   .card.feature-explainer {
		   width: 100% !important;
		   max-width: 100% !important;
		   min-width: 0 !important;
		   margin-left: auto !important;
		   margin-right: auto !important;
		   box-sizing: border-box;
		   display: block !important;
		   padding-left: 8px !important;
		   padding-right: 8px !important;
	   }
	   .card,
	   .map-card {
		   width: 100% !important;
		   max-width: 100% !important;
		   min-width: 0 !important;
		   margin-left: auto !important;
		   margin-right: auto !important;
		   box-sizing: border-box;
		   display: block !important;
		   padding-left: 8px !important;
		   padding-right: 8px !important;
		   border: none !important;
	   }
	   /* En móvil, borde naranja fijo sin necesidad de tap */
	   .card.feature-explainer,
	   .map-card.map-card--map {
		   border: 2.5px solid #ff7b00 !important;
		   box-shadow: 0 2px 12px rgba(255,123,0,0.10) !important;
		   transition: box-shadow 0.22s ease, border 0.22s ease;
		   z-index: 1;
	   }
	.map-card,
	.card,
	.map-card.node-card,
	.map-card.map-card--popup,
	.card.feature-explainer {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box;
		min-width: 0;
	}
	.container {
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box;
	padding-bottom: 0px !important;
	}
.feature-explainer p {
  font-size: 1.15em;
  color: #e9dfe3; /* O el color que prefieras */
  line-height: 1.6;
}

	.map-card.node-card {
	min-height: auto !important;
	padding: 0 !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
	}
	.text-type {
	min-height: auto !important;
	padding: 0 !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	}
	.phrase p {
	font-size: clamp(1.4rem, 3vw + 1.2rem, 2.2rem) !important;
	word-break: break-word;
	white-space: normal;
	overflow-wrap: break-word;
	width: 100vw !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	}
}
p {
	margin-bottom: 14px;
}

/* Header navigation: make main nav buttons smaller and discreet */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(27, 7, 16, 0.85);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(201, 174, 182, 0.35);
}
.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
}
.site-header .nav {
	display: flex;
	align-items: center;
	gap: 8px;
}
.site-header .nav .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	min-width: auto;
	height: 32px;
	border-radius: 8px;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #f2e9ec;
	transition: background 0.2s, transform 0.15s, border-color 0.2s;
}
.site-header .nav .btn:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.22);
}
.site-header .nav .btn.active {
	background: rgba(255, 123, 0, 0.18);
	border-color: rgba(255, 123, 0, 0.35);
}
.site-header .nav .btn .metric-value {
	font-size: 1rem;
	line-height: 1;
}
@media (max-width: 700px) {
	.site-header .container { padding: 6px 10px; }
	.site-header .nav { gap: 6px; }
	.site-header .nav .btn { height: 28px; padding: 3px 6px; border-radius: 7px; }
	.site-header .nav .btn .metric-value { font-size: 0.95rem; }
}

/* Unified logo style across the project */
.logo {
	font-weight: 700;
	letter-spacing: 0.6px;
	font-size: 2.2rem;
	line-height: 1;
	margin: 0;
	color: #ffffff;
}

/* Efecto hover/activo para tarjetas principales (borde naranja animado) */
.card.feature-explainer,
.map-card.map-card--map {
	transition: box-shadow 0.22s, border 0.22s;
	border: 2px solid transparent;
}
/* Efecto hover/activo SOLO en desktop */
.card.feature-explainer:hover,
.card.feature-explainer:active:not(.active),
.map-card.map-card--map:hover,
.map-card.map-card--map:active:not(.active) {
	border: 2.5px solid #ff7b00;
	box-shadow: 0 4px 24px rgba(255,123,0,0.18), 0 2px 12px rgba(80,0,40,0.12);
	z-index: 2;
}
/* Footer moderno con estilo de card */
.modern-footer {
		background: var(--card, #1b0710);
		background-image:
			url('data:image/svg+xml;utf8,<svg width="192" height="192" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><polygon points="24,4 44,14 44,34 24,44 4,34 4,14" fill="%23FF9800" stroke="%23FF9800" stroke-width="2"/><polygon points="24,4 44,14 24,24 4,14" fill="%23FF9800" opacity="0.85"/><polygon points="24,24 44,14 44,34 24,44" fill="%23FFB74D" opacity="0.7"/><polygon points="24,24 24,44 4,34 4,14" fill="%23A0522D" opacity="0.7"/><rect x="21" y="12" width="6" height="20" rx="3" fill="white" opacity="0.25"/><rect x="23" y="8" width="2" height="6" rx="1" fill="white" opacity="0.25"/></svg>'),
			url('data:image/svg+xml;utf8,<svg width="192" height="192" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><polygon points="24,4 44,14 44,34 24,44 4,34 4,14" fill="%23FF9800" stroke="%23FF9800" stroke-width="2"/><polygon points="24,4 44,14 24,24 4,14" fill="%23FF9800" opacity="0.85"/><polygon points="24,24 44,14 44,34 24,44" fill="%23FFB74D" opacity="0.7"/><polygon points="24,24 24,44 4,34 4,14" fill="%23A0522D" opacity="0.7"/><rect x="21" y="12" width="6" height="20" rx="3" fill="white" opacity="0.25"/><rect x="23" y="8" width="2" height="6" rx="1" fill="white" opacity="0.25"/></svg>');
		background-repeat: repeat;
		background-size: 192px 192px, 192px 192px;
		background-position: 0 0, 96px 96px;
	border-radius: 18px 18px 0 0;
	box-shadow: 0 2px 24px rgba(80,0,40,0.18);
	margin-top: 48px;
	padding: 48px 24px 0 24px;
}
.modern-footer .footer-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-bottom: 5px;
}
.modern-footer .footer-logo-block {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}
.modern-footer .footer-title {
	font-size: 2em;
	font-weight: 700;
	color: #fff;
	margin: 0;
}
.modern-footer .footer-desc {
	color: #c9aeb6;
	font-size: 1.08em;
	margin: 18px 0 0 0;
	max-width: 480px;
	text-shadow: 0 2px 8px rgba(27,7,16,0.45), 0 1px 0 #fff;
}
.modern-footer .footer-social {
	display: flex;
	gap: 18px;
	margin: 24px 0 0 0;
	padding: 0;
	list-style: none;
}
.modern-footer .footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #8b1631 0%, #ff7b00 100%);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	color: #fff;
	box-shadow: 0 2px 8px rgba(80,0,40,0.12);
	transition: transform 0.2s, box-shadow 0.2s;
}
.modern-footer .footer-social a:hover {
	transform: scale(1.12);
	box-shadow: 0 4px 16px rgba(80,0,40,0.22);
}
.modern-footer .footer-nav {
	background: rgba(255,255,255,0.03);
	border-radius: 12px;
	padding: 16px 16px;
	margin: 32px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 32px;
}
.modern-footer .footer-nav > div { display: inline-flex; }
.modern-footer .footer-nav ul { list-style: none; margin: 0; padding: 0; }
.modern-footer .footer-nav li { display: inline-flex; }
.modern-footer .footer-nav a { display: inline-flex; align-items: center; justify-content: center; }
.modern-footer .footer-nav h3 {
	color: #fff;
	font-size: 1.18em;
	margin-bottom: 12px;
}
.modern-footer .footer-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.modern-footer .footer-nav a {
	color: #f2e9ec;
	text-decoration: none;
	font-size: 1em;
	transition: color 0.2s;
	text-shadow: 0 2px 8px rgba(27,7,16,0.45), 0 1px 0 #fff;
}
.modern-footer .footer-nav a:hover {
	 color: #871630;
}
.modern-footer .footer-legal {
	border-top: 1px solid #c9aeb6;
	padding: 24px 0 8px 0;
	text-align: center;
	font-size: 0.88em; /* smaller for less prominence */
	color: #c9aeb6;
	background: none;
	text-shadow: 0 2px 8px rgba(27,7,16,0.45), 0 1px 0 #fff;
}
.modern-footer .footer-legal p {
	margin: 2px 0; /* tighter spacing between lines */
	line-height: 1.3;
}
.modern-footer .footer-legal a {
	color: #c9aeb6;
	text-decoration: underline;
	margin: 0 8px;
	transition: color 0.2s;
}
.modern-footer .footer-legal a:hover {
	color: #ff7b00;
}
/* Títulos destacados para la landing */
.titulo-bw {
	color: #fff;
	text-shadow: 0 2px 16px rgba(80,0,40,0.28), 0 1px 0 #fff;
	font-weight: 700;
	font-size: 2.2em;
	letter-spacing: 0.04em;
	transition: text-shadow 0.3s, color 0.3s;
	background: linear-gradient(90deg, #8b1631 0%, #ff7b00 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 18px;
}
/* FAQ Accordion en dos columnas */
.accordion {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

/* FAQ category blocks: add vertical separation on desktop */
#faqs .card.feature-explainer {
	margin-bottom: 32px;
}
#faqs .card.feature-explainer + .card.feature-explainer {
	margin-top: 32px;
}
#faqs h3 {
	margin-top: 0;
	margin-bottom: 12px;
}
@media (max-width: 900px) {
	.container,
	.map-card,
	.card,
	.map-card.node-card,
	.map-card.map-card--popup,
	.map-card.map-card--map,
	.card.feature-explainer {
		width: 100%;
		max-width: 100%;
		padding-left: 16px !important;
		padding-right: 16px !important;
		padding-top: 16px !important;
		padding-bottom: 16px !important;
		box-sizing: border-box;
		min-width: 0;
	}
	.footer-desc {
		max-width: 100vw !important;
	}
  }
  h1, h2, h3, h4 {
    font-size: clamp(1.1rem, 2vw + 1rem, 1.5rem);
    line-height: 1.22;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
	p, li, .accordion-answer, .footer-desc, .feature-explainer p {
	font-size: clamp(1.15rem, 2vw + 1.15rem, 1.35rem) !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .faqs-grid,
  .accordion,
  .grid {
    grid-template-columns: 1fr !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

/* Espaciado para subtítulos de secciones principales */
.subtitulo-bw {
	margin-bottom: 32px;
	margin-top: 32px;
}



/* Integrated styles from root styles.css */
:root {
	/* Wine / borgoña palette */
	--bg: #12060a;
	/* deep wine background */
	--card: #1b0710;
	/* card surface */
	--muted: #c9aeb6;
	/* soft muted (warm) */
	--accent: #8b1631;
	/* strong wine accent */
	--button-bg: #ff7b00;
	/* default orange for regular buttons */
	--header-offset: 100px;
	/* header height used for scroll padding and offsets */
	--glass: rgba(255, 255, 255, 0.03);
	--maxw: 1100px;
}

* {
	box-sizing: border-box
}

body {
	font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
	background: var(--card, #1b0710);
	color: #f2e9ec;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 16px;
	line-height: 1.5;
}

/* Global typographic scale & rhythm */
h1, h2, h3, h4 {
	font-family: inherit;
	font-weight: 600;
	letter-spacing: .4px;
	line-height: 1.15;
	margin: 0 0 .65em;
}

h1 { font-size: clamp(2rem, 1.6rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 1.15rem + .8vw, 1.7rem); line-height:1.22; }
h4 { font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); line-height:1.3; }

/* Differentiated heading colors (scoped to main content to avoid header logo) */
main h1, main h2 { color: #FF9800; }
main h3, main h4 { color: #ffc48c; }

/* Paragraph / list readability */

ul, ol { padding-left: 1.25rem; }
li { margin-bottom: .55em; }

/* Improve contrast of general body copy vs muted elements */
body p { color: #e9dfe3; }
.muted, .accordion-question, .metric-label { color: var(--muted); }

/* Lead paragraph styling (first paragraph in intro / hero optional) */

/* Tighten FAQ heading margin after global h2 adjustments */
#faqsHeading { margin-bottom: .8em; }

/* Smooth scrolling and ensure anchored sections are visible below sticky header */
html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-offset);
}

/* For browsers that use element-based offset when scrolling into view */
/* Add extra visual separation when jumping to anchors even with a compact header */
section[id] {
	scroll-margin-top: calc(var(--header-offset) + 24px);
}

/* Ensure specific FAQ heading has matching extra offset */
#faqsHeading {
	scroll-margin-top: calc(var(--header-offset) + 24px);
}

.container {
	max-width: 1400px;
	margin: 0 auto;
	padding-left: 10px;
	padding-right: 32px;
	padding-bottom: 32px !important;
	-webkit-overflow-scrolling: touch;
}

.site-header {
	/* translucent dark overlay so hero image is hinted through */
	backdrop-filter: blur(8px) saturate(110%);
	-webkit-backdrop-filter: blur(8px) saturate(110%);
	position: sticky;
	top: 0;
	/* subtle gradient + translucent base so underlying hero is visible */
	background: linear-gradient(180deg, rgba(18, 6, 10, 0.42), rgba(18, 6, 10, 0.18));
	background-color: rgba(18, 6, 10, 0.32);
	border-bottom: 1px solid rgba(255, 255, 255, 0.03);
	/* Force a compact header height */
	height: 100px;
	min-height: 100px;
	padding: 0;
	/* remove extra padding so nested content controls height */
}

/* Scrolled visual state: stronger overlay, subtle drop shadow */
.site-header.scrolled {
	background: linear-gradient(180deg, rgba(18, 6, 10, 0.70), rgba(18, 6, 10, 0.30));
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.site-header .container {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Make the header's inner container span the full viewport so header items
   can sit closer to the page edges while leaving other .container usages
   constrained by the global max-width. */
.site-header>.container {
	max-width: 100%;
	width: 100%;
	padding-left: 18px;
	/* small gutter so content isn't flush to the window edge */
	padding-right: 28px;
}

.logo {
	font-weight: 700;
	letter-spacing: 0.6px;
	font-size: 2.2rem;
	margin-top: 8px;
	line-height: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 48px;
	padding: 10px 0px 0px 0px
}

/* Small logo image placed next to the title. The .rotatable class is a hook
   for later animation (rotation). */
.logo-icon {
	display: inline-block;
	width: 88px;
	height: auto;
	margin-right: 12px;
	margin-top: 6px; /* slightly lower to vertically center with title */
	/* separation from the title */
	vertical-align: middle;
}

.rotatable {
	transition: transform 420ms cubic-bezier(.2, .9, .2, 1);
	will-change: transform;
}

/* Optional light background and filter to turn a dark/black icon into white
   without changing the image file. Use the class 'white' on the <img>. */
.logo-icon.white {
	/* convert black to white */
	filter: invert(1) brightness(1.4) contrast(1.05);
	/* remove background, padding and shadow for a cleaner look */
	background: none;
	padding: 0;
	border-radius: 0;
}

/* Large spotlight icon used in the hero under the CTA */
.inicio-spotlight {
	display: flex;
	justify-content: center;
	margin-top: 1px;
}

.logo-large {
	width: 440px;
	height: auto;
	padding: 14px;
	border-radius: 14px;
	background-color: rgba(255, 255, 255, 0.12);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	filter: invert(1) brightness(1.35) contrast(1.05);
	transition: transform 420ms cubic-bezier(.2, .9, .2, 1), box-shadow 320ms ease;
}

.logo-large:hover {
	transform: scale(1.04) rotate(6deg);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

@media (max-width:700px) {
	.logo-large {
		width: 280px;
		padding: 8px;
	}
}

/* On narrow screens remove the extra top padding so the hero content sits higher
   (user preferred the look when this padding was disabled in DevTools). */
@media (max-width:700px) {
	.inicio .container {
		padding-top: calc(var(--header-offset) - 12px);
	}
}

/* Responsive: show only the title in header on mobile */
@media (max-width: 700px) {
	.site-header .container {
		justify-content: center;
	}
	.site-header .logo-icon {
		display: none !important;
	}
	.site-header .nav {
		display: none !important;
	}
	.logo {
		font-size: 2rem; /* slightly smaller to fit comfortably */
	}
}



.nav {
	margin-left: auto;
	display: flex;
	gap: 2px;
    margin-right: 8px; /* slight separation from right edge */
}

.nav a {
	color: var(--muted);
	text-decoration: none
}

.btn {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 8px;
	text-decoration: none;

	/* Asegura que el menú de navegación esté por encima y sea interactivo */
	.site-header .nav {
		position: relative;
		z-index: 100;
		pointer-events: auto;
	}

	background: var(--button-bg);
}

.btn.primary {
	/* Show as orange by default (button-bg). On hover/active the global
	   .btn:hover and .btn.active rules will switch it to the burgundy gradient. */
	background: var(--button-bg);
	color: #08101a;
}

/* Ghost buttons no longer differ — all .btn share the same base and active behavior */
/* Ghost buttons: when active, use dark background and white text for readability */
/* Unified hover/active for all buttons */
.btn:hover,
.btn:focus {
	background: linear-gradient(180deg, #8b1631 0%, #6a0f22 100%);
	color: #fff;
	outline: none;
}

.btn.active {
	background: linear-gradient(180deg, #8b1631 0%, #6a0f22 100%);
	color: #fff;
	border: 1px solid rgba(139, 22, 49, 0.9);
}

/* Cambiado a .inicio para coincidir con el id y evitar conflictos de estilos */
.inicio {
	/* Make the hero image occupy the full viewport so it extends under the header */
	min-height: 50vh;
	display: block;
	text-align: center;
	padding: 0;
	background-image: linear-gradient(rgba(18, 6, 10, 0.55), rgba(18, 6, 10, 0.55)), url('../assets/vinyedo-red.png');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Ensure hero content isn't obscured by the sticky header; push content down by header height */
.inicio .container {
	/* Remove the extra 12px so content can sit closer to the top; header offset still applied */
	padding-top: calc(var(--header-offset));
	padding-bottom: 24px;
}

.inicio h2 {
	font-size: 40px;
	margin: 0 0 18px;
	/* larger gap below title */
	line-height: 1.08;
}

.inicio p {
	color: var(--muted);
	max-width: 720px;
	margin: 0 auto 26px;
	/* add space under paragraph before CTA */
	font-size: 18px;
	letter-spacing: 0.2px;
}

.inicio .cta {
	margin-top: 8px;
	/* small additional breathing room */
}

.features {
	padding: 36px 0
}

/* Unified features layout: two primary cards (explainer + metrics) */
.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 48px 48px;
	align-items: stretch;
	margin: 0 auto 48px auto;
	padding: 0 0;
	width: 100%;
	max-width: 1400px;
	box-sizing: border-box;
}
.features-grid > .feature-explainer {
	height: 100%;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
}

/* Ensure media sections allow native vertical scroll on touch */
.video,
.video-container,
video,
iframe {
	touch-action: pan-y;
}

/* Centralized media sizing and centering to replace inline styles */
.video video {
	display: block;
	max-width: 100%;
	height: 420px;
	min-height: 320px;
	margin: 0 auto;
	background: #1B0710;
	border-radius: 16px;
	object-fit: cover;
}
.video-container .video-center {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}
.video-container iframe {
	display: block;
	margin: 0 auto;
	width: 70vw;
	max-width: 480px;
	height: 39vw;
	max-height: 270px;
}

/* Metrics card internal grid */
.metrics-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 12px;
	justify-items: center;
	width: 100%;
}

/* Metrics and explainer headings unified (h3 inside cards) */
.metrics h3,
.feature-explainer h3 {
	margin-top: 0;
	
}

.metrics p,
.feature-explainer p {
	margin-top: 0;
	margin-bottom: 14px;
}

/* Individual metric boxes */
.metric {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	padding: 12px 14px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.metric-value {
	font-size: clamp(1.6rem, 4.5vw, 2.4rem);
	font-weight: 700;
	line-height: 1;
	background: linear-gradient(90deg, var(--button-bg), #ff932a);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.metric-label {
	font-size: 0.75rem;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 600;
}

@media (max-width: 900px) {
	.features-grid {
		grid-template-columns: 1fr;
	}
	.metrics-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px
}

.card {
	background: var(--glass);
	padding: 18px;
	border-radius: 12px;
	font-size: 25px !important;
}

.security {
	padding: 2px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.02);
}

/* Security section: no large background image here; keep spacing and subtle rounded container */
#security {
	background: transparent;
	border-radius: 0;
	/* keep layout simple */
	padding-top: 36px;
	/* extra spacing so cards don't sit at the very top */
	padding-bottom: 10px;
	display: flex;
	gap: 40px;
	/* separa las tarjetas con 24px */
	flex-wrap: wrap;
}


/* Add consistent spacing between top-level sections so the initial view feels separate.
   Avoid adding top margin to the very first section so there is no visible gap under the header. */
main>section:not(:first-child) {
	margin-top: 18px;
}

main>section {
	margin-bottom: 18px;
}

/* Mobile: unify vertical spacing between sections to match card gap */
@media (max-width: 700px) {
	main>section {
		margin-bottom: 32px !important;
	}
	main>section:not(:first-child) {
		margin-top: 32px !important;
	}
	.features-grid {
		gap: 32px !important;
		margin: 0 auto !important; /* remove extra 40px bottom from default */
	}
}

.faqs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	position: relative;
	width: 100%;
	min-height: 320px;
	background: url('../assets/botellero-blocks.png') center center/cover no-repeat;
	border-radius: 18px;
	overflow: hidden;
}

/* Center the items inside the security/faqs grid */
#security .faqs-grid {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

#security  {
	max-width: 80vw;
	width: 100%;
	/* make cards semi-transparent so the section background shows through */
	background-color: rgba(11, 6, 8, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.03);
}

/* Backgrounds for specific cards */


/* Give the Nodo card its own background image on top of the section background */
.map-card.node-card {
	background: transparent;
	width: 100%;
	height: 100%;
	box-shadow: none;
	margin: 0 auto;
}



/* Mapa Popup User */
/* Mapa card: tablet botella as requested */
.map-card.map-card--map {
	/* Replace background with the project's tablet-mano-botella.png asset */
	background-image: linear-gradient(rgba(18, 6, 10, 0.32), rgba(18, 6, 10, 0.32)), url('../assets/map-card.png');
	background-size: cover;
	background-position: center;
}

/* Mapa card: use map-card.png as requested */
.wine-lovers-bg {
	/* Replace background with the project's map.png asset */
	background-image: linear-gradient(rgba(18, 6, 10, 0.45), rgba(18, 6, 10, 0.45)), url('../assets/usuario-popup.png');
	background-size: cover;
	background-position:top center;
}
/* Unificar fuente de todos los <p> a 30px */
p {
	font-size: 25px;
}
/* Accordion styles for FAQs */
.accordion {
	margin-top: 28px;
	max-width: var(--maxw);
	margin-left: auto;
	margin-right: auto;
}

.accordion-item {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	margin-bottom: 12px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.accordion-question {
	width: 100%;
	text-align: left;
	padding: 16px 20px;
	background: transparent;
	border: none;
	color: #f2e9ec;
	font-weight: 600;
	font-size: clamp(1rem, 0.98rem + 0.2vw, 1.1rem);
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	transition: background 180ms ease, color 180ms ease, box-shadow 160ms ease, transform 120ms ease;
}

.accordion-question .acc-icon {
	display: inline-block;
	width: 28px;
	text-align: center;
	color: #ffb74d !important; /* naranja claro, mejor visibilidad */
	filter: drop-shadow(0 1px 1px #fff3);
	transition: color 0.2s;
	font-weight: 700;
}

.accordion-answer {
	padding: 0 20px 18px 20px;
	color: #e9dfe3;
	line-height: 1.62;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-left: 2px solid rgba(255, 123, 0, 0.35);
	transition: max-height 260ms ease, opacity 220ms ease, padding 160ms ease;
}

/* Smoothly collapse/expand answers using max-height and opacity instead of display none */
.accordion-answer[hidden] {
	display: block;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	padding-top: 0;
	padding-bottom: 0;
}

.accordion-answer:not([hidden]) {
	max-height: 1000px;
	opacity: 1;
	padding-top: 10px;
	padding-bottom: 18px;
}

/* FAQ category separation: add breathing room between category blocks */
#faqs section.card.feature-explainer {
	margin: 24px 0;
}

/* Slightly larger separation on small screens for clarity */
@media (max-width: 700px) {
	#faqs section.card.feature-explainer {
		margin: 32px 0;
	}
}

/* Hover/focus and expanded states */
.accordion-item:hover .accordion-question {
	background: rgba(255, 255, 255, 0.03);
}

.accordion-question:focus-visible {
	outline: 2px solid rgba(255, 123, 0, 0.7);
	outline-offset: 3px;
	border-radius: 10px;
}

.accordion-question[aria-expanded="true"] {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

@media(max-width:900px) {
	.accordion {
		padding: 0 18px;
	}
}

.map-card {
	background: var(--card);
	/* increase padding to make the card feel larger */
	padding: 20px;
	border-radius: 10px;
	/* give cards a noticeably taller minimum height so they appear larger */
	min-height: 220px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.map-card h3, .map-card h4 {
	margin: 0 0 6px 0;
}


/* Actions pinned to bottom for consistent placement */
.map-card .card-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.map-card .card-actions .btn {
	backdrop-filter: saturate(115%);
}

.site-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.03);
	padding: 18px;
	text-align: center;
	color: var(--muted)
}

@media(max-width:900px) {
	.grid {
		grid-template-columns: 1fr
	}

	.faqs-grid {
		grid-template-columns: 1fr
	}

	.nav {
		display: none
	}

	.inicio {
		padding: 5px 18px;
	}

	.inicio h2 {
		font-size: 28px;
		margin-bottom: 12px;
	}

	.inicio p {
		font-size: 16px;
		margin-bottom: 18px;
	}
}

/* Custom hero positioning for demo: allow raising the inner container above center
   without inline styles. Use a modest translate to avoid being too close to the top.
   On small screens the translate is removed so the content remains fully visible. */
.inicio--raised {
	min-height: 50vh;
	display: block;
}

.inicio--raised .container {
	/* lift up slightly above the midpoint. Increased to -12vh so key lines like
	   "Conservación óptima" are visible on smaller viewports. Media queries
	   adjust this further for very small screens. */
	transform: none;
}

/* Mobile adjustments: raise hero content further so the main block starts
   higher on small viewports. We use two breakpoints for gradual control. */
@media (max-width:700px) {
	.inicio--raised .container {
		/* pull content up more on narrow tablets / large phones */
		transform: translateY(-14vh);
		padding-top: 8px;
	}

	/* slightly reduce header height on narrower screens so the hero can use more space */
	.site-header {
		height: 80px;
		min-height: 80px;
	}

	:root {
		--header-offset: 80px;
	}
}


	:root {
		--header-offset: 72px;
	}


@media (max-width: 700px) {

	/* Disable vertical lift on narrow screens so content isn't cut off */
	.inicio--raised,
	.inicio {
		min-height: auto;
		display: block;
		align-items: stretch;
	}

	.inicio--raised .container {
		transform: none;
		/* removed extra padding-top here per user request so content is not pushed down */
	}
	/* Ensure symmetric horizontal padding for content containers on mobile */
	main > .container,
	section.container {
		padding-left: 8px !important;
		padding-right: 8px !important;
		box-sizing: border-box;
	}


/* Navigation hover / active indicators */
.nav a {
	transition: color 150ms ease, border-bottom-color 150ms ease;
}

.nav a:hover,
.nav a:focus {
	color: var(--accent);
	outline: none;
	background: rgba(139, 22, 49, 0.06);
	/* subtle wine background on hover */
	border-radius: 6px;
	padding: 6px 8px;
}

.btn.active {
	border-radius: 8px;
	padding: 6px 10px;
}

/* Buttons when active (match the box indicator instead of underline) */
.btn.active {
	box-shadow: 0 0 0 2px rgba(139, 22, 49, 0.12) inset, 0 4px 12px rgba(11, 6, 8, 0.35);
	transform: translateY(0);
}

/* Stronger visual for primary buttons when active so the state is obvious */
.btn.primary.active {
	background: linear-gradient(180deg, #8b1631 0%, #6a0f22 100%);
	color: #fff;
	border: 2px solid rgba(139, 22, 49, 0.9);
	box-shadow: 0 6px 18px rgba(107, 11, 22, 0.45), inset 0 0 0 3px rgba(255, 255, 255, 0.02);
	border-radius: 10px;
	padding: 8px 14px;
}

/* Ensure nav buttons use same .btn styles (inherit defaults) */
.nav a.btn {
	/* small layout tweak to match nav spacing */
	padding: 8px 12px !important;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	min-width: 100px;
	justify-content: center;
}

/* Also ensure any anchor in the header nav gets the same visual treatment */
.site-header .nav a {
	/* dark wine buttons to replace previous orange */
	background: #220F17;
	color: #f2e9ec;
	/* dark text for contrast on orange */
	padding: 6px 10px;
	/* slightly smaller to fit header */
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
	font-size: 0.95rem;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.site-header .nav a:hover,
.site-header .nav a:focus {
	background: #2B171F;
	color: #fff;
	transform: translateY(-2px);
}

.site-header .nav a.active {
	background: #2B171F;
	color: #fff;
	border: 1px solid rgba(139, 22, 49, 0.5);
	box-shadow: 0 6px 18px rgba(11, 6, 8, 0.35);
}

/* Add luxury phrase styles for .text-type and .phrase */
.text-type {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0;
	min-width: 290px; /* Ajusta el valor según lo que necesites */
	min-height: 180px;
	width: 100%;
	padding: 0;
	background: linear-gradient(135deg, rgba(27,7,16,0.92) 60%, rgba(139,22,49,0.85) 100%);
	border-radius: 18px;
	box-shadow: 0 6px 32px rgba(80,0,40,0.18);
}

.phrase {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 0;
	margin: 0;
	width: 100%;
}

.phrase p {
	font-size: clamp(1.8rem, 2vw + 2rem, 2.4rem) !important;
  	font-weight: 500;
	text-align: left;
	color: #39ff14;
	font-family: 'Fira Mono', 'Consolas', 'Menlo', 'Monaco', 'monospace';
	font-style: normal;
	text-shadow: 0 0 8px #39ff14, 0 2px 18px rgba(0,255,80,0.18);
	background: none;
	margin: 0;
	letter-spacing: 0.04em;
	transition: text-shadow 0.3s, color 0.3s;
}

.phrase p:hover {
  color: #ff7b00;
  text-shadow: 0 4px 24px rgba(255,123,0,0.18), 0 2px 12px rgba(80,0,40,0.22);
  background: linear-gradient(90deg, #ffd700 0%, #8b1631 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

}

/* Cursor blink animation for terminal effect */
.cursor-blink {
	display: inline-block;
	width: 1ch;
	height: auto;
	background: none;
	color: #39ff14;
	font-family: inherit;
	animation: blink-cursor 1s steps(1) infinite;
	vertical-align: middle;
	position: relative;
	top: 0.08em;
}

@keyframes blink-cursor {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

/* Mobile fix: keep language selector accessible in header */
@media (max-width: 700px) {
	.site-header .container {
		justify-content: space-between !important;
		align-items: center;
		gap: 8px;
	}

	.site-header .nav {
		display: block !important;
		margin-left: auto;
		max-width: 100%;
	}

	.site-header .nav ul {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 6px !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 0;
		padding: 0;
	}

	.site-header .nav ul::-webkit-scrollbar {
		display: none;
	}

	.site-header .nav li,
	.site-header .nav a,
	.lang-menu-item {
		flex: 0 0 auto;
	}

	.lang-menu-item {
		gap: 4px;
	}

	.lang-select {
		min-height: 30px;
		font-size: 0.82rem;
		padding: 3px 6px;
		max-width: 72px;
	}
}

@media (max-width: 900px) {
	.site-header .nav {
		display: block !important;
		margin-left: auto;
	}

	.site-header .nav ul {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 6px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.site-header .nav ul::-webkit-scrollbar {
		display: none;
	}

	.lang-menu-item,
	.site-header .nav li {
		flex: 0 0 auto;
	}

	/* Responsive requirement: keep only language selector visible */
	.site-header .nav li:not(.lang-menu-item) {
		display: none !important;
	}

	.site-header .nav ul {
		justify-content: flex-end;
		overflow-x: visible;
	}

	.site-header .lang-menu-item {
		display: inline-flex !important;
		align-items: center;
	}
}