/*
 * Cotizador de arriendo — Transportes Alvimar
 *
 * ── Dirección de diseño ──
 *
 * Panel técnico, no formulario. La versión anterior era un formulario
 * administrativo: bordes grises de 1px, todo del mismo peso visual y nada que
 * dominara la pantalla. En un cotizador lo que debe dominar es el precio.
 *
 * Paleta de un solo tono: el azul corporativo. El fondo es ese mismo azul
 * llevado a valor muy bajo (#0a1826), no un gris neutro, para que todo el
 * bloque pertenezca a la misma familia que el header y el logo.
 *
 * Cuando hay un solo tono, lo que hace destacar al precio no es el color sino
 * la LUMINOSIDAD: va en blanco puro, el valor más alto de la paleta. El botón
 * de acción usa exactamente #0b60a9, el mismo azul del botón del header, para
 * que haya eco directo con la base del sitio. Los acentos y detalles usan
 * #2e91e8, el corporativo aclarado, porque el original no tiene contraste
 * suficiente sobre fondo oscuro.
 *
 * No hay un cuarto color: el verde de "sin costo adicional" se retiró y ese
 * significado lo carga la palabra. Menos colores se lee más corporativo.
 *
 * Funciona con el sitio porque el footer ya es oscuro: header claro, hero con
 * foto, cotizador oscuro, footer oscuro. Encadena en vez de interrumpir.
 *
 * Tipografía: la del sitio, Raleway en títulos y cifras y Lato en texto. No se
 * carga ninguna fuente adicional. Sin una condensada, la fuerza se consigue por
 * otra vía: peso 800, mayúsculas y tracking cerrado. El sitio ya sirve Raleway
 * y Lato en todos sus pesos, así que el 800 está disponible sin costo.
 *
 * Todo va prefijado con .alvcot: el tema trae 262 KB de CSS con selectores muy
 * genéricos y un plugin que reemplaza controles de formulario.
 */

.alvcot {
	/* ── Superficies: el azul corporativo en valores bajos ── */
	--alv-fondo:      #0a1826;
	--alv-sup:        #102336;
	--alv-sup-alta:   #172d43;
	--alv-linea:      #1f3a55;
	--alv-linea-viva: #2b5478;

	/* ── Texto ── */
	--alv-tinta:      #ffffff;
	--alv-tinta-2:    #9db4cb;
	--alv-tinta-3:    #6d879f;

	/* ── Acentos: un solo tono, el corporativo ── */
	--alv-marca:      #0b60a9;  /* el azul del botón del header */
	--alv-marca-alta: #0d74cc;  /* su estado hover */
	--alv-azul:       #2e91e8;  /* el corporativo aclarado, para leer sobre oscuro */
	--alv-azul-suave: #5cb0ef;
	--alv-rojo:       #ff7a70;

	--alv-f-tit: "Raleway", "Helvetica Neue", Arial, sans-serif;
	--alv-f-txt: "Lato", "Helvetica Neue", Arial, sans-serif;
	--alv-f-num: "Raleway", "Helvetica Neue", Arial, sans-serif;

	font-family: var(--alv-f-txt);
	font-size: 16.5px;
	line-height: 1.5;
	color: var(--alv-tinta);
	background: var(--alv-fondo);
	max-width: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	position: relative;
}
.alvcot *,
.alvcot *::before,
.alvcot *::after { box-sizing: border-box; }

/* La franja de señalización. Un solo uso, arriba, como sello del bloque. */
.alvcot::before {
	content: "";
	display: block;
	height: 6px;
	background: repeating-linear-gradient( 115deg,
		var(--alv-azul) 0 15px,
		var(--alv-fondo) 15px 30px );
}

/* ── Retícula ── */
.alvcot-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	align-items: start;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(18px, 4vw, 44px);
}
@media (min-width: 1000px) {
	.alvcot-grid {
		grid-template-columns: minmax(0, 1fr) 372px;
		gap: clamp(32px, 4vw, 64px);
	}
}

.alvcot-pasos {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(36px, 5vw, 64px) 0 clamp(36px, 5vw, 64px);
}

/* ── Pasos ── */
.alvcot-paso {
	min-width: 0;
	border: 0;
	border-top: 1px solid var(--alv-linea);
	padding: clamp(30px, 4vw, 46px) 0;
	position: relative;
}
.alvcot-paso:first-child { border-top: 0; padding-top: 0; }

