/* =========================================================================
   Oromáticas · WhatsApp
   Paleta tomada del propio sitio: azul noche #243460, dorado #C79E62,
   blanco cálido #FAF9F8, tinta #1A1C1C.
   Nota de contraste: el dorado sobre fondo claro sólo da 2,4:1, así que
   se reserva para bordes y acentos; para texto se usa su versión oscura.
   ====================================================================== */

.orwa {
	--orwa-navy: #243460;
	--orwa-navy-2: #1a2749;
	--orwa-gold: #c79e62;
	--orwa-gold-soft: #e8d9bf;
	--orwa-gold-ink: #7a5b28;
	--orwa-paper: #faf9f8;
	--orwa-paper-2: #f4f3f2;
	--orwa-ink: #1a1c1c;
	--orwa-ink-2: #5a5f5c;
	--orwa-line: #e6e3df;
	--orwa-wa: #25d366;
	--orwa-shadow: 0 24px 60px -12px rgba(26, 39, 73, .28), 0 8px 20px -8px rgba(26, 39, 73, .16);
	--orwa-ease: cubic-bezier(.22, 1, .36, 1);

	position: fixed;
	right: clamp(16px, 3vw, 28px);
	bottom: clamp(16px, 3vw, 28px);
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--orwa-ink);
	-webkit-font-smoothing: antialiased;
}

.orwa *,
.orwa *::before,
.orwa *::after { box-sizing: border-box; }

.orwa p { margin: 0; }

/* Los estilos de autor ganan al [hidden] de la hoja del navegador, así que
   hay que decirlo explícitamente o los elementos ocultos siguen viéndose. */
.orwa [hidden] { display: none !important; }

/* ---------------------------------------------------------------- Lanzador */

.orwa__fab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 60px;
	padding: 0;
	width: 60px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(145deg, var(--orwa-navy) 0%, var(--orwa-navy-2) 100%);
	color: #fff;
	cursor: pointer;
	box-shadow: var(--orwa-shadow);
	transition: width .42s var(--orwa-ease), transform .28s var(--orwa-ease), box-shadow .28s var(--orwa-ease);
	overflow: hidden;
	/* Aro dorado finísimo: la marca, no el verde de WhatsApp. */
	outline: 1px solid rgba(199, 158, 98, .45);
	outline-offset: -1px;
}

.orwa__fab:hover { transform: translateY(-2px); box-shadow: 0 28px 68px -12px rgba(26, 39, 73, .38); }
.orwa__fab:focus-visible { outline: 3px solid var(--orwa-gold); outline-offset: 3px; }

.orwa__fab-ic {
	position: absolute;
	left: 0;
	top: 0;
	width: 60px;
	height: 60px;
	display: grid;
	place-items: center;
	flex: none;
}

.orwa__fab-ic svg { width: 27px; height: 27px; transition: opacity .2s ease, transform .3s var(--orwa-ease); }
.orwa__ic-x { position: absolute; opacity: 0; transform: rotate(-45deg) scale(.6); }

.orwa__fab-txt {
	white-space: nowrap;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .01em;
	opacity: 0;
	padding-left: 58px;
	padding-right: 22px;
	transition: opacity .26s ease .06s;
	pointer-events: none;
}

/* En escritorio el botón se despliega y se lee. En móvil se queda redondo
   para no tapar contenido ni el carrito. */
@media (hover: hover) and (min-width: 700px) {
	.orwa__fab:hover,
	.orwa__fab:focus-visible { width: 186px; }
	.orwa__fab:hover .orwa__fab-txt,
	.orwa__fab:focus-visible .orwa__fab-txt { opacity: 1; }
}

/* Punto de "en línea" */
.orwa__fab-dot {
	position: absolute;
	top: 11px;
	right: 11px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--orwa-wa);
	box-shadow: 0 0 0 2.5px var(--orwa-navy);
}

.orwa[data-open="true"] .orwa__ic-wa { opacity: 0; transform: rotate(45deg) scale(.6); }
.orwa[data-open="true"] .orwa__ic-x { opacity: 1; transform: rotate(0) scale(1); }
.orwa[data-open="true"] .orwa__fab-dot { opacity: 0; }
.orwa[data-open="true"] .orwa__fab { width: 60px; }
.orwa[data-open="true"] .orwa__fab-txt { opacity: 0; }

/* ------------------------------------------------------------------ Aviso */

