/* ============================================================
   Variables base — reconstruidas a partir del sistema existente
   ============================================================ */

:root {
	/*--purple-1: #5b3a8a;*/
	--purple-1-soft: #7a55b3;
	--purple-deep: #2e1a52;
	--green-1: #2f8f5e;
	--color-2-a: #5b3a8a;
	--black-1: #1c1c1c;
	--cream: #f5efe6;
	--paper: #faf6ef;
	--ink: #1a1422;
	--accent: #f4b740;
	--soft: 14px;
	--primary-radius: 999px;
	--inside-space: 28px;
	--small: 16px;
}

/* ============================================================
   Reset adicional para la sección hero
   ============================================================ */
main {
	background: var(--paper);
	overflow-x: hidden;
}

/* ============================================================
   HERO — bloque principal
   ============================================================ */
.hero-vasos {
	position: relative;
	background:
		radial-gradient(circle at 15% 20%, rgba(244, 183, 64, 0.18) 0%, transparent 45%),
		radial-gradient(circle at 85% 80%, rgba(91, 58, 138, 0.22) 0%, transparent 50%),
		linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
	padding: 80px var(--inside-space) 120px;
	overflow: hidden;
}

/* Grano sutil sobre el fondo */
.hero-vasos::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	pointer-events: none;
	opacity: 0.6;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 60px;
	align-items: center;
	position: relative;
	z-index: 2;
}

/* ============================================================
   Columna izquierda — texto
   ============================================================ */
.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--purple-1);
	background: rgba(91, 58, 138, 0.08);
	padding: 8px 16px;
	border-radius: 999px;
	margin-bottom: 28px;
}

.hero-eyebrow::before {
	content: '';
	width: 6px;
	height: 6px;
	background: var(--accent);
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(244, 183, 64, 0.25);
}

.hero-title {
	font-family: var(--main-font), sans-serif;
	font-weight: bold;
	font-size: clamp(40px, 5.5vw, 68px);
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: var(--purple-deep);
	text-align: left;
	margin: 0 0 24px 0;
}

.hero-title em {
	font-style: italic;
	font-weight: 500;
	color: var(--purple-1);
	position: relative;
	display: inline-block;
}

.hero-title em::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 4px;
	height: 10px;
	background: var(--accent);
	opacity: 0.35;
	z-index: -1;
	border-radius: 4px;
}

.hero-lead {
	font-size: 18px;
	line-height: 1.65;
	color: #3a2f4a;
	max-width: 540px;
	margin: 0 0 32px 0;
}

/* Tarjeta de precio destacado */
.price-card {
	display: inline-flex;
	align-items: stretch;
	background: var(--purple-deep);
	color: white;
	border-radius: var(--soft);
	overflow: hidden;
	margin: 0 0 36px 0;
	box-shadow: 0 18px 40px -20px rgba(46, 26, 82, 0.6);
}

.price-card-label {
	padding: 14px 18px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	max-width: 130px;
	line-height: 1.3;
}

.price-card-value {
	background: var(--accent);
	color: var(--purple-deep);
	padding: 14px 22px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-weight: bold;
}

.price-card-value .num {
	font-size: 28px;
	line-height: 1;
	letter-spacing: -0.02em;
}

.price-card-value .unit {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-top: 4px;
	opacity: 0.85;
}

/* Botones del hero */
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 12px;
}

.btn-primary, .btn-secondary {
	font-family: var(--main-font), sans-serif;
	font-weight: 600;
	font-size: 15px;
	padding: 16px 28px;
	border-radius: var(--primary-radius);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
	border: 2px solid var(--purple-1);
}

.btn-primary {
	background: var(--purple-1);
	color: white;
	box-shadow: 0 10px 24px -10px rgba(91, 58, 138, 0.5);
}

.btn-primary:hover {
	transform: translateY(-2px);
	background: var(--purple-deep);
	box-shadow: 0 16px 32px -12px rgba(91, 58, 138, 0.7);
}