.alvcot-paso__t {
	font-family: var(--alv-f-tit);
	font-size: clamp(23px, 2.9vw, 33px);
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	/* !important porque el tema colorea los h2 del contenido con !important.
	   Competir de igual a igual es más honesto que inventar un selector
	   artificialmente profundo. */
	color: var(--alv-tinta) !important;
	margin: 0 0 clamp(22px, 3vw, 32px);
	display: flex;
	align-items: baseline;
	gap: clamp(12px, 1.6vw, 20px);
	overflow-wrap: anywhere;
}

/* El número del paso: cifra grande en contorno. Encodea la secuencia real
   del proceso, y de paso da el ritmo vertical del bloque. */
.alvcot-n {
	flex: none;
	font-family: var(--alv-f-num);
	font-size: clamp(27px, 3.4vw, 38px);
	font-weight: 800;
	line-height: 0.9;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--alv-azul);
	letter-spacing: -0.03em;
}

/* ── Campos ── */
.alvcot-campos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(16px, 2vw, 26px);
	margin: 0 0 clamp(18px, 2.4vw, 28px);
}
.alvcot-campos:last-child { margin-bottom: 0; }
.alvcot-campo { margin: 0; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.alvcot-campo--ancho { grid-column: 1 / -1; }
.alvcot-campo--corto { max-width: 240px; }

.alvcot-campo label,
.alvcot-impl legend {
	font-family: var(--alv-f-txt);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--alv-tinta-2);
	padding: 0;
	margin: 0;
}
.alvcot-ayuda { font-size: 13.5px; color: var(--alv-tinta-3); line-height: 1.4; }

/* Los controles: fondo hundido y una línea inferior que se enciende al
   enfocar. Registro de instrumento, no de formulario de oficina. */
.alvcot input[type="text"],
.alvcot input[type="tel"],
.alvcot input[type="email"],
.alvcot input[type="date"],
.alvcot input[type="number"],
.alvcot select,
.alvcot textarea {
	font-family: var(--alv-f-txt);
	font-size: 16px;
	font-weight: 500;
	color: var(--alv-tinta);
	background-color: var(--alv-sup) !important;
	border: 1px solid var(--alv-linea);
	border-bottom: 2px solid var(--alv-linea-viva);
	border-radius: 0;
	padding: 13px 15px;
	width: 100%;
	line-height: 1.35;
	transition: border-color .15s ease, background-color .15s ease;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}
.alvcot input::placeholder,
.alvcot textarea::placeholder { color: var(--alv-tinta-3); opacity: 1; }

.alvcot select {
	background-image:
		linear-gradient(45deg, transparent 50%, var(--alv-tinta-2) 50%),
		linear-gradient(135deg, var(--alv-tinta-2) 50%, transparent 50%);
	background-position: calc(100% - 19px) 52%, calc(100% - 13px) 52%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 38px;
	cursor: pointer;
}
.alvcot input:hover,
.alvcot select:hover,
.alvcot textarea:hover { border-bottom-color: var(--alv-azul); }
.alvcot input:focus,
.alvcot select:focus,
.alvcot textarea:focus {
	outline: none;
	border-color: var(--alv-linea-viva);
	border-bottom-color: var(--alv-azul);
	background-color: var(--alv-sup-alta) !important;
}
.alvcot input:focus-visible,
.alvcot select:focus-visible,
.alvcot textarea:focus-visible { outline: 2px solid var(--alv-azul); outline-offset: 2px; }
.alvcot input:user-invalid,
.alvcot textarea:user-invalid { border-bottom-color: var(--alv-rojo); }

/* Fechas: el ícono nativo es oscuro sobre oscuro. */
.alvcot input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1) opacity(.55);
	cursor: pointer;
}

/* ── Casillas ── */
.alvcot input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1px solid var(--alv-linea-viva);
	background-color: var(--alv-sup);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 12px 10px;
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease;
}
.alvcot input[type="checkbox"]:hover { border-color: var(--alv-azul); }
.alvcot input[type="checkbox"]:checked {
	background-color: var(--alv-marca);
	border-color: var(--alv-marca);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5L4.2 8.2L11 1.4' stroke='%23ffffff' stroke-width='2.2' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
}
.alvcot input[type="checkbox"]:focus-visible { outline: 2px solid var(--alv-azul); outline-offset: 3px; }

.alvcot-campo--check { grid-column: 1 / -1; }
.alvcot-campo--check label {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 13px;
	align-items: center;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--alv-tinta);
	cursor: pointer;
}

/* ── Atajos de plazo ── */
.alvcot-atajos {
	display: flex;
	flex-wrap: wrap;
	min-width: 0;
	align-items: center;
	gap: 10px;
	margin: 0 0 clamp(18px, 2.4vw, 28px);
}
.alvcot-atajos__t {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--alv-tinta-3);
	margin-right: 6px;
}
.alvcot-chip {
	font-family: var(--alv-f-txt);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--alv-tinta);
	background: transparent;
	border: 1px solid var(--alv-linea-viva);
	border-radius: 0;
	padding: 8px 17px;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.alvcot-chip:hover { border-color: var(--alv-azul); color: var(--alv-azul); }
