/* ---------------------------------------------------------
   Botones del sitio (pedido de Dario, 2026-10-26): tarjeta blanca,
   texto gris en mayúsculas, pestaña de color a la izquierda y la
   esquina inferior derecha más redondeada. El color de la pestaña
   sale del elemento donde está el botón (--boton-acento).

   Se carga al final y con `body:not(#datio-sin-id)` delante (suma especificidad de id) para ganarle a los
   estilos viejos de cada sección sin usar !important. Para sumar un
   botón nuevo: agregar su selector a la lista de abajo.
   --------------------------------------------------------- */

:root {
	--boton-acento: var(--datio-brand-teal);
	--boton-fondo: #ffffff;
	--boton-texto: #5f6368;
	--boton-texto-hover: #202124;
}

/* Color de la pestaña según el elemento */
.datio-bloque--teal { --boton-acento: var(--datio-brand-teal); }
.datio-bloque--yellow { --boton-acento: var(--datio-brand-yellow); }
.datio-bloque--red { --boton-acento: var(--datio-brand-red); }
.datio-bloque--white { --boton-acento: var(--datio-brand-teal); }
.datio-abonos__plan,
.datio-pos-plan { --boton-acento: var(--acento); }

body:not(#datio-sin-id) :is(
	a.datio-abonos__btn,
	a.datio-abonos__plan-cta,
	a.datio-pos-plan__cta,
	a.datio-servicio__btn,
	a.datio-casos__btn,
	.datio-diag__btn,
	.datio-plan__cta,
	.datio-diseno-web__desktop-btn,
	.datio-diseno-web__desktop-cta,
	.datio-diseno-web__callout-cta,
	.datio-bloque__formulario button,
	.datio-consulta-dominio__row button,
	.datio-bloque-browser__cta
) {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 26px 12px 34px;
	border: 0;
	border-radius: 6px 6px 22px 6px;
	background: var(--boton-fondo);
	color: var(--boton-texto);
	font-family: var(--datio-font-display);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.55);
	filter: none;
	cursor: pointer;
	overflow: hidden;
	transition:
		transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.18s ease,
		color 0.15s ease;
}

/* La pestaña de color */
body:not(#datio-sin-id) :is(
	a.datio-abonos__btn,
	a.datio-abonos__plan-cta,
	a.datio-pos-plan__cta,
	a.datio-servicio__btn,
	a.datio-casos__btn,
	.datio-diag__btn,
	.datio-plan__cta,
	.datio-diseno-web__desktop-btn,
	.datio-diseno-web__desktop-cta,
	.datio-diseno-web__callout-cta,
	.datio-bloque__formulario button,
	.datio-consulta-dominio__row button,
	.datio-bloque-browser__cta
)::before {
	content: '';
	position: absolute;
	left: 0;
	top: 22%;
	bottom: 22%;
	width: 9px;
	border-radius: 0 4px 4px 0;
	background: var(--boton-acento);
	transition: width 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Secundarios: misma forma, pestaña neutra */
body:not(#datio-sin-id) :is(
	a.datio-abonos__btn--sec,
	a.datio-servicio__btn--sec,
	a.datio-casos__btn--sec,
	.datio-diag__btn--fantasma,
	.datio-plan__cta--outline
) {
	--boton-acento: #b8bcc2;
	background: var(--boton-fondo);
	border: 0;
}

@media (hover: hover) and (pointer: fine) {
	body:not(#datio-sin-id) :is(
		a.datio-abonos__btn,
		a.datio-abonos__plan-cta,
		a.datio-pos-plan__cta,
		a.datio-servicio__btn,
		a.datio-casos__btn,
		.datio-diag__btn,
		.datio-plan__cta,
		.datio-diseno-web__desktop-btn,
		.datio-diseno-web__desktop-cta,
		.datio-diseno-web__callout-cta,
		.datio-bloque__formulario button,
		.datio-consulta-dominio__row button,
		.datio-bloque-browser__cta
	):hover {
		transform: translateY(-2px);
		color: var(--boton-texto-hover);
		box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.6);
		filter: none;
	}

	body:not(#datio-sin-id) :is(
		a.datio-abonos__btn,
		a.datio-abonos__plan-cta,
		a.datio-pos-plan__cta,
		a.datio-servicio__btn,
		a.datio-casos__btn,
		.datio-diag__btn,
		.datio-plan__cta,
		.datio-diseno-web__desktop-btn,
		.datio-diseno-web__desktop-cta,
		.datio-diseno-web__callout-cta,
		.datio-bloque__formulario button,
		.datio-consulta-dominio__row button,
		.datio-bloque-browser__cta
	):hover::before {
		width: 13px;
	}
}

body:not(#datio-sin-id) :is(
	a.datio-abonos__btn,
	a.datio-abonos__plan-cta,
	a.datio-pos-plan__cta,
	a.datio-servicio__btn,
	a.datio-casos__btn,
	.datio-diag__btn,
	.datio-plan__cta,
	.datio-diseno-web__desktop-btn,
	.datio-diseno-web__desktop-cta,
	.datio-diseno-web__callout-cta,
	.datio-bloque__formulario button,
	.datio-consulta-dominio__row button,
	.datio-bloque-browser__cta
):active {
	transform: scale(0.97);
}

body:not(#datio-sin-id) :is(
	a.datio-abonos__btn,
	a.datio-abonos__plan-cta,
	a.datio-pos-plan__cta,
	a.datio-servicio__btn,
	a.datio-casos__btn,
	.datio-diag__btn,
	.datio-plan__cta,
	.datio-diseno-web__desktop-btn,
	.datio-diseno-web__desktop-cta,
	.datio-diseno-web__callout-cta,
	.datio-bloque__formulario button,
	.datio-consulta-dominio__row button,
	.datio-bloque-browser__cta
):focus-visible {
	outline: 3px solid var(--boton-acento);
	outline-offset: 3px;
}

body:not(#datio-sin-id) :is(
	.datio-diag__btn,
	.datio-plan__cta,
	.datio-bloque__formulario button,
	.datio-consulta-dominio__row button
):disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* Íconos dentro del botón: toman el gris del texto */
body:not(#datio-sin-id) :is(.datio-diseno-web__callout-cta, .datio-bloque-browser__cta) svg {
	color: currentColor;
	fill: none;
	stroke: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	body:not(#datio-sin-id) :is(
		a.datio-abonos__btn,
		a.datio-abonos__plan-cta,
		a.datio-pos-plan__cta,
		a.datio-servicio__btn,
		a.datio-casos__btn,
		.datio-diag__btn,
		.datio-plan__cta,
		.datio-diseno-web__desktop-btn,
		.datio-diseno-web__desktop-cta,
		.datio-diseno-web__callout-cta,
		.datio-bloque__formulario button,
		.datio-consulta-dominio__row button,
		.datio-bloque-browser__cta
	),
	body:not(#datio-sin-id) :is(
		a.datio-abonos__btn,
		a.datio-abonos__plan-cta,
		a.datio-pos-plan__cta,
		a.datio-servicio__btn,
		a.datio-casos__btn,
		.datio-diag__btn,
		.datio-plan__cta,
		.datio-diseno-web__desktop-btn,
		.datio-diseno-web__desktop-cta,
		.datio-diseno-web__callout-cta,
		.datio-bloque__formulario button,
		.datio-consulta-dominio__row button,
		.datio-bloque-browser__cta
	)::before {
		transition: none;
	}
}