.av-root {
		--av-bg: #f2e5d6;
		--av-ink: #2f1e05;
		--av-green: #4e4821;
		--av-green-2: #66602b;
		--av-brown: #816336;
		--av-gold: #b88542;
		--av-sand: #d8c5ab;
		--av-card: #e9dac8;
		--av-line: rgba(47, 30, 5, 0.12);
		--av-ease: cubic-bezier(0.16, 1, 0.3, 1);
		--av-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
	}

	.av-dialog,
	.av-dialog * {
		box-sizing: border-box;
	}

	/* Iconografía Lucide (ISC): trazo de 2 en un lienzo de 24. */
	.av-dialog svg {
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.av-icon {
		width: 16px;
		height: 16px;
		flex: 0 0 auto;
	}

	.av-dialog {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		margin: 0;
		padding: clamp(12px, 3vw, 34px);
		border: 0;
		background: transparent;
		overflow: hidden;
		display: grid;
		place-items: center;
		color: var(--av-ink);
		font-family: "Instrument Sans", system-ui, sans-serif;
	}

	.av-dialog:not([open]) {
		display: none;
	}

	.av-dialog::backdrop {
		background: rgba(30, 20, 6, 0.46);
		backdrop-filter: blur(7px) saturate(118%);
		-webkit-backdrop-filter: blur(7px) saturate(118%);
		opacity: 0;
		transition: opacity 0.7s var(--av-ease);
	}

	.av-dialog[data-open]::backdrop {
		opacity: 1;
	}

	.av-dialog[data-closing]::backdrop {
		opacity: 0;
		transition-duration: 0.52s;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* Panel y animación de entrada */

	.av-panel {
		position: relative;
		width: min(1020px, 100%);
		max-height: 100%;
		display: flex;
		align-items: stretch;
		background: var(--av-bg);
		border-radius: clamp(20px, 2.4vw, 30px);
		overflow: hidden;
		outline: none;
		box-shadow:
			0 2px 6px rgba(31, 21, 6, 0.08),
			0 30px 70px -28px rgba(31, 21, 6, 0.55),
			0 60px 120px -60px rgba(31, 21, 6, 0.6);
		opacity: 0;
		will-change: transform, opacity, filter;
	}

	.av-dialog[data-success] .av-panel {
		width: min(620px, 100%);
		height: auto;
		max-height: calc(100dvh - 32px);
		flex-direction: column;
		border-radius: clamp(20px, 2.4vw, 28px);
	}

	.av-dialog[data-success] .av-aside,
	.av-dialog[data-success] .av-form {
		display: none;
	}

	.av-dialog[data-success] .av-close {
		border-color: transparent;
		background: transparent;
		opacity: 0.62;
	}

	.av-dialog[data-success] .av-close:hover {
		background: rgba(233, 218, 200, 0.72);
		opacity: 1;
	}

	/*
	 * Entrada en tres tiempos: el panel sube y enfoca, después entran los bloques
	 * escalonados y al final la ilustración. La salida arranca con una pequeña
	 * anticipación hacia arriba antes de caer, para que no se sienta un corte seco.
	 */
	.av-dialog[data-open] .av-panel {
		animation: avPanelIn 0.98s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	.av-dialog[data-closing] .av-panel {
		animation: avPanelOut 0.58s cubic-bezier(0.4, 0, 0.2, 1) both;
	}

	@keyframes avPanelIn {
		0% {
			opacity: 0;
			transform: translate3d(0, 54px, 0) scale(0.925);
			filter: blur(12px);
		}
		48% {
			opacity: 1;
		}
		100% {
			opacity: 1;
			transform: none;
			filter: blur(0);
		}
	}

	@keyframes avPanelOut {
		0% {
			opacity: 1;
			transform: none;
			filter: blur(0);
		}
		22% {
			opacity: 1;
			transform: translate3d(0, -9px, 0) scale(1.014);
			filter: blur(0);
		}
		100% {
			opacity: 0;
			transform: translate3d(0, 42px, 0) scale(0.945);
			filter: blur(9px);
		}
	}

	/*
	 * El escalonado va por animación, no por transición: así no choca con las
	 * transiciones propias de cada bloque (color del teléfono, bloqueo de pasos).
	 * Con fill "backwards" el elemento queda oculto durante su retardo y al
	 * terminar devuelve el control a la hoja de estilos.
	 */
	.av-dialog:not([data-open]):not([data-closing]) .av-reveal {
		opacity: 0;
		transform: translate3d(0, 22px, 0);
	}

	.av-dialog[data-open] .av-reveal {
		animation: avRise 0.82s var(--av-ease) backwards;
		animation-delay: calc(180ms + var(--d, 0) * 70ms);
	}

	@keyframes avRise {
		from {
			opacity: 0;
			transform: translate3d(0, 22px, 0);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	/* Botón de cierre */

	.av-close {
		position: absolute;
		top: 14px;
		right: 14px;
		z-index: 5;
		width: 42px;
		height: 42px;
		display: grid;
		place-items: center;
		border: 1px solid var(--av-line);
		border-radius: 999px;
		background: rgba(242, 229, 214, 0.82);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		color: var(--av-ink);
		cursor: pointer;
		transition:
			background 0.35s var(--av-ease),
			transform 0.45s var(--av-spring),
			border-color 0.35s var(--av-ease);
	}

	.av-close svg {
		width: 17px;
		height: 17px;
		stroke-width: 1.8;
	}

	.av-close:hover {
		background: var(--av-card);
		border-color: rgba(47, 30, 5, 0.24);
		transform: rotate(90deg);
	}

	/* Columna ilustrada */

	.av-aside {
		position: relative;
		flex: 0 0 43%;
		min-width: 0;
		display: grid;
		grid-template-rows: auto minmax(0, 1fr);
		padding: 0;
		background: linear-gradient(180deg, #f8f1e7 0%, #f1e5d6 52%, #e9dac8 100%);
		border-right: 1px solid var(--av-line);
		color: var(--av-ink);
		overflow: hidden;
	}

	.av-aside__glow {
		position: absolute;
		top: -20%;
		right: -24%;
		width: 82%;
		aspect-ratio: 1;
		border-radius: 999px;
		background: radial-gradient(circle, rgba(184, 133, 66, 0.16) 0%, rgba(184, 133, 66, 0) 70%);
		pointer-events: none;
	}

	.av-illus {
		position: relative;
		min-height: 170px;
		min-width: 0;
		margin: 0;
		padding: 0 clamp(14px, 1.8vw, 22px);
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}

	.av-illus[hidden] {
		display: none;
	}

	.av-illus__img {
		width: min(100%, 310px);
		height: 100%;
		object-fit: contain;
		object-position: center bottom;
		display: block;
	}

	.av-aside__copy {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 11px;
		padding: clamp(24px, 2.8vw, 32px) clamp(22px, 2.8vw, 32px) 6px;
	}

	.av-eyebrow {
		margin: 0;
		font-size: 0.6875rem;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--av-brown);
	}

	.av-aside__title {
		margin: 0;
		font-size: clamp(1.5rem, 2.1vw, 1.95rem);
		font-weight: 500;
		line-height: 1.08;
		letter-spacing: -0.02em;
		color: var(--av-ink);
	}

	.av-aside__title em {
		font-family: Lora, Georgia, serif;
		font-style: italic;
		font-weight: 400;
		color: var(--av-brown);
	}

	.av-aside__text {
		margin: 0;
		font-size: 0.9062rem;
		line-height: 1.55;
		color: var(--av-green);
		max-width: 32ch;
	}

	.av-points {
		margin: 1px 0 0;
		padding: 0;
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 7px;
	}

	.av-points li {
		display: flex;
		align-items: flex-start;
		gap: 9px;
		font-size: 0.875rem;
		line-height: 1.4;
		color: var(--av-green);
	}

	.av-points__icon {
		margin-top: 1px;
		color: var(--av-gold);
		stroke-width: 2.6;
	}

	.av-aside__phone {
		display: flex;
		align-items: center;
		gap: 11px;
		margin-top: 4px;
		padding-top: 16px;
		border-top: 1px solid rgba(47, 30, 5, 0.14);
		color: var(--av-brown);
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		text-decoration: none;
		transition: color 0.35s var(--av-ease);
	}

	.av-aside__phoneIcon {
		width: 18px;
		height: 18px;
		stroke-width: 1.8;
		color: var(--av-brown);
		transition: color 0.35s var(--av-ease);
	}

	.av-aside__phoneText {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.av-aside__phone strong {
		font-size: 1.0625rem;
		font-weight: 500;
		letter-spacing: 0;
		color: var(--av-ink);
		transition: color 0.35s var(--av-ease);
	}

	.av-aside__phone:hover,
	.av-aside__phone:hover strong {
		color: var(--av-brown);
	}

	/* Columna del formulario */

	.av-main {
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		min-height: 0;
		display: flex;
		flex-direction: column;
		background: var(--av-bg);
	}

	.av-form {
		display: flex;
		flex-direction: column;
		min-height: 0;
		flex: 1;
	}

	.av-scroll {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: clamp(26px, 3vw, 36px) clamp(22px, 3vw, 36px) 20px;
		scrollbar-width: thin;
		scrollbar-color: var(--av-sand) transparent;
	}

	.av-scroll::-webkit-scrollbar {
		width: 8px;
	}

	.av-scroll::-webkit-scrollbar-thumb {
		background: var(--av-sand);
		border-radius: 999px;
	}

	.av-steps {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 0 24px;
		padding: 0;
		list-style: none;
		font-size: 0.75rem;
		color: rgba(47, 30, 5, 0.42);
	}

	.av-steps li {
		display: flex;
		align-items: center;
		gap: 7px;
		transition: color 0.45s var(--av-ease);
	}

	.av-steps li + li::before {
		content: "";
		width: 22px;
		height: 1px;
		margin-right: 3px;
		background: var(--av-line);
	}

	.av-steps li span {
		width: 21px;
		height: 21px;
		display: grid;
		place-items: center;
		border-radius: 999px;
		border: 1px solid var(--av-line);
		font-size: 0.6875rem;
		transition:
			background 0.45s var(--av-ease),
			border-color 0.45s var(--av-ease),
			color 0.45s var(--av-ease),
			transform 0.5s var(--av-spring);
	}

	.av-steps li.is-active {
		color: var(--av-ink);
	}

	.av-steps li.is-active span {
		background: var(--av-green);
		border-color: var(--av-green);
		color: var(--av-bg);
		transform: scale(1.08);
	}

	.av-steps li.is-done span {
		background: var(--av-card);
		border-color: var(--av-sand);
		color: var(--av-brown);
	}

	/* El bloqueo usa filter (no opacity) para no pelearse con la animación de entrada. */
	.av-block {
		transition: filter 0.55s var(--av-ease);
	}

	.av-block + .av-block {
		margin-top: 26px;
		padding-top: 24px;
		border-top: 1px solid var(--av-line);
	}

	.av-block[data-locked] {
		filter: opacity(0.42) saturate(0.5);
		pointer-events: none;
	}

	.av-mobile-viewport,
	.av-mobile-track {
		display: contents;
	}

	.av-mobile-back {
		display: none;
	}

	.av-block__title {
		display: flex;
		align-items: baseline;
		gap: 10px;
		flex-wrap: wrap;
		margin: 0 0 16px;
		font-size: 1.0625rem;
		font-weight: 500;
		letter-spacing: -0.01em;
		color: var(--av-ink);
	}

	.av-block__title:focus {
		outline: none;
	}

	.av-hint {
		font-size: 0.75rem;
		font-weight: 400;
		color: var(--av-brown);
	}

	/* Calendario */

	.av-cal {
		background: var(--av-card);
		border: 1px solid rgba(47, 30, 5, 0.07);
		border-radius: 20px;
		padding: 14px;
	}

	.av-cal__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 2px 2px 12px;
	}

	.av-cal__month {
		margin: 0;
		font-size: 0.9688rem;
		font-weight: 500;
		text-transform: capitalize;
		letter-spacing: -0.01em;
	}

	.av-nav {
		width: 34px;
		height: 34px;
		display: grid;
		place-items: center;
		border: 1px solid rgba(47, 30, 5, 0.14);
		border-radius: 999px;
		background: transparent;
		color: var(--av-ink);
		cursor: pointer;
		transition:
			background 0.35s var(--av-ease),
			border-color 0.35s var(--av-ease),
			opacity 0.35s var(--av-ease);
	}

	.av-nav svg {
		width: 16px;
		height: 16px;
		stroke-width: 1.9;
	}

	.av-nav:hover:not(:disabled) {
		background: var(--av-bg);
		border-color: rgba(47, 30, 5, 0.28);
	}

	.av-nav:disabled {
		opacity: 0.28;
		cursor: default;
	}

	.av-cal__dows {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 4px;
		padding-bottom: 6px;
	}

	.av-cal__dows span {
		text-align: center;
		font-size: 0.6875rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--av-brown);
	}

	.av-cal__grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 4px;
	}

	.av-cal__grid[data-anim="next"] {
		animation: avSlideNext 0.42s var(--av-ease);
	}

	.av-cal__grid[data-anim="prev"] {
		animation: avSlidePrev 0.42s var(--av-ease);
	}

	@keyframes avSlideNext {
		from {
			opacity: 0;
			transform: translateX(16px);
		}
	}

	@keyframes avSlidePrev {
		from {
			opacity: 0;
			transform: translateX(-16px);
		}
	}

	.av-cal__row {
		display: contents;
	}

	.av-day {
		position: relative;
		aspect-ratio: 1 / 0.92;
		display: grid;
		place-items: center;
		border: 0;
		border-radius: 13px;
		background: transparent;
		font-family: inherit;
		font-size: 0.9062rem;
		color: var(--av-ink);
		cursor: pointer;
		transition: color 0.3s var(--av-ease);
	}

	.av-day::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 13px;
		background: var(--av-green);
		transform: scale(0.45);
		opacity: 0;
		transition:
			transform 0.5s var(--av-spring),
			opacity 0.28s var(--av-ease);
	}

	.av-day span {
		position: relative;
		z-index: 1;
	}

	.av-day:hover:not(:disabled)::before {
		background: rgba(47, 30, 5, 0.07);
		transform: scale(1);
		opacity: 1;
	}

	.av-day[aria-selected="true"]::before,
	.av-day[aria-selected="true"]:hover::before {
		background: var(--av-green);
		transform: scale(1);
		opacity: 1;
	}

	.av-day[aria-selected="true"] {
		color: var(--av-bg);
		font-weight: 500;
	}

	.av-day[data-today] span::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -7px;
		width: 4px;
		height: 4px;
		border-radius: 999px;
		background: var(--av-gold);
		transform: translateX(-50%);
	}

	.av-day[aria-selected="true"][data-today] span::after {
		background: var(--av-bg);
	}

	.av-day:disabled {
		color: rgba(47, 30, 5, 0.24);
		cursor: default;
	}

	.av-day__empty {
		aspect-ratio: 1 / 0.92;
	}

	/* Horarios */

	.av-slots {
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	.av-slot__label {
		margin: 0 0 9px;
		font-size: 0.6875rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--av-brown);
	}

	.av-slot__grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
		gap: 8px;
	}

	.av-time {
		position: relative;
		padding: 11px 6px;
		border: 1px solid rgba(47, 30, 5, 0.14);
		border-radius: 999px;
		background: transparent;
		font-family: inherit;
		font-size: 0.875rem;
		color: var(--av-ink);
		cursor: pointer;
		overflow: hidden;
		transition:
			color 0.3s var(--av-ease),
			border-color 0.4s var(--av-ease),
			transform 0.45s var(--av-spring);
	}

	.av-time::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--av-green);
		transform: scale(0.5);
		opacity: 0;
		border-radius: inherit;
		transition:
			transform 0.5s var(--av-spring),
			opacity 0.28s var(--av-ease);
	}

	.av-time span {
		position: relative;
		z-index: 1;
	}

	.av-time:hover {
		border-color: var(--av-brown);
		transform: translateY(-1px);
	}

	.av-time[aria-pressed="true"] {
		color: var(--av-bg);
		border-color: var(--av-green);
	}

	.av-time[aria-pressed="true"]::before {
		transform: scale(1);
		opacity: 1;
	}

	/* Campos */

	.av-fields {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
		gap: 14px;
	}

	.av-field {
		display: flex;
		flex-direction: column;
		gap: 7px;
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--av-brown);
	}

	.av-field input {
		width: 100%;
		padding: 13px 16px;
		border: 1px solid rgba(47, 30, 5, 0.14);
		border-radius: 14px;
		background: #fbf5ec;
		font-family: inherit;
		font-size: 1rem;
		letter-spacing: 0;
		text-transform: none;
		color: var(--av-ink);
		transition:
			border-color 0.35s var(--av-ease),
			box-shadow 0.35s var(--av-ease),
			background 0.35s var(--av-ease);
	}

	.av-field input::placeholder {
		color: rgba(47, 30, 5, 0.3);
	}

	.av-field input:focus {
		outline: none;
		border-color: var(--av-gold);
		box-shadow: 0 0 0 4px rgba(184, 133, 66, 0.16);
		background: #fff;
	}

	.av-field[data-invalid] input {
		border-color: #a4462f;
		box-shadow: 0 0 0 4px rgba(164, 70, 47, 0.12);
	}

	.av-error {
		font-size: 0.75rem;
		font-style: normal;
		letter-spacing: 0;
		text-transform: none;
		color: #a4462f;
	}

	/* Pie con resumen */

	.av-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		flex-wrap: wrap;
		padding: 16px clamp(22px, 3vw, 36px);
		border-top: 1px solid var(--av-line);
		background: rgba(242, 229, 214, 0.92);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}

	.av-submit-error {
		flex: 0 0 100%;
		margin: 0;
		font-size: 0.8125rem;
		line-height: 1.4;
		color: #a4462f;
	}

	.av-submit-error:empty {
		display: none;
	}

	.av-privacy-note {
		flex: 0 0 100%;
		margin: 0;
		font-size: 0.75rem;
		line-height: 1.4;
		color: var(--av-brown);
	}

	.av-privacy-note a {
		color: inherit;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	.av-privacy-note a:hover {
		color: var(--av-ink);
	}

	.av-summary {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.av-summary__label {
		font-size: 0.6875rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--av-brown);
	}

	.av-summary__value {
		font-size: 0.9688rem;
		font-weight: 500;
		color: var(--av-ink);
		transition:
			opacity 0.3s var(--av-ease),
			transform 0.4s var(--av-ease);
	}

	.av-summary__value[data-swap] {
		opacity: 0;
		transform: translateY(6px);
	}

	.av-submit {
		display: inline-flex;
		align-items: center;
		gap: 9px;
		padding: 15px 24px;
		border: 0;
		border-radius: 999px;
		background: var(--av-green);
		color: var(--av-bg);
		font-family: inherit;
		font-size: 0.9375rem;
		font-weight: 500;
		cursor: pointer;
		transition:
			background 0.35s var(--av-ease),
			transform 0.45s var(--av-spring),
			opacity 0.35s var(--av-ease),
			box-shadow 0.45s var(--av-ease);
	}

	.av-submit svg {
		width: 17px;
		height: 17px;
		stroke-width: 1.9;
		transition: transform 0.4s var(--av-ease);
	}

	.av-submit__spinner {
		animation: avSpin 0.7s linear infinite;
	}

	.av-submit__spinner[hidden] {
		display: none;
	}

	@keyframes avSpin {
		to {
			transform: rotate(360deg);
		}
	}

	.av-submit:hover:not(:disabled) {
		background: var(--av-green-2);
		box-shadow: 0 12px 26px -14px rgba(47, 30, 5, 0.7);
	}

	.av-submit:hover:not(:disabled) svg {
		transform: translateX(4px);
	}

	.av-submit:disabled {
		opacity: 0.42;
		cursor: default;
	}

	/* Confirmación */

	.av-success {
		position: relative;
		z-index: 4;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 14px;
		width: 100%;
		max-height: calc(100dvh - 32px);
		overflow-y: auto;
		padding: clamp(26px, 4vw, 38px) clamp(24px, 5vw, 48px) clamp(30px, 4vw, 40px);
		text-align: center;
		background:
			radial-gradient(circle at 50% 12%, rgba(184, 133, 66, 0.11), transparent 38%),
			var(--av-bg);
		animation: avSuccessIn 0.6s var(--av-ease) both;
	}

	.av-success[hidden] {
		display: none;
	}

	@keyframes avSuccessIn {
		from {
			opacity: 0;
			transform: translateY(14px);
		}
	}

	.av-success__illustration {
		display: block;
		width: auto;
		height: clamp(190px, 28vh, 232px);
		max-width: min(100%, 240px);
		object-fit: contain;
	}

	.av-success h3 {
		margin: 2px 0 0;
		font-size: clamp(1.55rem, 4vw, 1.9rem);
		font-weight: 500;
		line-height: 1.12;
		letter-spacing: -0.02em;
	}

	.av-success__when {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		width: min(100%, 360px);
		padding: 13px 20px;
		border: 1px solid rgba(47, 30, 5, 0.1);
		border-radius: 16px;
		background: rgba(233, 218, 200, 0.58);
	}

	.av-success__when strong {
		font-size: 1rem;
		font-weight: 500;
		line-height: 1.35;
		color: var(--av-ink);
	}

	.av-success__when span {
		font-size: 1.125rem;
		font-weight: 600;
		line-height: 1.3;
		color: var(--av-green);
	}

	.av-success__note {
		margin: 0;
		font-size: 0.9375rem;
		line-height: 1.55;
		color: var(--av-green);
		max-width: 44ch;
	}

	.av-success__close {
		min-width: 148px;
		margin-top: 4px;
		padding: 13px 28px;
		border: 1px solid var(--av-green);
		border-radius: 999px;
		background: var(--av-green);
		font-family: inherit;
		font-size: 0.9375rem;
		font-weight: 500;
		color: var(--av-bg);
		cursor: pointer;
		transition:
			background 0.35s var(--av-ease),
			transform 0.35s var(--av-ease);
	}

	.av-success__close:hover {
		background: var(--av-green-2);
		transform: translateY(-2px);
	}

	/* Responsive */

	@media (max-width: 900px) {
		.av-panel {
			width: 100%;
			max-height: 100%;
			flex-direction: column;
		}

		.av-aside {
			flex: 0 0 auto;
		}

		.av-aside {
			grid-template-rows: none;
			grid-template-columns: minmax(0, 112px) minmax(0, 1fr);
			align-items: center;
			gap: 14px;
			border-right: 0;
			border-bottom: 1px solid var(--av-line);
			background: var(--av-bg);
		}

		/* En horizontal la ilustración vuelve a la izquierda, lejos del botón de cierre. */
		.av-illus {
			grid-area: 1 / 1;
			min-height: 0;
			padding: 10px 0 10px 16px;
		}

		.av-illus__img {
			width: 100%;
			height: auto;
			max-height: 138px;
			object-position: center center;
		}

		.av-aside__copy {
			grid-area: 1 / 2;
			gap: 6px;
			padding: 16px 52px 16px 0;
		}

		.av-aside__text,
		.av-points,
		.av-aside__phone {
			display: none;
		}
	}

	@media (max-width: 520px) {
		.av-dialog {
			padding: 0;
		}

		.av-panel {
			height: 100dvh;
			max-height: 100dvh;
			border-radius: 0;
		}

		.av-aside {
			/* A pedido del usuario: mismo color plano que el body del modal, sin degradado. */
			background: var(--av-bg);
			border-bottom: 1px solid rgba(47, 30, 5, 0.08);
		}

		.av-aside__glow {
			display: none;
		}

		.av-aside__copy {
			padding-right: 48px;
		}

		.av-aside__title {
			font-size: clamp(1.22rem, 4.2vw, 1.42rem);
			line-height: 1.08;
		}

		.av-eyebrow {
			font-size: 0.66rem;
			letter-spacing: 0.15em;
			opacity: 0.95;
		}

		.av-main,
		.av-form {
			min-height: 0;
			overflow: hidden;
		}

		.av-scroll {
			display: flex;
			flex-direction: column;
			padding: 14px 14px 0;
			overflow: hidden;
			gap: 0;
		}

		.av-steps {
			flex: 0 0 auto;
			justify-content: center;
			gap: 7px;
			margin-bottom: 14px;
			font-size: 0.7188rem;
		}

		.av-steps li {
			gap: 6px;
		}

		.av-steps li + li::before {
			width: 14px;
			margin-right: 1px;
		}

		.av-steps li span {
			width: 20px;
			height: 20px;
		}

		.av-mobile-viewport {
			display: block;
			flex: 1 1 auto;
			min-height: 0;
			overflow: hidden;
			/* Sin padding: overflow:hidden recorta por el borde de la caja
			   (el padding queda DENTRO del área visible), así que un padding
			   aquí no protege nada -- solo dejaba asomar 2px del panel
			   inactivo. El respiro visual ya lo da .av-scroll. */
			padding: 0;
		}

		.av-mobile-track {
			display: flex;
			width: 300%;
			height: 100%;
			transform: translate3d(0, 0, 0);
			transition: transform 0.64s cubic-bezier(0.76, 0, 0.24, 1);
			will-change: transform;
		}

		.av-form[data-av-mobile-step="2"] .av-mobile-track {
			transform: translate3d(-33.333333%, 0, 0);
		}

		.av-form[data-av-mobile-step="3"] .av-mobile-track {
			transform: translate3d(-66.666667%, 0, 0);
		}

		.av-mobile-track > .av-block {
			flex: 0 0 33.333333%;
			width: 33.333333%;
			height: 100%;
			min-width: 0;
			margin: 0;
			padding: 4px 8px 20px;
			border: 0;
			overflow-x: hidden;
			overflow-y: auto;
			overscroll-behavior: contain;
			scrollbar-width: none;
			/* Sin transform en el reposo: un panel inactivo con un offset de
			   posición no coincide exactamente con el ancho del viewport y
			   se alcanza a ver una rendija/borde del panel de al lado. Con
			   transform:none más .av-mobile-viewport sin padding, el borde
			   del panel inactivo cae justo en el límite de recorte -- cero
			   rendija. */
			opacity: 0.72;
			transition: opacity 0.44s cubic-bezier(0.16, 1, 0.3, 1);
		}

		.av-form[data-av-mobile-step="1"] .av-mobile-track > [data-av-mobile-panel="1"],
		.av-form[data-av-mobile-step="2"] .av-mobile-track > [data-av-mobile-panel="2"],
		.av-form[data-av-mobile-step="3"] .av-mobile-track > [data-av-mobile-panel="3"] {
			opacity: 1;
			transform: none;
		}

		.av-mobile-track > .av-block::-webkit-scrollbar {
			display: none;
		}

		/* Paso 1 (fecha): celdas más grandes que el tamaño original (basado en
		   aspect-ratio, ~38px, muy apretado), pero con una altura fija en vez
		   de estirarse a llenar todo el panel -- eso se veía demasiado alto.
		   grid-auto-rows fijo en vez de 1fr: un mes de 5 semanas no debe verse
		   más "inflado" que uno de 6 solo por tener una fila menos. */
		.av-mobile-track > [data-av-mobile-panel="1"] {
			display: flex;
			flex-direction: column;
		}

		.av-cal {
			display: flex;
			flex-direction: column;
			min-height: 0;
		}

		.av-cal__grid {
			grid-auto-rows: 52px;
		}

		.av-day,
		.av-day__empty {
			aspect-ratio: auto;
		}

		.av-block__title {
			margin-bottom: 16px;
			font-size: 1.14rem;
			font-weight: 550;
			letter-spacing: -0.015em;
			line-height: 1.25;
		}

		.av-block__title .av-hint {
			font-weight: 400;
			letter-spacing: 0;
		}

		.av-cal {
			border-radius: 16px;
			padding: 10px;
			background: #fdf8ef;
			border-color: rgba(47, 30, 5, 0.06);
		}

		.av-slot__label {
			margin-bottom: 10px;
			font-size: 0.68rem;
		}

		.av-slot__grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 8px;
		}

		.av-time {
			min-height: 46px;
			padding: 11px 6px;
			font-size: 0.875rem;
			font-weight: 500;
			background: #fffdf9;
		}

		.av-fields {
			grid-template-columns: 1fr;
			gap: 15px;
		}

		.av-field {
			gap: 6px;
		}

		.av-field > span {
			font-size: 0.7rem;
			letter-spacing: 0.07em;
		}

		.av-field input {
			min-height: 52px;
			padding: 14px 16px;
			border-radius: 14px;
			background: #fffdf9;
			font-size: 0.98rem;
		}

		.av-mobile-back {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			width: 100%;
			min-height: 46px;
			margin: 18px 0 2px;
			padding: 11px 16px;
			border: 1px solid rgba(47, 30, 5, 0.13);
			border-radius: 999px;
			background: rgba(247, 239, 228, 0.62);
			font-family: inherit;
			font-size: 0.875rem;
			font-weight: 500;
			color: var(--av-green);
			cursor: pointer;
			transition:
				background 0.32s var(--av-ease),
				border-color 0.32s var(--av-ease),
				transform 0.32s var(--av-spring);
		}

		.av-mobile-back:active {
			transform: scale(0.98);
		}

		.av-mobile-back .av-icon {
			width: 17px;
			height: 17px;
		}

		.av-dialog[data-success] {
			padding: 16px;
		}

		.av-dialog[data-success] .av-panel {
			width: 100%;
			height: auto;
			border-radius: 22px;
		}

		.av-success {
			padding: 24px 20px 28px;
		}

		.av-success__illustration {
			height: clamp(164px, 27vh, 205px);
		}

		/* El desenfoque de un panel a pantalla completa es caro en móvil. */
		@keyframes avPanelIn {
			0% {
				opacity: 0;
				transform: translate3d(0, 54px, 0) scale(0.94);
			}
			48% {
				opacity: 1;
			}
			100% {
				opacity: 1;
				transform: none;
			}
		}

		@keyframes avPanelOut {
			0% {
				opacity: 1;
				transform: none;
			}
			22% {
				opacity: 1;
				transform: translate3d(0, -9px, 0) scale(1.01);
			}
			100% {
				opacity: 0;
				transform: translate3d(0, 42px, 0) scale(0.96);
			}
		}

		.av-form:not([data-av-mobile-step="3"]) .av-footer {
			display: none;
		}

		.av-footer {
			/* La regla base (fuera de este media query) trae flex-wrap: wrap.
			   Con flex-direction: column y wrap activo, si el contenido no cabe
			   en la altura disponible Flexbox abre una COLUMNA NUEVA a la derecha
			   en vez de desbordar hacia abajo -- así se perdía el botón de
			   confirmar, empujado fuera de la pantalla. flex-shrink: 0 evita
			   además que el footer se comprima cuando el teclado reduce el alto
			   visible; lo que debe encogerse es .av-scroll, no el footer. */
			flex-direction: column;
			flex-wrap: nowrap;
			flex-shrink: 0;
			align-items: stretch;
			gap: 12px;
			padding: 16px 14px max(20px, calc(env(safe-area-inset-bottom) + 10px));
			background: rgba(247, 239, 228, 0.96);
			border-top: 1px solid rgba(47, 30, 5, 0.08);
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			animation: avMobileFooterIn 0.44s cubic-bezier(0.16, 1, 0.3, 1) 0.18s backwards;
		}

		@keyframes avMobileFooterIn {
			from {
				opacity: 0;
				transform: translateY(10px);
			}
		}

		.av-summary {
			order: 0;
			gap: 4px;
			padding: 9px 14px;
			border: 1px solid rgba(47, 30, 5, 0.07);
			border-radius: 14px;
			background: #fffdf9;
			box-shadow: 0 1px 6px rgba(47, 30, 5, 0.06);
		}

		.av-summary__value {
			font-size: 0.94rem;
		}

		.av-submit-error {
			/* La regla base trae flex: 0 0 100% pensado para fila con wrap
			   (100% = ancho de una fila propia). Con flex-direction: column
			   ese 100% pasa a leerse como alto, inflando el bloque a la
			   altura completa del footer y empujando el botón fuera de la
			   pantalla. Aquí vuelve a ser "alto según contenido". */
			order: 1;
			flex: 0 1 auto;
			margin: 0;
			padding: 0 2px;
		}

		.av-privacy-note {
			order: 2;
			flex: 0 1 auto;
			margin: 0;
			padding: 0 2px;
			font-size: 0.75rem;
			line-height: 1.35;
			color: rgba(47, 30, 5, 0.62);
		}

		.av-privacy-note a {
			font-weight: 500;
			text-underline-offset: 3px;
		}

		.av-submit {
			order: 3;
			width: 100%;
			min-height: 54px;
			justify-content: center;
			font-size: 0.98rem;
			letter-spacing: 0.01em;
			box-shadow: 0 8px 22px -12px rgba(47, 30, 5, 0.45);
		}

		.av-submit:active {
			transform: scale(0.99);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.av-dialog *,
		.av-dialog *::before,
		.av-dialog::backdrop {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			transition-delay: 0ms !important;
		}

		.av-panel {
			filter: none;
			transform: none;
		}
	}