/**
 * Estilos de los componentes de BONISA.
 *
 * Los colores NO se definen acá: salen del sistema de diseño del tema hijo
 * (bonisa-theme.css). Este archivo solo consume variables, de modo que un cambio de
 * paleta no obliga a tocar los componentes.
 *
 * Los respaldos que aparecen en los var() son para el caso de que el plugin se use sin
 * el tema hijo; no son la paleta de la marca.
 */

:root {
	/*
	 * Cada papel semántico se resuelve contra el token crudo del tema, con un valor
	 * literal de respaldo. Así da igual si esta hoja carga antes o después que la del
	 * tema: el resultado es el mismo, y la paleta sigue teniendo un solo dueño.
	 */
	--bonisa-ink:       var(--b-carbon, #333333);
	--bonisa-ink-soft:  #5c5c5c;
	--bonisa-ink-faint: #8a8a8a;
	--bonisa-paper:     var(--b-blanco, #ffffff);
	--bonisa-surface:   #f7f5f2;
	--bonisa-line:      #e4e0da;

	--bonisa-accent:      var(--b-coral, #f04f23);
	--bonisa-accent-text: var(--b-coral-texto, #d3451e);
	--bonisa-cta:         var(--b-coral-texto, #d3451e);
	--bonisa-cta-hover:   #b93a17;
	--bonisa-cta-ink:     var(--b-blanco, #ffffff);

	--bonisa-error: #b32d2e;
	--bonisa-ok:    #1c7c4a;

	--bonisa-radius:  14px;
	--bonisa-gap:     clamp(16px, 2.5vw, 28px);
	--bonisa-measure: 66ch;
}

/* ---------------------------------------------------------------- Utilidades */

.bonisa-marquee *,
.bonisa-collection *,
.bonisa-booking *,
.bonisa-form-wrap * {
	box-sizing: border-box;
}

/*
 * El botón lleva su propio border-box en vez de heredarlo del contenedor. Se usa también
 * en el encabezado y el pie, que no están en la lista de arriba: allí un `width: 100%`
 * con relleno se pasaba 48 px del ancho disponible y el botón se salía de la pantalla.
 */
.bonisa-btn {
	box-sizing: border-box;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* El foco tiene que verse siempre: es la única señal para quien navega con teclado. */
.bonisa-marquee :focus-visible,
.bonisa-collection :focus-visible,
.bonisa-booking :focus-visible,
.bonisa-form-wrap :focus-visible {
	outline: 3px solid var(--bonisa-ink);
	outline-offset: 2px;
	border-radius: 4px;
}

.bonisa-admin-hint {
	padding: 12px 16px;
	border: 1px dashed var(--bonisa-cta-hover);
	border-radius: var(--bonisa-radius);
	background: color-mix(in srgb, var(--bonisa-accent) 8%, var(--bonisa-paper));
	color: var(--bonisa-ink);
	font-size: 0.9rem;
}

/* -------------------------------------------------------------------- Botones */

.bonisa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* 48px de alto mínimo: objetivo táctil cómodo en móvil. */
	min-height: 48px;
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.bonisa-btn--primary {
	background: var(--bonisa-cta);
	/* Blanco sobre vino da 5.83:1. Con el carbón que había antes daba 2.17:1,
	   menos de la mitad del mínimo AA. */
	color: var(--bonisa-cta-ink);
}

.bonisa-btn--primary:hover,
.bonisa-btn--primary:focus {
	background: var(--bonisa-cta-hover);
	color: var(--bonisa-cta-ink);
}

.bonisa-btn--ghost {
	background: transparent;
	color: var(--bonisa-ink);
	border-color: var(--bonisa-ink);
}

.bonisa-btn--ghost:hover,
.bonisa-btn--ghost:focus {
	background: var(--bonisa-ink);
	color: var(--bonisa-paper);
}

.bonisa-btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* ------------------------------------------------------------------- Marquee */

.bonisa-marquee {
	padding: clamp(20px, 4vw, 40px) 0;
}

.bonisa-marquee__viewport {
	overflow: hidden;
	/* Los logos se desvanecen en los bordes en vez de cortarse de golpe. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.bonisa-marquee__track {
	display: flex;
	align-items: center;
	gap: clamp(32px, 5vw, 64px);
	margin: 0;
	padding: 0;
	list-style: none;
	width: max-content;
}

.bonisa-marquee.is-animated .bonisa-marquee__track {
	animation: bonisa-scroll var(--bonisa-marquee-duration, 40s) linear infinite;
}

.bonisa-marquee.is-paused .bonisa-marquee__track {
	animation-play-state: paused;
}

.bonisa-marquee.is-static .bonisa-marquee__viewport {
	overflow-x: auto;
}

.bonisa-marquee.is-static .bonisa-marquee__track {
	justify-content: center;
	width: 100%;
	flex-wrap: wrap;
}

@keyframes bonisa-scroll {
	from { transform: translate3d(0, 0, 0); }
	/* -50 % porque la lista está duplicada: el salto coincide con el inicio. */
	to { transform: translate3d(-50%, 0, 0); }
}

.bonisa-marquee__item {
	flex: 0 0 auto;
}

.bonisa-marquee__link {
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * Caja de tamaño fijo para todos los logos. Además de dar un ritmo visual parejo,
	 * evita que el ancho de la imagen dependa del ancho del contenedor y el del
	 * contenedor del de la imagen: esa circularidad hacía que los logos se
	 * renderizaran en 0 px de ancho.
	 */
	width: clamp(120px, 16vw, 190px);
	height: clamp(48px, 7vw, 76px);
	padding: 4px 8px;
}

.bonisa-marquee__link img {
	/* La imagen llena la caja y object-fit conserva la proporción: un logo apaisado
	   nunca se deforma junto a uno cuadrado. */
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.bonisa-marquee__link:hover img,
.bonisa-marquee__link:focus img {
	filter: grayscale(0);
	opacity: 1;
}

.bonisa-marquee__fallback {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bonisa-ink-soft);
}

.bonisa-marquee__toggle {
	/*
	 * En flujo normal y alineado a la derecha. Estaba posicionado en absoluto y en
	 * móvil se montaba encima de los logos cuando el título ocupaba dos líneas.
	 */
	display: block;
	margin: 0 0 12px auto;
	min-height: 40px;
	padding: 8px 16px;
	background: transparent;
	border: 1px solid var(--bonisa-line);
	border-radius: 999px;
	font-size: 0.82rem;
	cursor: pointer;
	color: var(--bonisa-ink-soft);
}

.bonisa-marquee__toggle .bonisa-marquee__toggle-play { display: none; }
.bonisa-marquee__toggle[aria-pressed="true"] .bonisa-marquee__toggle-play { display: inline; }
.bonisa-marquee__toggle[aria-pressed="true"] .bonisa-marquee__toggle-pause { display: none; }

@media (prefers-reduced-motion: reduce) {
	/* Sin excepciones: si el sistema pide menos movimiento, no hay animación. */
	.bonisa-marquee.is-animated .bonisa-marquee__track {
		animation: none;
	}
	.bonisa-marquee__viewport {
		overflow-x: auto;
	}
}

/* -------------------------------------------------------- Colecciones y grid */

.bonisa-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--bonisa-gap);
}

.bonisa-filter {
	min-height: 44px;
	padding: 8px 18px;
	border: 1px solid var(--bonisa-line);
	border-radius: 999px;
	background: var(--bonisa-paper);
	color: var(--bonisa-ink);
	font-size: 0.92rem;
	cursor: pointer;
}

.bonisa-filter.is-active {
	background: var(--bonisa-ink);
	color: var(--bonisa-paper);
	border-color: var(--bonisa-ink);
	/* El estado activo no depende solo del color: también cambia el peso. */
	font-weight: 700;
}

.bonisa-grid {
	display: grid;
	gap: var(--bonisa-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

.bonisa-card {
	display: flex;
	flex-direction: column;
	background: var(--bonisa-paper);
	border: 1px solid var(--bonisa-line);
	border-radius: var(--bonisa-radius);
	overflow: hidden;
}

/*
 * Sin esta regla el filtro no oculta nada: el `display: flex` de arriba le gana al
 * `display: none` que el navegador aplica al atributo [hidden], porque una declaración
 * de la hoja del autor pesa más que la del navegador.
 */
.bonisa-card[hidden] {
	display: none;
}

.bonisa-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.bonisa-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 16px;
	background: var(--bonisa-surface);
}

.bonisa-card__media img {
	/* Mismo criterio que en el carrusel: la imagen llena la caja y object-fit se
	   encarga de la proporción, sin depender del tamaño intrínseco. */
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bonisa-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
}

.bonisa-card__title {
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--bonisa-ink);
}

.bonisa-card__brand {
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--bonisa-cta-hover);
}

.bonisa-card__meta {
	font-size: 0.82rem;
	color: var(--bonisa-ink-soft);
}

.bonisa-card__excerpt {
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--bonisa-ink-soft);
}

.bonisa-card__fallback {
	font-weight: 700;
	text-align: center;
	color: var(--bonisa-ink-soft);
}

/* ------------------------------------------------------ Qué hacemos / credenciales */

.bonisa-capabilities {
	display: grid;
	gap: var(--bonisa-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.bonisa-capability {
	padding: clamp(20px, 3vw, 32px);
	background: var(--bonisa-surface);
	border-radius: var(--bonisa-radius);
	border-top: 4px solid var(--bonisa-cta);
}

.bonisa-capability__icon svg {
	width: 34px;
	height: 34px;
	color: var(--bonisa-cta-hover);
}

.bonisa-capability__title {
	margin: 12px 0 8px;
	font-size: 1.16rem;
}

.bonisa-capability__text {
	margin: 0 0 14px;
	max-width: var(--bonisa-measure);
	line-height: 1.6;
	color: var(--bonisa-ink-soft);
}

.bonisa-capability__credential {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bonisa-ink);
}

.bonisa-credentials,
.bonisa-coverage__channels {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Ni las credenciales ni los canales son botones.
 *
 * Antes compartían una píldora con borde y radio de 999px, y el visitante intentaba
 * hacer clic en las tres credenciales del hero. Las credenciales pasaron a línea
 * editorial (ver bonisa-home.css) y los canales a etiqueta suave: se leen como dato,
 * no como acción.
 */
.bonisa-coverage__channel {
	padding: 6px 12px;
	border: 0;
	border-radius: 8px;
	background: rgba(0, 0, 0, .05);
	font-size: .88rem;
	font-weight: 600;
	color: var(--bonisa-ink);
}

/* -------------------------------------------------------------------- ConVino */

.bonisa-convino__title {
	margin: 0 0 4px;
}

.bonisa-convino__subtitle {
	margin: 0 0 16px;
	font-size: 1.1rem;
	color: var(--bonisa-ink-soft);
}

.bonisa-convino__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

/* ---------------------------------------------------------- Formularios comunes */

.bonisa-form-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.bonisa-field--wide {
	grid-column: 1 / -1;
}

.bonisa-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 0.94rem;
	color: var(--bonisa-ink);
}

.bonisa-req {
	color: var(--bonisa-error);
}

.bonisa-field input[type="text"],
.bonisa-field input[type="email"],
.bonisa-field input[type="tel"],
.bonisa-field input[type="url"],
.bonisa-field input[type="date"],
.bonisa-field input[type="number"],
.bonisa-field select,
.bonisa-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--bonisa-line);
	border-radius: 8px;
	background: var(--bonisa-paper);
	color: var(--bonisa-ink);
	/* Nunca por debajo de 16 px: con menos, Safari en iOS hace zoom al enfocar. */
	font-size: max(16px, 1rem);
	font-family: inherit;
}

.bonisa-field textarea {
	min-height: 110px;
	resize: vertical;
}

.bonisa-field--error input,
.bonisa-field--error select,
.bonisa-field--error textarea {
	border-color: var(--bonisa-error);
	/* El error no se marca solo con color: también con borde grueso y texto. */
	border-width: 2px;
}

.bonisa-field-error {
	margin: 6px 0 0;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--bonisa-error);
}

.bonisa-help {
	margin: 6px 0 0;
	font-size: 0.86rem;
	color: var(--bonisa-ink-soft);
	min-height: 1.2em;
}

.bonisa-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.94rem;
	line-height: 1.5;
	cursor: pointer;
}

