/* NTA Cacao Bridge — formulario de búsqueda del home ([nta_home_cotizador]). */
.nta-home-card {
	--nta-accent: #026b91;
	--nta-coral: #ea5254;
	background: #fff;
	border-radius: 12px;
	padding: 2rem 2rem 2.2rem;
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
	box-shadow: 0 1px 2px rgba(32,31,30,0.06), 0 10px 28px -14px rgba(32,31,30,0.28);
	font-family: "Nunito Sans", system-ui, sans-serif;
	box-sizing: border-box;
	/* La tarjeta puede vivir en una columna angosta de Elementor (menos de 460px) aunque
	   la ventana sea ancha — el colapso a 1 columna del formulario tiene que mirar el
	   ancho de la tarjeta, no el de la ventana. */
	container-type: inline-size;
}
.nta-home-card * { box-sizing: border-box; }
.nta-home-card h2 {
	font-family: "Inter Tight", sans-serif; font-weight: 400; font-size: 1.3rem; color: #201f1e;
	text-align: center; margin: 0 0 1.4rem; line-height: 1.3;
}
.nta-home-card h2 b { font-weight: 700; }
/* minmax(0, 1fr), no 1fr solo: "1fr" a secas equivale a minmax(auto, 1fr) y el ancho
   mínimo de contenido de los <select>/<input type="date"> impedía que las columnas se
   achicaran, desbordando la tarjeta cuando queda en una columna angosta de Elementor. */
.nta-form-grid { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 0.9rem; margin-bottom: 0.7rem; }
.nta-field.nta-wide { grid-column: 1 / -1; }
.nta-field { position: relative; min-width: 0; width: 100%; }
.nta-box {
	width: 100%; min-width: 0; border: none; border-radius: 6px; padding: 0.65rem 0.8rem; font-size: 0.86rem;
	font-family: "Nunito Sans", sans-serif; color: #4a4948; background: #f4f4f3; appearance: none;
}
select.nta-box {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8987' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 14px; padding-right: 2.1rem;
}
select.nta-box:invalid { color: #8f8e8b; }
input.nta-box::placeholder { color: #8f8e8b; }
input[type="date"].nta-box { color-scheme: light; }
.nta-field-error { display: none; font-size: 0.72rem; color: #c0392b; margin-top: 0.3rem; }
.nta-field.show-error .nta-field-error { display: block; }
.nta-field.show-error input.nta-box, .nta-field.show-error select.nta-box { outline: 1.5px solid #c0392b; }
.nta-ages-grid input.nta-box.show-error { outline: 1.5px solid #c0392b; }
.nta-form-status { display: none; font-size: 0.83rem; margin: 0.8rem 0 0; padding: 0.6rem 0.8rem; border-radius: 8px; }
.nta-form-status.show { display: block; }
.nta-form-status.ok { background: #e6f4ea; color: #1c7a3c; }
.nta-form-status.error { background: #fbe9e7; color: #c0392b; }
.nta-ages-wrap { margin-top: -0.2rem; }
.nta-ages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.nta-discount-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: #6b6a67; margin: 0.4rem 0 1.1rem; }
.nta-discount-check input { accent-color: var(--nta-coral); width: 15px; height: 15px; cursor: pointer; }
.nta-coupon-field { margin: -0.6rem 0 1.1rem; }
.nta-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	background: var(--nta-coral); color: #fff; font-family: "Inter Tight", sans-serif; font-weight: 600;
	font-size: 0.9rem; border: none; border-radius: 4px; padding: 0.75rem 1.1rem; width: 100%; cursor: pointer;
}
.nta-btn:hover { filter: brightness(0.95); }
.nta-btn:disabled { opacity: 0.6; cursor: default; }

.nta-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 480px) {
	.nta-form-grid { grid-template-columns: 1fr; }
}

/* Mismo colapso a 1 columna, pero mirando el ancho de la tarjeta (columna angosta de
   Elementor en desktop/tablet) en vez del ancho de la ventana. Ojo: la container query
   mide el ancho de contenido (sin el padding de 2rem a cada lado), no el ancho total de
   la tarjeta — con este valor, tarjetas de hasta ~420px de ancho quedan en 1 columna y
   recién a partir de ahí (hasta el máximo de 460px) pasan a 2, probado sin desborde en
   307/420/460px. */
@container (max-width: 360px) {
	.nta-form-grid { grid-template-columns: 1fr; }
	.nta-home-card { padding: 1.5rem 1.25rem 1.75rem; }
}

/* Refuerzo de especificidad frente al tema del sitio. */
.nta-home-card .nta-btn {
	background: var(--nta-coral); color: #fff; border: 1px solid var(--nta-coral); border-radius: 4px;
	font-size: 0.95rem; font-weight: 600; padding: 0.75rem 1.1rem; box-shadow: none;
}
.nta-home-card .nta-btn:hover, .nta-home-card .nta-btn:focus { background: #d94446; border-color: #d94446; color: #fff; }
.nta-home-card h2 { font-size: 1.3rem; }

/* Texto guía de los campos de fecha (los <input type="date"> no admiten placeholder). */
.nta-datefield { position: relative; }
.nta-datefield .nta-date-ph {
	position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%);
	color: #8f8e8b; font-size: 0.86rem; pointer-events: none; line-height: 1;
}
.nta-datefield.has-value .nta-date-ph,
.nta-datefield:focus-within .nta-date-ph { display: none; }
.nta-datefield:not(.has-value) input[type="date"]:not(:focus) { color: transparent !important; }

/* Refuerzo final frente al tema del sitio: título más chico y campos con el mismo estilo
   (el tema le pone fondo blanco y borde a los campos de fecha y agranda los h2). */
.nta-home-card h2,
.nta-home-card h2 b {
	font-size: 1.2rem !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
}
.nta-home-card h2 { margin: 0 0 1.3rem !important; }
.nta-home-card input.nta-box,
.nta-home-card select.nta-box {
	background-color: #f4f4f3 !important;
	border: none !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	height: auto !important;
	font-size: 0.86rem !important;
	padding: 0.65rem 0.8rem !important;
}
.nta-home-card select.nta-box { padding-right: 2.1rem !important; }
.nta-home-card .nta-field.show-error input.nta-box,
.nta-home-card .nta-field.show-error select.nta-box { outline: 1.5px solid #c0392b; }