.alvcot-chip:focus-visible { outline: 2px solid var(--alv-azul); outline-offset: 2px; }
.alvcot-chip[aria-pressed="true"] {
	background: var(--alv-marca);
	border-color: var(--alv-marca);
	color: var(--alv-tinta);
}

/* ── Flota ── */
.alvcot-flota {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr));
	gap: clamp(14px, 1.8vw, 22px);
}
.alvcot-card {
	display: block;
	cursor: pointer;
	margin: 0;
	position: relative;
	min-width: 0;
}
.alvcot-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.alvcot-card__in {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	background: var(--alv-sup);
	border: 1px solid var(--alv-linea);
	transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.alvcot-card:hover .alvcot-card__in { border-color: var(--alv-linea-viva); background: var(--alv-sup-alta); }
.alvcot-card input:checked + .alvcot-card__in {
	border-color: var(--alv-azul);
	background: var(--alv-sup-alta);
}
/* Marca de selección: una barra arriba, no un halo. */
.alvcot-card input:checked + .alvcot-card__in::before {
	content: "";
	position: absolute;
	top: -1px; left: -1px; right: -1px;
	height: 4px;
	background: var(--alv-azul);
	z-index: 2;
}
.alvcot-card input:focus-visible + .alvcot-card__in { outline: 2px solid var(--alv-azul); outline-offset: 3px; }

.alvcot-card__img {
	display: block;
	width: 100%;
	height: 176px;
	object-fit: cover;
	background: var(--alv-sup-alta);
	filter: saturate(.85) contrast(1.06);
	transition: filter .25s ease;
}
.alvcot-card:hover .alvcot-card__img,
.alvcot-card input:checked + .alvcot-card__in .alvcot-card__img { filter: saturate(1) contrast(1.06); }
.alvcot-card__img--vacia {
	height: 5px;
	background: var(--alv-azul);
	filter: none;
}

.alvcot-card__cuerpo {
	padding: 18px 19px 20px;
	display: flex;
	flex-direction: column;
	gap: 13px;
	flex: 1 1 auto;
	min-width: 0;
}
.alvcot-card__t {
	color: var(--alv-tinta) !important;
	overflow-wrap: anywhere;
	font-family: var(--alv-f-tit);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--alv-tinta);
	text-wrap: balance;
}

/* Los datos del vehículo como ficha técnica: cifra arriba, rótulo abajo. */
.alvcot-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	padding: 13px 0 0;
	border-top: 1px solid var(--alv-linea);
	font-family: var(--alv-f-txt);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--alv-tinta-2);
}
.alvcot-specs span { white-space: nowrap; }
@media (max-width: 560px) {
	.alvcot-specs { gap: 6px 14px; font-size: 12px; }
}

.alvcot-estandar { display: flex; flex-wrap: wrap; gap: 5px; }
.alvcot-tag {
	overflow-wrap: anywhere;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.03em;
	color: var(--alv-azul);
	background: transparent;
	border: 1px solid var(--alv-linea-viva);
	padding: 3px 8px;
}
.alvcot-tag[hidden] { display: none; }
/* Botón y no etiqueta: despliega el resto del equipamiento. El tema pinta los
   botones a su manera, así que se reinicia todo lo que hereda. */
.alvcot-tag--mas {
	font-family: inherit;
	color: var(--alv-tinta-2);
	border-style: dashed;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
	margin: 0;
	min-height: 0;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}
.alvcot-tag--mas:hover,
.alvcot-tag--mas:focus-visible { color: var(--alv-tinta); border-color: var(--alv-azul); background: transparent; }
.alvcot-tag--mas:focus-visible { outline: 2px solid var(--alv-azul); outline-offset: 2px; }

.alvcot-aviso {
	font-family: var(--alv-f-txt);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--alv-tinta);
	background: var(--alv-marca);
	padding: 4px 9px;
	align-self: flex-start;
}

.alvcot-nada {
	margin: 18px 0 0;
	padding: 16px 18px;
	background: var(--alv-sup);
	border-left: 4px solid var(--alv-azul);
	color: var(--alv-tinta-2);
}