.bonisa-check input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
}

/*
 * Honeypot: invisible sin usar display:none, que muchos bots detectan y saltan.
 * Se recorta en lugar de desplazarlo a -9999px, para que no pueda ensanchar la página
 * en ningún navegador ni dirección de escritura.
 */
.bonisa-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bonisa-alert {
	padding: 14px 18px;
	margin-bottom: 20px;
	border-radius: 8px;
	border-left: 4px solid;
	font-size: 0.96rem;
}

.bonisa-alert--ok { background: #eef8f1; border-color: var(--bonisa-ok); color: #14562f; }
.bonisa-alert--error { background: #fdeceb; border-color: var(--bonisa-error); color: #8a1f20; }
.bonisa-alert--info { background: color-mix(in srgb, var(--bonisa-accent) 8%, var(--bonisa-paper)); border-color: var(--bonisa-cta-hover); color: #6b4d00; }

.bonisa-form-title { margin: 0 0 6px; }
.bonisa-form-intro { margin: 0 0 24px; color: var(--bonisa-ink-soft); max-width: var(--bonisa-measure); }
.bonisa-form .bonisa-btn { margin-top: 24px; }

/* --------------------------------------------------------------------- Reserva */

.bonisa-fieldset {
	margin: 0 0 28px;
	padding: clamp(18px, 3vw, 28px);
	border: 1px solid var(--bonisa-line);
	border-radius: var(--bonisa-radius);
}

.bonisa-fieldset legend {
	padding: 0 10px;
	font-weight: 700;
	font-size: 1.02rem;
}

.bonisa-packages {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.bonisa-package {
	display: flex;
	gap: 12px;
	padding: 16px;
	border: 2px solid var(--bonisa-line);
	border-radius: var(--bonisa-radius);
	cursor: pointer;
}

.bonisa-package:has(input:checked) {
	border-color: var(--bonisa-cta-hover);
	background: color-mix(in srgb, var(--bonisa-accent) 8%, var(--bonisa-paper));
}

.bonisa-package input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 2px;
}

.bonisa-package__body { display: flex; flex-direction: column; gap: 4px; }
.bonisa-package__name { font-weight: 700; }
.bonisa-package__desc { font-size: 0.88rem; color: var(--bonisa-ink-soft); }
.bonisa-package__price { font-weight: 700; color: var(--bonisa-ink); }

.bonisa-extras {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

.bonisa-summary {
	padding: clamp(18px, 3vw, 28px);
	background: var(--bonisa-surface);
	border-radius: var(--bonisa-radius);
}

.bonisa-summary__title { margin: 0 0 14px; font-size: 1.06rem; }
.bonisa-summary__list { margin: 0; }

.bonisa-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--bonisa-line);
}

.bonisa-summary__row:last-child { border-bottom: 0; }
.bonisa-summary__row dt { margin: 0; color: var(--bonisa-ink-soft); }
.bonisa-summary__row dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.bonisa-summary__row--strong dt,
.bonisa-summary__row--strong dd {
	color: var(--bonisa-ink);
	font-size: 1.12rem;
	font-weight: 800;
}

.bonisa-summary__note {
	margin: 14px 0 0;
	font-size: 0.84rem;
	color: var(--bonisa-ink-soft);
}

.bonisa-policy {
	margin: 22px 0;
	padding: 14px 18px;
	border: 1px solid var(--bonisa-line);
	border-radius: 8px;
}

.bonisa-policy summary {
	cursor: pointer;
	font-weight: 600;
	min-height: 32px;
}

.bonisa-booking__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-top: 24px;
}

/* Ningún componente puede provocar scroll horizontal en móvil estrecho. */
@media (max-width: 420px) {
	.bonisa-grid { grid-template-columns: 1fr; }
	.bonisa-booking__actions .bonisa-btn { width: 100%; }
}

/* ──────────────────────────────────────────────────────── Marcadores ── */

/*
 * Andamiaje visible mientras falta cargar contenido real.
 *
 * Se ven deliberadamente como andamiaje —trama a rayas, borde punteado, gris— porque un
 * marcador que parece diseño terminado no lo reemplaza nadie. Solo aparecen en staging y
 * para quien puede editar; al visitante de producción la sección se le oculta entera.
 */
.bonisa-marcador {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	background:
		repeating-linear-gradient(45deg,
			var(--bonisa-surface) 0 10px,
			color-mix(in srgb, var(--bonisa-line) 60%, transparent) 10px 20px);
	border: 1px dashed var(--bonisa-line);
	border-radius: 8px;
	color: var(--bonisa-ink-soft);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bonisa-marcador--logo {
	width: clamp(120px, 16vw, 190px);
	height: clamp(48px, 7vw, 76px);
}

.bonisa-marcador--linea {
	justify-content: flex-start;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	padding: 8px 12px;
}

.bonisa-marcador--corta { max-width: 60%; }

.bonisa-marquee--marcador { padding-block: 8px; }

.bonisa-marquee--marcador .bonisa-marquee__track {
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	gap: 16px;
}

.bonisa-marcador__titulo {
	margin: 0 0 14px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bonisa-ink-faint, var(--bonisa-ink-soft));
	text-align: center;
}

.bonisa-card--marcador .bonisa-card__media { padding: 24px; }
.bonisa-card--marcador .bonisa-card__body { gap: 8px; }