/* ============================================================
   PetK9 · SanteVet — Funnel de cotización
   Marca: teal PetK9. Diseño limpio, una tarjeta centrada, responsive.
   ============================================================ */

.petk9-santevet {
	--pk-teal: #17a2af;
	--pk-teal-dark: #0e7c87;
	--pk-teal-soft: #e7f6f7;
	--pk-ink: #1f2a2e;
	--pk-muted: #6b7a80;
	--pk-line: #e3e9ea;
	--pk-radius: 16px;
	--pk-shadow: 0 10px 30px rgba(14, 124, 135, .10);

	max-width: 640px;
	margin: 0 auto;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: var(--pk-ink);
	font-size: 16px;
	line-height: 1.5;
}

/* --- Estados de retorno de pago --- */
.petk9-santevet__return {
	padding: 16px 18px;
	border-radius: var(--pk-radius);
	margin-bottom: 16px;
	font-weight: 500;
}
.petk9-santevet__return--pending { background: var(--pk-teal-soft); border: 1px solid #b6e0e4; }
.petk9-santevet__return--success { background: #eafaf0; border: 1px solid #a6e6bf; }
.petk9-santevet__return--cancel  { background: #fdeeee; border: 1px solid #f2b8b8; }
.petk9-santevet__return--ko      { background: #fdeeee; border: 1px solid #f2b8b8; }

/* --- Contenedor del funnel --- */
.petk9-funnel {
	background: #fff;
	border-radius: var(--pk-radius);
	box-shadow: var(--pk-shadow);
	padding: 32px;
	border: 1px solid var(--pk-line);
}
@media (max-width: 560px) {
	.petk9-funnel { padding: 22px 18px; }
}

/* --- Barra de progreso --- */
.petk9-progressbar {
	height: 8px;
	background: var(--pk-line);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 10px;
}
.petk9-progressbar__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--pk-teal), var(--pk-teal-dark));
	border-radius: 999px;
	transition: width .35s ease;
}
.petk9-stepno {
	font-size: 13px;
	color: var(--pk-muted);
	margin-bottom: 18px;
}

/* --- Títulos --- */
.petk9-step h3 {
	font-size: 26px;
	line-height: 1.2;
	margin: 0 0 6px;
	color: var(--pk-ink);
	font-weight: 800;
}
.petk9-step h3 .pk-accent { color: var(--pk-teal); }
.petk9-sub {
	color: var(--pk-muted);
	margin: 0 0 22px;
}

/* --- Opciones (especie) tipo tarjeta --- */
.petk9-options {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 8px;
}
.petk9-option {
	position: relative;
	flex: 1 1 140px;
	padding: 22px 18px;
	border: 2px solid var(--pk-line);
	border-radius: var(--pk-radius);
	background: #fff;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	color: var(--pk-ink);
	transition: border-color .15s, box-shadow .15s, transform .05s;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.petk9-option:hover { border-color: var(--pk-teal); box-shadow: var(--pk-shadow); }
.petk9-option:active { transform: translateY(1px); }
.petk9-option.is-selected { border-color: var(--pk-teal); background: var(--pk-teal-soft); box-shadow: 0 4px 16px rgba(15,124,135,.16); }
.petk9-option__emoji { font-size: 40px; line-height: 1; }
/* Marca de selección clara (✓) en las tarjetas de tarifa elegidas */
.petk9-options--cards .petk9-option.is-selected::after {
	content: '✓';
	position: absolute;
	top: -10px;
	right: 16px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pk-teal);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* --- Tarjetas de tarifa (compactas, estilo email) --- */
.petk9-options--cards { flex-direction: column; }
.petk9-options--cards .petk9-option {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	gap: 12px;
	padding: 14px 16px;
	width: 100%;
}
.petk9-formula__info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.petk9-formula__nameline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.petk9-formula__name { font-size: 16px; font-weight: 800; }
.petk9-badge-inline {
	background: #d98a99; color: #fff; font-size: 10px; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
	vertical-align: 2px;
}
.petk9-formula__meta { font-size: 13px; color: var(--pk-muted); font-weight: 500; }
.petk9-formula__price { flex: 0 0 auto; white-space: nowrap; text-align: right; }
.petk9-price { display: inline-flex; align-items: baseline; color: var(--pk-ink); }
.petk9-price__int { font-size: 28px; font-weight: 800; }
.petk9-price__dec { font-size: 18px; font-weight: 800; color: var(--pk-muted); }
.petk9-price__unit { font-size: 13px; font-weight: 600; color: var(--pk-muted); margin-left: 3px; }

/* Badge "POPULAR": destaca por el badge y una sombra suave, SIN borde teal
   (el borde teal se reserva para la tarjeta realmente seleccionada). */
.petk9-option--pop { border-color: var(--pk-line); box-shadow: 0 4px 14px rgba(15,124,135,.10); }
.petk9-option--pop.is-selected { border-color: var(--pk-teal); }
.petk9-badge-pop {
	position: absolute;
	top: -12px;
	left: 20px;
	background: #cf8b96;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .6px;
	padding: 4px 12px;
	border-radius: 999px;
}

/* --- Campos de formulario --- */
.petk9-field { display: block; margin-bottom: 16px; }
.petk9-field > span {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--pk-ink);
	margin-bottom: 6px;
}
.petk9-input {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var(--pk-line);
	border-radius: 12px;
	font-size: 16px;
	color: var(--pk-ink);
	box-sizing: border-box;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
/* iOS renderiza el date con ancho intrínseco: lo normalizamos para que no desborde. */
.petk9-input[type="date"] { -webkit-appearance: none; appearance: none; }
.petk9-input:focus {
	outline: none;
	border-color: var(--pk-teal);
	box-shadow: 0 0 0 3px rgba(23, 162, 175, .15);
}
.petk9-input.is-error { border-color: #e05b57; }
.petk9-input.is-error:focus { box-shadow: 0 0 0 3px rgba(224, 91, 87, .15); }
.petk9-fielderr {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #c0322f;
}

/* Selector de fecha (día / mes / año) */
.petk9-datesel {
	display: grid;
	grid-template-columns: 1fr 1.4fr 1fr;
	gap: 10px;
}

/* Buscador de raza a medida (combobox) */
.petk9-combo { position: relative; }
.petk9-combo__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
.petk9-combo__toggle.is-placeholder { color: var(--pk-muted); }
.petk9-combo__arrow { color: var(--pk-muted); transition: transform .15s; }
.petk9-combo.is-open .petk9-combo__arrow { transform: rotate(180deg); }
.petk9-combo__panel {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--pk-line);
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(14, 124, 135, .16);
	padding: 10px;
	overflow: hidden;
}
.petk9-combo__search {
	width: 100%;
	padding: 11px 12px;
	border: 1.5px solid var(--pk-line);
	border-radius: 10px;
	font-size: 15px;
	box-sizing: border-box;
	margin-bottom: 8px;
}
.petk9-combo__search:focus { outline: none; border-color: var(--pk-teal); }
.petk9-combo__list { max-height: 260px; overflow-y: auto; }
.petk9-combo__opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	text-align: left;
	background: transparent;
	border: none;
	padding: 11px 12px;
	border-radius: 10px;
	font-size: 15px;
	color: var(--pk-ink);
	cursor: pointer;
	font-family: inherit;
}
.petk9-combo__opt:hover { background: var(--pk-teal-soft); }
.petk9-combo__opt.is-selected { background: var(--pk-teal-soft); font-weight: 700; }
.petk9-combo__check { color: var(--pk-teal); font-weight: 800; }
.petk9-combo__empty { padding: 14px 12px; color: var(--pk-muted); font-size: 14px; }
.petk9-combo__sep { padding: 8px 12px 4px; color: var(--pk-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.petk9-combo__opt:first-child { font-weight: 600; }
.petk9-combo__opt { gap: 10px; }
.petk9-combo__optname { flex: 1; }
.petk9-thumb { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; background: #eef2f3; flex: 0 0 auto; display: inline-block; }
.petk9-combo__toggle .petk9-thumb { margin-right: 8px; vertical-align: middle; }
select.petk9-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7a80' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }

/* --- Consentimiento --- */
.petk9-consent {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 8px 0 8px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--pk-ink);
}
.petk9-consent input {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	margin-top: 1px;
	accent-color: var(--pk-teal);
	cursor: pointer;
}

/* --- Cajita de ayuda --- */
.petk9-tip {
	display: flex;
	gap: 10px;
	background: var(--pk-teal-soft);
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 14px;
	color: var(--pk-teal-dark);
	margin: 4px 0 8px;
}
.petk9-tip strong { display: block; }

/* --- Navegación y botones --- */
.petk9-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
}
.petk9-back, .petk9-next, .petk9-cta, .petk9-link {
	font-family: inherit;
	cursor: pointer;
	border-radius: 999px;
	font-weight: 700;
	font-size: 16px;
	transition: filter .15s, background .15s, transform .05s;
}
.petk9-next, .petk9-cta {
	background: var(--pk-teal);
	color: #fff;
	border: none;
	padding: 13px 30px;
}
.petk9-next:hover, .petk9-cta:hover { filter: brightness(.95); }
.petk9-next.is-disabled, .petk9-next:disabled {
	background: #cfd8da;
	color: #fff;
	cursor: default;
	filter: none;
}
.petk9-next:active, .petk9-cta:active { transform: translateY(1px); }
.petk9-cta { width: 100%; padding: 15px; font-size: 17px; }
.petk9-cta:disabled { opacity: .5; cursor: default; }
.petk9-back {
	background: transparent;
	color: var(--pk-muted);
	border: 1.5px solid var(--pk-line);
	padding: 11px 22px;
}
.petk9-back:hover { border-color: var(--pk-muted); }
.petk9-link {
	background: transparent;
	border: none;
	color: var(--pk-teal-dark);
	text-decoration: underline;
	padding: 6px 0;
	font-size: 14px;
}

/* --- Resumen --- */
.petk9-summary { list-style: none; padding: 0; margin: 0 0 18px; border: 1px solid var(--pk-line); border-radius: 12px; overflow: hidden; }
.petk9-summary li { padding: 12px 16px; display: flex; justify-content: space-between; gap: 12px; }
.petk9-summary li:not(:last-child) { border-bottom: 1px solid var(--pk-line); }
.petk9-summary li span:first-child { color: var(--pk-muted); }
.petk9-summary li span:last-child { font-weight: 600; text-align: right; }

/* --- Estados varios --- */
.petk9-loading { color: var(--pk-muted); }

/* Spinner de carga */
.petk9-spinner {
	display: inline-block;
	width: 34px;
	height: 34px;
	border: 4px solid var(--pk-teal-soft);
	border-top-color: var(--pk-teal);
	border-radius: 50%;
	animation: petk9-spin .75s linear infinite;
}
@keyframes petk9-spin { to { transform: rotate(360deg); } }
.petk9-loading-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 40px 20px;
	color: var(--pk-muted);
	font-size: 15px;
	text-align: center;
}
.petk9-muted { color: var(--pk-muted); font-size: 14px; }
.petk9-notice {
	background: #fff7ed;
	border: 1px solid #f4d9b0;
	color: #8a5a1a;
	padding: 16px 18px;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.45;
	margin: 4px 0 12px;
}
.petk9-error {
	background: #fdeeee;
	border: 1px solid #f2b8b8;
	color: #b0322f;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 14px;
	margin: 4px 0 12px;
}

/* Add-on (Responsabilidad Civil) con interruptor */
.petk9-addon {
	display: flex;
	align-items: center;
	gap: 16px;
	border: 1.5px solid var(--pk-line);
	border-radius: 14px;
	padding: 18px 20px;
	margin-top: 18px;
	transition: border-color .15s, background .15s;
}
.petk9-addon.is-on { border-color: var(--pk-teal); background: var(--pk-teal-soft); }
.petk9-addon__body { flex: 1; }
.petk9-addon__title { font-weight: 800; font-size: 16px; margin-bottom: 4px; }
.petk9-addon__desc { font-size: 14px; color: var(--pk-muted); margin: 0 0 6px; }
.petk9-addon__price { font-size: 14px; font-weight: 700; color: var(--pk-teal-dark); }
.petk9-toggle {
	flex: 0 0 auto;
	width: 52px;
	height: 30px;
	border-radius: 999px;
	border: none;
	background: #cfd8da;
	position: relative;
	cursor: pointer;
	transition: background .15s;
	padding: 0;
}
.petk9-toggle.is-on { background: var(--pk-teal); }
.petk9-toggle__knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 24px;
	height: 24px;
	background: #fff;
	border-radius: 50%;
	transition: transform .15s;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.petk9-toggle.is-on .petk9-toggle__knob { transform: translateX(22px); }

/* --- Selector de sexo con iconos --- */
.petk9-sexsel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.petk9-sexbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 12px;
	border: 1.5px solid var(--pk-line);
	border-radius: 12px;
	background: #fff;
	color: var(--pk-ink);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: border-color .15s, background .15s;
}
.petk9-sexbtn:hover { border-color: var(--pk-teal); }
.petk9-sexbtn.is-selected { border-color: var(--pk-teal); background: var(--pk-teal-soft); color: var(--pk-teal-dark); }
.petk9-sexbtn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	font-size: 18px;
	line-height: 1;
	flex: 0 0 auto;
}

