/* =========================================================================
   /agendar 2.7.0 — una pregunta por pantalla (clases ag-*)
   Escenario oscuro con el aura azul y los garabatos de la marca; encima, una tarjeta
   clara y grande con la recepcionista asomada. Solo carga en /agendar. Las reglas
   viejas (.booking, .bk-*) siguen en style.css porque /auditoria y /vendedores usan
   algunas.
   ========================================================================= */

body.page-focus { background: var(--tinta); }

.ag {
	position: relative; isolation: isolate; overflow: hidden;
	min-height: calc(100vh - 60px); min-height: calc(100svh - 60px);
	padding-bottom: 56px; color: var(--papel);
}
@media (min-width: 860px) { .ag { min-height: calc(100vh - 68px); min-height: calc(100svh - 68px); } }

.ag__aura {
	position: absolute; inset: 0; z-index: -2; pointer-events: none;
	background:
		radial-gradient(52% 42% at 50% 22%, rgba(36, 56, 255, 0.42), transparent 70%),
		radial-gradient(34% 30% at 6% 92%, rgba(36, 56, 255, 0.18), transparent 70%),
		radial-gradient(30% 28% at 96% 66%, rgba(142, 151, 255, 0.13), transparent 70%);
}
.ag__aura::after {
	content: ''; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(250, 250, 247, 0.09) 1px, transparent 1.3px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 78%);
	mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 78%);
}

/* Garabatos que flotan en el escenario */
.ag__flotan { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ag-flota {
	position: absolute; color: var(--papel); opacity: 0.32;
	animation: ag-flotar 8s ease-in-out infinite alternate; animation-delay: var(--d, 0s);
}
body .ag .ag-flota .dd-blue { color: var(--azul-claro); }
@keyframes ag-flotar {
	from { transform: translateY(0) rotate(-8deg); }
	to { transform: translateY(-18px) rotate(8deg); }
}
@media (max-width: 900px) { .ag-flota:nth-child(n+4) { display: none; } .ag-flota { opacity: 0.22; } }

/* La franja azul de arriba: lo que se lleva de la llamada */
.ag__cinta {
	margin: 0 0 clamp(22px, 3.5vw, 36px); padding: 11px 16px;
	background: var(--azul); color: #fff; text-align: center;
	font-size: 14.5px; font-weight: 700; line-height: 1.35; letter-spacing: -0.005em;
	box-shadow: 0 10px 40px -10px rgba(36, 56, 255, 0.7);
}
.ag__cinta span::before {
	content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; vertical-align: 1px;
	border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	animation: ag-late 2s ease-out infinite;
}
@keyframes ag-late { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); } 80%, 100% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } }

.ag__escena { position: relative; display: flow-root; width: min(100% - 32px, 700px); margin: 0 auto; }
/* La etiqueta del producto va arriba a la izquierda, en el hueco que deja el personaje a la derecha. */
.ag__pill {
	position: absolute; z-index: 2; left: 2px; top: 22px; margin: 0; padding: 7px 14px; border-radius: 999px;
	background: rgba(250, 250, 247, 0.08); border: 1px solid rgba(250, 250, 247, 0.16);
	font-size: 13.5px; font-weight: 700; color: var(--papel);
}

/* ---- la tarjeta y el personaje asomado ---- */
.ag-marco { position: relative; margin-top: 90px; }
.ag-gata {
	position: absolute; z-index: 0; right: 40px; top: -122px; width: 150px; height: auto;
	pointer-events: none; transform-origin: 50% 100%;
	animation: ag-asoma 3.8s ease-in-out infinite;
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}
@keyframes ag-asoma {
	0%, 100% { translate: 0 6px; rotate: -2deg; }
	50% { translate: 0 0; rotate: 2deg; }
}
.ag-gata.is-salta { animation: ag-salta 0.55s cubic-bezier(0.3, 1.6, 0.5, 1), ag-asoma 3.8s ease-in-out 0.55s infinite; }
@keyframes ag-salta {
	0% { translate: 0 6px; }
	40% { translate: 0 -16px; rotate: 4deg; }
	100% { translate: 0 6px; }
}
.ag.is-listo .ag-gata { opacity: 0; translate: 0 60px; transition: opacity 0.3s, translate 0.4s; animation: none; }