.orwa__teaser {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 260px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--orwa-line);
	border-radius: 16px 16px 4px 16px;
	box-shadow: 0 14px 34px -10px rgba(26, 39, 73, .22);
	animation: orwa-pop .5s var(--orwa-ease) both;
}

.orwa__teaser-txt { font-size: 14.5px; color: var(--orwa-ink); }

.orwa__teaser-x {
	flex: none;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--orwa-paper-2);
	color: var(--orwa-ink-2);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.orwa__teaser-x:hover { background: var(--orwa-navy); color: #fff; }
.orwa__teaser-x svg { width: 12px; height: 12px; }
.orwa__teaser-x:focus-visible { outline: 2px solid var(--orwa-gold); outline-offset: 2px; }

/* ------------------------------------------------------------------ Panel */

.orwa__panel {
	width: min(374px, calc(100vw - 32px));
	max-height: min(640px, calc(100vh - 130px));
	display: flex;
	flex-direction: column;
	background: var(--orwa-paper);
	border-radius: 22px;
	box-shadow: var(--orwa-shadow);
	overflow: hidden;
	transform-origin: bottom right;
	animation: orwa-in .42s var(--orwa-ease) both;
}

.orwa__panel[hidden] { display: none; }

@keyframes orwa-in {
	from { opacity: 0; transform: translateY(16px) scale(.94); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes orwa-pop {
	from { opacity: 0; transform: translateY(8px) scale(.96); }
	to   { opacity: 1; transform: none; }
}

/* Cabecera */
.orwa__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 17px 16px 17px 18px;
	background: linear-gradient(140deg, var(--orwa-navy) 0%, var(--orwa-navy-2) 100%);
	color: #fff;
}

/* Filo dorado que separa cabecera y cuerpo */
.orwa__head::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--orwa-gold), transparent);
	opacity: .75;
}

.orwa__avatar {
	flex: none;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(199, 158, 98, .5);
	color: var(--orwa-gold-soft);
}
.orwa__avatar svg { width: 22px; height: 22px; }

.orwa__ident { flex: 1 1 auto; min-width: 0; }

.orwa__brand {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.2;
}

.orwa__sub {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .82);
}

.orwa__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.orwa__dot.is-on { background: var(--orwa-wa); box-shadow: 0 0 0 3px rgba(37, 211, 102, .22); }
.orwa__dot.is-off { background: var(--orwa-gold); box-shadow: 0 0 0 3px rgba(199, 158, 98, .2); }

.orwa__close {
	flex: none;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease;
}
.orwa__close:hover { background: rgba(255, 255, 255, .22); }
.orwa__close:focus-visible { outline: 2px solid var(--orwa-gold); outline-offset: 2px; }
.orwa__close svg { width: 14px; height: 14px; }

/* Cuerpo */
.orwa__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px 16px 16px;
	/* Textura vegetal apenas perceptible, en el dorado de la marca */
	background-image: radial-gradient(circle at 18% 12%, rgba(199, 158, 98, .07) 0, transparent 42%),
	                  radial-gradient(circle at 88% 78%, rgba(36, 52, 96, .05) 0, transparent 46%);
}
.orwa__body:focus { outline: none; }

/* Mensaje de bienvenida */
.orwa__msg {
	position: relative;
	max-width: 96%;
	padding: 13px 15px 20px;
	background: #fff;
	border: 1px solid var(--orwa-line);
	border-radius: 4px 16px 16px 16px;
	box-shadow: 0 2px 8px rgba(26, 39, 73, .05);
	font-size: 14.6px;
	color: #33383a;
}

.orwa__time {
	position: absolute;
	right: 12px;
	bottom: 6px;
	font-size: 10.5px;
	color: #9aa0a0;
}

.orwa__aviso {
	margin-top: 10px;
	padding: 10px 13px;
	font-size: 13.2px;
	line-height: 1.45;
	color: var(--orwa-gold-ink);
	background: rgba(199, 158, 98, .1);
	border-left: 3px solid var(--orwa-gold);
	border-radius: 0 10px 10px 0;
}

/* Tarjeta de contexto (producto / carrito) */
.orwa__ctx {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	padding: 11px 12px;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1.5px solid var(--orwa-gold);
	border-radius: 14px;
	box-shadow: 0 4px 14px -6px rgba(199, 158, 98, .5);
	transition: transform .2s var(--orwa-ease), box-shadow .2s ease;
}
.orwa__ctx:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(199, 158, 98, .6); }
.orwa__ctx:focus-visible { outline: 3px solid var(--orwa-navy); outline-offset: 2px; }