/* --- Lista de mascotas (¿la familia crece?) --- */
.petk9-petlist { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.petk9-petcard {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1.5px solid var(--pk-line);
	border-radius: 14px;
	padding: 14px 16px;
}
.petk9-petcard__emoji { font-size: 30px; line-height: 1; }
.petk9-petcard__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #eef2f3; flex: 0 0 auto; }
.petk9-petcard__info { flex: 1; display: flex; flex-direction: column; }
.petk9-petcard__info strong { font-size: 16px; }
.petk9-petcard__info span { font-size: 13px; color: var(--pk-muted); }
.petk9-petcard__actions { display: flex; gap: 6px; }
.petk9-iconbtn {
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 18px;
	padding: 6px;
	border-radius: 8px;
	line-height: 1;
}
.petk9-iconbtn:hover { background: var(--pk-teal-soft); }
.petk9-addpet {
	width: 100%;
	padding: 14px;
	border: 2px dashed var(--pk-teal);
	border-radius: 14px;
	background: var(--pk-teal-soft);
	color: var(--pk-teal-dark);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	font-family: inherit;
}
.petk9-addpet:hover { filter: brightness(.97); }

/* --- Pestañas por mascota (planes) --- */
.petk9-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--pk-line);
	padding-bottom: 4px;
}
.petk9-tab {
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	padding: 8px 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--pk-muted);
	cursor: pointer;
	font-family: inherit;
}
.petk9-tab.is-active { color: var(--pk-ink); border-bottom-color: var(--pk-teal); }
.petk9-tab.is-done { color: var(--pk-teal-dark); }