.btn-secondary {
	background: transparent;
	color: var(--purple-1);
}

.btn-secondary:hover {
	background: var(--purple-1);
	color: white;
	transform: translateY(-2px);
}

.btn-arrow {
	transition: transform 0.25s ease;
}

.btn-primary:hover .btn-arrow,
.btn-secondary:hover .btn-arrow {
	transform: translateX(4px);
}

/* ============================================================
   Columna derecha — escena de vasos
   ============================================================ */
.cups-stage {
	position: relative;
	height: 560px;
	perspective: 1200px;
}

.cup {
	position: absolute;
	width: 200px;
	height: 280px;
	transform-origin: center bottom;
	transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
	            opacity 1.1s ease;
}

/* Posiciones iniciales (antes de scroll) */
.cup-1 { left: 50%; top: 40%; transform: translate(-50%, 40px) rotate(0deg) scale(0.7); opacity: 0; z-index: 3; }
.cup-2 { left: 50%; top: 40%; transform: translate(-50%, 40px) rotate(0deg) scale(0.7); opacity: 0; z-index: 2; }
.cup-3 { left: 50%; top: 40%; transform: translate(-50%, 40px) rotate(0deg) scale(0.7); opacity: 0; z-index: 1; }

/* Posiciones finales (cuando entran en viewport) */
.cups-stage.is-visible .cup-1 {
	transform: translate(-50%, 0) rotate(-6deg) scale(1);
	opacity: 1;
	top: 12%;
	left: 18%;
}
.cups-stage.is-visible .cup-2 {
	transform: translate(-50%, 0) rotate(4deg) scale(1.05);
	opacity: 1;
	top: 18%;
	left: 55%;
	transition-delay: 0.15s;
}
.cups-stage.is-visible .cup-3 {
	transform: translate(-50%, 0) rotate(-2deg) scale(0.85);
	opacity: 1;
	top: 48%;
	left: 35%;
	transition-delay: 0.3s;
}

/* SVG cup container */
.cup svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 30px 25px rgba(46, 26, 82, 0.18));
}

/* Float gentle animation after entrance */
@keyframes floatA {
	0%, 100% { transform: translate(-50%, 0) rotate(-6deg) scale(1); }
	50%      { transform: translate(-50%, -10px) rotate(-7deg) scale(1); }
}
@keyframes floatB {
	0%, 100% { transform: translate(-50%, 0) rotate(4deg) scale(1.05); }
	50%      { transform: translate(-50%, -14px) rotate(5deg) scale(1.05); }
}
@keyframes floatC {
	0%, 100% { transform: translate(-50%, 0) rotate(-2deg) scale(0.85); }
	50%      { transform: translate(-50%, -8px) rotate(-1deg) scale(0.85); }
}

.cups-stage.is-visible .cup-1 { animation: floatA 6s ease-in-out 1.2s infinite; }
.cups-stage.is-visible .cup-2 { animation: floatB 7s ease-in-out 1.4s infinite; }
.cups-stage.is-visible .cup-3 { animation: floatC 5.5s ease-in-out 1.6s infinite; }

/* Steam / vapor */
.steam {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
}

.cups-stage.is-visible .steam {
	animation: steamRise 3s ease-out 1.5s infinite;
}

.cups-stage.is-visible .cup-2 .steam {
	animation-delay: 1.8s;
}

.cups-stage.is-visible .cup-3 .steam {
	animation-delay: 2.1s;
}

@keyframes steamRise {
	0%   { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.8); }
	30%  { opacity: 0.5; }
	100% { opacity: 0; transform: translateX(-50%) translateY(-50px) scale(1.4); }
}