.ag-tarjeta {
	position: relative; z-index: 1;
	background: var(--papel); color: var(--tinta);
	border-radius: 30px; padding: 18px 46px 34px;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.5) inset,
		0 50px 120px -40px rgba(36, 56, 255, 0.65),
		0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
@media (max-width: 639px) {
	.ag__cinta { font-size: 13.5px; padding: 10px 16px; }
	.ag__pill { top: 14px; font-size: 13px; }
	.ag-marco { margin-top: 78px; }
	.ag-gata { width: 108px; top: -86px; right: 18px; }
	.ag-tarjeta { padding: 16px 18px 26px; border-radius: 24px; }
}

/* Barra de arriba: atrás · progreso · 3 / 7 */
.ag-arriba { display: flex; align-items: center; gap: 14px; height: 40px; margin-bottom: 20px; }
.ag-atras {
	flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
	border: 1px solid var(--linea); border-radius: 50%; background: #fff; color: var(--tinta);
	cursor: pointer; transition: border-color 0.2s, transform 0.2s;
}
.ag-atras svg { width: 18px; height: 18px; }
.ag-atras:hover { border-color: var(--tinta); transform: translateX(-2px); }
.ag-atras.is-oculto { visibility: hidden; }
.ag-barra { flex: 1; height: 6px; border-radius: 99px; background: #E7E7EE; overflow: hidden; }
.ag-barra i {
	display: block; width: 0; height: 100%; border-radius: inherit;
	background: linear-gradient(90deg, var(--azul), #6876FF);
	transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.ag-n { flex: none; min-width: 42px; text-align: right; font-size: 13px; font-weight: 700; color: var(--gris-suave); font-variant-numeric: tabular-nums; }

/* ---- cada pantalla ---- */
.ag-p { border: 0; margin: 0; padding: 0; min-width: 0; }
.ag--js .ag-p:not(.is-activa) { display: none; }
.ag--js .ag-p.is-activa { animation: ag-entra 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
.ag--js .ag-p.is-activa.is-atras { animation-name: ag-entra-atras; }
@keyframes ag-entra { from { opacity: 0; transform: translateX(32px); } }
@keyframes ag-entra-atras { from { opacity: 0; transform: translateX(-32px); } }
.ag-p.is-sacude { animation: ag-sacude 0.4s ease both !important; }
@keyframes ag-sacude { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
/* Sin JS: todas las pantallas, una debajo de otra */
.ag:not(.ag--js) .ag-p + .ag-p { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--linea); }

.ag-p__t {
	display: block; float: none; width: 100%; max-width: 15em; margin: 0 auto; padding: 0;
	text-align: center; font-size: clamp(27px, 4.4vw, 38px); font-weight: 800;
	line-height: 1.1; letter-spacing: -0.035em; color: var(--tinta); outline: none;
	text-wrap: balance;
}
.ag-p__t em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.1em; letter-spacing: -0.01em; color: var(--azul); }
.ag-p__sub { max-width: 32em; margin: 12px auto 0; text-align: center; font-size: 16px; line-height: 1.5; color: var(--gris); }
@media (max-width: 639px) { .ag-p__sub { font-size: 15px; } }

/* ---- opciones ---- */
.ag-ops { display: grid; gap: 9px; margin-top: 24px; }
.ag-op {
	position: relative; display: flex; align-items: center; gap: 14px;
	min-height: 60px; padding: 8px 14px 8px 10px;
	background: #fff; border: 1.5px solid var(--linea); border-radius: 18px;
	font-size: 16.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--tinta);
	cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
	transition: border-color 0.18s, background-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.ag-op input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.ag-op__ico {
	flex: none; width: 44px; height: 44px; padding: 7px; border-radius: 13px;
	background: var(--azul-suave); color: var(--tinta);
	transition: background-color 0.18s, color 0.18s, transform 0.25s;
}
body .ag-tarjeta .doodle { color: var(--tinta); }
body .ag-tarjeta .doodle .dd-blue { color: var(--azul); }
.ag-op__t { flex: 1; min-width: 0; }
.ag-op__k {
	flex: none; min-width: 26px; height: 26px; padding: 0 6px; display: grid; place-items: center;
	border: 1px solid var(--linea); border-radius: 7px; background: var(--papel);
	font: 700 12px/1 var(--sans); color: var(--gris-suave);
	transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}
@media (pointer: coarse) { .ag-op__k { display: none; } }
@media (hover: hover) {
	.ag-op:hover { border-color: rgba(36, 56, 255, 0.5); transform: translateY(-2px); box-shadow: 0 16px 30px -20px rgba(36, 56, 255, 0.6); }
	.ag-op:hover .ag-op__ico { transform: rotate(-6deg) scale(1.05); }
}
.ag-op:active { transform: scale(0.985); }
.ag-op:has(input:focus-visible) { outline: 3px solid rgba(36, 56, 255, 0.4); outline-offset: 2px; }
.ag-op.is-sel, .ag-op:has(input:checked) { border-color: var(--azul); background: #F3F4FF; box-shadow: 0 0 0 3px rgba(36, 56, 255, 0.14); }
.ag-tarjeta .ag-op.is-sel .ag-op__ico, .ag-tarjeta .ag-op:has(input:checked) .ag-op__ico { background: var(--azul); color: #fff; }
.ag-tarjeta .ag-op.is-sel .ag-op__ico .dd-blue, .ag-tarjeta .ag-op:has(input:checked) .ag-op__ico .dd-blue { color: #fff; }
.ag-op.is-sel .ag-op__k, .ag-op:has(input:checked) .ag-op__k { background: var(--azul); border-color: var(--azul); color: #fff; }
.ag-op.is-pop { animation: ag-pop 0.34s ease; }
@keyframes ag-pop { 45% { transform: scale(1.025); } }

/* rejilla (sector): mosaicos con el ícono arriba */
.ag-ops--rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .ag-ops--rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.ag-ops--rejilla .ag-op { flex-direction: column; justify-content: center; gap: 10px; min-height: 122px; padding: 18px 10px 14px; text-align: center; font-size: 14.5px; }
.ag-ops--rejilla .ag-op__ico { width: 54px; height: 54px; padding: 9px; border-radius: 50%; }
.ag-ops--rejilla .ag-op__t { flex: none; }
.ag-ops--rejilla .ag-op__k, .ag-ops--cifras .ag-op__k { position: absolute; top: 8px; left: 8px; min-width: 22px; height: 22px; font-size: 11px; }

/* cifras (tamaño): números grandes */
.ag-ops--cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .ag-ops--cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.ag-ops--cifras .ag-op { justify-content: center; min-height: 104px; padding: 22px 10px 16px; text-align: center; font-size: 19px; font-weight: 800; letter-spacing: -0.025em; }

/* ---- volumen: la cifra grande y el deslizador ---- */
.ag-vol { margin-top: 32px; text-align: center; }
.ag-vol__cifra {
	display: inline-flex; align-items: baseline; gap: 10px; margin: 0; padding: 14px 30px;
	background: #fff; border: 1.5px solid var(--linea); border-radius: 999px;
	box-shadow: 0 20px 44px -28px rgba(36, 56, 255, 0.6);
}
.ag-vol__n { display: inline-block; min-width: 2ch; font-size: clamp(44px, 8vw, 60px); font-weight: 800; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--tinta); }
.ag-vol__n.is-pop { animation: ag-pop 0.25s ease; }
.ag-vol__u { font-size: 15px; font-weight: 600; color: var(--gris); }
.ag-rango { display: block; margin: 30px 2px 0; }
.ag-rango__in {
	--pct: 0%;
	-webkit-appearance: none; appearance: none; display: block; width: 100%; height: 36px; margin: 0;
	background: transparent; cursor: pointer; touch-action: pan-y;
}
.ag-rango__in:focus { outline: none; }
.ag-rango__in::-webkit-slider-runnable-track {
	height: 10px; border-radius: 99px;
	background: linear-gradient(90deg, var(--azul) var(--pct), #E4E4EC var(--pct));
}
.ag-rango__in::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; width: 32px; height: 32px; margin-top: -11px;
	border: 3px solid var(--azul); border-radius: 50%; background: #fff;
	box-shadow: 0 0 0 7px rgba(36, 56, 255, 0.14), 0 6px 16px rgba(12, 12, 20, 0.25);
	transition: transform 0.15s, box-shadow 0.15s;
}
.ag-rango__in:active::-webkit-slider-thumb { transform: scale(1.12); }
.ag-rango__in:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 7px rgba(36, 56, 255, 0.32), 0 6px 16px rgba(12, 12, 20, 0.25); }
.ag-rango__in::-moz-range-track { height: 10px; border: 0; border-radius: 99px; background: #E4E4EC; }
.ag-rango__in::-moz-range-progress { height: 10px; border-radius: 99px; background: var(--azul); }
.ag-rango__in::-moz-range-thumb {
	width: 26px; height: 26px; border: 3px solid var(--azul); border-radius: 50%; background: #fff;
	box-shadow: 0 0 0 7px rgba(36, 56, 255, 0.14), 0 6px 16px rgba(12, 12, 20, 0.25);
}
.ag-rango__fin { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--gris-suave); }
.ag-rango__mueve { color: var(--azul); animation: ag-guino 1.8s ease-in-out infinite; transition: opacity 0.3s; }
.ag-rango__mueve::before { content: '← '; }
.ag-rango__mueve::after { content: ' →'; }
.ag-rango__mueve.is-ido { opacity: 0; animation: none; }
@keyframes ag-guino { 50% { opacity: 0.45; } }

/* ---- calendario ---- */
.ag-cal { display: grid; gap: 20px; margin-top: 26px; }
@media (min-width: 640px) { .ag-cal { grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: start; } }
.ag-cal__izq { padding: 14px 12px 10px; background: #fff; border: 1.5px solid var(--linea); border-radius: 20px; }
.ag-cal__cab { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; }
.ag-cal__cab strong { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.ag-cal__cab strong::first-letter { text-transform: uppercase; }
.ag-cal__nav {
	width: 36px; height: 36px; display: grid; place-items: center; padding: 0 0 2px;
	border: 1px solid var(--linea); border-radius: 50%; background: var(--papel);
	font-size: 22px; line-height: 1; color: var(--tinta); cursor: pointer;
}
.ag-cal__nav:hover:not(:disabled) { border-color: var(--tinta); }
.ag-cal__nav:disabled { opacity: 0.3; cursor: default; }
.ag-cal__sem, .ag-cal__rej { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ag-cal__sem span { padding: 4px 0 6px; text-align: center; font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: var(--gris-suave); }
.ag-dia {
	display: grid; place-items: center; width: 100%; max-width: 42px; aspect-ratio: 1; margin: 2px auto; padding: 0;
	border: 0; border-radius: 50%; background: transparent;
	font: 600 14.5px/1 var(--sans); color: #C3C3CB;
}
.ag-dia.is-hueco { visibility: hidden; }
.ag-dia.is-abierto { background: var(--azul-suave); color: var(--tinta); font-weight: 800; cursor: pointer; transition: background-color 0.15s, transform 0.15s; }
.ag-dia.is-abierto:hover { background: #D9DDFF; transform: scale(1.06); }
.ag-dia.is-sel { background: var(--azul); color: #fff; box-shadow: 0 8px 18px -8px rgba(36, 56, 255, 0.9); }
.ag-dia.is-sel:hover { background: var(--azul); }
.ag-dia.is-lleno { text-decoration: line-through; }
.ag-cal__dia { margin: 4px 0 12px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.ag-cal__dia:empty { display: none; }
.ag-cal__dia::first-letter { text-transform: uppercase; }
.ag-cal__vacio { padding: 22px 18px; border: 1.5px dashed var(--linea); border-radius: 18px; background: #fff; text-align: center; font-size: 14.5px; line-height: 1.45; color: var(--gris); }
.ag-cal__vacio a { color: var(--azul); }
.ag-horas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 639px) { .ag-horas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ag-hora {
	height: 54px; border: 1.5px solid var(--linea); border-radius: 15px; background: #fff;
	font: 700 16.5px/1 var(--sans); color: var(--tinta); font-variant-numeric: tabular-nums; cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s, transform 0.15s;
}
.ag-hora:hover:not(:disabled) { border-color: var(--azul); transform: translateY(-1px); }
.ag-hora.is-sel { border-color: var(--azul); background: var(--azul); color: #fff; box-shadow: 0 10px 22px -12px rgba(36, 56, 255, 0.9); }
.ag-hora.is-tomada { opacity: 0.4; text-decoration: line-through; cursor: default; }

/* ---- campos ---- */
.ag-campos { display: grid; gap: 16px; margin-top: 26px; }
.ag-campo { display: grid; gap: 7px; }
.ag-campo > span { font-size: 14px; font-weight: 700; color: var(--tinta); }
.ag-campo input, .ag-tel select, .ag-tel input {
	width: 100%; height: 58px; padding: 0 18px;
	border: 1.5px solid var(--linea); border-radius: 16px; background: #fff;
	font: 500 17px var(--sans); color: var(--tinta);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.ag-campo input::placeholder, .ag-tel input::placeholder { color: #B4B4BC; }
.ag-campo input:focus, .ag-tel select:focus, .ag-tel input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px rgba(36, 56, 255, 0.15); }
.ag-campo input.is-invalid, .ag-tel input.is-invalid { border-color: #D93B3B; box-shadow: 0 0 0 4px rgba(217, 59, 59, 0.12); }
.ag-tel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 10px; }
.ag-tel__pais, .ag-tel__num { position: relative; display: block; min-width: 0; }
.ag-tel select {
	-webkit-appearance: none; appearance: none; padding-right: 38px; text-overflow: ellipsis; cursor: pointer;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%230C0C14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
}
.ag-tel__dial {
	position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
	font-style: normal; font-size: 17px; font-weight: 700; color: var(--gris); pointer-events: none;
}
.ag-tel.is-otro .ag-tel__dial { display: none; }
.ag-ayuda { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--gris-suave); }
.ag-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* El horario elegido, recordado en la última pantalla */
.ag-elegido {
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px;
	width: fit-content; max-width: 100%; margin: 20px auto 0; padding: 9px 16px 9px 10px;
	border-radius: 999px; background: var(--azul-suave); font-size: 15px; color: var(--tinta);
}
.ag-elegido[hidden] { display: none; }
.ag-elegido .doodle { width: 28px; height: 28px; }
.ag-elegido b { font-weight: 800; }
.ag-elegido b::first-letter { text-transform: uppercase; }
.ag-elegido__cambiar { padding: 0; border: 0; background: none; font: 700 14px var(--sans); color: var(--azul); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---- botón, avisos ---- */
.ag-nav { margin-top: 28px; }
.ag-nav[hidden] { display: none; }
.ag-btn {
	width: 100%; height: 60px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	border: 0; border-radius: 18px; background: var(--azul); color: #fff;
	font: 700 17.5px/1 var(--sans); letter-spacing: -0.01em; cursor: pointer;
	box-shadow: 0 18px 40px -18px rgba(36, 56, 255, 0.95);
	transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
	animation: ag-boton 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ag-boton { from { opacity: 0; transform: translateY(8px); } }
.ag-btn:hover { background: var(--azul-tinta); transform: translateY(-1px); box-shadow: 0 22px 44px -18px rgba(36, 56, 255, 1); }
.ag-btn:active { transform: translateY(1px); }
.ag-btn:disabled { opacity: 0.72; cursor: progress; transform: none; }
.ag-btn__f { transition: transform 0.2s; }
.ag-btn:hover .ag-btn__f { transform: translateX(4px); }
.ag-nav__enter { margin-top: 10px; text-align: center; font-size: 13px; color: var(--gris-suave); }
.ag-nav__enter kbd { padding: 2px 6px; border: 1px solid var(--linea); border-radius: 6px; background: #fff; font: 700 12px var(--sans); color: var(--gris); }
@media (pointer: coarse) { .ag-nav__enter { display: none; } }
.ag-legal { margin-top: 14px; text-align: center; font-size: 12.5px; line-height: 1.55; color: var(--gris-suave); }
.ag-legal[hidden] { display: none; }
.ag-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ag-msg {
	margin-top: 18px; padding: 12px 14px; border: 1px solid #F3C6C6; border-radius: 14px;
	background: #FFF2F2; font-size: 14.5px; line-height: 1.45; color: #A22424;
}
.ag-msg a { color: inherit; font-weight: 700; }

/* ---- confirmación ---- */
.ag-listo { padding: 4px 0 6px; text-align: center; outline: none; animation: ag-entra 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.ag-listo__gato { position: relative; width: 180px; height: 180px; margin: -8px auto 6px; }
.ag-listo__gato img { width: 100%; height: 100%; object-fit: contain; animation: ag-celebra 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
@keyframes ag-celebra { from { opacity: 0; transform: translateY(30px) scale(0.7); } }
.ag-listo__chispas { position: absolute; inset: 0; pointer-events: none; }
.ag-listo__chispas i {
	position: absolute; left: 50%; top: 46%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%;
	background: var(--azul); opacity: 0;
	animation: ag-chispa 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) 0.25s both;
}
.ag-listo__chispas i:nth-child(3n) { background: var(--azul-claro); width: 7px; height: 7px; }
.ag-listo__chispas i:nth-child(4n) { background: var(--tinta); width: 6px; height: 6px; }
@keyframes ag-chispa {
	0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(0.6); }
	70% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--a)) translateY(-108px) scale(1); }
}
.ag-listo__t { font-size: clamp(28px, 5vw, 40px); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; }
.ag-listo__t .dot-azul { color: var(--azul); }
.ag-listo__cuando {
	display: inline-block; margin-top: 16px; padding: 12px 22px; border-radius: 999px;
	background: var(--azul); color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
	box-shadow: 0 16px 36px -16px rgba(36, 56, 255, 0.95);
}
.ag-listo__cuando::first-letter { text-transform: uppercase; }
.ag-listo__p { max-width: 34em; margin: 18px auto 0; font-size: 16px; line-height: 1.55; color: var(--gris); }
.ag-listo__agenda { margin-top: 26px; padding: 20px 22px; border: 1.5px solid var(--linea); border-radius: 20px; background: #fff; text-align: left; }
.ag-listo__h { margin-bottom: 12px; font-size: 16px; font-weight: 800; }
.ag-listo__agenda ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ag-listo__agenda li { display: grid; grid-template-columns: 66px 1fr; gap: 12px; align-items: start; font-size: 14.5px; line-height: 1.45; color: var(--gris); }
.ag-listo__agenda li b { display: block; color: var(--tinta); font-size: 15px; }
.ag-listo__min { padding: 5px 0; border-radius: 999px; background: var(--azul-suave); text-align: center; font-size: 12.5px; font-weight: 800; color: var(--azul); }
.ag-listo__prep { margin-top: 22px; font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.3; color: var(--tinta); }
.ag-listo__mover { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--gris-suave); }
.ag-listo__mover a, .ag-listo__inicio { color: var(--azul); }
.ag-listo__inicio { display: inline-block; margin-top: 18px; font-weight: 700; }

/* ---- debajo de la tarjeta ---- */
.ag__confianza {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
	margin: 26px 0 0; padding: 0; list-style: none;
	font-size: 14px; font-weight: 600; color: rgba(250, 250, 247, 0.74);
}
.ag__confianza li::before { content: '✓'; margin-right: 7px; font-weight: 800; color: var(--azul-claro); }
.ag__legales { margin-top: 18px; text-align: center; font-size: 12.5px; }
.ag__legales a { margin: 0 8px; color: rgba(250, 250, 247, 0.5); }
.ag__legales a:hover { color: var(--papel); }

/* ---- portátiles de poca altura (1366×768): que la primera pregunta quepa entera ---- */
@media (min-width: 640px) and (max-height: 860px) {
	.ag__cinta { margin-bottom: 14px; }
	.ag-marco { margin-top: 92px; }
	.ag-gata { width: 128px; top: -104px; }
	.ag-tarjeta { padding-top: 14px; padding-bottom: 24px; }
	.ag-arriba { margin-bottom: 14px; }
	.ag-p__t { font-size: 32px; }
	.ag-p__sub { margin-top: 8px; }
	.ag-ops { margin-top: 18px; gap: 8px; }
	.ag-op { min-height: 52px; }
	.ag-op__ico { width: 38px; height: 38px; padding: 6px; }
	.ag-ops--rejilla .ag-op { min-height: 108px; }
	.ag-ops--cifras .ag-op { min-height: 92px; }
	.ag-vol { margin-top: 22px; }
	.ag-rango { margin-top: 20px; }
	.ag-cal, .ag-campos { margin-top: 18px; }
	.ag-nav { margin-top: 20px; }
}

/* ---- sin movimiento ---- */
@media (prefers-reduced-motion: reduce) {
	.ag-flota, .ag-gata, .ag-gata.is-salta, .ag__cinta span::before, .ag-rango__mueve,
	.ag--js .ag-p.is-activa, .ag-p.is-sacude, .ag-op.is-pop, .ag-vol__n.is-pop, .ag-btn,
	.ag-listo, .ag-listo__gato img { animation: none !important; }
	.ag-listo__chispas { display: none; }
	.ag-op, .ag-op__ico, .ag-dia, .ag-hora, .ag-btn, .ag-btn__f, .ag-barra i, .ag-atras { transition: none; }
}