/*
 * Formulario público [monachos_cotizacion].
 * Tokens con fallback var(--x, valor) porque el plugin puede insertarse
 * en páginas que no definan estas variables en :root.
 */

.coti {
	--coti-negro: var(--negro, #0E0E0E);
	--coti-carbon: var(--carbon, #1A1A1A);
	--coti-linea: var(--linea, #2C2A28);
	--coti-hueso: var(--hueso, #F2EFE9);
	--coti-gris: var(--gris, #8C8681);
	--coti-naranja: var(--naranja, #FF4400);
	--coti-display: var(--display, "Archivo", "Helvetica Neue", Arial, sans-serif);
	--coti-mono: var(--mono, "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace);
	--coti-gap: var(--gap, clamp(10px, 1.4vw, 18px));

	max-width: 720px;
	font-family: var(--coti-display);
	color: var(--coti-hueso);
}

/* Centra el widget en la mitad de la pantalla en escritorio. */
@media (min-width: 760px) {
	.coti {
		margin-inline: auto;
	}
}

/* --- Banner de foto: una foto genérica antes de elegir tipo de
   servicio, y una por tipo una vez elegido. Se mantiene fija durante
   todas las pantallas del wizard, no cambia entre preguntas. En mobile
   es un banner 16:9 arriba del formulario. --- */

.coti__banner {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--coti-linea);
	background: var(--coti-carbon);
	margin-bottom: var(--coti-gap);
}

/* En >=960px pasa a dos columnas iguales: el texto (subtítulo +
   preguntas) en un solo bloque a la izquierda, y la foto ocupando el
   mismo espacio en el bloque de la derecha — sin recorte de aspect
   ratio, llena todo el alto del bloque. */
@media (min-width: 960px) {
	.coti {
		max-width: 1080px;
		display: flex;
		flex-direction: row-reverse;
		align-items: stretch;
		gap: clamp(24px, 3vw, 48px);
	}

	.coti__banner {
		flex: 1;
		aspect-ratio: unset;
		margin-bottom: 0;
		position: sticky;
		top: 24px;
		align-self: stretch;
	}

	.coti__col {
		flex: 1;
		min-width: 0;
		text-align: left;
	}
}

.coti__banner-item {
	position: absolute;
	inset: 0;
}

.coti__banner-item[hidden] {
	display: none;
}

.coti__banner-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.coti__subtitulo {
	margin-top: -4px;
	margin-bottom: 4px;
}

.coti__visual-hueco {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px dashed var(--coti-linea);
	box-sizing: border-box;
	font-family: var(--coti-mono);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--coti-gris);
}

.coti__visual-hueco-tipo {
	color: var(--coti-hueso);
	font-size: 14px;
}

/* --- Video embebido dentro de una pantalla (ej. video historia de
   Quince): mismo tratamiento visual que .coti__banner, pero vive
   dentro del flujo de la pregunta en vez de fijo al costado. --- */

.coti__video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--coti-linea);
	background: var(--coti-carbon);
	margin-bottom: var(--coti-gap);
}

.coti__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- Selector de idioma (ES/FR/EN) del wizard --- */

.coti__idiomas {
	display: flex;
	gap: 6px;
	justify-content: flex-end;
	margin-bottom: clamp(10px, 1.6vw, 16px);
}

.coti__idioma-boton {
	font-family: var(--coti-mono);
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--coti-gris);
	background: transparent;
	border: 1px solid var(--coti-linea);
	padding: 4px 9px;
	cursor: pointer;
	line-height: 1;
}

.coti__idioma-boton:hover {
	color: var(--coti-hueso);
	border-color: var(--coti-gris);
}

.coti__idioma-boton.activo {
	color: var(--coti-negro);
	background: var(--coti-naranja);
	border-color: var(--coti-naranja);
}

/* --- Progreso --- */

.coti__progreso {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: clamp(20px, 3vw, 32px);
}

.coti__barra {
	flex: 1;
	height: 3px;
	background: var(--coti-linea);
}

.coti__barra-fill {
	height: 100%;
	background: var(--coti-naranja);
	width: 0%;
	transition: width 0.25s ease;
}

.coti__paso-info {
	font-family: var(--coti-mono);
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--coti-gris);
	white-space: nowrap;
}

/* --- Pantallas (una pregunta por vez) --- */

.coti__form {
	display: block;
}

.coti__pantalla {
	display: flex;
	flex-direction: column;
	gap: var(--coti-gap);
	animation: coti-aparecer 0.2s ease;
}

/* El atributo HTML `hidden` debe ganarle a cualquier `display:flex`
   propio de estas clases — si no, el elemento queda visible igual.
   Aplica a toda pantalla, campo u opción que el JS oculte/muestre. */
.coti__pantalla[hidden],
.coti__progreso[hidden],
.coti__campo[hidden],
.coti__ubicacion-belgica[hidden],
.coti__opcion[hidden] {
	display: none;
}

@keyframes coti-aparecer {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.coti__pregunta {
	font-family: var(--coti-display);
	font-size: clamp(20px, 2.6vw, 28px);
	font-weight: 500;
	margin: 0 0 6px;
	outline: none;
}

.coti__ayuda {
	color: var(--coti-gris);
	font-size: 14px;
	margin: -10px 0 4px;
}

.coti__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
}

.coti__siguiente,
.coti__atras {
	font-family: var(--coti-mono);
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.06em;
	padding: 12px 22px;
	border-radius: 2px;
	cursor: pointer;
}

.coti__siguiente {
	background: var(--coti-naranja);
	color: var(--coti-negro);
	border: none;
	margin-left: auto;
}

.coti__siguiente:hover {
	opacity: 0.9;
}

.coti__atras {
	background: transparent;
	color: var(--coti-gris);
	border: 1px solid var(--coti-linea);
}

.coti__atras:hover {
	color: var(--coti-hueso);
	border-color: var(--coti-hueso);
}

/* --- Opciones tipo tarjeta (radio group accesible) --- */

.coti__opciones {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}

.coti__opciones--presupuesto {
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.coti__opcion {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--coti-carbon);
	border: 1px solid var(--coti-linea);
	border-radius: 2px;
	padding: 14px 16px;
	cursor: pointer;
	font-size: 14px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.coti__opcion input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.coti__opcion:hover {
	border-color: var(--coti-gris);
}

.coti__opcion input:checked ~ span {
	color: var(--coti-hueso);
}

.coti__opcion:has(input:checked) {
	border-color: var(--coti-naranja);
	background: rgba(255, 68, 0, 0.08);
}

.coti__opcion input:focus-visible ~ span {
	outline: 2px solid var(--coti-naranja);
	outline-offset: 3px;
}

/* --- Piezas de video (checkboxes con la misma pinta de tarjeta) ---
   Columnas fijas (no auto-fill/1fr): con pocas opciones, auto-fill
   estira la última fila de forma pareja pero deja tarjetas
   desproporcionadamente anchas frente a las de arriba. Con un número
   fijo de columnas todas las tarjetas miden lo mismo en cualquier fila. */

.coti__opciones--piezas {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
	.coti__opciones--piezas {
		grid-template-columns: repeat(3, 1fr);
	}
}

.coti__opcion--check {
	align-items: flex-start;
}

.coti__opcion-desc {
	display: block;
	margin-top: 4px;
	color: var(--coti-gris);
	font-size: 12px;
	line-height: 1.4;
	font-weight: normal;
}

/* --- Recap (pantalla de confirmación y mensaje final) --- */

.coti__recap {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 18px;
	margin: 4px 0;
	padding: 16px 18px;
	background: var(--coti-carbon);
	border: 1px solid var(--coti-linea);
	border-radius: 2px;
}

.coti__recap dt {
	font-family: var(--coti-mono);
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--coti-gris);
	white-space: nowrap;
	padding-top: 2px;
}

.coti__recap dd {
	margin: 0;
	font-size: 14px;
	color: var(--coti-hueso);
}

.coti__input--corto {
	max-width: 160px;
}

.coti__fila {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--coti-gap);
}