/* Decorative circles in background of stage */
.stage-deco {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.stage-deco-1 {
	width: 320px; height: 320px;
	top: 5%; left: 10%;
	background: radial-gradient(circle, rgba(244, 183, 64, 0.15) 0%, transparent 70%);
}

.stage-deco-2 {
	width: 240px; height: 240px;
	bottom: 8%; right: 5%;
	background: radial-gradient(circle, rgba(91, 58, 138, 0.18) 0%, transparent 70%);
}

/* ============================================================
   Sección beneficios / cómo cotizar
   ============================================================ */
.benefits-section {
	padding: 90px var(--inside-space);
	background: white;
	position: relative;
}

.benefits-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-top: 60px;
}

.benefit-card {
	background: var(--paper);
	border-radius: 20px;
	padding: 36px 28px;
	border: 1px solid rgba(91, 58, 138, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
}

.benefit-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px -20px rgba(91, 58, 138, 0.3);
}

.benefit-num {
	font-size: 14px;
	font-weight: bold;
	color: var(--accent);
	letter-spacing: 0.15em;
	margin-bottom: 14px;
	display: block;
}

.benefit-card h3 {
	font-size: 22px;
	font-weight: 600;
	color: var(--purple-deep);
	margin: 0 0 14px 0;
	line-height: 1.25;
}

.benefit-card p {
	font-size: 15px;
	line-height: 1.6;
	color: #4a3f5a;
	margin: 0;
}

.section-title {
	font-size: clamp(32px, 4vw, 48px);
	text-align: center;
	color: var(--purple-deep);
	margin: 0 0 18px 0;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.section-subtitle {
	text-align: center;
	font-size: 17px;
	line-height: 1.6;
	color: #4a3f5a;
	max-width: 680px;
	margin: 0 auto;
}

/* ============================================================
   Sección "cómo cotizar"
   ============================================================ */
.quote-process {
	background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-1) 100%);
	color: white;
	padding: 90px var(--inside-space);
	position: relative;
	overflow: hidden;
}

.quote-process::before {
	content: '';
	position: absolute;
	top: -100px; right: -100px;
	width: 400px; height: 400px;
	background: radial-gradient(circle, rgba(244, 183, 64, 0.2) 0%, transparent 70%);
}

.quote-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	position: relative;
	z-index: 2;
}

.quote-process .section-title {
	color: white;
	text-align: left;
}

.quote-steps {
	list-style: none;
	padding: 0;
	margin: 32px 0 0 0;
}

.quote-steps li {
	display: flex;
	gap: 18px;
	margin-bottom: 22px;
	font-size: 16px;
	line-height: 1.55;
}

.step-number {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background: var(--accent);
	color: var(--purple-deep);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 15px;
}

.checkbox-mock {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 14px 18px;
	border-radius: 12px;
	margin: 8px 0;
	font-size: 14px;
	backdrop-filter: blur(10px);
}

.checkbox-box {
	width: 22px; height: 22px;
	background: var(--accent);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--purple-deep);
	font-weight: bold;
	flex-shrink: 0;
}

.cta-block {
	text-align: center;
}

.cta-block .btn-primary {
	background: var(--accent);
	color: var(--purple-deep);
	border-color: var(--accent);
	font-size: 17px;
	padding: 18px 36px;
}

.cta-block .btn-primary:hover {
	background: white;
	border-color: white;
}

/* ============================================================
   Responsive
   ============================================================ */
@media screen and (max-width: 960px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.cups-stage {
		height: 480px;
		order: -1;
	}

	.benefits-grid {
		grid-template-columns: 1fr;
	}

	.quote-wrapper {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 595px) {
	.hero-vasos {
		padding: 50px 20px 80px;
	}

	.hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.btn-primary, .btn-secondary {
		justify-content: center;
	}

	.cups-stage {
		height: 420px;
	}

	.cup {
		width: 150px;
		height: 210px;
	}

	.price-card-label {
		max-width: 110px;
		font-size: 11px;
	}

	.price-card-value .num {
		font-size: 22px;
	}
}