/* ── Implementación ── */
.alvcot-impl { border: 0; margin: clamp(6px, 1vw, 12px) 0 0; padding: 0; min-width: 0; }
.alvcot-impl__nota {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--alv-tinta);
	margin: 5px 0 14px;
}
.alvcot-impl__ops { display: flex; flex-wrap: wrap; gap: 13px 28px; min-width: 0; }
@media (max-width: 560px) {
	.alvcot-impl__ops { flex-direction: column; gap: 13px; }
	.alvcot-op > span { white-space: normal; }
}
.alvcot-op {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 11px;
	font-size: 16px;
	line-height: 1.3;
	cursor: pointer;
	margin: 0;
}
.alvcot-op > span { white-space: nowrap; }

/* ── El panel: donde manda el precio ── */
.alvcot-panel { min-width: 0; }
.alvcot-panel__in { min-width: 0; }
@media (min-width: 1000px) {
	.alvcot-panel__in { position: sticky; top: 28px; }
	.alvcot-panel { padding: clamp(36px, 5vw, 64px) 0 0; }
}
@media (max-width: 999px) {
	.alvcot-panel { order: 2; padding: 0 0 clamp(36px, 5vw, 56px); }
}

.alvcot-panel__in {
	background: var(--alv-sup);
	border: 1px solid var(--alv-linea);
	border-top: 4px solid var(--alv-azul);
	padding: clamp(22px, 2.6vw, 30px);
}
.alvcot-panel__et {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--alv-tinta-3);
	margin: 0 0 10px;
}

.alvcot-detalle { margin: 0 0 22px; font-size: 15px; border-top: 1px solid var(--alv-linea); }
.alvcot-linea[hidden] { display: none; }
.alvcot-linea {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--alv-linea);
}
.alvcot-linea dt { color: var(--alv-tinta-2); margin: 0; }
.alvcot-linea dd {
	margin: 0;
	font-family: var(--alv-f-txt);
	font-size: 15px;
	font-weight: 700;
	text-align: right;
	color: var(--alv-tinta);
}


.alvcot-error {
	font-size: 14.5px;
	color: var(--alv-rojo);
	background: rgba(255, 107, 94, .1);
	border-left: 3px solid var(--alv-rojo);
	padding: 12px 14px;
	margin: 0 0 18px;
}

.alvcot a { text-decoration: none; }

/* ── Botones ── */
.alvcot-acciones { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; }
.alvcot-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--alv-f-txt);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	padding: 16px 22px;
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.alvcot-btn:focus-visible { outline: 2px solid var(--alv-azul); outline-offset: 3px; }
.alvcot-btn--pri {
	background: var(--alv-marca);
	color: var(--alv-tinta) !important;
}
.alvcot-btn--pri:hover { background: var(--alv-marca-alta); color: var(--alv-tinta) !important; }
.alvcot-btn--pri:disabled { background: var(--alv-linea-viva); color: var(--alv-tinta-3); cursor: not-allowed; }
.alvcot-btn--wa {
	background: transparent;
	color: var(--alv-tinta) !important;
	border-color: var(--alv-linea-viva);
}
.alvcot-btn--wa:hover {
	border-color: var(--alv-azul);
	color: var(--alv-azul) !important;
	background: var(--alv-sup-alta);
}

.alvcot-descargo { font-size: 13px; line-height: 1.45; color: var(--alv-tinta-3); margin: 0 0 18px; }
.alvcot-incluye {
	list-style: none;
	margin: 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--alv-linea);
	font-size: 13.5px;
	color: var(--alv-tinta-2);
}
.alvcot-incluye li { margin: 0 0 6px; padding-left: 18px; position: relative; }
.alvcot-incluye li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .6em;
	width: 9px;
	height: 2px;
	background: var(--alv-azul);
}

/* ── Confirmación y vacío ── */
.alvcot-listo,
.alvcot-vacio {
	max-width: 620px;
	margin: 0 auto;
	background: var(--alv-sup);
	border: 1px solid var(--alv-linea);
	border-top: 4px solid var(--alv-azul);
	padding: clamp(34px, 5vw, 54px) clamp(24px, 4vw, 44px);
	text-align: center;
}
.alvcot-listo { margin: clamp(36px, 5vw, 64px) auto; }
.alvcot-vacio { margin: clamp(36px, 5vw, 64px) auto; }
.alvcot-listo h2,
.alvcot-vacio h2 {
	color: var(--alv-tinta) !important;
	font-family: var(--alv-f-tit);
	font-size: clamp(24px, 3.2vw, 34px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	margin: 0 0 12px;
	color: var(--alv-tinta);
}
.alvcot-listo p,
.alvcot-vacio p { margin: 0 auto 24px; max-width: 44ch; color: var(--alv-tinta-2); }
.alvcot-listo .alvcot-btn,
.alvcot-vacio .alvcot-btn { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
	.alvcot *,
	.alvcot *::before { transition: none !important; animation: none !important; }
}