.orwa__ctx-img {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--orwa-paper-2);
}
.orwa__ctx-img--ph { display: grid; place-items: center; color: var(--orwa-gold-ink); }
.orwa__ctx-img--ph svg { width: 22px; height: 22px; }

.orwa__ctx-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.orwa__ctx-kicker {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--orwa-gold-ink);
}
.orwa__ctx-title {
	font-weight: 600;
	font-size: 14.4px;
	line-height: 1.3;
	color: var(--orwa-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.orwa__ctx-meta { font-size: 13px; color: var(--orwa-ink-2); }
.orwa__ctx-go { flex: none; color: var(--orwa-gold-ink); }
.orwa__ctx-go svg { width: 16px; height: 16px; display: block; }

/* Consultas rápidas */
.orwa__label {
	margin: 18px 0 9px;
	font-size: 10.8px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8d9291;
}

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

.orwa__quick a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 13px;
	min-height: 46px;
	text-decoration: none;
	color: var(--orwa-ink);
	font-size: 14.3px;
	font-weight: 500;
	background: #fff;
	border: 1px solid var(--orwa-line);
	border-radius: 12px;
	transition: border-color .18s ease, background .18s ease, transform .18s var(--orwa-ease);
}
.orwa__quick a:hover {
	border-color: var(--orwa-gold);
	background: #fffdf9;
	transform: translateX(2px);
}
.orwa__quick a:focus-visible { outline: 3px solid var(--orwa-navy); outline-offset: 2px; }

.orwa__quick-ic {
	flex: none;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: rgba(36, 52, 96, .07);
	color: var(--orwa-navy);
}
.orwa__quick-ic svg { width: 17px; height: 17px; }
.orwa__quick a span:nth-child(2) { flex: 1 1 auto; }
.orwa__quick-go { flex: none; color: #b9bdbc; transition: color .18s ease, transform .18s ease; }
.orwa__quick-go svg { width: 14px; height: 14px; display: block; }
.orwa__quick a:hover .orwa__quick-go { color: var(--orwa-gold-ink); transform: translateX(2px); }

/* Pie: redacción libre */
.orwa__foot {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 12px 10px;
	background: #fff;
	border-top: 1px solid var(--orwa-line);
}

.orwa__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 15px;
	font-size: 14.6px;
	font-family: inherit;
	color: var(--orwa-ink);
	background: var(--orwa-paper-2);
	border: 1px solid transparent;
	border-radius: 999px;
	transition: border-color .2s ease, background .2s ease;
}
.orwa__input::placeholder { color: #9aa0a0; }
.orwa__input:focus {
	outline: none;
	background: #fff;
	border-color: var(--orwa-gold);
	box-shadow: 0 0 0 3px rgba(199, 158, 98, .18);
}

.orwa__send {
	flex: none;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--orwa-navy);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease, transform .2s var(--orwa-ease);
}
.orwa__send:hover { background: var(--orwa-gold); color: var(--orwa-navy); transform: scale(1.05); }
.orwa__send:focus-visible { outline: 3px solid var(--orwa-gold); outline-offset: 2px; }
.orwa__send svg { width: 19px; height: 19px; }

.orwa__legal {
	flex: none;
	padding: 0 14px 11px;
	background: #fff;
	font-size: 11.2px;
	color: #9aa0a0;
	text-align: center;
}

/* ----------------------------------------------------------------- Móvil */

@media (max-width: 560px) {
	.orwa {
		right: 14px;
		left: 14px;
		bottom: max(14px, env(safe-area-inset-bottom));
		align-items: flex-end;
	}
	.orwa__panel {
		width: 100%;
		max-height: min(78vh, calc(100vh - 110px));
		border-radius: 20px;
	}
	.orwa__teaser { max-width: 100%; }
	.orwa__fab { width: 58px; height: 58px; }
	.orwa__fab-ic { width: 58px; height: 58px; }
}

/* Pantallas muy bajas: el panel no debe comerse la ventana */
@media (max-height: 560px) {
	.orwa__panel { max-height: calc(100vh - 96px); }
}

/* --------------------------------------------------- Accesibilidad / motor */

@media (prefers-reduced-motion: reduce) {
	.orwa *,
	.orwa *::before,
	.orwa *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.orwa__fab:hover { transform: none; }
}

/* Impresión: el widget no es contenido */
@media print { .orwa { display: none !important; } }