/* Hero en dos columnas: storytelling a la izquierda, herramienta a la derecha. */

.hero {
	position: relative;
	isolation: isolate;
	/* Sin esto, .hero__shape--5 (right:-1%) se salía del viewport en mobile
	   y generaba scroll horizontal de página — las formas pueden "asomarse"
	   hasta el borde del hero, nunca más allá. */
	overflow: hidden;
	display: grid;
	gap: var(--space-6);
	align-items: start;
}

/* Formas geométricas del hero: decorativas, detrás del contenido
   (z-index:-1 dentro del isolation:isolate de .hero de arriba), tamaños en
   vw para que se achiquen solas en mobile sin necesitar media queries
   propias. motion.js las mueve con gsap.quickTo() solo si hay hover real. */

.hero__shapes {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: visible;
	pointer-events: none;
}

.hero__shape {
	position: absolute;
	display: block;
}

.hero__shape--1 {
	top: -6%;
	left: 1%;
	width: clamp(90px, 16vw, 220px);
	height: clamp(90px, 16vw, 220px);
	border-radius: 50%;
	background: var(--color-accent);
	opacity: 0.14;
}

.hero__shape--2 {
	top: 2%;
	right: 6%;
	width: clamp(40px, 6vw, 90px);
	height: clamp(40px, 6vw, 90px);
	border-radius: 26%;
	background: var(--color-text);
	opacity: 0.07;
}

.hero__shape--3 {
	bottom: 10%;
	left: 10%;
	width: 0;
	height: 0;
	border-left: clamp(20px, 3vw, 45px) solid transparent;
	border-right: clamp(20px, 3vw, 45px) solid transparent;
	border-bottom: clamp(34px, 5vw, 78px) solid var(--color-accent);
	opacity: 0.2;
}

.hero__shape--4 {
	bottom: -4%;
	right: 20%;
	width: clamp(70px, 10vw, 140px);
	height: clamp(70px, 10vw, 140px);
	border-radius: 50%;
	background: var(--color-text);
	opacity: 0.05;
}

.hero__shape--5 {
	top: 42%;
	right: -1%;
	width: clamp(28px, 4vw, 60px);
	height: clamp(28px, 4vw, 60px);
	background: var(--color-accent);
	opacity: 0.18;
	transform: rotate(45deg);
}

@media (max-width: 640px) {
	.hero__shape--2,
	.hero__shape--4 {
		display: none;
	}
}

@media (min-width: 1024px) {
	.hero {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}
}

.hero__whatsapp {
	margin-top: var(--space-4);
	padding: var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	max-width: 420px;
}

.hero__whatsapp-title {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 4px;
}

.hero__whatsapp-text {
	font-size: 0.9rem;
}

.hero__whatsapp-link {
	/* El verde oficial de WhatsApp (#25D366) no llega a 4.5:1 sobre blanco
	   (es un problema conocido de esa marca) — esta versión oscurecida sí cumple. */
	color: #188741;
	font-weight: 600;
}

/* El cotizador vive en una superficie clara — "mesa de trabajo técnica" — a
   propósito distinta del resto de la home en negro. Fondo blanco liso,
   siguiendo la referencia (nada de grilla/blueprint aquí). */

.calculator {
	background-color: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-light-gray);
	padding: var(--space-4);
}

.calculator__title {
	color: var(--color-text);
	font-size: var(--text-h3);
	margin-bottom: var(--space-3);
}

.calculator__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2) var(--space-3);
	margin-bottom: var(--space-3);
}

.calculator__field label {
	display: block;
	font-family: var(--font-display);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-mid-gray);
	margin-bottom: 4px;
}

.calculator__field select,
.calculator__field input[type="number"] {
	width: 100%;
	padding: 0.6em;
	background: var(--color-surface);
	border: 1px solid var(--color-light-gray);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 0.9rem;
}

.calculator__field input[type="file"] {
	width: 100%;
	font-size: 0.75rem;
	color: var(--color-text);
}

.calculator__field--readonly output {
	display: block;
	padding: 0.6em 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.calculator__viewer {
	background: var(--color-black);
	color: var(--color-on-dark);
	padding: var(--space-3);
	margin-bottom: var(--space-3);
}

.calculator__readout {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--font-display);
	font-size: 0.8rem;
	margin-bottom: var(--space-1);
}

.calculator__percent {
	color: var(--color-accent);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.calculator__bar {
	height: 3px;
	background: var(--color-dark-gray);
	margin-bottom: var(--space-2);
}

.calculator__bar-fill {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--color-accent);
	transition: width var(--motion-fast) linear;
}

.calculator__canvas-wrap {
	position: relative;
	height: 220px;
}

.calculator__canvas-wrap canvas {
	width: 100%;
	height: 100%;
	display: block;
}

.calculator__canvas-wrap canvas[hidden] {
	display: none;
}

/* Simulación de impresión: se muestra mientras se lee el archivo, y da paso
   al visor 3D real cuando termina el análisis. */

.calculator__print-sim {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: var(--space-2) 0;
	transition: opacity var(--motion-medium) var(--ease-standard);
}

.calculator__print-sim[hidden] {
	display: none;
}

.calculator__print-sim.is-leaving {
	opacity: 0;
}

.calculator__print-nozzle {
	width: 32px;
	height: 38px;
	margin-bottom: 4px;
	animation: di3d-nozzle-sweep 1.3s ease-in-out infinite;
}

.calculator__print-nozzle-body {
	fill: var(--color-light-gray);
}

.calculator__print-nozzle-tip {
	fill: var(--color-accent);
}

@keyframes di3d-nozzle-sweep {
	0%,
	100% {
		transform: translateX(-34px);
	}
	50% {
		transform: translateX(34px);
	}
}

.calculator__print-build {
	position: relative;
	width: 72px;
	height: 120px;
	border: 1px solid var(--color-dark-gray);
	border-top: none;
	overflow: hidden;
}

.calculator__print-fill {
	position: absolute;
	inset: auto 0 0 0;
	height: 0%;
	background: var(--color-accent);
	transition: height 120ms linear;
}

@media (prefers-reduced-motion: reduce) {
	.calculator__print-nozzle {
		animation: none;
	}
}

.calculator__layers {
	margin: var(--space-2) 0 0;
	font-size: 0.75rem;
	color: var(--color-on-dark-muted);
}

.calculator__submit {
	width: 100%;
	justify-content: center;
}

.calculator__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

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