/* --- Barra de acción de cobertura (estilo SanteVet: plan+precio · no asegurar · continuar) --- */
.petk9-backlink { background: none; border: none; color: var(--pk-muted); font-size: 14px; font-weight: 600; cursor: pointer; padding: 0 0 10px; font-family: inherit; align-self: flex-start; }
.petk9-backlink:hover { color: var(--pk-teal-dark); }
.petk9-planbar {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--pk-line);
}
.petk9-planbar__sel { display: flex; align-items: baseline; gap: 12px; }
.petk9-planbar__name { font-size: 18px; font-weight: 800; color: var(--pk-teal-dark); }
.petk9-planbar__price { font-size: 18px; font-weight: 800; color: var(--pk-ink); white-space: nowrap; }
.petk9-planbar__actions { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.petk9-planbar__skip {
	padding: 12px 18px;
	border: 1.5px solid var(--pk-teal);
	border-radius: 999px;
	background: #fff;
	color: var(--pk-teal-dark);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
}
.petk9-planbar__skip:hover { background: var(--pk-teal-soft); }
.petk9-planbar__go {
	padding: 12px 22px;
	border: none;
	border-radius: 999px;
	background: var(--pk-teal);
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
}
.petk9-planbar__go:hover { filter: brightness(1.05); }
.petk9-planbar__go.is-disabled { background: #cfd8da; cursor: not-allowed; }

/* --- Tarjeta "no podemos asegurar" (tono simpático) --- */
.petk9-eligcard { text-align: center; padding: 24px 18px; }
.petk9-eligcard__emoji { font-size: 44px; line-height: 1; margin-bottom: 12px; }
.petk9-eligcard__title { font-size: 19px; font-weight: 800; margin: 0 0 8px; color: var(--pk-ink); }
.petk9-eligcard__text { font-size: 14px; color: var(--pk-muted); margin: 0 auto 18px; max-width: 460px; line-height: 1.5; }
.petk9-eligcard__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.petk9-eligcard__btn { padding: 12px 22px; border-radius: 999px; border: none; background: var(--pk-teal); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; font-family: inherit; }
.petk9-eligcard__btn:hover { filter: brightness(1.05); }
.petk9-eligcard__btn--ghost { background: #fff; border: 1.5px solid var(--pk-line); color: var(--pk-muted); }
.petk9-eligcard__btn--ghost:hover { border-color: var(--pk-teal); color: var(--pk-teal-dark); background: var(--pk-teal-soft); }

/* --- Página de retorno tras el pago (comercial + tip de mascota) --- */
.petk9-return { text-align: center; padding: 8px 6px; }
.petk9-return__emoji { font-size: 48px; line-height: 1; margin-bottom: 10px; }
.petk9-return__title { font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.petk9-return__text { font-size: 15px; color: var(--pk-muted); margin: 0 auto 16px; max-width: 520px; line-height: 1.55; }
.petk9-return__tip { display: inline-block; background: var(--pk-teal-soft); color: var(--pk-teal-dark); border-radius: 12px; padding: 10px 16px; font-size: 13px; font-weight: 600; }
/* Código de pedido/póliza visible (referencia para el cliente y marketing). */
.petk9-return__order { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--pk-line); border-radius: 12px; padding: 10px 16px; margin: 0 auto 16px; }
.petk9-return__order-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pk-muted); }
.petk9-return__order-code { font-size: 16px; font-weight: 800; color: var(--pk-ink); letter-spacing: .02em; }
/* CTA de las páginas de retorno (retomar / reintentar). */
.petk9-return__cta { display: inline-block; margin-top: 4px; background: var(--pk-teal); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; padding: 12px 26px; border-radius: 999px; }
.petk9-return__cta:hover { filter: brightness(.95); }

/* --- Selector de método de pago (tarjeta / cuenta bancaria) --- */
.petk9-paymethod { margin: 6px 0 4px; }
.petk9-paymethod__label { font-size: 13px; font-weight: 700; color: var(--pk-ink); margin-bottom: 8px; }
.petk9-paymethod__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.petk9-paymethod__opt { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border: 1.5px solid var(--pk-line); border-radius: 12px; background: #fff; color: var(--pk-ink); font-weight: 600; font-size: 15px; cursor: pointer; font-family: inherit; }
.petk9-paymethod__opt:hover { border-color: var(--pk-teal); }
.petk9-paymethod__opt.is-selected { border-color: var(--pk-teal); background: var(--pk-teal-soft); color: var(--pk-teal-dark); }
.petk9-paymethod__ico { font-size: 18px; }
.petk9-paymethod__note { font-size: 12px; color: var(--pk-muted); margin: 8px 0 0; }
.petk9-bank { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.petk9-billed { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 6px; padding: 12px 14px; background: var(--pk-teal-soft); border-radius: 12px; }
.petk9-billed span { color: var(--pk-teal-dark); font-weight: 600; font-size: 13px; }
.petk9-billed strong { color: var(--pk-ink); font-weight: 800; font-size: 16px; line-height: 1.25; }
.petk9-billed strong small { display: block; font-size: 12px; font-weight: 600; color: var(--pk-teal-dark); margin-top: 2px; }

/* --- Autocompletado de dirección (Google Places) --- */
.petk9-fieldhint { display: block; font-size: 12px; color: var(--pk-muted); margin-top: 6px; }
.pac-container { z-index: 100000; font-family: inherit; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); border: 1px solid var(--pk-line); margin-top: 4px; }
.pac-item { padding: 6px 12px; font-size: 14px; cursor: pointer; }
.pac-item:hover { background: var(--pk-teal-soft); }
@media (max-width: 520px) {
	.petk9-planbar__actions { width: 100%; }
	.petk9-planbar__go, .petk9-planbar__skip { flex: 1; text-align: center; }
}

/* --- Resumen por mascota --- */
.petk9-summary-pets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.petk9-sumpet {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #fafbfb;
	border: 1px solid var(--pk-line);
	border-radius: 12px;
	font-size: 15px;
}
.petk9-sumpet > div:last-child { font-weight: 700; white-space: nowrap; }

/* --- Cartel "tienes una tarificación a medias" (retorno) --- */
.petk9-resume {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: linear-gradient(180deg, var(--pk-teal-soft), #fff);
	border: 1px solid var(--pk-teal);
	border-radius: 16px;
	padding: 16px 18px;
	margin-bottom: 18px;
	animation: pk9-resume-in .35s ease;
}
@keyframes pk9-resume-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.petk9-resume__emoji { font-size: 26px; line-height: 1; }
.petk9-resume__body { flex: 1; min-width: 0; }
.petk9-resume__title { font-weight: 800; font-size: 16px; color: var(--pk-ink); }
.petk9-resume__text { margin: 4px 0 12px; font-size: 14px; color: var(--pk-ink); line-height: 1.5; }
.petk9-resume__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.petk9-resume__go {
	border: 0; background: var(--pk-teal); color: #fff; font-weight: 700; font-size: 14px;
	padding: 11px 18px; border-radius: 10px; cursor: pointer;
}
.petk9-resume__go:hover { filter: brightness(.95); }
.petk9-resume__new {
	border: 1px solid var(--pk-line); background: #fff; color: var(--pk-muted); font-weight: 600; font-size: 14px;
	padding: 11px 16px; border-radius: 10px; cursor: pointer;
}
.petk9-resume__new:hover { border-color: var(--pk-muted); color: var(--pk-ink); }

/* El teclado del móvil no debe tapar el campo enfocado. */
.petk9-input { scroll-margin-top: 90px; scroll-margin-bottom: 120px; }

/* --- Experiencia tipo app en móvil --- */
@media (max-width: 560px) {
	.petk9-funnel {
		padding: 16px 14px 24px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		min-height: 100vh;
		min-height: 100dvh;
	}
	.petk9-step h3 { font-size: 22px; line-height: 1.2; }
	.petk9-sub { font-size: 14px; }

	/* Campos más "táctiles" (y font-size 16px evita el zoom de iOS). */
	.petk9-input { padding: 15px 14px; font-size: 16px; border-radius: 12px; }
	.petk9-cta { position: sticky; bottom: 10px; z-index: 5; box-shadow: 0 6px 20px rgba(15,124,135,.28); }
	/* En el resumen hay campos de pago (método, IBAN) justo encima del botón:
	   ahí el CTA NO debe flotar (taparía la selección de método). Va estático. */
	.petk9-step--pay .petk9-cta { position: static; box-shadow: 0 4px 14px rgba(15,124,135,.18); margin-top: 14px; }

	/* Tarjetas de tarifa compactas (una fila, estilo email). */
	.petk9-options--cards .petk9-option { padding: 13px 14px; border-radius: 14px; }
	.petk9-formula__name { font-size: 15px; }
	.petk9-formula__meta { font-size: 12px; }
	.petk9-price__int { font-size: 22px; }
	.petk9-price__dec { font-size: 14px; }
	.petk9-badge-inline { font-size: 9px; padding: 2px 7px; }

	/* Botón "Atrás" discreto: link sin borde para no competir con Continuar. */
	.petk9-back {
		border: 0;
		background: none;
		color: var(--pk-muted);
		padding: 11px 8px;
		font-size: 14px;
		font-weight: 600;
	}
	.petk9-back:hover { border: 0; color: var(--pk-teal-dark); }

	/* Resumen compacto: menos alto por fila, sin que la fecha desborde. */
	.petk9-summary li { padding: 10px 13px; font-size: 14px; }
	.petk9-summary li span:last-child { min-width: 0; word-break: break-word; }
	.petk9-summary-pets { gap: 6px; margin-bottom: 10px; }
	.petk9-field { margin-bottom: 12px; }
}

/* Sin desbordes horizontales: todo dentro del ancho del móvil. */
.petk9-funnel, .petk9-funnel * { box-sizing: border-box; }
.petk9-funnel { overflow-x: clip; }
.petk9-step { max-width: 100%; }
.petk9-option { max-width: 100%; }

@media (max-width: 560px) {
	/* Add-on Responsabilidad Civil: toggle arriba, texto que respira. */
	.petk9-addon { align-items: flex-start; padding: 14px 16px; gap: 12px; }
	.petk9-addon__title { font-size: 15px; }
	.petk9-addon__desc { font-size: 13px; }
	.petk9-toggle { margin-top: 2px; }

	/* Fecha de nacimiento (3 desplegables) sin apreturas. */
	.petk9-datesel { gap: 8px; }
	.petk9-datesel select.petk9-input { padding-left: 12px; padding-right: 30px; }

	/* Botones de sexo con icono y texto bien centrados. */
	.petk9-sexbtn { padding: 14px 10px; }

	/* Tarjeta de tarifa: nombre no se corta, precio a la derecha compacto. */
	.petk9-formula__name { font-size: 16px; }
	.petk9-price__unit { font-size: 12px; }
}

/* Móvil estrecho: coberturas en una sola columna para que no se aprieten. */
@media (max-width: 400px) {
	.petk9-formula__perks { grid-template-columns: 1fr; }
}

/* Documentación del seguro (IPID, Nota Informativa…) en la pantalla de precios. */
.petk9-docs {
	margin: 14px 0 4px;
	padding: 12px 14px;
	background: #f5f8f9;
	border: 1px solid #e2e9eb;
	border-radius: 12px;
}
.petk9-docs__title {
	font-weight: 700;
	font-size: 14px;
	color: #22333c;
	margin-bottom: 8px;
}
.petk9-docs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.petk9-docs__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	background: #fff;
	border: 1px solid #cfdade;
	border-radius: 999px;
	font-size: 13px;
	color: #0b6b68;
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}
.petk9-docs__link:hover {
	border-color: #0FA3A0;
	box-shadow: 0 1px 4px rgba(15,163,160,.18);
}

/* --- Tarjeta de tarifa con desplegable de coberturas + IPID por tarifa --- */
.petk9-options--cards .petk9-option--card {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}
.petk9-formula__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.petk9-formula__links {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	border-top: 1px solid var(--pk-line);
	padding-top: 8px;
}
.petk9-formula__toggle {
	background: none;
	border: none;
	padding: 2px 0;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--pk-teal);
	cursor: pointer;
}
.petk9-formula__toggle:hover { text-decoration: underline; }
.petk9-formula__ipid {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: #0b6b68;
	text-decoration: none;
	padding: 4px 8px;
	border: 1px solid #cfdade;
	border-radius: 999px;
	background: #fff;
}
.petk9-formula__ipid:hover { border-color: var(--pk-teal); }
.petk9-fd {
	display: grid;
	gap: 12px;
	background: #f7fafb;
	border: 1px solid #e2e9eb;
	border-radius: 12px;
	padding: 12px 14px;
}
.petk9-fd__group { display: grid; gap: 4px; }
.petk9-fd__title { font-weight: 800; font-size: 13px; color: var(--pk-ink); margin-bottom: 2px; }
.petk9-fd__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.petk9-fd__row > span:first-child { color: var(--pk-muted); }
.petk9-fd__v { font-weight: 800; color: var(--pk-ink); white-space: nowrap; }
.petk9-fd__hint { font-size: 11px; color: var(--pk-muted); }