@media (min-width: 760px) {
	.coti__fila {
		grid-template-columns: 1fr 1fr;
	}
}

.coti__campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.coti__ubicacion,
.coti__ubicacion-belgica {
	display: flex;
	flex-direction: column;
	gap: var(--coti-gap);
}

.coti__etiqueta {
	font-family: var(--coti-mono);
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--coti-gris);
}

.coti__input {
	background: var(--coti-carbon);
	border: 1px solid var(--coti-linea);
	border-radius: 2px;
	color: var(--coti-hueso);
	font-family: var(--coti-display);
	font-size: 15px;
	padding: 12px 14px;
	width: 100%;
	box-sizing: border-box;
}

textarea.coti__input {
	resize: vertical;
	min-height: 80px;
}

.coti__input::placeholder {
	color: var(--coti-gris);
	opacity: 0.7;
}

.coti__input:focus {
	outline: none;
	border-color: var(--coti-naranja);
}

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

.coti__campo--check {
	flex-direction: row;
}

.coti__campo--check label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--coti-gris);
	line-height: 1.5;
	cursor: pointer;
}

.coti__campo--check input[type="checkbox"] {
	margin-top: 3px;
	accent-color: var(--coti-naranja);
	flex-shrink: 0;
}

.coti__campo--check a {
	color: var(--coti-hueso);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Honeypot: presente en el DOM y accesible para lectores de pantalla
   convencionales, pero fuera de la vista y sin foco por tab. Los bots
   que rellenan todos los campos por regex/nombre igual lo detectan. */
.coti__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.coti__envio {
	background: var(--coti-naranja);
	color: var(--coti-negro);
	border: none;
	border-radius: 2px;
	font-family: var(--coti-mono);
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.06em;
	padding: 14px 24px;
	cursor: pointer;
	align-self: flex-start;
}

.coti__envio:hover {
	opacity: 0.9;
}

.coti__envio:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.coti__error {
	color: var(--coti-naranja);
	font-size: 13px;
	margin: 0;
}

/* Bloquea el scroll del body mientras el popup de confirmación está
   abierto (misma convención que .bloqueado del menú hamburguesa del
   sitio, con su propio nombre para no depender de esa clase). */
body.coti-bloqueado {
	overflow: hidden;
}

.coti__ok-overlay {
	position: fixed;
	inset: 0;
	background: rgba(14, 14, 14, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--pad, clamp(18px, 4vw, 64px));
	z-index: 9999;
}

.coti__ok-overlay[hidden] {
	display: none;
}

.coti__ok {
	position: relative;
	outline: none;
	background: var(--coti-negro);
	border: 1px solid var(--coti-linea);
	max-width: 720px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	display: grid;
	grid-template-columns: 1fr;
	font-family: var(--coti-display);
}

@media (min-width: 640px) {
	.coti__ok {
		grid-template-columns: 1.2fr 1fr;
	}
}

.coti__ok-cuerpo {
	padding: clamp(24px, 4vw, 36px);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.coti__ok-acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(14px, 2vw, 22px);
}

.coti__ok-boton {
	align-self: flex-start;
}

.coti__ok-instagram {
	color: var(--coti-naranja, #FF4400);
	font-family: var(--coti-mono, "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.coti__ok-instagram:hover,
.coti__ok-instagram:focus {
	opacity: .8;
}

.coti__ok-foto {
	position: relative;
	min-height: 180px;
}

@media (min-width: 640px) {
	.coti__ok-foto {
		min-height: 100%;
	}
}

.coti__ok-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: absolute;
	inset: 0;
}

.coti__ok-cerrar {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	background: transparent;
	border: 1px solid var(--coti-linea);
	color: var(--coti-gris);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
}

.coti__ok-cerrar:hover {
	color: var(--coti-hueso);
	border-color: var(--coti-hueso);
}

.coti__ok-titulo {
	font-family: var(--coti-display);
	font-size: clamp(20px, 2.6vw, 26px);
	font-weight: 500;
	color: var(--coti-hueso);
	margin: 0 0 12px;
}

.coti__ok-titulo--grande {
	font-family: var(--coti-display);
	font-size: clamp(40px, 7vw, 64px);
	font-weight: 600;
	color: var(--coti-naranja);
	line-height: 1;
	margin: 0 0 6px;
}

.coti__ok-subtitulo {
	font-family: var(--coti-display);
	font-size: clamp(18px, 2.2vw, 22px);
	font-weight: 500;
	color: var(--coti-hueso);
	margin: 0 0 18px;
}

.coti__ok-texto {
	color: var(--coti-gris);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 14px;
}

.coti__ok-gracias {
	font-family: var(--coti-mono);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--coti-naranja);
	margin: 18px 0 0;
}